chore(topsql): adjust TopSQL for clinic

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

@@ -115,15 +115,17 @@
       const apiToken = localStorage.getItem('clinic.auth.csrf_token')
 
       // example entry link:
-      // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws&region=us-west-2&orgId=30052&projectId=43584&clusterId=61992&deployType=shared#/slow_query
-      // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws&region=us-west-2&orgId=30052&projectId=43584&clusterId=61992&deployType=dedicated#/topsql
+      // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws&region=us-west-2&orgName=xxx&orgId=30052&projectId=43584&clusterId=61992&deployType=shared&userName=xxx#/slow_query
+      // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws&region=us-west-2&orgName=xxx&orgId=30052&projectId=43584&clusterId=61992&deployType=dedicated&userName=xxx#/topsql
       const searchParams = new URLSearchParams(window.location.search)
       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 userName = searchParams.get('userName') || ''
       if (
         apiToken === '' ||
         provider === '' ||
@@ -166,7 +168,22 @@
           },
           topSQL: {
             checkNgm: false,
-            showSetting: false
+            showSetting: false,
+            orgName,
+            userName,
+
+            timeRangeSelector: {
+              recentSeconds: [
+                5 * 60,
+                15 * 60,
+                30 * 60,
+                60 * 60,
+                6 * 60 * 60,
+                12 * 60 * 60,
+                24 * 60 * 60
+              ],
+              customAbsoluteRangePicker: true
+            }
           }
         }
       })

ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx

@@ -20,15 +20,14 @@ import {
   DEFAULT_TIME_RANGE,
   TimeRange,
   Toolbar,
-  ErrorBar
+  ErrorBar,
+  LimitTimeRange
 } from '@lib/components'
+import { useTimeRangeValue } from '@lib/components/TimeRangeSelector/hook'
 import { store } from '@lib/utils/store'
 import { tz } from '@lib/utils'
-import { useTimeRangeValue } from '@lib/components/TimeRangeSelector/hook'
 import { telemetry } from '../utils/telemetry'
 import { MonitoringContext } from '../context'
-// TODO: move to shared folder
-import { LimitTimeRange } from '@lib/apps/Overview/components/LimitTimeRange'
 
 export default function Monitoring() {
   const ctx = useContext(MonitoringContext)

ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx

@@ -1,26 +1,27 @@
 import { Space, Typography, Button, Tooltip } from 'antd'
 import React, { useCallback, useContext, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useMemoizedFn } from 'ahooks'
+import { MetricsChart, SyncChartPointer, TimeRangeValue } from 'metrics-chart'
+import { Link } from 'react-router-dom'
+import { Stack } from 'office-ui-fabric-react'
+import { LoadingOutlined, FileTextOutlined } from '@ant-design/icons'
+import { debounce } from 'lodash'
+
 import {
   AutoRefreshButton,
   Card,
   DEFAULT_TIME_RANGE,
   TimeRange,
   Toolbar,
-  ErrorBar
+  ErrorBar,
+  LimitTimeRange
 } from '@lib/components'
-import { Link } from 'react-router-dom'
-import { Stack } from 'office-ui-fabric-react'
 import { useTimeRangeValue } from '@lib/components/TimeRangeSelector/hook'
-import { LoadingOutlined, FileTextOutlined } from '@ant-design/icons'
-import { debounce } from 'lodash'
-import { OverviewContext } from '../context'
 
-import { useMemoizedFn } from 'ahooks'
+import { OverviewContext } from '../context'
 import { telemetry } from '../utils/telemetry'
-import { LimitTimeRange } from '@lib/apps/Overview/components/LimitTimeRange'
 
-import { MetricsChart, SyncChartPointer, TimeRangeValue } from 'metrics-chart'
 export default function Metrics() {
   const ctx = useContext(OverviewContext)
   const promAddrConfigurable = ctx?.cfg.promAddrConfigurable || false

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/List/index.tsx

@@ -26,7 +26,8 @@ import {
   Toolbar,
   MultiSelect,
   toTimeRangeValue,
-  IColumnKeys
+  IColumnKeys,
+  LimitTimeRange
 } from '@lib/components'
 import { useURLTimeRange } from '@lib/hooks/useURLTimeRange'
 import { CacheContext } from '@lib/utils/useCache'
@@ -41,7 +42,6 @@ import { useDebounceFn, useMemoizedFn } from 'ahooks'
 import { useDeepCompareChange } from '@lib/utils/useChange'
 import { isDistro } from '@lib/utils/distro'
 import { SlowQueryContext } from '../../context'
-import { LimitTimeRange } from '@lib/apps/Overview/components/LimitTimeRange'
 
 const { Option } = Select
 

ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/List/index.tsx

@@ -31,7 +31,8 @@ import {
   TimeRangeSelector,
   DateTime,
   toTimeRangeValue,
-  IColumnKeys
+  IColumnKeys,
+  LimitTimeRange
 } from '@lib/components'
 import { useVersionedLocalStorageState } from '@lib/utils/useVersionedLocalStorageState'
 import { StatementsTable } from '../../components'
@@ -47,7 +48,6 @@ import { StatementModel } from '@lib/client'
 import { isDistro } from '@lib/utils/distro'
 import { StatementContext } from '../../context'
 import { telemetry as stmtTelmetry } from '../../utils/telemetry'
-import { LimitTimeRange } from '@lib/apps/Overview/components/LimitTimeRange'
 
 const STMT_VISIBLE_COLUMN_KEYS = 'statement.visible_column_keys'
 const STMT_SHOW_FULL_SQL = 'statement.show_full_sql'

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

@@ -38,6 +38,16 @@ export interface ITopSQLDataSource {
 export interface ITopSQLConfig {
   checkNgm: boolean
   showSetting: boolean
+
+  // to limit the time range picker range
+  timeRangeSelector?: {
+    recentSeconds: number[]
+    customAbsoluteRangePicker: boolean
+  }
+
+  // for clinic
+  orgName?: string
+  userName?: string
 }
 
 export interface ITopSQLContext {

ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx

@@ -20,13 +20,13 @@ import formatSql from '@lib/utils/sqlFormatter'
 import { TopsqlInstanceItem, TopsqlSummaryItem } from '@lib/client'
 import {
   Card,
-  TimeRangeSelector,
   toTimeRangeValue as _toTimeRangeValue,
   Toolbar,
   AutoRefreshButton,
   TimeRange,
   fromTimeRangeValue,
-  TimeRangeValue
+  TimeRangeValue,
+  LimitTimeRange
 } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 
@@ -156,6 +156,12 @@ export function TopSQLList() {
         )}
 
         <Card noMarginBottom>
+          {ctx?.cfg.orgName && (
+            <div style={{ marginBottom: 8, textAlign: 'right' }}>
+              Org: {ctx?.cfg.orgName} | User: {ctx.cfg.userName}
+            </div>
+          )}
+
           <Toolbar>
             <Space>
               <InstanceSelect
@@ -172,16 +178,20 @@ export function TopSQLList() {
                   open && telemetry.openSelectInstance()
                 }
               />
-              <TimeRangeSelector.WithZoomOut
+              <LimitTimeRange
                 value={timeRange}
+                recent_seconds={ctx?.cfg.timeRangeSelector?.recentSeconds}
+                customAbsoluteRangePicker={
+                  ctx?.cfg.timeRangeSelector?.customAbsoluteRangePicker
+                }
                 onChange={(v) => {
                   setTimeRange(v)
                   telemetry.selectTimeRange(v)
                 }}
-                disabled={isLoading}
                 onZoomOutClick={(start, end) =>
                   telemetry.clickZoomOut([start, end])
                 }
+                disabled={isLoading}
               />
               <AutoRefreshButton
                 disabled={isLoading}

ui/packages/tidb-dashboard-lib/src/apps/Overview/components/LimitTimeRange.tsx → ui/packages/tidb-dashboard-lib/src/components/LimitTimeRange/index.tsx

@@ -8,6 +8,7 @@ interface LimitTimeRangeProps {
   customAbsoluteRangePicker?: boolean
   onChange: (val: TimeRange) => void
   onZoomOutClick: (start: number, end: number) => void
+  disabled?: boolean
 }
 
 // array of 24 numbers, start from 0
@@ -35,7 +36,8 @@ export const LimitTimeRange: React.FC<LimitTimeRangeProps> = ({
   recent_seconds = DEFAULT_RECENT_SECONDS,
   customAbsoluteRangePicker,
   onChange,
-  onZoomOutClick
+  onZoomOutClick,
+  disabled
 }) => {
   // get the selectable time range value from rencent_seconds
   const selectableHours = useMemo(() => {
@@ -109,13 +111,15 @@ export const LimitTimeRange: React.FC<LimitTimeRangeProps> = ({
           disabledDate={disabledDate}
           disabledTime={disabledTime}
           customAbsoluteRangePicker={true}
+          disabled={disabled}
         />
       ) : (
         <TimeRangeSelector.WithZoomOut
           value={value}
           onChange={onChange}
           recent_seconds={recent_seconds}
           onZoomOutClick={onZoomOutClick}
+          disabled={disabled}
         />
       )}
     </>

ui/packages/tidb-dashboard-lib/src/components/index.ts

@@ -64,3 +64,4 @@ export { default as ParamsPageWrapper } from './ParamsPageWrapper'
 
 export * from './AutoRefreshButton'
 export * from './Ngm'
+export * from './LimitTimeRange'