fix rerender by keys, disable resolution select if no resampling active

This commit is contained in:
Christoph Kluge 2025-01-24 16:17:51 +01:00
parent 735988decb
commit c21da6512a
3 changed files with 69 additions and 62 deletions

View File

@ -93,7 +93,7 @@
</script> </script>
<!-- ROW1: Tools--> <!-- ROW1: Tools-->
<Row cols={{ xs: 2, lg: !displayNodeOverview ? 5 : 4 }} class="mb-3"> <Row cols={{ xs: 2, lg: !displayNodeOverview ? (resampleConfig ? 5 : 4) : 4 }} class="mb-3">
{#if $initq.data} {#if $initq.data}
<!-- List Metric Select Col--> <!-- List Metric Select Col-->
{#if !displayNodeOverview} {#if !displayNodeOverview}
@ -110,19 +110,21 @@
</Button> </Button>
</InputGroup> </InputGroup>
</Col> </Col>
<Col> {#if resampleConfig}
<InputGroup> <Col>
<InputGroupText><Icon name="plus-slash-minus" /></InputGroupText> <InputGroup>
<InputGroupText>Resolution</InputGroupText> <InputGroupText><Icon name="plus-slash-minus" /></InputGroupText>
<Input type="select" bind:value={selectedResolution}> <InputGroupText>Resolution</InputGroupText>
{#each resampleResolutions as res} <Input type="select" bind:value={selectedResolution}>
<option value={res} {#each resampleResolutions as res}
>{res} sec</option <option value={res}
> >{res} sec</option
{/each} >
</Input> {/each}
</InputGroup> </Input>
</Col> </InputGroup>
</Col>
{/if}
{/if} {/if}
<!-- Node Col--> <!-- Node Col-->
<Col class="mt-2 mt-lg-0"> <Col class="mt-2 mt-lg-0">

View File

@ -181,6 +181,9 @@
style="padding-top: {headerPaddingTop}px;" style="padding-top: {headerPaddingTop}px;"
> >
{cluster} Node Info {cluster} Node Info
{#if $nodesQuery.fetching}
<Spinner size="sm" style="margin-left:10px;" secondary />
{/if}
</th> </th>
{#each selectedMetrics as metric (metric)} {#each selectedMetrics as metric (metric)}

View File

@ -133,53 +133,55 @@
{/if} {/if}
</td> </td>
{#each refinedData as metricData (metricData.data.name)} {#each refinedData as metricData (metricData.data.name)}
<td> {#key metricData}
{#if metricData?.disabled} <td>
<Card body class="mx-3" color="info" {#if metricData?.disabled}
>Metric disabled for subcluster <code <Card body class="mx-3" color="info"
>{metricData.data.name}:{nodeData.subCluster}</code >Metric disabled for subcluster <code
></Card >{metricData.data.name}:{nodeData.subCluster}</code
> ></Card
{:else if !!metricData.data?.metric.statisticsSeries} >
<!-- "No Data"-Warning included in MetricPlot-Component --> {:else if !!metricData.data?.metric.statisticsSeries}
<MetricPlot <!-- "No Data"-Warning included in MetricPlot-Component -->
{cluster} <MetricPlot
subCluster={nodeData.subCluster} {cluster}
metric={metricData.data.name} subCluster={nodeData.subCluster}
scope={metricData.data.scope} metric={metricData.data.name}
timestep={metricData.data.metric.timestep} scope={metricData.data.scope}
series={metricData.data.metric.series} timestep={metricData.data.metric.timestep}
statisticsSeries={metricData.data?.metric.statisticsSeries} series={metricData.data.metric.series}
useStatsSeries={!!metricData.data?.metric.statisticsSeries} statisticsSeries={metricData.data?.metric.statisticsSeries}
height={175} useStatsSeries={!!metricData.data?.metric.statisticsSeries}
forNode height={175}
/> forNode
<div class="my-2"/> />
{#key extendedLegendData} <div class="my-2"/>
<MetricPlot {#key extendedLegendData}
{cluster} <MetricPlot
subCluster={nodeData.subCluster} {cluster}
metric={metricData.data.name} subCluster={nodeData.subCluster}
scope={metricData.data.scope} metric={metricData.data.name}
timestep={metricData.data.metric.timestep} scope={metricData.data.scope}
series={metricData.data.metric.series} timestep={metricData.data.metric.timestep}
height={175} series={metricData.data.metric.series}
{extendedLegendData} height={175}
forNode {extendedLegendData}
/> forNode
{/key} />
{:else} {/key}
<MetricPlot {:else}
{cluster} <MetricPlot
subCluster={nodeData.subCluster} {cluster}
metric={metricData.data.name} subCluster={nodeData.subCluster}
scope={metricData.data.scope} metric={metricData.data.name}
timestep={metricData.data.metric.timestep} scope={metricData.data.scope}
series={metricData.data.metric.series} timestep={metricData.data.metric.timestep}
height={375} series={metricData.data.metric.series}
forNode height={375}
/> forNode
{/if} />
</td> {/if}
</td>
{/key}
{/each} {/each}
</tr> </tr>