mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-21 00:59:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

initial refactor

Browse Source
This commit is contained in:
Alex Holliday
2024-07-04 14:09:17 -07:00
parent 6509043b1f
commit c0dc50ef56
5 changed files with 57 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Client/src/Components/CurrentMonitors/index.jsx
View File

@@ -1,38 +0,0 @@
import SearchTextField from "../TextFields/Search/SearchTextField";
import "./index.css";
import HostsTable from "../HostsTable";
import Pagination from "../Pagination";
import PropTypes from "prop-types";
/**
* CurrentMonitors displays the current status of monitor
*
* @component
* @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
*/
const CurrentMonitors = ({ monitors }) => {
return (
<div className="current-monitors">
<div className="current-monitors-bar">
<div className="current-monitors-title-holder">
<div className="current-monitors-title">Current monitors</div>
<div className="current-monitors-counter">{monitors.length}</div>
</div>
<div className="current-monitors-search-bar">
<SearchTextField />
</div>
</div>
<div className="monitors-v-gaping"></div>
<HostsTable monitors={monitors} />
<div className="monitors-v-gaping"></div>
<Pagination />
</div>
);
};
CurrentMonitors.propTypes = {
monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default CurrentMonitors;

65
Client/src/Pages/Monitors/CurrentStats.jsx
View File

@@ -1,65 +0,0 @@
import Button from "../../Components/Button";
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
import CurrentMonitors from "../../Components/CurrentMonitors";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
/**
* CurrentStats displays the current status of monitor
*
* @component
* @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
*/
const CurrentStats = ({ monitors }) => {
const navigate = useNavigate();
const authState = useSelector((state) => state.auth);
const up = monitors.reduce((acc, cur) => {
if (cur.checks.length > 0) {
return cur.checks[cur.checks.length - 1].status === true ? acc + 1 : acc;
}
return 0;
}, 0);
const down = monitors.reduce((acc, cur) => {
if (cur.checks.length > 0) {
return cur.checks[cur.checks.length - 1].status === false ? acc + 1 : acc;
}
return 0;
}, 0);
return (
<div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-bar">
<div className="monitors-bar-title">
Hello, {authState.user.firstname}
</div>
<Button
level="primary"
label="Create new monitor"
onClick={() => {
navigate("/monitors/create");
}}
sx={{ padding: "10px 20px", fontSize: "13px" }}
/>
</div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-stats">
<ServerStatus title="Up" value={up} state="up" />
<ServerStatus title="Down" value={down} state="down" />
<ServerStatus title="Paused" value={0} state="pause" />
</div>
<div className="monitors-gaps-medium"></div>
<CurrentMonitors monitors={monitors} />
</div>
);
};
CurrentStats.propTypes = {
monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default CurrentStats;

2
Client/src/Pages/Monitors/index.css
View File

@@ -9,6 +9,7 @@
}
.monitors-bar {
margin-top: calc(2 * var(--env-var-spacing-2));
display: flex;
justify-content: space-between;
align-items: center;
@@ -20,6 +21,7 @@
}
.monitors-stats {
margin-top: var(--env-var-spacing-2);
display: flex;
gap: 24px;
}

61
Client/src/Pages/Monitors/index.jsx
View File

@@ -1,22 +1,69 @@
import CurrentStats from "./CurrentStats";
import "./index.css";
import "./monitors.css";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
import { useNavigate } from "react-router-dom";
import Button from "../../Components/Button";
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
import SearchTextField from "../../Components/TextFields/Search/SearchTextField";
import HostsTable from "../../Components/HostsTable";
import Pagination from "../../Components/Pagination";
const Monitors = () => {
const navigate = useNavigate();
const monitorState = useSelector((state) => state.monitors);
const authstate = useSelector((state) => state.auth);
const authState = useSelector((state) => state.auth);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getMonitorsByUserId(authstate.authToken));
dispatch(getMonitorsByUserId(authState.authToken));
}, []);
const up = monitorState.monitors.reduce((acc, cur) => {
return cur.status === true ? acc + 1 : acc;
}, 0);
const down = monitorState.monitors.length - up;
return (
<div className="monitors">
<CurrentStats monitors={monitorState.monitors} />
<div className="monitors-bar">
<div className="monitors-bar-title">
Hello, {authState.user.firstname}
</div>
<Button
level="primary"
label="Create new monitor"
onClick={() => {
navigate("/monitors/create");
}}
sx={{ padding: "10px 20px", fontSize: "13px" }}
/>
</div>
<div className="monitors-stats">
<ServerStatus title="Up" value={up} state="up" />
<ServerStatus title="Down" value={down} state="down" />
<ServerStatus title="Paused" value={0} state="pause" />
</div>
<div className="current-monitors">
<div className="current-monitors-bar">
<div className="current-monitors-title-holder">
<div className="current-monitors-title">Current monitors</div>
<div className="current-monitors-counter">
{monitorState.monitors.length}
</div>
</div>
<div className="current-monitors-search-bar">
<SearchTextField />
</div>
</div>
<div className="monitors-v-gaping"></div>
<HostsTable monitors={monitorState.monitors} />
<div className="monitors-v-gaping"></div>
<Pagination />
</div>
</div>
);
};

1
Client/src/Components/CurrentMonitors/index.css → Client/src/Pages/Monitors/monitors.css
View File

@@ -1,4 +1,5 @@
.current-monitors {
margin-top: var(--env-var-spacing-2);
border: 1px solid #eaecf0;
padding: 40px;
border-radius: 4px;