TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Monitors:hosts, with some bugs and challenges to fix

Browse Source
This commit is contained in:
MuhammadKhalilzadeh committed 2024-06-13 10:44:16 +03:30
1 parent 7bd4ce9e6a
commit f5bfb738b0
19 files changed
+422 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/package-lock.json
Generated
+17 -1
View File
@@ -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",
Client/package.json
+1
View File
@@ -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",
Client/src/Components/Charts/BarChart/BarChart.jsx
+22
View File
@@ -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 (
<div className="bar-chart">
{data.map((value, index) => (
<div
key={index}
className={`bar ${index < 6 ? "green" : "red"}`}
style={{ height: `${value}%` }}
/>
))}
</div>
);
};
export default BarChart;
Client/src/Components/Charts/BarChart/barChart.css
+20
View File
@@ -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);
}
Client/src/Components/CurrentMonitors/index.css
+103 -1
View File
@@ -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;
}
Client/src/Components/CurrentMonitors/index.jsx
+10 -1
View File
@@ -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 = () => {
<div className="current-monitors-title">Current monitors</div>
<div className="current-monitors-counter">5</div>
</div>
<div className="current-monitors-search-bar"></div>
<div className="current-monitors-search-bar">
<SearchTextField />
</div>
</div>
<div className="monitors-v-gaping"></div>
<HostsTable />
<div className="monitors-v-gaping"></div>
<Pagination />
</div>
);
};
Client/src/Components/Host/index.jsx
+16
View File
@@ -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 (
<div className="host-list-item">
<img className="host-list-item-open" src={OpenIt} alt="OpenIt" />
<div className="host-list-item-name">{title}</div>
<div className="host-list-item-precentage" style={{ color: statusColor }}>
{precentage}%
</div>
</div>
);
}
export default Host;
Client/src/Components/HostActions/index.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from "react";
import Actions from "../../assets/Images/Icon-setting-actions-gray.png";
function HostActions() {
return <img className="host-actions" src={Actions} alt="Actions" />;
}
export default HostActions;
Client/src/Components/HostStatus/index.jsx
+18
View File
@@ -0,0 +1,18 @@
import React from "react";
function HostStatus(backgroundColor, status, dotColor) {
return (
<div
className="host-status-box"
style={{ backgroundColor: backgroundColor }}
>
<div
className="host-status-box-circle"
style={{ backgroundColor: dotColor }}
></div>
<div className="host-status-box-text">{status}</div>
</div>
);
}
export default HostStatus;
Client/src/Components/HostsTable/index.jsx
+106
View File
@@ -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 (
<div className="current-monitors-table-holder">
<table className="current-monitors-table">
<thead>
<tr className="theader-row">
<td className="theader-row-cell">Host</td>
<td className="theader-row-cell">Status</td>
<td className="theader-row-cell">Team</td>
<td className="theader-row-cell">Actions</td>
</tr>
</thead>
<tbody>
<tr className="tbody-row">
<td className="tbody-row-cell">
{Host("Discord", 100, "var(--env-var-color-17)")}
</td>
<td className="tbody-row-cell">
{HostStatus(
"var(--env-var-color-20)",
"Up",
"var(--env-var-color-17)"
)}
</td>
<td className="tbody-row-cell">
<BarChart />
</td>
<td className="tbody-row-cell actions-cell">{HostActions()}</td>
</tr>
<tr className="tbody-row">
<td className="tbody-row-cell">
{Host("Google", 99.9, "var(--env-var-color-17)")}
</td>
<td className="tbody-row-cell">
{HostStatus(
"var(--env-var-color-20)",
"Up",
"var(--env-var-color-17)"
)}
</td>
<td className="tbody-row-cell">
<BarChart />
</td>
<td className="tbody-row-cell actions-cell">{HostActions()}</td>
</tr>
<tr className="tbody-row">
<td className="tbody-row-cell">
{Host("NBC", 98.1, "var(--env-var-color-18)")}
</td>
<td className="tbody-row-cell">
{HostStatus(
"var(--env-var-color-20)",
"Up",
"var(--env-var-color-17)"
)}
</td>
<td className="tbody-row-cell">
<BarChart />
</td>
<td className="tbody-row-cell actions-cell">{HostActions()}</td>
</tr>
<tr className="tbody-row">
<td className="tbody-row-cell">
{Host("Google", 95.1, "var(--env-var-color-19)")}
</td>
<td className="tbody-row-cell">
{HostStatus(
"var(--env-var-color-21)",
"Down",
"var(--env-var-color-19)"
)}
</td>
<td className="tbody-row-cell">
<BarChart />
</td>
<td className="tbody-row-cell actions-cell">{HostActions()}</td>
</tr>
<tr className="tbody-row">
<td className="tbody-row-cell">
{Host("NBC", 99.9, "var(--env-var-color-17)")}
</td>
<td className="tbody-row-cell">
{HostStatus(
"var(--env-var-color-15)",
"Cannot resolve",
"var(--env-var-color-22)"
)}
</td>
<td className="tbody-row-cell">
<BarChart />
</td>
<td className="tbody-row-cell actions-cell">{HostActions()}</td>
</tr>
</tbody>
</table>
</div>
);
}
export default HostsTable;
Client/src/Components/Pagination/index.css
+33
View File
@@ -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";
}
}
}
}
}
Client/src/Components/Pagination/index.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
import { Pagination as MuiPagination } from "@mui/material";
import "./index.css";
const Pagination = () => {
return (
<div className="pagination-holder">
<MuiPagination count={10} variant="outlined" shape="rounded" />
</div>
);
};
export default Pagination;
Client/src/Components/TextFields/Search/SearchTextField.jsx
+14
View File
@@ -0,0 +1,14 @@
import "./searchTextField.css";
import React from "react";
import Search from "../../../assets/Images/Icon-search-gray.png";
const SearchTextField = () => {
return (
<div className="search-field-holder">
<img className="search-field-icon" src={Search} alt="Search" />
<input className="search-field" type="text" placeholder="Search" />
</div>
);
};
export default SearchTextField;
Client/src/Components/TextFields/Search/searchTextField.css
+26
View File
@@ -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);
}
Client/src/Pages/Monitors/index.jsx
+2
View File
@@ -7,6 +7,8 @@ import React from "react";
const Monitors = () => {
return (
<div className="monitors">
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-bar">
<div className="monitors-bar-title">Hello, Jackie</div>
<Button
Client/src/assets/Images/Icon-open-in-tab-gray.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 B

Client/src/assets/Images/Icon-search-gray.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 B

Client/src/assets/Images/Icon-setting-actions-gray.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 761 B

Client/src/index.css
+13
View File
@@ -28,6 +28,17 @@
--env-var-color-11: #5d6b98;
--env-var-color-12: #182230;
--env-var-color-13: #f9fafb;
--env-var-color-14: #98a2b3;
--env-var-color-15: #f2f4f7;
--env-var-color-16: #ebebeb;
--env-var-color-17: #079455;
--env-var-color-18: #ffc301;
--env-var-color-19: #f04438;
--env-var-color-20: #ecfdf3;
--env-var-color-21: hsla(0, 100%, 52%, 0.06);
--env-var-color-22: #4e5ba6;
--env-var-color-23: #17b26a;
--env-var-color-24: #d92d20;
--env-var-radius-1: 4px;
--env-var-radius-2: 8px;
@@ -49,6 +60,8 @@
--env-var-font-size-xlarge: 30px;
--env-var-img-width-1: 20px;
--env-var-img-width-2: 16px;
--env-var-img-width-3: 12px;
--env-var-default-1: 24px;
--env-var-default-2: 40px;