feat(conprof): support conprof on new o11y for clinic

pingcap · Nov 7, 2023 · 27a48ed · 27a48ed
1 parent 13ee5c8
commit 27a48ed
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}