vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-11 04:43:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Enhance table responsiveness across multiple components

Browse source
This commit is contained in:
courtmanr@gmail.com 2025-11-26 17:57:09 +00:00
parent d36b4ce6c8
commit c021dc6ca5
9 changed files with 848 additions and 884 deletions
Download patch file Download diff file Expand all files Collapse all files

76
frontend-modern/src/components/Alerts/ResourceTable.tsx
View file

@ -397,13 +397,12 @@ export function ResourceTable(props: ResourceTableProps) {
title={isDisabledMetric ? 'Disabled (no alerts for this metric)' : ''}
>
<span
class={`text-sm ${
isDisabledMetric
class={`text-sm ${isDisabledMetric
? 'text-gray-400 dark:text-gray-500 italic'
: metricProps.isOverridden
? 'text-gray-900 dark:text-gray-100 font-bold'
: 'text-gray-900 dark:text-gray-100'
}`}
}`}
>
{displayText}
</span>
@ -523,7 +522,7 @@ export function ResourceTable(props: ResourceTableProps) {
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{/* Global Defaults Row */}
<Show
<Show
when={props.globalDefaults && props.setGlobalDefaults && props.setHasUnsavedChanges}
>
<tr
@ -591,11 +590,10 @@ export function ResourceTable(props: ResourceTableProps) {
props.setHasUnsavedChanges(true);
}
}}
class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${
isOff()
class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isOff()
? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 italic placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:opacity-60 pointer-events-none'
: 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'
}`}
}`}
title={
isOff()
? 'Click to enable this metric'
@ -908,26 +906,26 @@ export function ResourceTable(props: ResourceTableProps) {
</Show>
</td>
<td class="p-1 px-2">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 min-w-0">
<Show
when={resource.type === 'node'}
fallback={
<span
class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
>
{resource.name}
</span>
}
>
<div
class="flex flex-wrap items-center gap-3"
class="flex items-center gap-3 min-w-0"
title={resource.status || undefined}
>
<Show
when={resource.host}
fallback={
<span
class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
>
{resource.type === 'node'
? resource.name
@ -941,11 +939,10 @@ export function ResourceTable(props: ResourceTableProps) {
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
class={`text-sm font-medium transition-colors duration-150 ${
resource.disabled
class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
? 'text-gray-500 dark:text-gray-500'
: 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
}`}
}`}
title={`Open ${resource.displayName || resource.name} web interface`}
>
{resource.type === 'node'
@ -1052,9 +1049,9 @@ export function ResourceTable(props: ResourceTableProps) {
const sliderMax =
metric === 'temperature'
? Math.max(
sliderMin,
bounds.max > 0 ? bounds.max : 120,
)
sliderMin,
bounds.max > 0 ? bounds.max : 120,
)
: bounds.max;
const defaultSliderValue = () => {
if (metric === 'disk') return 90;
@ -1118,7 +1115,7 @@ export function ResourceTable(props: ResourceTableProps) {
if (
isEditing() &&
activeMetricInput()?.resourceId ===
resource.id &&
resource.id &&
activeMetricInput()?.metric === metric
) {
queueMicrotask(() => {
@ -1150,11 +1147,10 @@ export function ResourceTable(props: ResourceTableProps) {
}
setActiveMetricInput(null);
}}
class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${
isDisabled()
class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
: 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
}`}
}`}
/>
</div>
</div>
@ -1423,9 +1419,9 @@ export function ResourceTable(props: ResourceTableProps) {
<Show
when={resource.type === 'node'}
fallback={
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 min-w-0">
<span
class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
>
{resource.name}
</span>
@ -1438,14 +1434,14 @@ export function ResourceTable(props: ResourceTableProps) {
}
>
<div
class="flex flex-wrap items-center gap-3"
class="flex items-center gap-3 min-w-0"
title={resource.status || undefined}
>
<Show
when={resource.host}
fallback={
<span
class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
>
{resource.type === 'node'
? resource.name
@ -1459,11 +1455,10 @@ export function ResourceTable(props: ResourceTableProps) {
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
class={`text-sm font-medium transition-colors duration-150 ${
resource.disabled
class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
? 'text-gray-500 dark:text-gray-500'
: 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
}`}
}`}
title={`Open ${resource.displayName || resource.name} web interface`}
>
{resource.type === 'node'
@ -1518,12 +1513,12 @@ export function ResourceTable(props: ResourceTableProps) {
return;
}
setActiveMetricInput({ resourceId: resource.id, metric });
props.onEdit(
resource.id,
resource.thresholds ? { ...resource.thresholds } : {},
resource.defaults ? { ...resource.defaults } : {},
typeof resource.note === 'string' ? resource.note : undefined,
);
props.onEdit(
resource.id,
resource.thresholds ? { ...resource.thresholds } : {},
resource.defaults ? { ...resource.defaults } : {},
typeof resource.note === 'string' ? resource.note : undefined,
);
};
return (
@ -1559,9 +1554,9 @@ export function ResourceTable(props: ResourceTableProps) {
min="-1"
max={
metric.includes('disk') ||
metric.includes('memory') ||
metric.includes('cpu') ||
metric === 'usage'
metric.includes('memory') ||
metric.includes('cpu') ||
metric === 'usage'
? 100
: 10000
}
@ -1604,11 +1599,10 @@ export function ResourceTable(props: ResourceTableProps) {
}
setActiveMetricInput(null);
}}
class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${
isDisabled()
class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
: 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
}`}
}`}
/>
</div>
</Show>
@ -1695,7 +1689,7 @@ export function ResourceTable(props: ResourceTableProps) {
<div class="flex items-center gap-1">
<button
type="button"
onClick={() =>
onClick={() =>
props.onEdit(
resource.id,
resource.thresholds ? { ...resource.thresholds } : {},

59
frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
View file

@ -210,7 +210,6 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
const selected = props.selectedHostId() === summary.host.id;
const online = isHostOnline(summary.host);
const uptimeLabel = summary.uptimeSeconds ? formatUptime(summary.uptimeSeconds) : '—';
const agentLabel = summary.host.agentVersion ? summary.host.agentVersion : '—';
const rowStyle = () => {
const styles: Record<string, string> = {};
@ -256,72 +255,34 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
onClick={() => props.onSelect(summary.host.id)}
>
<td class="pr-2 py-1 pl-3 align-middle">
<div class="flex flex-wrap items-center gap-1.5 sm:flex-nowrap sm:whitespace-nowrap sm:min-w-0">
<div class="flex items-center gap-1.5 min-w-0">
<StatusDot
variant={hostStatus().variant}
title={hostStatus().label}
ariaLabel={hostStatus().label}
size="xs"
/>
<span class="font-medium text-[11px] text-gray-900 dark:text-gray-100 sm:truncate sm:max-w-[200px]">
<span class="font-medium text-[11px] text-gray-900 dark:text-gray-100 truncate" title={getDisplayName(summary.host)}>
{getDisplayName(summary.host)}
</span>
<Show when={getDisplayName(summary.host) !== summary.host.hostname}>
<span class="hidden sm:inline text-[9px] text-gray-500 dark:text-gray-400 sm:whitespace-nowrap">
<span class="hidden sm:inline text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
({summary.host.hostname})
</span>
</Show>
<span
class={`text-[9px] px-1 py-0 rounded font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
title={runtimeInfo.raw || runtimeInfo.label}
>
{runtimeInfo.label}
</span>
<Show when={runtimeVersion}>
<span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
v{runtimeVersion}
</span>
</Show>
</div>
<div class="mt-2 grid grid-cols-1 gap-1 text-[10px] text-gray-500 dark:text-gray-400 sm:hidden">
<div class="flex items-center gap-1">
<span class="font-semibold text-gray-600 dark:text-gray-300">Uptime:</span>
<span>{uptimeLabel}</span>
</div>
<div class="flex items-start gap-1">
<span class="font-semibold text-gray-600 dark:text-gray-300">Last:</span>
<span class="flex-1">
<span>{summary.lastSeenRelative}</span>
<Show when={summary.lastSeenAbsolute}>
<span class="block text-[9px] text-gray-400 dark:text-gray-500">
{summary.lastSeenAbsolute}
</span>
</Show>
</span>
</div>
<div class="flex flex-wrap items-center gap-1">
<span class="font-semibold text-gray-600 dark:text-gray-300">Agent:</span>
<div class="hidden xl:flex items-center gap-1.5 ml-1">
<span
class={
agentOutdated
? 'rounded px-1 py-0.5 bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 font-medium'
: 'rounded px-1 py-0.5 bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 font-medium'
}
class={`text-[9px] px-1 py-0 rounded font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
title={runtimeInfo.raw || runtimeInfo.label}
>
{agentLabel}
{runtimeInfo.label}
</span>
<Show when={agentOutdated}>
<span class="text-[9px] font-medium text-yellow-600 dark:text-yellow-500">
Update recommended
<Show when={runtimeVersion}>
<span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
v{runtimeVersion}
</span>
</Show>
</div>
<Show when={summary.host.intervalSeconds}>
<div class="flex items-center gap-1">
<span class="font-semibold text-gray-600 dark:text-gray-300">Interval:</span>
<span>{summary.host.intervalSeconds}s</span>
</div>
</Show>
</div>
</td>
<td class="px-0.5 md:px-2 py-1 align-middle">

926
frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
View file

File diff suppressed because it is too large Load diff

638
frontend-modern/src/components/Hosts/HostsOverview.tsx
View file

@ -171,345 +171,345 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
}
>
<Card padding="none" class="overflow-hidden">
<ScrollableTable>
<table class="w-full border-collapse">
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
<th class="pl-4 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[24%]">
Host
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
Platform
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
CPU
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
Memory
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%]">
Uptime
</th>
</tr>
</thead>
<tbody>
<For each={filteredHosts()}>
{(host) => {
const cpuPercent = () => host.cpuUsage ?? 0;
const memPercent = () => host.memory?.usage ?? 0;
const memUsed = () => formatBytes(host.memory?.used ?? 0, 0);
const memTotal = () => formatBytes(host.memory?.total ?? 0, 0);
const hostStatus = createMemo(() => getHostStatusIndicator(host));
<ScrollableTable>
<table class="w-full border-collapse">
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
<th class="pl-4 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[24%]">
Host
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
Platform
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
CPU
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
Memory
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%]">
Uptime
</th>
</tr>
</thead>
<tbody>
<For each={filteredHosts()}>
{(host) => {
const cpuPercent = () => host.cpuUsage ?? 0;
const memPercent = () => host.memory?.usage ?? 0;
const memUsed = () => formatBytes(host.memory?.used ?? 0, 0);
const memTotal = () => formatBytes(host.memory?.total ?? 0, 0);
const hostStatus = createMemo(() => getHostStatusIndicator(host));
// Drawer state
const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(host.id) ?? false);
// Drawer state
const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(host.id) ?? false);
// Check if we have additional info to show in drawer
const hasDrawerContent = createMemo(() => {
return (
(host.disks && host.disks.length > 0) ||
(host.networkInterfaces && host.networkInterfaces.length > 0) ||
(host.raid && host.raid.length > 0) ||
host.loadAverage ||
host.cpuCount ||
host.kernelVersion ||
host.architecture ||
host.agentVersion ||
(host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0)
);
});
// Check if we have additional info to show in drawer
const hasDrawerContent = createMemo(() => {
return (
(host.disks && host.disks.length > 0) ||
(host.networkInterfaces && host.networkInterfaces.length > 0) ||
(host.raid && host.raid.length > 0) ||
host.loadAverage ||
host.cpuCount ||
host.kernelVersion ||
host.architecture ||
host.agentVersion ||
(host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0)
);
});
const toggleDrawer = (event: MouseEvent) => {
if (!hasDrawerContent()) return;
const target = event.target as HTMLElement;
if (target.closest('a, button, [data-prevent-toggle]')) {
return;
}
setDrawerOpen((prev) => !prev);
};
const toggleDrawer = (event: MouseEvent) => {
if (!hasDrawerContent()) return;
const target = event.target as HTMLElement;
if (target.closest('a, button, [data-prevent-toggle]')) {
return;
}
setDrawerOpen((prev) => !prev);
};
// Sync drawer state
createEffect(on(() => host.id, (id) => {
const stored = drawerState.get(id);
if (stored !== undefined) {
setDrawerOpen(stored);
} else {
setDrawerOpen(false);
}
}));
// Sync drawer state
createEffect(on(() => host.id, (id) => {
const stored = drawerState.get(id);
if (stored !== undefined) {
setDrawerOpen(stored);
} else {
setDrawerOpen(false);
}
}));
createEffect(() => {
drawerState.set(host.id, drawerOpen());
});
createEffect(() => {
drawerState.set(host.id, drawerOpen());
});
const rowClass = () => {
const base = 'border-b border-gray-200 dark:border-gray-700 transition-all duration-200';
const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50';
const clickable = hasDrawerContent() ? 'cursor-pointer' : '';
const expanded = drawerOpen() ? 'bg-gray-50 dark:bg-gray-800/40' : '';
return `${base} ${hover} ${clickable} ${expanded}`;
};
const rowClass = () => {
const base = 'border-b border-gray-200 dark:border-gray-700 transition-all duration-200';
const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50';
const clickable = hasDrawerContent() ? 'cursor-pointer' : '';
const expanded = drawerOpen() ? 'bg-gray-50 dark:bg-gray-800/40' : '';
return `${base} ${hover} ${clickable} ${expanded}`;
};
return (
<>
<tr class={rowClass()} onClick={toggleDrawer} aria-expanded={drawerOpen()}>
<td class="pl-4 pr-2 py-2">
<div>
<div class="flex items-center gap-2">
<StatusDot
variant={hostStatus().variant}
title={hostStatus().label}
ariaLabel={hostStatus().label}
size="xs"
/>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
{host.displayName || host.hostname || host.id}
</p>
return (
<>
<tr class={rowClass()} onClick={toggleDrawer} aria-expanded={drawerOpen()}>
<td class="pl-4 pr-2 py-2">
<div>
<div class="flex items-center gap-2 min-w-0">
<StatusDot
variant={hostStatus().variant}
title={hostStatus().label}
ariaLabel={hostStatus().label}
size="xs"
/>
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
{host.displayName || host.hostname || host.id}
</p>
</div>
<Show when={host.displayName && host.displayName !== host.hostname}>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
{host.hostname}
</p>
</Show>
<Show when={host.lastSeen}>
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 truncate">
Updated {formatRelativeTime(host.lastSeen!)}
</p>
</Show>
</div>
</td>
<td class="px-2 py-2">
<div class="text-xs text-gray-700 dark:text-gray-300">
<p class="font-medium capitalize">{host.platform || '—'}</p>
<Show when={host.osName}>
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
{host.osName} {host.osVersion}
</p>
</Show>
</div>
</td>
<td class="px-2 py-2">
<Show
when={cpuPercent() > 0}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<MetricBar
label={formatPercent(cpuPercent())}
value={cpuPercent()}
type="cpu"
/>
</Show>
</td>
<td class="px-2 py-2">
<Show
when={memPercent() > 0}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<MetricBar
label={`${memUsed()} / ${memTotal()}`}
value={memPercent()}
type="memory"
/>
</Show>
</td>
<td class="px-2 py-2">
<Show
when={host.uptimeSeconds}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<span class="text-xs text-gray-700 dark:text-gray-300">
{formatUptime(host.uptimeSeconds!)}
</span>
</Show>
</td>
</tr>
{/* Drawer - Additional Info */}
<Show when={drawerOpen() && hasDrawerContent()}>
<tr class="bg-gray-50 dark:bg-gray-900/50">
<td class="px-4 py-3" colSpan={5}>
<div class="flex flex-wrap justify-start gap-3">
{/* System Info */}
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">System</div>
<div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
<Show when={host.cpuCount}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">CPUs</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.cpuCount}</span>
</div>
</Show>
<Show when={host.loadAverage && host.loadAverage.length > 0}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Load Avg</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.loadAverage!.map(l => l.toFixed(2)).join(', ')}</span>
</div>
</Show>
<Show when={host.architecture}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Arch</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.architecture}</span>
</div>
</Show>
<Show when={host.kernelVersion}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Kernel</span>
<span class="text-right text-gray-600 dark:text-gray-300 truncate">{host.kernelVersion}</span>
</div>
</Show>
<Show when={host.agentVersion}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Agent</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.agentVersion}</span>
</div>
</Show>
</div>
<Show when={host.displayName && host.displayName !== host.hostname}>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
{host.hostname}
</p>
</Show>
<Show when={host.lastSeen}>
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
Updated {formatRelativeTime(host.lastSeen!)}
</p>
</Show>
</div>
</td>
<td class="px-2 py-2">
<div class="text-xs text-gray-700 dark:text-gray-300">
<p class="font-medium capitalize">{host.platform || '—'}</p>
<Show when={host.osName}>
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
{host.osName} {host.osVersion}
</p>
</Show>
</div>
</td>
<td class="px-2 py-2">
<Show
when={cpuPercent() > 0}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<MetricBar
label={formatPercent(cpuPercent())}
value={cpuPercent()}
type="cpu"
/>
</Show>
</td>
<td class="px-2 py-2">
<Show
when={memPercent() > 0}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<MetricBar
label={`${memUsed()} / ${memTotal()}`}
value={memPercent()}
type="memory"
/>
</Show>
</td>
<td class="px-2 py-2">
<Show
when={host.uptimeSeconds}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<span class="text-xs text-gray-700 dark:text-gray-300">
{formatUptime(host.uptimeSeconds!)}
</span>
</Show>
</td>
</tr>
{/* Drawer - Additional Info */}
<Show when={drawerOpen() && hasDrawerContent()}>
<tr class="bg-gray-50 dark:bg-gray-900/50">
<td class="px-4 py-3" colSpan={5}>
<div class="flex flex-wrap justify-start gap-3">
{/* System Info */}
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">System</div>
<div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
<Show when={host.cpuCount}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">CPUs</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.cpuCount}</span>
</div>
</Show>
<Show when={host.loadAverage && host.loadAverage.length > 0}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Load Avg</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.loadAverage!.map(l => l.toFixed(2)).join(', ')}</span>
</div>
</Show>
<Show when={host.architecture}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Arch</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.architecture}</span>
</div>
</Show>
<Show when={host.kernelVersion}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Kernel</span>
<span class="text-right text-gray-600 dark:text-gray-300 truncate">{host.kernelVersion}</span>
</div>
</Show>
<Show when={host.agentVersion}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Agent</span>
<span class="text-right text-gray-600 dark:text-gray-300">{host.agentVersion}</span>
</div>
</Show>
</div>
</div>
{/* Network Interfaces */}
<Show when={host.networkInterfaces && host.networkInterfaces.length > 0}>
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Network</div>
<div class="mt-2 space-y-2 text-[11px]">
<For each={host.networkInterfaces?.slice(0, 4)}>
{(iface) => (
<div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
<div class="font-medium text-gray-700 dark:text-gray-200">{iface.name}</div>
<Show when={iface.addresses && iface.addresses.length > 0}>
<div class="flex flex-wrap gap-1 mt-1 text-[10px]">
<For each={iface.addresses}>
{(addr) => (
<span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{addr}
</span>
)}
</For>
</div>
</Show>
</div>
)}
</For>
</div>
</div>
</Show>
{/* Disk Info */}
<Show when={host.disks && host.disks.length > 0}>
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Disks</div>
<div class="mt-2 space-y-2 text-[11px]">
<For each={host.disks?.slice(0, 3)}>
{(disk) => {
const diskPercent = () => disk.usage ?? 0;
return (
<div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
<div class="flex items-center justify-between">
<span class="font-medium text-gray-700 dark:text-gray-200 truncate">{disk.mountpoint || disk.device}</span>
<span class="text-[10px] text-gray-500 dark:text-gray-400">
{formatBytes(disk.used ?? 0, 0)} / {formatBytes(disk.total ?? 0, 0)}
{/* Network Interfaces */}
<Show when={host.networkInterfaces && host.networkInterfaces.length > 0}>
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Network</div>
<div class="mt-2 space-y-2 text-[11px]">
<For each={host.networkInterfaces?.slice(0, 4)}>
{(iface) => (
<div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
<div class="font-medium text-gray-700 dark:text-gray-200">{iface.name}</div>
<Show when={iface.addresses && iface.addresses.length > 0}>
<div class="flex flex-wrap gap-1 mt-1 text-[10px]">
<For each={iface.addresses}>
{(addr) => (
<span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{addr}
</span>
</div>
<Show when={diskPercent() > 0}>
<div class="mt-1">
<MetricBar
value={diskPercent()}
label={formatPercent(diskPercent())}
type="disk"
/>
</div>
</Show>
</div>
);
}}
</For>
</div>
</div>
</Show>
)}
</For>
</div>
</Show>
</div>
)}
</For>
</div>
</div>
</Show>
{/* Temperature Sensors */}
<Show when={host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0}>
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Temperatures</div>
<div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
<For each={Object.entries(host.sensors!.temperatureCelsius!).slice(0, 5)}>
{([name, temp]) => (
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200 truncate">{name}</span>
<span class={`text-right ${temp > 80 ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-600 dark:text-gray-300'}`}>
{temp.toFixed(1)}°C
{/* Disk Info */}
<Show when={host.disks && host.disks.length > 0}>
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Disks</div>
<div class="mt-2 space-y-2 text-[11px]">
<For each={host.disks?.slice(0, 3)}>
{(disk) => {
const diskPercent = () => disk.usage ?? 0;
return (
<div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
<div class="flex items-center justify-between">
<span class="font-medium text-gray-700 dark:text-gray-200 truncate">{disk.mountpoint || disk.device}</span>
<span class="text-[10px] text-gray-500 dark:text-gray-400">
{formatBytes(disk.used ?? 0, 0)} / {formatBytes(disk.total ?? 0, 0)}
</span>
</div>
)}
</For>
</div>
</div>
</Show>
{/* RAID Arrays */}
<Show when={host.raid && host.raid.length > 0}>
<For each={host.raid!}>
{(array) => {
const isDegraded = () => array.state.toLowerCase().includes('degraded') || array.failedDevices > 0;
const isRebuilding = () => array.state.toLowerCase().includes('recover') || array.state.toLowerCase().includes('resync') || array.rebuildPercent > 0;
const isHealthy = () => !isDegraded() && !isRebuilding() && array.state.toLowerCase().includes('clean');
const stateColor = () => {
if (isDegraded()) return 'text-red-600 dark:text-red-400 font-semibold';
if (isRebuilding()) return 'text-amber-600 dark:text-amber-400 font-semibold';
if (isHealthy()) return 'text-green-600 dark:text-green-400';
return 'text-gray-600 dark:text-gray-300';
};
return (
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
RAID {array.level.replace('raid', '')} - {array.device}
</div>
<div class="mt-2 space-y-1 text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">State</span>
<span class={stateColor()}>{array.state}</span>
<Show when={diskPercent() > 0}>
<div class="mt-1">
<MetricBar
value={diskPercent()}
label={formatPercent(diskPercent())}
type="disk"
/>
</div>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Devices</span>
<span class="text-gray-600 dark:text-gray-300">
{array.activeDevices}/{array.totalDevices}
{array.failedDevices > 0 && <span class="text-red-600 dark:text-red-400"> ({array.failedDevices} failed)</span>}
</span>
</div>
<Show when={isRebuilding() && array.rebuildPercent > 0}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Rebuild</span>
<span class="text-amber-600 dark:text-amber-400 font-medium">
{array.rebuildPercent.toFixed(1)}%
</span>
</div>
<Show when={array.rebuildSpeed}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Speed</span>
<span class="text-gray-600 dark:text-gray-300">{array.rebuildSpeed}</span>
</div>
</Show>
</Show>
</div>
</Show>
</div>
);
}}
</For>
</Show>
</div>
</div>
</td>
</tr>
</Show>
</>
);
}}
</For>
</tbody>
</table>
</ScrollableTable>
</Card>
</Show>
</Show>
{/* Temperature Sensors */}
<Show when={host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0}>
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Temperatures</div>
<div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
<For each={Object.entries(host.sensors!.temperatureCelsius!).slice(0, 5)}>
{([name, temp]) => (
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200 truncate">{name}</span>
<span class={`text-right ${temp > 80 ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-600 dark:text-gray-300'}`}>
{temp.toFixed(1)}°C
</span>
</div>
)}
</For>
</div>
</div>
</Show>
{/* RAID Arrays */}
<Show when={host.raid && host.raid.length > 0}>
<For each={host.raid!}>
{(array) => {
const isDegraded = () => array.state.toLowerCase().includes('degraded') || array.failedDevices > 0;
const isRebuilding = () => array.state.toLowerCase().includes('recover') || array.state.toLowerCase().includes('resync') || array.rebuildPercent > 0;
const isHealthy = () => !isDegraded() && !isRebuilding() && array.state.toLowerCase().includes('clean');
const stateColor = () => {
if (isDegraded()) return 'text-red-600 dark:text-red-400 font-semibold';
if (isRebuilding()) return 'text-amber-600 dark:text-amber-400 font-semibold';
if (isHealthy()) return 'text-green-600 dark:text-green-400';
return 'text-gray-600 dark:text-gray-300';
};
return (
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
RAID {array.level.replace('raid', '')} - {array.device}
</div>
<div class="mt-2 space-y-1 text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">State</span>
<span class={stateColor()}>{array.state}</span>
</div>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Devices</span>
<span class="text-gray-600 dark:text-gray-300">
{array.activeDevices}/{array.totalDevices}
{array.failedDevices > 0 && <span class="text-red-600 dark:text-red-400"> ({array.failedDevices} failed)</span>}
</span>
</div>
<Show when={isRebuilding() && array.rebuildPercent > 0}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Rebuild</span>
<span class="text-amber-600 dark:text-amber-400 font-medium">
{array.rebuildPercent.toFixed(1)}%
</span>
</div>
<Show when={array.rebuildSpeed}>
<div class="flex items-center justify-between gap-2">
<span class="font-medium text-gray-700 dark:text-gray-200">Speed</span>
<span class="text-gray-600 dark:text-gray-300">{array.rebuildSpeed}</span>
</div>
</Show>
</Show>
</div>
</div>
);
}}
</For>
</Show>
</div>
</td>
</tr>
</Show>
</>
);
}}
</For>
</tbody>
</table>
</ScrollableTable>
</Card>
</Show>
</>
}
>

2
frontend-modern/src/components/PMG/MailGateway.tsx
View file

@ -422,7 +422,7 @@ const MailGateway: Component = () => {
return (
<tr>
<td class="px-2 py-1.5 text-xs font-medium text-gray-900 dark:text-gray-100">{node.name}</td>
<td class="px-2 py-1.5 text-xs font-medium text-gray-900 dark:text-gray-100 truncate max-w-[150px]">{node.name}</td>
<td class="px-2 py-1.5 text-xs text-gray-700 dark:text-gray-300 capitalize">{node.role || '—'}</td>
<td class="px-2 py-1.5">
<div class="flex items-center gap-1.5">

2
frontend-modern/src/components/Replication/Replication.tsx
View file

@ -123,7 +123,7 @@ const Replication: Component = () => {
return (
<tr class="hover:bg-gray-50/80 dark:hover:bg-gray-900/40 transition-colors">
<td class="px-4 py-3">
<div class="font-medium text-gray-900 dark:text-gray-100">
<div class="font-medium text-gray-900 dark:text-gray-100 truncate max-w-[200px]">
{job.guestName || `VM ${job.guestId ?? ''}`}
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">

18
frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
View file

@ -319,7 +319,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
<p class="font-medium text-gray-900 dark:text-gray-100 truncate">
{node.name}
</p>
<p class="text-xs text-gray-600 dark:text-gray-400 break-all">
<p class="text-xs text-gray-600 dark:text-gray-400 truncate">
{node.host}
</p>
</div>
@ -339,16 +339,16 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
const pulseStatus = endpoint.PulseReachable === null || endpoint.PulseReachable === undefined
? 'unknown'
: endpoint.PulseReachable
? 'reachable'
: 'unreachable';
? 'reachable'
: 'unreachable';
const statusColor = endpoint.Online && pulseStatus === 'reachable'
? 'border-green-200 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300'
: pulseStatus === 'unreachable'
? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300'
: endpoint.Online
? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
: 'border-gray-200 bg-gray-100 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400';
? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300'
: endpoint.Online
? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
: 'border-gray-200 bg-gray-100 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400';
return (
<div class={`rounded border px-3 py-2 text-[0.7rem] ${statusColor}`}>
@ -576,7 +576,7 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
<p class="font-medium text-gray-900 dark:text-gray-100 truncate">
{node.name}
</p>
<p class="text-xs text-gray-600 dark:text-gray-400 break-all">
<p class="text-xs text-gray-600 dark:text-gray-400 truncate">
{node.host}
</p>
</div>
@ -759,7 +759,7 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
<p class="font-medium text-gray-900 dark:text-gray-100 truncate">
{node.name}
</p>
<p class="text-xs text-gray-600 dark:text-gray-400 break-all">
<p class="text-xs text-gray-600 dark:text-gray-400 truncate">
{node.host}
</p>
</div>

4
internal/api/router.go
View file

@ -1469,6 +1469,10 @@ func (r *Router) ServeHTTP(w http.ResponseWriter, req *http.Request) {
if req.URL.Path == "/api/setup-script-url" {
skipCSRF = true
}
// Skip CSRF for bootstrap token validation (used during initial setup before session exists)
if req.URL.Path == "/api/security/validate-bootstrap-token" {
skipCSRF = true
}
if strings.HasPrefix(req.URL.Path, "/api/") && !skipCSRF && !CheckCSRF(w, req) {
http.Error(w, "CSRF token validation failed", http.StatusForbidden)
LogAuditEvent("csrf_failure", "", GetClientIP(req), req.URL.Path, false, "Invalid CSRF token")

7
mock.env
View file

@ -1 +1,6 @@
PULSE_MOCK_MODE=false
PULSE_MOCK_MODE=true
PULSE_MOCK_NODES=7
PULSE_MOCK_VMS_PER_NODE=5
PULSE_MOCK_LXCS_PER_NODE=8
PULSE_MOCK_RANDOM_METRICS=true
PULSE_MOCK_STOPPED_PERCENT=20