diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 1d4a354e9..3c1b0f2cd 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -27,7 +27,7 @@ font-size: var(--env-var-font-size-medium); } .MuiTable-root .MuiTableHead-root .MuiTableCell-root { - padding: var(--env-var-spacing-1) var(--env-var-spacing-2); + padding: var(--env-var-spacing-1); font-weight: 500; } .MuiTable-root .MuiTableHead-root span { @@ -43,7 +43,7 @@ height: 20px; } .MuiTable-root .MuiTableBody-root .MuiTableCell-root { - padding: 6px var(--env-var-spacing-2); + padding: var(--env-var-spacing-1); } .MuiTable-root .MuiTableBody-root .MuiTableRow-root { height: 50px; diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index 2996a016f..5487f6d9a 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -69,6 +69,7 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) { {`${myProgressValue}%`} diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index c971651d1..038d3786a 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -1,12 +1,13 @@ import { Box, Button, + IconButton, + Paper, Stack, Table, TableBody, TableCell, TableContainer, - TableFooter, TableHead, TablePagination, TableRow, @@ -17,6 +18,8 @@ import Greeting from "../../Utils/greeting"; import Breadcrumbs from "../../Components/Breadcrumbs"; import { StatusLabel } from "../../Components/Label"; import { Gauge } from "../../Components/Charts/Gauge"; +import GearIcon from "../../Assets/icons/settings-bold.svg?react"; +import CPUChipIcon from "../../Assets/icons/cpu-chip.svg?react"; const mockedData = { ip: "https://192.168.1.30", @@ -31,51 +34,37 @@ const ROWS = Array.from(Array(20).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", - }, + { label: "Host" }, + { label: "Status" }, + { label: "Frequency" }, + { label: "CPU" }, + { label: "Mem" }, + { 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 +/* TODO +Create reusable table component. +It should receive as a parameter the following object: +tableData = [ + columns = [ + { + id: example, + label: Example Extendable, + align: "center" | "left" (default) + } + ], + rows: [ + { + **Number of keys will be equal to number of columns** + key1: string, + key2: number, + key3: Component + } + ] +] +Apply to Monitor Table, and Account/Team. +Analyze existing BasicTable */ /** @@ -95,7 +84,6 @@ function Infrastructure() { Infrastructure monitors - {/* TODO Correct the class, messy stuff */} + {/* TODO Correct the class current-monitors-counter, there are some unnecessary things there */} - + - + {columns.map((column, index) => ( {column.label} @@ -165,45 +156,68 @@ function Infrastructure() { {/* TODO iterate over column and get column id, applying row[column.id] */} {row.ip} - + - {row.processor} - + + + + {row.processor} + + + - + - + - actions + + {/* Get ActionsMenu from Monitor Table and create a component */} + + + + ))} - - - - -
+
); diff --git a/Client/src/assets/icons/cpu-chip.svg b/Client/src/assets/icons/cpu-chip.svg new file mode 100644 index 000000000..5645840b1 --- /dev/null +++ b/Client/src/assets/icons/cpu-chip.svg @@ -0,0 +1,3 @@ + + +