mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-05-20 16:39:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

table and createMonitor

Browse Source
This commit is contained in:
Alex Holliday
2026-02-28 16:30:04 +00:00
parent 4aabc16096
commit 4d273a6dce
2 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/Components/design-elements/Table.tsx
+11 -10
View File
@@ -29,6 +29,7 @@ import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
import { useTranslation } from "react-i18next";
import { useState, Fragment, useEffect } from "react";
import { useTheme } from "@mui/material/styles";
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
import type { SxProps, Theme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
@@ -90,20 +91,20 @@ export function DataTable<
// Return stack of cards for small screens
if (isSmall && cardsOnSmallScreens) {
return (
<Stack spacing={theme.spacing(4)}>
<Stack spacing={theme.spacing(LAYOUT.XS)}>
{data.map((row) => {
const key = row.id || row._id || Math.random();
keys.push(key);
return (
<Stack
onClick={() => (onRowClick ? onRowClick(row) : null)}
spacing={theme.spacing(4)}
spacing={theme.spacing(LAYOUT.XS)}
sx={{
borderStyle: "solid",
borderWidth: 1,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(4),
padding: theme.spacing(LAYOUT.XS),
cursor: onRowClick ? "pointer" : "default",
}}
key={key}
@@ -155,7 +156,7 @@ export function DataTable<
<Table
sx={{
"&.MuiTable-root :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
paddingLeft: theme.spacing(8),
paddingLeft: theme.spacing(LAYOUT.MD),
},
"& .MuiTableCell-root": {
borderBottom: `1px solid ${theme.palette.divider}`,
@@ -168,13 +169,13 @@ export function DataTable<
color: theme.palette.text.secondary,
fontWeight: 500,
textTransform: "uppercase",
padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
fontSize: theme.typography.fontSize,
},
"& :is(td)": {
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary,
padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
padding: `${theme.spacing(LAYOUT.MD)} ${theme.spacing(LAYOUT.MD)}`,
fontSize: theme.typography.fontSize,
overflowX: "hidden",
},
@@ -514,7 +515,7 @@ export const Pagination = ({ ...props }: PaginationProps) => {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gridAutoRows: "auto",
rowGap: theme.spacing(1),
rowGap: theme.spacing(SPACING.SM),
alignItems: "center",
justifyItems: "center",
paddingLeft: 0,
@@ -556,8 +557,8 @@ const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) =>
alignItems={"center"}
justifyContent={"center"}
sx={{
py: theme.spacing(12),
px: theme.spacing(4),
py: theme.spacing(LAYOUT.XL),
px: theme.spacing(LAYOUT.XS),
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.palette.divider,
@@ -574,7 +575,7 @@ const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) =>
display: "flex",
alignItems: "center",
justifyContent: "center",
mb: theme.spacing(2),
mb: theme.spacing(SPACING.LG),
}}
>
<Icon
client/src/Pages/CreateMonitor/index.tsx
+14 -13
View File
@@ -29,6 +29,7 @@ import {
SliderWithLabel,
Dialog,
} from "@/Components/inputs";
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
import { useGet, usePost, usePatch, useDelete } from "@/Hooks/UseApi";
import { useMonitorForm } from "@/Hooks/useMonitorForm";
import type { Monitor, MonitorType, GamesMap } from "@/Types/Monitor";
@@ -281,7 +282,7 @@ const CreateMonitorPage = () => {
<FormControl error={!!fieldState.error}>
<RadioGroup
{...field}
sx={{ gap: theme.spacing(6) }}
sx={{ gap: theme.spacing(LAYOUT.MD) }}
>
<RadioWithDescription
value="http"
@@ -337,7 +338,7 @@ const CreateMonitorPage = () => {
title={t("pages.createMonitor.form.general.title")}
subtitle={t(`pages.createMonitor.form.general.description.${watchedType}`)}
rightContent={
<Stack spacing={theme.spacing(8)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
{/* URL/Host/Container field - not shown for hardware */}
{generalSettingsConfig.showUrl && (
<Controller
@@ -556,7 +557,7 @@ const CreateMonitorPage = () => {
title={t("pages.createMonitor.form.thresholds.title")}
subtitle={t("pages.createMonitor.form.thresholds.description")}
rightContent={
<Stack spacing={theme.spacing(8)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
name="cpuAlertThreshold"
control={control}
@@ -638,7 +639,7 @@ const CreateMonitorPage = () => {
title={t("pages.createMonitor.form.incidents.title")}
subtitle={t("pages.createMonitor.form.incidents.description")}
rightContent={
<Stack spacing={theme.spacing(12)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
name="statusWindowSize"
control={control}
@@ -690,7 +691,7 @@ const CreateMonitorPage = () => {
(field.value ?? []).includes(n.id)
);
return (
<Stack spacing={theme.spacing(4)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Autocomplete
multiple
options={notificationOptions}
@@ -753,7 +754,7 @@ const CreateMonitorPage = () => {
<Stack
direction="row"
alignItems="center"
spacing={theme.spacing(2)}
spacing={theme.spacing(SPACING.LG)}
>
<Switch
checked={field.value ?? false}
@@ -774,7 +775,7 @@ const CreateMonitorPage = () => {
title={t("pages.createMonitor.form.advanced.title")}
subtitle={t("pages.createMonitor.form.advanced.description")}
rightContent={
<Stack spacing={theme.spacing(8)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
name="useAdvancedMatching"
control={control}
@@ -782,7 +783,7 @@ const CreateMonitorPage = () => {
<Stack
direction="row"
alignItems="center"
spacing={theme.spacing(2)}
spacing={theme.spacing(SPACING.LG)}
>
<Switch
checked={field.value ?? false}
@@ -797,7 +798,7 @@ const CreateMonitorPage = () => {
)}
/>
{watchedUseAdvancedMatching && (
<Stack spacing={theme.spacing(8)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
name="matchMethod"
control={control}
@@ -889,7 +890,7 @@ const CreateMonitorPage = () => {
title={t("pages.createMonitor.form.geoChecks.title")}
subtitle={t("pages.createMonitor.form.geoChecks.description")}
rightContent={
<Stack spacing={theme.spacing(8)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
name="geoCheckEnabled"
control={control}
@@ -897,7 +898,7 @@ const CreateMonitorPage = () => {
<Stack
direction="row"
alignItems="center"
spacing={theme.spacing(2)}
spacing={theme.spacing(SPACING.LG)}
>
<Switch
checked={field.value ?? false}
@@ -910,7 +911,7 @@ const CreateMonitorPage = () => {
)}
/>
{watchGeoCheckEnabled && (
<Stack spacing={theme.spacing(8)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Controller
name="geoCheckLocations"
control={control}
@@ -926,7 +927,7 @@ const CreateMonitorPage = () => {
(field.value ?? []).includes(loc.id)
);
return (
<Stack spacing={theme.spacing(4)}>
<Stack spacing={theme.spacing(LAYOUT.MD)}>
<Autocomplete
multiple
options={locationOptions}