mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-14 21:59:42 -06:00
Removed unnecessary flex
This commit is contained in:
Daniel Cojocea
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user