repo-sync-2024-05-17T11:12:15+0800

Author: yinrouni

apps/platform/config/config.ts

@@ -44,7 +44,7 @@ export default defineConfig({
   //   apps: [
   //     {
   //       name: 'secretpad', // 后端应用名
-  //       tag: 'release/0.6.0b0_cml', // 分支 tag
+  //       tag: 'feature/0.7.0b0', // 分支 tag
   //       source: 'ZAPPINFO', // 应用来源，默认 ZAPPINFO，其他来源可在官网的应用信息中查看
   //     },
   //   ],

apps/platform/src/modules/advanced-config/advanced-config-drawer/advanced-config-service.ts

@@ -0,0 +1,37 @@
+import { Model } from '@/util/valtio-helper';
+
+import API from '@/services/secretpad';
+import { message } from 'antd';
+
+interface GlobalConfig {
+  maxParallelism: number;
+}
+export class advancedConfigService extends Model {
+  loading = false;
+
+  config: GlobalConfig = {
+    maxParallelism: 1,
+  };
+
+  getSetting = async (graphId: string, projectId: string) => {
+    if (!graphId || !projectId) return;
+    this.loading = true;
+    const { status, data } = await API.GraphController.getGraphDetail({
+      graphId,
+      projectId,
+    });
+    this.loading = false;
+    if (status && status.code === 0) {
+      this.config.maxParallelism = data?.maxParallelism || 1;
+    }
+  };
+
+  setting = async (params: API.FullUpdateGraphRequest) => {
+    const { status } = await API.GraphController.fullUpdateGraph(params);
+    if (status && status.code === 0) {
+      message.success('配置成功');
+    } else {
+      message.error(status?.msg);
+    }
+  };
+}

apps/platform/src/modules/advanced-config/advanced-config-drawer/advanced-config-view.tsx

@@ -0,0 +1,119 @@
+import { getModel, useModel } from '@/util/valtio-helper';
+import { DefaultModalManager } from '@/modules/dag-modal-manager';
+import { advancedConfigService } from './advanced-config-service';
+import { Button, Drawer, Form, InputNumber, Space, Spin } from 'antd';
+import { useCallback, useEffect } from 'react';
+import dagLayoutStyle from '@/modules/layout/dag-layout/index.less';
+
+import styles from './index.less';
+import { CloseOutlined } from '@ant-design/icons';
+import { useLocation } from 'umi';
+import { parse } from 'query-string';
+
+export const AdvancedConfig = () => {
+  const modalManager = useModel(DefaultModalManager);
+  const service = useModel(advancedConfigService);
+
+  const { search } = useLocation();
+  const { dagId, projectId } = parse(search);
+
+  const [form] = Form.useForm();
+
+  const { visible } = modalManager.modals[AdvancedConfigDrawer.id];
+
+  const onClose = () => {
+    modalManager.closeModal(AdvancedConfigDrawer.id);
+    form.resetFields();
+  };
+
+  const getConfig = useCallback(async () => {
+    await service.getSetting(dagId as string, projectId as string);
+  }, [dagId]);
+
+  useEffect(() => {
+    if (visible) {
+      getConfig();
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (visible) {
+      form.setFieldsValue({
+        maxParallelism: service.config?.maxParallelism,
+      });
+    }
+  }, [service.config.maxParallelism, visible]);
+
+  const handleOk = () => {
+    form.validateFields().then(async (value) => {
+      const params = {
+        maxParallelism: value.maxParallelism,
+        graphId: dagId as string,
+        projectId: projectId as string,
+      };
+      await service.setting(params);
+      onClose();
+    });
+  };
+
+  return (
+    <Drawer
+      title={'全局配置'}
+      placement="right"
+      width={320}
+      destroyOnClose
+      closable={false}
+      onClose={onClose}
+      open={visible}
+      rootClassName={styles.configDrawer}
+      getContainer={() => {
+        return document.querySelector(`.${dagLayoutStyle.center}`) as Element;
+      }}
+      mask={false}
+      extra={
+        <CloseOutlined
+          style={{ fontSize: 12 }}
+          onClick={() => {
+            onClose();
+          }}
+        />
+      }
+    >
+      <Spin spinning={service.loading}>
+        <Form form={form}>
+          <Form.Item
+            name={'maxParallelism'}
+            label={<div className={styles.task}>任务并发数</div>}
+            tooltip="单个任务流的并发组件数"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ offset: 4, span: 12 }}
+          >
+            <InputNumber
+              defaultValue={1}
+              step={1}
+              min={1}
+              max={100}
+              style={{ width: '100%' }}
+              precision={0}
+            />
+          </Form.Item>
+          <div className={styles.footer}>
+            <Space>
+              <Button type="primary" size="small" onClick={handleOk}>
+                保存配置
+              </Button>
+            </Space>
+          </div>
+        </Form>
+      </Spin>
+    </Drawer>
+  );
+};
+
+export const AdvancedConfigDrawer = {
+  id: 'AdvancedConfig',
+  visible: false,
+  data: {},
+};
+
+getModel(DefaultModalManager).registerModal(AdvancedConfigDrawer);

apps/platform/src/modules/advanced-config/advanced-config-drawer/index.less

@@ -0,0 +1,49 @@
+.configDrawer {
+  position: absolute;
+
+  :global {
+    .ant-drawer-content-wrapper {
+      box-shadow: 0 1px 4px 0 rgb(0 0 0 / 15%);
+    }
+
+    .ant-drawer-title {
+      font-size: 14px;
+    }
+
+    .ant-drawer-body {
+      padding: 0 12px;
+    }
+
+    .ant-drawer-header {
+      padding: 10px 12px 20px;
+      border-bottom-color: transparent;
+    }
+
+    .ant-form-item {
+      margin-bottom: 16px;
+    }
+
+    .ant-alert-message {
+      color: rgb(0 0 0 / 45%);
+      font-size: 12px;
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  .footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    height: 52px;
+    background-color: white;
+  }
+
+  .task {
+    color: rgb(0 0 0 / 88%);
+    font-size: 12px !important;
+    line-height: 20px;
+  }
+}

apps/platform/src/modules/advanced-config/advanced-config-entry.tsx

@@ -0,0 +1,27 @@
+import { SettingOutlined } from '@ant-design/icons';
+import {
+  AdvancedConfig,
+  AdvancedConfigDrawer,
+} from './advanced-config-drawer/advanced-config-view';
+import { useModel } from '@/util/valtio-helper';
+import { DefaultModalManager } from '@/modules/dag-modal-manager';
+
+import styles from './index.less';
+import { Tooltip } from 'antd';
+
+export const AdvancedConfigComponent: React.FC = () => {
+  const modalManager = useModel(DefaultModalManager);
+
+  const handleClick = () => {
+    modalManager.openModal(AdvancedConfigDrawer.id);
+  };
+
+  return (
+    <div>
+      <Tooltip title="全局配置">
+        <SettingOutlined onClick={handleClick} className={styles.settingContent} />
+      </Tooltip>
+      <AdvancedConfig />
+    </div>
+  );
+};

apps/platform/src/modules/advanced-config/index.less

@@ -0,0 +1,7 @@
+.settingContent {
+  color: rgb(0 0 0 / 65%);
+
+  &:hover {
+    color: #0068fa;
+  }
+}

apps/platform/src/modules/component-config/component-config-protocol.ts

@@ -11,7 +11,7 @@ export type AtomicConfigNode = {
   type: AtomicParameterType;
   fromInputIndex?: number;
   docString: string;
-  isRequired: boolean;
+  isRequired?: boolean;
   prefixes?: string[];
   value?: Attribute; //Record<string, any>;
   render?: string; // key in ConfigRenderRegistry for custom render
@@ -33,11 +33,12 @@ export type StructConfigNode = {
   domain?: string;
   version?: string;
   children: ConfigItem[];
+  type?: 'AT_STRUCT_GROUP' | 'AT_UNION_GROUP';
 };
 
 // 叶子结点：AtomicConfigNode
 // 非叶子结点：StructConfigNode
-export type ConfigItem = StructConfigNode | AtomicConfigNode;
+export type ConfigItem = StructConfigNode | AtomicConfigNode | CustomConfigNode;
 
 export type ConfigPrefix = string;
 
@@ -57,6 +58,15 @@ export const codeNameRenderKey = {
 
 export const codeNameRenderIndex = {
   'preprocessing/binary_op': [0, 2, 1, 3, 4],
+  'data_prep/psi': [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 14, 11, 12, 13, 3, 15, 16],
+};
+
+export const hideCodeNameIndex = {
+  'data_prep/psi': [7],
+};
+
+export const advancedConfigIndex = {
+  'data_prep/psi': [3, 15, 16],
 };
 
 export interface ComponentConfig {
@@ -121,7 +131,10 @@ export const getUpstreamKey = {
     const { inputs = [] } = graphNode || {};
     return upstreamNodes.map((n, index) => {
       const { codeName, nodeDef } = n || {};
-      if (codeName !== 'read_data/datatable') return inputs[index];
+
+      if (!['read_data/datatable'].includes(codeName)) {
+        return inputs[index];
+      }
       const { attrs } = nodeDef;
       if (!attrs) return inputs[index];
       return attrs[0]?.s;
@@ -145,7 +158,7 @@ export const getUpstreamKey = {
 export const getInputTables = (inputNodes: GraphNode[]) => {
   return inputNodes?.map((n) => {
     const { codeName, nodeDef } = n || {};
-    if (codeName !== 'read_data/datatable') return;
+    if (!['read_data/datatable'].includes(codeName)) return;
     const { attrs } = nodeDef;
     if (!attrs) return;
     return attrs[0]?.s;

apps/platform/src/modules/component-config/component-config-registry.ts

@@ -25,7 +25,7 @@ export class ComponentConfigRegistry extends Model {
 
   registerConfigNode(component: Component, mode: ComputeMode) {
     if (this.hasConfigNode(component, mode)) return;
-    const { name, domain, version, attrs = [], inputs } = component;
+    const { name, domain, version, attrs = [], inputs, outputs } = component;
     const parent: StructConfigNode = {
       name: `${domain}/${name}`,
       domain,
@@ -42,7 +42,7 @@ export class ComponentConfigRegistry extends Model {
       for (const param of attrs) {
         const { prefixes } = param;
         if (prefixes) {
-          this.getNodeByPath(prefixes, parent, param);
+          this.getNodeByPath(prefixes, parent, param, 0);
         } else {
           parent.children.push(this.createNode(param));
         }
@@ -60,15 +60,19 @@ export class ComponentConfigRegistry extends Model {
     prefixes: string[],
     root: StructConfigNode,
     param: ParameterNode,
+    depth: number,
   ): ConfigItem | undefined {
     if (prefixes.length === 0) return;
-    const prefix = prefixes[0];
+
+    const prefix = prefixes[depth];
     const child = root.children.find(({ name }) => name === prefix) as StructConfigNode;
+
     if (!child) {
       root.children.push(this.createNode(param));
       return;
     }
-    return this.getNodeByPath(prefixes, child, param);
+
+    return this.getNodeByPath(prefixes, child, param, depth + 1);
   }
 
   private createInputConfigNode(input: IoDef[]) {
@@ -121,7 +125,7 @@ export class ComponentConfigRegistry extends Model {
           prefixes,
           children: [],
           docString,
-          // isRequired: false,
+          isRequired: false,
           selectedName: (param as UnionParameterNode)?.union?.default_selection,
           type: 'AT_UNION_GROUP',
         };
@@ -144,7 +148,10 @@ export class ComponentConfigRegistry extends Model {
           docString,
         };
       default:
+        // is_optional：undefined，默认为必填
+        // is_optional: true，不必填
         isRequired = (param as AtomicParameterNode).atomic?.is_optional !== true;
+
         return {
           type,
           prefixes,