From edefd8be76dc6bb02ad80b1d60fef80fe8a4127e Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Tue, 25 Oct 2022 17:55:41 +0800
Subject: [PATCH] tweak(topsql): time range offset (#1426)

---
 ui/packages/tidb-dashboard-for-clinic-cloud/package.json | 2 +-
 .../src/apps/TopSQL/pages/List/List.tsx                  | 7 ++++++-
 .../src/components/TimeRangeSelector/index.tsx           | 9 ++++++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/package.json b/ui/packages/tidb-dashboard-for-clinic-cloud/package.json
index e7b0901d66..9a592644e6 100644
--- 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.20",
+  "version": "0.0.22",
   "main": "dist/dashboardApp.js",
   "module": "dist/dashboardApp.js",
   "files": [
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 cdc624ccc5..da04af152c 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
@@ -21,7 +21,7 @@ import { TopsqlInstanceItem, TopsqlSummaryItem } from '@lib/client'
 import {
   Card,
   TimeRangeSelector,
-  toTimeRangeValue,
+  toTimeRangeValue as _toTimeRangeValue,
   DEFAULT_TIME_RANGE,
   Toolbar,
   AutoRefreshButton,
@@ -44,6 +44,11 @@ import { TopSQLContext } from '../../context'
 
 const TOP_N = 5
 const CHART_BAR_WIDTH = 8
+const RECENT_RANGE_OFFSET = -60
+
+const toTimeRangeValue: typeof _toTimeRangeValue = (v) => {
+  return _toTimeRangeValue(v, v?.type === 'recent' ? RECENT_RANGE_OFFSET : 0)
+}
 
 export function TopSQLList() {
   const ctx = useContext(TopSQLContext)
diff --git a/ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx
index 19f40e414d..f7dd8fe1a3 100644
--- a/ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/components/TimeRangeSelector/index.tsx
@@ -50,13 +50,16 @@ export type TimeRangeValue = [minSecond: number, maxSecond: number]
 
 export type TimeRange = RelativeTimeRange | AbsoluteTimeRange
 
-export function toTimeRangeValue(timeRange?: TimeRange): TimeRangeValue {
+export function toTimeRangeValue(
+  timeRange?: TimeRange,
+  offset = 0
+): TimeRangeValue {
   let t2 = timeRange ?? DEFAULT_TIME_RANGE
   if (t2.type === 'absolute') {
-    return [...t2.value]
+    return t2.value.map((t) => t + offset) as TimeRangeValue
   } else {
     const now = dayjs().unix()
-    return [now - t2.value, now + 1]
+    return [now - t2.value + offset, now + 1 + offset]
   }
 }