vesoft-inc · huaxiabuluo · Jan 3, 2023 · Jan 3, 2023 · Jan 3, 2023 · Jan 3, 2023
diff --git a/app/config/locale/en-US.json b/app/config/locale/en-US.json
@@ -8,7 +8,6 @@
     "sorryNGQLCannotBeEmpty": "nGQL cannot be empty",
     "disablesUseToSwitchSpace": "DO NOT switch between graph spaces with nGQL statements in the console.",
     "NGQLHistoryList": "nGQL History",
-    "spaceTip": "Only required when you need to execute queries in a specified space.",
     "empty": "Clear",
     "run": "Run",
     "console": "Console",
@@ -115,7 +114,8 @@
     "fixStringLengthRequired": "fix string length limit is required",
     "spaceRequired": "Space is required",
     "maxBytes": "It cannot exceed {max} bytes",
-    "ttlLimit": "The data type of the property must be int or timestamp"
+    "ttlLimit": "The data type of the property must be int or timestamp",
+    "associateNameRequired": "Associated {type} name is required"
   },
   "console": {
     "execTime": "Execution Time",

diff --git a/app/config/locale/zh-CN.json b/app/config/locale/zh-CN.json
@@ -8,7 +8,6 @@
     "sorryNGQLCannotBeEmpty": "nGQL语句不能为空",
     "disablesUseToSwitchSpace": "禁止使用命令切换Space",
     "NGQLHistoryList": "nGQL历史列表",
-    "spaceTip": "仅对某个Space进行操作时需要",
     "empty": "清空",
     "run":"运行",
     "console": "控制台",
@@ -115,7 +114,8 @@
     "fixStringLengthRequired": "请输入字符串固定长度",
     "spaceRequired": "图空间不能为空",
     "maxBytes": "不能超过 {max} 字节",
-    "ttlLimit": "属性的数据类型必须是int或者timestamp"
+    "ttlLimit": "属性的数据类型必须是int或者timestamp",
+    "associateNameRequired": "请选择关联 {type} 名称"
   },
   "console": {
     "execTime": "执行时间消耗",

diff --git a/app/pages/Console/OutputBox/ForceGraph/index.tsx b/app/pages/Console/OutputBox/ForceGraph/index.tsx
@@ -15,25 +15,26 @@ import styles from './index.module.less';
 interface IProps {
   data: any;
   spaceVidType: string;
+  space: string;
   onGraphInit: (graph: GraphStore) => void;
 }
 const ForceGraphBox = (props: IProps) => {
   const [uuid ] = useState(uuidv4());
-  const { graphInstances: { graphs, initGraph, clearGraph } } = useStore();
+  const { graphInstances: { graphs, initGraph, clearGraph, renderData } } = useStore();
   const grapfDomRef = useRef<any>();
-  const { data, spaceVidType, onGraphInit } = props;
+  const { data, spaceVidType, onGraphInit, space } = props;
   const [loading, setLoading] = useState(false);
   const init = async () => {
     const { vertexes, edges } = parseSubGraph(data, spaceVidType);
     setLoading(true);
     await initGraph({
       container: grapfDomRef.current,
       id: uuid,
-      data: { vertexes, edges }
     });
     onGraphInit(graphs[uuid]);
     initTooltip({ container: grapfDomRef.current, id: uuid });
     initBrushSelect({ container: grapfDomRef.current, id: uuid });
+    await renderData({ space, graph: graphs[uuid], data: { vertexes, edges } });
     setLoading(false);
   };
 

diff --git a/app/pages/Console/OutputBox/index.tsx b/app/pages/Console/OutputBox/index.tsx
@@ -18,6 +18,7 @@ import styles from './index.module.less';
 interface IProps {
   index: number;
   gql: string;
+  space?: string;
   result: any;
   onHistoryItem: (gql: string) => void;
   onExplorer?: (params: {
@@ -30,7 +31,7 @@ interface IProps {
 }
 
 const OutputBox = (props: IProps) => {
-  const { gql, result: { code, data, message }, onHistoryItem, index, onExplorer, onResultConfig, templateRender } = props;
+  const { gql, space, result: { code, data, message }, onHistoryItem, index, onExplorer, onResultConfig, templateRender } = props;
   const { console, schema } = useStore();
   const { intl } = useI18n();
   const [visible, setVisible] = useState(true);
@@ -259,7 +260,7 @@ const OutputBox = (props: IProps) => {
         <Icon type="icon-studio-console-graph" />
         {intl.get('common.graph')}
       </>,
-      children: <ForceGraph data={dataSource} spaceVidType={spaceVidType} onGraphInit={setGraph} />
+      children: <ForceGraph space={space} data={dataSource} spaceVidType={spaceVidType} onGraphInit={setGraph} />
     },
     !resultSuccess && {
       key: 'log',
@@ -273,7 +274,7 @@ const OutputBox = (props: IProps) => {
   return <div className={styles.outputBox}>
     <div className={styles.outputHeader}>
       <p className={cls(styles.gql, { [styles.errorInfo]: !resultSuccess })} onClick={() => onHistoryItem(gql)}>
-        <span className={styles.gqlValue}>$ {gql}</span>
+        <span className={styles.gqlValue}>{space ? `[${space}]>` : '&'} {gql}</span>
       </p>
       <div className={styles.outputOperations}>
         {!isFavorited ? <Tooltip title={intl.get('console.addToFavorites')} placement="top">

diff --git a/app/pages/Console/index.module.less b/app/pages/Console/index.module.less
@@ -1,35 +1,29 @@
 @import '~@app/common.less';
 .nebulaConsole {
   .spaceSelect {
-    padding: 10px 42px;
-    height: 60px;
-    background: #FFFFFF;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    > div {
-      display: flex;
-      align-items: center;
-      :global {
-        .ant-select {
-          width: 320px;
-          .ant-select-selector {
-            background: @lightBlue;
-            border-radius: 3px;
-            border: none;
-          }
-          .ant-select-selection-item {
-            color: @darkBlue;
-          }
-          .ant-select-arrow {
-            color: @darkBlue;
-          }
+    display: flex;
+    align-items: center;
+    :global {
+      .ant-select {
+        width: 306px;
+        .ant-select-selector {
+          background: @lightBlue;
+          border-radius: 3px;
+          border: none;
         }
-        .studioIconInstruction {
-          margin-left: 15px;
-          svg {
-            width: 22px;
-            height: 22px;
-            color: @darkGray;
-          }
+        .ant-select-selection-item {
+          color: @darkBlue;
+        }
+        .ant-select-arrow {
+          color: @darkBlue;
+        }
+      }
+      .studioIconInstruction {
+        margin-left: 15px;
+        svg {
+          width: 22px;
+          height: 22px;
+          color: @darkGray;
         }
       }
     }
@@ -40,11 +34,6 @@
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     border-radius: 6px;
     padding: 14px 30px;
-    .flex {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
     .panelHeader {
       margin-bottom: 15px;
       .title {

diff --git a/app/pages/Console/index.tsx b/app/pages/Console/index.tsx
@@ -1,13 +1,10 @@
 import { Button, Select, Tooltip, message } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { trackEvent, trackPageView } from '@app/utils/stat';
 import { useStore } from '@app/stores';
-import Instruction from '@app/components/Instruction';
 import Icon from '@app/components/Icon';
 import CodeMirror from '@app/components/CodeMirror';
-import { maxLineNum } from '@app/config/nebulaQL';
-import classnames from 'classnames';
 import { useI18n } from '@vesoft-inc/i18n';
 import OutputBox from './OutputBox';
 import HistoryBtn from './HistoryBtn';
@@ -40,9 +37,8 @@ const Console = (props: IProps) => {
   const { schema, console } = useStore();
   const { intl } = useI18n();
   const { onExplorer, templateRender } = props;
-  const { spaces, getSpaces, switchSpace, currentSpace, spaceVidType, updateVidType } = schema;
-  const { runGQL, currentGQL, results, runGQLLoading, getParams, update, paramsMap, getFavoriteList } = console;
-  const [isUpDown, setUpDown] = useState(false);
+  const { spaces, getSpaces, spaceVidType, updateVidType } = schema;
+  const { runGQL, currentGQL, results, runGQLLoading, getParams, update, paramsMap, getFavoriteList, currentSpace } = console;
   const [modalVisible, setModalVisible] = useState(false);
   const [modalData, setModalData] = useState<any>(null);
   const editor = useRef<any>(null);
@@ -55,12 +51,7 @@ const Console = (props: IProps) => {
       updateVidType();
     }
   }, []);
-  const handleSpaceSwitch = (space: string) => {
-    switchSpace(space);
-    update({
-      results: []
-    });
-  };
+  const handleSpaceSwitch = useCallback((space: string) => update({ currentSpace: space }), []);
 
   const checkSwitchSpaceGql = (query: string) => {
     const queryList = query.split(SEMICOLON_REG).filter(Boolean);
@@ -95,8 +86,11 @@ const Console = (props: IProps) => {
 
       editor.current!.editor.execCommand('goDocEnd');
       handleSaveQuery(query);
-      await runGQL(query, value);
-      setUpDown(true);
+      await runGQL({
+        gql: query, 
+        space: currentSpace,
+        editorValue: value
+      });
     }
   };
 
@@ -122,27 +116,22 @@ const Console = (props: IProps) => {
   };
   return (
     <div className={styles.nebulaConsole}>
-      <div className={styles.spaceSelect}>
-        <div className="studioCenterLayout">
-          <Select value={currentSpace || null} placeholder={intl.get('console.selectSpace')} onDropdownVisibleChange={handleGetSpaces} onChange={handleSpaceSwitch}>
-            {spaces.map(space => (
-              <Option value={space} key={space}>
-                {space}
-              </Option>
-            ))}
-          </Select>
-          <Instruction description={intl.get('common.spaceTip')} />
-        </div>
-      </div>
       <div className="studioCenterLayout">
         <div className={styles.consolePanel}>
-          <div className={classnames(styles.panelHeader, !templateRender && styles.flex)}>
+          <div className={styles.panelHeader}>
             <span className={styles.title}>Nebula Console</span>
             <div className={styles.operations}>
-              <div className={styles.operationsLeft}>
-                {templateRender?.(currentGQL)}
+              <div className={styles.spaceSelect}>
+                <Select value={currentSpace || null} placeholder={intl.get('console.selectSpace')} onDropdownVisibleChange={handleGetSpaces} onChange={handleSpaceSwitch}>
+                  {spaces.map(space => (
+                    <Option value={space} key={space}>
+                      {space}
+                    </Option>
+                  ))}
+                </Select>
               </div>
               <div className={styles.btnOperations}>
+                {templateRender?.(currentGQL)}
                 <FavoriteBtn onGqlSelect={updateGql} />
                 <HistoryBtn onGqlSelect={updateGql} />
                 <Tooltip title={intl.get('common.empty')} placement="top">
@@ -161,7 +150,7 @@ const Console = (props: IProps) => {
               value={currentGQL}
               onChange={value => update({ currentGQL: value })}
               ref={editor}
-              height={isUpDown ? '120px' : 24 * maxLineNum + 'px'}
+              height="120px"
               onShiftEnter={handleRun}
               options={{
                 keyMap: 'sublime',
@@ -178,6 +167,7 @@ const Console = (props: IProps) => {
               index={index}
               result={item}
               gql={item.gql}
+              space={item.space}
               templateRender={templateRender}
               onExplorer={onExplorer ? handleExplorer : undefined}
               onHistoryItem={gql => updateGql(gql)}

diff --git a/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx b/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
@@ -163,6 +163,7 @@ const IndexCreate = () => {
                     rules={[
                       {
                         required: true,
+                        message: intl.get('formRules.associateNameRequired', { type }),
                       },
                     ]}>
                     <Select onChange={getFieldList}>

diff --git a/app/stores/console.ts b/app/stores/console.ts
@@ -3,6 +3,8 @@ import service from '@app/config/service';
 import { v4 as uuidv4 } from 'uuid';
 import { message } from 'antd';
 import { getI18n } from '@vesoft-inc/i18n';
+import { safeParse } from '@app/utils/function';
+import { getRootStore } from '.';
 
 const { intl } = getI18n();
 
@@ -33,7 +35,8 @@ const DEFAULT_GQL = 'SHOW SPACES;';
 export class ConsoleStore {
   runGQLLoading = false;
   currentGQL = DEFAULT_GQL;
-  results = [] as any;
+  currentSpace: string = sessionStorage.getItem('currentSpace') || '';
+  results: any[] = safeParse(sessionStorage.getItem('consoleResults')) || [];
   paramsMap = null as any;
   favorites = [] as {
     id: string;
@@ -42,13 +45,16 @@ export class ConsoleStore {
   constructor() {
     makeAutoObservable(this, {
       results: observable.ref,
+      currentSpace: observable,
       paramsMap: observable,
       currentGQL: observable,
       favorites: observable,
       clearConsoleResults: action,
     });
   }
-
+  get rootStore() {
+    return getRootStore();
+  }
   resetModel = () => {
     const shadowStore = new ConsoleStore();
     for (const key in shadowStore) {
@@ -67,11 +73,20 @@ export class ConsoleStore {
     this.currentGQL = DEFAULT_GQL;
   };
 
-  runGQL = async (gql: string, editorValue?: string) => {
+  runGQL = async (payload: {
+    gql: string, 
+    space: string,
+    editorValue?: string
+  }) => {
+    const { gql, space, editorValue } = payload;
     this.update({ runGQLLoading: true });
     try {
+      const err = await this.rootStore.schema.switchSpace(space);
+      if(err) {
+        return;
+      }
       const { gqlList, paramList } = splitQuery(gql);
-      const _results = await service.batchExecNGQL(
+      const data = await service.batchExecNGQL(
         {
           gqls: gqlList.filter(item => item !== '').map(item => {
             return item.endsWith('\\') ? item.slice(0, -1) : item;
@@ -85,18 +100,23 @@ export class ConsoleStore {
           },
         },
       );
-      _results.data.forEach(item => item.id = uuidv4());
+      data.data.forEach(item => {
+        item.id = uuidv4();
+        item.space = space;
+      });
       const updateQuerys = paramList.filter(item => {
         const reg = /^\s*:params/gim;
         return !reg.test(item);
       });
       if (updateQuerys.length > 0) {
         await this.getParams();
       }
+      const _results = [...data.data.reverse(), ...this.results];
       this.update({
-        results: [..._results.data.reverse(), ...this.results],
+        results: _results,
         currentGQL: editorValue || gql,
       });
+      sessionStorage.setItem('consoleResults', JSON.stringify(_results));
     } finally {
       window.setTimeout(() => this.update({ runGQLLoading: false }), 300);
     }

diff --git a/app/stores/global.ts b/app/stores/global.ts
@@ -51,6 +51,7 @@ export class GlobalStore {
       },
     );
     resetStore();
+    sessionStorage.clear();
     cookies.remove('nh');
     cookies.remove('nu');
     this.history.push(`/login${location.search}`);