119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
import { InputNumber as CInputNumber, Input, Select } from '@gpustack/core-ui';
|
|
import { Button, Flex, Form, Radio } from 'antd';
|
|
import styled from 'styled-components';
|
|
import { StorageStatusValueMap } from '../../storage/config';
|
|
import { mockStorageData } from '../../storage/config/mock-data';
|
|
import { StorageModeValueMap } from '../config';
|
|
import { FormData } from '../config/types';
|
|
|
|
const FieldBlock = styled.div`
|
|
margin-bottom: 24px;
|
|
`;
|
|
|
|
const StorageHeader = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
`;
|
|
|
|
const StorageVolume = () => {
|
|
const form = Form.useFormInstance<FormData>();
|
|
const storageMode = Form.useWatch('storage_mode', form);
|
|
|
|
return (
|
|
<FieldBlock data-field="storage">
|
|
<Flex
|
|
style={{
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 6
|
|
}}
|
|
>
|
|
<Form.Item<FormData>
|
|
name="storage_mode"
|
|
style={{ marginBottom: 12 }}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请选择存储卷'
|
|
}
|
|
]}
|
|
>
|
|
<Radio.Group
|
|
options={[
|
|
{
|
|
label: '持久存储',
|
|
value: StorageModeValueMap.Existing
|
|
},
|
|
{ label: '临时存储', value: StorageModeValueMap.Temporary }
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Button type="link" size="small" style={{ marginBottom: 6 }}>
|
|
添加存储
|
|
</Button>
|
|
</Flex>
|
|
|
|
{storageMode === StorageModeValueMap.Existing && (
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
|
|
<div style={{ flex: 1 }}>
|
|
<Form.Item<FormData>
|
|
name="storage_id"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请选择预存储卷'
|
|
}
|
|
]}
|
|
>
|
|
<Select
|
|
label="持久卷"
|
|
required
|
|
options={mockStorageData.map((item) => ({
|
|
label: `${item.name} / ${item.capacity_gb ?? '-'} GB`,
|
|
value: item.id,
|
|
disabled: item.status !== StorageStatusValueMap.Available
|
|
}))}
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{storageMode === StorageModeValueMap.Temporary && (
|
|
<Form.Item<FormData>
|
|
name="local_storage_size_gb"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入本地临时存储容量'
|
|
}
|
|
]}
|
|
>
|
|
<CInputNumber min={1} precision={0} label="存储容量 (GB)" required />
|
|
</Form.Item>
|
|
)}
|
|
{/* 挂载路径 */}
|
|
<Form.Item<FormData>
|
|
name="mount_path"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入存储挂载路径'
|
|
}
|
|
]}
|
|
>
|
|
<Input.Input
|
|
label="挂载路径"
|
|
required
|
|
placeholder="挂载路径须以 / 开头"
|
|
/>
|
|
</Form.Item>
|
|
</FieldBlock>
|
|
);
|
|
};
|
|
|
|
export default StorageVolume;
|