chore: add resource worker

src/pages/resources/components/add-worker.tsx

@@ -0,0 +1,52 @@
+import HighlightCode from '@/components/highlight-code';
+import { useIntl } from '@umijs/max';
+import { Modal } from 'antd';
+import React from 'react';
+import { addWorkerGuide } from '../config';
+
+type ViewModalProps = {
+  open: boolean;
+  onCancel: () => void;
+};
+
+const AddWorker: React.FC<ViewModalProps> = (props) => {
+  const { open, onCancel } = props || {};
+  const intl = useIntl();
+
+  const origin = window.location.origin;
+
+  return (
+    <Modal
+      title={intl.formatMessage({ id: 'resources.button.create' })}
+      open={open}
+      centered={true}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      footer={null}
+    >
+      <div>
+        <h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
+        <h4>Linux Or MacOS </h4>
+        <HighlightCode code={addWorkerGuide.mac.getToken}></HighlightCode>
+        <h4>Windows </h4>
+        <HighlightCode code={addWorkerGuide.win.getToken}></HighlightCode>
+        <h3>2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}</h3>
+        <h4>Linux Or MacOS </h4>
+        <HighlightCode
+          code={addWorkerGuide.mac.registerWorker(origin)}
+        ></HighlightCode>
+        <h4>Windows </h4>
+        <HighlightCode
+          code={addWorkerGuide.win.registerWorker(origin)}
+        ></HighlightCode>
+        <h3>3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}</h3>
+      </div>
+    </Modal>
+  );
+};
+
+export default React.memo(AddWorker);

src/pages/resources/components/workers.tsx

@@ -8,6 +8,7 @@ import { convertFileSize, handleBatchRequest } from '@/utils';
 import {
   DeleteOutlined,
   InfoCircleOutlined,
+  PlusOutlined,
   SyncOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -17,6 +18,7 @@ import { memo, useEffect, useRef, useState } from 'react';
 import { deleteWorker, queryWorkersList } from '../apis';
 import { WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
+import AddWorker from './add-worker';
 const { Column } = Table;
 
 const Resources: React.FC = () => {
@@ -30,6 +32,7 @@ const Resources: React.FC = () => {
   const intl = useIntl();
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
   const [dataSource, setDataSource] = useState<ListItem[]>([]);
   const [queryParams, setQueryParams] = useState({
     page: 1,
@@ -94,6 +97,10 @@ const Resources: React.FC = () => {
     return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
   };
 
+  const handleAddWorker = () => {
+    setOpen(true);
+  };
+
   const handleDelete = (row: ListItem) => {
     modalRef.current.show({
       content: 'worker',
@@ -166,14 +173,23 @@ const Resources: React.FC = () => {
           </Space>
         }
         right={
-          <Button
-            icon={<DeleteOutlined />}
-            danger
-            onClick={handleDeleteBatch}
-            disabled={!rowSelection.selectedRowKeys.length}
-          >
-            {intl.formatMessage({ id: 'common.button.delete' })}
-          </Button>
+          <Space size={20}>
+            <Button
+              icon={<PlusOutlined></PlusOutlined>}
+              type="primary"
+              onClick={handleAddWorker}
+            >
+              {intl.formatMessage({ id: 'resources.button.create' })}
+            </Button>
+            <Button
+              icon={<DeleteOutlined />}
+              danger
+              onClick={handleDeleteBatch}
+              disabled={!rowSelection.selectedRowKeys.length}
+            >
+              {intl.formatMessage({ id: 'common.button.delete' })}
+            </Button>
+          </Space>
         }
       ></PageTools>
       <Table
@@ -371,6 +387,7 @@ const Resources: React.FC = () => {
         />
       </Table>
       <DeleteModal ref={modalRef}></DeleteModal>
+      <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
     </>
   );
 };

src/pages/resources/config/index.ts

@@ -14,3 +14,19 @@ export const status: any = {
   [WorkerStatusMap.ready]: StatusMaps.success,
   [WorkerStatusMap.not_ready]: StatusMaps.error
 };
+
+export const addWorkerGuide = {
+  mac: {
+    getToken: 'cat /var/lib/gpustack/token',
+    registerWorker(server: string) {
+      return `curl -sfL https://get.gpustack.ai | sh -s - --server-url ${server} --token mytoken`;
+    }
+  },
+  win: {
+    getToken:
+      'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw',
+    registerWorker(server: string) {
+      return `Invoke-Expression "& { $((Invoke-WebRequest -Uri "https://get.gpustack.ai" -UseBasicParsing).Content) } -ServerURL ${server} -Token mytoken"`;
+    }
+  }
+};