feat: add guide for new node

secretflow · Sep 7, 2023 · 37f3507 · 37f3507
1 parent fdc5b95
commit 37f3507
Show file tree

Hide file tree

Showing 39 changed files with 361 additions and 135 deletions.
diff --git a/apps/platform/src/assets/zoom-fit.icon.svg b/apps/platform/src/assets/zoom-fit.icon.svg
diff --git a/apps/platform/src/modules/cooperative-node-list/add-cooperative-node-modal.tsx b/apps/platform/src/modules/cooperative-node-list/add-cooperative-node-modal.tsx
@@ -60,7 +60,7 @@ export const AddCooperativeNodeDrawer = ({
       } else {
         onOk();
         handleClose();
-        messageApi.success(<>添加成功！</>);
+        messageApi.success(<>添加成功！请手动刷新通讯状态确保连接可用</>);
       }
     });
   };

diff --git a/apps/platform/src/modules/cooperative-node-list/cooperative-node-detail-modal.tsx b/apps/platform/src/modules/cooperative-node-list/cooperative-node-detail-modal.tsx
@@ -126,6 +126,7 @@ export const CooperativeNodeDetailDrawer = ({
                 onClick={async () => {
                   await service.refreshNode(data.routeId || '');
                   service.getCooperativeNodeDetail(data.routeId || '');
+                  onOk();
                 }}
               >
                 刷新

diff --git a/apps/platform/src/modules/cooperative-node-list/index.less b/apps/platform/src/modules/cooperative-node-list/index.less
@@ -5,7 +5,6 @@
 
   .nodeListHeader {
     display: flex;
-    height: 39px;
     align-items: center;
     justify-content: space-between;
   }
@@ -17,12 +16,20 @@
   }
 
   .content {
-    padding: 20px 0 0;
+    padding: 16px 0 0;
 
     .idText {
       color: rgb(0 0 0 / 45%);
       font-size: 12px;
     }
+
+    :global(.ant-table-thead) {
+      height: 54px;
+    }
+
+    :global(.ant-table-row) {
+      height: 62px;
+    }
   }
 
   .action {

diff --git a/apps/platform/src/modules/cooperative-node-list/index.tsx b/apps/platform/src/modules/cooperative-node-list/index.tsx
@@ -149,9 +149,9 @@ export const CooperativeNodeListComponent = () => {
       title: '通讯状态',
       dataIndex: 'status',
       key: 'status',
-      width: '17%',
+      width: '18%',
       render: (nodeStatus: NodeState, record) => (
-        <Space>
+        <>
           <Badge
             status={NodeStateText[nodeStatus || NodeState.UNKNOWN].icon}
             text={NodeStateText[nodeStatus || NodeState.UNKNOWN].text}
@@ -166,7 +166,7 @@ export const CooperativeNodeListComponent = () => {
           >
             刷新
           </Button>
-        </Space>
+        </>
       ),
     },
     {
@@ -287,7 +287,10 @@ export const CooperativeNodeListComponent = () => {
               viewInstance.pageNumber = page;
               viewInstance.pageSize = pageSize;
             },
+            size: 'default',
+            showSizeChanger: true,
           }}
+          size="small"
           rowKey={(record) => record.routeId as string}
         />
       </div>

diff --git a/apps/platform/src/modules/create-project/add-node-tag.tsx b/apps/platform/src/modules/create-project/add-node-tag.tsx
@@ -2,8 +2,9 @@ import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { Checkbox, Popover, Tag, Space, Input } from 'antd';
 import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 import classNames from 'classnames';
+import { difference } from 'lodash';
 import type { ChangeEvent } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import styles from './add-node-tag.less';
 
@@ -15,6 +16,7 @@ export const AddNodeTag: React.FC<{
   onChange?: (type: CheckboxValueType[]) => void;
 }> = (props) => {
   const { nodeList, value, onChange } = props;
+  const [searchValue, setSearchValue] = useState('');
 
   const [tags, setTags] = React.useState<CheckboxValueType[]>(value || []);
   const [nodes, setNodes] = React.useState<API.NodeVO[]>(nodeList);
@@ -26,16 +28,28 @@ export const AddNodeTag: React.FC<{
   };
 
   const handleCheckChange = (checkList: CheckboxValueType[]) => {
-    setTags(checkList);
-    onChange && onChange(checkList);
+    if (searchValue) {
+      const searchList = nodeList
+        .filter((node) => node.nodeName && node.nodeName.indexOf(searchValue) >= 0)
+        .map((item) => item.nodeId);
+      const difList = difference(tags, searchList) as CheckboxValueType[];
+      const newList = [...difList, ...checkList];
+      setTags(newList);
+      onChange && onChange(newList);
+    } else {
+      setTags(checkList);
+      onChange && onChange(checkList);
+    }
   };
 
   const handleSearchNode = (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target.value) {
       setNodes(nodeList);
+      setSearchValue('');
     } else {
+      setSearchValue(e.target.value);
       setNodes(
-        nodes.filter(
+        nodeList.filter(
           (node) => node.nodeName && node.nodeName.indexOf(e.target.value) >= 0,
         ),
       );

diff --git a/apps/platform/src/modules/create-project/create-project.view.tsx b/apps/platform/src/modules/create-project/create-project.view.tsx
@@ -12,6 +12,7 @@ import { PipelineTemplateType } from '../pipeline/pipeline-protocol';
 
 import { AddNodeTag } from './add-node-tag';
 import { CreateProjectService } from './create-project.service';
+import { EmbeddedNodePreview } from './embedded-node.view';
 import styles from './index.less';
 import { TemplateSwitch } from './template-switch';
 
@@ -32,6 +33,7 @@ export const CreateProjectModal = ({ visible, data, close }: ICreateProjectModal
   const templateId = Form.useWatch('templateId', form);
   const projectName = Form.useWatch('projectName', form);
   const computeMode = Form.useWatch('computeMode', form);
+  const nodes = Form.useWatch('nodes', form);
 
   React.useEffect(() => {
     service.getNodeList();
@@ -73,7 +75,8 @@ export const CreateProjectModal = ({ visible, data, close }: ICreateProjectModal
             type="primary"
             onClick={handleOk}
             className={classnames({
-              [styles.buttonDisable]: !templateId || !projectName || !computeMode,
+              [styles.buttonDisable]:
+                !templateId || !projectName || !computeMode || nodes.length < 2,
             })}
             loading={viewInstance.createLoading}
           >
@@ -169,9 +172,13 @@ export const CreateProjectModal = ({ visible, data, close }: ICreateProjectModal
           name="nodes"
           initialValue={data.showBlank ? [] : ['alice', 'bob']}
           required
-          tooltip="最多可选十个"
+          tooltip="最多可选十个，至少要两个节点才能创建一个项目"
         >
-          <AddNodeTag nodeList={service.nodeList || []} />
+          {data.showBlank ? (
+            <AddNodeTag nodeList={service.nodeList || []} />
+          ) : (
+            <EmbeddedNodePreview />
+          )}
         </Form.Item>
       </Form>
     </Drawer>

diff --git a/apps/platform/src/modules/create-project/embedded-node.less b/apps/platform/src/modules/create-project/embedded-node.less
@@ -0,0 +1,29 @@
+.embeddedNodes {
+  display: flex;
+  justify-content: space-around;
+
+  .embeddedNode {
+    width: 306px;
+    height: 102px;
+    border-radius: 8px;
+    background-color: rgb(0 0 0 / 2%);
+
+    .nodeContent {
+      display: flex;
+      padding: 10px;
+
+      .header {
+        color: rgb(0 0 0 / 85%);
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .table {
+        margin-top: 8px;
+        color: rgb(0 0 0 / 88%);
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+  }
+}
diff --git a/apps/platform/src/modules/create-project/embedded-node.view.tsx b/apps/platform/src/modules/create-project/embedded-node.view.tsx
@@ -0,0 +1,36 @@
+import { Tag } from 'antd';
+
+import styles from './embedded-node.less';
+
+const embeddedNodeInfo = [
+  {
+    nodeName: 'alice',
+    datatableName: 'alice.csv',
+  },
+  {
+    nodeName: 'bob',
+    datatableName: 'bob.csv',
+  },
+];
+
+export const EmbeddedNodePreview = () => {
+  return (
+    <div className={styles.embeddedNodes}>
+      {embeddedNodeInfo.map((embedded, index) => {
+        return (
+          <div className={styles.embeddedNode} key={index}>
+            <div className={styles.nodeContent}>
+              <div>
+                <Tag color="success">内置</Tag>
+              </div>
+              <div>
+                <div className={styles.header}>节点：{embedded.nodeName}</div>
+                <div className={styles.table}>{embedded.datatableName}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
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,9 +1,9 @@
+import type { Emitter } from '@secretflow/utils';
+
 import { componentConfigDrawer } from '@/modules/component-config/config-modal';
 import { resultDrawer } from '@/modules/dag-result/result-modal';
 import { RecordListDrawerItem } from '@/modules/pipeline-record-list/record-list-drawer-view';
 
-import type { Emitter } from '@secretflow/utils';
-
 export interface ModalItem<T> {
   id: string;
   visible: boolean;

diff --git a/apps/platform/src/modules/data-manager/data-manager.view.tsx b/apps/platform/src/modules/data-manager/data-manager.view.tsx
@@ -236,8 +236,10 @@ export const DataManagerComponent: React.FC = () => {
               viewInstance.pageSize = pageSize;
               viewInstance.getTableList();
             },
+            size: 'default',
           }}
           rowKey={(record) => record.datatableId as string}
+          size="small"
         />
       </div>
       {viewInstance.displayTableList.length > 0 && (

diff --git a/apps/platform/src/modules/data-manager/index.less b/apps/platform/src/modules/data-manager/index.less
@@ -15,6 +15,14 @@
 
 .content {
   padding: 16px 0 0;
+
+  :global(.ant-table-thead) {
+    height: 54px;
+  }
+
+  :global(.ant-table-row) {
+    height: 54px;
+  }
 }
 
 .authProjectListPopover {

diff --git a/...m/src/modules/data-table-add/component/upload-table/data-table-add-for-registerd-node.tsx b/...m/src/modules/data-table-add/component/upload-table/data-table-add-for-registerd-node.tsx
@@ -131,7 +131,7 @@ export const AddDataTableForRegisteredNode = () => {
                 <Select options={dataSourceOptions} size={'small'} />
               </Form.Item>
             </Descriptions.Item>
-            <Descriptions.Item label="数据源类型">节点内置数据</Descriptions.Item>
+            <Descriptions.Item label="数据源类型">节点本地数据</Descriptions.Item>
           </Descriptions>
         </div>
         <Form.Item

diff --git a/apps/platform/src/modules/data-table-add/component/upload-table/upload-table.view.tsx b/apps/platform/src/modules/data-table-add/component/upload-table/upload-table.view.tsx
@@ -124,7 +124,7 @@ export const UploadTable: React.FC = () => {
                 </div>
               </Descriptions.Item>
               <Descriptions.Item label="所属数据源">默认数据源</Descriptions.Item>
-              <Descriptions.Item label="数据源类型">节点内置数据</Descriptions.Item>
+              <Descriptions.Item label="数据源类型">节点本地数据</Descriptions.Item>
             </Descriptions>
           </div>
           <div className={styles.csvContentConfig}>

diff --git a/apps/platform/src/modules/data-table-info/data-table-info.view.tsx b/apps/platform/src/modules/data-table-info/data-table-info.view.tsx
@@ -74,7 +74,7 @@ export const DataTableInfoDrawer: React.FC<IProps<PropsData>> = (props) => {
           {/* {tableInfo.datasourceId} */}
           默认数据源
         </Descriptions.Item>
-        <Descriptions.Item label="数据源类型">节点内置数据</Descriptions.Item>
+        <Descriptions.Item label="数据源类型">节点本地数据</Descriptions.Item>
         <Descriptions.Item span={2} label="数据地址">
           {tableInfo.relativeUri}
         </Descriptions.Item>
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,6 +126,7 @@ export const CooperativeNodeDetailDrawer = ({ @@
                     onClick={async () => {
                       await service.refreshNode(data.routeId || '');
                       service.getCooperativeNodeDetail(data.routeId || '');
+                      onOk();
                     }}
                   >
                     刷新
@@ Expand Down @@