diff --git a/src/client/components/DateFilter.tsx b/src/client/components/DateFilter.tsx index a8916e4..59a939d 100644 --- a/src/client/components/DateFilter.tsx +++ b/src/client/components/DateFilter.tsx @@ -27,6 +27,15 @@ export const DateFilter: React.FC = 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 5af1118..8f14a86 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 d9828c9..fca26c8 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,