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

change to one reactive metric data load on two variables

Browse Source
This commit is contained in:
Christoph Kluge 2024-08-20 11:39:19 +02:00
parent b70de5a4be
commit e4f8022b7a
1 changed files with 65 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/frontend/src/job/Metric.svelte
View File

@ -41,14 +41,16 @@
plot, plot,
error = null; error = null;
let selectedScope = minScope(scopes); let selectedScope = minScope(scopes);
let selectedResolution = 600 let selectedResolution;
let statsPattern = /(.*)-stat$/ let pendingResolution = 600;
let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null) let selectedScopeIndex = scopes.findIndex((s) => s == minScope(scopes));
let selectedScopeIndex const statsPattern = /(.*)-stat$/;
let patternMatches = false;
let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null);
// const dispatch = createEventDispatcher(); // const dispatch = createEventDispatcher();
const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "") const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "");
const resolutions = [600, 240, 60] const resolutions = [600, 240, 60] // DEV: Make configable
const client = getContextClient(); const client = getContextClient();
const subQuery = gql` const subQuery = gql`
query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) { query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
@ -86,39 +88,68 @@
const dbid = job.id; const dbid = job.id;
const selectedMetrics = [metricName] const selectedMetrics = [metricName]
function loadUpdate() { $: if (selectedScope == "load-all" || pendingResolution) {
console.log('S> OLD DATA:', rawData)
metricData = queryStore({
client: client,
query: subQuery,
variables: { dbid, selectedMetrics, selectedScopes, selectedResolution },
});
}; if (selectedScope == "load-all") {
console.log('Triggered load-all')
$: if (selectedScope == "load-all") { selectedScopes = [...scopes, "socket", "core"]
scopes = [...scopes, "socket", "core"]
selectedScope = nativeScope
selectedScopes = [...scopes]
loadUpdate()
};
$: patternMatches = statsPattern.exec(selectedScope)
$: if (!patternMatches) {
selectedScopeIndex = scopes.findIndex((s) => s == selectedScope);
} else { } else {
selectedScopeIndex = scopes.findIndex((s) => s == patternMatches[1]); console.log("Triggered scope switch:", selectedScope, pendingResolution)
} }
// What if accelerator scope / native core scopes?
if ((selectedResolution !== pendingResolution) && selectedScopes.length >= 2) {
selectedScope = String("node")
selectedScopes = ["node"]
console.log("New Resolution: Reset to node scope")
} else {
console.log("New Resolution: No change in Res or just node scope")
}
if (!selectedResolution) {
selectedResolution = Number(pendingResolution)
} else {
selectedResolution = Number(pendingResolution)
metricData = queryStore({
client: client,
query: subQuery,
variables: { dbid, selectedMetrics, selectedScopes, selectedResolution },
// requestPolicy: "network-only",
});
if ($metricData && !$metricData.fetching) {
console.log('Trigger Data Handling')
rawData = $metricData.data.singleUpdate.map((x) => x.metric)
scopes = $metricData.data.singleUpdate.map((x) => x.scope)
statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
// Handle Selected Scope on load-all
if (selectedScope == "load-all") {
selectedScope = minScope(scopes)
console.log('Set New SelectedScope after Load-All', selectedScope, scopes)
} else {
console.log('Set New SelectedScope', selectedScope)
}
patternMatches = statsPattern.exec(selectedScope)
if (!patternMatches) {
selectedScopeIndex = scopes.findIndex((s) => s == selectedScope);
console.log("Selected Index # from Array", selectedScopeIndex, scopes)
} else {
selectedScopeIndex = scopes.findIndex((s) => s == patternMatches[1]);
console.log("Selected Stats Index # from Array", selectedScopeIndex, scopes)
}
}
}
}
$: data = rawData[selectedScopeIndex]; $: data = rawData[selectedScopeIndex];
$: series = data?.series.filter( $: series = data?.series.filter(
(series) => selectedHost == null || series.hostname == selectedHost, (series) => selectedHost == null || series.hostname == selectedHost,
); );
$: if ($metricData && !$metricData.fetching) {
rawData = $metricData.data.singleUpdate.map((x) => x.metric)
console.log('S> NEW DATA:', rawData)
}
$: console.log('SelectedScope', selectedScope)
</script> </script>
<InputGroup> <InputGroup>
@ -144,12 +175,7 @@
{/each} {/each}
</select> </select>
{/if} {/if}
<select class="form-select" bind:value={selectedResolution} on:change={() => { <select class="form-select" bind:value={pendingResolution}>
scopes = ["node"]
selectedScope = "node"
selectedScopes = [...scopes]
loadUpdate()
}}>
{#each resolutions as res} {#each resolutions as res}
<option value={res}>Timestep: {res}</option> <option value={res}>Timestep: {res}</option>
{/each} {/each}