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

Added animations back, added pagination

Browse Source
This commit is contained in:
Alex Holliday
2024-07-06 23:07:04 -07:00
parent 6a7a919789
commit 0555157200
2 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Client/src/Components/Charts/ResponseTimeChart/index.jsx
View File

@@ -54,7 +54,7 @@ const ResponseTimeChart = ({ checks = [] }) => {
<div className="chart-container">
<ResponsiveContainer width="100%" height="100%">
<BarChart width={150} height={40} data={normalizedChecks}>
<Bar maxBarSize={10} dataKey="responseTime" isAnimationActive={false}>
<Bar maxBarSize={10} dataKey="responseTime">
{normalizedChecks.map((check, index) => (
<Cell
key={`cell-${index}`}

98
Client/src/Components/MonitorTable/index.jsx
View File

@@ -1,6 +1,6 @@
import "./index.css";
import { useState } from "react";
import PropTypes from "prop-types";
import { DataGrid } from "@mui/x-data-grid";
import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
import ResponseTimeChart from "../Charts/ResponseTimeChart";
import {
@@ -10,6 +10,8 @@ import {
TableContainer,
TableHead,
TableRow,
TableFooter,
TablePagination,
Paper,
} from "@mui/material";
@@ -84,41 +86,55 @@ const Status = ({ params }) => {
* @returns {React.Component} Returns a table with the monitor data.
*/
const MonitorTable = ({ monitors = [] }) => {
const mappedRows = monitors.map((monitor) => {
const params = {
url: monitor.url,
title: monitor.name,
precentage: 100,
percentageColor:
monitor.status === true
? "var(--env-var-color-17)"
: "var(--env-var-color-19)",
status: monitor.status === true ? "up" : "down",
backgroundColor:
monitor.status === true
? "var(--env-var-color-20)"
: "var(--env-var-color-21)",
statusDotColor:
monitor.status === true
? "var(--env-var-color-17)"
: "var(--env-var-color-19)",
};
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
return (
<TableRow key={monitor._id}>
<TableCell>
<Host params={params} />
</TableCell>
<TableCell>
<Status params={params} />
</TableCell>
<TableCell>
<ResponseTimeChart checks={monitor.checks} />
</TableCell>
<TableCell>TODO Add Actions</TableCell>
</TableRow>
);
});
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const mappedRows = monitors
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((monitor) => {
const params = {
url: monitor.url,
title: monitor.name,
precentage: 100,
percentageColor:
monitor.status === true
? "var(--env-var-color-17)"
: "var(--env-var-color-19)",
status: monitor.status === true ? "up" : "down",
backgroundColor:
monitor.status === true
? "var(--env-var-color-20)"
: "var(--env-var-color-21)",
statusDotColor:
monitor.status === true
? "var(--env-var-color-17)"
: "var(--env-var-color-19)",
};
return (
<TableRow key={monitor._id}>
<TableCell>
<Host params={params} />
</TableCell>
<TableCell>
<Status params={params} />
</TableCell>
<TableCell>
<ResponseTimeChart checks={monitor.checks} />
</TableCell>
<TableCell>TODO Add Actions</TableCell>
</TableRow>
);
});
return (
<TableContainer component={Paper}>
@@ -132,6 +148,18 @@ const MonitorTable = ({ monitors = [] }) => {
</TableRow>
</TableHead>
<TableBody>{mappedRows}</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
count={monitors.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
);