Improve grid scaling

This commit is contained in:
Christoph Kluge 2024-09-06 12:00:33 +02:00
parent df484dc816
commit 8e1c5a485f
3 changed files with 34 additions and 38 deletions

View File

@ -59,7 +59,8 @@
let plots = {},
jobTags,
statsTable
statsTable,
roofWidth
let missingMetrics = [],
missingHosts = [],
@ -231,9 +232,9 @@
}));
</script>
<Row cols={4} class="mb-2">
<Row class="mb-0 mb-xxl-2">
<!-- Column 1: Job Info, Concurrent Jobs, Admin Message if found-->
<Col xs={3}>
<Col xs={12} md={6} xl={3} class="mb-3 mb-xxl-0">
{#if $initq.error}
<Card body color="danger">{$initq.error.message}</Card>
{:else if $initq.data}
@ -272,7 +273,7 @@
<!-- If enabled: Column 2: Job Footprint, Polar Representation, Heuristic Summary -->
{#if showFootprint}
<Col xs={3}>
<Col xs={12} md={6} xl={4} xxl={3} class="mb-3 mb-xxl-0">
{#if $initq.error}
<Card body color="danger">{$initq.error.message}</Card>
{:else if $initq?.data && $jobMetrics?.data}
@ -281,15 +282,10 @@
<Spinner secondary />
{/if}
</Col>
{:else}
<Col xs={3}/>
{/if}
<!-- Column 3: Spacer -->
<Col xs={2}/>
<!-- Column 4: Job Roofline -->
<Col xs={4}>
<!-- Column 3: Job Roofline; If footprint Enabled: full width, else half width -->
<Col xs={12} md={showFootprint ? 12 : 6} xl={5} xxl={6}>
{#if $initq.error || $jobMetrics.error}
<Card body color="danger">
<p>Initq Error: {$initq.error?.message}</p>
@ -297,20 +293,24 @@
</Card>
{:else if $initq?.data && $jobMetrics?.data}
<Card style="height: 400px;">
<Roofline
renderTime={true}
subCluster={$initq.data.clusters
.find((c) => c.name == $initq.data.job.cluster)
.subClusters.find((sc) => sc.name == $initq.data.job.subCluster)}
data={transformDataForRoofline(
$jobMetrics.data.jobMetrics.find(
(m) => m.name == "flops_any" && m.scope == "node",
)?.metric,
$jobMetrics.data.jobMetrics.find(
(m) => m.name == "mem_bw" && m.scope == "node",
)?.metric,
)}
/>
<div bind:clientWidth={roofWidth}>
<Roofline
allowSizeChange={true}
width={roofWidth}
renderTime={true}
subCluster={$initq.data.clusters
.find((c) => c.name == $initq.data.job.cluster)
.subClusters.find((sc) => sc.name == $initq.data.job.subCluster)}
data={transformDataForRoofline(
$jobMetrics.data.jobMetrics.find(
(m) => m.name == "flops_any" && m.scope == "node",
)?.metric,
$jobMetrics.data.jobMetrics.find(
(m) => m.name == "mem_bw" && m.scope == "node",
)?.metric,
)}
/>
</div>
</Card>
{:else}
<Spinner secondary />

View File

@ -4,7 +4,7 @@
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]
- `renderCard Bool?`: If to render component as content only or with card wrapping [Default: true]
- `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '310px']
-->
@ -64,17 +64,15 @@
</Card>
{:else}
<p>
Jobs running on the same node with overlapping runtimes using shared resources.
{cJobs.items.length} Jobs running on the same node with overlapping runtimes using shared resources.
( <a
href="/monitoring/jobs/?{cJobs.listQuery}"
target="_blank">See All</a
> )
</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"
@ -96,8 +94,8 @@
<style>
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
}
</style>

View File

@ -41,8 +41,6 @@
const lineWidth = clusterCockpitConfig.plot_general_lineWidth;
// Helpers
function getGradientR(x) {
if (x < 0.5) return 0;