fix: storaged and metad don't have space level metrics (#82)

fix: baseline not show when value is 0 fix: version upgrade left align
vesoft-inc · Jul 4, 2022 · 0ed8f07 · 0ed8f07
1 parent cf39e2d
commit 0ed8f07
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 56 deletions.
diff --git a/config.json b/config.json
@@ -2,7 +2,7 @@
   "port": 7003,
   "proxy":{
     "gateway":{
-      "target": "http://localhost:8090"
+      "target": "http://192.168.8.44:8090"
     },
     "prometheus":{
       "target": "192.168.8.157:9090"

diff --git a/src/components/BaseLineEditModal/index.tsx b/src/components/BaseLineEditModal/index.tsx
@@ -5,6 +5,7 @@ import { renderUnit } from '@/utils/dashboard';
 
 import './index.less';
 import ModalWrapper from '../ModalWrapper';
+import { VALUE_TYPE } from '@/utils/promQL';
 
 interface IProps {
   visible?: boolean;
@@ -73,7 +74,7 @@ function BaseLineEditModal(props: IProps) {
               { required: true, message: intl.get('common.baseLineTip') },
             ]}
           >
-            <InputNumber type="number" min={0} />
+            <InputNumber type="number" min={0} max={valueType === VALUE_TYPE.percentage ? 100 : undefined} />
           </Form.Item>
           {units.length !== 0 && (
             <Form.Item

diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx
@@ -5,14 +5,13 @@ import { ChartCfg } from '@antv/g2/lib/interface';
 export interface IProps {
   renderChart: (chartInstance: Chart) => void;
   options?: Partial<ChartCfg>;
-  tickInterval?: number;
   baseLine?: number;
   yAxisMaximum?: number;
   isDefaultScale?: boolean;
 }
 
 function LineChart(props: IProps, ref) {
-  const { isDefaultScale, yAxisMaximum, baseLine, tickInterval, options, renderChart } = props;
+  const { isDefaultScale, yAxisMaximum, baseLine, options, renderChart } = props;
 
   const chartRef = useRef<any>();
 
@@ -78,7 +77,7 @@ function LineChart(props: IProps, ref) {
   }, [options, baseLine])
 
   useImperativeHandle(ref, () => ({
-    updateChart: (baseLine) => {
+    updateBaseline: (baseLine) => {
       updateChart(baseLine);
     },
   }))
@@ -93,7 +92,7 @@ function LineChart(props: IProps, ref) {
           tickInterval: 25,
         },
       });
-    } else if (yAxisMaximum === 0 && baseLine) {
+    } else if ((yAxisMaximum === undefined ||  yAxisMaximum === 0) && baseLine) {
       chartInstanceRef.current?.scale('value', {
         ticks: [0, baseLine, Math.round(baseLine * 1.5)],
       });

diff --git a/src/components/Charts/SpaceChart.tsx b/src/components/Charts/SpaceChart.tsx
@@ -17,12 +17,12 @@ function SpaceChart(props: IProps) {
   const { diskInfos } = props;
 
   const diskInfoMap = useMemo(() => _.groupBy(diskInfos, 'name'), [diskInfos])
-  
+
   const instances: string[] = useMemo(() => Object.keys(diskInfoMap), [diskInfoMap])
-  
+
   const [curInstances, setCurInstances] = useState<string[]>([]);
 
-  const [ seletedInstance, setSeletedInstance ] = useState<string>('all');
+  const [seletedInstance, setSeletedInstance] = useState<string>('all');
 
   useEffect(() => {
     setCurInstances(instances);
@@ -61,12 +61,19 @@ function SpaceChart(props: IProps) {
       const displayInfos = getDisplayInfos(diskInfoMap[instance] || []);
       return (
         <div key={instance} className="disk-tr">
-          <div className='disk-tr-item disk-name'>{instance}</div>
+          <div className='disk-tr-item disk-name'>
+            <Popover
+              content={instance}
+              placement='topLeft'
+            >
+              <div className='disk-tr-item-info text-overflow'>{instance}</div>
+            </Popover>
+          </div>
           <div className='disk-tr-item'>
             {
               displayInfos.map(i => i.device).map((device, i) => (
                 <Popover
-                  key={i} 
+                  key={i}
                   content={device}
                   placement='topLeft'
                 >
@@ -79,7 +86,7 @@ function SpaceChart(props: IProps) {
             {
               displayInfos.map(i => i.mountpoint).map((mountpoint, i) => (
                 <Popover
-                  key={i} 
+                  key={i}
                   content={mountpoint}
                   placement='top'
                 >
@@ -123,8 +130,8 @@ function SpaceChart(props: IProps) {
         </div>
         {renderDiskInfo()}
       </div>
-      <Select 
-        className="instance-select" 
+      <Select
+        className="instance-select"
         bordered={false}
         value={seletedInstance}
         onSelect={(value: any) => handleInstanceShow(value)}

diff --git a/src/components/ServiceMetricsFilterPanel/index.tsx b/src/components/ServiceMetricsFilterPanel/index.tsx
@@ -9,7 +9,7 @@ import styles from './index.module.less';
 import { AGGREGATION_OPTIONS, TIME_INTERVAL_OPTIONS } from '@/utils/dashboard';
 
 interface IProps {
-  spaces: string[];
+  spaces?: string[];
   instanceList: string[];
   onChange?: (values) => void;
   values?: any;
@@ -29,7 +29,7 @@ function ServiceMetricsFilterPanel(props: IProps) {
       form.setFieldsValue(values);
     }
   }, [values, form]);
-  
+
   const handleSpaceChange = (value) => {
     if (!form) return;
     form.setFieldsValue({
@@ -60,24 +60,28 @@ function ServiceMetricsFilterPanel(props: IProps) {
 
   return (
     <div className={styles.filterPanelContent}>
-      <MetricsFilterPanel 
-        instanceList={instanceList} 
+      <MetricsFilterPanel
+        instanceList={instanceList}
         ref={panelRef}
         onChange={handleFilterPanelChange}
         onRefresh={onRefresh}
       >
-        <Form.Item label={intl.get('service.spaces')} name="space">
-          <DashboardSelect onChange={handleSpaceChange}>
-            <Option key="all" value="">
-              {intl.get('common.all')}
-            </Option>
-            {spaces.map(space => (
-              <Option key={space} value={space}>
-                {space}
-              </Option>
-            ))}
-          </DashboardSelect>
-        </Form.Item>
+        {
+          spaces && (
+            <Form.Item label={intl.get('service.spaces')} name="space">
+              <DashboardSelect onChange={handleSpaceChange}>
+                <Option key="all" value="">
+                  {intl.get('common.all')}
+                </Option>
+                {spaces.map(space => (
+                  <Option key={space} value={space}>
+                    {space}
+                  </Option>
+                ))}
+              </DashboardSelect>
+            </Form.Item>
+          )
+        }
         <Form.Item
           className="metric-period"
           label={intl.get('service.period')}

diff --git a/src/pages/MachineDashboard/Detail/index.tsx b/src/pages/MachineDashboard/Detail/index.tsx
@@ -139,7 +139,7 @@ function Detail(props: IProps) {
       unit,
       valueType: metricChart.valueType,
     });
-    metricChart.chartRef.updateChart(metricChart.baseLine);
+    metricChart.chartRef.updateBaseline(metricChart.baseLine);
   };
 
   const renderChart = (i: number) => (chartInstance: Chart) => {
@@ -186,12 +186,6 @@ function Detail(props: IProps) {
     });
   };
 
-
-  const getTickInterval = () => {
-    const [startTimestamps, endTimestamps] = calcTimeRange(metricsFilterValues.timeRange);
-    return getProperTickInterval(endTimestamps - startTimestamps);
-  }
-
   const handleRefreshData = () => {
     setShowLoading(loading);
     getData();
@@ -229,7 +223,6 @@ function Detail(props: IProps) {
                       metricChart.metric.valueType === VALUE_TYPE.percentage
                     }
                     yAxisMaximum={maxNum}
-                    tickInterval={getTickInterval()}
                     baseLine={metricChart.baseLine}
                     options={{ padding: [10, 70, 70, 70] }}
                     ref={ref => metricChart.chartRef = ref}

diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx
@@ -1,5 +1,5 @@
 import { Popover, Spin } from 'antd';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import intl from 'react-intl-universal';
 import { RouteComponentProps, useLocation, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -60,7 +60,6 @@ function ServiceDetail(props: IProps) {
 
   const [serviceType, setServiceType] = useState<string>('');
   const [dataSources, setDataSources] = useState<any[]>([]);
-  const [maxNum, setMaxNum] = useState(0);
   const [showLoading, setShowLoading] = useState<boolean>(false);
 
   useEffect(() => {
@@ -187,7 +186,7 @@ function ServiceDetail(props: IProps) {
           query: item.metricFunction + period,
           start: startTime,
           end: endTime,
-          space,
+          space: serviceType === 'graph' ? space : undefined,
           clusterID: cluster?.id,
         }).then(res => {
           resolve(res);
@@ -254,18 +253,13 @@ function ServiceDetail(props: IProps) {
       unit,
       valueType: metricChart.valueType,
     });
-    metricChart.chartRef.updateChart(metricChart.baseLine);
+    metricChart.chartRef.updateBaseline(metricChart.baseLine);
   };
 
   const handleMetricChange = async values => {
     updateMetricsFiltervalues(values);
   };
 
-  const getTickInterval = () => {
-    const [startTimestamps, endTimestamps] = calcTimeRange(metricsFilterValues.timeRange);
-    return getProperTickInterval(endTimestamps - startTimestamps);
-  }
-
   const handleRefresh = () => {
     setShowLoading(!!loading);
     asyncGetMetricsData();
@@ -278,7 +272,7 @@ function ServiceDetail(props: IProps) {
           <ServiceMetricsFilterPanel
             onChange={handleMetricChange}
             instanceList={instanceList}
-            spaces={serviceMetric.spaces}
+            spaces={serviceType === 'graph' ? serviceMetric.spaces : undefined}
             values={metricsFilterValues}
             onRefresh={handleRefresh}
           />
@@ -305,7 +299,6 @@ function ServiceDetail(props: IProps) {
                       metricChart.valueType === VALUE_TYPE.percentage
                     }
                     yAxisMaximum={metricChart.maxNum}
-                    tickInterval={getTickInterval()}
                     baseLine={metricChart.baseLine}
                     options={{ padding: [20, 20, 60, 50] }}
                     ref={ref => metricChart.chartRef = ref}

diff --git a/src/utils/chart/chart.ts b/src/utils/chart/chart.ts
@@ -34,7 +34,7 @@ export const configDetailChart = (
     valueType?: VALUE_TYPE;
     isCard?: boolean;
     maxNum?: number;
-  },
+  }
 ): Chart => {
   chartInstance
     .axis('time', {

diff --git a/src/utils/dashboard.ts b/src/utils/dashboard.ts
@@ -265,7 +265,7 @@ export const TIMEOPTIONS = [
 export const NEED_ADD_SUM_QUERYS = [
   // For Instanc
   'memory_used',
-  'memory_actual_used',
+  // 'memory_actual_used',
   'memory_free',
   'disk_used',
   'disk_free',

diff --git a/src/utils/promQL.ts b/src/utils/promQL.ts
@@ -43,10 +43,10 @@ export const SUPPORT_METRICS = {
       metric: 'memory_used',
       valueType: VALUE_TYPE.byte,
     },
-    {
-      metric: 'memory_actual_used',
-      valueType: VALUE_TYPE.byte,
-    },
+    // {
+    //   metric: 'memory_actual_used',
+    //   valueType: VALUE_TYPE.byte,
+    // },
     {
       metric: 'memory_free',
       valueType: VALUE_TYPE.byte,
@@ -441,7 +441,7 @@ export const LINUX = (cluster?) => {
     // memory relative:
     memory_utilization: `(1 - (node_memory_MemFree_bytes${clusterSuffix2}+ node_memory_Buffers_bytes${clusterSuffix2}+ node_memory_Cached_bytes${clusterSuffix2}) / node_memory_MemTotal_bytes${clusterSuffix2} )* 100`,
     memory_used: `node_memory_MemTotal_bytes${clusterSuffix2} - node_memory_MemFree_bytes${clusterSuffix2}- node_memory_Buffers_bytes${clusterSuffix2}  - node_memory_Cached_bytes${clusterSuffix2}`,
-    memory_actual_used: `node_memory_MemTotal_bytes${clusterSuffix2} - node_memory_MemFree_bytes${clusterSuffix2} - node_memory_Buffers_bytes${clusterSuffix2} - node_memory_Cached_bytes${clusterSuffix2}`,
+    // memory_actual_used: `node_memory_MemTotal_bytes${clusterSuffix2} - node_memory_MemFree_bytes${clusterSuffix2} - node_memory_Buffers_bytes${clusterSuffix2} - node_memory_Cached_bytes${clusterSuffix2}`,
     memory_free: `node_memory_MemFree_bytes${clusterSuffix2}`,
     memory_size: `node_memory_MemTotal_bytes${clusterSuffix2}`,