From c3f964a2e2e5b0ad51b617c841fde627a40b5ee8 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 22 Aug 2024 19:36:48 -0400 Subject: [PATCH 1/6] Implemented basic bar chart --- Client/src/Components/Animated/PulseDot.jsx | 4 +- Client/src/Components/BasicTable/index.css | 1 + .../src/Components/Charts/BarChart/index.jsx | 40 +++++++++++++++++++ Client/src/Components/Sidebar/index.jsx | 2 +- Client/src/Pages/Monitors/index.jsx | 3 +- Client/src/index.css | 2 +- 6 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 Client/src/Components/Charts/BarChart/index.jsx diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx index 1b196426a..38e956b50 100644 --- a/Client/src/Components/Animated/PulseDot.jsx +++ b/Client/src/Components/Animated/PulseDot.jsx @@ -23,8 +23,8 @@ const PulseDot = ({ color }) => { justifyContent="center" > { + const theme = useTheme(); + + return ( + + {checks.map((check) => ( + + + + ))} + + ); +}; + +export default BarChart; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index f1bfcb719..1033ec0e6 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -310,7 +310,7 @@ function Sidebar() { gap: theme.gap.small, borderRadius: `${theme.shape.borderRadius}px`, pl: theme.gap.small, - mb:"1px" + mb: "1px", }} > {child.icon} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 15c98ce24..0d559da13 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -28,6 +28,7 @@ import { import Settings from "../../assets/icons/settings-bold.svg?react"; import PropTypes from "prop-types"; +import BarChart from "../../Components/Charts/BarChart"; const ActionsMenu = ({ monitor }) => { const [anchorEl, setAnchorEl] = useState(null); @@ -357,7 +358,7 @@ const Monitors = () => { /> ), }, - { id: idx + 2, data: }, + { id: idx + 2, data: }, { id: idx + 3, data: ( diff --git a/Client/src/index.css b/Client/src/index.css index d62f4b48f..887d7da07 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -67,7 +67,7 @@ --env-var-width-2: 360px; --env-var-height-1: 100vh; - --env-var-height-2: 36px; + --env-var-height-2: 34px; --env-var-nav-bar-height: 70px; --env-var-side-bar-width: 250px; From ec79bcd500c7b1a6d920956cb2f0c8b78997ee4b Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 22 Aug 2024 20:15:49 -0400 Subject: [PATCH 2/6] Added tooltips to each individual bar --- .../src/Components/Charts/BarChart/index.css | 19 ++++ .../src/Components/Charts/BarChart/index.jsx | 93 +++++++++++++++---- Client/src/Utils/timeUtils.js | 3 +- 3 files changed, 97 insertions(+), 18 deletions(-) create mode 100644 Client/src/Components/Charts/BarChart/index.css diff --git a/Client/src/Components/Charts/BarChart/index.css b/Client/src/Components/Charts/BarChart/index.css new file mode 100644 index 000000000..e386aef1c --- /dev/null +++ b/Client/src/Components/Charts/BarChart/index.css @@ -0,0 +1,19 @@ +.bar-tooltip .MuiTooltip-tooltip { + background-color: white; + border: solid 1px black; + box-shadow: var(--env-var-shadow-1); + border: solid 1px var(--env-var-color-6); + border-radius: var(--env-var-radius-1); + padding: 4px 8px; +} + +.bar-tooltip .MuiTooltip-tooltip p { + font-size: var(--env-var-font-size-small-plus); + color: var(--env-var-color-2); + font-weight: 500; +} +.bar-tooltip .MuiTooltip-tooltip span { + font-size: var(--env-var-font-size-small); + color: var(--env-var-color-2); + font-weight: 600; +} diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 6af3180a9..8ab54e8a8 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -1,5 +1,7 @@ import { useTheme } from "@emotion/react"; -import { Box, Stack } from "@mui/material"; +import { Box, Stack, Tooltip, Typography } from "@mui/material"; +import { formatDate } from "../../../Utils/timeUtils"; +import "./index.css"; const BarChart = ({ checks = [] }) => { const theme = useTheme(); @@ -7,31 +9,88 @@ const BarChart = ({ checks = [] }) => { return ( {checks.map((check) => ( - + + {formatDate(new Date(check.createdAt), { year: undefined })} + + + + + + Response Time + + + {check.originalResponseTime} + + {" "} + ms + + + + + + } + placement="top" key={`check-${check?._id}`} - position="relative" - width="8px" - height="100%" - backgroundColor="#f4f4f4" - sx={{ - borderRadius: theme.gap.xs, + slotProps={{ + popper: { + className: "bar-tooltip", + modifiers: [ + { + name: "offset", + options: { + offset: [0, -12], + }, + }, + ], + }, }} > - + > + + + ))} ); diff --git a/Client/src/Utils/timeUtils.js b/Client/src/Utils/timeUtils.js index f7742dbaf..2d1a2f180 100644 --- a/Client/src/Utils/timeUtils.js +++ b/Client/src/Utils/timeUtils.js @@ -43,7 +43,7 @@ export const formatDurationRounded = (ms) => { return time; }; -export const formatDate = (date) => { +export const formatDate = (date, customOptions) => { const options = { year: "numeric", month: "long", @@ -51,6 +51,7 @@ export const formatDate = (date) => { hour: "numeric", minute: "numeric", hour12: true, + ...customOptions }; // Return the date using the specified options From 8d75c52a720934df892c4773e4521f9bdda5be0f Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 13:41:06 -0400 Subject: [PATCH 3/6] Stop event propagation --- .../src/Components/Charts/BarChart/index.jsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 8ab54e8a8..e685232d0 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -7,7 +7,17 @@ const BarChart = ({ checks = [] }) => { const theme = useTheme(); return ( - + event.stopPropagation()} + sx={{ + cursor: "default", + }} + > {checks.map((check) => ( { { name: "offset", options: { - offset: [0, -12], + offset: [0, -10], }, }, ], @@ -66,13 +76,13 @@ const BarChart = ({ checks = [] }) => { > { : theme.label.down.dotColor } sx={{ - borderRadius: theme.gap.xs, + borderRadius: "3px", }} /> From 931d15c4510d8cec3315a6fc4cc216ad47a2179f Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 14:25:55 -0400 Subject: [PATCH 4/6] Added placeholder checks --- .../src/Components/Charts/BarChart/index.jsx | 166 ++++++++++-------- 1 file changed, 96 insertions(+), 70 deletions(-) diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index e685232d0..f4aac9abc 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -6,6 +6,16 @@ import "./index.css"; const BarChart = ({ checks = [] }) => { const theme = useTheme(); + // set responseTime to average if there's only one check + if (checks.length === 1) { + checks[0] = { ...checks[0], responseTime: 50 }; + } + + if (checks.length !== 25) { + const placeholders = Array(25 - checks.length).fill("placeholder"); + checks = [...checks, ...placeholders]; + } + return ( { cursor: "default", }} > - {checks.map((check) => ( - - - {formatDate(new Date(check.createdAt), { year: undefined })} - - - - - - Response Time - - - {check.originalResponseTime} - - {" "} - ms - - - - - - } - placement="top" - key={`check-${check?._id}`} - slotProps={{ - popper: { - className: "bar-tooltip", - modifiers: [ - { - name: "offset", - options: { - offset: [0, -10], - }, - }, - ], - }, - }} - > + {checks.map((check, index) => + check === "placeholder" ? ( + ) : ( + + + {formatDate(new Date(check.createdAt), { year: undefined })} + + + + + + Response Time + + + {check.originalResponseTime} + + {" "} + ms + + + + + + } + placement="top" + key={`check-${check?._id}`} + slotProps={{ + popper: { + className: "bar-tooltip", + modifiers: [ + { + name: "offset", + options: { + offset: [0, -10], + }, + }, + ], + }, + }} > .MuiBox-root": { + filter: "brightness(0.8)", + }, }} - /> - - - ))} + > + + + + ) + )} ); }; From 8778fa888f8163f46923ad1802ac1917c13400b6 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 14:34:26 -0400 Subject: [PATCH 5/6] Added bars transition --- Client/src/Components/Charts/BarChart/index.jsx | 13 ++++++++++--- Client/src/Components/Sidebar/index.jsx | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index f4aac9abc..9238374c2 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -1,10 +1,16 @@ import { useTheme } from "@emotion/react"; import { Box, Stack, Tooltip, Typography } from "@mui/material"; import { formatDate } from "../../../Utils/timeUtils"; +import { useEffect, useState } from "react"; import "./index.css"; const BarChart = ({ checks = [] }) => { const theme = useTheme(); + const [animate, setAnimate] = useState(false); + + useEffect(() => { + setAnimate(true); + }); // set responseTime to average if there's only one check if (checks.length === 1) { @@ -106,15 +112,15 @@ const BarChart = ({ checks = [] }) => { sx={{ borderRadius: "3px", "&:hover > .MuiBox-root": { - filter: "brightness(0.8)", - }, + filter: "brightness(0.8)", + }, }} > { } sx={{ borderRadius: "3px", + transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 1033ec0e6..8fe527346 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -427,7 +427,7 @@ function Sidebar() { onClick={() => item.path === "support" ? window.open( - "https://github.com/bluewave-labs/bluewave-uptime", + "https://github.com/bluewave-labs/bluewave-uptime/issues", "_blank", "noreferrer" ) From fb4fdec60cff588e56fc441370dda160601a2aea Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 15:37:38 -0400 Subject: [PATCH 6/6] Removed url button link --- Client/src/Components/BasicTable/index.css | 16 ++-------- Client/src/Pages/Monitors/index.jsx | 37 +++------------------- 2 files changed, 8 insertions(+), 45 deletions(-) diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 8c16dd744..47a47439d 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -1,22 +1,12 @@ -.MuiTable-root .host a { - width: var(--env-var-img-width-2); - height: var(--env-var-img-width-2); - color: var(--env-var-color-5); - margin-right: 10px; -} -.MuiTable-root .host a svg { - width: var(--env-var-font-size-large); - height: var(--env-var-font-size-large); -} -.MuiTable-root .host div:nth-child(2) { +.MuiTable-root .host { width: fit-content; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } -.MuiTable-root .host div:nth-child(2) span { +.MuiTable-root .host span { font-size: var(--env-var-font-size-small); - margin-left: 10px; + margin-left: 8px; } .MuiTable-root .label { diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 0d559da13..44fc818e8 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -10,11 +10,9 @@ import Button from "../../Components/Button"; import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; import { useTheme } from "@emotion/react"; import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; -import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"; import BasicTable from "../../Components/BasicTable"; import { StatusLabel } from "../../Components/Label"; import { createToast } from "../../Utils/toastUtils"; -import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart"; import { Box, IconButton, @@ -207,7 +205,6 @@ ActionsMenu.propTypes = { * * @component * @param {Object} params - An object containing the following properties: - * @param {string} params.url - The URL of the host. * @param {string} params.title - The name of the host. * @param {string} params.percentageColor - The color of the percentage text. * @param {number} params.percentage - The percentage to display. @@ -215,40 +212,17 @@ ActionsMenu.propTypes = { */ const Host = ({ params }) => { return ( - - { - event.stopPropagation(); - window.open(params.url, "_blank", "noreferrer"); - }} - sx={{ - "&:focus": { - outline: "none", - }, - mr: "5px", - }} - > - - - - {params.title} - - {params.percentage}% - - + + {params.title} + + {params.percentage}% + ); }; Host.propTypes = { params: PropTypes.shape({ - url: PropTypes.string, title: PropTypes.string, percentageColor: PropTypes.string, percentage: PropTypes.number, @@ -327,7 +301,6 @@ const Monitors = () => { data.rows = monitorState.monitors.map((monitor, idx) => { const params = { - url: monitor.url, title: monitor.name, percentage: 100, percentageColor: