feat: finishing base for infrastructure page
This commit is contained in:
Caio Cabral committed
1 parent
c542e537ab
commit
e9463f0d07
4 files changed
+86
-68
No files matched your search
@@ -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;
|
||||
|
||||
@@ -69,6 +69,7 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) {
|
||||
<ResponsiveContainer
|
||||
aspect={1}
|
||||
width={width}
|
||||
style={{ marginInline: "auto" }}
|
||||
>
|
||||
<RadialBarChart
|
||||
{...RADIAL_BAR_CHART_PROPS}
|
||||
@@ -91,8 +92,8 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) {
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
style={{
|
||||
...theme.typography.body1,
|
||||
fill: theme.typography.body1.color,
|
||||
...theme.typography.body2,
|
||||
fill: theme.typography.body2.color,
|
||||
}}
|
||||
>
|
||||
{`${myProgressValue}%`}
|
||||
|
||||
@@ -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() {
|
||||
<Breadcrumbs list={[{ name: `infrastructure`, path: "/infrastructure" }]} />
|
||||
<Stack
|
||||
direction="row"
|
||||
/* spacing={8} */
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
@@ -125,7 +113,6 @@ function Infrastructure() {
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
/* spacing={8} */
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
gap: ".25rem",
|
||||
@@ -133,7 +120,7 @@ function Infrastructure() {
|
||||
}}
|
||||
>
|
||||
<Heading component="h2">Infrastructure monitors</Heading>
|
||||
{/* TODO Correct the class, messy stuff */}
|
||||
{/* TODO Correct the class current-monitors-counter, there are some unnecessary things there */}
|
||||
<Box
|
||||
component="span"
|
||||
className="current-monitors-counter"
|
||||
@@ -145,15 +132,19 @@ function Infrastructure() {
|
||||
5
|
||||
</Box>
|
||||
</Stack>
|
||||
<TableContainer>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ maxHeight: "55vh" }}
|
||||
>
|
||||
<Table stickyHeader>
|
||||
<TableHead>
|
||||
<TableHead sx={{ backgroundColor: theme.palette.background.accent }}>
|
||||
<TableRow>
|
||||
{columns.map((column, index) => (
|
||||
<TableCell
|
||||
key={index}
|
||||
/* align={column.align} */
|
||||
/* style={{ minWidth: column.minWidth }} */
|
||||
align={index === 0 ? "left" : "center"}
|
||||
/* TODO I don't understand why it was needed to pass this to override some #ffffff color from MUI here, but that wasn't needed in other pages. */
|
||||
sx={{ backgroundColor: "transparent" }}
|
||||
>
|
||||
{column.label}
|
||||
</TableCell>
|
||||
@@ -165,45 +156,68 @@ function Infrastructure() {
|
||||
<TableRow key={index}>
|
||||
{/* TODO iterate over column and get column id, applying row[column.id] */}
|
||||
<TableCell>{row.ip}</TableCell>
|
||||
<TableCell>
|
||||
<TableCell align="center">
|
||||
<StatusLabel
|
||||
status={row.status}
|
||||
text={row.status}
|
||||
/* Usar o capitalize dentro do Status Label */
|
||||
/* Fazer nao precisar mais passar o text*/
|
||||
/* Use capitalize inside of Status Label */
|
||||
/* Update component so we don't need to pass text and status separately*/
|
||||
customStyles={{ textTransform: "capitalize" }}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{row.processor}</TableCell>
|
||||
<TableCell>
|
||||
<TableCell align="center">
|
||||
<Stack
|
||||
direction={"row"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
gap=".25rem"
|
||||
>
|
||||
<CPUChipIcon
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
{row.processor}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Gauge
|
||||
progressValue={row.cpu}
|
||||
containerWidth={60}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell align="center">
|
||||
<Gauge
|
||||
progressValue={row.mem}
|
||||
containerWidth={60}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell align="center">
|
||||
<Gauge
|
||||
progressValue={row.disk}
|
||||
containerWidth={60}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>actions</TableCell>
|
||||
<TableCell align="center">
|
||||
{/* Get ActionsMenu from Monitor Table and create a component */}
|
||||
<IconButton
|
||||
sx={{
|
||||
"& svg path": {
|
||||
stroke: theme.palette.other.icon,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<GearIcon
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination></TablePagination>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination></TablePagination>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 2V4M15 2V4M9 20V22M15 20V22M20 9H22M20 14H22M2 9H4M2 14H4M8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V8.8C20 7.11984 20 6.27976 19.673 5.63803C19.3854 5.07354 18.9265 4.6146 18.362 4.32698C17.7202 4 16.8802 4 15.2 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20ZM10.6 15H13.4C13.9601 15 14.2401 15 14.454 14.891C14.6422 14.7951 14.7951 14.6422 14.891 14.454C15 14.2401 15 13.9601 15 13.4V10.6C15 10.0399 15 9.75992 14.891 9.54601C14.7951 9.35785 14.6422 9.20487 14.454 9.10899C14.2401 9 13.9601 9 13.4 9H10.6C10.0399 9 9.75992 9 9.54601 9.10899C9.35785 9.20487 9.20487 9.35785 9.10899 9.54601C9 9.75992 9 10.0399 9 10.6V13.4C9 13.9601 9 14.2401 9.10899 14.454C9.20487 14.6422 9.35785 14.7951 9.54601 14.891C9.75992 15 10.0399 15 10.6 15Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Reference in new issue
Block a user