mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-24 10:39:40 -06:00
Code Issues Packages Projects Releases Wiki Activity

migrate to new query

Browse Source
This commit is contained in:
Alex Holliday
2024-12-30 19:49:28 -08:00
parent d574faa7d8
commit 853a28d316
2 changed files with 45 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
Client/src/Pages/Uptime/Details/Charts/index.jsx
View File

@@ -15,7 +15,8 @@ import { formatDateWithTz, toTimeStamp } from "../../../../Utils/timeUtils";
const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => {
const uiTimezone = useSelector((state) => state.ui.timezone);
const dateFormat = type === "day" ? "MMM D, h A" : "MMM D";
const formatString = type === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
return (
<>
@@ -27,7 +28,7 @@ const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type })
fontSize={11}
>
{formatDateWithTz(
toTimeStamp(firstDataPoint._id, "YYYY-MM-DD-HH"),
toTimeStamp(firstDataPoint._id, formatString),
dateFormat,
uiTimezone
)}
@@ -39,8 +40,11 @@ const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type })
textAnchor="end"
fontSize={11}
>
{lastDataPoint._id}
{/* {formatDateWithTz(new Date(lastDataPoint.time), dateFormat, uiTimezone)} */}
{formatDateWithTz(
toTimeStamp(lastDataPoint._id, formatString),
dateFormat,
uiTimezone
)}
</text>
</>
);
@@ -70,7 +74,6 @@ const UpBarChart = memo(({ data, type, onBarHover }) => {
};
// TODO - REMOVE THIS LATER
const reversedData = useMemo(() => [...data].reverse(), [data]);
return (
<ResponsiveContainer
@@ -81,7 +84,7 @@ const UpBarChart = memo(({ data, type, onBarHover }) => {
<BarChart
width="100%"
height="100%"
data={reversedData}
data={data}
onMouseEnter={() => {
setChartHovered(true);
onBarHover({ time: null, totalChecks: 0, groupUptimePercentage: 0 });
@@ -102,8 +105,8 @@ const UpBarChart = memo(({ data, type, onBarHover }) => {
y={0}
width="100%"
height="100%"
firstDataPoint={reversedData[0]}
lastDataPoint={reversedData[reversedData.length - 1]}
firstDataPoint={data[0]}
lastDataPoint={data[data.length - 1]}
type={type}
/>
}
@@ -113,7 +116,7 @@ const UpBarChart = memo(({ data, type, onBarHover }) => {
maxBarSize={7}
background={{ fill: "transparent" }}
>
{reversedData.map((entry, index) => {
{data.map((entry, index) => {
let { main, light } = getColorRange(entry.groupUptimePercentage);
return (
<Cell
@@ -157,9 +160,6 @@ const DownBarChart = memo(({ data, type, onBarHover }) => {
const [chartHovered, setChartHovered] = useState(false);
const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
// TODO - REMOVE THIS LATER
const reversedData = useMemo(() => [...data].reverse(), [data]);
return (
<ResponsiveContainer
width="100%"
@@ -169,10 +169,10 @@ const DownBarChart = memo(({ data, type, onBarHover }) => {
<BarChart
width="100%"
height="100%"
data={reversedData}
data={data}
onMouseEnter={() => {
setChartHovered(true);
onBarHover({ time: null, totalIncidents: 0 });
onBarHover({ time: null, totalChecks: 0 });
}}
onMouseLeave={() => {
setChartHovered(false);
@@ -190,18 +190,18 @@ const DownBarChart = memo(({ data, type, onBarHover }) => {
y={0}
width="100%"
height="100%"
firstDataPoint={reversedData[0]}
lastDataPoint={reversedData[reversedData.length - 1]}
firstDataPoint={data[0]}
lastDataPoint={data[data.length - 1]}
type={type}
/>
}
/>
<Bar
dataKey="totalIncidents"
dataKey="avgResponseTime"
maxBarSize={7}
background={{ fill: "transparent" }}
>
{reversedData.map((entry, index) => (
{data.map((entry, index) => (
<Cell
key={`cell-${entry.time}`}
fill={
@@ -209,7 +209,7 @@ const DownBarChart = memo(({ data, type, onBarHover }) => {
? theme.palette.error.contrastText
: chartHovered
? theme.palette.error.light
: theme.palette.error.contrastText
: theme.palette.error.main
}
onMouseEnter={() => {
setHoveredBarIndex(index);
@@ -217,7 +217,7 @@ const DownBarChart = memo(({ data, type, onBarHover }) => {
}}
onMouseLeave={() => {
setHoveredBarIndex(null);
onBarHover({ time: null, totalIncidents: 0 });
onBarHover({ time: null, totalChecks: 0 });
}}
/>
))}

37
Client/src/Pages/Uptime/Details/index.jsx
View File

@@ -25,6 +25,8 @@ import { formatDateWithTz, formatDurationSplit } from "../../../Utils/timeUtils"
import { useIsAdmin } from "../../../Hooks/useIsAdmin";
import IconBox from "../../../Components/IconBox";
import StatBox from "../../../Components/StatBox";
import { toTimeStamp } from "../../../Utils/timeUtils";
/**
* Details page component displaying monitor details and related information.
* @component
@@ -103,6 +105,10 @@ const DetailsPage = () => {
const [hoveredUptimeData, setHoveredUptimeData] = useState(null);
const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null);
useEffect(() => {
console.log(hoveredUptimeData);
}, [hoveredUptimeData]);
const BREADCRUMBS = [
{ name: "uptime", path: "/uptime" },
{ name: "details", path: `/uptime/${monitorId}` },
@@ -307,7 +313,7 @@ const DetailsPage = () => {
<Typography component="span">
{hoveredUptimeData !== null
? hoveredUptimeData.totalChecks
: monitor.dateRangeData[0].overallTotalChecks}
: (monitor.groupUpChecks[0]?.overallTotalChecks ?? 0)}
</Typography>
{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
<Typography
@@ -318,7 +324,10 @@ const DetailsPage = () => {
color={theme.palette.text.tertiary}
>
{formatDateWithTz(
hoveredUptimeData.time,
toTimeStamp(
hoveredUptimeData._id,
dateRange === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"
),
dateFormat,
uiTimezone
)}
@@ -331,14 +340,15 @@ const DetailsPage = () => {
{hoveredUptimeData !== null
? Math.floor(hoveredUptimeData.groupUptimePercentage * 100)
: Math.floor(
monitor?.dateRangeData[0].overallUptimePercentage * 100
monitor?.groupUpChecks[0]?.overallUptimePercentage ??
0 * 100
)}
<Typography component="span">%</Typography>
</Typography>
</Box>
</Stack>
<UpBarChart
data={monitor?.dateRangeData}
data={monitor?.groupUpChecks}
type={dateRange}
onBarHover={setHoveredUptimeData}
/>
@@ -354,8 +364,8 @@ const DetailsPage = () => {
<Typography>Total Incidents</Typography>
<Typography component="span">
{hoveredIncidentsData !== null
? hoveredIncidentsData.totalIncidents
: monitor?.periodIncidents}
? hoveredIncidentsData.totalChecks
: (monitor.groupDownChecks[0]?.overallTotalChecks ?? 0)}
</Typography>
{hoveredIncidentsData !== null &&
hoveredIncidentsData.time !== null && (
@@ -367,18 +377,21 @@ const DetailsPage = () => {
color={theme.palette.text.tertiary}
>
{formatDateWithTz(
hoveredIncidentsData.time,
toTimeStamp(
hoveredIncidentsData._id,
dateRange === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"
),
dateFormat,
uiTimezone
)}
</Typography>
)}
</Box>
{/* <DownBarChart
data={monitor?.aggregateData}
<DownBarChart
data={monitor?.groupDownChecks}
type={dateRange}
onBarHover={setHoveredIncidentsData}
/> */}
/>
</ChartBox>
<ChartBox justifyContent="space-between">
<Stack>
@@ -422,10 +435,10 @@ const DetailsPage = () => {
History
</Typography>
</Stack>
<PaginationTable
{/* <PaginationTable
monitorId={monitorId}
dateRange={dateRange}
/>
/> */}
</ChartBox>
</Stack>
</Box>