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

View File

@ -4,7 +4,7 @@
Properties: Properties:
- `cJobs JobLinkResultList`: List of concurrent Jobs - `cJobs JobLinkResultList`: List of concurrent Jobs
- `showLinks Bool?`: Show list as clickable links [Default: false] - `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'] - `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '310px'] - `height String?`: Height of the card [Default: '310px']
--> -->
@ -64,17 +64,15 @@
</Card> </Card>
{:else} {:else}
<p> <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> </p>
<hr/> <hr/>
{#if showLinks} {#if showLinks}
<ul> <ul>
<li>
<a
href="/monitoring/jobs/?{cJobs.listQuery}"
target="_blank">See All</a
>
</li>
{#each cJobs.items as cJob} {#each cJobs.items as cJob}
<li> <li>
<a href="/monitoring/job/{cJob.id}" target="_blank" <a href="/monitoring/job/{cJob.id}" target="_blank"
@ -96,8 +94,8 @@
<style> <style>
ul { ul {
columns: 2; columns: 3;
-webkit-columns: 2; -webkit-columns: 3;
-moz-columns: 2; -moz-columns: 3;
} }
</style> </style>

View File

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