Merge pull request #2871 from bluewave-labs/feat/incident-tooltip

feat:incident tooltip

client/src/Components/Table/index.jsx

@@ -7,6 +7,7 @@ import {
 	TableHead,
 	TableRow,
 } from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
 import SkeletonLayout from "./skeleton";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
@@ -41,6 +42,7 @@ const DataTable = ({
 	data = [],
 	config = {
 		emptyView: "No data",
+		tooltipContent: null,
 		onRowClick: () => {},
 	},
 }) => {
@@ -101,24 +103,54 @@ const DataTable = ({
 						data.map((row) => {
 							const key = row.id || row._id || Math.random();
 							return (
-								<TableRow
+								<Tooltip
 									key={key}
-									sx={config?.rowSX ?? {}}
-									onClick={config?.onRowClick ? () => config.onRowClick(row) : null}
+									followCursor
+									enterDelay={500}
+									enterNextDelay={500}
+									title={
+										typeof config.tooltipContent === "function"
+											? config.tooltipContent(row)
+											: config.tooltipContent
+									}
+									slotProps={{
+										tooltip: {
+											sx: {
+												background: "unset",
+											},
+										},
+										popper: {
+											modifiers: [
+												{
+													name: "offset",
+													options: {
+														offset: ({ popper }) => {
+															return [popper.width / 2 + 20, -popper.height / 8];
+														},
+													},
+												},
+											],
+										},
+									}}
 								>
-									{headers.map((header, index) => {
-										return (
-											<TableCell
-												align={index === 0 ? "left" : "center"}
-												key={header.id}
-												onClick={header.onClick ? (e) => header.onClick(e, row) : null}
-												sx={header.getCellSx ? header.getCellSx(row) : {}}
-											>
-												{header.render(row)}
-											</TableCell>
-										);
-									})}
-								</TableRow>
+									<TableRow
+										sx={config?.rowSX ?? {}}
+										onClick={config?.onRowClick ? () => config.onRowClick(row) : null}
+									>
+										{headers.map((header, index) => {
+											return (
+												<TableCell
+													align={index === 0 ? "left" : "center"}
+													key={header.id}
+													onClick={header.onClick ? (e) => header.onClick(e, row) : null}
+													sx={header.getCellSx ? header.getCellSx(row) : {}}
+												>
+													{header.render(row)}
+												</TableCell>
+											);
+										})}
+									</TableRow>
+								</Tooltip>
 							);
 						})
 					)}

client/src/Pages/Incidents/Components/IncidentTable/index.jsx

@@ -1,5 +1,10 @@
 //Components
-import Table from "../../../../Components/Table";
+import Stack from "@mui/material/Stack";
+import DataTable from "../../../../Components/Table";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
 import TableSkeleton from "../../../../Components/Table/skeleton";
 import Pagination from "../../../../Components/Table/TablePagination";
 import { StatusLabel } from "../../../../Components/Label";
@@ -16,7 +21,68 @@ import { useTranslation } from "react-i18next";
 import { useFetchChecksTeam } from "../../../../Hooks/checkHooks";
 import { useFetchChecksByMonitor } from "../../../../Hooks/checkHooks";
 import { useResolveIncident } from "../../../../Hooks/checkHooks";
-import { Button, Typography } from "@mui/material";
+import { Button, Typography, useTheme } from "@mui/material";
+import { lighten } from "@mui/material/styles";
+
+const GetTooltip = (row) => {
+	const theme = useTheme();
+	const phases = row?.timings?.phases;
+
+	const phaseKeyFormattingMap = {
+		firstByte: "first byte",
+	};
+	return (
+		<Stack
+			backgroundColor={lighten(theme.palette.primary.main, 0.1)}
+			border={`1px solid ${theme.palette.primary.lowContrast}`}
+			borderRadius={theme.shape.borderRadius}
+			py={theme.spacing(2)}
+			px={theme.spacing(4)}
+		>
+			<Typography
+				variant="body2"
+				color={theme.palette.primary.contrastText}
+			>{`Status code: ${row?.statusCode}`}</Typography>
+			<Typography
+				variant="body2"
+				color={theme.palette.primary.contrastText}
+			>{`Response time: ${row?.responseTime} ms`}</Typography>
+			{phases && (
+				<>
+					<Typography
+						variant="body2"
+						color={theme.palette.primary.contrastText}
+					>{`Request timing: `}</Typography>
+					<Table
+						size="small"
+						sx={{ ml: theme.spacing(2), mt: theme.spacing(2) }}
+					>
+						<TableBody>
+							{Object.keys(phases)?.map((phaseKey) => (
+								<TableRow key={phaseKey}>
+									<TableCell sx={{ border: "none", p: 0 }}>
+										<Typography
+											variant="body2"
+											color="success"
+										>
+											{`${phaseKeyFormattingMap[phaseKey] || phaseKey}:`}
+										</Typography>
+									</TableCell>
+									<TableCell sx={{ border: "none", p: 0 }}>
+										<Typography
+											color={theme.palette.primary.contrastText}
+											variant="body2"
+										>{`${phases[phaseKey]} ms`}</Typography>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</>
+			)}
+		</Stack>
+	);
+};
 
 const IncidentTable = ({
 	isLoading,
@@ -167,9 +233,10 @@ const IncidentTable = ({
 
 	return (
 		<>
-			<Table
+			<DataTable
 				headers={headers}
 				data={checks}
+				config={{ tooltipContent: GetTooltip }}
 			/>
 			<Pagination
 				paginationLabel={t("incidentsTablePaginationLabel")}