feat: update monitor dashboard (#263)

src/components/Charts/SpaceChart.less

@@ -82,6 +82,10 @@
 
 .disk-info-content {
   display: flex;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 10;
 }
 
 .disk-th {
@@ -112,7 +116,7 @@
   justify-content: center;
 }
 
-.disk-tr-item > div:not(:last-child) {
+.disk-tr-item>div:not(:last-child) {
   margin-bottom: 20px;
 }
 
@@ -201,9 +205,10 @@
   position: absolute !important;
   top: 10px;
   right: 70px;
+
   // width: 200px;
-  > .ant-select-arrow {
+  >.ant-select-arrow {
     margin-top: -8px !important;
     color: #000 !important;
   }
-}
+}

src/components/DashboardCard/index.less

@@ -1,6 +1,6 @@
 .dashboard-card {
 	padding: 5px;
-  min-height: 293px;
+  // min-height: 293px;
   height: 320px;
 
 	> .inner {

src/components/MetricCard/index.tsx

@@ -3,20 +3,11 @@ import intl from 'react-intl-universal';
 
 import LineCard from '@/components/DashboardCard/LineCard';
 import { VALUE_TYPE } from '@/utils/promQL';
-import { ILineChartMetric } from '@/utils/interface';
+import { ILineChartMetric, PromResultMetric } from '@/utils/interface';
 import { asyncBatchQueries } from '@/requests';
 import { calcTimeRange, TIME_OPTION_TYPE } from '@/utils/dashboard';
 import { getQueryRangeInfo } from '@/utils';
 
-export interface PromResultMetric {
-  componentType: string;
-  instance: string;
-  instanceName: string;
-  nebula_cluster: string;
-  __name__: string;
-  device?: string;
-}
-
 interface IProps {
   valueType: VALUE_TYPE;
   queries: any;
@@ -43,6 +34,7 @@ const MetricCard = forwardRef((props: IProps, ref) => {
   }
 
   const asyncGetMetricData = async (queries) => {
+    if (queries.length === 0) return;
     const curTimeRange = calcTimeRange(timeRange);
     const { start, end, step } = getQueryRangeInfo(curTimeRange[0], curTimeRange[1]);
     const data: any = await asyncBatchQueries(queries.map(q => ({
@@ -75,7 +67,7 @@ const MetricCard = forwardRef((props: IProps, ref) => {
     <LineCard
       data={metricData}
       onChangeBrush={props.onChangeBrush}
-      onRef={(ref)=>{chartRef.current = ref;}}
+      onRef={(ref) => { chartRef.current = ref; }}
       valueType={valueType}
       loading={false}
     />

src/pages/MachineDashboard/Cards/DiskCard.tsx

@@ -34,11 +34,11 @@ const DiskCard = forwardRef((props: IProps, ref) => {
     const queries: any = [
       {
         refId: 'diskSize',
-        query: `node_filesystem_size_bytes{fstype=~"ext.*|xfs",mountpoint !~".*pod.*"${clusterSuffix1}${instanceSuffix}}`
+        query: `node_filesystem_size_bytes{mountpoint !~".*pod.*"${clusterSuffix1}${instanceSuffix}}`
       },
       {
         refId: 'diskUsed',
-        query: `node_filesystem_size_bytes{fstype=~"ext.*|xfs",mountpoint !~".*pod.*"${clusterSuffix1}${instanceSuffix}} - node_filesystem_free_bytes{fstype=~"ext.*|xfs",mountpoint !~".*pod.*"${clusterSuffix1}${instanceSuffix}}`
+        query: `node_filesystem_size_bytes{mountpoint !~".*pod.*"${clusterSuffix1}${instanceSuffix}} - node_filesystem_free_bytes{fstype=~"ext.*|xfs",mountpoint !~".*pod.*"${clusterSuffix1}${instanceSuffix}}`
       }
     ];
     const data = await asyncBatchQueries(queries);

src/pages/ServiceDashboard/ServiceOverview/index.tsx

@@ -2,12 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
 
-import { BatchQueryItem, IServiceMetricItem, ServiceName } from '@/utils/interface';
+import { BatchQueryItem, IServiceMetricItem, PromResultMetric, ServiceName } from '@/utils/interface';
 import ServiceHeader from '@/components/Service/ServiceHeader';
 import Icon from '@/components/Icon';
 import { AggregationType, TIME_OPTION_TYPE } from '@/utils/dashboard';
 import { ServicePanelConfig } from '../defaultPanelConfig';
-import MetricCard, { PromResultMetric } from '@/components/MetricCard';
+import MetricCard from '@/components/MetricCard';
 
 import styles from './index.module.less';
 import { getClusterPrefix } from '@/utils/promQL';

src/utils/interface.ts

@@ -186,4 +186,13 @@ export interface MachinePanelConfig {
   valueType: VALUE_TYPE;
   showIndex?: number;
   refIds: string[];
+}
+
+export interface PromResultMetric {
+  componentType: string;
+  instance: string;
+  instanceName: string;
+  nebula_cluster: string;
+  __name__: string;
+  device?: string;
 }

src/utils/promQL.ts

@@ -152,7 +152,7 @@ export const getClusterPrefix = () => {
   return 'nebula_cluster';
 }
 
-export const diskPararms = 'fstype=~"ext.*|xfs",mountpoint !~".*pod.*"';
+export const diskPararms = 'mountpoint !~".*pod.*"';
 
 const getPromqlLabel = (cluster?, device?: string, instance?: string) => {
   const clusterSuffix = cluster ? `${getClusterPrefix()} = "${cluster}"` : '';