From 177ebd1bbe52f15b662954803bc497ba2c7290fe Mon Sep 17 00:00:00 2001 From: jialin Date: Sun, 21 Jul 2024 18:26:36 +0800 Subject: [PATCH] chore: add resource worker --- package.json | 1 + pnpm-lock.yaml | 40 +++++++++- src/components/copy-button/index.tsx | 1 + src/components/highlight-code/code-viewer.tsx | 76 +++++++++++++++++++ src/components/highlight-code/index.tsx | 17 +++++ src/components/highlight-code/style.less | 22 ++++++ src/components/highlight-code/utils.ts | 8 ++ src/global.less | 1 + src/hooks/use-update-chunk-list.ts | 2 +- src/locales/en-US/resources.ts | 7 +- src/locales/zh-CN/resources.ts | 6 +- src/pages/login/components/login-form.tsx | 16 +++- src/pages/login/components/password-form.tsx | 22 +----- src/pages/resources/components/add-worker.tsx | 52 +++++++++++++ src/pages/resources/components/workers.tsx | 33 ++++++-- src/pages/resources/config/index.ts | 16 ++++ 16 files changed, 280 insertions(+), 40 deletions(-) create mode 100644 src/components/highlight-code/code-viewer.tsx create mode 100644 src/components/highlight-code/index.tsx create mode 100644 src/components/highlight-code/style.less create mode 100644 src/components/highlight-code/utils.ts create mode 100644 src/pages/resources/components/add-worker.tsx diff --git a/package.json b/package.json index 87597a55..a92d6d2b 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "dayjs": "^1.11.11", "echarts": "^5.5.1", "has-ansi": "^5.0.1", + "highlight.js": "^11.10.0", "jotai": "^2.8.4", "localforage": "^1.10.0", "lodash": "^4.17.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c658b1b5..95c2731e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ dependencies: has-ansi: specifier: ^5.0.1 version: 5.0.1 + highlight.js: + specifier: ^11.10.0 + version: 11.10.0 jotai: specifier: ^2.8.4 version: 2.8.4(@types/react@18.3.1)(react@18.2.0) @@ -4438,7 +4441,7 @@ packages: dependencies: '@babel/core': 7.24.5 postcss: 7.0.39 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) transitivePeerDependencies: - supports-color dev: false @@ -4479,7 +4482,7 @@ packages: postcss-syntax: '>=0.36.2' dependencies: postcss: 7.0.39 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) remark: 13.0.0 unist-util-find-all-after: 3.0.2 transitivePeerDependencies: @@ -10450,6 +10453,11 @@ packages: hasBin: true dev: false + /highlight.js@11.10.0: + resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==, tarball: https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz} + engines: {node: '>=12.0.0'} + dev: false + /history@4.10.1: resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==, tarball: https://registry.npmjs.org/history/-/history-4.10.1.tgz} dependencies: @@ -13093,7 +13101,7 @@ packages: dependencies: htmlparser2: 3.10.1 postcss: 7.0.39 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) dev: false /postcss-image-set-function@4.0.7(postcss@8.4.38): @@ -13567,6 +13575,30 @@ packages: lodash: 4.17.21 postcss: 8.4.38 + /postcss-syntax@0.36.2(postcss@7.0.39): + resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} + peerDependencies: + postcss: '>=5.0.0' + postcss-html: '*' + postcss-jsx: '*' + postcss-less: '*' + postcss-markdown: '*' + postcss-scss: '*' + peerDependenciesMeta: + postcss-html: + optional: true + postcss-jsx: + optional: true + postcss-less: + optional: true + postcss-markdown: + optional: true + postcss-scss: + optional: true + dependencies: + postcss: 7.0.39 + dev: false + /postcss-syntax@0.36.2(postcss@8.4.38): resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} peerDependencies: @@ -16724,7 +16756,7 @@ packages: postcss-sass: 0.4.4 postcss-scss: 2.1.1 postcss-selector-parser: 6.0.16 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) postcss-value-parser: 4.2.0 resolve-from: 5.0.0 slash: 3.0.0 diff --git a/src/components/copy-button/index.tsx b/src/components/copy-button/index.tsx index 1ffebdc4..48d9e6e4 100644 --- a/src/components/copy-button/index.tsx +++ b/src/components/copy-button/index.tsx @@ -56,6 +56,7 @@ const CopyButton: React.FC = ({ return ( diff --git a/src/pages/login/components/password-form.tsx b/src/pages/login/components/password-form.tsx index e032b185..7c4c8157 100644 --- a/src/pages/login/components/password-form.tsx +++ b/src/pages/login/components/password-form.tsx @@ -65,26 +65,6 @@ const PasswordForm: React.FC = () => { {intl.formatMessage({ id: 'users.password.modify.description' })} - {/* - - } - label={intl.formatMessage({ id: 'users.form.currentpassword' })} - /> - */} { htmlType="submit" type="primary" block - style={{ marginTop: 20 }} + style={{ height: '54px', fontSize: '16px', marginTop: 10 }} > {intl.formatMessage({ id: 'common.button.submit' })} diff --git a/src/pages/resources/components/add-worker.tsx b/src/pages/resources/components/add-worker.tsx new file mode 100644 index 00000000..91969df4 --- /dev/null +++ b/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 = (props) => { + const { open, onCancel } = props || {}; + const intl = useIntl(); + + const origin = window.location.origin; + + return ( + +
+

1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}

+

Linux Or MacOS

+ +

Windows

+ +

2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}

+

Linux Or MacOS

+ +

Windows

+ +

3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}

+
+ + ); +}; + +export default React.memo(AddWorker); diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index bd5069ab..f1655b0c 100644 --- a/src/pages/resources/components/workers.tsx +++ b/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([]); 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 = () => { } right={ - + + + + } > { />
+ setOpen(false)}> ); }; diff --git a/src/pages/resources/config/index.ts b/src/pages/resources/config/index.ts index bcf6bbe2..d90cef6e 100644 --- a/src/pages/resources/config/index.ts +++ b/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"`; + } + } +};