前期准备

设计工具：Axure RP/MasterGo

设计参考

最新版rp设计;

项目重构

• umi3-umi4
• Ant-pro6
• Pro-compoents2
• antd4

项目初始化

➜  yarn create umi wdp-fe
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-umi@4.0.28" with binaries:
      - create-umi
[####################################################################################] 84/84? Pick Um
✔ Pick Umi App Template › Ant Design Pro
✔ Pick Npm Client › yarn
✔ Pick Npm Registry › taobao


cd wdp-fe
➜  wdp-fe git:(main) ✗ code .

查看配置后，发现是最新版本，有点问题，还是用回pro5和umi3版本；

  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-components": "^2.0.1",
    "@umijs/max": "^4.0.28",
    "antd": "^4.20.7"
  },

再次初始化,多次初始化后也没有看到选择版本功能；最后直接拷贝antd-pro 5.2.0版本

Stomp&Websocket重构

初始化及封装

export function disconnectStomp() {
  if (stompClient) {
    stompClient.disconnect(() => {
      console.log('Disconnected');
    });
  }
}

export function connectStomp() {
  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  const host = isPro ? window.location.host : STOMP_URL;
  const wsApi = `${protocol}${host.replace('http://', '')}${NET_CONF.WEBSOCKET_API}`;
  disconnectStomp(); //先断开之前链接
  stompClient = Stomp.over(new WebSocket(wsApi));
  const connectHeader = {
    [LOCAL_STORAGE.TOKEN]: localStorage.getItem(LOCAL_STORAGE.TOKEN) || '',
  };
  stompClient.connect(
    connectHeader,
    () => {
      console.log('---onConnect----Success--');
      startSubscriptions();
    },
    (error: any) => {
      console.log('---onConnect---Error--', error);
    },
  );
  stompClient.debug = (str) => {
    console.log('-------debug--------', str);
  };
}

调试工具

websocket-debug-tool (opens new window)【推荐】

stompjs (opens new window)库中自带的chat项目

后台任务更新

功能页面

自定义发布订阅

封装

src/eventBus.ts

import mitt from 'mitt';
export default mitt();

js中发送

export async function startSubscriptions() {
  for (const subscription of topicList) {
    stompClient.subscribe(subscription, (res: any) => {
      switch (subscription) {
        case '/events/requests':
          const resData = res as API.TaskStepOperListItem;
          eventBus.emit(EVENT.TASK_INFO, resData);
          break;
        default:
          break;
      }
    });
  }
}

页面接受更新

  useEffect(() => {
    const handleStorage = (event: any) => {
      dispatch({
        type: 'task/updateTaskInfo',
        payload: {
          taskInfo: event,
        },
      });
    };
    eventBus.on(EVENT.TASK_INFO, handleStorage);
    return () => {
      eventBus.off(EVENT.TASK_INFO, handleStorage);
    };
  }, [dispatch]);

完全销毁

src/layouts/CommonLayout/index.tsx

import eventBus from '@/eventBus';
const CommonLayout: React.FC<IRouteComponentProps> = ({ children }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    const getData = async () => {
      dispatch({
        type: 'common/getAllClusters',
        payload: {},
      });
    };
    connectStomp();
    getData();
    return () => {
      dispatch({
        type: 'common/clear',
        payload: {},
      });
      disconnectStomp();
      eventBus.all.clear();
    };
  }, [dispatch]);
  return <>{children}</>;
};
export default CommonLayout;

核心更新进度条及状态机制

reducers: {
    clear(state) {
      return {
        ...state,
        ...defaultState,
      };
    },
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
    updateTaskInfo(state, { payload }) {
      const { taskInfo } = payload;
      //@ts-ignore
      const requestList = [...state.requestList];
      //@ts-ignore
      const hostList = [...state.hostList];
      //@ts-ignore
      const taskList = [...state.taskList];
      if (taskInfo?.requestId) {
        const taskInfoObj = requestList?.find((item) => item.requestId === taskInfo.requestId);
        const taskInfoIndex = requestList?.findIndex(
          (item) => item.requestId === taskInfo.requestId,
        );
        if ((taskInfoIndex as number) > -1) {
          requestList?.splice(taskInfoIndex as number, 1, { ...taskInfoObj, ...taskInfo });
        }
      }
      const tasks = taskInfo?.Tasks;
      const taskIds = tasks.map((item: any) => item.id + '');
      hostList.map((item0) => {
        const taskListAll = [...item0?.taskList];
        taskListAll.map((item2: any) => {
          if (taskIds.includes(item2.taskId)) {
            const taskNew = tasks.find((item3: any) => item3.id == item2.taskId);
            item2.status = taskNew.status;
          }
          return item2;
        });
        const progerss = getHostProgress(taskListAll);
        const status = getHostStatus(taskListAll);
        item0.taskList = taskListAll;
        item0.hostPrecent = progerss;
        item0.hostStatus = status;
        return item0;
      });
      taskList.map((item) => {
        if (taskIds.includes(item.taskId)) {
          const itemNew = tasks.find((item2: any) => item2.id == item.taskId); //stomp返回的是id number
          item.status = itemNew.status;
        }
        return item;
      });
      return {
        ...state,
        taskInfo,
        requestList,
        hostList,
        taskList,
        isRunningCount: handleRunningCount(requestList),
      };
    },
  },

部署

临时部署

zdeploy.js参数备份：

/*
 * @Author: samy
 * @email: yessz#foxmail.com
 * @time: 2021-02-24 09:25:03
 * @modAuthor: samy
 * @modTime: 2023-03-04 18:59:26
 * @desc: 部署脚本配置
 * scp ./dist.zip root@10.45.151.131:/usr/lib/wdp-server/
 * scp ./dist.zip wdp@10.45.151.131:/tmp/
 * @Copyright © 2015~2021 BDP FE
 */
module.exports = [
  {
    id: 'dev',
    name: '开发环境',
    host: '10.45.xxx.xxx',
    username: 'xx',
    password: 'xxx',
    port: '22',
    localCmd: 'yarn build && zip -r dist.zip dist/',
    serverCmd: 'cd /usr/lib/wdp-server/ && rm -rf web-bak && mv -f web/ web-bak/',
    localScp: 'dist.zip',
    serverScp: '/usr/lib/wdp-server/dist.zip',
    serverHookCmd: 'cd /usr/lib/wdp-server/ && unzip dist.zip && mv dist web',
    localHookCmd: 'rm -rf dist.zip',
  },
];