ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29:05 +01:00
Code Issues Packages Releases Activity

rework clientwidth binds and size defaults for histograms

Browse Source
This commit is contained in:
Christoph Kluge 2024-10-08 18:46:59 +02:00
parent ed991de11a
commit f4102b948e
7 changed files with 86 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/frontend/src/Analysis.root.svelte
View File

@ -55,7 +55,7 @@
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = []; let jobFilters = [];
let rooflineMaxY; let rooflineMaxY;
let colWidth1, colWidth2, colWidth3, colWidth4; let colWidth1, colWidth2;
let numBins = 50; let numBins = 50;
let maxY = -1; let maxY = -1;
@ -465,36 +465,30 @@
{/if} {/if}
</Col> </Col>
<Col> <Col>
<div bind:clientWidth={colWidth3}> {#key $statsQuery.data.stats[0].histDuration}
{#key $statsQuery.data.stats[0].histDuration} <Histogram
<Histogram height={300}
width={colWidth3} data={convert2uplot($statsQuery.data.stats[0].histDuration)}
height={300} title="Duration Distribution"
data={convert2uplot($statsQuery.data.stats[0].histDuration)} xlabel="Current Runtimes"
title="Duration Distribution" xunit="Hours"
xlabel="Current Runtimes" ylabel="Number of Jobs"
xunit="Hours" yunit="Jobs"
ylabel="Number of Jobs" />
yunit="Jobs" {/key}
/>
{/key}
</div>
</Col> </Col>
<Col> <Col>
<div bind:clientWidth={colWidth4}> {#key $statsQuery.data.stats[0].histNumCores}
{#key $statsQuery.data.stats[0].histNumCores} <Histogram
<Histogram height={300}
width={colWidth4} data={convert2uplot($statsQuery.data.stats[0].histNumCores)}
height={300} title="Number of Cores Distribution"
data={convert2uplot($statsQuery.data.stats[0].histNumCores)} xlabel="Allocated Cores"
title="Number of Cores Distribution" xunit="Cores"
xlabel="Allocated Cores" ylabel="Number of Jobs"
xunit="Cores" yunit="Jobs"
ylabel="Number of Jobs" />
yunit="Jobs" {/key}
/>
{/key}
</div>
</Col> </Col>
</Row> </Row>
{/if} {/if}
@ -525,7 +519,6 @@
<Col> <Col>
<PlotGrid <PlotGrid
let:item let:item
let:width
renderFor="analysis" renderFor="analysis"
items={metricsInHistograms.map((metric) => ({ items={metricsInHistograms.map((metric) => ({
metric, metric,
@ -542,8 +535,6 @@
> >
<Histogram <Histogram
data={convert2uplot(item.bins)} data={convert2uplot(item.bins)}
{width}
height={250}
usesBins={true} usesBins={true}
title="Average Distribution of '{item.metric}'" title="Average Distribution of '{item.metric}'"
xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`} xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`}

62
web/frontend/src/Status.root.svelte
View File

@ -44,9 +44,8 @@
export let cluster; export let cluster;
let plotWidths = [], let plotWidths = [];
colWidth1, let colWidth;
colWidth2;
let from = new Date(Date.now() - 5 * 60 * 1000), let from = new Date(Date.now() - 5 * 60 * 1000),
to = new Date(Date.now()); to = new Date(Date.now());
const topOptions = [ const topOptions = [
@ -468,7 +467,7 @@
<Row cols={{ lg: 4, md: 2, sm: 1 }}> <Row cols={{ lg: 4, md: 2, sm: 1 }}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth1}> <div bind:clientWidth={colWidth}>
<h4 class="text-center"> <h4 class="text-center">
Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}
</h4> </h4>
@ -479,7 +478,7 @@
<Card body color="danger">{$topUserQuery.error.message}</Card> <Card body color="danger">{$topUserQuery.error.message}</Card>
{:else} {:else}
<Pie <Pie
size={colWidth1} size={colWidth}
sliceLabel={topUserSelection.label} sliceLabel={topUserSelection.label}
quantities={$topUserQuery.data.topUser.map( quantities={$topUserQuery.data.topUser.map(
(tu) => tu[topUserSelection.key], (tu) => tu[topUserSelection.key],
@ -539,7 +538,7 @@
<Card body color="danger">{$topProjectQuery.error.message}</Card> <Card body color="danger">{$topProjectQuery.error.message}</Card>
{:else} {:else}
<Pie <Pie
size={colWidth1} size={colWidth}
sliceLabel={topProjectSelection.label} sliceLabel={topProjectSelection.label}
quantities={$topProjectQuery.data.topProjects.map( quantities={$topProjectQuery.data.topProjects.map(
(tp) => tp[topProjectSelection.key], (tp) => tp[topProjectSelection.key],
@ -591,25 +590,21 @@
<hr class="my-2" /> <hr class="my-2" />
<Row cols={{ lg: 2, md: 1 }}> <Row cols={{ lg: 2, md: 1 }}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth2}> {#key $mainQuery.data.stats}
{#key $mainQuery.data.stats} <Histogram
<Histogram data={convert2uplot($mainQuery.data.stats[0].histDuration)}
data={convert2uplot($mainQuery.data.stats[0].histDuration)} title="Duration Distribution"
width={colWidth2 - 25} xlabel="Current Runtimes"
title="Duration Distribution" xunit="Hours"
xlabel="Current Runtimes" ylabel="Number of Jobs"
xunit="Hours" yunit="Jobs"
ylabel="Number of Jobs" />
yunit="Jobs" {/key}
/>
{/key}
</div>
</Col> </Col>
<Col class="p-2"> <Col class="p-2">
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
<Histogram <Histogram
data={convert2uplot($mainQuery.data.stats[0].histNumNodes)} data={convert2uplot($mainQuery.data.stats[0].histNumNodes)}
width={colWidth2 - 25}
title="Number of Nodes Distribution" title="Number of Nodes Distribution"
xlabel="Allocated Nodes" xlabel="Allocated Nodes"
xunit="Nodes" xunit="Nodes"
@ -621,25 +616,21 @@
</Row> </Row>
<Row cols={{ lg: 2, md: 1 }}> <Row cols={{ lg: 2, md: 1 }}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth2}> {#key $mainQuery.data.stats}
{#key $mainQuery.data.stats} <Histogram
<Histogram data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
data={convert2uplot($mainQuery.data.stats[0].histNumCores)} title="Number of Cores Distribution"
width={colWidth2 - 25} xlabel="Allocated Cores"
title="Number of Cores Distribution" xunit="Cores"
xlabel="Allocated Cores" ylabel="Number of Jobs"
xunit="Cores" yunit="Jobs"
ylabel="Number of Jobs" />
yunit="Jobs" {/key}
/>
{/key}
</div>
</Col> </Col>
<Col class="p-2"> <Col class="p-2">
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
<Histogram <Histogram
data={convert2uplot($mainQuery.data.stats[0].histNumAccs)} data={convert2uplot($mainQuery.data.stats[0].histNumAccs)}
width={colWidth2 - 25}
title="Number of Accelerators Distribution" title="Number of Accelerators Distribution"
xlabel="Allocated Accs" xlabel="Allocated Accs"
xunit="Accs" xunit="Accs"
@ -654,7 +645,6 @@
{#key $mainQuery.data.stats[0].histMetrics} {#key $mainQuery.data.stats[0].histMetrics}
<PlotGrid <PlotGrid
let:item let:item
let:width
renderFor="user" renderFor="user"
items={$mainQuery.data.stats[0].histMetrics} items={$mainQuery.data.stats[0].histMetrics}
itemsPerRow={2} itemsPerRow={2}
@ -662,8 +652,6 @@
<Histogram <Histogram
data={convert2uplot(item.data)} data={convert2uplot(item.data)}
usesBins={true} usesBins={true}
{width}
height={250}
title="Distribution of '{item.metric}' averages" title="Distribution of '{item.metric}' averages"
xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`} xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
xunit={item.unit} xunit={item.unit}

56
web/frontend/src/User.root.svelte
View File

@ -54,10 +54,7 @@
isSortingOpen = false; isSortingOpen = false;
let metrics = ccconfig.plot_list_selectedMetrics, let metrics = ccconfig.plot_list_selectedMetrics,
isMetricsSelectionOpen = false; isMetricsSelectionOpen = false;
let w1, let isHistogramSelectionOpen = false;
w2,
histogramHeight = 250,
isHistogramSelectionOpen = false;
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null; let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
let showFootprint = filterPresets.cluster let showFootprint = filterPresets.cluster
? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`] ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
@ -214,36 +211,28 @@
</Table> </Table>
</Col> </Col>
<Col class="px-1"> <Col class="px-1">
<div bind:clientWidth={w1}> {#key $stats.data.jobsStatistics[0].histDuration}
{#key $stats.data.jobsStatistics[0].histDuration} <Histogram
<Histogram data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
data={convert2uplot($stats.data.jobsStatistics[0].histDuration)} title="Duration Distribution"
width={w1} xlabel="Current Runtimes"
height={histogramHeight} xunit="Hours"
title="Duration Distribution" ylabel="Number of Jobs"
xlabel="Current Runtimes" yunit="Jobs"
xunit="Hours" />
ylabel="Number of Jobs" {/key}
yunit="Jobs"
/>
{/key}
</div>
</Col> </Col>
<Col class="px-1"> <Col class="px-1">
<div bind:clientWidth={w2}> {#key $stats.data.jobsStatistics[0].histNumNodes}
{#key $stats.data.jobsStatistics[0].histNumNodes} <Histogram
<Histogram data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)} title="Number of Nodes Distribution"
width={w2} xlabel="Allocated Nodes"
height={histogramHeight} xunit="Nodes"
title="Number of Nodes Distribution" ylabel="Number of Jobs"
xlabel="Allocated Nodes" yunit="Jobs"
xunit="Nodes" />
ylabel="Number of Jobs" {/key}
yunit="Jobs"
/>
{/key}
</div>
</Col> </Col>
{/if} {/if}
</Row> </Row>
@ -278,7 +267,6 @@
{#key $stats.data.jobsStatistics[0].histMetrics} {#key $stats.data.jobsStatistics[0].histMetrics}
<PlotGrid <PlotGrid
let:item let:item
let:width
renderFor="user" renderFor="user"
items={$stats.data.jobsStatistics[0].histMetrics} items={$stats.data.jobsStatistics[0].histMetrics}
itemsPerRow={3} itemsPerRow={3}
@ -286,8 +274,6 @@
<Histogram <Histogram
data={convert2uplot(item.data)} data={convert2uplot(item.data)}
usesBins={true} usesBins={true}
{width}
height={250}
title="Distribution of '{item.metric} ({item.stat})' footprints" title="Distribution of '{item.metric} ({item.stat})' footprints"
xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`} xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
xunit={item.unit} xunit={item.unit}

4
web/frontend/src/generic/PlotGrid.svelte
View File

@ -17,8 +17,8 @@
export let items export let items
export let renderFor export let renderFor
let rows = [] let rows = [];
const isPlaceholder = x => x._is_placeholder === true const isPlaceholder = x => x._is_placeholder === true;
function tile(items, itemsPerRow) { function tile(items, itemsPerRow) {
const rows = [] const rows = []

21
web/frontend/src/generic/plots/Histogram.svelte
View File

@ -21,8 +21,8 @@
export let data; export let data;
export let usesBins = false; export let usesBins = false;
export let width = 500; export let width = null;
export let height = 300; export let height = 250;
export let title = ""; export let title = "";
export let xlabel = ""; export let xlabel = "";
export let xunit = ""; export let xunit = "";
@ -226,10 +226,13 @@
$: sizeChanged(width, height); $: sizeChanged(width, height);
</script> </script>
{#if data.length > 0} <!-- Define Wrapper and NoData Card within $width -->
<div bind:this={plotWrapper} /> <div bind:clientWidth={width}>
{:else} {#if data.length > 0}
<Card class="mx-4" body color="warning" <div bind:this={plotWrapper} />
>Cannot render histogram: No data!</Card {:else}
> <Card class="mx-4" body color="warning"
{/if} >Cannot render histogram: No data!</Card
>
{/if}
</div>

3
web/frontend/src/generic/plots/MetricPlot.svelte
View File

@ -117,6 +117,7 @@
export let metric; export let metric;
export let scope = "node"; export let scope = "node";
export let width = null;
export let height = 300; export let height = 300;
export let timestep; export let timestep;
export let series; export let series;
@ -130,8 +131,6 @@
export let numaccs = 0; export let numaccs = 0;
export let zoomState = null; export let zoomState = null;
let width;
if (useStatsSeries == null) useStatsSeries = statisticsSeries != null; if (useStatsSeries == null) useStatsSeries = statisticsSeries != null;
if (useStatsSeries == false && series == null) useStatsSeries = true; if (useStatsSeries == false && series == null) useStatsSeries = true;

4
web/frontend/src/generic/plots/Scatter.svelte
View File

@ -146,8 +146,8 @@
export let Y; export let Y;
export let S = null; export let S = null;
export let color = '#0066cc'; export let color = '#0066cc';
export let width; export let width = 250;
export let height; export let height = 300;
export let xLabel; export let xLabel;
export let yLabel; export let yLabel;