From 38fddf5b9b47aa687506406dffbb41096b73a26b Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Wed, 4 Sep 2024 16:41:23 -0400 Subject: [PATCH] Added color range to uptime chart --- Client/src/Components/Animated/PulseDot.jsx | 4 +- .../Pages/Monitors/Details/Charts/index.jsx | 61 +++++++++------ Client/src/Pages/Monitors/Details/index.jsx | 76 +++++-------------- Client/src/Pages/Monitors/Details/styled.jsx | 3 + Client/src/Pages/PageSpeed/Details/index.jsx | 2 +- 5 files changed, 62 insertions(+), 84 deletions(-) diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx index 38e956b50..9ac536fe6 100644 --- a/Client/src/Components/Animated/PulseDot.jsx +++ b/Client/src/Components/Animated/PulseDot.jsx @@ -41,8 +41,8 @@ const PulseDot = ({ color }) => { "&::after": { content: `""`, position: "absolute", - width: "6px", - height: "6px", + width: "7px", + height: "7px", borderRadius: "50%", backgroundColor: "white", top: "50%", diff --git a/Client/src/Pages/Monitors/Details/Charts/index.jsx b/Client/src/Pages/Monitors/Details/Charts/index.jsx index 44c7ba163..2927a6cc0 100644 --- a/Client/src/Pages/Monitors/Details/Charts/index.jsx +++ b/Client/src/Pages/Monitors/Details/Charts/index.jsx @@ -44,6 +44,14 @@ export const UpBarChart = ({ data, type, onBarHover }) => { const [chartHovered, setChartHovered] = useState(false); const [hoveredBarIndex, setHoveredBarIndex] = useState(null); + const getColorRange = (uptime) => { + return uptime > 80 + ? { main: theme.palette.success.main, light: theme.palette.success.light } + : uptime > 50 + ? { main: theme.palette.warning.main, light: theme.palette.warning.light } + : { main: theme.palette.error.text, light: theme.palette.error.light }; + }; + return ( { data={data} onMouseEnter={() => { setChartHovered(true); - onBarHover({ time: null, totalChecks: null }); + onBarHover({ time: null, totalChecks: 0, uptimePercentage: 0 }); }} onMouseLeave={() => { setChartHovered(false); @@ -78,29 +86,32 @@ export const UpBarChart = ({ data, type, onBarHover }) => { /> - {data.map((entry, index) => ( - { - setHoveredBarIndex(index); - onBarHover(entry); - }} - onMouseLeave={() => { - setHoveredBarIndex(null); - onBarHover({ time: null, totalChecks: null }); - }} - /> - ))} + {data.map((entry, index) => { + let { main, light } = getColorRange(entry.uptimePercentage); + return ( + { + setHoveredBarIndex(index); + onBarHover(entry); + }} + onMouseLeave={() => { + setHoveredBarIndex(null); + onBarHover({ + time: null, + totalChecks: 0, + uptimePercentage: 0, + }); + }} + /> + ); + })} @@ -121,7 +132,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => { data={data} onMouseEnter={() => { setChartHovered(true); - onBarHover({ time: null, totalIncidents: null }); + onBarHover({ time: null, totalIncidents: 0 }); }} onMouseLeave={() => { setChartHovered(false); @@ -147,7 +158,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => { /> {data.map((entry, index) => ( @@ -166,7 +177,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => { }} onMouseLeave={() => { setHoveredBarIndex(null); - onBarHover({ time: null, totalIncidents: null }); + onBarHover({ time: null, totalIncidents: 0 }); }} /> ))} diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index 4d9917586..46d4772d7 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/Client/src/Pages/Monitors/Details/index.jsx @@ -118,57 +118,9 @@ const DetailsPage = ({ isAdmin }) => { let loading = Object.keys(monitor).length === 0; - const [aggregateStats, setAggregateStats] = useState({}); - useEffect(() => { - const fetchAggregateStats = async () => { - try { - const res = await networkService.getAggregateStatsById( - authToken, - monitorId, - dateRange - ); - - setAggregateStats(res?.data?.data); - } catch (error) { - console.error(error); - } - }; - fetchAggregateStats(); - }, [monitorId, dateRange]); - - const calculateStats = () => { - let totalChecks = 0; - let totalIncidents = 0; - let totalResponseTime = 0; - - Object.keys(aggregateStats).forEach((entry) => { - totalChecks += aggregateStats[entry].totalChecks; - totalIncidents += aggregateStats[entry].totalIncidents; - totalResponseTime += aggregateStats[entry].avgResponseTime; - }); - - let uptime = - dateRange === "day" - ? monitor.uptime24Hours - : dateRange === "week" - ? monitor.uptime7Days - : dateRange === "month" && monitor.uptime30Days; - - return { - totalChecks: totalChecks, - totalIncidents: totalIncidents, - averageResponseTime: - Math.floor((totalResponseTime / aggregateStats.length) * 100) / 100, - uptime: Math.floor(uptime), - }; - }; - - const monitorStats = calculateStats(); - const [hoveredUptimeData, setHoveredUptimeData] = useState(null); const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null); - const statusColor = { true: theme.palette.success.main, false: theme.palette.error.main, @@ -181,6 +133,8 @@ const DetailsPage = ({ isAdmin }) => { undefined: "Pending...", }; + console.log(monitor); + return ( {loading ? ( @@ -339,7 +293,13 @@ const DetailsPage = ({ isAdmin }) => { { Total Checks {hoveredUptimeData !== null - ? hoveredUptimeData.totalChecks || 0 - : monitorStats.totalChecks} + ? hoveredUptimeData.totalChecks + : monitor?.periodTotalChecks} {hoveredUptimeData !== null && hoveredUptimeData.time !== null && ( @@ -450,13 +410,17 @@ const DetailsPage = ({ isAdmin }) => { Uptime Percentage - {monitorStats.uptime} + {hoveredUptimeData !== null + ? Math.floor( + hoveredUptimeData.uptimePercentage * 10 + ) / 10 + : Math.floor(monitor?.periodUptime * 10) / 10} % @@ -472,8 +436,8 @@ const DetailsPage = ({ isAdmin }) => { Total Incidents {hoveredIncidentsData !== null - ? hoveredIncidentsData.totalIncidents || 0 - : monitorStats.totalIncidents} + ? hoveredIncidentsData.totalIncidents + : monitor?.periodIncidents} {hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && ( @@ -494,7 +458,7 @@ const DetailsPage = ({ isAdmin }) => { )} diff --git a/Client/src/Pages/Monitors/Details/styled.jsx b/Client/src/Pages/Monitors/Details/styled.jsx index 3c178cb00..6c3f8eb04 100644 --- a/Client/src/Pages/Monitors/Details/styled.jsx +++ b/Client/src/Pages/Monitors/Details/styled.jsx @@ -33,6 +33,9 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ flexDirection: "row", gap: theme.spacing(6), }, + "& .MuiStack-root:first-of-type": { + alignItems: "center", + }, "& tspan, & text": { fontSize: 11, fill: theme.palette.text.tertiary, diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 29c0b72e0..4004e1715 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -213,7 +213,7 @@ const PageSpeedDetails = () => { monitorId, "desc", 50, - null, + "day", null, null );