mod: config

src/components/Service/ServiceHeader/index.less

@@ -1,8 +1,7 @@
 .service-content-header {
 	height: 50px;
-	padding: 12px 20px;
+	padding: 12px;
 	width: 100%;
-	border-bottom: 1px solid #d9d9d9;
 	display: flex;
 	justify-content: space-between;
 

src/config/locale/en-US/common.json

@@ -30,6 +30,7 @@
   "manual": "User Manual",
   "forum": "Forum",
   "forumLink": "https://discuss.nebula-graph.io/",
+  "configTip": "Please enter a configuration name",
   "all":"All",
   "metricLabel": "instance",
   "updateFrequency": "frequency"

src/config/locale/zh-CN/common.json

@@ -32,5 +32,6 @@
   "forumLink": "https://discuss.nebula-graph.com.cn/",
   "all":"全部",
   "updateFrequency": "更新频率",
+  "configTip": "请输入配置名进行搜索",
   "metricLabel": "实例"
 }

src/pages/MachineDashboard/index.less

@@ -1,8 +1,12 @@
+.machine-dashboard-spinning, .ant-spin-container{
+	min-height: 100%;
+}
 .machine-dashboard {
-	height: 100%;
+	min-height: 100%;
 	// overflow-y: auto;
 	display: flex;
 	flex-direction: column;
+	background-color: #fff;
 
   .common-header {
     background: #fff;
@@ -17,7 +21,9 @@
 
 		.dashboard-card {
 			height: 100%;
-
+			.inner{
+				border: 1px solid #D9D9D9;
+			}
 			.nebula-chart-line {
 				height: 100%;
 			}

src/pages/MachineDashboard/index.tsx

@@ -192,7 +192,7 @@ function MachineDashboard(props: IProps) {
   }
 
   return (
-    <Spin spinning={showLoading}>
+    <Spin spinning={showLoading} wrapperClassName='machine-dashboard-spinning'>
       <div className="machine-dashboard">
         <div className='common-header' >
           <MetricsFilterPanel 

src/pages/ServiceDashboard/index.less

@@ -1,21 +1,23 @@
 .service-table {
-	height: 100%;
+	min-height: 100%;
+	background-color: #fff;
 	display: flex;
 	flex-direction: column;
 
   .common-header {
     background: #fff;
-		margin: 15px 0;
-		justify-content: flex-start;
+	margin: 15px 0;
+	justify-content: flex-start;
     height: auto;
     padding-bottom: 0;
   }
 
 	> .service-table-item {
 		flex: 1;
 		background: #fff;
-		margin-bottom: 30px;
-		border: 1px solid #dcdcdc;
+		// margin-bottom: 30px;
+		padding-top: 10px;
+		border-top: 1px solid #dcdcdc;
 
 		> .ant-row {
 			height: calc(100% - 50px);

src/pages/ServiceManage/ConfigInfo/index.less

@@ -12,4 +12,8 @@
 			}
 		}
 	}
+	input{
+		width: 265px;
+		float: right;
+	}
 }

src/pages/ServiceManage/ConfigInfo/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import React from 'react';
-import { Radio, Table } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Radio,Input, Table } from 'antd';
 import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
 import { IDispatch, IRootState } from '@/store';
@@ -19,63 +19,74 @@ const mapDispatch = (dispatch: IDispatch) => ({
 interface IProps
   extends ReturnType<typeof mapState>,
   ReturnType<typeof mapDispatch> {}
-class ConfigInfo extends React.Component<IProps> {
-  componentDidMount() {
-    this.props.asyncGetServiceConfigs('graph');
-  }
+const NebulaConfig: React.FC<IProps> = (props: IProps) => {
+  const [name, setName] = useState('');
+
+  useEffect(()=>{
+    props.asyncGetServiceConfigs('graph');
+  },[])
 
-  handleModuleChange = e => {
+  const handleModuleChange = e => {
     trackEvent('service-info', 'click_module');
-    this.props.asyncGetServiceConfigs(e.target.value);
+    props.asyncGetServiceConfigs(e.target.value);
   };
 
-  render() {
-    const { configs, loading } = this.props;
-    const columns = [
-      {
-        title: (
-          <TitleInstruction
-            title="Name"
-            description={intl.get('description.moduleName')}
-          />
-        ),
-        dataIndex: 'name',
-      },
-      {
-        title: (
-          <TitleInstruction
-            title="Value"
-            description={intl.get('description.moduleValue')}
-          />
-        ),
-        dataIndex: 'value',
-      },
-    ];
-    return (
-      <div className="service-info service-configs">
-        <div className="common-header">
-          <Radio.Group
-            buttonStyle="solid"
-            defaultValue="graph"
-            className="service-radio"
-            onChange={this.handleModuleChange}
-          >
-            <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>
-        </div>
-        <Table
-          loading={!!loading}
-          rowKey={(record: any) => record.value + record.name}
-          dataSource={configs}
-          columns={columns}
+  const getData = () => {
+    if (!name) {
+      return configs;
+    }
+    return configs.filter((config: any) => config.name.includes(name));
+  };
+
+  const { configs, loading } = props;
+  const columns = [
+    {
+      title: (
+        <TitleInstruction
+          title="Name"
+          description={intl.get('description.moduleName')}
+        />
+      ),
+      dataIndex: 'name',
+    },
+    {
+      title: (
+        <TitleInstruction
+          title="Value"
+          description={intl.get('description.moduleValue')}
+        />
+      ),
+      dataIndex: 'value',
+    },
+  ];
+  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="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)}
         />
       </div>
-    );
-  }
+      <Table
+        loading={!!loading}
+        rowKey={(record: any) => record.value + record.name}
+        dataSource={getData()}
+        columns={columns}
+      />
+    </div>
+  );
 }
 
-export default connect(mapState, mapDispatch)(ConfigInfo);
+export default connect(mapState, mapDispatch)(NebulaConfig);

src/utils/http.ts

@@ -14,7 +14,7 @@ export const interceptorFn = (store) => {
   service.interceptors.response.use(
     (response: any) => {
       const { code, message } = response.data;
-      
+
       let _code;
       //HACK: get graph,storage server data
       if(response.config?.url.includes('api-graph')||response.config?.url.includes('api-storage')){