From 58f855e07541e19d96a78bd05db0c87fdd994e00 Mon Sep 17 00:00:00 2001
From: Sparkle <1284531+baurine@users.noreply.github.com>
Date: Wed, 25 Oct 2023 17:29:04 +0800
Subject: [PATCH] chore(topsql): show cluster name and disable auto-refresh for
 clinic (#1606)

---
 .../public/ngm.html                           |  9 +++++++--
 .../src/apps/TopSQL/context/index.ts          |  2 ++
 .../src/apps/TopSQL/pages/List/List.tsx       | 20 ++++++++++++++++---
 3 files changed, 26 insertions(+), 5 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
index 131050718b..03fd64bba1 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
@@ -121,11 +121,14 @@
       const provider = searchParams.get('provider') || ''
       const region = searchParams.get('region') || ''
       const orgId = searchParams.get('orgId') || ''
-      const orgName = searchParams.get('orgName') || ''
       const projectId = searchParams.get('projectId') || ''
       const clusterId = searchParams.get('clusterId') || ''
       const deployType = searchParams.get('deployType') || ''
+
+      const orgName = searchParams.get('orgName') || ''
+      const clusterName = searchParams.get('clusterName') || ''
       const userName = searchParams.get('userName') || ''
+
       if (
         apiToken === '' ||
         provider === '' ||
@@ -170,6 +173,7 @@
             checkNgm: false,
             showSetting: false,
             orgName,
+            clusterName,
             userName,
 
             timeRangeSelector: {
@@ -183,7 +187,8 @@
                 24 * 60 * 60
               ],
               customAbsoluteRangePicker: true
-            }
+            },
+            autoRefresh: false
           }
         }
       })
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/context/index.ts
index dd45400a53..ff13f649c8 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/context/index.ts
+++ b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/context/index.ts
@@ -44,9 +44,11 @@ export interface ITopSQLConfig {
     recentSeconds: number[]
     customAbsoluteRangePicker: boolean
   }
+  autoRefresh?: boolean
 
   // for clinic
   orgName?: string
+  clusterName?: string
   userName?: string
 }
 
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx
index 0bc1b55c46..e9a44a96e0 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx
@@ -4,7 +4,8 @@ import React, {
   useContext,
   useEffect,
   useRef,
-  useState
+  useState,
+  useMemo
 } from 'react'
 import { Space, Button, Spin, Alert, Tooltip, Drawer, Result } from 'antd'
 import {
@@ -126,6 +127,18 @@ export function TopSQLList() {
 
   const chartRef = useRef<any>(null)
 
+  // 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.container} ref={containerRef}>
@@ -156,9 +169,9 @@ export function TopSQLList() {
         )}
 
         <Card noMarginBottom>
-          {ctx?.cfg.orgName && (
+          {clusterInfo && (
             <div style={{ marginBottom: 8, textAlign: 'right' }}>
-              Org: {ctx?.cfg.orgName}
+              {clusterInfo}
             </div>
           )}
 
@@ -194,6 +207,7 @@ export function TopSQLList() {
                 disabled={isLoading}
               />
               <AutoRefreshButton
+                defaultValue={ctx?.cfg.autoRefresh === false ? 0 : undefined}
                 disabled={isLoading}
                 onRefresh={async () => {
                   await fetchInstancesAndSelectInstance()