feat: split concurrent jobs list to own scrollable component

This commit is contained in:
Christoph Kluge 2024-09-04 10:23:23 +02:00
parent 508978d586
commit 398e3c1b91
2 changed files with 83 additions and 36 deletions

View File

@ -38,6 +38,7 @@
import TagManagement from "./job/TagManagement.svelte"; import TagManagement from "./job/TagManagement.svelte";
import StatsTable from "./job/StatsTable.svelte"; import StatsTable from "./job/StatsTable.svelte";
import JobFootprint from "./generic/helper/JobFootprint.svelte"; import JobFootprint from "./generic/helper/JobFootprint.svelte";
import ConcurrentJobs from "./generic/helper/ConcurrentJobs.svelte";
import PlotTable from "./generic/PlotTable.svelte"; import PlotTable from "./generic/PlotTable.svelte";
import Polar from "./generic/plots/Polar.svelte"; import Polar from "./generic/plots/Polar.svelte";
import Roofline from "./generic/plots/Roofline.svelte"; import Roofline from "./generic/plots/Roofline.svelte";
@ -250,42 +251,9 @@
{/if} {/if}
{#if $initq?.data && $jobMetrics?.data?.jobMetrics} {#if $initq?.data && $jobMetrics?.data?.jobMetrics}
{#if $initq.data.job.concurrentJobs != null && $initq.data.job.concurrentJobs.items.length != 0} {#if $initq.data.job.concurrentJobs != null && $initq.data.job.concurrentJobs.items.length != 0}
{#if authlevel > roles.manager} <Col>
<Col> <ConcurrentJobs cJobs={$initq.data.job.concurrentJobs} showLinks={(authlevel > roles.manager)}/>
<h5> </Col>
Concurrent Jobs <Icon
name="info-circle"
style="cursor:help;"
title="Shared jobs running on the same node with overlapping runtimes"
/>
</h5>
<ul>
<li>
<a
href="/monitoring/jobs/?{$initq.data.job.concurrentJobs
.listQuery}"
target="_blank">See All</a
>
</li>
{#each $initq.data.job.concurrentJobs.items as pjob, index}
<li>
<a href="/monitoring/job/{pjob.id}" target="_blank"
>{pjob.jobId}</a
>
</li>
{/each}
</ul>
</Col>
{:else}
<Col>
<h5>
{$initq.data.job.concurrentJobs.items.length} Concurrent Jobs
</h5>
<p>
Number of shared jobs on the same node with overlapping runtimes.
</p>
</Col>
{/if}
{/if} {/if}
<Col> <Col>
<Polar <Polar

View File

@ -0,0 +1,79 @@
<!--
@component Concurrent Jobs Component; Lists all concurrent jobs in one scrollable card.
Properties:
- `cJobs JobLinkResultList`: List of concurrent Jobs
- `showLinks Bool?`: Show list as clickable links [Default: false]
- `displayTitle Bool?`: If to display cardHeader with title [Default: true]
- `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '310px']
-->
<script>
import {
Card,
CardHeader,
CardTitle,
CardBody,
Icon
} from "@sveltestrap/sveltestrap";
export let cJobs;
export let showLinks = false;
export let displayTitle = true;
export let width = "auto";
export let height = "310px";
</script>
<Card class="mt-1 overflow-auto" style="width: {width}; height: {height}">
{#if displayTitle}
<CardHeader>
<CardTitle class="mb-0 d-flex justify-content-center">
{cJobs.items.length} Concurrent Jobs
<Icon
style="cursor:help; margin-left:0.5rem;"
name="info-circle"
title="Jobs running on the same node with overlapping runtimes using shared resources"
/>
</CardTitle>
</CardHeader>
{/if}
<CardBody>
{#if showLinks}
<ul>
<li>
<a
href="/monitoring/jobs/?{cJobs.listQuery}"
target="_blank">See All</a
>
</li>
{#each cJobs.items as cJob}
<li>
<a href="/monitoring/job/{cJob.id}" target="_blank"
>{cJob.jobId}</a
>
</li>
{/each}
</ul>
{:else}
{#if displayTitle}
<p>
Jobs running on the same node with overlapping runtimes using shared resources.
</p>
{:else}
<p>
<b>{cJobs.items.length} </b>
Jobs running on the same node with overlapping runtimes using shared resources.
</p>
{/if}
{/if}
</CardBody>
</Card>
<style>
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
</style>