Merge branch 'refineMetricsPlan' of https://github.com/yinixu9506/tid…

…b-dashboard into refineMetricsPlan
pingcap · Jul 20, 2022 · 4b245b9 · 4b245b9
2 parents 6cc7829 + f92eec0
commit 4b245b9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts
@@ -1,38 +1,43 @@
 import { QueryData } from '@lib/components/MetricChart/seriesRenderer'
 import { ColorType, TransformNullValue } from '@lib/utils/prometheus'
 
-function transformColorBySQLTypeAndPhase(legendLabel: string) {
+function transformColorBySQLType(legendLabel: string) {
   switch (legendLabel) {
-    case 'Cop':
-      return ColorType.BLUE_1
     case 'Select':
-    case 'Get':
       return ColorType.BLUE_3
-    case 'BatchGet':
-      return ColorType.BLUE_4
+    case 'Commit':
+      return ColorType.GREEN_2
     case 'Insert':
-    case 'Prewrite':
-    case 'execute':
       return ColorType.GREEN_3
     case 'Update':
+      return ColorType.GREEN_4
+    case 'general':
+      return ColorType.PINK
+    default:
+      return undefined
+  }
+}
+
+function transformColorByExecTimeOverview(legendLabel: string) {
+  switch (legendLabel) {
+    case 'tso_wait':
+      return ColorType.RED_5
     case 'Commit':
       return ColorType.GREEN_4
-    case 'parse':
-      return ColorType.RED_2
-    case 'Show':
-    case 'get token':
-      return ColorType.RED_3
+    case 'Prewrite':
+      return ColorType.GREEN_3
     case 'PessimisticLock':
       return ColorType.RED_4
-    case 'tso_wait':
-      return ColorType.RED_5
+    case 'Get':
+      return ColorType.BLUE_3
+    case 'BatchGet':
+      return ColorType.BLUE_4
+    case 'Cop':
+      return ColorType.BLUE_1
     case 'Scan':
       return ColorType.PURPLE
     case 'execute time':
-    case 'database time':
       return ColorType.YELLOW
-    case 'compile':
-      return ColorType.ORANGE
     default:
       return undefined
   }
@@ -97,7 +102,7 @@ const metricsItems = [
           {
             query: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval]))`,
             name: 'database time',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.YELLOW
           }
         ],
         nullValue: TransformNullValue.AS_ZERO,
@@ -110,7 +115,7 @@ const metricsItems = [
           {
             query: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type)`,
             name: '{sql_type}',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: (qd: QueryData) => transformColorBySQLType(qd.name)
           }
         ],
         unit: 's',
@@ -122,22 +127,22 @@ const metricsItems = [
           {
             query: `sum(rate(tidb_session_parse_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`,
             name: 'parse',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.RED_2
           },
           {
             query: `sum(rate(tidb_session_compile_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`,
             name: 'compile',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.ORANGE
           },
           {
             query: `sum(rate(tidb_session_execute_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`,
             name: 'execute',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.GREEN_3
           },
           {
             query: `sum(rate(tidb_server_get_token_duration_seconds_sum{sql_type="general"}[$__rate_interval]))/1000000`,
             name: 'get token',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.RED_3
           }
         ],
         unit: 's',
@@ -150,19 +155,19 @@ const metricsItems = [
             query:
               'sum(rate(tidb_tikvclient_request_seconds_sum{store!="0"}[$__rate_interval])) by (type)',
             name: '{type}',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: (qd: QueryData) => transformColorByExecTimeOverview(qd.name)
           },
           {
             query:
               'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum{type="wait"}[$__rate_interval]))',
             name: 'tso_wait',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.RED_5
           },
           {
             query:
               'sum(rate(tidb_session_execute_duration_seconds_sum{sql_type="general"}[$__rate_interval]))',
             name: 'execute time',
-            color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name)
+            color: ColorType.YELLOW
           }
         ],
         unit: 's',

diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts
@@ -105,7 +105,8 @@ export enum ColorType {
   RED_5 = '#701313',
   PURPLE = '#8778ee',
   ORANGE = '#FF9830',
-  YELLOW = '#FADE2A'
+  YELLOW = '#FADE2A',
+  PINK = '#F2495C'
 }
 
 // Our customized types