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 + + ))} + +
+
+
+ ); }