mod: update fetch space list logic (#664)

* mod: update fetch space list logic * mod: code review --------- Co-authored-by: Bruce <bruce.lu@vesoft.com>
vesoft-inc · Nov 6, 2023 · c403022 · c403022
1 parent 4872aeb
commit c403022
Show file tree

Hide file tree

Showing 11 changed files with 366 additions and 178 deletions.
diff --git a/app/config/locale/en-US.ts b/app/config/locale/en-US.ts
@@ -410,6 +410,7 @@ export default {
     statError: 'Stat failed, Please try again.',
     statFinished: 'Statistics end',
     deleteSpace: 'Delete Graph Space',
+    clearSpace: 'Clear Graph Space',
     cloneSpace: 'Clone Graph Space',
     length: 'Length',
     selectVidTypeTip: 'Please select the type',

diff --git a/app/config/locale/zh-CN.ts b/app/config/locale/zh-CN.ts
@@ -391,6 +391,7 @@ export default {
     statError: '统计失败，请重试',
     statFinished: '统计结束',
     deleteSpace: '删除图空间',
+    clearSpace: '清空图空间',
     cloneSpace: '克隆图空间',
     length: '长度',
     selectVidTypeTip: '选择 Vid 类型',

diff --git a/app/interfaces/schema.ts b/app/interfaces/schema.ts
@@ -13,13 +13,14 @@ export interface IField {
 }
 
 export interface ISpace {
-  serialNumber: number;
+  Charset?: string;
+  Collate?: string;
+  Comment?: string;
+  ID?: number;
   Name: string;
-  ID: number;
-  Charset: string;
-  Collate: string;
-  'Partition Number': string;
-  'Replica Factor': string;
+  'Partition Number'?: number;
+  'Replica Factor'?: number;
+  'Vid Type'?: string;
 }
 
 export interface ITag {
@@ -68,7 +69,7 @@ export interface IAlterForm {
 
 export enum ISchemaEnum {
   Tag = 'tag',
-  Edge ='edge',
+  Edge = 'edge',
 }
 export enum IJobStatus {
   Queue = 'QUEUE',
@@ -77,4 +78,4 @@ export enum IJobStatus {
   Failed = 'FAILED',
   Stopped = 'STOPPED',
   Removed = 'REMOVED',
-}
+}
diff --git a/.../SchemaConfig/DDLButton/index.module.less → ...a/SchemaConfig/DDLModal/index.module.less b/.../SchemaConfig/DDLButton/index.module.less → ...a/SchemaConfig/DDLModal/index.module.less
diff --git a/...s/Schema/SchemaConfig/DDLButton/index.tsx → ...es/Schema/SchemaConfig/DDLModal/index.tsx b/...s/Schema/SchemaConfig/DDLButton/index.tsx → ...es/Schema/SchemaConfig/DDLModal/index.tsx
@@ -5,14 +5,15 @@ import { observer } from 'mobx-react-lite';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import CodeMirror from '@app/components/CodeMirror';
 
-
 import { useStore } from '@app/stores';
 import { handleKeyword } from '@app/utils/function';
 import { useI18n } from '@vesoft-inc/i18n';
 import styles from './index.module.less';
 
 interface IProps {
   space: string;
+  open: boolean;
+  onCancel?: () => void;
 }
 const options = {
   keyMap: 'sublime',
@@ -22,29 +23,33 @@ const options = {
 };
 const sleepGql = `:sleep 20;`;
 const DDLButton = (props: IProps) => {
-  const { space } = props;
+  const { space, open, onCancel } = props;
   const { intl } = useI18n();
-  const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { schema: { getSchemaDDL } } = useStore();
+  const {
+    schema: { getSchemaDDL },
+  } = useStore();
   const [ddl, setDDL] = useState('');
-  const handleJoinGQL = useCallback((data) => data.map(i => i.replaceAll('\n', '')).join(';\n'), []);
+  const handleJoinGQL = useCallback((data) => data.map((i) => i.replaceAll('\n', '')).join(';\n'), []);
+
   const handleOpen = useCallback(async () => {
-    setVisible(true);
     setLoading(true);
     const ddlMap = await getSchemaDDL(space);
-    if(ddlMap) {
+    if (ddlMap) {
       const { tags, edges, indexes } = ddlMap;
-      let content = `# Create Space \n${ddlMap.space.replace(/ON default_zone_(.*)+/gm, '')};\n${sleepGql}\nUSE ${handleKeyword(space)};`;
-      if(tags.length) {
+      let content = `# Create Space \n${ddlMap.space.replace(
+        /ON default_zone_(.*)+/gm,
+        '',
+      )};\n${sleepGql}\nUSE ${handleKeyword(space)};`;
+      if (tags.length) {
         content += `\n\n# Create Tag: \n${handleJoinGQL(tags)};`;
       }
-      if(edges.length) {  
+      if (edges.length) {
         content += `\n\n# Create Edge: \n${handleJoinGQL(edges)};`;
       }
 
-      if(indexes.length) {
-        if((tags.length || edges.length)) {
+      if (indexes.length) {
+        if (tags.length || edges.length) {
           content += `\n${sleepGql}`;
         }
         content += `\n\n# Create Index: \n${handleJoinGQL(indexes)};`;
@@ -53,6 +58,7 @@ const DDLButton = (props: IProps) => {
     }
     setLoading(false);
   }, [space]);
+
   const handleCopy = useCallback(() => {
     message.success(intl.get('common.copySuccess'));
   }, []);
@@ -72,50 +78,47 @@ const DDLButton = (props: IProps) => {
     link.download = `${space}_ddl.ngql`;
     link.click();
   }, [space, ddl]);
+
   useEffect(() => {
-    !visible && setDDL('');
-  }, [visible]);
+    if (open) {
+      handleOpen();
+    } else {
+      setDDL('');
+    }
+  }, [open]);
+
   return (
-    <>
-      <Button type="link" onClick={handleOpen}>
-        {intl.get('schema.showDDL')}
-      </Button>
-      <Modal
-        className={styles.ddlModal}
-        destroyOnClose={true}
-        open={visible}
-        width={'60%'}
-        bodyStyle={{ minHeight: 200 }}
-        onCancel={() => setVisible(false)}
-        title={intl.get('schema.showDDL')}
-        footer={
-          !loading && <div className={styles.footer}>
-            <Button
-              key="confirm"
-              type="primary"
-              disabled={!ddl}
-              onClick={handleDownload}
-            >
+    <Modal
+      className={styles.ddlModal}
+      destroyOnClose={true}
+      open={open}
+      width={'60%'}
+      bodyStyle={{ minHeight: 200 }}
+      onCancel={onCancel}
+      title={intl.get('schema.showDDL')}
+      footer={
+        !loading && (
+          <div className={styles.footer}>
+            <Button key="confirm" type="primary" disabled={!ddl} onClick={handleDownload}>
               {intl.get('schema.downloadNGQL')}
             </Button>
           </div>
-        }
-      >
-        <Spin spinning={loading}>
-          {!loading && <div className={styles.modalItem}>
+        )
+      }
+    >
+      <Spin spinning={loading}>
+        {!loading && (
+          <div className={styles.modalItem}>
             <CopyToClipboard key={1} text={ddl} onCopy={handleCopy} disabled={!ddl}>
               <Button className={styles.duplicateBtn} key="confirm" icon={<Icon type="icon-Duplicate" />}>
                 {intl.get('common.duplicate')}
               </Button>
             </CopyToClipboard>
-            <CodeMirror
-              value={ddl}
-              options={options}
-            />
-          </div>}
-        </Spin>
-      </Modal>
-    </>
+            <CodeMirror value={ddl} options={options} />
+          </div>
+        )}
+      </Spin>
+    </Modal>
   );
 };
 

diff --git a/app/pages/Schema/SchemaConfig/List/Search/index.tsx b/app/pages/Schema/SchemaConfig/List/Search/index.tsx
@@ -10,7 +10,7 @@ import { useStore } from '@app/stores';
 import styles from './index.module.less';
 
 interface IProps {
-  onSearch: (value) => void;
+  onSearch: (value: string) => void;
   type: string;
 }
 
@@ -19,18 +19,18 @@ const Search = (props: IProps) => {
   const { intl } = useI18n();
   const location = useLocation();
   const [value, setValue] = useState('');
-  const { schema: { currentSpace } } = useStore();
+  const {
+    schema: { currentSpace },
+  } = useStore();
   useEffect(() => {
     setValue('');
     onSearch('');
   }, [location.pathname, currentSpace]);
-  const onChange = useCallback(e => {
+  const onChange = useCallback((e) => {
     setValue(e.target.value);
     search(e.target.value);
   }, []);
-  const search = useCallback(debounce((value) => {
-    onSearch(value);
-  }, 500), []);
+  const search = useCallback(debounce(onSearch, 500), [onSearch]);
 
   return (
     <div className={styles.schemaSearch}>

diff --git a/app/pages/Schema/index.module.less b/app/pages/Schema/index.module.less
@@ -101,8 +101,7 @@
 }
 
 .clonePopover {
-  :global(.ant-popover-content) {
-    position: relative;
-    top: -100px;
+  &:global(.ant-popover) {
+    z-index: 1050;
   }
 }