ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-02-20 17:57:30 +01:00
Code Issues Packages Releases Activity

switch to select filters

Browse Source
This commit is contained in:
Christoph Kluge
2026-02-19 13:00:51 +01:00
parent 90b52f997d
commit 62cd21eb83
1 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/frontend/src/status/dashdetails/HealthDash.svelte
View File

@@ -32,12 +32,27 @@
/* Const Init */
const client = getContextClient();
const stateOptions = [
"all",
"allocated",
"idle",
"down",
"mixed",
"reserved",
"unknown",
];
const healthOptions = [
"all",
"full",
"partial",
"failed",
];
/* State Init */
let pieWidth = $state(0);
let tableHostFilter = $state("");
let tableStateFilter = $state("");
let tableHealthFilter = $state("");
let tableStateFilter = $state(stateOptions[0]);
let tableHealthFilter = $state(healthOptions[0]);
let healthTableSorting = $state(
{
schedulerState: { dir: "down", active: true },
@@ -98,10 +113,10 @@
if (tableHostFilter != "") {
pendingTableData = pendingTableData.filter((e) => e.hostname.includes(tableHostFilter))
}
if (tableStateFilter != "") {
if (tableStateFilter != "all") {
pendingTableData = pendingTableData.filter((e) => e.schedulerState.includes(tableStateFilter))
}
if (tableHealthFilter != "") {
if (tableHealthFilter != "all") {
pendingTableData = pendingTableData.filter((e) => e.healthState.includes(tableHealthFilter))
}
return pendingTableData
@@ -280,8 +295,8 @@
<thead>
<!-- Header Row 1: Titles and Sorting -->
<tr>
<th style="width: 7.5%; min-width: 100px; max-width:10%;" onclick={() => sortBy('hostname')}>
Host
<th style="width: 9%; min-width: 100px; max-width:10%;" onclick={() => sortBy('hostname')}>
Hosts ({filteredTableData.length})
<Icon
name="caret-{healthTableSorting['hostname'].dir}{healthTableSorting['hostname']
.active
@@ -289,7 +304,7 @@
: ''}"
/>
</th>
<th style="width: 8.5%; min-width: 100px; max-width:10%;" onclick={() => sortBy('schedulerState')}>
<th style="width: 9%; min-width: 100px; max-width:10%;" onclick={() => sortBy('schedulerState')}>
Scheduler State
<Icon
name="caret-{healthTableSorting['schedulerState'].dir}{healthTableSorting['schedulerState']
@@ -298,7 +313,7 @@
: ''}"
/>
</th>
<th style="width: 7.5%; min-width: 100px; max-width:10%;" onclick={() => sortBy('healthState')}>
<th style="width: 9%; min-width: 100px; max-width:10%;" onclick={() => sortBy('healthState')}>
Health State
<Icon
name="caret-{healthTableSorting['healthState'].dir}{healthTableSorting['healthState']
@@ -322,7 +337,11 @@
</th>
<th>
<InputGroup size="sm">
<Input type="text" bind:value={tableStateFilter}/>
<Input type="select" bind:value={tableStateFilter}>
{#each stateOptions as so}
<option value={so}>{so}</option>
{/each}
</Input>
<InputGroupText>
<Icon name="search"></Icon>
</InputGroupText>
@@ -330,7 +349,11 @@
</th>
<th>
<InputGroup size="sm">
<Input type="text" bind:value={tableHealthFilter}/>
<Input type="select" bind:value={tableHealthFilter}>
{#each healthOptions as ho}
<option value={ho}>{ho}</option>
{/each}
</Input>
<InputGroupText>
<Icon name="search"></Icon>
</InputGroupText>