fix: api test
This commit is contained in:
jialin
@@ -5,8 +5,8 @@ import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
|
||||
import { Empty, Input, Typography } from 'antd';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import useQueryTemplates from '../../templates/services/use-query-templates';
|
||||
import { ListItem as TemplateItem } from '../../templates/config/types';
|
||||
import useQueryTemplates from '../../templates/services/use-query-templates';
|
||||
import { FormData, InstanceTypeItem, ListItem } from '../config/types';
|
||||
import GPUServiceInstanceForm from '../forms';
|
||||
import TemplateSelector from '../forms/template-selector';
|
||||
@@ -59,7 +59,7 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
onCancel
|
||||
}) => {
|
||||
const form = useRef<any>(null);
|
||||
const [instanceTypeName, setInstanceTypeName] = useState<string>();
|
||||
const [selectedInstanceType, setSelectedInstanceType] = useState<string>();
|
||||
const [templateId, setTemplateId] = useState<number>();
|
||||
const [instanceKeyword, setInstanceKeyword] = useState('');
|
||||
const [templateKeyword, setTemplateKeyword] = useState('');
|
||||
@@ -84,7 +84,7 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
return instanceTypeList;
|
||||
}
|
||||
return instanceTypeList.filter((item) => {
|
||||
const name = item.metadata?.name || item.name || '';
|
||||
const name = item.metadata?.name || '';
|
||||
return [
|
||||
name,
|
||||
item.spec?.memory ?? '',
|
||||
@@ -123,28 +123,23 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
};
|
||||
|
||||
const handleInstanceTypeChange = (item: InstanceTypeItem) => {
|
||||
const name = item.metadata?.name || item.name;
|
||||
setInstanceTypeName(name);
|
||||
const name = item.metadata?.name;
|
||||
setSelectedInstanceType(name);
|
||||
form.current?.setFieldsValue({
|
||||
type: name,
|
||||
spec: { resources: { accelerator: '1' } }
|
||||
spec: {
|
||||
type: name,
|
||||
resources: { accelerator: '1' }
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleTemplateChange = (id: number, item: TemplateItem) => {
|
||||
setTemplateId(id);
|
||||
form.current?.setFieldsValue({
|
||||
manufacturer: item.manufacturer,
|
||||
spec: {
|
||||
image: item.spec?.image,
|
||||
imagePullPolicy: item.spec?.imagePullPolicy,
|
||||
command: item.spec?.command || [],
|
||||
ports: item.spec?.ports || [],
|
||||
env: item.spec?.env || [],
|
||||
volumeMount: item.spec?.volumeMount,
|
||||
resources: {
|
||||
cpu: item.spec?.resources?.cpu,
|
||||
ram: item.spec?.resources?.ram
|
||||
}
|
||||
...form.current?.getFieldsValue()?.spec,
|
||||
...item.spec
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -188,7 +183,7 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
</div>
|
||||
{filteredInstanceTypes.length > 0 ? (
|
||||
<InstanceTypeList
|
||||
value={instanceTypeName}
|
||||
value={selectedInstanceType}
|
||||
dataList={filteredInstanceTypes}
|
||||
onChange={handleInstanceTypeChange}
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import { AutoTooltip, TemplateCard } from '@gpustack/core-ui';
|
||||
import { AutoTooltip, StatusTag, TemplateCard } from '@gpustack/core-ui';
|
||||
import { Flex, Tag } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
import { InstanceTypePhaseValueMap } from '../config';
|
||||
import {
|
||||
InstanceTypePhaseLabelMap,
|
||||
InstanceTypePhaseStatus,
|
||||
InstanceTypePhaseValueMap
|
||||
} from '../config';
|
||||
import { InstanceTypeItem } from '../config/types';
|
||||
|
||||
const TypeGrid = styled.div`
|
||||
@@ -44,7 +48,7 @@ interface InstanceTypeListProps {
|
||||
}
|
||||
|
||||
const isAvailable = (item: InstanceTypeItem) =>
|
||||
item.status?.phase === InstanceTypePhaseValueMap.Available;
|
||||
item.status?.phase === InstanceTypePhaseValueMap.Active;
|
||||
|
||||
const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
|
||||
value,
|
||||
@@ -60,35 +64,60 @@ const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
|
||||
<TypeGrid>
|
||||
{dataList.map((item) => {
|
||||
const disabled = !isAvailable(item);
|
||||
const name = item.metadata?.name || item.name;
|
||||
const name = item.metadata?.name;
|
||||
return (
|
||||
<TemplateCard
|
||||
key={name}
|
||||
clickable
|
||||
ghost
|
||||
hoverable
|
||||
height={104}
|
||||
height={106}
|
||||
active={value === name}
|
||||
disabled={disabled}
|
||||
onClick={() => handleSelect(item)}
|
||||
>
|
||||
<TypeName>
|
||||
<Flex gap={16}>
|
||||
<Flex gap={8} align="center">
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{name}
|
||||
</AutoTooltip>
|
||||
</Flex>
|
||||
<Tag
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
color: 'var(--ant-color-text-tertiary)'
|
||||
}}
|
||||
>
|
||||
<span>库存 {item.status?.accelerator?.remaining ?? '-'}</span>
|
||||
</Tag>
|
||||
<Flex gap={8} align="center">
|
||||
{item.status?.phase && (
|
||||
<StatusTag
|
||||
statusValue={{
|
||||
status:
|
||||
InstanceTypePhaseStatus[item.status.phase] ??
|
||||
'inactive',
|
||||
text:
|
||||
InstanceTypePhaseLabelMap[item.status.phase] ??
|
||||
item.status.phase,
|
||||
message: ''
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{item.spec?.acceleratable && (
|
||||
<Tag
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
color: 'var(--ant-color-text-tertiary)'
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
库存 {item.status?.accelerator?.remaining ?? '-'}
|
||||
</span>
|
||||
</Tag>
|
||||
)}
|
||||
</Flex>
|
||||
</TypeName>
|
||||
<TypeMeta>
|
||||
<span className="meta-row">显存 {item.spec?.memory ?? '-'}</span>
|
||||
<span style={{ display: 'flex', height: 15 }}>
|
||||
{item.spec?.acceleratable && (
|
||||
<span className="meta-row">
|
||||
显存 {item.spec?.memory ?? '-'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="meta-row gap-16">
|
||||
<span>内存 {item.status?.ram?.capacity ?? '-'}</span>
|
||||
<span>vCPU {item.status?.cpu?.capacity ?? '-'}</span>
|
||||
|
||||
Reference in New Issue
Block a user