From 863ddce0a6a473f13468bb7f483501fb92caa2d3 Mon Sep 17 00:00:00 2001 From: YiniXu9506 Date: Fri, 24 Feb 2023 20:28:59 +0800 Subject: [PATCH] chore: init unstable plan --- .../component/IndexInsightTable.tsx | 15 +- ...ghtList.tsx => PerformanceInsightList.tsx} | 32 +- ...rmanceInsightListWithRegister.module.less} | 0 ...=> PerformanceInsightListWithRegister.tsx} | 10 +- .../component/UnstabelPlanTable.tsx | 144 +++++++ .../src/apps/SQLAdvisor/component/index.tsx | 7 +- .../src/apps/SQLAdvisor/index.tsx | 11 +- .../pages/Detail/IndexInsightDetail.tsx | 352 ++++++++++++++++++ .../pages/Detail/UnstablePlanDetail.tsx | 206 ++++++++++ .../apps/SQLAdvisor/pages/Detail/index.tsx | 352 +----------------- .../src/apps/SQLAdvisor/pages/List/index.tsx | 15 +- .../src/apps/SQLAdvisor/pages/index.tsx | 4 +- 12 files changed, 768 insertions(+), 380 deletions(-) rename ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/{IndexInsightList.tsx => PerformanceInsightList.tsx} (89%) rename ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/{IndexInsightListWithRegister.module.less => PerformanceInsightListWithRegister.module.less} (100%) rename ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/{IndexInsightListWithRegister.tsx => PerformanceInsightListWithRegister.tsx} (96%) create mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/UnstabelPlanTable.tsx create mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/IndexInsightDetail.tsx create mode 100644 ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/UnstablePlanDetail.tsx diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightTable.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightTable.tsx index 8fdaabe32b..4fe4eb8e41 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightTable.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightTable.tsx @@ -9,6 +9,7 @@ import { SQLAdvisorContext } from '../context' import { SQLTunedListProps } from '../types' import dayjs from 'dayjs' import tz from '@lib/utils/timezone' +import { TunedData } from '../pages/Detail/indexInsightData' const DEF_PAGINATION_PARAMS = { pageNumber: 1, @@ -29,7 +30,7 @@ export const useSQLTunedListGet = () => { pageNumber || DEF_PAGINATION_PARAMS.pageNumber, pageSize || DEF_PAGINATION_PARAMS.pageSize ) - setSqlTunedList(res!) + setSqlTunedList(TunedData!) } catch (e) { console.log(e) } finally { @@ -62,6 +63,7 @@ const IndexInsightTable = ({ title: 'Impact', dataIndex: 'impact', key: 'impact', + width: 100, ellipsis: true, render: (_, record) => { return <>{record.impact} @@ -71,6 +73,7 @@ const IndexInsightTable = ({ title: 'Type', dataIndex: 'insight_type', key: 'type', + width: 100, ellipsis: true, render: (_, record) => { return <>{record.insight_type} @@ -145,15 +148,21 @@ const IndexInsightTable = ({ dataIndex: 'detail', key: 'detail', render: (_, record) => { - return Detail + return ( + + Detail + + ) } } ], [] ) + console.log('sqlTunedList', sqlTunedList) + return ( - + { @@ -43,6 +45,7 @@ const IndexInsightList = ({ ) ) const { sqlTunedList, refreshSQLTunedList, loading } = useSQLTunedListGet() + const { unstablePlanList, refreshUnstablePlanList } = useUnstablePlanListGet() const [cancelRunningTask, setCancelRunningTask] = useState(false) const taskRunningStatusGet = useRef(() => { @@ -172,7 +175,7 @@ const IndexInsightList = ({ @@ -252,16 +255,27 @@ const IndexInsightList = ({ type="warning" showIcon closable + style={{ marginBottom: '10px' }} /> )} + + + + + + + + - ) } -export default IndexInsightList +export default PerformanceInsightList diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.module.less b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/PerformanceInsightListWithRegister.module.less similarity index 100% rename from ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.module.less rename to ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/PerformanceInsightListWithRegister.module.less diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/PerformanceInsightListWithRegister.tsx similarity index 96% rename from ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.tsx rename to ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/PerformanceInsightListWithRegister.tsx index a70e75fa2a..9c5dbe9c92 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/PerformanceInsightListWithRegister.tsx @@ -12,10 +12,10 @@ import { Skeleton, Alert } from 'antd' -import styles from './IndexInsightListWithRegister.module.less' +import styles from './PerformanceInsightListWithRegister.module.less' import { HighlightSQL, CopyLink } from '@lib/components' import { LockOutlined, UserOutlined } from '@ant-design/icons' -import IndexInsightList from './IndexInsightList' +import PerformanceInsightList from './PerformanceInsightList' import { DbassSecuritySettingImg } from '../utils/dbaasSecuritySetting' const { Title } = Typography @@ -174,7 +174,7 @@ const UnRegisteredUserDB: React.FC = ({ ) } -const IndexInsightListWithRegister = () => { +const PerformanceInsightListWithRegister = () => { const ctx = useContext(SQLAdvisorContext) const [isLoading, setIsLoading] = useState(true) const [isUserDBRegistered, setIsUserDBRegistered] = useState(false) @@ -221,7 +221,7 @@ const IndexInsightListWithRegister = () => { ) : ( <> {isUserDBRegistered ? ( - @@ -234,4 +234,4 @@ const IndexInsightListWithRegister = () => { ) } -export default IndexInsightListWithRegister +export default PerformanceInsightListWithRegister diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/UnstabelPlanTable.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/UnstabelPlanTable.tsx new file mode 100644 index 0000000000..53b53663a4 --- /dev/null +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/UnstabelPlanTable.tsx @@ -0,0 +1,144 @@ +import React, { useState, useRef, useEffect, useMemo } from 'react' +import { UnstablePlanData } from './unstablePlanData' +import { Card, HighlightSQL, TextWrap } from '@lib/components' +import { Tooltip, Table } from 'antd' +import { Link } from 'react-router-dom' + +import dayjs from 'dayjs' +import tz from '@lib/utils/timezone' + +export const useUnstablePlanListGet = () => { + const [unstablePlanList, setUnstablePlanList] = useState() + const [loading, setLoading] = useState(false) + const unstablePlanListGet = useRef(() => { + const res = UnstablePlanData + setUnstablePlanList(res!) + }) + + useEffect(() => { + unstablePlanListGet.current() + }, []) + return { + unstablePlanList, + refreshUnstablePlanList: unstablePlanListGet.current, + loading + } +} + +interface UnstabelPlanTableProps { + unstablePlanList: any + loading +} + +const UnstablePlanTable = ({ + unstablePlanList, + loading +}: UnstabelPlanTableProps) => { + const columns = useMemo( + () => [ + { + title: 'Impact', + dataIndex: 'impact', + key: 'impact', + width: 100, + ellipsis: true, + render: (_, record) => { + return <>{record.impact} + } + }, + { + title: 'Type', + dataIndex: 'insight_type', + key: 'type', + ellipsis: true, + render: (_, record) => { + return <>{record.insight_type} + } + }, + { + title: 'Number of Plans', + dataIndex: 'plan_count', + width: 100, + key: 'plan_count', + ellipsis: true, + render: (_, record) => { + return <>{record.plan_count} + } + }, + { + title: 'Related SQL Statement', + dataIndex: 'sql_statement', + key: 'related_sql_statement', + ellipsis: true, + render: (_, record) => { + return ( + + } + placement="left" + > + + + + + ) + } + }, + { + title: `Check Up Time (UTC${ + tz.getTimeZone() < 0 ? '-' : '+' + }${tz.getTimeZone()})`, + dataIndex: 'task_created_at', + key: 'task_created_at', + ellipsis: true, + render: (_, record) => { + return ( + <> + {dayjs(record.task_created_at) + .utcOffset(tz.getTimeZone()) + .format('YYYY-MM-DD HH:mm:ss')} + + ) + } + }, + { + title: 'Results', + dataIndex: 'detail', + key: 'detail', + render: (_, record) => { + return ( + + Detail + + ) + } + } + ], + [] + ) + console.log('unstablePlanList', unstablePlanList) + return ( + +
+ + ) +} + +export default UnstablePlanTable diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/index.tsx index c15b196d58..f96e85ec41 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/index.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/index.tsx @@ -1,5 +1,4 @@ -import IndexInsightTable from './IndexInsightTable' -import IndexInsightListWithRegister from './IndexInsightListWithRegister' -import IndexInsightList from './IndexInsightList' +import PerformanceInsightListWithRegister from './PerformanceInsightListWithRegister' +import PerformanceInsightList from './PerformanceInsightList' -export { IndexInsightTable, IndexInsightListWithRegister, IndexInsightList } +export { PerformanceInsightListWithRegister, PerformanceInsightList } diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/index.tsx index 4885d2e5dd..5f170fa54c 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/index.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/index.tsx @@ -4,7 +4,7 @@ import { HashRouter as Router, Routes, Route } from 'react-router-dom' import { Root } from '@lib/components' import { addTranslations } from '@lib/utils/i18n' -import { List, Detail } from './pages' +import { List, SQLAdvisorDetail, UnstablePlanDetail } from './pages' import { SQLAdvisorContext } from './context' import translations from './translations' @@ -18,7 +18,14 @@ function AppRoutes() { return ( } /> - } /> + } + /> + } + /> ) } diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/IndexInsightDetail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/IndexInsightDetail.tsx new file mode 100644 index 0000000000..0d063a3449 --- /dev/null +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/IndexInsightDetail.tsx @@ -0,0 +1,352 @@ +import React, { useState, useMemo, useEffect, useContext } from 'react' + +import { + Head, + Descriptions, + Expand, + HighlightSQL, + CopyLink +} from '@lib/components' +import { Link } from 'react-router-dom' +import { ArrowLeftOutlined, LoadingOutlined } from '@ant-design/icons' +import useQueryParams from '@lib/utils/useQueryParams' +import { Space, Collapse, Tooltip, Table } from 'antd' + +import { getSuggestedCommand } from '../../utils/suggestedCommandMaps' +import { TuningDetailProps } from '../../types' +import { SQLAdvisorContext } from '../../context' +import dayjs from 'dayjs' +import tz from '@lib/utils/timezone' +import styles from './index.module.less' +import { TunedDetailData } from './indexInsightData' + +console.log('TunedDetailData', TunedDetailData) + +const { Panel } = Collapse + +const PanelMaps: Record = { + basic: 'Basic Information', + table_clause: 'Existing Indexes', + table_healthies: 'Table Healthies' +} + +export default function SQLAdvisorDetail() { + const ctx = useContext(SQLAdvisorContext) + const { id } = useQueryParams() + const [sqlTunedDetail, setSqlTunedDetail] = + useState(null) + const [sqlExpanded, setSqlExpanded] = useState(false) + const [loading, setLoading] = useState(true) + const toggleSqlExpanded = () => setSqlExpanded((prev) => !prev) + + const tableClausesColumns = useMemo( + () => [ + { + title: 'Table', + dataIndex: 'table_name', + key: 'table_name', + ellipsis: true, + render: (_, row) => { + return ( + + {row.table_name} + + ) + } + }, + { + title: 'Index Name', + dataIndex: 'index_name', + key: 'index_name', + ellipsis: true, + render: (_, row) => { + return <>{row.index_name} + } + }, + { + title: 'Column', + dataIndex: 'columns', + key: 'columns', + ellipsis: true, + render: (_, row) => { + return <>{row.columns} + } + }, + { + title: 'Clustered', + dataIndex: 'clusterd', + key: 'clusterd', + width: 100, + ellipsis: true, + render: (_, row) => { + return <>{row.clusterd ? 'Yes' : 'No'} + } + }, + { + title: 'Visible', + dataIndex: 'visible', + key: 'visible', + ellipsis: true, + render: (_, row) => { + return <>{row.visible ? 'Yes' : 'No'} + } + } + ], + [] + ) + + const tableHealthiesColumns = useMemo( + () => [ + { + title: 'Table', + dataIndex: 'table_name', + key: 'table_name', + ellipsis: true, + render: (_, row) => { + return ( + + {row.table_name} + + ) + } + }, + { + title: 'Healthy', + dataIndex: 'healthy', + key: 'healthy', + ellipsis: true, + render: (_, row) => { + return <>{row.healthy} + } + }, + { + title: `Analyzed Time (UTC${ + tz.getTimeZone() < 0 ? '-' : '+' + }${tz.getTimeZone()})`, + dataIndex: 'checked_time', + key: 'checked_time', + ellipsis: true, + render: () => { + return ( + <> + {dayjs(sqlTunedDetail?.checked_time) + .utcOffset(tz.getTimeZone()) + .format('YYYY-MM-DD HH:mm:ss')} + + ) + } + } + ], + [sqlTunedDetail] + ) + + const existingIndexes = sqlTunedDetail?.table_clauses?.map( + (item) => item.index_list + ) + + const suggestedCommands = sqlTunedDetail?.suggested_command + const suggestedCommandsCopyData = + suggestedCommands && + suggestedCommands.map((command) => + getSuggestedCommand(command.suggestion_key, command.params) + ) + + const suggestedCMDExplanation = + suggestedCommands && + suggestedCommands + .map((cmd) => { + const fields = cmd.cmd_explanation.fields + const table_name = cmd.cmd_explanation.table_name + const explanation = { + fields: fields, + table_name: table_name + } + return fields && table_name ? explanation : null + }) + .filter((cmd) => cmd) + + useEffect(() => { + const sqlTunedDetailGet = async () => { + try { + const res = await ctx?.ds.tuningDetailGet(id) + setSqlTunedDetail(TunedDetailData!) + } catch (e) { + } finally { + setLoading(false) + } + } + + sqlTunedDetailGet() + }, [ctx, id]) + + return ( +
+ + + + } + > +
+
+ {loading && } +
+ {sqlTunedDetail && ( + + + + + + SQL Statement + + + } + > + + } + > + + + + + SQL Digest + + + } + > + {sqlTunedDetail.sql_digest} + + + Plan Digest + + + } + > + {sqlTunedDetail.plan_digest} + + + {suggestedCMDExplanation && suggestedCMDExplanation.length > 0 && ( + <> +

The query is {sqlTunedDetail.insight_type} on

+
    + {suggestedCMDExplanation.map((cmdExp) => ( +
  • + fields{' '} + + {cmdExp?.fields.join(', ')} + {' '} + in the{' '} + + {cmdExp!.table_name} + {' '} + table +
    • + ))} +
+

+ which is expected to have a{' '} + + {sqlTunedDetail.impact.toUpperCase()}{' '} + + on query performance. +

+ + )} +

+ You can execute this command on create teh corresponding + index:{' '} +

+ {suggestedCommands && suggestedCommandsCopyData && ( +
+
+ {suggestedCommands.map((command) => ( +
+ {getSuggestedCommand( + command!.suggestion_key, + command!.params + )} +
+ ))} +
+ +
+ )} + + + {sqlTunedDetail.table_clauses && + existingIndexes && + existingIndexes.flat().length > 0 && ( + + +
+ + + )} + {sqlTunedDetail.table_healthies && + sqlTunedDetail.table_healthies.length > 0 && ( + + +
+ + + )} + + )} + + + ) +} diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/UnstablePlanDetail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/UnstablePlanDetail.tsx new file mode 100644 index 0000000000..c5c1e4f9b0 --- /dev/null +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/UnstablePlanDetail.tsx @@ -0,0 +1,206 @@ +import React, { useEffect, useState, useMemo } from 'react' +import { + Head, + Descriptions, + Expand, + HighlightSQL, + CopyLink +} from '@lib/components' +import { Link } from 'react-router-dom' +import { ArrowLeftOutlined, LoadingOutlined } from '@ant-design/icons' +import { Space, Collapse, Tooltip, Table } from 'antd' +import styles from './index.module.less' +import { UnstablePlanDetailData } from './UnstablePlanDetailData' + +console.log('UnstablePlanDetailData', UnstablePlanDetailData) +const { Panel } = Collapse + +const UnstablePlanDetail = () => { + const [unstablePlanDetail, setUnstablePlanDetail] = useState( + UnstablePlanDetailData + ) + const [loading, setLoading] = useState(false) + const [sqlExpanded, setSqlExpanded] = useState(false) + const toggleSqlExpanded = () => setSqlExpanded((prev) => !prev) + + useEffect(() => { + setUnstablePlanDetail(UnstablePlanDetailData) + }, []) + + const plans = unstablePlanDetail.plans + + const plansColumns = useMemo( + () => [ + { + title: 'Plan ID', + dataIndex: 'plan_id', + key: 'plan_id', + ellipsis: true, + render: (_, row) => { + return ( + + {row.plan_id} + + ) + } + }, + { + title: 'Mean Latency', + dataIndex: 'avg_latency', + key: 'avg_latency', + ellipsis: true, + render: (_, row) => { + return <>{row.avg_latency} + } + }, + { + title: 'Execution Count', + dataIndex: 'exec_count', + key: 'exec_count', + ellipsis: true, + render: (_, row) => { + return <>{row.exec_count} + } + }, + { + title: 'Mean Memory', + dataIndex: 'avg_mem_byte', + key: 'avg_mem_byte', + width: 100, + ellipsis: true, + render: (_, row) => { + return <>{row.avg_mem_byte} + } + } + ], + [] + ) + return ( +
+ + + + } + /> +
+
+ {loading && } +
+ {unstablePlanDetail && ( + + + + + + SQL Statement + + + } + > + + } + > + + + + + SQL Digest + + + } + > + {unstablePlanDetail.statement.digest} + + + {plans && ( + <> +

+ The query has multiple execution plans, which the + execution plan has the lowest average latency among all. +

+
    +
  • + { + unstablePlanDetail.statement.suggest_plan_overview + .plan_digest + } +
    • +
+

+ We can bind this SQL statement to this specific execution + plan, which is expected to have a{' '} + + {unstablePlanDetail.statement.impact.toUpperCase()}{' '} + + impact on query performance. +

+ + )} +

+ You can execute this command to create the corresponding plan + binding:{' '} +

+
+
+ { + unstablePlanDetail.statement.suggest_plan_overview + .create_binding_statement + } +
+ +
+ + + + +
+ + + + )} + + + ) +} + +export default UnstablePlanDetail diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/index.tsx index f848b36646..090d6aae51 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/index.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/index.tsx @@ -1,350 +1,4 @@ -import React, { useState, useMemo, useEffect, useContext } from 'react' +import SQLAdvisorDetail from './IndexInsightDetail' +import UnstablePlanDetail from './UnstablePlanDetail' -import { - Head, - Descriptions, - Expand, - HighlightSQL, - CopyLink -} from '@lib/components' -import { Link } from 'react-router-dom' -import { ArrowLeftOutlined } from '@ant-design/icons' -import useQueryParams from '@lib/utils/useQueryParams' -import { Space, Collapse, Tooltip, Table } from 'antd' - -import { LoadingOutlined } from '@ant-design/icons' -import { getSuggestedCommand } from '../../utils/suggestedCommandMaps' -import { TuningDetailProps } from '../../types' -import { SQLAdvisorContext } from '../../context' -import dayjs from 'dayjs' -import tz from '@lib/utils/timezone' -import styles from './index.module.less' - -const { Panel } = Collapse - -const PanelMaps: Record = { - basic: 'Basic Information', - table_clause: 'Existing Indexes', - table_healthies: 'Table Healthies' -} - -export default function SQLAdvisorDetail() { - const ctx = useContext(SQLAdvisorContext) - const { id } = useQueryParams() - const [sqlTunedDetail, setSqlTunedDetail] = - useState(null) - const [sqlExpanded, setSqlExpanded] = useState(false) - const [loading, setLoading] = useState(true) - const toggleSqlExpanded = () => setSqlExpanded((prev) => !prev) - - const tableClausesColumns = useMemo( - () => [ - { - title: 'Table', - dataIndex: 'table_name', - key: 'table_name', - ellipsis: true, - render: (_, row) => { - return ( - - {row.table_name} - - ) - } - }, - { - title: 'Index Name', - dataIndex: 'index_name', - key: 'index_name', - ellipsis: true, - render: (_, row) => { - return <>{row.index_name} - } - }, - { - title: 'Column', - dataIndex: 'columns', - key: 'columns', - ellipsis: true, - render: (_, row) => { - return <>{row.columns} - } - }, - { - title: 'Clustered', - dataIndex: 'clusterd', - key: 'clusterd', - width: 100, - ellipsis: true, - render: (_, row) => { - return <>{row.clusterd ? 'Yes' : 'No'} - } - }, - { - title: 'Visible', - dataIndex: 'visible', - key: 'visible', - ellipsis: true, - render: (_, row) => { - return <>{row.visible ? 'Yes' : 'No'} - } - } - ], - [] - ) - - const tableHealthiesColumns = useMemo( - () => [ - { - title: 'Table', - dataIndex: 'table_name', - key: 'table_name', - ellipsis: true, - render: (_, row) => { - return ( - - {row.table_name} - - ) - } - }, - { - title: 'Healthy', - dataIndex: 'healthy', - key: 'healthy', - ellipsis: true, - render: (_, row) => { - return <>{row.healthy} - } - }, - { - title: `Analyzed Time (UTC${ - tz.getTimeZone() < 0 ? '-' : '+' - }${tz.getTimeZone()})`, - dataIndex: 'checked_time', - key: 'checked_time', - ellipsis: true, - render: () => { - return ( - <> - {dayjs(sqlTunedDetail?.checked_time) - .utcOffset(tz.getTimeZone()) - .format('YYYY-MM-DD HH:mm:ss')} - - ) - } - } - ], - [sqlTunedDetail] - ) - - const existingIndexes = sqlTunedDetail?.table_clauses?.map( - (item) => item.index_list - ) - - const suggestedCommands = sqlTunedDetail?.suggested_command - const suggestedCommandsCopyData = - suggestedCommands && - suggestedCommands.map((command) => - getSuggestedCommand(command.suggestion_key, command.params) - ) - - const suggestedCMDExplanation = - suggestedCommands && - suggestedCommands - .map((cmd) => { - const fields = cmd.cmd_explanation.fields - const table_name = cmd.cmd_explanation.table_name - const explanation = { - fields: fields, - table_name: table_name - } - return fields && table_name ? explanation : null - }) - .filter((cmd) => cmd) - - useEffect(() => { - const sqlTunedDetailGet = async () => { - try { - const res = await ctx?.ds.tuningDetailGet(id) - setSqlTunedDetail(res!) - } catch (e) { - } finally { - setLoading(false) - } - } - - sqlTunedDetailGet() - }, [ctx, id]) - - return ( -
- - - - } - > -
-
- {loading && } -
- {sqlTunedDetail && ( - - - - - - SQL Statement - - - } - > - - } - > - - - - - SQL Digest - - - } - > - {sqlTunedDetail.sql_digest} - - - Plan Digest - - - } - > - {sqlTunedDetail.plan_digest} - - - {suggestedCMDExplanation && suggestedCMDExplanation.length > 0 && ( - <> -

The query is {sqlTunedDetail.insight_type} on

-
    - {suggestedCMDExplanation.map((cmdExp) => ( -
  • - fields{' '} - - {cmdExp?.fields.join(', ')} - {' '} - in the{' '} - - {cmdExp!.table_name} - {' '} - table -
    • - ))} -
-

- which is expected to have a{' '} - - {sqlTunedDetail.impact.toUpperCase()}{' '} - - on query performance. -

- - )} -

- You can execute this command on create teh corresponding - index:{' '} -

- {suggestedCommands && suggestedCommandsCopyData && ( -
-
- {suggestedCommands.map((command) => ( -
- {getSuggestedCommand( - command!.suggestion_key, - command!.params - )} -
- ))} -
- -
- )} - - - {sqlTunedDetail.table_clauses && - existingIndexes && - existingIndexes.flat().length > 0 && ( - - -
- - - )} - {sqlTunedDetail.table_healthies && - sqlTunedDetail.table_healthies.length > 0 && ( - - -
- - - )} - - )} - - - ) -} +export { SQLAdvisorDetail, UnstablePlanDetail } diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/List/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/List/index.tsx index baaac39b5e..2b955f097e 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/List/index.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/List/index.tsx @@ -1,7 +1,10 @@ import React, { useContext } from 'react' import styles from './List.module.less' -import { IndexInsightListWithRegister, IndexInsightList } from '../../component' +import { + PerformanceInsightListWithRegister, + PerformanceInsightList +} from '../../component' import { SQLAdvisorContext } from '../../context' export default function SQLAdvisorOverview() { @@ -9,11 +12,11 @@ export default function SQLAdvisorOverview() { return (
- {ctx?.registerUserDB ? ( - - ) : ( - - )} + {/* {ctx?.registerUserDB ? ( + + ) : ( */} + + {/* )} */}
) } diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/index.tsx index 641e4de57a..e936a80b0d 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/index.tsx +++ b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/index.tsx @@ -1,4 +1,4 @@ import List from './List' -import Detail from './Detail' +import { SQLAdvisorDetail, UnstablePlanDetail } from './Detail' -export { List, Detail } +export { List, SQLAdvisorDetail, UnstablePlanDetail }