danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance UI responsiveness for tables: apply percentage-based widths and selective column hiding

Browse source
This commit is contained in:
courtmanr@gmail.com 2025-11-25 10:57:33 +00:00
parent 809676cb4f
commit ac747ddf11
7 changed files with 738 additions and 756 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
frontend-modern/src/components/Backups/UnifiedBackups.tsx
View file

@ -1871,7 +1871,6 @@ const UnifiedBackups: Component = () => {
.backup-table {
table-layout: fixed;
width: 100%;
min-width: 1200px;
}
.backup-table th,
.backup-table td {
@ -2036,76 +2035,67 @@ const UnifiedBackups: Component = () => {
</div>
{/* Desktop Table View */}
<table class="backup-table hidden lg:table">
<table class="backup-table hidden md:table">
<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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%] min-w-[60px]"
onClick={() => handleSort('vmid')}
style="width: 60px;"
>
{hasHostBackups() ? 'VMID/Host' : 'VMID'}{' '}
{sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%] min-w-[60px]"
onClick={() => handleSort('type')}
style="width: 60px;"
>
Type {sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-auto"
onClick={() => handleSort('name')}
style="width: 150px;"
>
Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="hidden xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
onClick={() => handleSort('node')}
style="width: 100px;"
>
Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<Show when={backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'}>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="hidden 2xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
onClick={() => handleSort('owner')}
style="width: 80px;"
>
Owner {sortKey() === 'owner' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
</Show>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[14%] min-w-[120px]"
onClick={() => handleSort('backupTime')}
style="width: 140px;"
>
Time {sortKey() === 'backupTime' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<Show when={backupTypeFilter() !== 'snapshot'}>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
onClick={() => handleSort('size')}
style="width: 80px;"
>
Size {sortKey() === 'size' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
</Show>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
onClick={() => handleSort('backupType')}
style="width: 80px;"
>
Backup{' '}
{sortKey() === 'backupType' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<Show when={backupTypeFilter() !== 'snapshot'}>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="hidden xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[12%]"
onClick={() => handleSort('storage')}
style="width: 150px;"
>
Location{' '}
{sortKey() === 'storage' && (sortDirection() === 'asc' ? '▲' : '▼')}
@ -2113,17 +2103,15 @@ const UnifiedBackups: Component = () => {
</Show>
<Show when={backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'}>
<th
class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="hidden lg:table-cell px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[6%]"
onClick={() => handleSort('verified')}
style="width: 60px;"
>
Verified{' '}
{sortKey() === 'verified' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
</Show>
<th
class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider"
style="width: 200px;"
class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]"
>
Details
</th>
@ -2136,14 +2124,17 @@ const UnifiedBackups: Component = () => {
<tr class="bg-gray-50 dark:bg-gray-900/40">
<td
colspan={(() => {
let cols = 7; // Base columns: VMID, Type, Name, Node, Time, Backup, Details
if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote')
cols++; // Add Owner column
if (backupTypeFilter() !== 'snapshot') cols++; // Add Size column
if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote')
cols++; // Add Verified column
if (backupTypeFilter() !== 'snapshot') cols++; // Add Location column
return cols;
let cols = 4; // Base: VMID, Type, Name, Time
if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote') {
// Owner - hidden on 2xl
// We can't easily adjust colspan based on media query in JS without a hook.
// For now, let's just set a high colspan or use a simpler approach.
// A safer bet for responsive tables with colspans is to just set it to a large number like 100
// provided the table layout handles it, or try to be accurate.
// Given the complexity of responsive hiding, colspan=100 is often the easiest hack for full-width rows.
return 20;
}
return 20;
})()}
class="py-1 pr-2 pl-3 text-[12px] sm:text-sm font-semibold text-slate-700 dark:text-slate-100"
>
@ -2176,13 +2167,13 @@ const UnifiedBackups: Component = () => {
<td class="p-0.5 px-1.5 text-sm align-middle">
{item.name || '-'}
</td>
<td class="p-0.5 px-1.5 text-sm align-middle">{item.node}</td>
<td class="hidden xl:table-cell p-0.5 px-1.5 text-sm align-middle">{item.node}</td>
<Show
when={
backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'
}
>
<td class="p-0.5 px-1.5 text-xs align-middle text-gray-500 dark:text-gray-400">
<td class="hidden 2xl:table-cell p-0.5 px-1.5 text-xs align-middle text-gray-500 dark:text-gray-400">
{item.owner ? item.owner.split('@')[0] : '-'}
</td>
</Show>
@ -2193,12 +2184,12 @@ const UnifiedBackups: Component = () => {
</td>
<Show when={backupTypeFilter() !== 'snapshot'}>
<td
class={`p-0.5 px-1.5 align-middle ${getSizeColor(item.size)}`}
class={`hidden lg:table-cell p-0.5 px-1.5 align-middle ${getSizeColor(item.size)}`}
>
{item.size ? formatBytes(item.size) : '-'}
</td>
</Show>
<td class="p-0.5 px-1.5 align-middle">
<td class="hidden lg:table-cell p-0.5 px-1.5 align-middle">
<div class="flex items-center gap-1">
<span
class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.backupType === 'snapshot'
@ -2255,7 +2246,7 @@ const UnifiedBackups: Component = () => {
</div>
</td>
<Show when={backupTypeFilter() !== 'snapshot'}>
<td class="p-0.5 px-1.5 text-sm align-middle">
<td class="hidden xl:table-cell p-0.5 px-1.5 text-sm align-middle">
{item.storage ||
(item.datastore &&
(item.namespace && item.namespace !== 'root'
@ -2269,7 +2260,7 @@ const UnifiedBackups: Component = () => {
backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'
}
>
<td class="p-0.5 px-1.5 text-center align-middle">
<td class="hidden lg:table-cell p-0.5 px-1.5 text-center align-middle">
{item.backupType === 'remote' ? (
item.verified ? (
<span title="PBS backup verified">
@ -2315,7 +2306,7 @@ const UnifiedBackups: Component = () => {
</td>
</Show>
<td
class="p-0.5 px-1.5 cursor-help align-middle"
class="hidden md:table-cell p-0.5 px-1.5 cursor-help align-middle"
onMouseEnter={(e) => {
const details = [];

26
frontend-modern/src/components/Dashboard/Dashboard.tsx
View file

@ -927,12 +927,12 @@ export function Dashboard(props: DashboardProps) {
<Show when={connected() && initialDataReceived() && filteredGuests().length > 0}>
<ComponentErrorBoundary name="Guest Table">
<Card padding="none" class="mb-4 overflow-hidden">
<ScrollableTable minWidth="750px">
<table class="w-full min-w-[750px] md:min-w-[840px] lg:min-w-[970px] table-fixed border-collapse">
<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"
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"
@ -942,7 +942,7 @@ export function Dashboard(props: DashboardProps) {
Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[52px] sm:w-[58px] lg:w-[64px] xl:w-[70px] 2xl:w-[87px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -951,7 +951,7 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[50px] sm:w-[56px] lg:w-[62px] xl:w-[70px] 2xl:w-[92px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -960,7 +960,7 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[56px] sm:w-[64px] lg:w-[72px] xl:w-[84px] 2xl:w-[125px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -969,13 +969,13 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -984,13 +984,13 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -999,7 +999,7 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'diskRead' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -1008,7 +1008,7 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>
@ -1017,7 +1017,7 @@ export function Dashboard(props: DashboardProps) {
{sortKey() === 'networkIn' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
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"
>

32
frontend-modern/src/components/Dashboard/GuestRow.tsx
View file

@ -406,7 +406,7 @@ export function GuestRow(props: GuestRowProps) {
// Get first cell styling
const firstCellClass = createMemo(() => {
const base =
'py-0.5 pr-2 whitespace-nowrap relative w-[140px] sm:w-[160px] lg:w-[180px] xl:w-[240px] 2xl:w-[380px]';
'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}`;
});
@ -552,11 +552,10 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* Type */}
<td class="py-0.5 px-2 whitespace-nowrap w-[52px] sm:w-[58px] lg:w-[64px] xl:w-[70px] 2xl:w-[87px]">
<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'
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'
}`}
@ -567,14 +566,13 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* VMID */}
<td class="py-0.5 px-1.5 whitespace-nowrap w-[50px] sm:w-[56px] lg:w-[62px] xl:w-[70px] 2xl:w-[92px] text-sm text-gray-600 dark:text-gray-400 align-middle">
<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={`py-0.5 px-1.5 w-[56px] sm:w-[64px] lg:w-[72px] xl:w-[84px] 2xl:w-[125px] text-sm whitespace-nowrap align-middle ${
props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'
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="-">
@ -583,7 +581,7 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* CPU */}
<td class="py-0.5 px-2 w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px]">
<td class="py-0.5 px-2 w-[10%]">
<Show when={isRunning()} fallback={<span class="text-sm text-gray-400">-</span>}>
<MetricBar
value={cpuPercent()}
@ -600,7 +598,7 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* Memory */}
<td class="py-0.5 px-2 w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px]">
<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
@ -615,7 +613,7 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* Disk – surface usage even if guest is currently stopped so users can see last reported values */}
<td class="py-0.5 px-2 w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px]">
<td class="hidden sm:table-cell py-0.5 px-2 w-[10%]">
<Show
when={hasDiskUsage()}
fallback={
@ -639,24 +637,24 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* Disk I/O */}
<td class="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
<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="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
<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="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
<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="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
<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>
@ -664,8 +662,7 @@ export function GuestRow(props: GuestRowProps) {
</tr>
<Show when={drawerOpen() && canShowDrawer()}>
<tr
class={`text-[11px] ${
isRunning() && props.parentNodeOnline !== false
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'
}`}
@ -673,8 +670,7 @@ export function GuestRow(props: GuestRowProps) {
>
<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' : ''
class={`flex flex-wrap gap-3 justify-start ${drawerDisabled() ? 'opacity-50 saturate-75 pointer-events-none' : ''
}`}
>
<Show

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

@ -1182,7 +1182,7 @@ const DockerContainerRow: Component<{
</div>
</div>
</td>
<td class="px-2 py-0.5">
<td class="hidden sm:table-cell px-2 py-0.5">
<span
class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
title={
@ -1194,7 +1194,7 @@ const DockerContainerRow: Component<{
{runtimeInfo.label}
</span>
</td>
<td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<span title={container.image}>
{container.image || '—'}
</span>
@ -1204,7 +1204,7 @@ const DockerContainerRow: Component<{
{statusLabel()}
</span>
</td>
<td class="px-2 py-0.5 min-w-[180px]">
<td class="hidden md:table-cell px-2 py-0.5">
<Show
when={isRunning() && container.cpuPercent && container.cpuPercent > 0}
fallback={<span class="text-xs text-gray-400">—</span>}
@ -1217,7 +1217,7 @@ const DockerContainerRow: Component<{
/>
</Show>
</td>
<td class="px-2 py-0.5 min-w-[240px]">
<td class="hidden md:table-cell px-2 py-0.5">
<Show
when={isRunning() && container.memoryUsageBytes && container.memoryUsageBytes > 0}
fallback={<span class="text-xs text-gray-400">—</span>}
@ -1231,7 +1231,7 @@ const DockerContainerRow: Component<{
/>
</Show>
</td>
<td class="px-2 py-0.5 min-w-[220px]">
<td class="hidden xl:table-cell px-2 py-0.5">
<Show when={hasDiskStats()} fallback={<span class="text-xs text-gray-400">—</span>}>
<Show
when={diskPercent() !== null}
@ -1247,13 +1247,13 @@ const DockerContainerRow: Component<{
</Show>
</Show>
</td>
<td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
{restarts()}
<span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span>
</Show>
</td>
<td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<td class="hidden sm:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
{uptime()}
</Show>
@ -1946,12 +1946,12 @@ const DockerServiceRow: Component<{
</div>
</div>
</td>
<td class="px-2 py-0.5">
<td class="hidden sm:table-cell px-2 py-0.5">
<span class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass('service')}`}>
Service
</span>
</td>
<td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<span title={service.image}>
{service.image || '—'}
</span>
@ -1961,16 +1961,16 @@ const DockerServiceRow: Component<{
{badge.label}
</span>
</td>
<td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 min-w-[150px]">—</td>
<td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 min-w-[210px]">—</td>
<td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 min-w-[200px]">—</td>
<td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
<td class="hidden md:table-cell px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
<td class="hidden md:table-cell px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
<td class="hidden xl:table-cell px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
<td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
<span class="font-semibold text-gray-900 dark:text-gray-100">
{(service.runningTasks ?? 0)}/{service.desiredTasks ?? 0}
</span>
<span class="ml-1 text-gray-500 dark:text-gray-400">tasks</span>
</td>
<td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
<td class="hidden sm:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
<Show when={updatedAt} fallback="—">
{(timestamp) => (
<span title={new Date(timestamp()).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}>
@ -2425,12 +2425,12 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
}
>
<Card padding="none" class="overflow-hidden">
<ScrollableTable minWidth="1080px">
<table class="w-full min-w-[1080px] table-fixed border-collapse whitespace-nowrap">
<ScrollableTable>
<table class="w-full table-fixed border-collapse 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-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('resource')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('resource')}
tabIndex={0}
@ -2459,7 +2459,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
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 select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('type')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('type')}
tabIndex={0}
@ -2473,7 +2473,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('image')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('image')}
tabIndex={0}
@ -2501,7 +2501,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] min-w-[150px] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="hidden md:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('cpu')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('cpu')}
tabIndex={0}
@ -2515,7 +2515,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%] min-w-[210px] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="hidden md:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('memory')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('memory')}
tabIndex={0}
@ -2529,7 +2529,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] min-w-[200px] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="hidden xl:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('disk')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('disk')}
tabIndex={0}
@ -2543,7 +2543,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[9%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[9%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('tasks')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('tasks')}
tabIndex={0}
@ -2557,7 +2557,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
</div>
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="hidden sm:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('updated')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('updated')}
tabIndex={0}

32
frontend-modern/src/components/Storage/DiskList.tsx
View file

@ -154,31 +154,31 @@ export const DiskList: Component<DiskListProps> = (props) => {
<table class="w-full">
<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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Node
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Device
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[20%]">
Model
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%]">
Type
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<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%]">
FS
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Health
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<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%]">
SSD Life
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell w-[8%]">
Temp
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Size
</th>
<th class="px-2 py-1.5 w-8"></th>
@ -202,19 +202,19 @@ export const DiskList: Component<DiskListProps> = (props) => {
{disk.devPath}
</span>
</td>
<td class="px-2 py-1.5 text-xs">
<td class="hidden md:table-cell px-2 py-1.5 text-xs">
<span class="text-gray-700 dark:text-gray-300">
{disk.model || 'Unknown'}
</span>
</td>
<td class="px-2 py-1.5 text-xs">
<td class="hidden sm:table-cell px-2 py-1.5 text-xs">
<span
class={`inline-block px-1.5 py-0.5 text-[10px] font-medium rounded ${getDiskTypeBadge(disk.type)}`}
>
{disk.type.toUpperCase()}
</span>
</td>
<td class="px-2 py-1.5 text-xs">
<td class="hidden lg:table-cell px-2 py-1.5 text-xs">
<Show
when={disk.used && disk.used !== 'unknown'}
fallback={<span class="text-gray-400">-</span>}
@ -231,15 +231,14 @@ export const DiskList: Component<DiskListProps> = (props) => {
{health.text}
</span>
</td>
<td class="px-2 py-1.5 text-xs">
<td class="hidden md:table-cell px-2 py-1.5 text-xs">
<Show
when={disk.wearout > 0}
fallback={<span class="text-gray-400">-</span>}
>
<div class="relative w-24 h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div
class={`absolute top-0 left-0 h-full ${
disk.wearout >= 50
class={`absolute top-0 left-0 h-full ${disk.wearout >= 50
? 'bg-green-500/60 dark:bg-green-500/50'
: disk.wearout >= 20
? 'bg-yellow-500/60 dark:bg-yellow-500/50'
@ -261,8 +260,7 @@ export const DiskList: Component<DiskListProps> = (props) => {
fallback={<span class="font-medium text-gray-400">-</span>}
>
<span
class={`font-medium ${
disk.temperature > 70
class={`font-medium ${disk.temperature > 70
? 'text-red-600 dark:text-red-400'
: disk.temperature > 60
? 'text-yellow-600 dark:text-yellow-400'

28
frontend-modern/src/components/Storage/Storage.tsx
View file

@ -750,30 +750,30 @@ const Storage: Component = () => {
<table class="w-full">
<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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto">
Storage
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden md:table-cell">
<th class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Type
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">
<th class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]">
Content
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">
<th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Status
</th>
<Show when={viewMode() === 'node'}>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">
<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%]">
Shared
</th>
</Show>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-[200px]">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] min-w-[150px]">
Usage
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">
<th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Free
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Total
</th>
<th class="px-2 py-1.5 w-8"></th>
@ -1109,12 +1109,12 @@ const Storage: Component = () => {
</Show>
</div>
</td>
<td class="p-0.5 px-1.5 hidden md:table-cell">
<td class="hidden md:table-cell p-0.5 px-1.5">
<span class="inline-block px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
{storage.type}
</span>
</td>
<td class="p-0.5 px-1.5 hidden lg:table-cell">
<td class="hidden lg:table-cell p-0.5 px-1.5">
<span
class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap truncate max-w-[220px]"
title={storage.content || '-'}
@ -1122,7 +1122,7 @@ const Storage: Component = () => {
{storage.content || '-'}
</span>
</td>
<td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
<td class="hidden sm:table-cell p-0.5 px-1.5 text-xs whitespace-nowrap">
<span
class={`${storage.status === 'available'
? 'text-green-600 dark:text-green-400'
@ -1133,7 +1133,7 @@ const Storage: Component = () => {
</span>
</td>
<Show when={viewMode() === 'node'}>
<td class="p-0.5 px-1.5 hidden lg:table-cell">
<td class="hidden lg:table-cell p-0.5 px-1.5">
<span class="text-xs text-gray-600 dark:text-gray-400">
{storage.shared ? '✓' : '-'}
</span>
@ -1141,7 +1141,7 @@ const Storage: Component = () => {
</Show>
<td class="p-0.5 px-1.5">
<div class="relative min-w-[200px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div class="relative min-w-[150px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div
class={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
style={{ width: `${usagePercent}%` }}
@ -1155,7 +1155,7 @@ const Storage: Component = () => {
</span>
</div>
</td>
<td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
<td class="hidden sm:table-cell p-0.5 px-1.5 text-xs whitespace-nowrap">
{formatBytes(storage.free || 0, 0)}
</td>
<td class="p-0.5 px-1.5 text-xs whitespace-nowrap">

33
frontend-modern/src/components/shared/NodeSummaryTable.tsx
View file

@ -356,42 +356,41 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
<>
<Card padding="none" class="mb-4 overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full min-w-[600px] table-fixed border-collapse">
<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-[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.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') : ''
aria-label={`Sort by name ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''
}`}
>
{props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}{' '}
{sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1.5 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 whitespace-nowrap"
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-[16%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
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-[16%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
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'}{' '}
@ -399,7 +398,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</th>
<Show when={hasAnyTemperatureData()}>
<th
class="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"
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')}
>
Temp{' '}
@ -409,7 +408,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
<For each={countColumns()}>
{(column) => (
<th
class="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"
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)}
>
{column.header}{' '}
@ -549,8 +548,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</Show>
<Show when={isPVE && node!.isClusterMember !== undefined}>
<span
class={`text-[9px] px-1 py-0 rounded text-[8px] font-medium whitespace-nowrap ${
node!.isClusterMember
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'
}`}
@ -570,10 +568,9 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</Show>
</div>
</td>
<td class="px-2 py-0.5 whitespace-nowrap">
<td class="hidden sm:table-cell px-2 py-0.5 whitespace-nowrap">
<span
class={`text-xs ${
isPVE && (node?.uptime ?? 0) < 3600
class={`text-xs ${isPVE && (node?.uptime ?? 0) < 3600
? 'text-orange-500'
: 'text-gray-600 dark:text-gray-400'
}`}
@ -624,7 +621,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
/>
</Show>
</td>
<td class="px-2 py-0.5">
<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>}
@ -639,7 +636,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</Show>
</td>
<Show when={hasAnyTemperatureData()}>
<td class="px-2 py-0.5 whitespace-nowrap text-center">
<td class="hidden lg:table-cell px-2 py-0.5 whitespace-nowrap text-center">
<Show
when={
online &&
@ -723,7 +720,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
? 'text-xs text-gray-700 dark:text-gray-300'
: 'text-xs text-gray-400 dark:text-gray-500';
return (
<td class="px-2 py-0.5 whitespace-nowrap text-center">
<td class="hidden lg:table-cell px-2 py-0.5 whitespace-nowrap text-center">
<span class={textClass}>{display}</span>
</td>
);