Merge branch 'develop' into feat/fe/statuspage-3
This commit is contained in:
commit
d8da182f60
48 files changed
+2777
-2333
No files matched your search
Generated
+543
-379
File diff suppressed because it is too large.
Load diff
+4
-4
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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.",
|
||||
}),
|
||||
|
||||
Reference in new issue
Block a user