diff --git a/client/src/Components/Table/index.jsx b/client/src/Components/Table/index.jsx
index 66db50fbe..bfafb5387 100644
--- a/client/src/Components/Table/index.jsx
+++ b/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 (
- 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 (
- header.onClick(e, row) : null}
- sx={header.getCellSx ? header.getCellSx(row) : {}}
- >
- {header.render(row)}
-
- );
- })}
-
+ config.onRowClick(row) : null}
+ >
+ {headers.map((header, index) => {
+ return (
+ header.onClick(e, row) : null}
+ sx={header.getCellSx ? header.getCellSx(row) : {}}
+ >
+ {header.render(row)}
+
+ );
+ })}
+
+
);
})
)}
diff --git a/client/src/Pages/Incidents/Components/IncidentTable/index.jsx b/client/src/Pages/Incidents/Components/IncidentTable/index.jsx
index e8929d9ed..df9174290 100644
--- a/client/src/Pages/Incidents/Components/IncidentTable/index.jsx
+++ b/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 (
+
+ {`Status code: ${row?.statusCode}`}
+ {`Response time: ${row?.responseTime} ms`}
+ {phases && (
+ <>
+ {`Request timing: `}
+
+
+ {Object.keys(phases)?.map((phaseKey) => (
+
+
+
+ {`${phaseKeyFormattingMap[phaseKey] || phaseKey}:`}
+
+
+
+ {`${phases[phaseKey]} ms`}
+
+
+ ))}
+
+
+ >
+ )}
+
+ );
+};
const IncidentTable = ({
isLoading,
@@ -167,9 +233,10 @@ const IncidentTable = ({
return (
<>
-