diff --git a/client/src/Pages/Incidents2/Components/LatestIncidentsPanel/IncidentItem.jsx b/client/src/Pages/Incidents2/Components/LatestIncidentsPanel/IncidentItem.jsx
index c212c8e52..22d45509c 100644
--- a/client/src/Pages/Incidents2/Components/LatestIncidentsPanel/IncidentItem.jsx
+++ b/client/src/Pages/Incidents2/Components/LatestIncidentsPanel/IncidentItem.jsx
@@ -4,7 +4,6 @@ import { useTheme } from "@emotion/react";
import { StatusLabel } from "@/Components/v1/Label/index.jsx";
import { getHumanReadableDuration } from "@/Utils/timeUtils.js";
import Monitors from "@/assets/icons/monitors.svg?react";
-import AverageResponseIcon from "@/assets/icons/status-pages.svg?react";
import { useTranslation } from "react-i18next";
const IncidentItem = ({ incident }) => {
@@ -37,101 +36,65 @@ const IncidentItem = ({ incident }) => {
const duration = calculateDuration();
const iconWrapperStyle = {
- px: theme.spacing(2),
display: "flex",
justifyContent: "center",
+ mx: theme.spacing(2),
color: theme.palette.primary.contrastTextTertiary,
+ "& svg": {
+ width: 18,
+ height: 18,
+ },
"& svg path": {
stroke: "currentColor",
+ strokeWidth: 1.5,
},
};
return (
-
+
+
+
-
-
-
-
-
-
- {t("incidentsPage.incidentItemMonitor")}:
-
-
- {incident.monitorName || t("incidentsPage.unknownMonitor")}
-
-
-
-
-
-
-
-
-
-
-
- {t("incidentsPage.incidentItemStatus")}:
-
-
-
-
-
-
-
-
-
- {duration}
-
-
+ {incident.monitorName || t("incidentsPage.unknownMonitor")}
+
+
+
+
+
+
+
+ {duration}
+
);
};
diff --git a/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx b/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx
index fc5379906..d2ce09d6c 100644
--- a/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx
+++ b/client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx
@@ -1,5 +1,5 @@
import PropTypes from "prop-types";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, Divider } from "@mui/material";
import { useTheme } from "@emotion/react";
import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
import { useTranslation } from "react-i18next";
@@ -86,74 +86,70 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
return summary.topMonitor?.monitorName || t("incidentsPage.none");
};
+ const rowStyle = {
+ py: theme.spacing(0.5),
+ minHeight: 32,
+ };
+
return (
-
-
+
-
-
-
+
+
+
{t("incidentsPage.totalIncidents")}: {summary.total || 0}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
{t("incidentsPage.mostAffectedMonitor")}: {getMostAffectedMonitor()}
-
-
+
+
+
-
-
- {t("incidentsPage.avgResolutionTime")}:{" "}
- {summary.total > 0
- ? `${summary.avgResolutionTimeHours || 0} ${t("incidentsPage.hours")}`
- : "N/A"}
-
-
+
+ {t("incidentsPage.avgResolutionTime")}:{" "}
+ {summary.total > 0
+ ? `${summary.avgResolutionTimeHours || 0} ${t("incidentsPage.hours")}`
+ : "N/A"}
+