diff --git a/Client/src/Pages/Uptime/Details/Components/ChartBoxes/EmptyView.jsx b/Client/src/Pages/Uptime/Details/Components/ChartBoxes/EmptyView.jsx
new file mode 100644
index 000000000..b6fee789f
--- /dev/null
+++ b/Client/src/Pages/Uptime/Details/Components/ChartBoxes/EmptyView.jsx
@@ -0,0 +1,20 @@
+// Components
+import { Typography, Box } from "@mui/material";
+import PropTypes from "prop-types";
+
+const EmptyView = ({ message = "No Data", size = "h2" }) => {
+ return (
+
+
+ {message}
+
+
+ );
+};
+
+EmptyView.propTypes = {
+ message: PropTypes.string,
+ size: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2'])
+};
+
+export default EmptyView;
\ No newline at end of file
diff --git a/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx b/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
index 3e5a66570..f3c74ab0d 100644
--- a/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
+++ b/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
@@ -8,6 +8,7 @@ import UpBarChart from "../Charts/UpBarChart";
import DownBarChart from "../Charts/DownBarChart";
import ResponseGaugeChart from "../Charts/ResponseGaugeChart";
import SkeletonLayout from "./skeleton";
+import EmptyView from "./EmptyView";
// Utils
import { formatDateWithTz } from "../../../../../Utils/timeUtils";
import PropTypes from "prop-types";
@@ -36,6 +37,83 @@ const ChartBoxes = ({
totalUpChecks + totalDownChecks > 0 ? totalUpChecks + totalDownChecks : 1;
const groupedUptimePercentage = (totalUpChecks / denominator) * 100;
+ const renderUptime = () => {
+ const upCheck = monitor?.groupedUpChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0);
+ if (!hoveredUptimeData && !upCheck) {
+ return ;
+ }
+ return (
+ <>
+
+ Total Checks
+
+ {hoveredUptimeData !== null
+ ? hoveredUptimeData.totalChecks
+ : upCheck}
+
+ {hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
+
+ {formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)}
+
+ )}
+
+
+
+ {hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"}
+
+
+ {hoveredUptimeData !== null
+ ? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
+ : Math.floor(groupedUptimePercentage)}
+
+ {hoveredUptimeData !== null ? " ms" : " %"}
+
+
+
+
+ );
+ };
+
+ const renderIncidents = () => {
+ const downChecks = monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0);
+ if (!downChecks && !hoveredIncidentsData) {
+ return ;
+ }
+ return (
+
+
+ {hoveredIncidentsData !== null
+ ? hoveredIncidentsData.totalChecks
+ : downChecks}
+
+ {hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
+
+ {formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
+
+ )}
+
+ );
+ }
+
+ const renderResponseTime = () => {
+ if (!monitor?.avgResponseTime) {
+ return ;
+ }
+ return ;
+ };
+
return (
-
- Total Checks
-
- {hoveredUptimeData !== null
- ? hoveredUptimeData.totalChecks
- : (monitor?.groupedUpChecks?.reduce((count, checkGroup) => {
- return count + checkGroup.totalChecks;
- }, 0) ?? 0)}
-
- {hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
-
- {formatDateWithTz(hoveredUptimeData._id, dateFormat, uiTimezone)}
-
- )}
-
-
-
- {hoveredUptimeData !== null ? "Avg Response Time" : "Uptime Percentage"}
-
-
- {hoveredUptimeData !== null
- ? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
- : Math.floor(groupedUptimePercentage)}
-
- {hoveredUptimeData !== null ? " ms" : " %"}
-
-
-
+ {renderUptime()}
}
header="Incidents"
>
-
- {hoveredIncidentsData !== null ||
- (monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0) > 0) ? (
- // Original layout for when incidents exist
-
-
- {hoveredIncidentsData !== null
- ? hoveredIncidentsData.totalChecks
- : monitor?.groupedDownChecks?.reduce((count, checkGroup) => count + checkGroup.totalChecks, 0)}
-
- {hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
-
- {formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
-
- )}
-
- ) : (
- // Centered layout for "No incidents" message
-
-
- Great. No incidents, yet!
-
-
- )}
+
+ {renderIncidents()}
}
header="Average Response Time"
>
-
+ {renderResponseTime()}
);