Merge branch 'develop' into feat/fe/statuspage-3

This commit is contained in:
Shemy Gan committed 2024-12-30 13:06:22 -05:00
commit d8da182f60
48 files changed
+2777 -2333

No files matched your search

+543 -379
View File
File diff suppressed because it is too large. Load diff
+4 -4
View File
@@ -14,11 +14,11 @@
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "6.2.1",
"@mui/lab": "6.0.0-beta.20",
"@mui/material": "6.2.1",
"@mui/icons-material": "6.3.0",
"@mui/lab": "6.0.0-beta.21",
"@mui/material": "6.3.0",
"@mui/x-charts": "^7.5.1",
"@mui/x-data-grid": "7.23.3",
"@mui/x-data-grid": "7.23.5",
"@mui/x-date-pickers": "7.23.3",
"@reduxjs/toolkit": "2.5.0",
"axios": "^1.7.4",
+1 -1
View File
@@ -100,7 +100,7 @@ const PATH_MAP = {
pagespeed: "Dashboard",
infrastructure: "Dashboard",
account: "Account",
settings: "Other",
settings: "Settings",
};
/**
@@ -86,7 +86,7 @@ export const getUptimeMonitorsByTeamId = createAsyncThunk(
const res = await networkService.getMonitorsAndSummaryByTeamId({
authToken: token,
teamId: user.teamId,
types: ["http", "ping", "docker"],
types: ["http", "ping", "docker", "port"],
});
return res.data;
} catch (error) {
@@ -50,6 +50,11 @@ const CreateMonitor = () => {
placeholder: "abc123",
namePlaceholder: "My Container",
},
port: {
label: "URL to monitor",
placeholder: "localhost",
namePlaceholder: "Localhost:5173",
},
};
const { user, authToken } = useSelector((state) => state.auth);
@@ -82,6 +87,7 @@ const CreateMonitor = () => {
monitor.type === "http"
? `http${https ? "s" : ""}://` + monitor.url
: monitor.url,
port: monitor.type === "port" ? monitor.port : undefined,
name: monitor.name === "" ? monitor.url : monitor.name,
type: monitor.type,
interval: monitor.interval * MS_PER_MINUTE,
@@ -252,11 +258,23 @@ const CreateMonitor = () => {
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<TextInput
type="number"
id="monitor-port"
label="Port to monitor"
placeholder="5173"
value={monitor.port}
onChange={(event) => handleChange(event, "port")}
error={errors["port"] ? true : false}
helperText={errors["port"]}
hidden={monitor.type !== "port"}
/>
<TextInput
type="text"
id="monitor-name"
label="Display name"
isOptional={true}
placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
value={monitor.name}
onChange={(event) => handleChange(event, "name")}
error={errors["name"] ? true : false}
@@ -321,6 +339,15 @@ const CreateMonitor = () => {
checked={monitor.type === "docker"}
onChange={(event) => handleChange(event, "type")}
/>
<Radio
id="monitor-checks-port"
title="Port monitoring"
desc="Check whether your port is open or not."
size="small"
value="port"
checked={monitor.type === "port"}
onChange={(event) => handleChange(event, "type")}
/>
{errors["type"] ? (
<Box className="error-container">
<Typography
+18 -69
View File
@@ -1,14 +1,6 @@
import PropTypes from "prop-types";
import { useEffect, useState, useCallback } from "react";
import {
Box,
Button,
Popover,
Stack,
Tooltip,
Typography,
useTheme,
} from "@mui/material";
import { Box, Button, Stack, Tooltip, Typography, useTheme } from "@mui/material";
import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { networkService } from "../../../main";
@@ -17,7 +9,6 @@ import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeU
import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
import ButtonGroup from "@mui/material/ButtonGroup";
import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
import CertificateIcon from "../../../assets/icons/certificate.svg?react";
import UptimeIcon from "../../../assets/icons/uptime-icon.svg?react";
import ResponseTimeIcon from "../../../assets/icons/response-time-icon.svg?react";
import AverageResponseIcon from "../../../assets/icons/average-response-icon.svg?react";
@@ -50,14 +41,7 @@ const DetailsPage = () => {
const [certificateExpiry, setCertificateExpiry] = useState("N/A");
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = useState(null);
const openCertificate = (event) => {
setAnchorEl(event.currentTarget);
};
const closeCertificate = () => {
setAnchorEl(null);
};
const certificateDateFormat = "MMM D, YYYY h A";
const dateFormat = dateRange === "day" ? "MMM D, h A" : "MMM D";
const uiTimezone = useSelector((state) => state.ui.timezone);
@@ -72,6 +56,7 @@ const DetailsPage = () => {
numToDisplay: 50,
normalize: true,
});
console.log(res?.data?.data);
setMonitor(res?.data?.data ?? {});
} catch (error) {
logger.error(error);
@@ -95,7 +80,9 @@ const DetailsPage = () => {
});
if (res?.data?.data?.certificateDate) {
const date = res.data.data.certificateDate;
setCertificateExpiry(formatDateWithTz(date, dateFormat, uiTimezone) ?? "N/A");
setCertificateExpiry(
formatDateWithTz(date, certificateDateFormat, uiTimezone) ?? "N/A"
);
}
} catch (error) {
setCertificateExpiry("N/A");
@@ -210,56 +197,6 @@ const DetailsPage = () => {
alignSelf: "flex-end",
}}
>
<IconBox
mr={theme.spacing(4)}
onClick={openCertificate}
sx={{
cursor: "pointer",
"& svg": {
width: 23,
height: 23,
top: "52%",
},
}}
>
<CertificateIcon />
</IconBox>
<Popover
id="certificate-dropdown"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={closeCertificate}
disableScrollLock
marginThreshold={null}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
slotProps={{
paper: {
sx: {
mt: theme.spacing(4),
py: theme.spacing(2),
px: theme.spacing(4),
width: 140,
backgroundColor: theme.palette.background.accent,
},
},
}}
>
<Typography variant="body2">Certificate Expiry</Typography>
<Typography
component="span"
fontSize={13}
color={theme.palette.text.primary}
>
{certificateExpiry}
</Typography>
</Popover>
{isAdmin && (
<Button
variant="contained"
@@ -302,6 +239,18 @@ const DetailsPage = () => {
</>
}
/>
<StatBox
heading="certificate expiry"
subHeading={
<Typography
component="span"
fontSize={13}
color={theme.palette.text.primary}
>
{certificateExpiry}
</Typography>
}
/>
</Stack>
<Box>
<Stack
@@ -74,7 +74,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
authToken,
teamId: user.teamId,
limit: 25,
types: ["http", "ping", "docker"],
types: ["http", "ping", "docker", "port"],
status: null,
checkOrder: "desc",
normalize: true,
+2 -2
View File
@@ -54,7 +54,7 @@ const paletteColors = {
red200: "#F04438",
red300: "#D32F2F",
red700: "#542426",
red800: "#301A1F",
red800: "#912018",
orange50: "#FEF8EA",
orange100: "#FFECBC",
orange300: "#FDB022",
@@ -128,7 +128,7 @@ const semanticColors = {
dark: paletteColors.red700,
},
dark: {
light: paletteColors.red50,
light: paletteColors.red800,
dark: paletteColors.red800,
},
},
+1
View File
@@ -109,6 +109,7 @@ const monitorValidation = joi.object({
"string.uri": "The URL you provided is not valid.",
"string.invalidUrl": "Please enter a valid URL with optional port",
}),
port: joi.number(),
name: joi.string().trim().max(50).allow("").messages({
"string.max": "This field should not exceed the 50 characters limit.",
}),