From f49cb183a4425a4ecf1e620db44e7ca9e737066b Mon Sep 17 00:00:00 2001 From: Yexiang Zhang Date: Mon, 10 Jul 2023 14:47:11 +0800 Subject: [PATCH 1/9] chore: fix prometheus typo (#1558) --- .../tidb-dashboard-lib/src/apps/Monitoring/translations/en.yaml | 2 +- .../tidb-dashboard-lib/src/apps/Monitoring/translations/zh.yaml | 2 +- .../tidb-dashboard-lib/src/apps/Overview/translations/en.yaml | 2 +- .../tidb-dashboard-lib/src/apps/Overview/translations/zh.yaml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/en.yaml b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/en.yaml index b473e8042e..266803971f 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/en.yaml +++ b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/en.yaml @@ -1,7 +1,7 @@ monitoring: nav_title: Monitoring panel_no_data_tips: Documentation - change_prom_button: Change Promethues Address + change_prom_button: Change Prometheus Address category: application_connection: Application Connection database_time: Database Time diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/zh.yaml b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/zh.yaml index 85690098b7..21caa72c6f 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/zh.yaml +++ b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/translations/zh.yaml @@ -1,7 +1,7 @@ monitoring: nav_title: 监控指标 panel_no_data_tips: 文档 - change_prom_button: 更改 promethues 地址 + change_prom_button: 更改 prometheus 地址 category: application_connection: 应用连接 database_time: 数据库时间 diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/en.yaml b/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/en.yaml index b23ae765c8..34b46a192e 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/en.yaml +++ b/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/en.yaml @@ -2,7 +2,7 @@ overview: nav_title: Overview panel_no_data_tips: Documentation view_more_metrics: View More Metrics - change_prom_button: Change Promethues Address + change_prom_button: Change Prometheus Address top_statements: title: Time Consuming SQL Statements recent_slow_query: diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/zh.yaml b/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/zh.yaml index 09abd58fea..1dbdaceed3 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/zh.yaml +++ b/ui/packages/tidb-dashboard-lib/src/apps/Overview/translations/zh.yaml @@ -2,7 +2,7 @@ overview: nav_title: 概况 panel_no_data_tips: 文档 view_more_metrics: 查看更多指标 - change_prom_button: 更改 promethues 地址 + change_prom_button: 更改 prometheus 地址 top_statements: title: 最耗时的 SQL 语句 recent_slow_query: From 068092b9839a2d264001cd59080fac71297abba5 Mon Sep 17 00:00:00 2001 From: Sparkle <1284531+baurine@users.noreply.github.com> Date: Mon, 10 Jul 2023 17:53:13 +0800 Subject: [PATCH 2/9] fix(manual-profiling): fix crash caused by undefined filed `raw_data_type` (#1559) --- .../src/apps/InstanceProfiling/pages/Detail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/packages/tidb-dashboard-lib/src/apps/InstanceProfiling/pages/Detail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/InstanceProfiling/pages/Detail.tsx index 17af3a2b76..9217b92d77 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/InstanceProfiling/pages/Detail.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/InstanceProfiling/pages/Detail.tsx @@ -69,7 +69,7 @@ function mapData(data) { ] } else if (task.raw_data_type === RawDataType.Text) { task.view_options = [ViewOptions.Text] - } else if (task.raw_data_type === '') { + } else if (!task.raw_data_type) { switch (task.target.kind) { case 'tidb': case 'pd': From 7fea5c87f5c8be8b1d4ad0f579c764823ecd667a Mon Sep 17 00:00:00 2001 From: Sparkle <1284531+baurine@users.noreply.github.com> Date: Wed, 19 Jul 2023 17:34:57 +0800 Subject: [PATCH 3/9] chore: remove slow query v2 pages (#1530) * chore: remove slow query v2 pages * chore: remove @antv/g2plot dep --- ui/packages/tidb-dashboard-lib/package.json | 1 - .../components/charts/ScatterChart.tsx | 137 ------- .../components/charts/TimeSeriesChart.tsx | 75 ---- .../src/apps/SlowQuery/index.tsx | 9 +- .../pages/Comparison/Comparison.module.less | 9 - .../SlowQuery/pages/Comparison/Selections.tsx | 57 --- .../Comparison/charts/ComparisonCharts.tsx | 377 ------------------ .../pages/Comparison/charts/GroupBarChart.tsx | 125 ------ .../pages/Comparison/charts/ScatterCharts.tsx | 74 ---- .../apps/SlowQuery/pages/Comparison/index.tsx | 48 --- .../apps/SlowQuery/pages/ListV2/Analyzing.tsx | 49 --- .../pages/ListV2/ExpandChart/ExpandChart.tsx | 125 ------ .../pages/ListV2/ExpandChart/Selections.tsx | 71 ---- .../SlowQuery/pages/ListV2/List.module.less | 15 - .../SlowQuery/pages/ListV2/Selections.tsx | 166 -------- .../src/apps/SlowQuery/pages/ListV2/index.tsx | 237 ----------- .../src/apps/SlowQuery/pages/index.ts | 3 +- ui/pnpm-lock.yaml | 73 ++-- 18 files changed, 41 insertions(+), 1610 deletions(-) delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/ScatterChart.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/TimeSeriesChart.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Comparison.module.less delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Selections.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/charts/ComparisonCharts.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/charts/GroupBarChart.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/charts/ScatterCharts.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/index.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/Analyzing.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/ExpandChart.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/Selections.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/List.module.less delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/Selections.tsx delete mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/index.tsx diff --git a/ui/packages/tidb-dashboard-lib/package.json b/ui/packages/tidb-dashboard-lib/package.json index 6c6f0294a4..40eab92712 100644 --- a/ui/packages/tidb-dashboard-lib/package.json +++ b/ui/packages/tidb-dashboard-lib/package.json @@ -16,7 +16,6 @@ "@ant-design/colors": "^6.0.0", "@ant-design/icons": "^4.7.0", "@ant-design/plots": "^1.2.2", - "@antv/g2plot": "^2.4.22", "@baurine/grafana-value-formats": "^1.0.4", "@baurine/sql-formatter-plus": "^1.5.3", "@diag-ui/chart": "^1.0.6", diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/ScatterChart.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/ScatterChart.tsx deleted file mode 100644 index 847e9b8dde..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/ScatterChart.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { PlotEvent } from '@ant-design/plots' -import { MixOptions, Plot } from '@antv/g2plot' -import { - TimeSeriesChart, - PromDataAccessor, - PromQueryGroup, - Trigger, - Chart -} from '@diag-ui/chart' -import { TimeRangeValue } from '@lib/components' -import { useChange } from '@lib/utils/useChange' -import React, { useContext, useRef } from 'react' -import { SlowQueryContext } from '../../context' - -export interface DisplayOptions { - aggrBy?: 'slow_query_query_time' | 'slow_query_memory_max' - groupBy?: 'query' | 'user' | 'database' | 'use_tiflash' - tiflash?: 'all' | 'yes' | 'no' -} - -interface SlowQueryChartProps { - timeRangeValue: TimeRangeValue - displayOptions: DisplayOptions - onLegendChange?: OnLegendChange - height?: number -} - -export const SlowQueryScatterChart: React.FC = React.memo( - ({ timeRangeValue, displayOptions, height, onLegendChange }) => { - const triggerRef = useRef(null as any) - const chartRef = useRef(null) - const { aggrBy, groupBy, tiflash } = displayOptions - const inited = useRef(false) - const { cacheFetch, markInPlace } = useCacheFetch(displayOptions) - const { bindLegendClick } = useLegendAction(onLegendChange) - - const refreshChart = (inPlace = false) => { - markInPlace(inPlace) - onLegendChange?.({ isSelectAll: true, data: [] }) - // triggerRef.current({ start_time: 1668936700, end_time: 1668938500 }) - triggerRef.current({ - start_time: timeRangeValue[0], - end_time: timeRangeValue[1] - }) - } - - useChange(() => { - refreshChart() - }, [aggrBy, timeRangeValue.toString()]) - - useChange(() => { - if (!inited.current) { - inited.current = true - return - } - refreshChart(true) - }, [groupBy, tiflash]) - - return ( - - bindLegendClick(plot)} - height={height} - > - - - - ) - } -) - -interface OnLegendChange { - (evt: { isSelectAll: boolean; data: any[] }): void -} - -const useLegendAction = (onLegendChange?: OnLegendChange) => { - const bindLegendClick = (plot: Plot) => { - if (!onLegendChange) { - return - } - plot.on('legend-item:click', (evt: PlotEvent) => { - const data = evt.view.views[0].getData() - const legends = evt.target.get('delegateObject').legend.get('items') - const isSelectAll = legends.every((item) => !item.unchecked) - onLegendChange({ isSelectAll, data }) - }) - } - - return { bindLegendClick } -} - -const useCacheFetch = (displayOptions: DisplayOptions) => { - const ctx = useContext(SlowQueryContext) - const cacheRef = useRef>(null) as React.MutableRefObject< - Promise - > - const resultCache = useRef(null) as React.MutableRefObject - const isInPlace = useRef(false) - const cacheFetch = (query, tp) => { - const { groupBy, tiflash } = displayOptions - if (!isInPlace.current) { - cacheRef.current = - ctx?.ds - .promqlQueryRange?.(query, tp.start_time, tp.end_time, '1m') - .then((resp) => { - resultCache.current = (resp.data as any).result - return resp - }) || Promise.resolve(null) - } - return cacheRef.current.then((resp) => { - resp.data.result = - tiflash !== 'all' - ? resultCache.current.filter((d) => tiflash === d.metric.use_tiflash) - : resultCache.current - - resp.data.result.forEach((d) => { - d.metric.name = d.metric[groupBy!] || 'Unknwon' - }) - return resp - }) - } - const markInPlace = (_isInPlace: boolean) => { - isInPlace.current = _isInPlace - } - - return { cacheFetch, markInPlace } -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/TimeSeriesChart.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/TimeSeriesChart.tsx deleted file mode 100644 index 9eeae4a457..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/components/charts/TimeSeriesChart.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useContext, useRef } from 'react' - -import { TimeRangeValue } from '@lib/components' -import { - TimeSeriesChart as DiagTimeSeriesChart, - PromDataAccessor, - PromQueryGroup, - Chart, - Trigger -} from '@diag-ui/chart' -import { SlowQueryContext } from '../../context' -import { useChange } from '@lib/utils/useChange' - -interface LineChartProps { - height?: number - timeRangeValue: TimeRangeValue - type: 'line' | 'scatter' - promql: string - name: string - unit: string -} - -export const TimeSeriesChart: React.FC = ({ - height, - timeRangeValue, - type, - promql, - name, - unit -}) => { - const ctx = useContext(SlowQueryContext) - const triggerRef = useRef(null as any) - const refreshChart = () => { - // triggerRef.current({ start_time: 1668936700, end_time: 1668938500 }) - triggerRef.current({ - start_time: timeRangeValue[0], - end_time: timeRangeValue[1] - }) - } - const chartRef = useRef(null) - - useChange(() => { - refreshChart() - }, [timeRangeValue, promql]) - - return ( - { - return ctx?.ds.promqlQueryRange?.( - query, - tp.start_time, - tp.end_time, - '1m' - ) as any - // return fetch( - // `http://127.0.0.1:8428/api/v1/query_range?query=${query}&start=${tp.start_time}&end=${tp.end_time}&step=1m` - // ).then((resp) => resp.json()) - }} - > - - - - - ) -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/index.tsx index 935ad8ea19..dfec812b00 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/index.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/index.tsx @@ -5,13 +5,12 @@ import useCache, { CacheContext } from '@lib/utils/useCache' import { addTranslations } from '@lib/utils/i18n' -import { List, Detail, ListV2 } from './pages' +import { List, Detail } from './pages' import { SlowQueryContext } from './context' import translations from './translations' import { useLocationChange } from '@lib/hooks/useLocationChange' -import { SlowQueryComparison } from './pages/Comparison' addTranslations(translations) @@ -22,12 +21,6 @@ function AppRoutes() { } /> } /> - } /> - } /> - } - /> ) } diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Comparison.module.less b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Comparison.module.less deleted file mode 100644 index 4ddbe7a809..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Comparison.module.less +++ /dev/null @@ -1,9 +0,0 @@ -@import 'antd/es/style/themes/default.less'; - -.compar { - &_toolbar { - @media only screen and (max-width: @screen-md) { - flex-direction: column; - } - } -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Selections.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Selections.tsx deleted file mode 100644 index 4077c0da9a..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/Selections.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import { Select, Space } from 'antd' - -import { Toolbar } from '@lib/components' -import styles from './Comparison.module.less' -import { GROUP_BY } from '../ListV2/Selections' -import { DisplayOptions } from '../../components/charts/ScatterChart' - -interface SelectionsProps { - selection: DisplayOptions - onSelectionChange: ( - s: React.SetStateAction> - ) => void -} - -export const Selections: React.FC = ({ - selection, - onSelectionChange -}) => { - return ( - - -
- Group By: - onSelectionChange({ tiflash: v })} - /> -
- - - ) -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/charts/ComparisonCharts.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/charts/ComparisonCharts.tsx deleted file mode 100644 index e3aaed7e51..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/charts/ComparisonCharts.tsx +++ /dev/null @@ -1,377 +0,0 @@ -import React, { useState } from 'react' -import { Col, Divider, Row, Select, Skeleton, Typography } from 'antd' - -import { - DEFAULT_TIME_RANGE, - TimeRange, - TimeRangeValue, - toTimeRangeValue, - DatePicker -} from '@lib/components' -import { TimeSeriesChart } from '../../../components/charts/TimeSeriesChart' -import { GroupBarChart, GroupData } from './GroupBarChart' -import { getGroupByLabel } from '../../ListV2/Selections' -import { useURLTimeRangeToTimeRange } from '../../ListV2' -import useUrlState from '@ahooksjs/use-url-state' -import dayjs from 'dayjs' -import { tz } from '@lib/utils' -import { LimitTimeRange } from '../../../components/LimitTimeRange' -import { ScatterCharts } from './ScatterCharts' -import { DisplayOptions } from '@lib/apps/SlowQuery/components/charts/ScatterChart' -import { useAnalyzing } from '../../ListV2/Analyzing' - -const { Title } = Typography - -interface ComparisonChartsProps { - selection: DisplayOptions - onSelectionChange: ( - s: React.SetStateAction> - ) => void -} - -export const ComparisonCharts: React.FC = ({ - selection, - onSelectionChange -}) => { - const { groupBy } = selection - const groupByLabel = getGroupByLabel(groupBy) - const { - timeRange: timeRangeA, - setTimeRange: onTimeRangeAChange, - timeRangeValue: timeRangeValueA - } = useURLTimeRangeToTimeRange(DEFAULT_TIME_RANGE) - const { - timeRange: timeRangeB, - setTimeRange: onTimeRangeBChange, - timeRangeValue: timeRangeValueB - } = useURLTimeRangeToTimeRange( - getTimeRangeBFrom(timeRangeA), - TIMERANGE_B_TYPE_KEY, - TIMERANGE_B_VALUE_KEY - ) - const [slowQueryCountA, setSlowQueryCountA] = useState([]) - const [slowQueryLatencyA, setSlowQueryLatencyA] = useState([]) - const { analyzing: analyzingA } = useAnalyzing(timeRangeValueA) - const { analyzing: analyzingB } = useAnalyzing(timeRangeValueB) - // const [timeRangeAA] = useState({ - // type: 'absolute', - // value: [1668936700, 1668938440] - // }) - // const [timeRangeBB] = useState({ - // type: 'absolute', - // value: [1668938440, 1668938500] - // }) - - return ( - <> - - - - {analyzingA ? ( - - ) : ( - <> - - - Slow Query Count - - - - Avg. Slow Query Latency - - - - - - - Avg. Slow Query Count by {groupByLabel} - - setSlowQueryCountA(d)} - /> - - - - Avg. Slow Query Latency by {groupByLabel} - - setSlowQueryLatencyA(d)} - /> - - - - )} - - - - {analyzingB ? ( - - ) : ( - <> - - - Slow Query Count - - - - Avg. Slow Query Latency - - - - - - - Avg. Slow Query Count by {groupByLabel} - - - - - - Avg. Slow Query Latency by {groupByLabel} - - - - - - )} - - - - - - - - ) -} - -export const genLabels = ({ groupBy, tiflash }: DisplayOptions) => { - return `${groupBy}!="",use_tiflash=~"${tiflash === 'all' ? '.*' : tiflash}"` -} - -interface TimeRangesProps { - timeRangeA: TimeRange - timeRangeB: TimeRange - onTimeRangeAChange: (val: TimeRange) => void - onTimeRangeBChange: (val: TimeRange) => void -} - -type ComparisonType = 'same' | 'custom' - -const TimeRanges: React.FC = ({ - timeRangeA, - timeRangeB, - onTimeRangeAChange, - onTimeRangeBChange -}) => { - const [urlState, setURLState] = useUrlState({ - [COMPARISON_TYPE_KEY]: 'same' - }) - return ( - - - Comparison Time Range:{' '} - onSelectionChange({ aggrBy: v })} - /> - - - - - - - Slow Query Detail - {analyzingA ? ( - - ) : ( - - )} - - - - Slow Query Detail - {analyzingB ? ( - - ) : ( - - )} - - - - ) -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/index.tsx deleted file mode 100644 index 5082834fa4..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Comparison/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Divider } from 'antd' -import React, { useMemo } from 'react' -import { useTranslation } from 'react-i18next' -import { Link } from 'react-router-dom' -import { ArrowLeftOutlined } from '@ant-design/icons' - -import { Card, Head } from '@lib/components' -import { - ComparisonCharts, - deleteSpecialTimeRangeQuery -} from './charts/ComparisonCharts' -import { Selections } from './Selections' -import { createUrlSearchParams, useUrlSelection } from '../ListV2/Selections' - -export const SlowQueryComparison: React.FC = () => { - const { t } = useTranslation() - const [urlSelection, setUrlSelection] = useUrlSelection() - const backURL = useMemo(() => { - const urlParams = createUrlSearchParams(urlSelection) - deleteSpecialTimeRangeQuery(urlParams) - return `/slow_query/v2?${urlParams.toString()}` - }, [urlSelection]) - - return ( - <> - - {t('slow_query.detail.head.back')} - - } - > - - - - - - - - ) -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/Analyzing.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/Analyzing.tsx deleted file mode 100644 index dcaefd1c4a..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/Analyzing.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { TimeRangeValue } from '@lib/components' -import { useChange } from '@lib/utils/useChange' -import { Skeleton } from 'antd' -import React, { useContext, useRef, useState } from 'react' -import { SlowQueryContext } from '../../context' - -interface AnalyzingProps { - timeRangeValue: TimeRangeValue - rows: number - skipInit?: boolean -} - -export const Analyzing: React.FC = React.memo( - ({ timeRangeValue, rows, skipInit = false, children }) => { - const { analyzing } = useAnalyzing(timeRangeValue, skipInit) - return ( - <>{analyzing ? : children} - ) - } -) - -export const useAnalyzing = ( - timeRangeValue: TimeRangeValue, - skipInit = false -) => { - const inited = useRef(false) - const [analyzing, setAnalyzing] = useState(true) - const ctx = useContext(SlowQueryContext) - const prevTimeRange = useRef(timeRangeValue) - const timeRangeNotEqual = - prevTimeRange.current.toString() !== timeRangeValue.toString() - - useChange(() => { - const analyze = async () => { - setAnalyzing(true) - await ctx?.ds.slowQueryAnalyze?.(timeRangeValue[0], timeRangeValue[1]) - prevTimeRange.current = timeRangeValue - setAnalyzing(false) - } - - if (skipInit && !inited.current) { - inited.current = true - return - } - analyze() - }, [timeRangeValue[0], timeRangeValue[1]]) - - return { analyzing: analyzing || timeRangeNotEqual } -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/ExpandChart.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/ExpandChart.tsx deleted file mode 100644 index dee0dc467b..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/ExpandChart.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useMemo, useState } from 'react' -import { Col, Modal, Row, Typography } from 'antd' - -import { TimeSeriesChart } from '../../../components/charts/TimeSeriesChart' -import { - DisplayOptions, - SlowQueryScatterChart -} from '../../../components/charts/ScatterChart' -import { genLabels } from '../../Comparison/charts/ComparisonCharts' -import { TimeRange, TimeRangeValue, toTimeRangeValue } from '@lib/components' -import { Selections } from './Selections' -import { Analyzing } from '../Analyzing' - -interface ExpandChartProps { - open: boolean - onOpenChange: (open: boolean) => void - defaultSelection: DisplayOptions - defaultTimeRange: TimeRange -} - -const { Title } = Typography - -export const ExpandChart: React.FC = ({ - open, - onOpenChange, - defaultSelection, - defaultTimeRange -}) => { - return ( - onOpenChange(false)} - width="100%" - bodyStyle={{ - height: '768px', - padding: '10px' - }} - footer={null} - > - - - ) -} - -interface ModalContentProps { - defaultSelection: DisplayOptions - defaultTimeRange: TimeRange -} -// reset the default value after modal destroy -const ModalContent: React.FC = ({ - defaultSelection, - defaultTimeRange -}) => { - const [timeRange, setTimeRange] = useState(defaultTimeRange) - const [selection, setSelection] = useState(defaultSelection) - const { groupBy } = selection - const timeRangeValue: TimeRangeValue = useMemo( - () => toTimeRangeValue(timeRange), - // eslint-disable-next-line react-hooks/exhaustive-deps - [timeRange.type, timeRange.value.toString()] - ) - - return ( - <> - - setSelection((oldV) => ({ ...oldV, ...v }))} - timeRange={timeRange} - onTimeRangeChange={setTimeRange} - /> - - - - - - Slow Query Detail - - - - - - Slow Query Count - - - - - - Avg. Slow Query Latency - - - - - - - - ) -} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/Selections.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/Selections.tsx deleted file mode 100644 index 35848c3616..0000000000 --- a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/ListV2/ExpandChart/Selections.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react' -import { Select, Space } from 'antd' - -import { TimeRange, Toolbar } from '@lib/components' -import { AGGR_BY, GROUP_BY } from '../Selections' -import { DisplayOptions } from '../../../components/charts/ScatterChart' -import { LimitTimeRange } from '@lib/apps/SlowQuery/components/LimitTimeRange' - -interface SelectionsProps { - selection: DisplayOptions - onSelectionChange: ( - s: React.SetStateAction> - ) => void - timeRange: TimeRange - onTimeRangeChange: (val: TimeRange) => void -} - -export const Selections: React.FC = ({ - selection, - onSelectionChange, - timeRange, - onTimeRangeChange -}) => { - return ( - - -
- Aggregate By: - onSelectionChange({ groupBy: v })} - /> -
-
- Use TiFlash: - onSelectionChange({ aggrBy: v })} - /> -
-
- Group By: - onSelectionChange({ tiflash: v })} - /> -
- - - - <> - -