ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-25 12:59:06 +01:00
Code Issues Packages Releases Activity

display energySumary only if energy data is present

Browse Source
This commit is contained in:
Christoph Kluge 2024-09-30 16:43:38 +02:00
parent 218e56576a
commit a9868fd275
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/frontend/src/Job.root.svelte
View File

@ -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}

30
web/frontend/src/job/EnergySummary.svelte
View File

@ -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>