Merge pull request #3341 from bluewave-labs/fix/global-thresholds
Fix/global thresholds
This commit is contained in:
5 files changed
+102
-101
No files matched your search
+2
-1
@@ -5,4 +5,5 @@
|
||||
mongo
|
||||
node_modules/
|
||||
docs/architecture
|
||||
docs/reviews
|
||||
docs/reviews
|
||||
docs/todo
|
||||
@@ -22,10 +22,22 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
|
||||
systemEmailTLSServername: data?.systemEmailTLSServername || "",
|
||||
systemEmailPort: data?.systemEmailPort,
|
||||
globalThresholds: {
|
||||
cpu: data?.globalThresholds?.cpu ?? 0,
|
||||
memory: data?.globalThresholds?.memory ?? 0,
|
||||
disk: data?.globalThresholds?.disk ?? 0,
|
||||
temperature: data?.globalThresholds?.temperature ?? 0,
|
||||
cpu:
|
||||
data?.globalThresholds?.cpu && data.globalThresholds.cpu >= 1
|
||||
? data.globalThresholds.cpu
|
||||
: 80,
|
||||
memory:
|
||||
data?.globalThresholds?.memory && data.globalThresholds.memory >= 1
|
||||
? data.globalThresholds.memory
|
||||
: 80,
|
||||
disk:
|
||||
data?.globalThresholds?.disk && data.globalThresholds.disk >= 1
|
||||
? data.globalThresholds.disk
|
||||
: 80,
|
||||
temperature:
|
||||
data?.globalThresholds?.temperature && data.globalThresholds.temperature >= 1
|
||||
? data.globalThresholds.temperature
|
||||
: 80,
|
||||
},
|
||||
checkTTL: data?.checkTTL ?? 30,
|
||||
pagespeedApiKey: "",
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import { BasePage, ConfigBox, TextLink } from "@/Components/design-elements";
|
||||
import { Autocomplete, Select, Dialog, SwitchComponent } from "@/Components/inputs";
|
||||
import { Stack, useTheme, MenuItem, Link, type SelectChangeEvent } from "@mui/material";
|
||||
import {
|
||||
Stack,
|
||||
useTheme,
|
||||
MenuItem,
|
||||
Link,
|
||||
Alert,
|
||||
type SelectChangeEvent,
|
||||
} from "@mui/material";
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
@@ -14,7 +21,7 @@ import { useIsAdmin } from "@/Hooks/useIsAdmin.js";
|
||||
import type { SettingsFormData } from "@/Validation/settings";
|
||||
import { useState } from "react";
|
||||
import { Controller } from "react-hook-form";
|
||||
import { TextField, Button, FieldLabel } from "@/Components/inputs";
|
||||
import { TextField, Button, FieldLabel, SliderWithLabel } from "@/Components/inputs";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { useDelete } from "@/Hooks/UseApi";
|
||||
|
||||
@@ -257,8 +264,7 @@ export const SettingsPage = () => {
|
||||
(acc as any)[typedKey] = Object.entries(value).reduce(
|
||||
(nested, [nestedKey, nestedValue]) => ({
|
||||
...nested,
|
||||
[nestedKey]:
|
||||
nestedValue === undefined || nestedValue === 0 ? "" : nestedValue,
|
||||
[nestedKey]: nestedValue === undefined ? "" : nestedValue,
|
||||
}),
|
||||
{}
|
||||
);
|
||||
@@ -465,24 +471,16 @@ export const SettingsPage = () => {
|
||||
name="globalThresholds.cpu"
|
||||
control={form.control}
|
||||
defaultValue={defaults.globalThresholds?.cpu}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
render={({ field }) => (
|
||||
<SliderWithLabel
|
||||
{...field}
|
||||
value={
|
||||
field.value === undefined || field.value === 0 ? "" : field.value
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
field.onChange(val === "" ? 0 : Number(val));
|
||||
}}
|
||||
fieldLabel={t("pages.settings.form.thresholds.option.cpu.label")}
|
||||
type="number"
|
||||
inputProps={{ min: 0 }}
|
||||
placeholder={t(
|
||||
"pages.settings.form.thresholds.option.cpu.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
min={1}
|
||||
max={100}
|
||||
sliderMaxWidth={{ xs: "100%", md: "50%" }}
|
||||
value={field.value || 1}
|
||||
onChange={(_, value) => field.onChange(value)}
|
||||
valueLabelDisplay="auto"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -490,24 +488,16 @@ export const SettingsPage = () => {
|
||||
name="globalThresholds.memory"
|
||||
control={form.control}
|
||||
defaultValue={defaults.globalThresholds?.memory}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
render={({ field }) => (
|
||||
<SliderWithLabel
|
||||
{...field}
|
||||
value={
|
||||
field.value === undefined || field.value === 0 ? "" : field.value
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
field.onChange(val === "" ? 0 : Number(val));
|
||||
}}
|
||||
fieldLabel={t("pages.settings.form.thresholds.option.memory.label")}
|
||||
type="number"
|
||||
inputProps={{ min: 0 }}
|
||||
placeholder={t(
|
||||
"pages.settings.form.thresholds.option.memory.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
min={1}
|
||||
max={100}
|
||||
sliderMaxWidth={{ xs: "100%", md: "50%" }}
|
||||
value={field.value || 1}
|
||||
onChange={(_, value) => field.onChange(value)}
|
||||
valueLabelDisplay="auto"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -515,24 +505,16 @@ export const SettingsPage = () => {
|
||||
name="globalThresholds.disk"
|
||||
control={form.control}
|
||||
defaultValue={defaults.globalThresholds?.disk}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
render={({ field }) => (
|
||||
<SliderWithLabel
|
||||
{...field}
|
||||
value={
|
||||
field.value === undefined || field.value === 0 ? "" : field.value
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
field.onChange(val === "" ? 0 : Number(val));
|
||||
}}
|
||||
fieldLabel={t("pages.settings.form.thresholds.option.disk.label")}
|
||||
type="number"
|
||||
inputProps={{ min: 0 }}
|
||||
placeholder={t(
|
||||
"pages.settings.form.thresholds.option.disk.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
min={1}
|
||||
max={100}
|
||||
sliderMaxWidth={{ xs: "100%", md: "50%" }}
|
||||
value={field.value || 1}
|
||||
onChange={(_, value) => field.onChange(value)}
|
||||
valueLabelDisplay="auto"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -540,26 +522,18 @@ export const SettingsPage = () => {
|
||||
name="globalThresholds.temperature"
|
||||
control={form.control}
|
||||
defaultValue={defaults.globalThresholds?.temperature}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextField
|
||||
render={({ field }) => (
|
||||
<SliderWithLabel
|
||||
{...field}
|
||||
value={
|
||||
field.value === undefined || field.value === 0 ? "" : field.value
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
field.onChange(val === "" ? 0 : Number(val));
|
||||
}}
|
||||
fieldLabel={t(
|
||||
"pages.settings.form.thresholds.option.temperature.label"
|
||||
)}
|
||||
type="number"
|
||||
inputProps={{ min: 0 }}
|
||||
placeholder={t(
|
||||
"pages.settings.form.thresholds.option.temperature.placeholder"
|
||||
)}
|
||||
error={!!fieldState.error}
|
||||
helperText={fieldState.error?.message}
|
||||
min={1}
|
||||
max={150}
|
||||
sliderMaxWidth={{ xs: "100%", md: "50%" }}
|
||||
value={field.value || 1}
|
||||
onChange={(_, value) => field.onChange(value)}
|
||||
valueLabelDisplay="auto"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -997,6 +971,39 @@ export const SettingsPage = () => {
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
{/* Validation Error Display */}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<Alert
|
||||
severity="error"
|
||||
sx={{ mb: 2, flexGrow: 1, mr: 2 }}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: 600, mb: 1 }}
|
||||
>
|
||||
{t("pages.settings.form.validation.errorMessage")}
|
||||
</Typography>
|
||||
<Box
|
||||
component="ul"
|
||||
sx={{ m: 0, pl: 2 }}
|
||||
>
|
||||
{Object.entries(form.formState.errors).map(([field, error]) => {
|
||||
const message =
|
||||
typeof error === "object" && error?.message
|
||||
? error.message
|
||||
: "Invalid value";
|
||||
return (
|
||||
<li key={field}>
|
||||
<Typography variant="body2">
|
||||
<strong>{field}:</strong> {message}
|
||||
</Typography>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
loading={isSaving}
|
||||
type="submit"
|
||||
|
||||
@@ -40,34 +40,12 @@ export const settingsSchema = z.object({
|
||||
.string()
|
||||
.transform((val) => (val.trim() === "" ? undefined : val.trim()))
|
||||
.optional(),
|
||||
globalThresholds: z
|
||||
.object({
|
||||
cpu: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Please enter a valid value")
|
||||
.max(100, "Maximum value is 100")
|
||||
.optional(),
|
||||
memory: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Please enter a valid value")
|
||||
.max(100, "Maximum value is 100")
|
||||
.optional(),
|
||||
disk: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Please enter a valid value")
|
||||
.max(100, "Maximum value is 100")
|
||||
.optional(),
|
||||
temperature: z
|
||||
.number()
|
||||
.int()
|
||||
.min(1, "Please enter a valid value")
|
||||
.max(150, "Maximum value is 150")
|
||||
.optional(),
|
||||
})
|
||||
.optional(),
|
||||
globalThresholds: z.object({
|
||||
cpu: z.number().int().min(1).max(100),
|
||||
memory: z.number().int().min(1).max(100),
|
||||
disk: z.number().int().min(1).max(100),
|
||||
temperature: z.number().int().min(1).max(150),
|
||||
}),
|
||||
});
|
||||
|
||||
export type SettingsFormData = z.infer<typeof settingsSchema>;
|
||||
@@ -1134,6 +1134,9 @@
|
||||
"about": {
|
||||
"title": "About",
|
||||
"developedBy": "Developed by Bluewave Labs"
|
||||
},
|
||||
"validation": {
|
||||
"errorMessage": "Please fix the following validation errors:"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user