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 ( <> -