chore(rxPage): show no wired connections found error message

libremesh · Mar 25, 2024 · 3a54c5c · 3a54c5c
1 parent 2675efc
commit 3a54c5c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/plugins/lime-plugin-rx/src/rxApi.ts b/plugins/lime-plugin-rx/src/rxApi.ts
@@ -5,7 +5,7 @@ interface DeviceStatus {
     address: string;
 }
 
-interface SwitchStatus {
+export interface SwitchStatus {
     device: string;
     num: number;
     role: string;

diff --git a/plugins/lime-plugin-rx/src/sections/wired.tsx b/plugins/lime-plugin-rx/src/sections/wired.tsx
@@ -6,11 +6,11 @@ import {
     SectionTitle,
 } from "plugins/lime-plugin-rx/src/components/components";
 import { PortsIcon } from "plugins/lime-plugin-rx/src/icons/portsIcon";
-import { StatusResponse } from "plugins/lime-plugin-rx/src/rxApi";
+import { SwitchStatus } from "plugins/lime-plugin-rx/src/rxApi";
 import { useNodeStatus } from "plugins/lime-plugin-rx/src/rxQueries";
 
-const Ports = ({ status }: { status: StatusResponse }) => {
-    const ports = status.switch_status.reduce((acc, obj) => {
+const Ports = ({ switches }: { switches: SwitchStatus[] }) => {
+    const ports = switches.reduce((acc, obj) => {
         const { role } = obj;
         if (!acc[role]) {
             acc[role] = [];
@@ -21,7 +21,6 @@ const Ports = ({ status }: { status: StatusResponse }) => {
 
     return (
         <div className={"flex flex-row px-10"} data-testid="ports-container">
-            {" "}
             {Object.keys(ports).map((role) => {
                 if (
                     role.toLowerCase() === "wan" ||
@@ -58,6 +57,8 @@ const Ports = ({ status }: { status: StatusResponse }) => {
 export const Wired = () => {
     const { data: status, isLoading } = useNodeStatus();
 
+    const switches = status?.switch_status;
+
     return (
         <Section>
             <SectionTitle icon={<PortsIcon className={IconsClassName} />}>
@@ -66,8 +67,12 @@ export const Wired = () => {
             <div className={"mt-4"}>
                 {isLoading ? (
                     <span>Loading...</span>
+                ) : switches.length ? (
+                    <Ports switches={status.switch_status} />
                 ) : (
-                    <Ports status={status} />
+                    <div className={"flex-1 flex justify-center"}>
+                        No wired connections found
+                    </div>
                 )}
             </div>
         </Section>