feat: add statistics series render to job view metric plots

This commit is contained in:
Christoph Kluge 2024-05-02 16:32:01 +02:00
parent ef51e69ffb
commit 72557fd0bf
2 changed files with 33 additions and 7 deletions

View File

@ -306,9 +306,6 @@
</Button> </Button>
{/if} {/if}
</Col> </Col>
<!-- <Col xs="auto">
<Zoom timeseriesPlots={plots} />
</Col> -->
</Row> </Row>
<Row> <Row>
<Col> <Col>

View File

@ -33,8 +33,17 @@
error = null; error = null;
let selectedScope = minScope(scopes); let selectedScope = minScope(scopes);
let statsPattern = /(.*)-stats$/
let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
let selectedScopeIndex
$: availableScopes = scopes; $: availableScopes = scopes;
$: selectedScopeIndex = scopes.findIndex((s) => s == selectedScope); $: patternMatches = statsPattern.exec(selectedScope)
$: if (!patternMatches) {
selectedScopeIndex = scopes.findIndex((s) => s == selectedScope);
} else {
selectedScopeIndex = scopes.findIndex((s) => s == patternMatches[1]);
}
$: 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,
@ -62,6 +71,7 @@
if (jm.scope != "node") { if (jm.scope != "node") {
scopes = [...scopes, jm.scope]; scopes = [...scopes, jm.scope];
rawData.push(jm.metric); rawData.push(jm.metric);
statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
selectedScope = jm.scope; selectedScope = jm.scope;
selectedScopeIndex = scopes.findIndex((s) => s == jm.scope); selectedScopeIndex = scopes.findIndex((s) => s == jm.scope);
dispatch("more-loaded", jm); dispatch("more-loaded", jm);
@ -79,15 +89,18 @@
: "") + (metricConfig?.unit?.base ? metricConfig.unit.base : "")}) : "") + (metricConfig?.unit?.base ? metricConfig.unit.base : "")})
</InputGroupText> </InputGroupText>
<select class="form-select" bind:value={selectedScope}> <select class="form-select" bind:value={selectedScope}>
{#each availableScopes as scope} {#each availableScopes as scope, index}
<option value={scope}>{scope}</option> <option value={scope}>{scope}</option>
{#if statsSeries[index]}
<option value={scope + '-stats'}>stats series ({scope})</option>
{/if}
{/each} {/each}
{#if availableScopes.length == 1 && metricConfig?.scope != "node"} {#if availableScopes.length == 1 && metricConfig?.scope != "node"}
<option value={"load-more"}>Load more...</option> <option value={"load-more"}>Load more...</option>
{/if} {/if}
</select> </select>
{#if job.resources.length > 1} {#if job.resources.length > 1}
<select class="form-select" bind:value={selectedHost}> <select class="form-select" bind:value={selectedHost} disabled={patternMatches}>
<option value={null}>All Hosts</option> <option value={null}>All Hosts</option>
{#each job.resources as { hostname }} {#each job.resources as { hostname }}
<option value={hostname}>{hostname}</option> <option value={hostname}>{hostname}</option>
@ -100,7 +113,7 @@
<Spinner /> <Spinner />
{:else if error != null} {:else if error != null}
<Card body color="danger">{error.message}</Card> <Card body color="danger">{error.message}</Card>
{:else if series != null} {:else if series != null && !patternMatches}
<Timeseries <Timeseries
bind:this={plot} bind:this={plot}
{width} {width}
@ -114,5 +127,21 @@
{isShared} {isShared}
resources={job.resources} resources={job.resources}
/> />
{:else if statsSeries[selectedScopeIndex] != null && patternMatches}
<Timeseries
bind:this={plot}
{width}
height={300}
{cluster}
{subCluster}
timestep={data.timestep}
scope={selectedScope}
metric={metricName}
{series}
{isShared}
resources={job.resources}
statisticsSeries={statsSeries[selectedScopeIndex]}
useStatsSeries={!!statsSeries[selectedScopeIndex]}
/>
{/if} {/if}
{/key} {/key}