57 lines
1.7 KiB
React
57 lines
1.7 KiB
React
import Button from "../../Components/Button";
|
|
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
|
|
import CurrentMonitors from "../../Components/CurrentMonitors";
|
|
import PropTypes from "prop-types";
|
|
|
|
/**
|
|
* CurrentStats displays the current status of monitor
|
|
*
|
|
* @component
|
|
* @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
|
|
*/
|
|
|
|
const CurrentStats = ({ monitors }) => {
|
|
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, Jackie</div>
|
|
<Button
|
|
level="primary"
|
|
label="Create new monitor"
|
|
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;
|