add energy filterr in new component

web/frontend/src/generic/Filters.svelte

@@ -32,6 +32,7 @@
   import StartTime from "./filters/StartTime.svelte";
   import Tags from "./filters/Tags.svelte";
   import Duration from "./filters/Duration.svelte";
+  import Energy from "./filters/Energy.svelte";
   import Resources from "./filters/Resources.svelte";
   import Statistics from "./filters/Stats.svelte";
 
@@ -68,6 +69,7 @@
     jobName: filterPresets.jobName || "",
 
     node: filterPresets.node || null,
+    energy: filterPresets.energy || { from: null, to: null },
     numNodes: filterPresets.numNodes || { from: null, to: null },
     numHWThreads: filterPresets.numHWThreads || { from: null, to: null },
     numAccelerators: filterPresets.numAccelerators || { from: null, to: null },
@@ -80,6 +82,7 @@
     isStartTimeOpen = false,
     isTagsOpen = false,
     isDurationOpen = false,
+    isEnergyOpen = false,
     isResourcesOpen = false,
     isStatsOpen = false,
     isNodesModified = false,
@@ -110,6 +113,10 @@
       items.push({ duration: { from: 0, to: filters.duration.lessThan } });
     if (filters.duration.moreThan)
       items.push({ duration: { from: filters.duration.moreThan, to: 604800 } }); // 7 days to include special jobs with long runtimes
+    if (filters.energy.from || filters.energy.to)
+      items.push({
+        energy: { from: filters.energy.from, to: filters.energy.to },
+      });
     if (filters.jobId)
       items.push({ jobId: { [filters.jobIdMatch]: filters.jobId } });
     if (filters.arrayJobId != null)
@@ -181,6 +188,8 @@
       opts.push(`duration=0-${filters.duration.lessThan}`);
     if (filters.duration.moreThan)
       opts.push(`duration=${filters.duration.moreThan}-604800`);
+    if (filters.energy.from && filters.energy.to)
+      opts.push(`energy=${filters.energy.from}-${filters.energy.to}`);
     if (filters.numNodes.from && filters.numNodes.to)
       opts.push(`numNodes=${filters.numNodes.from}-${filters.numNodes.to}`);
     if (filters.numAccelerators.from && filters.numAccelerators.to)
@@ -239,6 +248,9 @@
         <DropdownItem on:click={() => (isResourcesOpen = true)}>
           <Icon name="hdd-stack" /> Resources
         </DropdownItem>
+        <DropdownItem on:click={() => (isEnergyOpen = true)}>
+          <Icon name="lightning-charge-fill" /> Energy
+        </DropdownItem>
         <DropdownItem on:click={() => (isStatsOpen = true)}>
           <Icon name="bar-chart" on:click={() => (isStatsOpen = true)} /> Statistics
         </DropdownItem>
@@ -354,6 +366,12 @@
       </Info>
     {/if}
 
+    {#if filters.energy.from || filters.energy.to}
+      <Info icon="lightning-charge-fill" on:click={() => (isEnergyOpen = true)}>
+        Total Energy: {filters.energy.from} - {filters.energy.to}
+      </Info>
+    {/if}
+
     {#if filters.stats.length > 0}
       <Info icon="bar-chart" on:click={() => (isStatsOpen = true)}>
         {filters.stats
@@ -423,6 +441,12 @@
   on:set-filter={() => updateFilters()}
 />
 
+<Energy
+  bind:isOpen={isEnergyOpen}
+  bind:energy={filters.energy}
+  on:set-filter={() => updateFilters()}
+/>
+
 <style>
   :global(.cc-dropdown-on-hover:hover .dropdown-menu) {
     display: block;

web/frontend/src/generic/filters/Energy.svelte

@@ -0,0 +1,70 @@
+<!--
+    @component Filter sub-component for selecting job energies
+
+    Properties:
+    - `isOpen Bool?`: Is this filter component opened [Default: false]
+    - `energy Object?`: The currently selected total energy filter [Default: {from:null, to:null}]
+
+    Events:
+    - `set-filter, {Object}`: Set 'energy' filter in upstream component
+ -->
+
+<script>
+  import { createEventDispatcher } from "svelte";
+  import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalHeader,
+    ModalFooter,
+  } from "@sveltestrap/sveltestrap";
+  import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  const energyMaximum = 1000.0;
+
+  export let isOpen = false;
+  export let energy= {from: null, to: null};
+
+  function resetRanges() {
+      energy.from = null
+      energy.to = null
+  }
+</script>
+
+<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
+  <ModalHeader>Filter based on energy</ModalHeader>
+  <ModalBody>
+    <h4>Total Job Energy (kWh)</h4>
+    <DoubleRangeSlider
+      on:change={({ detail }) => (
+        (energy.from = detail[0]), (energy.to = detail[1])
+      )}
+      min={0.0}
+      max={energyMaximum}
+      firstSlider={energy?.from ? energy.from : 0.0}
+      secondSlider={energy?.to ? energy.to : energyMaximum}
+      inputFieldFrom={energy?.from ? energy.from : null}
+      inputFieldTo={energy?.to ? energy.to : null}
+    />
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      color="primary"
+      on:click={() => {
+        isOpen = false;
+        dispatch("set-filter", { energy });
+      }}>Close & Apply</Button
+    >
+    <Button
+      color="danger"
+      on:click={() => {
+        isOpen = false;
+        resetRanges();
+        dispatch("set-filter", { energy });
+      }}>Reset</Button
+    >
+    <Button on:click={() => (isOpen = false)}>Close</Button>
+  </ModalFooter>
+</Modal>

web/frontend/src/generic/filters/Stats.svelte

@@ -55,7 +55,7 @@
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
-  <ModalHeader>Filter based on statistics (of non-running jobs)</ModalHeader>
+  <ModalHeader>Filter based on statistics</ModalHeader>
   <ModalBody>
     {#each statistics as stat}
       <h4>{stat.text}</h4>