ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-11-04 09:35:07 +01:00
Code Issues Packages Releases Activity

Rework histogramselection, fix reactivity

Browse Source
This commit is contained in:
Christoph Kluge
2023-12-06 12:58:03 +01:00
parent 78494cd30e
commit 7d14086e54
3 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/frontend/package-lock.json generated
View File

@@ -333,9 +333,9 @@
}
},
"node_modules/chart.js": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz",
"integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
"integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
@@ -756,9 +756,9 @@
}
},
"node_modules/terser": {
"version": "5.24.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
"integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
"version": "5.25.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.25.0.tgz",
"integrity": "sha512-we0I9SIsfvNUMP77zC9HG+MylwYYsGFSBG8qm+13oud2Yh+O104y614FRbyjpxys16jZwot72Fpi827YvGzuqg==",
"dev": true,
"dependencies": {
"@jridgewell/source-map": "^0.3.3",

47
web/frontend/src/HistogramSelection.svelte
View File

@@ -1,13 +1,16 @@
<script>
import { Modal, ModalBody, ModalHeader, ModalFooter,
Button, ListGroup, ListGroupItem, Icon } from 'sveltestrap'
Button, ListGroup, ListGroupItem } from 'sveltestrap'
import { gql, getContextClient , mutationStore } from '@urql/svelte'
export let cluster
export let availableMetrics = ['cpu_load', 'flops_any', 'mem_bw']
export let metricsInHistograms
export let isOpen
let pendingMetrics = [...metricsInHistograms] // Copy
const client = getContextClient()
const client = getContextClient();
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
client: client,
@@ -18,8 +21,6 @@
})
}
let isHistogramConfigOpen = false
function updateConfiguration(data) {
updateConfigurationMutation({
name: data.name,
@@ -31,43 +32,35 @@
}
})
}
function closeAndApply() {
metricsInHistograms = [...pendingMetrics] // Set for parent
updateConfiguration({
name: cluster ? `user_view_histogramMetrics:${cluster}` : 'user_view_histogramMetrics',
value: metricsInHistograms
})
isOpen = false
}
</script>
<Button outline
on:click={() => (isHistogramConfigOpen = true)}>
<Icon name=""/>
Select Histograms
</Button>
<Modal isOpen={isHistogramConfigOpen}
toggle={() => (isHistogramConfigOpen = !isHistogramConfigOpen)}>
<Modal {isOpen}
toggle={() => (isOpen = !isOpen)}>
<ModalHeader>
Select metrics presented in histograms
</ModalHeader>
<ModalBody>
<ListGroup>
<!-- <li class="list-group-item">
<input type="checkbox" bind:checked={pendingShowFootprint}> Show Footprint
</li>
<hr/> -->
{#each availableMetrics as metric (metric)}
<ListGroupItem>
<input type="checkbox" bind:group={metricsInHistograms}
value={metric}
on:change={() => updateConfiguration({
name: cluster ? `user_view_histogramMetrics:${cluster}` : 'user_view_histogramMetrics',
value: metricsInHistograms
})} />
<input type="checkbox" bind:group={pendingMetrics} value={metric}>
{metric}
</ListGroupItem>
{/each}
</ListGroup>
</ModalBody>
<ModalFooter>
<Button color="primary"
on:click={() => (isHistogramConfigOpen = false)}>
Close
</Button>
<Button color="primary" on:click={closeAndApply}> Close & Apply </Button>
</ModalFooter>
</Modal>

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

@@ -25,9 +25,10 @@
let jobFilters = [];
let sorting = { field: 'startTime', order: 'DESC' }, isSortingOpen = false
let metrics = ccconfig.plot_list_selectedMetrics, isMetricsSelectionOpen = false
let w1, w2, histogramHeight = 250
let w1, w2, histogramHeight = 250, isHistogramSelectionOpen = false
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
let metricsInHistograms = ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ccconfig.user_view_histogramMetrics || []
$: metricsInHistograms = selectedCluster ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] : (ccconfig.user_view_histogramMetrics || [])
const client = getContextClient();
$: stats = queryStore({
@@ -73,9 +74,11 @@
<Icon name="graph-up"/> Metrics
</Button>
<HistogramSelection
bind:cluster={selectedCluster}
bind:metricsInHistograms={metricsInHistograms}/>
<Button
outline color="secondary"
on:click={() => (isHistogramSelectionOpen = true)}>
<Icon name="bar-chart-line"/> Select Histograms
</Button>
</Col>
<Col xs="auto">
<Filters
@@ -193,7 +196,7 @@
title="Distribution of '{item.metric}'"
xlabel={`${item.metric} bin maximum [${item.unit}]`}
xunit={item.unit}
ylabel="Count [Jobs]"
ylabel="Number of Jobs"
yunit="Jobs"/>
</PlotTable>
{/key}
@@ -219,4 +222,9 @@
bind:cluster={selectedCluster}
configName="plot_list_selectedMetrics"
bind:metrics={metrics}
bind:isOpen={isMetricsSelectionOpen} />
bind:isOpen={isMetricsSelectionOpen} />
<HistogramSelection
bind:cluster={selectedCluster}
bind:metricsInHistograms={metricsInHistograms}
bind:isOpen={isHistogramSelectionOpen} />