ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-09-20 11:27:26 +02: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
Show Stats 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": { "node_modules/chart.js": {
"version": "4.4.0", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
"integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==", "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
"dependencies": { "dependencies": {
"@kurkle/color": "^0.3.0" "@kurkle/color": "^0.3.0"
}, },
@ -756,9 +756,9 @@
} }
}, },
"node_modules/terser": { "node_modules/terser": {
"version": "5.24.0", "version": "5.25.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.25.0.tgz",
"integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==", "integrity": "sha512-we0I9SIsfvNUMP77zC9HG+MylwYYsGFSBG8qm+13oud2Yh+O104y614FRbyjpxys16jZwot72Fpi827YvGzuqg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@jridgewell/source-map": "^0.3.3", "@jridgewell/source-map": "^0.3.3",

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

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

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

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