rework job view header, change footprint to summary component

This commit is contained in:
Christoph Kluge
2024-09-05 16:44:03 +02:00
parent 398e3c1b91
commit df484dc816
7 changed files with 626 additions and 177 deletions

View File

@@ -13,62 +13,86 @@
import {
Card,
CardHeader,
CardTitle,
CardBody,
Icon
} from "@sveltestrap/sveltestrap";
export let cJobs;
export let showLinks = false;
export let displayTitle = true;
export let renderCard = false;
export let width = "auto";
export let height = "310px";
export let height = "400px";
</script>
<Card class="mt-1 overflow-auto" style="width: {width}; height: {height}">
{#if displayTitle}
<CardHeader>
<CardTitle class="mb-0 d-flex justify-content-center">
{#if renderCard}
<Card class="overflow-auto" style="width: {width}; height: {height}">
<CardHeader 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}
<CardBody>
{#if showLinks}
<ul>
<li>
<a href="/monitoring/job/{cJob.id}" target="_blank"
>{cJob.jobId}</a
<a
href="/monitoring/jobs/?{cJobs.listQuery}"
target="_blank">See All</a
>
</li>
{/each}
</ul>
{:else}
{#if displayTitle}
<p>
Jobs running on the same node with overlapping runtimes using shared resources.
</p>
{#each cJobs.items as cJob}
<li>
<a href="/monitoring/job/{cJob.id}" target="_blank"
>{cJob.jobId}</a
>
</li>
{/each}
</ul>
{:else}
<p>
<b>{cJobs.items.length} </b>
Jobs running on the same node with overlapping runtimes using shared resources.
</p>
<ul>
{#each cJobs.items as cJob}
<li>
{cJob.jobId}
</li>
{/each}
</ul>
{/if}
{/if}
</CardBody>
</Card>
</CardBody>
</Card>
{:else}
<p>
Jobs running on the same node with overlapping runtimes using shared resources.
</p>
<hr/>
{#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}
<ul>
{#each cJobs.items as cJob}
<li>
{cJob.jobId}
</li>
{/each}
</ul>
{/if}
{/if}
<style>
ul {