From e31da6079245167039f6c68c857e53669065c2b4 Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Wed, 30 Aug 2023 16:12:18 +0200 Subject: [PATCH 1/4] Link quickstart into README --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 158cfc170..e1f5ad046 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,5 @@ In here are all the packages we use, all the nixosModules we use/expose, the CLI ## 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) From 508b892c0b8e819d2330c3d3f912ba33183348d8 Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Fri, 1 Sep 2023 17:46:16 +0200 Subject: [PATCH 2/4] UI: Improved UX in Search Bar --- pkgs/ui/src/components/table/searchBar.tsx | 66 +++++++++++++--------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/pkgs/ui/src/components/table/searchBar.tsx b/pkgs/ui/src/components/table/searchBar.tsx index 8aca96928..06ee7d7a8 100644 --- a/pkgs/ui/src/components/table/searchBar.tsx +++ b/pkgs/ui/src/components/table/searchBar.tsx @@ -7,6 +7,10 @@ import { useEffect, useRef, useMemo, + ClassAttributes, + JSX, + Key, + LiHTMLAttributes, } from "react"; import IconButton from "@mui/material/IconButton"; import Tooltip from "@mui/material/Tooltip"; @@ -31,14 +35,19 @@ export function SearchBar(props: SearchBarProps) { let { tableData, setFilteredList } = props; const [search, setSearch] = useState(""); const debouncedSearch = useDebounce(search, 250); + const [open, setOpen] = useState(true); // Define a function to handle the Esc key press function handleEsc(event: React.KeyboardEvent) { if (event.key === "Escape") { - console.log("Escape key pressed"); setSearch(""); setFilteredList(tableData); } + + // check if the key is Enter + if (event.key === "Enter") { + setOpen(false); + } } useEffect(() => { @@ -50,11 +59,12 @@ export function SearchBar(props: SearchBarProps) { } }, [debouncedSearch, tableData, setFilteredList]); - const handleInputChange = (e: React.ChangeEvent) => { - if (e.target.value === "") { + const handleInputChange = (event: any, value: string) => { + if (value === "") { setFilteredList(tableData); } - setSearch(e.target.value); + + setSearch(value); }; const suggestions = useMemo( @@ -65,16 +75,24 @@ export function SearchBar(props: SearchBarProps) { return ( { + return ( +
  • + {option} +
    • + ); + }} onKeyDown={handleEsc} - onChange={(event, value) => { - // do something with the selected value - if (value === null) { - setSearch(""); - setFilteredList(tableData); - } else { - setSearch(value); - } + onInputChange={handleInputChange} + value={search} + open={open} + onOpen={() => { + setOpen(true); + }} + onClose={() => { + setOpen(false); }} renderInput={(params) => ( - // - // - // - // - // ), + startAdornment: ( + + + + + + ), }} - > - {/* {suggestions.map((item, index) => ( - - ))} */} - + > )} /> ); From 75c885eeb5fda48b631486215e39351be2334732 Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Fri, 1 Sep 2023 18:12:35 +0200 Subject: [PATCH 3/4] UI: Improved table for mobile --- pkgs/ui/src/components/table/nodeRow.tsx | 83 ++++---- .../components/table/nodeTableContainer.tsx | 13 +- pkgs/ui/src/components/table/searchBar.tsx | 2 +- pkgs/ui/src/data/nodeData.tsx | 32 ++- pkgs/ui/src/data/nodeDataStatic.tsx | 200 +++++++++--------- 5 files changed, 161 insertions(+), 169 deletions(-) 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, }, From 7c41aa57bbb8e3e8eaa554973e87c897bd45de33 Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Sat, 2 Sep 2023 14:57:45 +0200 Subject: [PATCH 4/4] Error message as snack bar instead of 404 --- pkgs/ui/src/components/sidebar/index.tsx | 37 +++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx index 34f662875..a89f59b65 100644 --- a/pkgs/ui/src/components/sidebar/index.tsx +++ b/pkgs/ui/src/components/sidebar/index.tsx @@ -1,4 +1,5 @@ import { + Alert, Divider, Icon, IconButton, @@ -7,6 +8,7 @@ import { ListItemButton, ListItemIcon, ListItemText, + Snackbar, } from "@mui/material"; import Image from "next/image"; import { ReactNode, useState } from "react"; @@ -21,11 +23,13 @@ import Link from "next/link"; import { tw } from "@/utils/tailwind"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import React from "react"; type MenuEntry = { icon: ReactNode; label: string; to: string; + missing: boolean; } & { subMenuEntries?: MenuEntry[]; }; @@ -35,31 +39,37 @@ const menuEntries: MenuEntry[] = [ icon: , label: "Dashoard", to: "/", + missing: false, }, { icon: , label: "Machines", to: "/machines", + missing: false, }, { icon: , label: "Applications", to: "/applications", + missing: true, }, { icon: , label: "Network", to: "/network", + missing: true, }, { icon: , label: "Templates", to: "/templates", + missing: false, }, { icon: , label: "Backups", to: "/backups", + missing: true, }, ]; @@ -72,6 +82,23 @@ interface SidebarProps { } export function Sidebar(props: SidebarProps) { 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 (