From 748adbffef213bb5f41db68df52d72b28289d3a4 Mon Sep 17 00:00:00 2001
From: li Nico <37568394+NicolaCage@users.noreply.github.com>
Date: Mon, 7 Mar 2022 16:47:17 +0800
Subject: [PATCH] mod: icon (#45)

---
 src/App.tsx                                   |   5 +-
 src/AuthorizedRoute.tsx                       |  11 +-
 src/components/MetricPopover/index.tsx        |  16 +-
 .../Service/ServiceCardEdit/index.tsx         |  17 +-
 .../Service/ServiceHeader/index.less          |   4 +
 .../Service/ServiceHeader/index.tsx           |  22 +-
 src/components/StatusPanel/index.tsx          |  50 +-
 src/config/index.ts                           |   2 +-
 src/config/rules.ts                           |   2 +-
 src/config/service.ts                         |   2 +-
 src/pages/LeaderDistribution/index.tsx        |  88 +--
 src/pages/Login/index.tsx                     |  53 +-
 src/pages/MachineDashboard/Cards/CPUCard.tsx  |  11 +-
 src/pages/MachineDashboard/Cards/DiskCard.tsx |  36 +-
 src/pages/MachineDashboard/Cards/LoadCard.tsx |   9 +-
 .../MachineDashboard/Cards/MemoryCard.tsx     |  14 +-
 .../MachineDashboard/Cards/NetworkIn.tsx      |   9 +-
 .../MachineDashboard/Cards/NetworkOut.tsx     |   9 +-
 .../MachineDashboard/Detail/CPUDetail.tsx     |  16 +-
 .../MachineDashboard/Detail/DiskDetail.tsx    |  16 +-
 .../MachineDashboard/Detail/LoadDetail.tsx    |  16 +-
 .../MachineDashboard/Detail/MemoryDetail.tsx  |  16 +-
 .../MachineDashboard/Detail/NetworkDetail.tsx |  16 +-
 src/pages/MachineDashboard/Detail/index.tsx   | 191 +++---
 src/pages/MachineDashboard/index.tsx          | 236 +++++---
 src/pages/MainPage/Header/index.tsx           |  68 ++-
 src/pages/MainPage/index.tsx                  | 160 +++--
 src/pages/MainPage/routes.tsx                 | 551 ++++++++++--------
 src/pages/PartitionDistribution/index.tsx     | 115 ++--
 .../ServiceDashboard/Detail/Panel/index.tsx   | 224 ++++---
 src/pages/ServiceDashboard/Detail/index.tsx   | 317 +++++-----
 .../CustomServiceQueryPanel/index.tsx         |  99 ++--
 .../ServiceOverview/index.tsx                 |  40 +-
 src/pages/ServiceDashboard/index.tsx          |  90 +--
 src/pages/ServiceManage/ConfigInfo/index.tsx  |  60 +-
 .../ServiceManage/LongTermTask/index.tsx      |  61 +-
 .../ServiceManage/PartitionInfo/index.tsx     |  78 ++-
 src/pages/ServiceManage/ServiceInfo/index.tsx |  70 ++-
 .../VersionStatistic/VersionItem/index.tsx    |  61 +-
 src/pages/VersionStatistic/index.tsx          |  53 +-
 src/static/images/Graphd-image.png            | Bin 0 -> 1515 bytes
 src/static/images/Meta-image.png              | Bin 0 -> 1734 bytes
 src/static/images/Storage-image.png           | Bin 0 -> 945 bytes
 src/static/import.d.ts                        |  14 +-
 src/store/models/app.ts                       |  50 +-
 src/store/models/machine.ts                   | 161 +++--
 src/store/models/nebula.ts                    |  55 +-
 src/store/models/service.ts                   |  53 +-
 src/store/models/setting.ts                   |  22 +-
 src/typings.d.ts                              |   2 +-
 src/utils/chart/chart.ts                      | 147 ++---
 src/utils/dashboard.ts                        |  77 ++-
 src/utils/http.ts                             |  34 +-
 src/utils/interface.ts                        |  32 +-
 src/utils/metric.ts                           |  42 +-
 src/utils/promQL.ts                           | 200 ++++---
 src/utils/service.ts                          |  77 +--
 src/utils/stat.ts                             |  10 +-
 src/utils/url.ts                              |   7 +-
 59 files changed, 2249 insertions(+), 1648 deletions(-)
 create mode 100644 src/static/images/Graphd-image.png
 create mode 100644 src/static/images/Meta-image.png
 create mode 100644 src/static/images/Storage-image.png

diff --git a/src/App.tsx b/src/App.tsx
index 5af290a2..21af1925 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,13 +25,14 @@ type IProps = RouteComponentProps;
 
 class App extends React.Component<IProps> {
   currentLocale;
+
   constructor(props: IProps) {
     super(props);
     const regx = /lang=(\w+)/g;
     const match = regx.exec(props.history.location.search);
     const lang = document.documentElement.getAttribute('lang');
-    
-    if(!cookies.get('locale')){
+
+    if (!cookies.get('locale')) {
       if (match) {
         cookies.set('locale', match[1] === 'EN_US' ? 'EN_US' : 'ZH_CN');
       } else {
diff --git a/src/AuthorizedRoute.tsx b/src/AuthorizedRoute.tsx
index 9595b79c..2f7fc909 100644
--- a/src/AuthorizedRoute.tsx
+++ b/src/AuthorizedRoute.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Redirect, Route, RouteComponentProps, withRouter } from 'react-router-dom';
+import {
+  Redirect,
+  Route,
+  RouteComponentProps,
+  withRouter,
+} from 'react-router-dom';
 import cookies from 'js-cookie';
 
 import { IRootState } from '@/store';
@@ -25,10 +30,8 @@ const AuthorizedRoute = (props: IProps) => {
     ) : (
       <Route render={render} {...rest} />
     );
-  } else {
-    return <Redirect to="/login" {...rest} />;
   }
+  return <Redirect to="/login" {...rest} />;
 };
 
-
 export default connect(mapState, mapDispatch)(withRouter(AuthorizedRoute));
diff --git a/src/components/MetricPopover/index.tsx b/src/components/MetricPopover/index.tsx
index 02f4dbd8..c9312409 100644
--- a/src/components/MetricPopover/index.tsx
+++ b/src/components/MetricPopover/index.tsx
@@ -20,12 +20,18 @@ export const MetricPopover = (props: { list }) => {
       content={
         <div className={styles.popoverMetric}>
           <div className={styles.metricContent}>
-            <Form className={styles.metric} labelCol={{ span: 13 }} wrapperCol={{ span: 11 }}>
+            <Form
+              className={styles.metric}
+              labelCol={{ span: 13 }}
+              wrapperCol={{ span: 11 }}
+            >
               {props.list.map(option => {
-                if(intl.get(`metric_description.${option.metric}`)){
-                  return <Form.Item key={option.metric} label={option.metric}>
-                    {intl.get(`metric_description.${option.metric}`)}
-                  </Form.Item>;
+                if (intl.get(`metric_description.${option.metric}`)) {
+                  return (
+                    <Form.Item key={option.metric} label={option.metric}>
+                      {intl.get(`metric_description.${option.metric}`)}
+                    </Form.Item>
+                  );
                 }
               })}
             </Form>
diff --git a/src/components/Service/ServiceCardEdit/index.tsx b/src/components/Service/ServiceCardEdit/index.tsx
index 4bdc6203..51a7abc3 100644
--- a/src/components/Service/ServiceCardEdit/index.tsx
+++ b/src/components/Service/ServiceCardEdit/index.tsx
@@ -27,13 +27,16 @@ class ServiceCardEdit extends React.Component<IProps> {
   formRef = React.createRef<FormInstance>();
 
   handleUpdateMetricType = (value: string) => {
-    const { serviceMetric = { spaces: [], graphd: [], storaged:[], metad:[] }, editType } = this.props;
+    const {
+      serviceMetric = { spaces: [], graphd: [], storaged: [], metad: [] },
+      editType,
+    } = this.props;
     const metric = serviceMetric[`${editType}d`].filter(
       item => item.metric === value,
     )[0];
     this.formRef.current!.setFieldsValue({
       metricFunction: metric?.metricType[0].value,
-      space: ''
+      space: '',
     });
   };
 
@@ -61,7 +64,8 @@ class ServiceCardEdit extends React.Component<IProps> {
   };
 
   render() {
-    const { editIndex, editType, serviceMetric, panelConfig, onClose } = this.props;
+    const { editIndex, editType, serviceMetric, panelConfig, onClose } =
+      this.props;
     const editItem = panelConfig[editType][editIndex];
     return (
       <div className="service-card-edit">
@@ -101,13 +105,10 @@ class ServiceCardEdit extends React.Component<IProps> {
                 item => item.metric === metric,
               )[0]?.isSpaceMetric;
               return getFieldValue('metric') && isSpaceMetric ? (
-                <Form.Item
-                  label={intl.get('service.spaces')}
-                  name="space"
-                >
+                <Form.Item label={intl.get('service.spaces')} name="space">
                   <DashboardSelect>
                     <Option key="all" value="">
-                      {intl.get('common.all')} 
+                      {intl.get('common.all')}
                     </Option>
                     {serviceMetric.spaces?.map(space => (
                       <Option key={space} value={space}>
diff --git a/src/components/Service/ServiceHeader/index.less b/src/components/Service/ServiceHeader/index.less
index e4b2d7ec..7e4657dd 100644
--- a/src/components/Service/ServiceHeader/index.less
+++ b/src/components/Service/ServiceHeader/index.less
@@ -19,6 +19,10 @@
 			font-size: 18px;
 			text-transform: capitalize;
 		}
+		img{
+			width: 28px;
+			height: 28px;
+		}
 	}
 
 	.btn-icon-with-desc {
diff --git a/src/components/Service/ServiceHeader/index.tsx b/src/components/Service/ServiceHeader/index.tsx
index 91078b1d..c899d79c 100644
--- a/src/components/Service/ServiceHeader/index.tsx
+++ b/src/components/Service/ServiceHeader/index.tsx
@@ -1,18 +1,36 @@
 import React from 'react';
 import Icon from '@/components/Icon';
+import metadIcon from '@base/static/images/Meta-image.png';
+import graphdIcon from '@base/static/images/Graphd-image.png';
+import storagedIcon from '@base/static/images/Storage-image.png';
 import './index.less';
 
 interface IProps {
   title: string;
-  icon: string;
+  icon?: string;
 }
 class ServiceHeader extends React.PureComponent<IProps> {
+  getLogo = () => {
+    const { title } = this.props;
+    switch (title) {
+      case 'Graph Service':
+        return graphdIcon;
+      case 'Storage Service':
+        return storagedIcon;
+      case 'Meta Service':
+        return metadIcon;
+      default:
+        break;
+    }
+  };
+
   render() {
     const { title, icon } = this.props;
     return (
       <div className="service-content-header">
         <div className="flex header-left">
-          <Icon className="icon-graph blue" icon={icon} />
+          {!!icon && <Icon className="icon-graph blue" icon={icon} />}
+          {!icon && <img src={this.getLogo()} />}
           <span className="title">{title}</span>
         </div>
         <div className="flex">{this.props.children}</div>
diff --git a/src/components/StatusPanel/index.tsx b/src/components/StatusPanel/index.tsx
index 4abdb5d6..c457eebe 100644
--- a/src/components/StatusPanel/index.tsx
+++ b/src/components/StatusPanel/index.tsx
@@ -6,48 +6,42 @@ import { NEBULA_COUNT } from '@/utils/promQL';
 import { DETAIL_DEFAULT_RANGE } from '@/utils/dashboard';
 import { SERVICE_POLLING_INTERVAL } from '@/utils/service';
 
-
 import './index.less';
 
-const mapState = () => {
-  return {
-  };
-};
+const mapState = () => ({});
 
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetStatus: dispatch.service.asyncGetStatus,
+});
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetStatus: dispatch.service.asyncGetStatus,
-  };
-};
-
-interface IProps extends ReturnType<typeof mapDispatch>{
-  type: string,
-  getStatus: (payload)=> void;
+interface IProps extends ReturnType<typeof mapDispatch> {
+  type: string;
+  getStatus: (payload) => void;
 }
 
 interface IState {
-  normal: number,
-  abnormal: number,
+  normal: number;
+  abnormal: number;
 }
 class StatusPanel extends React.PureComponent<IProps, IState> {
   pollingTimer: any;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
       normal: 0,
-      abnormal: 0
+      abnormal: 0,
     };
   }
+
   componentDidMount() {
     this.pollingData();
   }
 
-
   pollingData = () => {
     this.asyncGetStatus();
     this.pollingTimer = setTimeout(this.pollingData, SERVICE_POLLING_INTERVAL);
-  }
+  };
 
   componentWillUnmount() {
     if (this.pollingTimer) {
@@ -57,23 +51,27 @@ class StatusPanel extends React.PureComponent<IProps, IState> {
 
   asyncGetStatus = async () => {
     const { type } = this.props;
-    const { normal, abnormal } = await this.props.getStatus({
+    const { normal, abnormal } = (await this.props.getStatus({
       query: NEBULA_COUNT[type],
       end: Date.now(),
-      interval:DETAIL_DEFAULT_RANGE,
-    }) as any;
+      interval: DETAIL_DEFAULT_RANGE,
+    })) as any;
     this.setState({ normal, abnormal });
-  } 
+  };
 
   render() {
     const { normal, abnormal } = this.state;
     return (
       <ul className="status-panel">
-        <li className="normal">{intl.get('service.normal')}: <span>{normal}</span></li>
-        <li className="abnormal">{intl.get('service.abnormal')}: <span>{abnormal}</span></li>
+        <li className="normal">
+          {intl.get('service.normal')}: <span>{normal}</span>
+        </li>
+        <li className="abnormal">
+          {intl.get('service.abnormal')}: <span>{abnormal}</span>
+        </li>
       </ul>
     );
   }
 }
 
-export default connect(mapState, mapDispatch)(StatusPanel);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(StatusPanel);
diff --git a/src/config/index.ts b/src/config/index.ts
index e94e4b16..c94f80f8 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1 +1 @@
-export * from './constants';
\ No newline at end of file
+export * from './constants';
diff --git a/src/config/rules.ts b/src/config/rules.ts
index e7a858c1..06e867ca 100644
--- a/src/config/rules.ts
+++ b/src/config/rules.ts
@@ -17,4 +17,4 @@ export const versionRulesFn = intl => [
     required: true,
     message: intl.get('rules.versionRequired'),
   },
-];
\ No newline at end of file
+];
diff --git a/src/config/service.ts b/src/config/service.ts
index 3e70c0f8..7dc54a2f 100644
--- a/src/config/service.ts
+++ b/src/config/service.ts
@@ -25,5 +25,5 @@ export default {
   execPromQL,
   execPromQLByRange,
   getCustomConfig,
-  getAnnotationLineConfig
+  getAnnotationLineConfig,
 };
diff --git a/src/pages/LeaderDistribution/index.tsx b/src/pages/LeaderDistribution/index.tsx
index 1b5af808..1fd7e48b 100644
--- a/src/pages/LeaderDistribution/index.tsx
+++ b/src/pages/LeaderDistribution/index.tsx
@@ -9,40 +9,40 @@ import { renderPieChartTpl } from '@/utils/chart/chart';
 import PieChart from '@/components/Charts/PieChart';
 import './index.less';
 
-const mapDispatch: any = (dispatch: IDispatch) => {
-  return {
-    asyncGetHostsInfo: dispatch.nebula.asyncGetHostsInfo,
-  };
-};
+const mapDispatch: any = (dispatch: IDispatch) => ({
+  asyncGetHostsInfo: dispatch.nebula.asyncGetHostsInfo,
+});
 
-const mapState = (state: IRootState) => {
-  return {
-    loading: state.loading.effects.nebula.asyncGetHostsInfo,
-  };
-};
+const mapState = (state: IRootState) => ({
+  loading: state.loading.effects.nebula.asyncGetHostsInfo,
+});
 
-interface IProps extends ReturnType<typeof mapState>,
+interface IProps
+  extends ReturnType<typeof mapState>,
   ReturnType<typeof mapDispatch> {}
 
 interface IState {
   data: {
-    name: string,
-    count: number,
-    distribution: string
-  }[]
+    name: string;
+    count: number;
+    distribution: string;
+  }[];
 }
 
 class LeaderDistribution extends React.Component<IProps, IState> {
   chartInstance: Chart;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
       data: [],
     };
   }
+
   componentDidMount() {
     this.getStorageInfo();
   }
+
   getStorageInfo = async () => {
     const res = await this.props.asyncGetHostsInfo();
     const data = res.map((item: any) => ({
@@ -50,43 +50,48 @@ class LeaderDistribution extends React.Component<IProps, IState> {
       count: item['Leader count'],
       distribution: item['Leader distribution'],
     }));
-    this.setState({
-      data
-    }, this.updateChart);
-  }
+    this.setState(
+      {
+        data,
+      },
+      this.updateChart,
+    );
+  };
 
   renderChart = (chartInstance: Chart) => {
     this.chartInstance = chartInstance;
     renderPieChartTpl(chartInstance);
-  }
+  };
 
   updateChart = () => {
     const { data } = this.state;
-    if(data.length > 0) {
+    if (data.length > 0) {
       const total = last(data)!.count;
       const chartData = data.slice(0, data.length - 1).map(item => ({
         type: item.name,
-        value: round(item.count / total, 2)
+        value: round(item.count / total, 2),
       }));
-      this.chartInstance.data(chartData)
-        .render();
+      this.chartInstance.data(chartData).render();
     }
-  }
+  };
 
-  
   render() {
     const { data } = this.state;
     const { loading } = this.props;
-    const columns = [{
-      title: intl.get('common.service'),
-      dataIndex: 'name',
-    }, {
-      title: intl.get('service.leaderNumber'),
-      dataIndex: 'count',
-    }, {
-      title: intl.get('service.leaderDistribute'),
-      dataIndex: 'distribution',
-    }];
+    const columns = [
+      {
+        title: intl.get('common.service'),
+        dataIndex: 'name',
+      },
+      {
+        title: intl.get('service.leaderNumber'),
+        dataIndex: 'count',
+      },
+      {
+        title: intl.get('service.leaderDistribute'),
+        dataIndex: 'distribution',
+      },
+    ];
     return (
       <Spin delay={200} spinning={!!loading}>
         <div className="leader-distribution">
@@ -94,11 +99,14 @@ class LeaderDistribution extends React.Component<IProps, IState> {
             <span>Storage Leader 分布</span>
           </div>
           <div className="leader-content">
-            <PieChart options={{ height: 286 }} renderChart={this.renderChart} />
+            <PieChart
+              options={{ height: 286 }}
+              renderChart={this.renderChart}
+            />
             <Table
               className="leader-table"
-              columns={columns} 
-              dataSource={data} 
+              columns={columns}
+              dataSource={data}
               pagination={false}
               rowKey="name"
             />
@@ -108,4 +116,4 @@ class LeaderDistribution extends React.Component<IProps, IState> {
     );
   }
 }
-export default connect(mapState, mapDispatch)(LeaderDistribution);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(LeaderDistribution);
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 4a337061..ef2a9cf1 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -5,7 +5,11 @@ import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
 import cookies from 'js-cookie';
 import { RouteComponentProps } from 'react-router-dom';
-import { passwordRulesFn, usernameRulesFn, versionRulesFn } from '@/config/rules';
+import {
+  passwordRulesFn,
+  usernameRulesFn,
+  versionRulesFn,
+} from '@/config/rules';
 import LanguageSelect from '@/components/LanguageSelect';
 import { VERSIONS } from '@/utils/dashboard';
 import './index.less';
@@ -17,7 +21,7 @@ const FormItem = Form.Item;
 
 const fomrItemLayout = {
   wrapperCol: {
-    span: 24
+    span: 24,
   },
 };
 
@@ -26,7 +30,6 @@ const mapState = (state: IRootState) => ({
   connection: state.app.connection,
 });
 
-
 const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncLogin: dispatch.app.asyncLogin,
   asyncGetAppInfo: dispatch.app.asyncGetAppInfo,
@@ -37,12 +40,11 @@ const mapDispatch: any = (dispatch: IDispatch) => ({
     }),
 });
 
-interface IProps extends ReturnType<typeof mapState>,
+interface IProps
+  extends ReturnType<typeof mapState>,
   ReturnType<typeof mapDispatch>,
-  RouteComponentProps {
-}
+  RouteComponentProps {}
 class ConfigServerForm extends React.Component<IProps> {
-
   componentDidMount() {
     this.props.asyncGetAppInfo();
     this.props.asyncGetCustomConfig();
@@ -50,13 +52,18 @@ class ConfigServerForm extends React.Component<IProps> {
 
   onConfig = async (values: any) => {
     const { connection } = this.props;
-    const ok = await this.props.asyncLogin({ ip: connection.ip, port: connection.port, ...values });
+    const ok = await this.props.asyncLogin({
+      ip: connection.ip,
+      port: connection.port,
+      ...values,
+    });
     if (ok) {
       cookies.set('version', values.version);
       this.props.updateVersion(values.version);
       this.props.history.push('/machine/overview');
     }
   };
+
   render() {
     const { appVersion } = this.props;
     return (
@@ -65,16 +72,31 @@ class ConfigServerForm extends React.Component<IProps> {
           <img src={nebulaLogo} className="logo" />
           <p className="title">Nebula Dashboard</p>
           <p className="form-header">{intl.get('common.account')}</p>
-          <Form layout="horizontal" {...fomrItemLayout} onFinish={this.onConfig}>
+          <Form
+            layout="horizontal"
+            {...fomrItemLayout}
+            onFinish={this.onConfig}
+          >
             <FormItem name="username" rules={usernameRulesFn(intl)}>
-              <Input placeholder={intl.get('common.username')} bordered={false} />
+              <Input
+                placeholder={intl.get('common.username')}
+                bordered={false}
+              />
             </FormItem>
             <FormItem name="password" rules={passwordRulesFn(intl)}>
-              <Input type="password" placeholder={intl.get('common.password')} bordered={false} />
+              <Input
+                type="password"
+                placeholder={intl.get('common.password')}
+                bordered={false}
+              />
             </FormItem>
             <FormItem name="version" rules={versionRulesFn(intl)}>
               <Select>
-                {VERSIONS.map(version => <Select.Option value={version} key={version}>{version}</Select.Option>)}
+                {VERSIONS.map(version => (
+                  <Select.Option value={version} key={version}>
+                    {version}
+                  </Select.Option>
+                ))}
               </Select>
             </FormItem>
             <Button className="btn-submit" type="primary" htmlType="submit">
@@ -82,7 +104,9 @@ class ConfigServerForm extends React.Component<IProps> {
             </Button>
           </Form>
           <div className="footer">
-            <div className="version">{intl.get('common.version')}：{appVersion}</div>
+            <div className="version">
+              {intl.get('common.version')}：{appVersion}
+            </div>
             <LanguageContext.Consumer>
               {({ currentLocale, toggleLanguage }) => (
                 <LanguageSelect
@@ -97,7 +121,6 @@ class ConfigServerForm extends React.Component<IProps> {
       </div>
     );
   }
-
-};
+}
 
 export default connect(mapState, mapDispatch)(ConfigServerForm);
diff --git a/src/pages/MachineDashboard/Cards/CPUCard.tsx b/src/pages/MachineDashboard/Cards/CPUCard.tsx
index e9ed850b..0ad4c433 100644
--- a/src/pages/MachineDashboard/Cards/CPUCard.tsx
+++ b/src/pages/MachineDashboard/Cards/CPUCard.tsx
@@ -10,10 +10,15 @@ const mapState = (state: IRootState) => {
   const { cpuBaseLine } = state.setting;
   const { aliasConfig } = state.app;
   return {
-    baseLine:cpuBaseLine,
-    data: getDataByType({ data:cpuStat, type:'all', name: 'instance', aliasConfig }),
+    baseLine: cpuBaseLine,
+    data: getDataByType({
+      data: cpuStat,
+      type: 'all',
+      name: 'instance',
+      aliasConfig,
+    }),
     valueType: VALUE_TYPE.percentage,
     loading: !!state.loading.effects.machine.asyncGetCPUStatByRange,
   };
 };
-export default connect(mapState)(LineCard);
\ No newline at end of file
+export default connect(mapState)(LineCard);
diff --git a/src/pages/MachineDashboard/Cards/DiskCard.tsx b/src/pages/MachineDashboard/Cards/DiskCard.tsx
index 2a66642c..b76a1696 100644
--- a/src/pages/MachineDashboard/Cards/DiskCard.tsx
+++ b/src/pages/MachineDashboard/Cards/DiskCard.tsx
@@ -7,28 +7,28 @@ import SpaceChart from '@/components/Charts/SpaceChart';
 const mapState = (state: IRootState) => {
   const { diskSizeStat, diskStat } = state.machine;
   const { aliasConfig } = state.app;
-  
+
   return {
     // According to type, only the detail increases total
-    diskUsageDetail: diskStat.filter(item => item.metric.instance !== 'total').map((instance, idx) => {
-      const latestValues = _.last(instance.values);
-      let size = 0;
-      if (diskSizeStat[idx]) {
-        size = Number(diskSizeStat[idx].value[1]);
-      }
-      const name = instance.metric.instance;
-      return {
-        size,
-        type: aliasConfig[name] || name,
-        value: latestValues ? Number(latestValues[1]) : 0,
-      };
-    })
+    diskUsageDetail: diskStat
+      .filter(item => item.metric.instance !== 'total')
+      .map((instance, idx) => {
+        const latestValues = _.last(instance.values);
+        let size = 0;
+        if (diskSizeStat[idx]) {
+          size = Number(diskSizeStat[idx].value[1]);
+        }
+        const name = instance.metric.instance;
+        return {
+          size,
+          type: aliasConfig[name] || name,
+          value: latestValues ? Number(latestValues[1]) : 0,
+        };
+      }),
   };
 };
 
-interface IProps extends ReturnType<typeof mapState> {
-
-}
+interface IProps extends ReturnType<typeof mapState> {}
 
 class DiskCard extends React.Component<IProps> {
   render() {
@@ -41,4 +41,4 @@ class DiskCard extends React.Component<IProps> {
   }
 }
 
-export default connect(mapState)(DiskCard);
\ No newline at end of file
+export default connect(mapState)(DiskCard);
diff --git a/src/pages/MachineDashboard/Cards/LoadCard.tsx b/src/pages/MachineDashboard/Cards/LoadCard.tsx
index fa7cb6af..d2253bb2 100644
--- a/src/pages/MachineDashboard/Cards/LoadCard.tsx
+++ b/src/pages/MachineDashboard/Cards/LoadCard.tsx
@@ -11,10 +11,15 @@ const mapState = (state: IRootState) => {
   const { aliasConfig } = state.app;
   return {
     baseLine: loadBaseLine,
-    data: getDataByType({ data:loadStat, type:'all', name: 'instance', aliasConfig }),
+    data: getDataByType({
+      data: loadStat,
+      type: 'all',
+      name: 'instance',
+      aliasConfig,
+    }),
     valueType: VALUE_TYPE.number,
     loading: !!state.loading.effects.machine.asyncGetLoadByRange,
   };
 };
 
-export default connect(mapState)(LineCard);
\ No newline at end of file
+export default connect(mapState)(LineCard);
diff --git a/src/pages/MachineDashboard/Cards/MemoryCard.tsx b/src/pages/MachineDashboard/Cards/MemoryCard.tsx
index 1f401b94..326811fb 100644
--- a/src/pages/MachineDashboard/Cards/MemoryCard.tsx
+++ b/src/pages/MachineDashboard/Cards/MemoryCard.tsx
@@ -9,13 +9,19 @@ const mapState = (state: IRootState) => {
   const { memoryBaseLine } = state.setting;
   const { aliasConfig } = state.app;
   return {
-    data: getDataByType({ data:memoryStat, type:'all', name: 'instance', aliasConfig }),
+    data: getDataByType({
+      data: memoryStat,
+      type: 'all',
+      name: 'instance',
+      aliasConfig,
+    }),
     sizes: memorySizeStat,
     baseLine: memoryBaseLine,
     valueType: VALUE_TYPE.percentage,
-    loading: !!state.loading.effects.machine.asyncGetMemorySizeStat &&
-      !!state.loading.effects.machine.asyncGetMemoryStatByRange
+    loading:
+      !!state.loading.effects.machine.asyncGetMemorySizeStat &&
+      !!state.loading.effects.machine.asyncGetMemoryStatByRange,
   };
 };
 
-export default connect(mapState)(LineCard);
\ No newline at end of file
+export default connect(mapState)(LineCard);
diff --git a/src/pages/MachineDashboard/Cards/NetworkIn.tsx b/src/pages/MachineDashboard/Cards/NetworkIn.tsx
index bb247e59..b4ee9f85 100644
--- a/src/pages/MachineDashboard/Cards/NetworkIn.tsx
+++ b/src/pages/MachineDashboard/Cards/NetworkIn.tsx
@@ -11,10 +11,15 @@ const mapState = (state: IRootState) => {
   const { aliasConfig } = state.app;
   return {
     baseLine: networkInBaseLine,
-    data: getDataByType({ data:networkInStat, type:'all', name: 'instance', aliasConfig }),
+    data: getDataByType({
+      data: networkInStat,
+      type: 'all',
+      name: 'instance',
+      aliasConfig,
+    }),
     valueType: VALUE_TYPE.byteSecondNet,
     loading: !!state.loading.effects.machine.asyncGetNetworkStatByRange,
   };
 };
 
-export default connect(mapState)(LineCard);
\ No newline at end of file
+export default connect(mapState)(LineCard);
diff --git a/src/pages/MachineDashboard/Cards/NetworkOut.tsx b/src/pages/MachineDashboard/Cards/NetworkOut.tsx
index 46dad275..d56a6cee 100644
--- a/src/pages/MachineDashboard/Cards/NetworkOut.tsx
+++ b/src/pages/MachineDashboard/Cards/NetworkOut.tsx
@@ -11,10 +11,15 @@ const mapState = (state: IRootState) => {
   const { aliasConfig } = state.app;
   return {
     baseLine: networkOutBaseLine,
-    data: getDataByType({ data:networkOutStat, type:'all', name: 'instance', aliasConfig }),
+    data: getDataByType({
+      data: networkOutStat,
+      type: 'all',
+      name: 'instance',
+      aliasConfig,
+    }),
     valueType: VALUE_TYPE.byteSecondNet,
     loading: !!state.loading.effects.machine.asyncGetNetworkStatByRange,
   };
 };
 
-export default connect(mapState)(LineCard);
\ No newline at end of file
+export default connect(mapState)(LineCard);
diff --git a/src/pages/MachineDashboard/Detail/CPUDetail.tsx b/src/pages/MachineDashboard/Detail/CPUDetail.tsx
index 2bad0600..f99b64ba 100644
--- a/src/pages/MachineDashboard/Detail/CPUDetail.tsx
+++ b/src/pages/MachineDashboard/Detail/CPUDetail.tsx
@@ -3,17 +3,15 @@ import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
 
-const mapState = (state: IRootState) => {
-  return {
-    type: 'cpu',
-    dataSource: state.machine.cpuStat,
-    metricOptions: SUPPORT_METRICS.cpu,
-    loading: !!state.loading.effects.machine.asyncGetCPUStatByRange,
-  };
-};
+const mapState = (state: IRootState) => ({
+  type: 'cpu',
+  dataSource: state.machine.cpuStat,
+  metricOptions: SUPPORT_METRICS.cpu,
+  loading: !!state.loading.effects.machine.asyncGetCPUStatByRange,
+});
 
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetDataSourceByRange: dispatch.machine.asyncGetCPUStatByRange,
 });
 
-export default connect(mapState, mapDispatch)(Detail);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(Detail);
diff --git a/src/pages/MachineDashboard/Detail/DiskDetail.tsx b/src/pages/MachineDashboard/Detail/DiskDetail.tsx
index 04301c21..437f358c 100644
--- a/src/pages/MachineDashboard/Detail/DiskDetail.tsx
+++ b/src/pages/MachineDashboard/Detail/DiskDetail.tsx
@@ -4,17 +4,15 @@ import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
 
-const mapState = (state: IRootState) => {
-  return {
-    type: 'disk',
-    dataSource: state.machine.diskStat,
-    metricOptions: SUPPORT_METRICS.disk,
-    loading: state.loading.effects.machine.asyncGetDiskStatByRange,
-  };
-};
+const mapState = (state: IRootState) => ({
+  type: 'disk',
+  dataSource: state.machine.diskStat,
+  metricOptions: SUPPORT_METRICS.disk,
+  loading: state.loading.effects.machine.asyncGetDiskStatByRange,
+});
 
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetDataSourceByRange: dispatch.machine.asyncGetDiskStatByRange,
 });
 
-export default connect(mapState, mapDispatch)(Detail);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(Detail);
diff --git a/src/pages/MachineDashboard/Detail/LoadDetail.tsx b/src/pages/MachineDashboard/Detail/LoadDetail.tsx
index 03c2aded..9d61694b 100644
--- a/src/pages/MachineDashboard/Detail/LoadDetail.tsx
+++ b/src/pages/MachineDashboard/Detail/LoadDetail.tsx
@@ -4,17 +4,15 @@ import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
 
-const mapState = (state: IRootState) => {
-  return {
-    type: 'load',
-    dataSource: state.machine.loadStat,
-    metricOptions: SUPPORT_METRICS.load,
-    loading: state.loading.effects.machine.asyncGetLoadByRange,
-  };
-};
+const mapState = (state: IRootState) => ({
+  type: 'load',
+  dataSource: state.machine.loadStat,
+  metricOptions: SUPPORT_METRICS.load,
+  loading: state.loading.effects.machine.asyncGetLoadByRange,
+});
 
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetDataSourceByRange: dispatch.machine.asyncGetLoadByRange,
 });
 
-export default connect(mapState, mapDispatch)(Detail);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(Detail);
diff --git a/src/pages/MachineDashboard/Detail/MemoryDetail.tsx b/src/pages/MachineDashboard/Detail/MemoryDetail.tsx
index 982da0e2..7b8c639c 100644
--- a/src/pages/MachineDashboard/Detail/MemoryDetail.tsx
+++ b/src/pages/MachineDashboard/Detail/MemoryDetail.tsx
@@ -4,17 +4,15 @@ import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
 
-const mapState = (state: IRootState) => {
-  return {
-    type: 'memory',
-    dataSource: state.machine.memoryStat,
-    metricOptions: SUPPORT_METRICS.memory,
-    loading: state.loading.effects.machine.asyncGetMemoryStatByRange,
-  };
-};
+const mapState = (state: IRootState) => ({
+  type: 'memory',
+  dataSource: state.machine.memoryStat,
+  metricOptions: SUPPORT_METRICS.memory,
+  loading: state.loading.effects.machine.asyncGetMemoryStatByRange,
+});
 
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetDataSourceByRange: dispatch.machine.asyncGetMemoryStatByRange,
 });
 
-export default connect(mapState, mapDispatch)(Detail);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(Detail);
diff --git a/src/pages/MachineDashboard/Detail/NetworkDetail.tsx b/src/pages/MachineDashboard/Detail/NetworkDetail.tsx
index d47a76bb..58540743 100644
--- a/src/pages/MachineDashboard/Detail/NetworkDetail.tsx
+++ b/src/pages/MachineDashboard/Detail/NetworkDetail.tsx
@@ -3,17 +3,15 @@ import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
 
-const mapState = (state: IRootState) => {
-  return {
-    type: 'network',
-    dataSource: state.machine.networkStat,
-    metricOptions: SUPPORT_METRICS.network,
-    loading: state.loading.effects.machine.asyncGetNetworkStatByRange,
-  };
-};
+const mapState = (state: IRootState) => ({
+  type: 'network',
+  dataSource: state.machine.networkStat,
+  metricOptions: SUPPORT_METRICS.network,
+  loading: state.loading.effects.machine.asyncGetNetworkStatByRange,
+});
 
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetDataSourceByRange: dispatch.machine.asyncGetNetworkStatByRange,
 });
 
-export default connect(mapState, mapDispatch)(Detail);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(Detail);
diff --git a/src/pages/MachineDashboard/Detail/index.tsx b/src/pages/MachineDashboard/Detail/index.tsx
index 76b8b391..85cbb62e 100644
--- a/src/pages/MachineDashboard/Detail/index.tsx
+++ b/src/pages/MachineDashboard/Detail/index.tsx
@@ -6,7 +6,14 @@ import { Spin } from 'antd';
 import { connect } from 'react-redux';
 import MachineDetail from '@/components/MachineDetail';
 import LineChart from '@/components/Charts/LineChart';
-import { CARD_POLLING_INTERVAL, DETAIL_DEFAULT_RANGE, getBaseLineByUnit, getDataByType, getMaxNum, getProperTickInterval } from '@/utils/dashboard';
+import {
+  CARD_POLLING_INTERVAL,
+  DETAIL_DEFAULT_RANGE,
+  getBaseLineByUnit,
+  getDataByType,
+  getMaxNum,
+  getProperTickInterval,
+} from '@/utils/dashboard';
 import { configDetailChart, updateDetailChart } from '@/utils/chart/chart';
 import { IStatRangeItem } from '@/utils/interface';
 import { IDispatch, IRootState } from '@/store';
@@ -16,48 +23,53 @@ import { trackEvent } from '@/utils/stat';
 import Modal from '@/components/Modal';
 import BaseLineEdit from '@/components/BaseLineEdit';
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncUpdateBaseLine: (key, value) => dispatch.setting.update({
-      [key]: value
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncUpdateBaseLine: (key, value) =>
+    dispatch.setting.update({
+      [key]: value,
     }),
-  };
-};
-
-const mapState = (state: IRootState) => {
-  return {
-    aliasConfig: state.app.aliasConfig,
-    cpuBaseLine: state.setting.cpuBaseLine,
-    memoryBaseLine: state.setting.memoryBaseLine,
-    loadBaseLine: state.setting.loadBaseLine,
-    diskBaseLine: state.setting.diskBaseLine,
-    networkBaseLine: state.setting.networkBaseLine,
-  };
-};
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch>{
-  type: string
-  asyncGetDataSourceByRange: (params: {start: number, end: number, metric: string}) => void;
+});
+
+const mapState = (state: IRootState) => ({
+  aliasConfig: state.app.aliasConfig,
+  cpuBaseLine: state.setting.cpuBaseLine,
+  memoryBaseLine: state.setting.memoryBaseLine,
+  loadBaseLine: state.setting.loadBaseLine,
+  diskBaseLine: state.setting.diskBaseLine,
+  networkBaseLine: state.setting.networkBaseLine,
+});
+interface IProps
+  extends ReturnType<typeof mapState>,
+  ReturnType<typeof mapDispatch> {
+  type: string;
+  asyncGetDataSourceByRange: (params: {
+    start: number;
+    end: number;
+    metric: string;
+  }) => void;
   dataSource: IStatRangeItem[];
   metricOptions: {
     metric: string;
-    valueType: VALUE_TYPE
-  }[] 
+    valueType: VALUE_TYPE;
+  }[];
   loading: true;
 }
 
 interface IState {
-  maxNum: number,
-  startTimestamps: number,
-  endTimestamps: number,
-  currentInstance: string,
-  currentMetricOption: typeof SUPPORT_METRICS.cpu[0],
+  maxNum: number;
+  startTimestamps: number;
+  endTimestamps: number;
+  currentInstance: string;
+  currentMetricOption: typeof SUPPORT_METRICS.cpu[0];
 }
 
 class Detail extends React.Component<IProps, IState> {
   pollingTimer: any;
+
   chartInstance: Chart;
+
   modalHandler;
+
   constructor(props: IProps) {
     super(props);
     const endTimestamps = Date.now();
@@ -65,7 +77,7 @@ class Detail extends React.Component<IProps, IState> {
       maxNum: 0,
       endTimestamps,
       startTimestamps: endTimestamps - DETAIL_DEFAULT_RANGE,
-      currentInstance:  'all',
+      currentInstance: 'all',
       currentMetricOption: props.metricOptions[0],
     };
   }
@@ -88,49 +100,65 @@ class Detail extends React.Component<IProps, IState> {
       metric: currentMetricOption.metric,
     });
     this.updateChart();
-  }
+  };
 
   pollingData = () => {
     this.getData();
     this.pollingTimer = setTimeout(this.pollingData, CARD_POLLING_INTERVAL);
-  }
+  };
 
   handleIntervalChange = (startTimestamps, endTimestamps) => {
     const { type } = this.props;
     trackEvent(`${type}_detail`, 'select_interval', `from_${type}_detail`);
-    this.setState({
-      startTimestamps,
-      endTimestamps
-    }, this.getData);
-  }
+    this.setState(
+      {
+        startTimestamps,
+        endTimestamps,
+      },
+      this.getData,
+    );
+  };
 
-  handleInstanceChange = (instance) => {
+  handleInstanceChange = instance => {
     const { type } = this.props;
-    this.setState({
-      currentInstance: instance,
-    }, this.updateChart);
+    this.setState(
+      {
+        currentInstance: instance,
+      },
+      this.updateChart,
+    );
     trackEvent(`${type}_detail`, 'select_data_type', `from_${type}_detail`);
-  }
+  };
 
-  handleMetricChange = async (metric) => {
+  handleMetricChange = async metric => {
     const { metricOptions, type, asyncUpdateBaseLine } = this.props;
     const metricOption = metricOptions.find(option => option.metric === metric);
     trackEvent(`${type}_detail`, 'select_metric_query', `from_${type}_detail`);
     await asyncUpdateBaseLine(`${type}BaseLine`, undefined);
     if (metricOption) {
-      this.setState({
-        currentMetricOption: metricOption
-      }, this.getData);
+      this.setState(
+        {
+          currentMetricOption: metricOption,
+        },
+        this.getData,
+      );
     }
-  }
+  };
 
-  handleBaseLineChange= async (value) => {
+  handleBaseLineChange = async value => {
     const { type, asyncUpdateBaseLine } = this.props;
     const { currentMetricOption } = this.state;
     const { baseLine, unit } = value;
-    await asyncUpdateBaseLine(`${type}BaseLine`, getBaseLineByUnit({ baseLine, unit, valueType:currentMetricOption.valueType }));
+    await asyncUpdateBaseLine(
+      `${type}BaseLine`,
+      getBaseLineByUnit({
+        baseLine,
+        unit,
+        valueType: currentMetricOption.valueType,
+      }),
+    );
     this.modalHandler.hide();
-  }
+  };
 
   renderChart = (chartInstance: Chart) => {
     const { currentMetricOption } = this.state;
@@ -140,38 +168,52 @@ class Detail extends React.Component<IProps, IState> {
       tickInterval: getProperTickInterval(endTimestamps - startTimestamps),
       valueType: currentMetricOption.valueType,
     });
-  }
+  };
 
   updateChart = () => {
     const { dataSource, type, aliasConfig } = this.props;
     const { currentInstance, startTimestamps, endTimestamps } = this.state;
-    const data = getDataByType({ data:dataSource, type:currentInstance, name: 'instance', aliasConfig });
+    const data = getDataByType({
+      data: dataSource,
+      type: currentInstance,
+      name: 'instance',
+      aliasConfig,
+    });
     this.setState({
-      maxNum: getMaxNum(data)
+      maxNum: getMaxNum(data),
     });
     updateDetailChart(this.chartInstance, {
       type,
       tickInterval: getProperTickInterval(endTimestamps - startTimestamps),
     }).changeData(data);
     this.chartInstance.autoFit = true;
-  }
+  };
 
-  handleBaseLineEdit=() => {
-    if(this.modalHandler){
+  handleBaseLineEdit = () => {
+    if (this.modalHandler) {
       this.modalHandler.show();
     }
-  }
+  };
 
-  handleClose=() => {
-    if(this.modalHandler){
+  handleClose = () => {
+    if (this.modalHandler) {
       this.modalHandler.hide();
     }
-  }
-  
+  };
+
   render() {
-    const { maxNum, startTimestamps, endTimestamps, currentInstance, currentMetricOption } = this.state;
-    const { dataSource, metricOptions, loading, aliasConfig, type } = this.props;
-    const instances = uniq(dataSource.map(instance => instance.metric.instance));
+    const {
+      maxNum,
+      startTimestamps,
+      endTimestamps,
+      currentInstance,
+      currentMetricOption,
+    } = this.state;
+    const { dataSource, metricOptions, loading, aliasConfig, type } =
+      this.props;
+    const instances = uniq(
+      dataSource.map(instance => instance.metric.instance),
+    );
     const typeOptions = [
       {
         name: intl.get('device.detail.all'),
@@ -180,7 +222,7 @@ class Detail extends React.Component<IProps, IState> {
       ...instances.map(instance => ({
         name: aliasConfig[instance] || instance,
         value: instance,
-      }))
+      })),
     ];
     const baseLine = this.props[`${type}BaseLine`];
     return (
@@ -200,12 +242,17 @@ class Detail extends React.Component<IProps, IState> {
           onMetricChange={this.handleMetricChange}
           onBaseLineEdit={this.handleBaseLineEdit}
         >
-          <LineChart 
-            isDefaultScale={currentMetricOption.valueType === VALUE_TYPE.percentage} // VALUE_TYPE.percentage has a default Scale
-            yAxisMaximum={maxNum} 
-            tickInterval={getProperTickInterval(endTimestamps - startTimestamps)} 
-            baseLine={baseLine} options={{ padding: [10, 70, 70, 70] }} 
-            renderChart={this.renderChart} 
+          <LineChart
+            isDefaultScale={
+              currentMetricOption.valueType === VALUE_TYPE.percentage
+            } // VALUE_TYPE.percentage has a default Scale
+            yAxisMaximum={maxNum}
+            tickInterval={getProperTickInterval(
+              endTimestamps - startTimestamps,
+            )}
+            baseLine={baseLine}
+            options={{ padding: [10, 70, 70, 70] }}
+            renderChart={this.renderChart}
           />
         </MachineDetail>
         <Modal
@@ -227,4 +274,4 @@ class Detail extends React.Component<IProps, IState> {
   }
 }
 
-export default connect(mapState, mapDispatch)(Detail);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(Detail);
diff --git a/src/pages/MachineDashboard/index.tsx b/src/pages/MachineDashboard/index.tsx
index d478ef42..53aa7f56 100644
--- a/src/pages/MachineDashboard/index.tsx
+++ b/src/pages/MachineDashboard/index.tsx
@@ -12,51 +12,56 @@ import LoadCard from './Cards/LoadCard';
 import NetworkOut from './Cards/NetworkOut';
 import NetworkIn from './Cards/NetworkIn';
 import { SUPPORT_METRICS, VALUE_TYPE } from '@/utils/promQL';
-import { CARD_POLLING_INTERVAL, CARD_RANGE, MACHINE_TYPE, getBaseLineByUnit } from '@/utils/dashboard';
+import {
+  CARD_POLLING_INTERVAL,
+  CARD_RANGE,
+  MACHINE_TYPE,
+  getBaseLineByUnit,
+} from '@/utils/dashboard';
 import { IDispatch, IRootState } from '@/store';
 import BaseLineEdit from '@/components/BaseLineEdit';
 
-const mapDispatch: any = (dispatch: IDispatch) => {
-  return {
-    asyncGetCPUStatByRange: dispatch.machine.asyncGetCPUStatByRange,
-    asyncGetMemoryStatByRange: dispatch.machine.asyncGetMemoryStatByRange,
-    asyncGetMemorySizeStat: dispatch.machine.asyncGetMemorySizeStat,
-    asyncGetDiskSizeStat: dispatch.machine.asyncGetDiskSizeStat,
-    asyncGetDiskStatByRange: dispatch.machine.asyncGetDiskStatByRange,
-    asyncGetLoadByRange: dispatch.machine.asyncGetLoadByRange,
-    asyncGetNetworkStatByRange: dispatch.machine.asyncGetNetworkStatByRange,
-    asyncUpdateBaseLine: (key, value) => dispatch.setting.update({
-      [key]: value
+const mapDispatch: any = (dispatch: IDispatch) => ({
+  asyncGetCPUStatByRange: dispatch.machine.asyncGetCPUStatByRange,
+  asyncGetMemoryStatByRange: dispatch.machine.asyncGetMemoryStatByRange,
+  asyncGetMemorySizeStat: dispatch.machine.asyncGetMemorySizeStat,
+  asyncGetDiskSizeStat: dispatch.machine.asyncGetDiskSizeStat,
+  asyncGetDiskStatByRange: dispatch.machine.asyncGetDiskStatByRange,
+  asyncGetLoadByRange: dispatch.machine.asyncGetLoadByRange,
+  asyncGetNetworkStatByRange: dispatch.machine.asyncGetNetworkStatByRange,
+  asyncUpdateBaseLine: (key, value) =>
+    dispatch.setting.update({
+      [key]: value,
     }),
-  };
-};
-
-const mapState = (state: IRootState) => {
-  return {
-    cpuBaseLine: state.setting.cpuBaseLine,
-    memoryBaseLine: state.setting.memoryBaseLine,
-    networkOutBaseLine: state.setting.networkOutBaseLine,
-    networkInBaseLine: state.setting.networkInBaseLine,
-    loadBaseLine: state.setting.loadBaseLine,
-  };
-};
+});
 
-interface IProps extends ReturnType<typeof mapDispatch>,
-  ReturnType<typeof mapState> {
-}
+const mapState = (state: IRootState) => ({
+  cpuBaseLine: state.setting.cpuBaseLine,
+  memoryBaseLine: state.setting.memoryBaseLine,
+  networkOutBaseLine: state.setting.networkOutBaseLine,
+  networkInBaseLine: state.setting.networkInBaseLine,
+  loadBaseLine: state.setting.loadBaseLine,
+});
+
+interface IProps
+  extends ReturnType<typeof mapDispatch>,
+  ReturnType<typeof mapState> {}
 
 interface IState {
-  editPanelType: string,
+  editPanelType: string;
 }
 class MachineDashboard extends React.Component<IProps, IState> {
   pollingTimer: any;
+
   modalHandler;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
       editPanelType: '',
     };
   }
+
   componentDidMount() {
     this.props.asyncGetMemorySizeStat();
     this.props.asyncGetDiskSizeStat();
@@ -71,24 +76,34 @@ class MachineDashboard extends React.Component<IProps, IState> {
     }
   }
 
-  handleConfigPanel=(editPanelType: string) => {
-    this.setState({
-      editPanelType,
-    }, this.modalHandler.show);
-  }
+  handleConfigPanel = (editPanelType: string) => {
+    this.setState(
+      {
+        editPanelType,
+      },
+      this.modalHandler.show,
+    );
+  };
 
-  handleBaseLineChange= async (value) => {
+  handleBaseLineChange = async value => {
     const { editPanelType } = this.state;
     const { baseLine, unit } = value;
-    await this.props.asyncUpdateBaseLine(`${editPanelType}BaseLine`, getBaseLineByUnit({ baseLine, unit, valueType:this.getValueType(editPanelType) }));
+    await this.props.asyncUpdateBaseLine(
+      `${editPanelType}BaseLine`,
+      getBaseLineByUnit({
+        baseLine,
+        unit,
+        valueType: this.getValueType(editPanelType),
+      }),
+    );
     this.handleClose();
-  }
-  
-  handleClose=() => {
-    if(this.modalHandler){
+  };
+
+  handleClose = () => {
+    if (this.modalHandler) {
       this.modalHandler.hide();
     }
-  }
+  };
 
   getMachineStatus = () => {
     const end = Date.now();
@@ -125,16 +140,16 @@ class MachineDashboard extends React.Component<IProps, IState> {
       metric: SUPPORT_METRICS.network[1].metric,
       inOrOut: 'out',
     });
-  }
+  };
 
   pollingMachineStatus = () => {
     this.pollingTimer = setTimeout(() => {
       this.getMachineStatus();
       this.pollingMachineStatus();
     }, CARD_POLLING_INTERVAL);
-  }
+  };
 
-  getValueType=(type) => {
+  getValueType = type => {
     switch (type) {
       case MACHINE_TYPE.cpu:
       case MACHINE_TYPE.memory:
@@ -147,62 +162,91 @@ class MachineDashboard extends React.Component<IProps, IState> {
       default:
         return VALUE_TYPE.number;
     }
-  }
+  };
 
   render() {
     const { editPanelType } = this.state;
-    return <div className="machine-dashboard">
-      <Row>
-        <Col span={12}>
-          <DashboardCard title={intl.get('device.cpu')} viewPath="/machine/cpu" onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.cpu)}>
-            <CPUCard />
-          </DashboardCard>
-        </Col>
-        <Col span={12}>
-          <DashboardCard title={intl.get('device.memory')} viewPath="/machine/memory" onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.memory)}>
-            <MemoryCard />
-          </DashboardCard>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={12}>
-          <DashboardCard title={intl.get('device.load')} viewPath="/machine/load" onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.load)}>
-            <LoadCard />
-          </DashboardCard>
-        </Col>
-        <Col span={12}>
-          <DashboardCard title={intl.get('device.disk')} viewPath="/machine/disk">
-            <DiskCard />
-          </DashboardCard>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={12}>
-          <DashboardCard title={intl.get('device.networkOut')} viewPath="/machine/network" onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.networkOut)}>
-            <NetworkOut />
-          </DashboardCard>
-        </Col>
-        <Col span={12}>
-          <DashboardCard title={intl.get('device.networkIn')} viewPath="/machine/network" onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.networkIn)}>
-            <NetworkIn />
-          </DashboardCard>
-        </Col>
-      </Row>
-      <Modal
-        title="empty"
-        className="modal-baseLine"
-        width="550px"
-        handlerRef={handler => (this.modalHandler = handler)}
-        footer={null}
-      >
-        <BaseLineEdit
-          valueType={this.getValueType(editPanelType)}
-          baseLine={this.props[`${editPanelType}BaseLine`]}
-          onClose={this.handleClose}
-          onBaseLineChange={this.handleBaseLineChange}
-        />
-      </Modal>
-    </div>;
+    return (
+      <div className="machine-dashboard">
+        <Row>
+          <Col span={12}>
+            <DashboardCard
+              title={intl.get('device.cpu')}
+              viewPath="/machine/cpu"
+              onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.cpu)}
+            >
+              <CPUCard />
+            </DashboardCard>
+          </Col>
+          <Col span={12}>
+            <DashboardCard
+              title={intl.get('device.memory')}
+              viewPath="/machine/memory"
+              onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.memory)}
+            >
+              <MemoryCard />
+            </DashboardCard>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <DashboardCard
+              title={intl.get('device.load')}
+              viewPath="/machine/load"
+              onConfigPanel={() => this.handleConfigPanel(MACHINE_TYPE.load)}
+            >
+              <LoadCard />
+            </DashboardCard>
+          </Col>
+          <Col span={12}>
+            <DashboardCard
+              title={intl.get('device.disk')}
+              viewPath="/machine/disk"
+            >
+              <DiskCard />
+            </DashboardCard>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <DashboardCard
+              title={intl.get('device.networkOut')}
+              viewPath="/machine/network"
+              onConfigPanel={() =>
+                this.handleConfigPanel(MACHINE_TYPE.networkOut)
+              }
+            >
+              <NetworkOut />
+            </DashboardCard>
+          </Col>
+          <Col span={12}>
+            <DashboardCard
+              title={intl.get('device.networkIn')}
+              viewPath="/machine/network"
+              onConfigPanel={() =>
+                this.handleConfigPanel(MACHINE_TYPE.networkIn)
+              }
+            >
+              <NetworkIn />
+            </DashboardCard>
+          </Col>
+        </Row>
+        <Modal
+          title="empty"
+          className="modal-baseLine"
+          width="550px"
+          handlerRef={handler => (this.modalHandler = handler)}
+          footer={null}
+        >
+          <BaseLineEdit
+            valueType={this.getValueType(editPanelType)}
+            baseLine={this.props[`${editPanelType}BaseLine`]}
+            onClose={this.handleClose}
+            onBaseLineChange={this.handleBaseLineChange}
+          />
+        </Modal>
+      </div>
+    );
   }
 }
 
diff --git a/src/pages/MainPage/Header/index.tsx b/src/pages/MainPage/Header/index.tsx
index cba73999..b1c510ce 100644
--- a/src/pages/MainPage/Header/index.tsx
+++ b/src/pages/MainPage/Header/index.tsx
@@ -1,10 +1,6 @@
 import { PageHeader, Radio } from 'antd';
 import React from 'react';
-import {
-  Link,
-  RouteComponentProps,
-  withRouter,
-} from 'react-router-dom';
+import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
 import Icon from '@/components/Icon';
 import { trackPageView } from '@/utils/stat';
 import './index.less';
@@ -12,14 +8,14 @@ import './index.less';
 interface IProps extends RouteComponentProps {
   config: {
     breadcrumb: {
-      path: string,
-      breadcrumbName: string
-    }[],
-    title: string,
-    showBackBtn?: boolean,
-    extra?: any
-  }
-};
+      path: string;
+      breadcrumbName: string;
+    }[];
+    title: string;
+    showBackBtn?: boolean;
+    extra?: any;
+  };
+}
 interface IState {
   collapsed: boolean;
 }
@@ -28,20 +24,20 @@ class Header extends React.PureComponent<IProps, IState> {
   constructor(props: IProps) {
     super(props);
     this.state = {
-      collapsed: false
+      collapsed: false,
     };
   }
 
-  handlePageView = (e) => {
+  handlePageView = e => {
     trackPageView(e.target.value);
     this.props.history.push(e.target.value);
-  }
+  };
 
   handleBack = () => {
     const { breadcrumb } = this.props.config;
     const path = breadcrumb[breadcrumb.length - 2].path;
     this.props.history.push(path);
-  }
+  };
 
   render() {
     const { breadcrumb: routes, title, showBackBtn, extra } = this.props.config;
@@ -54,22 +50,36 @@ class Header extends React.PureComponent<IProps, IState> {
       );
     };
     const { pathname } = this.props.location;
-    const currentPage = extra ? extra.filter(item => item.value === pathname) : null;
+    const currentPage = extra
+      ? extra.filter(item => item.value === pathname)
+      : null;
     return (
       <PageHeader
         className="page-header"
-        title={<>
-          {showBackBtn && <Icon className="btn-return blue" icon="#iconreturn" onClick={this.handleBack} />}
-          <span>{title}</span>
-        </>}
+        title={
+          <>
+            {showBackBtn && (
+              <Icon
+                className="btn-return blue"
+                icon="#iconreturn"
+                onClick={this.handleBack}
+              />
+            )}
+            <span>{title}</span>
+          </>
+        }
         breadcrumb={{ itemRender, routes }}
-        extra={extra && currentPage.length !== 0 ? <Radio.Group
-          options={extra}
-          onChange={this.handlePageView}
-          value={currentPage[0].value}
-          optionType="button"
-          buttonStyle="solid"
-        /> : null}
+        extra={
+          extra && currentPage.length !== 0 ? (
+            <Radio.Group
+              options={extra}
+              onChange={this.handlePageView}
+              value={currentPage[0].value}
+              optionType="button"
+              buttonStyle="solid"
+            />
+          ) : null
+        }
       />
     );
   }
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index ec0c9ddd..00d79d6d 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -21,27 +21,27 @@ import { trackPageView } from '@/utils/stat';
 import { IDispatch, IRootState } from '@/store';
 import './index.less';
 import { LanguageContext } from '@/context';
+
 const { Sider, Content } = Layout;
 const { SubMenu } = Menu;
 
-const mapDispatch: any = (dispatch: IDispatch) => {
-  return {
+const mapDispatch: any = (dispatch: IDispatch) => ({
     asyncLogout: dispatch.app.asyncLogout,
     asyncGetAppInfo: dispatch.app.asyncGetAppInfo,
     asyncGetCustomConfig: dispatch.app.asyncGetCustomConfig,
     asyncGetServiceMetric: dispatch.serviceMetric.asyncGetServiceMetric,
     asyncGetSpaces: dispatch.nebula.asyncGetSpaces
-  };
-};
+  });
 
 const mapState = (state: IRootState) => ({
   appVersion: state.app.version,
   nebluaVersion: state.nebula.version,
 });
 
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch>, 
-  RouteComponentProps{}
+interface IProps
+  extends ReturnType<typeof mapState>,
+    ReturnType<typeof mapDispatch>,
+    RouteComponentProps {}
 
 interface IState {
   collapsed: boolean;
@@ -58,10 +58,10 @@ class MainPage extends React.Component<IProps, IState> {
   componentDidMount() {
     const { appVersion, nebluaVersion } = this.props;
     this.props.asyncGetCustomConfig();
-    if(appVersion === '') {
+    if (appVersion === '') {
       this.props.asyncGetAppInfo();
     }
-    if(nebluaVersion){
+    if (nebluaVersion) {
       this.props.asyncGetSpaces();
       METRIC_PROCESS_TYPES.map(item =>
         this.props.asyncGetServiceMetric({
@@ -70,52 +70,73 @@ class MainPage extends React.Component<IProps, IState> {
         }),
       );
     }
-    
   }
 
-  renderMenu = (list) => {
-    if(list && list.length > 0) {
+  renderMenu = list => {
+    if (list && list.length > 0) {
       return list.map(item => {
-        if(item.children && item.children.length > 0) {
-          return (<SubMenu key={item.key} icon={<Icon className="menu-icon anticon" icon={item.icon} />} title={item.title}>
-            {this.renderMenu(item.children)}
-          </SubMenu>);
+        if (item.children && item.children.length > 0) {
+          return (
+            <SubMenu
+              key={item.key}
+              icon={<Icon className="menu-icon anticon" icon={item.icon} />}
+              title={item.title}
+            >
+              {this.renderMenu(item.children)}
+            </SubMenu>
+          );
         }
-        return (<Menu.Item key={item.key} icon={<Icon className="menu-icon" icon={item.icon} />} title={item.title}>
-          <Link to={item.path || '/'}>{item.title}</Link>
-        </Menu.Item>);
+        return (
+          <Menu.Item
+            key={item.key}
+            icon={<Icon className="menu-icon" icon={item.icon} />}
+            title={item.title}
+          >
+            <Link to={item.path || '/'}>{item.title}</Link>
+          </Menu.Item>
+        );
       });
     }
-  }
+  };
 
   toggleMenu = () => {
     const { collapsed } = this.state;
     this.setState({
-      collapsed: !collapsed
+      collapsed: !collapsed,
     });
-  }
+  };
 
   render() {
     const { collapsed } = this.state;
     const { appVersion } = this.props;
-    const [, activeOpenSubMenu, activeMenu] = this.props.location.pathname.split('/');
-    let activeKey = activeMenu === 'overview' ? `${activeOpenSubMenu}-${activeMenu}` : activeMenu;
+    const [, activeOpenSubMenu, activeMenu] =
+      this.props.location.pathname.split('/');
+    let activeKey =
+      activeMenu === 'overview'
+        ? `${activeOpenSubMenu}-${activeMenu}`
+        : activeMenu;
     const locale = cookies.get('locale');
     const manualHref =
       locale === 'ZH_CN'
         ? 'https://docs.nebula-graph.com.cn/3.0.0/nebula-dashboard/1.what-is-dashboard/'
-        : 'https://docs.nebula-graph.io/3.0.0/nebula-dashboard/1.what-is-dashboard/'; 
-        
-    if(activeKey === undefined) {
+        : 'https://docs.nebula-graph.io/3.0.0/nebula-dashboard/1.what-is-dashboard/';
+
+    if (activeKey === undefined) {
       activeKey = 'machine-overview';
     }
-    if (activeKey === 'version-statistics' || activeKey === 'leader-distribution' || activeKey === 'partition-distribution'){
+    if (
+      activeKey === 'version-statistics' ||
+      activeKey === 'leader-distribution' ||
+      activeKey === 'partition-distribution'
+    ) {
       activeKey = 'service-overview';
     }
     return (
       <Layout className="nebula-stat">
-        <Sider className="nebula-sider" trigger={null} 
-          collapsible={true} 
+        <Sider
+          className="nebula-sider"
+          trigger={null}
+          collapsible={true}
           collapsed={collapsed}
           collapsedWidth={56}
         >
@@ -123,24 +144,28 @@ class MainPage extends React.Component<IProps, IState> {
             <img src={nebulaLogo} className="logo" />
             {!collapsed && <p className="title">Nebula Dashboard</p>}
           </div>
-          <Menu className="sidebar-menu" 
+          <Menu
+            className="sidebar-menu"
             theme="dark"
-            mode="inline" 
+            mode="inline"
             inlineIndent={20}
-            onClick={ item => () => trackPageView(item.key)}
+            onClick={item => () => trackPageView(item.key)}
             defaultOpenKeys={MenuList.map(item => item.key)}
-            selectedKeys={[activeKey]}>
+            selectedKeys={[activeKey]}
+          >
             {this.renderMenu(MenuList)}
           </Menu>
           <div className="sidebar-footer">
             <div className="btn-logout" onClick={this.props.asyncLogout}>
               <Icon className="menu-btn" icon="#iconnav-logout" />
-              {!collapsed && <span className="text-logout">{intl.get('common.logout')}</span>}
+              {!collapsed && (
+                <span className="text-logout">{intl.get('common.logout')}</span>
+              )}
             </div>
             <LanguageContext.Consumer>
               {({ currentLocale, toggleLanguage }) => (
                 <LanguageSelect
-                  mode="dark" 
+                  mode="dark"
                   showIcon={!collapsed}
                   currentLocale={currentLocale}
                   toggleLanguage={toggleLanguage}
@@ -149,44 +174,53 @@ class MainPage extends React.Component<IProps, IState> {
             </LanguageContext.Consumer>
             <div className="row">
               {!collapsed && <span className="version">v {appVersion}</span>}
-              {!collapsed && 
-              <Dropdown 
-                placement="topCenter"
-                overlay={
-                  <Menu>
-                    <Menu.Item>
-                      <a target="_blank" href={manualHref} rel="noreferrer">
-                        {intl.get('common.manual')}
-                      </a>
-                    </Menu.Item>
-                    <Menu.Item>
-                      <a target="_blank" href={intl.get('common.forumLink')} rel="noreferrer">
-                        {intl.get('common.forum')}
-                      </a>
-                    </Menu.Item>
-                  </Menu>
-                }>
-                <span className="help">
-                  {intl.get('common.help')}
-                </span>
-              </Dropdown>}
+              {!collapsed && (
+                <Dropdown
+                  placement="topCenter"
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <a target="_blank" href={manualHref} rel="noreferrer">
+                          {intl.get('common.manual')}
+                        </a>
+                      </Menu.Item>
+                      <Menu.Item>
+                        <a
+                          target="_blank"
+                          href={intl.get('common.forumLink')}
+                          rel="noreferrer"
+                        >
+                          {intl.get('common.forum')}
+                        </a>
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <span className="help">{intl.get('common.help')}</span>
+                </Dropdown>
+              )}
               <div className="btn-collapse" onClick={this.toggleMenu}>
-                {!collapsed && <Icon className="menu-collapse-icon" icon="#iconnav-fold" />}
-                {collapsed && <Icon className="menu-collapse-icon" icon="#iconnav-unfold" />}
+                {!collapsed && (
+                  <Icon className="menu-collapse-icon" icon="#iconnav-fold" />
+                )}
+                {collapsed && (
+                  <Icon className="menu-collapse-icon" icon="#iconnav-unfold" />
+                )}
               </div>
             </div>
           </div>
         </Sider>
         <Layout className="page-content">
           <Switch>
-            {RoutesList.map(route => <Route path={route.path} render={() => {
-              return <>
+            {RoutesList.map(route => (
+              <Route
+                path={route.path}
+                render={() => <>
                 <Header config={route.headerConfig} />
                 <Content className="main-content">
                   <Route component={route.component} />
                 </Content>
-              </>;
-            }} key={route.path} exact={route.exact} />)}
+              </>} key={route.path} exact={route.exact} />)}
             <Redirect from="/*" to="/machine/overview" />
           </Switch>
         </Layout>
diff --git a/src/pages/MainPage/routes.tsx b/src/pages/MainPage/routes.tsx
index 89bb8c91..03022669 100644
--- a/src/pages/MainPage/routes.tsx
+++ b/src/pages/MainPage/routes.tsx
@@ -57,76 +57,91 @@ export const MenuList = [
         title: intl.get('device.network'),
         icon: '#iconnav-net',
         path: '/machine/network',
-      }
-    ]
+      },
+    ],
   },
   {
     key: 'service',
     title: intl.get('common.service'),
     icon: '#iconnav-service',
-    children: [{
-      key: 'service-overview',
-      title: intl.get('device.overview'),
-      icon: '#iconnav-serverdashboard',
-      path: '/service/overview'
-    }, {
-      key: 'graph-metrics',
-      title: 'Graph',
-      icon: '#iconnav-graph',
-      path: '/service/graph-metrics'
-    }, {
-      key: 'meta-metrics',
-      title: 'Meta',
-      icon: '#iconnav-meta',
-      path: '/service/meta-metrics'
-    }, {
-      key: 'storage-metrics',
-      title: 'Storage',
-      icon: '#iconnav-storage',
-      path: '/service/storage-metrics'
-    }]
+    children: [
+      {
+        key: 'service-overview',
+        title: intl.get('device.overview'),
+        icon: '#iconnav-serverdashboard',
+        path: '/service/overview',
+      },
+      {
+        key: 'graph-metrics',
+        title: 'Graph',
+        icon: '#iconnav-graph',
+        path: '/service/graph-metrics',
+      },
+      {
+        key: 'meta-metrics',
+        title: 'Meta',
+        icon: '#iconnav-meta',
+        path: '/service/meta-metrics',
+      },
+      {
+        key: 'storage-metrics',
+        title: 'Storage',
+        icon: '#iconnav-storage',
+        path: '/service/storage-metrics',
+      },
+    ],
   },
   {
     key: 'management',
     title: intl.get('common.serviceManagement'),
     icon: '#iconnav-serverControl',
-    children: [{
-      key: 'service-info',
-      title: intl.get('common.serviceInfo'),
-      icon: '#iconnav-serverInfo',
-      path: '/management/service-info'
-    }, {
-      key: 'partition-info',
-      title: intl.get('common.partitionInfo'),
-      icon: '#iconnav-partitionInfo',
-      path: '/management/partition-info'
-    }, {
-      key: 'config-info',
-      title: intl.get('common.config'),
-      icon: '#iconnav-configuration',
-      path: '/management/config-info'
-    }, {
-      key: 'long-term-task',
-      title: intl.get('common.longTermTask'),
-      icon: '#iconnav-timeConsuming',
-      path: '/management/long-term-task'
-    }]
-  }];
-
+    children: [
+      {
+        key: 'service-info',
+        title: intl.get('common.serviceInfo'),
+        icon: '#iconnav-serverInfo',
+        path: '/management/service-info',
+      },
+      {
+        key: 'partition-info',
+        title: intl.get('common.partitionInfo'),
+        icon: '#iconnav-partitionInfo',
+        path: '/management/partition-info',
+      },
+      {
+        key: 'config-info',
+        title: intl.get('common.config'),
+        icon: '#iconnav-configuration',
+        path: '/management/config-info',
+      },
+      {
+        key: 'long-term-task',
+        title: intl.get('common.longTermTask'),
+        icon: '#iconnav-timeConsuming',
+        path: '/management/long-term-task',
+      },
+    ],
+  },
+];
 
-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'
-}];
+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 = [
   {
@@ -134,305 +149,367 @@ export const RoutesList: any = [
     component: MachineDashboard,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/machine',
-        breadcrumbName: intl.get('common.machine'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/machine',
+          breadcrumbName: intl.get('common.machine'),
+        },
+      ],
       title: intl.get('common.machine'),
-    }
+    },
   },
   {
     path: '/machine/cpu',
     component: CPUDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/machine',
-        breadcrumbName: intl.get('common.machine'),
-      }, {
-        path: '/machine/cpu',
-        breadcrumbName: intl.get('device.cpu'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/machine',
+          breadcrumbName: intl.get('common.machine'),
+        },
+        {
+          path: '/machine/cpu',
+          breadcrumbName: intl.get('device.cpu'),
+        },
+      ],
       showBackBtn: true,
       title: intl.get('device.cpu'),
-    }
+    },
   },
   {
     path: '/machine/disk',
     component: DiskDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/machine',
-        breadcrumbName: intl.get('common.machine'),
-      }, {
-        path: '/machine/disk',
-        breadcrumbName: intl.get('device.disk'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/machine',
+          breadcrumbName: intl.get('common.machine'),
+        },
+        {
+          path: '/machine/disk',
+          breadcrumbName: intl.get('device.disk'),
+        },
+      ],
       showBackBtn: true,
       title: intl.get('device.disk'),
-    }
+    },
   },
   {
     path: '/machine/memory',
     component: MemoryDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/machine',
-        breadcrumbName: intl.get('common.machine'),
-      }, {
-        path: '/machine/memory',
-        breadcrumbName: intl.get('device.memory'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/machine',
+          breadcrumbName: intl.get('common.machine'),
+        },
+        {
+          path: '/machine/memory',
+          breadcrumbName: intl.get('device.memory'),
+        },
+      ],
       showBackBtn: true,
       title: intl.get('device.memory'),
-    }
+    },
   },
   {
     path: '/machine/load',
     component: LoadDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/machine',
-        breadcrumbName: intl.get('common.machine'),
-      }, {
-        path: '/machine/load',
-        breadcrumbName: intl.get('device.load'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/machine',
+          breadcrumbName: intl.get('common.machine'),
+        },
+        {
+          path: '/machine/load',
+          breadcrumbName: intl.get('device.load'),
+        },
+      ],
       showBackBtn: true,
       title: intl.get('device.load'),
-    }
+    },
   },
   {
     path: '/machine/network',
     component: NetworkDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/machine',
-        breadcrumbName: intl.get('common.machine'),
-      }, {
-        path: '/machine/network',
-        breadcrumbName: intl.get('device.network'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/machine',
+          breadcrumbName: intl.get('common.machine'),
+        },
+        {
+          path: '/machine/network',
+          breadcrumbName: intl.get('device.network'),
+        },
+      ],
       showBackBtn: true,
       title: intl.get('device.network'),
-    }
+    },
   },
   {
     path: '/service/overview',
     component: ServiceDashboard,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+      ],
       title: intl.get('common.service'),
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/service/graph-metrics',
     component: ServiceDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }, {
-        path: '/service/graph-metrics',
-        breadcrumbName: 'Graph',
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+        {
+          path: '/service/graph-metrics',
+          breadcrumbName: 'Graph',
+        },
+      ],
       title: 'Graph',
       showBackBtn: true,
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/service/meta-metrics',
     component: ServiceDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }, {
-        path: '/service/meta-metrics',
-        breadcrumbName: 'Meta',
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+        {
+          path: '/service/meta-metrics',
+          breadcrumbName: 'Meta',
+        },
+      ],
       title: 'Meta',
       showBackBtn: true,
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/service/storage-metrics',
     component: ServiceDetail,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }, {
-        path: '/service/storage-metrics',
-        breadcrumbName: 'Storage',
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+        {
+          path: '/service/storage-metrics',
+          breadcrumbName: 'Storage',
+        },
+      ],
       title: 'Storage',
       showBackBtn: true,
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/service/version-statistics',
     component: VersionStatistic,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }, {
-        path: '/service/version-statistics',
-        breadcrumbName: intl.get('service.serviceMetricsDetails'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+        {
+          path: '/service/version-statistics',
+          breadcrumbName: intl.get('service.serviceMetricsDetails'),
+        },
+      ],
       title: intl.get('service.serviceMetricsDetails'),
       showBackBtn: true,
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/service/leader-distribution',
     component: LeaderDistribution,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }, {
-        path: '/service/leader-distribution',
-        breadcrumbName: intl.get('service.serviceMetricsDetails'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+        {
+          path: '/service/leader-distribution',
+          breadcrumbName: intl.get('service.serviceMetricsDetails'),
+        },
+      ],
       title: intl.get('service.serviceMetricsDetails'),
       showBackBtn: true,
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/service/partition-distribution',
     component: PartitionDistribution,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.dashboard'),
-      }, {
-        path: '/service/overview',
-        breadcrumbName: intl.get('common.service'),
-      }, {
-        path: '/service/partition-distribution',
-        breadcrumbName: intl.get('service.serviceMetricsDetails'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.dashboard'),
+        },
+        {
+          path: '/service/overview',
+          breadcrumbName: intl.get('common.service'),
+        },
+        {
+          path: '/service/partition-distribution',
+          breadcrumbName: intl.get('service.serviceMetricsDetails'),
+        },
+      ],
       title: intl.get('service.serviceMetricsDetails'),
       showBackBtn: true,
-      extra: SERVICE_VIEWS
-    }
+      extra: SERVICE_VIEWS,
+    },
   },
   {
     path: '/management/service-info',
     component: ServiceInfo,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.serviceManagement'),
-      }, {
-        path: '/management/service-info',
-        breadcrumbName: intl.get('common.serviceInfo'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.serviceManagement'),
+        },
+        {
+          path: '/management/service-info',
+          breadcrumbName: intl.get('common.serviceInfo'),
+        },
+      ],
       title: intl.get('common.serviceInfo'),
-    }
+    },
   },
   {
     path: '/management/partition-info',
     component: PartitionInfo,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.serviceManagement'),
-      }, {
-        path: '/management/partition-info',
-        breadcrumbName: intl.get('common.partitionInfo'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.serviceManagement'),
+        },
+        {
+          path: '/management/partition-info',
+          breadcrumbName: intl.get('common.partitionInfo'),
+        },
+      ],
       title: intl.get('common.partitionInfo'),
-    }
+    },
   },
   {
     path: '/management/config-info',
     component: ConfigInfo,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.serviceManagement'),
-      }, {
-        path: '/management/config-info',
-        breadcrumbName: intl.get('common.config'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.serviceManagement'),
+        },
+        {
+          path: '/management/config-info',
+          breadcrumbName: intl.get('common.config'),
+        },
+      ],
       title: intl.get('common.config'),
-    }
+    },
   },
   {
     path: '/management/long-term-task',
     component: LongTermTask,
     exact: true,
     headerConfig: {
-      breadcrumb: [{
-        path: '#',
-        breadcrumbName: intl.get('common.serviceManagement'),
-      }, {
-        path: '/management/long-term-task',
-        breadcrumbName: intl.get('common.longTermTask'),
-      }],
+      breadcrumb: [
+        {
+          path: '#',
+          breadcrumbName: intl.get('common.serviceManagement'),
+        },
+        {
+          path: '/management/long-term-task',
+          breadcrumbName: intl.get('common.longTermTask'),
+        },
+      ],
       title: intl.get('common.longTermTask'),
-    }
-  }
-];
\ No newline at end of file
+    },
+  },
+];
diff --git a/src/pages/PartitionDistribution/index.tsx b/src/pages/PartitionDistribution/index.tsx
index 042f385e..3a3ee241 100644
--- a/src/pages/PartitionDistribution/index.tsx
+++ b/src/pages/PartitionDistribution/index.tsx
@@ -11,130 +11,135 @@ import { DashboardSelect, Option } from '@/components/DashboardSelect';
 
 import './index.less';
 
-
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetSpaces: dispatch.nebula.asyncGetSpaces,
-    asyncUseSpaces: dispatch.nebula.asyncUseSpaces,
-    asyncGetParts: dispatch.nebula.asyncGetParts,
-    updateSpace: space =>
-      dispatch.nebula.update({
-        currentSpace: space,
-      }),
-  };
-};
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetSpaces: dispatch.nebula.asyncGetSpaces,
+  asyncUseSpaces: dispatch.nebula.asyncUseSpaces,
+  asyncGetParts: dispatch.nebula.asyncGetParts,
+  updateSpace: space =>
+    dispatch.nebula.update({
+      currentSpace: space,
+    }),
+});
 
 const mapState = (state: IRootState) => ({
   spaces: state.nebula.spaces,
   loading: state.loading.models.nebula,
-  currentSpace:state.nebula.currentSpace,
+  currentSpace: state.nebula.currentSpace,
 });
 
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch> {
-    
-}
+interface IProps
+  extends ReturnType<typeof mapState>,
+  ReturnType<typeof mapDispatch> {}
 
 interface IState {
   data: {
-    name: string,
-    count: number
-  }[]
+    name: string;
+    count: number;
+  }[];
 }
 
 class PartitionDistribution extends React.Component<IProps, IState> {
-
   chartInstance: Chart;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
-      data: []
+      data: [],
     };
   }
 
   async componentDidMount() {
     await this.props.asyncGetSpaces();
     const { currentSpace } = this.props;
-    if(currentSpace){
+    if (currentSpace) {
       await this.getParts();
     }
   }
 
-  handleSpaceChange= async space => {
+  handleSpaceChange = async space => {
     const { code } = await this.props.asyncUseSpaces(space);
-    if(code === 0) {
+    if (code === 0) {
       await this.props.updateSpace(space);
       await this.getParts();
     }
-  }
+  };
 
-  getParts= async () => {
+  getParts = async () => {
     const res = await this.props.asyncGetParts();
     const groupRes = groupBy(res, 'Leader');
     const data = Object.keys(groupRes).map(item => ({
       name: item,
-      count: groupRes[item].length
+      count: groupRes[item].length,
     }));
     this.setState({ data }, this.updateChart);
-  }
+  };
 
   renderChart = (chartInstance: Chart) => {
     this.chartInstance = chartInstance;
     renderPieChartTpl(chartInstance);
-  }
+  };
 
   updateChart = () => {
     const { data } = this.state;
-    if(data.length > 0) {
+    if (data.length > 0) {
       const total = sum(data.map(i => i.count));
       const chartData = data.map(item => ({
         type: item.name,
-        value: round(item.count / total, 2)
+        value: round(item.count / total, 2),
       }));
-      this.chartInstance.data(chartData)
-        .render();
+      this.chartInstance.data(chartData).render();
     }
-  }
-
+  };
 
   render() {
     const { data } = this.state;
     const { loading } = this.props;
-    const columns = [{
-      title: intl.get('common.service'),
-      dataIndex: 'name',
-    }, {
-      title: intl.get('service.partitionNum'),
-      dataIndex: 'count',
-    }];
-    
+    const columns = [
+      {
+        title: intl.get('common.service'),
+        dataIndex: 'name',
+      },
+      {
+        title: intl.get('service.partitionNum'),
+        dataIndex: 'count',
+      },
+    ];
+
     const { currentSpace, spaces } = this.props;
     return (
       <Spin delay={200} spinning={!!loading}>
         <div className="partition-distribution">
           <div className="common-header">
-            <span>{currentSpace} Partition {intl.get('service.distribution')}</span>
+            <span>
+              {currentSpace} Partition {intl.get('service.distribution')}
+            </span>
             <div className="select-space">
               <span>{intl.get('service.spaces')}:</span>
-              <DashboardSelect 
+              <DashboardSelect
                 placeholder={intl.get('service.chooseSpace')}
                 value={currentSpace || undefined}
                 onChange={this.handleSpaceChange}
                 style={{
-                  width: 220 
-                }}>
-                {spaces.map((space:any) => {
-                  return <Option value={space.Name} key={space.Name}>{space.Name}</Option>;
-                })}
+                  width: 220,
+                }}
+              >
+                {spaces.map((space: any) => (
+                  <Option value={space.Name} key={space.Name}>
+                    {space.Name}
+                  </Option>
+                ))}
               </DashboardSelect>
             </div>
           </div>
           <div className="leader-content">
-            <PieChart options={{ height: 286 }} renderChart={this.renderChart} />
+            <PieChart
+              options={{ height: 286 }}
+              renderChart={this.renderChart}
+            />
             <Table
               className="leader-table"
-              columns={columns} 
-              dataSource={data} 
+              columns={columns}
+              dataSource={data}
               pagination={false}
               rowKey="name"
             />
@@ -145,4 +150,4 @@ class PartitionDistribution extends React.Component<IProps, IState> {
   }
 }
 
-export default connect(mapState, mapDispatch)(PartitionDistribution);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(PartitionDistribution);
diff --git a/src/pages/ServiceDashboard/Detail/Panel/index.tsx b/src/pages/ServiceDashboard/Detail/Panel/index.tsx
index 925fb43b..efc61dd3 100644
--- a/src/pages/ServiceDashboard/Detail/Panel/index.tsx
+++ b/src/pages/ServiceDashboard/Detail/Panel/index.tsx
@@ -6,11 +6,11 @@ import { connect } from 'react-redux';
 import { FormInstance } from 'antd/lib/form';
 import { Chart } from '@antv/g2';
 import dayjs from 'dayjs';
-import {  
-  DETAIL_DEFAULT_RANGE, 
-  TIMEOPTIONS, 
-  TIME_INTERVAL_OPTIONS, 
-  getDefaultTimeRange
+import {
+  DETAIL_DEFAULT_RANGE,
+  TIMEOPTIONS,
+  TIME_INTERVAL_OPTIONS,
+  getDefaultTimeRange,
 } from '@/utils/dashboard';
 import { IDispatch, IRootState } from '@/store';
 import { SERVICE_QUERY_PERIOD } from '@/utils/service';
@@ -21,43 +21,44 @@ import { MetricPopover } from '@/components/MetricPopover';
 
 import '../index.less';
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetStatus: dispatch.service.asyncGetStatus,
-  };
-};
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetStatus: dispatch.service.asyncGetStatus,
+});
 
-const mapState = (state: IRootState) => {
-  return {
-    aliasConfig: state.app.aliasConfig,
-    serviceMetric: state.serviceMetric,
-    spaces: state.nebula.spaces
-  };
-};
+const mapState = (state: IRootState) => ({
+  aliasConfig: state.app.aliasConfig,
+  serviceMetric: state.serviceMetric,
+  spaces: state.nebula.spaces,
+});
 
-interface IProps extends ReturnType<typeof mapDispatch>,
-  ReturnType<typeof mapState>, RouteComponentProps {
-  serviceType: string,
+interface IProps
+  extends ReturnType<typeof mapDispatch>,
+  ReturnType<typeof mapState>,
+  RouteComponentProps {
+  serviceType: string;
   metricsValueType: string;
   defaultFormParams: {
-    interval: number,
-    instance: string,
-    metric: string,
-    metricFunction: string,
-    period: number,
-    timeRange: dayjs.Dayjs[]
-  },
+    interval: number;
+    instance: string;
+    metric: string;
+    metricFunction: string;
+    period: number;
+    timeRange: dayjs.Dayjs[];
+  };
   instanceList: string[];
-  onTimeChange?: (interval:number) => void
-  onServiceTypeChange: (type)=> void;
-  onConfigUpdate: (values)=>void; 
-  onMetricsValueTypeChange: (type)=> void;
+  onTimeChange?: (interval: number) => void;
+  onServiceTypeChange: (type) => void;
+  onConfigUpdate: (values) => void;
+  onMetricsValueTypeChange: (type) => void;
 }
 
 class ServicePanel extends React.Component<IProps> {
   chartInstance: Chart;
+
   pollingTimer: any;
+
   modalHandler;
+
   formRef = React.createRef<FormInstance>();
 
   componentDidUpdate() {
@@ -73,11 +74,16 @@ class ServicePanel extends React.Component<IProps> {
     if (onTimeChange) {
       onTimeChange(e.target.value);
     }
-  }
+  };
 
   initialConfig = async () => {
-    const { serviceMetric, serviceType, onServiceTypeChange, onMetricsValueTypeChange } = this.props;
-    if(serviceType) {
+    const {
+      serviceMetric,
+      serviceType,
+      onServiceTypeChange,
+      onMetricsValueTypeChange,
+    } = this.props;
+    if (serviceType) {
       const metricsList = serviceMetric[`${serviceType}d`];
       console.log('metricsList', metricsList);
       const timeRange = getDefaultTimeRange();
@@ -87,101 +93,131 @@ class ServicePanel extends React.Component<IProps> {
         metric: metricsList[0].metric,
         metricFunction: metricsList[0].metricType[0].value,
         period: SERVICE_QUERY_PERIOD,
-        timeRange
+        timeRange,
       };
-      if(this.formRef.current) {
+      if (this.formRef.current) {
         this.formRef.current.setFieldsValue(defaultFormParams);
       }
       await onServiceTypeChange(serviceType);
       await onMetricsValueTypeChange(metricsList[0].valueType);
     }
-  }
+  };
 
-  handleConfigUpdate = (changedValues) => {
+  handleConfigUpdate = changedValues => {
     const { serviceType, serviceMetric } = this.props;
     switch (true) {
       case !!changedValues.interval:
         const timeRange = getDefaultTimeRange(changedValues.interval);
         this.formRef.current!.setFieldsValue({ timeRange });
-        trackEvent(`${serviceType}_detail`, 'select_interval', `from_${serviceType}_detail`);
+        trackEvent(
+          `${serviceType}_detail`,
+          'select_interval',
+          `from_${serviceType}_detail`,
+        );
         break;
       case !!changedValues.timeRange:
         this.formRef.current!.setFieldsValue({ interval: null });
-        trackEvent(`${serviceType}_detail`, 'select_time_range', `from_${serviceType}_detail`);
+        trackEvent(
+          `${serviceType}_detail`,
+          'select_time_range',
+          `from_${serviceType}_detail`,
+        );
         break;
       case !!changedValues.metric:
-        const selectedMetrics = serviceMetric[`${serviceType}d`].filter(item => item.metric === changedValues.metric)[0];
+        const selectedMetrics = serviceMetric[`${serviceType}d`].filter(
+          item => item.metric === changedValues.metric,
+        )[0];
         this.formRef.current!.setFieldsValue({
           metricFunction: selectedMetrics.metricType[0].value,
           space: '',
         });
-        trackEvent(`${serviceType}_detail`, 'select_metric_type', `from_${serviceType}_detail`);
+        trackEvent(
+          `${serviceType}_detail`,
+          'select_metric_type',
+          `from_${serviceType}_detail`,
+        );
         break;
       default:
         break;
     }
     this.props.onConfigUpdate(changedValues);
-  }
+  };
 
   disabledDate(current) {
-    return current < dayjs().subtract(14, 'days').endOf('day') || current > dayjs().endOf('day'); 
+    return (
+      current < dayjs().subtract(14, 'days').endOf('day') ||
+      current > dayjs().endOf('day')
+    );
   }
 
   render() {
-    const { defaultFormParams, serviceMetric, spaces, serviceType, aliasConfig, instanceList, asyncGetStatus } = this.props;
+    const {
+      defaultFormParams,
+      serviceMetric,
+      spaces,
+      serviceType,
+      aliasConfig,
+      instanceList,
+      asyncGetStatus,
+    } = this.props;
     return (
       <Form
         className="metrics-params-form"
         ref={this.formRef}
-        initialValues={defaultFormParams} 
+        initialValues={defaultFormParams}
         onValuesChange={this.handleConfigUpdate}
       >
         <Row>
           <div className="row-left">
             <Form.Item name="interval">
-              <Radio.Group size="small" onChange={this.handleTimeButtonClick as any}>
-                {
-                  TIMEOPTIONS.map(option => (
-                    <Radio.Button key={option.value} value={option.value}>{intl.get(`component.dashboardDetail.${option.name}`)}</Radio.Button>
-                  ))
-                }
+              <Radio.Group
+                size="small"
+                onChange={this.handleTimeButtonClick as any}
+              >
+                {TIMEOPTIONS.map(option => (
+                  <Radio.Button key={option.value} value={option.value}>
+                    {intl.get(`component.dashboardDetail.${option.name}`)}
+                  </Radio.Button>
+                ))}
               </Radio.Group>
             </Form.Item>
             <Form.Item name="timeRange">
-              <DatePicker.RangePicker 
+              <DatePicker.RangePicker
                 disabledDate={this.disabledDate}
-                size="small" 
-                format="YYYY-MM-DD HH:mm" 
-                showTime={true} 
-                allowClear={false} 
+                size="small"
+                format="YYYY-MM-DD HH:mm"
+                showTime={true}
+                allowClear={false}
               />
             </Form.Item>
           </div>
           <Form.Item label={intl.get('service.serviceStatus')}>
-            <StatusPanel type={serviceType} getStatus={asyncGetStatus}/>
+            <StatusPanel type={serviceType} getStatus={asyncGetStatus} />
           </Form.Item>
         </Row>
         <Row className="metric-filter">
           <Form.Item label={intl.get('service.instance')} name="instance">
             <DashboardSelect>
-              <Option key="all" value="all">all</Option>
-              {
-                instanceList.map(value => (
-                  <Option key={value} value={value}>{aliasConfig[value] || value}</Option>
-                ))
-              }
+              <Option key="all" value="all">
+                all
+              </Option>
+              {instanceList.map(value => (
+                <Option key={value} value={value}>
+                  {aliasConfig[value] || value}
+                </Option>
+              ))}
             </DashboardSelect>
           </Form.Item>
           <Form.Item label={intl.get('service.metric')} name="metric">
             <DashboardSelect>
-              {
-                serviceMetric[`${serviceType}d`].map(metric => (
-                  <Option key={metric.metric} value={metric.metric}>{metric.metric}</Option>
-                ))
-              }
+              {serviceMetric[`${serviceType}d`].map(metric => (
+                <Option key={metric.metric} value={metric.metric}>
+                  {metric.metric}
+                </Option>
+              ))}
             </DashboardSelect>
           </Form.Item>
-          <MetricPopover list={serviceMetric[`${serviceType}d`]}/>
+          <MetricPopover list={serviceMetric[`${serviceType}d`]} />
           <Form.Item
             noStyle={true}
             shouldUpdate={(prevValues, currentValues) =>
@@ -212,33 +248,43 @@ class ServicePanel extends React.Component<IProps> {
           </Form.Item>
           <Form.Item
             noStyle={true}
-            shouldUpdate={(prevValues, currentValues) => prevValues.metric !== currentValues.metric}
+            shouldUpdate={(prevValues, currentValues) =>
+              prevValues.metric !== currentValues.metric
+            }
           >
             {({ getFieldValue }) => {
               const metric = getFieldValue('metric');
-              const typeList = serviceMetric[`${serviceType}d`].filter(item => item.metric === metric)[0]?.metricType;
-              return metric ? <Form.Item label={intl.get('service.metricParams')} name="metricFunction">
-                <DashboardSelect>
-                  {
-                    typeList?.map(params => (
-                      <Option key={params.key} value={params.value}>{params.key}</Option>
-                    ))
-                  }
-                </DashboardSelect>
-              </Form.Item> : null;}
-            }
+              const typeList = serviceMetric[`${serviceType}d`].filter(
+                item => item.metric === metric,
+              )[0]?.metricType;
+              return metric ? (
+                <Form.Item
+                  label={intl.get('service.metricParams')}
+                  name="metricFunction"
+                >
+                  <DashboardSelect>
+                    {typeList?.map(params => (
+                      <Option key={params.key} value={params.value}>
+                        {params.key}
+                      </Option>
+                    ))}
+                  </DashboardSelect>
+                </Form.Item>
+              ) : null;
+            }}
           </Form.Item>
           <Form.Item label={intl.get('service.period')} name="period">
             <DashboardSelect>
-              {
-                TIME_INTERVAL_OPTIONS.map(value => (
-                  <Option key={value} value={value}>{value}</Option>
-                ))
-              }
+              {TIME_INTERVAL_OPTIONS.map(value => (
+                <Option key={value} value={value}>
+                  {value}
+                </Option>
+              ))}
             </DashboardSelect>
           </Form.Item>
         </Row>
-      </Form>);
+      </Form>
+    );
   }
 }
-export default connect(mapState, mapDispatch)(withRouter(ServicePanel));
\ No newline at end of file
+export default connect(mapState, mapDispatch)(withRouter(ServicePanel));
diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx
index ee8acc3c..9f068fca 100644
--- a/src/pages/ServiceDashboard/Detail/index.tsx
+++ b/src/pages/ServiceDashboard/Detail/index.tsx
@@ -7,15 +7,15 @@ import { FormInstance } from 'antd/lib/form';
 import { Chart } from '@antv/g2';
 import dayjs from 'dayjs';
 import Panel from './Panel';
-import { 
+import {
   CARD_POLLING_INTERVAL,
-  DETAIL_DEFAULT_RANGE, 
-  NEED_ADD_SUM_QUERYS, 
+  DETAIL_DEFAULT_RANGE,
+  NEED_ADD_SUM_QUERYS,
   getBaseLineByUnit,
-  getDataByType, 
+  getDataByType,
   getDefaultTimeRange,
   getMaxNum,
-  getProperTickInterval
+  getProperTickInterval,
 } from '@/utils/dashboard';
 import { IDispatch, IRootState } from '@/store';
 import { VALUE_TYPE } from '@/utils/promQL';
@@ -29,61 +29,64 @@ import Icon from '@/components/Icon';
 import Modal from '@/components/Modal';
 import BaseLineEdit from '@/components/BaseLineEdit';
 
-
 import './index.less';
 
 interface IState {
-  serviceType: string,
+  serviceType: string;
   metricsValueType: VALUE_TYPE;
-  instanceList: string[],
-  data: IStatRangeItem[],
-  maxNum: number,
-  totalData: IStatRangeItem[],
-  baseLine: number|undefined,
-  interval: number,
-  instance: string,
-  metricSpace: string,
-  metric: string,
-  metricFunction: string,
-  period: number,
-  timeRange: dayjs.Dayjs[]
+  instanceList: string[];
+  data: IStatRangeItem[];
+  maxNum: number;
+  totalData: IStatRangeItem[];
+  baseLine: number | undefined;
+  interval: number;
+  instance: string;
+  metricSpace: string;
+  metric: string;
+  metricFunction: string;
+  period: number;
+  timeRange: dayjs.Dayjs[];
 }
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetStatus: dispatch.service.asyncGetStatus,
-    asyncGetMetricsData: dispatch.service.asyncGetMetricsData,
-    asyncGetMetricsSumData: dispatch.service.asyncGetMetricsSumData,
-    asyncUpdateBaseLine: (key, value) => dispatch.machine.update({
-      [key]: value
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetStatus: dispatch.service.asyncGetStatus,
+  asyncGetMetricsData: dispatch.service.asyncGetMetricsData,
+  asyncGetMetricsSumData: dispatch.service.asyncGetMetricsSumData,
+  asyncUpdateBaseLine: (key, value) =>
+    dispatch.machine.update({
+      [key]: value,
     }),
-  };
-};
+});
 
-const mapState = (state: IRootState) => {
-  return {
-    loading: state.loading.models.service,
-    aliasConfig: state.app.aliasConfig,
-    serviceMetric: state.serviceMetric,
-  };
-};
+const mapState = (state: IRootState) => ({
+  loading: state.loading.models.service,
+  aliasConfig: state.app.aliasConfig,
+  serviceMetric: state.serviceMetric,
+});
 
-interface IProps extends ReturnType<typeof mapDispatch>,
-  ReturnType<typeof mapState>, RouteComponentProps {}
+interface IProps
+  extends ReturnType<typeof mapDispatch>,
+  ReturnType<typeof mapState>,
+  RouteComponentProps {}
 
 class ServiceDetail extends React.Component<IProps, IState> {
   chartInstance: Chart;
+
   pollingTimer: any;
+
   modalHandler;
+
   formRef = React.createRef<FormInstance>();
 
   constructor(props: IProps) {
     super(props);
-    const { location: { pathname } } = this.props;
+    const {
+      location: { pathname },
+    } = this.props;
     const regx = /(\w+)-metrics/g;
     const match = regx.exec(pathname);
     let serviceType = '';
-    if(match){
+    if (match) {
       serviceType = match[1] || 'graph';
     }
     this.state = {
@@ -126,23 +129,22 @@ class ServiceDetail extends React.Component<IProps, IState> {
     const { serviceType } = this.state;
     if (
       nextProps.serviceMetric[`${serviceType}d`] !==
-        serviceMetric[`${serviceType}d`]
+      serviceMetric[`${serviceType}d`]
     ) {
       this.setState(
         {
           metric: nextProps.serviceMetric[`${serviceType}d`][0]?.metric,
           metricFunction:
-              nextProps.serviceMetric[`${serviceType}d`][0]?.metricType?.[0]
-                .value,
+            nextProps.serviceMetric[`${serviceType}d`][0]?.metricType?.[0]
+              .value,
           metricsValueType:
-              nextProps.serviceMetric[`${serviceType}d`][0]?.valueType,
+            nextProps.serviceMetric[`${serviceType}d`][0]?.valueType,
         },
         this.pollingData,
       );
     }
   }
 
-
   componentWillUnmount() {
     this.clearPolling();
   }
@@ -150,17 +152,18 @@ class ServiceDetail extends React.Component<IProps, IState> {
   pollingData = async () => {
     await this.asyncGetMetricsData();
     this.pollingTimer = setTimeout(this.pollingData, CARD_POLLING_INTERVAL);
-  }
+  };
 
   clearPolling = () => {
     if (this.pollingTimer) {
       clearTimeout(this.pollingTimer);
     }
-  }
+  };
+
   resetPollingData = () => {
     this.clearPolling();
     this.pollingData();
-  }
+  };
 
   asyncGetMetricsData = async () => {
     const { timeRange, metric, metricFunction, period } = this.state;
@@ -168,37 +171,42 @@ class ServiceDetail extends React.Component<IProps, IState> {
     let data = await this.props.asyncGetMetricsData({
       query: metricFunction + period,
       start: startTime,
-      end: endTime
+      end: endTime,
     });
-    if(NEED_ADD_SUM_QUERYS.includes(metric)){
+    if (NEED_ADD_SUM_QUERYS.includes(metric)) {
       const totalData = await this.props.asyncGetMetricsSumData({
         query: metricFunction + period,
         start: startTime,
-        end: endTime
+        end: endTime,
       });
       data = data.concat(totalData);
     }
     const instanceList = data.map(item => item.metric.instanceName);
     this.setState({
       data,
-      instanceList
+      instanceList,
     });
     this.updateChart();
-  }
+  };
 
   updateChart = () => {
     const { timeRange, instance, serviceType, data } = this.state;
     const { aliasConfig } = this.props;
     const [startTime, endTime] = timeRange as any;
-    const _data = getDataByType({ data, type: instance, name: 'instanceName', aliasConfig });
+    const _data = getDataByType({
+      data,
+      type: instance,
+      name: 'instanceName',
+      aliasConfig,
+    });
     this.setState({
-      maxNum: getMaxNum(_data)
+      maxNum: getMaxNum(_data),
     });
     updateDetailChart(this.chartInstance, {
       type: serviceType,
       tickInterval: getProperTickInterval(endTime - startTime),
     }).changeData(_data);
-  }
+  };
 
   renderChart = (chartInstance: Chart) => {
     const { timeRange, metricsValueType } = this.state;
@@ -206,77 +214,96 @@ class ServiceDetail extends React.Component<IProps, IState> {
     this.chartInstance = chartInstance;
     configDetailChart(chartInstance, {
       tickInterval: getProperTickInterval(endTime - startTime),
-      valueType: metricsValueType
+      valueType: metricsValueType,
     });
-  }
+  };
 
-  handleServiceTypeChange=(serviceType) => {
-    this.setState({
-      serviceType
-    }, this.pollingData);
-  }
+  handleServiceTypeChange = serviceType => {
+    this.setState(
+      {
+        serviceType,
+      },
+      this.pollingData,
+    );
+  };
 
-  handleMetricsValueTypeChange=(metricsValueType) => {
+  handleMetricsValueTypeChange = metricsValueType => {
     this.setState({
-      metricsValueType
+      metricsValueType,
     });
-  }
+  };
 
-  handleIntervalChange = (interval) => {
-    this.setState({
-      timeRange:getDefaultTimeRange(interval),
-    }, this.asyncGetMetricsData);
-  }
+  handleIntervalChange = interval => {
+    this.setState(
+      {
+        timeRange: getDefaultTimeRange(interval),
+      },
+      this.asyncGetMetricsData,
+    );
+  };
 
-  handleConfigUpdate = (changedValues) => {
+  handleConfigUpdate = changedValues => {
     const { serviceMetric } = this.props;
     const { serviceType } = this.state;
-    if(changedValues.metric){
-      const selectedMetrics = serviceMetric[`${serviceType}d`].filter(item => item.metric === changedValues.metric)[0];
-      this.setState({ 
-        metric: changedValues.metric,
-        metricsValueType: selectedMetrics.valueType,
-        metricFunction: selectedMetrics.metricType[0].value,
-        baseLine: undefined
-      }, this.resetPollingData);
-    }else{
+    if (changedValues.metric) {
+      const selectedMetrics = serviceMetric[`${serviceType}d`].filter(
+        item => item.metric === changedValues.metric,
+      )[0];
+      this.setState(
+        {
+          metric: changedValues.metric,
+          metricsValueType: selectedMetrics.valueType,
+          metricFunction: selectedMetrics.metricType[0].value,
+          baseLine: undefined,
+        },
+        this.resetPollingData,
+      );
+    } else {
       this.setState(changedValues, this.resetPollingData);
     }
-  }
+  };
 
-  handleBaseLineEdit=() => {
-    if(this.modalHandler){
+  handleBaseLineEdit = () => {
+    if (this.modalHandler) {
       this.modalHandler.show();
     }
-  }
+  };
 
-  handleClose=() => {
-    if(this.modalHandler){
+  handleClose = () => {
+    if (this.modalHandler) {
       this.modalHandler.hide();
     }
-  }
+  };
 
-  handleBaseLineChange= (value ) => {
+  handleBaseLineChange = value => {
     const { baseLine, unit } = value;
     const { metricsValueType } = this.state;
-    this.setState({
-      baseLine: getBaseLineByUnit({ baseLine, unit, valueType: metricsValueType }),
-    }, this.handleClose);
-  }
+    this.setState(
+      {
+        baseLine: getBaseLineByUnit({
+          baseLine,
+          unit,
+          valueType: metricsValueType,
+        }),
+      },
+      this.handleClose,
+    );
+  };
+
   render() {
-    const { 
-      metricsValueType, 
-      interval, 
-      instance, 
+    const {
+      metricsValueType,
+      interval,
+      instance,
       metric,
-      maxNum, 
-      metricSpace, 
-      metricFunction, 
-      period, 
-      timeRange, 
-      serviceType, 
-      baseLine, 
-      instanceList 
+      maxNum,
+      metricSpace,
+      metricFunction,
+      period,
+      timeRange,
+      serviceType,
+      baseLine,
+      instanceList,
     } = this.state;
     const { loading } = this.props;
     const defaultFormParams = {
@@ -288,44 +315,54 @@ class ServiceDetail extends React.Component<IProps, IState> {
       period,
       timeRange,
     };
-    return (<div className="service-metrics">
-      <ServiceHeader 
-        title={`${serviceType} ${intl.get('common.metric')}`} 
-        icon={`#iconnav-${serviceType}`}
-      />
-      <div className="container">
-        <Panel 
-          instanceList={instanceList}
-          serviceType={serviceType}
-          defaultFormParams={defaultFormParams}
-          onTimeChange={this.handleIntervalChange}
-          onServiceTypeChange={this.handleServiceTypeChange}
-          onMetricsValueTypeChange={this.handleMetricsValueTypeChange}
-          onConfigUpdate={this.handleConfigUpdate} 
+    return (
+      <div className="service-metrics">
+        <ServiceHeader
+          title={`${serviceType} ${intl.get('common.metric')}`}
+          icon={`#iconnav-${serviceType}`}
         />
-        <div className="btn-icon-with-desc blue" onClick={this.handleBaseLineEdit} >
-          <Icon icon="#iconSetup" />
-          <span>{intl.get('common.baseLine')}</span>
-        </div>
-        <Spin spinning={!!loading} wrapperClassName="nebula-chart">
-          <LineChart yAxisMaximum={maxNum} baseLine={baseLine} renderChart={this.renderChart} options={{ padding: [20, 20, 60, 50] }} />
-        </Spin >
-        <Modal
-          title="empty"
-          className="service-modal"
-          width="550px"
-          handlerRef={handler => (this.modalHandler = handler)}
-          footer={null}
-        >
-          <BaseLineEdit
-            valueType={metricsValueType}
-            baseLine={baseLine || 0}
-            onClose={this.handleClose}
-            onBaseLineChange={this.handleBaseLineChange}
+        <div className="container">
+          <Panel
+            instanceList={instanceList}
+            serviceType={serviceType}
+            defaultFormParams={defaultFormParams}
+            onTimeChange={this.handleIntervalChange}
+            onServiceTypeChange={this.handleServiceTypeChange}
+            onMetricsValueTypeChange={this.handleMetricsValueTypeChange}
+            onConfigUpdate={this.handleConfigUpdate}
           />
-        </Modal>
+          <div
+            className="btn-icon-with-desc blue"
+            onClick={this.handleBaseLineEdit}
+          >
+            <Icon icon="#iconSetup" />
+            <span>{intl.get('common.baseLine')}</span>
+          </div>
+          <Spin spinning={!!loading} wrapperClassName="nebula-chart">
+            <LineChart
+              yAxisMaximum={maxNum}
+              baseLine={baseLine}
+              renderChart={this.renderChart}
+              options={{ padding: [20, 20, 60, 50] }}
+            />
+          </Spin>
+          <Modal
+            title="empty"
+            className="service-modal"
+            width="550px"
+            handlerRef={handler => (this.modalHandler = handler)}
+            footer={null}
+          >
+            <BaseLineEdit
+              valueType={metricsValueType}
+              baseLine={baseLine || 0}
+              onClose={this.handleClose}
+              onBaseLineChange={this.handleBaseLineChange}
+            />
+          </Modal>
+        </div>
       </div>
-    </div>);
+    );
   }
 }
-export default connect(mapState, mapDispatch)(withRouter(ServiceDetail));
\ No newline at end of file
+export default connect(mapState, mapDispatch)(withRouter(ServiceDetail));
diff --git a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx
index aaa00e43..24003b3f 100644
--- a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx
+++ b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx
@@ -6,25 +6,25 @@ import { Popover } from 'antd';
 import Icon from '@/components/Icon';
 import { IServicePanelConfig, IStatRangeItem } from '@/utils/interface';
 import { getDataByType } from '@/utils/dashboard';
-import { SERVICE_DEFAULT_RANGE, SERVICE_POLLING_INTERVAL } from '@/utils/service';
+import {
+  SERVICE_DEFAULT_RANGE,
+  SERVICE_POLLING_INTERVAL,
+} from '@/utils/service';
 import Card from '@/components/Service/ServiceCard/Card';
 import { IDispatch, IRootState } from '@/store';
 
 import './index.less';
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetMetricsData: dispatch.service.asyncGetMetricsData,
-  };
-};
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetMetricsData: dispatch.service.asyncGetMetricsData,
+});
 
-const mapState = (state: IRootState) => {
-  return {
-    aliasConfig: state.app.aliasConfig,
-  };
-};
+const mapState = (state: IRootState) => ({
+  aliasConfig: state.app.aliasConfig,
+});
 
-interface IProps extends ReturnType<typeof mapDispatch>,
+interface IProps
+  extends ReturnType<typeof mapDispatch>,
   ReturnType<typeof mapState> {
   onConfigPanel: () => void;
   config: IServicePanelConfig;
@@ -32,10 +32,11 @@ interface IProps extends ReturnType<typeof mapDispatch>,
 }
 
 interface IState {
-  data: IStatRangeItem[],
+  data: IStatRangeItem[];
 }
 class CustomServiceQueryPanel extends React.Component<IProps, IState> {
   pollingTimer: any;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
@@ -53,8 +54,8 @@ class CustomServiceQueryPanel extends React.Component<IProps, IState> {
     }
   }
 
-  componentDidUpdate( prevProps) {
-    if(!isEqual(prevProps.config, this.props.config)) {
+  componentDidUpdate(prevProps) {
+    if (!isEqual(prevProps.config, this.props.config)) {
       this.resetPollingData();
     }
   }
@@ -64,7 +65,7 @@ class CustomServiceQueryPanel extends React.Component<IProps, IState> {
       clearTimeout(this.pollingTimer);
     }
     this.pollingData();
-  }
+  };
 
   getMetricsData = async () => {
     const { config } = this.props;
@@ -73,38 +74,66 @@ class CustomServiceQueryPanel extends React.Component<IProps, IState> {
     const data = await this.props.asyncGetMetricsData({
       query: metricFunction + metricPeriod, // EXPLAIN: query like nebula_graphd_num_queries_rate_600
       start: end - SERVICE_DEFAULT_RANGE,
-      end
+      end,
     });
     this.setState({
-      data
+      data,
     });
-  }
+  };
 
   pollingData = () => {
     this.getMetricsData();
     this.pollingTimer = setTimeout(this.pollingData, SERVICE_POLLING_INTERVAL);
-  }
+  };
 
   render() {
     const { data } = this.state;
-    const { config: { metric, period, metricType, baseLine }, aliasConfig } = this.props;
-    return <div className="service-card">
-      <div className="header">
-        <Popover placement="bottomLeft" content={intl.get(`metric_description.${metric}`)}>{metric}</Popover>
-        <div>
-          <span>{intl.get('service.period')}: <span>{period}</span></span> 
-          <span>{intl.get('service.metricParams')}: <span>{metricType}</span></span>
-          <div className="btn-icon-with-desc blue" onClick={this.props.onConfigPanel} >
-            <Icon icon="#iconSetup" />
-            <span>{intl.get('common.set')}</span>
+    const {
+      config: { metric, period, metricType, baseLine },
+      aliasConfig,
+    } = this.props;
+    return (
+      <div className="service-card">
+        <div className="header">
+          <Popover
+            placement="bottomLeft"
+            content={intl.get(`metric_description.${metric}`)}
+          >
+            {metric}
+          </Popover>
+          <div>
+            <span>
+              {intl.get('service.period')}: <span>{period}</span>
+            </span>
+            <span>
+              {intl.get('service.metricParams')}: <span>{metricType}</span>
+            </span>
+            <div
+              className="btn-icon-with-desc blue"
+              onClick={this.props.onConfigPanel}
+            >
+              <Icon icon="#iconSetup" />
+              <span>{intl.get('common.set')}</span>
+            </div>
           </div>
         </div>
+        <div className="content">
+          {data.length > 0 && (
+            <Card
+              baseLine={baseLine}
+              data={getDataByType({
+                data,
+                type: 'all',
+                name: 'instanceName',
+                aliasConfig,
+              })}
+              loading={false}
+            />
+          )}
+        </div>
       </div>
-      <div className="content">
-        {data.length > 0 && <Card baseLine={baseLine} data={getDataByType({ data, type:'all', name:'instanceName', aliasConfig })} loading={false}/>}
-      </div>
-    </div>;
+    );
   }
 }
 
-export default connect(mapState, mapDispatch)(CustomServiceQueryPanel);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(CustomServiceQueryPanel);
diff --git a/src/pages/ServiceDashboard/ServiceOverview/index.tsx b/src/pages/ServiceDashboard/ServiceOverview/index.tsx
index d681c293..4831e801 100644
--- a/src/pages/ServiceDashboard/ServiceOverview/index.tsx
+++ b/src/pages/ServiceDashboard/ServiceOverview/index.tsx
@@ -14,9 +14,9 @@ import './index.less';
 interface IProps extends RouteComponentProps {
   serviceType: string;
   icon: string;
-  configs: IServicePanelConfig[],
-  onConfigPanel: (serviceType: string, index: number)=>void;
-  getStatus: (payload)=> void;
+  configs: IServicePanelConfig[];
+  onConfigPanel: (serviceType: string, index: number) => void;
+  getStatus: (payload) => void;
 }
 
 class ServiceOverview extends React.PureComponent<IProps> {
@@ -24,38 +24,34 @@ class ServiceOverview extends React.PureComponent<IProps> {
     const { serviceType } = this.props;
     trackPageView(`${serviceType}_metrics`);
     this.props.history.push(`/service/${serviceType}-metrics`);
-  }
+  };
 
   render() {
-    const { 
-      serviceType, 
-      icon, 
-      configs,
-      getStatus,
-    } = this.props;
+    const { serviceType, icon, configs, getStatus } = this.props;
     return (
       <div className="service-table-item">
-        <ServiceHeader 
-          title={`${serviceType} Service`}
-          icon={icon}
-        >
-          <StatusPanel type={serviceType} getStatus={getStatus}/>
+        <ServiceHeader title={`${serviceType} Service`} icon={icon}>
+          <StatusPanel type={serviceType} getStatus={getStatus} />
           <div className="btn-icon-with-desc blue" onClick={this.handleView}>
             <Icon icon="#iconwatch" />
             <span>{intl.get('common.view')}</span>
           </div>
         </ServiceHeader>
         <Row>
-          {configs.map((config, index) => <Col span={12} key={index}>
-            <CustomServiceQueryPanel 
-              config={config}
-              onConfigPanel={() => this.props.onConfigPanel(serviceType, index)}
-            />
-          </Col>)}
+          {configs.map((config, index) => (
+            <Col span={12} key={index}>
+              <CustomServiceQueryPanel
+                config={config}
+                onConfigPanel={() =>
+                  this.props.onConfigPanel(serviceType, index)
+                }
+              />
+            </Col>
+          ))}
         </Row>
       </div>
     );
   }
 }
 
-export default withRouter(ServiceOverview);
\ No newline at end of file
+export default withRouter(ServiceOverview);
diff --git a/src/pages/ServiceDashboard/index.tsx b/src/pages/ServiceDashboard/index.tsx
index 2fdca930..8d2bdcfc 100644
--- a/src/pages/ServiceDashboard/index.tsx
+++ b/src/pages/ServiceDashboard/index.tsx
@@ -8,35 +8,33 @@ import ServiceCardEdit from '@/components/Service/ServiceCardEdit';
 import { METRIC_SERVICE_TYPES } from '@/utils/metric';
 import './index.less';
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetStatus: dispatch.service.asyncGetStatus,
-    updatePanelConfig: (values) => dispatch.service.update({
-      panelConfig: values
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetStatus: dispatch.service.asyncGetStatus,
+  updatePanelConfig: values =>
+    dispatch.service.update({
+      panelConfig: values,
     }),
-  };
-};
-
-const mapState = (state: IRootState) => {
-  return {
-    panelConfig: state.service.panelConfig,
-    aliasConfig: state.app.aliasConfig,
-    serviceMetric: state.serviceMetric
-  };
-};
+});
 
-interface IProps extends ReturnType<typeof mapDispatch>,
-  ReturnType<typeof mapState> {
+const mapState = (state: IRootState) => ({
+  panelConfig: state.service.panelConfig,
+  aliasConfig: state.app.aliasConfig,
+  serviceMetric: state.serviceMetric,
+});
 
-}
+interface IProps
+  extends ReturnType<typeof mapDispatch>,
+  ReturnType<typeof mapState> {}
 
 interface IState {
-  editPanelType: string,
-  editPanelIndex: number,
+  editPanelType: string;
+  editPanelIndex: number;
 }
 class ServiceDashboard extends React.Component<IProps, IState> {
   pollingTimer: any;
+
   modalHandler;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
@@ -45,38 +43,39 @@ class ServiceDashboard extends React.Component<IProps, IState> {
     };
   }
 
-  handleConfigPanel=(serviceType: string, index: number) => {
-    this.setState({
-      editPanelType: serviceType,
-      editPanelIndex: index
-    }, this.modalHandler.show);
-  }
+  handleConfigPanel = (serviceType: string, index: number) => {
+    this.setState(
+      {
+        editPanelType: serviceType,
+        editPanelIndex: index,
+      },
+      this.modalHandler.show,
+    );
+  };
 
   handleModalClose = () => {
-    if(this.modalHandler) {
+    if (this.modalHandler) {
       this.modalHandler.hide();
     }
-  }
-  
+  };
+
   render() {
     const { editPanelType, editPanelIndex } = this.state;
-    const { 
-      panelConfig,
-      serviceMetric,
-      updatePanelConfig,
-      asyncGetStatus,
-    } = this.props;
+    const { panelConfig, serviceMetric, updatePanelConfig, asyncGetStatus } =
+      this.props;
     // TODO: Use hooks to resolve situations where render is jamming
     return (
       <div className="service-table">
-        {METRIC_SERVICE_TYPES.map(type => <ServiceOverview 
-          key={type}
-          serviceType={type}
-          icon={`#iconnav-${type}`}
-          configs={panelConfig[type]}
-          getStatus={asyncGetStatus}
-          onConfigPanel={this.handleConfigPanel}
-        />)}
+        {METRIC_SERVICE_TYPES.map(type => (
+          <ServiceOverview
+            key={type}
+            serviceType={type}
+            icon={`#iconnav-${type}`}
+            configs={panelConfig[type]}
+            getStatus={asyncGetStatus}
+            onConfigPanel={this.handleConfigPanel}
+          />
+        ))}
         <Modal
           className="modal-show-selected"
           width="750px"
@@ -84,7 +83,7 @@ class ServiceDashboard extends React.Component<IProps, IState> {
           title={intl.get('service.queryCondition')}
           footer={null}
         >
-          <ServiceCardEdit 
+          <ServiceCardEdit
             serviceMetric={serviceMetric}
             editType={editPanelType}
             editIndex={editPanelIndex}
@@ -93,7 +92,8 @@ class ServiceDashboard extends React.Component<IProps, IState> {
             onPanelConfigUpdate={updatePanelConfig}
           />
         </Modal>
-      </div>);
+      </div>
+    );
   }
 }
 export default connect(mapState, mapDispatch)(ServiceDashboard);
diff --git a/src/pages/ServiceManage/ConfigInfo/index.tsx b/src/pages/ServiceManage/ConfigInfo/index.tsx
index 2967971a..0e81520b 100644
--- a/src/pages/ServiceManage/ConfigInfo/index.tsx
+++ b/src/pages/ServiceManage/ConfigInfo/index.tsx
@@ -16,45 +16,71 @@ const mapState = (state: IRootState) => ({
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetServiceConfigs: dispatch.nebula.asyncGetServiceConfigs,
 });
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch>{
-}
+interface IProps
+  extends ReturnType<typeof mapState>,
+  ReturnType<typeof mapDispatch> {}
 class ConfigInfo extends React.Component<IProps> {
-
-  componentDidMount(){
+  componentDidMount() {
     this.props.asyncGetServiceConfigs();
   }
 
-  handleModuleChange= e => {
+  handleModuleChange = e => {
     trackEvent('service-info', 'click_module');
     this.props.asyncGetServiceConfigs(e.target.value);
-  }
+  };
 
   render() {
     const { configs, loading } = this.props;
     const columns = [
       {
-        title: <TitleInstruction title="Module" description={intl.get('description.module')} />,
+        title: (
+          <TitleInstruction
+            title="Module"
+            description={intl.get('description.module')}
+          />
+        ),
         dataIndex: 'module',
-        render: module => <span className={`module ${module.toLowerCase()}`}>{module}</span>,
+        render: module => (
+          <span className={`module ${module.toLowerCase()}`}>{module}</span>
+        ),
       },
       {
-        title: <TitleInstruction title="Name" description={intl.get('description.moduleName')} />,
+        title: (
+          <TitleInstruction
+            title="Name"
+            description={intl.get('description.moduleName')}
+          />
+        ),
         dataIndex: 'name',
       },
       {
-        title: <TitleInstruction title="Type" description={intl.get('description.moduleType')} />,
+        title: (
+          <TitleInstruction
+            title="Type"
+            description={intl.get('description.moduleType')}
+          />
+        ),
         dataIndex: 'type',
       },
       {
-        title: <TitleInstruction title="Value" description={intl.get('description.moduleValue')} />,
+        title: (
+          <TitleInstruction
+            title="Value"
+            description={intl.get('description.moduleValue')}
+          />
+        ),
         dataIndex: 'value',
-      }
+      },
     ];
     return (
-      <div className="service-info service-configs" >
+      <div className="service-info service-configs">
         <div className="common-header">
-          <Radio.Group buttonStyle="solid" defaultValue="all" className="service-radio" onChange={this.handleModuleChange}>
+          <Radio.Group
+            buttonStyle="solid"
+            defaultValue="all"
+            className="service-radio"
+            onChange={this.handleModuleChange}
+          >
             <Radio.Button value="all">{intl.get('service.all')}</Radio.Button>
             <Radio.Button value="storage">Storage</Radio.Button>
             <Radio.Button value="graph">Graph</Radio.Button>
@@ -66,8 +92,8 @@ class ConfigInfo extends React.Component<IProps> {
         <Table
           loading={!!loading}
           rowKey={(record: any) => record.module + record.name}
-          dataSource={configs} 
-          columns={columns} 
+          dataSource={configs}
+          columns={columns}
         />
       </div>
     );
diff --git a/src/pages/ServiceManage/LongTermTask/index.tsx b/src/pages/ServiceManage/LongTermTask/index.tsx
index 8be526f0..f93c746d 100644
--- a/src/pages/ServiceManage/LongTermTask/index.tsx
+++ b/src/pages/ServiceManage/LongTermTask/index.tsx
@@ -28,13 +28,12 @@ const mapDispatch = (dispatch: IDispatch) => ({
       currentSpace: space,
     }),
 });
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch>{
-}
+interface IProps
+  extends ReturnType<typeof mapState>,
+  ReturnType<typeof mapDispatch> {}
 
 class LongTermTask extends React.Component<IProps> {
-
-  componentDidMount(){
+  componentDidMount() {
     this.init();
   }
 
@@ -51,9 +50,7 @@ class LongTermTask extends React.Component<IProps> {
     }
   };
 
-  renderTime= time => {  
-    return <span>{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}</span>;
-  }
+  renderTime = time => <span>{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}</span>;
 
   handleSpaceChange = async space => {
     const { code } = await this.props.asyncUseSpaces(space);
@@ -67,31 +64,58 @@ class LongTermTask extends React.Component<IProps> {
     const { jobs, version, currentSpace, spaces, loading } = this.props;
     const columns = [
       {
-        title: <TitleInstruction title="Job ID" description={intl.get('description.jobId')} />,
+        title: (
+          <TitleInstruction
+            title="Job ID"
+            description={intl.get('description.jobId')}
+          />
+        ),
         dataIndex: 'Job Id',
       },
       {
-        title: <TitleInstruction title="Command" description={intl.get('description.command')} />,
+        title: (
+          <TitleInstruction
+            title="Command"
+            description={intl.get('description.command')}
+          />
+        ),
         dataIndex: 'Command',
       },
       {
-        title: <TitleInstruction title="Status" description={intl.get('description.longTermStatus')} />,
+        title: (
+          <TitleInstruction
+            title="Status"
+            description={intl.get('description.longTermStatus')}
+          />
+        ),
         dataIndex: 'Status',
-        render: status => <span className={`${status.toLowerCase()}`}>{status}</span>,
+        render: status => (
+          <span className={`${status.toLowerCase()}`}>{status}</span>
+        ),
       },
       {
-        title: <TitleInstruction title="Start Time" description={intl.get('description.longTermStartTime')} />,
+        title: (
+          <TitleInstruction
+            title="Start Time"
+            description={intl.get('description.longTermStartTime')}
+          />
+        ),
         dataIndex: 'Start Time',
         render: time => this.renderTime(time),
       },
       {
-        title: <TitleInstruction title="Stop Time" description={intl.get('description.longTermStopTime')} />,
+        title: (
+          <TitleInstruction
+            title="Stop Time"
+            description={intl.get('description.longTermStopTime')}
+          />
+        ),
         dataIndex: 'Stop Time',
         render: time => this.renderTime(time),
       },
     ];
     return (
-      <div className="service-info long-task" >
+      <div className="service-info long-task">
         {version && compare(getVersion(version), '2.6.0', '>=') && (
           <div className="common-header">
             <div className="select-space">
@@ -108,7 +132,8 @@ class LongTermTask extends React.Component<IProps> {
                   <Option value={space.Name} key={space.Name}>
                     {space.Name}
                   </Option>
-                ))}s
+                ))}
+                s
               </DashboardSelect>
             </div>
           </div>
@@ -116,8 +141,8 @@ class LongTermTask extends React.Component<IProps> {
         <Table
           loading={!!loading}
           rowKey={(record: any) => record['Job Id']}
-          dataSource={jobs} 
-          columns={columns} 
+          dataSource={jobs}
+          columns={columns}
         />
       </div>
     );
diff --git a/src/pages/ServiceManage/PartitionInfo/index.tsx b/src/pages/ServiceManage/PartitionInfo/index.tsx
index 4d7b4b35..5f8688bb 100644
--- a/src/pages/ServiceManage/PartitionInfo/index.tsx
+++ b/src/pages/ServiceManage/PartitionInfo/index.tsx
@@ -15,7 +15,7 @@ const mapState = (state: IRootState) => ({
   loading: state.loading.effects.nebula.asyncGetParts,
   spaces: state.nebula.spaces,
   parts: state.nebula.parts,
-  currentSpace:state.nebula.currentSpace,
+  currentSpace: state.nebula.currentSpace,
 });
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
@@ -26,80 +26,106 @@ const mapDispatch: any = (dispatch: IDispatch) => ({
       currentSpace: space,
     }),
 });
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch>{
-}
+interface IProps
+  extends ReturnType<typeof mapState>,
+  ReturnType<typeof mapDispatch> {}
 
 class PartitionInfo extends React.Component<IProps> {
-
   componentDidMount() {
     this.props.asyncGetSpaces();
   }
 
-  handleSpaceChange= async space => {
+  handleSpaceChange = async space => {
     const { code } = (await service.execNGQL({
-      gql: `USE ${space}`
+      gql: `USE ${space}`,
     })) as any;
-    if(code === 0){
+    if (code === 0) {
       this.props.asyncGetParts();
       this.props.updateSpace(space);
       trackEvent('partition_info', 'select_space');
     }
-  }
+  };
 
   handleSearchPartitionId = value => {
     this.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')} />,
+        title: (
+          <TitleInstruction
+            title="PartitionId"
+            description={intl.get('description.partitionId')}
+          />
+        ),
         dataIndex: 'Partition ID',
       },
       {
-        title: <TitleInstruction title="Leader" description={intl.get('description.leader')} />,
+        title: (
+          <TitleInstruction
+            title="Leader"
+            description={intl.get('description.leader')}
+          />
+        ),
         dataIndex: 'Leader',
       },
       {
-        title: <TitleInstruction title="Peers" description={intl.get('description.peers')} />,
+        title: (
+          <TitleInstruction
+            title="Peers"
+            description={intl.get('description.peers')}
+          />
+        ),
         dataIndex: 'Peers',
       },
       {
-        title: <TitleInstruction title="Losts" description={intl.get('description.losts')} />,
+        title: (
+          <TitleInstruction
+            title="Losts"
+            description={intl.get('description.losts')}
+          />
+        ),
         dataIndex: 'Losts',
         render: losts => <span>{losts || '-'}</span>,
-      }
+      },
     ];
     return (
-      <div className="service-info service-partition" >
+      <div className="service-info service-partition">
         <div className="common-header">
           <div className="service-screen">
             <span>{intl.get('service.spaces')}:</span>
-            <DashboardSelect 
+            <DashboardSelect
               placeholder={intl.get('service.chooseSpace')}
               value={currentSpace || undefined}
               onChange={this.handleSpaceChange}
               style={{
-                width: 220 
-              }}>
-              {spaces.map((space:any) => {
-                return <Option value={space.Name} key={space.Name}>{space.Name}</Option>;
-              })}
+                width: 220,
+              }}
+            >
+              {spaces.map((space: any) => (
+                <Option value={space.Name} key={space.Name}>
+                  {space.Name}
+                </Option>
+              ))}
             </DashboardSelect>
           </div>
           <div className="service-screen">
             <span>{intl.get('service.partition')}:</span>
-            <Input.Search allowClear={true} placeholder={intl.get('service.enterPartitionId')} onSearch={this.handleSearchPartitionId} />
+            <Input.Search
+              allowClear={true}
+              placeholder={intl.get('service.enterPartitionId')}
+              onSearch={this.handleSearchPartitionId}
+            />
           </div>
         </div>
-        <Table 
+        <Table
           loading={!!loading}
           rowKey={(record: any) => record['Partition ID']}
-          dataSource={parts} 
-          columns={columns} 
+          dataSource={parts}
+          columns={columns}
         />
       </div>
     );
diff --git a/src/pages/ServiceManage/ServiceInfo/index.tsx b/src/pages/ServiceManage/ServiceInfo/index.tsx
index 5f2410cd..b5291ffc 100644
--- a/src/pages/ServiceManage/ServiceInfo/index.tsx
+++ b/src/pages/ServiceManage/ServiceInfo/index.tsx
@@ -16,13 +16,12 @@ const mapState = (state: IRootState) => ({
 const mapDispatch = (dispatch: IDispatch) => ({
   asyncGetServices: dispatch.nebula.asyncGetServices,
 });
-interface IProps extends ReturnType<typeof mapState>,
-  ReturnType<typeof mapDispatch>{
-}
+interface IProps
+  extends ReturnType<typeof mapState>,
+  ReturnType<typeof mapDispatch> {}
 
 class ServiceInfo extends React.Component<IProps> {
-
-  componentDidMount(){
+  componentDidMount() {
     this.props.asyncGetServices();
   }
 
@@ -30,41 +29,78 @@ class ServiceInfo extends React.Component<IProps> {
     const { services } = this.props;
     const columns = [
       {
-        title: <TitleInstruction title="Host" description={intl.get('description.ip')} />,
+        title: (
+          <TitleInstruction
+            title="Host"
+            description={intl.get('description.ip')}
+          />
+        ),
         dataIndex: 'Host',
       },
       {
-        title: <TitleInstruction title="Port" description={intl.get('description.port')} />,
+        title: (
+          <TitleInstruction
+            title="Port"
+            description={intl.get('description.port')}
+          />
+        ),
         dataIndex: 'Port',
       },
       {
-        title: <TitleInstruction title="Status" description={intl.get('description.status')} />,
+        title: (
+          <TitleInstruction
+            title="Status"
+            description={intl.get('description.status')}
+          />
+        ),
         dataIndex: 'Status',
-        render:status => <span className={status.toLowerCase()}>{status}</span>,
+        render: status => (
+          <span className={status.toLowerCase()}>{status}</span>
+        ),
       },
       {
-        title: <TitleInstruction title="Git Info Sha" description={intl.get('description.gitInfo')} />,
+        title: (
+          <TitleInstruction
+            title="Git Info Sha"
+            description={intl.get('description.gitInfo')}
+          />
+        ),
         dataIndex: 'Git Info Sha',
       },
       {
-        title: <TitleInstruction title="Leader Count" description={intl.get('description.leaderCount')} />,
+        title: (
+          <TitleInstruction
+            title="Leader Count"
+            description={intl.get('description.leaderCount')}
+          />
+        ),
         dataIndex: 'Leader count',
       },
       {
-        title: <TitleInstruction title="Partition Distribution" description={intl.get('description.partitionDistribution')} />,
+        title: (
+          <TitleInstruction
+            title="Partition Distribution"
+            description={intl.get('description.partitionDistribution')}
+          />
+        ),
         dataIndex: 'Partition distribution',
       },
       {
-        title: <TitleInstruction title="Leader Distribution" description={intl.get('description.leaderDistribution')} />,
+        title: (
+          <TitleInstruction
+            title="Leader Distribution"
+            description={intl.get('description.leaderDistribution')}
+          />
+        ),
         dataIndex: 'Leader distribution',
       },
     ];
     return (
-      <div className="service-info" >
-        <Table 
+      <div className="service-info">
+        <Table
           rowKey={(record: any) => record.Host}
-          dataSource={services} 
-          columns={columns} 
+          dataSource={services}
+          columns={columns}
           pagination={false}
           tableLayout="fixed"
         />
diff --git a/src/pages/VersionStatistic/VersionItem/index.tsx b/src/pages/VersionStatistic/VersionItem/index.tsx
index 8290e44c..bdb59d70 100644
--- a/src/pages/VersionStatistic/VersionItem/index.tsx
+++ b/src/pages/VersionStatistic/VersionItem/index.tsx
@@ -11,24 +11,21 @@ import { IRootState } from '@/store';
 import ServiceHeader from '@/components/Service/ServiceHeader';
 import './index.less';
 
-interface IProps extends ReturnType<typeof mapState>{
+interface IProps extends ReturnType<typeof mapState> {
   title: string;
   icon: string;
-  data: IVersionItem[]
+  data: IVersionItem[];
 }
 
-interface IState {
-}
-
-const mapState = (state: IRootState) => {
-  return {
-    loading: state.loading.models.service
-  };
-};
+interface IState {}
 
+const mapState = (state: IRootState) => ({
+  loading: state.loading.models.service,
+});
 
 class VersionItem extends React.PureComponent<IProps, IState> {
   chartInstance: Chart;
+
   componentDidUpdate() {
     this.updateChart();
   }
@@ -36,42 +33,46 @@ class VersionItem extends React.PureComponent<IProps, IState> {
   renderChart = (chartInstance: Chart) => {
     this.chartInstance = chartInstance;
     renderPieChartTpl(chartInstance);
-  }
+  };
 
   updateChart = () => {
     const { data } = this.props;
     const versionList = groupBy(data, 'version');
-    const chartData = Object.keys(versionList).map(key => {
-      return {
-        type: key,
-        value: round(versionList[key].length / data.length, 2)
-      };
-    });
+    const chartData = Object.keys(versionList).map(key => ({
+      type: key,
+      value: round(versionList[key].length / data.length, 2),
+    }));
     this.chartInstance.data(chartData).render();
-  }
+  };
 
   render() {
     const { title, icon, data, loading } = this.props;
-    const columns = [{
-      title: intl.get('common.service'),
-      dataIndex: 'name',
-    }, {
-      title: intl.get('common.version'),
-      dataIndex: 'version',
-    }];
+    const columns = [
+      {
+        title: intl.get('common.service'),
+        dataIndex: 'name',
+      },
+      {
+        title: intl.get('common.version'),
+        dataIndex: 'version',
+      },
+    ];
     return (
       <Spin delay={200} spinning={!!loading}>
         <div className="version-statistic-item">
           <ServiceHeader title={title} icon={icon} />
           <div className="version-content">
-            <PieChart options={{ height: 200 }} renderChart={this.renderChart} />
+            <PieChart
+              options={{ height: 200 }}
+              renderChart={this.renderChart}
+            />
             <Table
               className="service-table"
-              columns={columns} 
-              dataSource={data} 
+              columns={columns}
+              dataSource={data}
               bordered={true}
               pagination={false}
-              size={'small'}
+              size="small"
               rowKey="name"
             />
           </div>
@@ -80,4 +81,4 @@ class VersionItem extends React.PureComponent<IProps, IState> {
     );
   }
 }
-export default connect(mapState)(VersionItem);
\ No newline at end of file
+export default connect(mapState)(VersionItem);
diff --git a/src/pages/VersionStatistic/index.tsx b/src/pages/VersionStatistic/index.tsx
index 4146a52a..707f4a50 100644
--- a/src/pages/VersionStatistic/index.tsx
+++ b/src/pages/VersionStatistic/index.tsx
@@ -4,22 +4,18 @@ import VersionItem from './VersionItem';
 import { IDispatch } from '@/store';
 import { IVersionItem } from '@/utils/interface';
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetServiceVersion: dispatch.nebula.asyncGetServiceVersion,
-  };
-};
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetServiceVersion: dispatch.nebula.asyncGetServiceVersion,
+});
 
-const mapState = () => {
-  return {};
-};
+const mapState = () => ({});
 
 interface IProps extends ReturnType<typeof mapDispatch> {}
 
 interface IState {
-  graph: IVersionItem[],
-  storage: IVersionItem[],
-  meta: IVersionItem[]
+  graph: IVersionItem[];
+  storage: IVersionItem[];
+  meta: IVersionItem[];
 }
 
 class VersionStatistic extends React.Component<IProps, IState> {
@@ -35,7 +31,7 @@ class VersionStatistic extends React.Component<IProps, IState> {
   componentDidMount() {
     this.getVersion();
   }
-  
+
   getVersion = async () => {
     const graph = await this.props.asyncGetServiceVersion('GRAPH');
     const storage = await this.props.asyncGetServiceVersion('STORAGE');
@@ -43,17 +39,34 @@ class VersionStatistic extends React.Component<IProps, IState> {
     this.setState({
       graph,
       storage,
-      meta
+      meta,
     });
-  }
+  };
 
   render() {
     const { graph, storage, meta } = this.state;
-    return (<div className="version-statistics">
-      <VersionItem title="Graph Service" icon="#iconservice-graph" mode="blue" data={graph} />
-      <VersionItem title="Storage Service" icon="#iconservice-storage" mode="pink" data={storage} />
-      <VersionItem title="Meta Service" icon="#iconservice-meta" mode="skyblue" data={meta} />
-    </div>);
+    return (
+      <div className="version-statistics">
+        <VersionItem
+          title="Graph Service"
+          icon="#iconservice-graph"
+          mode="blue"
+          data={graph}
+        />
+        <VersionItem
+          title="Storage Service"
+          icon="#iconservice-storage"
+          mode="pink"
+          data={storage}
+        />
+        <VersionItem
+          title="Meta Service"
+          icon="#iconservice-meta"
+          mode="skyblue"
+          data={meta}
+        />
+      </div>
+    );
   }
 }
-export default connect(mapState, mapDispatch)(VersionStatistic);
\ No newline at end of file
+export default connect(mapState, mapDispatch)(VersionStatistic);
diff --git a/src/static/images/Graphd-image.png b/src/static/images/Graphd-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..247f0c38e9e2baff30d01f68a05f8c4d95c4613a
GIT binary patch
literal 1515
zcmV<H1r+*;P)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1%OFJK~#7F?OIK1
zTvZr;&YcK@q;#My)Gr)Ru?w}4y2wT{v6Uz;OkBB3<`=Z7KfvS%*v5_9Ou&V^WTgaZ
zI{}4mgekZvMezz1A}CA|Wo$F|_`G-Sn91axGxyv%(?z)tOeXhy+&RyE-}8Q*3lu0&
zpg@8AP+10Texp}PB`j-T1{xJMwUk1u+r@hQeHCKDs9n+3sQ{Px`-{A+^3&!zT3TW2
z<~7x@&9xFFu_}peYK@v<NEjVpss4d#VM4gLsxNbu8>W5|*tl^`t(y7+SP%r*wvZE4
zgDKpS2Z0ITovV7qMovJfUb%EtUpMs|35r@mRB|*bB4tbfl+LGF#tBKPaV@RSNU)@^
zjEoQ|Z*J=fJmOMs!PTtex!%RJb|XP<;2K;|&Lr*3hyuso2hOK826)0@BN)O35ly#W
zgf4@*VZ*d$Bf%)b7Bb@DBecJ~fwS-g@q1YfOdm8fdui=v36^P|RW_;IyN^BY+1ZPq
z=tYbPlA9?7xCI9TLvo?X;Ts9o=T$ob=0}kXe@F9&dx#x9t?3LM^T)L{T}BS%B}Z+W
zH}#JU)x?SODXj5P9B~_e{e$qwU$95%g(-L4k4~V`TvHt!E?(S7&y_qxr}>52ADqGm
zvz$2fOzwun+FaM?2N5=!8_FnzOtGjS_H&6V`15b<fBikpxU%d!A^8a3m7c=OI>I?#
zmxor^Q338Uo^8^HeaQX>?1a`Sshuf4fCI!@721d$E+Z#I4TA?*F_4^MF#al6HO+<H
z;dKY*1<dkm0ro|%GTyX?Y?itCAtXx=ut)=QZlJlW#Od}WMoC#n);M;~_8XLb{pN-}
zW3XW?f_-p*Eiy0{^_}7kFQlm>N&dvX=i^I7vKr6W$jKg~7SzA}OzmI{cp)gLt?Ktm
zJwr6CvSqGTB%C=`6>?%3xyQy%!~BJ68n?Nqe}~$p`FRTt<j^Cx<b#~RXDnKyN{LVU
zHMyq2!)wWRR<!9$w~nd!81P0gNUUj}B-QLR;Iz;_xpr{WXpOfnct9Mv47dv+$>4k1
z;T976?hZsvmAui=F#JfcogyjaMvzwc<j8yGz{K)FrOeLV0N3%E;Dz9^kcp*5?k6`1
zs1f(f37--S<G)fjWj#kZx(0qKl=_Qu5xFM27I-5_BM~yJI-7$WV`tn={;$R{Yy@w0
zR(}!<(4nDlB`5o?g~9zw4JdhZ6TV{68pE`0Sjb6Y8awdb-V~MWP+EVWC&B+gP57DZ
z_tSF9JQ$l`lBhPUgEX29u!n0VN3)LJxZflw$KmSsqb|N0$KZ@bFcUdomy5n_=##ur
z>Y3BW$Q?pr(?(vBnF&gzD@cm5Vo-S6GpD7LVFN=itwvZxO%?401vXV|zwruo&R64F
zO_g)noYTs3vNe)mTnH-RI&}6*v!pw;gsYOM#`9@3x(wxlWRKDfv`ZTM-2;+8g_i8I
zft>Of=4LSW!WqnRpC9q9lzwB>5uTM`Tn5zf!OCOF<<dxg^fs1HJZ-JA#Z@&E$-wes
zq6%^>_1F?s&fDSqX8-!#3s@LIP9R%n+tg`3T?*pLaupeo)F<B@H&NyMrjR^y5|w99
z#|5b@nAzObZl_CBUZ>NdBnuDW0YdWim)ycNrCEARftjFoJ`VGGKKR@zxBF2|tEug#
z2^!u{i`<|v*=$1IqJSH`1;{b9+x-~m-$`pXOHgM&J|h~w^0z){_M31>n<Ab5vVxId
zd>o|?O|}VQJ-ZRsF#*tU)iVxVclLt<MhQ#&GFFxo*Wk^14nw3EleF*0_2mV%X6noo
zi^}^dO5VEAiKSwENwd5+>gdWB`bT&=!1;c@sU<_<HcC{vK!E}U3KYnL{{Wwq4R<R@
R%qsu@002ovPDHLkV1ii8(H#H)

literal 0
HcmV?d00001

diff --git a/src/static/images/Meta-image.png b/src/static/images/Meta-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..9abc50e46daeab33f7092fd759f5851bcefb0ced
GIT binary patch
literal 1734
zcmV;%208hOP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH23tu)K~#7F?OMHV
z+g21l=TeRp|Aon9parT<F$%<0md0CD6p3AQs5`Y=oGqK3CrJDRb)LY=mQJyUBDOME
z*__Fey=05Jxo88hv6CvYcu&ruBtw*WDN&@H4Eg{AH18#OKi=>BQUF5?F~p|?!a2Zx
zx@WuN)*=u%C)zDlf4p9SbHYFg3NbyAS_YsMCTF+K6F~mNbyv@W=)ee0JUhrKi`Mxt
zW0>Lq;@aC=*H&SGNSxq!VK1w|`kil_>+zBb@965$?b$pG0ErQ7$kBSh`dbMaXA)I@
zSXHJP#)~Z5yGhG75rR{NgJnQ^*luSX*yRVkAR-}{Woh07GtortGZw+Fc1Bd;Cv1xM
z?071Z!y9}wXSj6*G(CE|@a-DJL|+8$XL}jfverZF%wckyAPWtDy6htFCT0yYV%ujV
zf~RhuSdIY@J5xk2#hxG<1}58{2}ZQDpjGasEO6>B%Myd{fe3Tdkgjc5?OLtwK8ixL
zE5WXAU+j#DfkBR>v0{N+befB@cQ~u5K@LG>4J%4iwxI;Y)^y6+Gwhm!MBDtZSAiF^
zV;Mo*dNV&8I4(r%AMiJYI1Rxovw_sFteW6)P4|0oLZJkw3j5+Am%z8~hMlpVc7x<d
zKvhfAuAR1bWl#V4!kMwOnkK}w_dveJRr+w`9aNlOt~)j>L~E5Z$rjA^>Abx?dl}*o
zyj0kKO}-F-C4O};&ba+ka#*r1xJ4Ot$3)UNgU}!rI3Ka1PpVt*e){f^)soXn<-okq
z95slZqGqKs)gQk33qqhE3Un|zu`{K0{%C%7L)X=eJBIhf#=^*XizdogsnL7mTjd3|
z(W1Jb*9deeXl~OpI}i~mhyhQINL#!(Z&CL1gPhiy9Z0nBYO(jcR5-}kFp;m!f4#x>
zS=1lYQiyDOMl6E5Udtb`yyST5d3jFAb<SZ~eTAM!q}F1qeC`!$UG~i*J^iM3w7`cO
z&iB`4r`D#n$}4e6#v(XU8}XcsSI}zm?_47t`x!kOCf{`|%^7waId)Q;*cM(8C_A~m
z|LVx#dHX>$8#F*1iqGB}<nDmE78KZsGRGh9nEV1Hi1-9|UZ>9nZI4`U(n6R=^uL@m
z$6rVYu?bGrjxxRzsICG;vYWI9xY2&%0;(BE2(bx@tM{MLkr#&&%-in(o%ie?u?Z6D
zj#!8Ncs;varm9Q)jDkd*%;$^*B&s^{QHq>xfW*eOyp|<eg@h1)2X);~NYmdC8R(09
zTw(O{k^&K%pt`7hizB5ZZHu@-{la%o)SpkFm$XW%g4X|14mJBRJ;6(&+Y@*>9_iA{
ziGW0$jOB8P<VS@`{sCQfQpoWO@$H@_U25i{i69YzUOR$&E*+;?X7rf<e3F%dnaP*<
z?{OzN*}Y>fn;=2NO19lGE60g;Q7Ut8A8bt)_NRS;zahQNR<iBII&)LXQKLF9hne-)
z>3_dGp5yxS)0Rt;{p&H6op^pwOdZ!t4mX0h#982hz=p1=<Hn)p5J&4zM4Hm%dPDy$
zD4k5Ok0wzIuLj<P>p*=`Ey?0!C)o>bnA#fckb;@7EnXg-$XBaivjUbZQj0;I0I4fk
z2a!pKmfn+vgB{+bT*qn0vn>+=KJU68o=BgCYdg+M-5DaBZco3Y#epLyhgVWpN{-{C
z8|7B?HX=8jy0#8NCrof7NLkj7;nMC6sQ0dCpF!g-J45Zx1?`yFt43}D6Y+S!&NaSW
ztUwoZeFIb5<%j&V2c~hBP7$>~Q2W-QRPp%MwPO1@*;%i!HMJwWlFKW6gU5R$=iRE8
zNnQh3DIt2tFvV#SEeDQ@Y?Us$E;oZMD|fcUYEJX|H(m!lc%0)V@i&Snp(IlKYy8i>
ztd&wvnP?_xoCppPIlxo2R88ba$aY4?&uI?t+G;<a)B5^+Hu-FS2^Bps5$$H5?cm(?
zrqRy43AC!->ot=tcSGMFKt0)7itPZG4O1Mx`!2uvmqCL~IWEG0KWWGQgdN#Fo9#ph
z`6|r))w@ZhY>E8{p(oj*R2s?KSr`)k8A-Dny=*2L0CxN8fBmpuI}5`=ehAcqY(0pb
zX>jkqyWRM<F$fHVU<-{OE2P%Xq<ab5Sr`UNu!YI(y+y7Va-{GQYAUlF^MjD%5JL<x
c#1Kj2Bh+#hm!6%%*8l(j07*qoM6N<$f=ePnWB>pF

literal 0
HcmV?d00001

diff --git a/src/static/images/Storage-image.png b/src/static/images/Storage-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3ee09216c277e73c16f1cb2606790fb8315494c
GIT binary patch
literal 945
zcmV;i15W&jP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH14c<iK~#7F?V8VP
z6G0Tm-`lL4wNMRIt5uX14+WvI2X8&~=1J+<gY>8(n7_dK7ql1au_teyJbAMxPd&sI
zg@Vw4v|vpz7;N)ncgC4%e(aCgWQ(E6OZNjI%lz2cw|Q@7zHb7MkdQD)Fj!E`u0H|f
zYaB2GL=Z+481kjb{PTRU&d{`8p=6wd159&ftmx_tU1K1KfpA$@Zo+^tCdS}G_L{G(
zv9%AZQU`N(0#Y|Fwaa<Uf%@kk>e^bk1!#31+dcRL&Tc7koLB~8Iwb}i2Ua{%56}<P
zJ%u4&8oNaRaeqS?=dI(F8bH%PV>$!Ic-q(RzYN523+#up;ybMds(sk)n~`UM(W^n~
z%9t`vBEJof>rkMlf$n}q#DJ@=Wh^k^^OWf6qP*@x_5Ihr$KY8JYm(u@sBVEg%!GC_
zzwWJbAPH_>{ql4%SgMIZUWO4uvsJ^_Kn`B!$a1<G)D`Z{Z)9w!lG%?|!7k6_mq*I;
z5?VyK=xWBU+H_pht_l~;X<amAU@80dl@O0BK#Q`2?$T8L#b&S~G>bB1FM%EzgPGdr
z)~tiH)O?Gf6TEV7n-((6OI1p-g9=!SGfMQfkTUJ~-Hy7pAJ6&ppeweJwNHDI<MdP$
zs?o$nFy|)4jV+)?EWs<^G^Rz<h1>17Ooe!YH{E#;!F0i}6HD+inG=DNSQt&gD+1gQ
zlL9XtwbeZpV$Y)ejyqm=!uM>YMwF*?>bNJ1z)Q!ztb$wo3*8vlGQo<+YQoad*gAkl
zM8Dd{?{FH<pWsDg%OYn{09tH12+NR=Ko70pJ-qv7-ZdB<Rbe`XseG=Ws|x2uv+Jv(
zl$<7XIpnTyKU)iy>rQwn3SLMdKGKyBY@wIugYpp63u|r#r7Xk1rrvGtY-AtVw}osk
z`$aL(6JDL*<-!p2{>@0iYdyHrf5EHNcR*!RA-3R^$YW)>(H$wl8x*)`rGOGW4OEAo
z#gibGvB0|o^e__hg!fzfPYBeAJ&X3+IGF~Ky3a>*47c#xH=Z|(;A|iImI>CwqXxE2
zNR=Kku!*}@Rv#VC&QCZEx){s@K`=tYhJHZ@amnPc0fa!2g=ioUJef{NNFdKYY{y<*
TXNNn700000NkvXXu0mjf?k%}k

literal 0
HcmV?d00001

diff --git a/src/static/import.d.ts b/src/static/import.d.ts
index 4bc2b76b..d0cd11ed 100644
--- a/src/static/import.d.ts
+++ b/src/static/import.d.ts
@@ -1,7 +1,7 @@
-declare module '*.svg'
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.jpeg'
-declare module '*.gif'
-declare module '*.bmp'
-declare module '*.tiff'
\ No newline at end of file
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';
diff --git a/src/store/models/app.ts b/src/store/models/app.ts
index 05a89d2a..80c16e8b 100644
--- a/src/store/models/app.ts
+++ b/src/store/models/app.ts
@@ -18,12 +18,10 @@ export const app = createModel({
     connection: {} as any,
   },
   reducers: {
-    update: (state: IState, payload: any) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
+    update: (state: IState, payload: any) => ({
+      ...state,
+      ...payload,
+    }),
   },
   effects: (dispatch: any) => ({
     async asyncGetAppInfo() {
@@ -35,21 +33,24 @@ export const app = createModel({
     },
 
     async asyncGetCustomConfig() {
-      const { code, data:{ connection, alias } } = (await service.getCustomConfig()) as any;
+      const {
+        code,
+        data: { connection, alias },
+      } = (await service.getCustomConfig()) as any;
       if (code === 0) {
         this.update({
-          aliasConfig : alias,
-          connection
+          aliasConfig: alias,
+          connection,
         });
       }
     },
 
     async asyncLogin(payload: {
-      password:string,
-      username: string,
-      ip: string,
-      port: number,
-    }){
+      password: string;
+      username: string;
+      ip: string;
+      port: number;
+    }) {
       const { password, username, ip, port } = payload;
       const { code, message: errorMessage } = (await service.connectDB(
         {
@@ -63,21 +64,21 @@ export const app = createModel({
             category: 'user',
             action: 'sign_in',
           },
-        })) as any;
+        },
+      )) as any;
       if (code === 0) {
         cookies.set('nu', username);
         this.update({
           username,
         });
         return true;
-      }else{
-        message.error(`${intl.get('configServer.fail')}: ${errorMessage}`);
-        this.update({
-          username: '',
-        });
-        cookies.remove('nu', { path: '/' });
-        return false;
       }
+      message.error(`${intl.get('configServer.fail')}: ${errorMessage}`);
+      this.update({
+        username: '',
+      });
+      cookies.remove('nu', { path: '/' });
+      return false;
     },
 
     async asyncLogout() {
@@ -92,8 +93,9 @@ export const app = createModel({
             category: 'user',
             action: 'sign_out',
           },
-        });
+        },
+      );
       dispatch({ type: 'RESET_APP' });
     },
-  })
+  }),
 });
diff --git a/src/store/models/machine.ts b/src/store/models/machine.ts
index 74fd4fe2..3295524e 100644
--- a/src/store/models/machine.ts
+++ b/src/store/models/machine.ts
@@ -5,18 +5,17 @@ import { NEED_ADD_SUM_QUERYS, getProperStep } from '@/utils/dashboard';
 import { LINUX } from '@/utils/promQL';
 import { IStatRangeItem, IStatSingleItem } from '@/utils/interface';
 
-
 const PROMQL = LINUX;
 interface IState {
-  cpuStat: IStatRangeItem[]
-  diskStat: IStatRangeItem[]
-  memoryStat: IStatRangeItem[]
-  loadStat: IStatRangeItem[]
-  networkOutStat: IStatRangeItem[]
-  networkInStat: IStatRangeItem[]
-  networkStat: IStatRangeItem[]
-  memorySizeStat: IStatSingleItem[]
-  diskSizeStat: IStatSingleItem[]
+  cpuStat: IStatRangeItem[];
+  diskStat: IStatRangeItem[];
+  memoryStat: IStatRangeItem[];
+  loadStat: IStatRangeItem[];
+  networkOutStat: IStatRangeItem[];
+  networkInStat: IStatRangeItem[];
+  networkStat: IStatRangeItem[];
+  memorySizeStat: IStatSingleItem[];
+  diskSizeStat: IStatSingleItem[];
 }
 
 export const machine = createModel({
@@ -29,21 +28,19 @@ export const machine = createModel({
     networkStat: [] as IStatRangeItem[],
     loadStat: [] as IStatRangeItem[],
     memorySizeStat: [] as IStatSingleItem[],
-    diskSizeStat: [] as IStatSingleItem[]
+    diskSizeStat: [] as IStatSingleItem[],
   },
   reducers: {
-    update: (state: IState, payload: any) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
+    update: (state: IState, payload: any) => ({
+      ...state,
+      ...payload,
+    }),
   },
   effects: () => ({
     async asyncGetCPUStatByRange(payload: {
-      start: number,
-      end: number,
-      metric: string,
+      start: number;
+      end: number;
+      metric: string;
     }) {
       const { start, end, metric } = payload;
       const _start = start / 1000;
@@ -57,15 +54,15 @@ export const machine = createModel({
       })) as any;
       let cpuStat = [];
       if (code === 0) {
-        if(NEED_ADD_SUM_QUERYS.includes(metric)){
-          cpuStat = await this.asyncGetSumDataByRange({
+        if (NEED_ADD_SUM_QUERYS.includes(metric)) {
+          cpuStat = (await this.asyncGetSumDataByRange({
             query: PROMQL[metric],
             start: _start,
             end: _end,
             step,
-            data:data.result,
-          }) as any;
-        }else{
+            data: data.result,
+          })) as any;
+        } else {
           cpuStat = data.result;
         }
       }
@@ -75,9 +72,9 @@ export const machine = createModel({
     },
 
     async asyncGetMemoryStatByRange(payload: {
-      start: number,
-      end: number,
-      metric: string,
+      start: number;
+      end: number;
+      metric: string;
     }) {
       const { start, end, metric } = payload;
       const _start = start / 1000;
@@ -90,29 +87,29 @@ export const machine = createModel({
         step,
       })) as any;
       let memoryStat = [];
-      
+
       if (code === 0) {
-        if(NEED_ADD_SUM_QUERYS.includes(metric)){
-          memoryStat = await this.asyncGetSumDataByRange({
+        if (NEED_ADD_SUM_QUERYS.includes(metric)) {
+          memoryStat = (await this.asyncGetSumDataByRange({
             query: PROMQL[metric],
             start: _start,
             end: _end,
             step,
-            data:data.result,
-          }) as any;
-        }else{
+            data: data.result,
+          })) as any;
+        } else {
           memoryStat = data.result;
         }
       }
 
       this.update({
-        memoryStat
+        memoryStat,
       });
     },
 
     async asyncGetMemorySizeStat() {
       const { code, data } = (await service.execPromQL({
-        query: PROMQL.memory_size
+        query: PROMQL.memory_size,
       })) as any;
 
       let memorySizeStat = [];
@@ -122,14 +119,14 @@ export const machine = createModel({
       }
 
       this.update({
-        memorySizeStat
+        memorySizeStat,
       });
     },
 
     async asyncGetDiskStatByRange(payload: {
-      start: number,
-      end: number,
-      metric: string,
+      start: number;
+      end: number;
+      metric: string;
     }) {
       const { start, end, metric } = payload;
       const _start = start / 1000;
@@ -143,34 +140,33 @@ export const machine = createModel({
       })) as any;
       let diskStat = [] as any;
       if (code === 0) {
-        if(NEED_ADD_SUM_QUERYS.includes(metric)){
-          diskStat = await this.asyncGetSumDataByRange({
+        if (NEED_ADD_SUM_QUERYS.includes(metric)) {
+          diskStat = (await this.asyncGetSumDataByRange({
             query: PROMQL[metric],
             start: _start,
             end: _end,
             step,
             data: data.result,
-          }) as any;
-        }else{
+          })) as any;
+        } else {
           diskStat = data.result;
         }
-        diskStat = diskStat.map((stat:any) => {
-          if(stat.metric.device){
-            return{
+        diskStat = diskStat.map((stat: any) => {
+          if (stat.metric.device) {
+            return {
               values: stat.values,
-              metric:{
+              metric: {
                 ...stat.metric,
-                instance: `${stat.metric.instance}  (${stat.metric.device})`
-              }
+                instance: `${stat.metric.instance}  (${stat.metric.device})`,
+              },
             };
-          }else{
-            return stat;
           }
+          return stat;
         });
       }
 
       this.update({
-        diskStat
+        diskStat,
       });
     },
 
@@ -188,9 +184,9 @@ export const machine = createModel({
     },
 
     async asyncGetLoadByRange(payload: {
-      start: number,
-      end: number,
-      metric: string,
+      start: number;
+      end: number;
+      metric: string;
     }) {
       const { start, end, metric } = payload;
       const _start = start / 1000;
@@ -205,15 +201,15 @@ export const machine = createModel({
 
       let loadStat = [];
       if (code === 0) {
-        if(NEED_ADD_SUM_QUERYS.includes(metric)){
-          loadStat = await this.asyncGetSumDataByRange({
+        if (NEED_ADD_SUM_QUERYS.includes(metric)) {
+          loadStat = (await this.asyncGetSumDataByRange({
             query: PROMQL[metric],
             start: _start,
             end: _end,
             step,
-            data:data.result,
-          }) as any;
-        }else{
+            data: data.result,
+          })) as any;
+        } else {
           loadStat = data.result;
         }
       }
@@ -223,10 +219,10 @@ export const machine = createModel({
     },
 
     async asyncGetNetworkStatByRange(payload: {
-      start: number,
-      end: number,
-      metric: string,
-      inOrOut?: string,
+      start: number;
+      end: number;
+      metric: string;
+      inOrOut?: string;
     }) {
       const { start, end, metric, inOrOut } = payload;
       const _start = start / 1000;
@@ -242,20 +238,20 @@ export const machine = createModel({
       let networkStat = [];
 
       if (code === 0) {
-        if(NEED_ADD_SUM_QUERYS.includes(metric)){
-          networkStat = await this.asyncGetSumDataByRange({
+        if (NEED_ADD_SUM_QUERYS.includes(metric)) {
+          networkStat = (await this.asyncGetSumDataByRange({
             query: PROMQL[metric],
             start: _start,
             end: _end,
             step,
-            data:data.result,
-          }) as any;
-        }else{
+            data: data.result,
+          })) as any;
+        } else {
           networkStat = data.result;
         }
       }
 
-      switch(inOrOut) {
+      switch (inOrOut) {
         case 'in':
           this.update({
             networkInStat: networkStat,
@@ -273,32 +269,31 @@ export const machine = createModel({
       }
     },
 
-    async  asyncGetSumDataByRange(payload: {
-      query: string,
-      start: number,
-      end: number,
-      step: number,
-      data: any[],
+    async asyncGetSumDataByRange(payload: {
+      query: string;
+      start: number;
+      end: number;
+      step: number;
+      data: any[];
     }) {
       const { query, start, end, step, data } = payload;
-      const { code, data:dataStat } = (await service.execPromQLByRange({
+      const { code, data: dataStat } = (await service.execPromQLByRange({
         query: `sum(${query})`,
         start,
         end,
         step,
       })) as any;
-      if(code === 0 && dataStat.result.length !== 0){
+      if (code === 0 && dataStat.result.length !== 0) {
         const sumData = {
-          metric:{
+          metric: {
             instance: 'total',
-            job: 'total'
+            job: 'total',
           },
         } as any;
         sumData.values = dataStat.result[0].values;
         return data.concat(sumData);
-      }else{
-        return data;
       }
+      return data;
     },
   }),
 });
diff --git a/src/store/models/nebula.ts b/src/store/models/nebula.ts
index 109392b3..c1266ee5 100644
--- a/src/store/models/nebula.ts
+++ b/src/store/models/nebula.ts
@@ -4,39 +4,40 @@ import cookies from 'js-cookie';
 import service from '@/config/service';
 
 interface IState {
-  configs:any[];
+  configs: any[];
   jobs: any[];
   spaces: string[];
-  parts:any[];
+  parts: any[];
   services: any[];
   currentSpace: string;
   version: string;
 }
 
-type IServiceType = 'GRAPH' | 'STORAGE' | 'META'
+type IServiceType = 'GRAPH' | 'STORAGE' | 'META';
 
 export const nebula = createModel({
   state: {
-    configs:[],
-    jobs:[],
-    spaces:[] as any,
-    parts:[],
-    services:[],
+    configs: [],
+    jobs: [],
+    spaces: [] as any,
+    parts: [],
+    services: [],
     currentSpace: '',
     version: cookies.get('version') || '',
   },
   reducers: {
-    update: (state: IState, payload: any) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
+    update: (state: IState, payload: any) => ({
+      ...state,
+      ...payload,
+    }),
   },
   effects: (dispatch: any) => ({
-    async asyncGetServiceConfigs(module?:string) {
+    async asyncGetServiceConfigs(module?: string) {
       const { code, data } = (await service.execNGQL({
-        gql: module && module !== 'all' ? `SHOW CONFIGS ${module} ` : 'SHOW CONFIGS'
+        gql:
+          module && module !== 'all'
+            ? `SHOW CONFIGS ${module} `
+            : 'SHOW CONFIGS',
       })) as any;
       if (code === 0) {
         this.update({
@@ -47,7 +48,7 @@ export const nebula = createModel({
 
     async asyncGetJobs() {
       const { code, data } = (await service.execNGQL({
-        gql: 'SHOW JOBS'
+        gql: 'SHOW JOBS',
       })) as any;
       if (code === 0 && data.tables) {
         this.update({
@@ -58,7 +59,7 @@ export const nebula = createModel({
 
     async asyncGetSpaces() {
       const { code, data } = (await service.execNGQL({
-        gql: 'SHOW SPACES'
+        gql: 'SHOW SPACES',
       })) as any;
       if (code === 0 && data.tables) {
         this.update({
@@ -69,14 +70,14 @@ export const nebula = createModel({
 
     async asyncUseSpaces(space) {
       const { code, data } = (await service.execNGQL({
-        gql: `USE ${space}`
+        gql: `USE ${space}`,
       })) as any;
       return { code, data };
     },
 
-    async asyncGetParts(partId?:string) {
+    async asyncGetParts(partId?: string) {
       const { code, data } = (await service.execNGQL({
-        gql: partId ? `SHOW PARTS ${partId}` : 'SHOW PARTS'
+        gql: partId ? `SHOW PARTS ${partId}` : 'SHOW PARTS',
       })) as any;
       if (code === 0 && data.tables) {
         this.update({
@@ -89,11 +90,13 @@ export const nebula = createModel({
     async asyncGetServices() {
       const hostData = await dispatch.nebula.asyncGetHostsInfo();
       let data = [];
-      if(hostData.length > 0) {
+      if (hostData.length > 0) {
         const storageData = await dispatch.nebula.asyncGetHostsInfo('STORAGE');
         data = hostData.map(host => {
-          const storage = storageData.find(storage => storage.Host === host.Host);
-          return{
+          const storage = storageData.find(
+            storage => storage.Host === host.Host,
+          );
+          return {
             ...host,
             ...storage,
           };
@@ -106,7 +109,7 @@ export const nebula = createModel({
 
     async asyncGetHostsInfo(type?: IServiceType) {
       const res = (await service.execNGQL({
-        gql: `SHOW HOSTS ${type || ''}`
+        gql: `SHOW HOSTS ${type || ''}`,
       })) as any;
       let data = [];
       if (res.code === 0 && res.data.tables) {
@@ -120,7 +123,7 @@ export const nebula = createModel({
       const res = await dispatch.nebula.asyncGetHostsInfo(type);
       return res.map(item => ({
         name: `${item.Host}:${item.Port}`,
-        version: item['Git Info Sha']
+        version: item['Git Info Sha'],
       }));
     },
   }),
diff --git a/src/store/models/service.ts b/src/store/models/service.ts
index b585feb2..a9d7edaa 100644
--- a/src/store/models/service.ts
+++ b/src/store/models/service.ts
@@ -5,39 +5,38 @@ import { IServicePanelConfig } from '@/utils/interface';
 import { DEFAULT_SERVICE_PANEL_CONFIG } from '@/utils/service';
 import { getProperStep } from '@/utils/dashboard';
 
-
 interface IState {
   panelConfig: {
-    graph: IServicePanelConfig[],
-    storage: IServicePanelConfig[],
-    meta: IServicePanelConfig[],
-  }
+    graph: IServicePanelConfig[];
+    storage: IServicePanelConfig[];
+    meta: IServicePanelConfig[];
+  };
 }
 
 export const service = createModel({
   state: {
-    panelConfig: localStorage.getItem('panelConfig') ? JSON.parse(localStorage.getItem('panelConfig')!) : DEFAULT_SERVICE_PANEL_CONFIG,
+    panelConfig: localStorage.getItem('panelConfig')
+      ? JSON.parse(localStorage.getItem('panelConfig')!)
+      : DEFAULT_SERVICE_PANEL_CONFIG,
   },
   reducers: {
-    update: (state: IState, payload: any) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
+    update: (state: IState, payload: any) => ({
+      ...state,
+      ...payload,
+    }),
   },
   effects: () => ({
     async asyncGetMetricsSumData(payload: {
-      query:string,
-      start: number,
-      end: number,
+      query: string;
+      start: number;
+      end: number;
     }) {
       const { start, end, query } = payload;
       const step = getProperStep(start, end);
       const _start = start / 1000;
       const _end = end / 1000;
       const { code, data } = (await serviceApi.execPromQLByRange({
-        query:`sum(${query})`,
+        query: `sum(${query})`,
         start: _start,
         end: _end,
         step,
@@ -45,7 +44,7 @@ export const service = createModel({
 
       if (code === 0 && data.result.length !== 0) {
         const sumData = {
-          metric:{
+          metric: {
             instanceName: 'total',
             instance: 'total',
           },
@@ -57,9 +56,9 @@ export const service = createModel({
     },
 
     async asyncGetMetricsData(payload: {
-      query:string,
-      start: number,
-      end: number,
+      query: string;
+      start: number;
+      end: number;
     }) {
       const { start, end, query } = payload;
       const step = getProperStep(start, end);
@@ -79,9 +78,9 @@ export const service = createModel({
     },
 
     async asyncGetStatus(payload: {
-      interval: number,
-      end: number,
-      query: string,
+      interval: number;
+      end: number;
+      query: string;
     }) {
       const { interval, end, query } = payload;
       const start = end - interval;
@@ -96,19 +95,19 @@ export const service = createModel({
       })) as any;
       let normal = 0;
       let abnormal = 0;
-      if(code === 0){
+      if (code === 0) {
         data.result.forEach(item => {
           const value = item.values.pop();
-          if(value[1] === '1'){
+          if (value[1] === '1') {
             normal++;
-          }else{
+          } else {
             abnormal++;
           }
         });
       }
       return {
         normal,
-        abnormal
+        abnormal,
       };
     },
   }),
diff --git a/src/store/models/setting.ts b/src/store/models/setting.ts
index f4f9988c..e61abcbe 100644
--- a/src/store/models/setting.ts
+++ b/src/store/models/setting.ts
@@ -2,12 +2,12 @@ import { createModel } from '@rematch/core';
 import _ from 'lodash';
 
 interface IState {
-  cpuBaseLine: number|undefined,
-  diskBaseLine: number|undefined,
-  memoryBaseLine: number|undefined,
-  networkOutBaseLine: number|undefined,
-  networkInBaseLine: number|undefined,
-  loadBaseLine: number|undefined,
+  cpuBaseLine: number | undefined;
+  diskBaseLine: number | undefined;
+  memoryBaseLine: number | undefined;
+  networkOutBaseLine: number | undefined;
+  networkInBaseLine: number | undefined;
+  loadBaseLine: number | undefined;
 }
 
 export const setting = createModel({
@@ -21,11 +21,9 @@ export const setting = createModel({
     networkBaseLine: undefined,
   },
   reducers: {
-    update: (state: IState, payload: any) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
+    update: (state: IState, payload: any) => ({
+      ...state,
+      ...payload,
+    }),
   },
 });
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 59d50962..e32ed9e2 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -1,4 +1,4 @@
 declare module '*.module.less' {
   const content: { [className: string]: string };
   export default content;
-};
\ No newline at end of file
+}
diff --git a/src/utils/chart/chart.ts b/src/utils/chart/chart.ts
index 4da38140..7e8177d4 100644
--- a/src/utils/chart/chart.ts
+++ b/src/utils/chart/chart.ts
@@ -23,38 +23,41 @@ export const LINE_CHART_COLORS = [
   '#F8DE9B',
   '#F4BCBC',
   '#BFBFBF',
-  '#595959'
+  '#595959',
 ];
 
-export const configDetailChart = (chartInstance: Chart, options: {
-  tickInterval?: number,
-  sizes?: any
-  valueType?: VALUE_TYPE
-  isCard?: boolean,
-}): Chart => {
+export const configDetailChart = (
+  chartInstance: Chart,
+  options: {
+    tickInterval?: number;
+    sizes?: any;
+    valueType?: VALUE_TYPE;
+    isCard?: boolean;
+  },
+): Chart => {
   chartInstance
     .axis('time', {
       label: {
-        formatter: time => {
-          return dayjs(Number(time) * 1000).format('HH:mm');
-        }
+        formatter: time => dayjs(Number(time) * 1000).format('HH:mm'),
       },
-      grid: options.isCard ? null : {
-        line: {
-          type: 'line',
-          style: {
-            fill: '#d9d9d9',
-            opacity: 0.5,
-          }
-        }
-      }
+      grid: options.isCard
+        ? null
+        : {
+          line: {
+            type: 'line',
+            style: {
+              fill: '#d9d9d9',
+              opacity: 0.5,
+            },
+          },
+        },
     })
     .legend({
       position: 'bottom',
     })
     .scale({
       time: {
-        tickInterval: options.tickInterval
+        tickInterval: options.tickInterval,
       },
       temperature: {
         nice: true,
@@ -64,28 +67,25 @@ export const configDetailChart = (chartInstance: Chart, options: {
     .position('time*value')
     .color('type', LINE_CHART_COLORS);
 
-  const tooltipTitle = time => {
-    return dayjs(Number(time) * 1000).format('YYYY-MM-DD HH:mm:ss');
-  };
+  const tooltipTitle = time =>
+    dayjs(Number(time) * 1000).format('YYYY-MM-DD HH:mm:ss');
 
   switch (options.valueType) {
     case VALUE_TYPE.percentage:
       chartInstance.axis('value', {
         label: {
-          formatter: percent => `${percent}%`
+          formatter: percent => `${percent}%`,
         },
       });
       chartInstance.tooltip({
-        customItems: items => {
-
-          return items.map(item => {
-            const value = Number(item.value).toFixed(2) + '%';
+        customItems: items =>
+          items.map(item => {
+            const value = `${Number(item.value).toFixed(2)}%`;
             return {
               ...item,
               value,
             };
-          });
-        },
+          }),
         showCrosshairs: true,
         shared: true,
         title: tooltipTitle,
@@ -95,7 +95,7 @@ export const configDetailChart = (chartInstance: Chart, options: {
           min: 0,
           max: 100,
           tickInterval: 25,
-        }
+        },
       });
       break;
     case VALUE_TYPE.byte:
@@ -106,30 +106,29 @@ export const configDetailChart = (chartInstance: Chart, options: {
             const { value, unit } = getProperByteDesc(bytes, 1024);
             let _unit = unit;
             if (options.valueType === VALUE_TYPE.byteSecond) {
-              _unit = unit + '/s';
+              _unit = `${unit}/s`;
             }
 
-            return value + ' ' + _unit;
+            return `${value} ${_unit}`;
           },
-        }
+        },
       });
       chartInstance.tooltip({
-        customItems: items => {
-          return items.map(item => {
+        customItems: items =>
+          items.map(item => {
             const { value, unit } = getProperByteDesc(item.value, 1024);
             let _unit = unit;
             if (options.valueType === VALUE_TYPE.byteSecond) {
-              _unit = unit + '/s';
+              _unit = `${unit}/s`;
             }
             return {
               ...item,
-              value: value + ' ' + _unit,
+              value: `${value} ${_unit}`,
             };
-          });
-        },
+          }),
         showCrosshairs: true,
         shared: true,
-        title: tooltipTitle
+        title: tooltipTitle,
       });
       break;
     case VALUE_TYPE.byteSecondNet:
@@ -137,25 +136,24 @@ export const configDetailChart = (chartInstance: Chart, options: {
         label: {
           formatter: bytes => {
             const { value, unit } = getProperByteDesc(bytes, 1000);
-            const _unit = unit + '/s';
-            return value + ' ' + _unit;
+            const _unit = `${unit}/s`;
+            return `${value} ${_unit}`;
           },
-        }
+        },
       });
       chartInstance.tooltip({
-        customItems: items => {
-          return items.map(item => {
+        customItems: items =>
+          items.map(item => {
             const { value, unit } = getProperByteDesc(item.value, 1000);
-            const _unit = unit + '/s';
+            const _unit = `${unit}/s`;
             return {
               ...item,
-              value: value + ' ' + _unit,
+              value: `${value} ${_unit}`,
             };
-          });
-        },
+          }),
         showCrosshairs: true,
         shared: true,
-        title: tooltipTitle
+        title: tooltipTitle,
       });
       break;
     case VALUE_TYPE.number:
@@ -164,28 +162,27 @@ export const configDetailChart = (chartInstance: Chart, options: {
         label: {
           formatter: processNum => {
             if (options.valueType === VALUE_TYPE.numberSecond) {
-              return processNum + '/s';
+              return `${processNum}/s`;
             }
             return processNum;
-          }
-        }
+          },
+        },
       });
       chartInstance.tooltip({
-        customItems: items => {
-          return items.map(item => {
+        customItems: items =>
+          items.map(item => {
             let value = item.value;
             if (options.valueType === VALUE_TYPE.numberSecond) {
-              value = value + '/s';
+              value = `${value}/s`;
             }
             return {
               ...item,
               value,
             };
-          });
-        },
+          }),
         showCrosshairs: true,
         shared: true,
-        title: tooltipTitle
+        title: tooltipTitle,
       });
       break;
     default:
@@ -194,15 +191,18 @@ export const configDetailChart = (chartInstance: Chart, options: {
   return chartInstance;
 };
 
-export const updateDetailChart = (chartInstance: Chart, options: {
-  type: string,
-  tickInterval: number
-  statSizes?: any
-}): Chart => {
+export const updateDetailChart = (
+  chartInstance: Chart,
+  options: {
+    type: string;
+    tickInterval: number;
+    statSizes?: any;
+  },
+): Chart => {
   chartInstance.scale({
     time: {
       tickInterval: options.tickInterval,
-    }
+    },
   });
 
   return chartInstance;
@@ -213,28 +213,29 @@ export const renderPieChartTpl = (chartInstance: Chart, _options?): Chart => {
     radius: 0.75,
   });
   chartInstance.tooltip({
-    showMarkers: false
+    showMarkers: false,
   });
-  chartInstance.interval()
+  chartInstance
+    .interval()
     .adjust('stack')
     .position('value')
     .color('type', PIE_CHARTS_COLORS)
     .style({ opacity: 0.4 })
     .state({
       active: {
-        style: (element) => {
+        style: element => {
           const shape = element.shape;
           return {
             matrix: Util.zoom(shape, 1.1),
           };
-        }
-      }
+        },
+      },
     });
   chartInstance.legend({
     position: 'right-top',
     offsetX: -40,
-    offsetY: 25
-  }); 
+    offsetY: 25,
+  });
   return chartInstance;
 };
 
diff --git a/src/utils/dashboard.ts b/src/utils/dashboard.ts
index 8e40774c..a1190c63 100644
--- a/src/utils/dashboard.ts
+++ b/src/utils/dashboard.ts
@@ -5,7 +5,7 @@ import { VALUE_TYPE } from '@/utils/promQL';
 
 export const DETAIL_DEFAULT_RANGE = 60 * 60 * 24 * 1000;
 export const CARD_RANGE = 60 * 60 * 24 * 1000;
-export const CARD_POLLING_INTERVAL = 10000 * 1000; 
+export const CARD_POLLING_INTERVAL = 10000 * 1000;
 export const MAX_STEP_ALLOW = 11000;
 export const TIME_INTERVAL_OPTIONS = [5, 60, 600, 3600];
 
@@ -22,24 +22,35 @@ export const getProperStep = (start: number, end: number) => {
   const hours = Math.round((end - start) / (3600 * 1000));
   if (hours <= 1) {
     return 7;
-  } else if (hours <= 6) { // 6 hour
+  }
+  if (hours <= 6) {
+    // 6 hour
     return 86;
-  } else if (hours <= 12) { // 12hour
+  }
+  if (hours <= 12) {
+    // 12hour
     return 172;
-  } else if (hours <= 24) { // 1 day
+  }
+  if (hours <= 24) {
+    // 1 day
     return 345;
-  } else if (hours <= 72) { // 3 days
+  }
+  if (hours <= 72) {
+    // 3 days
     return 691;
-  } else if (hours <= 168) { // 1 week
+  }
+  if (hours <= 168) {
+    // 1 week
     return 2419;
-  } else if (hours <= 336) { // 2 week
+  }
+  if (hours <= 336) {
+    // 2 week
     return 4838;
-  } else {
-    return Math.round((end - start) / MAX_STEP_ALLOW);
   }
+  return Math.round((end - start) / MAX_STEP_ALLOW);
 };
 
-export const renderUnit = (type) => {
+export const renderUnit = type => {
   switch (type) {
     case VALUE_TYPE.byteSecond:
     case VALUE_TYPE.byteSecondNet:
@@ -61,10 +72,14 @@ export function getVersion(v: string) {
   return match ? match[0] : v;
 }
 
-export const getBaseLineByUnit = (config:{baseLine: number, unit: string, valueType : string}) => {
+export const getBaseLineByUnit = (config: {
+  baseLine: number;
+  unit: string;
+  valueType: string;
+}) => {
   const { baseLine, unit, valueType } = config;
   let conversion = 1024;
-  if(valueType === VALUE_TYPE.byteSecondNet){
+  if (valueType === VALUE_TYPE.byteSecondNet) {
     conversion = 1000;
   }
   switch (unit) {
@@ -88,14 +103,14 @@ export const getBaseLineByUnit = (config:{baseLine: number, unit: string, valueT
 export const getWhichColor = value => {
   if (value < THRESHOLDS.low) {
     return CARD_LOW_COLORS;
-  } else if (value < THRESHOLDS.medium) {
+  }
+  if (value < THRESHOLDS.medium) {
     return CARD_MEDIUM_COLORS;
-  } else {
-    return CARD_HIGH_COLORS;
   }
+  return CARD_HIGH_COLORS;
 };
 
-export const getProperByteDesc = (bytes:any, conversion: number) => {
+export const getProperByteDesc = (bytes: any, conversion: number) => {
   const kb = conversion;
   const mb = conversion * conversion;
   const gb = mb * conversion;
@@ -131,13 +146,18 @@ export const getProperByteDesc = (bytes:any, conversion: number) => {
   };
 };
 
-export const getDataByType = (payload:{data: IStatRangeItem[], type?: string, name:string, aliasConfig?: any}) => {
+export const getDataByType = (payload: {
+  data: IStatRangeItem[];
+  type?: string;
+  name: string;
+  aliasConfig?: any;
+}) => {
   const { name, type, data, aliasConfig } = payload;
   const res = [] as ILineChartMetric[];
   data.forEach(instance => {
     instance.values.forEach(([timstamps, value]) => {
       const _name = instance.metric[name];
-      if((type === 'all' && _name !== 'total') || _name === type) {
+      if ((type === 'all' && _name !== 'total') || _name === type) {
         res.push({
           type: aliasConfig && aliasConfig[_name] ? aliasConfig[_name] : _name,
           value: Number(value),
@@ -149,8 +169,8 @@ export const getDataByType = (payload:{data: IStatRangeItem[], type?: string, na
   return res;
 };
 
-export const getProperTickInterval = (period) => {
-  switch(period) {
+export const getProperTickInterval = period => {
+  switch (period) {
     // past one hour
     case 24 * 60 * 60:
       return 2 * 60 * 60;
@@ -209,7 +229,7 @@ export const NEED_ADD_SUM_QUERYS = [
   'network_out_packet',
   // For Nebula Graph Service
   'num_queries',
-  'num_slow_queries'
+  'num_slow_queries',
 ];
 
 export enum MACHINE_TYPE {
@@ -219,7 +239,7 @@ export enum MACHINE_TYPE {
   disk = 'disk',
   networkOut = 'networkOut',
   networkIn = 'networkIn',
-  network = 'network'
+  network = 'network',
 }
 
 export const VERSIONS = ['v2.0.1', 'v2.5.1', 'v2.6.1', 'v3.0.0'];
@@ -230,25 +250,28 @@ export const getDefaultTimeRange = (interval?: number) => {
   return [dayjs(start), dayjs(end)];
 };
 
-export const getMaxNum = (data) => {
+export const getMaxNum = data => {
   const max = _.maxBy(data, item => item.value) as any;
   return max ? max.value : 0;
 };
 
-export const getMaxNumAndLength = (payload:{
+export const getMaxNumAndLength = (payload: {
   data: any[];
   valueType: string;
   baseLine?: number;
 }) => {
   const { data = [], valueType, baseLine } = payload;
   const maxNum = getMaxNum(data);
-  let maxNumLen = maxNum === 0 && baseLine ? baseLine.toString().length : maxNum.toString().length;
+  let maxNumLen =
+    maxNum === 0 && baseLine
+      ? baseLine.toString().length
+      : maxNum.toString().length;
   switch (valueType) {
     case VALUE_TYPE.percentage:
       maxNumLen = 5;
       break;
     case VALUE_TYPE.byte:
-    case VALUE_TYPE.byteSecond:{
+    case VALUE_TYPE.byteSecond: {
       const { value, unit } = getProperByteDesc(maxNum, 1024);
       if (valueType === VALUE_TYPE.byteSecond) {
         maxNumLen = unit.length + value.toString().length + 2;
@@ -268,4 +291,4 @@ export const getMaxNumAndLength = (payload:{
       break;
   }
   return { maxNum, maxNumLen };
-};
\ No newline at end of file
+};
diff --git a/src/utils/http.ts b/src/utils/http.ts
index 53919774..a12d3b54 100644
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -13,12 +13,18 @@ service.interceptors.response.use(
     let _code;
     if ('code' in response.data) {
       _code = code;
-    } else { // response from prometheus api
+    } else {
+      // response from prometheus api
       _code = response.data.status === 'success' ? 0 : -1;
       response.data.code = _code;
     }
     // if connection refused, login again
-    if (code === -1 && message && (message.includes('connection refused') || message.includes('an existing connection was forcibly closed'))) {
+    if (
+      code === -1 &&
+      message &&
+      (message.includes('connection refused') ||
+        message.includes('an existing connection was forcibly closed'))
+    ) {
       AntdMessage.warning(intl.get('configServer.connectError'));
       store.dispatch({
         type: 'app/asyncLogout',
@@ -69,16 +75,24 @@ const trackService = (res, config) => {
   trackEvent(category, action, res.code === 0 ? 'ajax_success' : 'ajax_failed');
 };
 
-const get = (api: string) => (params?: object, config = {}) =>
-  sendRequest('get', api, params, config);
+const get =
+  (api: string) =>
+    (params?: object, config = {}) =>
+      sendRequest('get', api, params, config);
 
-const post = (api: string) => (params?: object, config = {} as any) =>
-  sendRequest('post', api, params, config);
+const post =
+  (api: string) =>
+    (params?: object, config = {} as any) =>
+      sendRequest('post', api, params, config);
 
-const put = (api: string) => (params?: object, config = {}) =>
-  sendRequest('put', api, params, config);
+const put =
+  (api: string) =>
+    (params?: object, config = {}) =>
+      sendRequest('put', api, params, config);
 
-const _delete = (api: string) => (params?: object, config = {}) =>
-  sendRequest('delete', api, params, config);
+const _delete =
+  (api: string) =>
+    (params?: object, config = {}) =>
+      sendRequest('delete', api, params, config);
 
 export { get, post, put, _delete };
diff --git a/src/utils/interface.ts b/src/utils/interface.ts
index 513a4707..20baac5e 100644
--- a/src/utils/interface.ts
+++ b/src/utils/interface.ts
@@ -1,20 +1,20 @@
 export interface IMetric {
-  instance: string,
-  instanceName: string,
-  device?: string
+  instance: string;
+  instanceName: string;
+  device?: string;
 }
 export interface IStatRangeItem {
-  metric: IMetric,
-  values: [number, any]
+  metric: IMetric;
+  values: [number, any];
 }
 export interface IStatSingleItem {
-  metric: IMetric,
-  value: [number, any]
+  metric: IMetric;
+  value: [number, any];
 }
 
 export interface IVersionItem {
-  name: string,
-  version: string
+  name: string;
+  version: string;
 }
 
 export interface ILineChartMetric {
@@ -24,10 +24,10 @@ export interface ILineChartMetric {
 }
 
 export interface IServicePanelConfig {
-  period: number,
-  metric: string,
-  metricFunction: string,
-  space?:string,
-  metricType: string,
-  baseLine: number| undefined,
-}
\ No newline at end of file
+  period: number;
+  metric: string;
+  metricFunction: string;
+  space?: string;
+  metricType: string;
+  baseLine: number | undefined;
+}
diff --git a/src/utils/metric.ts b/src/utils/metric.ts
index 8de4bde8..1d2ecaa1 100644
--- a/src/utils/metric.ts
+++ b/src/utils/metric.ts
@@ -73,13 +73,13 @@ export const FILTER_METRICS = [
   'kv_remove_latency_us',
   'num_agent_heartbeats',
   'agent_heartbeat_latency_us',
-  'num_auth_failed_sessions_out_of_max_allowed'
+  'num_auth_failed_sessions_out_of_max_allowed',
 ];
 
 export const METRIC_PROCESS_TYPES = ['graphd', 'storaged', 'metad'];
 
-export const filterServiceMetrics = (payload:{
-  metricList:string[];
+export const filterServiceMetrics = (payload: {
+  metricList: string[];
   spaceMetricList: string[];
   version?: string;
   componentType: string;
@@ -88,38 +88,46 @@ export const filterServiceMetrics = (payload:{
   const metrics = [] as any;
   // const metricValue = item.slice(0, item.lastIndexOf(`_${componentType}_`));
   metricList.map(item => {
-    const [ metricFieldType, metricFields] = item.split(`_${componentType}_`); // Example: nebula_graphd_num_queries_sum_60 =>  nebula, num_queries_sum_60
-    if(metricFieldType && metricFields){
+    const [metricFieldType, metricFields] = item.split(`_${componentType}_`); // Example: nebula_graphd_num_queries_sum_60 =>  nebula, num_queries_sum_60
+    if (metricFieldType && metricFields) {
       const metricFieldArr = metricFields.split(`_`);
-      const key = metricFieldArr?.splice(-2, 2)[0];  // sum / avg / p99 ~
+      const key = metricFieldArr?.splice(-2, 2)[0]; // sum / avg / p99 ~
       const metricValue = metricFieldArr.join('_'); // nebula_graphd_num_queries
       const metricItem = _.find(metrics, m => m.metric === metricValue);
 
-      if(_.includes(FILTER_METRICS, metricValue)){ // is filter metric
+      if (_.includes(FILTER_METRICS, metricValue)) {
+        // is filter metric
         return;
       }
-      const isSpaceMetric = _.findLast(spaceMetricList, metric => metric.includes(metricValue));
+      const isSpaceMetric = _.findLast(spaceMetricList, metric =>
+        metric.includes(metricValue),
+      );
       // push data in metrics
-      if(metricItem){
-        const metricTypeItem = _.find(metricItem.metricType, _item => _item.key === key);
-        if(!metricTypeItem){
+      if (metricItem) {
+        const metricTypeItem = _.find(
+          metricItem.metricType,
+          _item => _item.key === key,
+        );
+        if (!metricTypeItem) {
           metricItem.metricType.push({
             key,
             value: `${metricFieldType}_${componentType}_${metricValue}_${key}_`,
           });
         }
-      }else{
+      } else {
         metrics.push({
           metric: metricValue,
           valueType: VALUE_TYPE.number,
           isSpaceMetric: !!isSpaceMetric,
-          metricType:[{
-            key,
-            value: `${metricFieldType}_${componentType}_${metricValue}_${key}_`,
-          }]
+          metricType: [
+            {
+              key,
+              value: `${metricFieldType}_${componentType}_${metricValue}_${key}_`,
+            },
+          ],
         });
       }
     }
   });
   return metrics;
-};
\ No newline at end of file
+};
diff --git a/src/utils/promQL.ts b/src/utils/promQL.ts
index 168b9b6c..4253ae8c 100644
--- a/src/utils/promQL.ts
+++ b/src/utils/promQL.ts
@@ -14,7 +14,6 @@ export const enum VALUE_TYPE {
 export const SUPPORT_METRICS = {
   cpu: [
     {
-
       metric: 'cpu_utilization',
       valueType: VALUE_TYPE.percentage,
     },
@@ -23,7 +22,6 @@ export const SUPPORT_METRICS = {
       valueType: VALUE_TYPE.percentage,
     },
     {
-
       metric: 'cpu_wait',
       valueType: VALUE_TYPE.percentage,
     },
@@ -33,7 +31,7 @@ export const SUPPORT_METRICS = {
     },
     {
       metric: 'cpu_system',
-      valueType: VALUE_TYPE.percentage
+      valueType: VALUE_TYPE.percentage,
     },
   ],
   memory: [
@@ -66,7 +64,7 @@ export const SUPPORT_METRICS = {
     {
       metric: 'load_15m',
       valueType: VALUE_TYPE.number,
-    }
+    },
   ],
   disk: [
     {
@@ -96,7 +94,7 @@ export const SUPPORT_METRICS = {
     {
       metric: 'inode_utilization',
       valueType: VALUE_TYPE.percentage,
-    }
+    },
   ],
   network: [
     {
@@ -127,19 +125,19 @@ export const SUPPORT_METRICS = {
 };
 
 export const SERVICE_SUPPORT_METRICS = {
-  graph:[
+  graph: [
     {
       metric: 'num_queries',
       valueType: VALUE_TYPE.number,
       metricType: [
         {
           key: 'rate',
-          value: 'nebula_graphd_num_queries_rate_'
+          value: 'nebula_graphd_num_queries_rate_',
         },
         {
           key: 'sum',
-          value: 'nebula_graphd_num_queries_sum_'
-        }
+          value: 'nebula_graphd_num_queries_sum_',
+        },
       ],
     },
     {
@@ -148,11 +146,11 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'rate',
-          value: 'nebula_graphd_num_slow_queries_rate_'
+          value: 'nebula_graphd_num_slow_queries_rate_',
         },
         {
           key: 'sum',
-          value: 'nebula_graphd_num_slow_queries_sum_'
+          value: 'nebula_graphd_num_slow_queries_sum_',
         },
       ],
     },
@@ -162,23 +160,23 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_graphd_query_latency_us_avg_'
+          value: 'nebula_graphd_query_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_graphd_query_latency_us_p75_'
+          value: 'nebula_graphd_query_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_graphd_query_latency_us_p95_'
+          value: 'nebula_graphd_query_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_graphd_query_latency_us_p99_'
+          value: 'nebula_graphd_query_latency_us_p99_',
         },
         {
           key: 'p999',
-          value: 'nebula_graphd_query_latency_us_p999_'
+          value: 'nebula_graphd_query_latency_us_p999_',
         },
       ],
     },
@@ -188,23 +186,23 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_graphd_slow_query_latency_us_avg_'
+          value: 'nebula_graphd_slow_query_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_graphd_slow_query_latency_us_p75_'
+          value: 'nebula_graphd_slow_query_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_graphd_slow_query_latency_us_p95_'
+          value: 'nebula_graphd_slow_query_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_graphd_slow_query_latency_us_p99_'
+          value: 'nebula_graphd_slow_query_latency_us_p99_',
         },
         {
           key: 'p999',
-          value: 'nebula_graphd_slow_query_latency_us_p999_'
+          value: 'nebula_graphd_slow_query_latency_us_p999_',
         },
       ],
     },
@@ -214,16 +212,16 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'rate',
-          value: 'nebula_graphd_num_query_errors_rate_'
+          value: 'nebula_graphd_num_query_errors_rate_',
         },
         {
           key: 'sum',
-          value: 'nebula_graphd_num_query_errors_sum_'
+          value: 'nebula_graphd_num_query_errors_sum_',
         },
       ],
     },
   ],
-  storage:[
+  storage: [
     // Hack：atomic operaion is not guarateed in nebula now,thus it's will always return 0 unlesss user config it
     // {
     //   metric: 'add_edges_atomic_latency_us',
@@ -253,19 +251,19 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_storaged_add_edges_latency_us_avg_'
+          value: 'nebula_storaged_add_edges_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_storaged_add_edges_latency_us_p75_'
+          value: 'nebula_storaged_add_edges_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_storaged_add_edges_latency_us_p95_'
+          value: 'nebula_storaged_add_edges_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_storaged_add_edges_latency_us_p99_'
+          value: 'nebula_storaged_add_edges_latency_us_p99_',
         },
       ],
     },
@@ -275,19 +273,19 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_storaged_add_vertices_latency_us_avg_'
+          value: 'nebula_storaged_add_vertices_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_storaged_add_vertices_latency_us_p75_'
+          value: 'nebula_storaged_add_vertices_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_storaged_add_vertices_latency_us_p95_'
+          value: 'nebula_storaged_add_vertices_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_storaged_add_vertices_latency_us_p99_'
+          value: 'nebula_storaged_add_vertices_latency_us_p99_',
         },
       ],
     },
@@ -297,19 +295,19 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_storaged_delete_edges_latency_us_avg_'
+          value: 'nebula_storaged_delete_edges_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_storaged_delete_edges_latency_us_p75_'
+          value: 'nebula_storaged_delete_edges_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_storaged_delete_edges_latency_us_p95_'
+          value: 'nebula_storaged_delete_edges_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_storaged_delete_edges_latency_us_p99_'
+          value: 'nebula_storaged_delete_edges_latency_us_p99_',
         },
       ],
     },
@@ -319,19 +317,19 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_storaged_delete_vertices_latency_us_avg_'
+          value: 'nebula_storaged_delete_vertices_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_storaged_delete_vertices_latency_us_p75_'
+          value: 'nebula_storaged_delete_vertices_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_storaged_delete_vertices_latency_us_p95_'
+          value: 'nebula_storaged_delete_vertices_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_storaged_delete_vertices_latency_us_p99_'
+          value: 'nebula_storaged_delete_vertices_latency_us_p99_',
         },
       ],
     },
@@ -341,19 +339,19 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_storaged_forward_tranx_latency_us_avg_'
+          value: 'nebula_storaged_forward_tranx_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_storaged_forward_tranx_latency_us_p75_'
+          value: 'nebula_storaged_forward_tranx_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_storaged_forward_tranx_latency_us_p95_'
+          value: 'nebula_storaged_forward_tranx_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_storaged_forward_tranx_latency_us_p99_'
+          value: 'nebula_storaged_forward_tranx_latency_us_p99_',
         },
       ],
     },
@@ -363,43 +361,43 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_storaged_get_neighbors_latency_us_avg_'
+          value: 'nebula_storaged_get_neighbors_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_storaged_get_neighbors_latency_us_p75_'
+          value: 'nebula_storaged_get_neighbors_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_storaged_get_neighbors_latency_us_p95_'
+          value: 'nebula_storaged_get_neighbors_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_storaged_get_neighbors_latency_us_p99_'
+          value: 'nebula_storaged_get_neighbors_latency_us_p99_',
         },
-      ]
+      ],
     },
   ],
-  meta:[
+  meta: [
     {
       metric: 'heartbeat_latency_us',
       valueType: VALUE_TYPE.number,
       metricType: [
         {
           key: 'avg',
-          value: 'nebula_metad_heartbeat_latency_us_avg_'
+          value: 'nebula_metad_heartbeat_latency_us_avg_',
         },
         {
           key: 'p75',
-          value: 'nebula_metad_heartbeat_latency_us_p75_'
+          value: 'nebula_metad_heartbeat_latency_us_p75_',
         },
         {
           key: 'p95',
-          value: 'nebula_metad_heartbeat_latency_us_p95_'
+          value: 'nebula_metad_heartbeat_latency_us_p95_',
         },
         {
           key: 'p99',
-          value: 'nebula_metad_heartbeat_latency_us_p99_'
+          value: 'nebula_metad_heartbeat_latency_us_p99_',
         },
       ],
     },
@@ -409,42 +407,56 @@ export const SERVICE_SUPPORT_METRICS = {
       metricType: [
         {
           key: 'rate',
-          value: 'nebula_metad_num_heartbeats_rate_'
+          value: 'nebula_metad_num_heartbeats_rate_',
         },
         {
           key: 'sum',
-          value: 'nebula_metad_num_heartbeats_sum_'
-        }
-      ]
-    }
-  ]
+          value: 'nebula_metad_num_heartbeats_sum_',
+        },
+      ],
+    },
+  ],
 };
 
 export const MAC_OS = {
   // cpu relative:
-  cpu_utilization: '100 * (1 - sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_idle: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_wait: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="iowait"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_user: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="user"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_system: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="system"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_utilization:
+    '100 * (1 - sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_idle:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_wait:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="iowait"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_user:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="user"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_system:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="system"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
 
   // memory relative
-  memory_util: '(1 - avg_over_time(node_memory_free_bytes[1m]) / avg_over_time(node_memory_total_bytes[1m]) )* 100',
+  memory_util:
+    '(1 - avg_over_time(node_memory_free_bytes[1m]) / avg_over_time(node_memory_total_bytes[1m]) )* 100',
   memory_size: 'node_memory_total_bytes',
-  disk_usage_rate: '(1 - (node_filesystem_avail_bytes{mountpoint="/",fstype!="rootfs"} ) /  node_filesystem_size_bytes{mountpoint="/",fstype!="rootfs"})* 100',
+  disk_usage_rate:
+    '(1 - (node_filesystem_avail_bytes{mountpoint="/",fstype!="rootfs"} ) /  node_filesystem_size_bytes{mountpoint="/",fstype!="rootfs"})* 100',
   disk_size: 'node_filesystem_size_bytes{mountpoint="/",fstype!="rootfs"}',
-  network_flow_down: 'sum by(instance)(rate(node_network_receive_bytes_total{device=~"en[0-9]*"}[1m]))',
-  network_flow_up: 'sum by(instance)(rate(node_network_transmit_bytes_total{device=~"en[0-9]*"}[1m]))',
+  network_flow_down:
+    'sum by(instance)(rate(node_network_receive_bytes_total{device=~"en[0-9]*"}[1m]))',
+  network_flow_up:
+    'sum by(instance)(rate(node_network_transmit_bytes_total{device=~"en[0-9]*"}[1m]))',
   node_load5: 'node_load5',
 };
 
 export const LINUX = {
   // cpu relative:
-  cpu_utilization: '100 * (1 - sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_idle: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_wait: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="iowait"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_user: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="user"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
-  cpu_system: '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="system"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_utilization:
+    '100 * (1 - sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_idle:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="idle"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_wait:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="iowait"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_user:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="user"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
+  cpu_system:
+    '100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="system"}[5m])) / sum by (instance)(increase(node_cpu_seconds_total[5m])))',
 
   // memory relative:
   memory_utilization: `(1 - (node_memory_MemFree_bytes+ node_memory_Buffers_bytes+ node_memory_Cached_bytes) / node_memory_MemTotal_bytes )* 100`,
@@ -459,25 +471,37 @@ export const LINUX = {
   load_15m: 'node_load15',
 
   // disk relative:
-  disk_used: 'node_filesystem_size_bytes{mountpoint="/",fstype!="rootfs"} - node_filesystem_avail_bytes{mountpoint="/",fstype!="rootfs"}',
+  disk_used:
+    'node_filesystem_size_bytes{mountpoint="/",fstype!="rootfs"} - node_filesystem_avail_bytes{mountpoint="/",fstype!="rootfs"}',
   disk_free: 'node_filesystem_avail_bytes{mountpoint="/",fstype!="rootfs"}',
-  disk_readbytes: 'irate(node_disk_read_bytes_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
-  disk_writebytes: 'irate(node_disk_written_bytes_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
-  disk_readiops: 'irate(node_disk_reads_completed_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
-  disk_writeiops: 'irate(node_disk_writes_completed_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
-  inode_utilization: '(1- (node_filesystem_files_free{mountpoint="/",fstype!="rootfs"}) / (node_filesystem_files{mountpoint="/",fstype!="rootfs"})) * 100',
+  disk_readbytes:
+    'irate(node_disk_read_bytes_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
+  disk_writebytes:
+    'irate(node_disk_written_bytes_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
+  disk_readiops:
+    'irate(node_disk_reads_completed_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
+  disk_writeiops:
+    'irate(node_disk_writes_completed_total{device=~"(sd|nvme|hd)[a-z0-9]*"}[1m])',
+  inode_utilization:
+    '(1- (node_filesystem_files_free{mountpoint="/",fstype!="rootfs"}) / (node_filesystem_files{mountpoint="/",fstype!="rootfs"})) * 100',
 
   disk_size: 'node_filesystem_size_bytes{mountpoint="/",fstype!="rootfs"}',
-  network_in_rate: 'sum by(instance)(irate(node_network_receive_bytes_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
-  network_out_rate: 'sum by(instance)(irate(node_network_transmit_bytes_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
-  network_in_errs: 'sum by(instance)(irate(node_network_receive_errs_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
-  network_out_errs: 'sum by(instance)(irate(node_network_transmit_errs_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
-  network_in_packets: 'sum by(instance)(irate(node_network_receive_packets_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
-  network_out_packets: 'sum by(instance)(irate(node_network_transmit_packets_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
+  network_in_rate:
+    'sum by(instance)(irate(node_network_receive_bytes_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
+  network_out_rate:
+    'sum by(instance)(irate(node_network_transmit_bytes_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
+  network_in_errs:
+    'sum by(instance)(irate(node_network_receive_errs_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
+  network_out_errs:
+    'sum by(instance)(irate(node_network_transmit_errs_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
+  network_in_packets:
+    'sum by(instance)(irate(node_network_receive_packets_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
+  network_out_packets:
+    'sum by(instance)(irate(node_network_transmit_packets_total{device=~"(eth|en)[a-z0-9]*"}[1m]))',
 };
 
 export const NEBULA_COUNT = {
   graph: 'nebula_graphd_count',
   storage: 'nebula_storaged_count',
-  meta: 'nebula_metad_count'
-};
\ No newline at end of file
+  meta: 'nebula_metad_count',
+};
diff --git a/src/utils/service.ts b/src/utils/service.ts
index 4e8ca6f7..f91b0719 100644
--- a/src/utils/service.ts
+++ b/src/utils/service.ts
@@ -28,37 +28,46 @@ export const LINE_COLORS = [
 ];
 
 export const DEFAULT_SERVICE_PANEL_CONFIG = {
-  graph: [{
-    period: 60,
-    metric: SERVICE_SUPPORT_METRICS.graph[0].metric,
-    metricFunction: SERVICE_SUPPORT_METRICS.graph[0].metricType[0].value,
-    metricType: SERVICE_SUPPORT_METRICS.graph[0].metricType[0].key
-  }, {
-    period: 60,
-    metric: SERVICE_SUPPORT_METRICS.graph[1].metric,
-    metricFunction: SERVICE_SUPPORT_METRICS.graph[1].metricType[0].value,
-    metricType: SERVICE_SUPPORT_METRICS.graph[1].metricType[0].key,
-  }],
-  storage: [{
-    period: 60,
-    metric: SERVICE_SUPPORT_METRICS.storage[0].metric,
-    metricFunction: SERVICE_SUPPORT_METRICS.storage[0].metricType[0].value,
-    metricType: SERVICE_SUPPORT_METRICS.storage[0].metricType[0].key,
-  }, {
-    period: 60,
-    metric: SERVICE_SUPPORT_METRICS.storage[1].metric,
-    metricFunction: SERVICE_SUPPORT_METRICS.storage[1].metricType[0].value,
-    metricType: SERVICE_SUPPORT_METRICS.storage[1].metricType[0].key,
-  }],
-  meta: [{
-    period: 60,
-    metric: SERVICE_SUPPORT_METRICS.meta[0].metric,
-    metricFunction: SERVICE_SUPPORT_METRICS.meta[0].metricType[0].value,
-    metricType: SERVICE_SUPPORT_METRICS.meta[0].metricType[0].key,
-  }, {
-    period: 60,
-    metric: SERVICE_SUPPORT_METRICS.meta[1].metric,
-    metricFunction: SERVICE_SUPPORT_METRICS.meta[1].metricType[0].value,
-    metricType: SERVICE_SUPPORT_METRICS.meta[1].metricType[0].key,
-  }],
-};
\ No newline at end of file
+  graph: [
+    {
+      period: 60,
+      metric: SERVICE_SUPPORT_METRICS.graph[0].metric,
+      metricFunction: SERVICE_SUPPORT_METRICS.graph[0].metricType[0].value,
+      metricType: SERVICE_SUPPORT_METRICS.graph[0].metricType[0].key,
+    },
+    {
+      period: 60,
+      metric: SERVICE_SUPPORT_METRICS.graph[1].metric,
+      metricFunction: SERVICE_SUPPORT_METRICS.graph[1].metricType[0].value,
+      metricType: SERVICE_SUPPORT_METRICS.graph[1].metricType[0].key,
+    },
+  ],
+  storage: [
+    {
+      period: 60,
+      metric: SERVICE_SUPPORT_METRICS.storage[0].metric,
+      metricFunction: SERVICE_SUPPORT_METRICS.storage[0].metricType[0].value,
+      metricType: SERVICE_SUPPORT_METRICS.storage[0].metricType[0].key,
+    },
+    {
+      period: 60,
+      metric: SERVICE_SUPPORT_METRICS.storage[1].metric,
+      metricFunction: SERVICE_SUPPORT_METRICS.storage[1].metricType[0].value,
+      metricType: SERVICE_SUPPORT_METRICS.storage[1].metricType[0].key,
+    },
+  ],
+  meta: [
+    {
+      period: 60,
+      metric: SERVICE_SUPPORT_METRICS.meta[0].metric,
+      metricFunction: SERVICE_SUPPORT_METRICS.meta[0].metricType[0].value,
+      metricType: SERVICE_SUPPORT_METRICS.meta[0].metricType[0].key,
+    },
+    {
+      period: 60,
+      metric: SERVICE_SUPPORT_METRICS.meta[1].metric,
+      metricFunction: SERVICE_SUPPORT_METRICS.meta[1].metricType[0].value,
+      metricType: SERVICE_SUPPORT_METRICS.meta[1].metricType[0].key,
+    },
+  ],
+};
diff --git a/src/utils/stat.ts b/src/utils/stat.ts
index 272fb6f3..f578eb52 100644
--- a/src/utils/stat.ts
+++ b/src/utils/stat.ts
@@ -68,12 +68,8 @@ export const handleTrackEvent = event => {
     }
   }
   if (target) {
-    const {
-      trackCategory,
-      trackAction,
-      trackLabel,
-      trackValue,
-    } = target.dataset;
+    const { trackCategory, trackAction, trackLabel, trackValue } =
+      target.dataset;
     trackEvent(trackCategory, trackAction, trackLabel, trackValue);
   }
-};
\ No newline at end of file
+};
diff --git a/src/utils/url.ts b/src/utils/url.ts
index b4d3f175..f03d0d19 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -1,9 +1,8 @@
 export function updateQueryStringParameter(uri, key, value) {
-  const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+  const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
   const separator = uri.indexOf('?') !== -1 ? '&' : '?';
   if (uri.match(re)) {
-    return uri.replace(re, '$1' + key + '=' + value + '$2');
-  } else {
-    return uri + separator + key + '=' + value;
+    return uri.replace(re, `$1${key}=${value}$2`);
   }
+  return `${uri + separator + key}=${value}`;
 }