Small migrations and added migration note

This commit is contained in:
Christoph Kluge 2025-06-13 14:39:55 +02:00
parent ad108b285f
commit 27ec445e54
4 changed files with 97 additions and 72 deletions

View File

@ -14,6 +14,17 @@
export let itemsPerRow export let itemsPerRow
export let items export let items
/* Migtation Notes
* Requirements
* - Parent Components must be already Migrated
* - TODO: Job.root.svelte, Node.root.svelte
*
* How-To
* - Define "Plot-Slotcode" as SV5 Snippet with argument "item" in parent (!)
* - Pass new snippet as argument/prop to here
* - @render snippet in items-loop with argument == item
*/
</script> </script>
<Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}> <Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>

View File

@ -17,11 +17,14 @@
Icon Icon
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
export let cJobs; /* Svelte 5 Props */
export let showLinks = false; let {
export let renderCard = false; cJobs,
export let width = "auto"; showLinks = false,
export let height = "400px"; renderCard = false,
width = "auto",
height = "400px",
} = $props();
</script> </script>
{#if renderCard} {#if renderCard}

View File

@ -23,12 +23,20 @@
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
import { findJobFootprintThresholds } from "../utils.js"; import { findJobFootprintThresholds } from "../utils.js";
export let job; /* Svelte 5 Props */
export let displayTitle = true; let {
export let width = "auto"; job,
export let height = "310px"; displayTitle = true,
width = "auto",
height = "310px",
} = $props();
const footprintData = job?.footprint?.map((jf) => { /* Derived */
const footprintData = $derived(buildFootprint(job?.footprint));
/* Functions */
function buildFootprint(input) {
let result = input?.map((jf) => {
const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name); const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
if (fmc) { if (fmc) {
// Unit // Unit
@ -97,6 +105,9 @@
return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)); return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
});; });;
return result;
};
function evalFootprint(value, thresholds, lowerIsBetter, level) { function evalFootprint(value, thresholds, lowerIsBetter, level) {
// Handle Metrics in which less value is better // Handle Metrics in which less value is better
switch (level) { switch (level) {
@ -176,7 +187,7 @@
>{fpd.message}</Tooltip >{fpd.message}</Tooltip
> >
</div> </div>
<Row cols={12} class="{(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}"> <Row cols={12} class={(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}>
{#if fpd.dir} {#if fpd.dir}
<Col xs="1"> <Col xs="1">
<Icon name="caret-left-fill" /> <Icon name="caret-left-fill" />

View File

@ -306,7 +306,7 @@
{#if data && data[0].length > 0} {#if data && data[0].length > 0}
<div bind:this={plotWrapper} bind:clientWidth={width} <div bind:this={plotWrapper} bind:clientWidth={width}
style="background-color: rgba(255, 255, 255, 1.0);" class="rounded" style="background-color: rgba(255, 255, 255, 1.0);" class="rounded"
/> ></div>
{:else} {:else}
<Card body color="warning" class="mx-4 my-2" <Card body color="warning" class="mx-4 my-2"
>Cannot render plot: No series data returned for <code>{metric?metric:'job resources'}</code></Card >Cannot render plot: No series data returned for <code>{metric?metric:'job resources'}</code></Card