feat: limit date picker range (#1429)

* feat: limit date picker range * chore: update version for dbaas and clinic * chore: hide zoomOut feature for timeSelector on cloud side * chore: set max timeRange for monitoring as two days
pingcap · Jan 4, 2023 · 14ac388 · 14ac388
1 parent 5741300
commit 14ac388
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 32 deletions.
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/package.json b/ui/packages/tidb-dashboard-for-clinic-cloud/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-clinic-cloud",
-  "version": "0.0.28",
+  "version": "0.0.40",
   "main": "dist/dashboardApp.js",
   "module": "dist/dashboardApp.js",
   "files": [

diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Monitoring/context.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Monitoring/context.ts
@@ -32,7 +32,8 @@ const RECENT_SECONDS = [
   3 * 60 * 60,
   6 * 60 * 60,
   12 * 60 * 60,
-  24 * 60 * 60
+  24 * 60 * 60,
+  2 * 24 * 60 * 60
 ]
 
 const ds = new DataSource()
@@ -44,7 +45,7 @@ export const ctx: IMonitoringContext = {
       getMonitoringItems(pdVersion),
     timeRangeSelector: {
       recent_seconds: RECENT_SECONDS,
-      withAbsoluteRangePicker: false
+      customAbsoluteRangePicker: true
     }
   }
 }
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Overview/context.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Overview/context.ts
@@ -58,7 +58,8 @@ const RECENT_SECONDS = [
   3 * 60 * 60,
   6 * 60 * 60,
   12 * 60 * 60,
-  24 * 60 * 60
+  24 * 60 * 60,
+  2 * 24 * 60 * 60
 ]
 
 export const ctx: (cfg: Partial<IOverviewConfig>) => IOverviewContext = (
@@ -70,7 +71,7 @@ export const ctx: (cfg: Partial<IOverviewConfig>) => IOverviewContext = (
     metricsQueries: overviewMetrics,
     timeRangeSelector: {
       recent_seconds: RECENT_SECONDS,
-      withAbsoluteRangePicker: false
+      customAbsoluteRangePicker: true
     },
     showViewMoreMetrics: false,
     ...cfg

diff --git a/ui/packages/tidb-dashboard-for-dbaas/package.json b/ui/packages/tidb-dashboard-for-dbaas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [

diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/context.ts
@@ -52,7 +52,8 @@ const RECENT_SECONDS = [
   3 * 60 * 60,
   6 * 60 * 60,
   12 * 60 * 60,
-  24 * 60 * 60
+  24 * 60 * 60,
+  2 * 24 * 60 * 60
 ]
 
 export const ctx: (globalConfig: IGlobalConfig) => IMonitoringContext = (
@@ -64,7 +65,7 @@ export const ctx: (globalConfig: IGlobalConfig) => IMonitoringContext = (
       getMonitoringItems(pdVersion),
     timeRangeSelector: {
       recent_seconds: RECENT_SECONDS,
-      withAbsoluteRangePicker: false
+      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
@@ -73,20 +73,30 @@ export default function Monitoring() {
       <Card>
         <Toolbar>
           <Space>
-            <TimeRangeSelector.WithZoomOut
-              value={timeRange}
-              onChange={(v) => {
-                setTimeRange(v)
-                telemetry.selectTimeRange(v)
-              }}
-              recent_seconds={ctx?.cfg.timeRangeSelector?.recent_seconds}
-              withAbsoluteRangePicker={
-                ctx?.cfg.timeRangeSelector?.withAbsoluteRangePicker
-              }
-              onZoomOutClick={(start, end) =>
-                telemetry.clickZoomOut([start, end])
-              }
-            />
+            {ctx?.cfg.timeRangeSelector?.customAbsoluteRangePicker ? (
+              <TimeRangeSelector
+                value={timeRange}
+                onChange={(v) => {
+                  setTimeRange(v)
+                  telemetry.selectTimeRange(v)
+                }}
+                recent_seconds={ctx?.cfg.timeRangeSelector?.recent_seconds}
+                customAbsoluteRangePicker={true}
+              />
+            ) : (
+              <TimeRangeSelector.WithZoomOut
+                value={timeRange}
+                onChange={(v) => {
+                  setTimeRange(v)
+                  telemetry.selectTimeRange(v)
+                }}
+                recent_seconds={ctx?.cfg.timeRangeSelector?.recent_seconds}
+                customAbsoluteRangePicker={false}
+                onZoomOutClick={(start, end) =>
+                  telemetry.clickZoomOut([start, end])
+                }
+              />
+            )}
             <AutoRefreshButton
               onChange={telemetry.selectAutoRefreshOption}
               onRefresh={handleManualRefreshClick}

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/context/index.ts
@@ -19,7 +19,7 @@ interface IMetricConfig {
   promAddrConfigurable?: boolean
   timeRangeSelector?: {
     recent_seconds: number[]
-    withAbsoluteRangePicker: boolean
+    customAbsoluteRangePicker: boolean
   }
 }
 

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
@@ -76,8 +76,8 @@ export default function Metrics() {
                 telemetry.selectTimeRange(v)
               }}
               recent_seconds={ctx?.cfg.timeRangeSelector?.recent_seconds}
-              withAbsoluteRangePicker={
-                ctx?.cfg.timeRangeSelector?.withAbsoluteRangePicker
+              customAbsoluteRangePicker={
+                ctx?.cfg.timeRangeSelector?.customAbsoluteRangePicker
               }
               onZoomOutClick={(start, end) =>
                 telemetry.clickZoomOut([start, end])

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Overview/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/Overview/context/index.ts
@@ -25,7 +25,7 @@ interface IMetricConfig {
   promAddrConfigurable?: boolean
   timeRangeSelector?: {
     recent_seconds: number[]
-    withAbsoluteRangePicker: boolean
+    customAbsoluteRangePicker: boolean
   }
 }
 

diff --git a/ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx
@@ -2,7 +2,12 @@ import React, { useState, useMemo } from 'react'
 import { Dropdown, Button } from 'antd'
 import DatePicker from '../DatePicker'
 import { ClockCircleOutlined, DownOutlined } from '@ant-design/icons'
-import { getValueFormat } from '@baurine/grafana-value-formats'
+import {
+  getValueFormat,
+  toFixedScaled,
+  toFixed,
+  DecimalCount
+} from '@baurine/grafana-value-formats'
 import cx from 'classnames'
 import dayjs, { Dayjs } from 'dayjs'
 import { useTranslation } from 'react-i18next'
@@ -96,15 +101,83 @@ export interface ITimeRangeSelectorProps {
   onChange?: (val: TimeRange) => void
   disabled?: boolean
   recent_seconds?: number[]
-  withAbsoluteRangePicker?: boolean
+  customAbsoluteRangePicker?: boolean
 }
 
+const trySubstract = (value1, value2) => {
+  if (
+    value1 !== null &&
+    value1 !== undefined &&
+    value2 !== null &&
+    value2 !== undefined
+  ) {
+    return value1 - value2
+  }
+  return undefined
+}
+
+const customValueFormat = (
+  size: number,
+  decimals?: DecimalCount,
+  scaledDecimals?: DecimalCount
+) => {
+  if (size === null) {
+    return ''
+  }
+  // Less than 1 µs, divide in ns
+  if (Math.abs(size) < 0.000001) {
+    return toFixedScaled(
+      size * 1e9,
+      decimals,
+      trySubstract(scaledDecimals, decimals),
+      -9,
+      ' ns'
+    )
+  }
+  // Less than 1 ms, divide in µs
+  if (Math.abs(size) < 0.001) {
+    return toFixedScaled(
+      size * 1e6,
+      decimals,
+      trySubstract(scaledDecimals, decimals),
+      -6,
+      ' µs'
+    )
+  }
+  // Less than 1 second, divide in ms
+  if (Math.abs(size) < 1) {
+    return toFixedScaled(
+      size * 1e3,
+      decimals,
+      trySubstract(scaledDecimals, decimals),
+      -3,
+      ' ms'
+    )
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' s'
+  } else if (Math.abs(size) < 3600) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min')
+  } else if (Math.abs(size) < 86400) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour')
+  } else {
+    // Less than one week, divide in days
+    return toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day')
+  }
+}
+
+// array of 24 numbers, start from 0
+const hours = [...Array(24).keys()]
+
 function TimeRangeSelector({
   value,
   onChange,
   disabled = false,
   recent_seconds = DEFAULT_RECENT_SECONDS,
-  withAbsoluteRangePicker = true
+  customAbsoluteRangePicker = false
 }: ITimeRangeSelectorProps) {
   const { t } = useTranslation()
   const [dropdownVisible, setDropdownVisible] = useState(false)
@@ -142,6 +215,44 @@ function TimeRangeSelector({
     setDropdownVisible(false)
   })
 
+  // get the selectable time range value from rencent_seconds
+  const selectableHours = useMemo(() => {
+    return recent_seconds[recent_seconds.length - 1] / 3600
+  }, [recent_seconds])
+
+  const disabledDate = (current) => {
+    const today = dayjs().startOf('hour')
+    // Can not select days before 15 days ago
+    const tooEarly =
+      today.subtract(selectableHours, 'hour') > dayjs(current).startOf('hour')
+    // Can not select days after today
+    const tooLate = today < dayjs(current).startOf('hour')
+    return current && (tooEarly || tooLate)
+  }
+
+  const disabledTime = (current) => {
+    // current hour
+    const hour = dayjs().hour()
+    // is current day
+    if (current && current.isSame(dayjs(), 'day')) {
+      return {
+        disabledHours: () => hours.slice(hour)
+      }
+    }
+
+    // is 15 day ago
+    if (
+      current &&
+      current.isSame(dayjs().subtract(selectableHours / 24, 'day'), 'day')
+    ) {
+      return {
+        disabledHours: () => hours.slice(0, hour)
+      }
+    }
+
+    return { disabledHours: () => [] }
+  }
+
   const dropdownContent = (
     <div
       className={styles.dropdown_content_container}
@@ -166,12 +277,32 @@ function TimeRangeSelector({
               data-e2e={`timerange-${seconds}`}
             >
               {t('statement.pages.overview.toolbar.time_range_selector.recent')}{' '}
-              {getValueFormat('s')(seconds, 0)}
+              {customAbsoluteRangePicker
+                ? customValueFormat(seconds, 0)
+                : getValueFormat('s')(seconds, 0)}
             </div>
           ))}
         </div>
       </div>
-      {withAbsoluteRangePicker && (
+      {customAbsoluteRangePicker ? (
+        <div className={styles.custom_time_ranges}>
+          <span>
+            {t(
+              'statement.pages.overview.toolbar.time_range_selector.custom_time_ranges'
+            )}
+          </span>
+          <div style={{ marginTop: 8 }}>
+            <RangePicker
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              value={rangePickerValue}
+              onChange={handleRangePickerChange}
+              disabledDate={disabledDate}
+              disabledTime={disabledTime}
+            />
+          </div>
+        </div>
+      ) : (
         <div className={styles.custom_time_ranges}>
           <span>
             {t(
@@ -203,7 +334,9 @@ function TimeRangeSelector({
         {value && value.type === 'recent' && (
           <span data-e2e="selected_timerange">
             {t('statement.pages.overview.toolbar.time_range_selector.recent')}{' '}
-            {getValueFormat('s')(value.value, 0)}
+            {customAbsoluteRangePicker
+              ? customValueFormat(value.value, 0)
+              : getValueFormat('s')(value.value, 0)}
           </span>
         )}
         {value && value.type === 'absolute' && (