1230bugfix

.gitignore

@@ -24,6 +24,7 @@ public/
 !.eslintrc.js
 !.prettierrc.js
 !.commitlint.js
+server/config.yaml
 !app/assets/**/*.js
 nebula-go-api/nebula-go-api
 nebula-go-api/tmp

src/common.less

@@ -4,3 +4,32 @@
 @red: #E67171;
 @skyblue: #0EBAD2;
 @pink: #EB2F96;
+
+html {
+  --scroll-bar: 0;
+}
+
+#app ::-webkit-scrollbar {
+  background: #fff;
+  width: 10px;
+  height: 10px;
+}
+
+#app ::-webkit-scrollbar-track {
+  border-radius: 5px;
+}
+
+#app ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #a6a6a6;
+  width: 8px;
+  height: 8px;
+  border: 1px solid transparent;
+  background-clip: content-box;
+}
+
+.ant-menu-root::-webkit-scrollbar {
+  display: none !important;
+  width: 0;
+  height: 0;
+}

src/config/service.ts

@@ -1,3 +1,4 @@
+import { ServiceName } from '@/utils/interface';
 import { _delete, get, post } from '../utils/http';
 
 const execNGQL = post('/api-nebula/db/exec');
@@ -18,7 +19,7 @@ const getAppInfo = get('/api/app');
 const getCustomConfig = get('/api/config/custom');
 const getAnnotationLineConfig = get('/api/config/annotation_line');
 
-const getConfigInfo = (component) => get(`/api-${component}/flags`);
+const getConfigInfo = (component: ServiceName) => get(`/api-${component}/flags`);
 
 export default {
   execNGQL,

src/pages/MainPage/index.less

@@ -36,9 +36,10 @@
 
     .sidebar-menu {
       background-color: #1e2025;
+      -webkit-overflow-scrolling: touch;
       margin-bottom: 170px;
       flex: 1;
-      overflow-y: auto;
+      overflow: auto;
 
       .ant-menu-submenu-title,
       .ant-menu-item {

src/pages/MainPage/routes.tsx

@@ -131,25 +131,6 @@ export const MenuList = [
   },
 ];
 
-const SERVICE_VIEWS = [
-  {
-    label: intl.get('common.overview'),
-    value: '/service/overview',
-  },
-  // {
-  //   label: intl.get('common.version'),
-  //   value: '/service/version-statistics',
-  // },
-  // {
-  //   label: 'Leader',
-  //   value: '/service/leader-distribution',
-  // },
-  // {
-  //   label: 'Partition',
-  //   value: '/service/partition-distribution',
-  // },
-];
-
 export const RoutesList: any = [
   {
     path: '/machine/overview',
@@ -314,7 +295,6 @@ export const RoutesList: any = [
         },
       ],
       title: intl.get('common.service'),
-      extra: SERVICE_VIEWS,
     },
   },
   // {
@@ -352,7 +332,6 @@ export const RoutesList: any = [
         },
       ],
       title: 'Graph',
-      extra: SERVICE_VIEWS,
     },
   },
   {
@@ -375,7 +354,6 @@ export const RoutesList: any = [
         },
       ],
       title: 'Meta',
-      extra: SERVICE_VIEWS,
     },
   },
   {
@@ -398,7 +376,6 @@ export const RoutesList: any = [
         },
       ],
       title: 'Storage',
-      extra: SERVICE_VIEWS,
     },
   },
   {
@@ -440,7 +417,6 @@ export const RoutesList: any = [
       ],
       title: intl.get('service.serviceMetricsDetails'),
       showBackBtn: true,
-      extra: SERVICE_VIEWS,
     },
   },
   {
@@ -464,7 +440,6 @@ export const RoutesList: any = [
       ],
       title: intl.get('service.serviceMetricsDetails'),
       showBackBtn: true,
-      extra: SERVICE_VIEWS,
     },
   },
   {
@@ -488,7 +463,6 @@ export const RoutesList: any = [
       ],
       title: intl.get('service.serviceMetricsDetails'),
       showBackBtn: true,
-      extra: SERVICE_VIEWS,
     },
   },
   {

src/pages/ServiceManage/ConfigInfo/index.tsx

@@ -1,44 +1,53 @@
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { Radio,Input, Table } from 'antd';
+import { Radio, Input, Table, Spin } from 'antd';
 import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
 import { IDispatch, IRootState } from '@/store';
 import { TitleInstruction } from '@/components/Instruction';
 import { trackEvent } from '@/utils/stat';
 import './index.less';
+import { ServiceName } from '@/utils/interface';
+import { getConfigData } from '@/utils/dashboard';
 
 const mapState = (state: IRootState) => ({
-  loading: state.loading.effects.nebula.asyncGetServiceConfigs,
-  configs: state.nebula.configs,
+  loading: !!state.loading.effects.nebula.asyncGetServiceConfigs as boolean,
 });
 
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetServiceConfigs: dispatch.nebula.asyncGetServiceConfigs,
 }) as any;
 interface IProps
   extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch> {}
+  ReturnType<typeof mapDispatch> { }
 const NebulaConfig: React.FC<IProps> = (props: IProps) => {
   const [name, setName] = useState('');
-
-  useEffect(()=>{
-    props.asyncGetServiceConfigs('graph');
-  },[])
+
+  const [configData, setConfigData] = useState<any[]>([]);
+
+  useEffect(() => {
+    asyncFetchConfigInfo(ServiceName.GRAPHD);
+  }, [])
 
   const handleModuleChange = e => {
     trackEvent('service-info', 'click_module');
-    props.asyncGetServiceConfigs(e.target.value);
+    setConfigData([]);
+    asyncFetchConfigInfo(e.target.value as ServiceName);
   };
 
+  const asyncFetchConfigInfo = async (component: ServiceName) => {
+    const data = await props.asyncGetServiceConfigs(component);
+    setConfigData(getConfigData(data));
+  }
+
   const getData = () => {
     if (!name) {
-      return configs;
+      return configData;
     }
-    return configs.filter((config: any) => config.name.includes(name));
+    return configData.filter((config: any) => config.name.includes(name));
   };
 
-  const { configs, loading } = props;
+  const { loading } = props;
   const columns = [
     {
       title: (
@@ -61,31 +70,29 @@ const NebulaConfig: React.FC<IProps> = (props: IProps) => {
   ];
   return (
     <div className="service-info service-configs">
-      <div className="common-header">
-        <Radio.Group
-          buttonStyle="solid"
-          defaultValue="graph"
-          className="service-radio"
-          onChange={handleModuleChange}
-        >
-          <Radio.Button value="meta">Meta</Radio.Button>
-          <Radio.Button value="storage">Storage</Radio.Button>
-          <Radio.Button value="graph">Graph</Radio.Button>
-          {/* TODO: Nebula 2.0.1 does not support meta modifications, support can be released in later versions
-          <Radio.Button value="meta">Meta</Radio.Button>
-          */}
-        </Radio.Group>
-        <Input
-          placeholder={intl.get('common.configTip')}
-          onChange={e => setName(e.target.value)}
+      <Spin spinning={loading}>
+        <div className="common-header">
+          <Radio.Group
+            buttonStyle="solid"
+            defaultValue={ServiceName.GRAPHD}
+            className="service-radio"
+            onChange={handleModuleChange}
+          >
+            <Radio.Button value={ServiceName.METAD}>Meta</Radio.Button>
+            <Radio.Button value={ServiceName.STORAGED}>Storage</Radio.Button>
+            <Radio.Button value={ServiceName.GRAPHD}>Graph</Radio.Button>
+          </Radio.Group>
+          <Input
+            placeholder={intl.get('common.configTip')}
+            onChange={e => setName(e.target.value)}
+          />
+        </div>
+        <Table
+          rowKey={(record: any) => record.value + record.name}
+          dataSource={getData()}
+          columns={columns}
         />
-      </div>
-      <Table
-        loading={!!loading}
-        rowKey={(record: any) => record.value + record.name}
-        dataSource={getData()}
-        columns={columns}
-      />
+      </Spin>
     </div>
   );
 }

src/store/models/nebula.ts

@@ -1,7 +1,7 @@
 import { createModel } from '@rematch/core';
 import _ from 'lodash';
 import service from '@/config/service';
-import { getConfigData, getVersion } from "@/utils/dashboard";
+import { getVersion } from "@/utils/dashboard";
 import { NebulaVersionType, ServiceName } from '@/utils/interface';
 import { SessionStorageUtil } from '@/utils';
 
@@ -20,7 +20,6 @@ type IServiceType = 'GRAPH' | 'STORAGE' | 'META';
 export function NebulaModelWrapper(serviceApi, state, _effects) {
   return createModel({
     state: {
-      configs: [],
       jobs: [],
       spaces: [] as any,
       parts: [],
@@ -41,15 +40,9 @@ export function NebulaModelWrapper(serviceApi, state, _effects) {
         })) as any; 
         return { code,data };
       },
-      async asyncGetServiceConfigs(module) {
-
+      async asyncGetServiceConfigs(module: ServiceName) {
         const data = await serviceApi.getConfigInfo(module)() ;
-
-        if (data) {
-          this.update({
-            configs: getConfigData(data),
-          });
-        }
+        return data;
       },
       async asyncGetJobs() {
         const { code, data } = (await serviceApi.execNGQL({

src/utils/http.ts

@@ -29,7 +29,10 @@ export const interceptorFn = (store) => {
 
       let _code;
       //HACK: get graph,storage server data
-      if(response.config?.url.includes('api-graph')||response.config?.url.includes('api-storage')){
+      if(response.config?.url.includes('api-graphd')
+        || response.config?.url.includes('api-storaged') 
+        ||response.config?.url.includes('api-metad') 
+        ){
         return response.data;
       }
       if ('code' in response.data) {

startWebserver.js

@@ -51,29 +51,15 @@ function startWebserver(app, config, version) {
     })
   });
 
-  app.use('/api-graph/*', createProxyMiddleware({
-    target: getServiceTarget('graphd', config),
-    pathRewrite: {
-      '/api-graph': '/',
-    },
-    changeOrigin: true,
-  }));
-
-  app.use('/api-storage/*', createProxyMiddleware({
-    target: getServiceTarget('storaged', config),
-    pathRewrite: {
-      '/api-storage': '/',
-    },
-    changeOrigin: true,
-  }));
-
-  app.use('/api-meta/*', createProxyMiddleware({
-    target: getServiceTarget('metad', config),
-    pathRewrite: {
-      '/api-meta': '/',
-    },
-    changeOrigin: true,
-  }));
+  ['graphd', 'storaged', 'metad'].forEach((type) => {
+    app.use(`/api-${type}/*`, createProxyMiddleware({
+      target: getServiceTarget(type, config),
+      pathRewrite: {
+        [`/api-${type}`]: '/',
+      },
+      changeOrigin: true,
+    }));
+  })
 
   app.get('/api/config/custom', async (_req, res) => {
     res.send({