94 lines
2.3 KiB
React
94 lines
2.3 KiB
React
import Host from "./host";
|
|
import ActionsMenu from "./actionsMenu";
|
|
import BarChart from "../../../Components/Charts/BarChart";
|
|
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
|
|
import { StatusLabel } from "../../../Components/Label";
|
|
import { Box } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
const data = {
|
|
cols: [
|
|
{ id: 1, name: "Host" },
|
|
{
|
|
id: 2,
|
|
name: (
|
|
<Box width="max-content">
|
|
Status
|
|
<span>
|
|
<ArrowDownwardRoundedIcon />
|
|
</span>
|
|
</Box>
|
|
),
|
|
},
|
|
{ id: 3, name: "Response Time" },
|
|
{ id: 4, name: "Type" },
|
|
{ id: 5, name: "Actions" },
|
|
],
|
|
rows: [],
|
|
};
|
|
|
|
export const buildData = (monitors, isAdmin, navigate) => {
|
|
const theme = useTheme();
|
|
|
|
data.rows = monitors.map((monitor, idx) => {
|
|
let uptimePercentage = "";
|
|
if (monitor.uptimePercentage !== undefined) {
|
|
uptimePercentage =
|
|
monitor.uptimePercentage === 0
|
|
? "0"
|
|
: (monitor.uptimePercentage * 100).toFixed(2);
|
|
}
|
|
|
|
const params = {
|
|
url: monitor.url,
|
|
title: monitor.name,
|
|
percentage: uptimePercentage,
|
|
percentageColor:
|
|
monitor.status === true
|
|
? theme.palette.success.main
|
|
: theme.palette.error.text,
|
|
status:
|
|
monitor.status === undefined
|
|
? "unknown"
|
|
: monitor.status === true
|
|
? "up"
|
|
: "down",
|
|
};
|
|
|
|
// Reverse checks so latest check is on the right
|
|
const reversedChecks = monitor.checks.slice().reverse();
|
|
|
|
return {
|
|
id: monitor._id,
|
|
handleClick: () => {
|
|
navigate(`/monitors/${monitor._id}`);
|
|
},
|
|
data: [
|
|
{ id: idx, data: <Host params={params} /> },
|
|
{
|
|
id: idx + 1,
|
|
data: (
|
|
<StatusLabel
|
|
status={params.status}
|
|
text={params.status}
|
|
customStyles={{ textTransform: "capitalize" }}
|
|
/>
|
|
),
|
|
},
|
|
{ id: idx + 2, data: <BarChart checks={reversedChecks} /> },
|
|
{
|
|
id: idx + 3,
|
|
data: (
|
|
<span style={{ textTransform: "uppercase" }}>{monitor.type}</span>
|
|
),
|
|
},
|
|
{
|
|
id: idx + 4,
|
|
data: <ActionsMenu monitor={monitor} isAdmin={isAdmin} />,
|
|
},
|
|
],
|
|
};
|
|
});
|
|
return data;
|
|
};
|