add energy filterr in new component

api/schema.graphqls

@@ -265,6 +265,7 @@ input JobFilter {
   cluster:     StringInput
   partition:   StringInput
   duration:    IntRange
+  energy:      FloatRange
 
   minRunningFor: Int
 

internal/graph/generated/generated.go

@@ -2153,6 +2153,7 @@ input JobFilter {
   cluster:     StringInput
   partition:   StringInput
   duration:    IntRange
+  energy:      FloatRange
 
   minRunningFor: Int
 
@@ -13452,7 +13453,7 @@ func (ec *executionContext) unmarshalInputJobFilter(ctx context.Context, obj int
 		asMap[k] = v
 	}
 
-	fieldsInOrder := [...]string{"tags", "jobId", "arrayJobId", "user", "project", "jobName", "cluster", "partition", "duration", "minRunningFor", "numNodes", "numAccelerators", "numHWThreads", "startTime", "state", "metricStats", "exclusive", "node"}
+	fieldsInOrder := [...]string{"tags", "jobId", "arrayJobId", "user", "project", "jobName", "cluster", "partition", "duration", "energy", "minRunningFor", "numNodes", "numAccelerators", "numHWThreads", "startTime", "state", "metricStats", "exclusive", "node"}
 	for _, k := range fieldsInOrder {
 		v, ok := asMap[k]
 		if !ok {
@@ -13522,6 +13523,13 @@ func (ec *executionContext) unmarshalInputJobFilter(ctx context.Context, obj int
 				return it, err
 			}
 			it.Duration = data
+		case "energy":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("energy"))
+			data, err := ec.unmarshalOFloatRange2ᚖgithubᚗcomᚋClusterCockpitᚋccᚑbackendᚋinternalᚋgraphᚋmodelᚐFloatRange(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Energy = data
 		case "minRunningFor":
 			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("minRunningFor"))
 			data, err := ec.unmarshalOInt2ᚖint(ctx, v)
@@ -18550,6 +18558,14 @@ func (ec *executionContext) marshalOFloat2float64(ctx context.Context, sel ast.S
 	return graphql.WrapContextMarshaler(ctx, res)
 }
 
+func (ec *executionContext) unmarshalOFloatRange2ᚖgithubᚗcomᚋClusterCockpitᚋccᚑbackendᚋinternalᚋgraphᚋmodelᚐFloatRange(ctx context.Context, v interface{}) (*model.FloatRange, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := ec.unmarshalInputFloatRange(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) marshalOFootprintValue2ᚕᚖgithubᚗcomᚋClusterCockpitᚋccᚑbackendᚋinternalᚋgraphᚋmodelᚐFootprintValue(ctx context.Context, sel ast.SelectionSet, v []*model.FootprintValue) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null

internal/graph/model/models_gen.go

@@ -58,6 +58,7 @@ type JobFilter struct {
 	Cluster         *StringInput      `json:"cluster,omitempty"`
 	Partition       *StringInput      `json:"partition,omitempty"`
 	Duration        *schema.IntRange  `json:"duration,omitempty"`
+	Energy          *FloatRange       `json:"energy,omitempty"`
 	MinRunningFor   *int              `json:"minRunningFor,omitempty"`
 	NumNodes        *schema.IntRange  `json:"numNodes,omitempty"`
 	NumAccelerators *schema.IntRange  `json:"numAccelerators,omitempty"`

internal/repository/jobQuery.go

@@ -192,6 +192,9 @@ func BuildWhereClause(filter *model.JobFilter, query sq.SelectBuilder) sq.Select
 	if filter.Node != nil {
 		query = buildStringCondition("job.resources", filter.Node, query)
 	}
+	if filter.Energy != nil {
+		query = buildFloatCondition("job.energy", filter.Energy, query)
+	}
 	if filter.MetricStats != nil {
 		for _, ms := range filter.MetricStats {
 			query = buildFloatJsonCondition(ms.MetricName, ms.Range, query)
@@ -204,6 +207,10 @@ func buildIntCondition(field string, cond *schema.IntRange, query sq.SelectBuild
 	return query.Where(field+" BETWEEN ? AND ?", cond.From, cond.To)
 }
 
+func buildFloatCondition(field string, cond *model.FloatRange, query sq.SelectBuilder) sq.SelectBuilder {
+	return query.Where(field+" BETWEEN ? AND ?", cond.From, cond.To)
+}
+
 func buildTimeCondition(field string, cond *schema.TimeRange, query sq.SelectBuilder) sq.SelectBuilder {
 	if cond.From != nil && cond.To != nil {
 		return query.Where(field+" BETWEEN ? AND ?", cond.From.Unix(), cond.To.Unix())

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>