chore: init unstable plan

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 <Link to={`/sql_advisor/detail?id=${record.id}`}>Detail</Link>
+          return (
+            <Link to={`/sql_advisor/index_insight_detail?id=${record.id}`}>
+              Detail
+            </Link>
+          )
         }
       }
     ],
     []
   )
 
+  console.log('sqlTunedList', sqlTunedList)
+
   return (
-    <Card noMarginTop>
+    <Card noMarginLeft noMarginRight noMarginTop>
       <Table
         dataSource={sqlTunedList?.tuned_results!}
         columns={columns}

ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightList.tsx → ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/PerformanceInsightList.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useContext, useState, useRef } from 'react'
 
 import IndexInsightTable, { useSQLTunedListGet } from './IndexInsightTable'
+import UnstablePlanTable, { useUnstablePlanListGet } from './UnstabelPlanTable'
 
 import {
   Space,
@@ -11,7 +12,8 @@ import {
   Modal,
   Tooltip,
   Drawer,
-  Checkbox
+  Checkbox,
+  Tabs
 } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Card, Toolbar } from '@lib/components'
@@ -25,7 +27,7 @@ interface IndexInsightListProps {
   isDeactivating?: boolean
 }
 
-const IndexInsightList = ({
+const PerformanceInsightList = ({
   onHandleDeactivate,
   isDeactivating
 }: IndexInsightListProps) => {
@@ -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 = ({
           </Space>
           <Space align="center" style={{ marginTop: 0 }}>
             <Tooltip
-              title="Each insight will cover diagnosis data from the past 24 hours."
+              title="Each insight will cover diagnosis data from the past 3 hours."
               placement="rightTop"
             >
               <InfoCircleOutlined />
@@ -252,16 +255,27 @@ const IndexInsightList = ({
             type="warning"
             showIcon
             closable
+            style={{ marginBottom: '10px' }}
           />
         )}
+        <Tabs defaultActiveKey="index_insight">
+          <Tabs.TabPane tab="Index Insight" key="index_insight">
+            <IndexInsightTable
+              sqlTunedList={sqlTunedList}
+              loading={loading}
+              onHandlePaginationChange={handlePaginationChange}
+            />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="Unstable Plan" key="unstable_plan">
+            <UnstablePlanTable
+              unstablePlanList={unstablePlanList}
+              loading={loading}
+            />
+          </Tabs.TabPane>
+        </Tabs>
       </Card>
-      <IndexInsightTable
-        sqlTunedList={sqlTunedList}
-        loading={loading}
-        onHandlePaginationChange={handlePaginationChange}
-      />
     </>
   )
 }
 
-export default IndexInsightList
+export default PerformanceInsightList

ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.tsx → 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<UnRegisteredUserDBProps> = ({
   )
 }
 
-const IndexInsightListWithRegister = () => {
+const PerformanceInsightListWithRegister = () => {
   const ctx = useContext(SQLAdvisorContext)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [isUserDBRegistered, setIsUserDBRegistered] = useState<boolean>(false)
@@ -221,7 +221,7 @@ const IndexInsightListWithRegister = () => {
       ) : (
         <>
           {isUserDBRegistered ? (
-            <IndexInsightList
+            <PerformanceInsightList
               onHandleDeactivate={handleDeactivate}
               isDeactivating={isDeactivating}
             />
@@ -234,4 +234,4 @@ const IndexInsightListWithRegister = () => {
   )
 }
 
-export default IndexInsightListWithRegister
+export default PerformanceInsightListWithRegister

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<any | null>()
+  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 (
+            <Tooltip
+              title={
+                <HighlightSQL
+                  sql={record.suggest_plan_overview.plan_digest}
+                  theme="dark"
+                />
+              }
+              placement="left"
+            >
+              <TextWrap>
+                <HighlightSQL
+                  sql={record.suggest_plan_overview.plan_digest}
+                  compact
+                />
+              </TextWrap>
+            </Tooltip>
+          )
+        }
+      },
+      {
+        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 (
+            <Link
+              to={`/sql_advisor/unstable_plan_detail?id=${record.statement_id}`}
+            >
+              Detail
+            </Link>
+          )
+        }
+      }
+    ],
+    []
+  )
+  console.log('unstablePlanList', unstablePlanList)
+  return (
+    <Card noMarginTop noMarginLeft noMarginRight>
+      <Table
+        dataSource={unstablePlanList.statements}
+        columns={columns}
+        loading={loading}
+        size="small"
+        pagination={{
+          total: unstablePlanList?.total
+        }}
+      />
+    </Card>
+  )
+}
+
+export default UnstablePlanTable

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 }

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 (
     <Routes>
       <Route path="/sql_advisor" element={<List />} />
-      <Route path="/sql_advisor/detail" element={<Detail />} />
+      <Route
+        path="/sql_advisor/index_insight_detail"
+        element={<SQLAdvisorDetail />}
+      />
+      <Route
+        path="/sql_advisor/unstable_plan_detail"
+        element={<UnstablePlanDetail />}
+      />
     </Routes>
   )
 }