TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor sliders

Browse Source
This commit is contained in:
Alex Holliday committed 2026-08-06 10:50:37 -07:00
1 parent 7cab326ad3
commit 226864079c
2 files changed
+79 -93
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Components/inputs/forms/FormSliderField.tsx
+34
View File
@@ -0,0 +1,34 @@
import {
Controller,
useFormContext,
type FieldPath,
type FieldValues,
} from "react-hook-form";
import { SliderWithLabel } from "@/Components/inputs";
interface FormSliderProps<T extends FieldValues> extends Omit<
React.ComponentProps<typeof SliderWithLabel>,
"name" | "value" | "onChange"
> {
name: FieldPath<T>;
}
export const FormSliderField = <T extends FieldValues>({
name,
...rest
}: FormSliderProps<T>) => {
const { control } = useFormContext<T>();
return (
<Controller
name={name}
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
{...rest}
/>
)}
/>
);
};
client/src/Pages/CreateMonitor/index.tsx
+45 -93
View File
@@ -20,12 +20,7 @@ import {
ConfigBox,
StepProgress,
} from "@/Components/design-elements";
import {
Button,
SwitchComponent as Switch,
SliderWithLabel,
Dialog,
} from "@/Components/inputs";
import { Button, SwitchComponent as Switch, Dialog } from "@/Components/inputs";
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
import { useGet, usePost, usePatch, useDelete } from "@/Hooks/UseApi";
import { useMonitorForm, getMonitorDefaults } from "@/Hooks/useMonitorForm";
@@ -59,6 +54,7 @@ import { FormTextField } from "@/Components/inputs/forms/FormTextField";
import { FormRadioGroup } from "@/Components/inputs/forms/FormRadioGroupField";
import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
import { FormSliderField } from "@/Components/inputs/forms/FormSliderField";
interface GeneralSettingsConfig {
urlLabel: string;
@@ -581,77 +577,49 @@ const CreateMonitorPage = () => {
subtitle={t("pages.createMonitor.form.thresholds.description")}
rightContent={
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
<FormSliderField
name="cpuAlertThreshold"
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.cpuThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
/>
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.cpuThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
/>
<Controller
<FormSliderField
name="memoryAlertThreshold"
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.memoryThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
/>
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.memoryThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
/>
<Controller
<FormSliderField
name="diskAlertThreshold"
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.diskThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
/>
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.diskThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
/>
<Controller
<FormSliderField
name="tempAlertThreshold"
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.tempThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}°C`}
/>
fieldLabel={t(
"pages.createMonitor.form.thresholds.option.tempThreshold.label"
)}
min={0}
max={100}
step={1}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}°C`}
/>
</Stack>
}
@@ -664,37 +632,21 @@ const CreateMonitorPage = () => {
subtitle={t("pages.createMonitor.form.incidents.description")}
rightContent={
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
<FormSliderField
name="statusWindowSize"
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
fieldLabel={t(
"pages.createMonitor.form.incidents.option.checks.label"
)}
min={1}
max={25}
valueLabelDisplay="auto"
/>
)}
fieldLabel={t("pages.createMonitor.form.incidents.option.checks.label")}
min={1}
max={25}
valueLabelDisplay="auto"
/>
<Controller
<FormSliderField
name="statusWindowThreshold"
control={control}
render={({ field }) => (
<SliderWithLabel
{...field}
sliderMaxWidth={{ xs: "100%", md: "50%" }}
fieldLabel={t(
"pages.createMonitor.form.incidents.option.percentage.label"
)}
min={1}
max={100}
valueLabelDisplay="auto"
/>
fieldLabel={t(
"pages.createMonitor.form.incidents.option.percentage.label"
)}
min={1}
max={100}
valueLabelDisplay="auto"
/>
</Stack>
}