diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 0baad1962..10d897da7 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -126,25 +126,6 @@ function Infrastructure() { const { determineState } = useUtils(); const { monitors, total: totalMonitors } = monitorState; - console.log(monitors); - const monitorsAsRows = monitors.map((monitor) => { - const processor = - ((monitor.checks[0]?.cpu?.usage_frequency ?? 0) / 1000).toFixed(2) + " GHz"; - const cpu = (monitor?.checks[0]?.cpu.usage_percent ?? 0) * 100; - const mem = (monitor?.checks[0]?.memory.usage_percent ?? 0) * 100; - const disk = (monitor?.checks[0]?.disk[0]?.usage_percent ?? 0) * 100; - return { - id: monitor._id, - url: monitor.url, - name: monitor.name, - status: determineState(monitor), - processor, - cpu, - mem, - disk, - }; - }); - function openDetails(id) { navigate(`/infrastructure/${id}`); } @@ -226,11 +207,29 @@ function Infrastructure() { - {monitorsAsRows.map((row) => { + {monitors.map((monitor) => { + const processor = + ((monitor.checks[0]?.cpu?.usage_frequency ?? 0) / 1000).toFixed(2) + + " GHz"; + const cpu = (monitor?.checks[0]?.cpu.usage_percent ?? 0) * 100; + const mem = (monitor?.checks[0]?.memory.usage_percent ?? 0) * 100; + const disk = (monitor?.checks[0]?.disk[0]?.usage_percent ?? 0) * 100; + const status = determineState(monitor); + const uptimePercentage = ((monitor?.uptimePercentage ?? 0) * 100) + .toFixed(2) + .toString(); + const percentageColor = + monitor.uptimePercentage < 0.25 + ? theme.palette.percentage.uptimePoor + : monitor.uptimePercentage < 0.5 + ? theme.palette.percentage.uptimeFair + : monitor.uptimePercentage < 0.75 + ? theme.palette.percentage.uptimeGood + : theme.palette.percentage.uptimeExcellent; return ( openDetails(row.id)} + key={monitor._id} + onClick={() => openDetails(monitor.id)} sx={{ cursor: "pointer", "&:hover": { @@ -241,14 +240,16 @@ function Infrastructure() { {/* TODO iterate over column and get column id, applying row[column.id] */} - {row.processor} + {processor} - + - + - + {/* Get ActionsMenu from Monitor Table and create a component */} @@ -287,7 +288,7 @@ function Infrastructure() { }} >