Update GeoIntel project files
This commit is contained in:
Jens
@@ -0,0 +1,306 @@
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
BarChart3,
|
||||
ServerCog,
|
||||
SlidersHorizontal,
|
||||
} from "lucide-react";
|
||||
import type {
|
||||
Preferences,
|
||||
PreferencesPatch,
|
||||
WidgetChartType,
|
||||
} from "../../shared/contracts";
|
||||
|
||||
interface Props {
|
||||
preferences: Preferences;
|
||||
onChange: (patch: PreferencesPatch, message: string) => void;
|
||||
}
|
||||
|
||||
const statMetrics = [
|
||||
{
|
||||
label: "CPU cores",
|
||||
display: "CPU-kernen",
|
||||
description: "Logische CPU-capaciteit die de Docker-host meldt.",
|
||||
},
|
||||
{
|
||||
label: "Memory capacity",
|
||||
display: "Geheugencapaciteit",
|
||||
description: "Totaal geheugen uit de alleen-lezen inventarisservice.",
|
||||
},
|
||||
{
|
||||
label: "Stopped containers",
|
||||
display: "Gestopte containers",
|
||||
description: "Aanwezige containers die momenteel niet actief zijn.",
|
||||
},
|
||||
{
|
||||
label: "Array state",
|
||||
display: "Arraystatus",
|
||||
description: "Overzicht van de Unraid-array- en pariteitsstatus.",
|
||||
},
|
||||
{
|
||||
label: "Storage used",
|
||||
display: "Opslag gebruikt",
|
||||
description: "Gebruikte capaciteit van de gemelde array en pools.",
|
||||
},
|
||||
{
|
||||
label: "Hottest temperature",
|
||||
display: "Hoogste temperatuur",
|
||||
description: "Hoogste beschikbare temperatuur van host- of opslagsensoren.",
|
||||
},
|
||||
{
|
||||
label: "UPS battery",
|
||||
display: "UPS-batterij",
|
||||
description:
|
||||
"UPS-status en resterende batterij indien ingesteld in Unraid.",
|
||||
},
|
||||
];
|
||||
|
||||
const chartMetrics: Array<[string, string]> = [
|
||||
["Running containers", "Actieve containers"],
|
||||
["Stopped containers", "Gestopte containers"],
|
||||
["Images", "Images"],
|
||||
["Memory capacity", "Geheugencapaciteit"],
|
||||
["Storage used", "Opslag gebruikt"],
|
||||
["Hottest temperature", "Hoogste temperatuur"],
|
||||
["Parity errors", "Pariteitsfouten"],
|
||||
["UPS battery", "UPS-batterij"],
|
||||
];
|
||||
|
||||
export function ServerWidgetAdvancedConfigurator({
|
||||
preferences,
|
||||
onChange,
|
||||
}: Props) {
|
||||
const labels = statMetrics.map((metric) => metric.label);
|
||||
const ordered = [
|
||||
...preferences.serverWidgetMetricOrder.filter((label) =>
|
||||
labels.includes(label),
|
||||
),
|
||||
...labels.filter(
|
||||
(label) => !preferences.serverWidgetMetricOrder.includes(label),
|
||||
),
|
||||
].filter((label) => !preferences.serverWidgetHiddenMetrics.includes(label));
|
||||
const move = (index: number, direction: -1 | 1) => {
|
||||
const target = index + direction;
|
||||
if (!ordered[target]) return;
|
||||
const next = [...ordered];
|
||||
[next[index], next[target]] = [next[target]!, next[index]!];
|
||||
onChange(
|
||||
{ serverWidgetMetricOrder: next },
|
||||
"Volgorde van Unraid-metingen bijgewerkt",
|
||||
);
|
||||
};
|
||||
return (
|
||||
<details className="widget-advanced-config server-advanced-config">
|
||||
<summary>
|
||||
<ServerCog size={14} /> Volledige Unraid-paneelconfiguratie
|
||||
</summary>
|
||||
<section className="widget-config-section" aria-label="Unraid-grafiek">
|
||||
<header>
|
||||
<BarChart3 size={14} />
|
||||
<span>
|
||||
<strong>Servertrendgrafiek</strong>
|
||||
<small>
|
||||
Toon geschiedenis van Docker-inventaris, opslag, temperatuur,
|
||||
pariteit of UPS.
|
||||
</small>
|
||||
</span>
|
||||
</header>
|
||||
<div className="widget-advanced-grid">
|
||||
<label>
|
||||
<span>Reeks</span>
|
||||
<select
|
||||
name="serverWidgetChartMetric"
|
||||
value={preferences.serverWidgetChartMetric}
|
||||
onChange={(event) =>
|
||||
onChange(
|
||||
{ serverWidgetChartMetric: event.target.value },
|
||||
"Unraid-grafiekreeks bijgewerkt",
|
||||
)
|
||||
}
|
||||
>
|
||||
{chartMetrics.map(([metric, display]) => (
|
||||
<option key={metric} value={metric}>
|
||||
{display}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Grafiekstijl</span>
|
||||
<select
|
||||
name="serverWidgetChartType"
|
||||
value={preferences.serverWidgetChartType}
|
||||
onChange={(event) =>
|
||||
onChange(
|
||||
{
|
||||
serverWidgetChartType: event.target
|
||||
.value as WidgetChartType,
|
||||
},
|
||||
"Unraid-grafiekstijl bijgewerkt",
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="line">Lijn</option>
|
||||
<option value="area">Vlak</option>
|
||||
<option value="bar">Balken</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Geschiedenisvenster</span>
|
||||
<select
|
||||
name="serverWidgetChartSamples"
|
||||
value={preferences.serverWidgetChartSamples}
|
||||
onChange={(event) =>
|
||||
onChange(
|
||||
{ serverWidgetChartSamples: Number(event.target.value) },
|
||||
"Unraid-grafiekvenster bijgewerkt",
|
||||
)
|
||||
}
|
||||
>
|
||||
{[10, 20, 30, 45, 60].map((samples) => (
|
||||
<option key={samples} value={samples}>
|
||||
Laatste {samples} metingen
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Maximum aantal statistieken</span>
|
||||
<select
|
||||
name="serverWidgetStatLimit"
|
||||
value={preferences.serverWidgetStatLimit}
|
||||
onChange={(event) =>
|
||||
onChange(
|
||||
{ serverWidgetStatLimit: Number(event.target.value) },
|
||||
"Limiet voor Unraid-statistieken bijgewerkt",
|
||||
)
|
||||
}
|
||||
>
|
||||
{[3, 4, 5, 6, 7, 8].map((limit) => (
|
||||
<option key={limit} value={limit}>
|
||||
{limit} statistieken
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className={
|
||||
preferences.serverWidgetShowChart
|
||||
? "sparkline-toggle active"
|
||||
: "sparkline-toggle"
|
||||
}
|
||||
aria-pressed={preferences.serverWidgetShowChart}
|
||||
onClick={() =>
|
||||
onChange(
|
||||
{
|
||||
serverWidgetShowChart: !preferences.serverWidgetShowChart,
|
||||
},
|
||||
"Zichtbaarheid van Unraid-grafiek bijgewerkt",
|
||||
)
|
||||
}
|
||||
>
|
||||
<BarChart3 size={15} />
|
||||
<span>
|
||||
<strong>Grafiek tonen</strong>
|
||||
<small>Geschiedenis blijft alleen in het geheugen</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={
|
||||
preferences.serverWidgetShowLegend
|
||||
? "sparkline-toggle active"
|
||||
: "sparkline-toggle"
|
||||
}
|
||||
aria-pressed={preferences.serverWidgetShowLegend}
|
||||
onClick={() =>
|
||||
onChange(
|
||||
{
|
||||
serverWidgetShowLegend: !preferences.serverWidgetShowLegend,
|
||||
},
|
||||
"Legenda van Unraid-grafiek bijgewerkt",
|
||||
)
|
||||
}
|
||||
>
|
||||
<SlidersHorizontal size={15} />
|
||||
<span>
|
||||
<strong>Legenda tonen</strong>
|
||||
<small>Reeks, laatste waarde en metingen</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div className="metric-visibility-list" aria-label="Unraid-statistieken">
|
||||
<strong>Serverstatistieken</strong>
|
||||
<small>
|
||||
Kies welke eigen Unraid- en Docker-hostsignalen de kaart mag tonen.
|
||||
</small>
|
||||
<div>
|
||||
{statMetrics.map((metric) => {
|
||||
const visible = !preferences.serverWidgetHiddenMetrics.includes(
|
||||
metric.label,
|
||||
);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={metric.label}
|
||||
className={visible ? "active" : ""}
|
||||
aria-pressed={visible}
|
||||
onClick={() =>
|
||||
onChange(
|
||||
{
|
||||
serverWidgetHiddenMetrics: visible
|
||||
? [
|
||||
...preferences.serverWidgetHiddenMetrics,
|
||||
metric.label,
|
||||
]
|
||||
: preferences.serverWidgetHiddenMetrics.filter(
|
||||
(label) => label !== metric.label,
|
||||
),
|
||||
},
|
||||
`${metric.display} ${visible ? "verborgen" : "ingeschakeld"}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<span>{metric.display}</span>
|
||||
<small>{metric.description}</small>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{ordered.length > 1 && (
|
||||
<div
|
||||
className="metric-order-list"
|
||||
aria-label="Volgorde van Unraid-metingen"
|
||||
>
|
||||
{ordered.map((metric, index) => (
|
||||
<span key={metric}>
|
||||
<strong>
|
||||
{statMetrics.find((item) => item.label === metric)?.display ??
|
||||
metric}
|
||||
</strong>
|
||||
<button
|
||||
type="button"
|
||||
disabled={index === 0}
|
||||
onClick={() => move(index, -1)}
|
||||
aria-label={`${metric} eerder plaatsen`}
|
||||
>
|
||||
<ArrowUp size={12} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={index === ordered.length - 1}
|
||||
onClick={() => move(index, 1)}
|
||||
aria-label={`${metric} later plaatsen`}
|
||||
>
|
||||
<ArrowDown size={12} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</details>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user