switch to select filters

web/frontend/src/status/dashdetails/HealthDash.svelte

@@ -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 tableStateFilter = $state(stateOptions[0]);
-  let tableHealthFilter = $state("");
+  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')}>
+              <th style="width: 9%; min-width: 100px; max-width:10%;" onclick={() => sortBy('hostname')}>
-                Host
+                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>