gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-23 19:57:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add URL routing to threshold sub-tabs

Browse Source 
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
This commit is contained in:
rcourtman
2025-10-11 17:32:23 +00:00
parent f783fef716
commit 6309a9ca2f
1 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Alerts/ThresholdsTable.tsx
+43 -7
View File
@@ -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<string | null>(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<Record<string, Resource[]>>((pr
<nav class="-mb-px flex gap-6" aria-label="Tabs">
<button
type="button"
onClick={() => setActiveTab('proxmox')}
class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
onClick={() => handleTabClick('proxmox')}
class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
activeTab() === 'proxmox'
? 'border-blue-500 text-blue-600 dark:text-blue-400'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
@@ -1646,8 +1682,8 @@ const dockerContainersGroupedByHost = createMemo<Record<string, Resource[]>>((pr
</button>
<button
type="button"
onClick={() => setActiveTab('pmg')}
class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
onClick={() => handleTabClick('pmg')}
class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
activeTab() === 'pmg'
? 'border-blue-500 text-blue-600 dark:text-blue-400'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
@@ -1657,8 +1693,8 @@ const dockerContainersGroupedByHost = createMemo<Record<string, Resource[]>>((pr
</button>
<button
type="button"
onClick={() => setActiveTab('docker')}
class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
onClick={() => handleTabClick('docker')}
class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
activeTab() === 'docker'
? 'border-blue-500 text-blue-600 dark:text-blue-400'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'