feat: update import logic (#435)

* feat: update import logic * feat: update import page * mod: code review * mod: code review * mod: update style
vesoft-inc · Feb 8, 2023 · 3a3bd61 · 3a3bd61
1 parent 89e2c06
commit 3a3bd61
Show file tree

Hide file tree

Showing 34 changed files with 1,157 additions and 757 deletions.
diff --git a/app/common.less b/app/common.less
@@ -3,9 +3,9 @@
 @containerWidth: 1180px;
 @darkGray: #8697B0;
 @red: #EB5757;
-@blue: #2F80ED;
+@blue: #0091FF;
 @lightGray: #E9EDEF;
 @lightBlue: #F3F6F9;
 @darkBlue: #465B7A;
 @lightBlack: #172F52;
-@headerBlack: #2F3A4A;
+@headerBlack: #2F3A4A;
diff --git a/app/components/CSVPreviewLink/index.module.less b/app/components/CSVPreviewLink/index.module.less
@@ -6,15 +6,22 @@
 	max-width: 600px;
 	padding: 16px 8px 50px;
 	overflow: auto;
-
+	.selectTitle {
+		margin-bottom: 0;
+		font-family: Roboto-Medium, sans-serif;
+		color: #212A39;
+	}
 	table {
 		td,
 		th {
 			text-align: center;
 		}
-		.ant-table-tbody {
-			tr {
-				background-color: @lightBlue;
+		:global {
+			.ant-table-tbody {
+				tr {
+					background-color: @lightBlue;
+					color: #212A39;
+				}
 			}
 		}
 		.limitWidth {
@@ -37,18 +44,13 @@
 	}
 
 	> .operation {
-		padding-bottom: 25px;
 		text-align: center;
 		position: absolute;
-    bottom: 0;
+    bottom: 15px;
     left: 50%;
     transform: translateX(-50%);
 	}
 
-	.csvSelectIndex {
-		margin-right: 10px;
-	}
-
 	.anticon {
 		font-size: 16px;
 	}

diff --git a/app/components/CSVPreviewLink/index.tsx b/app/components/CSVPreviewLink/index.tsx
@@ -9,68 +9,75 @@ import styles from './index.module.less';
 interface IProps {
   file: any;
   children: any;
-  onMapping?: (index) => void;
+  onMapping?: (index: number) => void;
   btnType?: string
   selected?: boolean
 }
 
 const CSVPreviewLink = (props: IProps) => {
-  const { onMapping, file: { content }, children, btnType, selected } = props;
+  const { onMapping, file, children, btnType, selected } = props;
   const [visible, setVisible] = useState(false);
   const { intl } = useI18n();
   const handleLinkClick = e => {
     e.stopPropagation();
     setVisible(true);
   };
-
-  const handleMapping = index => {
-    onMapping && onMapping(index);
+  const handleMapping = (index: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onMapping?.(index);
     setVisible(false);
   };
-  const columns = content.length
-    ? content[0].map((_, index) => {
+  const columns = file?.content?.length
+    ? file.content[0].map((header, index) => {
       const textIndex = index;
+      const _header = file?.withHeader ? header : `Column ${textIndex}`;
       return {
         title: onMapping ? (
           <Button
             type="primary"
             className={styles.csvSelectIndex}
-            onClick={() => handleMapping(textIndex)}
-          >{`column ${textIndex}`}</Button>
+            onClick={(e) => handleMapping(textIndex, e)}
+          >{_header}</Button>
         ) : (
-          `Column ${textIndex}`
+          _header
         ),
         dataIndex: index,
         render: value => <span className={styles.limitWidth}>{value}</span>,
       };
     })
     : [];
+  const handleOpen = (visible) => {
+    if(!file) return;
+    setVisible(visible);
+  };
   return (
     <Popover
       destroyTooltipOnHide={true}
       overlayClassName={styles.popoverPreview}
       open={visible}
       trigger="click"
       arrowPointAtCenter
-      onOpenChange={visible => setVisible(visible)}
+      onOpenChange={handleOpen}
       content={<div className={styles.csvPreview}>
+        <p className={styles.selectTitle}>{intl.get('import.selectCsvColumn')}</p>
         <Table
+          bordered={false}
           className={cls({ [styles.noBackground]: !!onMapping })}
-          dataSource={content}
+          dataSource={file?.content || []}
           columns={columns}
           pagination={false}
           rowKey={() => uuidv4()}
         />
         <div className={styles.operation}>
           {onMapping && (
-            <Button onClick={() => handleMapping(null)}>
+            <Button onClick={(e) => handleMapping(null, e)} className="primaryBtn studioAddBtn">
               {intl.get('import.ignore')}
             </Button>
           )}
         </div>
       </div>}
     >
-      <Button type="link" className={cls(styles.btnPreview, { 'primaryBtn': btnType === 'default', [styles.btnActived]: selected })} onClick={handleLinkClick}>
+      <Button type="link" disabled={!file} className={cls(styles.btnPreview, { 'primaryBtn': btnType === 'default', [styles.btnActived]: selected })} onClick={handleLinkClick}>
         {children}
       </Button>
     </Popover>

diff --git a/app/components/Instruction/index.tsx b/app/components/Instruction/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import './index.less';
 
-const Instruction = (props: { description: string; onClick?: () => void }) => {
+const Instruction = (props: { description: React.ReactNode; onClick?: () => void }) => {
   return (
     <Tooltip title={props.description} placement="right">
       <Icon

diff --git a/app/config/locale/en-US.json b/app/config/locale/en-US.json
@@ -57,7 +57,9 @@
     "viewSchema": "View Schema",
     "beta": "Beta",
     "danglingEdge": "Dangling edge",
-    "columnName": "Column name"
+    "columnName": "Column name",
+    "src": "Source",
+    "dst": "Destination"
   },
   "doc": {
     "welcome": "Welcome to",
@@ -150,14 +152,14 @@
     "task": "import task",
     "taskList": "Task List",
     "taskName": "Task Name",
-    "vertices": "Map Vertices",
+    "tag": "Map Tags",
     "edge": "Map Edges",
     "runImport": "Import",
     "fileName": "File Name",
     "withHeader": "Header",
     "fileSize": "Size",
     "fileTitle": "File list",
-    "bindDatasource": "Bind Datasource",
+    "bindDatasource": "Add source file",
     "endImport": "Stop Import",
     "prop": "Prop",
     "mapping": "CSV Index",
@@ -166,7 +168,7 @@
     "ignore": "Ignore",
     "vertexText": "Vertex",
     "indexNotEmpty": "column index can't be null.",
-    "enterPassword": "Please enter your nebula account password",
+    "enterPassword": "Please enter the NebulaGraph account password to continue",
     "isEmpty": "is empty",
     "startImporting": "Start importing",
     "stopImportingSuccess": "Stop import successfully.",
@@ -179,8 +181,9 @@
     "importPending": "Pending",
     "notImported": "{total} lines not imported",
     "readFailed": "{total} lines read failed",
-    "selectFile": "Select bind source file",
+    "selectFile": "Select file",
     "addTag": "Add Tag",
+    "addEdge": "Add Edge Type",
     "selectTag": "Select Tag",
     "selectEdge": "Select Edge Type",
     "config": "Task Config",
@@ -198,7 +201,38 @@
     "uploadSuccessfully": "Upload files successfully.",
     "fileSizeLimit": "The file is too large and exceeds the upload limit({size}), please modify the MaxBytes in the startup configuration file and restart the service",
     "noHttp": "The address in the configuration file does not support http protocol, please remove http(s)://",
-    "addressMatch": "The address in the configuration file must contain the Graph address of current login connection. Separate multiple addresses with "
+    "addressMatch": "The address in the configuration file must contain the Graph address of current login connection. Separate multiple addresses with ",
+    "dataSourceFile": "Data source file",
+    "vidColumn": "VID column",
+    "srcVidColumn": "Source VID column",
+    "dstVidColumn": "Destination VID column",
+    "vidFunction": "VID function",
+    "vidPrefix": "VID prefix",
+    "concurrencyTip": "Number of NebulaGraph client concurrency.",
+    "batchSizeTip": "The number of statements inserting data in a batch.",
+    "retryTip": "Retry times of nGQL statement execution failures.",
+    "channelBufferSizeTip": "Cache queue size per NebulaGraph client.",
+    "vidFunctionTip": "Function to generate VID. Currently only hash functions are supported.",
+    "vidPrefixTip": "prefix added to the original vid.",
+    "selectCsvColumn": "Select CSV Index",
+    "graphAddress": "Graph service address",
+    "concurrency": "Concurrency",
+    "retry": "Retry",
+    "channelBufferSize": "Channel Buffer Size",
+    "graphAddressTip": "The following Graph host will be used for data import",
+    "currentHost": "Current connected host",
+    "expandMoreConfig": "Expand more configurations",
+    "pickUpConfig": "Pick up more configurations",
+    "tagRequired": "Please select tag",
+    "edgeRequired": "Please select edge type",
+    "tagFileRequired": "Please add tag source file",
+    "edgeFileRequired": "Please add edge source file",
+    "tagFileSelect": "Please select tag source file",
+    "edgeFileSelect": "Please select edge source file",
+    "configDisplay": "These data files will be loaded",
+    "loadToTag": "Load {file} to tag {name}",
+    "loadToEdge": "Load {file} to edge type {name}",
+    "importConfirm": "Import task confirm"
   },
   "schema": {
     "spaceList": "Graph Space List",

diff --git a/app/config/locale/zh-CN.json b/app/config/locale/zh-CN.json
@@ -57,7 +57,9 @@
     "viewSchema": "查看 Schema",
     "beta": "Beta",
     "danglingEdge": "悬挂边",
-    "columnName": "列名"
+    "columnName": "列名",
+    "src": "起点",
+    "dst": "终点"
   },
   "doc": {
     "welcome": "欢迎使用",
@@ -150,14 +152,14 @@
     "task": "导入任务",
     "taskList": "任务列表",
     "taskName": "任务名称",
-    "vertices": "关联点",
+    "tag": "关联标签",
     "edge": "关联边",
     "runImport": "导入",
     "fileName": "文件名",
     "withHeader": "头字段",
     "fileSize": "大小",
     "fileTitle": "文件列表",
-    "bindDatasource": "绑定数据源",
+    "bindDatasource": "添加导入文件",
     "endImport": "终止导入",
     "prop": "属性",
     "mapping": "对应列标",
@@ -166,7 +168,7 @@
     "ignore": "忽略",
     "vertexText": "点",
     "indexNotEmpty": "对应列标不能为空",
-    "enterPassword": "请输入 nebula 账号密码",
+    "enterPassword": "请输入 nebula 账号密码以继续",
     "isEmpty": "为空",
     "startImporting": "开始导入",
     "stopImportingSuccess": "已停止导入",
@@ -181,6 +183,7 @@
     "readFailed": "{total}行读取失败",
     "selectFile": "选择绑定文件",
     "addTag": "添加 Tag",
+    "addEdge": "添加 Edge Type",
     "selectTag": "选择 Tag",
     "selectEdge": "选择 Edge 类型",
     "config": "任务配置",
@@ -198,7 +201,38 @@
     "uploadSuccessfully": "上传文件成功",
     "fileSizeLimit": "文件过大，超过上传限制({size})，请修改启动配置文件中的 MaxBytes 并重启服务",
     "noHttp": "配置文件中的 address 不支持携带 http 协议，请去除 http(s)://",
-    "addressMatch": "配置文件中的 address 字段必须包含当前登录的 Graph 地址。多个地址用“,”隔开。"
+    "addressMatch": "配置文件中的 address 字段必须包含当前登录的 Graph 地址。多个地址用“,”隔开。",
+    "dataSourceFile": "文件源",
+    "vidColumn": "VID 列",
+    "srcVidColumn": "起点 VID 列",
+    "dstVidColumn": "终点 VID 列",
+    "vidFunction": "VID 函数",
+    "vidPrefix": "VID 前缀",
+    "concurrencyTip": "NebulaGraph 客户端并发数",
+    "batchSizeTip": "单批次插入数据的语句数量",
+    "retryTip": "nGQL 语句执行失败的重试次数",
+    "channelBufferSizeTip": "每个 NebulaGraph 客户端的缓存队列大小",
+    "vidFunctionTip": "生成 VID 的函数。目前只支持 hash 函数",
+    "vidPrefixTip": "给原始 VID 添加的前缀",
+    "selectCsvColumn": "选择 CSV 列",
+    "graphAddress": "Graph 服务地址",
+    "concurrency": "并发数",
+    "retry": "重试次数",
+    "channelBufferSize": "缓存队列大小",
+    "graphAddressTip": "Graph 服务的地址和端口。将使用以下 Graph 节点进行数据导入",
+    "currentHost": "当前登录的 Graph 节点",
+    "expandMoreConfig": "展开更多配置",
+    "pickUpConfig": "收起配置",
+    "tagRequired": "请添加标签",
+    "edgeRequired": "请添加边类型",
+    "tagFileRequired": "请添加标签导入文件源",
+    "edgeFileRequired": "请添加边类型导入文件源",
+    "tagFileSelect": "请选择标签导入文件源",
+    "edgeFileSelect": "请选择边类型导入文件源",
+    "configDisplay": "配置展示",
+    "loadToTag": "导入文件 {file} 到标签 {name}",
+    "loadToEdge": "导入文件 {file} 到边类型 {name}",
+    "importConfirm": "导入任务确认"
   },
   "schema": {
     "spaceList": "图空间列表",

diff --git a/app/interfaces/import.ts b/app/interfaces/import.ts
@@ -31,22 +31,28 @@ export interface ITaskItem {
   stats: ITaskStats;
 }
 
-export interface IVerticesConfig {
+export interface IPropertyProps {
   name: string;
-  file: any;
-  tags: any[];
-  idMapping: any;
+  type: string;
+  isDefault: boolean;
+  allowNull: boolean;
+  mapping?: number
 }
-export interface IEdgeConfig {
+
+export interface IImportFile {
   name: string;
-  file: any;
-  props: any[];
-  type: string;
+  content: string[];
+  withHeader?: boolean;
+  delimiter?: string;
 }
 
 export interface IBasicConfig {
   taskName: string;
+  address: string[];
   batchSize?: string;
+  concurrency?: string;
+  retry?: string;
+  channelBufferSize?: string;
 }
 
 export interface ILogDimension {

diff --git a/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/ExpandItem/index.module.less b/app/pages/Console/OutputBox/ForceGraph/DisplayPanel/ExpandItem/index.module.less
@@ -50,15 +50,15 @@
 		background: #fff;
 		justify-content: center;
 		font-size: 12px;
-		color: #0091FF;
+		color: @blue;
 
 		.btnToggle {
 			display: flex;
 			align-items: flex-start;
 			:global(.anticon) {
 				margin-right: 4px;
 				svg {
-					color: #0091FF;
+					color: @blue;
 					width: 16px;
 					height: 16px;
 				}