From cfd261c851f576ef094f782c824b3feb458aac13 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Fri, 13 Oct 2023 18:26:06 +0800 Subject: [PATCH] chore(topsql): adjust TopSQL for clinic - show org name and user name in TopSQL for clinic variant - limit time range to 1 day in TopSQL for clinic variant --- .../public/ngm.html | 23 ++++++++++++++++--- .../apps/Monitoring/components/Monitoring.tsx | 7 +++--- .../src/apps/Overview/components/Metrics.tsx | 19 +++++++-------- .../src/apps/SlowQuery/pages/List/index.tsx | 4 ++-- .../src/apps/Statement/pages/List/index.tsx | 4 ++-- .../src/apps/TopSQL/context/index.ts | 10 ++++++++ .../src/apps/TopSQL/pages/List/List.tsx | 18 +++++++++++---- .../LimitTimeRange/index.tsx} | 6 ++++- .../src/components/index.ts | 1 + 9 files changed, 67 insertions(+), 25 deletions(-) rename ui/packages/tidb-dashboard-lib/src/{apps/Overview/components/LimitTimeRange.tsx => components/LimitTimeRange/index.tsx} (96%) 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 1ce3d426af..131050718b 100644 --- a/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html +++ b/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®ion=us-west-2&orgId=30052&projectId=43584&clusterId=61992&deployType=shared#/slow_query - // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws®ion=us-west-2&orgId=30052&projectId=43584&clusterId=61992&deployType=dedicated#/topsql + // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws®ion=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®ion=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 + } } } }) diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx index 1f90c531b9..ceaff30194 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx +++ b/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) diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx index bfa650b55c..3c1cf1dcd7 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx +++ b/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 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 index e1b138bf62..e78ce99e4b 100644 --- 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 @@ -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 diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/List/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/List/index.tsx index f258f05284..0e9eafc8e3 100644 --- a/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/List/index.tsx +++ b/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' 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 a9c52220d3..dd45400a53 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 @@ -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 { 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 82c5815da4..a237050c5d 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 @@ -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() { )} + {ctx?.cfg.orgName && ( +
+ Org: {ctx?.cfg.orgName} | User: {ctx.cfg.userName} +
+ )} + - { setTimeRange(v) telemetry.selectTimeRange(v) }} - disabled={isLoading} onZoomOutClick={(start, end) => telemetry.clickZoomOut([start, end]) } + disabled={isLoading} /> 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 = ({ recent_seconds = DEFAULT_RECENT_SECONDS, customAbsoluteRangePicker, onChange, - onZoomOutClick + onZoomOutClick, + disabled }) => { // get the selectable time range value from rencent_seconds const selectableHours = useMemo(() => { @@ -109,6 +111,7 @@ export const LimitTimeRange: React.FC = ({ disabledDate={disabledDate} disabledTime={disabledTime} customAbsoluteRangePicker={true} + disabled={disabled} /> ) : ( = ({ onChange={onChange} recent_seconds={recent_seconds} onZoomOutClick={onZoomOutClick} + disabled={disabled} /> )} diff --git a/ui/packages/tidb-dashboard-lib/src/components/index.ts b/ui/packages/tidb-dashboard-lib/src/components/index.ts index 26063a5898..d908912312 100644 --- a/ui/packages/tidb-dashboard-lib/src/components/index.ts +++ b/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'