feat: cancel batch exec in console (#278)

vesoft-inc · Aug 18, 2022 · 2d7a260 · 2d7a260
1 parent b1b9934
commit 2d7a260
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/app/pages/Console/index.module.less b/app/pages/Console/index.module.less
@@ -40,10 +40,12 @@
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     border-radius: 6px;
     padding: 14px 30px;
-    .panelHeader {
+    .flex {
       display: flex;
       align-items: center;
       justify-content: space-between;
+    }
+    .panelHeader {
       margin-bottom: 15px;
       .title {
         font-family: Roboto-Regular, sans-serif;
@@ -52,6 +54,12 @@
         color: @lightBlack;
       }
       .operations {
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .btnOperations {
         display: flex;
         align-items: center;
         .btnOperations {

diff --git a/app/pages/Console/index.tsx b/app/pages/Console/index.tsx
@@ -14,6 +14,7 @@ import FavoriteBtn from './FavoriteBtn';
 import CypherParameterBox from './CypherParameterBox';
 import ExportModal from './ExportModal';
 import styles from './index.module.less';
+import classnames from 'classnames';
 const Option = Select.Option;
 
 // split from semicolon out of quotation marks
@@ -32,11 +33,12 @@ interface IProps {
     space: string;
     vertexes: any[], 
     edges: any[]
-  }) => void
+  }) => void,
+  ConsoleHeaderChildren?: React.ReactNode,
 }
 const Console = (props: IProps) => {
   const { schema, console, global } = useStore();
-  const { onExplorer } = props;
+  const { onExplorer, ConsoleHeaderChildren } = props;
   const { spaces, getSpaces, switchSpace, currentSpace, spaceVidType, updateVidType } = schema;
   const { runGQL, currentGQL, results, runGQLLoading, getParams, update, paramsMap } = console;
   const { nebulaVersion } = global;
@@ -132,18 +134,23 @@ const Console = (props: IProps) => {
       </div>
       <div className="studioCenterLayout">
         <div className={styles.consolePanel}>
-          <div className={styles.panelHeader}>
+          <div className={classnames(styles.panelHeader, !ConsoleHeaderChildren && styles.flex)}>
             <span className={styles.title}>Nebula Console</span>
             <div className={styles.operations}>
-              <FavoriteBtn onGqlSelect={updateGql} />
-              <HistoryBtn onGqlSelect={updateGql} />
-              <Tooltip title={intl.get('common.empty')} placement="top">
-                <Icon className={styles.btnOperations} type="icon-studio-btn-clear" onClick={() => update({ currentGQL: '' })} />
-              </Tooltip>
-              <Button type="primary" onClick={handleRun} loading={runGQLLoading}>
-                <Icon type="icon-studio-btn-play" />
-                {intl.get('common.run')} 
-              </Button>
+              <div className={styles.operationsLeft}>
+                {ConsoleHeaderChildren}
+              </div>
+              <div className={styles.btnOperations}>
+                <FavoriteBtn onGqlSelect={updateGql} />
+                <HistoryBtn onGqlSelect={updateGql} />
+                <Tooltip title={intl.get('common.empty')} placement="top">
+                  <Icon className={styles.btnOperations} type="icon-studio-btn-clear" onClick={() => update({ currentGQL: '' })} />
+                </Tooltip>
+                <Button type="primary" onClick={handleRun} loading={runGQLLoading}>
+                  <Icon type="icon-studio-btn-play" />
+                  {intl.get('common.run')} 
+                </Button>
+              </div>
             </div>
           </div>
           <div className={styles.codeInput}>

diff --git a/app/stores/console.ts b/app/stores/console.ts
@@ -18,7 +18,7 @@ const splitQuery = (query: string) => {
   });
   return {
     paramList,
-    gqlList,
+    gql: gqlList.join(';'),
   };
 };
 
@@ -54,13 +54,13 @@ export class ConsoleStore {
     Object.keys(param).forEach(key => (this[key] = param[key]));
   };
 
-  runGQL = async (gql: string) => {
+  runGQL = async (gqls: string) => {
     this.update({ runGQLLoading: true });
     try {
-      const { gqlList, paramList } = splitQuery(gql);
-      const _results = await service.batchExecNGQL(
+      const { gql, paramList } = splitQuery(gqls);
+      const _results = await service.execNGQL(
         {
-          gqls: gqlList.filter(item => item !== ''),
+          gql,
           paramList,
         },
         {
@@ -70,7 +70,8 @@ export class ConsoleStore {
           },
         },
       );
-      _results.data.forEach(item => item.id = uuidv4());
+      _results.id = uuidv4();
+      _results.gql = gql;
       const updateQuerys = paramList.filter(item => {
         const reg = /^\s*:params/gim;
         return !reg.test(item);
@@ -79,8 +80,8 @@ export class ConsoleStore {
         await this.getParams();
       }
       this.update({
-        results: [..._results.data, ...this.results],
-        currentGQL: gql,
+        results: [_results, ...this.results],
+        currentGQL: gqls,
       });
     } finally {
       window.setTimeout(() => this.update({ runGQLLoading: false }), 300);