cc-backend/web/frontend/src/Metric.svelte

96 lines
3.3 KiB
Svelte
Raw Normal View History

2022-06-22 11:20:57 +02:00
<script>
import { getContext, createEventDispatcher } from 'svelte'
import Timeseries from './plots/MetricPlot.svelte'
import { InputGroup, InputGroupText, Spinner, Card } from 'sveltestrap'
import { fetchMetrics, minScope } from './utils'
export let job
export let metricName
2022-06-22 11:20:57 +02:00
export let scopes
export let width
export let rawData
export let isShared = false
2022-06-22 11:20:57 +02:00
const dispatch = createEventDispatcher()
const cluster = getContext('clusters').find(cluster => cluster.name == job.cluster)
const subCluster = cluster.subClusters.find(subCluster => subCluster.name == job.subCluster)
const metricConfig = cluster.metricConfig.find(metricConfig => metricConfig.name == metricName)
let selectedHost = null, plot, fetching = false, error = null
let selectedScope = minScope(scopes)
2022-06-22 11:20:57 +02:00
2023-06-13 16:42:32 +02:00
$: availableScopes = scopes
$: selectedScopeIndex = scopes.findIndex(s => s == selectedScope)
$: data = rawData[selectedScopeIndex]
2022-06-22 11:20:57 +02:00
$: series = data?.series.filter(series => selectedHost == null || series.hostname == selectedHost)
let from = null, to = null
export function setTimeRange(f, t) {
from = f, to = t
}
$: if (plot != null) plot.setTimeRange(from, to)
export async function loadMore() {
fetching = true
let response = await fetchMetrics(job, [metricName], ["core"])
2022-06-22 11:20:57 +02:00
fetching = false
if (response.error) {
error = response.error
return
}
for (let jm of response.data.jobMetrics) {
if (jm.scope != "node") {
2023-06-13 16:42:32 +02:00
scopes = [...scopes, jm.scope]
rawData.push(jm.metric)
selectedScope = jm.scope
2023-06-13 16:42:32 +02:00
selectedScopeIndex = scopes.findIndex(s => s == jm.scope)
2022-06-22 11:20:57 +02:00
dispatch('more-loaded', jm)
}
}
}
$: if (selectedScope == "load-more") loadMore()
</script>
<InputGroup>
<InputGroupText style="min-width: 150px;">
{metricName} ({(metricConfig?.unit?.prefix ? metricConfig.unit.prefix : '') +
(metricConfig?.unit?.base ? metricConfig.unit.base : '')})
2022-06-22 11:20:57 +02:00
</InputGroupText>
2023-06-13 16:49:34 +02:00
<select class="form-select" bind:value={selectedScope}>
2023-06-13 16:42:32 +02:00
{#each availableScopes as scope}
2022-06-22 11:20:57 +02:00
<option value={scope}>{scope}</option>
{/each}
2023-06-13 16:42:32 +02:00
{#if availableScopes.length == 1 && metricConfig?.scope != "node"}
2022-06-22 11:20:57 +02:00
<option value={"load-more"}>Load more...</option>
{/if}
</select>
{#if job.resources.length > 1}
<select class="form-select" bind:value={selectedHost}>
<option value={null}>All Hosts</option>
{#each job.resources as { hostname }}
<option value={hostname}>{hostname}</option>
{/each}
</select>
{/if}
</InputGroup>
{#key series}
{#if fetching == true}
<Spinner/>
{:else if error != null}
<Card body color="danger">{error.message}</Card>
{:else if series != null}
<Timeseries
bind:this={plot}
width={width} height={300}
cluster={cluster} subCluster={subCluster}
timestep={data.timestep}
scope={selectedScope} metric={metricName}
series={series}
isShared={isShared}
resources={job.resources} />
2022-06-22 11:20:57 +02:00
{/if}
{/key}