From f3d8f5543d4e277fe34940ce98cd552dee45f2a8 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 4 Oct 2024 21:40:49 +0800
Subject: [PATCH] feat: add realtime datarange which can visit data more easy

---
 src/client/components/DateFilter.tsx    |  9 +++++++
 src/client/hooks/useGlobalRangeDate.tsx | 36 ++++++++++++++++++++++++-
 src/client/store/global.ts              |  1 +
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/client/components/DateFilter.tsx b/src/client/components/DateFilter.tsx
index a8916e40..59a939db 100644
--- a/src/client/components/DateFilter.tsx
+++ b/src/client/components/DateFilter.tsx
@@ -27,6 +27,15 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
         setShowDropdown(false);
       },
       items: compact([
+        {
+          label: t('Realtime'),
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Realtime });
+          },
+        },
+        {
+          type: 'divider',
+        },
         {
           label: t('Today'),
           onClick: () => {
diff --git a/src/client/hooks/useGlobalRangeDate.tsx b/src/client/hooks/useGlobalRangeDate.tsx
index 5af11188..8f14a86f 100644
--- a/src/client/hooks/useGlobalRangeDate.tsx
+++ b/src/client/hooks/useGlobalRangeDate.tsx
@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from 'dayjs';
-import { useMemo, useReducer } from 'react';
+import { useEffect, useMemo, useReducer } from 'react';
 import { getMinimumUnit } from '@tianji/shared';
 import { DateRange, useGlobalStateStore } from '../store/global';
 import { DateUnit } from '../utils/date';
@@ -45,6 +45,15 @@ export function useGlobalRangeDate(): {
       };
     }
 
+    if (dateRange === DateRange.Realtime) {
+      return {
+        label: t('Realtime'),
+        startDate: dayjs().subtract(1, 'hour').startOf('minute'),
+        endDate: dayjs().endOf('minute'),
+        unit: 'minute' as const,
+      };
+    }
+
     if (dateRange === DateRange.Today) {
       return {
         label: t('Today'),
@@ -126,5 +135,30 @@ export function useGlobalRangeDate(): {
     };
   }, [dateRange, globalStartDate, globalEndDate, updateInc]);
 
+  /**
+   * Auto refresh if is realtime
+   * NOTICE: Not cool yet
+   */
+  useEffect(() => {
+    let timer: number | null = null;
+
+    if (dateRange === DateRange.Realtime) {
+      if (timer) {
+        window.clearInterval(timer);
+      }
+
+      timer = window.setInterval(() => {
+        refresh();
+      }, 60 * 1000);
+    }
+
+    return () => {
+      if (timer) {
+        window.clearInterval(timer);
+        timer = null;
+      }
+    };
+  }, [dateRange]);
+
   return { label, startDate, endDate, unit, refresh };
 }
diff --git a/src/client/store/global.ts b/src/client/store/global.ts
index d9828c93..fca26c82 100644
--- a/src/client/store/global.ts
+++ b/src/client/store/global.ts
@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
 import { create } from 'zustand';
 
 export enum DateRange {
+  Realtime,
   Last24Hours,
   Today,
   Yesterday,