From c3f964a2e2e5b0ad51b617c841fde627a40b5ee8 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 22 Aug 2024 19:36:48 -0400 Subject: [PATCH 01/12] 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 02/12] 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 aa5c0f81d3a1023a4c6859e9f92fb04a64a2a99b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 23 Aug 2024 09:46:45 -0700 Subject: [PATCH 03/12] Docker config --- Docker/.gitignore | 2 ++ Docker/client.Dockerfile | 2 +- Docker/docker-compose.yaml | 12 ++++++++- Docker/nginx/conf.d/default.conf | 33 +++++++++++++++++++++++ Docker/nginx/default.conf | 45 -------------------------------- 5 files changed, 47 insertions(+), 47 deletions(-) create mode 100644 Docker/nginx/conf.d/default.conf delete mode 100644 Docker/nginx/default.conf diff --git a/Docker/.gitignore b/Docker/.gitignore index e1b726025..80c983e6f 100644 --- a/Docker/.gitignore +++ b/Docker/.gitignore @@ -2,4 +2,6 @@ !build_images.sh mongo/data/* redis/data/* +nginx/* +certbot/* *.env \ No newline at end of file diff --git a/Docker/client.Dockerfile b/Docker/client.Dockerfile index aaea43c06..0f7935cd1 100644 --- a/Docker/client.Dockerfile +++ b/Docker/client.Dockerfile @@ -16,7 +16,7 @@ RUN npm run build FROM nginx:1.27.1-alpine -COPY ./Docker/nginx/default.conf /etc/nginx/conf.d/default.conf +# COPY ./Docker/nginx/default.conf /etc/nginx/conf.d/default.conf COPY --from=build /app/dist /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/Docker/docker-compose.yaml b/Docker/docker-compose.yaml index 1abbce9d4..c9fa3431f 100644 --- a/Docker/docker-compose.yaml +++ b/Docker/docker-compose.yaml @@ -1,11 +1,21 @@ -version: "3" services: client: image: uptime_client:latest ports: - "80:80" + - "443:443" depends_on: - server + volumes: + - ./nginx/conf.d:/etc/nginx/conf.d/:ro + - ./certbot/www:/var/www/certbot/:ro + - ./certbot/conf/:/etc/nginx/ssl/:ro + + certbot: + image: certbot/certbot:latest + volumes: + - ./certbot/www/:/var/www/certbot/:rw + - ./certbot/conf/:/etc/letsencrypt/:rw server: image: uptime_server:latest ports: diff --git a/Docker/nginx/conf.d/default.conf b/Docker/nginx/conf.d/default.conf new file mode 100644 index 000000000..eb06e2746 --- /dev/null +++ b/Docker/nginx/conf.d/default.conf @@ -0,0 +1,33 @@ +server { + listen 80; + listen [::]:80; + + server_name uptime-demo.bluewavelabs.ca; + server_tokens off; + + location /.well-known/acme-challenge/ { + root /var/www/certbot; + } + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri $uri/ /index.html; + } +} + +server { + listen 443 default_server ssl http2; + listen [::]:443 ssl http2; + + server_name uptime-demo.bluewavelabs.ca; + + ssl_certificate /etc/nginx/ssl/live/uptime-demo.bluewavelabs.ca/fullchain.pem; + ssl_certificate_key /etc/nginx/ssl/live/uptime-demo.bluewavelabs.ca/privkey.pem; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri $uri/ /index.html; + } +} diff --git a/Docker/nginx/default.conf b/Docker/nginx/default.conf deleted file mode 100644 index 0c3122df3..000000000 --- a/Docker/nginx/default.conf +++ /dev/null @@ -1,45 +0,0 @@ -server { - listen 80; - listen [::]:80; - server_name localhost; - - #access_log /var/log/nginx/host.access.log main; - - location / { - root /usr/share/nginx/html; - index index.html index.htm; - try_files $uri $uri/ /index.html; - } - - #error_page 404 /404.html; - - # redirect server error pages to the static page /50x.html - # - error_page 500 502 503 504 /50x.html; - location = /50x.html { - root /usr/share/nginx/html; - } - - # proxy the PHP scripts to Apache listening on 127.0.0.1:80 - # - #location ~ \.php$ { - # proxy_pass http://127.0.0.1; - #} - - # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 - # - #location ~ \.php$ { - # root html; - # fastcgi_pass 127.0.0.1:9000; - # fastcgi_index index.php; - # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; - # include fastcgi_params; - #} - - # deny access to .htaccess files, if Apache's document root - # concurs with nginx's one - # - #location ~ /\.ht { - # deny all; - #} -} From ab0e3c4d0a96df8cf5f1eb341ba6dbd554fcf450 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 23 Aug 2024 09:58:46 -0700 Subject: [PATCH 04/12] update nginx conf --- Docker/nginx/conf.d/default.conf | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/Docker/nginx/conf.d/default.conf b/Docker/nginx/conf.d/default.conf index eb06e2746..8fdc625ee 100644 --- a/Docker/nginx/conf.d/default.conf +++ b/Docker/nginx/conf.d/default.conf @@ -14,6 +14,15 @@ server { index index.html index.htm; try_files $uri $uri/ /index.html; } + + location /api/ { + proxy_pass http://server:5000/api; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_cache_bypass $http_upgrade; + } } server { @@ -30,4 +39,13 @@ server { index index.html index.htm; try_files $uri $uri/ /index.html; } + + location /api/ { + proxy_pass http://server:5000/api; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_cache_bypass $http_upgrade; + } } From 5d734d477c4e2394c9c95f683a20d8421cb520dd Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 23 Aug 2024 10:10:03 -0700 Subject: [PATCH 05/12] Update nginx conf --- Docker/nginx/conf.d/default.conf | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Docker/nginx/conf.d/default.conf b/Docker/nginx/conf.d/default.conf index 8fdc625ee..027416590 100644 --- a/Docker/nginx/conf.d/default.conf +++ b/Docker/nginx/conf.d/default.conf @@ -18,10 +18,10 @@ server { location /api/ { proxy_pass http://server:5000/api; proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; - proxy_cache_bypass $http_upgrade; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; } } @@ -43,9 +43,9 @@ server { location /api/ { proxy_pass http://server:5000/api; proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; - proxy_cache_bypass $http_upgrade; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; } } From e32f725e29d622e0a628a3b9931369260faf20f7 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 23 Aug 2024 10:12:23 -0700 Subject: [PATCH 06/12] add trailing slash --- Docker/nginx/conf.d/default.conf | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Docker/nginx/conf.d/default.conf b/Docker/nginx/conf.d/default.conf index 027416590..a04d32c87 100644 --- a/Docker/nginx/conf.d/default.conf +++ b/Docker/nginx/conf.d/default.conf @@ -16,7 +16,7 @@ server { } location /api/ { - proxy_pass http://server:5000/api; + proxy_pass http://server:5000/api/; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; @@ -41,7 +41,7 @@ server { } location /api/ { - proxy_pass http://server:5000/api; + proxy_pass http://server:5000/api/; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; From 8d75c52a720934df892c4773e4521f9bdda5be0f Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 13:41:06 -0400 Subject: [PATCH 07/12] 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 08/12] 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 6caea8aef54b32b838bed123b248085f581ff8e3 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 23 Aug 2024 11:29:28 -0700 Subject: [PATCH 09/12] Comment out unused features --- Client/src/Components/Sidebar/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index f1bfcb719..120973d1e 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -53,9 +53,9 @@ const menu = [ ], }, { name: "Incidents", path: "incidents", icon: }, - { name: "Status pages", path: "status", icon: }, + // { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, - { name: "Integrations", path: "integrations", icon: }, + // { name: "Integrations", path: "integrations", icon: }, { name: "Account", icon: , @@ -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} From 8778fa888f8163f46923ad1802ac1917c13400b6 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 14:34:26 -0400 Subject: [PATCH 10/12] 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 85ae1826f51654c41dd37985247dbe214bc9330d Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 23 Aug 2024 15:02:01 -0400 Subject: [PATCH 11/12] Comment out additional unused features --- .../TabPanels/Account/TeamPanel.jsx | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index 06b0d9d0a..a0393977d 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -74,7 +74,8 @@ const TeamPanel = () => { { id: 1, name: "NAME" }, { id: 2, name: "EMAIL" }, { id: 3, name: "ROLE" }, - { id: 4, name: "ACTION" }, + // FEATURE STILL TO BE IMPLEMENTED + // { id: 4, name: "ACTION" }, ], rows: team?.map((member, idx) => { return { @@ -101,22 +102,23 @@ const TeamPanel = () => { id: idx + 2, data: member.role.includes("admin") ? "Administrator" : "Member", }, - { - // TODO - Add delete onClick - id: idx + 3, - data: ( - - - - ), - }, + // FEATURE STILL TO BE IMPLEMENTED + // { + // // TODO - Add delete onClick + // id: idx + 3, + // data: ( + // + // + // + // ), + // }, ], }; }), @@ -197,7 +199,8 @@ const TeamPanel = () => { return ( - + {/* FEATURE STILL TO BE IMPLEMENTED */} + {/* Organization name @@ -242,7 +245,7 @@ const TeamPanel = () => { /> -