feat: limit date picker range

ui/packages/tidb-dashboard-for-clinic-cloud/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-clinic-cloud",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "main": "dist/dashboardApp.js",
   "module": "dist/dashboardApp.js",
   "files": [

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Monitoring/context.ts

@@ -32,7 +32,10 @@ const RECENT_SECONDS = [
   3 * 60 * 60,
   6 * 60 * 60,
   12 * 60 * 60,
-  24 * 60 * 60
+  24 * 60 * 60,
+  2 * 24 * 60 * 60,
+  7 * 24 * 60 * 60,
+  15 * 24 * 60 * 60
 ]
 
 const ds = new DataSource()
@@ -44,7 +47,7 @@ export const ctx: IMonitoringContext = {
       getMonitoringItems(pdVersion),
     timeRangeSelector: {
       recent_seconds: RECENT_SECONDS,
-      withAbsoluteRangePicker: false
+      customAbsoluteRangePicker: true
     }
   }
 }

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Overview/context.ts

@@ -57,7 +57,10 @@ const RECENT_SECONDS = [
   3 * 60 * 60,
   6 * 60 * 60,
   12 * 60 * 60,
-  24 * 60 * 60
+  24 * 60 * 60,
+  2 * 24 * 60 * 60,
+  7 * 24 * 60 * 60,
+  15 * 24 * 60 * 60
 ]
 
 export const ctx: IOverviewContext = {
@@ -67,7 +70,7 @@ export const ctx: IOverviewContext = {
     metricsQueries: overviewMetrics,
     timeRangeSelector: {
       recent_seconds: RECENT_SECONDS,
-      withAbsoluteRangePicker: false
+      customAbsoluteRangePicker: true
     }
   }
 }

ui/packages/tidb-dashboard-for-dbaas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [

ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/context.ts

@@ -55,7 +55,10 @@ const RECENT_SECONDS = [
   3 * 60 * 60,
   6 * 60 * 60,
   12 * 60 * 60,
-  24 * 60 * 60
+  24 * 60 * 60,
+  2 * 24 * 60 * 60,
+  7 * 24 * 60 * 60,
+  15 * 24 * 60 * 60
 ]
 
 export const ctx: (globalConfig: IGlobalConfig) => IMonitoringContext = (
@@ -67,7 +70,7 @@ export const ctx: (globalConfig: IGlobalConfig) => IMonitoringContext = (
       getMonitoringItems(pdVersion),
     timeRangeSelector: {
       recent_seconds: RECENT_SECONDS,
-      withAbsoluteRangePicker: false
+      customAbsoluteRangePicker: true
     }
   }
 })

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

@@ -72,20 +72,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}

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
   }
 }
 

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])

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
   }
 }
 

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,15 @@ export interface ITimeRangeSelectorProps {
   onChange?: (val: TimeRange) => void
   disabled?: boolean
   recent_seconds?: number[]
-  withAbsoluteRangePicker?: boolean
+  customAbsoluteRangePicker?: boolean
 }
 
 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 +147,112 @@ function TimeRangeSelector({
     setDropdownVisible(false)
   })
 
+  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')
+    }
+  }
+
+  // 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)
+  }
+
+  // array of 24 numbers, start from 0
+  const hours = [...Array(24).keys()]
+
+  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' && (