chore: display the direct command in add worker
This commit is contained in:
jialin
@@ -1,8 +1,8 @@
|
||||
import HighlightCode from '@/components/highlight-code';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Modal } from 'antd';
|
||||
import { Modal, Tabs, TabsProps } from 'antd';
|
||||
import React from 'react';
|
||||
import { addWorkerGuide } from '../config';
|
||||
import ContainerInstall from './container-install';
|
||||
import ScriptInstall from './script-install';
|
||||
|
||||
type ViewModalProps = {
|
||||
open: boolean;
|
||||
@@ -12,8 +12,21 @@ type ViewModalProps = {
|
||||
const AddWorker: React.FC<ViewModalProps> = (props) => {
|
||||
const { open, onCancel } = props || {};
|
||||
const intl = useIntl();
|
||||
const [token, setToken] = React.useState('');
|
||||
const [activeKey, setActiveKey] = React.useState('script');
|
||||
|
||||
const origin = window.location.origin;
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: 'script',
|
||||
label: 'Script Installation',
|
||||
children: <ScriptInstall token={token}></ScriptInstall>
|
||||
},
|
||||
{
|
||||
key: 'container',
|
||||
label: 'Container Installation',
|
||||
children: <ContainerInstall token={token} />
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -26,49 +39,19 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
width={600}
|
||||
styles={{
|
||||
body: {
|
||||
height: 310
|
||||
}
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<div>
|
||||
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
|
||||
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
|
||||
<HighlightCode
|
||||
code={addWorkerGuide.mac.getToken}
|
||||
theme="dark"
|
||||
></HighlightCode>
|
||||
<h4>Windows </h4>
|
||||
<HighlightCode
|
||||
code={addWorkerGuide.win.getToken}
|
||||
theme="dark"
|
||||
></HighlightCode>
|
||||
<h3>
|
||||
2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
|
||||
<span
|
||||
className="font-size-12"
|
||||
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(${intl.formatMessage({
|
||||
id: 'resources.worker.add.step2.tips'
|
||||
})})`
|
||||
}}
|
||||
></span>
|
||||
</h3>
|
||||
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
|
||||
<HighlightCode
|
||||
code={addWorkerGuide.mac.registerWorker(origin)}
|
||||
theme="dark"
|
||||
></HighlightCode>
|
||||
<h4>Windows </h4>
|
||||
<HighlightCode
|
||||
theme="dark"
|
||||
code={addWorkerGuide.win.registerWorker(origin)}
|
||||
></HighlightCode>
|
||||
<h4>Docker </h4>
|
||||
<HighlightCode
|
||||
theme="dark"
|
||||
code={addWorkerGuide.docker.registerWorker(origin)}
|
||||
></HighlightCode>
|
||||
<h3>3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}</h3>
|
||||
</div>
|
||||
<Tabs
|
||||
items={items}
|
||||
activeKey={activeKey}
|
||||
type="card"
|
||||
onChange={(key) => setActiveKey(key)}
|
||||
></Tabs>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import { GPUStackVersionAtom } from '@/atoms/user';
|
||||
import { getAtomStorage } from '@/atoms/utils';
|
||||
import HighlightCode from '@/components/highlight-code';
|
||||
import { BulbOutlined, WarningOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Radio } from 'antd';
|
||||
import React from 'react';
|
||||
import { addWorkerGuide, containerInstallOptions } from '../config';
|
||||
import './styles/installation.less';
|
||||
|
||||
type ViewModalProps = {
|
||||
token: string;
|
||||
};
|
||||
|
||||
const AddWorker: React.FC<ViewModalProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const origin = window.location.origin;
|
||||
const [activeKey, setActiveKey] = React.useState('cuda');
|
||||
const versionInfo = getAtomStorage(GPUStackVersionAtom);
|
||||
|
||||
const code = React.useMemo(() => {
|
||||
let version = versionInfo?.version;
|
||||
if (!version || !versionInfo.isProduction) {
|
||||
version = 'main';
|
||||
}
|
||||
if (activeKey === 'cuda') {
|
||||
return addWorkerGuide.docker.registerWorker({
|
||||
server: origin,
|
||||
tag: version,
|
||||
token: props.token
|
||||
});
|
||||
}
|
||||
return addWorkerGuide.docker.registerWorker({
|
||||
server: origin,
|
||||
tag: `${version}-${activeKey}`,
|
||||
token: props.token
|
||||
});
|
||||
}, [versionInfo, activeKey, props.token, origin]);
|
||||
|
||||
return (
|
||||
<div className="container-install">
|
||||
<div className="notes">
|
||||
<span>
|
||||
1.{' '}
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'resources.worker.container.supported' })}
|
||||
</span>
|
||||
<WarningOutlined
|
||||
style={{ color: 'var(--ant-color-warning)' }}
|
||||
className="font-size-14 m-l-5"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
2.{' '}
|
||||
{intl.formatMessage(
|
||||
{ id: 'resources.worker.current.version' },
|
||||
{ version: versionInfo.version }
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
3. {intl.formatMessage({ id: 'resources.worker.select.command' })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="m-b-20">
|
||||
<Radio.Group
|
||||
block
|
||||
options={containerInstallOptions}
|
||||
defaultValue={activeKey}
|
||||
value={activeKey}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
onChange={(e) => setActiveKey(e.target.value)}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<HighlightCode theme="dark" code={code}></HighlightCode>
|
||||
<h3>
|
||||
<BulbOutlined className="m-r-5"></BulbOutlined>
|
||||
{intl.formatMessage({ id: 'resources.worker.add.step3' })}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(AddWorker);
|
||||
@@ -0,0 +1,40 @@
|
||||
import HighlightCode from '@/components/highlight-code';
|
||||
import { BulbOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import React from 'react';
|
||||
import { addWorkerGuide } from '../config';
|
||||
|
||||
type ViewModalProps = { token: string };
|
||||
|
||||
const AddWorker: React.FC<ViewModalProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const origin = window.location.origin;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
|
||||
<HighlightCode
|
||||
code={addWorkerGuide.mac.registerWorker({
|
||||
server: origin,
|
||||
token: props.token
|
||||
})}
|
||||
theme="dark"
|
||||
></HighlightCode>
|
||||
<h4>Windows </h4>
|
||||
<HighlightCode
|
||||
theme="dark"
|
||||
code={addWorkerGuide.win.registerWorker({
|
||||
server: origin,
|
||||
token: props.token
|
||||
})}
|
||||
></HighlightCode>
|
||||
<h3>
|
||||
<BulbOutlined className="m-r-5"></BulbOutlined>
|
||||
{intl.formatMessage({ id: 'resources.worker.add.step3' })}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(AddWorker);
|
||||
@@ -0,0 +1,13 @@
|
||||
.container-install {
|
||||
.notes {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
border-left: 2px solid var(--ant-color-split);
|
||||
margin-bottom: 20px;
|
||||
padding-left: 16px;
|
||||
background: var(--color-fill-sider);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
@@ -18,22 +18,29 @@ export const status: any = {
|
||||
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`;
|
||||
registerWorker(params: { server: string; token: string }) {
|
||||
return `curl -sfL https://get.gpustack.ai | sh -s - --server-url ${params.server} --token ${params.token}`;
|
||||
}
|
||||
},
|
||||
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) } --server-url ${server} --token mytoken"`;
|
||||
registerWorker(params: { server: string; token: string }) {
|
||||
return `Invoke-Expression "& { $((Invoke-WebRequest -Uri "https://get.gpustack.ai" -UseBasicParsing).Content) } --server-url ${params.server} --token ${params.token}"`;
|
||||
}
|
||||
},
|
||||
docker: {
|
||||
getToken:
|
||||
'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw',
|
||||
registerWorker(server: string) {
|
||||
return `docker run -d --gpus all --ipc=host --network=host gpustack/gpustack --server-url ${server} --token mytoken`;
|
||||
registerWorker(params: { server: string; tag: string; token: string }) {
|
||||
return `docker run -d --gpus all --ipc=host --network=host gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const containerInstallOptions = [
|
||||
{ label: 'CUDA', value: 'cuda' },
|
||||
{ label: 'CANN', value: 'npu' },
|
||||
{ label: 'MUSA', value: 'musa' },
|
||||
{ label: 'CPU', value: 'cpu' }
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user