Implement wired role configuration

plugins/lime-plugin-rx/src/rxApi.ts

@@ -1,6 +1,8 @@
 import {
     IGetInternetStatus,
     StatusResponse,
+    SupportedPortRoles,
+    SwitchStatus,
 } from "plugins/lime-plugin-rx/src/rxTypes";
 
 import api from "utils/uhttpd.service";
@@ -10,3 +12,16 @@ export const getNodeStatus = (): Promise<StatusResponse> =>
 
 export const getInternetStatus = (): Promise<IGetInternetStatus> =>
     api.call("lime-metrics", "get_internet_status", {});
+
+export type SetPortRoleArgs = { role: SupportedPortRoles } & Omit<
+    SwitchStatus,
+    "role"
+>;
+
+export const setPortRole = async (
+    newStatus: SetPortRoleArgs
+): Promise<boolean> => {
+    console.log("Setting port role", newStatus);
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    return true;
+};

plugins/lime-plugin-rx/src/rxQueries.ts

@@ -1,6 +1,18 @@
-import { useQuery } from "@tanstack/react-query";
+import { MutationKey } from "@tanstack/query-core/src/types";
+import {
+    UseMutationOptions,
+    useMutation,
+    useQuery,
+} from "@tanstack/react-query";
 
-import { getInternetStatus, getNodeStatus } from "./rxApi";
+import { SupportedPortRoles } from "plugins/lime-plugin-rx/src/rxTypes";
+
+import {
+    SetPortRoleArgs,
+    getInternetStatus,
+    getNodeStatus,
+    setPortRole,
+} from "./rxApi";
 
 const refetchInterval = 2000;
 
@@ -24,3 +36,16 @@ export function useInternetStatus(params?) {
         ...params,
     });
 }
+
+export const useSetPortRole = (
+    options?: Omit<
+        UseMutationOptions<boolean, Error, SetPortRoleArgs>,
+        "mutationFn" | "mutationKey"
+    >
+) => {
+    return useMutation<boolean, Error, SetPortRoleArgs>({
+        mutationFn: setPortRole,
+        mutationKey: ["useSetPortRole"] as MutationKey,
+        ...options,
+    });
+};

plugins/lime-plugin-rx/src/rxTypes.ts

@@ -53,3 +53,9 @@ export interface IGetInternetStatus {
     IPv4: { working: boolean };
     status: string;
 }
+
+export enum SupportedPortRoles {
+    WAN = "wan",
+    LAN = "lan",
+    MESH = "mesh",
+}

plugins/lime-plugin-rx/src/sections/system.tsx

@@ -40,14 +40,21 @@ const SystemInfo = () => {
 
     const boardData = bd as IGetBoardDataResponse;
     const secNum = parseInt(node?.uptime, 10);
+    const ips =
+        node?.ips.map((ip) => ({
+            label: `IPv${ip.version}`,
+            value: ip.address,
+        })) || [];
     const attributes = [
         {
             label: t`Uptime`,
             value: toHHMMSS(node?.uptime, 0),
         },
         { label: t`Device`, value: boardData.board_name },
         { label: t`Firmware`, value: boardData.release.description },
+        ...ips,
     ];
+
     return (
         <div className="flex justify-start px-10">
             <div className="grid grid-cols-4 gap-4">

plugins/lime-plugin-rx/src/sections/wired.tsx

@@ -1,48 +1,260 @@
 import { Trans } from "@lingui/macro";
+import { useEffect, useState } from "preact/hooks";
+
+import Modal, { ModalProps } from "components/Modal/Modal";
+import { useDisclosure } from "components/Modal/useDisclosure";
 
 import {
     IconsClassName,
     Section,
     SectionTitle,
 } from "plugins/lime-plugin-rx/src/components/components";
 import { PortsIcon } from "plugins/lime-plugin-rx/src/icons/portsIcon";
-import { useNodeStatus } from "plugins/lime-plugin-rx/src/rxQueries";
-import { SwitchStatus } from "plugins/lime-plugin-rx/src/rxTypes";
-
-const Ports = ({ switches }: { switches: SwitchStatus[] }) => {
-    const ports = switches.reduce((acc, obj) => {
-        const { role } = obj;
-        if (!acc[role]) {
-            acc[role] = [];
+import {
+    useNodeStatus,
+    useSetPortRole,
+} from "plugins/lime-plugin-rx/src/rxQueries";
+import {
+    SupportedPortRoles,
+    SwitchStatus,
+} from "plugins/lime-plugin-rx/src/rxTypes";
+
+import queryCache from "utils/queryCache";
+
+const liro1 = [
+    {
+        device: "eth0.1",
+        num: 5,
+        role: "wan",
+        link: "down",
+    },
+    {
+        device: "eth0.1",
+        num: 0,
+        role: "cpu",
+        link: "up",
+    },
+    {
+        device: "eth1.2",
+        num: 4,
+        role: "lan",
+        link: "up",
+    },
+    {
+        device: "eth1.2",
+        num: 6,
+        role: "cpu",
+        link: "up",
+    },
+];
+
+const mocked = [
+    {
+        device: "eth1",
+        num: "wan",
+        role: "wan",
+    },
+    {
+        device: "eth0",
+        num: "lan",
+        role: "lan",
+    },
+    {
+        device: "eth2",
+        num: "wan",
+        role: "wan",
+    },
+    {
+        device: "eth30",
+        num: "lan",
+        role: "lan",
+    },
+    {
+        device: "eth214",
+        num: "wan",
+        role: "wan",
+    },
+    {
+        device: "eth05",
+        num: "lan",
+        role: "lan",
+    },
+];
+
+const tplink = [
+    {
+        device: "eth0.1",
+        num: 1,
+        role: "lan",
+        link: "down",
+    },
+    {
+        device: "eth0.1",
+        num: 2,
+        role: "lan",
+        link: "up",
+    },
+    {
+        device: "eth0.1",
+        num: 3,
+        role: "lan",
+        link: "down",
+    },
+    {
+        device: "eth0.1",
+        num: 4,
+        role: "lan",
+        link: "down",
+    },
+    {
+        device: "eth0.1",
+        num: 0,
+        role: "cpu",
+        link: "up",
+    },
+    // Modifactions
+    {
+        device: "eth0.3",
+        num: 0,
+        role: "lan",
+        link: "up",
+    },
+    {
+        device: "eth0.3",
+        num: 1,
+        role: "lan",
+        link: "up",
+    },
+    {
+        device: "eth0.2",
+        num: 0,
+        role: "wan",
+        link: "up",
+    },
+
+    {
+        device: "eth0.2",
+        num: 1,
+        role: "wan",
+        link: "up",
+    },
+];
+
+type PortsByDevice = {
+    [device: string]: SwitchStatus[];
+};
+
+const ChangeRoleConfirmationModal = ({
+    newRole,
+    ...rest
+}: { newRole: string } & ModalProps) => {
+    return (
+        <Modal {...rest} title={<Trans>Changing role to {newRole}</Trans>}>
+            <div className={"flex flex-col gap-4"}>
+                <p>
+                    <Trans>
+                        Changing the role of a port may cause network
+                        interruptions. Are you sure you want to continue?
+                    </Trans>
+                </p>
+            </div>
+        </Modal>
+    );
+};
+
+const PortRoleSelector = ({ port }: { port: SwitchStatus }) => {
+    const { mutateAsync } = useSetPortRole({
+        onSettled: () => {
+            queryCache.invalidateQueries({
+                queryKey: ["lime-rx", "node-status"],
+            });
+        },
+    });
+    const [newRole, setNewRole] = useState<SupportedPortRoles>();
+    const { open, onOpen, onClose } = useDisclosure({
+        onClose() {
+            setNewRole(null);
+        },
+    });
+
+    const changeRole = async () => {
+        await mutateAsync({ ...port, role: newRole });
+        onClose();
+    };
+
+    useEffect(() => {
+        if (newRole) {
+            onOpen();
+        }
+    }, [newRole]);
+
+    const role = port.role.toLowerCase();
+    if (role === "cpu") {
+        return null;
+    }
+    let link = "fill-disabled";
+    if (port.link?.toLowerCase() === "up") link = "fill-primary-dark";
+    return (
+        <div className={"flex flex-col justify-center items-center gap-2"}>
+            <PortsIcon className={`h-12 w-12 ${link}`} />
+            <select
+                className={"pl-2 text-center"}
+                value={role}
+                onChange={(e) => {
+                    setNewRole(
+                        (e.target as HTMLSelectElement)
+                            .value as SupportedPortRoles
+                    );
+                }}
+            >
+                <option value={role}>{role}</option>
+                {Object.values(SupportedPortRoles)
+                    .filter((supportedRoles) => supportedRoles !== role)
+                    .map((filteredRole) => (
+                        <option key={filteredRole} value={filteredRole}>
+                            {filteredRole}
+                        </option>
+                    ))}
+            </select>
+            <ChangeRoleConfirmationModal
+                newRole={newRole}
+                onClose={onClose}
+                isOpen={open}
+                cancelBtn
+                onSuccess={changeRole}
+            />
+        </div>
+    );
+};
+
+const Ports = ({ switches: s }: { switches: SwitchStatus[] }) => {
+    const switches = tplink;
+    const ports: PortsByDevice = switches.reduce((acc, obj) => {
+        const { device } = obj;
+        if (!acc[device]) {
+            acc[device] = [];
         }
-        acc[role].push(obj);
+        acc[device].push(obj);
         return acc;
     }, {});
     return (
         <div
             className={"flex flex-wrap px-10 gap-4 justify-between"}
             data-testid="ports-container"
         >
-            {Object.keys(ports).map((role) => {
-                if (role.toLowerCase() === "cpu") return null;
+            {Object.entries(ports).map(([device, ports], k) => {
                 return (
-                    <div key={role} className={"flex flex-col h-fit"}>
-                        <h2 className={"font-bold"}>{role.toUpperCase()}</h2>
-                        <h2>{ports[role][0].device.toLowerCase()}</h2>
-                        <div className={"flex flex-row gap-5 "}>
-                            {ports[role].map((port) => {
-                                const link =
-                                    port.link?.toLowerCase() === "up"
-                                        ? "fill-primary-dark"
-                                        : "fill-disabled";
-                                return (
-                                    <div key={`${role}-${port.num}`}>
-                                        <PortsIcon
-                                            className={`h-7 w-7 ${link}`}
-                                        />
-                                    </div>
-                                );
-                            })}
+                    <div key={device} className={"flex flex-col h-fit gap-4"}>
+                        <h2 className={"font-bold"}>{device.toUpperCase()}</h2>
+                        <div
+                            key={`${device}${k}`}
+                            className={
+                                "flex flex-row justify-center items-center gap-6"
+                            }
+                        >
+                            {ports.map((port, k) => (
+                                <PortRoleSelector port={port} key={k} />
+                            ))}
                         </div>
                     </div>
                 );