feat: 完成流水线全局参数

react-ui/config/config.ts

@@ -154,4 +154,5 @@ export default defineConfig({
     strategy: 'normal',
   },
   requestRecord: {},
+  icons: {},
 });

react-ui/src/hooks/index.ts

@@ -1,4 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Generates a state reference with the initial value.
+ *
+ * @param initialValue - The initial value for the state
+ * @return An array containing the state value, state setter function, and a mutable reference object
+ */
 export function useStateRef<T>(initialValue: T) {
   const [value, setValue] = useState(initialValue);
 
@@ -10,3 +17,23 @@ export function useStateRef<T>(initialValue: T) {
 
   return [value, setValue, ref] as const;
 }
+
+/**
+ * Generates a custom hook for managing the visibility state of a modal.
+ *
+ * @param initialValue - The initial visibility state of the modal.
+ * @return An array containing the visibility state and functions to open and close the modal.
+ */
+export function useModal(initialValue: boolean) {
+  const [visible, setVisible] = useState(initialValue);
+
+  const open = useCallback(() => {
+    setVisible(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return [visible, open, close];
+}

react-ui/src/pages/Dataset/datasetIntro.jsx

@@ -54,7 +54,7 @@ const Dataset = () => {
   const [dialogTitle, setDialogTitle] = useState('新建版本');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [datasetDetailObj, setDatasetDetailObj] = useState({});
-  const [version, setVersion] = useState('');
+  const [version, setVersion] = useState(null);
   const [versionList, setVersionList] = useState([]);
   const locationParams = useParams(); //新版本获取路由参数接口
   const [wordList, setWordList] = useState([]);
@@ -109,27 +109,24 @@ const Dataset = () => {
 
       onOk: () => {
         deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => {
-          message.success('删除成功');
+          setVersion(null);
+          getDatasetVersionList();
           getDatasetVersions({ version, dataset_id: locationParams.id });
+          message.success('删除成功');
         });
       },
     });
   };
   const onFinish = (values) => {
     addDatasetVersionDetail(formList).then((ret) => {
-      console.log(ret);
       getDatasetVersionList();
       setIsModalOpen(false);
+      message.success('创建成功');
     });
   };
   const getDatasetVersions = (params) => {
     getDatasetVersionIdList(params).then((res) => {
-      setWordList(
-        res.data.map((v) => ({
-          ...v,
-          key: v.id,
-        })),
-      );
+      setWordList(res.data);
     });
   };
   const handleChange = (value) => {
@@ -242,6 +239,7 @@ const Dataset = () => {
                       width: 160,
                     }}
                     allowClear
+                    value={version}
                     onChange={handleChange}
                     options={versionList}
                   />
@@ -281,7 +279,7 @@ const Dataset = () => {
               <div style={{ marginBottom: '10px', fontSize: '14px' }}>
                 {wordList.length > 0 ? wordList[0].description : null}
               </div>
-              <Table columns={columns} dataSource={wordList} pagination={false} />
+              <Table columns={columns} dataSource={wordList} pagination={false} rowKey="id" />
             </div>
           </TabPane>
         </Tabs>

react-ui/src/pages/Experiment/experimentText/LogList.tsx

@@ -1,4 +1,4 @@
-import { ExperimentStatus } from '../types';
+import { ExperimentStatus } from '../status';
 import LogGroup, { type LogGroupProps } from './logGroup';
 
 type LogListProps = {

react-ui/src/pages/Experiment/experimentText/logGroup.tsx

@@ -3,7 +3,7 @@ import { getExperimentPodsLog } from '@/services/experiment/index.js';
 import { DoubleRightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import { useEffect, useState } from 'react';
-import { ExperimentStatus } from '../types';
+import { ExperimentStatus } from '../status';
 import styles from './logGroup.less';
 
 export type LogGroupProps = {

react-ui/src/pages/Experiment/status.ts

@@ -4,6 +4,17 @@ export interface StatusInfo {
   icon: string;
 }
 
+export enum ExperimentStatus {
+  Running = 'Running',
+  Succeeded = 'Succeeded',
+  Pending = 'Pending',
+  Failed = 'Failed',
+  Error = 'Error',
+  Terminated = 'Terminated',
+  Skipped = 'Skipped',
+  Omitted = 'Omitted',
+}
+
 export const experimentStatusInfo: Record<string, StatusInfo | undefined> = {
   Running: {
     label: '运行中',

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

@@ -1,10 +0,0 @@
-export enum ExperimentStatus {
-  Running = 'Running',
-  Succeeded = 'Succeeded',
-  Pending = 'Pending',
-  Failed = 'Failed',
-  Error = 'Error',
-  Terminated = 'Terminated',
-  Skipped = 'Skipped',
-  Omitted = 'Omitted',
-}

react-ui/src/pages/Model/modelIntro.jsx

@@ -54,7 +54,7 @@ const Dataset = () => {
   const [dialogTitle, setDialogTitle] = useState('新建版本');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [datasetDetailObj, setDatasetDetailObj] = useState({});
-  const [version, setVersion] = useState('');
+  const [version, setVersion] = useState(null);
   const [versionList, setVersionList] = useState([]);
   const locationParams = useParams(); //新版本获取路由参数接口
   console.log(locationParams);
@@ -104,17 +104,19 @@ const Dataset = () => {
 
       onOk: () => {
         deleteModelVersion({ models_id: locationParams.id, version }).then((ret) => {
-          message.success('删除成功');
+          setVersion(null);
+          getModelVersionsList();
           getModelVersions({ version, models_id: locationParams.id });
+          message.success('删除成功');
         });
       },
     });
   };
   const onFinish = () => {
     addModelsVersionDetail(formList).then((ret) => {
-      console.log(ret);
       getModelVersionsList();
       setIsModalOpen(false);
+      message.success('创建成功');
     });
   };
   const getModelVersions = (params) => {
@@ -140,7 +142,7 @@ const Dataset = () => {
       getModelVersions({ version: value, models_id: locationParams.id });
       setVersion(value);
     } else {
-      setVersion(null);
+      setVersion('');
     }
   };
   const onFinishFailed = (errorInfo) => {
@@ -237,6 +239,7 @@ const Dataset = () => {
                     style={{
                       width: 160,
                     }}
+                    value={version}
                     allowClear
                     onChange={handleChange}
                     options={versionList}
@@ -277,7 +280,7 @@ const Dataset = () => {
               <div style={{ marginBottom: '10px', fontSize: '14px' }}>
                 {wordList.length > 0 ? wordList[0].description : null}
               </div>
-              <Table columns={columns} dataSource={wordList} pagination={false} />
+              <Table columns={columns} dataSource={wordList} pagination={false} rowKey="id" />
             </div>
           </TabPane>
         </Tabs>

react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less

@@ -0,0 +1,14 @@
+.form_item_block {
+  position: relative;
+  padding-top: 40px;
+  border-bottom: 1px dashed rgba(20, 49, 179, 0.12);
+}
+.delete_button {
+  position: absolute;
+  top: 5px;
+  right: 0;
+}
+.add_button {
+  margin-top: 15px;
+  padding: 0;
+}

react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx

@@ -0,0 +1,133 @@
+import { type PipelineGlobalParam } from '@/types';
+import { to } from '@/utils/promise';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Drawer, Form, Input, Radio } from 'antd';
+import { forwardRef, useImperativeHandle } from 'react';
+import styles from './globalParamsDrawer.less';
+
+type GlobalParamsDrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  globalParam: PipelineGlobalParam[];
+};
+
+const GlobalParamsDrawer = forwardRef(
+  ({ open = false, onClose, globalParam = [] }: GlobalParamsDrawerProps, ref) => {
+    const [form] = Form.useForm();
+
+    useImperativeHandle(ref, () => ({
+      getFieldsValue: async () => {
+        const [res, error] = await to(form.validateFields());
+        if (res && !error) {
+          const values = form.getFieldsValue();
+          return values;
+        } else {
+          return Promise.reject(error);
+        }
+      },
+    }));
+    return (
+      <Drawer
+        rootStyle={{ marginTop: '45px' }}
+        title="全局参数"
+        placement="right"
+        closeIcon={false}
+        getContainer={false}
+        onClose={onClose}
+        open={open}
+        width={420}
+      >
+        <Form
+          name="global_params_form"
+          autoComplete="off"
+          form={form}
+          labelCol={{ span: 7 }}
+          wrapperCol={{ span: 17 }}
+          initialValues={{ global_param: globalParam }}
+          labelAlign="left"
+        >
+          <Form.List name="global_param">
+            {(fields, { add, remove }) => (
+              <>
+                {fields.map(({ key, name, ...restField }) => (
+                  <div key={key} className={styles.form_item_block}>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'param_name']}
+                      label="参数名称"
+                      rules={[{ required: true, message: '请输入参数名称' }]}
+                    >
+                      <Input placeholder="请输入参数名称" allowClear />
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'description']}
+                      label="参数描述"
+                      rules={[{ required: true, message: '请输入参数描述' }]}
+                    >
+                      <Input.TextArea
+                        placeholder="请输入参数描述"
+                        autoSize={{ minRows: 2, maxRows: 4 }}
+                        allowClear
+                      />
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'param_type']}
+                      label="类　　型"
+                      rules={[{ required: true, message: '请选择类型' }]}
+                    >
+                      <Radio.Group>
+                        <Radio value={1}>字符串</Radio>
+                        <Radio value={2}>整型</Radio>
+                        <Radio value={3}>布尔类型</Radio>
+                      </Radio.Group>
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'param_value']}
+                      label="值"
+                      rules={[{ required: true, message: '请输入值' }]}
+                    >
+                      <Input placeholder="请输入值" allowClear />
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'is_sensitive']}
+                      label="脱敏显示"
+                      rules={[{ required: true, message: '请选择' }]}
+                      tooltip="脱敏后的参数以*****显示"
+                    >
+                      <Radio.Group>
+                        <Radio value={1}>是</Radio>
+                        <Radio value={0}>否</Radio>
+                      </Radio.Group>
+                    </Form.Item>
+                    <Button
+                      className={styles.delete_button}
+                      type="link"
+                      onClick={() => remove(name)}
+                      icon={<DeleteOutlined />}
+                    ></Button>
+                  </div>
+                ))}
+                <Form.Item>
+                  <Button
+                    className={styles.add_button}
+                    type="link"
+                    onClick={add}
+                    icon={<PlusOutlined />}
+                  >
+                    流水线参数
+                  </Button>
+                </Form.Item>
+              </>
+            )}
+          </Form.List>
+        </Form>
+      </Drawer>
+    );
+  },
+);
+
+export default GlobalParamsDrawer;

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -1,21 +1,27 @@
+import { useModal } from '@/hooks';
 import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js';
+import { to } from '@/utils/promise';
 import { SaveOutlined } from '@ant-design/icons';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
 import G6 from '@antv/g6';
 import { Button, message } from 'antd';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { Icon } from 'umi';
 import { s8 } from '../../../utils';
 import Styles from './editPipeline.less';
+import GlobalParamsDrawer from './globalParamsDrawer';
 import ModelMenus from './modelMenus';
 import Props from './props';
-const editPipeline = (React.FC = () => {
+
+let graph = null;
+
+const EditPipeline = () => {
   const propsRef = useRef();
   const navgite = useNavigate();
   // const [contextMenu,setContextMenu]=useState({})
   let contextMenu = {};
   const locationParams = useParams(); //新版本获取路由参数接口
-  let graph = null;
   let sourceAnchorIdx, targetAnchorIdx;
   const pipelineContainer = useEmotionCss(() => {
     return {
@@ -53,6 +59,9 @@ const editPipeline = (React.FC = () => {
     };
   });
   const graphRef = useRef();
+  const paramsDrawerRef = useRef();
+  const [paramsDrawerVisible, openParamsDrawer, closeParamsDrawer] = useModal(false);
+  const [globalParam, setGlobalParam] = useState([]);
 
   const onDragEnd = (val) => {
     console.log(val, 'eee');
@@ -74,35 +83,37 @@ const editPipeline = (React.FC = () => {
     console.log(graph);
   };
   const formChange = (val) => {
-    const data = graph.save();
-    const index = data.nodes.findIndex((item) => {
-      return item.id === val.id;
-    });
-    data.nodes[index] = val;
-    graph.changeData(data);
-    graph.render();
+    if (graph) {
+      const data = graph.save();
+      const index = data.nodes.findIndex((item) => {
+        return item.id === val.id;
+      });
+      data.nodes[index] = val;
+      graph.changeData(data);
+      graph.render();
+    }
   };
-  const savePipeline = (val) => {
+  const savePipeline = async (val) => {
+    const [res, error] = await to(paramsDrawerRef.current.getFieldsValue());
+    if (error) {
+      message.error('全局参数配置有误');
+      return;
+    }
     const data = graph.save();
     console.log(data);
     let params = {
       ...locationParams,
       dag: JSON.stringify(data),
+      global_param: JSON.stringify(res.global_param),
     };
     saveWorkflow(params).then((ret) => {
-      console.log(ret);
-      if (ret.code == 200) {
-        message.success('保存成功');
-        setTimeout(() => {
-          if (val) {
-            navgite({ pathname: `/pipeline` });
-          }
-        }, 500);
-      } else {
-        message.error('保存失败');
-      }
+      message.success('保存成功');
+      setTimeout(() => {
+        if (val) {
+          navgite({ pathname: `/pipeline` });
+        }
+      }, 500);
     });
-    console.log(params);
   };
   const handlerClick = (e) => {
     e.stopPropagation();
@@ -258,13 +269,12 @@ const editPipeline = (React.FC = () => {
   };
   const getFirstWorkflow = (val) => {
     getWorkflowById(val).then((ret) => {
-      console.log(ret);
-      if (ret.code == 200) {
-        if (graph && ret.data && ret.data.dag) {
-          getGraphData(JSON.parse(ret.data.dag));
-        }
+      if (ret && ret.data) {
+        setGlobalParam(ret.data.global_param);
+      }
+      if (graph && ret.data && ret.data.dag) {
+        getGraphData(JSON.parse(ret.data.dag));
       }
-
       // graph&&graph.data(JSON.parse(ret.dag))
       // graph.render()
     });
@@ -334,7 +344,6 @@ const editPipeline = (React.FC = () => {
       });
       graph.off('dblclick', handlerClick);
     };
-    console.log(contextMenu);
   }, []);
   const initGraph = () => {
     const fittingString = (str, maxWidth, fontSize) => {
@@ -601,8 +610,10 @@ const editPipeline = (React.FC = () => {
     });
     graph.on('dblclick', (e) => {
       console.log(e.item);
-      graph.setItemState(e.item, 'nodeClicked', true);
-      handlerClick(e);
+      if (e.item) {
+        graph.setItemState(e.item, 'nodeClicked', true);
+        handlerClick(e);
+      }
     });
     graph.on('click', (e) => {
       console.log(e.item);
@@ -690,11 +701,18 @@ const editPipeline = (React.FC = () => {
       <ModelMenus onParDragEnd={onDragEnd}></ModelMenus>
       <div className={Styles.centerContainer}>
         <div className={Styles.buttonList}>
+          <Button
+            type="default"
+            icon={<Icon icon="local:parameter" style={{ verticalAlign: '-2px' }} />}
+            style={{ marginRight: '20px' }}
+            onClick={openParamsDrawer}
+          >
+            全局参数
+          </Button>
           <Button
             type="primary"
-            shape="round"
             icon={<SaveOutlined />}
-            style={{ marginRight: '20px', background: '#1664ff' }}
+            style={{ marginRight: '20px' }}
             onClick={() => {
               savePipeline(false);
             }}
@@ -703,9 +721,7 @@ const editPipeline = (React.FC = () => {
           </Button>
           <Button
             type="primary"
-            shape="round"
             icon={<SaveOutlined />}
-            style={{ background: '#1664ff' }}
             onClick={() => {
               savePipeline(true);
             }}
@@ -716,7 +732,13 @@ const editPipeline = (React.FC = () => {
         <div className={graphStyle} ref={graphRef} id={Styles.graphStyle}></div>
       </div>
       <Props ref={propsRef} onParentChange={formChange}></Props>
+      <GlobalParamsDrawer
+        ref={paramsDrawerRef}
+        open={paramsDrawerVisible}
+        globalParam={globalParam}
+        onClose={closeParamsDrawer}
+      ></GlobalParamsDrawer>
     </div>
   );
-});
-export default editPipeline;
+};
+export default EditPipeline;

react-ui/src/services/dataset/index.js

@@ -94,7 +94,7 @@ export function deleteModelVersion(params) {
 }
 // 新增数据集版本
 export function addDatasetVersionDetail(data) {
-  return request(`/api/mmp//datasetVersion/addDatasetVersions`, {
+  return request(`/api/mmp/datasetVersion/addDatasetVersions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json;charset=UTF-8',

react-ui/src/services/experiment/index.js

@@ -53,10 +53,10 @@ export function getQueryByExperimentLog(data) {
   });
 }
 // 查询实例节点结果
-export function getNodeResult(params) {
+export function getNodeResult(data) {
   return request(`/api/mmp/experimentIns/nodeResult/`, {
-    method: 'GET',
-    params,
+    method: 'POST',
+    data,
   });
 }
 

react-ui/src/types.ts

@@ -0,0 +1,9 @@
+// 流水线全局参数
+export type PipelineGlobalParam = {
+  workflow_id: number;
+  param_name: string;
+  description: string;
+  param_type: number;
+  param_value: number | string | boolean;
+  is_sensitive: number;
+};