From a9868fd275791f49ff169b3bf0952a334daf2b77 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 30 Sep 2024 16:43:38 +0200
Subject: [PATCH] display energySumary only if energy data is present

---
 web/frontend/src/Job.root.svelte          |  4 +--
 web/frontend/src/job/EnergySummary.svelte | 30 +++++++++++++----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 899d5af..9601e9c 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -310,10 +310,10 @@
   </Col>
 </Row>
 
-{#if $initq?.data}
+{#if $initq?.data && $initq.data.job.energyFootprint.length != 0}
   <Row class="mb-3">
     <Col>
-      <EnergySummary job={$initq.data.job}/>
+      <EnergySummary jobId={$initq.data.job.jobId} jobEnergy={$initq.data.job.energy} jobEnergyFootprint={$initq.data.job.energyFootprint}/>
     </Col>
   </Row>
 {/if}
diff --git a/web/frontend/src/job/EnergySummary.svelte b/web/frontend/src/job/EnergySummary.svelte
index e614865..099cb57 100644
--- a/web/frontend/src/job/EnergySummary.svelte
+++ b/web/frontend/src/job/EnergySummary.svelte
@@ -1,8 +1,10 @@
 <!--
-    @component Energy Summary component; Displays job.footprint data as bars in relation to thresholds, as polar plot, and summariziong comment
+    @component Energy Summary component; Displays job energy information.
 
     Properties:
-    - `job Object`: The GQL job object
+    - `jobId Number`: The job id
+    - `jobEnergy Number?`: The total job energy [Default: null]
+    - `jobEnergyFootprint [Object]?`: The partial job energy contributions [Default: null]
  -->
 
 <script>
@@ -19,22 +21,24 @@
   } from "@sveltestrap/sveltestrap";
   import { round } from "mathjs";
 
-  export let job;
-  
+  export let jobId;
+  export let jobEnergy = null;
+  export let jobEnergyFootprint = null;
+
   const carbonPerkWh = getContext("emission");
   let carbonMass;
 
   $: if (carbonPerkWh) {
     // (( Wh / 1000 )* g/kWh) / 1000 = kg || Rounded to 2 Digits via [ round(x * 100) / 100 ]
-    carbonMass = round( (((job?.energy ? job.energy : 0.0) / 1000 ) * carbonPerkWh) / 10 ) / 100;
+    carbonMass = round( (((jobEnergy ? jobEnergy : 0.0) / 1000 ) * carbonPerkWh) / 10 ) / 100;
   }
 </script>
 
 <Card>
   <CardBody>
     <Row>
-      {#each job.energyFootprint as efp}
-        <Col class="text-center" id={`energy-footprint-${job.jobId}-${efp.hardware}`}>
+      {#each jobEnergyFootprint as efp}
+        <Col class="text-center" id={`energy-footprint-${jobId}-${efp.hardware}`}>
           <div class="cursor-help">
             {#if efp.hardware === 'CPU'}
               <Icon name="cpu-fill" style="font-size: 1.5rem;"/>
@@ -53,20 +57,20 @@
           <div class="mr-2"><b>{efp.hardware}:</b> {efp.value} Wh (<i>{efp.metric}</i>)</div>
         </Col>
         <Tooltip
-          target={`energy-footprint-${job.jobId}-${efp.hardware}`}
+          target={`energy-footprint-${jobId}-${efp.hardware}`}
           placement="top"
           >Estimated energy consumption based on metric {efp.metric} and job runtime.
         </Tooltip>
       {/each}
-      <Col class="text-center cursor-help" id={`energy-footprint-${job.jobId}-total`}>
+      <Col class="text-center cursor-help" id={`energy-footprint-${jobId}-total`}>
         <div class="cursor-help">
           <Icon name="lightning-charge-fill" style="font-size: 1.5rem;"/>
         </div>
         <hr class="mt-0 mb-1"/>
-        <div><b>Total Energy:</b> {job?.energy? job.energy : 0} Wh</div>
+        <div><b>Total Energy:</b> {jobEnergy? jobEnergy : 0} Wh</div>
       </Col>
       {#if carbonPerkWh}
-        <Col class="text-center cursor-help" id={`energy-footprint-${job.jobId}-carbon`}>
+        <Col class="text-center cursor-help" id={`energy-footprint-${jobId}-carbon`}>
           <div class="cursor-help">
             <Icon name="cloud-fog2-fill" style="font-size: 1.5rem;"/>
           </div>
@@ -79,14 +83,14 @@
 </Card>
 
 <Tooltip
-  target={`energy-footprint-${job.jobId}-total`}
+  target={`energy-footprint-${jobId}-total`}
   placement="top"
   >Estimated total energy consumption of job.
 </Tooltip>
 
 {#if carbonPerkWh}
   <Tooltip
-    target={`energy-footprint-${job.jobId}-carbon`}
+    target={`energy-footprint-${jobId}-carbon`}
     placement="top"
   >Estimated emission based on supplier energy mix ({carbonPerkWh} g/kWh) and total energy consumption.
   </Tooltip>