Merge pull request #13 from secretflow/sprint/model-serving

v1.4: 新增模型部署
secretflow · Mar 15, 2024 · 6167a23 · 6167a23
2 parents 5a57487 + 31265f6
commit 6167a23
Show file tree

Hide file tree

Showing 78 changed files with 5,568 additions and 148 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -33,7 +33,7 @@ jobs:
       - name: Use pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: ^8.8.0
+          version: ^8.8
           run_install: false
 
       - name: Get pnpm store directory

diff --git a/apps/platform/config/routes.ts b/apps/platform/config/routes.ts
@@ -16,6 +16,11 @@ export const routes = [
         component: 'record',
         wrappers: ['@/wrappers/p2p-center-auth', '@/wrappers/component-wrapper'],
       },
+      {
+        path: '/model-submission',
+        component: 'model-submission',
+        wrappers: ['@/wrappers/p2p-center-auth', '@/wrappers/component-wrapper'],
+      },
       {
         path: '/node',
         component: 'new-node',

diff --git a/apps/platform/src/components/datatable-preview.tsx b/apps/platform/src/components/datatable-preview.tsx
@@ -48,6 +48,11 @@ export const DatatablePreview = (props: DatatablePreviewInterface) => {
       nodeId,
       datatableId,
       projectId: projectId as string,
+      /**
+       * 需求:  数据管理列表不仅有csv数据，还有http数据，画布上只会用到 csv 类型
+       * 所以除数据管理模块，其他用到的这个接口都需要加一个type: CSV 类型用来区分数据源类型，用于服务端做代码兼容
+       */
+      type: 'CSV',
     });
     setLoading(false);
     if (data) {

diff --git a/.../src/modules/component-config/config-item-render/custom-render/case-when-render/index.tsx b/.../src/modules/component-config/config-item-render/custom-render/case-when-render/index.tsx
@@ -226,6 +226,7 @@ export const CaseWhenRender = (prop: { node: AtomicConfigNode }) => {
               datatableId,
               nodeId,
               projectId,
+              type: 'CSV',
             });
             if (!data) return;
             const { configs } = data;

diff --git a/apps/platform/src/modules/component-config/config-item-render/custom-render/utils.ts b/apps/platform/src/modules/component-config/config-item-render/custom-render/utils.ts
@@ -54,6 +54,7 @@ export const useCols = (
             datatableId,
             nodeId,
             projectId,
+            type: 'CSV',
           });
           if (!data) return;
           const { configs } = data;

diff --git a/...latform/src/modules/component-config/config-item-render/defalt-col-selection-template.tsx b/...latform/src/modules/component-config/config-item-render/defalt-col-selection-template.tsx
@@ -143,6 +143,11 @@ export const DefaultColSelection: React.FC<RenderProp<string>> = (config) => {
           datatableId,
           nodeId,
           projectId,
+          /**
+           * 需求:  数据管理列表不仅有csv数据，还有http数据，画布上只会用到 csv 类型
+           * 所以除数据管理模块，其他用到的这个接口都需要加一个type: CSV 类型用来区分数据源类型，用于服务端做代码兼容
+           */
+          type: 'CSV',
         });
         if (!data) return;
         const { configs } = data;

diff --git a/...omponent-config/config-item-render/default-feature-selection/multi-field-select-modal.tsx b/...omponent-config/config-item-render/default-feature-selection/multi-field-select-modal.tsx
@@ -43,6 +43,7 @@ export const MultiFieldSelectModal = (props: IProps) => {
             nodeId: selectedTable.nodeId,
             datatableId: selectedTable.datatableId,
             projectId,
+            type: 'CSV',
           });
           if (!data) return;
           setSelectedFields(data.configs);
@@ -64,6 +65,7 @@ export const MultiFieldSelectModal = (props: IProps) => {
             nodeId: table.nodeId,
             datatableId: table.datatableId,
             projectId,
+            type: 'CSV',
           });
           if (!data) return;
           configs.push(data.configs);

diff --git a/...src/modules/component-config/config-item-render/default-feature-selection/select-tree.tsx b/...src/modules/component-config/config-item-render/default-feature-selection/select-tree.tsx
@@ -112,6 +112,7 @@ export const SelectTree = ({
               datatableId,
               nodeId,
               projectId,
+              type: 'CSV',
             });
             if (!data) return;
             const { configs } = data;

diff --git a/apps/platform/src/modules/component-config/template-quick-config/quick-config-drawer.tsx b/apps/platform/src/modules/component-config/template-quick-config/quick-config-drawer.tsx
@@ -73,7 +73,7 @@ export const QuickConfigModal = () => {
           }}
         >
           {type === PipelineTemplateType.RISK && <QuickConfigRisk />}
-          {type === PipelineTemplateType.PSI && <QuickConfigPSI />}
+          {type === PipelineTemplateType.PSI && <QuickConfigPSI type="MPC" />}
           {type === PipelineTemplateType.PSI_TEE && <QuickConfigPSI />}
           {type === PipelineTemplateType.TEE && <QuickConfigTee />}
 

diff --git a/apps/platform/src/modules/component-config/template-quick-config/quick-config-psi.tsx b/apps/platform/src/modules/component-config/template-quick-config/quick-config-psi.tsx
@@ -11,6 +11,8 @@ import {
   getProjectDatatable,
 } from '@/services/secretpad/ProjectController';
 
+import { MultiTableFeatureSelection } from '../config-item-render/default-feature-selection/table-feature-selection';
+
 import styles from './index.less';
 
 const { Option } = Select;
@@ -23,10 +25,11 @@ type QuickConfigPSIComponentProps = {
   })[];
 
   form: FormInstance;
+  type?: 'MPC' | 'TEE';
 };
 
 export const QuickConfigPSIComponent = (props: QuickConfigPSIComponentProps) => {
-  const { tables, tableList, form } = props;
+  const { tables, tableList, form, type = 'TEE' } = props;
 
   const { s: selectedReceiver } = Form.useWatch('dataTableReceiver', form) || {};
   const { s: selectedSender } = Form.useWatch('dataTableSender', form) || {};
@@ -37,6 +40,15 @@ export const QuickConfigPSIComponent = (props: QuickConfigPSIComponentProps) =>
   const { search } = useLocation();
   const { projectId } = parse(search) as { projectId: string };
 
+  const [selectedTableInfo, setSelectedTableInfo] = useState<
+    {
+      datatableId: string;
+      datatableName: string;
+      nodeId: string;
+      nodeName: string;
+    }[]
+  >([]);
+
   const getCols = async (
     selectedTable: string,
     callback: Dispatch<SetStateAction<{ value: string; label: string }[]>>,
@@ -47,6 +59,7 @@ export const QuickConfigPSIComponent = (props: QuickConfigPSIComponentProps) =>
       projectId,
       nodeId: table.nodeId,
       datatableId: table.datatableId,
+      type: 'CSV',
     });
     if (!tableConfig) return;
     const { configs } = tableConfig;
@@ -61,6 +74,19 @@ export const QuickConfigPSIComponent = (props: QuickConfigPSIComponentProps) =>
     }
   };
 
+  useEffect(() => {
+    const tableSelected = tableList.filter(
+      (d) => d.datatableId === selectedReceiver || d.datatableId === selectedSender,
+    ) as {
+      datatableId: string;
+      datatableName: string;
+      nodeId: string;
+      nodeName: string;
+    }[];
+
+    if (tableSelected.length > 1) setSelectedTableInfo(tableSelected);
+  }, [selectedReceiver, selectedSender, projectId]);
+
   useEffect(() => {
     getCols(selectedReceiver, setReceiverCols);
   }, [selectedReceiver, projectId]);
@@ -253,11 +279,45 @@ export const QuickConfigPSIComponent = (props: QuickConfigPSIComponentProps) =>
           ))
         }
       </Form.List>
+
+      {type === 'MPC' && (
+        <Form.Item
+          name="featureSelects"
+          label={<div className={styles.configItemLabel}>选择特征</div>}
+          required
+          messageVariables={{ msg: '请选择特征列' }}
+          rules={[
+            {
+              required: true,
+              message: '${msg}',
+              validator: (_, val) => {
+                if (!val || val.length === 0)
+                  return Promise.reject(new Error('${msg}'));
+
+                return Promise.resolve();
+              },
+            },
+          ]}
+          getValueProps={(value) => {
+            return { value: value?.ss };
+          }}
+          getValueFromEvent={(value) => {
+            return { ss: value };
+          }}
+        >
+          <MultiTableFeatureSelection
+            tableKeys={selectedTableInfo}
+            size={'small'}
+            rules={{ min: 1 }}
+          />
+        </Form.Item>
+      )}
     </>
   );
 };
 
-export const QuickConfigPSI = () => {
+export const QuickConfigPSI = (props: { type?: 'MPC' | 'TEE' }) => {
+  const { type = 'TEE' } = props;
   const form = Form.useFormInstance();
   const [tables, setTables] = useState<
     { datatableId: string; nodeName: string; datatableName: string }[]
@@ -310,5 +370,12 @@ export const QuickConfigPSI = () => {
     getTables();
   }, [projectId]);
 
-  return <QuickConfigPSIComponent tables={tables} tableList={tableList} form={form} />;
+  return (
+    <QuickConfigPSIComponent
+      tables={tables}
+      tableList={tableList}
+      form={form}
+      type={type}
+    />
+  );
 };
diff --git a/apps/platform/src/modules/dag-log/dag-log.service.ts b/apps/platform/src/modules/dag-log/dag-log.service.ts
@@ -1,10 +1,10 @@
 import type { GraphNode } from '@secretflow/dag';
 
-import { componentConfigDrawer } from '@/modules/component-config/config-modal';
-import { DefaultModalManager } from '@/modules/dag-modal-manager';
-import { ModalWidth } from '@/modules/dag-modal-manager/modal-manger-protocol';
-import { resultDrawer } from '@/modules/dag-result/result-modal';
-import { RecordListDrawerItem } from '@/modules/pipeline-record-list/record-list-drawer-view';
+import {
+  DefaultModalManager,
+  ModalsEnum,
+  ModalsWidth,
+} from '@/modules/dag-modal-manager';
 import { getGraphNodeLogs } from '@/services/secretpad/GraphController';
 import { getJobLog } from '@/services/secretpad/ProjectController';
 import { Model, getModel } from '@/util/valtio-helper';
@@ -91,35 +91,42 @@ export class DagLogService extends Model {
     super();
     this.modalManager.onModalsChanged((modals: any) => {
       if (
-        modals[componentConfigDrawer.id].visible &&
-        modals[RecordListDrawerItem.id]?.visible
+        modals[ModalsEnum.ComponentConfigDrawer].visible &&
+        modals[ModalsEnum.RecordListDrawer]?.visible
       ) {
         return this.setLogRightAllConfigWidth({
           componentConfigWidth:
-            ModalWidth[componentConfigDrawer.id] + ModalWidth[RecordListDrawerItem.id],
+            ModalsWidth[ModalsEnum.ComponentConfigDrawer] +
+            ModalsWidth[ModalsEnum.RecordListDrawer],
         });
       }
-      if (modals[resultDrawer.id].visible) {
+      if (modals[ModalsEnum.ResultDrawer].visible) {
         return this.setLogRightAllConfigWidth({
-          componentResultWidth: ModalWidth[resultDrawer.id],
+          componentResultWidth: ModalsWidth[ModalsEnum.ResultDrawer],
         });
       }
-      if (modals[RecordListDrawerItem.id]?.visible) {
+      if (modals[ModalsEnum.RecordListDrawer]?.visible) {
         return this.setLogRightAllConfigWidth({
-          componentResultWidth: ModalWidth[RecordListDrawerItem.id],
+          componentResultWidth: ModalsWidth[ModalsEnum.RecordListDrawer],
         });
       }
 
-      if (modals[componentConfigDrawer.id].visible) {
+      if (modals[ModalsEnum.ComponentConfigDrawer].visible) {
         return this.setLogRightAllConfigWidth({
-          componentConfigWidth: ModalWidth[componentConfigDrawer.id],
+          componentConfigWidth: ModalsWidth[ModalsEnum.ComponentConfigDrawer],
+        });
+      }
+
+      if (modals[ModalsEnum.ModelSubmissionDrawer].visible) {
+        return this.setLogRightAllConfigWidth({
+          componentConfigWidth: ModalsWidth[ModalsEnum.ModelSubmissionDrawer],
         });
       }
 
       if (
-        !modals[componentConfigDrawer.id].visible &&
-        !modals[resultDrawer.id].visible &&
-        !modals[RecordListDrawerItem.id]?.visible
+        !modals[ModalsEnum.ComponentConfigDrawer].visible &&
+        !modals[ModalsEnum.ResultDrawer].visible &&
+        !modals[ModalsEnum.RecordListDrawer]?.visible
       ) {
         return this.setLogRightAllConfigWidth({ componentConfigWidth: 0 });
       }

diff --git a/apps/platform/src/modules/dag-log/index.less b/apps/platform/src/modules/dag-log/index.less
@@ -9,6 +9,7 @@
 
 .logDrawerRoot {
   position: absolute;
+  overflow: hidden;
 }
 
 .activeTab {

diff --git a/apps/platform/src/modules/dag-modal-manager/index.ts b/apps/platform/src/modules/dag-modal-manager/index.ts
@@ -56,3 +56,17 @@ export class DefaultModalManager extends Model implements ModalManager<any> {
     }
   };
 }
+
+export enum ModalsEnum {
+  ComponentConfigDrawer = 'component-config',
+  RecordListDrawer = 'RecordListDrawer',
+  ResultDrawer = 'component-result',
+  ModelSubmissionDrawer = 'ModelSubmissionDrawer',
+}
+
+export const ModalsWidth = {
+  [ModalsEnum.ComponentConfigDrawer]: 300,
+  [ModalsEnum.RecordListDrawer]: 320,
+  [ModalsEnum.ResultDrawer]: 600,
+  [ModalsEnum.ModelSubmissionDrawer]: 560,
+};
diff --git a/apps/platform/src/modules/dag-modal-manager/modal-manger-protocol.ts b/apps/platform/src/modules/dag-modal-manager/modal-manger-protocol.ts
@@ -1,6 +1,7 @@
 import type { Emitter } from '@secretflow/utils';
 
 import { componentConfigDrawer } from '@/modules/component-config/config-modal';
+import { ModelSubmissionDrawerItem } from '@/modules/dag-model-submission/submission-drawer';
 import { resultDrawer } from '@/modules/dag-result/result-modal';
 import { RecordListDrawerItem } from '@/modules/pipeline-record-list/record-list-drawer-view';
 
@@ -23,7 +24,8 @@ export interface ModalManager<T> {
 }
 
 export const ModalWidth = {
-  [componentConfigDrawer.id]: 300,
+  [componentConfigDrawer?.id]: 300,
   [RecordListDrawerItem.id]: 320,
   [resultDrawer.id]: 600,
+  [ModelSubmissionDrawerItem.id]: 560,
 };