add tooltip to incident table

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")}