feat(top_slowquery): implement the ui

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": true
+}

ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html

@@ -144,6 +144,13 @@
         window.location.assign('/')
       }
 
+      // const topslowQueryBlockOrgIds = ['1372813089209061633']
+      // const topslowQueryBlockOrgIds = [
+      //   '1372813089209061633',
+      //   '1369847559691367400'
+      // ]
+      // const enableTopSlowquery = !topslowQueryBlockOrgIds.includes(orgId)
+
       const apiPathBase = `/ngm/api/v1`
       startDashboard({
         appOptions: {
@@ -172,17 +179,22 @@
 
             orgName,
             clusterName,
-            timeRangeSelector: {
-              recentSeconds: [
-                5 * 60,
-                15 * 60,
-                30 * 60,
-                60 * 60,
-                2 * 60 * 60,
-                3 * 60 * 60
-              ],
-              customAbsoluteRangePicker: true
-            }
+            showTopSlowQueryLink: false
+            // timeRangeSelector: {
+            //   recentSeconds: [
+            //     5 * 60,
+            //     15 * 60,
+            //     30 * 60,
+            //     60 * 60,
+            //     2 * 60 * 60,
+            //     3 * 60 * 60
+            //   ],
+            //   customAbsoluteRangePicker: false
+            // }
+          },
+          topSlowQuery: {
+            orgName,
+            clusterName
           },
           topSQL: {
             checkNgm: false,
@@ -213,7 +225,13 @@
             listDuration: 1
           }
         },
-        appsEnabled: ['topsql', 'slow_query', 'conprof', 'sql_advisor']
+        appsEnabled: [
+          'topsql',
+          'slow_query',
+          'conprof',
+          'sql_advisor',
+          'top_slowquery'
+        ]
       })
     </script>
   </body>

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSlowQuery/context-provider.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo } from 'react'
+import {
+  TopSlowQueryContext,
+  TopSlowQueryCtxValue
+} from '@pingcap/tidb-dashboard-lib'
+import { getGlobalConfig } from '~/utils/globalConfig'
+
+import client from '~/client'
+
+const debugHeaders = {
+  // 'x-cluster-id': '1379661944646413143',
+  // 'x-org-id': '1372813089209061633',
+  // 'x-project-id': '1372813089454525346',
+  // 'x-provider': 'aws',
+  // 'x-region': 'us-east-1',
+  // 'x-env': 'prod'
+}
+
+export function TopSlowQueryProvider(props: { children: React.ReactNode }) {
+  const ctxValue = useMemo<TopSlowQueryCtxValue>(() => {
+    return {
+      api: {
+        getAvailableTimeWindows: async ({
+          from,
+          to,
+          tws
+        }: {
+          from: number
+          to: number
+          tws: number
+        }) => {
+          const hours = tws / 3600
+          return client
+            .getAxiosInstance()
+            .get(
+              `/slow_query/stats/time_windows?begin_time=${from}&end_time=${to}&hours=${hours}`,
+              {
+                headers: debugHeaders
+              }
+            )
+            .then((res) => res.data)
+        },
+
+        getMetrics: async (params: { start: number; end: number }) => {
+          const hours = (params.end - params.start) / 3600
+          return client
+            .getAxiosInstance()
+            .get(
+              `/slow_query/stats/metric?begin_time=${params.start}&hours=${hours}&metric_name=count_per_minute`,
+              {
+                headers: debugHeaders
+              }
+            )
+            .then((res) => res.data)
+        },
+
+        getDatabaseList: async (params: { start: number; end: number }) => {
+          const hours = (params.end - params.start) / 3600
+          return client
+            .getAxiosInstance()
+            .get(
+              `/slow_query/stats/databases?begin_time=${params.start}&hours=${hours}`,
+              {
+                headers: debugHeaders
+              }
+            )
+            .then((res) => res.data)
+        },
+
+        getTopSlowQueries: async (params: {
+          start: number
+          end: number
+          topType: string
+          db: string
+          internal: string
+        }) => {
+          const hours = (params.end - params.start) / 3600
+          const isInternal = params.internal === 'yes'
+          return client
+            .getAxiosInstance()
+            .get(
+              `/slow_query/stats?begin_time=${
+                params.start
+              }&hours=${hours}&database=${
+                params.db ?? ''
+              }&internal=${isInternal}&order_by=${params.topType}&limit=10`,
+              {
+                headers: debugHeaders
+              }
+            )
+            .then((res) => res.data)
+        }
+      },
+      cfg: getGlobalConfig().appsConfig?.topSlowQuery || {}
+    }
+  }, [])
+
+  return (
+    <TopSlowQueryContext.Provider value={ctxValue}>
+      {props.children}
+    </TopSlowQueryContext.Provider>
+  )
+}

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSlowQuery/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { TopSlowQueryApp } from '@pingcap/tidb-dashboard-lib'
+import { TopSlowQueryProvider } from './context-provider'
+
+export default function () {
+  return (
+    <TopSlowQueryProvider>
+      <TopSlowQueryApp />
+    </TopSlowQueryProvider>
+  )
+}

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSlowQuery/meta.ts

@@ -0,0 +1,8 @@
+import { BarChartOutlined } from '@ant-design/icons'
+
+export default {
+  id: 'top_slowquery',
+  routerPrefix: '/top_slowquery',
+  icon: BarChartOutlined,
+  reactRoot: () => import('.')
+}

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSlowQuery/sample-data/slowqueries.json

@@ -0,0 +1,142 @@
+[
+  {
+    "sql_digest": "9a4170a059f3113e196bdac9c156d6cecf3ccbef8eb238b878d04e61aa7d9741",
+    "sql_text": "start transaction;",
+    "count": 8559,
+    "sum_latency": 21234.817677733,
+    "max_latency": 4.577684212,
+    "avg_latency": 2.4809928353467696,
+    "sum_memory": 22654976,
+    "max_memory": 520192,
+    "avg_memory": 2646.91856525295,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "9505cacb7c710ed17125fcc6cb3669e8ddca6c8cd8af6a31f6b3cd64604c3098",
+    "sql_text": "commit;",
+    "count": 6973,
+    "sum_latency": 19676.377774166976,
+    "max_latency": 9.5105206,
+    "avg_latency": 2.821795177709304,
+    "sum_memory": 83042304,
+    "max_memory": 2088960,
+    "avg_memory": 11909.12146852144,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "6d07d8784dc1f26e88f9498494ea658077d8f24354ea9840386ffa5b05bb96e3",
+    "sql_text": "select * from `dh_audit_record` where `user_id` = ? and status in ( ... ) and `charge_time` \u003c ? order by `charge_time` asc , `id` asc;",
+    "count": 2358,
+    "sum_latency": 5021.569481481002,
+    "max_latency": 3.45770166,
+    "avg_latency": 2.1295884145381687,
+    "sum_memory": 73377498,
+    "max_memory": 63388,
+    "avg_memory": 31118.531806615778,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "3067b3ecccb86eceaeb26d43420b0414ad2378bfe9d90cc01da6ba1b0619609e",
+    "sql_text": "select `dh_active_category_new` . `id` , `dh_active_category_new` . `category_name` , `dh_active_category_new` . `category_type` , `dh_active_category_new` . `sort_number` , `dh_active_category_new` . `category_status` , `dh_active_category_new` . `active_no` , `dh_active_category_new` . `translate_names` , `dh_active_category_new` . `content` , `dh_active_category_new` . `update_time` , `dh_active_category_new` . `op_user` from `dh_active_category_new` order by `sort_number` asc;",
+    "count": 1779,
+    "sum_latency": 4512.599653008,
+    "max_latency": 4.171903397,
+    "avg_latency": 2.536593396856661,
+    "sum_memory": 9178920,
+    "max_memory": 12288,
+    "avg_memory": 5159.595278246205,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "c2d9a6d6ea4c41fcf811146999a6113be6d2db02cf9e2ba63c5d54f5d7d89c90",
+    "sql_text": "select `id` from `dh_game_record` where `game_record_id` = ? limit ?;",
+    "count": 1074,
+    "sum_latency": 2279.700366508,
+    "max_latency": 3.455839219,
+    "avg_latency": 2.1226260395791434,
+    "sum_memory": 0,
+    "max_memory": 0,
+    "avg_memory": 0,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "d58c4a60c4657c30d588c86a7d85a4894e9cffdd12076a61d1b3b2b318904c3a",
+    "sql_text": "select * from `dh_finance_details` where `message_status` = ? and `create_time` \u003c ? order by `create_time` desc limit ?;",
+    "count": 830,
+    "sum_latency": 3391.784238015004,
+    "max_latency": 12.926423231,
+    "avg_latency": 4.086487033753017,
+    "sum_memory": 21707732,
+    "max_memory": 61440,
+    "avg_memory": 26153.893975903615,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "77f10c86e21cb52c123ba0c7b3f0642136051351f4bc59a637290ffdc20b3678",
+    "sql_text": "select `useridx` , sum ( if ( `direct` = ? and `member_is_agent` = ... ) ) as `direct_agents` , sum ( if ( `direct` = ? and `member_is_agent` = ... ) ) as `direct_accounts` , sum ( if ( `direct` = ? and `member_is_agent` = ... ) ) as `other_agents` , sum ( if ( `direct` = ? and `member_is_agent` = ... ) ) as `other_accounts` from `dh_promote_myteam_detail` where `useridx` = ?;",
+    "count": 751,
+    "sum_latency": 926.2322493650005,
+    "max_latency": 3.791190985,
+    "avg_latency": 1.2333318899667116,
+    "sum_memory": 85776781,
+    "max_memory": 433917,
+    "avg_memory": 114216.75233022636,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "8b04b2a8bb0777143b5de1111ffdb142180bec5c58941568b2a2450aead8956d",
+    "sql_text": "select count ( ? ) as `days` from `dh_user_day_report` where `user_idx` = ? and `valid_bet` \u003e ?;",
+    "count": 746,
+    "sum_latency": 1915.1985941270002,
+    "max_latency": 4.038490419,
+    "avg_latency": 2.567290340652815,
+    "sum_memory": 17516890,
+    "max_memory": 67432,
+    "avg_memory": 23481.085790884717,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "3adcc90f3cc8cdfba25f8b1fdad067d2d6e7c4b3079836004aa6c2d330d13683",
+    "sql_text": "select `ifnull` ( sum ( `deposit` ) , ? ) as `total_deposit` from `dh_user_day_report` where `user_idx` = ?;",
+    "count": 582,
+    "sum_latency": 1478.318133973,
+    "max_latency": 3.483108902,
+    "avg_latency": 2.540065522290378,
+    "sum_memory": 16735193,
+    "max_memory": 60872,
+    "avg_memory": 28754.62714776632,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  },
+  {
+    "sql_digest": "daa1f705cac4db15a1a54fece6a5148fd1180d3ac422d8e5e1c1db7c3f9ae6f3",
+    "sql_text": "select `agent_id` , `agent_mode` , `settle_type` , `profit_agent_mode` , `commission_type` , `commission_start_time` , `commission_end_time` from `dh_agentmode` limit ?;",
+    "count": 386,
+    "sum_latency": 971.2267713840008,
+    "max_latency": 3.185514788,
+    "avg_latency": 2.5161315320829036,
+    "sum_memory": 13527988,
+    "max_memory": 74808,
+    "avg_memory": 35046.60103626943,
+    "sum_disk": 0,
+    "max_disk": 0,
+    "avg_disk": 0
+  }
+]

ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/main.tsx

@@ -47,6 +47,7 @@ import AppDiagnose from '~/apps/Diagnose/meta'
 import AppOptimizerTrace from '~/apps/OptimizerTrace/meta'
 import AppDeadlock from '~/apps/Deadlock/meta'
 import AppResourceManager from '~/apps/ResourceManager/meta'
+import AppTopSlowQuery from '~/apps/TopSlowQuery/meta'
 
 import LayoutMain from './layout/main'
 
@@ -171,6 +172,7 @@ async function webPageStart(appOptions: AppOptions) {
     .register(AppOptimizerTrace)
     .register(AppDeadlock)
     .register(AppResourceManager)
+    .register(AppTopSlowQuery)
 
   if (!appOptions.skipReloadWhoAmI) {
     try {

ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/globalConfig.ts

@@ -3,7 +3,8 @@ import {
   IOverviewConfig,
   ISlowQueryConfig,
   IStatementConfig,
-  ITopSQLConfig
+  ITopSQLConfig,
+  ITopSlowQueryConfig
 } from '@pingcap/tidb-dashboard-lib'
 
 export type AppOptions = {
@@ -44,6 +45,7 @@ export type ClusterInfo = {
 export type AppsConfig = {
   overview?: Partial<IOverviewConfig>
   slowQuery?: Partial<ISlowQueryConfig>
+  topSlowQuery?: Partial<ITopSlowQueryConfig>
   statement?: Partial<IStatementConfig>
   topSQL?: Partial<ITopSQLConfig>
   conProf?: Partial<IConProfilingConfig>

ui/packages/tidb-dashboard-lib/package.json

@@ -21,6 +21,7 @@
     "@diag-ui/chart": "^1.0.6",
     "@elastic/charts": "^46.10.1",
     "@g07cha/flexbox-react": "^5.0.0",
+    "@tanstack/react-query": "4",
     "@uifabric/utilities": "^7.33.5",
     "ace-builds": "^1.6.0",
     "ahooks": "^3.1.9",

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/context/index.ts

@@ -85,6 +85,7 @@ export interface ISlowQueryConfig extends IContextConfig {
   // for clinic
   orgName?: string
   clusterName?: string
+  showTopSlowQueryLink?: boolean
 }
 
 export interface ISlowQueryContext {