Merge pull request #1763 from Br0wnHammer/fix/fe/incidents-text

Fix: No Incidents Message

src/Components/Charts/ChartBox/EmptyView.jsx

@@ -0,0 +1,108 @@
+// Components
+import { Typography, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import IconBox from "../../IconBox";
+
+/**
+ * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `EmptyView` component.
+ * @param {React.ReactNode} [props.icon] - An optional icon to display at the top of the empty view.
+ * @param {string} [props.header] - An optional header text displayed next to the icon.
+ * @param {string} [props.message="No Data"] - The message to be displayed in the empty view.
+ * @param {'h1' | 'h2' | 'h3'} [props.headingLevel="h2"] - The heading level for the message text.
+ * @param {string} [props.justifyContent="flex-start"] - The CSS `justify-content` value to align elements vertically.
+ * @param {string} [props.height="100%"] - The height of the empty view container.
+ *
+ * @example
+ * // Example usage of EmptyView component:
+ * <EmptyView
+ *   icon={<SomeIcon />}
+ *   header="Average Response Time"
+ *   message="No Response Time Available"
+ *   headingLevel="h2"
+ *   justifyContent="center"
+ *   height="50%"
+ * />
+ *
+ * @returns {React.Element} The `EmptyView` component with customizable icon, header, and message.
+ */
+
+const EmptyView = ({
+    icon,
+    header,
+    message = "No Data",
+    headingLevel = "h2",
+    justifyContent = "flex-start",
+    height = "100%"
+}) => {
+    const theme = useTheme();
+    return (
+        <Stack
+            flex={1}
+            direction="row"
+            sx={{
+                backgroundColor: theme.palette.primary.main,
+
+                border: 1,
+                borderStyle: "solid",
+                borderColor: theme.palette.primary.lowContrast,
+                borderRadius: 2,
+                borderTopRightRadius: 4,
+                borderBottomRightRadius: 4,
+            }}
+        >
+            <Stack
+                flex={1}
+                alignItems="center"
+                sx={{
+                    padding: theme.spacing(8),
+                    justifyContent,
+                    gap: theme.spacing(8),
+                    height,
+                    "& h2": {
+                        color: theme.palette.primary.contrastTextSecondary,
+                        fontSize: 15,
+                        fontWeight: 500,
+                    },
+
+                    "& tspan, & text": {
+                        fill: theme.palette.primary.contrastTextTertiary,
+                    },
+                }}
+            >
+                <Stack
+                    alignSelf="flex-start"
+                    direction="row"
+                    alignItems="center"
+                    gap={theme.spacing(6)}
+                >
+                    {icon && <IconBox>{icon}</IconBox>}
+                    {header && <Typography component="h2">{header}</Typography>}
+                </Stack>
+                <Stack
+                    flex={1}
+                    justifyContent="center"
+                    alignItems="center"               
+                >
+                    <Typography component={headingLevel}>
+                        {message}
+                    </Typography>
+                </Stack>
+            </Stack>
+        </Stack>
+    );
+};
+
+EmptyView.propTypes = {
+    message: PropTypes.string,
+    icon: PropTypes.node,
+    header: PropTypes.string,
+    headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3']),
+    justifyContent: PropTypes.string,
+    height: PropTypes.string
+};
+
+export default EmptyView;

src/Components/Charts/ChartBox/index.jsx

@@ -1,6 +1,7 @@
 import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import IconBox from "../../IconBox";
+import EmptyView from "./EmptyView";
 import PropTypes from "prop-types";
 
 const ChartBox = ({
@@ -12,8 +13,13 @@ const ChartBox = ({
 	Legend,
 	borderRadiusRight = 4,
 	sx,
+	noDataMessage,
+	isEmpty = false,
 }) => {
 	const theme = useTheme();
+	if (isEmpty) {
+		return <EmptyView icon={icon} header={header} message={noDataMessage} />; 
+	}
 	return (
 		<Stack
 			flex={1}
@@ -88,4 +94,6 @@ ChartBox.propTypes = {
 	icon: PropTypes.node,
 	header: PropTypes.string,
 	height: PropTypes.string,
+	noDataMessage: PropTypes.string,
+	isEmpty: PropTypes.bool
 };

src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx

@@ -35,6 +35,7 @@ const ChartBoxes = ({
 	const denominator =
 		totalUpChecks + totalDownChecks > 0 ? totalUpChecks + totalDownChecks : 1;
 	const groupedUptimePercentage = (totalUpChecks / denominator) * 100;
+	const noIncidentsMessage = "Great. No Incidents, yet!";
 
 	return (
 		<Stack
@@ -45,6 +46,7 @@ const ChartBoxes = ({
 			<ChartBox
 				icon={<UptimeIcon />}
 				header="Uptime"
+				isEmpty={monitor?.uptimePercentage === 0 && !monitor?.upChecks?.length}
 			>
 				<Stack
 					width={"100%"}
@@ -95,6 +97,8 @@ const ChartBoxes = ({
 			<ChartBox
 				icon={<IncidentsIcon />}
 				header="Incidents"
+				noDataMessage={noIncidentsMessage}
+				isEmpty={monitor?.groupedDownChecks?.length === 0}
 			>
 				<Stack width={"100%"}>
 					<Box position="relative">