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

back to hosts table from new monitor

Browse Source
This commit is contained in:
MuhammadKhalilzadeh committed 2024-06-18 22:39:58 +03:30
1 parent 3e8f8bc5ee
commit 3f2fe8b084
13 files changed
+286 -112
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/ConfigBox/index.css
+24
View File
@@ -0,0 +1,24 @@
.config-box {
display: flex;
padding: 30px 40px;
border: 1px solid var(--env-var-color-16);
border-radius: var(--env-var-radius-1);
justify-content: space-between;
padding-bottom: 50px;
}
.config-box-desc {
width: 35%;
}
.config-box-desc-title {
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-large);
font-weight: 700;
margin-bottom: var(--env-var-spacing-1);
}
.config-box-desc-text {
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-medium);
}
Client/src/Components/ConfigBox/index.jsx
+13
View File
@@ -0,0 +1,13 @@
import "./index.css";
import React from "react";
const ConfigBox = ({ leftLayout, rightLayout }) => {
return (
<div className="config-box">
{leftLayout}
{rightLayout}
</div>
);
};
export default ConfigBox;
Client/src/Components/CurrentMonitors/index.css
+1 -1
View File
@@ -23,7 +23,7 @@
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: 1px solid var(--env-var-color-6);
border-radius: 50%;
text-align: center;
align-items: center;
Client/src/Components/CurrentMonitors/index.jsx
+2 -2
View File
@@ -4,7 +4,7 @@ import React from "react";
import HostsTable from "../HostsTable";
import Pagination from "../Pagination";
const CurrentMonitors = () => {
const CurrentMonitors = ({ monitors }) => {
return (
<div className="current-monitors">
<div className="current-monitors-bar">
@@ -17,7 +17,7 @@ const CurrentMonitors = () => {
</div>
</div>
<div className="monitors-v-gaping"></div>
<HostsTable />
<HostsTable monitors={monitors} />
<div className="monitors-v-gaping"></div>
<Pagination />
</div>
Client/src/Components/HostsTable/index.jsx
+10 -86
View File
@@ -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 (
<div className="current-monitors-table-holder">
<table className="current-monitors-table">
@@ -17,90 +13,18 @@ function HostsTable() {
</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>
{monitors.map((monitor, index) => (
<tr className="tbody-row" key={index}>
<td className="tbody-row-cell">{monitor.host}</td>
<td className="tbody-row-cell">{monitor.status}</td>
<td className="tbody-row-cell">{monitor.team}</td>
<td className="tbody-row-cell actions-cell">{monitor.actions}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
};
export default HostsTable;
Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx
+17
View File
@@ -0,0 +1,17 @@
import "./flexibileTextField.css";
import React from "react";
const FlexibileTextField = ({ title, type, placeholder }) => {
return (
<div className="flexibile-textfield">
<div className="flexibile-textfield-title">{title}</div>
<input
type={type}
className="flexibile-textfield-input"
placeholder={placeholder}
/>
</div>
);
};
export default FlexibileTextField;
Client/src/Components/TextFields/Flexibile/flexibileTextField.css
+22
View File
@@ -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);
}
Client/src/Components/TextFields/Search/searchTextField.css
+1 -1
View File
@@ -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 {