mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2026-03-20 23:07:29 +01:00
311 lines
11 KiB
Svelte
311 lines
11 KiB
Svelte
<!--
|
|
@component Plot render option selection for users
|
|
|
|
Properties:
|
|
- `config Object`: Current cc-config
|
|
- `message Object`: Message to display on success or error [Bindable]
|
|
- `displayMessage Bool`: If to display message content [Bindable]
|
|
- `updateSetting Func`: The callback function to apply current option selection
|
|
-->
|
|
|
|
<script>
|
|
import {
|
|
Button,
|
|
Row,
|
|
Col,
|
|
Card,
|
|
CardTitle,
|
|
} from "@sveltestrap/sveltestrap";
|
|
import { getContext } from "svelte";
|
|
import { fade } from "svelte/transition";
|
|
|
|
/* Svelte 5 Props */
|
|
let {
|
|
config,
|
|
message = $bindable(),
|
|
displayMessage = $bindable(),
|
|
updateSetting
|
|
} = $props();
|
|
|
|
const resampleConfig = getContext("resampling");
|
|
</script>
|
|
|
|
<Row cols={3} class="p-2 g-2">
|
|
<!-- LINE WIDTH -->
|
|
<Col>
|
|
<Card class="h-100">
|
|
<form
|
|
id="line-width-form"
|
|
method="post"
|
|
action="/frontend/configuration/"
|
|
class="card-body"
|
|
onsubmit={(e) => updateSetting(e, {
|
|
selector: "#line-width-form",
|
|
target: "lw",
|
|
})}
|
|
>
|
|
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
|
|
<CardTitle
|
|
style="margin-bottom: 1em; display: flex; align-items: center;"
|
|
>
|
|
<div>Line Width</div>
|
|
<!-- Expand If-Clause for clarity once -->
|
|
{#if displayMessage && message.target == "lw"}
|
|
<div style="margin-left: auto; font-size: 0.9em;">
|
|
<code style="color: {message.color};" out:fade>
|
|
Update: {message.msg}
|
|
</code>
|
|
</div>
|
|
{/if}
|
|
</CardTitle>
|
|
<input type="hidden" name="key" value="plotConfiguration_lineWidth" />
|
|
<div class="mb-3">
|
|
<label for="value" class="form-label">Line Width</label>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="lwvalue"
|
|
name="value"
|
|
aria-describedby="lineWidthHelp"
|
|
value={config?.plotConfiguration_lineWidth}
|
|
min="1"
|
|
/>
|
|
<div id="lineWidthHelp" class="form-text">
|
|
Width of the lines in the timeseries plots.
|
|
</div>
|
|
</div>
|
|
<Button color="primary" type="submit">Submit</Button>
|
|
</form>
|
|
</Card>
|
|
</Col>
|
|
|
|
<!-- PLOTS PER ROW -->
|
|
<Col>
|
|
<Card class="h-100">
|
|
<form
|
|
id="plots-per-row-form"
|
|
method="post"
|
|
action="/frontend/configuration/"
|
|
class="card-body"
|
|
onsubmit={(e) => updateSetting(e, {
|
|
selector: "#plots-per-row-form",
|
|
target: "ppr",
|
|
})}
|
|
>
|
|
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
|
|
<CardTitle
|
|
style="margin-bottom: 1em; display: flex; align-items: center;"
|
|
>
|
|
<div>Plots per Row</div>
|
|
{#if displayMessage && message.target == "ppr"}
|
|
<div style="margin-left: auto; font-size: 0.9em;">
|
|
<code style="color: {message.color};" out:fade>
|
|
Update: {message.msg}
|
|
</code>
|
|
</div>
|
|
{/if}
|
|
</CardTitle>
|
|
<input type="hidden" name="key" value="plotConfiguration_plotsPerRow" />
|
|
<div class="mb-3">
|
|
<label for="value" class="form-label">Plots per Row</label>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="pprvalue"
|
|
name="value"
|
|
aria-describedby="plotsperrowHelp"
|
|
value={config?.plotConfiguration_plotsPerRow}
|
|
min="1"
|
|
/>
|
|
<div id="plotsperrowHelp" class="form-text">
|
|
How many plots to show next to each other on pages such as
|
|
/monitoring/job/, /monitoring/system/...
|
|
</div>
|
|
</div>
|
|
<Button color="primary" type="submit">Submit</Button>
|
|
</form>
|
|
</Card>
|
|
</Col>
|
|
|
|
<!-- BACKGROUND -->
|
|
<Col class="d-flex justify-content-between">
|
|
<Card class="h-100" style="width: 49%;">
|
|
<form
|
|
id="backgrounds-form"
|
|
method="post"
|
|
action="/frontend/configuration/"
|
|
class="card-body"
|
|
onsubmit={(e) => updateSetting(e, {
|
|
selector: "#backgrounds-form",
|
|
target: "bg",
|
|
})}
|
|
>
|
|
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
|
|
<CardTitle
|
|
style="margin-bottom: 1em; display: flex; align-items: center;"
|
|
>
|
|
<div>Colored Backgrounds</div>
|
|
{#if displayMessage && message.target == "bg"}
|
|
<div style="margin-left: auto; font-size: 0.9em;">
|
|
<code style="color: {message.color};" out:fade>
|
|
Update: {message.msg}
|
|
</code>
|
|
</div>
|
|
{/if}
|
|
</CardTitle>
|
|
<input type="hidden" name="key" value="plotConfiguration_colorBackground" />
|
|
<div class="mb-3">
|
|
<div>
|
|
{#if config?.plotConfiguration_colorBackground}
|
|
<input type="radio" id="colb-true-checked" name="value" value="true" checked />
|
|
{:else}
|
|
<input type="radio" id="colb-true" name="value" value="true" />
|
|
{/if}
|
|
<label for="true">Yes</label>
|
|
</div>
|
|
<div>
|
|
{#if config?.plotConfiguration_colorBackground}
|
|
<input type="radio" id="colb-false" name="value" value="false" />
|
|
{:else}
|
|
<input type="radio" id="colb-false-checked" name="value" value="false" checked />
|
|
{/if}
|
|
<label for="false">No</label>
|
|
</div>
|
|
</div>
|
|
<Button color="primary" type="submit">Submit</Button>
|
|
</form>
|
|
</Card>
|
|
<Card class="h-100" style="width: 49%;">
|
|
<form
|
|
id="colorblindmode-form"
|
|
method="post"
|
|
action="/frontend/configuration/"
|
|
class="card-body"
|
|
onsubmit={(e) => updateSetting(e, {
|
|
selector: "#colorblindmode-form",
|
|
target: "cbm",
|
|
})}
|
|
>
|
|
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
|
|
<CardTitle
|
|
style="margin-bottom: 1em; display: flex; align-items: center;"
|
|
>
|
|
<div>Color Blind Mode</div>
|
|
{#if displayMessage && message.target == "cbm"}
|
|
<div style="margin-left: auto; font-size: 0.9em;">
|
|
<code style="color: {message.color};" out:fade>
|
|
Update: {message.msg}
|
|
</code>
|
|
</div>
|
|
{/if}
|
|
</CardTitle>
|
|
<input type="hidden" name="key" value="plotConfiguration_colorblindMode" />
|
|
<div class="mb-3">
|
|
<div>
|
|
{#if config?.plotConfiguration_colorblindMode}
|
|
<input type="radio" id="cbm-true-checked" name="value" value="true" checked />
|
|
{:else}
|
|
<input type="radio" id="cbm-true" name="value" value="true" />
|
|
{/if}
|
|
<label for="true">Yes</label>
|
|
</div>
|
|
<div>
|
|
{#if config?.plotConfiguration_colorblindMode}
|
|
<input type="radio" id="cbm-false" name="value" value="false" />
|
|
{:else}
|
|
<input type="radio" id="cbm-false-checked" name="value" value="false" checked />
|
|
{/if}
|
|
<label for="false">No</label>
|
|
</div>
|
|
</div>
|
|
<Button color="primary" type="submit">Submit</Button>
|
|
</form>
|
|
</Card>
|
|
</Col>
|
|
|
|
<!-- RESAMPLE POLICY -->
|
|
<Col>
|
|
<Card class="h-100">
|
|
<form
|
|
id="resample-policy-form"
|
|
method="post"
|
|
action="/frontend/configuration/"
|
|
class="card-body"
|
|
onsubmit={(e) => updateSetting(e, {
|
|
selector: "#resample-policy-form",
|
|
target: "rsp",
|
|
})}
|
|
>
|
|
<CardTitle
|
|
style="margin-bottom: 1em; display: flex; align-items: center;"
|
|
>
|
|
<div>Resample Policy</div>
|
|
{#if displayMessage && message.target == "rsp"}
|
|
<div style="margin-left: auto; font-size: 0.9em;">
|
|
<code style="color: {message.color};" out:fade>
|
|
Update: {message.msg}
|
|
</code>
|
|
</div>
|
|
{/if}
|
|
</CardTitle>
|
|
<input type="hidden" name="key" value="plotConfiguration_resamplePolicy" />
|
|
<div class="mb-3">
|
|
{#each [["", "Default"], ["low", "Low"], ["medium", "Medium"], ["high", "High"]] as [val, label]}
|
|
<div>
|
|
<input type="radio" id="rsp-{val || 'default'}" name="value" value={JSON.stringify(val)}
|
|
checked={(!config?.plotConfiguration_resamplePolicy && val === "") || config?.plotConfiguration_resamplePolicy === val} />
|
|
<label for="rsp-{val || 'default'}">{label}</label>
|
|
</div>
|
|
{/each}
|
|
<div id="resamplePolicyHelp" class="form-text">
|
|
Controls how many data points are shown in metric plots. Low = fast overview (~200 points), Medium = balanced (~500), High = maximum detail (~1000).
|
|
</div>
|
|
</div>
|
|
<Button color="primary" type="submit">Submit</Button>
|
|
</form>
|
|
</Card>
|
|
</Col>
|
|
|
|
<!-- RESAMPLE ALGORITHM -->
|
|
<Col>
|
|
<Card class="h-100">
|
|
<form
|
|
id="resample-algo-form"
|
|
method="post"
|
|
action="/frontend/configuration/"
|
|
class="card-body"
|
|
onsubmit={(e) => updateSetting(e, {
|
|
selector: "#resample-algo-form",
|
|
target: "rsa",
|
|
})}
|
|
>
|
|
<CardTitle
|
|
style="margin-bottom: 1em; display: flex; align-items: center;"
|
|
>
|
|
<div>Resample Algorithm</div>
|
|
{#if displayMessage && message.target == "rsa"}
|
|
<div style="margin-left: auto; font-size: 0.9em;">
|
|
<code style="color: {message.color};" out:fade>
|
|
Update: {message.msg}
|
|
</code>
|
|
</div>
|
|
{/if}
|
|
</CardTitle>
|
|
<input type="hidden" name="key" value="plotConfiguration_resampleAlgo" />
|
|
<div class="mb-3">
|
|
{#each [["", "Default"], ["lttb", "LTTB"], ["average", "Average"], ["simple", "Simple"]] as [val, label]}
|
|
<div>
|
|
<input type="radio" id="rsa-{val || 'default'}" name="value" value={JSON.stringify(val)}
|
|
checked={(!config?.plotConfiguration_resampleAlgo && val === "") || config?.plotConfiguration_resampleAlgo === val} />
|
|
<label for="rsa-{val || 'default'}">{label}</label>
|
|
</div>
|
|
{/each}
|
|
<div id="resampleAlgoHelp" class="form-text">
|
|
Algorithm used when downsampling time-series data. LTTB preserves visual shape, Average smooths data, Simple picks every Nth point.
|
|
</div>
|
|
</div>
|
|
<Button color="primary" type="submit">Submit</Button>
|
|
</form>
|
|
</Card>
|
|
</Col>
|
|
</Row> |