Merge pull request 'Link quickstart into README' (#229) from Qubasa-Qubasa-main into main

This commit is contained in:
clan-bot
2023-09-06 15:42:41 +00:00
7 changed files with 236 additions and 198 deletions

View File

@@ -5,4 +5,5 @@ In here are all the packages we use, all the nixosModules we use/expose, the CLI
## cLAN config tool ## cLAN config tool
Find the docs [here](/clan/clan-core/src/branch/main/docs/clan-config.md) - The quickstart guide can be found here: [here](/clan/clan-core/src/branch/main/docs/quickstart.md)
- Find the docs [here](/clan/clan-core/src/branch/main/docs/clan-config.md)

View File

@@ -1,4 +1,5 @@
import { import {
Alert,
Divider, Divider,
Icon, Icon,
IconButton, IconButton,
@@ -7,6 +8,7 @@ import {
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
Snackbar,
} from "@mui/material"; } from "@mui/material";
import Image from "next/image"; import Image from "next/image";
import { ReactNode, useState } from "react"; import { ReactNode, useState } from "react";
@@ -21,11 +23,13 @@ import Link from "next/link";
import { tw } from "@/utils/tailwind"; import { tw } from "@/utils/tailwind";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import React from "react";
type MenuEntry = { type MenuEntry = {
icon: ReactNode; icon: ReactNode;
label: string; label: string;
to: string; to: string;
missing: boolean;
} & { } & {
subMenuEntries?: MenuEntry[]; subMenuEntries?: MenuEntry[];
}; };
@@ -35,31 +39,37 @@ const menuEntries: MenuEntry[] = [
icon: <DashboardIcon />, icon: <DashboardIcon />,
label: "Dashoard", label: "Dashoard",
to: "/", to: "/",
missing: false,
}, },
{ {
icon: <DevicesIcon />, icon: <DevicesIcon />,
label: "Machines", label: "Machines",
to: "/machines", to: "/machines",
missing: false,
}, },
{ {
icon: <AppsIcon />, icon: <AppsIcon />,
label: "Applications", label: "Applications",
to: "/applications", to: "/applications",
missing: true,
}, },
{ {
icon: <LanIcon />, icon: <LanIcon />,
label: "Network", label: "Network",
to: "/network", to: "/network",
missing: true,
}, },
{ {
icon: <DesignServicesIcon />, icon: <DesignServicesIcon />,
label: "Templates", label: "Templates",
to: "/templates", to: "/templates",
missing: false,
}, },
{ {
icon: <BackupIcon />, icon: <BackupIcon />,
label: "Backups", label: "Backups",
to: "/backups", to: "/backups",
missing: true,
}, },
]; ];
@@ -72,6 +82,23 @@ interface SidebarProps {
} }
export function Sidebar(props: SidebarProps) { export function Sidebar(props: SidebarProps) {
const { show, onClose } = props; const { show, onClose } = props;
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setOpen(true);
};
const handleClose = (
event?: React.SyntheticEvent | Event,
reason?: string,
) => {
if (reason === "clickaway") {
return;
}
setOpen(false);
};
return ( return (
<aside <aside
className={tw`${ className={tw`${
@@ -110,7 +137,10 @@ export function Sidebar(props: SidebarProps) {
<ListItemButton <ListItemButton
className="justify-center lg:justify-normal" className="justify-center lg:justify-normal"
LinkComponent={Link} LinkComponent={Link}
href={menuEntry.to} href={menuEntry.missing ? "" : menuEntry.to}
onClickCapture={
menuEntry.missing ? () => handleClick() : undefined
}
> >
<ListItemIcon <ListItemIcon
color="inherit" color="inherit"
@@ -131,6 +161,11 @@ export function Sidebar(props: SidebarProps) {
})} })}
</List> </List>
<Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
<Alert onClose={handleClose} severity="error" sx={{ width: "100%" }}>
Site does not exist yet
</Alert>
</Snackbar>
<Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" /> <Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
<div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block"> <div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block">
<h3 className="mb-2 w-full font-semibold text-white"> <h3 className="mb-2 w-full font-semibold text-white">

View File

@@ -12,54 +12,56 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2 import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
import { Collapse } from "@mui/material"; import { Collapse, useMediaQuery, useTheme } from "@mui/material";
import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData"; import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
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>
);
}
}
export function NodeRow(props: { export function NodeRow(props: {
row: TableData; row: TableData;
selected: string | undefined; selected: string | undefined;
setSelected: (a: string | undefined) => void; setSelected: (a: string | undefined) => void;
}) { }) {
function renderStatus(status: NodeStatusKeys) { const theme = useTheme();
switch (status) { const is_phone = useMediaQuery(theme.breakpoints.down("md"));
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 { row, selected, setSelected } = props;
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
//const labelId = `enhanced-table-checkbox-${index}`; //const labelId = `enhanced-table-checkbox-${index}`;
// Speed optimization. We compare string pointers here instead of the string content. // Speed optimization. We compare string pointers here instead of the string content.
const isSelected = selected == row.id; const isSelected = selected == row.name;
const handleClick = (event: React.MouseEvent<unknown>, name: string) => { const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
if (isSelected) { if (isSelected) {
@@ -93,20 +95,12 @@ export function NodeRow(props: {
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
onClick={(event) => handleClick(event, row.id)} onClick={(event) => handleClick(event, row.name)}
> >
<Stack> <Stack>
<Typography component="div" align="left" variant="body1"> <Typography component="div" align="left" variant="body1">
{row.name} {row.name}
</Typography> </Typography>
<Typography
color="grey"
component="div"
align="left"
variant="body2"
>
{row.id}
</Typography>
</Stack> </Stack>
</TableCell> </TableCell>
<TableCell <TableCell
@@ -120,7 +114,8 @@ export function NodeRow(props: {
onClick={(event) => handleClick(event, row.name)} onClick={(event) => handleClick(event, row.name)}
> >
<Typography component="div" align="left" variant="body1"> <Typography component="div" align="left" variant="body1">
{row.last_seen} days ago {String(row.last_seen).padStart(3, "0")}{" "}
{is_phone ? "days" : "days ago"}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>

View File

@@ -14,6 +14,8 @@ import { NodeRow } from "./nodeRow";
import { TableData } from "@/data/nodeData"; import { TableData } from "@/data/nodeData";
import { useMediaQuery, useTheme } from "@mui/material";
interface HeadCell { interface HeadCell {
disablePadding: boolean; disablePadding: boolean;
id: keyof TableData; id: keyof TableData;
@@ -146,6 +148,9 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
const [order, setOrder] = React.useState<NodeOrder>("asc"); const [order, setOrder] = React.useState<NodeOrder>("asc");
const [orderBy, setOrderBy] = React.useState<keyof TableData>("status"); const [orderBy, setOrderBy] = React.useState<keyof TableData>("status");
const theme = useTheme();
const is_phone = useMediaQuery(theme.breakpoints.down("sm"));
// Avoid a layout jump when reaching the last page with empty rows. // Avoid a layout jump when reaching the last page with empty rows.
const emptyRows = const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - tableData.length) : 0; page > 0 ? Math.max(0, (1 + page) * rowsPerPage - tableData.length) : 0;
@@ -169,11 +174,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
); );
return ( return (
<TableContainer> <TableContainer>
<Table <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
size={dense ? "small" : "medium"}
>
<EnhancedTableHead <EnhancedTableHead
order={order} order={order}
orderBy={orderBy} orderBy={orderBy}
@@ -184,7 +185,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
{visibleRows.map((row, index) => { {visibleRows.map((row, index) => {
return ( return (
<NodeRow <NodeRow
key={row.id} key={row.name}
row={row} row={row}
selected={selected} selected={selected}
setSelected={setSelected} setSelected={setSelected}

View File

@@ -7,6 +7,10 @@ import {
useEffect, useEffect,
useRef, useRef,
useMemo, useMemo,
ClassAttributes,
JSX,
Key,
LiHTMLAttributes,
} from "react"; } from "react";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
@@ -31,14 +35,19 @@ export function SearchBar(props: SearchBarProps) {
let { tableData, setFilteredList } = props; let { tableData, setFilteredList } = props;
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const debouncedSearch = useDebounce(search, 250); const debouncedSearch = useDebounce(search, 250);
const [open, setOpen] = useState(false);
// Define a function to handle the Esc key press // Define a function to handle the Esc key press
function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) { function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) {
if (event.key === "Escape") { if (event.key === "Escape") {
console.log("Escape key pressed");
setSearch(""); setSearch("");
setFilteredList(tableData); setFilteredList(tableData);
} }
// check if the key is Enter
if (event.key === "Enter") {
setOpen(false);
}
} }
useEffect(() => { useEffect(() => {
@@ -50,11 +59,12 @@ export function SearchBar(props: SearchBarProps) {
} }
}, [debouncedSearch, tableData, setFilteredList]); }, [debouncedSearch, tableData, setFilteredList]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (event: any, value: string) => {
if (e.target.value === "") { if (value === "") {
setFilteredList(tableData); setFilteredList(tableData);
} }
setSearch(e.target.value);
setSearch(value);
}; };
const suggestions = useMemo( const suggestions = useMemo(
@@ -65,16 +75,24 @@ export function SearchBar(props: SearchBarProps) {
return ( return (
<Autocomplete <Autocomplete
freeSolo freeSolo
autoComplete
options={suggestions} options={suggestions}
renderOption={(props: any, option: any) => {
return (
<li {...props} key={option}>
{option}
</li>
);
}}
onKeyDown={handleEsc} onKeyDown={handleEsc}
onChange={(event, value) => { onInputChange={handleInputChange}
// do something with the selected value value={search}
if (value === null) { open={open}
setSearch(""); onOpen={() => {
setFilteredList(tableData); setOpen(true);
} else { }}
setSearch(value); onClose={() => {
} setOpen(false);
}} }}
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
@@ -82,26 +100,18 @@ export function SearchBar(props: SearchBarProps) {
fullWidth fullWidth
label="Search" label="Search"
variant="outlined" variant="outlined"
value={search}
onChange={handleInputChange}
autoComplete="nickname" autoComplete="nickname"
InputProps={{ InputProps={{
...params.InputProps, ...params.InputProps,
// endAdornment: ( startAdornment: (
// <InputAdornment position="end"> <InputAdornment position="start">
// <IconButton> <IconButton>
// <SearchIcon /> <SearchIcon />
// </IconButton> </IconButton>
// </InputAdornment> </InputAdornment>
// ), ),
}} }}
> ></TextField>
{/* {suggestions.map((item, index) => (
<option key={index} onClick={() => handleSelect(item)}>
{item}
</option>
))} */}
</TextField>
)} )}
/> />
); );

View File

@@ -1,6 +1,5 @@
export interface TableData { export interface TableData {
name: string; name: string;
id: string;
status: NodeStatusKeys; status: NodeStatusKeys;
last_seen: number; last_seen: number;
} }
@@ -15,7 +14,6 @@ export type NodeStatusKeys = (typeof NodeStatus)[keyof typeof NodeStatus];
function createData( function createData(
name: string, name: string,
id: string,
status: NodeStatusKeys, status: NodeStatusKeys,
last_seen: number, last_seen: number,
): TableData { ): TableData {
@@ -25,7 +23,6 @@ function createData(
return { return {
name, name,
id,
status, status,
last_seen: last_seen, last_seen: last_seen,
}; };
@@ -97,69 +94,69 @@ function getRandomLastSeen(status: NodeStatusKeys): number {
export const tableData = [ export const tableData = [
createData( createData(
"Matchbox", "Matchbox",
"42:0:f21:6916:e333:c47e:4b5c:e74c",
NodeStatus.Pending, NodeStatus.Pending,
0, 0,
), ),
createData( createData(
"Ahorn", "Ahorn",
"42:0:3c46:b51c:b34d:b7e1:3b02:8d24",
NodeStatus.Online, NodeStatus.Online,
0, 0,
), ),
createData( createData(
"Yellow", "Yellow",
"42:0:3c46:98ac:9c80:4f25:50e3:1d8f",
NodeStatus.Offline, NodeStatus.Offline,
16.0, 16.0,
), ),
createData( createData(
"Rauter", "Rauter",
"42:0:61ea:b777:61ea:803:f885:3523",
NodeStatus.Offline, NodeStatus.Offline,
6.0, 6.0,
), ),
createData( createData(
"Porree", "Porree",
"42:0:e644:4499:d034:895e:34c8:6f9a",
NodeStatus.Offline, NodeStatus.Offline,
13, 13,
), ),
createData( createData(
"Helsinki", "Helsinki",
"42:0:3c46:fd4a:acf9:e971:6036:8047",
NodeStatus.Online, NodeStatus.Online,
0, 0,
), ),
createData( createData(
"Kelle", "Kelle",
"42:0:3c46:362d:a9aa:4996:c78e:839a",
NodeStatus.Online, NodeStatus.Online,
0, 0,
), ),
createData( createData(
"Shodan", "Shodan",
"42:0:3c46:6745:adf4:a844:26c4:bf91",
NodeStatus.Online, NodeStatus.Online,
0.0, 0.0,
), ),
createData( createData(
"Qubasa", "Qubasa",
"42:0:3c46:123e:bbea:3529:db39:6764",
NodeStatus.Offline, NodeStatus.Offline,
7.0, 7.0,
), ),
createData( createData(
"Green", "Green",
"42:0:a46e:5af:632c:d2fe:a71d:cde0",
NodeStatus.Offline, NodeStatus.Offline,
2, 2,
), ),
createData("Gum", "42:0:e644:238d:3e46:c884:6ec5:16c", NodeStatus.Offline, 0), createData("Gum", NodeStatus.Offline, 0),
createData("Xu", "42:0:ca48:c2c2:19fb:a0e9:95b9:794f", NodeStatus.Online, 0), createData("Xu", NodeStatus.Online, 0),
createData( createData(
"Zaatar", "Zaatar",
"42:0:3c46:156e:10b6:3bd6:6e82:b2cd",
NodeStatus.Online, NodeStatus.Online,
0, 0,
), ),
@@ -171,12 +168,11 @@ export function executeCreateData(): TableData[] {
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
// Generate dummy data // Generate dummy data
let name = getRandomName(); let name = getRandomName();
let id = getRandomId();
let status = getRandomStatus(); let status = getRandomStatus();
let last_seen = getRandomLastSeen(status); let last_seen = getRandomLastSeen(status);
// Call the createData function and push the result to the array // Call the createData function and push the result to the array
result.push(createData(name, id, status, last_seen)); result.push(createData(name, status, last_seen));
} }
return result; return result;
} }

View File

@@ -1,601 +1,601 @@
export const tableData = [ export const tableData = [
{ {
name: "Wendy200", name: "Wendy200",
id: "b960:e38b:3d05:84b9:6e26:612c:7dcf:0b7f",
status: "Pending", status: "Pending",
last_seen: 115, last_seen: 115,
}, },
{ {
name: "Charlie201", name: "Charlie201",
id: "fa6a:c368:f557:7a8f:965d:fa00:4769:d552",
status: "Pending", status: "Pending",
last_seen: 320, last_seen: 320,
}, },
{ {
name: "Bob202", name: "Bob202",
id: "4736:bd8b:fb91:bb46:1665:f461:0cc4:6e70",
status: "Offline", status: "Offline",
last_seen: 347, last_seen: 347,
}, },
{ {
name: "Sybil203", name: "Sybil203",
id: "2d95:93ea:3107:5804:0de4:3642:7bdc:e657",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Trent204", name: "Trent204",
id: "93ae:1ca8:cf9a:e13f:a58b:086c:adca:b4cb",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Eve205", name: "Eve205",
id: "98b6:0ee0:5989:c11c:6f54:6aec:b1ec:2b22",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Alice206", name: "Alice206",
id: "2d95:afac:1a09:544a:16db:2956:2c0f:643a",
status: "Offline", status: "Offline",
last_seen: 256, last_seen: 256,
}, },
{ {
name: "Frank207", name: "Frank207",
id: "d48a:19f8:f7c3:12d0:6057:9206:b8bd:6c4b",
status: "Offline", status: "Offline",
last_seen: 248, last_seen: 248,
}, },
{ {
name: "Eve208", name: "Eve208",
id: "6cdf:5787:7e5f:cb0a:9930:6707:57bc:8be4",
status: "Pending", status: "Pending",
last_seen: 234, last_seen: 234,
}, },
{ {
name: "Bob209", name: "Bob209",
id: "9510:a6ff:7440:4319:26e8:85ed:0960:ee39",
status: "Pending", status: "Pending",
last_seen: 178, last_seen: 178,
}, },
{ {
name: "Peggy210", name: "Peggy210",
id: "60d9:c015:74d6:6b98:5a3a:0473:bacb:4b2a",
status: "Offline", status: "Offline",
last_seen: 256, last_seen: 256,
}, },
{ {
name: "Heidi211", name: "Heidi211",
id: "c21d:af34:2da7:c8c1:3159:4513:7d35:779c",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Charlie212", name: "Charlie212",
id: "32b1:3abd:21f5:31f6:58c8:aad0:5c42:04e3",
status: "Pending", status: "Pending",
last_seen: 15, last_seen: 15,
}, },
{ {
name: "Victor213", name: "Victor213",
id: "b4df:4f69:fa76:4226:bd3b:4eb5:4c8d:a844",
status: "Pending", status: "Pending",
last_seen: 171, last_seen: 171,
}, },
{ {
name: "Heidi214", name: "Heidi214",
id: "2cec:e107:3c20:1720:e193:b895:d04d:3207",
status: "Pending", status: "Pending",
last_seen: 287, last_seen: 287,
}, },
{ {
name: "Walter215", name: "Walter215",
id: "431d:44fd:a77d:03c2:e4c5:37e4:d890:45f7",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Alice216", name: "Alice216",
id: "4869:c55e:ffc2:a964:83cd:ec96:0be1:1094",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Zoe217", name: "Zoe217",
id: "c394:621c:ab5b:d6d3:e1f5:5fc8:824f:2782",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Judy218", name: "Judy218",
id: "d4a0:2299:f649:a161:47fd:c17a:e95c:54f8",
status: "Pending", status: "Pending",
last_seen: 184, last_seen: 184,
}, },
{ {
name: "Mallory219", name: "Mallory219",
id: "97e1:ca9e:37f8:8cde:aa37:cd10:69e2:05e4",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Judy220", name: "Judy220",
id: "7f7a:e2fa:5b79:6984:3059:85a3:ecc3:32d0",
status: "Offline", status: "Offline",
last_seen: 63, last_seen: 63,
}, },
{ {
name: "Wendy221", name: "Wendy221",
id: "149a:9daa:7f75:cf20:fc02:9405:adad:5c26",
status: "Offline", status: "Offline",
last_seen: 181, last_seen: 181,
}, },
{ {
name: "Bob222", name: "Bob222",
id: "761e:8560:b6ad:046b:ebb1:6958:1981:d5a7",
status: "Offline", status: "Offline",
last_seen: 300, last_seen: 300,
}, },
{ {
name: "Eve223", name: "Eve223",
id: "e9ed:def1:e050:856c:5c33:ecc9:f6d7:b9ff",
status: "Pending", status: "Pending",
last_seen: 60, last_seen: 60,
}, },
{ {
name: "Judy224", name: "Judy224",
id: "c5d5:92a0:7fea:0c55:9d77:b8fb:ee3e:59d9",
status: "Pending", status: "Pending",
last_seen: 218, last_seen: 218,
}, },
{ {
name: "Peggy225", name: "Peggy225",
id: "71c4:c342:3708:dda8:f09e:4855:c191:676e",
status: "Offline", status: "Offline",
last_seen: 140, last_seen: 140,
}, },
{ {
name: "Frank226", name: "Frank226",
id: "0338:8c78:272f:2f2c:3ddd:187d:a3dd:878b",
status: "Offline", status: "Offline",
last_seen: 106, last_seen: 106,
}, },
{ {
name: "Ivan227", name: "Ivan227",
id: "e67c:c18d:f98e:d441:733d:4904:b54f:6fc1",
status: "Offline", status: "Offline",
last_seen: 296, last_seen: 296,
}, },
{ {
name: "Charlie228", name: "Charlie228",
id: "d6d7:de33:1b48:2a4a:ad49:7c8d:b585:67ea",
status: "Pending", status: "Pending",
last_seen: 81, last_seen: 81,
}, },
{ {
name: "Victor229", name: "Victor229",
id: "2cba:bfb7:11d0:9d09:e025:3a3d:1cc7:59cb",
status: "Pending", status: "Pending",
last_seen: 46, last_seen: 46,
}, },
{ {
name: "Mallory230", name: "Mallory230",
id: "878d:b63e:57b0:576c:7bd6:e4e4:b01a:714d",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Wendy231", name: "Wendy231",
id: "ec44:61cb:0c8f:1226:298b:d562:3bf6:afbe",
status: "Offline", status: "Offline",
last_seen: 205, last_seen: 205,
}, },
{ {
name: "David232", name: "David232",
id: "ed4d:bac1:32c3:c0f0:70e0:7584:acb8:e420",
status: "Pending", status: "Pending",
last_seen: 11, last_seen: 11,
}, },
{ {
name: "Eve233", name: "Eve233",
id: "25b4:2f0d:7d28:dcd4:415c:bd1e:a701:91fd",
status: "Offline", status: "Offline",
last_seen: 346, last_seen: 346,
}, },
{ {
name: "David234", name: "David234",
id: "051a:96d5:743a:5574:d365:6a8a:c972:109c",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Ivan235", name: "Ivan235",
id: "fec5:bb6c:d958:f982:808b:da80:0fe8:3f26",
status: "Pending", status: "Pending",
last_seen: 291, last_seen: 291,
}, },
{ {
name: "Mallory236", name: "Mallory236",
id: "8d35:ba4f:c762:b11c:b668:ddc0:d936:9192",
status: "Offline", status: "Offline",
last_seen: 321, last_seen: 321,
}, },
{ {
name: "David237", name: "David237",
id: "0488:19ac:b107:32bc:38bd:6ebf:9a60:ba58",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Victor238", name: "Victor238",
id: "0d54:af9b:3792:77cd:1215:975f:6bf2:4e2d",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Judy239", name: "Judy239",
id: "fe9e:a71b:8899:b4c4:eb0e:1ff1:2f1f:17fc",
status: "Offline", status: "Offline",
last_seen: 3, last_seen: 3,
}, },
{ {
name: "Trent240", name: "Trent240",
id: "930b:331e:6241:d8ce:7bea:f5de:6e85:86c4",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Ivan241", name: "Ivan241",
id: "26b9:10d1:8530:cf9a:4e04:1400:216d:e68d",
status: "Pending", status: "Pending",
last_seen: 38, last_seen: 38,
}, },
{ {
name: "Mallory242", name: "Mallory242",
id: "bef3:c520:fdcf:131c:b1b1:7fcc:5113:2d37",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Charlie243", name: "Charlie243",
id: "ae2d:6d80:c8df:3570:9bc0:d104:3dba:1340",
status: "Offline", status: "Offline",
last_seen: 288, last_seen: 288,
}, },
{ {
name: "Ivan244", name: "Ivan244",
id: "8b0b:b94a:3e5b:66fa:a2f2:38b9:0422:c827",
status: "Offline", status: "Offline",
last_seen: 225, last_seen: 225,
}, },
{ {
name: "Zoe245", name: "Zoe245",
id: "f18f:f596:694f:423a:afdf:0f1d:a94a:b36d",
status: "Pending", status: "Pending",
last_seen: 56, last_seen: 56,
}, },
{ {
name: "Trent246", name: "Trent246",
id: "b54a:2d8e:eb76:db56:3712:3d2c:6b23:8c0d",
status: "Pending", status: "Pending",
last_seen: 111, last_seen: 111,
}, },
{ {
name: "Sybil247", name: "Sybil247",
id: "bc71:ac78:ded0:c384:eeef:eda2:b0a0:7dbe",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Wendy248", name: "Wendy248",
id: "38de:8eef:c380:ff31:a49f:10b9:7678:dc29",
status: "Offline", status: "Offline",
last_seen: 299, last_seen: 299,
}, },
{ {
name: "David249", name: "David249",
id: "455a:18d9:0322:a575:6cbc:7fe1:1c6a:783a",
status: "Pending", status: "Pending",
last_seen: 303, last_seen: 303,
}, },
{ {
name: "Trent250", name: "Trent250",
id: "8d44:1910:2685:9783:4027:977e:a859:6f48",
status: "Offline", status: "Offline",
last_seen: 69, last_seen: 69,
}, },
{ {
name: "Eve251", name: "Eve251",
id: "b5cd:3aeb:3e35:91b9:0ba3:7dac:e090:62f6",
status: "Pending", status: "Pending",
last_seen: 354, last_seen: 354,
}, },
{ {
name: "Oscar252", name: "Oscar252",
id: "3c62:cb7c:9a79:c2f6:03d2:99e6:60e3:4d84",
status: "Offline", status: "Offline",
last_seen: 54, last_seen: 54,
}, },
{ {
name: "Sybil253", name: "Sybil253",
id: "e106:63c1:1dfb:2b92:9731:590c:96ce:a9df",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Zoe254", name: "Zoe254",
id: "adae:66b1:b204:1d42:55b4:4ea0:230d:9c49",
status: "Offline", status: "Offline",
last_seen: 118, last_seen: 118,
}, },
{ {
name: "Bob255", name: "Bob255",
id: "4f40:fce2:feb2:e28f:598a:71b0:3030:9d7b",
status: "Pending", status: "Pending",
last_seen: 112, last_seen: 112,
}, },
{ {
name: "Alice256", name: "Alice256",
id: "33a9:11e3:5653:1441:21a4:c1e0:a0ae:274a",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Eve257", name: "Eve257",
id: "f05f:8604:fd65:dcbe:12b7:8f9d:b0e1:5a44",
status: "Pending", status: "Pending",
last_seen: 97, last_seen: 97,
}, },
{ {
name: "Peggy258", name: "Peggy258",
id: "1474:39f6:5543:3698:a191:44dc:3d42:8a5f",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Ivan259", name: "Ivan259",
id: "0ddc:afa7:b0c4:9a90:41c3:958c:6eb6:7974",
status: "Pending", status: "Pending",
last_seen: 99, last_seen: 99,
}, },
{ {
name: "Victor260", name: "Victor260",
id: "a09f:4a1e:8e47:0c0a:c4a4:ce7e:5d87:9657",
status: "Offline", status: "Offline",
last_seen: 231, last_seen: 231,
}, },
{ {
name: "Grace261", name: "Grace261",
id: "be97:8f9d:79f9:ffe9:5cfd:8359:61d6:77fd",
status: "Offline", status: "Offline",
last_seen: 199, last_seen: 199,
}, },
{ {
name: "Heidi262", name: "Heidi262",
id: "793e:ea68:046b:7fcb:fdc8:8d0b:6771:f268",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Sybil263", name: "Sybil263",
id: "4ba1:82c3:a574:f48c:0d4e:0bb5:dfef:21e0",
status: "Pending", status: "Pending",
last_seen: 89, last_seen: 89,
}, },
{ {
name: "Alice264", name: "Alice264",
id: "4301:64b5:7f80:ed14:67fb:c062:8720:8c98",
status: "Pending", status: "Pending",
last_seen: 354, last_seen: 354,
}, },
{ {
name: "Zoe265", name: "Zoe265",
id: "3bf5:1907:d39a:d752:6146:5a93:51f1:5766",
status: "Pending", status: "Pending",
last_seen: 12, last_seen: 12,
}, },
{ {
name: "Victor266", name: "Victor266",
id: "208d:9605:56a5:b55d:d0e9:9ae2:2a43:3031",
status: "Pending", status: "Pending",
last_seen: 24, last_seen: 24,
}, },
{ {
name: "Ivan267", name: "Ivan267",
id: "042e:115a:2455:3a0f:f6d2:6d11:36ae:b9f8",
status: "Pending", status: "Pending",
last_seen: 238, last_seen: 238,
}, },
{ {
name: "Peggy268", name: "Peggy268",
id: "86cf:d5f1:0aa0:66dd:0287:2203:3abc:61f5",
status: "Offline", status: "Offline",
last_seen: 113, last_seen: 113,
}, },
{ {
name: "Oscar269", name: "Oscar269",
id: "f79e:88ef:060b:4f70:6e2b:122d:d4fb:80cc",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Alice270", name: "Alice270",
id: "d280:b667:8dd6:29f5:7eaa:ae38:8651:2664",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Eve271", name: "Eve271",
id: "607b:707a:07d1:1fe6:7af9:2988:29ab:6650",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Mallory272", name: "Mallory272",
id: "c140:5d2d:5066:09cf:908c:35a8:8824:485d",
status: "Pending", status: "Pending",
last_seen: 180, last_seen: 180,
}, },
{ {
name: "David273", name: "David273",
id: "34c6:6199:e4f6:5900:3429:730e:12b2:67dd",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Eve274", name: "Eve274",
id: "68d7:9503:12af:3352:c8a7:a6be:8f92:95cb",
status: "Pending", status: "Pending",
last_seen: 164, last_seen: 164,
}, },
{ {
name: "Walter275", name: "Walter275",
id: "723a:000b:dd46:5d88:0dbe:24df:991b:4660",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Eve276", name: "Eve276",
id: "c1bb:015e:e52f:8299:10bb:37a3:ed55:92d2",
status: "Offline", status: "Offline",
last_seen: 123, last_seen: 123,
}, },
{ {
name: "Wendy277", name: "Wendy277",
id: "3b91:c220:5253:9c8e:b5bc:f125:71df:314a",
status: "Offline", status: "Offline",
last_seen: 211, last_seen: 211,
}, },
{ {
name: "Charlie278", name: "Charlie278",
id: "1b8e:9c86:2075:63cf:6486:53e1:126b:30df",
status: "Pending", status: "Pending",
last_seen: 178, last_seen: 178,
}, },
{ {
name: "Eve279", name: "Eve279",
id: "61c3:1746:2159:033c:f361:dcaf:146c:db82",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Zoe280", name: "Zoe280",
id: "f48e:98c2:b4d5:5763:881b:4f3b:ee00:144c",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Mallory281", name: "Mallory281",
id: "038b:569d:0c14:e7d2:c887:2c18:5387:e625",
status: "Pending", status: "Pending",
last_seen: 143, last_seen: 143,
}, },
{ {
name: "Bob282", name: "Bob282",
id: "f7c3:e367:18db:7860:4ab7:1810:cdf9:00c6",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Judy283", name: "Judy283",
id: "fd6a:b87a:4069:ae0a:2b9c:93cc:a96f:70bf",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Grace284", name: "Grace284",
id: "b467:9c99:69a7:5cf3:7ff3:ee12:56c5:2391",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Zoe285", name: "Zoe285",
id: "f6e6:3f2b:bbf1:6f49:19ac:19a4:23b1:c34a",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Grace286", name: "Grace286",
id: "a157:a7c4:269d:fe98:1b51:d62c:0651:9fc7",
status: "Pending", status: "Pending",
last_seen: 92, last_seen: 92,
}, },
{ {
name: "Walter287", name: "Walter287",
id: "cc2b:67a0:aabe:68ca:d16b:31c9:9421:d6da",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Walter288", name: "Walter288",
id: "ddf8:10e8:fb3c:a474:0344:a97a:cc41:15ce",
status: "Pending", status: "Pending",
last_seen: 248, last_seen: 248,
}, },
{ {
name: "David289", name: "David289",
id: "a310:d30e:a4e9:b41b:6901:cf56:4da7:7909",
status: "Pending", status: "Pending",
last_seen: 301, last_seen: 301,
}, },
{ {
name: "Peggy290", name: "Peggy290",
id: "ce03:fb42:fa64:7543:faa9:2975:8caa:0ae6",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Sybil291", name: "Sybil291",
id: "34c5:9736:0f1d:da41:7c34:6443:07b8:31a5",
status: "Pending", status: "Pending",
last_seen: 114, last_seen: 114,
}, },
{ {
name: "Heidi292", name: "Heidi292",
id: "c5a0:8e3d:5935:9adc:458c:ca81:468f:4295",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "David293", name: "David293",
id: "7a5d:2399:9083:cad8:669f:fbc4:8c79:6183",
status: "Offline", status: "Offline",
last_seen: 165, last_seen: 165,
}, },
{ {
name: "Judy294", name: "Judy294",
id: "7775:9779:7222:7c6f:1d9c:44e2:1269:661a",
status: "Pending", status: "Pending",
last_seen: 52, last_seen: 52,
}, },
{ {
name: "Trent295", name: "Trent295",
id: "2a1f:f4ff:a9ac:2ade:fc6e:d291:b66d:3a03",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Heidi296", name: "Heidi296",
id: "7b50:7d90:e833:2f4a:4f24:ac9e:8165:68b4",
status: "Pending", status: "Pending",
last_seen: 129, last_seen: 129,
}, },
{ {
name: "Trent297", name: "Trent297",
id: "5932:1221:12d7:5a62:c218:2f47:9447:5117",
status: "Pending", status: "Pending",
last_seen: 108, last_seen: 108,
}, },
{ {
name: "David298", name: "David298",
id: "9d2e:54e6:f504:3b5e:b9d1:ab90:b9e0:3db5",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },
{ {
name: "Sybil299", name: "Sybil299",
id: "07c2:1588:8d1d:fadf:aa9b:e1e3:e21f:ee0e",
status: "Online", status: "Online",
last_seen: 0, last_seen: 0,
}, },