vesoft-inc · NicolaCage · Sep 15, 2022 · Sep 15, 2022
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
@@ -47,6 +47,15 @@ interface IState {
   collapsed: boolean;
 }
 
+const clusterInfoList = [
+  'version-statistics',
+  'leader-distribution',
+  'partition-distribution',
+  'service-info',
+  'partition-info',
+  'long-term-task'
+]
+
 class MainPage extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -111,6 +120,7 @@ class MainPage extends React.Component<IProps, IState> {
     const { appVersion } = this.props;
     const [, activeOpenSubMenu, activeMenu] =
       this.props.location.pathname.split('/');
+      debugger;
     let activeKey =
       activeMenu === 'overview'
         ? `${activeOpenSubMenu}-${activeMenu}`
@@ -124,12 +134,8 @@ class MainPage extends React.Component<IProps, IState> {
     if (activeKey === undefined) {
       activeKey = 'machine-overview';
     }
-    if (
-      activeKey === 'version-statistics' ||
-      activeKey === 'leader-distribution' ||
-      activeKey === 'partition-distribution'
-    ) {
-      activeKey = 'service-overview';
+    if (clusterInfoList.includes(activeKey)) {
+      activeKey = 'service-manage';
     }
     return (
       <Layout className="nebula-stat">

diff --git a/src/pages/MainPage/routes.tsx b/src/pages/MainPage/routes.tsx
@@ -180,7 +180,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('common.dashboard'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('common.machine'),
     },
   },
@@ -203,7 +202,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('device.cpu'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('device.cpu'),
     },
   },
@@ -226,7 +224,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('device.disk'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('device.disk'),
     },
   },
@@ -249,7 +246,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('device.memory'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('device.memory'),
     },
   },
@@ -272,7 +268,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('device.load'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('device.load'),
     },
   },
@@ -295,7 +290,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('device.network'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('device.network'),
     },
   },
@@ -329,7 +323,6 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('common.dashboard'),
         },
       ],
-      showBackBtn: true,
       title: intl.get('common.machine'),
     },
   },
@@ -353,7 +346,6 @@ export const RoutesList: any = [
         },
       ],
       title: 'Graph',
-      showBackBtn: true,
       extra: SERVICE_VIEWS,
     },
   },
@@ -377,7 +369,6 @@ export const RoutesList: any = [
         },
       ],
       title: 'Meta',
-      showBackBtn: true,
       extra: SERVICE_VIEWS,
     },
   },
@@ -401,7 +392,6 @@ export const RoutesList: any = [
         },
       ],
       title: 'Storage',
-      showBackBtn: true,
       extra: SERVICE_VIEWS,
     },
   },
@@ -421,7 +411,6 @@ export const RoutesList: any = [
         },
       ],
       title: intl.get('common.overviewInfo'),
-      showBackBtn: true,
     },
   },
   {
@@ -435,8 +424,8 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('common.dashboard'),
         },
         {
-          path: '/management/overview',
-          breadcrumbName: intl.get('common.service'),
+          path: '/management/service-manage',
+          breadcrumbName: intl.get('common.overviewInfo'),
         },
         {
           path: '/management/version-statistics',
@@ -459,8 +448,8 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('common.dashboard'),
         },
         {
-          path: '/management/overview',
-          breadcrumbName: intl.get('common.service'),
+          path: '/management/service-manage',
+          breadcrumbName: intl.get('common.overviewInfo'),
         },
         {
           path: '/management/leader-distribution',
@@ -483,8 +472,8 @@ export const RoutesList: any = [
           breadcrumbName: intl.get('common.dashboard'),
         },
         {
-          path: '/management/overview',
-          breadcrumbName: intl.get('common.service'),
+          path: '/management/service-manage',
+          breadcrumbName: intl.get('common.overviewInfo'),
         },
         {
           path: '/management/partition-distribution',
@@ -506,6 +495,10 @@ export const RoutesList: any = [
           path: '#',
           breadcrumbName: intl.get('common.serviceManagement'),
         },
+        {
+          path: '/management/service-manage',
+          breadcrumbName: intl.get('common.overviewInfo'),
+        },
         {
           path: '/management/service-info',
           breadcrumbName: intl.get('common.serviceInfo'),
@@ -524,6 +517,10 @@ export const RoutesList: any = [
           path: '#',
           breadcrumbName: intl.get('common.serviceManagement'),
         },
+        {
+          path: '/management/service-manage',
+          breadcrumbName: intl.get('common.overviewInfo'),
+        },
         {
           path: '/management/partition-info',
           breadcrumbName: intl.get('common.partitionInfo'),

diff --git a/src/pages/ServiceManage/PartitionInfo/index.tsx b/src/pages/ServiceManage/PartitionInfo/index.tsx
@@ -1,10 +1,10 @@
+import React, { useEffect } from 'react';
 import _ from 'lodash';
-import React from 'react';
 import { Input, Table } from 'antd';
 import { connect } from 'react-redux';
 import intl from 'react-intl-universal';
+
 import { IDispatch, IRootState } from '@/store';
-import service from '@/config/service';
 import { DashboardSelect, Option } from '@/components/DashboardSelect';
 import { TitleInstruction } from '@/components/Instruction';
 import { trackEvent } from '@/utils/stat';
@@ -16,91 +16,99 @@ const mapState = (state: IRootState) => ({
   spaces: state.nebula.spaces,
   parts: state.nebula.parts,
   currentSpace: state.nebula.currentSpace,
+  address: state.nebula.address,
+  port: state.nebula.port,
 });
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncGetSpaces: dispatch.nebula.asyncGetSpaces,
   asyncGetParts: dispatch.nebula.asyncGetParts,
-  updateSpace: space =>
-    dispatch.nebula.update({
-      currentSpace: space,
-    }),
+  asyncUseSpaces: dispatch.nebula.asyncUseSpaces,
 });
 interface IProps
   extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch> {}
+    ReturnType<typeof mapDispatch> {
+  isOverview: boolean;
+}
+
+const PartitionInfo: React.FC<IProps> = (props: IProps) => {
+  const { address, port, currentSpace, loading, parts, spaces, isOverview } =
+    props;
 
-class PartitionInfo extends React.Component<IProps> {
-  componentDidMount() {
-    this.props.asyncGetSpaces();
-  }
+  useEffect(() => {
+    if (address && port) {
+      props.asyncGetSpaces();
+    }
+  }, [address, port]);
+
+  useEffect(() => {
+    if (currentSpace) {
+      props.asyncGetParts();
+    }
+  }, [currentSpace]);
 
-  handleSpaceChange = async space => {
-    const { code } = (await service.execNGQL({
-      gql: `USE ${space}`,
-    })) as any;
+  const handleSpaceChange = async space => {
+    const { code } = (await props.asyncUseSpaces(space)) as any;
     if (code === 0) {
-      this.props.asyncGetParts();
-      this.props.updateSpace(space);
+      props.asyncGetParts();
       trackEvent('partition_info', 'select_space');
     }
   };
 
-  handleSearchPartitionId = value => {
-    this.props.asyncGetParts(value);
+  const handleSearchPartitionId = value => {
+    props.asyncGetParts(value);
     trackEvent('partition_info', 'search_partitionId');
   };
 
-  render() {
-    const { spaces, parts, currentSpace, loading } = this.props;
-    const columns = [
-      {
-        title: (
-          <TitleInstruction
-            title="PartitionId"
-            description={intl.get('description.partitionId')}
-          />
-        ),
-        dataIndex: 'Partition ID',
-      },
-      {
-        title: (
-          <TitleInstruction
-            title="Leader"
-            description={intl.get('description.leader')}
-          />
-        ),
-        dataIndex: 'Leader',
-      },
-      {
-        title: (
-          <TitleInstruction
-            title="Peers"
-            description={intl.get('description.peers')}
-          />
-        ),
-        dataIndex: 'Peers',
-      },
-      {
-        title: (
-          <TitleInstruction
-            title="Losts"
-            description={intl.get('description.losts')}
-          />
-        ),
-        dataIndex: 'Losts',
-        render: losts => <span>{losts || '-'}</span>,
-      },
-    ];
-    return (
-      <div className="service-info service-partition">
+  const columns = [
+    {
+      title: (
+        <TitleInstruction
+          title="PartitionId"
+          description={intl.get('description.partitionId')}
+        />
+      ),
+      dataIndex: 'Partition ID',
+    },
+    {
+      title: (
+        <TitleInstruction
+          title="Leader"
+          description={intl.get('description.leader')}
+        />
+      ),
+      dataIndex: 'Leader',
+    },
+    {
+      title: (
+        <TitleInstruction
+          title="Peers"
+          description={intl.get('description.peers')}
+        />
+      ),
+      dataIndex: 'Peers',
+    },
+    {
+      title: (
+        <TitleInstruction
+          title="Losts"
+          description={intl.get('description.losts')}
+        />
+      ),
+      dataIndex: 'Losts',
+      render: losts => <span>{losts || '-'}</span>,
+    },
+  ];
+  return (
+    <div className="service-info service-partition">
+      {!isOverview && (
         <div className="common-header">
           <div className="service-screen">
             <span>{intl.get('service.spaces')}:</span>
             <DashboardSelect
               placeholder={intl.get('service.chooseSpace')}
               value={currentSpace || undefined}
-              onChange={this.handleSpaceChange}
+              onChange={handleSpaceChange}
               style={{
                 width: 220,
               }}
@@ -115,21 +123,22 @@ class PartitionInfo extends React.Component<IProps> {
           <div className="service-screen">
             <span>{intl.get('service.partition')}:</span>
             <Input.Search
-              allowClear={true}
+              allowClear
+              className="text-center"
               placeholder={intl.get('service.enterPartitionId')}
-              onSearch={this.handleSearchPartitionId}
+              onSearch={handleSearchPartitionId}
             />
           </div>
         </div>
-        <Table
-          loading={!!loading}
-          rowKey={(record: any) => record['Partition ID']}
-          dataSource={parts}
-          columns={columns}
-        />
-      </div>
-    );
-  }
-}
+      )}
+      <Table
+        loading={!!loading}
+        rowKey={(record: any) => record['Partition ID']}
+        dataSource={parts}
+        columns={columns}
+      />
+    </div>
+  );
+};
 
 export default connect(mapState, mapDispatch)(PartitionInfo);