From f5bfb738b06f30e61a4ccf12ac7686dea829f00d Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Thu, 13 Jun 2024 10:44:16 +0330 Subject: [PATCH 01/11] Monitors:hosts, with some bugs and challenges to fix --- Client/package-lock.json | 18 ++- Client/package.json | 1 + .../Components/Charts/BarChart/BarChart.jsx | 22 ++++ .../Components/Charts/BarChart/barChart.css | 20 ++++ .../src/Components/CurrentMonitors/index.css | 104 ++++++++++++++++- .../src/Components/CurrentMonitors/index.jsx | 11 +- Client/src/Components/Host/index.jsx | 16 +++ Client/src/Components/HostActions/index.jsx | 8 ++ Client/src/Components/HostStatus/index.jsx | 18 +++ Client/src/Components/HostsTable/index.jsx | 106 ++++++++++++++++++ Client/src/Components/Pagination/index.css | 33 ++++++ Client/src/Components/Pagination/index.jsx | 13 +++ .../TextFields/Search/SearchTextField.jsx | 14 +++ .../TextFields/Search/searchTextField.css | 26 +++++ Client/src/Pages/Monitors/index.jsx | 2 + .../assets/Images/Icon-open-in-tab-gray.png | Bin 0 -> 375 bytes Client/src/assets/Images/Icon-search-gray.png | Bin 0 -> 495 bytes .../Images/Icon-setting-actions-gray.png | Bin 0 -> 761 bytes Client/src/index.css | 13 +++ 19 files changed, 422 insertions(+), 3 deletions(-) create mode 100644 Client/src/Components/Charts/BarChart/BarChart.jsx create mode 100644 Client/src/Components/Charts/BarChart/barChart.css create mode 100644 Client/src/Components/Host/index.jsx create mode 100644 Client/src/Components/HostActions/index.jsx create mode 100644 Client/src/Components/HostStatus/index.jsx create mode 100644 Client/src/Components/HostsTable/index.jsx create mode 100644 Client/src/Components/Pagination/index.css create mode 100644 Client/src/Components/Pagination/index.jsx create mode 100644 Client/src/Components/TextFields/Search/SearchTextField.jsx create mode 100644 Client/src/Components/TextFields/Search/searchTextField.css create mode 100644 Client/src/assets/Images/Icon-open-in-tab-gray.png create mode 100644 Client/src/assets/Images/Icon-search-gray.png create mode 100644 Client/src/assets/Images/Icon-setting-actions-gray.png diff --git a/Client/package-lock.json b/Client/package-lock.json index 73edbf7fb..3de7c17b0 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -18,6 +18,7 @@ "@mui/x-date-pickers": "7.3.2", "@reduxjs/toolkit": "2.2.5", "axios": "1.7.2", + "chart.js": "^4.4.3", "dayjs": "1.11.11", "joi": "17.13.1", "jwt-decode": "^4.0.0", @@ -1087,6 +1088,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@mui/base": { "version": "5.0.0-beta.40", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", @@ -2310,6 +2316,17 @@ "node": ">=0.8.0" } }, + "node_modules/chart.js": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz", + "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -2647,7 +2664,6 @@ "integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==", "dev": true, "license": "ISC" - }, "node_modules/error-ex": { "version": "1.3.2", diff --git a/Client/package.json b/Client/package.json index 505fe25d8..16d6825e6 100644 --- a/Client/package.json +++ b/Client/package.json @@ -20,6 +20,7 @@ "@mui/x-date-pickers": "7.3.2", "@reduxjs/toolkit": "2.2.5", "axios": "1.7.2", + "chart.js": "^4.4.3", "dayjs": "1.11.11", "joi": "17.13.1", "jwt-decode": "^4.0.0", diff --git a/Client/src/Components/Charts/BarChart/BarChart.jsx b/Client/src/Components/Charts/BarChart/BarChart.jsx new file mode 100644 index 000000000..dd2ba070c --- /dev/null +++ b/Client/src/Components/Charts/BarChart/BarChart.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import "./barChart.css"; + +const BarChart = () => { + const data = Array.from({ length: 12 }, () => + Math.floor(Math.random() * 100) + ); + + return ( +
+ {data.map((value, index) => ( +
+ ))} +
+ ); +}; + +export default BarChart; diff --git a/Client/src/Components/Charts/BarChart/barChart.css b/Client/src/Components/Charts/BarChart/barChart.css new file mode 100644 index 000000000..8dd2a2b22 --- /dev/null +++ b/Client/src/Components/Charts/BarChart/barChart.css @@ -0,0 +1,20 @@ +.bar-chart { + display: flex; + justify-content: space-around; + align-items: flex-end; + height: 50px; + width: 300px; +} + +.bar { + width: 7%; + transition: height 0.3s ease; +} + +.green { + background-color: var(--env-var-color-23); +} + +.red { + background-color: var(--env-var-color-24); +} diff --git a/Client/src/Components/CurrentMonitors/index.css b/Client/src/Components/CurrentMonitors/index.css index 7b00b1cec..efb663b46 100644 --- a/Client/src/Components/CurrentMonitors/index.css +++ b/Client/src/Components/CurrentMonitors/index.css @@ -8,8 +8,110 @@ display: flex; } +.current-monitors-bar { + display: flex; + justify-content: space-between; +} + .current-monitors-title { font-size: 1rem; font-weight: bold; - margin-right: var(); + margin-right: var(--env-var-spacing-1); +} + +.current-monitors-counter { + width: var(--env-var-spacing-2); + height: var(--env-var-spacing-2); + background-color: var(--env-var-color-15); + border: 1px solid var(--env-var-color-14); + border-radius: 50%; + text-align: center; + align-items: center; +} + +.monitors-v-gaping { + height: var(--env-var-spacing-3); +} + +.current-monitors-table { + width: 100%; + text-align: left; +} + +.current-monitors-table { + width: 100%; + text-align: left; + border-collapse: collapse; + border: 1px solid var(--env-var-color-16); + border-radius: var(--env-var-radius-1); +} + +.current-monitors-table th, +.current-monitors-table td { + border: 1px solid var(--env-var-color-16); + border-left: none; + border-right: none; + padding: 8px; +} + +.theader-row { + background-color: var(--env-var-color-13); + color: var(--env-var-color-2); + font-weight: 500; +} + +.theader-row td { + padding: var(--env-var-spacing-1) var(--env-var-spacing-2); + font-size: var(--env-var-font-size-medium); +} + +.host-list-item { + display: flex; + align-items: center; + cursor: pointer; +} + +.host-list-item-open { + width: var(--env-var-img-width-2); + height: var(--env-var-img-width-2); + margin-right: 8px; +} + +.host-list-item-name { + font-size: var(--env-var-font-size-medium); + font-weight: bold; + margin-right: var(--env-var-spacing-1); +} + +.host-list-item-precentage { + font-size: var(--env-var-font-size-medium); +} + +.tbody-row td { + padding: var(--env-var-spacing-2) var(--env-var-img-width-2); +} + +.host-status-box { + display: flex; + width: fit-content; + border: 1px solid var(--env-var-color-4); + border-radius: var(--env-var-radius-2); + align-items: center; + padding: calc(var(--env-var-spacing-1) / 2); +} + +.host-status-box-circle { + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: calc(var(--env-var-spacing-1) / 2); +} + +.host-actions { + margin: auto; + cursor: pointer; +} + +.tbody-row-cell.actions-cell { + padding-left: 30px; } diff --git a/Client/src/Components/CurrentMonitors/index.jsx b/Client/src/Components/CurrentMonitors/index.jsx index bf376c832..31e71bf3e 100644 --- a/Client/src/Components/CurrentMonitors/index.jsx +++ b/Client/src/Components/CurrentMonitors/index.jsx @@ -1,5 +1,8 @@ +import SearchTextField from "../TextFields/Search/SearchTextField"; import "./index.css"; import React from "react"; +import HostsTable from "../HostsTable"; +import Pagination from "../Pagination"; const CurrentMonitors = () => { return ( @@ -9,8 +12,14 @@ const CurrentMonitors = () => {
Current monitors
5
-
+
+ +
+
+ +
+ ); }; diff --git a/Client/src/Components/Host/index.jsx b/Client/src/Components/Host/index.jsx new file mode 100644 index 000000000..d8ba5477f --- /dev/null +++ b/Client/src/Components/Host/index.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png"; + +function Host(title, precentage, statusColor) { + return ( +
+ OpenIt +
{title}
+
+ {precentage}% +
+
+ ); +} + +export default Host; diff --git a/Client/src/Components/HostActions/index.jsx b/Client/src/Components/HostActions/index.jsx new file mode 100644 index 000000000..7bbb98d08 --- /dev/null +++ b/Client/src/Components/HostActions/index.jsx @@ -0,0 +1,8 @@ +import React from "react"; +import Actions from "../../assets/Images/Icon-setting-actions-gray.png"; + +function HostActions() { + return Actions; +} + +export default HostActions; diff --git a/Client/src/Components/HostStatus/index.jsx b/Client/src/Components/HostStatus/index.jsx new file mode 100644 index 000000000..3b0660c33 --- /dev/null +++ b/Client/src/Components/HostStatus/index.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +function HostStatus(backgroundColor, status, dotColor) { + return ( +
+
+
{status}
+
+ ); +} + +export default HostStatus; diff --git a/Client/src/Components/HostsTable/index.jsx b/Client/src/Components/HostsTable/index.jsx new file mode 100644 index 000000000..7c5a93a93 --- /dev/null +++ b/Client/src/Components/HostsTable/index.jsx @@ -0,0 +1,106 @@ +import React from "react"; +import HostStatus from "../HostStatus"; +import Host from "../Host"; +import BarChart from "../Charts/BarChart/BarChart"; +import HostActions from "../HostActions"; + +function HostsTable() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HostStatusTeamActions
+ {Host("Discord", 100, "var(--env-var-color-17)")} + + {HostStatus( + "var(--env-var-color-20)", + "Up", + "var(--env-var-color-17)" + )} + + + {HostActions()}
+ {Host("Google", 99.9, "var(--env-var-color-17)")} + + {HostStatus( + "var(--env-var-color-20)", + "Up", + "var(--env-var-color-17)" + )} + + + {HostActions()}
+ {Host("NBC", 98.1, "var(--env-var-color-18)")} + + {HostStatus( + "var(--env-var-color-20)", + "Up", + "var(--env-var-color-17)" + )} + + + {HostActions()}
+ {Host("Google", 95.1, "var(--env-var-color-19)")} + + {HostStatus( + "var(--env-var-color-21)", + "Down", + "var(--env-var-color-19)" + )} + + + {HostActions()}
+ {Host("NBC", 99.9, "var(--env-var-color-17)")} + + {HostStatus( + "var(--env-var-color-15)", + "Cannot resolve", + "var(--env-var-color-22)" + )} + + + {HostActions()}
+
+ ); +} + +export default HostsTable; diff --git a/Client/src/Components/Pagination/index.css b/Client/src/Components/Pagination/index.css new file mode 100644 index 000000000..f9289b741 --- /dev/null +++ b/Client/src/Components/Pagination/index.css @@ -0,0 +1,33 @@ +.pagination-holder { + display: flex; + width: 100%; + justify-content: center; +} + +.MuiPagination-root { + .MuiPagination-ul { + flex-wrap: nowrap; + li { + &:first-child { + flex-basis: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + > button::after { + margin-left: 10px; + content: "previous"; + } + } + &:last-child { + flex-basis: 100%; + display: flex; + justify-content: flex-end; + align-items: center; + > button::before { + margin-right: 10px; + content: "next"; + } + } + } + } +} diff --git a/Client/src/Components/Pagination/index.jsx b/Client/src/Components/Pagination/index.jsx new file mode 100644 index 000000000..d2d4e18fe --- /dev/null +++ b/Client/src/Components/Pagination/index.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import { Pagination as MuiPagination } from "@mui/material"; +import "./index.css"; + +const Pagination = () => { + return ( +
+ +
+ ); +}; + +export default Pagination; diff --git a/Client/src/Components/TextFields/Search/SearchTextField.jsx b/Client/src/Components/TextFields/Search/SearchTextField.jsx new file mode 100644 index 000000000..934a19943 --- /dev/null +++ b/Client/src/Components/TextFields/Search/SearchTextField.jsx @@ -0,0 +1,14 @@ +import "./searchTextField.css"; +import React from "react"; +import Search from "../../../assets/Images/Icon-search-gray.png"; + +const SearchTextField = () => { + return ( +
+ Search + +
+ ); +}; + +export default SearchTextField; diff --git a/Client/src/Components/TextFields/Search/searchTextField.css b/Client/src/Components/TextFields/Search/searchTextField.css new file mode 100644 index 000000000..71c9f0e20 --- /dev/null +++ b/Client/src/Components/TextFields/Search/searchTextField.css @@ -0,0 +1,26 @@ +.search-field-holder { + display: flex; + align-items: center; + width: 180px; + height: 9px; + padding: var(--env-var-spacing-1); + border: 1px solid var(--env-var-color-4); + border-radius: var(--env-var-radius-1); +} + +.search-field-icon { + width: var(--env-var-img-width-2); + height: var(--env-var-img-width-2); + margin-right: calc(var(--env-var-img-width-2) / 2); +} + +.search-field { + width: 150px; + border: none; + outline: none; + font-size: var(--env-var-font-size-large); +} + +.search-field::placeholder { + color: var(--env-var-color-14); +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 0c0555d5a..846f140b8 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -7,6 +7,8 @@ import React from "react"; const Monitors = () => { return (
+
+
Hello, Jackie
diff --git a/Client/src/Components/HostsTable/index.jsx b/Client/src/Components/HostsTable/index.jsx index 7c5a93a93..2867ef26a 100644 --- a/Client/src/Components/HostsTable/index.jsx +++ b/Client/src/Components/HostsTable/index.jsx @@ -1,10 +1,6 @@ import React from "react"; -import HostStatus from "../HostStatus"; -import Host from "../Host"; -import BarChart from "../Charts/BarChart/BarChart"; -import HostActions from "../HostActions"; -function HostsTable() { +const HostsTable = ({ monitors }) => { return (
@@ -17,90 +13,18 @@ function HostsTable() { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {monitors.map((monitor, index) => ( + + + + + + + ))}
- {Host("Discord", 100, "var(--env-var-color-17)")} - - {HostStatus( - "var(--env-var-color-20)", - "Up", - "var(--env-var-color-17)" - )} - - - {HostActions()}
- {Host("Google", 99.9, "var(--env-var-color-17)")} - - {HostStatus( - "var(--env-var-color-20)", - "Up", - "var(--env-var-color-17)" - )} - - - {HostActions()}
- {Host("NBC", 98.1, "var(--env-var-color-18)")} - - {HostStatus( - "var(--env-var-color-20)", - "Up", - "var(--env-var-color-17)" - )} - - - {HostActions()}
- {Host("Google", 95.1, "var(--env-var-color-19)")} - - {HostStatus( - "var(--env-var-color-21)", - "Down", - "var(--env-var-color-19)" - )} - - - {HostActions()}
- {Host("NBC", 99.9, "var(--env-var-color-17)")} - - {HostStatus( - "var(--env-var-color-15)", - "Cannot resolve", - "var(--env-var-color-22)" - )} - - - {HostActions()}
{monitor.host}{monitor.status}{monitor.team}{monitor.actions}
); -} +}; export default HostsTable; diff --git a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx new file mode 100644 index 000000000..b59ecea2b --- /dev/null +++ b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx @@ -0,0 +1,17 @@ +import "./flexibileTextField.css"; +import React from "react"; + +const FlexibileTextField = ({ title, type, placeholder }) => { + return ( +
+
{title}
+ +
+ ); +}; + +export default FlexibileTextField; diff --git a/Client/src/Components/TextFields/Flexibile/flexibileTextField.css b/Client/src/Components/TextFields/Flexibile/flexibileTextField.css new file mode 100644 index 000000000..2e0422876 --- /dev/null +++ b/Client/src/Components/TextFields/Flexibile/flexibileTextField.css @@ -0,0 +1,22 @@ +.flexibile-textfield-title { + color: var(--env-var-color-5); + font-size: var(--env-var-font-size-medium); +} + +.flexibile-textfield-input { + width: 292.8px; + height: 6.8px; + padding: var(--env-var-spacing-1); + margin-top: 10px; + border: 1px solid var(--env-var-color-4); + border-radius: var(--env-var-radius-1); +} + +.flexibile-textfield-input:focus { + outline: none; +} + +.flexibile-textfield-input::placeholder { + color: var(--env-var-color-25); + font-size: var(--env-var-font-size-medium); +} diff --git a/Client/src/Components/TextFields/Search/searchTextField.css b/Client/src/Components/TextFields/Search/searchTextField.css index 71c9f0e20..a3d560e15 100644 --- a/Client/src/Components/TextFields/Search/searchTextField.css +++ b/Client/src/Components/TextFields/Search/searchTextField.css @@ -18,7 +18,7 @@ width: 150px; border: none; outline: none; - font-size: var(--env-var-font-size-large); + font-size: var(--env-var-font-size-medium); } .search-field::placeholder { diff --git a/Client/src/Pages/Monitors/CreateNewMonitor.jsx b/Client/src/Pages/Monitors/CreateNewMonitor.jsx new file mode 100644 index 000000000..43c853748 --- /dev/null +++ b/Client/src/Pages/Monitors/CreateNewMonitor.jsx @@ -0,0 +1,85 @@ +import ConfigBox from "../../Components/ConfigBox"; +import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField"; +import "./index.css"; +import React from "react"; + +const CreateNewMonitor = () => { + return ( +
+
+
+
Create new monitor
+
+ +
General settings
+
+ Here you can select the URL of the host, together with the type of + monitor. +
+
+ } + rightLayout={ +
+ +
+ +
+ } + /> +
+
+ +
Checks to perform
+
+ You can always add or remove checks after adding your site. +
+
+ } + /> +
+
+ +
Incident notifications
+
+ When there is an incident, notify users. +
+ + } + /> +
+
+ +
Advanced settings
+ + } + /> +
+
+ +
Proxy settings
+ + } + /> + + ); +}; + +export default CreateNewMonitor; diff --git a/Client/src/Pages/Monitors/CurrentStats.jsx b/Client/src/Pages/Monitors/CurrentStats.jsx new file mode 100644 index 000000000..b84f53620 --- /dev/null +++ b/Client/src/Pages/Monitors/CurrentStats.jsx @@ -0,0 +1,99 @@ +import React, { useEffect, useState } from "react"; +import Host from "../../Components/Host"; +import HostStatus from "../../Components/HostStatus"; +import HostActions from "../../Components/HostActions"; +import BarChart from "../../Components/Charts/BarChart/BarChart"; +import Button from "../../Components/Button"; +import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; +import CurrentMonitors from "../../Components/CurrentMonitors"; + +const hardCodedMonitors = [ + { + host: Host("Discord", 100, "var(--env-var-color-17)"), + status: HostStatus( + "var(--env-var-color-20)", + "Up", + "var(--env-var-color-17)" + ), + team: , + actions: HostActions(), + }, + { + host: Host("Google", 99.9, "var(--env-var-color-17)"), + status: HostStatus( + "var(--env-var-color-20)", + "Up", + "var(--env-var-color-17)" + ), + team: , + actions: HostActions(), + }, + { + host: Host("NBC", 98.1, "var(--env-var-color-18)"), + status: HostStatus( + "var(--env-var-color-20)", + "Up", + "var(--env-var-color-17)" + ), + team: , + actions: HostActions(), + }, + { + host: Host("Google", 95.1, "var(--env-var-color-19)"), + status: HostStatus( + "var(--env-var-color-21)", + "Down", + "var(--env-var-color-19)" + ), + team: , + actions: HostActions(), + }, + { + host: Host("NBC", 99.9, "var(--env-var-color-17)"), + status: HostStatus( + "var(--env-var-color-15)", + "Cannot resolve", + "var(--env-var-color-22)" + ), + team: , + actions: HostActions(), + }, +]; + +const CurrentStats = () => { + // The hardcoded part is passed as default value for the purpose of demonstration. + // Pass an empty array, [], before fetching the data + const [monitors, setMonitors] = useState(hardCodedMonitors); + + useEffect(() => { + fetch("API_URL") + .then((response) => response.json()) + .then((data) => setMonitors(data)) + .catch((error) => console.error(error)); + }, []); + + return ( +
+
+
+
+
Hello, Jackie
+
+
+
+ + + +
+
+ +
+ ); +}; + +export default CurrentStats; diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index d6d272e7c..2d2ad87eb 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -1,4 +1,5 @@ -.monitors { +.monitors, +.new-monitor { width: 70vw; padding: 4vw; } @@ -22,3 +23,9 @@ .monitors-gaps-medium { height: var(--env-var-spacing-2); } + +.new-monitor-header { + color: var(--env-var-color-1); + font-size: var(--env-var-font-size-large-plus); + font-weight: 600; +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 846f140b8..153ac852c 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,30 +1,11 @@ -import Button from "../../Components/Button"; -import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; -import CurrentMonitors from "../../Components/CurrentMonitors"; +import CurrentStats from "./CurrentStats"; import "./index.css"; import React from "react"; const Monitors = () => { return (
-
-
-
-
Hello, Jackie
-
-
-
- - - -
-
- +
); }; diff --git a/Client/src/index.css b/Client/src/index.css index 3166674ad..76ad93989 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -39,6 +39,7 @@ --env-var-color-22: #4e5ba6; --env-var-color-23: #17b26a; --env-var-color-24: #d92d20; + --env-var-color-25: #667085; --env-var-radius-1: 4px; --env-var-radius-2: 8px; @@ -57,6 +58,7 @@ --env-var-font-size-medium: 13px; --env-var-font-size-medium-plus: 14px; --env-var-font-size-large: 16px; + --env-var-font-size-large-plus: 24px; --env-var-font-size-xlarge: 30px; --env-var-img-width-1: 20px; From 3ece902d5721d9a45609f65c9f40e84d13d0f733 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 19 Jun 2024 10:33:10 +0330 Subject: [PATCH 03/11] commit to discuss --- .../Charts/Servers/serverStatus.css | 2 +- .../DashboardSettingsIcon/index.css | 13 ++ .../DashboardSettingsIcon/index.jsx | 50 ++++-- Client/src/Components/Host/index.jsx | 6 +- Client/src/Components/HostActions/index.jsx | 4 +- Client/src/Mock/sample_data.json | 163 ++++++++++++++++++ Client/src/Pages/Monitors/CurrentStats.jsx | 70 ++++++-- Client/src/Pages/Monitors/index.css | 2 +- Client/src/index.css | 1 + 9 files changed, 277 insertions(+), 34 deletions(-) create mode 100644 Client/src/Mock/sample_data.json diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css index f42ae2801..deff765af 100644 --- a/Client/src/Components/Charts/Servers/serverStatus.css +++ b/Client/src/Components/Charts/Servers/serverStatus.css @@ -12,7 +12,7 @@ } .server-status-tile { - width: 230px; + width: 310px; padding: var(--spacing-general-1); border: 1px solid var(--color-border-0); border-radius: var(--border-radius-0); diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/DashboardSettingsIcon/index.css index e69de29bb..1221e542f 100644 --- a/Client/src/Components/DashboardSettingsIcon/index.css +++ b/Client/src/Components/DashboardSettingsIcon/index.css @@ -0,0 +1,13 @@ +.dashboard-setting-menu-item { + width: 135px; + padding: 6px; + margin: 5px 12px; +} + +.dashboard-setting-menu-item:hover { + color: var(--env-var-color-26); +} + +#menu-appbar { + padding: var(--env-var-spacing-1); +} diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/DashboardSettingsIcon/index.jsx index e1f1d59da..d2b9b97be 100644 --- a/Client/src/Components/DashboardSettingsIcon/index.jsx +++ b/Client/src/Components/DashboardSettingsIcon/index.jsx @@ -1,15 +1,22 @@ -import { useState } from 'react'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import Menu from '@mui/material/Menu'; -import Tooltip from '@mui/material/Tooltip'; -import MenuItem from '@mui/material/MenuItem'; -import Typography from '@mui/material/Typography'; -import SvgIcon from '@mui/material/SvgIcon'; -import SettingsIcon from '@mui/icons-material/Settings'; -import { useTheme } from '@mui/material/styles'; +import "./index.css"; +import { useState } from "react"; +import Box from "@mui/material/Box"; +import IconButton from "@mui/material/IconButton"; +import Menu from "@mui/material/Menu"; +import Tooltip from "@mui/material/Tooltip"; +import MenuItem from "@mui/material/MenuItem"; +import Typography from "@mui/material/Typography"; +import SvgIcon from "@mui/material/SvgIcon"; +import SettingsIcon from "@mui/icons-material/Settings"; +import { useTheme } from "@mui/material/styles"; -const settings = ['Open Site', 'Detailed View', 'Incidents', 'Configure', 'Remove']; +const settings = [ + "Open Site", + "Detailed View", + "Incidents", + "Configure", + "Remove", +]; /** * DashboardSettings component @@ -54,20 +61,29 @@ function DashboardSettings() { id="menu-appbar" anchorEl={anchorElUser} anchorOrigin={{ - vertical: 'top', - horizontal: 'right', + vertical: "top", + horizontal: "right", }} keepMounted transformOrigin={{ - vertical: 'top', - horizontal: 'right', + vertical: "top", + horizontal: "right", }} open={Boolean(anchorElUser)} onClose={handleCloseUserMenu} > {settings.map((setting) => ( - - {setting} + + + {setting} + ))} diff --git a/Client/src/Components/Host/index.jsx b/Client/src/Components/Host/index.jsx index d8ba5477f..370745f4d 100644 --- a/Client/src/Components/Host/index.jsx +++ b/Client/src/Components/Host/index.jsx @@ -1,10 +1,12 @@ import React from "react"; import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png"; -function Host(title, precentage, statusColor) { +function Host(title, precentage, statusColor, link) { return (
- OpenIt + + OpenIt +
{title}
{precentage}% diff --git a/Client/src/Components/HostActions/index.jsx b/Client/src/Components/HostActions/index.jsx index 7bbb98d08..c974906e8 100644 --- a/Client/src/Components/HostActions/index.jsx +++ b/Client/src/Components/HostActions/index.jsx @@ -1,8 +1,8 @@ import React from "react"; -import Actions from "../../assets/Images/Icon-setting-actions-gray.png"; +import DashboardSettings from "../DashboardSettingsIcon"; function HostActions() { - return Actions; + return ; } export default HostActions; diff --git a/Client/src/Mock/sample_data.json b/Client/src/Mock/sample_data.json new file mode 100644 index 000000000..3007cd498 --- /dev/null +++ b/Client/src/Mock/sample_data.json @@ -0,0 +1,163 @@ +{ + "success": true, + "msg": "Got monitor for 666c9146c9bfa20db790b1df successfully\"", + "data": [ + { + "_id": "6671d8469ba14f9f260eed23", + "userId": "666c9146c9bfa20db790b1df", + "name": "Google Monitor", + "description": "Google", + "type": "ping", + "url": "127.0.0.1", + "isActive": true, + "interval": 10000, + "createdAt": "2024-06-18T18:56:06.212Z", + "updatedAt": "2024-06-18T18:56:06.212Z", + "__v": 0, + "checks": [ + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 2, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, + { + "_id": "6671d8549ba14f9f260eed2d", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 2, + "createdAt": "2024-06-18T18:56:20.016Z", + "updatedAt": "2024-06-18T18:56:20.016Z", + "__v": 0 + }, + { + "_id": "6671d85e9ba14f9f260eed3c", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 2, + "createdAt": "2024-06-18T18:56:30.050Z", + "updatedAt": "2024-06-18T18:56:30.050Z", + "__v": 0 + } + ] + }, + { + "_id": "6671d8529ba14f9f260eed2b", + "userId": "666c9146c9bfa20db790b1df", + "name": "Google Monitor", + "description": "Google", + "type": "http", + "url": "https://www.google.com/404", + "isActive": true, + "interval": 10000, + "createdAt": "2024-06-18T18:56:18.555Z", + "updatedAt": "2024-06-18T18:56:18.555Z", + "__v": 0, + "checks": [ + { + "_id": "6671d8549ba14f9f260eed31", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 167, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:20.190Z", + "updatedAt": "2024-06-18T18:56:20.190Z", + "__v": 0 + }, + { + "_id": "6671d85e9ba14f9f260eed3e", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 228, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:30.279Z", + "updatedAt": "2024-06-18T18:56:30.279Z", + "__v": 0 + } + ] + }, + { + "_id": "6671d8619ba14f9f260eed4c", + "userId": "666c9146c9bfa20db790b1df", + "name": "Amazon Monitor", + "description": "Amazon website", + "type": "http", + "url": "https://www.amazon.com", + "isActive": true, + "interval": 15000, + "createdAt": "2024-06-18T18:56:49.419Z", + "updatedAt": "2024-06-18T18:56:49.419Z", + "__v": 0, + "checks": [ + { + "_id": "6671d8649ba14f9f260eed50", + "monitorId": "6671d8619ba14f9f260eed4c", + "status": true, + "responseTime": 158, + "statusCode": 200, + "createdAt": "2024-06-18T18:56:52.302Z", + "updatedAt": "2024-06-18T18:56:52.302Z", + "__v": 0 + }, + { + "_id": "6671d86e9ba14f9f260eed5a", + "monitorId": "6671d8619ba14f9f260eed4c", + "status": true, + "responseTime": 162, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:02.331Z", + "updatedAt": "2024-06-18T18:57:02.331Z", + "__v": 0 + }, + { + "_id": "6671d8779ba14f9f260eed64", + "monitorId": "6671d8619ba14f9f260eed4c", + "status": true, + "responseTime": 145, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:12.378Z", + "updatedAt": "2024-06-18T18:57:12.378Z", + "__v": 0 + } + ] + }, + { + "_id": "6671d8789ba14f9f260eed66", + "userId": "666c9146c9bfa20db790b1df", + "name": "Facebook Monitor", + "description": "Facebook website", + "type": "http", + "url": "https://www.facebook.com", + "isActive": true, + "interval": 20000, + "createdAt": "2024-06-18T18:57:12.798Z", + "updatedAt": "2024-06-18T18:57:12.798Z", + "__v": 0, + "checks": [ + { + "_id": "6671d87b9ba14f9f260eed6a", + "monitorId": "6671d8789ba14f9f260eed66", + "status": true, + "responseTime": 221, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:15.613Z", + "updatedAt": "2024-06-18T18:57:15.613Z", + "__v": 0 + }, + { + "_id": "6671d8859ba14f9f260eed74", + "monitorId": "6671d8789ba14f9f260eed66", + "status": true, + "responseTime": 234, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:25.655Z", + "updatedAt": "2024-06-18T18:57:25.655Z", + "__v": 0 + } + ] + } + ] +} \ No newline at end of file diff --git a/Client/src/Pages/Monitors/CurrentStats.jsx b/Client/src/Pages/Monitors/CurrentStats.jsx index b84f53620..39312c44d 100644 --- a/Client/src/Pages/Monitors/CurrentStats.jsx +++ b/Client/src/Pages/Monitors/CurrentStats.jsx @@ -6,10 +6,16 @@ import BarChart from "../../Components/Charts/BarChart/BarChart"; import Button from "../../Components/Button"; import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; import CurrentMonitors from "../../Components/CurrentMonitors"; +import MockData from "../../Mock/sample_data.json"; const hardCodedMonitors = [ { - host: Host("Discord", 100, "var(--env-var-color-17)"), + host: Host( + "Discord", + 100, + "var(--env-var-color-17)", + "https://www.google.com" + ), status: HostStatus( "var(--env-var-color-20)", "Up", @@ -19,7 +25,12 @@ const hardCodedMonitors = [ actions: HostActions(), }, { - host: Host("Google", 99.9, "var(--env-var-color-17)"), + host: Host( + "Google", + 99.9, + "var(--env-var-color-17)", + "https://www.google.com" + ), status: HostStatus( "var(--env-var-color-20)", "Up", @@ -29,7 +40,12 @@ const hardCodedMonitors = [ actions: HostActions(), }, { - host: Host("NBC", 98.1, "var(--env-var-color-18)"), + host: Host( + "NBC", + 98.1, + "var(--env-var-color-18)", + "https://www.google.com" + ), status: HostStatus( "var(--env-var-color-20)", "Up", @@ -39,7 +55,12 @@ const hardCodedMonitors = [ actions: HostActions(), }, { - host: Host("Google", 95.1, "var(--env-var-color-19)"), + host: Host( + "Google", + 95.1, + "var(--env-var-color-19)", + "https://www.google.com" + ), status: HostStatus( "var(--env-var-color-21)", "Down", @@ -49,7 +70,12 @@ const hardCodedMonitors = [ actions: HostActions(), }, { - host: Host("NBC", 99.9, "var(--env-var-color-17)"), + host: Host( + "NBC", + 99.9, + "var(--env-var-color-17)", + "https://www.google.com" + ), status: HostStatus( "var(--env-var-color-15)", "Cannot resolve", @@ -60,17 +86,39 @@ const hardCodedMonitors = [ }, ]; -const CurrentStats = () => { +const CurrentStats = (mockdata = true) => { // The hardcoded part is passed as default value for the purpose of demonstration. // Pass an empty array, [], before fetching the data const [monitors, setMonitors] = useState(hardCodedMonitors); useEffect(() => { - fetch("API_URL") - .then((response) => response.json()) - .then((data) => setMonitors(data)) - .catch((error) => console.error(error)); - }, []); + if (mockdata) { + console.log(MockData.data); + setMonitors( + MockData.data.map((item) => ({ + host: Host(item.name, 100, "var(--env-var-color-17)", item.url), + status: HostStatus( + item.isActive + ? "var(--env-var-color-20)" + : "var(--env-var-color-21)", + item.isActive ? "Up" : "Down", + item.isActive + ? "var(--env-var-color-17)" + : "var(--env-var-color-19)" + ), + team: , + actions: HostActions(), + })) + ); + } + }, [mockdata]); + + // useEffect(() => { + // fetch("API_URL") + // .then((response) => response.json()) + // .then((data) => setMonitors(data)) + // .catch((error) => console.error(error)); + // }, []); return (
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index 2d2ad87eb..a5778c488 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -17,7 +17,7 @@ .monitors-stats { display: flex; - justify-content: space-between; + gap: 24px; } .monitors-gaps-medium { diff --git a/Client/src/index.css b/Client/src/index.css index 76ad93989..1daa59475 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -40,6 +40,7 @@ --env-var-color-23: #17b26a; --env-var-color-24: #d92d20; --env-var-color-25: #667085; + --env-var-color-26: #ff1818; --env-var-radius-1: 4px; --env-var-radius-2: 8px; From 9940cf9ef5b77cef0c021902b28a374504be48cf Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Thu, 20 Jun 2024 13:16:35 +0330 Subject: [PATCH 04/11] Chart solved --- .../Components/Charts/BarChart/BarChart.jsx | 12 +- .../DashboardSettingsIcon/index.css | 4 +- .../DashboardSettingsIcon/index.jsx | 2 +- Client/src/Mock/sample_data.json | 417 +++++++++++++++--- Client/src/Pages/Monitors/CurrentStats.jsx | 2 +- 5 files changed, 363 insertions(+), 74 deletions(-) diff --git a/Client/src/Components/Charts/BarChart/BarChart.jsx b/Client/src/Components/Charts/BarChart/BarChart.jsx index dd2ba070c..af148f6fe 100644 --- a/Client/src/Components/Charts/BarChart/BarChart.jsx +++ b/Client/src/Components/Charts/BarChart/BarChart.jsx @@ -1,18 +1,14 @@ import React from "react"; import "./barChart.css"; -const BarChart = () => { - const data = Array.from({ length: 12 }, () => - Math.floor(Math.random() * 100) - ); - +const BarChart = ({ checks }) => { return (
- {data.map((value, index) => ( + {checks.map((value, index) => (
))}
diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/DashboardSettingsIcon/index.css index 1221e542f..95dc58176 100644 --- a/Client/src/Components/DashboardSettingsIcon/index.css +++ b/Client/src/Components/DashboardSettingsIcon/index.css @@ -1,10 +1,10 @@ -.dashboard-setting-menu-item { +#dashboard-setting-menu-item { width: 135px; padding: 6px; margin: 5px 12px; } -.dashboard-setting-menu-item:hover { +#dashboard-setting-menu-item:hover { color: var(--env-var-color-26); } diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/DashboardSettingsIcon/index.jsx index d2b9b97be..f01e65900 100644 --- a/Client/src/Components/DashboardSettingsIcon/index.jsx +++ b/Client/src/Components/DashboardSettingsIcon/index.jsx @@ -74,7 +74,7 @@ function DashboardSettings() { > {settings.map((setting) => ( diff --git a/Client/src/Mock/sample_data.json b/Client/src/Mock/sample_data.json index 3007cd498..f5a57982d 100644 --- a/Client/src/Mock/sample_data.json +++ b/Client/src/Mock/sample_data.json @@ -19,7 +19,52 @@ "_id": "6671d84a9ba14f9f260eed27", "monitorId": "6671d8469ba14f9f260eed23", "status": true, - "responseTime": 2, + "responseTime": 143, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 70, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, + { + "_id": "6671d8549ba14f9f260eed2d", + "monitorId": "6671d8469ba14f9f260eed23", + "status": false, + "responseTime": 120, + "createdAt": "2024-06-18T18:56:20.016Z", + "updatedAt": "2024-06-18T18:56:20.016Z", + "__v": 0 + }, + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 200, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, + { + "_id": "6671d8549ba14f9f260eed2d", + "monitorId": "6671d8469ba14f9f260eed23", + "status": false, + "responseTime": 250, + "createdAt": "2024-06-18T18:56:20.016Z", + "updatedAt": "2024-06-18T18:56:20.016Z", + "__v": 0 + }, + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": false, + "responseTime": 180, "createdAt": "2024-06-18T18:56:10.082Z", "updatedAt": "2024-06-18T18:56:10.082Z", "__v": 0 @@ -28,7 +73,25 @@ "_id": "6671d8549ba14f9f260eed2d", "monitorId": "6671d8469ba14f9f260eed23", "status": true, - "responseTime": 2, + "responseTime": 200, + "createdAt": "2024-06-18T18:56:20.016Z", + "updatedAt": "2024-06-18T18:56:20.016Z", + "__v": 0 + }, + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": false, + "responseTime": 100, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, + { + "_id": "6671d8549ba14f9f260eed2d", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 210, "createdAt": "2024-06-18T18:56:20.016Z", "updatedAt": "2024-06-18T18:56:20.016Z", "__v": 0 @@ -37,7 +100,7 @@ "_id": "6671d85e9ba14f9f260eed3c", "monitorId": "6671d8469ba14f9f260eed23", "status": true, - "responseTime": 2, + "responseTime": 200, "createdAt": "2024-06-18T18:56:30.050Z", "updatedAt": "2024-06-18T18:56:30.050Z", "__v": 0 @@ -57,27 +120,107 @@ "updatedAt": "2024-06-18T18:56:18.555Z", "__v": 0, "checks": [ - { - "_id": "6671d8549ba14f9f260eed31", - "monitorId": "6671d8529ba14f9f260eed2b", - "status": false, - "responseTime": 167, - "statusCode": 404, - "createdAt": "2024-06-18T18:56:20.190Z", - "updatedAt": "2024-06-18T18:56:20.190Z", - "__v": 0 - }, - { - "_id": "6671d85e9ba14f9f260eed3e", - "monitorId": "6671d8529ba14f9f260eed2b", - "status": false, - "responseTime": 228, - "statusCode": 404, - "createdAt": "2024-06-18T18:56:30.279Z", - "updatedAt": "2024-06-18T18:56:30.279Z", - "__v": 0 - } - ] + { + "_id": "6671d8549ba14f9f260eed31", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 167, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:20.190Z", + "updatedAt": "2024-06-18T18:56:20.190Z", + "__v": 0 + }, + { + "_id": "6671d85e9ba14f9f260eed3e", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 228, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:30.279Z", + "updatedAt": "2024-06-18T18:56:30.279Z", + "__v": 0 + }, + { + "_id": "6671d8669ba14f9f260eed47", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 112, + "statusCode": 200, + "createdAt": "2024-06-18T18:56:38.381Z", + "updatedAt": "2024-06-18T18:56:38.381Z", + "__v": 0 + }, + { + "_id": "6671d8809ba14f9f260eed6b", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 134, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:04.846Z", + "updatedAt": "2024-06-18T18:57:04.846Z", + "__v": 0 + }, + { + "_id": "6671d86d9ba14f9f260eed50", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 301, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:45.492Z", + "updatedAt": "2024-06-18T18:56:45.492Z", + "__v": 0 + }, + { + "_id": "6671d8739ba14f9f260eed59", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 84, + "statusCode": 200, + "createdAt": "2024-06-18T18:56:51.614Z", + "updatedAt": "2024-06-18T18:56:51.614Z", + "__v": 0 + }, + { + "_id": "6671d87a9ba14f9f260eed62", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 189, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:58.734Z", + "updatedAt": "2024-06-18T18:56:58.734Z", + "__v": 0 + }, + { + "_id": "6671d8809ba14f9f260eed6b", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 134, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:04.846Z", + "updatedAt": "2024-06-18T18:57:04.846Z", + "__v": 0 + }, + { + "_id": "6671d8549ba14f9f260eed31", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 167, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:20.190Z", + "updatedAt": "2024-06-18T18:56:20.190Z", + "__v": 0 + }, + { + "_id": "6671d8879ba14f9f260eed74", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 247, + "statusCode": 404, + "createdAt": "2024-06-18T18:57:11.958Z", + "updatedAt": "2024-06-18T18:57:11.958Z", + "__v": 0 + } + ] }, { "_id": "6671d8619ba14f9f260eed4c", @@ -93,33 +236,103 @@ "__v": 0, "checks": [ { - "_id": "6671d8649ba14f9f260eed50", - "monitorId": "6671d8619ba14f9f260eed4c", + "_id": "6671d8919ba14f9f260eed7d", + "monitorId": "6671d8529ba14f9f260eed2b", "status": true, - "responseTime": 158, + "responseTime": 92, "statusCode": 200, - "createdAt": "2024-06-18T18:56:52.302Z", - "updatedAt": "2024-06-18T18:56:52.302Z", + "createdAt": "2024-06-18T18:57:21.076Z", + "updatedAt": "2024-06-18T18:57:21.076Z", "__v": 0 }, { - "_id": "6671d86e9ba14f9f260eed5a", - "monitorId": "6671d8619ba14f9f260eed4c", - "status": true, - "responseTime": 162, - "statusCode": 200, - "createdAt": "2024-06-18T18:57:02.331Z", - "updatedAt": "2024-06-18T18:57:02.331Z", + "_id": "6671d8989ba14f9f260eed86", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 205, + "statusCode": 404, + "createdAt": "2024-06-18T18:57:28.188Z", + "updatedAt": "2024-06-18T18:57:28.188Z", "__v": 0 }, { - "_id": "6671d8779ba14f9f260eed64", - "monitorId": "6671d8619ba14f9f260eed4c", + "_id": "6671d89e9ba14f9f260eed8f", + "monitorId": "6671d8529ba14f9f260eed2b", "status": true, - "responseTime": 145, + "responseTime": 159, "statusCode": 200, - "createdAt": "2024-06-18T18:57:12.378Z", - "updatedAt": "2024-06-18T18:57:12.378Z", + "createdAt": "2024-06-18T18:57:34.300Z", + "updatedAt": "2024-06-18T18:57:34.300Z", + "__v": 0 + }, + { + "_id": "6671d8a59ba14f9f260eed98", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 271, + "statusCode": 404, + "createdAt": "2024-06-18T18:57:41.421Z", + "updatedAt": "2024-06-18T18:57:41.421Z", + "__v": 0 + }, + { + "_id": "6671d8ac9ba14f9f260eeda1", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 127, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:48.532Z", + "updatedAt": "2024-06-18T18:57:48.532Z", + "__v": 0 + }, + { + "_id": "6671d8b29ba14f9f260eedaa", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 193, + "statusCode": 404, + "createdAt": "2024-06-18T18:57:54.643Z", + "updatedAt": "2024-06-18T18:57:54.643Z", + "__v": 0 + }, + { + "_id": "6671d8b89ba14f9f260eedb3", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 104, + "statusCode": 200, + "createdAt": "2024-06-18T18:58:00.754Z", + "updatedAt": "2024-06-18T18:58:00.754Z", + "__v": 0 + }, + { + "_id": "6671d8bf9ba14f9f260eedbc", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 231, + "statusCode": 404, + "createdAt": "2024-06-18T18:58:07.865Z", + "updatedAt": "2024-06-18T18:58:07.865Z", + "__v": 0 + }, + { + "_id": "6671d8c59ba14f9f260eedc5", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 147, + "statusCode": 200, + "createdAt": "2024-06-18T18:58:13.977Z", + "updatedAt": "2024-06-18T18:58:13.977Z", + "__v": 0 + }, + { + "_id": "6671d8cc9ba14f9f260eedce", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 283, + "statusCode": 404, + "createdAt": "2024-06-18T18:58:20.088Z", + "updatedAt": "2024-06-18T18:58:20.088Z", "__v": 0 } ] @@ -137,27 +350,107 @@ "updatedAt": "2024-06-18T18:57:12.798Z", "__v": 0, "checks": [ - { - "_id": "6671d87b9ba14f9f260eed6a", - "monitorId": "6671d8789ba14f9f260eed66", - "status": true, - "responseTime": 221, - "statusCode": 200, - "createdAt": "2024-06-18T18:57:15.613Z", - "updatedAt": "2024-06-18T18:57:15.613Z", - "__v": 0 - }, - { - "_id": "6671d8859ba14f9f260eed74", - "monitorId": "6671d8789ba14f9f260eed66", - "status": true, - "responseTime": 234, - "statusCode": 200, - "createdAt": "2024-06-18T18:57:25.655Z", - "updatedAt": "2024-06-18T18:57:25.655Z", - "__v": 0 - } - ] + { + "_id": "6671d8d29ba14f9f260eedd7", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 81, + "statusCode": 200, + "createdAt": "2024-06-18T18:58:26.199Z", + "updatedAt": "2024-06-18T18:58:26.199Z", + "__v": 0 + }, + { + "_id": "6671d8d89ba14f9f260eede0", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 218, + "statusCode": 404, + "createdAt": "2024-06-18T18:58:32.311Z", + "updatedAt": "2024-06-18T18:58:32.311Z", + "__v": 0 + }, + { + "_id": "6671d8df9ba14f9f260eede9", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 138, + "statusCode": 200, + "createdAt": "2024-06-18T18:58:39.422Z", + "updatedAt": "2024-06-18T18:58:39.422Z", + "__v": 0 + }, + { + "_id": "6671d8e59ba14f9f260eedf2", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 257, + "statusCode": 404, + "createdAt": "2024-06-18T18:58:45.533Z", + "updatedAt": "2024-06-18T18:58:45.533Z", + "__v": 0 + }, + { + "_id": "6671d8eb9ba14f9f260eedfb", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 116, + "statusCode": 200, + "createdAt": "2024-06-18T18:58:51.644Z", + "updatedAt": "2024-06-18T18:58:51.644Z", + "__v": 0 + }, + { + "_id": "6671d8f19ba14f9f260eee04", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 184, + "statusCode": 404, + "createdAt": "2024-06-18T18:58:57.755Z", + "updatedAt": "2024-06-18T18:58:57.755Z", + "__v": 0 + }, + { + "_id": "6671d8f79ba14f9f260eee0d", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 97, + "statusCode": 200, + "createdAt": "2024-06-18T18:59:03.867Z", + "updatedAt": "2024-06-18T18:59:03.867Z", + "__v": 0 + }, + { + "_id": "6671d8fd9ba14f9f260eee16", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 240, + "statusCode": 404, + "createdAt": "2024-06-18T18:59:09.978Z", + "updatedAt": "2024-06-18T18:59:09.978Z", + "__v": 0 + }, + { + "_id": "6671d9039ba14f9f260eee1f", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 135, + "statusCode": 200, + "createdAt": "2024-06-18T18:59:16.089Z", + "updatedAt": "2024-06-18T18:59:16.089Z", + "__v": 0 + }, + { + "_id": "6671d9089ba14f9f260eee28", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 269, + "statusCode": 404, + "createdAt": "2024-06-18T18:59:22.200Z", + "updatedAt": "2024-06-18T18:59:22.200Z", + "__v": 0 + } +] } ] } \ No newline at end of file diff --git a/Client/src/Pages/Monitors/CurrentStats.jsx b/Client/src/Pages/Monitors/CurrentStats.jsx index 39312c44d..c27bbeef5 100644 --- a/Client/src/Pages/Monitors/CurrentStats.jsx +++ b/Client/src/Pages/Monitors/CurrentStats.jsx @@ -106,7 +106,7 @@ const CurrentStats = (mockdata = true) => { ? "var(--env-var-color-17)" : "var(--env-var-color-19)" ), - team: , + team: , actions: HostActions(), })) ); From d89e75da15514e8bd91d2cc5f8469ae821735834 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Thu, 20 Jun 2024 18:34:36 +0330 Subject: [PATCH 05/11] a small fix --- Client/src/Components/Charts/BarChart/BarChart.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/Charts/BarChart/BarChart.jsx b/Client/src/Components/Charts/BarChart/BarChart.jsx index af148f6fe..e424fef3e 100644 --- a/Client/src/Components/Charts/BarChart/BarChart.jsx +++ b/Client/src/Components/Charts/BarChart/BarChart.jsx @@ -1,7 +1,8 @@ import React from "react"; import "./barChart.css"; +import PropTypes from "prop-types"; -const BarChart = ({ checks }) => { +const BarChart = ({ checks = [] }) => { return (
{checks.map((value, index) => ( @@ -15,4 +16,8 @@ const BarChart = ({ checks }) => { ); }; +BarChart.propTypes = { + checks: PropTypes.array, +}; + export default BarChart; From 486547f6886992ad92275e2907c1914af955a99a Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Thu, 20 Jun 2024 19:53:08 +0330 Subject: [PATCH 06/11] progress on Create New Monitor page --- Client/src/Components/RadioButton/index.jsx | 52 +++++++++++++++++++ .../src/Pages/Monitors/CreateNewMonitor.jsx | 20 +++++++ Client/src/Pages/Monitors/index.css | 10 ++++ Client/src/Pages/Monitors/index.jsx | 6 ++- 4 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 Client/src/Components/RadioButton/index.jsx diff --git a/Client/src/Components/RadioButton/index.jsx b/Client/src/Components/RadioButton/index.jsx new file mode 100644 index 000000000..038871647 --- /dev/null +++ b/Client/src/Components/RadioButton/index.jsx @@ -0,0 +1,52 @@ +/** + * RadioButton component. + * + * @component + * @example + * // Usage: + * + * + * @param {Object} props - The component props. + * @param {string} props.title - The title of the radio button. + * @param {string} [props.desc] - The description of the radio button. + * @param {string} [props.size="small"] - The size of the radio button. + * @returns {JSX.Element} - The rendered RadioButton component. + */ + +import { FormControlLabel, Radio } from "@mui/material"; +import React from "react"; +import PropTypes from "prop-types"; + +function RadioButton(props) { + return ( +
+ } + label={ +
+
{props.title}
+
{props.desc}
+
+ } + labelPlacement="end" + /> +
+ ); +} + +RadioButton.propTypes = { + title: PropTypes.string.isRequired, + desc: PropTypes.string, + size: PropTypes.string, +}; + +RadioButton.defaultProps = { + size: "small", +}; + +export default RadioButton; diff --git a/Client/src/Pages/Monitors/CreateNewMonitor.jsx b/Client/src/Pages/Monitors/CreateNewMonitor.jsx index 43c853748..1c927ffdf 100644 --- a/Client/src/Pages/Monitors/CreateNewMonitor.jsx +++ b/Client/src/Pages/Monitors/CreateNewMonitor.jsx @@ -2,6 +2,7 @@ import ConfigBox from "../../Components/ConfigBox"; import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField"; import "./index.css"; import React from "react"; +import RadioButton from "../../Components/RadioButton"; const CreateNewMonitor = () => { return ( @@ -47,6 +48,25 @@ const CreateNewMonitor = () => {
} + rightLayout={ +
+ +
+ +
+ +
+
+ } />
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index a5778c488..eef1c33d5 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -29,3 +29,13 @@ font-size: var(--env-var-font-size-large-plus); font-weight: 600; } + +.service-check-list-title { + color: var(--env-var-color-5); + font-size: var(--env-var-font-size-medium); +} + +.service-check-list-desc { + color: var(--env-var-color-25); + font-size: var(--env-var-font-size-small); +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 153ac852c..fbc0413d0 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,11 +1,13 @@ -import CurrentStats from "./CurrentStats"; +import CreateNewMonitor from "./CreateNewMonitor"; +// import CurrentStats from "./CurrentStats"; import "./index.css"; import React from "react"; const Monitors = () => { return (
- + {/* */} +
); }; From 27dd65ccfae76c881ffce2777fcb37f8e9fd2fac Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Thu, 20 Jun 2024 21:47:07 +0330 Subject: [PATCH 07/11] hardcode removed --- Client/src/Mock/sample_data.json | 78 +++++++++++++++++++++ Client/src/Pages/Monitors/CurrentStats.jsx | 80 +--------------------- Client/src/Pages/Monitors/index.jsx | 8 +-- 3 files changed, 83 insertions(+), 83 deletions(-) diff --git a/Client/src/Mock/sample_data.json b/Client/src/Mock/sample_data.json index f5a57982d..b391f4678 100644 --- a/Client/src/Mock/sample_data.json +++ b/Client/src/Mock/sample_data.json @@ -15,6 +15,24 @@ "updatedAt": "2024-06-18T18:56:06.212Z", "__v": 0, "checks": [ + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 143, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, + { + "_id": "6671d84a9ba14f9f260eed27", + "monitorId": "6671d8469ba14f9f260eed23", + "status": true, + "responseTime": 70, + "createdAt": "2024-06-18T18:56:10.082Z", + "updatedAt": "2024-06-18T18:56:10.082Z", + "__v": 0 + }, { "_id": "6671d84a9ba14f9f260eed27", "monitorId": "6671d8469ba14f9f260eed23", @@ -210,6 +228,26 @@ "updatedAt": "2024-06-18T18:56:20.190Z", "__v": 0 }, + { + "_id": "6671d85e9ba14f9f260eed3e", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 228, + "statusCode": 404, + "createdAt": "2024-06-18T18:56:30.279Z", + "updatedAt": "2024-06-18T18:56:30.279Z", + "__v": 0 + }, + { + "_id": "6671d8669ba14f9f260eed47", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 112, + "statusCode": 200, + "createdAt": "2024-06-18T18:56:38.381Z", + "updatedAt": "2024-06-18T18:56:38.381Z", + "__v": 0 + }, { "_id": "6671d8879ba14f9f260eed74", "monitorId": "6671d8529ba14f9f260eed2b", @@ -285,6 +323,26 @@ "updatedAt": "2024-06-18T18:57:48.532Z", "__v": 0 }, + { + "_id": "6671d8a59ba14f9f260eed98", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 271, + "statusCode": 404, + "createdAt": "2024-06-18T18:57:41.421Z", + "updatedAt": "2024-06-18T18:57:41.421Z", + "__v": 0 + }, + { + "_id": "6671d8ac9ba14f9f260eeda1", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 127, + "statusCode": 200, + "createdAt": "2024-06-18T18:57:48.532Z", + "updatedAt": "2024-06-18T18:57:48.532Z", + "__v": 0 + }, { "_id": "6671d8b29ba14f9f260eedaa", "monitorId": "6671d8529ba14f9f260eed2b", @@ -440,6 +498,26 @@ "updatedAt": "2024-06-18T18:59:16.089Z", "__v": 0 }, + { + "_id": "6671d8d89ba14f9f260eede0", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": false, + "responseTime": 218, + "statusCode": 404, + "createdAt": "2024-06-18T18:58:32.311Z", + "updatedAt": "2024-06-18T18:58:32.311Z", + "__v": 0 + }, + { + "_id": "6671d8df9ba14f9f260eede9", + "monitorId": "6671d8529ba14f9f260eed2b", + "status": true, + "responseTime": 138, + "statusCode": 200, + "createdAt": "2024-06-18T18:58:39.422Z", + "updatedAt": "2024-06-18T18:58:39.422Z", + "__v": 0 + }, { "_id": "6671d9089ba14f9f260eee28", "monitorId": "6671d8529ba14f9f260eed2b", diff --git a/Client/src/Pages/Monitors/CurrentStats.jsx b/Client/src/Pages/Monitors/CurrentStats.jsx index c27bbeef5..de15d953c 100644 --- a/Client/src/Pages/Monitors/CurrentStats.jsx +++ b/Client/src/Pages/Monitors/CurrentStats.jsx @@ -8,88 +8,10 @@ import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; import CurrentMonitors from "../../Components/CurrentMonitors"; import MockData from "../../Mock/sample_data.json"; -const hardCodedMonitors = [ - { - host: Host( - "Discord", - 100, - "var(--env-var-color-17)", - "https://www.google.com" - ), - status: HostStatus( - "var(--env-var-color-20)", - "Up", - "var(--env-var-color-17)" - ), - team: , - actions: HostActions(), - }, - { - host: Host( - "Google", - 99.9, - "var(--env-var-color-17)", - "https://www.google.com" - ), - status: HostStatus( - "var(--env-var-color-20)", - "Up", - "var(--env-var-color-17)" - ), - team: , - actions: HostActions(), - }, - { - host: Host( - "NBC", - 98.1, - "var(--env-var-color-18)", - "https://www.google.com" - ), - status: HostStatus( - "var(--env-var-color-20)", - "Up", - "var(--env-var-color-17)" - ), - team: , - actions: HostActions(), - }, - { - host: Host( - "Google", - 95.1, - "var(--env-var-color-19)", - "https://www.google.com" - ), - status: HostStatus( - "var(--env-var-color-21)", - "Down", - "var(--env-var-color-19)" - ), - team: , - actions: HostActions(), - }, - { - host: Host( - "NBC", - 99.9, - "var(--env-var-color-17)", - "https://www.google.com" - ), - status: HostStatus( - "var(--env-var-color-15)", - "Cannot resolve", - "var(--env-var-color-22)" - ), - team: , - actions: HostActions(), - }, -]; - const CurrentStats = (mockdata = true) => { // The hardcoded part is passed as default value for the purpose of demonstration. // Pass an empty array, [], before fetching the data - const [monitors, setMonitors] = useState(hardCodedMonitors); + const [monitors, setMonitors] = useState([]); useEffect(() => { if (mockdata) { diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index fbc0413d0..a1dd61f0c 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,13 +1,13 @@ -import CreateNewMonitor from "./CreateNewMonitor"; -// import CurrentStats from "./CurrentStats"; +// import CreateNewMonitor from "./CreateNewMonitor"; +import CurrentStats from "./CurrentStats"; import "./index.css"; import React from "react"; const Monitors = () => { return (
- {/* */} - + + {/* */}
); }; From 2ce8de530439c3ec480235d094237c17abe556ee Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 20 Jun 2024 13:50:31 -0700 Subject: [PATCH 08/11] Implemented async thunk for getMonitorsByUserId --- Client/src/Features/Monitors/monitorsSlice.js | 35 ++++++++++++++++++- Client/src/Pages/Demo/Demo.jsx | 13 +++---- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/Client/src/Features/Monitors/monitorsSlice.js b/Client/src/Features/Monitors/monitorsSlice.js index 2f4fe0f3b..c025b02c2 100644 --- a/Client/src/Features/Monitors/monitorsSlice.js +++ b/Client/src/Features/Monitors/monitorsSlice.js @@ -22,13 +22,28 @@ export const getMonitors = createAsyncThunk( } ); +export const getMonitorsByUserId = createAsyncThunk( + "montiors/getMonitorsByUserId", + async (token, thunkApi) => { + try { + // TODO get userId and make request + console.log(token); + } catch (error) { + return thunkApi.rejectWithValue(error.response.data); + } + } +); + const monitorsSlice = createSlice({ name: "monitors", initialState, reducers: {}, extraReducers: (builder) => { builder - .addCase(getMonitors.pending, (state, action) => { + // ***************************************************** + // All Monitors + // ***************************************************** + .addCase(getMonitors.pending, (state) => { state.isLoading = true; }) .addCase(getMonitors.fulfilled, (state, action) => { @@ -42,6 +57,24 @@ const monitorsSlice = createSlice({ state.isLoading = false; state.success = action.payload.success; state.msg = action.payload.msg; + }) + // ***************************************************** + // Monitors by userId + // ***************************************************** + + .addCase(getMonitorsByUserId.pending, (state) => { + state.isLoading = true; + }) + .addCase(getMonitorsByUserId.fulfilled, (state, action) => { + state.isLoading = false; + state.success = action.payload.msg; + console.log(action.payload); + state.monitors = action.payload.data; + }) + .addCase(getMonitorsByUserId.rejected, (state, action) => { + state.isLoading = false; + state.success = action.payload.success; + state.msg = action.payload.msg; }); }, }); diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index ef6747026..8b976a0ba 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -27,13 +27,14 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import AddIcon from "@mui/icons-material/Add"; import Divider from "@mui/material/Divider"; -import UploadIcon from '@mui/icons-material/Upload'; -import SendIcon from '@mui/icons-material/Send'; +import UploadIcon from "@mui/icons-material/Upload"; +import SendIcon from "@mui/icons-material/Send"; // Redux import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; import { getMonitors } from "../../Features/Monitors/monitorsSlice"; +import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice"; const cols = [ { @@ -226,7 +227,7 @@ const Demo = () => { level="primary" label="Get Monitors" onClick={() => { - dispatch(getMonitors()); + dispatch(getMonitorsByUserId("User ID Here")); }} />
@@ -393,7 +394,7 @@ const Demo = () => { level="primary" label="Upload" position="start" - img={} + img={} onClick={handleButtonSpinnerClick} isLoading={isLoading} /> @@ -401,11 +402,11 @@ const Demo = () => { level="secondary" label="Send" position="end" - img={} + img={} onClick={handleButtonSpinnerClick} isLoading={isLoading} /> - Date: Thu, 20 Jun 2024 14:07:33 -0700 Subject: [PATCH 09/11] Added and configured redux-persist --- Client/package-lock.json | 12 +++++++++++- Client/package.json | 3 ++- Client/src/main.jsx | 15 +++++++++------ Client/src/store.js | 32 +++++++++++++++++++++++++++++--- 4 files changed, 51 insertions(+), 11 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index 3a7eba0ef..442f79f7a 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -27,7 +27,8 @@ "react-redux": "9.1.2", "react-router": "^6.23.0", "react-router-dom": "^6.23.1", - "react-toastify": "^10.0.5" + "react-toastify": "^10.0.5", + "redux-persist": "6.0.0" }, "devDependencies": { "@types/react": "^18.2.66", @@ -4745,6 +4746,15 @@ "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" }, + "node_modules/redux-persist": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz", + "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==", + "license": "MIT", + "peerDependencies": { + "redux": ">4.0.0" + } + }, "node_modules/redux-thunk": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", diff --git a/Client/package.json b/Client/package.json index 72b5ba5bc..d23c3402b 100644 --- a/Client/package.json +++ b/Client/package.json @@ -29,7 +29,8 @@ "react-redux": "9.1.2", "react-router": "^6.23.0", "react-router-dom": "^6.23.1", - "react-toastify": "^10.0.5" + "react-toastify": "^10.0.5", + "redux-persist": "6.0.0" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/Client/src/main.jsx b/Client/src/main.jsx index 1955bdd29..601dab68d 100644 --- a/Client/src/main.jsx +++ b/Client/src/main.jsx @@ -6,16 +6,19 @@ import { BrowserRouter as Router, HashRouter } from "react-router-dom"; import theme from "./Utils/Theme.js"; import { ThemeProvider } from "@mui/material"; import { Provider } from "react-redux"; -import store from "./store"; +import { persistor, store } from "./store"; +import { PersistGate } from "redux-persist/integration/react"; ReactDOM.createRoot(document.getElementById("root")).render( - - - - - + + + + + + + ); diff --git a/Client/src/store.js b/Client/src/store.js index 385448c6e..300408a00 100644 --- a/Client/src/store.js +++ b/Client/src/store.js @@ -1,7 +1,33 @@ -import { configureStore } from "@reduxjs/toolkit"; +import { configureStore, combineReducers } from "@reduxjs/toolkit"; import monitorsReducer from "./Features/Monitors/monitorsSlice"; import authReducer from "./Features/Auth/authSlice"; +import storage from "redux-persist/lib/storage"; +import { persistReducer, persistStore } from "redux-persist"; -export default configureStore({ - reducer: { monitors: monitorsReducer, auth: authReducer }, +const persistConfig = { + key: "root", + storage, +}; + +const rootReducer = combineReducers({ + monitors: monitorsReducer, + auth: authReducer, }); + +const persistedReducer = persistReducer(persistConfig, rootReducer); + +export const store = configureStore({ + reducer: persistedReducer, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware({ + serializableCheck: { + ignoredActions: [ + "persist/PERSIST", + "persist/REHYDRATE", + "persist/REGISTER", + ], + }, + }), +}); + +export const persistor = persistStore(store); From 0b88dbfae20f316c9ad514bbefe9f4a5dd9aec79 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 20 Jun 2024 15:08:41 -0700 Subject: [PATCH 10/11] Added whitelist --- Client/src/store.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Client/src/store.js b/Client/src/store.js index 300408a00..54201761e 100644 --- a/Client/src/store.js +++ b/Client/src/store.js @@ -7,6 +7,7 @@ import { persistReducer, persistStore } from "redux-persist"; const persistConfig = { key: "root", storage, + whitielist: ["auth", "monitors"], }; const rootReducer = combineReducers({ From 17294afd4b57be46370e821b2058be06793f2bf9 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 21 Jun 2024 13:18:42 -0400 Subject: [PATCH 11/11] Changed color variables to resolve merge conflict --- Client/src/Pages/Settings/index.css | 12 ++++++------ Client/src/index.css | 13 +++++++------ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css index ebf065a7e..0b525bbac 100644 --- a/Client/src/Pages/Settings/index.css +++ b/Client/src/Pages/Settings/index.css @@ -45,7 +45,7 @@ } .edit-team-form__wrapper.compact { margin-top: 30px; - color: var(--env-var-color-16); + color: var(--env-var-color-29); } .edit-profile-form__wrapper input, .edit-password-form__wrapper input, @@ -70,13 +70,13 @@ margin-left: auto; } .MuiBox-root > .announcement-tile { - border-color: var(--env-var-color-14); - background-color: var(--lighter-env-var-color-14); + border-color: var(--env-var-color-27); + background-color: var(--lighter-env-var-color-27); } .MuiBox-root > .announcement-tile .announcement-content-body, .MuiBox-root > .announcement-tile .announcement-close svg { - color: var(--env-var-color-15); - fill: var(--env-var-color-15) !important; + color: var(--env-var-color-28); + fill: var(--env-var-color-28) !important; } #org-name-flex-container .Mui-disabled { @@ -96,7 +96,7 @@ } .edit-team-form__wrapper td { font-size: (--env-var-font-size-medium); - color: var(--env-var-color-16); + color: var(--env-var-color-29); } #select-actions, diff --git a/Client/src/index.css b/Client/src/index.css index dc1b6188d..88972486e 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -3,9 +3,9 @@ line-height: 1.5; font-weight: 400; - /* color-scheme: light dark; + color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; */ + background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; @@ -28,10 +28,11 @@ --env-var-color-11: #5d6b98; --env-var-color-12: #182230; --env-var-color-13: #f9fafb; - --env-var-color-14: #fecf60; - --lighter-env-var-color-14: rgba(254, 207, 96, 0.1); - --env-var-color-15: #f79009; - --env-var-color-16: #667085; + + --env-var-color-27: #fecf60; + --lighter-env-var-color-27: rgba(254, 207, 96, 0.1); + --env-var-color-28: #f79009; + --env-var-color-29: #667085; --env-var-radius-1: 4px; --env-var-radius-2: 8px;