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

Added fallback UI when there are no incidents recorded

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-12 12:27:51 -04:00
parent 848ee60ca0
commit f152f490e3
4 changed files with 81 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
Client/src/Pages/Auth/Register/Register.jsx
View File

@@ -107,18 +107,16 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
/>
</form>
<form noValidate spellCheck={false} onSubmit={onSubmit}>
<Box my={theme.gap.ml}>
<Field
id="register-lastname-input"
label="Surname"
isRequired={true}
placeholder="Ellis"
autoComplete="family-name"
value={form.lastName}
onChange={onChange}
error={errors.lastName}
/>
</Box>
<Field
id="register-lastname-input"
label="Surname"
isRequired={true}
placeholder="Ellis"
autoComplete="family-name"
value={form.lastName}
onChange={onChange}
error={errors.lastName}
/>
</form>
</Box>
<Stack direction="row" justifyContent="space-between">
@@ -267,21 +265,19 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
/>
</form>
<form noValidate spellCheck={false} onSubmit={onSubmit}>
<Box mt={theme.gap.ml}>
<Field
type="password"
id="register-confirm-input"
label="Confirm password"
isRequired={true}
placeholder="Confirm your password"
autoComplete="current-password"
value={form.confirm}
onChange={onChange}
error={errors.confirm}
/>
</Box>
<Field
type="password"
id="register-confirm-input"
label="Confirm password"
isRequired={true}
placeholder="Confirm your password"
autoComplete="current-password"
value={form.confirm}
onChange={onChange}
error={errors.confirm}
/>
</form>
<Stack gap={theme.gap.small} my={theme.gap.large}>
<Stack gap={theme.gap.small} mb={theme.gap.large}>
<Check
text="Must be at least 8 characters long"
variant={

3
Client/src/Pages/Auth/index.css
View File

@@ -135,6 +135,9 @@
.auth .check span.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
}
.auth form + form {
margin: var(--env-var-spacing-1-plus) 0;
}
.auth > .MuiStack-root:nth-of-type(1) {
height: var(--env-var-nav-bar-height);

84
Client/src/Pages/Incidents/IncidentTable/index.jsx
View File

@@ -9,6 +9,8 @@ import {
Pagination,
PaginationItem,
Paper,
Typography,
Box,
} from "@mui/material";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -105,41 +107,55 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
return (
<>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Monitor Name</TableCell>
<TableCell>Status</TableCell>
<TableCell>Date & Time</TableCell>
<TableCell>Message</TableCell>
</TableRow>
</TableHead>
<TableBody>
{checks.map((check) => {
const status = check.status === true ? "up" : "down";
return (
<TableRow key={check._id}>
<TableCell>{monitors[check.monitorId]?.name}</TableCell>
<TableCell>
<StatusLabel
status={status}
text={status}
customStyles={{ textTransform: "capitalize" }}
/>
</TableCell>
<TableCell>
{new Date(check.createdAt).toLocaleString()}
</TableCell>
<TableCell>{check.statusCode}</TableCell>
{checks?.length === 0 && selectedMonitor === "0" ? (
<Box>
<Typography textAlign="center">No incidents recorded yet.</Typography>
</Box>
) : checks?.length === 0 ? (
<Box>
<Typography textAlign="center">
The monitor you have selected, has no recorded incidents yet.
</Typography>
</Box>
) : (
<>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Monitor Name</TableCell>
<TableCell>Status</TableCell>
<TableCell>Date & Time</TableCell>
<TableCell>Message</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
{paginationComponent}
</TableHead>
<TableBody>
{checks.map((check) => {
const status = check.status === true ? "up" : "down";
return (
<TableRow key={check._id}>
<TableCell>{monitors[check.monitorId]?.name}</TableCell>
<TableCell>
<StatusLabel
status={status}
text={status}
customStyles={{ textTransform: "capitalize" }}
/>
</TableCell>
<TableCell>
{new Date(check.createdAt).toLocaleString()}
</TableCell>
<TableCell>{check.statusCode}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
{paginationComponent}
</>
)}
</>
);
};

6
Client/src/Pages/Incidents/index.css
View File

@@ -17,6 +17,12 @@
.incidents .MuiPagination-root {
background-color: var(--env-var-color-8);
}
.incidents > .MuiBox-root {
background-color: var(--env-var-color-8);
border: solid 1px var(--env-var-color-6);
border-radius: var(--env-var-radius-1);
padding: 60px;
}
/* remove later */
.incidents .MuiSelect-select {