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