Add select all / none checkbox to metric selection in job view

Author: Michael Schwarz

web/frontend/public/global.css

@@ -70,3 +70,7 @@ footer {
     margin: 0rem 0.8rem;
     white-space: nowrap;
 }
+
+.modal {
+	--bs-modal-width: 600px;
+}

web/frontend/src/generic/select/MetricSelection.svelte

@@ -129,11 +129,18 @@
       }
     });
   }
+
+  let selected = []
+  function toggleAll(e) {
+    unorderedMetrics = e.target.checked ? [...newMetricsOrder] : [];
+  }
+
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
   <ModalHeader>Configure columns (Metric availability shown)</ModalHeader>
   <ModalBody>
+    <input type="checkbox" on:change={toggleAll} checked={selected.length == newMetricsOrder.length} /> (De-)select all
     <ListGroup>
       {#if footprintSelect}
         <li class="list-group-item">
@@ -154,13 +161,15 @@
           {#if unorderedMetrics.includes(metric)}
             <input
               type="checkbox"
+              name={metric}
               bind:group={unorderedMetrics}
               value={metric}
               checked
             />
           {:else}
             <input
               type="checkbox"
+              name={metric}
               bind:group={unorderedMetrics}
               value={metric}
             />