From fc837c7dadc9633df9dfeb10ae29ef6d24823d80 Mon Sep 17 00:00:00 2001
From: Nut He <18328704+hetao92@users.noreply.github.com>
Date: Wed, 17 Aug 2022 16:14:17 +0800
Subject: [PATCH] feat: cancel  batch exec in console

---
 app/pages/Console/index.module.less | 10 +++++++++-
 app/pages/Console/index.tsx         | 31 ++++++++++++++++++-----------
 app/stores/console.ts               | 17 ++++++++--------
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/app/pages/Console/index.module.less b/app/pages/Console/index.module.less
index 0161b5df..49499414 100644
--- 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
index e40f2e66..4bcc1abc 100644
--- 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
index dcd6c0b0..4eb6c373 100644
--- 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);