cleanup: remove inaccurate storage allocation features

removed expandable rows showing VM/container allocations since the API doesn't provide accurate VM-to-storage mapping. kept the filesystem type column for physical disks as that's useful information that is accurately provided.
This commit is contained in:
Pulse Monitor
2025-09-11 11:47:54 +00:00
parent c7bdf415c7
commit 4b76667701
2 changed files with 26 additions and 4 deletions
@@ -1,5 +1,6 @@
import { Component, For, Show, createMemo } from 'solid-js';
import { Component, For, Show, createMemo, createSignal } from 'solid-js';
import { formatBytes } from '@/utils/format';
import { useWebSocket } from '@/App';
import type { PhysicalDisk } from '@/types/api';
interface DiskListProps {
@@ -9,6 +10,8 @@ interface DiskListProps {
}
export const DiskList: Component<DiskListProps> = (props) => {
const { state } = useWebSocket();
// Filter disks based on selected node and search term
const filteredDisks = createMemo(() => {
let disks = props.disks || [];
@@ -102,10 +105,12 @@ export const DiskList: Component<DiskListProps> = (props) => {
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Device</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Model</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Type</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">FS</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Health</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">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">Temp</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Size</th>
<th class="px-2 py-1.5 w-8"></th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
@@ -114,7 +119,10 @@ export const DiskList: Component<DiskListProps> = (props) => {
const health = getHealthStatus(disk);
return (
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
<>
<tr
class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors"
>
<td class="px-2 py-1.5 text-xs">
<span class="font-medium text-gray-900 dark:text-gray-100">{disk.node}</span>
</td>
@@ -129,6 +137,13 @@ export const DiskList: Component<DiskListProps> = (props) => {
{disk.type.toUpperCase()}
</span>
</td>
<td class="px-2 py-1.5 text-xs">
<Show when={disk.used && disk.used !== 'unknown'} fallback={<span class="text-gray-400">-</span>}>
<span class="text-[10px] font-mono text-gray-600 dark:text-gray-400">
{disk.used}
</span>
</Show>
</td>
<td class="px-2 py-1.5 text-xs">
<span class={`inline-block px-1.5 py-0.5 text-[10px] font-medium rounded ${health.bgColor} ${health.color}`}>
{health.text}
@@ -168,7 +183,9 @@ export const DiskList: Component<DiskListProps> = (props) => {
<td class="px-2 py-1.5 text-xs">
<span class="text-gray-700 dark:text-gray-300">{formatBytes(disk.size)}</span>
</td>
<td class="px-2 py-1.5"></td>
</tr>
</>
);
}}
</For>
@@ -354,6 +354,7 @@ const Storage: Component = () => {
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-[200px]">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">Free</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Total</th>
<th class="px-2 py-1.5 w-8"></th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
@@ -403,7 +404,10 @@ const Storage: Component = () => {
return (
<>
<tr class={`${rowClass} hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors`} style={rowStyle()}>
<tr
class={`${rowClass} hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors`}
style={rowStyle()}
>
<td class={`p-0.5 ${alertStyles.hasAlert ? 'pl-3 pr-1.5' : 'px-1.5'}`}>
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
@@ -480,6 +484,7 @@ const Storage: Component = () => {
</td>
<td class="p-0.5 px-1.5 text-xs hidden sm:table-cell">{formatBytes(storage.free || 0)}</td>
<td class="p-0.5 px-1.5 text-xs">{formatBytes(storage.total || 0)}</td>
<td class="p-0.5 px-1.5"></td>
</tr>
<Show when={storage.zfsPool && (
storage.zfsPool.state !== 'ONLINE' ||
@@ -488,7 +493,7 @@ const Storage: Component = () => {
storage.zfsPool.checksumErrors > 0
)}>
<tr class="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500">
<td colspan="8" class="p-2">
<td colspan="9" class="p-2">
<div class="text-xs space-y-1">
<div class="flex items-center gap-2">
<span class="font-semibold text-yellow-700 dark:text-yellow-400">