gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-22 19:23:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve: better categorization in threshold table

Browse Source 
- Changed from node-based grouping to type-based grouping
- Now shows three clear sections: Nodes, Guests, Storage (in that order)
- Guests now show "on <node>" to identify which node they belong to
- Within each section, resources are sorted by node first, then by name/vmid
- Cleaner visual hierarchy that's easier to understand

This makes the table structure more logical - you see all nodes together,
all guests together (but can still see which node they're on), and all
storage together.
This commit is contained in:
Pulse Monitor
2025-08-21 11:17:19 +00:00
parent 20de3a4626
commit 56549f0c95
1 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Alerts/ThresholdsTable.tsx
+39 -7
View File
@@ -258,7 +258,8 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
} else if (resource.type === 'storage') {
groupKey = 'Storage';
} else {
groupKey = 'node' in resource ? resource.node : 'Unknown';
// Group all guests together, but we'll show the node within the row
groupKey = 'Guests';
}
if (!groups[groupKey]) {
@@ -270,9 +271,27 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
// Sort resources within each group
Object.keys(groups).forEach(key => {
groups[key] = groups[key].sort((a, b) => {
if (a.type === 'node' && b.type !== 'node') return -1;
if (a.type !== 'node' && b.type === 'node') return 1;
if ('vmid' in a && 'vmid' in b && a.vmid && b.vmid) return a.vmid - b.vmid;
// For nodes, just sort by name
if (a.type === 'node' && b.type === 'node') {
return a.name.localeCompare(b.name);
}
// For guests, sort by node first, then by vmid
if (a.type === 'guest' && b.type === 'guest') {
const nodeCompare = (a.node || '').localeCompare(b.node || '');
if (nodeCompare !== 0) return nodeCompare;
if ('vmid' in a && 'vmid' in b && a.vmid && b.vmid) return a.vmid - b.vmid;
return a.name.localeCompare(b.name);
}
// For storage, sort by node first, then by name
if (a.type === 'storage' && b.type === 'storage') {
const nodeCompare = (a.node || '').localeCompare(b.node || '');
if (nodeCompare !== 0) return nodeCompare;
return a.name.localeCompare(b.name);
}
// Default comparison
return a.name.localeCompare(b.name);
});
});
@@ -899,8 +918,21 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<Show when={Object.keys(groupedResources()).length === 0} fallback={
<For each={Object.entries(groupedResources()).sort(([a], [b]) => {
if (a === 'Nodes') return -1;
if (b === 'Nodes') return 1;
// Define the order: Nodes, Guests, Storage
const order = ['Nodes', 'Guests', 'Storage'];
const aIndex = order.indexOf(a);
const bIndex = order.indexOf(b);
// If both are in the order array, sort by their position
if (aIndex !== -1 && bIndex !== -1) {
return aIndex - bIndex;
}
// If only one is in the order array, it comes first
if (aIndex !== -1) return -1;
if (bIndex !== -1) return 1;
// Otherwise, sort alphabetically
return a.localeCompare(b);
})}>
{([groupName, resources]) => (
@@ -948,7 +980,7 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
<Show when={'vmid' in resource && resource.vmid}>
<span class="text-xs text-gray-500">({resource.vmid})</span>
</Show>
<Show when={resource.type === 'storage' && 'node' in resource && resource.node}>
<Show when={(resource.type === 'guest' || resource.type === 'storage') && 'node' in resource && resource.node}>
<span class="text-xs text-gray-500">on {resource.node}</span>
</Show>
<Show when={(() => {