From 380968472fa76c21f1011c85d668d747e3415dea Mon Sep 17 00:00:00 2001 From: fabiangigler Date: Wed, 23 Sep 2026 13:35:01 +0200 Subject: [PATCH] Allow monitor sort headers to reset to default --- .../Monitors/Components/DockerMonitorsTable.tsx | 11 ++++------- .../Monitors/Components/MonitorsTable.tsx | 11 ++++------- .../Monitors/Components/PageSpeedMonitorsTable.tsx | 11 ++++------- .../Monitors/Components/UptimeMonitorsTable.tsx | 12 ++++-------- client/src/Utils/MonitorUtils.ts | 10 ++++++++++ 5 files changed, 26 insertions(+), 29 deletions(-) diff --git a/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx b/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx index ea06557f6..45569b521 100644 --- a/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx +++ b/client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx @@ -8,6 +8,7 @@ import { ColoredLabel, } from "@/Components/design-elements"; import { SPACING } from "@/Utils/Theme/constants"; +import { getNextMonitorSort } from "@/Utils/MonitorUtils"; import type { Header } from "@/Components/design-elements/Table"; import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu"; import { ArrowUp, ArrowDown } from "lucide-react"; @@ -105,13 +106,9 @@ export const DockerMonitorsTable = ({ const handleSort = (e: React.MouseEvent, field: string) => { e.preventDefault(); e.stopPropagation(); - if (sortField === field) { - const newOrder = sortOrder === "asc" ? "desc" : "asc"; - setSortOrder(newOrder); - } else { - setSortField(field); - setSortOrder("asc"); - } + const nextSort = getNextMonitorSort(field, sortField, sortOrder); + setSortField(nextSort.field); + setSortOrder(nextSort.order); refetch(); }; diff --git a/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx b/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx index 567fd3f9e..23bd05056 100644 --- a/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx +++ b/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx @@ -9,6 +9,7 @@ import { ColoredLabel, } from "@/Components/design-elements"; import { SPACING } from "@/Utils/Theme/constants"; +import { getNextMonitorSort } from "@/Utils/MonitorUtils"; import type { Header } from "@/Components/design-elements/Table"; import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu"; import { ArrowUp, ArrowDown } from "lucide-react"; @@ -100,13 +101,9 @@ export const InfraMonitorsTable = ({ const handleSort = (e: React.MouseEvent, field: string) => { e.preventDefault(); e.stopPropagation(); - if (sortField === field) { - const newOrder = sortOrder === "asc" ? "desc" : "asc"; - setSortOrder(newOrder); - } else { - setSortField(field); - setSortOrder("asc"); - } + const nextSort = getNextMonitorSort(field, sortField, sortOrder); + setSortField(nextSort.field); + setSortOrder(nextSort.order); refetch(); }; diff --git a/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx b/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx index 9d1789264..f4421b3ed 100644 --- a/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx +++ b/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx @@ -9,6 +9,7 @@ import { ColoredLabel, } from "@/Components/design-elements"; import { LAYOUT, SPACING } from "@/Utils/Theme/constants"; +import { getNextMonitorSort } from "@/Utils/MonitorUtils"; import { HistogramPageSpeed } from "@/Components/monitors"; import { ArrowDown, ArrowUp } from "lucide-react"; import type { Header } from "@/Components/design-elements/Table"; @@ -81,13 +82,9 @@ export const PageSpeedMonitorsTable = ({ const handleSort = (e: any, field: string) => { e.preventDefault(); e.stopPropagation(); - if (sortField === field) { - const newOrder = sortOrder === "asc" ? "desc" : "asc"; - setSortOrder(newOrder); - } else { - setSortField(field); - setSortOrder("asc"); - } + const nextSort = getNextMonitorSort(field, sortField, sortOrder); + setSortField(nextSort.field); + setSortOrder(nextSort.order); refetch(); }; diff --git a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx index 1d98ddc79..e605439b9 100644 --- a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx +++ b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx @@ -25,7 +25,7 @@ import type { RootState } from "@/Types/state"; import { Checkbox } from "@/Components/inputs"; import type { Tag } from "@/Types/Tag"; import { SPACING } from "@/Utils/Theme/constants"; -import { getUptimePercentageColor } from "@/Utils/MonitorUtils"; +import { getNextMonitorSort, getUptimePercentageColor } from "@/Utils/MonitorUtils"; import { formatPercentage } from "@/Utils/FormatUtils"; interface MonitorTableProps { @@ -91,13 +91,9 @@ export const MonitorTable = ({ const handleSort = (e: React.MouseEvent, field: string) => { e.preventDefault(); e.stopPropagation(); - if (sortField === field) { - const newOrder = sortOrder === "asc" ? "desc" : "asc"; - setSortOrder(newOrder); - } else { - setSortField(field); - setSortOrder("asc"); - } + const nextSort = getNextMonitorSort(field, sortField, sortOrder); + setSortField(nextSort.field); + setSortOrder(nextSort.order); refetch(); }; diff --git a/client/src/Utils/MonitorUtils.ts b/client/src/Utils/MonitorUtils.ts index c8bbca168..681b2f637 100644 --- a/client/src/Utils/MonitorUtils.ts +++ b/client/src/Utils/MonitorUtils.ts @@ -10,6 +10,16 @@ import { type DockerLogLine, } from "@/Types/Check"; +export const getNextMonitorSort = ( + field: string, + sortField: string, + sortOrder: "asc" | "desc" +): { field: string; order: "asc" | "desc" } => { + if (field !== sortField) return { field, order: "asc" }; + if (sortOrder === "asc") return { field, order: "desc" }; + return { field: "", order: "asc" }; +}; + export const getMonitorPath = (type: MonitorType): string => { const pathMap: Record = { http: "uptime",