From f5bfb738b06f30e61a4ccf12ac7686dea829f00d Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Thu, 13 Jun 2024 10:44:16 +0330 Subject: [PATCH] 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