Fix/time range selector

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

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

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

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

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

@@ -13,7 +13,6 @@ import {
   Card,
   DEFAULT_TIME_RANGE,
   TimeRange,
-  TimeRangeSelector,
   Toolbar,
   ErrorBar
 } from '@lib/components'
@@ -22,6 +21,7 @@ import { tz } from '@lib/utils'
 import { useTimeRangeValue } from '@lib/components/TimeRangeSelector/hook'
 import { telemetry } from '../utils/telemetry'
 import { MonitoringContext } from '../context'
+import { LimitTimeRange } from '@lib/apps/Overview/components/LimitTimeRange'
 
 export default function Monitoring() {
   const ctx = useContext(MonitoringContext)
@@ -73,30 +73,20 @@ export default function Monitoring() {
       <Card>
         <Toolbar>
           <Space>
-            {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])
-                }
-              />
-            )}
+            <LimitTimeRange
+              value={timeRange}
+              recent_seconds={ctx?.cfg.timeRangeSelector?.recent_seconds}
+              customAbsoluteRangePicker={
+                ctx?.cfg.timeRangeSelector?.customAbsoluteRangePicker
+              }
+              onChange={(v) => {
+                setTimeRange(v)
+                telemetry.selectTimeRange(v)
+              }}
+              onZoomOutClick={(start, end) =>
+                telemetry.clickZoomOut([start, end])
+              }
+            />
             <AutoRefreshButton
               onChange={telemetry.selectAutoRefreshOption}
               onRefresh={handleManualRefreshClick}

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

@@ -0,0 +1,103 @@
+import { TimeRange, TimeRangeSelector } from '@lib/components'
+import dayjs from 'dayjs'
+import React, { useMemo } from 'react'
+
+interface LimitTimeRangeProps {
+  value: TimeRange
+  recent_seconds?: number[]
+  customAbsoluteRangePicker?: boolean
+  onChange: (val: TimeRange) => void
+  onZoomOutClick: (start: number, end: number) => void
+}
+
+// array of 24 numbers, start from 0
+const hoursRange = [...Array(24).keys()]
+const minutesRange = [...Array(60).keys()]
+
+// These presets are aligned with Grafana
+const DEFAULT_RECENT_SECONDS = [
+  5 * 60,
+  15 * 60,
+  30 * 60,
+  60 * 60,
+  3 * 60 * 60,
+  6 * 60 * 60,
+  12 * 60 * 60,
+  24 * 60 * 60,
+  2 * 24 * 60 * 60,
+  7 * 24 * 60 * 60,
+  30 * 24 * 60 * 60,
+  90 * 24 * 60 * 60
+]
+
+export const LimitTimeRange: React.FC<LimitTimeRangeProps> = ({
+  value,
+  recent_seconds = DEFAULT_RECENT_SECONDS,
+  customAbsoluteRangePicker,
+  onChange,
+  onZoomOutClick
+}) => {
+  // 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 2 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)
+  }
+
+  // control avaliable time on Minute level
+  const disabledTime = (current) => {
+    // current hour
+    const hour = dayjs().hour()
+    const minute = dayjs().minute()
+    // is current day
+    if (current && current.isSame(dayjs(), 'day')) {
+      return {
+        disabledHours: () => hoursRange.slice(hour + 1),
+        disabledMinutes: () => minutesRange.slice(minute + 1)
+      }
+    }
+
+    // is 2 day ago
+    if (
+      current &&
+      current.isSame(dayjs().subtract(selectableHours / 24, 'day'), 'day')
+    ) {
+      return {
+        disabledHours: () => hoursRange.slice(0, hour),
+        disabledMinutes: () => minutesRange.slice(0, minute)
+      }
+    }
+
+    return { disabledHours: () => [] }
+  }
+
+  return (
+    <>
+      {customAbsoluteRangePicker ? (
+        <TimeRangeSelector
+          value={value}
+          onChange={onChange}
+          recent_seconds={recent_seconds}
+          disabledDate={disabledDate}
+          disabledTime={disabledTime}
+          customAbsoluteRangePicker={true}
+        />
+      ) : (
+        <TimeRangeSelector.WithZoomOut
+          value={value}
+          onChange={onChange}
+          recent_seconds={recent_seconds}
+          onZoomOutClick={onZoomOutClick}
+        />
+      )}
+    </>
+  )
+}

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

@@ -6,7 +6,6 @@ import {
   Card,
   DEFAULT_TIME_RANGE,
   TimeRange,
-  TimeRangeSelector,
   Toolbar,
   ErrorBar
 } from '@lib/components'
@@ -19,6 +18,7 @@ import { OverviewContext } from '../context'
 
 import { useMemoizedFn } from 'ahooks'
 import { telemetry } from '../utils/telemetry'
+import { LimitTimeRange } from '@lib/apps/Overview/components/LimitTimeRange'
 
 import { MetricsChart, SyncChartPointer, TimeRangeValue } from 'metrics-chart'
 export default function Metrics() {
@@ -69,16 +69,16 @@ export default function Metrics() {
       <Card>
         <Toolbar>
           <Space>
-            <TimeRangeSelector.WithZoomOut
+            <LimitTimeRange
               value={timeRange}
-              onChange={(v) => {
-                setTimeRange(v)
-                telemetry.selectTimeRange(v)
-              }}
               recent_seconds={ctx?.cfg.timeRangeSelector?.recent_seconds}
               customAbsoluteRangePicker={
                 ctx?.cfg.timeRangeSelector?.customAbsoluteRangePicker
               }
+              onChange={(v) => {
+                setTimeRange(v)
+                telemetry.selectTimeRange(v)
+              }}
               onZoomOutClick={(start, end) =>
                 telemetry.clickZoomOut([start, end])
               }

ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx

@@ -174,9 +174,6 @@ const customValueFormat = (
   }
 }
 
-// array of 24 numbers, start from 0
-// const hours = [...Array(24).keys()]
-
 function TimeRangeSelector({
   value,
   onChange,
@@ -224,44 +221,6 @@ 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}
@@ -293,45 +252,25 @@ function TimeRangeSelector({
           ))}
         </div>
       </div>
-      {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(
-              '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}
-              onCalendarChange={onCalendarChange}
-              onOpenChange={onOpenChange}
-            />
-          </div>
+      <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}
+            onCalendarChange={onCalendarChange}
+            onOpenChange={onOpenChange}
+          />
         </div>
-      )}
+      </div>
     </div>
   )