[HugeGraph-Hubble-fe] Fix some issues to deliver to a specific client (…

…#291)
hugegraph · Jan 14, 2021 · ad85897 · ad85897
1 parent aa89a4d
commit ad85897
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 88 deletions.
diff --git a/hubble-fe/src/components/common/AppBar.tsx b/hubble-fe/src/components/common/AppBar.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
-import { observer } from 'mobx-react';
-import { useLocation } from 'wouter';
+import React, {useCallback} from 'react';
+import {observer} from 'mobx-react';
+import {useLocation} from 'wouter';
 
 import './AppBar.less';
 
@@ -25,7 +25,9 @@ const AppBar: React.FC = observer(() => {
           <span>图管理</span>
         </div>
       </div>
-      <div className="navigator-additions"></div>
+      <div className="navigator-additions">
+        <span></span>
+      </div>
     </nav>
   );
 });

diff --git a/hubble-fe/src/components/graph-management/GraphManagement.less b/hubble-fe/src/components/graph-management/GraphManagement.less
@@ -19,9 +19,8 @@
   &-description {
     margin-right: auto;
     display: block;
-    font-size: 12px;
+    font-size: 14px;
     line-height: 32px;
-    color: #666;
   }
 
   &-description-community {

diff --git a/hubble-fe/src/components/graph-management/GraphManagementList.tsx b/hubble-fe/src/components/graph-management/GraphManagementList.tsx
@@ -53,12 +53,6 @@ const commonInputProps = {
   width: 420
 };
 
-const isRequiredInputProps = {
-  ...commonInputProps,
-  isRequired: true,
-  requiredErrorMessage: '必填项'
-};
-
 const listVariants = {
   initial: {
     opacity: 0,
@@ -267,20 +261,9 @@ const GraphManagementListItem: React.FC<
               <img src={HintIcon} alt="hint" />
             </Tooltip>
             <Input
-              {...isRequiredInputProps}
-              maxLen={48}
-              placeholder="必须以字母开头，允许出现英文、数字、下划线"
-              errorMessage={
-                graphManagementStore.isValidated &&
-                graphManagementStore.validateErrorMessage.name !== ''
-                  ? graphManagementStore.validateErrorMessage.name
-                  : null
-              }
+              {...commonInputProps}
+              disabled
               value={graphManagementStore.editGraphData.name}
-              onChange={graphManagementStore.mutateGraphDataConfig(
-                'name',
-                'edit'
-              )}
             />
           </div>
           <div>
@@ -293,56 +276,26 @@ const GraphManagementListItem: React.FC<
               <img src={HintIcon} alt="hint" />
             </Tooltip>
             <Input
-              {...isRequiredInputProps}
-              maxLen={48}
-              placeholder="必须以字母开头，允许出现英文、数字、下划线"
-              errorMessage={
-                graphManagementStore.isValidated &&
-                graphManagementStore.validateErrorMessage.graph !== ''
-                  ? graphManagementStore.validateErrorMessage.graph
-                  : null
-              }
+              {...commonInputProps}
+              disabled
               value={graphManagementStore.editGraphData.graph}
-              onChange={graphManagementStore.mutateGraphDataConfig(
-                'graph',
-                'edit'
-              )}
             />
           </div>
           <div>
             <span>主机名:</span>
             <Input
-              {...isRequiredInputProps}
-              placeholder="请输入主机名"
-              errorMessage={
-                graphManagementStore.isValidated &&
-                graphManagementStore.validateErrorMessage.host !== ''
-                  ? graphManagementStore.validateErrorMessage.host
-                  : null
-              }
+              {...commonInputProps}
+              disabled
               value={graphManagementStore.editGraphData.host}
-              onChange={graphManagementStore.mutateGraphDataConfig(
-                'host',
-                'edit'
-              )}
             />
           </div>
           <div>
             <span>端口号:</span>
             <Input
-              {...isRequiredInputProps}
+              {...commonInputProps}
               placeholder="请输入端口号"
-              errorMessage={
-                graphManagementStore.isValidated &&
-                graphManagementStore.validateErrorMessage.port !== ''
-                  ? graphManagementStore.validateErrorMessage.port
-                  : null
-              }
+              disabled
               value={graphManagementStore.editGraphData.port}
-              onChange={graphManagementStore.mutateGraphDataConfig(
-                'port',
-                'edit'
-              )}
             />
           </div>
           <div>

diff --git a/hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.tsx b/hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.tsx
@@ -252,8 +252,8 @@ const AsyncTaskList: React.FC = observer(() => {
           <div onClick={handleFilterOptions('status', '')}>
             {t('async-tasks.table-filters.status.all')}
           </div>
-          <div onClick={handleFilterOptions('status', 'new')}>
-            {t('async-tasks.table-filters.status.new')}
+          <div onClick={handleFilterOptions('status', 'scheduling')}>
+            {t('async-tasks.table-filters.status.scheduling')}
           </div>
           <div onClick={handleFilterOptions('status', 'queued')}>
             {t('async-tasks.table-filters.status.queued')}
@@ -341,7 +341,8 @@ const AsyncTaskList: React.FC = observer(() => {
           !isUndefined(
             asyncTasksStore.asyncTaskList.find(
               ({ task_status }) =>
-                task_status === 'new' ||
+                task_status === 'scheduling' ||
+                task_status === 'scheduled' ||
                 task_status === 'queued' ||
                 task_status === 'running' ||
                 task_status === 'restoring'
@@ -565,7 +566,8 @@ const AsyncTaskList: React.FC = observer(() => {
               const { task_status } = records;
               return {
                 disabled:
-                  task_status === 'new' ||
+                  task_status === 'scheduling' ||
+                  task_status === 'scheduled' ||
                   task_status === 'queued' ||
                   task_status === 'running' ||
                   task_status === 'restoring' ||
@@ -676,7 +678,8 @@ export const AsyncTaskListManipulation: React.FC<AsyncTaskListManipulationProps>
             {t('async-tasks.manipulations.check-reason')}
           </a>
         )}
-        {status !== 'new' &&
+        {status !== 'scheduling' &&
+          status !== 'scheduled' &&
           status !== 'queued' &&
           status !== 'running' &&
           status !== 'restoring' && (
@@ -770,7 +773,8 @@ export const AsyncTaskListManipulation: React.FC<AsyncTaskListManipulationProps>
               {t('async-tasks.manipulations.delete')}
             </Tooltip>
           )}
-        {(status === 'new' ||
+        {(status === 'scheduling' ||
+          status === 'scheduled' ||
           status === 'queued' ||
           status === 'running' ||
           status === 'restoring') && (

diff --git a/...e-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/EdgeMap.tsx b/...e-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/EdgeMap.tsx
@@ -795,7 +795,13 @@ const EdgeMap: React.FC<EdgeMapProps> = observer(
                     .editedEdgeMap!.null_values.checked.filter(
                       (value) => value !== 'null'
                     )
-                    .map((value) => (value === '' ? '空值' : value))
+                    .map((value) =>
+                      value === ''
+                        ? '空值'
+                        : value === 'NULL'
+                        ? 'NULL/null'
+                        : value
+                    )
                     .concat(dataMapStore.editedEdgeMap!.null_values.customized)
                     .join('，')}
                 </span>

diff --git a/...fe/src/components/graph-management/data-import/import-tasks/datamap-configs/VertexMap.tsx b/...fe/src/components/graph-management/data-import/import-tasks/datamap-configs/VertexMap.tsx
@@ -688,7 +688,13 @@ const VertexMap: React.FC<VertexMapProps> = observer(
                     .editedVertexMap!.null_values.checked.filter(
                       (value) => value !== 'null'
                     )
-                    .map((value) => (value === '' ? '空值' : value))
+                    .map((value) =>
+                      value === ''
+                        ? '空值'
+                        : value === 'NULL'
+                        ? 'NULL/null'
+                        : value
+                    )
                     .concat(
                       dataMapStore.editedVertexMap!.null_values.customized
                     )

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/edge-type/EdgeTypeList.tsx b/hubble-fe/src/components/graph-management/metadata-configs/edge-type/EdgeTypeList.tsx
@@ -493,8 +493,14 @@ const EdgeTypeList: React.FC = observer(() => {
                 }}
               />
             </div>
+            <div
+              className="metadata-properties-modal-description"
+              style={{ marginBottom: 0 }}
+            >
+              确认删除以下边？
+            </div>
             <div className="metadata-properties-modal-description">
-              使用中边不可删除，确认删除以下未使用边？
+              删除元数据耗时较久，详情可在任务管理中查看。
             </div>
             <Table
               columns={[

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/edge-type/NewEdgeType.tsx b/hubble-fe/src/components/graph-management/metadata-configs/edge-type/NewEdgeType.tsx
@@ -382,7 +382,7 @@ const NewVertexType: React.FC = observer(() => {
                       <div style={{ width: 56 }}>
                         <Switch
                           checked={property.nullable}
-                          onChange={() => {
+                          onChange={(checked: boolean) => {
                             currentProperties[
                               index
                             ].nullable = !currentProperties[index].nullable;
@@ -391,6 +391,16 @@ const NewVertexType: React.FC = observer(() => {
                               ...edgeTypeStore.newEdgeType,
                               properties: currentProperties
                             });
+
+                            // remove primary keys since it could be empty value
+                            if (checked) {
+                              edgeTypeStore.mutateNewEdgeType({
+                                ...edgeTypeStore.newEdgeType,
+                                sort_keys: edgeTypeStore.newEdgeType.sort_keys.filter(
+                                  (key) => key !== property.name
+                                )
+                              });
+                            }
                           }}
                           size="large"
                         />

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckAndEditEdge.tsx b/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckAndEditEdge.tsx
@@ -324,8 +324,9 @@ const CheckAndEditEdge: React.FC = observer(() => {
           }}
           tooltipWrapper={
             <div ref={deleteWrapperRef}>
-              <p>确认删除此边类型？</p>
-              <p>删除后无法恢复，请谨慎操作。</p>
+              <p style={{ marginBottom: 8 }}>确认删除此边类型？</p>
+              <p>删除后无法恢复，请谨慎操作</p>
+              <p>删除元数据耗时较久，详情可在任务管理中查看</p>
               <div
                 style={{
                   display: 'flex',

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckAndEditVertex.tsx b/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckAndEditVertex.tsx
@@ -339,8 +339,9 @@ const CheckAndEditVertex: React.FC = observer(() => {
                 <p style={{ width: 200 }}>当前顶点类型正在使用中，不可删除。</p>
               ) : (
                 <>
-                  <p>确认删除此顶点？</p>
-                  <p>删除后无法恢复，请谨慎操作。</p>
+                  <p style={{ marginBottom: 8 }}>确认删除此顶点类型？</p>
+                  <p>删除后无法恢复，请谨慎操作</p>
+                  <p>删除元数据耗时较久，详情可在任务管理中查看</p>
                   <div
                     style={{
                       display: 'flex',

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CreateEdge.tsx b/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CreateEdge.tsx
@@ -1026,7 +1026,8 @@ const CreateEdge: React.FC = observer(() => {
                         placement="bottom-end"
                         tooltipShown={index === deletePopIndex}
                         tooltipWrapperProps={{
-                          className: 'metadata-properties-tooltips'
+                          className: 'metadata-properties-tooltips',
+                          style: { zIndex: 1041 }
                         }}
                         tooltipWrapper={
                           <div ref={deleteWrapperRef}>
@@ -1062,6 +1063,8 @@ const CreateEdge: React.FC = observer(() => {
                                   edgeTypeStore.validateNewEdgeType(
                                     'propertyIndexes'
                                   );
+
+                                  setDeletePopIndex(null);
                                 }}
                               >
                                 确认

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CreateVertex.tsx b/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CreateVertex.tsx
@@ -34,6 +34,7 @@ import type { VertexTypeValidatePropertyIndexes } from '../../../../stores/types
 import BlueArrowIcon from '../../../../assets/imgs/ic_arrow_blue.svg';
 import HintIcon from '../../../../assets/imgs/ic_question_mark.svg';
 import closeIcon from '../../../../assets/imgs/ic_close_16.svg';
+import { clearObserving } from 'mobx/lib/internal';
 
 const CreateVertex: React.FC = observer(() => {
   const dataAnalyzeStore = useContext(DataAnalyzeStore);
@@ -974,7 +975,8 @@ const CreateVertex: React.FC = observer(() => {
                           }
                         }}
                         tooltipWrapperProps={{
-                          className: 'metadata-properties-tooltips'
+                          className: 'metadata-properties-tooltips',
+                          style: { zIndex: 1041 }
                         }}
                         tooltipWrapper={
                           <div ref={deleteWrapperRef}>

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/graph-view/GraphView.tsx b/hubble-fe/src/components/graph-management/metadata-configs/graph-view/GraphView.tsx
@@ -284,6 +284,11 @@ const GraphDataView: React.FC = observer(() => {
 
               graphViewStore.setCurrentDrawer('check-vertex');
               graphViewStore.switchNodeOrEdgeClicked(true);
+
+              // check if vertex type being used
+              vertexTypeStore.checkIfUsing([
+                vertexTypeStore.selectedVertexType!.name
+              ]);
             }
 
             return;

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/property/MetadataProperties.tsx b/hubble-fe/src/components/graph-management/metadata-configs/property/MetadataProperties.tsx
@@ -6,7 +6,7 @@ import React, {
   useCallback
 } from 'react';
 import { observer } from 'mobx-react';
-import { intersection, size, without } from 'lodash-es';
+import { intersection, size, without, values } from 'lodash-es';
 import { motion } from 'framer-motion';
 import {
   Input,
@@ -166,6 +166,20 @@ const MetadataProperties: React.FC = observer(() => {
   };
 
   const batchDeleteProperties = async () => {
+    if (
+      values(currentSelectedRowKeys).every(
+        (key) => metadataPropertyStore.metadataPropertyUsingStatus?.[key]
+      )
+    ) {
+      Message.error({
+        content: '无可删除属性',
+        size: 'medium',
+        showCloseIcon: false
+      });
+
+      return;
+    }
+
     switchShowModal(false);
     // need to set a copy in store since local row key state would be cleared
     metadataPropertyStore.mutateSelectedMetadataProperyNames(

diff --git a/hubble-fe/src/components/graph-management/metadata-configs/vertex-type/NewVertexType.tsx b/hubble-fe/src/components/graph-management/metadata-configs/vertex-type/NewVertexType.tsx
@@ -267,6 +267,7 @@ const NewVertexType: React.FC = observer(() => {
                     const currentProperties = cloneDeep(
                       vertexTypeStore.newVertexType.properties
                     );
+
                     return (
                       <div
                         className="metadata-selected-properties"
@@ -276,15 +277,23 @@ const NewVertexType: React.FC = observer(() => {
                         <div style={{ width: 56 }}>
                           <Switch
                             checked={property.nullable}
-                            onChange={() => {
-                              currentProperties[
-                                index
-                              ].nullable = !currentProperties[index].nullable;
+                            onChange={(checked: boolean) => {
+                              currentProperties[index].nullable = checked;
 
                               vertexTypeStore.mutateNewProperty({
                                 ...vertexTypeStore.newVertexType,
                                 properties: currentProperties
                               });
+
+                              // remove primary keys since it could be empty value
+                              if (checked) {
+                                vertexTypeStore.mutateNewProperty({
+                                  ...vertexTypeStore.newVertexType,
+                                  primary_keys: vertexTypeStore.newVertexType.primary_keys.filter(
+                                    (key) => key !== property.name
+                                  )
+                                });
+                              }
                             }}
                             size="large"
                           />