diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx index be0ab6dc5..77aca8b8f 100644 --- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx +++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx @@ -8,8 +8,8 @@ type Props = { export const configChangesDefaultDateFilter: URLSearchParamsInit = { rangeType: "relative", - display: "2 days", - range: "now-2d" + display: "7 days", + range: "now-7d" }; export default function ConfigChangesDateRangeFilter({ diff --git a/src/components/Configs/ConfigPageTabs.tsx b/src/components/Configs/ConfigPageTabs.tsx index 211a8b02b..974f9bc67 100644 --- a/src/components/Configs/ConfigPageTabs.tsx +++ b/src/components/Configs/ConfigPageTabs.tsx @@ -4,12 +4,14 @@ import TabbedLinks from "../../ui/Tabs/TabbedLinks"; type ConfigPageTabsProps = { activeTab: string; + daysLabel?: string; children: React.ReactNode; }; export default function ConfigPageTabs({ activeTab, - children + children, + daysLabel = "7 days" }: ConfigPageTabsProps) { const [searchParams] = useSearchParams(); @@ -25,7 +27,7 @@ export default function ConfigPageTabs({ search: `${query}` }, { - label: "Changes", + label: `Changes (${daysLabel})`, key: "Changes", path: `/catalog/changes`, search: `${query}` @@ -42,7 +44,7 @@ export default function ConfigPageTabs({ path: `/catalog/scrapers` } ]; - }, [type]); + }, [daysLabel, type]); return (
diff --git a/src/pages/config/ConfigChangesPage.tsx b/src/pages/config/ConfigChangesPage.tsx index 96e7d5056..77cfde224 100644 --- a/src/pages/config/ConfigChangesPage.tsx +++ b/src/pages/config/ConfigChangesPage.tsx @@ -1,5 +1,6 @@ import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks"; import { ConfigChangeTable } from "@flanksource-ui/components/Configs/Changes/ConfigChangeTable"; +import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter"; import { ConfigChangeFilters } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters"; import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs"; import { InfoMessage } from "@flanksource-ui/components/InfoMessage"; @@ -9,6 +10,7 @@ import { BreadcrumbRoot } from "@flanksource-ui/ui/BreadcrumbNav"; import { PaginationOptions } from "@flanksource-ui/ui/DataTable"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { Head } from "@flanksource-ui/ui/Head"; import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout"; import { refreshButtonClickedTrigger } from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar"; @@ -25,6 +27,12 @@ export function ConfigChangesPage() { sortDirection: "desc" }); + const { getTimeRangeFromUrl } = useTimeRangeParams( + configChangesDefaultDateFilter + ); + + const timeRangeValue = getTimeRangeFromUrl(); + const page = params.get("page") ?? "1"; const pageSize = params.get("pageSize") ?? "200"; @@ -100,7 +108,7 @@ export function ConfigChangesPage() { loading={isLoading || isRefetching} contentClass="p-0 h-full" > - + {error ? ( ) : (