From 8ab00b39067f79467f3698076089c3428b698404 Mon Sep 17 00:00:00 2001 From: shahargl Date: Thu, 14 Nov 2024 13:31:12 +0200 Subject: [PATCH] feat: wip --- keep-ui/app/alerts/TitleAndFilters.tsx | 60 +++++---- .../app/alerts/alert-table-facet-utils.tsx | 7 +- keep-ui/components/ui/DateRangePicker.tsx | 123 +++++++++++------- 3 files changed, 112 insertions(+), 78 deletions(-) diff --git a/keep-ui/app/alerts/TitleAndFilters.tsx b/keep-ui/app/alerts/TitleAndFilters.tsx index 236221ca8..d8af877ec 100644 --- a/keep-ui/app/alerts/TitleAndFilters.tsx +++ b/keep-ui/app/alerts/TitleAndFilters.tsx @@ -24,44 +24,52 @@ export const TitleAndFilters = ({ onThemeChange, }: TableHeaderProps) => { const [timeFrame, setTimeFrame] = useState({ - start: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000), // 365 days ago - end: new Date(), // now + start: null, + end: null, paused: true, isFromCalendar: false, }); const handleTimeFrameChange = (newTimeFrame: { - start: Date; - end: Date; + start: Date | null; + end: Date | null; paused?: boolean; isFromCalendar?: boolean; }) => { - // Create a new end date that includes the full day - const adjustedTimeFrame = { - ...newTimeFrame, - end: new Date(newTimeFrame.end.getTime()), - paused: newTimeFrame.paused ?? true, // Provide default value if undefined - isFromCalendar: newTimeFrame.isFromCalendar ?? false, - }; - if (adjustedTimeFrame.isFromCalendar) { - adjustedTimeFrame.end.setHours(23, 59, 59, 999); - } + setTimeFrame(newTimeFrame); - setTimeFrame(adjustedTimeFrame); + // Only apply date filter if both start and end dates exist + if (newTimeFrame.start && newTimeFrame.end) { + const adjustedTimeFrame = { + ...newTimeFrame, + end: new Date(newTimeFrame.end.getTime()), + paused: newTimeFrame.paused ?? true, + isFromCalendar: newTimeFrame.isFromCalendar ?? false, + }; - table.setColumnFilters((existingFilters) => { - const filteredArrayFromLastReceived = existingFilters.filter( - ({ id }) => id !== "lastReceived" - ); + if (adjustedTimeFrame.isFromCalendar) { + adjustedTimeFrame.end.setHours(23, 59, 59, 999); + } + + table.setColumnFilters((existingFilters) => { + const filteredArrayFromLastReceived = existingFilters.filter( + ({ id }) => id !== "lastReceived" + ); - return filteredArrayFromLastReceived.concat({ - id: "lastReceived", - value: { - start: adjustedTimeFrame.start, - end: adjustedTimeFrame.end, - }, + return filteredArrayFromLastReceived.concat({ + id: "lastReceived", + value: { + start: adjustedTimeFrame.start, + end: adjustedTimeFrame.end, + }, + }); }); - }); + } else { + // Remove date filter if no dates are selected + table.setColumnFilters((existingFilters) => + existingFilters.filter(({ id }) => id !== "lastReceived") + ); + } table.resetRowSelection(); table.resetPagination(); diff --git a/keep-ui/app/alerts/alert-table-facet-utils.tsx b/keep-ui/app/alerts/alert-table-facet-utils.tsx index b4b45fde8..a26f8ab1d 100644 --- a/keep-ui/app/alerts/alert-table-facet-utils.tsx +++ b/keep-ui/app/alerts/alert-table-facet-utils.tsx @@ -20,15 +20,12 @@ export const getFilteredAlertsForFacet = ( timeRange?: { start: Date; end: Date; isFromCalendar: boolean } ) => { return alerts.filter((alert) => { - // First apply time range filter if exists - - // Apply time range filter if exists - if (timeRange) { + // Only apply time range filter if both start and end dates exist + if (timeRange?.start && timeRange?.end) { const lastReceived = new Date(alert.lastReceived); const rangeStart = new Date(timeRange.start); const rangeEnd = new Date(timeRange.end); - // Only set end time to 23:59:59.999 if it's not a quick preset range if (!isQuickPresetRange(timeRange)) { rangeEnd.setHours(23, 59, 59, 999); } diff --git a/keep-ui/components/ui/DateRangePicker.tsx b/keep-ui/components/ui/DateRangePicker.tsx index 790538536..8b8c430f5 100644 --- a/keep-ui/components/ui/DateRangePicker.tsx +++ b/keep-ui/components/ui/DateRangePicker.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo } from "react"; import * as Popover from "@radix-ui/react-popover"; -import { Button, Badge, Subtitle } from "@tremor/react"; +import { Button, Badge, Subtitle, Text } from "@tremor/react"; import { Calendar } from "./Calendar"; import { Play, @@ -20,12 +20,11 @@ const ONE_HOUR = 60 * 60 * 1000; const ONE_DAY = 24 * ONE_HOUR; interface TimeFrame { - start: Date; - end: Date; + start: Date | null; + end: Date | null; paused?: boolean; isFromCalendar?: boolean; } - interface TimePreset { badge: string; label: string; @@ -50,6 +49,9 @@ interface EnhancedDateRangePickerProps { } export function isQuickPresetRange(timeFrame: TimeFrame): boolean { + if (!timeFrame.start || !timeFrame.end) { + return false; + } // If it's explicitly marked as from calendar, return false if (timeFrame.isFromCalendar) { return false; @@ -62,7 +64,6 @@ export function isQuickPresetRange(timeFrame: TimeFrame): boolean { const quickPresetDurations = [ 15 * ONE_MINUTE, // 15m 45 * ONE_MINUTE, // 45m - 90 * ONE_MINUTE, // 90m ONE_HOUR, // 1h 4 * ONE_HOUR, // 4h ONE_DAY, // 1d @@ -112,10 +113,14 @@ export default function EnhancedDateRangePicker({ const [showMoreOptions, setShowMoreOptions] = useState(false); const [selectedCategory, setSelectedCategory] = useState(null); const [isOpen, setIsOpen] = useState(false); - const [calendarRange, setCalendarRange] = useState({ - from: timeFrame.start, - to: timeFrame.end, - }); + const [calendarRange, setCalendarRange] = useState( + timeFrame.start && timeFrame.end + ? { + from: timeFrame.start, + to: timeFrame.end, + } + : undefined + ); const quickPresets = useMemo( () => [ @@ -191,6 +196,15 @@ export default function EnhancedDateRangePicker({ end: new Date(), }, }, + { + badge: "all", + label: "All time", + value: { + start: null, + end: null, + paused: true, + }, + }, ], [] ); @@ -200,6 +214,14 @@ export default function EnhancedDateRangePicker({ { title: "Relative Time", options: [ + { + badge: "30m", + label: "Past 30 minutes", + value: { + start: new Date(Date.now() - 30 * ONE_MINUTE), + end: new Date(), + }, + }, { badge: "45m", label: "Past 45 minutes", @@ -209,26 +231,34 @@ export default function EnhancedDateRangePicker({ }, }, { - badge: "90m", - label: "Past 90 minutes", + badge: "2h", + label: "Past 2 hours", + value: { + start: new Date(Date.now() - 2 * ONE_HOUR), + end: new Date(), + }, + }, + { + badge: "6h", + label: "Past 6 hours", value: { - start: new Date(Date.now() - 90 * ONE_MINUTE), + start: new Date(Date.now() - 6 * ONE_HOUR), end: new Date(), }, }, { - badge: "2d", - label: "Past 2 days", + badge: "6d", + label: "Past 6 days", value: { - start: new Date(Date.now() - 2 * ONE_DAY), + start: new Date(Date.now() - 6 * ONE_DAY), end: new Date(), }, }, { - badge: "3d", - label: "Past 3 days", + badge: "60d", + label: "Past 60 days", value: { - start: new Date(Date.now() - 3 * ONE_DAY), + start: new Date(Date.now() - 60 * ONE_DAY), end: new Date(), }, }, @@ -257,27 +287,6 @@ export default function EnhancedDateRangePicker({ }, ], }, - { - title: "Timestamp", - options: [ - { - badge: "1min", - label: "Last Minute", - value: { - start: new Date(Date.now() - ONE_MINUTE), - end: new Date(), - }, - }, - { - badge: "5min", - label: "Last 5 Minutes", - value: { - start: new Date(Date.now() - 5 * ONE_MINUTE), - end: new Date(), - }, - }, - ], - }, ], [] ); @@ -303,6 +312,9 @@ export default function EnhancedDateRangePicker({ }; const handleRewind = () => { + if (!timeFrame.start || !timeFrame.end) { + return; + } const duration = timeFrame.end.getTime() - timeFrame.start.getTime(); setTimeFrame({ start: new Date(timeFrame.start.getTime() - duration), @@ -313,6 +325,9 @@ export default function EnhancedDateRangePicker({ }; const handleForward = () => { + if (!timeFrame.start || !timeFrame.end) { + return; + } const duration = timeFrame.end.getTime() - timeFrame.start.getTime(); setTimeFrame({ start: new Date(timeFrame.end.getTime()), @@ -323,6 +338,9 @@ export default function EnhancedDateRangePicker({ }; const handleZoomOut = () => { + if (!timeFrame.start || !timeFrame.end) { + return; + } const duration = timeFrame.end.getTime() - timeFrame.start.getTime(); setTimeFrame({ start: new Date(timeFrame.start.getTime() - duration / 2), @@ -336,6 +354,9 @@ export default function EnhancedDateRangePicker({ let interval: NodeJS.Timeout; if (!isPaused) { interval = setInterval(() => { + if (!timeFrame.start || !timeFrame.end) { + return; + } const duration = timeFrame.end.getTime() - timeFrame.start.getTime(); setTimeFrame({ start: new Date(Date.now() - duration), @@ -384,17 +405,23 @@ export default function EnhancedDateRangePicker({ >
- {timeFrame.paused + {!timeFrame.start || !timeFrame.end + ? "All" + : timeFrame.paused ? formatDuration(timeFrame.start, timeFrame.end) : "Live"} - - {`${format(timeFrame.start, "MMM d, yyyy HH:mm")} - ${format( - timeFrame.end, - "MMM d, yyyy HH:mm" - )}`} + + + {!timeFrame.start || !timeFrame.end + ? "All time" + : `${format( + timeFrame.start, + "MMM d, yyyy HH:mm" + )} - ${format(timeFrame.end, "MMM d, yyyy HH:mm")}`} + - +
@@ -511,7 +538,9 @@ export default function EnhancedDateRangePicker({ numberOfMonths={1} disabled={{ after: new Date() }} className="w-full bg-white" - defaultMonth={timeFrame.start} + defaultMonth={ + timeFrame.start ? new Date(timeFrame.start) : undefined + } /> )}