ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-01-24 02:19:05 +01:00
Code Issues Packages Releases Activity

simplify plotGrid, add cancel to metricSelect, improve metricPlot render logic

Browse Source
This commit is contained in:
Christoph Kluge 2024-10-16 12:41:15 +02:00
parent 673fdc443c
commit 3dfeabcec6
13 changed files with 90 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -519,7 +519,6 @@
<Col>
<PlotGrid
let:item
renderFor="analysis"
items={metricsInHistograms.map((metric) => ({
metric,
...binsFromFootprint(
@ -563,7 +562,6 @@
<PlotGrid
let:item
let:width
renderFor="analysis"
items={metricsInScatterplots.map(([m1, m2]) => ({
m1,
f1: $footprintsQuery.data.footprints.metrics.find(

1
web/frontend/src/Job.root.svelte
View File

@ -351,7 +351,6 @@
{:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
<PlotGrid
let:item
renderFor="job"
items={orderAndMap(
groupByScope($jobMetrics.data.jobMetrics),
selectedMetrics,

1
web/frontend/src/Node.root.svelte
View File

@ -191,7 +191,6 @@
{:else}
<PlotGrid
let:item
renderFor="node"
itemsPerRow={ccconfig.plot_view_plotsPerRow}
items={$nodeMetricsData.data.nodeMetrics[0].metrics
.map((m) => ({

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

@ -645,7 +645,6 @@
{#key $mainQuery.data.stats[0].histMetrics}
<PlotGrid
let:item
renderFor="user"
items={$mainQuery.data.stats[0].histMetrics}
itemsPerRow={2}
>

9
web/frontend/src/Systems.root.svelte
View File

@ -45,7 +45,7 @@
if (from == null || to == null) {
to = new Date(Date.now());
from = new Date(to.getTime());
from.setHours(from.getHours() - 4);
from.setHours(from.getHours() - 2);
}
const initialized = getContext("initialized");
@ -61,6 +61,7 @@
// Todo: Add Idle State Filter (== No allocated Jobs)
// Todo: NodeList: Mindestens Accelerator Scope ... "Show Detail" Switch?
// Todo: Review performance // observed high client-side load frequency
// Is Svelte {#each} -> <MetricPlot/> -> onMount() related : Cannot be skipped ...
const client = getContextClient();
const nodeQuery = gql`
@ -245,13 +246,13 @@
<Spinner />
</Col>
</Row>
{:else if $initialized && $nodesQuery?.data}
{:else if filteredData?.length > 0}
{#if displayNodeOverview}
<!-- ROW2-1: Node Overview (Grid Included)-->
<NodeOverview {cluster} {ccconfig} data={filteredData} bind:selectedMetric/>
<NodeOverview {cluster} {ccconfig} data={filteredData}/>
{:else}
<!-- ROW2-2: Node List (Grid Included)-->
<NodeList {cluster} {selectedMetrics} {systemUnits} data={filteredData}/>
<NodeList {cluster} {selectedMetrics} {systemUnits} data={filteredData} bind:selectedMetric/>
{/if}
{/if}

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

@ -267,7 +267,6 @@
{#key $stats.data.jobsStatistics[0].histMetrics}
<PlotGrid
let:item
renderFor="user"
items={$stats.data.jobsStatistics[0].histMetrics}
itemsPerRow={3}
>

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

@ -4,7 +4,6 @@
Properties:
- `itemsPerRow Number`: Elements to render per row
- `items [Any]`: List of plot components to render
- `renderFor String`: If 'job', filter disabled metrics
-->
<script>
@ -15,43 +14,13 @@
export let itemsPerRow
export let items
export let renderFor
let rows = [];
const isPlaceholder = x => x._is_placeholder === true;
function tile(items, itemsPerRow) {
const rows = []
for (let ri = 0; ri < items?.length; ri += itemsPerRow) {
const row = []
for (let ci = 0; ci < itemsPerRow; ci += 1) {
if (ri + ci < items?.length)
row.push(items[ri + ci])
else
row.push({ _is_placeholder: true, ri, ci })
}
rows.push(row)
}
return rows
}
$: if (renderFor === 'job') {
rows = tile(items.filter(item => item.disabled === false), itemsPerRow)
} else {
rows = tile(items, itemsPerRow)
}
</script>
{#each rows as row}
<Row cols={{ xs: 1, sm: 1, md: 2, lg: itemsPerRow}}>
{#each row as item (item)}
<Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>
{#each items as item}
<Col class="px-1">
{#if !isPlaceholder(item)}
<slot item={item}/>
{/if}
<slot {item}/>
</Col>
{/each}
</Row>
{/each}
</Row>

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

@ -11,7 +11,7 @@
- `series [GraphQL.Series]`: The metric data object
- `useStatsSeries Bool?`: If this plot uses the statistics Min/Max/Median representation; automatically set to according bool [Default: null]
- `statisticsSeries [GraphQL.StatisticsSeries]?`: Min/Max/Median representation of metric data [Default: null]
- `cluster GraphQL.Cluster`: Cluster Object of the parent job
- `cluster String`: Cluster name of the parent job / data
- `subCluster String`: Name of the subCluster of the parent job
- `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly [Default: false]
- `forNode Bool?`: If this plot is used for node data display; will ren[data, err := metricdata.LoadNodeData(cluster, metrics, nodes, scopes, from, to, ctx)](https://github.com/ClusterCockpit/cc-backend/blob/9fe7cdca9215220a19930779a60c8afc910276a3/internal/graph/schema.resolvers.go#L391-L392)der x-axis as negative time with $now as maximum [Default: false]
@ -117,13 +117,13 @@
export let metric;
export let scope = "node";
export let width = null;
export let width = 0;
export let height = 300;
export let timestep;
export let series;
export let useStatsSeries = null;
export let statisticsSeries = null;
export let cluster;
export let cluster = "";
export let subCluster;
export let isShared = false;
export let forNode = false;
@ -522,17 +522,9 @@
}
onMount(() => {
// Setup Wrapper
if (series[0].data.length > 0) {
if (forNode) {
plotWrapper.style.paddingTop = "0.5rem"
plotWrapper.style.paddingBottom = "0.5rem"
}
plotWrapper.style.backgroundColor = backgroundColor();
plotWrapper.style.borderRadius = "5px";
}
// Init Plot
if (plotWrapper) {
render(width, height);
}
});
onDestroy(() => {
@ -540,22 +532,20 @@
if (uplot) uplot.destroy();
});
// This updates it on all size changes
// Condition for reactive triggering (eg scope change)
$: if (series[0].data.length > 0) {
// This updates plot on all size changes if wrapper (== data) exists
$: if (plotWrapper) {
onSizeChange(width, height);
}
</script>
<!-- Define Wrapper and NoData Card within $width -->
<div bind:clientWidth={width}>
{#if series[0].data.length > 0}
<div bind:this={plotWrapper}/>
{:else}
<Card class="mx-4" body color="warning"
<!-- Define $width Wrapper and NoData Card -->
{#if series[0].data.length > 0}
<div bind:this={plotWrapper} bind:clientWidth={width}
style="background-color: {backgroundColor()};" class={forNode ? 'py-2 rounded' : 'rounded'}
/>
{:else}
<Card body color="warning" class="mx-4"
>Cannot render plot: No series data returned for <code>{metric}</code></Card
>
{/if}
</div>
{/if}

1
web/frontend/src/generic/select/MetricSelection.svelte
View File

@ -178,6 +178,7 @@
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
<Button color="secondary" on:click={() => (isOpen = !isOpen)}>Cancel</Button>
</ModalFooter>
</Modal>

4
web/frontend/src/systems/NodeList.svelte
View File

@ -36,7 +36,7 @@
<th
class="position-sticky top-0 text-capitalize"
scope="col"
style="padding-top: {headerPaddingTop}px"
style="padding-top: {headerPaddingTop}px;"
>
{cluster} Node Info
</th>
@ -53,7 +53,7 @@
</tr>
</thead>
<tbody>
{#each data as nodeData (nodeData)}
{#each data as nodeData (nodeData.host)}
<NodeListRow {nodeData} {cluster} {selectedMetrics}/>
{:else}
<tr>

35
web/frontend/src/systems/NodeOverview.svelte
View File

@ -9,9 +9,7 @@
-->
<script>
import { getContext } from "svelte";
import { Card } from "@sveltestrap/sveltestrap";
import PlotGrid from "../generic/PlotGrid.svelte";
import { Row, Col, Card } from "@sveltestrap/sveltestrap";
import MetricPlot from "../generic/plots/MetricPlot.svelte";
export let ccconfig = null;
@ -19,15 +17,12 @@
export let cluster = "";
export let selectedMetric = "";
const clusters = getContext("clusters");
</script>
<PlotGrid
let:item
renderFor="systems"
itemsPerRow={ccconfig.plot_view_plotsPerRow}
items={data}
>
<!-- PlotGrid flattened into this component -->
<Row cols={{ xs: 1, sm: 2, md: 3, lg: ccconfig.plot_view_plotsPerRow}}>
{#each data as item (item.host)}
<Col class="px-1">
<h4 style="width: 100%; text-align: center;">
<a
style="display: block;padding-top: 15px;"
@ -35,29 +30,23 @@
>{item.host} ({item.subCluster})</a
>
</h4>
{#if item?.data[0]}
{#if item?.disabled[selectedMetric]}
<Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
<Card body class="mx-3" color="info"
>Metric disabled for subcluster <code
>{selectedMetric}:{item.subCluster}</code
></Card
>
{:else}
<!-- "No Data"-Warning included in MetricPlot-Component -->
<MetricPlot
timestep={item.data[0].metric.timestep}
series={item.data[0].metric.series}
metric={item.data[0].name}
cluster={clusters.find((c) => c.name == cluster)}
{cluster}
subCluster={item.subCluster}
forNode={true}
forNode
/>
{/if}
{:else}
<Card
style="margin-left: 2rem;margin-right: 2rem;"
body
color="warning"
>No dataset returned for <code>{selectedMetric}</code></Card
>
{/if}
</PlotGrid>
</Col>
{/each}
</Row>

20
web/frontend/src/systems/nodelist/NodeInfo.svelte
View File

@ -56,7 +56,7 @@
</script>
<Card class="pb-2">
<Card class="pb-3">
<CardHeader class="d-inline-flex justify-content-between align-items-end">
<div>
<h5 class="mb-0">
@ -106,7 +106,7 @@
<hr class="mt-0 mb-3"/>
<p>
{#if $nodeJobsData.data.jobs.count > 0}
<InputGroup class="justify-content-between">
<InputGroup size="sm" class="justify-content-between">
<InputGroupText>
<Icon name="activity"/>
</InputGroupText>
@ -116,11 +116,11 @@
<Input class="flex-grow-1" style="background-color: white;" type="text" value="{$nodeJobsData.data.jobs.count} Jobs" disabled />
<a title="Show jobs running on this node" href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-primary" role="button" aria-disabled="true" >
<Icon name="view-list" />
Show List
List
</a>
</InputGroup>
{:else}
<InputGroup class="justify-content-between">
<InputGroup size="sm" class="justify-content-between">
<InputGroupText>
<Icon name="activity" />
</InputGroupText>
@ -132,30 +132,30 @@
{/if}
</p>
<p>
<InputGroup class="justify-content-between">
<InputGroup size="sm" class="justify-content-between">
<InputGroupText>
<Icon name="people"/>
</InputGroupText>
<InputGroupText class="flex-fill">
Users on Node
Show Users on Node
</InputGroupText>
<a title="Show jobs running on this node" href="/monitoring/users/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-primary" role="button" aria-disabled="true" >
<Icon name="view-list" />
Show List
List
</a>
</InputGroup>
</p>
<p>
<InputGroup class="justify-content-between">
<InputGroup size="sm" class="justify-content-between">
<InputGroupText>
<Icon name="journals"/>
</InputGroupText>
<InputGroupText class="flex-fill">
Projects on Node
Show Projects on Node
</InputGroupText>
<a title="Show projects active on this node" href="/monitoring/projects/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-primary" role="button" aria-disabled="true" >
<Icon name="view-list" />
Show List
List
</a>
</InputGroup>
</p>

16
web/frontend/src/systems/nodelist/NodeListRow.svelte
View File

@ -24,33 +24,25 @@
<td>
<NodeInfo {cluster} subCluster={nodeData.subCluster} hostname={nodeData.host} />
</td>
{#each sortOrder(nodeData?.data) as metricData}
{#each sortOrder(nodeData?.data) as metricData (metricData.name)}
<td>
{#if metricData}
{#if nodeData?.disabled[metricData.name]}
<Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
<Card body class="mx-3" color="info"
>Metric disabled for subcluster <code
>{metricData.name}:{nodeData.subCluster}</code
></Card
>
{:else}
<!-- "No Data"-Warning included in MetricPlot-Component -->
<MetricPlot
timestep={metricData.metric.timestep}
series={metricData.metric.series}
metric={metricData.name}
{cluster}
subCluster={nodeData.subCluster}
forNode={true}
forNode
/>
{/if}
{:else}
<Card
style="margin-left: 2rem;margin-right: 2rem;"
body
color="warning"
>No dataset returned for <code>{metricData.name}</code></Card
>
{/if}
</td>
{/each}
</tr>