DavHau/clan-core
1
0
Fork 0
forked from clan/clan-core
Code Pull Requests Activity

Merge pull request 'UI: NodeTable exported to small Components' (#184) from Qubasa-Qubasa-main into main

Browse Source
This commit is contained in:
clan-bot 2023-08-26 09:44:36 +00:00
commit dec5e1e5db
9 changed files with 1480 additions and 682 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
pkgs/ui/src/app/nodes/EnhancedTableToolbar.tsx Normal file
View File

@ -0,0 +1,194 @@
"use client";
import * as React from "react";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import Stack from "@mui/material/Stack/Stack";
import NodePieChart from "./NodePieChart";
import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
import { Card, CardContent, FormGroup, useTheme } from "@mui/material";
import hexRgb from "hex-rgb";
import useMediaQuery from "@mui/material/useMediaQuery";
import { NodeStatus, TableData } from "@/data/nodeData";
interface EnhancedTableToolbarProps {
tableData: TableData[];
}
function PieCardData(props: { pieData: PieData[]; debugSx: any }) {
const { pieData, debugSx } = props;
const cardData = React.useMemo(() => {
return pieData
.filter((pieItem) => pieItem.value > 0)
.concat({
name: "Total",
value: pieData.reduce((a, b) => a + b.value, 0),
color: "#000000",
});
}, [pieData]);
return (
<Stack
sx={{ ...debugSx, paddingTop: 6 }}
height={350}
id="cardBox"
display="flex"
flexDirection="column"
justifyContent="flex-start"
flexWrap="wrap"
>
{cardData.map((pieItem) => (
<Card
key={pieItem.name}
sx={{
marginBottom: 2,
marginRight: 2,
width: 110,
height: 110,
backgroundColor: hexRgb(pieItem.color, {
format: "css",
alpha: 0.25,
}),
}}
>
<CardContent>
<Typography
variant="h4"
component="div"
gutterBottom={true}
textAlign="center"
>
{pieItem.value}
</Typography>
<Typography
sx={{ mb: 1.5 }}
color="text.secondary"
textAlign="center"
>
{pieItem.name}
</Typography>
</CardContent>
</Card>
))}
</Stack>
);
}
interface PieData {
name: string;
value: number;
color: string;
}
export default function EnhancedTableToolbar(
props: React.PropsWithChildren<EnhancedTableToolbarProps>,
) {
const { tableData } = props;
const theme = useTheme();
const is_lg = useMediaQuery(theme.breakpoints.down("lg"));
const [debug, setDebug] = React.useState<boolean>(false);
const debugSx = debug
? {
"--Grid-borderWidth": "1px",
borderTop: "var(--Grid-borderWidth) solid",
borderLeft: "var(--Grid-borderWidth) solid",
borderColor: "divider",
"& > div": {
borderRight: "var(--Grid-borderWidth) solid",
borderBottom: "var(--Grid-borderWidth) solid",
borderColor: "divider",
},
}
: {};
const pieData: PieData[] = React.useMemo(() => {
const online = tableData.filter(
(row) => row.status === NodeStatus.Online,
).length;
const offline = tableData.filter(
(row) => row.status === NodeStatus.Offline,
).length;
const pending = tableData.filter(
(row) => row.status === NodeStatus.Pending,
).length;
return [
{ name: "Online", value: online, color: theme.palette.success.main },
{ name: "Offline", value: offline, color: theme.palette.error.main },
{ name: "Pending", value: pending, color: theme.palette.warning.main },
];
}, [tableData, theme]);
return (
<Grid2 container spacing={1} sx={debugSx}>
<Grid2 key="Header" xs={6}>
<Typography
sx={{ marginLeft: 3, marginTop: 1 }}
variant="h6"
id="tableTitle"
component="div"
>
NODES
</Typography>
</Grid2>
{/* Debug Controls */}
<Grid2 key="Debug-Controls" xs={6} justifyContent="left" display="flex">
<FormGroup>
<FormControlLabel
control={
<Switch
onChange={() => {
setDebug(!debug);
}}
checked={debug}
/>
}
label="Debug"
/>
</FormGroup>
</Grid2>
{/* Pie Chart Grid */}
<Grid2
key="PieChart"
md={6}
xs={12}
display="flex"
justifyContent="center"
alignItems="center"
>
<Box height={350} width={400}>
<NodePieChart data={pieData} showLabels={is_lg} />
</Box>
</Grid2>
{/* Card Stack Grid */}
<Grid2
key="CardStack"
lg={6}
display="flex"
sx={{ display: { lg: "flex", xs: "none", md: "flex" } }}
>
<PieCardData pieData={pieData} debugSx={debugSx} />
</Grid2>
{/*Toolbar Grid */}
<Grid2 key="Toolbar" xs={12}>
<Toolbar
sx={{
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
}}
>
{props.children}
</Toolbar>
</Grid2>
</Grid2>
);
}

679
pkgs/ui/src/app/nodes/NodeList.tsx
View File

@ -1,679 +0,0 @@
"use client";
import * as React from "react";
import { alpha } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import SpeedDial, { CloseReason, OpenReason } from "@mui/material/SpeedDial";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import { visuallyHidden } from "@mui/utils";
import CircleIcon from "@mui/icons-material/Circle";
import Stack from "@mui/material/Stack/Stack";
import EditIcon from "@mui/icons-material/ModeEdit";
import SearchIcon from "@mui/icons-material/Search";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import NodePieChart, { PieData } from "./NodePieChart";
import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import Link from "next/link";
import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
import {
Card,
CardContent,
Collapse,
Container,
FormGroup,
useTheme,
} from "@mui/material";
import hexRgb from "hex-rgb";
import useMediaQuery from "@mui/material/useMediaQuery";
import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
interface HeadCell {
disablePadding: boolean;
id: keyof TableData;
label: string;
alignRight: boolean;
}
const headCells: readonly HeadCell[] = [
{
id: "name",
alignRight: false,
disablePadding: false,
label: "DISPLAY NAME & ID",
},
{
id: "status",
alignRight: false,
disablePadding: false,
label: "STATUS",
},
{
id: "last_seen",
alignRight: false,
disablePadding: false,
label: "LAST SEEN",
},
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
type Order = "asc" | "desc";
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key,
): (
a: { [key in Key]: number | string | boolean },
b: { [key in Key]: number | string | boolean },
) => number {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
// with exampleArray.slice().sort(exampleComparator)
function stableSort<T>(
array: readonly T[],
comparator: (a: T, b: T) => number,
) {
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
function CrudSpeedDial(props: { selected: string | undefined }) {
const { selected } = props;
const [open, setOpen] = React.useState(false);
function handleClose(event: any, reason: CloseReason) {
if (reason === "toggle" || reason === "escapeKeyDown") {
setOpen(false);
}
}
function handleOpen(event: any, reason: OpenReason) {
if (reason === "toggle") {
setOpen(true);
}
}
const isSomethingSelected = selected != undefined;
function editDial() {
if (isSomethingSelected) {
return (
<Link href="/nodes/edit" style={{ marginTop: 7.5 }}>
<EditIcon color="action" />
</Link>
);
} else {
return <EditIcon color="disabled" />;
}
}
return (
<Box
sx={{
transform: "translateZ(0px)",
flexGrow: 1,
position: "fixed",
right: 20,
top: 15,
margin: 0,
zIndex: 9000,
}}
>
<SpeedDial
color="secondary"
ariaLabel="SpeedDial basic example"
icon={<SpeedDialIcon />}
direction="down"
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
<SpeedDialAction
key="Add"
icon={
<Link href="/nodes/add" style={{ marginTop: 7.5 }}>
<AddIcon color="action" />
</Link>
}
tooltipTitle="Add"
/>
<SpeedDialAction
key="Delete"
icon={
<DeleteIcon color={isSomethingSelected ? "action" : "disabled"} />
}
tooltipTitle="Delete"
/>
<SpeedDialAction key="Edit" icon={editDial()} tooltipTitle="Edit" />
</SpeedDial>
</Box>
);
}
interface EnhancedTableToolbarProps {
selected: string | undefined;
tableData: TableData[];
onClear: () => void;
}
function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
const { selected, onClear, tableData } = props;
const theme = useTheme();
const is_lg = useMediaQuery(theme.breakpoints.down("lg"));
const is_sm = useMediaQuery(theme.breakpoints.down("sm"));
const isSelected = selected != undefined;
const [debug, setDebug] = React.useState<boolean>(false);
const debugSx = debug
? {
"--Grid-borderWidth": "1px",
borderTop: "var(--Grid-borderWidth) solid",
borderLeft: "var(--Grid-borderWidth) solid",
borderColor: "divider",
"& > div": {
borderRight: "var(--Grid-borderWidth) solid",
borderBottom: "var(--Grid-borderWidth) solid",
borderColor: "divider",
},
}
: {};
const pieData = React.useMemo(() => {
const online = tableData.filter(
(row) => row.status === NodeStatus.Online,
).length;
const offline = tableData.filter(
(row) => row.status === NodeStatus.Offline,
).length;
const pending = tableData.filter(
(row) => row.status === NodeStatus.Pending,
).length;
return [
{ name: "Online", value: online, color: theme.palette.success.main },
{ name: "Offline", value: offline, color: theme.palette.error.main },
{ name: "Pending", value: pending, color: theme.palette.warning.main },
];
}, [tableData, theme]);
const cardData = React.useMemo(() => {
return pieData
.filter((pieItem) => pieItem.value > 0)
.concat({
name: "Total",
value: pieData.reduce((a, b) => a + b.value, 0),
color: "#000000",
});
}, [pieData]);
const cardStack = (
<Stack
sx={{ ...debugSx, paddingTop: 6 }}
height={350}
id="cardBox"
display="flex"
flexDirection="column"
justifyContent="flex-start"
flexWrap="wrap"
>
{cardData.map((pieItem) => (
<Card
key={pieItem.name}
sx={{
marginBottom: 2,
marginRight: 2,
width: 110,
height: 110,
backgroundColor: hexRgb(pieItem.color, {
format: "css",
alpha: 0.25,
}),
}}
>
<CardContent>
<Typography
variant="h4"
component="div"
gutterBottom={true}
textAlign="center"
>
{pieItem.value}
</Typography>
<Typography
sx={{ mb: 1.5 }}
color="text.secondary"
textAlign="center"
>
{pieItem.name}
</Typography>
</CardContent>
</Card>
))}
</Stack>
);
return (
<Grid2 container spacing={1} sx={debugSx}>
<CrudSpeedDial selected={selected} />
<Grid2 key="Header" xs={6}>
<Typography
sx={{ marginLeft: 3, marginTop: 1 }}
variant="h6"
id="tableTitle"
component="div"
>
NODES
</Typography>
</Grid2>
{/* Debug Controls */}
<Grid2 key="Debug-Controls" xs={6} justifyContent="left" display="flex">
<FormGroup>
<FormControlLabel
control={
<Switch
onChange={() => {
setDebug(!debug);
}}
checked={debug}
/>
}
label="Debug"
/>
</FormGroup>
</Grid2>
{/* Pie Chart Grid */}
<Grid2
key="PieChart"
md={6}
xs={12}
display="flex"
justifyContent="center"
alignItems="center"
>
<Box height={350} width={400}>
<NodePieChart data={pieData} showLabels={is_lg} />
</Box>
</Grid2>
{/* Card Stack Grid */}
<Grid2
key="CardStack"
lg={6}
display="flex"
sx={{ display: { lg: "flex", xs: "none", md: "flex" } }}
>
{cardStack}
</Grid2>
{/*Toolbar Grid */}
<Grid2 key="Toolbar" xs={12}>
<Toolbar
sx={{
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
}}
>
<Tooltip title="Filter list">
<IconButton>
<SearchIcon />
</IconButton>
</Tooltip>
</Toolbar>
</Grid2>
</Grid2>
);
}
export interface NodeTableProps {
tableData: TableData[];
}
interface EnhancedTableProps {
onRequestSort: (
event: React.MouseEvent<unknown>,
property: keyof TableData,
) => void;
order: Order;
orderBy: string;
rowCount: number;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler =
(property: keyof TableData) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell id="dropdown" colSpan={1} />
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.alignRight ? "right" : "left"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
function Row(props: {
row: TableData;
selected: string | undefined;
setSelected: (a: string | undefined) => void;
}) {
function renderStatus(status: NodeStatusKeys) {
switch (status) {
case NodeStatus.Online:
return (
<Stack direction="row" alignItems="center" gap={1}>
<CircleIcon color="success" style={{ fontSize: 15 }} />
<Typography component="div" align="left" variant="body1">
Online
</Typography>
</Stack>
);
case NodeStatus.Offline:
return (
<Stack direction="row" alignItems="center" gap={1}>
<CircleIcon color="error" style={{ fontSize: 15 }} />
<Typography component="div" align="left" variant="body1">
Offline
</Typography>
</Stack>
);
case NodeStatus.Pending:
return (
<Stack direction="row" alignItems="center" gap={1}>
<CircleIcon color="warning" style={{ fontSize: 15 }} />
<Typography component="div" align="left" variant="body1">
Pending
</Typography>
</Stack>
);
}
}
const { row, selected, setSelected } = props;
const [open, setOpen] = React.useState(false);
//const labelId = `enhanced-table-checkbox-${index}`;
// Speed optimization. We compare string pointers here instead of the string content.
const isSelected = selected == row.name;
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
if (isSelected) {
setSelected(undefined);
} else {
setSelected(name);
}
};
const debug = true;
const debugSx = debug
? {
"--Grid-borderWidth": "1px",
borderTop: "var(--Grid-borderWidth) solid",
borderLeft: "var(--Grid-borderWidth) solid",
borderColor: "divider",
"& > div": {
borderRight: "var(--Grid-borderWidth) solid",
borderBottom: "var(--Grid-borderWidth) solid",
borderColor: "divider",
},
}
: {};
return (
<React.Fragment>
{/* Rendered Row */}
<TableRow
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={row.name}
selected={isSelected}
sx={{ cursor: "pointer" }}
>
<TableCell padding="none">
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell
component="th"
scope="row"
onClick={(event) => handleClick(event, row.name)}
>
<Stack>
<Typography component="div" align="left" variant="body1">
{row.name}
</Typography>
<Typography
color="grey"
component="div"
align="left"
variant="body2"
>
{row.id}
</Typography>
</Stack>
</TableCell>
<TableCell
align="right"
onClick={(event) => handleClick(event, row.name)}
>
{renderStatus(row.status)}
</TableCell>
<TableCell
align="right"
onClick={(event) => handleClick(event, row.name)}
>
<Typography component="div" align="left" variant="body1">
{row.last_seen} days ago
</Typography>
</TableCell>
</TableRow>
{/* Row Expansion */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
Metadata
</Typography>
<Grid2 container spacing={2} paddingLeft={0}>
<Grid2
xs={6}
style={{ ...debugSx }}
justifyContent="left"
display="flex"
paddingRight={3}
>
<Box>Hello1</Box>
</Grid2>
<Grid2 xs={6} style={{ ...debugSx }} paddingLeft={6}>
<Box>Hello2</Box>
</Grid2>
</Grid2>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
export default function NodeTable(props: NodeTableProps) {
let { tableData } = props;
const theme = useTheme();
const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
const [order, setOrder] = React.useState<Order>("asc");
const [orderBy, setOrderBy] = React.useState<keyof TableData>("status");
const [selected, setSelected] = React.useState<string | undefined>(undefined);
const [page, setPage] = React.useState(0);
const [dense, setDense] = React.useState(false);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof TableData,
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - tableData.length) : 0;
const visibleRows = React.useMemo(
() =>
stableSort(tableData, getComparator(order, orderBy)).slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage,
),
[order, orderBy, page, rowsPerPage, tableData],
);
return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<EnhancedTableToolbar
tableData={tableData}
selected={selected}
onClear={() => setSelected(undefined)}
/>
<TableContainer>
<Table
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
size={dense ? "small" : "medium"}
>
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={tableData.length}
/>
<TableBody>
{visibleRows.map((row, index) => {
const labelId = `enhanced-table-checkbox-${index}`;
return (
<Row
key={row.id}
row={row}
selected={selected}
setSelected={setSelected}
/>
);
})}
{emptyRows > 0 && (
<TableRow
style={{
height: (dense ? 33 : 53) * emptyRows,
}}
>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
component="div"
count={tableData.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</Box>
);
}

170
pkgs/ui/src/app/nodes/NodeRow.tsx Normal file
View File

@ -0,0 +1,170 @@
"use client";
import * as React from "react";
import Box from "@mui/material/Box";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import CircleIcon from "@mui/icons-material/Circle";
import Stack from "@mui/material/Stack/Stack";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
import { Collapse } from "@mui/material";
import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
export default function NodeRow(props: {
row: TableData;
selected: string | undefined;
setSelected: (a: string | undefined) => void;
}) {
function renderStatus(status: NodeStatusKeys) {
switch (status) {
case NodeStatus.Online:
return (
<Stack direction="row" alignItems="center" gap={1}>
<CircleIcon color="success" style={{ fontSize: 15 }} />
<Typography component="div" align="left" variant="body1">
Online
</Typography>
</Stack>
);
case NodeStatus.Offline:
return (
<Stack direction="row" alignItems="center" gap={1}>
<CircleIcon color="error" style={{ fontSize: 15 }} />
<Typography component="div" align="left" variant="body1">
Offline
</Typography>
</Stack>
);
case NodeStatus.Pending:
return (
<Stack direction="row" alignItems="center" gap={1}>
<CircleIcon color="warning" style={{ fontSize: 15 }} />
<Typography component="div" align="left" variant="body1">
Pending
</Typography>
</Stack>
);
}
}
const { row, selected, setSelected } = props;
const [open, setOpen] = React.useState(false);
//const labelId = `enhanced-table-checkbox-${index}`;
// Speed optimization. We compare string pointers here instead of the string content.
const isSelected = selected == row.id;
const handleClick = (event: React.MouseEvent<unknown>, id: string) => {
if (isSelected) {
setSelected(undefined);
} else {
setSelected(id);
}
};
const debug = true;
const debugSx = debug
? {
"--Grid-borderWidth": "1px",
borderTop: "var(--Grid-borderWidth) solid",
borderLeft: "var(--Grid-borderWidth) solid",
borderColor: "divider",
"& > div": {
borderRight: "var(--Grid-borderWidth) solid",
borderBottom: "var(--Grid-borderWidth) solid",
borderColor: "divider",
},
}
: {};
return (
<React.Fragment>
{/* Rendered Row */}
<TableRow
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={row.name}
selected={isSelected}
sx={{ cursor: "pointer" }}
>
<TableCell padding="none">
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell
component="th"
scope="row"
onClick={(event) => handleClick(event, row.id)}
>
<Stack>
<Typography component="div" align="left" variant="body1">
{row.name}
</Typography>
<Typography
color="grey"
component="div"
align="left"
variant="body2"
>
{row.id}
</Typography>
</Stack>
</TableCell>
<TableCell
align="right"
onClick={(event) => handleClick(event, row.name)}
>
{renderStatus(row.status)}
</TableCell>
<TableCell
align="right"
onClick={(event) => handleClick(event, row.name)}
>
<Typography component="div" align="left" variant="body1">
{row.last_seen} days ago
</Typography>
</TableCell>
</TableRow>
{/* Row Expansion */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
Metadata
</Typography>
<Grid2 container spacing={2} paddingLeft={0}>
<Grid2
xs={6}
style={{ ...debugSx }}
justifyContent="left"
display="flex"
paddingRight={3}
>
<Box>Hello1</Box>
</Grid2>
<Grid2 xs={6} style={{ ...debugSx }} paddingLeft={6}>
<Box>Hello2</Box>
</Grid2>
</Grid2>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}

97
pkgs/ui/src/app/nodes/NodeTable.tsx Normal file
View File

@ -0,0 +1,97 @@
"use client";
import * as React from "react";
import Box from "@mui/material/Box";
import TablePagination from "@mui/material/TablePagination";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import SearchIcon from "@mui/icons-material/Search";
import NodeTableContainer from "./NodeTableContainer";
import { useTheme } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
import { TableData } from "@/data/nodeData";
import EnhancedTableToolbar from "./EnhancedTableToolbar";
import { table } from "console";
import StickySpeedDial from "./StickySpeedDial";
export interface SearchBarProps {
search: string;
setSearch: React.Dispatch<React.SetStateAction<string>>;
}
function SearchBar(props: SearchBarProps) {
const { search, setSearch } = props;
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearch(event.target.value);
};
return (
<label htmlFor="search">
<Tooltip title="Filter list">
<IconButton>
<SearchIcon />
</IconButton>
</Tooltip>
<input id="search" type="text" value={search} onChange={handleSearch} />
</label>
);
}
export interface NodeTableProps {
tableData: TableData[];
}
export default function NodeTable(props: NodeTableProps) {
let { tableData } = props;
const theme = useTheme();
const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
const [selected, setSelected] = React.useState<string | undefined>(undefined);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const [search, setSearch] = React.useState<string>("");
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<StickySpeedDial selected={selected} />
<EnhancedTableToolbar tableData={tableData}>
<SearchBar search={search} setSearch={setSearch} />
</EnhancedTableToolbar>
<NodeTableContainer
tableData={tableData}
page={page}
rowsPerPage={rowsPerPage}
dense={false}
selected={selected}
setSelected={setSelected}
/>
{/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
component="div"
count={tableData.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</Box>
);
}

207
pkgs/ui/src/app/nodes/NodeTableContainer.tsx Normal file
View File

@ -0,0 +1,207 @@
"use client";
import * as React from "react";
import Box from "@mui/material/Box";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import { visuallyHidden } from "@mui/utils";
import NodeRow from "./NodeRow";
import { TableData } from "@/data/nodeData";
interface HeadCell {
disablePadding: boolean;
id: keyof TableData;
label: string;
alignRight: boolean;
}
const headCells: readonly HeadCell[] = [
{
id: "name",
alignRight: false,
disablePadding: false,
label: "DISPLAY NAME & ID",
},
{
id: "status",
alignRight: false,
disablePadding: false,
label: "STATUS",
},
{
id: "last_seen",
alignRight: false,
disablePadding: false,
label: "LAST SEEN",
},
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
export type NodeOrder = "asc" | "desc";
function getComparator<Key extends keyof any>(
order: NodeOrder,
orderBy: Key,
): (
a: { [key in Key]: number | string | boolean },
b: { [key in Key]: number | string | boolean },
) => number {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
// with exampleArray.slice().sort(exampleComparator)
function stableSort<T>(
array: readonly T[],
comparator: (a: T, b: T) => number,
) {
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
interface EnhancedTableProps {
onRequestSort: (
event: React.MouseEvent<unknown>,
property: keyof TableData,
) => void;
order: NodeOrder;
orderBy: string;
rowCount: number;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler =
(property: keyof TableData) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell id="dropdown" colSpan={1} />
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.alignRight ? "right" : "left"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
interface NodeTableContainerProps {
tableData: readonly TableData[];
page: number;
rowsPerPage: number;
dense: boolean;
selected: string | undefined;
setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
}
export default function NodeTableContainer(props: NodeTableContainerProps) {
const { tableData, page, rowsPerPage, dense, selected, setSelected } = props;
const [order, setOrder] = React.useState<NodeOrder>("asc");
const [orderBy, setOrderBy] = React.useState<keyof TableData>("status");
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - tableData.length) : 0;
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof TableData,
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const visibleRows = React.useMemo(
() =>
stableSort(tableData, getComparator(order, orderBy)).slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage,
),
[order, orderBy, page, rowsPerPage, tableData],
);
return (
<TableContainer>
<Table
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
size={dense ? "small" : "medium"}
>
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={tableData.length}
/>
<TableBody>
{visibleRows.map((row, index) => {
return (
<NodeRow
key={row.id}
row={row}
selected={selected}
setSelected={setSelected}
/>
);
})}
{emptyRows > 0 && (
<TableRow
style={{
height: (dense ? 33 : 53) * emptyRows,
}}
>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
);
}

126
pkgs/ui/src/app/nodes/StickySpeedDial.tsx Normal file
View File

@ -0,0 +1,126 @@
"use client";
import * as React from "react";
import { alpha } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import SpeedDial, { CloseReason, OpenReason } from "@mui/material/SpeedDial";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import { visuallyHidden } from "@mui/utils";
import CircleIcon from "@mui/icons-material/Circle";
import Stack from "@mui/material/Stack/Stack";
import EditIcon from "@mui/icons-material/ModeEdit";
import SearchIcon from "@mui/icons-material/Search";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import NodePieChart, { PieData } from "./NodePieChart";
import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import Link from "next/link";
import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
import {
Card,
CardContent,
Collapse,
Container,
FormGroup,
useTheme,
} from "@mui/material";
import hexRgb from "hex-rgb";
import useMediaQuery from "@mui/material/useMediaQuery";
import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
import { jsx } from "@emotion/react";
export default function StickySpeedDial(props: {
selected: string | undefined;
}) {
const { selected } = props;
const [open, setOpen] = React.useState(false);
function handleClose(event: any, reason: CloseReason) {
if (reason === "toggle" || reason === "escapeKeyDown") {
setOpen(false);
}
}
function handleOpen(event: any, reason: OpenReason) {
if (reason === "toggle") {
setOpen(true);
}
}
const isSomethingSelected = selected != undefined;
function editDial() {
if (isSomethingSelected) {
return (
<Link href="/nodes/edit" style={{ marginTop: 7.5 }}>
<EditIcon color="action" />
</Link>
);
} else {
return <EditIcon color="disabled" />;
}
}
return (
<Box
sx={{
transform: "translateZ(0px)",
flexGrow: 1,
position: "fixed",
right: 20,
top: 15,
margin: 0,
zIndex: 9000,
}}
>
<SpeedDial
color="secondary"
ariaLabel="SpeedDial basic example"
icon={<SpeedDialIcon />}
direction="down"
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
<SpeedDialAction
key="Add"
icon={
<Link href="/nodes/add" style={{ marginTop: 7.5 }}>
<AddIcon color="action" />
</Link>
}
tooltipTitle="Add"
/>
<SpeedDialAction
key="Delete"
icon={
<DeleteIcon color={isSomethingSelected ? "action" : "disabled"} />
}
tooltipTitle="Delete"
/>
<SpeedDialAction key="Edit" icon={editDial()} tooltipTitle="Edit" />
</SpeedDial>
</Box>
);
}

6
pkgs/ui/src/app/nodes/page.tsx
View File

@ -1,15 +1,15 @@
"use client";
import NodeList from "./NodeList";
import NodeTable from "./NodeTable";
import Box from "@mui/material/Box";
import { tableData } from "@/data/nodeData";
import { tableData } from "@/data/nodeDataStatic";
import { StrictMode } from "react";
export default function Page() {
return (
<StrictMode>
<NodeList tableData={tableData} />
<NodeTable tableData={tableData} />
</StrictMode>
);
}

81
pkgs/ui/src/data/nodeData.tsx
View File

@ -19,6 +19,10 @@ function createData(
status: NodeStatusKeys,
last_seen: number,
): TableData {
if (status == NodeStatus.Online) {
last_seen = 0;
}
return {
name,
id,
@ -27,6 +31,67 @@ function createData(
};
}
// A function to generate random names
function getRandomName(): string {
let names = [
"Alice",
"Bob",
"Charlie",
"David",
"Eve",
"Frank",
"Grace",
"Heidi",
"Ivan",
"Judy",
"Mallory",
"Oscar",
"Peggy",
"Sybil",
"Trent",
"Victor",
"Walter",
"Wendy",
"Zoe",
];
let index = Math.floor(Math.random() * names.length);
return names[index];
}
// A function to generate random IPv6 addresses
function getRandomId(): string {
let hex = "0123456789abcdef";
let id = "";
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 4; j++) {
let index = Math.floor(Math.random() * hex.length);
id += hex[index];
}
if (i < 7) {
id += ":";
}
}
return id;
}
// A function to generate random status keys
function getRandomStatus(): NodeStatusKeys {
let statusKeys = [NodeStatus.Online, NodeStatus.Offline, NodeStatus.Pending];
let index = Math.floor(Math.random() * statusKeys.length);
return statusKeys[index];
}
// A function to generate random last seen values
function getRandomLastSeen(status: NodeStatusKeys): number {
if (status === "online") {
return 0;
} else {
let min = 1; // One day ago
let max = 360; // One year ago
return Math.floor(Math.random() * (max - min + 1) + min);
}
}
export const tableData = [
createData(
"Matchbox",
@ -97,3 +162,19 @@ export const tableData = [
0,
),
];
// A function to execute the createData function with dummy data in a loop 100 times and return an array
export function executeCreateData(): TableData[] {
let result: TableData[] = [];
for (let i = 0; i < 100; i++) {
// Generate dummy data
let name = getRandomName();
let id = getRandomId();
let status = getRandomStatus();
let last_seen = getRandomLastSeen(status);
// Call the createData function and push the result to the array
result.push(createData(name, id, status, last_seen));
}
return result;
}

602
pkgs/ui/src/data/nodeDataStatic.tsx Normal file
View File

@ -0,0 +1,602 @@
export const tableData = [
{
name: "Bob",
id: "f435:9678:eff4:cedf:7725:421c:82c0:611c",
status: "Pending",
last_seen: 83,
},
{
name: "Peggy",
id: "aa49:f231:04ac:f0d2:cf9a:4635:57e3:4b78",
status: "Offline",
last_seen: 294,
},
{
name: "Wendy",
id: "a453:4ec6:c401:30dc:89a0:1567:90c9:4a72",
status: "Pending",
last_seen: 332,
},
{
name: "Sybil",
id: "3f14:92c3:1090:bef0:7dc6:9eaf:755c:6f7f",
status: "Offline",
last_seen: 48,
},
{
name: "Ivan",
id: "855e:d1ff:d20c:d1b8:86c4:9ffe:ca2a:fefa",
status: "Offline",
last_seen: 292,
},
{
name: "Ivan",
id: "7bfb:3980:dc1a:37e2:2464:6028:393b:315f",
status: "Pending",
last_seen: 240,
},
{
name: "Mallory",
id: "d457:0a59:ea77:963f:f20b:ca55:57f2:a54b",
status: "Online",
last_seen: 0,
},
{
name: "Mallory",
id: "bbef:a90a:f7ff:5f40:23fc:a1d8:6b2f:7b0a",
status: "Offline",
last_seen: 95,
},
{
name: "Zoe",
id: "1057:7b4d:0708:66a1:5d36:5d8c:6620:4f5f",
status: "Online",
last_seen: 0,
},
{
name: "Ivan",
id: "74d3:60dc:5e12:dc52:7c7f:6903:4ff1:ba20",
status: "Pending",
last_seen: 193,
},
{
name: "Ivan",
id: "6770:c213:bdd1:0226:26e0:a8d4:949a:f2cc",
status: "Pending",
last_seen: 181,
},
{
name: "Bob",
id: "5551:7363:ba70:6927:57f3:24ea:386d:e2d9",
status: "Online",
last_seen: 0,
},
{
name: "Victor",
id: "12eb:9b2b:0c94:0731:15e6:7cd1:8984:7669",
status: "Offline",
last_seen: 130,
},
{
name: "Victor",
id: "785e:b8a0:289b:5108:a982:ecff:8f0b:9db2",
status: "Offline",
last_seen: 336,
},
{
name: "Judy",
id: "ee4b:ce86:4885:2729:089e:7f93:d3dd:7a09",
status: "Pending",
last_seen: 241,
},
{
name: "Frank",
id: "6c05:c65d:ef3b:be64:ae58:e1fd:7aaa:bd30",
status: "Online",
last_seen: 0,
},
{
name: "Alice",
id: "0fe6:f3b1:58c2:ef75:12de:6514:d1a6:eda5",
status: "Pending",
last_seen: 94,
},
{
name: "Charlie",
id: "095b:1b3f:cfeb:72f8:e84c:91f7:2c62:06e9",
status: "Pending",
last_seen: 131,
},
{
name: "Walter",
id: "8d0a:56b0:1537:1b2e:9581:d640:cd29:21cf",
status: "Offline",
last_seen: 273,
},
{
name: "Walter",
id: "d8ab:813a:cbc6:d379:d3be:cc4b:20b8:94ae",
status: "Offline",
last_seen: 200,
},
{
name: "Trent",
id: "0199:cb5c:a8cd:af82:2d9a:e63a:a157:6ee6",
status: "Offline",
last_seen: 352,
},
{
name: "Peggy",
id: "1b7b:8da6:623a:75ea:2385:8777:76b9:9ba8",
status: "Online",
last_seen: 0,
},
{
name: "Zoe",
id: "6ed3:ee3b:f7df:044a:355a:7790:0bf3:a308",
status: "Online",
last_seen: 0,
},
{
name: "Wendy",
id: "efed:821d:a944:0775:ead4:e520:6402:8dc4",
status: "Online",
last_seen: 0,
},
{
name: "Heidi",
id: "b616:82c5:4a37:c020:9568:aaa4:6390:22d5",
status: "Online",
last_seen: 0,
},
{
name: "Charlie",
id: "2c05:e6fc:a359:bf63:65e7:ee0e:49e3:6cc5",
status: "Online",
last_seen: 0,
},
{
name: "Frank",
id: "e9cb:eddc:1a94:22e4:4e3d:e927:c599:db04",
status: "Online",
last_seen: 0,
},
{
name: "Bob",
id: "be03:3537:719f:5152:f277:03ef:c6c9:c953",
status: "Offline",
last_seen: 69,
},
{
name: "Oscar",
id: "cede:fa4a:518d:b885:d1fa:00f4:d97a:2258",
status: "Pending",
last_seen: 280,
},
{
name: "Judy",
id: "9337:53e7:1aae:1b94:6035:e601:e562:350c",
status: "Online",
last_seen: 0,
},
{
name: "Judy",
id: "d50b:0ddc:0c9d:cd34:40ee:34c9:75ff:d16c",
status: "Online",
last_seen: 0,
},
{
name: "Charlie",
id: "368f:8855:59ed:b8c3:4fff:7630:9948:877f",
status: "Offline",
last_seen: 63,
},
{
name: "Judy",
id: "0fcd:74ae:8dad:8d10:370b:46c5:a403:eab8",
status: "Pending",
last_seen: 242,
},
{
name: "Wendy",
id: "285f:3015:2f09:2fde:25ee:87be:6d2c:f4f3",
status: "Pending",
last_seen: 60,
},
{
name: "Ivan",
id: "942d:9c5c:1f4a:95ba:1046:c643:a874:83ce",
status: "Online",
last_seen: 0,
},
{
name: "Frank",
id: "06f5:5b67:98e9:31b4:ddba:fb81:afb1:7677",
status: "Offline",
last_seen: 154,
},
{
name: "Zoe",
id: "ec58:13b0:b7ef:6e19:6c78:2c35:4fa3:092a",
status: "Offline",
last_seen: 264,
},
{
name: "Charlie",
id: "7151:20e3:3969:2933:c23b:6d9a:9723:d1bd",
status: "Online",
last_seen: 0,
},
{
name: "David",
id: "0466:bd3f:0fff:2119:b9c0:ee60:2a90:6b54",
status: "Online",
last_seen: 0,
},
{
name: "David",
id: "814d:b00c:4a98:7aa2:5354:7076:f48e:1609",
status: "Offline",
last_seen: 249,
},
{
name: "David",
id: "8633:f51b:b643:829a:08b0:fc2a:7cad:abda",
status: "Offline",
last_seen: 359,
},
{
name: "Eve",
id: "0fd5:7b72:4445:0e27:95c6:1b80:99dc:6590",
status: "Online",
last_seen: 0,
},
{
name: "Wendy",
id: "dc9b:bac9:8ec8:9167:5da5:8530:fcb7:1458",
status: "Online",
last_seen: 0,
},
{
name: "Bob",
id: "0412:6da1:82ef:6cb1:467e:34e9:34df:5742",
status: "Online",
last_seen: 0,
},
{
name: "Ivan",
id: "d03b:aba5:ee40:1961:f824:0d9b:9669:2e3e",
status: "Online",
last_seen: 0,
},
{
name: "Zoe",
id: "ad06:abfd:05c2:fc17:a8e0:857e:b04c:d3fe",
status: "Offline",
last_seen: 25,
},
{
name: "Ivan",
id: "d2ca:12cb:d271:44a2:2813:e826:964b:b292",
status: "Pending",
last_seen: 11,
},
{
name: "Charlie",
id: "aaa9:9754:34e2:7251:af6e:df7a:5422:96cd",
status: "Offline",
last_seen: 131,
},
{
name: "Mallory",
id: "8511:8f44:45d7:cc8a:43ff:908c:a35f:19bc",
status: "Offline",
last_seen: 141,
},
{
name: "Alice",
id: "8bc2:8f83:3081:d90c:087e:13bf:002b:934b",
status: "Online",
last_seen: 0,
},
{
name: "Peggy",
id: "9b33:5e44:310f:f6ab:81ae:df8e:be7b:ddc4",
status: "Pending",
last_seen: 354,
},
{
name: "Victor",
id: "9776:1f62:b8dc:1d14:bf9c:bf41:99b7:5c11",
status: "Online",
last_seen: 0,
},
{
name: "David",
id: "874a:a4df:321a:5367:4b63:4a0c:48d6:0a0d",
status: "Offline",
last_seen: 199,
},
{
name: "Charlie",
id: "05f0:7188:a2fb:cfe3:7d85:e3de:d6c2:07e9",
status: "Pending",
last_seen: 46,
},
{
name: "Grace",
id: "dcbd:5ddf:496d:dd27:0e98:9905:7c24:664d",
status: "Pending",
last_seen: 284,
},
{
name: "Ivan",
id: "3cb9:d178:2cb1:ae2c:dd3d:ce93:34e0:cc68",
status: "Online",
last_seen: 0,
},
{
name: "Frank",
id: "c974:9ef6:df64:188c:4622:aa71:497b:1fd8",
status: "Pending",
last_seen: 18,
},
{
name: "Frank",
id: "3ba0:9362:3b2f:ec10:03c2:7bd7:67ad:759c",
status: "Online",
last_seen: 0,
},
{
name: "Walter",
id: "b57d:3d13:6654:d944:0e7c:61d6:9dc0:15d8",
status: "Online",
last_seen: 0,
},
{
name: "Sybil",
id: "de00:f53f:0be4:8a57:047a:f99d:8ab2:fe7c",
status: "Pending",
last_seen: 41,
},
{
name: "Trent",
id: "bb32:acd8:bbfb:ea3e:1b58:dc17:4cc4:64ce",
status: "Offline",
last_seen: 326,
},
{
name: "Oscar",
id: "a3e9:1060:b0df:2adb:a340:3f34:5348:d882",
status: "Offline",
last_seen: 57,
},
{
name: "Wendy",
id: "6b49:c86c:41c8:c021:2103:b707:26a9:6d6a",
status: "Online",
last_seen: 0,
},
{
name: "Sybil",
id: "aaf2:68cb:da7e:0844:8a12:5fb9:cff5:9de8",
status: "Online",
last_seen: 0,
},
{
name: "Victor",
id: "b87d:0cc5:e3be:a600:045e:4a26:f7e2:6b3d",
status: "Offline",
last_seen: 342,
},
{
name: "Frank",
id: "13e6:1b80:ba7e:6275:21c8:dc96:6ab1:ac69",
status: "Pending",
last_seen: 213,
},
{
name: "Sybil",
id: "14ad:2010:7648:fbc8:337c:6984:d7e2:5202",
status: "Online",
last_seen: 0,
},
{
name: "Charlie",
id: "f79c:e3b8:1082:7a9d:7adf:f5b6:e333:affd",
status: "Online",
last_seen: 0,
},
{
name: "Sybil",
id: "534c:0d80:97d5:7b54:a1c3:5457:c5e8:62ee",
status: "Pending",
last_seen: 133,
},
{
name: "Victor",
id: "e829:f930:b7d7:6005:cc34:7bca:0163:7903",
status: "Online",
last_seen: 0,
},
{
name: "Ivan",
id: "18c3:6ab2:93ea:0756:52e4:33a6:0c2b:bd79",
status: "Pending",
last_seen: 109,
},
{
name: "Eve",
id: "49a3:28ad:6121:2e35:1b72:e5d7:5efc:0626",
status: "Online",
last_seen: 0,
},
{
name: "Trent",
id: "d900:540b:b764:2468:ad9e:2716:ab4f:9955",
status: "Pending",
last_seen: 117,
},
{
name: "Zoe",
id: "9d3d:de15:014a:ac0d:74b9:2ae8:08d4:8848",
status: "Pending",
last_seen: 114,
},
{
name: "Peggy",
id: "2145:0e6a:f66a:8e93:71b7:385d:c25b:6a2b",
status: "Offline",
last_seen: 71,
},
{
name: "Sybil",
id: "834c:adcc:a3d7:b5fc:d5cd:4209:e280:e625",
status: "Pending",
last_seen: 200,
},
{
name: "Heidi",
id: "5ecc:904c:2d31:177b:346d:4c23:5169:a982",
status: "Online",
last_seen: 0,
},
{
name: "Ivan",
id: "0446:9092:762c:48b6:310a:e6fb:be48:4631",
status: "Online",
last_seen: 0,
},
{
name: "David",
id: "160c:97aa:f4ff:52d0:717e:2263:7262:90ed",
status: "Offline",
last_seen: 275,
},
{
name: "Charlie",
id: "6832:d934:2a76:27c0:88ea:2b05:5bf8:4f86",
status: "Online",
last_seen: 0,
},
{
name: "Eve",
id: "5363:e485:d9b9:89a8:3ee4:5d24:b2b5:2ab5",
status: "Offline",
last_seen: 343,
},
{
name: "Peggy",
id: "5673:e221:3236:0a33:29a9:5c5f:ff03:c98d",
status: "Offline",
last_seen: 130,
},
{
name: "Grace",
id: "8946:27f1:2abe:f009:b109:f0af:92d1:4c5b",
status: "Pending",
last_seen: 72,
},
{
name: "Walter",
id: "7bc3:a683:660d:ffc3:a40f:b8ab:2246:ed38",
status: "Offline",
last_seen: 264,
},
{
name: "Mallory",
id: "5b5d:129e:8c3e:4f34:94bf:ffe5:7a8a:b3ae",
status: "Online",
last_seen: 0,
},
{
name: "Eve",
id: "d7db:981a:8885:838b:70b6:a691:1c26:4d59",
status: "Offline",
last_seen: 172,
},
{
name: "Peggy",
id: "1255:426b:034c:0171:d67e:ef4c:d9a5:7da6",
status: "Pending",
last_seen: 81,
},
{
name: "Frank",
id: "1c79:ef2f:c01a:d53b:016d:e2fc:3566:6b85",
status: "Online",
last_seen: 0,
},
{
name: "Judy",
id: "b159:2924:969d:e1f6:e295:f19d:9bf2:8f58",
status: "Offline",
last_seen: 221,
},
{
name: "Judy",
id: "bba4:85aa:bcc7:5ef6:920c:7d74:e921:7d47",
status: "Offline",
last_seen: 168,
},
{
name: "Victor",
id: "dc3f:5b3a:3e71:552a:9cdb:10f2:699a:d8e9",
status: "Offline",
last_seen: 217,
},
{
name: "Victor",
id: "e084:f4cf:be5b:83c1:f1f5:1159:d24d:dea2",
status: "Online",
last_seen: 0,
},
{
name: "Trent",
id: "113c:335a:c844:7307:b192:1c44:fb34:4cc0",
status: "Offline",
last_seen: 77,
},
{
name: "Sybil",
id: "05a0:cbe8:4b89:47e3:81e9:39b7:4966:bbed",
status: "Offline",
last_seen: 145,
},
{
name: "Alice",
id: "0f33:461d:c779:067e:424e:b933:c855:c376",
status: "Online",
last_seen: 0,
},
{
name: "Trent",
id: "a883:16c8:abb4:3ab3:7d6f:beb4:1398:bc9c",
status: "Pending",
last_seen: 189,
},
{
name: "Wendy",
id: "2e7c:1162:1488:6a1e:34fe:0725:bd56:4461",
status: "Pending",
last_seen: 338,
},
{
name: "Judy",
id: "c4e1:6d39:5079:097b:3228:1391:4f59:1be6",
status: "Offline",
last_seen: 352,
},
{
name: "Victor",
id: "d32c:1045:4297:251a:6ec8:16c8:541d:7925",
status: "Offline",
last_seen: 61,
},
{
name: "Zoe",
id: "b6cf:6f86:f510:9f39:93a9:aba9:4632:bb69",
status: "Online",
last_seen: 0,
},
];