From c8111babbc08568da0348783d4bd5ad0e38171c8 Mon Sep 17 00:00:00 2001 From: YiniXu9506 Date: Wed, 20 Jul 2022 22:59:30 +0800 Subject: [PATCH 1/8] chore: add color for specific sql type --- .../src/apps/Metrics/data/metricsItems.ts | 29 +++++++++ .../src/apps/Overview/components/Metrics.tsx | 1 + .../src/apps/Overview/data/overviewMetrics.ts | 65 ++++++++++--------- .../components/MetricChart/seriesRenderer.tsx | 47 ++++++++++++-- .../src/utils/prometheus/types.ts | 19 ++++++ 5 files changed, 126 insertions(+), 35 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 index e177feac0d..83a0606e2e 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts @@ -61,6 +61,7 @@ const metricsItems = [ name: 'database time' } ], + nullValue: TransformNullValue.AS_ZERO, unit: 's', type: 'line' }, @@ -97,6 +98,28 @@ const metricsItems = [ ], unit: 's', type: 'bar_stacked' + }, + { + tilte: 'Database Execute Time', + queries: [ + { + query: + 'sum(rate(tidb_tikvclient_request_seconds_sum[$__rate_interval])) by (type)', + name: '{type}' + }, + { + query: + 'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum[$__rate_interval]))', + name: 'tso_wait' + }, + { + query: + 'sum(rate(tidb_session_execute_duration_seconds_sum[$__rate_interval]))', + name: 'execute time' + } + ], + unit: 's', + type: 'bar_stacked' } ] }, @@ -158,6 +181,11 @@ const metricsItems = [ query: 'sum(rate(tidb_server_plan_cache_total[$__rate_interval])) by (type)', name: 'avg' + }, + { + query: + 'sum(rate(tidb_server_plan_cache_miss_total[$__rate_interval]))', + name: 'avg' } ], unit: 'short', @@ -283,6 +311,7 @@ const metricsItems = [ name: '{type}-{txn_mode}' } ], + nullValue: TransformNullValue.AS_ZERO, unit: 's', type: 'line' }, diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx index fa7f289bca..47d4c2bf3f 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx @@ -56,6 +56,7 @@ const MetricsWrapper = ({ metricsItem, props }) => { } type={metricsItem.type} unit={metricsItem.unit} + nullValue={metricsItem.nullValue} {...props} /> diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/data/overviewMetrics.ts b/ui/packages/tidb-dashboard-lib/src/apps/Overview/data/overviewMetrics.ts index 1811445d71..f8a8a4d831 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/data/overviewMetrics.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Overview/data/overviewMetrics.ts @@ -1,14 +1,21 @@ +import { TransformNullValue } from '@lib/utils/prometheus' + const overviewMetrics = [ { title: 'total_requests', queries: [ + { + query: 'sum(rate(tidb_executor_statement_total[$__rate_interval]))', + name: 'Total' + }, { query: 'sum(rate(tidb_executor_statement_total[$__rate_interval])) by (type)', name: '{type}' } ], - unit: null, + nullValue: TransformNullValue.AS_ZERO, + unit: 'qps', type: 'bar_stacked' }, { @@ -16,20 +23,26 @@ const overviewMetrics = [ queries: [ { query: - 'histogram_quantile(0.9, sum(rate(tidb_server_handle_query_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '95%' + 'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval]))', + name: 'avg' }, { query: - 'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '99%' + 'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket{sql_type!="internal"}[$__rate_interval])) by (le))', + name: '99' }, { query: - 'histogram_quantile(0.999, sum(rate(tidb_server_handle_query_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '99.9%' + 'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval])) by (sql_type)', + name: 'avg-{sql_type}' + }, + { + query: + 'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket{sql_type!="internal"}[$__rate_interval])) by (le,sql_type))', + name: '99-{sql_type}' } ], + nullValue: TransformNullValue.AS_ZERO, unit: 's', type: 'line' }, @@ -37,15 +50,11 @@ const overviewMetrics = [ title: 'cpu', queries: [ { - query: - '100 - avg by (instance) (irate(node_cpu_seconds_total{mode="idle"}[$__rate_interval]) ) * 100', + query: 'rate(process_cpu_seconds_total{job="tidb"}[$__rate_interval])', name: '{instance}' } ], - yDomain: { - min: 0, - max: 100 - }, + nullValue: TransformNullValue.AS_ZERO, unit: 'percent', type: 'line' }, @@ -53,35 +62,29 @@ const overviewMetrics = [ title: 'memory', queries: [ { - query: `100 - ( - avg_over_time(node_memory_MemAvailable_bytes[$__rate_interval]) or - ( - avg_over_time(node_memory_Buffers_bytes[$__rate_interval]) + - avg_over_time(node_memory_Cached_bytes[$__rate_interval]) + - avg_over_time(node_memory_MemFree_bytes[$__rate_interval]) + - avg_over_time(node_memory_Slab_bytes[$__rate_interval]) - ) - ) / - avg_over_time(node_memory_MemTotal_bytes[$__rate_interval]) * 100`, + query: 'process_resident_memory_bytes{job="tidb"}', name: '{instance}' } ], - yDomain: { - min: 0, - max: 100 - }, - unit: 'percent', + nullValue: TransformNullValue.AS_ZERO, + unit: 'decbytes', type: 'line' }, { title: 'io', queries: [ { - query: 'irate(node_disk_io_time_seconds_total[$__rate_interval]) * 100', - name: '{instance} - {device}' + query: + 'sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance) + sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance)', + name: '{instance}-write' + }, + { + query: + 'sum(rate(tikv_engine_flow_bytes{db="kv", type=~"bytes_read|iter_bytes_read"}[$__rate_interval])) by (instance)', + name: '{instance}-read' } ], - unit: 'decbytes', + unit: 'KBs', type: 'line' } ] diff --git a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx index 5edf956bca..693754b455 100644 --- a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx +++ b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx @@ -1,5 +1,5 @@ import { BarSeries, LineSeries, ScaleType, AreaSeries } from '@elastic/charts' -import { DataPoint } from '@lib/utils/prometheus' +import { DataPoint, ColorType } from '@lib/utils/prometheus' import React from 'react' export type GraphType = 'bar_stacked' | 'line' | 'stack' @@ -22,6 +22,45 @@ export function renderQueryData(type: GraphType, qd: QueryData) { } } +function transformLengendColor(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': + case 'Commit': + return ColorType.GREEN_4 + case 'parse': + return ColorType.RED_2 + case 'Show': + case 'get token': + return ColorType.RED_3 + case 'PessimisticLock': + return ColorType.RED_4 + case 'tso_wait': + return ColorType.RED_5 + case 'Scan': + return ColorType.PURPLE + case 'execute time': + case 'database time': + return ColorType.YELLOW + case 'compile': + return ColorType.ORANGE + default: + return undefined + } +} + function renderStackedBar(qd: QueryData) { return ( ) } @@ -50,7 +89,7 @@ function renderLine(qd: QueryData) { yAccessors={[1]} data={qd.data} name={qd.name} - color={qd.color} + color={transformLengendColor(qd.name)} lineSeriesStyle={{ line: { strokeWidth: 2 @@ -75,7 +114,7 @@ function renderStack(qd: QueryData) { stackAccessors={[0]} data={qd.data} name={qd.name} - color={qd.color} + color={transformLengendColor(qd.name)} /> ) } diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts index f4c050ed54..e7b3a702e1 100644 --- a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts +++ b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts @@ -89,6 +89,25 @@ export enum TransformNullValue { AS_ZERO = 'as_zero' } +export enum ColorType { + BLUE_1 = '#C0D8FF', + BLUE_2 = '#8AB8FF', + BLUE_3 = '#3274D9', + BLUE_4 = '#1F60C4', + GREEN_1 = '#C8F2C2', + GREEN_2 = '#96D98D', + GREEN_3 = '#56A64B', + GREEN_4 = '#37872D', + RED_1 = '#FFA6B0', + RED_2 = '#FF7383', + RED_3 = '#E02F44', + RED_4 = '#C4162A', + RED_5 = '#701313', + PURPLE = '#8778ee', + ORANGE = '#FF9830', + YELLOW = '#FADE2A' +} + // Our customized types export interface QueryOptions { From 0afefdc6f14616028a0ee9f8c8acf03a47318746 Mon Sep 17 00:00:00 2001 From: YiniXu9506 Date: Thu, 21 Jul 2022 00:11:48 +0800 Subject: [PATCH 2/8] update labels --- .../src/apps/Metrics/data/metricsItems.ts | 4 ++-- .../src/apps/Overview/components/Metrics.tsx | 5 ----- .../src/apps/Overview/translations/en.yaml | 6 +++--- .../src/apps/Overview/translations/zh.yaml | 6 +++--- .../tidb-dashboard-lib/src/components/MetricChart/index.tsx | 3 --- 5 files changed, 8 insertions(+), 16 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 index 3b6bed6c4b..fcefc0c8a1 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts @@ -180,12 +180,12 @@ const metricsItems = [ { query: 'sum(rate(tidb_server_plan_cache_total[$__rate_interval])) by (type)', - name: 'avg' + name: 'avg - hit' }, { query: 'sum(rate(tidb_server_plan_cache_miss_total[$__rate_interval]))', - name: 'avg' + name: 'avg - miss' } ], unit: 'short', diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx index 671dfcb019..a4c3a35305 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx @@ -76,11 +76,6 @@ export default function Metrics() { {data?.values.map((qd) => renderQueryData(type, qd))} {data && ( From 4c92efe2af79f4a50f41bb44f49dfb3d6e3a3c0c Mon Sep 17 00:00:00 2001 From: Suhaha Date: Thu, 21 Jul 2022 00:14:17 +0800 Subject: [PATCH 3/8] refactor: customize series color --- .../src/apps/Metrics/data/metricsItems.ts | 45 +++++++++++++++++- .../src/apps/Overview/components/Metrics.tsx | 5 -- .../src/components/MetricChart/index.tsx | 13 +++-- .../components/MetricChart/seriesRenderer.tsx | 47 ++----------------- 4 files changed, 55 insertions(+), 55 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 index 3b6bed6c4b..139b76adbb 100644 --- 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,4 +1,42 @@ -import { TransformNullValue } from '@lib/utils/prometheus' +import { QueryData } from '@lib/components/MetricChart/seriesRenderer' +import { ColorType, TransformNullValue } from '@lib/utils/prometheus' + +function transformColorBySQLTypeAndPhase(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 'Insert': + case 'Prewrite': + case 'execute': + return ColorType.GREEN_3 + case 'Update': + case 'Commit': + return ColorType.GREEN_4 + case 'parse': + return ColorType.RED_2 + case 'Show': + case 'get token': + return ColorType.RED_3 + case 'PessimisticLock': + return ColorType.RED_4 + case 'tso_wait': + return ColorType.RED_5 + case 'Scan': + return ColorType.PURPLE + case 'execute time': + case 'database time': + return ColorType.YELLOW + case 'compile': + return ColorType.ORANGE + default: + return undefined + } +} const metricsItems = [ { @@ -74,7 +112,10 @@ const metricsItems = [ } ], unit: 's', - type: 'bar_stacked' + type: 'bar_stacked', + color: (qd: QueryData) => { + transformColorBySQLTypeAndPhase(qd.name) + } }, { title: 'Database Time by Steps of SQL Processing', diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx index 671dfcb019..a4c3a35305 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx @@ -76,11 +76,6 @@ export default function Metrics() { string) } export interface IMetricChartProps { @@ -220,12 +220,15 @@ export default function MetricChart({ }) : data - sd.push({ + const d: QueryData = { id: `${queryIdx}_${seriesIdx}`, name: format(queries[queryIdx].name, promResult.metric), - data: transformedData, - color: queries[queryIdx].color - }) + data: transformedData + } + const colorOrFn = queries[queryIdx].color + + d.color = typeof colorOrFn === 'function' ? colorOrFn(d) : colorOrFn + sd.push(d) }) }) setData({ diff --git a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx index a64812d466..1bb37249ec 100644 --- a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx +++ b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/seriesRenderer.tsx @@ -1,5 +1,5 @@ import { BarSeries, LineSeries, ScaleType, AreaSeries } from '@elastic/charts' -import { DataPoint, ColorType } from '@lib/utils/prometheus' +import { DataPoint } from '@lib/utils/prometheus' import React from 'react' export type GraphType = 'bar_stacked' | 'area_stack' | 'line' @@ -22,45 +22,6 @@ export function renderQueryData(type: GraphType, qd: QueryData) { } } -function transformLengendColor(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': - case 'Commit': - return ColorType.GREEN_4 - case 'parse': - return ColorType.RED_2 - case 'Show': - case 'get token': - return ColorType.RED_3 - case 'PessimisticLock': - return ColorType.RED_4 - case 'tso_wait': - return ColorType.RED_5 - case 'Scan': - return ColorType.PURPLE - case 'execute time': - case 'database time': - return ColorType.YELLOW - case 'compile': - return ColorType.ORANGE - default: - return undefined - } -} - function renderStackedBar(qd: QueryData) { return ( ) } @@ -89,7 +50,7 @@ function renderLine(qd: QueryData) { yAccessors={[1]} data={qd.data} name={qd.name} - color={transformLengendColor(qd.name)} + color={qd.color} lineSeriesStyle={{ line: { strokeWidth: 2 @@ -114,7 +75,7 @@ function renderAreaStack(qd: QueryData) { stackAccessors={[0]} data={qd.data} name={qd.name} - color={transformLengendColor(qd.name)} + color={qd.color} /> ) } From b31c41e4be658694d6190302099975e31a6c657e Mon Sep 17 00:00:00 2001 From: Suhaha Date: Thu, 21 Jul 2022 00:20:26 +0800 Subject: [PATCH 4/8] fix: database time series color --- .../src/apps/Metrics/data/metricsItems.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 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 index fad18c1e67..b60aa3fd0a 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts @@ -101,7 +101,10 @@ const metricsItems = [ ], nullValue: TransformNullValue.AS_ZERO, unit: 's', - type: 'line' + type: 'line', + color: (qd: QueryData) => { + transformColorBySQLTypeAndPhase(qd.name) + } }, { title: 'Database Time by SQL Types', @@ -138,7 +141,10 @@ const metricsItems = [ } ], unit: 's', - type: 'bar_stacked' + type: 'bar_stacked', + color: (qd: QueryData) => { + transformColorBySQLTypeAndPhase(qd.name) + } }, { tilte: 'Database Execute Time', @@ -160,7 +166,10 @@ const metricsItems = [ } ], unit: 's', - type: 'bar_stacked' + type: 'bar_stacked', + color: (qd: QueryData) => { + transformColorBySQLTypeAndPhase(qd.name) + } } ] }, From d8b80bff70049dd4ae20c76925d1f771026f3c88 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Thu, 21 Jul 2022 00:35:55 +0800 Subject: [PATCH 5/8] fix: database time series color --- .../src/apps/Metrics/data/metricsItems.ts | 47 +++++++++---------- 1 file changed, 22 insertions(+), 25 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 index b60aa3fd0a..eaed24e4b5 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts @@ -96,55 +96,52 @@ const metricsItems = [ queries: [ { query: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval]))`, - name: 'database time' + name: 'database time', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) } ], nullValue: TransformNullValue.AS_ZERO, unit: 's', - type: 'line', - color: (qd: QueryData) => { - transformColorBySQLTypeAndPhase(qd.name) - } + type: 'line' }, { title: 'Database Time by SQL Types', queries: [ { query: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type)`, - name: '{sql_type}' + name: '{sql_type}', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) } ], unit: 's', - type: 'bar_stacked', - color: (qd: QueryData) => { - transformColorBySQLTypeAndPhase(qd.name) - } + type: 'bar_stacked' }, { title: 'Database Time by Steps of SQL Processing', queries: [ { query: `sum(rate(tidb_session_parse_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`, - name: 'parse' + name: 'parse', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) }, { query: `sum(rate(tidb_session_compile_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`, - name: 'compile' + name: 'compile', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) }, { query: `sum(rate(tidb_session_execute_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`, - name: 'execute' + name: 'execute', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) }, { query: `sum(rate(tidb_server_get_token_duration_seconds_sum{sql_type="general"}[$__rate_interval]))/1000000`, - name: 'get token' + name: 'get token', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) } ], unit: 's', - type: 'bar_stacked', - color: (qd: QueryData) => { - transformColorBySQLTypeAndPhase(qd.name) - } + type: 'bar_stacked' }, { tilte: 'Database Execute Time', @@ -152,24 +149,24 @@ const metricsItems = [ { query: 'sum(rate(tidb_tikvclient_request_seconds_sum[$__rate_interval])) by (type)', - name: '{type}' + name: '{type}', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) }, { query: 'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum[$__rate_interval]))', - name: 'tso_wait' + name: 'tso_wait', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) }, { query: 'sum(rate(tidb_session_execute_duration_seconds_sum[$__rate_interval]))', - name: 'execute time' + name: 'execute time', + color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) } ], unit: 's', - type: 'bar_stacked', - color: (qd: QueryData) => { - transformColorBySQLTypeAndPhase(qd.name) - } + type: 'bar_stacked' } ] }, From e762a79e01cba2eeee5df9b88a6c0ec305af588d Mon Sep 17 00:00:00 2001 From: YiniXu9506 Date: Thu, 21 Jul 2022 00:39:38 +0800 Subject: [PATCH 6/8] update query --- .../src/apps/Metrics/data/metricsItems.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 index b60aa3fd0a..9943343034 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts @@ -147,21 +147,21 @@ const metricsItems = [ } }, { - tilte: 'Database Execute Time', + title: 'Database Execute Time', queries: [ { query: - 'sum(rate(tidb_tikvclient_request_seconds_sum[$__rate_interval])) by (type)', + 'sum(rate(tidb_tikvclient_request_seconds_sum{store!="0"}[$__rate_interval])) by (type)', name: '{type}' }, { query: - 'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum[$__rate_interval]))', + 'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum{type="wait"}[$__rate_interval]))', name: 'tso_wait' }, { query: - 'sum(rate(tidb_session_execute_duration_seconds_sum[$__rate_interval]))', + 'sum(rate(tidb_session_execute_duration_seconds_sum{sql_type="general"}[$__rate_interval]))', name: 'execute time' } ], From 6f1fd2ba38bf8bb461d518b473393a162f2589f5 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Thu, 21 Jul 2022 00:45:48 +0800 Subject: [PATCH 7/8] refine: colors --- .../src/apps/Metrics/data/metricsItems.ts | 50 ++++++++++++++----- 1 file changed, 37 insertions(+), 13 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 index eaed24e4b5..e15bbc3f6c 100644 --- 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,6 +1,32 @@ import { QueryData } from '@lib/components/MetricChart/seriesRenderer' import { ColorType, TransformNullValue } from '@lib/utils/prometheus' +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 'Insert': + case 'Prewrite': + return ColorType.GREEN_3 + case 'Update': + case 'Commit': + return ColorType.GREEN_4 + case 'Show': + return ColorType.RED_3 + case 'PessimisticLock': + return ColorType.RED_4 + case 'Scan': + return ColorType.PURPLE + default: + return undefined + } +} + function transformColorBySQLTypeAndPhase(legendLabel: string) { switch (legendLabel) { case 'Cop': @@ -12,27 +38,25 @@ function transformColorBySQLTypeAndPhase(legendLabel: string) { return ColorType.BLUE_4 case 'Insert': case 'Prewrite': - case 'execute': return ColorType.GREEN_3 case 'Update': case 'Commit': return ColorType.GREEN_4 case 'parse': - return ColorType.RED_2 + return case 'Show': - case 'get token': return ColorType.RED_3 case 'PessimisticLock': return ColorType.RED_4 case 'tso_wait': - return ColorType.RED_5 + return case 'Scan': return ColorType.PURPLE case 'execute time': case 'database time': return ColorType.YELLOW case 'compile': - return ColorType.ORANGE + return default: return undefined } @@ -97,7 +121,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 +134,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 +146,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', @@ -156,13 +180,13 @@ const metricsItems = [ query: 'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum[$__rate_interval]))', name: 'tso_wait', - color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) + color: ColorType.RED_5 }, { query: 'sum(rate(tidb_session_execute_duration_seconds_sum[$__rate_interval]))', name: 'execute time', - color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) + color: ColorType.YELLOW } ], unit: 's', From f92eec05d0ab867bbf7e6ad76ca7e69263a8790c Mon Sep 17 00:00:00 2001 From: Suhaha Date: Thu, 21 Jul 2022 00:56:21 +0800 Subject: [PATCH 8/8] update: colors --- .../src/apps/Metrics/data/metricsItems.ts | 51 ++++++------------- .../src/utils/prometheus/types.ts | 3 +- 2 files changed, 18 insertions(+), 36 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 index e15bbc3f6c..9f37cb1ea3 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts +++ b/ui/packages/tidb-dashboard-lib/src/apps/Metrics/data/metricsItems.ts @@ -3,60 +3,41 @@ import { ColorType, TransformNullValue } from '@lib/utils/prometheus' 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': return ColorType.GREEN_3 case 'Update': - case 'Commit': return ColorType.GREEN_4 - case 'Show': - return ColorType.RED_3 - case 'PessimisticLock': - return ColorType.RED_4 - case 'Scan': - return ColorType.PURPLE + case 'general': + return ColorType.PINK default: return undefined } } -function transformColorBySQLTypeAndPhase(legendLabel: string) { +function transformColorByExecTimeOverview(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 'Insert': - case 'Prewrite': - return ColorType.GREEN_3 - case 'Update': + case 'tso_wait': + return ColorType.RED_5 case 'Commit': return ColorType.GREEN_4 - case 'parse': - return - case 'Show': - return ColorType.RED_3 + case 'Prewrite': + return ColorType.GREEN_3 case 'PessimisticLock': return ColorType.RED_4 - case 'tso_wait': - return + 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 default: return undefined } @@ -174,7 +155,7 @@ const metricsItems = [ query: 'sum(rate(tidb_tikvclient_request_seconds_sum[$__rate_interval])) by (type)', name: '{type}', - color: (qd: QueryData) => transformColorBySQLTypeAndPhase(qd.name) + color: (qd: QueryData) => transformColorByExecTimeOverview(qd.name) }, { query: diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts index e7b3a702e1..f4adb02aaf 100644 --- 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