diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index 324268af7..f079abfca 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -1,5 +1,78 @@
-import { Box, Button } from "@mui/material";
+import {
+ Box,
+ Button,
+ Stack,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+} from "@mui/material";
import { Heading } from "../../Components/Heading";
+import { useTheme } from "@emotion/react";
+import Greeting from "../../Utils/greeting";
+import Breadcrumbs from "../../Components/Breadcrumbs";
+
+const mockedData = {
+ ip: "https://192.168.1.30",
+ status: "Up",
+ processor: "2Ghz",
+ cpu: 80,
+ mem: 50,
+ disk: 70,
+};
+
+const ROWS = Array.from(Array(5).keys()).map(() => mockedData);
+console.log(ROWS);
+
+const columns = [
+ {
+ label: "Host",
+ /* id: "name", */
+ /* minWidth: 170 */
+ },
+ {
+ /* id: "code", */
+ label: "Status",
+ /* minWidth: 100 */
+ },
+ {
+ /* id: "population", */
+ label: "Frequency",
+ /* minWidth: 170,
+ align: "right", */
+ /* format: (value) => value.toLocaleString("en-US"), */
+ },
+ {
+ /* id: "size", */
+ label: "CPU",
+ /* minWidth: 170, */
+ /* align: "right", */
+ /* format: (value) => value.toLocaleString("en-US"), */
+ },
+ {
+ /* id: "density", */
+ label: "Mem",
+ /* minWidth: 170, */
+ /* align: "right",
+ format: (value) => value.toFixed(2), */
+ },
+ {
+ label: "Disk",
+ },
+ {
+ label: "Actions",
+ },
+];
+
+/* TODO steps
+
+1) Extract Client\src\Pages\Monitors\Home\MonitorTable\index.jsx to reusable component
+
+...
+z) Check error pointed by Shemy on theme
+*/
/**
* This is the Infrastructure monitoring page. This is a work in progress
@@ -9,20 +82,96 @@ import { Heading } from "../../Components/Heading";
*/
function Infrastructure() {
+ const theme = useTheme();
return (
-
-
- Infrastructure monitors
-
+
+
+
+
+
+ Infrastructure monitors
+ {/* TODO Correct the class, messy stuff */}
+
+ 5
+
+
+
+
+
+
+ {columns.map((column, index) => (
+
+ {column.label}
+
+ ))}
+
+
+
+ {ROWS.map((row, index) => (
+
+ {/* TODO iterate over column and get column id, applying row[column.id] */}
+ {row.ip}
+ {row.status}
+ {row.processor}
+ {row.cpu}
+ {row.mem}
+ {row.disk}
+ actions
+
+ ))}
+
+
+
+
+
);
}