添加依赖管理

2025-05-23 23:06:06 +08:00 · 2021-10-24 17:07:06 +08:00 · 2021-10-24 17:07:06 +08:00 · 0c2a2af308
commit 0c2a2af308
parent bd8953ea81
12 changed files with 270 additions and 159 deletions
--- a/back/api/dependence.ts
+++ b/back/api/dependence.ts
@ -87,6 +87,24 @@ export default (app: Router) => {
    },
  );

+  route.delete(
+    '/dependencies/force',
+    celebrate({
+      body: Joi.array().items(Joi.string().required()),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const dependenceService = Container.get(DependenceService);
+        const data = await dependenceService.removeDb(req.body);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        logger.error('🔥 error: %o', e);
+        return next(e);
+      }
+    },
+  );
+
  route.get(
    '/dependencies/:id',
    celebrate({
--- a/back/data/dependence.ts
+++ b/back/data/dependence.ts
@ -24,6 +24,9 @@ export enum DependenceStatus {
  'installing',
  'installed',
  'installFailed',
+  'removing',
+  'removed',
+  'removeFailed',
 }

 export enum DependenceTypes {
@ -33,13 +36,13 @@ export enum DependenceTypes {
 }

 export enum InstallDependenceCommandTypes {
-  'pnpm install -g',
+  'npm i -g',
  'pip3 install',
  'apk add --no-cache',
 }

 export enum unInstallDependenceCommandTypes {
-  'pnpm uninstall -g',
+  'npm uninstall -g',
  'pip3 uninstall',
  'apk del',
 }
--- a/back/loaders/initData.ts
+++ b/back/loaders/initData.ts
@ -26,8 +26,8 @@ export default async () => {
    { multi: true },
  );

-  // 初始化时安装所有依赖
-  dependenceDb.find({}).exec((err, docs) => {
+  // 初始化时安装所有处于安装中，安装成功，安装失败的依赖
+  dependenceDb.find({ status: { $in: [0, 1, 2] } }).exec((err, docs) => {
    const groups = _.groupBy(docs, 'type');
    for (const key in groups) {
      if (Object.prototype.hasOwnProperty.call(groups, key)) {
--- a/back/loaders/sock.ts
+++ b/back/loaders/sock.ts
@ -30,6 +30,8 @@ export default async ({ server }: { server: Server }) => {
        });

        return;
+      } else {
+        conn.write(JSON.stringify({ type: 'ping', message: '404' }));
      }
    }

--- a/back/services/dependence.ts
+++ b/back/services/dependence.ts
@ -85,11 +85,15 @@ export default class DependenceService {

  public async remove(ids: string[]) {
    return new Promise((resolve: any) => {
-      this.dependenceDb.find({ _id: { $in: ids } }).exec((err, docs) => {
-        this.installOrUninstallDependencies(docs, false);
-        this.removeDb(ids);
-        resolve();
-      });
+      this.dependenceDb.update(
+        { _id: { $in: ids } },
+        { $set: { status: DependenceStatus.removing, log: [] } },
+        { multi: true, returnUpdatedDocs: true },
+        async (err, num, docs: Dependence[]) => {
+          this.installOrUninstallDependencies(docs, false);
+          resolve(docs);
+        },
+      );
    });
  }

@ -189,19 +193,20 @@ export default class DependenceService {
        ? InstallDependenceCommandTypes
        : unInstallDependenceCommandTypes
    )[dependencies[0].type as any];
+    const actionText = isInstall ? '安装' : '删除';
    const depIds = dependencies.map((x) => x._id) as string[];
    const cp = spawn(`${depRunCommand} ${depNames}`, { shell: '/bin/bash' });
    const startTime = Date.now();
    this.sockService.sendMessage({
      type: 'installDependence',
-      message: `开始安装依赖 ${depNames}，开始时间 ${new Date(
+      message: `开始${actionText}依赖 ${depNames}，开始时间 ${new Date(
        startTime,
      ).toLocaleString()}`,
      references: depIds,
    });
    this.updateLog(
      depIds,
-      `开始安装依赖 ${depNames}，开始时间 ${new Date(
+      `开始${actionText}依赖 ${depNames}，开始时间 ${new Date(
        startTime,
      ).toLocaleString()}\n`,
    );
@ -211,7 +216,7 @@ export default class DependenceService {
        message: data.toString(),
        references: depIds,
      });
-      isInstall && this.updateLog(depIds, data.toString());
+      this.updateLog(depIds, data.toString());
    });

    cp.stderr.on('data', (data) => {
@ -220,7 +225,7 @@ export default class DependenceService {
        message: data.toString(),
        references: depIds,
      });
-      isInstall && this.updateLog(depIds, data.toString());
+      this.updateLog(depIds, data.toString());
    });

    cp.on('error', (err) => {
@ -229,34 +234,53 @@ export default class DependenceService {
        message: JSON.stringify(err),
        references: depIds,
      });
-      isInstall && this.updateLog(depIds, JSON.stringify(err));
+      this.updateLog(depIds, JSON.stringify(err));
    });

    cp.on('close', (code) => {
      const endTime = Date.now();
+      const isSucceed = code === 0;
+      const resultText = isSucceed ? '成功' : '失败';
+
      this.sockService.sendMessage({
        type: 'installDependence',
-        message: `依赖安装结束，结束时间 ${new Date(
+        message: `依赖${actionText}${resultText}，结束时间 ${new Date(
          endTime,
        ).toLocaleString()}，耗时 ${(endTime - startTime) / 1000} 秒`,
        references: depIds,
      });
-      isInstall &&
-        this.updateLog(
-          depIds,
-          `依赖安装结束，结束时间 ${new Date(endTime).toLocaleString()}，耗时 ${
-            (endTime - startTime) / 1000
-          } 秒`,
-        );
-      isInstall &&
-        this.dependenceDb.update(
-          { _id: { $in: depIds } },
-          {
-            $set: { status: DependenceStatus.installed },
-            $unset: { pid: true },
-          },
-          { multi: true },
-        );
+      this.updateLog(
+        depIds,
+        `依赖${actionText}${resultText}，结束时间 ${new Date(
+          endTime,
+        ).toLocaleString()}，耗时 ${(endTime - startTime) / 1000} 秒`,
+      );
+
+      let status = null;
+      if (isSucceed) {
+        status = isInstall
+          ? DependenceStatus.installed
+          : DependenceStatus.removed;
+      } else {
+        status = isInstall
+          ? DependenceStatus.installFailed
+          : DependenceStatus.removeFailed;
+      }
+      this.dependenceDb.update(
+        { _id: { $in: depIds } },
+        {
+          $set: { status },
+          $unset: { pid: true },
+        },
+        { multi: true },
+      );
+
+      // 如果删除依赖成功，3秒后删除数据库记录
+      if (isSucceed && !isInstall) {
+        setTimeout(() => {
+          this.removeDb(depIds);
+        }, 5000);
+      }
    });
  }
 }
--- a/src/layouts/defaultProps.tsx
+++ b/src/layouts/defaultProps.tsx
@ -7,6 +7,7 @@ import {
  FolderOutlined,
  RadiusSettingOutlined,
  ControlOutlined,
+  ContainerOutlined,
 } from '@ant-design/icons';

 export default {
@ -51,7 +52,7 @@ export default {
      {
        path: '/dependence',
        name: '依赖管理',
-        icon: <FormOutlined />,
+        icon: <ContainerOutlined />,
        component: '@/pages/dependence/index',
      },
      {
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@ -26,6 +26,7 @@ export default function (props: any) {
  const [loading, setLoading] = useState<boolean>(true);
  const [systemInfo, setSystemInfo] = useState<{ isInitialized: boolean }>();
  const ws = useRef<any>(null);
+  const [socketMessage, setSocketMessage] = useState<any>();

  const logout = () => {
    request.post(`${config.apiPrefix}logout`).then(() => {
@ -124,6 +125,7 @@ export default function (props: any) {
  }, []);

  useEffect(() => {
+    if (!user) return;
    ws.current = new SockJS(
      `${location.origin}/api/ws?token=${localStorage.getItem(config.authKey)}`,
    );
@ -131,11 +133,14 @@ export default function (props: any) {
    ws.current.onmessage = (e: any) => {
      try {
        const data = JSON.parse(e.data);
-        if (data && data.message === 'hanhh') {
-          console.log('websocket连接成功', e);
-        } else {
-          console.log('websocket连接失败', e);
+        if (data.type === 'ping') {
+          if (data && data.message === 'hanhh') {
+            console.log('websocket连接成功', e);
+          } else {
+            console.log('websocket连接失败', e);
+          }
        }
+        setSocketMessage(data);
      } catch (error) {
        console.log('websocket连接失败', e);
      }
@ -146,7 +151,7 @@ export default function (props: any) {
    return () => {
      wsCurrent.close();
    };
-  }, []);
+  }, [user]);

  if (['/login', '/initialization'].includes(props.location.pathname)) {
    document.title = `${
@ -246,7 +251,7 @@ export default function (props: any) {
          user,
          reloadUser,
          reloadTheme: setTheme,
-          ws: ws.current,
+          socketMessage,
        });
      })}
    </ProLayout>
--- a/src/pages/dependence/index.tsx
+++ b/src/pages/dependence/index.tsx
@ -37,6 +37,9 @@ enum Status {
  '安装中',
  '已安装',
  '安装失败',
+  '删除中',
+  '已删除',
+  '删除失败',
 }

 enum StatusColor {
@ -45,7 +48,7 @@ enum StatusColor {
  'error',
 }

-const Dependence = ({ headerStyle, isPhone, ws }: any) => {
+const Dependence = ({ headerStyle, isPhone, socketMessage }: any) => {
  const columns: any = [
    {
      title: '序号',
@ -69,7 +72,10 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
      render: (text: string, record: any, index: number) => {
        return (
          <Space size="middle" style={{ cursor: 'text' }}>
-            <Tag color={StatusColor[record.status]} style={{ marginRight: 0 }}>
+            <Tag
+              color={StatusColor[record.status % 3]}
+              style={{ marginRight: 0 }}
+            >
              {Status[record.status]}
            </Tag>
          </Space>
@ -93,20 +99,21 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
        const isPc = !isPhone;
        return (
          <Space size="middle">
-            {record.status !== Status.安装中 && (
-              <>
-                <Tooltip title={isPc ? '重新安装' : ''}>
-                  <a onClick={() => reInstallDependence(record, index)}>
-                    <BugOutlined />
-                  </a>
-                </Tooltip>
-                <Tooltip title={isPc ? '删除' : ''}>
-                  <a onClick={() => deleteDependence(record, index)}>
-                    <DeleteOutlined />
-                  </a>
-                </Tooltip>
-              </>
-            )}
+            {record.status !== Status.安装中 &&
+              record.status !== Status.删除中 && (
+                <>
+                  <Tooltip title={isPc ? '重新安装' : ''}>
+                    <a onClick={() => reInstallDependence(record, index)}>
+                      <BugOutlined />
+                    </a>
+                  </Tooltip>
+                  <Tooltip title={isPc ? '删除' : ''}>
+                    <a onClick={() => deleteDependence(record, index)}>
+                      <DeleteOutlined />
+                    </a>
+                  </Tooltip>
+                </>
+              )}
            <Tooltip title={isPc ? '日志' : ''}>
              <a
                onClick={() => {
@ -171,10 +178,7 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
          .delete(`${config.apiPrefix}dependencies`, { data: [record._id] })
          .then((data: any) => {
            if (data.code === 200) {
-              message.success('删除成功');
-              const result = [...value];
-              result.splice(index, 1);
-              setValue(result);
+              handleDependence(data.data[0]);
            } else {
              message.error(data);
            }
@ -254,13 +258,12 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
  const delDependencies = () => {
    Modal.confirm({
      title: '确认删除',
-      content: <>确认删除选中的变量吗</>,
+      content: <>确认删除选中的依赖吗</>,
      onOk() {
        request
          .delete(`${config.apiPrefix}dependencies`, { data: selectedRowIds })
          .then((data: any) => {
            if (data.code === 200) {
-              message.success('批量删除成功');
              setSelectedRowIds([]);
              getDependencies();
            } else {
@ -312,25 +315,41 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
  }, [logDependence]);

  useEffect(() => {
-    ws.onmessage = (e: any) => {
-      const { type, message, references } = JSON.parse(e.data);
-      if (
-        type === 'installDependence' &&
-        message === '依赖安装结束' &&
-        references.length > 0
-      ) {
-        const result = [...value];
-        for (let i = 0; i < references.length; i++) {
-          const index = value.findIndex((x) => x._id === references[i]);
-          result.splice(index, 1, {
-            ...result[index],
-            status: Status.已安装,
-          });
-        }
-        setValue(result);
+    if (!socketMessage) return;
+    const { type, message, references } = socketMessage;
+    if (
+      type === 'installDependence' &&
+      message.includes('结束时间') &&
+      references.length > 0
+    ) {
+      let status;
+      if (message.includes('安装')) {
+        status = message.includes('成功') ? Status.已安装 : Status.安装失败;
+      } else {
+        status = message.includes('成功') ? Status.已删除 : Status.删除失败;
      }
-    };
-  }, [value]);
+      const result = [...value];
+      for (let i = 0; i < references.length; i++) {
+        const index = value.findIndex((x) => x._id === references[i]);
+        result.splice(index, 1, {
+          ...result[index],
+          status,
+        });
+      }
+      setValue(result);
+
+      if (status === Status.已删除) {
+        setTimeout(() => {
+          const _result = [...value];
+          for (let i = 0; i < references.length; i++) {
+            const index = value.findIndex((x) => x._id === references[i]);
+            _result.splice(index, 1);
+          }
+          setValue(_result);
+        }, 5000);
+      }
+    }
+  }, [socketMessage]);

  const panelContent = () => (
    <>
@ -394,13 +413,13 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
        tabPosition="top"
        onChange={onTabChange}
      >
-        <Tabs.TabPane tab="nodejs" key="nodejs">
+        <Tabs.TabPane tab="NodeJs" key="nodejs">
          {panelContent()}
        </Tabs.TabPane>
-        <Tabs.TabPane tab="python3" key="python3">
+        <Tabs.TabPane tab="Python3" key="python3">
          {panelContent()}
        </Tabs.TabPane>
-        <Tabs.TabPane tab="linux" key="linux">
+        <Tabs.TabPane tab="Linux" key="linux">
          {panelContent()}
        </Tabs.TabPane>
      </Tabs>
@ -412,11 +431,18 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
      />
      <DependenceLogModal
        visible={isLogModalVisible}
-        handleCancel={() => {
+        handleCancel={(needRemove?: boolean) => {
          setIsLogModalVisible(false);
-          getDependenceDetail(logDependence);
+          if (needRemove) {
+            const index = value.findIndex((x) => x._id === logDependence._id);
+            const result = [...value];
+            result.splice(index, 1);
+            setValue(result);
+          } else if ([...value].map((x) => x._id).includes(logDependence._id)) {
+            getDependenceDetail(logDependence);
+          }
        }}
-        ws={ws}
+        socketMessage={socketMessage}
        dependence={logDependence}
      />
    </PageContainer>
--- a/src/pages/dependence/logModal.tsx
+++ b/src/pages/dependence/logModal.tsx
@ -12,21 +12,23 @@ const DependenceLogModal = ({
  dependence,
  handleCancel,
  visible,
-  ws,
+  socketMessage,
 }: {
  dependence?: any;
  visible: boolean;
-  handleCancel: () => void;
-  ws: any;
+  handleCancel: (needRemove?: boolean) => void;
+  socketMessage: any;
 }) => {
  const [value, setValue] = useState<string>('');
  const [executing, setExecuting] = useState<any>(true);
  const [isPhone, setIsPhone] = useState(false);
-  const [loading, setLoading] = useState<any>(true);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isRemoveFailed, setIsRemoveFailed] = useState(false);
+  const [removeLoading, setRemoveLoading] = useState<boolean>(false);

-  const cancel = () => {
+  const cancel = (needRemove: boolean = false) => {
    localStorage.removeItem('logDependence');
-    handleCancel();
+    handleCancel(needRemove);
  };

  const titleElement = () => {
@ -49,7 +51,8 @@ const DependenceLogModal = ({
        if (localStorage.getItem('logDependence') === dependence._id) {
          const log = (data.data.log || []).join('\n') as string;
          setValue(log);
-          setExecuting(!log.includes('依赖安装结束'));
+          setExecuting(!log.includes('结束时间'));
+          setIsRemoveFailed(log.includes('删除失败'));
        }
      })
      .finally(() => {
@ -57,23 +60,48 @@ const DependenceLogModal = ({
      });
  };

+  const forceRemoveDependence = () => {
+    setRemoveLoading(true);
+    request
+      .delete(`${config.apiPrefix}dependencies/force`, {
+        data: [dependence._id],
+      })
+      .then((data: any) => {
+        cancel(true);
+      })
+      .finally(() => {
+        setRemoveLoading(false);
+      });
+  };
+
+  const footerClick = () => {
+    if (isRemoveFailed) {
+      forceRemoveDependence();
+    } else {
+      cancel();
+    }
+  };
+
  useEffect(() => {
    if (dependence) {
      getDependenceLog();
-      ws.onmessage = (e: any) => {
-        const { type, message, references } = JSON.parse(e.data);
-        if (
-          type === 'installDependence' &&
-          message === '依赖安装结束' &&
-          references.length > 0
-        ) {
-          setExecuting(false);
-        }
-        setValue(`${value} \n ${message}`);
-      };
    }
  }, [dependence]);

+  useEffect(() => {
+    if (!socketMessage) return;
+    const { type, message, references } = socketMessage;
+    if (
+      type === 'installDependence' &&
+      message.includes('结束时间') &&
+      references.length > 0
+    ) {
+      setExecuting(false);
+      setIsRemoveFailed(message.includes('删除失败'));
+    }
+    setValue(`${value} \n ${message}`);
+  }, [socketMessage]);
+
  useEffect(() => {
    setIsPhone(document.body.clientWidth < 768);
  }, []);
@ -93,8 +121,8 @@ const DependenceLogModal = ({
      onOk={() => cancel()}
      onCancel={() => cancel()}
      footer={[
-        <Button type="primary" onClick={() => cancel()}>
-          知道了
+        <Button type="primary" onClick={footerClick} loading={removeLoading}>
+          {isRemoveFailed ? '强制删除' : '知道了'}
        </Button>,
      ]}
    >
--- a/src/pages/dependence/modal.tsx
+++ b/src/pages/dependence/modal.tsx
@ -51,9 +51,7 @@ const DependenceModal = ({
          data: payload,
        },
      );
-      if (code === 200) {
-        message.success(dependence ? '更新依赖成功' : '添加依赖成功');
-      } else {
+      if (code !== 200) {
        message.error(data);
      }
      setLoading(false);
--- a/src/pages/setting/checkUpdate.tsx
+++ b/src/pages/setting/checkUpdate.tsx
@ -6,8 +6,9 @@ import { version } from '../../version';

 const { Countdown } = Statistic;

-const CheckUpdate = ({ ws }: any) => {
+const CheckUpdate = ({ socketMessage }: any) => {
  const [updateLoading, setUpdateLoading] = useState(false);
+  const [value, setValue] = useState('');
  const modalRef = useRef<any>();

  const checkUpgrade = () => {
@ -95,7 +96,7 @@ const CheckUpdate = ({ ws }: any) => {
              fontWeight: 400,
            }}
          >
-            更新中...
+            {value}
          </pre>
        </div>
      ),
@ -103,55 +104,60 @@ const CheckUpdate = ({ ws }: any) => {
  };

  useEffect(() => {
-    let _message = '';
-    ws.onmessage = (e: any) => {
-      if (!modalRef.current) {
-        return;
-      }
-      _message = `${_message}\n${e.data}`;
-      modalRef.current.update({
-        content: (
-          <div style={{ height: '60vh', overflowY: 'auto' }}>
-            <pre
-              style={{
-                wordBreak: 'break-all',
-                whiteSpace: 'pre-wrap',
-                fontSize: 12,
-                fontWeight: 400,
-              }}
-            >
-              {_message}
-            </pre>
-            <div id="log-identifier" style={{ paddingBottom: 5 }}></div>
-          </div>
-        ),
-      });
-      document.getElementById('log-identifier') &&
-        document
-          .getElementById('log-identifier')!
-          .scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    if (!modalRef.current || !socketMessage) {
+      return;
+    }
+    const { type, message, references } = socketMessage;

-      if (e.data.includes('重启面板')) {
-        message.warning({
-          content: (
-            <span>
-              系统将在
-              <Countdown
-                className="inline-countdown"
-                format="ss"
-                value={Date.now() + 1000 * 10}
-              />
-              秒后自动刷新
-            </span>
-          ),
-          duration: 10,
-        });
-        setTimeout(() => {
-          window.location.reload();
-        }, 10000);
-      }
-    };
-  }, []);
+    if (type !== 'updateSystemVersion') {
+      return;
+    }
+
+    const newMessage = `${value} \n ${message}`;
+    modalRef.current.update({
+      content: (
+        <div style={{ height: '60vh', overflowY: 'auto' }}>
+          <pre
+            style={{
+              wordBreak: 'break-all',
+              whiteSpace: 'pre-wrap',
+              fontSize: 12,
+              fontWeight: 400,
+            }}
+          >
+            {newMessage}
+          </pre>
+          <div id="log-identifier" style={{ paddingBottom: 5 }}></div>
+        </div>
+      ),
+    });
+    setValue(newMessage);
+
+    document.getElementById('log-identifier') &&
+      document
+        .getElementById('log-identifier')!
+        .scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+    if (newMessage.includes('重启面板')) {
+      message.warning({
+        content: (
+          <span>
+            系统将在
+            <Countdown
+              className="inline-countdown"
+              format="ss"
+              value={Date.now() + 1000 * 10}
+            />
+            秒后自动刷新
+          </span>
+        ),
+        duration: 10,
+      });
+      setTimeout(() => {
+        window.location.reload();
+      }, 10000);
+    }
+  }, [socketMessage]);

  return (
    <>
--- a/src/pages/setting/index.tsx
+++ b/src/pages/setting/index.tsx
@ -47,7 +47,7 @@ const Setting = ({
  user,
  reloadUser,
  reloadTheme,
-  ws,
+  socketMessage,
 }: any) => {
  const columns = [
    {
@ -377,7 +377,7 @@ const Setting = ({
              />
            </Form.Item>
            <Form.Item label="检查更新" name="update">
-              <CheckUpdate ws={ws} />
+              <CheckUpdate socketMessage={socketMessage} />
            </Form.Item>
          </Form>
        </Tabs.TabPane>