feat: 修改计算资源

react-ui/src/hooks/resource.ts

@@ -12,6 +12,22 @@ import { useCallback, useEffect, useState } from 'react';
 
 const computingResource: ComputingResource[] = [];
 
+// 过滤资源规格
+export const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
+  input: string,
+  option?: ComputingResource,
+) => {
+  return (
+    option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
+  );
+};
+
+// 资源规格字段
+export const resourceFieldNames = {
+  label: 'description',
+  value: 'id',
+};
+
 // 获取资源规格
 export function useComputingResource() {
   const [resourceStandardList, setResourceStandardList] = useState<ComputingResource[]>([]);
@@ -25,7 +41,7 @@ export function useComputingResource() {
         resource_type: '',
       };
       const [res] = await to(getComputingResourceReq(params));
-      if (res && res.data && res.data.content) {
+      if (res && res.data && Array.isArray(res.data.content)) {
         setResourceStandardList(res.data.content);
         computingResource.splice(0, computingResource.length, ...res.data.content);
       }
@@ -38,25 +54,16 @@ export function useComputingResource() {
     }
   }, []);
 
-  // 过滤资源规格
-  const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] =
-    useCallback((input: string, option?: ComputingResource) => {
-      return (
-        option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ??
-        false
-      );
-    }, []);
-
   // 根据 standard 获取 description
   const getDescription = useCallback(
-    (standard?: string) => {
-      if (!standard) {
+    (id?: string | number) => {
+      if (!id) {
         return undefined;
       }
-      return resourceStandardList.find((item) => item.standard === standard)?.description;
+      return resourceStandardList.find((item) => Number(item.id) === Number(id))?.description;
     },
     [resourceStandardList],
   );
 
-  return [resourceStandardList, filterResourceStandard, getDescription] as const;
+  return [resourceStandardList, getDescription] as const;
 }

react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx

@@ -6,17 +6,17 @@
 import KFIcon from '@/components/KFIcon';
 import KFRadio, { type KFRadioItem } from '@/components/KFRadio';
 import PageTitle from '@/components/PageTitle';
+import ParameterSelect from '@/components/ParameterSelect';
 import ResourceSelect, {
   requiredValidator,
   ResourceSelectorType,
   type ParameterInputObject,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
-import { useComputingResource } from '@/hooks/resource';
 import { createEditorReq } from '@/services/developmentEnvironment';
 import { to } from '@/utils/promise';
 import { useNavigate } from '@umijs/max';
-import { App, Button, Col, Form, Input, Row, Select } from 'antd';
+import { App, Button, Col, Form, Input, Row } from 'antd';
 import { omit, pick } from 'lodash';
 import styles from './index.less';
 
@@ -51,7 +51,6 @@ function EditorCreate() {
   const navigate = useNavigate();
   const [form] = Form.useForm();
   const { message } = App.useApp();
-  const [resourceStandardList, filterResourceStandard] = useComputingResource();
 
   // 创建编辑器
   const createEditor = async (formData: FormData) => {
@@ -62,8 +61,8 @@ function EditorCreate() {
     const params = {
       ...omit(formData, ['image', 'model', 'dataset']),
       image: image.value,
-      model: pick(model, ['id', 'version', 'path', 'showValue']),
-      dataset: pick(dataset, ['id', 'version', 'path', 'showValue']),
+      model: model && pick(model, ['id', 'version', 'path', 'showValue']),
+      dataset: dataset && pick(dataset, ['id', 'version', 'path', 'showValue']),
     };
     const [res] = await to(createEditorReq(params));
     if (res) {
@@ -146,16 +145,7 @@ function EditorCreate() {
                     },
                   ]}
                 >
-                  <Select
-                    showSearch
-                    placeholder="请选择资源规格"
-                    filterOption={filterResourceStandard}
-                    options={resourceStandardList}
-                    fieldNames={{
-                      label: 'description',
-                      value: 'standard',
-                    }}
-                  />
+                  <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
                 </Form.Item>
               </Col>
             </Row>
@@ -181,7 +171,6 @@ function EditorCreate() {
                     type={ResourceSelectorType.Mirror}
                     placeholder="请选择镜像"
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>
@@ -193,7 +182,6 @@ function EditorCreate() {
                     type={ResourceSelectorType.Model}
                     placeholder="请选择模型"
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>
@@ -205,7 +193,6 @@ function EditorCreate() {
                     type={ResourceSelectorType.Dataset}
                     placeholder="请选择数据集"
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>

react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx

@@ -1,7 +1,6 @@
 import FormInfo from '@/components/FormInfo';
 import ParameterSelect from '@/components/ParameterSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
-import { useComputingResource } from '@/hooks/resource';
 import { PipelineNodeModelSerialize } from '@/types';
 import { Form } from 'antd';
 import styles from './index.less';
@@ -11,8 +10,6 @@ type ExperimentParameterProps = {
 };
 
 function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
-  const [resourceStandardList] = useComputingResource(); // 资源规模
-
   // 控制策略
   const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map(
     ([key, value]) => ({ key, value }),
@@ -112,14 +109,7 @@ function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
           },
         ]}
       >
-        <FormInfo
-          select
-          options={resourceStandardList}
-          fieldNames={{
-            label: 'description',
-            value: 'standard',
-          }}
-        />
+        <ParameterSelect dataType="resource" placeholder="请选择资源规格" display />
       </Form.Item>
       <Form.Item label="挂载路径" name="mount_path">
         <FormInfo />

react-ui/src/pages/Experiment/index.jsx

@@ -277,7 +277,6 @@ function Experiment() {
       current,
       pageSize,
     });
-    getExperimentList();
   };
   // 运行实验
   const runExperiment = async (id) => {

react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx

@@ -1,12 +1,12 @@
 import CodeSelect from '@/components/CodeSelect';
 import KFIcon from '@/components/KFIcon';
+import ParameterSelect from '@/components/ParameterSelect';
 import ResourceSelect, {
   ResourceSelectorType,
   requiredValidator,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { hyperParameterOptimizedModeOptions } from '@/enums';
-import { useComputingResource } from '@/hooks/resource';
 import { isEmpty } from '@/utils';
 import { modalConfirm, removeFormListItem } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
@@ -86,7 +86,6 @@ function ExecuteConfig() {
   const searchAlgorithm = Form.useWatch('search_alg', form);
   const paramsTypeOptions = searchAlgorithm === 'Ax' ? axParameterOptions : parameterOptions;
   const paramsTypeTooltip = searchAlgorithm === 'Ax' ? axParameterTooltip : parameterTooltip;
-  const [resourceStandardList, filterResourceStandard] = useComputingResource();
 
   const handleSearchAlgorithmChange = (value: string) => {
     if (
@@ -157,7 +156,6 @@ function ExecuteConfig() {
               type={ResourceSelectorType.Mirror}
               placeholder="请选择镜像"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>
@@ -180,7 +178,6 @@ function ExecuteConfig() {
               type={ResourceSelectorType.Dataset}
               placeholder="请选择数据集"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>
@@ -193,7 +190,6 @@ function ExecuteConfig() {
               type={ResourceSelectorType.Model}
               placeholder="请选择模型"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>
@@ -596,7 +592,7 @@ function ExecuteConfig() {
         <Col span={10}>
           <Form.Item
             label="资源规格"
-            name="resource"
+            name="computing_resource_id"
             rules={[
               {
                 required: true,
@@ -604,16 +600,7 @@ function ExecuteConfig() {
               },
             ]}
           >
-            <Select
-              showSearch
-              placeholder="请选择资源规格"
-              filterOption={filterResourceStandard}
-              options={resourceStandardList}
-              fieldNames={{
-                label: 'description',
-                value: 'standard',
-              }}
-            />
+            <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
           </Form.Item>
         </Col>
       </Row>

react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx

@@ -41,7 +41,7 @@ function HyperParameterBasic({
   runStatus,
   isInstance = false,
 }: HyperParameterBasicProps) {
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   const basicDatas: BasicInfoData[] = useMemo(() => {
     if (!info) {
@@ -136,7 +136,7 @@ function HyperParameterBasic({
       },
       {
         label: '资源规格',
-        value: info.resource,
+        value: info.computing_resource_id,
         format: getResourceDescription,
       },
     ];

react-ui/src/pages/HyperParameter/types.ts

@@ -24,7 +24,7 @@ export type FormData = {
   num_samples: number; // 总试验次数
   max_t: number; // 单次试验最大时间
   min_samples_required: number; // 计算中位数的最小试验数
-  resource: string; // 资源规格
+  computing_resource_id: number; // 资源规格
   parameters: FormParameter[];
   points_to_evaluate: { [key: string]: any }[];
 };

react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx

@@ -5,13 +5,13 @@
  */
 import CodeSelect from '@/components/CodeSelect';
 import PageTitle from '@/components/PageTitle';
+import ParameterSelect from '@/components/ParameterSelect';
 import ResourceSelect, {
   ResourceSelectorType,
   requiredValidator,
   type ParameterInputObject,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
-import { useComputingResource } from '@/hooks/resource';
 import {
   createServiceVersionReq,
   getServiceInfoReq,
@@ -23,7 +23,7 @@ import SessionStorage from '@/utils/sessionStorage';
 import { removeFormListItem } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate, useParams } from '@umijs/max';
-import { App, Button, Col, Flex, Form, Input, InputNumber, Row, Select } from 'antd';
+import { App, Button, Col, Flex, Form, Input, InputNumber, Row } from 'antd';
 import { omit, pick } from 'lodash';
 import { useEffect, useState } from 'react';
 import { CreateServiceVersionFrom, ServiceOperationType, ServiceVersionData } from '../types';
@@ -51,7 +51,7 @@ type ServiceVersionCache = ServiceVersionData & {
 function CreateServiceVersion() {
   const navigate = useNavigate();
   const [form] = Form.useForm();
-  const [resourceStandardList, filterResourceStandard] = useComputingResource();
+
   const [operationType, setOperationType] = useState(ServiceOperationType.Create);
   const [lastPage, setLastPage] = useState(CreateServiceVersionFrom.ServiceInfo);
   const { message } = App.useApp();
@@ -357,16 +357,7 @@ function CreateServiceVersion() {
                     },
                   ]}
                 >
-                  <Select
-                    showSearch
-                    placeholder="请选择资源规格"
-                    filterOption={filterResourceStandard}
-                    options={resourceStandardList}
-                    fieldNames={{
-                      label: 'description',
-                      value: 'standard',
-                    }}
-                  />
+                  <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
                 </Form.Item>
               </Col>
             </Row>

react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx

@@ -87,7 +87,7 @@ function ServiceInfo() {
       format: formatDate,
     },
   ];
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   // 获取服务详情
   const getServiceInfo = useCallback(async () => {

react-ui/src/pages/ModelDeployment/components/VersionBasicInfo/index.tsx

@@ -36,7 +36,7 @@ const formatEnvText = (env?: Record<string, string>) => {
 };
 
 function VersionBasicInfo({ info }: BasicInfoProps) {
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   const datas: BasicInfoData[] = [
     {

react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx

@@ -42,7 +42,7 @@ const formatEnvText = (env: Record<string, string>) => {
 
 function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModalProps) {
   const [compareData, setCompareData] = useState<CompareData | undefined>(undefined);
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   const fields: FiledType[] = useMemo(
     () => [

react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx

@@ -8,7 +8,6 @@ import ResourceSelectorModal, {
 } from '@/components/ResourceSelectorModal';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { CommonTabKeys } from '@/enums';
-import { useComputingResource } from '@/hooks/resource';
 import { canInput, createMenuItems } from '@/pages/Pipeline/Info/utils';
 import {
   PipelineGlobalParam,
@@ -19,7 +18,7 @@ import {
 import { openAntdModal } from '@/utils/modal';
 import { to } from '@/utils/promise';
 import { INode } from '@antv/g6';
-import { Button, Drawer, Form, Input, MenuProps, Select } from 'antd';
+import { Button, Drawer, Form, Input, MenuProps } from 'antd';
 import { NamePath } from 'antd/es/form/interface';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import PropsLabel from '../PropsLabel';
@@ -36,7 +35,6 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
     {} as PipelineNodeModelSerialize,
   );
   const [open, setOpen] = useState(false);
-  const [resourceStandardList, filterResourceStandard] = useComputingResource(); // 资源规模
   const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);
 
   const afterOpenChange = async () => {
@@ -458,16 +456,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
             },
           ]}
         >
-          <Select
-            placeholder="请选择资源规格"
-            filterOption={filterResourceStandard}
-            options={resourceStandardList}
-            fieldNames={{
-              label: 'description',
-              value: 'standard',
-            }}
-            showSearch
-          />
+          <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
         </Form.Item>
         <Form.Item
           name="mount_path"