feat: adaptive node table layout, guest row fixes, and legacy agent detection
- Implemented adaptive layout for NodeSummaryTable with responsive columns and sticky name column. - Fixed GuestRow background display issues. - Added IsLegacy field to Host and DockerHost models to flag legacy agents (version < 1.0.0). - Updated monitor to populate IsLegacy based on agent version.
This commit is contained in:
courtmanr@gmail.com
parent
b68bfa8696
commit
ebcafa1dac
14 changed files with 1140 additions and 950 deletions
|
|
@ -6,7 +6,6 @@ import { useWebSocket } from '@/App';
|
|||
import { getAlertStyles } from '@/utils/alerts';
|
||||
import { useAlertsActivation } from '@/stores/alertsActivation';
|
||||
import { ComponentErrorBoundary } from '@/components/ErrorBoundary';
|
||||
import { ScrollableTable } from '@/components/shared/ScrollableTable';
|
||||
import { parseFilterStack, evaluateFilterStack } from '@/utils/searchQuery';
|
||||
import { UnifiedNodeSelector } from '@/components/shared/UnifiedNodeSelector';
|
||||
import { DashboardFilter } from './DashboardFilter';
|
||||
|
|
@ -926,163 +925,157 @@ export function Dashboard(props: DashboardProps) {
|
|||
{/* Table View */}
|
||||
<Show when={connected() && initialDataReceived() && filteredGuests().length > 0}>
|
||||
<ComponentErrorBoundary name="Guest Table">
|
||||
<Card padding="none" class="mb-4 overflow-hidden">
|
||||
<ScrollableTable minWidth="600px">
|
||||
<table class="w-full min-w-[600px] table-fixed 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 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 w-auto"
|
||||
onClick={() => handleSort('name')}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={`Sort by name ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''}`}
|
||||
>
|
||||
Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[5%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('type')}
|
||||
title="Type"
|
||||
>
|
||||
<span class="hidden xl:inline">Type</span>
|
||||
<span class="xl:hidden" aria-label="Type">Typ</span>{' '}
|
||||
{sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden lg:table-cell px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[5%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('vmid')}
|
||||
title="VM/Container ID"
|
||||
>
|
||||
<span class="hidden xl:inline">VMID</span>
|
||||
<span class="xl:hidden" aria-label="VM ID">ID</span>{' '}
|
||||
{sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden sm:table-cell px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('uptime')}
|
||||
title="Uptime"
|
||||
>
|
||||
<span class="hidden lg:inline">Uptime</span>
|
||||
<span class="lg:hidden" aria-label="Uptime">Up</span>{' '}
|
||||
{sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('memory')}
|
||||
title="Memory"
|
||||
>
|
||||
<span class="hidden lg:inline">Memory</span>
|
||||
<span class="lg:hidden" aria-label="Memory">Mem</span>{' '}
|
||||
{sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden sm:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
Disk {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('diskRead')}
|
||||
title="Disk Read"
|
||||
>
|
||||
<span class="hidden lg:inline">Disk Read</span>
|
||||
<span class="lg:hidden" aria-label="Disk Read">D Rd</span>{' '}
|
||||
{sortKey() === 'diskRead' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('diskWrite')}
|
||||
title="Disk Write"
|
||||
>
|
||||
<span class="hidden lg:inline">Disk Write</span>
|
||||
<span class="lg:hidden" aria-label="Disk Write">D Wr</span>{' '}
|
||||
{sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('networkIn')}
|
||||
title="Network In"
|
||||
>
|
||||
<span class="hidden lg:inline">Net In</span>
|
||||
<span class="lg:hidden" aria-label="Network In">N In</span>{' '}
|
||||
{sortKey() === 'networkIn' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
onClick={() => handleSort('networkOut')}
|
||||
title="Network Out"
|
||||
>
|
||||
<span class="hidden lg:inline">Net Out</span>
|
||||
<span class="lg:hidden" aria-label="Network Out">N Out</span>{' '}
|
||||
{sortKey() === 'networkOut' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<For
|
||||
each={Object.entries(groupedGuests()).sort(([instanceIdA], [instanceIdB]) => {
|
||||
// Sort by friendly node name first, falling back to instance ID for stability
|
||||
const nodeA = nodeByInstance()[instanceIdA];
|
||||
const nodeB = nodeByInstance()[instanceIdB];
|
||||
const labelA = nodeA ? getNodeDisplayName(nodeA) : instanceIdA;
|
||||
const labelB = nodeB ? getNodeDisplayName(nodeB) : instanceIdB;
|
||||
const nameCompare = labelA.localeCompare(labelB);
|
||||
if (nameCompare !== 0) return nameCompare;
|
||||
// If labels match (unlikely), fall back to the instance IDs
|
||||
return instanceIdA.localeCompare(instanceIdB);
|
||||
})}
|
||||
fallback={<></>}
|
||||
>
|
||||
{([instanceId, guests]) => {
|
||||
const node = nodeByInstance()[instanceId];
|
||||
<Card padding="none" class="mb-4 overflow-hidden bg-white dark:bg-gray-800">
|
||||
{/* Desktop Header - Hidden on mobile/tablet, visible on xl+ */}
|
||||
<div class="flex md:grid md:grid-cols-[minmax(150px,1fr)_60px_60px_80px_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)] xl:grid-cols-[minmax(200px,1fr)_80px_80px_100px_minmax(150px,1.5fr)_minmax(150px,1.5fr)_minmax(150px,1.5fr)_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)] border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 text-[11px] sm:text-xs font-medium uppercase tracking-wider sticky top-0 z-20">
|
||||
{/* Name Header - Sticky on mobile */}
|
||||
<div
|
||||
class="pl-4 pr-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center sticky left-0 z-30 bg-gray-50 dark:bg-gray-700/50 w-[160px] sm:w-[200px] md:w-full flex-shrink-0 border-r md:border-r-0 border-gray-200 dark:border-gray-700"
|
||||
onClick={() => handleSort('name')}
|
||||
>
|
||||
Name
|
||||
{sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={node && groupingMode() === 'grouped'}>
|
||||
<NodeGroupHeader node={node!} colspan={11} />
|
||||
</Show>
|
||||
<For each={guests} fallback={<></>}>
|
||||
{(guest) => {
|
||||
// Match backend ID generation logic: stable format is "instance-vmid"
|
||||
const guestId =
|
||||
guest.id || `${guest.instance}-${guest.vmid}`;
|
||||
const metadata =
|
||||
guestMetadata()[guestId] ||
|
||||
guestMetadata()[`${guest.node}-${guest.vmid}`];
|
||||
const parentNode = node ?? resolveParentNode(guest);
|
||||
const parentNodeOnline = parentNode ? isNodeOnline(parentNode) : true;
|
||||
return (
|
||||
<ComponentErrorBoundary name="GuestRow">
|
||||
<GuestRow
|
||||
guest={guest}
|
||||
alertStyles={getAlertStyles(guestId, activeAlerts, alertsEnabled())}
|
||||
customUrl={metadata?.customUrl}
|
||||
onTagClick={handleTagClick}
|
||||
activeSearch={search()}
|
||||
parentNodeOnline={parentNodeOnline}
|
||||
onCustomUrlUpdate={handleCustomUrlUpdate}
|
||||
isGroupedView={groupingMode() === 'grouped'}
|
||||
/>
|
||||
</ComponentErrorBoundary>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</ScrollableTable>
|
||||
{/* Metrics Headers - Scrollable on mobile */}
|
||||
<div class="flex-1 overflow-hidden md:contents">
|
||||
<div class="flex md:contents min-w-full md:min-w-0">
|
||||
<div
|
||||
class="flex-1 px-0.5 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start w-auto min-w-[30px] md:w-full"
|
||||
onClick={() => handleSort('type')}
|
||||
>
|
||||
<span class="md:hidden" title="Type">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Type</span>
|
||||
{sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 px-0.5 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start w-auto min-w-[30px] md:w-full"
|
||||
onClick={() => handleSort('vmid')}
|
||||
>
|
||||
<span class="md:hidden" title="ID">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">VMID</span>
|
||||
{sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 px-0.5 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start w-auto min-w-[40px] md:w-full"
|
||||
onClick={() => handleSort('uptime')}
|
||||
>
|
||||
<span class="md:hidden" title="Uptime">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Uptime</span>
|
||||
{sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 px-0.5 py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start w-auto min-w-[35px] md:w-full"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
<span class="md:hidden" title="CPU">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">CPU</span>
|
||||
{sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 px-0.5 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start w-auto min-w-[35px] md:w-full"
|
||||
onClick={() => handleSort('memory')}
|
||||
>
|
||||
<span class="md:hidden" title="Memory">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Memory</span>
|
||||
{sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 px-0.5 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start w-auto min-w-[35px] md:w-full"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
<span class="md:hidden" title="Disk">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Disk</span>
|
||||
{sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="hidden xl:flex px-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 items-center w-full"
|
||||
onClick={() => handleSort('diskRead')}
|
||||
>
|
||||
D Read {sortKey() === 'diskRead' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="hidden xl:flex px-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 items-center w-full"
|
||||
onClick={() => handleSort('diskWrite')}
|
||||
>
|
||||
D Write {sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="hidden xl:flex px-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 items-center w-full"
|
||||
onClick={() => handleSort('networkIn')}
|
||||
>
|
||||
Net In {sortKey() === 'networkIn' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="hidden xl:flex px-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 items-center w-full"
|
||||
onClick={() => handleSort('networkOut')}
|
||||
>
|
||||
Net Out {sortKey() === 'networkOut' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guest List */}
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<For
|
||||
each={Object.entries(groupedGuests()).sort(([instanceIdA], [instanceIdB]) => {
|
||||
const nodeA = nodeByInstance()[instanceIdA];
|
||||
const nodeB = nodeByInstance()[instanceIdB];
|
||||
const labelA = nodeA ? getNodeDisplayName(nodeA) : instanceIdA;
|
||||
const labelB = nodeB ? getNodeDisplayName(nodeB) : instanceIdB;
|
||||
return labelA.localeCompare(labelB) || instanceIdA.localeCompare(instanceIdB);
|
||||
})}
|
||||
fallback={<></>}
|
||||
>
|
||||
{([instanceId, guests]) => {
|
||||
const node = nodeByInstance()[instanceId];
|
||||
return (
|
||||
<>
|
||||
<Show when={node && groupingMode() === 'grouped'}>
|
||||
<NodeGroupHeader node={node!} />
|
||||
</Show>
|
||||
<For each={guests} fallback={<></>}>
|
||||
{(guest) => {
|
||||
const guestId = guest.id || `${guest.instance}-${guest.vmid}`;
|
||||
const metadata =
|
||||
guestMetadata()[guestId] ||
|
||||
guestMetadata()[`${guest.node}-${guest.vmid}`];
|
||||
const parentNode = node ?? resolveParentNode(guest);
|
||||
const parentNodeOnline = parentNode ? isNodeOnline(parentNode) : true;
|
||||
return (
|
||||
<ComponentErrorBoundary name="GuestRow">
|
||||
<GuestRow
|
||||
guest={guest}
|
||||
alertStyles={getAlertStyles(guestId, activeAlerts, alertsEnabled())}
|
||||
customUrl={metadata?.customUrl}
|
||||
onTagClick={handleTagClick}
|
||||
activeSearch={search()}
|
||||
parentNodeOnline={parentNodeOnline}
|
||||
onCustomUrlUpdate={handleCustomUrlUpdate}
|
||||
isGroupedView={groupingMode() === 'grouped'}
|
||||
/>
|
||||
</ComponentErrorBoundary>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Card>
|
||||
</ComponentErrorBoundary>
|
||||
</Show>
|
||||
|
|
|
|||
200
frontend-modern/src/components/Dashboard/GuestDrawer.tsx
Normal file
200
frontend-modern/src/components/Dashboard/GuestDrawer.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import { Component, Show, For } from 'solid-js';
|
||||
import { VM, Container } from '@/types/api';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { DiskList } from './DiskList';
|
||||
import { IOMetric } from './IOMetric';
|
||||
|
||||
type Guest = VM | Container;
|
||||
|
||||
interface GuestDrawerProps {
|
||||
guest: Guest;
|
||||
metricsKey: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const GuestDrawer: Component<GuestDrawerProps> = (props) => {
|
||||
const isVM = (guest: Guest): guest is VM => {
|
||||
return guest.type === 'qemu';
|
||||
};
|
||||
|
||||
const hasOsInfo = () => {
|
||||
if (!isVM(props.guest)) return false;
|
||||
return (props.guest.osInfo?.name?.length ?? 0) > 0 || (props.guest.osInfo?.version?.length ?? 0) > 0;
|
||||
};
|
||||
|
||||
const osName = () => {
|
||||
if (!isVM(props.guest)) return '';
|
||||
return props.guest.osInfo?.name || '';
|
||||
};
|
||||
|
||||
const osVersion = () => {
|
||||
if (!isVM(props.guest)) return '';
|
||||
return props.guest.osInfo?.version || '';
|
||||
};
|
||||
|
||||
const hasAgentInfo = () => {
|
||||
if (!isVM(props.guest)) return false;
|
||||
return !!props.guest.agentVersion;
|
||||
};
|
||||
|
||||
const agentVersion = () => {
|
||||
if (!isVM(props.guest)) return '';
|
||||
return props.guest.agentVersion || '';
|
||||
};
|
||||
|
||||
const ipAddresses = () => {
|
||||
if (!isVM(props.guest)) return [];
|
||||
return props.guest.ipAddresses || [];
|
||||
};
|
||||
|
||||
const memoryExtraLines = () => {
|
||||
if (!props.guest.memory) return undefined;
|
||||
const lines: string[] = [];
|
||||
const total = props.guest.memory.total ?? 0;
|
||||
if (
|
||||
props.guest.memory.balloon &&
|
||||
props.guest.memory.balloon > 0 &&
|
||||
props.guest.memory.balloon !== total
|
||||
) {
|
||||
lines.push(`Balloon: ${formatBytes(props.guest.memory.balloon, 0)}`);
|
||||
}
|
||||
if (props.guest.memory.swapTotal && props.guest.memory.swapTotal > 0) {
|
||||
const swapUsed = props.guest.memory.swapUsed ?? 0;
|
||||
lines.push(`Swap: ${formatBytes(swapUsed, 0)} / ${formatBytes(props.guest.memory.swapTotal, 0)}`);
|
||||
}
|
||||
return lines.length > 0 ? lines : undefined;
|
||||
};
|
||||
|
||||
const hasFilesystemDetails = () => {
|
||||
if (!props.guest.disks) return false;
|
||||
return props.guest.disks.length > 0;
|
||||
};
|
||||
|
||||
const networkInterfaces = () => {
|
||||
if (!isVM(props.guest)) return [];
|
||||
return props.guest.networkInterfaces || [];
|
||||
};
|
||||
|
||||
const hasNetworkInterfaces = () => {
|
||||
return networkInterfaces().length > 0;
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex items-start gap-4">
|
||||
{/* Left Column: Guest Overview */}
|
||||
<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 text-gray-700 dark:text-gray-200">Guest Overview</div>
|
||||
<div class="mt-1 space-y-1">
|
||||
<Show when={hasOsInfo()}>
|
||||
<div class="flex flex-wrap items-center gap-1 text-gray-600 dark:text-gray-300">
|
||||
<Show when={osName().length > 0}>
|
||||
<span class="font-medium" title={osName()}>{osName()}</span>
|
||||
</Show>
|
||||
<Show when={osName().length > 0 && osVersion().length > 0}>
|
||||
<span class="text-gray-400 dark:text-gray-500">•</span>
|
||||
</Show>
|
||||
<Show when={osVersion().length > 0}>
|
||||
<span title={osVersion()}>{osVersion()}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={hasAgentInfo()}>
|
||||
<div class="flex flex-wrap items-center gap-1 text-[11px] text-gray-500 dark:text-gray-400">
|
||||
<span class="uppercase tracking-wide text-[10px] text-gray-400 dark:text-gray-500">
|
||||
Agent
|
||||
</span>
|
||||
<span title={`QEMU guest agent ${agentVersion()}`}>
|
||||
QEMU guest agent {agentVersion()}
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={ipAddresses().length > 0}>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<For each={ipAddresses()}>
|
||||
{(ip) => (
|
||||
<span
|
||||
class="max-w-full truncate rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
|
||||
title={ip}
|
||||
>
|
||||
{ip}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle Column: Memory Details */}
|
||||
<Show when={memoryExtraLines() && memoryExtraLines()!.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 text-gray-700 dark:text-gray-200">Memory</div>
|
||||
<div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
|
||||
<For each={memoryExtraLines()!}>{(line) => <div>{line}</div>}</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Right Column: Filesystems */}
|
||||
<Show when={hasFilesystemDetails() && props.guest.disks && props.guest.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 text-gray-700 dark:text-gray-200">Filesystems</div>
|
||||
<div class="mt-1 text-gray-600 dark:text-gray-300">
|
||||
<DiskList
|
||||
disks={props.guest.disks || []}
|
||||
diskStatusReason={isVM(props.guest) ? props.guest.diskStatusReason : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Far Right Column: Network Interfaces */}
|
||||
<Show when={hasNetworkInterfaces()}>
|
||||
<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 text-gray-700 dark:text-gray-200">Network Interfaces</div>
|
||||
<div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Row charts show current rate; totals below are cumulative since boot.</div>
|
||||
<div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
|
||||
<For each={networkInterfaces()}>
|
||||
{(iface) => {
|
||||
const addresses = iface.addresses ?? [];
|
||||
const hasTraffic = (iface.rxBytes ?? 0) > 0 || (iface.txBytes ?? 0) > 0;
|
||||
return (
|
||||
<div class="space-y-1 rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 font-medium text-gray-700 dark:text-gray-200">
|
||||
<span class="truncate" title={iface.name}>{iface.name || 'interface'}</span>
|
||||
<Show when={iface.mac}>
|
||||
<span class="text-[10px] text-gray-400 dark:text-gray-500" title={iface.mac}>
|
||||
{iface.mac}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={addresses.length > 0}>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<For each={addresses}>
|
||||
{(ip) => (
|
||||
<span
|
||||
class="max-w-full truncate rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
|
||||
title={ip}
|
||||
>
|
||||
{ip}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={hasTraffic}>
|
||||
<div class="flex items-center gap-3 text-[10px] text-gray-500 dark:text-gray-400">
|
||||
<span>Total RX {formatBytes(iface.rxBytes ?? 0)}</span>
|
||||
<span>Total TX {formatBytes(iface.txBytes ?? 0)}</span>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import { createMemo, createSignal, createEffect, Show, For } from 'solid-js';
|
||||
import { GuestDrawer } from './GuestDrawer';
|
||||
import { createMemo, createSignal, createEffect, Show } from 'solid-js';
|
||||
import type { VM, Container } from '@/types/api';
|
||||
import { formatBytes, formatPercent, formatUptime } from '@/utils/format';
|
||||
import { MetricBar } from './MetricBar';
|
||||
import { IOMetric } from './IOMetric';
|
||||
import { TagBadges } from './TagBadges';
|
||||
import { DiskList } from './DiskList';
|
||||
|
||||
import { StatusDot } from '@/components/shared/StatusDot';
|
||||
import { getGuestPowerIndicator, isGuestRunning } from '@/utils/status';
|
||||
import { GuestMetadataAPI } from '@/api/guestMetadata';
|
||||
|
|
@ -381,7 +382,7 @@ export function GuestRow(props: GuestRowProps) {
|
|||
return '#9ca3af';
|
||||
});
|
||||
|
||||
const drawerDisabled = createMemo(() => !isRunning());
|
||||
|
||||
|
||||
// Get row styling - include alert styles if present
|
||||
const rowClass = createMemo(() => {
|
||||
|
|
@ -391,7 +392,7 @@ export function GuestRow(props: GuestRowProps) {
|
|||
? props.alertStyles?.severity === 'critical'
|
||||
? 'bg-red-50 dark:bg-red-950/30'
|
||||
: 'bg-yellow-50 dark:bg-yellow-950/20'
|
||||
: '';
|
||||
: 'bg-white dark:bg-gray-800';
|
||||
const defaultHover = hasUnacknowledgedAlert()
|
||||
? ''
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-700/30';
|
||||
|
|
@ -403,13 +404,7 @@ export function GuestRow(props: GuestRowProps) {
|
|||
return `${base} ${hover} ${defaultHover} ${alertBg} ${stoppedDimming} ${clickable} ${expanded}`;
|
||||
});
|
||||
|
||||
// Get first cell styling
|
||||
const firstCellClass = createMemo(() => {
|
||||
const base =
|
||||
'py-0.5 pr-2 whitespace-nowrap relative w-auto';
|
||||
const indent = props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT;
|
||||
return `${base} ${indent}`;
|
||||
});
|
||||
|
||||
|
||||
// Get row styles including box-shadow for alert border
|
||||
const rowStyle = createMemo(() => {
|
||||
|
|
@ -423,10 +418,15 @@ export function GuestRow(props: GuestRowProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<tr class={rowClass()} style={rowStyle()} onClick={toggleDrawer} aria-expanded={drawerOpen()}>
|
||||
{/* Name - Sticky column */}
|
||||
<td class={firstCellClass()}>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class={`${rowClass()} flex md:grid md:grid-cols-[minmax(150px,1fr)_60px_60px_80px_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)] xl:grid-cols-[minmax(200px,1fr)_80px_80px_100px_minmax(150px,1.5fr)_minmax(150px,1.5fr)_minmax(150px,1.5fr)_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)] items-center`}
|
||||
style={rowStyle()}
|
||||
onClick={toggleDrawer}
|
||||
aria-expanded={drawerOpen()}
|
||||
>
|
||||
{/* Name Section - Sticky on mobile */}
|
||||
<div class={`p-2 md:py-0 md:pl-4 md:pr-2 flex items-center sticky left-0 z-10 bg-inherit w-[160px] sm:w-[200px] md:w-full flex-shrink-0 border-r md:border-r-0 border-gray-100 dark:border-gray-700 ${props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT}`}>
|
||||
<div class="flex items-center gap-2 min-w-0 w-full">
|
||||
<div class="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<StatusDot
|
||||
variant={guestStatus().variant}
|
||||
|
|
@ -435,13 +435,12 @@ export function GuestRow(props: GuestRowProps) {
|
|||
size="xs"
|
||||
/>
|
||||
<div class="flex-1 min-w-0">
|
||||
{/* Name - show input when editing, otherwise show name with optional link */}
|
||||
<Show
|
||||
when={isEditingUrl()}
|
||||
fallback={
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<span
|
||||
class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-text select-none overflow-hidden text-ellipsis"
|
||||
class="text-xs font-medium text-gray-900 dark:text-gray-100 cursor-text select-none overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
style="cursor: text;"
|
||||
title={`${props.guest.name}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
|
||||
onClick={startEditingUrl}
|
||||
|
|
@ -528,9 +527,8 @@ export function GuestRow(props: GuestRowProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tag badges - hide when editing URL to save space */}
|
||||
<Show when={!isEditingUrl()}>
|
||||
<div class="flex" data-prevent-toggle onClick={(event) => event.stopPropagation()}>
|
||||
<div class="hidden md:flex" data-prevent-toggle onClick={(event) => event.stopPropagation()}>
|
||||
<TagBadges
|
||||
tags={Array.isArray(props.guest.tags) ? props.guest.tags : []}
|
||||
maxVisible={3}
|
||||
|
|
@ -549,276 +547,147 @@ export function GuestRow(props: GuestRowProps) {
|
|||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<td class="hidden lg:table-cell py-0.5 px-2 whitespace-nowrap w-[5%]">
|
||||
<div class="flex h-[24px] items-center">
|
||||
<span
|
||||
class={`inline-block px-1.5 py-0.5 text-xs font-medium rounded ${props.guest.type === 'qemu'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
|
||||
}`}
|
||||
>
|
||||
{isVM(props.guest) ? 'VM' : 'LXC'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* VMID */}
|
||||
<td class="hidden lg:table-cell py-0.5 px-1.5 whitespace-nowrap w-[5%] text-sm text-gray-600 dark:text-gray-400 align-middle">
|
||||
{props.guest.vmid}
|
||||
</td>
|
||||
|
||||
{/* Uptime */}
|
||||
<td
|
||||
class={`hidden sm:table-cell py-0.5 px-1.5 w-[8%] text-sm whitespace-nowrap align-middle ${props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<Show when={isRunning()} fallback="-">
|
||||
{formatUptime(props.guest.uptime)}
|
||||
</Show>
|
||||
</td>
|
||||
|
||||
{/* CPU */}
|
||||
<td class="py-0.5 px-2 w-[10%]">
|
||||
<Show when={isRunning()} fallback={<span class="text-sm text-gray-400">-</span>}>
|
||||
<MetricBar
|
||||
value={cpuPercent()}
|
||||
label={formatPercent(cpuPercent())}
|
||||
sublabel={
|
||||
props.guest.cpus
|
||||
? `${props.guest.cpus} ${props.guest.cpus === 1 ? 'core' : 'cores'}`
|
||||
: undefined
|
||||
}
|
||||
type="cpu"
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</Show>
|
||||
</td>
|
||||
|
||||
{/* Memory */}
|
||||
<td class="py-0.5 px-2 w-[10%]">
|
||||
<div title={memoryTooltip() ?? undefined}>
|
||||
<Show when={isRunning()} fallback={<span class="text-sm text-gray-400">-</span>}>
|
||||
<MetricBar
|
||||
value={memPercent()}
|
||||
label={formatPercent(memPercent())}
|
||||
sublabel={memoryUsageLabel()}
|
||||
type="memory"
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Disk – surface usage even if guest is currently stopped so users can see last reported values */}
|
||||
<td class="hidden sm:table-cell py-0.5 px-2 w-[10%]">
|
||||
<Show
|
||||
when={hasDiskUsage()}
|
||||
fallback={
|
||||
<span class="text-gray-400 text-sm cursor-help" title={getDiskStatusTooltip()}>
|
||||
-
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<MetricBar
|
||||
value={diskPercent()}
|
||||
label={formatPercent(diskPercent())}
|
||||
sublabel={
|
||||
props.guest.disk
|
||||
? `${formatBytes(props.guest.disk.used, 0)}/${formatBytes(props.guest.disk.total, 0)}`
|
||||
: undefined
|
||||
}
|
||||
type="disk"
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</Show>
|
||||
</td>
|
||||
|
||||
{/* Disk I/O */}
|
||||
<td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
|
||||
<div class="flex h-[24px] items-center">
|
||||
<IOMetric value={props.guest.diskRead} disabled={!isRunning()} />
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
|
||||
<div class="flex h-[24px] items-center">
|
||||
<IOMetric value={props.guest.diskWrite} disabled={!isRunning()} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Network I/O */}
|
||||
<td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
|
||||
<div class="flex h-[24px] items-center">
|
||||
<IOMetric value={props.guest.networkIn} disabled={!isRunning()} />
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
|
||||
<div class="flex h-[24px] items-center">
|
||||
<IOMetric value={props.guest.networkOut} disabled={!isRunning()} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={drawerOpen() && canShowDrawer()}>
|
||||
<tr
|
||||
class={`text-[11px] ${isRunning() && props.parentNodeOnline !== false
|
||||
? 'bg-gray-50/60 text-gray-600 dark:bg-gray-800/40 dark:text-gray-300'
|
||||
: 'bg-gray-100/70 text-gray-400 dark:bg-gray-900/30 dark:text-gray-500'
|
||||
}`}
|
||||
aria-hidden={!isRunning() || props.parentNodeOnline === false}
|
||||
>
|
||||
<td class="px-4 py-2" colSpan={11}>
|
||||
<div
|
||||
class={`flex flex-wrap gap-3 justify-start ${drawerDisabled() ? 'opacity-50 saturate-75 pointer-events-none' : ''
|
||||
}`}
|
||||
>
|
||||
<Show
|
||||
when={hasDrawerContent()}
|
||||
fallback={
|
||||
<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 text-gray-700 dark:text-gray-200">
|
||||
Guest details unavailable
|
||||
</div>
|
||||
<div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
|
||||
<Show
|
||||
when={isVM(props.guest)}
|
||||
fallback={
|
||||
<p>
|
||||
Start this container and ensure the Pulse user has sufficient Proxmox
|
||||
permissions to collect guest metrics.
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<p>{getDiskStatusTooltip()}</p>
|
||||
<p>
|
||||
Install and run the qemu-guest-agent inside this VM so Pulse can surface
|
||||
OS, network, and filesystem details.
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{/* Metrics Section - Scrollable on mobile */}
|
||||
<div class="flex-1 overflow-x-auto md:contents no-scrollbar">
|
||||
<div class="flex md:contents min-w-full md:min-w-0 divide-x md:divide-none divide-gray-100 dark:divide-gray-800">
|
||||
{/* Type */}
|
||||
<div class="flex-1 px-0.5 py-1 md:px-2 md:py-0 w-auto min-w-[30px] md:w-full flex justify-center md:justify-start items-center">
|
||||
<span
|
||||
class={`inline-block px-1.5 py-0.5 text-xs font-medium rounded ${props.guest.type === 'qemu'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
|
||||
}`}
|
||||
>
|
||||
<>
|
||||
<Show when={hasOsInfo() || hasAgentInfo() || ipAddresses().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 text-gray-700 dark:text-gray-200">Guest Overview</div>
|
||||
<div class="mt-1 space-y-1">
|
||||
<Show when={hasOsInfo()}>
|
||||
<div class="flex flex-wrap items-center gap-1 text-gray-600 dark:text-gray-300">
|
||||
<Show when={osName().length > 0}>
|
||||
<span class="font-medium" title={osName()}>{osName()}</span>
|
||||
</Show>
|
||||
<Show when={osName().length > 0 && osVersion().length > 0}>
|
||||
<span class="text-gray-400 dark:text-gray-500">•</span>
|
||||
</Show>
|
||||
<Show when={osVersion().length > 0}>
|
||||
<span title={osVersion()}>{osVersion()}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={hasAgentInfo()}>
|
||||
<div class="flex flex-wrap items-center gap-1 text-[11px] text-gray-500 dark:text-gray-400">
|
||||
<span class="uppercase tracking-wide text-[10px] text-gray-400 dark:text-gray-500">
|
||||
Agent
|
||||
</span>
|
||||
<span title={`QEMU guest agent ${agentVersion()}`}>
|
||||
QEMU guest agent {agentVersion()}
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={ipAddresses().length > 0}>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<For each={ipAddresses()}>
|
||||
{(ip) => (
|
||||
<span
|
||||
class="max-w-full truncate rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
|
||||
title={ip}
|
||||
>
|
||||
{ip}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
{isVM(props.guest) ? 'VM' : 'LXC'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Show when={memoryExtraLines() && memoryExtraLines()!.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 text-gray-700 dark:text-gray-200">Memory</div>
|
||||
<div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
|
||||
<For each={memoryExtraLines()!}>{(line) => <div>{line}</div>}</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
{/* VMID */}
|
||||
<div class="flex-1 px-0.5 py-1 md:px-1.5 md:py-0 w-auto min-w-[30px] md:w-full flex justify-center md:justify-start items-center text-xs text-gray-600 dark:text-gray-400">
|
||||
{props.guest.vmid}
|
||||
</div>
|
||||
|
||||
<Show when={hasFilesystemDetails() && props.guest.disks && props.guest.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 text-gray-700 dark:text-gray-200">Filesystems</div>
|
||||
<div class="mt-1 text-gray-600 dark:text-gray-300">
|
||||
<DiskList
|
||||
disks={props.guest.disks || []}
|
||||
diskStatusReason={isVM(props.guest) ? props.guest.diskStatusReason : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
{/* Uptime */}
|
||||
<div class="flex-1 px-0.5 py-1 md:px-1.5 md:py-0 w-auto min-w-[40px] md:w-full flex justify-center md:justify-start items-center">
|
||||
<div class={`text-xs whitespace-nowrap ${props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
<Show when={isRunning()} fallback="-">
|
||||
<span class="md:hidden">{formatUptime(props.guest.uptime, true)}</span>
|
||||
<span class="hidden md:inline">{formatUptime(props.guest.uptime)}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={hasNetworkInterfaces()}>
|
||||
<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 text-gray-700 dark:text-gray-200">Network Interfaces</div>
|
||||
<div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Row charts show current rate; totals below are cumulative since boot.</div>
|
||||
<div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
|
||||
<For each={networkInterfaces()}>
|
||||
{(iface) => {
|
||||
const addresses = iface.addresses ?? [];
|
||||
const hasTraffic = (iface.rxBytes ?? 0) > 0 || (iface.txBytes ?? 0) > 0;
|
||||
return (
|
||||
<div class="space-y-1 rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 font-medium text-gray-700 dark:text-gray-200">
|
||||
<span class="truncate" title={iface.name}>{iface.name || 'interface'}</span>
|
||||
<Show when={iface.mac}>
|
||||
<span class="text-[10px] text-gray-400 dark:text-gray-500" title={iface.mac}>
|
||||
{iface.mac}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={addresses.length > 0}>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<For each={addresses}>
|
||||
{(ip) => (
|
||||
<span
|
||||
class="max-w-full truncate rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
|
||||
title={ip}
|
||||
>
|
||||
{ip}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={hasTraffic}>
|
||||
<div class="flex items-center gap-3 text-[10px] text-gray-500 dark:text-gray-400">
|
||||
<span>Total RX {formatBytes(iface.rxBytes ?? 0)}</span>
|
||||
<span>Total TX {formatBytes(iface.txBytes ?? 0)}</span>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</>
|
||||
{/* CPU */}
|
||||
<div class="flex-1 px-0.5 py-1 md:px-2 md:py-0 w-auto min-w-[35px] md:w-full flex justify-center items-center">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<div class={`md:hidden text-xs ${cpuPercent() >= 90 ? 'text-red-600 dark:text-red-400 font-bold' : cpuPercent() >= 80 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(cpuPercent())}
|
||||
</div>
|
||||
<div class="hidden md:block w-full">
|
||||
<MetricBar
|
||||
value={cpuPercent()}
|
||||
label={formatPercent(cpuPercent())}
|
||||
sublabel={
|
||||
props.guest.cpus
|
||||
? `${props.guest.cpus} ${props.guest.cpus === 1 ? 'core' : 'cores'}`
|
||||
: undefined
|
||||
}
|
||||
type="cpu"
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Memory */}
|
||||
<div class="flex-1 px-0.5 py-1 md:px-2 md:py-0 w-auto min-w-[35px] md:w-full flex justify-center items-center">
|
||||
<div title={memoryTooltip() ?? undefined} class="w-full text-center xl:text-left">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<div class={`md:hidden text-xs ${memPercent() >= 85 ? 'text-red-600 dark:text-red-400 font-bold' : memPercent() >= 75 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(memPercent())}
|
||||
</div>
|
||||
<div class="hidden md:block w-full">
|
||||
<MetricBar
|
||||
value={memPercent()}
|
||||
label={formatPercent(memPercent())}
|
||||
sublabel={memoryUsageLabel()}
|
||||
type="memory"
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disk */}
|
||||
<div class="flex-1 px-0.5 py-1 md:px-2 md:py-0 w-auto min-w-[35px] md:w-full flex justify-center items-center">
|
||||
<Show
|
||||
when={hasDiskUsage()}
|
||||
fallback={
|
||||
<span class="text-xs text-gray-400 cursor-help" title={getDiskStatusTooltip()}>
|
||||
-
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<div class={`md:hidden text-xs ${diskPercent() >= 90 ? 'text-red-600 dark:text-red-400 font-bold' : diskPercent() >= 80 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(diskPercent())}
|
||||
</div>
|
||||
<div class="hidden md:block w-full">
|
||||
<MetricBar
|
||||
value={diskPercent()}
|
||||
label={formatPercent(diskPercent())}
|
||||
sublabel={
|
||||
props.guest.disk
|
||||
? `${formatBytes(props.guest.disk.used, 0)}/${formatBytes(props.guest.disk.total, 0)}`
|
||||
: undefined
|
||||
}
|
||||
type="disk"
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Disk I/O */}
|
||||
<div class="hidden xl:flex px-2 py-1 xl:px-2 xl:py-0 w-auto min-w-[60px] xl:w-full justify-start items-center">
|
||||
<div class="flex h-[24px] items-center w-full justify-start">
|
||||
<IOMetric value={props.guest.diskRead} disabled={!isRunning()} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden xl:flex px-2 py-1 xl:px-2 xl:py-0 w-auto min-w-[60px] xl:w-full justify-start items-center">
|
||||
<div class="flex h-[24px] items-center w-full justify-start">
|
||||
<IOMetric value={props.guest.diskWrite} disabled={!isRunning()} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Network I/O */}
|
||||
<div class="hidden xl:flex px-2 py-1 xl:px-2 xl:py-0 w-auto min-w-[60px] xl:w-full justify-start items-center">
|
||||
<div class="flex h-[24px] items-center w-full justify-start">
|
||||
<IOMetric value={props.guest.networkIn} disabled={!isRunning()} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden xl:flex px-2 py-1 xl:px-2 xl:py-0 w-auto min-w-[60px] xl:w-full justify-start items-center">
|
||||
<div class="flex h-[24px] items-center w-full justify-start">
|
||||
<IOMetric value={props.guest.networkOut} disabled={!isRunning()} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={drawerOpen() && canShowDrawer()}>
|
||||
<div class="bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="p-4">
|
||||
<GuestDrawer
|
||||
guest={props.guest}
|
||||
metricsKey={metricsKey()}
|
||||
onClose={() => setCurrentlyExpandedGuestId(null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@ export function IOMetric(props: IOMetricProps) {
|
|||
return (
|
||||
<Show
|
||||
when={!props.disabled}
|
||||
fallback={<div class="min-h-[24px] flex items-center text-sm text-gray-400">-</div>}
|
||||
fallback={<div class="min-h-[14px] flex items-center text-xs text-gray-400">-</div>}
|
||||
>
|
||||
<div class={`min-h-[24px] text-sm font-mono ${colorClass()} flex items-center`}>
|
||||
<div class={`min-h-[14px] text-xs font-mono ${colorClass()} flex items-center`}>
|
||||
{formatSpeed(currentValue(), 0)}
|
||||
</div>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -67,28 +67,15 @@ export function MetricBar(props: MetricBarProps) {
|
|||
when={viewMode() === 'sparklines' && props.resourceId}
|
||||
fallback={
|
||||
// Original progress bar mode
|
||||
<div class="metric-text w-full h-6 flex items-center">
|
||||
{/* On very small screens (< lg), show compact percentage with color indicator */}
|
||||
<div class="lg:hidden relative w-full h-3.5 flex items-center justify-center rounded overflow-hidden bg-gray-100 dark:bg-gray-700">
|
||||
{/* Slim color indicator bar */}
|
||||
<div class={`absolute bottom-0 left-0 h-1 w-full ${progressColorClass()}`} />
|
||||
<span class={`text-[10px] font-medium z-10 ${
|
||||
getColor() === 'red' ? 'text-red-700 dark:text-red-300' :
|
||||
getColor() === 'yellow' ? 'text-yellow-700 dark:text-yellow-300' :
|
||||
'text-gray-800 dark:text-gray-100'
|
||||
}`}>
|
||||
{props.label}
|
||||
</span>
|
||||
</div>
|
||||
{/* On larger screens (>= lg), show full progress bar */}
|
||||
<div class="hidden lg:block relative w-full h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
|
||||
<div class="metric-text w-full h-4 flex items-center">
|
||||
<div class="relative w-full h-full overflow-hidden bg-gray-200 dark:bg-gray-600 rounded">
|
||||
<div class={`absolute top-0 left-0 h-full ${progressColorClass()}`} style={{ width: `${width()}%` }} />
|
||||
<span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
|
||||
<span class="flex items-center gap-1 whitespace-nowrap px-0.5">
|
||||
<span>{props.label}</span>
|
||||
<Show when={props.sublabel}>
|
||||
{(sublabel) => (
|
||||
<span class="metric-sublabel hidden xl:inline font-normal">
|
||||
<span class="metric-sublabel font-normal">
|
||||
({sublabel()})
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -141,12 +141,12 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
|
||||
return (
|
||||
<Card padding="none" class="mb-4 overflow-hidden">
|
||||
<ScrollableTable minWidth="720px" persistKey="docker-host-summary">
|
||||
<ScrollableTable minWidth="300px" persistKey="docker-host-summary">
|
||||
<table class="w-full table-fixed border-collapse sm:whitespace-nowrap">
|
||||
<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-3 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
|
||||
class="pl-3 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[35%] md:w-[18%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
|
||||
onClick={() => handleSort('name')}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
|
||||
tabIndex={0}
|
||||
|
|
@ -155,47 +155,47 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
>
|
||||
Host {renderSortIndicator('name')}
|
||||
</th>
|
||||
<th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[7%] whitespace-nowrap">
|
||||
<th class="px-0.5 md:px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] md:w-[6%] whitespace-nowrap">
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
class="px-0.5 md:px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] md:w-[12%] min-w-[35px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
CPU {renderSortIndicator('cpu')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
class="px-0.5 md:px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] md:w-[12%] min-w-[35px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('memory')}
|
||||
>
|
||||
Memory {renderSortIndicator('memory')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
class="px-0.5 md:px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] md:w-[12%] min-w-[35px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
Disk {renderSortIndicator('disk')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[11%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
class="px-0.5 md:px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] md:w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('running')}
|
||||
>
|
||||
Containers {renderSortIndicator('running')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[9%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap sm:table-cell"
|
||||
class="hidden px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider md:w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap sm:table-cell"
|
||||
onClick={() => handleSort('uptime')}
|
||||
>
|
||||
Uptime {renderSortIndicator('uptime')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[12%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap sm:table-cell"
|
||||
class="hidden px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider md:w-[12%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap sm:table-cell"
|
||||
onClick={() => handleSort('lastSeen')}
|
||||
>
|
||||
Last Update {renderSortIndicator('lastSeen')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[9%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap sm:table-cell"
|
||||
class="hidden px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider md:w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap sm:table-cell"
|
||||
onClick={() => handleSort('agent')}
|
||||
>
|
||||
Agent {renderSortIndicator('agent')}
|
||||
|
|
@ -322,44 +322,59 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<td class="px-0.5 md:px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full w-full max-w-[180px] whitespace-nowrap">
|
||||
{renderDockerStatusBadge(summary.host.status)}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<td class="px-0.5 md:px-2 py-1 align-middle">
|
||||
<Show when={online} fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}>
|
||||
<MetricBar
|
||||
value={summary.cpuPercent}
|
||||
label={formatPercent(summary.cpuPercent)}
|
||||
type="cpu"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
<div class={`md:hidden text-xs text-center ${summary.cpuPercent >= 90 ? 'text-red-600 dark:text-red-400 font-bold' : summary.cpuPercent >= 80 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(summary.cpuPercent)}
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<MetricBar
|
||||
value={summary.cpuPercent}
|
||||
label={formatPercent(summary.cpuPercent)}
|
||||
type="cpu"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<td class="px-0.5 md:px-2 py-1 align-middle">
|
||||
<Show when={online} fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}>
|
||||
<MetricBar
|
||||
value={summary.memoryPercent}
|
||||
label={formatPercent(summary.memoryPercent)}
|
||||
sublabel={summary.memoryLabel}
|
||||
type="memory"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
<div class={`md:hidden text-xs text-center ${summary.memoryPercent >= 85 ? 'text-red-600 dark:text-red-400 font-bold' : summary.memoryPercent >= 75 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(summary.memoryPercent)}
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<MetricBar
|
||||
value={summary.memoryPercent}
|
||||
label={formatPercent(summary.memoryPercent)}
|
||||
sublabel={summary.memoryLabel}
|
||||
type="memory"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<td class="px-0.5 md:px-2 py-1 align-middle">
|
||||
<Show when={summary.diskLabel} fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}>
|
||||
<MetricBar
|
||||
value={summary.diskPercent}
|
||||
label={formatPercent(summary.diskPercent)}
|
||||
sublabel={summary.diskLabel}
|
||||
type="disk"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
<div class={`md:hidden text-xs text-center ${summary.diskPercent >= 90 ? 'text-red-600 dark:text-red-400 font-bold' : summary.diskPercent >= 80 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(summary.diskPercent)}
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<MetricBar
|
||||
value={summary.diskPercent}
|
||||
label={formatPercent(summary.diskPercent)}
|
||||
sublabel={summary.diskLabel}
|
||||
type="disk"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<td class="px-0.5 md:px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full whitespace-nowrap">
|
||||
<Show
|
||||
when={summary.totalCount > 0}
|
||||
|
|
@ -411,11 +426,10 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
? 'px-1.5 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 font-medium'
|
||||
: 'px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-medium'
|
||||
}
|
||||
title={`${
|
||||
agentOutdated
|
||||
? 'Agent is outdated on this host'
|
||||
: 'Agent is up to date'
|
||||
}${summary.host.intervalSeconds ? `\nReporting interval: ${summary.host.intervalSeconds}s` : ''}`}
|
||||
title={`${agentOutdated
|
||||
? 'Agent is outdated on this host'
|
||||
: 'Agent is up to date'
|
||||
}${summary.host.intervalSeconds ? `\nReporting interval: ${summary.host.intervalSeconds}s` : ''}`}
|
||||
>
|
||||
v{version()}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { MonitoringAPI } from '@/api/monitoring';
|
|||
import { SecurityAPI } from '@/api/security';
|
||||
import { notificationStore } from '@/stores/notifications';
|
||||
import type { SecurityStatus } from '@/types/config';
|
||||
import type { Host, HostLookupResponse, DockerHost } from '@/types/api';
|
||||
import type { HostLookupResponse } from '@/types/api';
|
||||
import type { APITokenRecord } from '@/api/security';
|
||||
import { HOST_AGENT_SCOPE, DOCKER_REPORT_SCOPE } from '@/constants/apiScopes';
|
||||
import { copyToClipboard } from '@/utils/clipboard';
|
||||
|
|
@ -252,8 +252,8 @@ export const UnifiedAgents: Component = () => {
|
|||
types: ('host' | 'docker')[];
|
||||
status: string;
|
||||
version?: string;
|
||||
lastSeen?: number | string;
|
||||
ip?: string;
|
||||
lastSeen?: number;
|
||||
isLegacy?: boolean;
|
||||
}>();
|
||||
|
||||
// Process Host Agents
|
||||
|
|
@ -267,7 +267,7 @@ export const UnifiedAgents: Component = () => {
|
|||
status: h.status || 'unknown',
|
||||
version: h.agentVersion,
|
||||
lastSeen: h.lastSeen,
|
||||
ip: h.ip
|
||||
isLegacy: h.isLegacy
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -280,7 +280,8 @@ export const UnifiedAgents: Component = () => {
|
|||
existing.types.push('docker');
|
||||
}
|
||||
// Update version/status if newer
|
||||
if (!existing.version && d.version) existing.version = d.version;
|
||||
if (!existing.version && d.agentVersion) existing.version = d.agentVersion;
|
||||
if (d.isLegacy) existing.isLegacy = true;
|
||||
} else {
|
||||
unified.set(key, {
|
||||
id: d.id,
|
||||
|
|
@ -288,8 +289,9 @@ export const UnifiedAgents: Component = () => {
|
|||
displayName: d.displayName,
|
||||
types: ['docker'],
|
||||
status: d.status || 'unknown',
|
||||
version: d.version || d.dockerVersion,
|
||||
version: d.agentVersion || d.dockerVersion,
|
||||
lastSeen: d.lastSeen,
|
||||
isLegacy: d.isLegacy,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -620,8 +622,8 @@ export const UnifiedAgents: Component = () => {
|
|||
<For each={agent.types}>
|
||||
{(type) => (
|
||||
<span class={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${type === 'host'
|
||||
? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
|
||||
: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
|
||||
: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
}`}>
|
||||
{type === 'host' ? 'Host' : 'Docker'}
|
||||
</span>
|
||||
|
|
@ -631,17 +633,22 @@ export const UnifiedAgents: Component = () => {
|
|||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm">
|
||||
<span class={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${connectedFromStatus(agent.status)
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
|
||||
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
|
||||
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
|
||||
}`}>
|
||||
{agent.status}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
{agent.version || '—'}
|
||||
<Show when={agent.isLegacy}>
|
||||
<span class="ml-2 inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-200" title="This agent is using an old version. Please update to the unified agent.">
|
||||
Legacy
|
||||
</span>
|
||||
</Show>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
{formatRelativeTime(agent.lastSeen)}
|
||||
{agent.lastSeen ? formatRelativeTime(agent.lastSeen) : '—'}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-right text-sm font-medium">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -800,7 +800,7 @@ const Storage: Component = () => {
|
|||
<>
|
||||
{/* Group Header */}
|
||||
<Show when={viewMode() === 'node' && node}>
|
||||
{(validNode) => <NodeGroupHeader node={validNode()} colspan={9} />}
|
||||
{(validNode) => <NodeGroupHeader node={validNode()} colspan={9} renderAs="tr" />}
|
||||
</Show>
|
||||
|
||||
{/* Storage Rows */}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ import { getNodeStatusIndicator } from '@/utils/status';
|
|||
|
||||
interface NodeGroupHeaderProps {
|
||||
node: Node;
|
||||
colspan: number;
|
||||
colspan?: number;
|
||||
renderAs?: 'tr' | 'div';
|
||||
}
|
||||
|
||||
export const NodeGroupHeader: Component<NodeGroupHeaderProps> = (props) => {
|
||||
|
|
@ -16,48 +17,62 @@ export const NodeGroupHeader: Component<NodeGroupHeaderProps> = (props) => {
|
|||
const displayName = () => getNodeDisplayName(props.node);
|
||||
const showActualName = () => hasAlternateDisplayName(props.node);
|
||||
|
||||
return (
|
||||
<tr class="bg-gray-50 dark:bg-gray-900/40">
|
||||
<td
|
||||
colspan={props.colspan}
|
||||
class="py-1 pr-2 pl-4 text-[12px] sm:text-sm font-semibold text-slate-700 dark:text-slate-100"
|
||||
const InnerContent = () => (
|
||||
<div
|
||||
class={`flex flex-wrap items-center gap-3 ${isOnline() ? '' : 'opacity-60'}`}
|
||||
title={nodeStatus().label}
|
||||
>
|
||||
<StatusDot
|
||||
variant={nodeStatus().variant}
|
||||
title={nodeStatus().label}
|
||||
ariaLabel={nodeStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<a
|
||||
href={nodeUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="transition-colors duration-150 hover:text-sky-600 dark:hover:text-sky-400"
|
||||
title={`Open ${props.node.name} web interface`}
|
||||
>
|
||||
<div
|
||||
class={`flex flex-wrap items-center gap-3 ${isOnline() ? '' : 'opacity-60'}`}
|
||||
title={nodeStatus().label}
|
||||
>
|
||||
<StatusDot
|
||||
variant={nodeStatus().variant}
|
||||
title={nodeStatus().label}
|
||||
ariaLabel={nodeStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<a
|
||||
href={nodeUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="transition-colors duration-150 hover:text-sky-600 dark:hover:text-sky-400"
|
||||
title={`Open ${props.node.name} web interface`}
|
||||
>
|
||||
{displayName()}
|
||||
</a>
|
||||
<Show when={showActualName()}>
|
||||
<span class="text-[10px] text-slate-500 dark:text-slate-400">({props.node.name})</span>
|
||||
</Show>
|
||||
{displayName()}
|
||||
</a>
|
||||
<Show when={showActualName()}>
|
||||
<span class="text-[10px] text-slate-500 dark:text-slate-400">({props.node.name})</span>
|
||||
</Show>
|
||||
|
||||
<Show when={props.node.isClusterMember !== undefined}>
|
||||
<span
|
||||
class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${
|
||||
props.node.isClusterMember
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
: 'bg-slate-200 text-slate-600 dark:bg-slate-700/60 dark:text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{props.node.isClusterMember ? props.node.clusterName : 'Standalone'}
|
||||
</span>
|
||||
</Show>
|
||||
<Show when={props.node.isClusterMember !== undefined}>
|
||||
<span
|
||||
class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${props.node.isClusterMember
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
: 'bg-slate-200 text-slate-600 dark:bg-slate-700/60 dark:text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{props.node.isClusterMember ? props.node.clusterName : 'Standalone'}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Show
|
||||
when={props.renderAs === 'tr'}
|
||||
fallback={
|
||||
<div class="bg-gray-50 dark:bg-gray-900/40 w-full">
|
||||
<div class="py-1 pr-2 pl-4 text-[12px] sm:text-sm font-semibold text-slate-700 dark:text-slate-100">
|
||||
<InnerContent />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
>
|
||||
<tr class="bg-gray-50 dark:bg-gray-900/40">
|
||||
<td
|
||||
colspan={props.colspan}
|
||||
class="py-1 pr-2 pl-4 text-[12px] sm:text-sm font-semibold text-slate-700 dark:text-slate-100"
|
||||
>
|
||||
<InnerContent />
|
||||
</td>
|
||||
</tr>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -349,6 +349,24 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
});
|
||||
});
|
||||
|
||||
const gridTemplate = createMemo(() => {
|
||||
const parts = ['minmax(90px, 1.5fr)']; // Name
|
||||
parts.push('minmax(45px, 80px)'); // Uptime
|
||||
parts.push('minmax(55px, 1.5fr)'); // CPU
|
||||
parts.push('minmax(55px, 1.5fr)'); // Memory
|
||||
parts.push('minmax(55px, 1.5fr)'); // Disk
|
||||
|
||||
if (hasAnyTemperatureData()) {
|
||||
parts.push('minmax(45px, 65px)'); // Temp
|
||||
}
|
||||
|
||||
countColumns().forEach(() => {
|
||||
parts.push('minmax(40px, 85px)'); // Counts
|
||||
});
|
||||
|
||||
return parts.join(' ');
|
||||
});
|
||||
|
||||
// Don't return null - let the table render even if empty
|
||||
// This prevents the table from disappearing on refresh while data loads
|
||||
|
||||
|
|
@ -356,186 +374,234 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
<>
|
||||
<Card padding="none" class="mb-4 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full table-fixed 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-3 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
|
||||
onClick={() => handleSort('name')}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={`Sort by name ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''
|
||||
}`}
|
||||
{/* Header */}
|
||||
<div
|
||||
class="grid items-center bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600 text-[11px] sm:text-xs font-medium uppercase tracking-wider sticky top-0 z-20 min-w-full"
|
||||
style={{ 'grid-template-columns': gridTemplate() }}
|
||||
>
|
||||
<div
|
||||
class="sticky left-0 z-30 bg-gray-50 dark:bg-gray-700/50 pl-3 pr-2 py-1 text-left border-r md:border-r-0 border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center h-full"
|
||||
onClick={() => handleSort('name')}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={`Sort by name ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''
|
||||
}`}
|
||||
>
|
||||
{props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}{' '}
|
||||
{sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="px-0.5 md:px-2 py-1 text-center md:text-left cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start h-full"
|
||||
onClick={() => handleSort('uptime')}
|
||||
>
|
||||
<span class="md:hidden" title="Uptime">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Uptime</span>
|
||||
{sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="px-0.5 md:px-2 py-1 text-center md:text-left cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start h-full"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
<span class="md:hidden" title="CPU">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">CPU</span>
|
||||
{sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="px-0.5 md:px-2 py-1 text-center md:text-left cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start h-full"
|
||||
onClick={() => handleSort('memory')}
|
||||
>
|
||||
<span class="md:hidden" title="Memory">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Memory</span>
|
||||
{sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<div
|
||||
class="px-0.5 md:px-2 py-1 text-center md:text-left cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start h-full"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
<span class="md:hidden" title={props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">
|
||||
{props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}
|
||||
</span>
|
||||
{sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
<Show when={hasAnyTemperatureData()}>
|
||||
<div
|
||||
class="px-0.5 md:px-2 py-1 text-center md:text-left cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center md:justify-start h-full"
|
||||
onClick={() => handleSort('temperature')}
|
||||
>
|
||||
<span class="md:hidden" title="Temperature">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
|
||||
</span>
|
||||
<span class="hidden md:inline">Temp</span>
|
||||
{sortKey() === 'temperature' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
</Show>
|
||||
<For each={countColumns()}>
|
||||
{(column) => (
|
||||
<div
|
||||
class="px-0.5 md:px-2 py-1 text-center cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center h-full"
|
||||
onClick={() => handleSort(column.key)}
|
||||
>
|
||||
{props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}{' '}
|
||||
{sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[12%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('uptime')}
|
||||
>
|
||||
Uptime {sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] sm:w-[15%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] sm:w-[15%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('memory')}
|
||||
>
|
||||
Memory {sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<th
|
||||
class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
{props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}{' '}
|
||||
{sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
<Show when={hasAnyTemperatureData()}>
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('temperature')}
|
||||
<span class="md:hidden" title={column.header}>
|
||||
<Show when={column.key === 'vmCount'}>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
||||
</Show>
|
||||
<Show when={column.key === 'containerCount'}>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||||
</Show>
|
||||
<Show when={column.key === 'storageCount' || column.key === 'diskCount'}>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>
|
||||
</Show>
|
||||
<Show when={column.key === 'backupCount'}>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
|
||||
</Show>
|
||||
</span>
|
||||
<span class="hidden md:inline">{column.header}</span>
|
||||
{sortKey() === column.key && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700 min-w-full">
|
||||
<For each={sortedItems()}>
|
||||
{(item) => {
|
||||
const isPVE = item.type === 'pve';
|
||||
const isPBS = item.type === 'pbs';
|
||||
const node = isPVE ? (item.data as Node) : null;
|
||||
const pbs = isPBS ? (item.data as PBSInstance) : null;
|
||||
|
||||
const online = isItemOnline(item);
|
||||
const statusIndicator = createMemo(() =>
|
||||
isPVE ? getNodeStatusIndicator(node as Node) : getPBSStatusIndicator(pbs as PBSInstance),
|
||||
);
|
||||
const cpuPercentValue = getCpuPercent(item);
|
||||
const memoryPercentValue = getMemoryPercent(item);
|
||||
const diskPercentValue = getDiskPercent(item);
|
||||
const diskSublabel = getDiskSublabel(item);
|
||||
const cpuTemperatureValue = getCpuTemperatureValue(item);
|
||||
const uptimeValue = isPVE ? node?.uptime ?? 0 : isPBS ? pbs?.uptime ?? 0 : 0;
|
||||
const displayName = () => {
|
||||
if (isPVE) return getNodeDisplayName(node as Node);
|
||||
return (pbs as PBSInstance).name;
|
||||
};
|
||||
const showActualName = () => isPVE && hasAlternateDisplayName(node as Node);
|
||||
|
||||
// Use unique node ID (not hostname) to handle duplicate node names
|
||||
const nodeId = isPVE ? node!.id : pbs!.name;
|
||||
const isSelected = () => props.selectedNode === nodeId;
|
||||
// Use the full resource ID for alert matching
|
||||
const resourceId = isPVE ? node!.id || node!.name : pbs!.id || pbs!.name;
|
||||
// Use namespaced metric key for sparklines
|
||||
const metricsKey = buildMetricKey('node', resourceId);
|
||||
const alertStyles = createMemo(() =>
|
||||
getAlertStyles(resourceId, activeAlerts, alertsEnabled()),
|
||||
);
|
||||
const showAlertHighlight = createMemo(
|
||||
() => alertStyles().hasUnacknowledgedAlert && online,
|
||||
);
|
||||
|
||||
const rowStyle = createMemo(() => {
|
||||
const styles: Record<string, string> = {};
|
||||
const shadows: string[] = [];
|
||||
|
||||
if (showAlertHighlight()) {
|
||||
const color = alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
|
||||
shadows.push(`inset 4px 0 0 0 ${color}`);
|
||||
}
|
||||
|
||||
if (isSelected()) {
|
||||
shadows.push('0 0 0 1px rgba(59, 130, 246, 0.5)');
|
||||
shadows.push('0 2px 4px -1px rgba(0, 0, 0, 0.1)');
|
||||
}
|
||||
|
||||
if (shadows.length > 0) {
|
||||
styles['box-shadow'] = shadows.join(', ');
|
||||
}
|
||||
|
||||
return styles;
|
||||
});
|
||||
|
||||
const rowClass = createMemo(() => {
|
||||
const baseHover = 'cursor-pointer transition-all duration-200 relative hover:shadow-sm group';
|
||||
|
||||
if (isSelected()) {
|
||||
return `cursor-pointer transition-all duration-200 relative hover:shadow-sm z-10 group`;
|
||||
}
|
||||
|
||||
if (showAlertHighlight()) {
|
||||
return alertStyles().severity === 'critical'
|
||||
? 'cursor-pointer transition-all duration-200 relative hover:shadow-sm group'
|
||||
: 'cursor-pointer transition-all duration-200 relative hover:shadow-sm group';
|
||||
}
|
||||
|
||||
let className = baseHover;
|
||||
|
||||
if (props.selectedNode && props.selectedNode !== nodeId) {
|
||||
className += ' opacity-50 hover:opacity-80';
|
||||
}
|
||||
|
||||
if (!online) {
|
||||
className += ' opacity-60';
|
||||
}
|
||||
|
||||
return className;
|
||||
});
|
||||
|
||||
const cellBgClass = createMemo(() => {
|
||||
if (isSelected()) return 'bg-blue-50 dark:bg-blue-900/20 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30';
|
||||
if (showAlertHighlight()) {
|
||||
return alertStyles().severity === 'critical'
|
||||
? 'bg-red-50 dark:bg-red-950/30 group-hover:bg-red-100 dark:group-hover:bg-red-950/40'
|
||||
: 'bg-yellow-50 dark:bg-yellow-950/20 group-hover:bg-yellow-100 dark:group-hover:bg-yellow-950/30';
|
||||
}
|
||||
return 'bg-white dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-700/50';
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`${rowClass()} grid items-center`}
|
||||
style={{ ...rowStyle(), 'grid-template-columns': gridTemplate() }}
|
||||
onClick={() => props.onNodeClick(nodeId, item.type)}
|
||||
>
|
||||
Temp{' '}
|
||||
{sortKey() === 'temperature' && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
</Show>
|
||||
<For each={countColumns()}>
|
||||
{(column) => (
|
||||
<th
|
||||
class="hidden lg:table-cell px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort(column.key)}
|
||||
<div
|
||||
class={`sticky left-0 z-10 ${cellBgClass()} pr-2 py-1 whitespace-nowrap border-r md:border-r-0 border-gray-100 dark:border-gray-700 flex items-center h-full ${showAlertHighlight() ? 'pl-4' : 'pl-3'}`}
|
||||
>
|
||||
{column.header}{' '}
|
||||
{sortKey() === column.key && (sortDirection() === 'asc' ? '▲' : '▼')}
|
||||
</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<For each={sortedItems()}>
|
||||
{(item) => {
|
||||
const isPVE = item.type === 'pve';
|
||||
const isPBS = item.type === 'pbs';
|
||||
const node = isPVE ? (item.data as Node) : null;
|
||||
const pbs = isPBS ? (item.data as PBSInstance) : null;
|
||||
|
||||
const online = isItemOnline(item);
|
||||
const statusIndicator = createMemo(() =>
|
||||
isPVE ? getNodeStatusIndicator(node as Node) : getPBSStatusIndicator(pbs as PBSInstance),
|
||||
);
|
||||
const cpuPercentValue = getCpuPercent(item);
|
||||
const memoryPercentValue = getMemoryPercent(item);
|
||||
const diskPercentValue = getDiskPercent(item);
|
||||
const diskSublabel = getDiskSublabel(item);
|
||||
const cpuTemperatureValue = getCpuTemperatureValue(item);
|
||||
const uptimeValue = isPVE ? node?.uptime ?? 0 : isPBS ? pbs?.uptime ?? 0 : 0;
|
||||
const displayName = () => {
|
||||
if (isPVE) return getNodeDisplayName(node as Node);
|
||||
return (pbs as PBSInstance).name;
|
||||
};
|
||||
const showActualName = () => isPVE && hasAlternateDisplayName(node as Node);
|
||||
|
||||
// Use unique node ID (not hostname) to handle duplicate node names
|
||||
const nodeId = isPVE ? node!.id : pbs!.name;
|
||||
const isSelected = () => props.selectedNode === nodeId;
|
||||
// Use the full resource ID for alert matching
|
||||
const resourceId = isPVE ? node!.id || node!.name : pbs!.id || pbs!.name;
|
||||
// Use namespaced metric key for sparklines
|
||||
const metricsKey = buildMetricKey('node', resourceId);
|
||||
const alertStyles = createMemo(() =>
|
||||
getAlertStyles(resourceId, activeAlerts, alertsEnabled()),
|
||||
);
|
||||
const showAlertHighlight = createMemo(
|
||||
() => alertStyles().hasUnacknowledgedAlert && online,
|
||||
);
|
||||
|
||||
const rowStyle = createMemo(() => {
|
||||
const styles: Record<string, string> = {};
|
||||
const shadows: string[] = [];
|
||||
|
||||
if (showAlertHighlight()) {
|
||||
const color = alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
|
||||
shadows.push(`inset 4px 0 0 0 ${color}`);
|
||||
}
|
||||
|
||||
if (isSelected()) {
|
||||
shadows.push('0 0 0 1px rgba(59, 130, 246, 0.5)');
|
||||
shadows.push('0 2px 4px -1px rgba(0, 0, 0, 0.1)');
|
||||
}
|
||||
|
||||
if (shadows.length > 0) {
|
||||
styles['box-shadow'] = shadows.join(', ');
|
||||
}
|
||||
|
||||
return styles;
|
||||
});
|
||||
|
||||
const rowClass = createMemo(() => {
|
||||
const baseHover = 'cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm';
|
||||
|
||||
if (isSelected()) {
|
||||
return `cursor-pointer transition-all duration-200 relative bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:shadow-sm z-10`;
|
||||
}
|
||||
|
||||
if (showAlertHighlight()) {
|
||||
return alertStyles().severity === 'critical'
|
||||
? 'cursor-pointer transition-all duration-200 relative bg-red-50 dark:bg-red-950/30 hover:bg-red-100 dark:hover:bg-red-950/40 hover:shadow-sm'
|
||||
: 'cursor-pointer transition-all duration-200 relative bg-yellow-50 dark:bg-yellow-950/20 hover:bg-yellow-100 dark:hover:bg-yellow-950/30 hover:shadow-sm';
|
||||
}
|
||||
|
||||
let className = baseHover;
|
||||
|
||||
if (props.selectedNode && props.selectedNode !== nodeId) {
|
||||
className += ' opacity-50 hover:opacity-80';
|
||||
}
|
||||
|
||||
if (!online) {
|
||||
className += ' opacity-60';
|
||||
}
|
||||
|
||||
return className;
|
||||
});
|
||||
|
||||
return (
|
||||
<tr
|
||||
class={rowClass()}
|
||||
style={rowStyle()}
|
||||
onClick={() => props.onNodeClick(nodeId, item.type)}
|
||||
>
|
||||
<td
|
||||
class={`pr-2 py-0.5 whitespace-nowrap ${showAlertHighlight() ? 'pl-4' : 'pl-3'}`}
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<StatusDot
|
||||
variant={statusIndicator().variant}
|
||||
title={statusIndicator().label}
|
||||
ariaLabel={statusIndicator().label}
|
||||
size="xs"
|
||||
/>
|
||||
<a
|
||||
href={
|
||||
isPVE
|
||||
? node!.guestURL || node!.host || `https://${node!.name}:8006`
|
||||
: pbs!.host || `https://${pbs!.name}:8007`
|
||||
}
|
||||
target="_blank"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
class="font-medium text-[11px] text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
{displayName()}
|
||||
</a>
|
||||
<Show when={showActualName()}>
|
||||
<span class="text-[9px] text-gray-500 dark:text-gray-400">
|
||||
({(node as Node).name})
|
||||
</span>
|
||||
</Show>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<StatusDot
|
||||
variant={statusIndicator().variant}
|
||||
title={statusIndicator().label}
|
||||
ariaLabel={statusIndicator().label}
|
||||
size="xs"
|
||||
/>
|
||||
<a
|
||||
href={
|
||||
isPVE
|
||||
? node!.guestURL || node!.host || `https://${node!.name}:8006`
|
||||
: pbs!.host || `https://${pbs!.name}:8007`
|
||||
}
|
||||
target="_blank"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
class="font-medium text-[11px] text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 truncate"
|
||||
title={displayName()}
|
||||
>
|
||||
{displayName()}
|
||||
</a>
|
||||
<Show when={showActualName()}>
|
||||
<span class="text-[9px] text-gray-500 dark:text-gray-400 truncate">
|
||||
({(node as Node).name})
|
||||
</span>
|
||||
</Show>
|
||||
<div class="hidden xl:flex items-center gap-1.5 ml-1">
|
||||
<Show when={isPVE}>
|
||||
<span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">
|
||||
PVE
|
||||
|
|
@ -549,8 +615,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
<Show when={isPVE && node!.isClusterMember !== undefined}>
|
||||
<span
|
||||
class={`text-[9px] px-1 py-0 rounded text-[8px] font-medium whitespace-nowrap ${node!.isClusterMember
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-700/50 dark:text-gray-400'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-700/50 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{node!.isClusterMember ? node!.clusterName : 'Standalone'}
|
||||
|
|
@ -567,27 +633,33 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden sm:table-cell px-2 py-0.5 whitespace-nowrap">
|
||||
<span
|
||||
class={`text-xs ${isPVE && (node?.uptime ?? 0) < 3600
|
||||
? 'text-orange-500'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<Show
|
||||
when={online && uptimeValue}
|
||||
fallback="-"
|
||||
>
|
||||
{formatUptime(uptimeValue)}
|
||||
</Show>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-0.5">
|
||||
</div>
|
||||
</div>
|
||||
<div class={`${cellBgClass()} px-0.5 md:px-2 py-1 whitespace-nowrap text-center md:text-left flex items-center justify-center md:justify-start h-full`}>
|
||||
<span
|
||||
class={`text-xs ${isPVE && (node?.uptime ?? 0) < 3600
|
||||
? 'text-orange-500'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<Show
|
||||
when={online && cpuPercentValue !== null}
|
||||
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
|
||||
when={online && uptimeValue}
|
||||
fallback="-"
|
||||
>
|
||||
<span class="md:hidden">{formatUptime(uptimeValue, true)}</span>
|
||||
<span class="hidden md:inline">{formatUptime(uptimeValue)}</span>
|
||||
</Show>
|
||||
</span>
|
||||
</div>
|
||||
<div class={`${cellBgClass()} px-0.5 md:px-2 py-1 flex items-center justify-center h-full`}>
|
||||
<Show
|
||||
when={online && cpuPercentValue !== null}
|
||||
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
|
||||
>
|
||||
<div class={`md:hidden text-xs text-center ${cpuPercentValue! >= 90 ? 'text-red-600 dark:text-red-400 font-bold' : cpuPercentValue! >= 80 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(cpuPercentValue ?? 0)}
|
||||
</div>
|
||||
<div class="hidden md:block w-full">
|
||||
<MetricBar
|
||||
value={cpuPercentValue ?? 0}
|
||||
label={formatPercent(cpuPercentValue ?? 0)}
|
||||
|
|
@ -599,13 +671,18 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
type="cpu"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</Show>
|
||||
</td>
|
||||
<td class="px-2 py-0.5">
|
||||
<Show
|
||||
when={online && memoryPercentValue !== null}
|
||||
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
|
||||
>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class={`${cellBgClass()} px-0.5 md:px-2 py-1 flex items-center justify-center h-full`}>
|
||||
<Show
|
||||
when={online && memoryPercentValue !== null}
|
||||
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
|
||||
>
|
||||
<div class={`md:hidden text-xs text-center ${memoryPercentValue! >= 85 ? 'text-red-600 dark:text-red-400 font-bold' : memoryPercentValue! >= 75 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(memoryPercentValue ?? 0)}
|
||||
</div>
|
||||
<div class="hidden md:block w-full">
|
||||
<MetricBar
|
||||
value={memoryPercentValue ?? 0}
|
||||
label={formatPercent(memoryPercentValue ?? 0)}
|
||||
|
|
@ -619,13 +696,18 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
type="memory"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</Show>
|
||||
</td>
|
||||
<td class="hidden md:table-cell px-2 py-0.5">
|
||||
<Show
|
||||
when={online && diskPercentValue !== null}
|
||||
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
|
||||
>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class={`${cellBgClass()} px-0.5 md:px-2 py-1 flex items-center justify-center h-full`}>
|
||||
<Show
|
||||
when={online && diskPercentValue !== null}
|
||||
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
|
||||
>
|
||||
<div class={`md:hidden text-xs text-center ${diskPercentValue! >= 90 ? 'text-red-600 dark:text-red-400 font-bold' : diskPercentValue! >= 80 ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
{formatPercent(diskPercentValue ?? 0)}
|
||||
</div>
|
||||
<div class="hidden md:block w-full">
|
||||
<MetricBar
|
||||
value={diskPercentValue ?? 0}
|
||||
label={formatPercent(diskPercentValue ?? 0)}
|
||||
|
|
@ -633,105 +715,105 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
|
|||
type="disk"
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</Show>
|
||||
</td>
|
||||
<Show when={hasAnyTemperatureData()}>
|
||||
<td class="hidden lg:table-cell px-2 py-0.5 whitespace-nowrap text-center">
|
||||
<Show
|
||||
when={
|
||||
online &&
|
||||
isPVE &&
|
||||
cpuTemperatureValue !== null &&
|
||||
(node!.temperature?.hasCPU ?? node!.temperature?.hasGPU ?? node!.temperature?.available) &&
|
||||
isTemperatureMonitoringEnabled(node!)
|
||||
}
|
||||
fallback={
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">-</span>
|
||||
}
|
||||
>
|
||||
{(() => {
|
||||
const value = cpuTemperatureValue as number;
|
||||
const severityClass =
|
||||
value >= 80
|
||||
? 'text-red-600 dark:text-red-400'
|
||||
: value >= 70
|
||||
? 'text-yellow-600 dark:text-yellow-400'
|
||||
: 'text-green-600 dark:text-green-400';
|
||||
|
||||
const temp = node!.temperature;
|
||||
const cpuMinValue =
|
||||
typeof temp?.cpuMin === 'number' && temp.cpuMin > 0 ? temp.cpuMin : null;
|
||||
const cpuMaxValue =
|
||||
typeof temp?.cpuMaxRecord === 'number' && temp.cpuMaxRecord > 0
|
||||
? temp.cpuMaxRecord
|
||||
: null;
|
||||
const hasMinMax = cpuMinValue !== null && cpuMaxValue !== null;
|
||||
|
||||
const gpus = temp?.gpu ?? [];
|
||||
const hasGPU = gpus.length > 0;
|
||||
|
||||
if (hasMinMax || hasGPU) {
|
||||
const min = Math.round(cpuMinValue!);
|
||||
const max = Math.round(cpuMaxValue!);
|
||||
|
||||
const getTooltipColor = (temp: number) => {
|
||||
if (temp >= 80) return 'text-red-400';
|
||||
if (temp >= 70) return 'text-yellow-400';
|
||||
return 'text-green-400';
|
||||
};
|
||||
|
||||
return (
|
||||
<span class="relative inline-block group">
|
||||
<span class={`text-xs font-medium ${severityClass} cursor-help`}>
|
||||
{value}°C
|
||||
</span>
|
||||
<span class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs whitespace-nowrap bg-gray-900 dark:bg-gray-700 text-white rounded shadow-lg z-50 pointer-events-none">
|
||||
{hasMinMax && (
|
||||
<div>
|
||||
<span class="text-gray-300">CPU:</span> <span class={getTooltipColor(min)}>{min}</span>-<span class={getTooltipColor(max)}>{max}</span>°C
|
||||
</div>
|
||||
)}
|
||||
{hasGPU && gpus.map((gpu) => {
|
||||
const gpuTemp = gpu.edge ?? gpu.junction ?? gpu.mem ?? 0;
|
||||
return (
|
||||
<div>
|
||||
<span class="text-gray-300">GPU:</span> <span class={getTooltipColor(gpuTemp)}>{Math.round(gpuTemp)}</span>°C
|
||||
{gpu.edge && ` E:${Math.round(gpu.edge)}`}
|
||||
{gpu.junction && ` J:${Math.round(gpu.junction)}`}
|
||||
{gpu.mem && ` M:${Math.round(gpu.mem)}`}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span class={`text-xs font-medium ${severityClass}`}>{value}°C</span>;
|
||||
})()}
|
||||
</Show>
|
||||
</td>
|
||||
</div>
|
||||
</Show>
|
||||
<For each={countColumns()}>
|
||||
{(column) => {
|
||||
const value = getCountValue(item, column.key);
|
||||
const display = online ? value ?? '-' : '-';
|
||||
const textClass = online
|
||||
? 'text-xs text-gray-700 dark:text-gray-300'
|
||||
: 'text-xs text-gray-400 dark:text-gray-500';
|
||||
return (
|
||||
<td class="hidden lg:table-cell px-2 py-0.5 whitespace-nowrap text-center">
|
||||
<span class={textClass}>{display}</span>
|
||||
</td>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tr>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Show when={hasAnyTemperatureData()}>
|
||||
<div class={`${cellBgClass()} px-0.5 md:px-2 py-1 whitespace-nowrap text-center md:text-left flex items-center justify-center md:justify-start h-full`}>
|
||||
<Show
|
||||
when={
|
||||
online &&
|
||||
isPVE &&
|
||||
cpuTemperatureValue !== null &&
|
||||
(node!.temperature?.hasCPU ?? node!.temperature?.hasGPU ?? node!.temperature?.available) &&
|
||||
isTemperatureMonitoringEnabled(node!)
|
||||
}
|
||||
fallback={
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">-</span>
|
||||
}
|
||||
>
|
||||
{(() => {
|
||||
const value = cpuTemperatureValue as number;
|
||||
const severityClass =
|
||||
value >= 80
|
||||
? 'text-red-600 dark:text-red-400'
|
||||
: value >= 70
|
||||
? 'text-yellow-600 dark:text-yellow-400'
|
||||
: 'text-green-600 dark:text-green-400';
|
||||
|
||||
const temp = node!.temperature;
|
||||
const cpuMinValue =
|
||||
typeof temp?.cpuMin === 'number' && temp.cpuMin > 0 ? temp.cpuMin : null;
|
||||
const cpuMaxValue =
|
||||
typeof temp?.cpuMaxRecord === 'number' && temp.cpuMaxRecord > 0
|
||||
? temp.cpuMaxRecord
|
||||
: null;
|
||||
const hasMinMax = cpuMinValue !== null && cpuMaxValue !== null;
|
||||
|
||||
const gpus = temp?.gpu ?? [];
|
||||
const hasGPU = gpus.length > 0;
|
||||
|
||||
if (hasMinMax || hasGPU) {
|
||||
const min = Math.round(cpuMinValue!);
|
||||
const max = Math.round(cpuMaxValue!);
|
||||
|
||||
const getTooltipColor = (temp: number) => {
|
||||
if (temp >= 80) return 'text-red-400';
|
||||
if (temp >= 70) return 'text-yellow-400';
|
||||
return 'text-green-400';
|
||||
};
|
||||
|
||||
return (
|
||||
<span class="relative inline-block group">
|
||||
<span class={`text-xs font-medium ${severityClass} cursor-help`}>
|
||||
{value}°C
|
||||
</span>
|
||||
<span class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs whitespace-nowrap bg-gray-900 dark:bg-gray-700 text-white rounded shadow-lg z-50 pointer-events-none">
|
||||
{hasMinMax && (
|
||||
<div>
|
||||
<span class="text-gray-300">CPU:</span> <span class={getTooltipColor(min)}>{min}</span>-<span class={getTooltipColor(max)}>{max}</span>°C
|
||||
</div>
|
||||
)}
|
||||
{hasGPU && gpus.map((gpu) => {
|
||||
const gpuTemp = gpu.edge ?? gpu.junction ?? gpu.mem ?? 0;
|
||||
return (
|
||||
<div>
|
||||
<span class="text-gray-300">GPU:</span> <span class={getTooltipColor(gpuTemp)}>{Math.round(gpuTemp)}</span>°C
|
||||
{gpu.edge && ` E:${Math.round(gpu.edge)}`}
|
||||
{gpu.junction && ` J:${Math.round(gpu.junction)}`}
|
||||
{gpu.mem && ` M:${Math.round(gpu.mem)}`}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span class={`text-xs font-medium ${severityClass}`}>{value}°C</span>;
|
||||
})()}
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<For each={countColumns()}>
|
||||
{(column) => {
|
||||
const value = getCountValue(item, column.key);
|
||||
const display = online ? value ?? '-' : '-';
|
||||
const textClass = online
|
||||
? 'text-xs text-gray-700 dark:text-gray-300'
|
||||
: 'text-xs text-gray-400 dark:text-gray-500';
|
||||
return (
|
||||
<div class={`${cellBgClass()} px-0.5 md:px-2 py-1 whitespace-nowrap text-center flex items-center justify-center h-full`}>
|
||||
<span class={textClass}>{display}</span>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -166,6 +166,7 @@ export interface DockerHost {
|
|||
hidden?: boolean;
|
||||
pendingUninstall?: boolean;
|
||||
command?: DockerHostCommand;
|
||||
isLegacy?: boolean;
|
||||
}
|
||||
|
||||
export interface DockerHostCommand {
|
||||
|
|
@ -343,6 +344,7 @@ export interface Host {
|
|||
revokedTokenId?: string;
|
||||
tokenRevokedAt?: number;
|
||||
tags?: string[];
|
||||
isLegacy?: boolean;
|
||||
}
|
||||
|
||||
export interface HostNetworkInterface {
|
||||
|
|
@ -914,60 +916,60 @@ export type WSMessage =
|
|||
| { type: 'alertResolved'; data: { alertId: string } }
|
||||
| { type: 'settingsUpdate'; data: { theme?: string } }
|
||||
| {
|
||||
type: 'update:progress';
|
||||
data: {
|
||||
phase: string;
|
||||
progress: number;
|
||||
message: string;
|
||||
};
|
||||
}
|
||||
type: 'update:progress';
|
||||
data: {
|
||||
phase: string;
|
||||
progress: number;
|
||||
message: string;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'node_auto_registered';
|
||||
data: {
|
||||
type: string;
|
||||
host: string;
|
||||
name: string;
|
||||
tokenId: string;
|
||||
hasToken: boolean;
|
||||
verifySSL?: boolean;
|
||||
status?: string;
|
||||
};
|
||||
}
|
||||
type: 'node_auto_registered';
|
||||
data: {
|
||||
type: string;
|
||||
host: string;
|
||||
name: string;
|
||||
tokenId: string;
|
||||
hasToken: boolean;
|
||||
verifySSL?: boolean;
|
||||
status?: string;
|
||||
};
|
||||
}
|
||||
| { type: 'node_deleted'; data: { nodeType: string } }
|
||||
| { type: 'nodes_changed'; data?: unknown }
|
||||
| {
|
||||
type: 'discovery_update';
|
||||
data: {
|
||||
servers: Array<{
|
||||
ip: string;
|
||||
port: number;
|
||||
type: string;
|
||||
version: string;
|
||||
hostname?: string;
|
||||
release?: string;
|
||||
}>;
|
||||
errors?: string[];
|
||||
timestamp?: number;
|
||||
immediate?: boolean;
|
||||
scanning?: boolean;
|
||||
cached?: boolean;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'discovery_started';
|
||||
data?: {
|
||||
subnet?: string;
|
||||
timestamp?: number;
|
||||
scanning?: boolean;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'discovery_complete';
|
||||
data?: {
|
||||
timestamp?: number;
|
||||
scanning?: boolean;
|
||||
};
|
||||
type: 'discovery_update';
|
||||
data: {
|
||||
servers: Array<{
|
||||
ip: string;
|
||||
port: number;
|
||||
type: string;
|
||||
version: string;
|
||||
hostname?: string;
|
||||
release?: string;
|
||||
}>;
|
||||
errors?: string[];
|
||||
timestamp?: number;
|
||||
immediate?: boolean;
|
||||
scanning?: boolean;
|
||||
cached?: boolean;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'discovery_started';
|
||||
data?: {
|
||||
subnet?: string;
|
||||
timestamp?: number;
|
||||
scanning?: boolean;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'discovery_complete';
|
||||
data?: {
|
||||
timestamp?: number;
|
||||
scanning?: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
// Utility types
|
||||
export type Status = 'running' | 'stopped' | 'paused' | 'unknown';
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export function formatPercent(value: number): string {
|
|||
return `${Math.round(value)}%`;
|
||||
}
|
||||
|
||||
export function formatUptime(seconds: number): string {
|
||||
export function formatUptime(seconds: number, condensed = false): string {
|
||||
if (!seconds || seconds < 0) return '0s';
|
||||
|
||||
const days = Math.floor(seconds / 86400);
|
||||
|
|
@ -33,9 +33,9 @@ export function formatUptime(seconds: number): string {
|
|||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}d ${hours}h`;
|
||||
return condensed ? `${days}d` : `${days}d ${hours}h`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}h ${minutes}m`;
|
||||
return condensed ? `${hours}h` : `${hours}h ${minutes}m`;
|
||||
} else {
|
||||
return `${minutes}m`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,26 +9,26 @@ import (
|
|||
|
||||
// State represents the current state of all monitored resources
|
||||
type State struct {
|
||||
mu sync.RWMutex
|
||||
Nodes []Node `json:"nodes"`
|
||||
VMs []VM `json:"vms"`
|
||||
Containers []Container `json:"containers"`
|
||||
DockerHosts []DockerHost `json:"dockerHosts"`
|
||||
RemovedDockerHosts []RemovedDockerHost `json:"removedDockerHosts"`
|
||||
Hosts []Host `json:"hosts"`
|
||||
Storage []Storage `json:"storage"`
|
||||
CephClusters []CephCluster `json:"cephClusters"`
|
||||
PhysicalDisks []PhysicalDisk `json:"physicalDisks"`
|
||||
PBSInstances []PBSInstance `json:"pbs"`
|
||||
PMGInstances []PMGInstance `json:"pmg"`
|
||||
PBSBackups []PBSBackup `json:"pbsBackups"`
|
||||
PMGBackups []PMGBackup `json:"pmgBackups"`
|
||||
Backups Backups `json:"backups"`
|
||||
ReplicationJobs []ReplicationJob `json:"replicationJobs"`
|
||||
Metrics []Metric `json:"metrics"`
|
||||
PVEBackups PVEBackups `json:"pveBackups"`
|
||||
Performance Performance `json:"performance"`
|
||||
ConnectionHealth map[string]bool `json:"connectionHealth"`
|
||||
mu sync.RWMutex
|
||||
Nodes []Node `json:"nodes"`
|
||||
VMs []VM `json:"vms"`
|
||||
Containers []Container `json:"containers"`
|
||||
DockerHosts []DockerHost `json:"dockerHosts"`
|
||||
RemovedDockerHosts []RemovedDockerHost `json:"removedDockerHosts"`
|
||||
Hosts []Host `json:"hosts"`
|
||||
Storage []Storage `json:"storage"`
|
||||
CephClusters []CephCluster `json:"cephClusters"`
|
||||
PhysicalDisks []PhysicalDisk `json:"physicalDisks"`
|
||||
PBSInstances []PBSInstance `json:"pbs"`
|
||||
PMGInstances []PMGInstance `json:"pmg"`
|
||||
PBSBackups []PBSBackup `json:"pbsBackups"`
|
||||
PMGBackups []PMGBackup `json:"pmgBackups"`
|
||||
Backups Backups `json:"backups"`
|
||||
ReplicationJobs []ReplicationJob `json:"replicationJobs"`
|
||||
Metrics []Metric `json:"metrics"`
|
||||
PVEBackups PVEBackups `json:"pveBackups"`
|
||||
Performance Performance `json:"performance"`
|
||||
ConnectionHealth map[string]bool `json:"connectionHealth"`
|
||||
Stats Stats `json:"stats"`
|
||||
ActiveAlerts []Alert `json:"activeAlerts"`
|
||||
RecentlyResolved []ResolvedAlert `json:"recentlyResolved"`
|
||||
|
|
@ -62,28 +62,28 @@ type ResolvedAlert struct {
|
|||
|
||||
// Node represents a Proxmox VE node
|
||||
type Node struct {
|
||||
ID string `json:"id"`
|
||||
Name string `json:"name"`
|
||||
DisplayName string `json:"displayName,omitempty"`
|
||||
Instance string `json:"instance"`
|
||||
Host string `json:"host"` // Full host URL from config
|
||||
GuestURL string `json:"guestURL"` // Optional guest-accessible URL (for navigation)
|
||||
Status string `json:"status"`
|
||||
Type string `json:"type"`
|
||||
CPU float64 `json:"cpu"`
|
||||
Memory Memory `json:"memory"`
|
||||
Disk Disk `json:"disk"`
|
||||
Uptime int64 `json:"uptime"`
|
||||
LoadAverage []float64 `json:"loadAverage"`
|
||||
KernelVersion string `json:"kernelVersion"`
|
||||
PVEVersion string `json:"pveVersion"`
|
||||
CPUInfo CPUInfo `json:"cpuInfo"`
|
||||
ID string `json:"id"`
|
||||
Name string `json:"name"`
|
||||
DisplayName string `json:"displayName,omitempty"`
|
||||
Instance string `json:"instance"`
|
||||
Host string `json:"host"` // Full host URL from config
|
||||
GuestURL string `json:"guestURL"` // Optional guest-accessible URL (for navigation)
|
||||
Status string `json:"status"`
|
||||
Type string `json:"type"`
|
||||
CPU float64 `json:"cpu"`
|
||||
Memory Memory `json:"memory"`
|
||||
Disk Disk `json:"disk"`
|
||||
Uptime int64 `json:"uptime"`
|
||||
LoadAverage []float64 `json:"loadAverage"`
|
||||
KernelVersion string `json:"kernelVersion"`
|
||||
PVEVersion string `json:"pveVersion"`
|
||||
CPUInfo CPUInfo `json:"cpuInfo"`
|
||||
Temperature *Temperature `json:"temperature,omitempty"` // CPU/NVMe temperatures
|
||||
TemperatureMonitoringEnabled *bool `json:"temperatureMonitoringEnabled,omitempty"` // Per-node temperature monitoring override
|
||||
LastSeen time.Time `json:"lastSeen"`
|
||||
ConnectionHealth string `json:"connectionHealth"`
|
||||
IsClusterMember bool `json:"isClusterMember"` // True if part of a cluster
|
||||
ClusterName string `json:"clusterName"` // Name of cluster (empty if standalone)
|
||||
IsClusterMember bool `json:"isClusterMember"` // True if part of a cluster
|
||||
ClusterName string `json:"clusterName"` // Name of cluster (empty if standalone)
|
||||
}
|
||||
|
||||
// VM represents a virtual machine
|
||||
|
|
@ -174,6 +174,7 @@ type Host struct {
|
|||
TokenHint string `json:"tokenHint,omitempty"`
|
||||
TokenLastUsedAt *time.Time `json:"tokenLastUsedAt,omitempty"`
|
||||
Tags []string `json:"tags,omitempty"`
|
||||
IsLegacy bool `json:"isLegacy,omitempty"`
|
||||
}
|
||||
|
||||
// HostNetworkInterface describes a host network adapter summary.
|
||||
|
|
@ -254,6 +255,7 @@ type DockerHost struct {
|
|||
Hidden bool `json:"hidden"`
|
||||
PendingUninstall bool `json:"pendingUninstall"`
|
||||
Command *DockerHostCommandStatus `json:"command,omitempty"`
|
||||
IsLegacy bool `json:"isLegacy,omitempty"`
|
||||
}
|
||||
|
||||
// RemovedDockerHost tracks a docker host that was deliberately removed and blocked from reporting.
|
||||
|
|
|
|||
|
|
@ -1877,6 +1877,7 @@ func (m *Monitor) ApplyDockerReport(report agentsdocker.Report, tokenRecord *con
|
|||
Services: services,
|
||||
Tasks: tasks,
|
||||
Swarm: swarmInfo,
|
||||
IsLegacy: isLegacyDockerAgent(report.Agent.Version),
|
||||
}
|
||||
|
||||
if tokenRecord != nil {
|
||||
|
|
@ -2159,6 +2160,7 @@ func (m *Monitor) ApplyHostReport(report agentshost.Report, tokenRecord *config.
|
|||
LastSeen: timestamp,
|
||||
AgentVersion: strings.TrimSpace(report.Agent.Version),
|
||||
Tags: append([]string(nil), report.Tags...),
|
||||
IsLegacy: isLegacyHostAgent(report.Agent.Version),
|
||||
}
|
||||
|
||||
if len(host.LoadAverage) == 0 {
|
||||
|
|
@ -9560,3 +9562,20 @@ func (m *Monitor) checkMockAlerts() {
|
|||
// mock state without needing to grab the alert manager lock again.
|
||||
mock.UpdateAlertSnapshots(m.alertManager.GetActiveAlerts(), m.alertManager.GetRecentlyResolved())
|
||||
}
|
||||
func isLegacyHostAgent(version string) bool {
|
||||
// New unified agent is 1.0.0+
|
||||
// Legacy agents are 0.x.x or empty
|
||||
if version == "" {
|
||||
return true
|
||||
}
|
||||
return strings.HasPrefix(version, "0.")
|
||||
}
|
||||
|
||||
func isLegacyDockerAgent(version string) bool {
|
||||
// New unified agent is 1.0.0+
|
||||
// Legacy agents are 0.x.x or empty
|
||||
if version == "" {
|
||||
return true
|
||||
}
|
||||
return strings.HasPrefix(version, "0.")
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue