feat: add dependency service monitor

.gitignore

@@ -34,3 +34,4 @@ docker/data
 docker/tmp
 .travis.yml
 appveyor.yml
+server/config.json

server/config.json

@@ -8,14 +8,14 @@
       "target": "192.168.8.44:9090"
     },
     "graph":{
-      "target": "192.168.8.156:19669"
+      "target": "192.168.8.44:19669"
     },
     "storage":{
-      "target": "192.168.8.156:19779"
+      "target": "192.168.8.44:19779"
     }
   },
   "nebulaServer": {
-    "ip": "192.168.8.156",
+    "ip": "192.168.8.44",
     "port": 9669
   }
 }

src/components/Service/ServiceCardEdit/index.tsx

@@ -6,19 +6,15 @@ import intl from 'react-intl-universal';
 import { TIME_INTERVAL_OPTIONS } from '@/utils/dashboard';
 import { DashboardSelect, Option } from '@/components/DashboardSelect';
 import { MetricPopover } from '@/components/MetricPopover';
-import { IServicePanelConfig } from '@/utils/interface';
+import { IPanelConfig, ServiceName } from '@/utils/interface';
 
 import './index.less';
 
 interface IProps {
-  editType: string;
+  editType: ServiceName;
   editIndex: number;
   serviceMetric: any;
-  panelConfig: {
-    graph: IServicePanelConfig[];
-    storage: IServicePanelConfig[];
-    meta: IServicePanelConfig[];
-  };
+  panelConfig: IPanelConfig;
   onClose: () => void;
   onPanelConfigUpdate: (values) => void;
 }

src/components/Service/ServiceHeader/index.tsx

@@ -3,21 +3,23 @@ import Icon from '@/components/Icon';
 import metadIcon from '@/static/images/Metad-icon60.png';
 import graphdIcon from '@/static/images/Graphd-icon60.png';
 import storagedIcon from '@/static/images/Storaged-icon60.png';
+import { ServiceName } from '@/utils/interface';
 import './index.less';
 
 interface IProps {
+  serviceType: ServiceName;
   title: string;
   icon?: string;
 }
 class ServiceHeader extends React.PureComponent<IProps> {
   getLogo = () => {
-    const { title } = this.props;
-    switch (title) {
-      case 'Graph Service':
+    const { serviceType } = this.props;
+    switch (serviceType) {
+      case ServiceName.GRAPHD:
         return graphdIcon;
-      case 'Storage Service':
+      case ServiceName.STORAGED:
         return storagedIcon;
-      case 'Meta Service':
+      case ServiceName.METAD:
         return metadIcon;
       default:
         break;

src/components/ServiceMetricsFilterPanel/index.tsx

@@ -2,11 +2,12 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Form } from 'antd';
 import intl from 'react-intl-universal';
 
+import { AGGREGATION_OPTIONS, TIME_INTERVAL_OPTIONS } from '@/utils/dashboard';
+import { ServiceName } from '@/utils/interface';
 import MetricsFilterPanel from '../MetricsFilterPanel';
 import { DashboardSelect, Option } from '../DashboardSelect';
 
 import styles from './index.module.less';
-import { AGGREGATION_OPTIONS, TIME_INTERVAL_OPTIONS } from '@/utils/dashboard';
 
 interface IProps {
   spaces?: string[];
@@ -16,10 +17,11 @@ interface IProps {
   onRefresh?: (values: any) => void;
   metrics?: string[];
   onMetricsChange?: (metrics: string[]) => void;
+  serviceTypes?: ServiceName[];
 }
 
 function ServiceMetricsFilterPanel(props: IProps) {
-  const { spaces, instanceList, onChange, values, onRefresh, metrics, onMetricsChange } = props;
+  const { spaces, instanceList, onChange, values, onRefresh, metrics, onMetricsChange, serviceTypes } = props;
 
   const panelRef = useRef<any>()
 
@@ -60,6 +62,14 @@ function ServiceMetricsFilterPanel(props: IProps) {
     onChange?.(form.getFieldsValue());
   }
 
+  const handleServiceTypeChange = (value) => {
+    if (!form) return;
+    form.setFieldsValue({
+      serviceType: value,
+    });
+    onChange?.(form.getFieldsValue());
+  }
+
   return (
     <div className={styles.filterPanelContent}>
       <MetricsFilterPanel
@@ -70,6 +80,19 @@ function ServiceMetricsFilterPanel(props: IProps) {
         metrics={metrics}
         onMetricsChange={onMetricsChange}
       >
+        {
+          serviceTypes && (
+            <Form.Item label={intl.get('service.serviceType')} name="serviceType">
+              <DashboardSelect onChange={handleServiceTypeChange}>
+                {serviceTypes.map(serviceType => (
+                  <Option key={serviceType} value={serviceType}>
+                    {serviceType}
+                  </Option>
+                ))}
+              </DashboardSelect>
+            </Form.Item>
+          )
+        }
         {
           spaces && (
             <Form.Item label={intl.get('service.spaces')} name="space">

src/components/StatusPanel/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
-import { NEBULA_COUNT } from '@/utils/promQL';
 import { DETAIL_DEFAULT_RANGE } from '@/utils/dashboard';
 import { shouldCheckCluster } from '@/utils';
+import { ServiceName } from '@/utils/interface';
 import './index.less';
 
 const mapState = (state: any) => ({
@@ -14,7 +14,7 @@ const mapState = (state: any) => ({
 const mapDispatch = (dispatch) => ({});
 
 interface IProps extends ReturnType<typeof mapState>  {
-  type: string;
+  type: ServiceName;
   clusterID?: string;
   getStatus: (payload) => void;
 }
@@ -50,7 +50,7 @@ function StatusPanel(props: IProps) {
 
   const asyncGetStatus = async () => {
     const { normal, abnormal } = (await getStatus({
-      query: NEBULA_COUNT[type],
+      query: `nebula_${type}_count`,
       end: Date.now(),
       interval: DETAIL_DEFAULT_RANGE,
       clusterID: cluster?.id,

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

@@ -118,7 +118,13 @@
   "num_delete_vertices":	"The number of times that vertices are deleted.",
   "num_lookup":	"The number of executions for the LookupProcessor.",
   "disk_used_percentage":  "The percentage of disk used.",
-  "num_sync_data": "Storage 同步 Drainer 数据的次数。",
-  "num_sync_data_errors": "Storage 同步 Drainer 数据出错的次数。",
+  "num_sync_data": "The number of times the storage synchronizes data from drainer.",
+  "num_sync_data_errors": "The number of errors the storage synchronizes data from drainer.",
+  "context_switches_total": "The total num of context switches.",
+  "cpu_seconds_total": "The total num of cpu seconds.",
+  "memory_bytes_gauge": "The memory bytes.",
+  "open_filedesc_gauge": "The open file descriptor.",
+  "read_bytes_total": "The total num of read bytes.",
+  "write_bytes_total": "The total num of write bytes.",
   "more": "More"
 }

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

@@ -1,27 +1,29 @@
 {
-  "serviceStatus": "Status(now)",
-  "version":"Nebula version",
-  "normal": "Normal",
-  "overload": "Overload",
-  "abnormal": "Abnormal",
-  "qps": "QPS",
-  "leaderNumber": "Leader Number",
-  "leaderDistribute": "Leader distribution",
-  "all":"All",
-  "type":"Service Type",
-  "total":"Total",
-  "spaces":"Spaces",
-  "services":"Services",
-  "partition":"Partition",
-  "partitionNum": "Partition Number",
-  "distribution": "Distribution",
-  "instance":"Instance",
-  "period":"Period(s)",
-  "metric":"Metric",
-  "metricParams":"Metric Methods",
-  "queryCondition":"Query Condition",
-  "serviceMetricsDetails": "Service Metrics Details",
-  "chooseSpace": "Please Choose Space",
-  "enterPartitionId": "Please enter the partitionId",
-  "chooseHost":"Please choose Host"
-}
+	"serviceStatus": "Status(now)",
+	"version": "Nebula version",
+	"normal": "Normal",
+	"overload": "Overload",
+	"abnormal": "Abnormal",
+	"qps": "QPS",
+	"leaderNumber": "Leader Number",
+	"leaderDistribute": "Leader distribution",
+	"all": "All",
+	"type": "Service Type",
+	"total": "Total",
+	"spaces": "Spaces",
+	"services": "Services",
+	"partition": "Partition",
+	"partitionNum": "Partition Number",
+	"distribution": "Distribution",
+	"instance": "Instance",
+	"period": "Period(s)",
+	"metric": "Metric",
+	"metricParams": "Metric Methods",
+	"queryCondition": "Query Condition",
+	"serviceMetricsDetails": "Service Metrics Details",
+	"chooseSpace": "Please Choose Space",
+	"enterPartitionId": "Please enter the partitionId",
+	"chooseHost": "Please choose Host",
+	"serviceType": "Service Type",
+	"noServiceInstalled": "No dependency services installed"
+}

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

@@ -119,7 +119,13 @@
   "num_delete_vertices":	"删除点的次数。",
   "num_lookup":	"LookupProcessor 执行的次数。",
   "disk_used_percentage":	"磁盘使用率",
-  "num_sync_data": "The number of times the storage synchronizes data from drainer.",
-  "num_sync_data_errors": "The number of errors the storage synchronizes data from drainer.",
+  "num_sync_data": "Storage 同步 Drainer 数据的次数。",
+  "num_sync_data_errors": "Storage 同步 Drainer 数据出错的次数。",
+  "context_switches_total": "线程切换次数。",
+  "cpu_seconds_total": "CPU 使用时间(s)。",
+  "memory_bytes_gauge": "内存使用量。",
+  "open_filedesc_gauge": "打开的文件描述符数量。",
+  "read_bytes_total": "读取的字节数。",
+  "write_bytes_total": "写入的字节数。",
   "more": "更多参数说明"
 }

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

@@ -1,26 +1,28 @@
 {
-  "serviceStatus": "当前服务状态",
-  "normal": "正常",
-  "overload": "超负荷",
-  "abnormal": "异常",
-  "qps": "QPS",
-  "leaderNumber": "Leader 数量",
-  "leaderDistribute": "Leader 分布",
-  "all": "全部",
-  "type": "服务类型",
-  "total": "总计",
-  "spaces": "图空间",
-  "services": "服务",
-  "partition": "分片",
-  "partitionNum": "分片数",
-  "distribution": "分布",
-  "instance": "实例",
-  "period": "周期",
-  "metric": "指标",
-  "metricParams": "聚合方式",
-  "queryCondition": "查询条件",
-  "serviceMetricsDetails": "服务指标详情",
-  "chooseSpace": "请选择图空间",
-  "enterPartitionId": "请输入 partitionId",
-  "chooseHost":"请选择操作的 Host"
-}
+	"serviceStatus": "当前服务状态",
+	"normal": "正常",
+	"overload": "超负荷",
+	"abnormal": "异常",
+	"qps": "QPS",
+	"leaderNumber": "Leader 数量",
+	"leaderDistribute": "Leader 分布",
+	"all": "全部",
+	"type": "服务类型",
+	"total": "总计",
+	"spaces": "图空间",
+	"services": "服务",
+	"partition": "分片",
+	"partitionNum": "分片数",
+	"distribution": "分布",
+	"instance": "实例",
+	"period": "周期",
+	"metric": "指标",
+	"metricParams": "聚合方式",
+	"queryCondition": "查询条件",
+	"serviceMetricsDetails": "服务指标详情",
+	"chooseSpace": "请选择图空间",
+	"enterPartitionId": "请输入 partitionId",
+	"chooseHost": "请选择操作的 Host",
+	"serviceType": "服务类型",
+	"noServiceInstalled": "您还没有安装任何依赖服务"
+}

src/pages/MainPage/Header/index.tsx

@@ -34,9 +34,9 @@ class Header extends React.PureComponent<IProps, IState> {
   };
 
   handleBack = () => {
-    const { breadcrumb } = this.props.config;
-    const path = breadcrumb[breadcrumb.length - 2].path;
-    this.props.history.push(path);
+    // const { breadcrumb } = this.props.config;
+    // const path = breadcrumb[breadcrumb.length - 2].path;
+    this.props.history.goBack();
   };
 
   render() {

src/pages/MainPage/index.tsx

@@ -120,7 +120,6 @@ class MainPage extends React.Component<IProps, IState> {
     const { appVersion } = this.props;
     const [, activeOpenSubMenu, activeMenu] =
       this.props.location.pathname.split('/');
-      debugger;
     let activeKey =
       activeMenu === 'overview'
         ? `${activeOpenSubMenu}-${activeMenu}`