feat(slow-query): show org and cluster info in clinic (#1621)

pingcap · Dec 5, 2023 · 706489f · 706489f
1 parent b14203d
commit 706489f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html b/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
@@ -167,14 +167,27 @@
           slowQuery: {
             enableExport: false,
             showDBFilter: false,
-            listApiReturnDetail: false // so we can use the result returned by list api in the detail page, avoid reqeust detail api
+            listApiReturnDetail: false, // so we can use the result returned by list api in the detail page, avoid request detail api
+
+            orgName,
+            clusterName,
+            timeRangeSelector: {
+              recentSeconds: [
+                5 * 60,
+                15 * 60,
+                30 * 60,
+                60 * 60,
+                2 * 60 * 60,
+                3 * 60 * 60
+              ],
+              customAbsoluteRangePicker: true
+            }
           },
           topSQL: {
             checkNgm: false,
             showSetting: false,
             orgName,
             clusterName,
-            userName,
 
             timeRangeSelector: {
               recentSeconds: [

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/context/index.ts
@@ -76,6 +76,10 @@ export interface ISlowQueryConfig extends IContextConfig {
     recentSeconds: number[]
     customAbsoluteRangePicker: boolean
   }
+
+  // for clinic
+  orgName?: string
+  clusterName?: string
 }
 
 export interface ISlowQueryContext {

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/List/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/List/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Select,
@@ -182,9 +182,27 @@ function List() {
     }
   })
 
+  // only for clinic
+  const clusterInfo = useMemo(() => {
+    const infos: string[] = []
+    if (ctx?.cfg.orgName) {
+      infos.push(`Org: ${ctx?.cfg.orgName}`)
+    }
+    if (ctx?.cfg.clusterName) {
+      infos.push(`Cluster: ${ctx?.cfg.clusterName}`)
+    }
+    return infos.join(' | ')
+  }, [ctx?.cfg.orgName, ctx?.cfg.clusterName])
+
   return (
     <div className={styles.list_container}>
       <Card noMarginBottom>
+        {clusterInfo && (
+          <div style={{ marginBottom: 8, textAlign: 'right' }}>
+            {clusterInfo}
+          </div>
+        )}
+
         <Toolbar className={styles.list_toolbar} data-e2e="slow_query_toolbar">
           <Space>
             {ctx?.cfg.timeRangeSelector !== undefined ? (