Hotifx Index Advisor (#1496)

pingcap · Feb 23, 2023 · 43533b6 · 43533b6
1 parent ef19f17
commit 43533b6
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 83 deletions.
diff --git a/ui/packages/tidb-dashboard-for-dbaas/package.json b/ui/packages/tidb-dashboard-for-dbaas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.82",
+  "version": "0.0.85",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [

diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/context.ts
@@ -15,9 +15,9 @@ class DataSource implements ISQLAdvisorDataSource {
   token = this.globalConfig.apiToken
   performanceInsightBaseUrl = this.globalConfig.performanceInsightBaseUrl
 
-  tuningListGet() {
+  tuningListGet(pageNumber?: number, pageSize?: number) {
     return fetch(
-      `${this.performanceInsightBaseUrl}?BackMethod=GetTunedIndexLists&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}`,
+      `${this.performanceInsightBaseUrl}?BackMethod=GetTunedIndexLists&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}&pageNumber=${pageNumber}&pageSize=${pageSize}`,
       {
         headers: {
           token: `Bearer ${this.token}`

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightList.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightList.tsx
@@ -10,7 +10,8 @@ import {
   Alert,
   Modal,
   Tooltip,
-  Drawer
+  Drawer,
+  Checkbox
 } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Card, Toolbar } from '@lib/components'
@@ -34,8 +35,15 @@ const IndexInsightList = ({
   const [showDeactivateModal, setShowDeactivateModal] = useState<boolean>(false)
   const [showSetting, setShowSetting] = useState(false)
   const [showCheckUpModal, setShowCheckUpModal] = useState(false)
-
+  const [dontRemindCheckUpNotice, setDontRemindCheckUpNotice] =
+    useState<boolean>(() =>
+      JSON.parse(
+        localStorage.getItem('index_insight_dont_remind_checkup_notice') ||
+          'false'
+      )
+    )
   const { sqlTunedList, refreshSQLTunedList, loading } = useSQLTunedListGet()
+  const [cancelRunningTask, setCancelRunningTask] = useState(false)
 
   const taskRunningStatusGet = useRef(() => {
     return ctx?.ds
@@ -68,7 +76,7 @@ const IndexInsightList = ({
       }
     }
     checkStatus()
-  }, [])
+  }, [cancelRunningTask])
 
   useEffect(() => {
     const checkSQLValidation = async () => {
@@ -103,7 +111,12 @@ const IndexInsightList = ({
     } finally {
       setNoTaskRunning(false)
       setShowCheckUpModal(false)
+      localStorage.setItem(
+        'index_insight_dont_remind_checkup_notice',
+        JSON.stringify(dontRemindCheckUpNotice)
+      )
       startCheckTaskStatusLoop.current()
+      setCancelRunningTask(false)
     }
   }
 
@@ -120,14 +133,15 @@ const IndexInsightList = ({
         notification.success({
           message: res.message
         })
-        setNoTaskRunning(true)
       } else {
         notification.error({
           message: res.message
         })
       }
     } catch (e) {
       console.log(e)
+    } finally {
+      setCancelRunningTask(true)
     }
   }
 
@@ -136,14 +150,27 @@ const IndexInsightList = ({
     setShowSetting(false)
   }
 
+  const handleCheckUpBtnClick = () => {
+    // if index_insight_dont_remind_checkup_notice has been checked, don't show comfirm modal again, checkup directly.
+    if (!dontRemindCheckUpNotice) {
+      setShowCheckUpModal(true)
+    } else {
+      handleIndexCheckUp()
+    }
+  }
+
+  const handlePaginationChange = (pageNumber: number, pageSize: number) => {
+    refreshSQLTunedList(pageNumber, pageSize)
+  }
+
   return (
     <>
       <Card>
         <Toolbar>
           <Space align="center">
             <Typography.Title level={4}>Performance Insight</Typography.Title>
           </Space>
-          <Space>
+          <Space align="center" style={{ marginTop: 0 }}>
             <Tooltip
               title="Each insight will cover diagnosis data from the past 24 hours."
               placement="rightTop"
@@ -152,7 +179,7 @@ const IndexInsightList = ({
             </Tooltip>
             <Button
               disabled={!noTaskRunning || showAlert}
-              onClick={() => setShowCheckUpModal(true)}
+              onClick={handleCheckUpBtnClick}
               loading={!noTaskRunning}
             >
               {noTaskRunning ? 'Check Up' : 'Task is Running'}
@@ -190,7 +217,7 @@ const IndexInsightList = ({
           onOk={hanleDeactivate}
         >
           <p>
-            After disabling, all generated insight data by this feature will be
+            After disabling, all insight data generated by this feature will be
             deleted.
           </p>
         </Modal>
@@ -199,14 +226,25 @@ const IndexInsightList = ({
           visible={showCheckUpModal}
           onCancel={() => setShowCheckUpModal(false)}
           destroyOnClose={true}
-          onOk={handleIndexCheckUp}
-          okText="Comfirm"
+          footer={null}
         >
           <p>
             When performing checks, system tables are queried. It is not
             recommended to perform checks when the cluster is already under
             heavy load.
           </p>
+          <div style={{ textAlign: 'center' }}>
+            <Space direction="vertical" align="center">
+              <Checkbox
+                onChange={(e) => setDontRemindCheckUpNotice(e.target.checked)}
+              >
+                Don't remind me again.
+              </Checkbox>
+              <Button onClick={handleIndexCheckUp} type="primary">
+                Comfirm
+              </Button>
+            </Space>
+          </div>
         </Modal>
         {showAlert && (
           <Alert
@@ -217,7 +255,11 @@ const IndexInsightList = ({
           />
         )}
       </Card>
-      <IndexInsightTable sqlTunedList={sqlTunedList} loading={loading} />
+      <IndexInsightTable
+        sqlTunedList={sqlTunedList}
+        loading={loading}
+        onHandlePaginationChange={handlePaginationChange}
+      />
     </>
   )
 }

diff --git a/...ackages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.tsx b/...ackages/tidb-dashboard-lib/src/apps/SQLAdvisor/component/IndexInsightListWithRegister.tsx
@@ -127,7 +127,7 @@ const UnRegisteredUserDB: React.FC<UnRegisteredUserDBProps> = ({
           <Card className={styles.instructionCard}>
             <Title level={5}>Permissions required:</Title>
             <Alert
-              message={`Please replace your password in the 'yourpassword' field.`}
+              message={`Please replace your user name and password in the 'yourusername' and 'yourpassword' field.`}
               type="warning"
               showIcon
             />

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
@@ -6,27 +6,37 @@ import { Tooltip, Table } from 'antd'
 import { Link } from 'react-router-dom'
 import { getSuggestedCommand } from '../utils/suggestedCommandMaps'
 import { SQLAdvisorContext } from '../context'
-import { TuningDetailProps } from '../types'
+import { SQLTunedListProps } from '../types'
 import dayjs from 'dayjs'
 import tz from '@lib/utils/timezone'
 
+const DEF_PAGINATION_PARAMS = {
+  pageNumber: 1,
+  pageSize: 20
+}
+
 export const useSQLTunedListGet = () => {
   const ctx = useContext(SQLAdvisorContext)
-  const [sqlTunedList, setSqlTunedList] = useState<TuningDetailProps[] | null>(
+  const [sqlTunedList, setSqlTunedList] = useState<SQLTunedListProps | null>(
     null
   )
   const [loading, setLoading] = useState(true)
 
-  const sqlTunedListGet = useRef(async () => {
-    try {
-      const res = await ctx?.ds.tuningListGet()
-      setSqlTunedList(res!)
-    } catch (e) {
-      console.log(e)
-    } finally {
-      setLoading(false)
+  const sqlTunedListGet = useRef(
+    async (pageNumber?: number, pageSize?: number) => {
+      try {
+        const res = await ctx?.ds.tuningListGet(
+          pageNumber || DEF_PAGINATION_PARAMS.pageNumber,
+          pageSize || DEF_PAGINATION_PARAMS.pageSize
+        )
+        setSqlTunedList(res!)
+      } catch (e) {
+        console.log(e)
+      } finally {
+        setLoading(false)
+      }
     }
-  })
+  )
 
   useEffect(() => {
     sqlTunedListGet.current()
@@ -36,21 +46,22 @@ export const useSQLTunedListGet = () => {
 }
 
 interface IndexInsightTableProps {
-  sqlTunedList: TuningDetailProps[] | null
+  sqlTunedList: SQLTunedListProps | null
   loading: boolean
+  onHandlePaginationChange?: (pageNumber: number, pageSize: number) => void
 }
 
 const IndexInsightTable = ({
   sqlTunedList,
-  loading
+  loading,
+  onHandlePaginationChange
 }: IndexInsightTableProps) => {
   const columns = useMemo(
     () => [
       {
         title: 'Impact',
         dataIndex: 'impact',
         key: 'impact',
-        width: 50,
         ellipsis: true,
         render: (_, record) => {
           return <>{record.impact}</>
@@ -60,7 +71,6 @@ const IndexInsightTable = ({
         title: 'Type',
         dataIndex: 'insight_type',
         key: 'type',
-        width: 90,
         ellipsis: true,
         render: (_, record) => {
           return <>{record.insight_type}</>
@@ -70,7 +80,6 @@ const IndexInsightTable = ({
         title: 'Suggested Command',
         dataIndex: 'suggested_command',
         key: 'suggested_command',
-        width: 200,
         ellipsis: true,
         render: (_, record) => {
           return (
@@ -100,7 +109,6 @@ const IndexInsightTable = ({
         title: 'Related Slow SQL',
         dataIndex: 'sql_statement',
         key: 'related_slow_sql',
-        width: 250,
         ellipsis: true,
         render: (_, record) => {
           return (
@@ -121,7 +129,6 @@ const IndexInsightTable = ({
         }${tz.getTimeZone()})`,
         dataIndex: 'checked_time',
         key: 'check_up_time',
-        width: 140,
         ellipsis: true,
         render: (_, record) => {
           return (
@@ -137,7 +144,6 @@ const IndexInsightTable = ({
         title: 'Results',
         dataIndex: 'detail',
         key: 'detail',
-        width: 80,
         render: (_, record) => {
           return <Link to={`/sql_advisor/detail?id=${record.id}`}>Detail</Link>
         }
@@ -149,10 +155,18 @@ const IndexInsightTable = ({
   return (
     <Card noMarginTop>
       <Table
-        dataSource={sqlTunedList!}
+        dataSource={sqlTunedList?.tuned_results!}
         columns={columns}
         loading={loading}
         size="small"
+        pagination={{
+          total: sqlTunedList?.count,
+          defaultCurrent: DEF_PAGINATION_PARAMS.pageNumber,
+          pageSize: DEF_PAGINATION_PARAMS.pageSize,
+          onChange: (pageNumber, pageSize) => {
+            onHandlePaginationChange?.(pageNumber, pageSize)
+          }
+        }}
       />
     </Card>
   )

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/context/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/context/index.tsx
@@ -1,11 +1,15 @@
 import { createContext } from 'react'
-import { TuningDetailProps, TuningTaskStatus } from '../types/'
+import {
+  TuningDetailProps,
+  TuningTaskStatus,
+  SQLTunedListProps
+} from '../types/'
 
 export interface ISQLAdvisorDataSource {
   tuningListGet(
     pageNumber?: number,
     pageSize?: number
-  ): Promise<TuningDetailProps[]>
+  ): Promise<SQLTunedListProps>
 
   tuningTaskStatusGet(): Promise<TuningTaskStatus>
 

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/index.module.less b/ui/packages/tidb-dashboard-lib/src/apps/SQLAdvisor/pages/Detail/index.module.less
@@ -0,0 +1,26 @@
+.InlineCodeBlock {
+  background: 1#f1f1f1;
+  padding: 1px 8px;
+  border: 1px solid #dedede;
+}
+
+.SuggestedCommand {
+  background: #f1f1f1;
+  padding: 3px 10px;
+  display: flex;
+  width: 100%;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+.HighImpact {
+  color: #f70000;
+}
+
+.MediumImpact {
+  color: #fc6f03;
+}
+
+.LowImpact {
+  color: #e5c613;
+}