From 1af18872d50b43de42ef28d4f843bb5fadfd0f44 Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Thu, 7 May 2026 11:14:05 +0200 Subject: [PATCH] Revert "ui(site): enhance table components and visibility" This reverts commit 298c51408736038642fbc6a843424e0075462234. --- .../domains-table/domains-table.tsx | 174 ++++++++---------- .../monitors-table/monitors-table.tsx | 36 ++-- .../systems-table/systems-table.tsx | 4 - 3 files changed, 96 insertions(+), 118 deletions(-) diff --git a/internal/site/src/components/domains-table/domains-table.tsx b/internal/site/src/components/domains-table/domains-table.tsx index 7e729c2..8e4dddd 100644 --- a/internal/site/src/components/domains-table/domains-table.tsx +++ b/internal/site/src/components/domains-table/domains-table.tsx @@ -88,17 +88,17 @@ function DaysLeftBadge({ days, label = "days" }: { days: number | undefined; lab const isExpired = days < 0 const colorClass = isExpired - ? "bg-red-500 text-white border-red-600" + ? "bg-red-500/15 text-red-600 border-red-500/30" : isCritical - ? "bg-red-500 text-white border-red-600" + ? "bg-red-500/15 text-red-600 border-red-500/30" : isWarning - ? "bg-yellow-500 text-white border-yellow-600" - : "bg-green-500 text-white border-green-600" + ? "bg-yellow-500/15 text-yellow-600 border-yellow-500/30" + : "bg-green-500/15 text-green-600 border-green-500/30" return (
{isExpired ? Math.abs(days) : days} - {isExpired ? "EXPIRED" : days === 1 ? "DAY" : label.toUpperCase()} + {isExpired ? "EXPIRED" : days === 1 ? "DAY" : label.toUpperCase()}
) } @@ -552,104 +552,80 @@ export default function DomainsTable() { ) : (
- {filteredDomains.map((domain) => { - const isExpired = domain.status === "expired" - const isExpiring = domain.status === "expiring" - const isActive = domain.status === "active" - - const cardGradient = isExpired - ? "from-red-500/5 to-red-500/10 border-red-500/20" - : isExpiring - ? "from-yellow-500/5 to-yellow-500/10 border-yellow-500/20" - : isActive - ? "from-green-500/5 to-green-500/10 border-green-500/20" - : "from-gray-500/5 to-gray-500/10 border-gray-500/20" - - return ( -
-
- - {domain.favicon_url && ( - (e.currentTarget.style.display = "none")} - /> - )} -
-
{domain.domain_name}
- {displayOptions.showRegistrar && ( -
{domain.registrar_name || "Unknown"}
- )} -
- - - - - - - handleEdit(domain)}>Edit - handleRefresh(domain.id)} disabled={refreshMutation.isPending}> - - Refresh - - handleDelete(domain.id)} className="text-destructive"> - Delete - - - -
- -
- {getStatusIcon(domain.status)} - - {getStatusLabel(domain.status)} - -
- - {displayOptions.showTags && domain.tags && domain.tags.length > 0 && ( -
- {domain.tags.map((tag: string) => ( - - - {tag} - - ))} -
- )} - -
- {displayOptions.showExpiryDate && ( -
- Expiry - {domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"} -
+ {filteredDomains.map((domain) => ( +
+
+ + {domain.favicon_url && ( + (e.currentTarget.style.display = "none")} + /> )} -
- - {displayOptions.showSSL && domain.ssl_valid_to && ( - - )} - +
+
{domain.domain_name}
+ + + + + + + handleEdit(domain)}>Edit + handleRefresh(domain.id)} disabled={refreshMutation.isPending}> + + Refresh + + handleDelete(domain.id)} className="text-destructive"> + Delete + + + +
+ +
+ {getStatusIcon(domain.status)} + + {getStatusLabel(domain.status)} + +
+ + {displayOptions.showTags && domain.tags && domain.tags.length > 0 && ( +
+ {domain.tags.map((tag: string) => ( + + + {tag} + + ))} +
+ )} + +
+
+ {displayOptions.showExpiryDate && ( + {domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"} + )} + {displayOptions.showRegistrar && ( + {domain.registrar_name || "Unknown"} + )} +
+
+ + {displayOptions.showSSL && domain.ssl_valid_to && ( + + )}
- ) - })} +
+ ))}
)} diff --git a/internal/site/src/components/monitors-table/monitors-table.tsx b/internal/site/src/components/monitors-table/monitors-table.tsx index e4e08bd..1a9eeb6 100644 --- a/internal/site/src/components/monitors-table/monitors-table.tsx +++ b/internal/site/src/components/monitors-table/monitors-table.tsx @@ -70,8 +70,9 @@ import { } from "@/lib/monitors" import { cn, useBrowserStorage } from "@/lib/utils" import { AddMonitorDialog } from "./add-monitor-dialog" +import { GroupedMonitorsTable } from "./grouped-monitors-table" import { Link } from "@/components/router" -import ContainersTable from "../containers-table/containers-table" +import { Network } from "lucide-react" // Status indicator component function StatusIndicator({ status }: { status: MonitorStatus }) { @@ -186,7 +187,7 @@ function MonitorCard({ {getMonitorTypeLabel(monitor.type)}
- + {/* Uptime - Prominent pill display */}
@@ -197,7 +198,7 @@ function MonitorCard({
- +
Response
@@ -224,11 +225,6 @@ function MonitorCard({
)} - {/* Containers Section */} -
- -
-
@@ -283,18 +279,18 @@ function MonitorCard({ // Uptime pill badge component - big and visible function UptimePill({ uptime, label = "24h" }: { uptime: number; label?: string }) { - let colorClass = "bg-green-500 text-white border-green-500" + let colorClass = "bg-green-500/15 text-green-600 border-green-500/30" let icon = - + if (uptime < 99.9) { - colorClass = "bg-green-500 text-white border-green-500" + colorClass = "bg-green-500/15 text-green-600 border-green-500/30" } if (uptime < 95) { - colorClass = "bg-yellow-500 text-white border-yellow-500" + colorClass = "bg-yellow-500/15 text-yellow-600 border-yellow-500/30" icon = } if (uptime < 90) { - colorClass = "bg-red-500 text-white border-red-500" + colorClass = "bg-red-500/15 text-red-600 border-red-500/30" icon = } @@ -302,7 +298,7 @@ function UptimePill({ uptime, label = "24h" }: { uptime: number; label?: string
{icon} {formatUptime(uptime)} - {label} + {label}
) } @@ -313,6 +309,10 @@ function UptimeBar({ stats }: { stats?: Record }) { const uptime7d = stats?.uptime_7d ?? 100 const uptime30d = stats?.uptime_30d ?? 100 + let color = "bg-green-500" + if (uptime24h < 95) color = "bg-yellow-500" + if (uptime24h < 90) color = "bg-red-500" + return (
@@ -532,7 +532,7 @@ function MonitorRow({ ) } -type ViewMode = "table" | "grid" +type ViewMode = "table" | "grid" | "network" type StatusFilter = "all" | MonitorStatus type TypeFilter = "all" | MonitorType @@ -745,6 +745,10 @@ export default memo(function MonitorsTable() { Grid + + + Network (Grouped) + @@ -803,6 +807,8 @@ export default memo(function MonitorsTable() {
)}
+ ) : viewMode === "network" ? ( + ) : viewMode === "table" ? ( diff --git a/internal/site/src/components/systems-table/systems-table.tsx b/internal/site/src/components/systems-table/systems-table.tsx index 32f0947..1371983 100644 --- a/internal/site/src/components/systems-table/systems-table.tsx +++ b/internal/site/src/components/systems-table/systems-table.tsx @@ -51,7 +51,6 @@ import { $router, Link } from "../router" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card" import { SystemsTableColumns, ActionsButton, IndicatorDot } from "./systems-table-columns" import { AddSystemDialog } from "../add-system" -import ContainersTable from "../containers-table/containers-table" type ViewMode = "table" | "grid" type StatusFilter = "all" | SystemRecord["status"] @@ -513,9 +512,6 @@ const SystemCard = memo( ) })} -
- -