chore: add resource worker

src/pages/login/components/login-form.tsx

@@ -194,12 +194,20 @@ const LoginForm = () => {
               label={intl.formatMessage({ id: 'common.form.password' })}
             />
           </Form.Item>
-          <Form.Item name="autoLogin" valuePropName="checked">
-            <Checkbox style={{ marginLeft: 10 }}>
-              {intl.formatMessage({ id: 'common.login.rember' })}
+          <Form.Item noStyle name="autoLogin" valuePropName="checked">
+            <Checkbox style={{ marginLeft: 5, marginBottom: 12 }}>
+              <span style={{ color: 'var(--ant-color-text-secondary)' }}>
+                {' '}
+                {intl.formatMessage({ id: 'common.login.rember' })}
+              </span>
             </Checkbox>
           </Form.Item>
-          <Button htmlType="submit" type="primary" block>
+          <Button
+            htmlType="submit"
+            type="primary"
+            block
+            style={{ height: '54px', fontSize: '16px' }}
+          >
             {intl.formatMessage({ id: 'common.button.login' })}
           </Button>
         </Form>

src/pages/login/components/password-form.tsx

@@ -65,26 +65,6 @@ const PasswordForm: React.FC = () => {
             {intl.formatMessage({ id: 'users.password.modify.description' })}
           </span>
         </h2>
-        {/* 
-        <Form.Item
-          name="current_password"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: intl.formatMessage({ id: 'users.form.currentpassword' })
-                }
-              )
-            }
-          ]}
-        >
-          <SealInput.Password
-            prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'users.form.currentpassword' })}
-          />
-        </Form.Item> */}
         <Form.Item
           name="new_password"
           rules={[
@@ -136,7 +116,7 @@ const PasswordForm: React.FC = () => {
           htmlType="submit"
           type="primary"
           block
-          style={{ marginTop: 20 }}
+          style={{ height: '54px', fontSize: '16px', marginTop: 10 }}
         >
           {intl.formatMessage({ id: 'common.button.submit' })}
         </Button>

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"`;
+    }
+  }
+};