From fc643576d9eb146683b89af23e4ad5e08d944871 Mon Sep 17 00:00:00 2001
From: baurine <2008.hbl@gmail.com>
Date: Fri, 27 Oct 2023 18:23:23 +0800
Subject: [PATCH 1/3] feat(conprof): support conprof on new o11y for clinic

---
 ui/package.json                               |  2 +-
 .../public/ngm.html                           |  8 +++-
 .../src/apps/ContinuousProfiling/context.ts   | 17 +++++++--
 .../src/apps/ContinuousProfiling/index.tsx    |  5 ++-
 .../src/utils/globalConfig.ts                 |  2 +
 .../src/apps/ContinuousProfiling/context.ts   |  8 +++-
 .../apps/ContinuousProfiling/context/index.ts |  9 ++++-
 .../src/apps/ContinuousProfiling/index.tsx    | 19 ++++++++--
 .../apps/ContinuousProfiling/pages/Detail.tsx |  3 +-
 .../apps/ContinuousProfiling/pages/List.tsx   | 37 ++++++++++---------
 .../tidb-dashboard-lib/src/utils/distro.ts    |  6 ++-
 11 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 199e72347d..15a41717ea 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -33,7 +33,7 @@
       "eslint --fix",
       "prettier --write"
     ],
-    "*.+(json|css|md)": "prettier --write"
+    "*.+(json|css|md|html)": "prettier --write"
   },
   "husky": {
     "hooks": {
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 03fd64bba1..5b0965eab8 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
@@ -189,8 +189,14 @@
               customAbsoluteRangePicker: true
             },
             autoRefresh: false
+          },
+          conProf: {
+            checkNgm: false,
+            showSetting: false,
+            listDuration: 1
           }
-        }
+        },
+        appsEnabled: ['topsql', 'slow_query', 'conprof', 'sql_advisor']
       })
     </script>
   </body>
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts
index 849c3738bd..b87e0b51fb 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts
@@ -1,7 +1,8 @@
 import {
   IConProfilingDataSource,
   IConProfilingContext,
-  ReqConfig
+  ReqConfig,
+  IConProfilingConfig
 } from '@pingcap/tidb-dashboard-lib'
 
 import client, { ConprofNgMonitoringConfig } from '~/client'
@@ -84,7 +85,15 @@ class DataSource implements IConProfilingDataSource {
 
 const ds = new DataSource()
 
-export const ctx: IConProfilingContext = {
+export const ctx: (
+  cfg: Partial<IConProfilingConfig>
+) => IConProfilingContext = (cfg) => ({
   ds,
-  cfg: { apiPathBase: client.getBasePath(), publicPathBase }
-}
+  cfg: {
+    apiPathBase: client.getBasePath(),
+    publicPathBase,
+    checkNgm: true,
+    showSetting: true,
+    ...cfg
+  }
+})
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/index.tsx b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/index.tsx
index 90a036f304..15240cf990 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/index.tsx
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/index.tsx
@@ -4,10 +4,13 @@ import {
   ConProfilingProvider
 } from '@pingcap/tidb-dashboard-lib'
 import { ctx } from './context'
+import { getGlobalConfig } from '~/utils/globalConfig'
 
 export default function () {
   return (
-    <ConProfilingProvider value={ctx}>
+    <ConProfilingProvider
+      value={ctx(getGlobalConfig().appsConfig?.conProf || {})}
+    >
       <ConProfilingApp />
     </ConProfilingProvider>
   )
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/globalConfig.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/globalConfig.ts
index c7fafbf8c4..bd74acc2fb 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/globalConfig.ts
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/globalConfig.ts
@@ -1,4 +1,5 @@
 import {
+  IConProfilingConfig,
   IOverviewConfig,
   ISlowQueryConfig,
   IStatementConfig,
@@ -45,6 +46,7 @@ export type AppsConfig = {
   slowQuery?: Partial<ISlowQueryConfig>
   statement?: Partial<IStatementConfig>
   topSQL?: Partial<ITopSQLConfig>
+  conProf?: Partial<IConProfilingConfig>
 }
 
 export type GlobalConfig = {
diff --git a/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts b/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts
index 849c3738bd..e990af0183 100644
--- a/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts
+++ b/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts
@@ -86,5 +86,11 @@ const ds = new DataSource()
 
 export const ctx: IConProfilingContext = {
   ds,
-  cfg: { apiPathBase: client.getBasePath(), publicPathBase }
+  cfg: {
+    apiPathBase: client.getBasePath(),
+    publicPathBase,
+    checkNgm: true,
+    showSetting: true,
+    listDuration: 2
+  }
 }
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
index 95e678c1ea..a51cadbbd2 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
@@ -58,9 +58,16 @@ export interface IConProfilingDataSource {
   getPDTopology(options?: ReqConfig): AxiosPromise<Array<TopologyPDInfo>>
 }
 
+export interface IConProfilingConfig extends IContextConfig {
+  publicPathBase: string
+  checkNgm: boolean
+  showSetting: boolean
+  listDuration?: number // unit hour, 1 means 1 hour, 2 means 2 hours
+}
+
 export interface IConProfilingContext {
   ds: IConProfilingDataSource
-  cfg: IContextConfig & { publicPathBase: string }
+  cfg: IConProfilingConfig
 }
 
 export const ConProfilingContext = createContext<IConProfilingContext | null>(
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx
index 90998d4093..e42f6bf60e 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx
@@ -13,25 +13,36 @@ addTranslations(translations)
 
 function AppRoutes() {
   useLocationChange()
+  const ctx = useContext(ConProfilingContext)
 
   return (
     <Routes>
       <Route
         path="/continuous_profiling"
         element={
-          <NgmNotStartedGuard>
+          ctx?.cfg.checkNgm ? (
+            <NgmNotStartedGuard>
+              <List />
+            </NgmNotStartedGuard>
+          ) : (
             <List />
-          </NgmNotStartedGuard>
+          )
         }
       />
       <Route
         path="/continuous_profiling/detail"
         element={
-          <NgmNotStartedGuard>
+          ctx?.cfg.checkNgm ? (
+            <NgmNotStartedGuard>
+              <ParamsPageWrapper>
+                <Detail />
+              </ParamsPageWrapper>
+            </NgmNotStartedGuard>
+          ) : (
             <ParamsPageWrapper>
               <Detail />
             </ParamsPageWrapper>
-          </NgmNotStartedGuard>
+          )
         }
       />
     </Routes>
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
index 91e73678c6..c1c84e55eb 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
@@ -189,7 +189,8 @@ export default function Page() {
         maxWidth: 100,
         onRender: (record) => {
           const profileType = record.profile_type
-          if (profileType === 'profile') {
+          // in the ngm, the `profile` is `cpu`
+          if (profileType === 'profile' || profileType === 'cpu') {
             return `CPU - ${profileDuration}s`
           }
           return upperFirst(profileType)
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
index fe089b3f8c..35297a8e93 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
@@ -37,17 +37,18 @@ import { useURLTimeRange } from '@lib/hooks/useURLTimeRange'
 
 export default function Page() {
   const ctx = useContext(ConProfilingContext)
+  const durationHour = ctx?.cfg.listDuration ?? 2
 
   const { timeRange, setTimeRange } = useURLTimeRange()
   const endTime = timeRange.type === 'recent' ? '' : `${timeRange.value[1]}`
   const setEndTime = (v) => {
     if (!v) {
-      setTimeRange({ type: 'recent', value: 2 * 60 * 60 })
+      setTimeRange({ type: 'recent', value: durationHour * 60 * 60 })
     } else {
       const endUnix = v.unix()
       setTimeRange({
         type: 'absolute',
-        value: [endUnix - 2 * 60 * 60, endUnix]
+        value: [endUnix - durationHour * 60 * 60, endUnix]
       })
     }
   }
@@ -78,7 +79,7 @@ export default function Page() {
     } else {
       _rangeEndTime = rangeEndTime
     }
-    const _rangeStartTime = _rangeEndTime.subtract(2, 'h')
+    const _rangeStartTime = _rangeEndTime.subtract(durationHour, 'h')
 
     return ctx!.ds.continuousProfilingGroupProfilesGet(
       _rangeStartTime.unix(),
@@ -234,7 +235,7 @@ export default function Page() {
                 />
               </Form.Item>
               <Form.Item label={t('conprof.list.toolbar.range_duration')}>
-                <span>-2h</span>
+                <span>-{durationHour}h</span>
               </Form.Item>
               <Form.Item>
                 <Button type="primary" htmlType="submit" loading={listLoading}>
@@ -256,19 +257,21 @@ export default function Page() {
                 <ReloadOutlined onClick={refresh} />
               )}
             </Tooltip>
-            <Tooltip
-              mouseEnterDelay={0}
-              mouseLeaveDelay={0}
-              title={t('conprof.list.toolbar.settings')}
-              placement="bottom"
-            >
-              <SettingOutlined
-                onClick={() => {
-                  setShowSettings(true)
-                  telemetry.clickSettings('settingIcon')
-                }}
-              />
-            </Tooltip>
+            {ctx?.cfg.showSetting && (
+              <Tooltip
+                mouseEnterDelay={0}
+                mouseLeaveDelay={0}
+                title={t('conprof.list.toolbar.settings')}
+                placement="bottom"
+              >
+                <SettingOutlined
+                  onClick={() => {
+                    setShowSettings(true)
+                    telemetry.clickSettings('settingIcon')
+                  }}
+                />
+              </Tooltip>
+            )}
             {!isDistro() && (
               <Tooltip
                 mouseEnterDelay={0}
diff --git a/ui/packages/tidb-dashboard-lib/src/utils/distro.ts b/ui/packages/tidb-dashboard-lib/src/utils/distro.ts
index edb50ccb34..f179de41e1 100644
--- a/ui/packages/tidb-dashboard-lib/src/utils/distro.ts
+++ b/ui/packages/tidb-dashboard-lib/src/utils/distro.ts
@@ -1,18 +1,20 @@
 import i18next from 'i18next'
 
 interface IDistro {
+  pd: string
   tidb: string
   tikv: string
   tiflash: string
-  pd: string
+  ticdc: string
   is_distro: boolean
 }
 
 const DEF_DISTRO: IDistro = {
+  pd: 'PD',
   tidb: 'TiDB',
   tikv: 'TiKV',
-  pd: 'PD',
   tiflash: 'TiFlash',
+  ticdc: 'TiCDC',
   is_distro: false
 }
 

From 9ad320670a97ef75de44506b907e23ef0f9334f5 Mon Sep 17 00:00:00 2001
From: baurine <2008.hbl@gmail.com>
Date: Thu, 9 Nov 2023 17:36:42 +0800
Subject: [PATCH 2/3] feat(conprof): add more configs

---
 .../public/ngm.html                           |  3 +
 .../apps/ContinuousProfiling/context/index.ts |  5 ++
 .../apps/ContinuousProfiling/pages/Detail.tsx | 60 +++++++++++++------
 3 files changed, 50 insertions(+), 18 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 5b0965eab8..321e73b55b 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
@@ -193,6 +193,9 @@
           conProf: {
             checkNgm: false,
             showSetting: false,
+            enableDownloadGroup: false,
+            enableDotGraph: false,
+            enablePreviewGoroutine: false,
             listDuration: 1
           }
         },
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
index a51cadbbd2..3cb9533cf0 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
@@ -61,7 +61,12 @@ export interface IConProfilingDataSource {
 export interface IConProfilingConfig extends IContextConfig {
   publicPathBase: string
   checkNgm: boolean
+
   showSetting: boolean
+  enableDownloadGroup?: boolean // default value is true
+  enableDotGraph?: boolean // default value is true
+  enablePreviewGoroutine?: boolean // default value is true
+
   listDuration?: number // unit hour, 1 means 1 hour, 2 means 2 hours
 }
 
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
index c1c84e55eb..f234b31933 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
@@ -16,8 +16,12 @@ import { telemetry } from '../utils/telemetry'
 import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane'
 import { ConProfilingContext } from '../context'
 
-const COMMON_ACTIONS: string[] = ['view_flamegraph', 'view_graph', 'download']
-const TEXT_ACTIONS: string[] = ['view_text']
+enum Action {
+  VIEW_FLAMEGRAPH = 'view_flamegraph',
+  VIEW_GRAPH = 'view_graph',
+  VIEW_TEXT = 'view_text',
+  DOWNLOAD = 'download'
+}
 
 const profileTypeSortOrder: { [key: string]: number } = {
   profile: 1,
@@ -29,6 +33,10 @@ const profileTypeSortOrder: { [key: string]: number } = {
 export default function Page() {
   const ctx = useContext(ConProfilingContext)
 
+  const enableDownloadGroup = ctx?.cfg.enableDownloadGroup ?? true
+  const enableDotGraph = ctx?.cfg.enableDotGraph ?? true
+  const enablePreviewGoroutine = ctx?.cfg.enablePreviewGoroutine ?? true
+
   const { t } = useTranslation()
   const { ts } = useQueryParams()
 
@@ -86,28 +94,28 @@ export default function Page() {
       let dataFormat = ''
       if (component === 'tikv' && profile_type === 'heap') {
         switch (action) {
-          case 'view_flamegraph':
+          case Action.VIEW_FLAMEGRAPH:
             // tikv heap flamegraph uses Brendan Gregg's collapsed stack format which is text based
             dataFormat = 'text'
             break
-          case 'view_graph':
+          case Action.VIEW_GRAPH:
             dataFormat = 'svg'
             break
-          case 'download':
+          case Action.DOWNLOAD:
             dataFormat = 'jeprof'
             break
           default:
         }
       } else {
         switch (action) {
-          case 'view_graph':
+          case Action.VIEW_GRAPH:
             dataFormat = 'svg'
             break
-          case 'view_text':
+          case Action.VIEW_TEXT:
             dataFormat = 'text'
             break
-          case 'view_flamegraph':
-          case 'download':
+          case Action.VIEW_FLAMEGRAPH:
+          case Action.DOWNLOAD:
             dataFormat = 'protobuf'
             break
           default:
@@ -127,7 +135,7 @@ export default function Page() {
         component: component!
       })
 
-      if (action === 'view_graph' || action === 'view_text') {
+      if (action === Action.VIEW_GRAPH || action === Action.VIEW_TEXT) {
         const profileURL = `${
           ctx!.cfg.apiPathBase
         }/continuous_profiling/single_profile/view?token=${token}`
@@ -135,7 +143,7 @@ export default function Page() {
         return
       }
 
-      if (action === 'view_flamegraph') {
+      if (action === Action.VIEW_FLAMEGRAPH) {
         // view flamegraph by speedscope
         const speedscopeTitle = `${rec.target?.component}_${rec.target?.address}_${rec.profile_type}`
         const profileURL = `${
@@ -150,7 +158,7 @@ export default function Page() {
         return
       }
 
-      if (action === 'download') {
+      if (action === Action.DOWNLOAD) {
         window.location.href = `${
           ctx!.cfg.apiPathBase
         }/continuous_profiling/download?token=${token}`
@@ -247,9 +255,23 @@ export default function Page() {
           }
 
           const rec = record as ConprofProfileDetail
-          let actionsKey = TEXT_ACTIONS
-          if (rec.profile_type !== 'goroutine') {
-            actionsKey = COMMON_ACTIONS
+          let actionsKey: string[] = []
+          if (rec.profile_type === 'goroutine') {
+            if (enablePreviewGoroutine) {
+              actionsKey = [Action.VIEW_TEXT]
+            } else {
+              actionsKey = [Action.DOWNLOAD]
+            }
+          } else {
+            if (enableDotGraph) {
+              actionsKey = [
+                Action.VIEW_FLAMEGRAPH,
+                Action.VIEW_GRAPH,
+                Action.DOWNLOAD
+              ]
+            } else {
+              actionsKey = [Action.VIEW_FLAMEGRAPH, Action.DOWNLOAD]
+            }
           }
 
           return (
@@ -279,9 +301,11 @@ export default function Page() {
           </Link>
         }
         titleExtra={
-          <Button type="primary" onClick={handleDownloadGroup}>
-            {t('conprof.detail.download')}
-          </Button>
+          enableDownloadGroup && (
+            <Button type="primary" onClick={handleDownloadGroup}>
+              {t('conprof.detail.download')}
+            </Button>
+          )
         }
       />
       <div style={{ height: '100%', position: 'relative' }}>

From 72e5ebaed9b446923d2f08405997090fbd2cef89 Mon Sep 17 00:00:00 2001
From: baurine <2008.hbl@gmail.com>
Date: Thu, 9 Nov 2023 17:54:52 +0800
Subject: [PATCH 3/3] feat(conprof): refine

---
 .../src/apps/ContinuousProfiling/context.ts                | 2 --
 .../src/apps/ContinuousProfiling/context.ts                | 5 +----
 .../src/apps/ContinuousProfiling/context/index.ts          | 7 +++----
 .../src/apps/ContinuousProfiling/index.tsx                 | 5 +++--
 .../src/apps/ContinuousProfiling/pages/Detail.tsx          | 2 +-
 .../src/apps/ContinuousProfiling/pages/List.tsx            | 3 ++-
 6 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts
index b87e0b51fb..c5ddac5905 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ContinuousProfiling/context.ts
@@ -92,8 +92,6 @@ export const ctx: (
   cfg: {
     apiPathBase: client.getBasePath(),
     publicPathBase,
-    checkNgm: true,
-    showSetting: true,
     ...cfg
   }
 })
diff --git a/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts b/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts
index e990af0183..a8eacaee64 100644
--- a/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts
+++ b/ui/packages/tidb-dashboard-for-op/src/apps/ContinuousProfiling/context.ts
@@ -88,9 +88,6 @@ export const ctx: IConProfilingContext = {
   ds,
   cfg: {
     apiPathBase: client.getBasePath(),
-    publicPathBase,
-    checkNgm: true,
-    showSetting: true,
-    listDuration: 2
+    publicPathBase
   }
 }
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
index 3cb9533cf0..f116dec0eb 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/context/index.ts
@@ -60,14 +60,13 @@ export interface IConProfilingDataSource {
 
 export interface IConProfilingConfig extends IContextConfig {
   publicPathBase: string
-  checkNgm: boolean
 
-  showSetting: boolean
+  checkNgm?: boolean // default value is true
+  showSetting?: boolean // default value is true
   enableDownloadGroup?: boolean // default value is true
   enableDotGraph?: boolean // default value is true
   enablePreviewGoroutine?: boolean // default value is true
-
-  listDuration?: number // unit hour, 1 means 1 hour, 2 means 2 hours
+  listDuration?: number // unit hour, 1 means 1 hour, 2 means 2 hours, default value is 2 hours
 }
 
 export interface IConProfilingContext {
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx
index e42f6bf60e..05b8204520 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/index.tsx
@@ -14,13 +14,14 @@ addTranslations(translations)
 function AppRoutes() {
   useLocationChange()
   const ctx = useContext(ConProfilingContext)
+  const checkNgm = ctx?.cfg.checkNgm ?? true
 
   return (
     <Routes>
       <Route
         path="/continuous_profiling"
         element={
-          ctx?.cfg.checkNgm ? (
+          checkNgm ? (
             <NgmNotStartedGuard>
               <List />
             </NgmNotStartedGuard>
@@ -32,7 +33,7 @@ function AppRoutes() {
       <Route
         path="/continuous_profiling/detail"
         element={
-          ctx?.cfg.checkNgm ? (
+          checkNgm ? (
             <NgmNotStartedGuard>
               <ParamsPageWrapper>
                 <Detail />
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
index f234b31933..20a70800f6 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
@@ -197,7 +197,7 @@ export default function Page() {
         maxWidth: 100,
         onRender: (record) => {
           const profileType = record.profile_type
-          // in the ngm, the `profile` is `cpu`
+          // in the cloud ngm, the `profile` is `cpu`
           if (profileType === 'profile' || profileType === 'cpu') {
             return `CPU - ${profileDuration}s`
           }
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
index 35297a8e93..f0ea8f554a 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
@@ -37,6 +37,7 @@ import { useURLTimeRange } from '@lib/hooks/useURLTimeRange'
 
 export default function Page() {
   const ctx = useContext(ConProfilingContext)
+  const showSetting = ctx?.cfg.showSetting ?? true
   const durationHour = ctx?.cfg.listDuration ?? 2
 
   const { timeRange, setTimeRange } = useURLTimeRange()
@@ -257,7 +258,7 @@ export default function Page() {
                 <ReloadOutlined onClick={refresh} />
               )}
             </Tooltip>
-            {ctx?.cfg.showSetting && (
+            {showSetting && (
               <Tooltip
                 mouseEnterDelay={0}
                 mouseLeaveDelay={0}