ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29:05 +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> </Col>
</Row> </Row>
{#if $initq?.data} {#if $initq?.data && $initq.data.job.energyFootprint.length != 0}
<Row class="mb-3"> <Row class="mb-3">
<Col> <Col>
<EnergySummary job={$initq.data.job}/> <EnergySummary jobId={$initq.data.job.jobId} jobEnergy={$initq.data.job.energy} jobEnergyFootprint={$initq.data.job.energyFootprint}/>
</Col> </Col>
</Row> </Row>
{/if} {/if}

28
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: 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> <script>
@ -19,22 +21,24 @@
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
import { round } from "mathjs"; import { round } from "mathjs";
export let job; export let jobId;
export let jobEnergy = null;
export let jobEnergyFootprint = null;
const carbonPerkWh = getContext("emission"); const carbonPerkWh = getContext("emission");
let carbonMass; let carbonMass;
$: if (carbonPerkWh) { $: if (carbonPerkWh) {
// (( Wh / 1000 )* g/kWh) / 1000 = kg || Rounded to 2 Digits via [ round(x * 100) / 100 ] // (( 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> </script>
<Card> <Card>
<CardBody> <CardBody>
<Row> <Row>
{#each job.energyFootprint as efp} {#each jobEnergyFootprint as efp}
<Col class="text-center" id={`energy-footprint-${job.jobId}-${efp.hardware}`}> <Col class="text-center" id={`energy-footprint-${jobId}-${efp.hardware}`}>
<div class="cursor-help"> <div class="cursor-help">
{#if efp.hardware === 'CPU'} {#if efp.hardware === 'CPU'}
<Icon name="cpu-fill" style="font-size: 1.5rem;"/> <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> <div class="mr-2"><b>{efp.hardware}:</b> {efp.value} Wh (<i>{efp.metric}</i>)</div>
</Col> </Col>
<Tooltip <Tooltip
target={`energy-footprint-${job.jobId}-${efp.hardware}`} target={`energy-footprint-${jobId}-${efp.hardware}`}
placement="top" placement="top"
>Estimated energy consumption based on metric {efp.metric} and job runtime. >Estimated energy consumption based on metric {efp.metric} and job runtime.
</Tooltip> </Tooltip>
{/each} {/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"> <div class="cursor-help">
<Icon name="lightning-charge-fill" style="font-size: 1.5rem;"/> <Icon name="lightning-charge-fill" style="font-size: 1.5rem;"/>
</div> </div>
<hr class="mt-0 mb-1"/> <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> </Col>
{#if carbonPerkWh} {#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"> <div class="cursor-help">
<Icon name="cloud-fog2-fill" style="font-size: 1.5rem;"/> <Icon name="cloud-fog2-fill" style="font-size: 1.5rem;"/>
</div> </div>
@ -79,14 +83,14 @@
</Card> </Card>
<Tooltip <Tooltip
target={`energy-footprint-${job.jobId}-total`} target={`energy-footprint-${jobId}-total`}
placement="top" placement="top"
>Estimated total energy consumption of job. >Estimated total energy consumption of job.
</Tooltip> </Tooltip>
{#if carbonPerkWh} {#if carbonPerkWh}
<Tooltip <Tooltip
target={`energy-footprint-${job.jobId}-carbon`} target={`energy-footprint-${jobId}-carbon`}
placement="top" placement="top"
>Estimated emission based on supplier energy mix ({carbonPerkWh} g/kWh) and total energy consumption. >Estimated emission based on supplier energy mix ({carbonPerkWh} g/kWh) and total energy consumption.
</Tooltip> </Tooltip>