feat: 云际实验参数

react-ui/src/components/ParameterSelect/index.tsx

@@ -4,7 +4,7 @@
  * @Description: 参数下拉选择组件，支持资源规格、数据集、模型、服务
  */
 
-import jccResourceState from '@/state/jcdResource';
+import jccResourceState, { getResourceTypes } from '@/state/jcdResource';
 import systemResourceState, { getSystemResources } from '@/state/systemResource';
 import { to } from '@/utils/promise';
 import { useSnapshot } from '@umijs/max';
@@ -59,7 +59,6 @@ function ParameterSelect({
   const valueText =
     typeof selectValue === 'object' && selectValue !== null ? getValue(selectValue) : selectValue;
   const jccResourceSnap = useSnapshot(jccResourceState);
-  const { getResourceTypes } = jccResourceSnap;
   const systemResourceSnap = useSnapshot(systemResourceState);
 
   const objectOptions = useMemo(() => {
@@ -107,13 +106,15 @@ function ParameterSelect({
           setOptions(res);
         }
       } else if (dataType === 'remote-resource-type') {
-        getResourceTypes();
+        if (jccResourceSnap.types.length === 0) {
+          getResourceTypes();
+        }
       } else if (dataType === 'resource') {
         getSystemResources();
       }
     };
     getSelectOptions();
-  }, [getOptions, dataType, getResourceTypes]);
+  }, [getOptions, dataType, getResourceTypes, jccResourceSnap.types]);
 
   const selectOptions = (
     dataType === 'resource' ? systemResourceSnap.resources : objectSelectOptions

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

@@ -1,7 +1,11 @@
 import FormInfo from '@/components/FormInfo';
-import ParameterSelect, { type ParameterSelectDataType } from '@/components/ParameterSelect';
+import ParameterSelect, {
+  type ParameterSelectDataType,
+  ParameterSelectTypeList,
+} from '@/components/ParameterSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { ComponentType } from '@/enums';
+import { setCurrentType } from '@/state/jcdResource';
 import type {
   PipelineGlobalParam,
   PipelineNodeModelParameter,
@@ -16,6 +20,12 @@ type ExperimentParameterProps = {
 };
 
 function ExperimentParameter({ nodeData, globalParams }: ExperimentParameterProps) {
+  // 云际组件，设置 store 当前资源类型
+  if (nodeData.id.startsWith('remote-task')) {
+    const resourceType = nodeData.in_parameters['--resource_type'].value;
+    setCurrentType(resourceType);
+  }
+
   // 表单组件
   const getFormComponent = (
     item: { key: string; value: PipelineNodeModelParameter },
@@ -65,7 +75,7 @@ function ExperimentParameter({ nodeData, globalParams }: ExperimentParameterProp
           </Form.List>
         )}
         {item.value.type === ComponentType.Select &&
-          (['dataset', 'model', 'service', 'resource'].includes(item.value.item_type) ? (
+          (ParameterSelectTypeList.includes(item.value.item_type as ParameterSelectDataType) ? (
             <ParameterSelect dataType={item.value.item_type as ParameterSelectDataType} display />
           ) : null)}
         {item.value.type !== ComponentType.Map && item.value.type !== ComponentType.Select && (

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

@@ -13,7 +13,7 @@ import ResourceSelectorModal, {
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { CommonTabKeys, ComponentType } from '@/enums';
 import { canInput, createMenuItems } from '@/pages/Pipeline/Info/utils';
-import state from '@/state/jcdResource';
+import { setCurrentType } from '@/state/jcdResource';
 import {
   PipelineGlobalParam,
   PipelineNodeModel,
@@ -26,7 +26,6 @@ import { to } from '@/utils/promise';
 import { removeFormListItem } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { INode } from '@antv/g6';
-import { useSnapshot } from '@umijs/max';
 import { Button, Drawer, Flex, Form, Input, MenuProps } from 'antd';
 import { RuleObject } from 'antd/es/form';
 import { NamePath } from 'antd/es/form/interface';
@@ -52,8 +51,6 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
   );
   const [open, setOpen] = useState(false);
   const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);
-  const snap = useSnapshot(state);
-  const { setCurrentType } = snap;
 
   const afterOpenChange = async () => {
     if (!open) {
@@ -155,7 +152,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
         }
       },
     }),
-    [form, open, setCurrentType],
+    [form, open],
   );
 
   // ref 类型选择
@@ -359,7 +356,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
     parentName: string,
   ) => {
     if (itemType === 'remote-resource-type') {
-      snap.setCurrentType(value.value);
+      setCurrentType(value.value);
       const remoteImage = form.getFieldValue([parentName, '--image']);
       form.setFieldValue([parentName, '--image'], { ...remoteImage, value: undefined });
       const remoteResource = form.getFieldValue([parentName, '--resource']);

react-ui/src/state/jcdResource.ts

@@ -73,68 +73,71 @@ export interface JCCBaseResourceSpec {
 
 type JCCResourceTypeStore = {
   token: string;
+  userID: number | undefined;
   types: JCCResourceType[];
   images: JCCResourceImage[];
   resources: JCCResourceStandard[];
   currentType: string | undefined | null;
-  jccLogin: () => void;
-  getResourceTypes: () => void;
-  getImages: (cardTypes: string[]) => void;
-  getResources: (cardType: string) => void;
-  setCurrentType: (cardType: string) => void;
 };
 
 const state = proxy<JCCResourceTypeStore>({
   token: '',
+  userID: undefined,
   types: [],
   images: [],
   resources: [],
   currentType: undefined,
-  jccLogin: async () => {
-    const [res] = await to(jccLoginReq());
-    if (res && res.code === 200 && res.data) {
-      const { tokenHead, token } = res.data;
-      state.token = tokenHead + token;
-    }
-  },
-  getResourceTypes: async () => {
-    const [loginRes] = await to(jccLoginReq());
-    if (loginRes && loginRes.code === 200 && loginRes.data) {
-      const { tokenHead, token, jsmUserInfo } = loginRes.data;
-      state.token = tokenHead + token;
-      const userID = jsmUserInfo?.data?.userID;
-      const [res] = await to(jccGetResourceTypesReq(tokenHead + token, userID));
-      if (res && res.code === 'OK' && res.data) {
-        state.types = res.data.resourceRanges?.map((v: JCCResourceRange) => ({
-          label: v.type,
-          value: v.type,
-        }));
-      }
-    }
-  },
-  getImages: async (cardTypes: string[]) => {
-    const [res] = await to(jccGetImagesReq(state.token, cardTypes));
-    if (res && res.code === 'OK' && res.data) {
-      state.images = res.data.images;
-    }
-  },
-  getResources: async (cardType: string) => {
-    const [res] = await to(jccGetResourcesReq(state.token, cardType));
-    if (res && res.code === 'OK' && res.data) {
-      state.resources = res.data.resource;
-    }
-  },
-  setCurrentType: (cardType: string | undefined | null) => {
-    if (state.currentType !== cardType) {
-      state.currentType = cardType;
-      state.images = [];
-      state.resources = [];
-      if (cardType) {
-        state.getImages([cardType]);
-        state.getResources(cardType);
+});
+
+const jccLogin = async () => {
+  const [res] = await to(jccLoginReq());
+  if (res && res.code === 200 && res.data) {
+    const { tokenHead, token, jsmUserInfo } = res.data;
+    state.token = tokenHead + token;
+    state.userID = jsmUserInfo?.data?.userID;
+  }
+};
+
+const getImages = async (cardTypes: string[]) => {
+  const [res] = await to(jccGetImagesReq(state.token, cardTypes));
+  if (res && res.code === 'OK' && res.data) {
+    state.images = res.data.images;
+  }
+};
+
+const getResources = async (cardType: string) => {
+  const [res] = await to(jccGetResourcesReq(state.token, cardType));
+  if (res && res.code === 'OK' && res.data) {
+    state.resources = res.data.resource;
+  }
+};
+
+export const getResourceTypes = async () => {
+  if (!state.token || !state.userID) {
+    await jccLogin();
+  }
+  const [res] = await to(jccGetResourceTypesReq(state.token, state.userID!));
+  if (res && res.code === 'OK' && res.data) {
+    state.types = res.data.resourceRanges?.map((v: JCCResourceRange) => ({
+      label: v.type,
+      value: v.type,
+    }));
+  }
+};
+
+export const setCurrentType = async (cardType: string | undefined | null) => {
+  if (state.currentType !== cardType) {
+    state.currentType = cardType;
+    state.images = [];
+    state.resources = [];
+    if (cardType) {
+      if (!state.token) {
+        await jccLogin();
       }
+      getImages([cardType]);
+      getResources(cardType);
     }
-  },
-});
+  }
+};
 
 export default state;