Files
gpustack-ui/src/pages/resources/components/script-install.tsx
T

71 lines
2.2 KiB
TypeScript

import HighlightCode from '@/components/highlight-code';
import { useIntl } from '@umijs/max';
import React, { useMemo } from 'react';
import { addWorkerGuide } from '../config';
type ViewModalProps = { token: string };
const AddWorker: React.FC<ViewModalProps> = (props) => {
const intl = useIntl();
const origin = window.location.origin;
const labels = useMemo(
() => ({
step1: intl.formatMessage({ id: 'resources.worker.add.step1' }),
step2: intl.formatMessage({ id: 'resources.worker.add.step2' }),
step2Tips: intl.formatMessage({ id: 'resources.worker.add.step2.tips' }),
step3: intl.formatMessage({ id: 'resources.worker.add.step3' }),
linuxOrMac: intl.formatMessage({ id: 'resources.worker.linuxormaxos' })
}),
[intl]
);
return (
<div className="script-install">
<h3 className="font-size-14 font-600">
1. <span dangerouslySetInnerHTML={{ __html: labels.step1 }}></span>
</h3>
<h4 className="font-size-13">{labels.linuxOrMac}</h4>
<HighlightCode
code={addWorkerGuide.mac.getToken}
theme="dark"
></HighlightCode>
<h4 className="m-t-6 font-size-13">Windows </h4>
<HighlightCode
code={addWorkerGuide.win.getToken}
theme="dark"
></HighlightCode>
<h3 className="m-t-10 font-size-14 font-600">
2. {labels.step2}{' '}
<span
className="font-size-12"
style={{ color: 'var(--ant-color-text-tertiary)' }}
dangerouslySetInnerHTML={{
__html: `${labels.step2Tips}`
}}
></span>
</h3>
<h4 className="font-size-13">{labels.linuxOrMac}</h4>
<HighlightCode
code={addWorkerGuide.mac.registerWorker({
server: origin,
token: '${token}'
})}
theme="dark"
></HighlightCode>
<h4 className="m-t-6 font-size-13">Windows</h4>
<HighlightCode
theme="dark"
code={addWorkerGuide.win.registerWorker({
server: origin,
token: '${token}'
})}
></HighlightCode>
<h3 className="m-b-0 m-t-10 font-size-14 font-600">3. {labels.step3}</h3>
</div>
);
};
export default AddWorker;