feat: support algorithms UI #370 (#373)

hugegraph · Apr 29, 2022 · f83f0e2 · f83f0e2
1 parent dfd6d06
commit f83f0e2
Show file tree

Hide file tree

Showing 67 changed files with 10,126 additions and 2,862 deletions.
diff --git a/hubble-fe/src/components/graph-management/GraphManagementList.tsx b/hubble-fe/src/components/graph-management/GraphManagementList.tsx
@@ -26,7 +26,6 @@ import HintIcon from '../../assets/imgs/ic_question_mark.svg';
 import { GraphData } from '../../stores/types/GraphManagementStore/graphManagementStore';
 import { useTranslation } from 'react-i18next';
 
-
 const commonInputProps = {
   size: 'medium',
   width: 420
@@ -234,7 +233,7 @@ const GraphManagementListItem: React.FC<
       value: 'delete'
     }
   ];
-  
+
   const disabledDropdownList = [
     {
       label: t('addition.common.edit'),
@@ -338,6 +337,9 @@ const GraphManagementListItem: React.FC<
                 'password',
                 'edit'
               )}
+              originInputProps={{
+                type: 'password'
+              }}
             />
           </div>
           <div>
@@ -368,7 +370,9 @@ const GraphManagementListItem: React.FC<
   ) : (
     <div className="graph-management-list" key={id}>
       <div className="graph-management-list-item">
-        <div className="graph-management-list-title">{t('addition.graphManagementList.id')}</div>
+        <div className="graph-management-list-title">
+          {t('addition.graphManagementList.id')}
+        </div>
         <div className="graph-management-list-data">
           <span title={name}>
             <Highlighter
@@ -381,7 +385,9 @@ const GraphManagementListItem: React.FC<
         </div>
       </div>
       <div className="graph-management-list-item">
-        <div className="graph-management-list-title">{t('addition.graphManagementList.name')}</div>
+        <div className="graph-management-list-title">
+          {t('addition.graphManagementList.name')}
+        </div>
         <div className="graph-management-list-data">
           <span title={graph}>
             <Highlighter
@@ -394,7 +400,9 @@ const GraphManagementListItem: React.FC<
         </div>
       </div>
       <div className="graph-management-list-item">
-        <div className="graph-management-list-title">{t('addition.graphManagementList.host')}</div>
+        <div className="graph-management-list-title">
+          {t('addition.graphManagementList.host')}
+        </div>
         <div className="graph-management-list-data" title={host}>
           {host}
         </div>
@@ -408,7 +416,9 @@ const GraphManagementListItem: React.FC<
         </div>
       </div>
       <div className="graph-management-list-item">
-        <div className="graph-management-list-title">{t('addition.graphManagementList.creation-time')}</div>
+        <div className="graph-management-list-title">
+          {t('addition.graphManagementList.creation-time')}
+        </div>
         <div className="graph-management-list-data" title={create_time}>
           {create_time}
         </div>

diff --git a/hubble-fe/src/components/graph-management/GraphManagementSidebar.tsx b/hubble-fe/src/components/graph-management/GraphManagementSidebar.tsx
@@ -10,7 +10,6 @@ import {
   ImportManagerStoreContext
 } from '../../stores';
 
-import BackIcon from '../../assets/imgs/ic_topback.svg';
 import ArrowIcon from '../../assets/imgs/ic_arrow_white.svg';
 import DataAnalyzeIconNormal from '../../assets/imgs/ic_shuju_normal.svg';
 import DataAnalyzeIconPressed from '../../assets/imgs/ic_shuju_pressed.svg';
@@ -43,11 +42,6 @@ const GraphManagementSidebar: React.FC = observer(() => {
     expand: graphManagementStore.isExpanded
   });
 
-  const sidebarGoBackClassName = classnames({
-    'data-analyze-sidebar-go-back': true,
-    expand: graphManagementStore.isExpanded
-  });
-
   const sidebarGraphSelectionClassName = classnames({
     'data-analyze-sidebar-graph-selection': true,
     expand: graphManagementStore.isExpanded
@@ -91,9 +85,8 @@ const GraphManagementSidebar: React.FC = observer(() => {
 
   const handleSelectId = useCallback(
     (value: string) => {
-      const id = graphManagementStore.idList.find(
-        ({ name }) => name === value
-      )!.id;
+      const id = graphManagementStore.idList.find(({ name }) => name === value)!
+        .id;
 
       dataAnalyzeStore.resetIdState();
       setLocation(`/graph-management/${id}/data-analyze`);

diff --git a/hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.less b/hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.less
@@ -59,7 +59,8 @@
     line-height: 22px;
     text-align: center;
 
-    &.new,
+    &.scheduling,
+    &.scheduled,
     &.queued,
     &.restoring,
     &.running {

diff --git a/hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.tsx b/hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.tsx
@@ -10,14 +10,7 @@ import classnames from 'classnames';
 import { useRoute } from 'wouter';
 import { useTranslation } from 'react-i18next';
 import { isEmpty, size, intersection, without } from 'lodash-es';
-import {
-  Breadcrumb,
-  Input,
-  Button,
-  Message,
-  Table,
-  Loading
-} from 'hubble-ui';
+import { Breadcrumb, Input, Button, Message, Table, Loading } from 'hubble-ui';
 
 import {
   GraphManagementStoreContext,
@@ -151,7 +144,7 @@ const AsyncTaskList: React.FC = observer(() => {
             {t('async-tasks.table-filters.task-type.gremlin')}
           </div>
           <div onClick={handleFilterOptions('type', 'algorithm')}>
-            {t('async-tasks.table-filters.task-type.algorithm')}{' '}
+            {t('async-tasks.table-filters.task-type.algorithm')}
           </div>
           <div onClick={handleFilterOptions('type', 'remove_schema')}>
             {t('async-tasks.table-filters.task-type.remove-schema')}
@@ -231,6 +224,10 @@ const AsyncTaskList: React.FC = observer(() => {
           timeString += ' ' + restTime + 'ms';
         }
 
+        if (restTime <= 0) {
+          timeString = '0s';
+        }
+
         return <div className="no-line-break">{timeString}</div>;
       }
     },
@@ -412,7 +409,7 @@ const AsyncTaskList: React.FC = observer(() => {
         <div className="async-task-list-content-header">
           <Input.Search
             size="medium"
-            width={205}
+            width={215}
             placeholder={t('async-tasks.placeholders.search')}
             value={asyncTasksStore.searchWords}
             onChange={handleSearchChange}

diff --git a/hubble-fe/src/components/graph-management/data-analyze/DataAnalyze.less b/hubble-fe/src/components/graph-management/data-analyze/DataAnalyze.less
@@ -192,12 +192,33 @@
     }
   }
 
+  .query-tab-algorithm-wrapper,
   .query-tab-content-wrapper {
     padding: 16px;
     background: #fff;
     border-radius: 3px 3px 3px 3px;
   }
 
+  .query-tab-algorithm-wrapper {
+    // min-width: 1220px;
+    overflow: auto;
+
+    .new-fc-one-input-error.new-fc-one-input-error-right {
+      left: 0;
+      top: 30px;
+    }
+  }
+
+  .query-tab-algorithm-hint {
+    width: fit-content;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+    line-height: 18px;
+    padding: 16px;
+    color: #e64552;
+    font-size: 14px;
+    text-align: center;
+  }
+
   .query-tab-content {
     display: flex;
   }
@@ -238,15 +259,6 @@
         background-color: #f2f7ff;
         cursor: pointer;
       }
-
-      &.query-tab-content-menu-item-disabled {
-        color: #ccc;
-        cursor: not-allowed;
-
-        &:hover {
-          background-color: #fff;
-        }
-      }
     }
   }
 
@@ -303,10 +315,6 @@
     padding: 16px 8px;
     margin-bottom: 16px;
 
-    &-invalid {
-      border: 1px solid #e64552;
-    }
-
     &:last-child {
       margin-bottom: 0;
     }
@@ -322,6 +330,40 @@
     }
   }
 
+  .query-tab-content-internal-expand-row {
+    width: 390px;
+    display: flex;
+    // justify-content: space-between;
+    height: 32px;
+    margin-bottom: 16px;
+  }
+
+  .query-tab-content-internal-expand-input {
+    margin: 0 14px 0 16px;
+  }
+
+  .query-tab-content-internal-expand-manipulation {
+    &-enable,
+    &-disabled {
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 32px;
+      padding-left: 172px;
+
+      & span {
+        cursor: pointer;
+      }
+    }
+
+    &-enable {
+      color: #2b65ff;
+    }
+
+    &-disabled {
+      color: #999;
+    }
+  }
+
   .query-tab-code-edit {
     width: calc(100% - 55px);
 
@@ -441,6 +483,7 @@
       border-right: 1px solid #e0e0e0;
       display: flex;
       flex-direction: column;
+      overflow-y: auto;
 
       &-options {
         width: 61px;
@@ -595,6 +638,14 @@
         & > img {
           margin-bottom: 10px;
         }
+
+        & > span {
+          display: block;
+          width: 80%;
+          text-align: center;
+          max-height: 200px;
+          overflow: auto;
+        }
       }
     }
 
@@ -830,8 +881,12 @@
       }
 
       & > div {
-        flex-basis: 50%;
+        // flex-basis: 50%;
         line-height: 32px;
+
+        &:first-child {
+          width: 162px;
+        }
       }
     }
   }
@@ -1131,3 +1186,12 @@ div.vis-tooltip {
   pointer-events: none;
   z-index: 5;
 }
+
+// refer to index.less, this should be fixed in the future version
+.data-analyze-dynamic-add-options .new-fc-one-input-all-container {
+  position: relative;
+}
+
+.data-analyze-graph-node-info .new-fc-one-input-all-container {
+  position: relative;
+}
diff --git a/hubble-fe/src/components/graph-management/data-analyze/DataAnalyze.tsx b/hubble-fe/src/components/graph-management/data-analyze/DataAnalyze.tsx
@@ -44,6 +44,7 @@ const DataAnalyze: React.FC = observer(() => {
       dataAnalyzeStore.setCurrentId(Number(params.id));
       dataAnalyzeStore.fetchValueTypes();
       dataAnalyzeStore.fetchVertexTypes();
+      dataAnalyzeStore.fetchAllPropertyIndexes('vertex');
       dataAnalyzeStore.fetchEdgeTypes();
       dataAnalyzeStore.fetchAllNodeStyle();
       dataAnalyzeStore.fetchAllEdgeStyle();
@@ -70,9 +71,9 @@ const DataAnalyze: React.FC = observer(() => {
             {t('addition.dataAnalyze.return-home')}
           </Button>
         ]}
-        visible={Object.values(dataAnalyzeStore.errorInfo)
-          .map(({ code }) => code)
-          .includes(401)}
+        visible={graphManagementStore.graphData.some(
+          ({ id, enabled }) => dataAnalyzeStore.currentId === id && !enabled
+        )}
         destroyOnClose
         needCloseIcon={false}
       >

diff --git a/hubble-fe/src/components/graph-management/data-analyze/DataAnalyzeInfoDrawer.tsx b/hubble-fe/src/components/graph-management/data-analyze/DataAnalyzeInfoDrawer.tsx
@@ -299,7 +299,7 @@ const DataAnalyzeInfoDrawer: React.FC = observer(() => {
                 marginTop: !isEdit ? 0 : nullableIndex === 0 ? 8 : 32
               }}
             >
-              <div>{key}: </div>
+              <div title={key}>{key}: </div>
               {!isEdit ? (
                 <div>{convertArrayToString(value)}</div>
               ) : (