feat: update import module

vesoft-inc · Feb 18, 2022 · 93df354 · 93df354
1 parent 203a1a8
commit 93df354
Show file tree

Hide file tree

Showing 26 changed files with 256 additions and 177 deletions.
diff --git a/app-v2/common.less b/app-v2/common.less
@@ -5,3 +5,28 @@
 @blue: #0091ff;
 @errorRed: #E02020;
 @disableBlue: #375d7a;
+
+@font-face {
+	font-family: 'Roboto-Black';
+	src: url(~@appv2/static/fonts/Roboto-Black.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Bold';
+	src: url(~@appv2/static/fonts/Roboto-Bold.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Light';
+	src: url(~@appv2/static/fonts/Roboto-Light.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Medium';
+	src: url(~@appv2/static/fonts/Roboto-Medium.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Regular';
+	src: url(~@appv2/static/fonts/Roboto-Regular.ttf);
+}
diff --git a/app-v2/components/CSVPreviewLink/index.less b/app-v2/components/CSVPreviewLink/index.less
@@ -1,5 +1,8 @@
+.popover-preview {
+	max-width: 80%;
+}
 .csv-preview {
-	padding: 16px 8px;
+	padding: 16px 8px 50px;
 	overflow: auto;
 
 	table {
@@ -10,8 +13,12 @@
 	}
 
 	> .operation {
-		padding: 16px;
+		padding-bottom: 25px;
 		text-align: center;
+		position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
 	}
 
 	.csv-select-index {

diff --git a/app-v2/components/CSVPreviewLink/index.tsx b/app-v2/components/CSVPreviewLink/index.tsx
@@ -1,27 +1,19 @@
-import { Button, Modal, Table, Tooltip } from 'antd';
+import { Button, Popover, Table } from 'antd';
 import React, { useState } from 'react';
 import intl from 'react-intl-universal';
 import './index.less';
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { v4 as uuidv4 } from 'uuid';
 
 interface IProps {
   file: any;
   children: string;
   onMapping?: (index) => void;
-  prop?: string;
-  centered?: boolean
 }
 
 const CSVPreviewLink = (props: IProps) => {
-  const { onMapping, prop, file: { content }, children, centered } = props;
+  const { onMapping, file: { content }, children } = props;
   const [visible, setVisible] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
   const handleLinkClick = e => {
-    setPosition({
-      x: e.clientX,
-      y: e.clientY,
-    });
     e.stopPropagation();
     setVisible(true);
   };
@@ -35,59 +27,46 @@ const CSVPreviewLink = (props: IProps) => {
       const textIndex = index;
       return {
         title: onMapping ? (
-          <>
-            <Button
-              type="primary"
-              className="csv-select-index"
-              onClick={() => handleMapping(textIndex)}
-            >{`column ${textIndex}`}</Button>
-            <Tooltip
-              title={intl.get('import.setMappingTip', {
-                prop,
-                index: textIndex,
-              })}
-            >
-              <InfoCircleOutlined />
-            </Tooltip>
-          </>
+          <Button
+            type="primary"
+            className="csv-select-index"
+            onClick={() => handleMapping(textIndex)}
+          >{`column ${textIndex}`}</Button>
         ) : (
-          `column ${textIndex}`
+          `Column ${textIndex}`
         ),
         dataIndex: index,
       };
     })
     : [];
   return (
-    <>
+    <Popover
+      destroyTooltipOnHide={true}
+      overlayClassName="popover-preview"
+      visible={visible}
+      trigger="click"
+      onVisibleChange={visible => setVisible(visible)}
+      content={<div className="csv-preview">
+        <Table
+          bordered={true}
+          dataSource={content}
+          columns={columns}
+          pagination={false}
+          rowKey={() => uuidv4()}
+        />
+        <div className="operation">
+          {onMapping && (
+            <Button onClick={() => handleMapping(null)}>
+              {intl.get('import.ignore')}
+            </Button>
+          )}
+        </div>
+      </div>}
+    >
       <Button type="link" className="btn-preview" onClick={handleLinkClick}>
         {children}
       </Button>
-      <Modal
-        className="preview-modal"
-        visible={visible}
-        onCancel={() => setVisible(false)}
-        footer={false}
-        mask={false}
-        style={centered ? undefined : { top: position.y || undefined, left: position.x || undefined, margin: 0 }}
-      >
-        <div className="csv-preview">
-          <Table
-            bordered={true}
-            dataSource={content}
-            columns={columns}
-            pagination={false}
-            rowKey={() => uuidv4()}
-          />
-          <div className="operation">
-            {onMapping && (
-              <Button onClick={() => handleMapping(null)}>
-                {intl.get('import.ignore')}
-              </Button>
-            )}
-          </div>
-        </div>
-      </Modal>
-    </>
+    </Popover>
   );
 };
 

diff --git a/app-v2/config/locale/en-US.json b/app-v2/config/locale/en-US.json
@@ -257,7 +257,6 @@
     "propTip": "{name}'s Property",
     "mapping": "CSV Index",
     "mappingTip": "The index of the csv file",
-    "setMappingTip": "Make the prop {prop} map to csv column{index}",
     "typeTip": "Prop Type",
     "setVertexId": "Set ID",
     "setVertexIdTip": "Set current prop as vertex id",
@@ -276,7 +275,6 @@
     "choose": "Mapping",
     "ignore": "Ignore",
     "vertexText": "Vertex",
-    "createConfigError": "Create config file error",
     "importErrorInfo": "Error importing data. Please check the configuration or data file",
     "clearAllConfigInfo": "Confirm to clear all config？",
     "promptConfigInfo": "The configuration cannot be empty",
@@ -308,7 +306,14 @@
     "startImporting": "Start importing",
     "stopImportingSuccess": "Stop import successfully.",
     "deleteSuccess": "Delete task successfully",
-    "batchSize": "Batch Size"
+    "batchSize": "Batch Size",
+    "importCompleted": "Import completed",
+    "importStopped": "Import stopped",
+    "importFailed": "Failed",
+    "notImported": "{total} lines not imported",
+    "readFailed": "{total} lines read failed",
+    "selectFile": "Select bind source file",
+    "addTag": "Add Tag"
   },
   "schema": {
     "spaceList": "Graph Space List",

diff --git a/app-v2/config/locale/zh-CN.json b/app-v2/config/locale/zh-CN.json
@@ -255,7 +255,6 @@
     "propTip": "{name}中拥有的属性",
     "mapping": "对应列标",
     "mappingTip": "属性字段对应csv文件的哪一列",
-    "setMappingTip": "将属性{prop}对应当前csv的第{index}列",
     "typeTip": "属性字段对应的数据类型",
     "setVertexId": "设为ID",
     "setVertexIdTip": "当前字段是否作为Vertex Id",
@@ -274,7 +273,6 @@
     "choose": "选择",
     "ignore": "忽略",
     "vertexText": "点",
-    "createConfigError": "创建配置文件错误",
     "importErrorInfo": "导入数据错误，请检查配置或数据文件",
     "clearAllConfigInfo": "是否确定清空所有配置？",
     "configFile": "配置文件：",
@@ -304,7 +302,14 @@
     "startImporting": "开始导入",
     "stopImportingSuccess": "已停止导入",
     "deleteSuccess": "已删除任务记录",
-    "batchSize": "批处理量"
+    "batchSize": "批处理量",
+    "importCompleted": "导入完成",
+    "importStopped": "导入中止",
+    "importFailed": "导入失败",
+    "notImported": "{total}行未导入",
+    "readFailed": "{total}行读取失败",
+    "selectFile": "选择绑定文件",
+    "addTag": "添加 Tag"
   },
   "schema": {
     "spaceList": "图空间列表",

diff --git a/app-v2/config/service.ts b/app-v2/config/service.ts
@@ -10,8 +10,6 @@ const importData = post('/api-nebula/task/import');
 
 const handleImportAction = post('/api-nebula/task/import/action');
 
-const createConfigFile = post('/api/import/config');
-
 const getLog = get('/api/import/log');
 const finishImport = post('/api/import/finish');
 
@@ -39,7 +37,6 @@ export default {
   importData,
   finishImport,
   handleImportAction,
-  createConfigFile,
   getLog,
   getImportWokingDir,
   getUploadDir,

diff --git a/app-v2/index.tsx b/app-v2/index.tsx
@@ -13,7 +13,7 @@ import '@appv2/static/fonts/iconfont.css';
 import Cookie from 'js-cookie';
 import { INTL_LOCALES } from '@appv2/config/constants';
 import { LanguageContext } from '@appv2/context';
-
+import './common.less';
 const Login = lazy(() => import('@appv2/pages/Login'));
 const MainPage = lazy(() => import('@appv2/pages/MainPage'));
 

diff --git a/app-v2/interfaces/import.ts b/app-v2/interfaces/import.ts
@@ -8,8 +8,8 @@ export enum ITaskStatus {
 }
 
 export interface ITaskStats {
-  TotalLine: number;
-  TotalCount: number;
+  totalLine: number;
+  totalCount: number;
   numFailed: number;
   numReadFailed: number;
 }

diff --git a/app-v2/pages/Import/FileUpload/index.tsx b/app-v2/pages/Import/FileUpload/index.tsx
@@ -65,7 +65,7 @@ const FileUpload = () => {
           return (
             <div className="operation">
               <div>
-                <CSVPreviewLink file={file} centered={true}>
+                <CSVPreviewLink file={file}>
                   {intl.get('import.preview')}
                 </CSVPreviewLink>
                 <Popconfirm
@@ -97,8 +97,8 @@ const FileUpload = () => {
         customRequest={handleUpdate}
         beforeUpload={transformFile as any}
       >
-        <Button className="upload-btn" type="default">
-          {intl.get('import.uploadFile')}
+        <Button className="upload-btn" type="primary">
+          + {intl.get('import.uploadFile')}
         </Button>
       </Upload>
       <div className="file-list">

diff --git a/app-v2/pages/Import/TaskCreate/FileSelect/index.less b/app-v2/pages/Import/TaskCreate/FileSelect/index.less
@@ -1,14 +1,15 @@
-.file-select {
-	margin-bottom: 25px;
+.popover-file-select {
+	margin-bottom: 20px;
+	.ant-popover-title {
+		border-bottom: none;
+	}
 }
-.add-file-select {
-	margin: 0;
-
-	.ant-form {
-		text-align: center;
-
-		.ant-form-item {
-			display: flex;
-		}
+.file-select-form {
+	.file-select {
+		width: 280px;
 	}
 }
+
+.btn-bind-source {
+	margin-bottom: 20px;
+}