feat: init schema page

vesoft-inc · Feb 18, 2022 · 95c0e4b · 95c0e4b
1 parent fbca85c
commit 95c0e4b
Show file tree

Hide file tree

Showing 19 changed files with 303 additions and 64 deletions.
diff --git a/app-v2/common.less b/app-v2/common.less
@@ -1,10 +1,5 @@
-@grayDark: #36383D;
-@dark: rgba(0,0,0,.9);
-@disableGray: rgba(255, 255, 255, 0.3);
-@promptGray: #8C8C8C;
-@blue: #0091ff;
-@errorRed: #E02020;
-@disableBlue: #375d7a;
+@gray: #D5DDEB;
+@lightGray: #F8F8F8;
 
 @font-face {
 	font-family: 'Roboto-Black';

diff --git a/app-v2/config/locale/en-US.json b/app-v2/config/locale/en-US.json
@@ -368,5 +368,21 @@
     "mannualHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/",
     "versionLogHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/about-studio/st-ug-release-note/",
     "forumLink": "https://discuss.nebula-graph.io/"
+  },
+  "_schema": {
+    "spaceList": "Graph Space List",
+    "createSpace": "Create Space",
+    "No": "No",
+    "spaceName": "Name",
+    "partitionNumber": "Partition Number",
+    "replicaFactor": "Replica Factor",
+    "charset": "Charset",
+    "collate": "Collate",
+    "vidType": "Vid Type",
+    "atomicEdge": "Atomic Edge",
+    "group": "Group",
+    "comment": "Comment",
+    "operations": "Operations",
+    "useSpaceErrTip": "Space not found. Trying to use a newly created graph space may fail because the creation is implemented asynchronously. To make sure the follow-up operations work as expected, Wait for two heartbeat cycles, i.e., 20 seconds."
   }
 }
diff --git a/app-v2/config/locale/zh-CN.json b/app-v2/config/locale/zh-CN.json
@@ -364,5 +364,21 @@
     "mannualHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/",
     "versionLogHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/about-studio/st-ug-release-note/",
     "forumLink": "https://discuss.nebula-graph.com.cn/"
+  },
+  "_schema": {
+    "spaceList": "图空间列表",
+    "createSpace": "创建图空间",
+    "No": "序号",
+    "spaceName": "名称",
+    "partitionNumber": "Partition Number",
+    "replicaFactor": "Replica Factor",
+    "charset": "Charset",
+    "collate": "Collate",
+    "vidType": "Vid Type",
+    "atomicEdge": "Atomic Edge",
+    "group": "Group",
+    "comment": "Comment",
+    "operations": "操作",
+    "useSpaceErrTip": "图空间未找到。立刻尝试使用刚创建的图空间可能会失败，因为创建是异步实现的。为确保数据同步，后续操作能顺利进行，请等待 2 个心跳周期（20 秒）。"
   }
 }
diff --git a/app-v2/index.html b/app-v2/index.html
@@ -73,7 +73,7 @@
 		</style>
 </head>
 
-<body style='background: #f0f2f5;'>
+<body style='background: #f8f8f8;'>
     <div id="app" style="height: 100%;">
         <div class="square-spin">
             <div></div>

diff --git a/app-v2/pages/Import/FileUpload/index.less b/app-v2/pages/Import/FileUpload/index.less
@@ -1,3 +1,4 @@
+@import '~@appv2/common.less';
 .nebula-file-upload {
 	.upload-btn {
 		margin: 15px 0;
@@ -9,7 +10,7 @@
 			font-weight: bold;
 			font-size: 18px;
 			padding-bottom: 12px;
-			border-bottom: 1px solid #D5DDEB;
+			border-bottom: 1px solid @gray;
 			margin-bottom: 20px;
 		}
 	}

diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/EdgeConfig/index.less b/app-v2/pages/Import/TaskCreate/SchemaConfig/EdgeConfig/index.less
diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/EdgeConfig/index.tsx b/app-v2/pages/Import/TaskCreate/SchemaConfig/EdgeConfig/index.tsx
@@ -6,7 +6,6 @@ import { CloseOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@appv2/stores';
 import CSVPreviewLink from '@appv2/components/CSVPreviewLink';
-import './index.less';
 const Option = Select.Option;
 
 interface IProps {
@@ -66,7 +65,7 @@ const EdgeConfig = (configProps: IProps) => {
   ];
 
   return (
-    <div className="tag-config-container">
+    <div className="config-container">
       <div className="tag-select-row">
         <div className="left">
           <span className="label">Edge Type</span>

diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/TagConfig/index.less b/app-v2/pages/Import/TaskCreate/SchemaConfig/TagConfig/index.less
diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/TagConfig/index.tsx b/app-v2/pages/Import/TaskCreate/SchemaConfig/TagConfig/index.tsx
@@ -6,7 +6,6 @@ import { CloseOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@appv2/stores';
 import CSVPreviewLink from '@appv2/components/CSVPreviewLink';
-import './index.less';
 const Option = Select.Option;
 
 interface IProps {
@@ -67,7 +66,7 @@ const VerticesConfig = (props: IProps) => {
     updateTagPropMapping({ configIndex, tagIndex });
   };
   return (
-    <div className="tag-config-container">
+    <div className="config-container">
       <div className="tag-select-row">
         <div className="left">
           <span className="label">Tag</span>

diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/index.less b/app-v2/pages/Import/TaskCreate/SchemaConfig/index.less
@@ -1,6 +1,7 @@
+@import '~@appv2/common.less';
 .config-collapse {
   background: #F3F6F9;
-  border: 1px solid #D5DDEB;
+  border: 1px solid @gray;
   box-sizing: border-box;
   border-radius: 6px;
   margin-bottom: 20px;
@@ -18,7 +19,7 @@
     .id-row {
       padding: 10px 15px;
       background: #FFFFFF;
-      border: 1px solid #D5DDEB;
+      border: 1px solid @gray;
       box-sizing: border-box;
       border-radius: 3px;
       margin-bottom: 10px;
@@ -27,6 +28,27 @@
       text-align: center;
     }
   }
+  .config-container {
+    padding: 10px 15px;
+    margin-bottom: 15px;
+    background: #FFFFFF;
+    border: 1px solid @gray;
+    box-sizing: border-box;
+    border-radius: 3px;
+    .tag-select-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .left {
+        display: flex;
+        align-items: center;
+        .tag-select {
+          min-width: 60px;
+        }
+      }
+    }
+
+  }
   .btn-close {
     cursor: pointer;
   }

diff --git a/app-v2/pages/Import/TaskCreate/index.less b/app-v2/pages/Import/TaskCreate/index.less
@@ -1,8 +1,9 @@
+@import '~@appv2/common.less';
 .nebula-import-create {
   .create-form {
     padding: 32px 35px 100px;
     .basic-config {
-      border-bottom: 1px solid #D5DDEB;
+      border-bottom: 1px solid @gray;
     }
     .container {
       background: #FFFFFF;

diff --git a/app-v2/pages/Import/TaskList/index.less b/app-v2/pages/Import/TaskList/index.less
@@ -1,3 +1,4 @@
+@import '~@appv2/common.less';
 .nebula-data-import {
   .task-btns {
     margin: 15px 0 20px;
@@ -10,7 +11,7 @@
     font-weight: bold;
     font-size: 18px;
     padding-bottom: 12px;
-    border-bottom: 1px solid #D5DDEB;
+    border-bottom: 1px solid @gray;
     margin-bottom: 20px;
   }
 }
diff --git a/app-v2/pages/Import/index.less b/app-v2/pages/Import/index.less
@@ -1,10 +1,11 @@
+@import '~@appv2/common.less';
 .nebua-import-page {
   padding: 25px 35px;
   .tab-header {
     display: flex;
     justify-content: center;
     padding-bottom: 16px;
-    border-bottom: 1px solid #D5DDEB;
+    border-bottom: 1px solid @gray;
     .import-tab {
       background: #E9EDEF;
       border-radius: 20px;

diff --git a/app-v2/pages/MainPage/routes.tsx b/app-v2/pages/MainPage/routes.tsx
@@ -1,10 +1,16 @@
 import { lazy } from 'react';
 
+const Schema = lazy(() => import('@appv2/pages/Schema'));
 const Import = lazy(() => import('@appv2/pages/Import'));
 const TaskCreate = lazy(() => import('@appv2/pages/Import/TaskCreate'));
 
 
 export const RoutesList = [
+  {
+    path: '/schema',
+    component: Schema,
+    exact: true,
+  },
   {
     path: '/import/create',
     component: TaskCreate,

diff --git a/app-v2/pages/Schema/index.less b/app-v2/pages/Schema/index.less
@@ -0,0 +1,39 @@
+@import '~@appv2/common.less';
+.schema-page {
+  padding: 25px 35px;
+  .schema-header {
+    font-family: Roboto;
+    font-weight: bold;
+    font-size: 18px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid @gray;
+  }
+  .schema-container {
+    padding-top: 20px;
+    .btn-create {
+      margin-bottom: 12px;
+    }
+    .table-space-list {
+      .space-item {
+        margin-top: 15px;
+        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+        border-radius: 6px;
+      }
+      .ant-table {
+        background-color: transparent;
+      }
+      table {
+        border-collapse: separate;
+        border-spacing: 0 15px;
+      }
+      .ant-table-row {
+        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+        border-radius: 6px;
+        background-color: #FFFFFF;
+      }
+      .cell-btn {
+        padding-left: 0;
+      }
+    }
+  }
+}