127 lines
3.2 KiB
TypeScript
127 lines
3.2 KiB
TypeScript
import { BulbOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Alert } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { ProviderType, ProviderValueMap } from '../config';
|
|
import AddWorkerCommand from './add-worker-command';
|
|
import CheckEnvCommand from './check-env-command';
|
|
import RegisterClusterInner from './register-cluster-inner';
|
|
import SupportedGPUs from './support-gpus';
|
|
|
|
const Title = styled.div`
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
const Line = styled.div`
|
|
position: relative;
|
|
margin: 24px 0;
|
|
width: 100%;
|
|
border-top: 1px solid var(--ant-color-border);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -9px;
|
|
left: 24px;
|
|
width: 16px;
|
|
height: 16px;
|
|
transform: rotate(45deg);
|
|
background-color: var(--ant-color-bg-elevated);
|
|
border-top: 1px solid var(--ant-color-border);
|
|
border-left: 1px solid var(--ant-color-border);
|
|
}
|
|
`;
|
|
|
|
const Container = styled.div`
|
|
width: 800px;
|
|
margin: 0 auto;
|
|
.command-info {
|
|
margin-top: 24px;
|
|
margin-bottom: 8px;
|
|
color: var(--ant-color-text-secondary);
|
|
}
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
type AddModalProps = {
|
|
provider: ProviderType;
|
|
registrationInfo: {
|
|
token: string;
|
|
image: string;
|
|
server_url: string;
|
|
cluster_id: number;
|
|
};
|
|
};
|
|
const AddWorkerStep: React.FC<AddModalProps> = ({
|
|
provider,
|
|
registrationInfo
|
|
}) => {
|
|
const intl = useIntl();
|
|
const [currentGPU, setCurrentGPU] = React.useState<string>('cuda');
|
|
React.useState<string>('cuda');
|
|
const [workerCommand, setWorkerCommand] = React.useState<Record<string, any>>(
|
|
{
|
|
label: 'NVIDIA',
|
|
link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#nvidia-cuda'
|
|
}
|
|
);
|
|
|
|
const handleSelectProvider = (value: string, item: any) => {
|
|
setCurrentGPU(value);
|
|
setWorkerCommand(item);
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<Title>
|
|
{intl.formatMessage({ id: 'clusters.create.supportedGpu' })}
|
|
</Title>
|
|
<SupportedGPUs
|
|
onSelect={handleSelectProvider}
|
|
current={currentGPU}
|
|
clickable={true}
|
|
/>
|
|
|
|
<Content>
|
|
<Line></Line>
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
icon={<BulbOutlined />}
|
|
message={
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage(
|
|
{ id: 'clusters.create.addworker.tips' },
|
|
{ label: workerCommand.label, link: workerCommand.link }
|
|
)
|
|
}}
|
|
></span>
|
|
}
|
|
></Alert>
|
|
</Content>
|
|
|
|
<div className="command-info">
|
|
1. {intl.formatMessage({ id: 'cluster.create.checkEnv.tips' })}
|
|
</div>
|
|
<CheckEnvCommand provider={provider} currentGPU={currentGPU} />
|
|
<div className="command-info">
|
|
2. {intl.formatMessage({ id: 'clusters.create.addCommand.tips' })}
|
|
</div>
|
|
{provider === ProviderValueMap.Kubernetes ? (
|
|
<RegisterClusterInner registrationInfo={registrationInfo} />
|
|
) : (
|
|
<AddWorkerCommand registrationInfo={registrationInfo} />
|
|
)}
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default AddWorkerStep;
|