mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 13:29:05 +01:00
feat: split concurrent jobs list to own scrollable component
This commit is contained in:
parent
508978d586
commit
398e3c1b91
@ -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
|
||||||
|
79
web/frontend/src/generic/helper/ConcurrentJobs.svelte
Normal file
79
web/frontend/src/generic/helper/ConcurrentJobs.svelte
Normal 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>
|
Loading…
Reference in New Issue
Block a user