mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-24 19:01:01 -06:00
Merge branch 'feat/incident-endpoints' into feat/incidents
This commit is contained in:
Alex Holliday
@@ -1,15 +0,0 @@
|
||||
.config-box {
|
||||
display: flex;
|
||||
padding: var(--env-var-spacing-4) 50px;
|
||||
padding-bottom: 60px;
|
||||
border: 1px solid var(--env-var-color-16);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.config-box>.MuiStack-root{
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.config-box>.MuiStack-root:first-of-type{
|
||||
margin-right: var(--env-var-spacing-3);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import "./index.css";
|
||||
import React from "react";
|
||||
|
||||
const ConfigBox = ({ leftLayout, rightLayout }) => {
|
||||
return (
|
||||
<div className="config-box">
|
||||
{leftLayout}
|
||||
{rightLayout}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfigBox;
|
||||
@@ -64,3 +64,9 @@
|
||||
.MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset {
|
||||
border-color: var(--env-var-color-29);
|
||||
}
|
||||
|
||||
.configure-monitor-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--env-var-spacing-4);
|
||||
}
|
||||
@@ -144,185 +144,183 @@ const Configure = () => {
|
||||
}}
|
||||
/>
|
||||
<form className="configure-monitor-form" noValidate spellCheck="false">
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
|
||||
{config?.status ? <GreenCheck /> : <RedCheck />}
|
||||
<Box>
|
||||
<Typography component="h1" sx={{ lineHeight: 1 }}>
|
||||
{config?.url.replace(/^https?:\/\//, "") || "..."}
|
||||
</Typography>
|
||||
<Typography mt={theme.gap.small}>
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
color: config?.status
|
||||
? "var(--env-var-color-17)"
|
||||
: "var(--env-var-color-24)",
|
||||
}}
|
||||
>
|
||||
Your site is {config?.status ? "up" : "down"}.
|
||||
</Typography>{" "}
|
||||
Checking every {formatDurationRounded(config?.interval)}. Last
|
||||
time checked{" "}
|
||||
{formatDurationRounded(getLastChecked(config?.checks))} ago.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.gap.medium}
|
||||
<Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
|
||||
{config?.status ? <GreenCheck /> : <RedCheck />}
|
||||
<Box>
|
||||
<Typography component="h1" sx={{ lineHeight: 1 }}>
|
||||
{config?.url.replace(/^https?:\/\//, "") || "..."}
|
||||
</Typography>
|
||||
<Typography mt={theme.gap.small}>
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
color: config?.status
|
||||
? "var(--env-var-color-17)"
|
||||
: "var(--env-var-color-24)",
|
||||
}}
|
||||
>
|
||||
Your site is {config?.status ? "up" : "down"}.
|
||||
</Typography>{" "}
|
||||
Checking every {formatDurationRounded(config?.interval)}. Last
|
||||
time checked{" "}
|
||||
{formatDurationRounded(getLastChecked(config?.checks))} ago.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.gap.medium}
|
||||
sx={{
|
||||
ml: "auto",
|
||||
alignSelf: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
level="tertiary"
|
||||
label="Pause"
|
||||
img={<PauseCircleOutlineIcon />}
|
||||
sx={{
|
||||
ml: "auto",
|
||||
alignSelf: "flex-end",
|
||||
backgroundColor: "#f4f4f4",
|
||||
pl: theme.gap.small,
|
||||
pr: theme.gap.medium,
|
||||
"& svg": {
|
||||
pr: theme.gap.xs,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
level="tertiary"
|
||||
label="Pause"
|
||||
img={<PauseCircleOutlineIcon />}
|
||||
sx={{
|
||||
backgroundColor: "#f4f4f4",
|
||||
pl: theme.gap.small,
|
||||
pr: theme.gap.medium,
|
||||
"& svg": {
|
||||
pr: theme.gap.xs,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
level="error"
|
||||
label="Remove"
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
px: theme.gap.ml,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h2">General settings</Typography>
|
||||
<Typography component="p" sx={{ mt: theme.gap.small }}>
|
||||
Here you can select the URL of the host, together with the type
|
||||
of monitor.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="url"
|
||||
id="monitor-url"
|
||||
label="URL to monitor"
|
||||
placeholder="google.com"
|
||||
value={monitor?.url || ""}
|
||||
onChange={handleChange}
|
||||
error={errors["url"]}
|
||||
/>
|
||||
<Field
|
||||
type="text"
|
||||
id="monitor-name"
|
||||
label="Friendly name"
|
||||
isOptional={true}
|
||||
placeholder="Google"
|
||||
value={monitor?.name || ""}
|
||||
onChange={handleChange}
|
||||
error={errors["name"]}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h2">Checks to perform</Typography>
|
||||
<Typography component="p" sx={{ mt: theme.gap.small }}>
|
||||
You can always add or remove checks after adding your site.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<RadioButton
|
||||
id="monitor-checks-http"
|
||||
title="HTTP/website monitoring"
|
||||
desc="Use HTTP(s) to monitor your website or API endpoint."
|
||||
size="small"
|
||||
value="http"
|
||||
checked={monitor?.type === "http"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<RadioButton
|
||||
id="monitor-checks-ping"
|
||||
title="Ping monitoring"
|
||||
desc="Check whether your server is available or not."
|
||||
size="small"
|
||||
value="ping"
|
||||
checked={monitor?.type === "ping"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Box className="error-container">
|
||||
{errors["type"] ? (
|
||||
<Typography component="p" className="input-error">
|
||||
{errors["type"]}
|
||||
</Typography>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h2">Advanced settings</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Box>
|
||||
<Typography component="p" mb={theme.gap.small}>
|
||||
Check frequency
|
||||
</Typography>
|
||||
<Select
|
||||
id="monitor-interval"
|
||||
value={monitor?.interval || 1}
|
||||
inputProps={{ id: "monitor-interval-select" }}
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
style: {
|
||||
marginTop: "10px",
|
||||
},
|
||||
},
|
||||
}}
|
||||
IconComponent={KeyboardArrowDownIcon}
|
||||
onChange={(event) => handleChange(event, "interval")}
|
||||
>
|
||||
{frequencies.map((freq) => (
|
||||
<MenuItem
|
||||
key={`port-${freq}`}
|
||||
value={freq}
|
||||
disableRipple
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
borderRadius: `${theme.shape.borderRadius}px`,
|
||||
margin: theme.gap.xs,
|
||||
}}
|
||||
>
|
||||
{freq} {freq === 1 ? "minute" : "minutes"}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Box>
|
||||
</Stack>
|
||||
/>
|
||||
<Button
|
||||
level="error"
|
||||
label="Remove"
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
px: theme.gap.ml,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="flex-end" mt={theme.gap.xl}>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h2">General settings</Typography>
|
||||
<Typography component="p" sx={{ mt: theme.gap.small }}>
|
||||
Here you can select the URL of the host, together with the type of
|
||||
monitor.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="url"
|
||||
id="monitor-url"
|
||||
label="URL to monitor"
|
||||
placeholder="google.com"
|
||||
value={monitor?.url || ""}
|
||||
onChange={handleChange}
|
||||
error={errors["url"]}
|
||||
/>
|
||||
<Field
|
||||
type="text"
|
||||
id="monitor-name"
|
||||
label="Friendly name"
|
||||
isOptional={true}
|
||||
placeholder="Google"
|
||||
value={monitor?.name || ""}
|
||||
onChange={handleChange}
|
||||
error={errors["name"]}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h2">Checks to perform</Typography>
|
||||
<Typography component="p" sx={{ mt: theme.gap.small }}>
|
||||
You can always add or remove checks after adding your site.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<RadioButton
|
||||
id="monitor-checks-http"
|
||||
title="HTTP/website monitoring"
|
||||
desc="Use HTTP(s) to monitor your website or API endpoint."
|
||||
size="small"
|
||||
value="http"
|
||||
checked={monitor?.type === "http"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<RadioButton
|
||||
id="monitor-checks-ping"
|
||||
title="Ping monitoring"
|
||||
desc="Check whether your server is available or not."
|
||||
size="small"
|
||||
value="ping"
|
||||
checked={monitor?.type === "ping"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Box className="error-container">
|
||||
{errors["type"] ? (
|
||||
<Typography component="p" className="input-error">
|
||||
{errors["type"]}
|
||||
</Typography>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h2">Advanced settings</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Box>
|
||||
<Typography component="p" mb={theme.gap.small}>
|
||||
Check frequency
|
||||
</Typography>
|
||||
<Select
|
||||
id="monitor-interval"
|
||||
value={monitor?.interval || 1}
|
||||
inputProps={{ id: "monitor-interval-select" }}
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
style: {
|
||||
marginTop: "10px",
|
||||
},
|
||||
},
|
||||
}}
|
||||
IconComponent={KeyboardArrowDownIcon}
|
||||
onChange={(event) => handleChange(event, "interval")}
|
||||
>
|
||||
{frequencies.map((freq) => (
|
||||
<MenuItem
|
||||
key={`port-${freq}`}
|
||||
value={freq}
|
||||
disableRipple
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
borderRadius: `${theme.shape.borderRadius}px`,
|
||||
margin: theme.gap.xs,
|
||||
}}
|
||||
>
|
||||
{freq} {freq === 1 ? "minute" : "minutes"}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
|
||||
</Stack>
|
||||
</form>
|
||||
|
||||
@@ -1,49 +1,45 @@
|
||||
.create-monitor-form h1.MuiTypography-root {
|
||||
.create-monitor h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large-plus);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
.create-monitor-form h1.MuiTypography-root,
|
||||
.create-monitor-form h2.MuiTypography-root {
|
||||
.create-monitor h1.MuiTypography-root,
|
||||
.create-monitor h2.MuiTypography-root {
|
||||
font-weight: 600;
|
||||
}
|
||||
.create-monitor-form h2.MuiTypography-root {
|
||||
.create-monitor h2.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
}
|
||||
.create-monitor-form p.MuiTypography-root,
|
||||
.create-monitor-form button.MuiButtonBase-root,
|
||||
.create-monitor p.MuiTypography-root,
|
||||
.create-monitor button.MuiButtonBase-root,
|
||||
#monitor-frequencies {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.create-monitor-form h2.MuiTypography-root,
|
||||
.create-monitor-form h6.MuiTypography-root,
|
||||
.create-monitor-form p.MuiTypography-root,
|
||||
.create-monitor h2.MuiTypography-root,
|
||||
.create-monitor h6.MuiTypography-root,
|
||||
.create-monitor p.MuiTypography-root,
|
||||
#monitor-frequencies {
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
.create-monitor-form h6.MuiTypography-root {
|
||||
.create-monitor h6.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-small-plus);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.create-monitor-form .error-container {
|
||||
.create-monitor button.MuiButtonBase-root {
|
||||
height: 34px;
|
||||
}
|
||||
.create-monitor .error-container {
|
||||
position: relative;
|
||||
}
|
||||
.create-monitor-form .error-container p.MuiTypography-root.input-error {
|
||||
.create-monitor .error-container p.MuiTypography-root.input-error {
|
||||
color: var(--env-var-color-24);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* for testing, will remove later */
|
||||
/* .config-box:has(.error-container):has(.input-error) {
|
||||
border-color: var(--env-var-color-24);
|
||||
} */
|
||||
|
||||
.create-monitor-form .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
|
||||
.create-monitor .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
|
||||
padding: var(--env-var-spacing-1);
|
||||
}
|
||||
.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) {
|
||||
.create-monitor .MuiInputBase-root:has(#monitor-frequencies) {
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
@@ -51,26 +47,32 @@
|
||||
border-radius: var(--env-var-radius-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) fieldset {
|
||||
.create-monitor .MuiInputBase-root:has(#monitor-frequencies) fieldset {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.create-monitor-form .MuiStack-root:has(span.MuiTypography-root.input-error) {
|
||||
.create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
|
||||
position: relative;
|
||||
}
|
||||
.create-monitor-form span.MuiTypography-root.input-error {
|
||||
.create-monitor span.MuiTypography-root.input-error {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.monitors-gaps-medium {
|
||||
height: var(--env-var-spacing-2);
|
||||
.create-monitor .config-box {
|
||||
padding: var(--env-var-spacing-4) 50px;
|
||||
padding-bottom: 60px;
|
||||
border: 1px solid var(--env-var-color-16);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
flex-direction: row;
|
||||
gap: var(--env-var-spacing-4);
|
||||
}
|
||||
.monitors-gaps-small-plus {
|
||||
height: var(--env-var-spacing-1-plus);
|
||||
.create-monitor .config-box .MuiBox-root,
|
||||
.create-monitor .config-box .MuiStack-root {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.monitors-create-button-holder {
|
||||
.create-monitor-form {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
flex-direction: column;
|
||||
gap: var(--env-var-spacing-4);
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import "./index.css";
|
||||
import ConfigBox from "../../../Components/ConfigBox";
|
||||
import React, { useState } from "react";
|
||||
import RadioButton from "../../../Components/RadioButton";
|
||||
import Button from "../../../Components/Button";
|
||||
@@ -84,11 +83,14 @@ const CreateMonitor = () => {
|
||||
event.preventDefault();
|
||||
//obj to submit
|
||||
let monitor = {
|
||||
...generalSettings,
|
||||
url:
|
||||
checks.type === "http"
|
||||
? "https://" + generalSettings.url
|
||||
: generalSettings.url,
|
||||
name:
|
||||
generalSettings.name === ""
|
||||
? generalSettings.url
|
||||
: generalSettings.name,
|
||||
...checks,
|
||||
};
|
||||
|
||||
@@ -126,14 +128,10 @@ const CreateMonitor = () => {
|
||||
const frequencies = [1, 2, 3, 4, 5];
|
||||
|
||||
return (
|
||||
<form
|
||||
className="create-monitor-form"
|
||||
onSubmit={handleCreateMonitor}
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
<div
|
||||
className="create-monitor"
|
||||
style={{
|
||||
maxWidth: "1200px",
|
||||
flex: 1,
|
||||
padding: `${theme.content.pY} ${theme.content.pX}`,
|
||||
}}
|
||||
>
|
||||
@@ -151,19 +149,21 @@ const CreateMonitor = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography component="h1">Create new monitor</Typography>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<ConfigBox
|
||||
leftLayout={
|
||||
<Stack gap={theme.gap.small}>
|
||||
<form
|
||||
className="create-monitor-form"
|
||||
onSubmit={handleCreateMonitor}
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
>
|
||||
<Typography component="h1">Create new monitor</Typography>
|
||||
<Stack className="config-box">
|
||||
<Box>
|
||||
<Typography component="h2">General settings</Typography>
|
||||
<Typography component="p">
|
||||
<Typography component="p" mt={theme.gap.small}>
|
||||
Here you can select the URL of the host, together with the type of
|
||||
monitor.
|
||||
</Typography>
|
||||
</Stack>
|
||||
}
|
||||
rightLayout={
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="url"
|
||||
@@ -189,20 +189,14 @@ const CreateMonitor = () => {
|
||||
error={errors["name"]}
|
||||
/>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<ConfigBox
|
||||
leftLayout={
|
||||
<Stack gap={theme.gap.small}>
|
||||
</Stack>
|
||||
<Stack className="config-box">
|
||||
<Box>
|
||||
<Typography component="h2">Checks to perform</Typography>
|
||||
<Typography component="p">
|
||||
<Typography component="p" mt={theme.gap.small}>
|
||||
You can always add or remove checks after adding your site.
|
||||
</Typography>
|
||||
</Stack>
|
||||
}
|
||||
rightLayout={
|
||||
</Box>
|
||||
<Stack gap={theme.gap.large}>
|
||||
<RadioButton
|
||||
id="monitor-checks-http"
|
||||
@@ -231,7 +225,6 @@ const CreateMonitor = () => {
|
||||
checked={checks.type === "port"}
|
||||
onChange={(event) => handleChange(event, "type", setChecks)}
|
||||
/>
|
||||
<div className="monitors-gaps-small-plus"></div>
|
||||
<div className="monitors-dropdown-holder">
|
||||
<Select
|
||||
id="monitor-ports"
|
||||
@@ -259,11 +252,9 @@ const CreateMonitor = () => {
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
{/* TODO */}
|
||||
{/* <div className="monitors-gaps-medium"></div>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
</Stack>
|
||||
{/* TODO */}
|
||||
{/*
|
||||
<ConfigBox
|
||||
leftLayout={
|
||||
<div className="config-box-desc">
|
||||
@@ -278,7 +269,6 @@ const CreateMonitor = () => {
|
||||
<div className="incident-notif-config-title">
|
||||
When there is a new incident,
|
||||
</div>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<div className="incident-notif-config-checks">
|
||||
<CustomizableCheckBox
|
||||
id="monitor-notify-sms"
|
||||
@@ -286,21 +276,18 @@ const CreateMonitor = () => {
|
||||
isChecked={notifications.viaSms}
|
||||
handleChange={() => handleCheck("viaSms", setNotifications)}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<CustomizableCheckBox
|
||||
id="monitor-notify-email"
|
||||
title="Notify via email (to current email address)"
|
||||
isChecked={notifications.viaEmail}
|
||||
handleChange={() => handleCheck("viaEmail", setNotifications)}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<CustomizableCheckBox
|
||||
id="monitor-notify-other"
|
||||
title="Notify via email (to another email address below)"
|
||||
isChecked={notifications.viaOther}
|
||||
handleChange={() => handleCheck("viaOther", setNotifications)}
|
||||
/>
|
||||
<div className="monitors-gaps-small-plus"></div>
|
||||
<div className="monitors-dropdown-holder">
|
||||
<FlexibileTextField
|
||||
id="monitor-notify-other-email"
|
||||
@@ -316,15 +303,10 @@ const CreateMonitor = () => {
|
||||
</div>
|
||||
}
|
||||
/> */}
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<ConfigBox
|
||||
leftLayout={
|
||||
<Stack gap={theme.gap.small}>
|
||||
<Stack className="config-box">
|
||||
<Box>
|
||||
<Typography component="h2">Advanced settings</Typography>
|
||||
</Stack>
|
||||
}
|
||||
rightLayout={
|
||||
</Box>
|
||||
<Stack gap={theme.gap.large}>
|
||||
{/* TODO - refactor select component */}
|
||||
<Box>
|
||||
@@ -371,7 +353,6 @@ const CreateMonitor = () => {
|
||||
handleChange(event, "retries", setAdvancedSettings)
|
||||
}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<FlexibileTextField
|
||||
id="monitor-settings-codes"
|
||||
title="Accepted status codes"
|
||||
@@ -381,7 +362,6 @@ const CreateMonitor = () => {
|
||||
handleChange(event, "codes", setAdvancedSettings)
|
||||
}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<FlexibileTextField
|
||||
id="monitor-settings-redirects"
|
||||
title="Maximum redirects"
|
||||
@@ -392,11 +372,9 @@ const CreateMonitor = () => {
|
||||
}
|
||||
/> */}
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
{/* TODO */}
|
||||
{/* <div className="monitors-gaps-medium"></div>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
</Stack>
|
||||
{/* TODO */}
|
||||
{/*
|
||||
<ConfigBox
|
||||
leftLayout={
|
||||
<div className="config-box-desc">
|
||||
@@ -411,21 +389,18 @@ const CreateMonitor = () => {
|
||||
isChecked={proxy.enabled}
|
||||
handleChange={() => handleCheck("enabled", setProxy)}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<FlexibileTextField
|
||||
id="monitor-proxy-protocol"
|
||||
title="Proxy protocol"
|
||||
value={proxy.protocol}
|
||||
onChange={(event) => handleChange(event, "protocol", setProxy)}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<FlexibileTextField
|
||||
id="monitor-proxy-address"
|
||||
title="Proxy address"
|
||||
value={proxy.address}
|
||||
onChange={(event) => handleChange(event, "address", setProxy)}
|
||||
/>
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<FlexibileTextField
|
||||
id="monitor-proxy-port"
|
||||
title="Proxy port"
|
||||
@@ -435,19 +410,17 @@ const CreateMonitor = () => {
|
||||
</div>
|
||||
}
|
||||
/> */}
|
||||
<div className="monitors-gaps-medium"></div>
|
||||
<div className="monitors-gaps-small"></div>
|
||||
<div className="monitors-create-button-holder">
|
||||
<Button
|
||||
id="create-new-monitor-btn"
|
||||
level="primary"
|
||||
label="Create new monitor"
|
||||
sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
|
||||
onClick={handleCreateMonitor}
|
||||
disabled={Object.keys(errors).length !== 0 && true}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Button
|
||||
id="create-new-monitor-btn"
|
||||
level="primary"
|
||||
label="Create new monitor"
|
||||
onClick={handleCreateMonitor}
|
||||
disabled={Object.keys(errors).length !== 0 && true}
|
||||
/>
|
||||
</Stack>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -34,3 +34,9 @@
|
||||
.settings .config-box .MuiStack-root {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--env-var-spacing-4);
|
||||
}
|
||||
@@ -19,104 +19,102 @@ const Settings = () => {
|
||||
}}
|
||||
>
|
||||
<form className="settings-form" noValidate spellCheck="false">
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">General Settings</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small, mb: theme.gap.xs }}>
|
||||
<Typography component="span">Display timezone</Typography>- The
|
||||
timezone of the dashboard you publicly display.
|
||||
</Typography>
|
||||
<Typography>
|
||||
<Typography component="span">Server timezone</Typography>- The
|
||||
timezone of your server.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
{/* TODO - build select component */}
|
||||
<Field
|
||||
type="text"
|
||||
id="display-timezone"
|
||||
label="Display timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Field
|
||||
type="text"
|
||||
id="server-timezone"
|
||||
label="Server timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">General Settings</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small, mb: theme.gap.xs }}>
|
||||
<Typography component="span">Display timezone</Typography>- The
|
||||
timezone of the dashboard you publicly display.
|
||||
</Typography>
|
||||
<Typography>
|
||||
<Typography component="span">Server timezone</Typography>- The
|
||||
timezone of your server.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
{/* TODO - build select component */}
|
||||
<Field
|
||||
type="text"
|
||||
id="display-timezone"
|
||||
label="Display timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Field
|
||||
type="text"
|
||||
id="server-timezone"
|
||||
label="Server timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">History and monitoring</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small }}>
|
||||
Define here for how long you want to keep the data. You can also
|
||||
remove all past data.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="text"
|
||||
id="history-monitoring"
|
||||
label="The days you want to keep monitoring history."
|
||||
isOptional={true}
|
||||
optionalLabel="0 for infinite"
|
||||
placeholder="90"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Box>
|
||||
<Typography component="h1">History and monitoring</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small }}>
|
||||
Define here for how long you want to keep the data. You can also
|
||||
remove all past data.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="text"
|
||||
id="history-monitoring"
|
||||
label="The days you want to keep monitoring history."
|
||||
isOptional={true}
|
||||
optionalLabel="0 for infinite"
|
||||
placeholder="90"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Box>
|
||||
<Typography>Clear all stats. This is irreversible.</Typography>
|
||||
<Button
|
||||
level="error"
|
||||
label="Clear all stats"
|
||||
sx={{ mt: theme.gap.small }}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">About</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography component="h2">Uptime Genie v1.0.0</Typography>
|
||||
<Typography
|
||||
sx={{ mt: theme.gap.xs, mb: theme.gap.medium, opacity: 0.6 }}
|
||||
>
|
||||
Developed by Bluewave Labs.
|
||||
</Typography>
|
||||
<Link
|
||||
level="secondary"
|
||||
url="https://github.com/bluewave-labs"
|
||||
label="https://github.com/bluewave-labs"
|
||||
<Typography>Clear all stats. This is irreversible.</Typography>
|
||||
<Button
|
||||
level="error"
|
||||
label="Clear all stats"
|
||||
sx={{ mt: theme.gap.small }}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Button level="primary" label="Save" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">About</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography component="h2">Uptime Genie v1.0.0</Typography>
|
||||
<Typography
|
||||
sx={{ mt: theme.gap.xs, mb: theme.gap.medium, opacity: 0.6 }}
|
||||
>
|
||||
Developed by Bluewave Labs.
|
||||
</Typography>
|
||||
<Link
|
||||
level="secondary"
|
||||
url="https://github.com/bluewave-labs"
|
||||
label="https://github.com/bluewave-labs"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Button level="primary" label="Save" />
|
||||
</Stack>
|
||||
</form>
|
||||
</Box>
|
||||
|
||||
@@ -3,7 +3,7 @@ services:
|
||||
client:
|
||||
image: uptime_client:latest
|
||||
ports:
|
||||
- "5173:5173"
|
||||
- "80:5173"
|
||||
env_file:
|
||||
- client.env
|
||||
depends_on:
|
||||
|
||||
@@ -98,6 +98,60 @@ const getMonitorsByUserId = async (req, res, next) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns monitor with matching ID and incidents
|
||||
* @async
|
||||
* @param {Express.Request} req
|
||||
* @param {Express.Response} res
|
||||
* @returns {Promise<Express.Response>}
|
||||
* @throws {Error}
|
||||
*/
|
||||
const getMonitorByIdForIncidents = async (req, res, next) => {
|
||||
try {
|
||||
await getMonitorByIdValidation.validateAsync(req.params);
|
||||
|
||||
let monitorWithIncidents = await req.db.getMonitorByIdForIncidents(
|
||||
req,
|
||||
res
|
||||
);
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
msg: successMessages.MONTIOR_GET_BY_ID,
|
||||
data: monitorWithIncidents,
|
||||
});
|
||||
} catch (error) {
|
||||
error.service = SERVICE_NAME;
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all monitors with incidents that belong to User with UserID
|
||||
* @async
|
||||
* @param {Express.Request} req
|
||||
* @param {Express.Response} res
|
||||
* @returns {Promise<Express.Response>}
|
||||
* @throws {Error}
|
||||
*/
|
||||
const getMonitorsByUserIdForIncidents = async (req, res, next) => {
|
||||
try {
|
||||
await getMonitorsByUserIdValidation.validateAsync(req.params);
|
||||
let monitorsWithIncidents = await req.db.getMonitorsByUserIdForIncidents(
|
||||
req,
|
||||
res
|
||||
);
|
||||
return res.json({
|
||||
success: true,
|
||||
msg: successMessages.MONITOR_GET_BY_USER_ID(req.params.userId),
|
||||
data: monitorsWithIncidents,
|
||||
});
|
||||
} catch (error) {
|
||||
error.service = SERVICE_NAME;
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new monitor
|
||||
* @async
|
||||
@@ -227,6 +281,8 @@ module.exports = {
|
||||
getAllMonitors,
|
||||
getMonitorById,
|
||||
getMonitorsByUserId,
|
||||
getMonitorByIdForIncidents,
|
||||
getMonitorsByUserIdForIncidents,
|
||||
createMonitor,
|
||||
deleteMonitor,
|
||||
deleteAllMonitors,
|
||||
|
||||
@@ -131,7 +131,6 @@ const updateUser = async (req, res) => {
|
||||
)
|
||||
.select("-password")
|
||||
.select("-profileImage");
|
||||
console.log(updatedUser);
|
||||
return updatedUser;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
@@ -338,6 +337,59 @@ const getMonitorsByUserId = async (req, res) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get monitors by UserID
|
||||
* @async
|
||||
* @param {Express.Request} req
|
||||
* @param {Express.Response} res
|
||||
* @returns {Promise<Monitor>}
|
||||
* @throws {Error}
|
||||
*/
|
||||
const getMonitorByIdForIncidents = async (req, res, next) => {
|
||||
try {
|
||||
const monitor = await Monitor.findById(req.params.monitorId);
|
||||
const checks = await Check.find({
|
||||
monitorId: monitor._id,
|
||||
status: false,
|
||||
}).sort({
|
||||
createdAt: 1,
|
||||
});
|
||||
const monitorWithChecks = { ...monitor.toObject(), checks };
|
||||
return monitorWithChecks;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get monitors by UserID
|
||||
* @async
|
||||
* @param {Express.Request} req
|
||||
* @param {Express.Response} res
|
||||
* @returns {Promise<Array<Monitor>>}
|
||||
* @throws {Error}
|
||||
*/
|
||||
const getMonitorsByUserIdForIncidents = async (req, res) => {
|
||||
try {
|
||||
const monitors = await Monitor.find({ userId: req.params.userId });
|
||||
// Map each monitor to include its associated checks
|
||||
const monitorsWithChecks = await Promise.all(
|
||||
monitors.map(async (monitor) => {
|
||||
const checks = await Check.find({
|
||||
monitorId: monitor._id,
|
||||
status: false,
|
||||
}).sort({
|
||||
createdAt: 1,
|
||||
});
|
||||
return { ...monitor.toObject(), checks };
|
||||
})
|
||||
);
|
||||
return monitorsWithChecks;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a monitor
|
||||
* @async
|
||||
@@ -448,7 +500,6 @@ const editMonitor = async (req, res) => {
|
||||
|
||||
const createCheck = async (checkData) => {
|
||||
try {
|
||||
console.log(checkData);
|
||||
const check = await new Check({ ...checkData }).save();
|
||||
return check;
|
||||
} catch (error) {
|
||||
@@ -637,6 +688,8 @@ module.exports = {
|
||||
getAllMonitors,
|
||||
getMonitorById,
|
||||
getMonitorsByUserId,
|
||||
getMonitorByIdForIncidents,
|
||||
getMonitorsByUserIdForIncidents,
|
||||
createMonitor,
|
||||
deleteMonitor,
|
||||
deleteAllMonitors,
|
||||
|
||||
@@ -7,6 +7,15 @@ router.get("/", monitorController.getAllMonitors);
|
||||
router.get("/:monitorId", monitorController.getMonitorById);
|
||||
router.get("/user/:userId", monitorController.getMonitorsByUserId);
|
||||
|
||||
router.get(
|
||||
"/incidents/:monitorId",
|
||||
monitorController.getMonitorByIdForIncidents
|
||||
);
|
||||
router.get(
|
||||
"/incidents/user/:userId",
|
||||
monitorController.getMonitorsByUserIdForIncidents
|
||||
);
|
||||
|
||||
router.post("/", monitorController.createMonitor);
|
||||
router.post(
|
||||
"/delete/:monitorId",
|
||||
|
||||
Reference in New Issue
Block a user