From dcb8308f35a3c32a18fc7463dd785d8be496df44 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 30 Sep 2024 12:27:32 +0200
Subject: [PATCH] add icons to energySummary component

---
 internal/graph/schema.resolvers.go        |  2 +-
 web/frontend/src/job/EnergySummary.svelte | 34 +++++++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/internal/graph/schema.resolvers.go b/internal/graph/schema.resolvers.go
index 8c5ee0d..bde7013 100644
--- a/internal/graph/schema.resolvers.go
+++ b/internal/graph/schema.resolvers.go
@@ -99,7 +99,7 @@ func (r *jobResolver) EnergyFootprint(ctx context.Context, obj *schema.Job) ([]*
 		case matchCore.MatchString(test):
 			hwType = "Core"
 		default:
-			hwType = "Hardware"
+			hwType = "Other"
 		}
 
 		res = append(res, &model.EnergyFootprintValue{
diff --git a/web/frontend/src/job/EnergySummary.svelte b/web/frontend/src/job/EnergySummary.svelte
index 70e419f..e614865 100644
--- a/web/frontend/src/job/EnergySummary.svelte
+++ b/web/frontend/src/job/EnergySummary.svelte
@@ -15,6 +15,7 @@
     Tooltip,
     Row,
     Col,
+    Icon
   } from "@sveltestrap/sveltestrap";
   import { round } from "mathjs";
 
@@ -34,7 +35,22 @@
     <Row>
       {#each job.energyFootprint as efp}
         <Col class="text-center" id={`energy-footprint-${job.jobId}-${efp.hardware}`}>
-          <div class="cursor-help mr-2"><b>{efp.hardware}:</b> {efp.value} Wh (<i>{efp.metric}</i>)</div>
+          <div class="cursor-help">
+            {#if efp.hardware === 'CPU'}
+              <Icon name="cpu-fill" style="font-size: 1.5rem;"/>
+            {:else if efp.hardware === 'Accelerator'}
+              <Icon name="gpu-card" style="font-size: 1.5rem;"/>
+            {:else if efp.hardware === 'Memory'}
+              <Icon name="memory" style="font-size: 1.5rem;"/>
+            {:else if efp.hardware === 'Core'}
+              <Icon name="grid-fill" style="font-size: 1.5rem;"/>
+            {:else}
+              <Icon name="pci-card" style="font-size: 1.5rem;"/>
+            {/if}
+            <Icon name="plug-fill" style="font-size: 1.5rem;"/>
+          </div>
+          <hr class="mt-0 mb-1"/>
+          <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}`}
@@ -42,12 +58,20 @@
           >Estimated energy consumption based on metric {efp.metric} and job runtime.
         </Tooltip>
       {/each}
-      <Col class="text-center" id={`energy-footprint-${job.jobId}-total`}>
-        <div class="cursor-help"><b>Total Energy:</b> {job?.energy? job.energy : 0} Wh</div>
+      <Col class="text-center cursor-help" id={`energy-footprint-${job.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>
       </Col>
       {#if carbonPerkWh}
-        <Col class="text-center" id={`energy-footprint-${job.jobId}-carbon`}>
-          <div class="cursor-help"><b>Carbon Emission:</b> {carbonMass} kg</div>
+        <Col class="text-center cursor-help" id={`energy-footprint-${job.jobId}-carbon`}>
+          <div class="cursor-help">
+            <Icon name="cloud-fog2-fill" style="font-size: 1.5rem;"/>
+          </div>
+          <hr class="mt-0 mb-1"/>
+          <div><b>Carbon Emission:</b> {carbonMass} kg</div>
         </Col>
       {/if}
     </Row>