feat(metrics-chart): add nullValue config

pingcap · Jul 19, 2022 · 7ccb9a8 · 7ccb9a8
1 parent 502174f
commit 7ccb9a8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx
@@ -38,7 +38,8 @@ import {
   processRawData,
   PromMatrixData,
   QueryOptions,
-  resolveQueryTemplate
+  resolveQueryTemplate,
+  TransformNullValue
 } from '@lib/utils/prometheus'
 import { AxiosPromise } from 'axios'
 import { ReqConfig } from '@lib/types'
@@ -96,6 +97,7 @@ export interface IMetricChartProps {
   queries: IQueryOption[]
   unit?: string
   type: GraphType
+  nullValue?: TransformNullValue
 
   height?: number
 
@@ -126,7 +128,8 @@ export default function MetricChart({
   height = 200,
   onRangeChange,
   onLoadingStateChange,
-  getMetrics
+  getMetrics,
+  nullValue = TransformNullValue.NULL
 }: IMetricChartProps) {
   const chartRef = useRef<Chart>(null)
   const chartContainerRef = useRef<HTMLDivElement>(null)
@@ -204,10 +207,23 @@ export default function MetricChart({
           if (data === null) {
             return
           }
+
+          // transform data according to nullValue config
+          const transformedData =
+            nullValue === TransformNullValue.AS_ZERO
+              ? data.map((d) => {
+                  if (d[1] !== null) {
+                    return d
+                  }
+                  d[1] = 0
+                  return d
+                })
+              : data
+
           sd.push({
             id: `${queryIdx}_${seriesIdx}`,
             name: format(queries[queryIdx].name, promResult.metric),
-            data,
+            data: transformedData,
             color: queries[queryIdx].color
           })
         })

diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
@@ -38,20 +38,20 @@ export function processRawData(
       let dpValue: number | null = parseSampleValue(value[1])
 
       if (isNaN(dpValue)) {
-        dpValue = 0
+        dpValue = null
       }
 
       const timestamp = value[0] * 1000
       for (let t = baseTimestamp; t < timestamp; t += stepMs) {
-        dps.push([t, 0])
+        dps.push([t, null])
       }
       baseTimestamp = timestamp + stepMs
       dps.push([timestamp, dpValue])
     }
 
     const endTimestamp = options.end * 1000
     for (let t = baseTimestamp; t <= endTimestamp; t += stepMs) {
-      dps.push([t, 0])
+      dps.push([t, null])
     }
 
     return dps

diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts
@@ -84,6 +84,11 @@ export type MatrixOrVectorResult =
   | PromMatrixData['result'][0]
   | PromVectorData['result'][0]
 
+export enum TransformNullValue {
+  NULL = 'null',
+  AS_ZERO = 'as_zero'
+}
+
 // Our customized types
 
 export interface QueryOptions {