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

add icons to energySummary component

Browse Source
This commit is contained in:
Christoph Kluge 2024-09-30 12:27:32 +02:00
parent 183b310696
commit dcb8308f35
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/graph/schema.resolvers.go
View File

@ -99,7 +99,7 @@ func (r *jobResolver) EnergyFootprint(ctx context.Context, obj *schema.Job) ([]*
case matchCore.MatchString(test): case matchCore.MatchString(test):
hwType = "Core" hwType = "Core"
default: default:
hwType = "Hardware" hwType = "Other"
} }
res = append(res, &model.EnergyFootprintValue{ res = append(res, &model.EnergyFootprintValue{

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

@ -15,6 +15,7 @@
Tooltip, Tooltip,
Row, Row,
Col, Col,
Icon
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
import { round } from "mathjs"; import { round } from "mathjs";
@ -34,7 +35,22 @@
<Row> <Row>
{#each job.energyFootprint as efp} {#each job.energyFootprint as efp}
<Col class="text-center" id={`energy-footprint-${job.jobId}-${efp.hardware}`}> <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> </Col>
<Tooltip <Tooltip
target={`energy-footprint-${job.jobId}-${efp.hardware}`} target={`energy-footprint-${job.jobId}-${efp.hardware}`}
@ -42,12 +58,20 @@
>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" id={`energy-footprint-${job.jobId}-total`}> <Col class="text-center cursor-help" id={`energy-footprint-${job.jobId}-total`}>
<div class="cursor-help"><b>Total Energy:</b> {job?.energy? job.energy : 0} Wh</div> <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> </Col>
{#if carbonPerkWh} {#if carbonPerkWh}
<Col class="text-center" id={`energy-footprint-${job.jobId}-carbon`}> <Col class="text-center cursor-help" id={`energy-footprint-${job.jobId}-carbon`}>
<div class="cursor-help"><b>Carbon Emission:</b> {carbonMass} kg</div> <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> </Col>
{/if} {/if}
</Row> </Row>