From 6309a9ca2fb25a2e4ae9eaea2b50f50a5618fb6d Mon Sep 17 00:00:00 2001 From: rcourtman Date: Sat, 11 Oct 2025 17:32:23 +0000 Subject: [PATCH] Add URL routing to threshold sub-tabs Implement proper URL-based navigation for threshold sub-tabs (Proxmox, Docker, Mail Gateway). This enables bookmarking specific tabs and provides browser history integration. Changes: - Add route-based tab state management with useLocation - Implement tab navigation using useNavigate - Auto-redirect /alerts/thresholds to /alerts/thresholds/proxmox - Add cursor-pointer CSS to improve UX --- .../src/components/Alerts/ThresholdsTable.tsx | 50 ++++++++++++++++--- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx index 7e3d1a650..1f625642a 100644 --- a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx +++ b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx @@ -1,4 +1,5 @@ -import { createSignal, createMemo, Show, For, onMount, onCleanup } from 'solid-js'; +import { createSignal, createMemo, Show, For, onMount, onCleanup, createEffect } from 'solid-js'; +import { useNavigate, useLocation } from '@solidjs/router'; // Workaround for eslint false-positive when `For` is used only in JSX const __ensureForUsage = For; @@ -192,6 +193,9 @@ interface ThresholdsTableProps { } export function ThresholdsTable(props: ThresholdsTableProps) { + const navigate = useNavigate(); + const location = useLocation(); + const [searchTerm, setSearchTerm] = createSignal(''); const [editingId, setEditingId] = createSignal(null); const [editingThresholds, setEditingThresholds] = createSignal< @@ -200,6 +204,38 @@ export function ThresholdsTable(props: ThresholdsTableProps) { const [activeTab, setActiveTab] = createSignal<'proxmox' | 'pmg' | 'docker'>('proxmox'); let searchInputRef: HTMLInputElement | undefined; + // Determine active tab from URL + const getActiveTabFromRoute = (): 'proxmox' | 'pmg' | 'docker' => { + const path = location.pathname; + if (path.includes('/thresholds/docker')) return 'docker'; + if (path.includes('/thresholds/mail-gateway')) return 'pmg'; + return 'proxmox'; // default + }; + + // Sync active tab with route on mount and route changes + createEffect(() => { + const tabFromRoute = getActiveTabFromRoute(); + if (activeTab() !== tabFromRoute) { + setActiveTab(tabFromRoute); + } + }); + + // Handle default redirect - if at /alerts/thresholds exactly, redirect to /alerts/thresholds/proxmox + createEffect(() => { + if (location.pathname === '/alerts/thresholds') { + navigate('/alerts/thresholds/proxmox', { replace: true }); + } + }); + + const handleTabClick = (tab: 'proxmox' | 'pmg' | 'docker') => { + const tabRoutes = { + proxmox: '/alerts/thresholds/proxmox', + pmg: '/alerts/thresholds/mail-gateway', + docker: '/alerts/thresholds/docker', + }; + navigate(tabRoutes[tab]); + }; + // Set up keyboard shortcuts onMount(() => { const isEditableElement = (el: HTMLElement | null | undefined): boolean => { @@ -1635,8 +1671,8 @@ const dockerContainersGroupedByHost = createMemo>((pr