Use shared state async to store reference state

plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider.tsx

@@ -26,7 +26,7 @@ import { getMeshWideError } from "plugins/lime-plugin-mesh-wide-upgrade/src/util
 import { useSession } from "utils/queries";
 import queryCache from "utils/queryCache";
 
-const NODE_STATUS_REFETCH_INTERVAL = 2000;
+const NODE_STATUS_REFETCH_INTERVAL = 5000;
 
 interface MeshWideUpgradeContextProps {
     data?: MeshWideUpgradeInfo;

plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx

@@ -1,17 +1,20 @@
 import { Trans } from "@lingui/macro";
 import { useState } from "preact/hooks";
+import { useCallback } from "react";
 
 import { Warning } from "components/icons/status";
 import Tabs from "components/tabs";
+import { useToast } from "components/toast/toastProvider";
 
 import { StatusAndButton } from "plugins/lime-plugin-mesh-wide/src/components/Components";
-import { useSetReferenceState } from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/SetReferenceStateBtn";
+import { useSetLinkReferenceStateModal } from "plugins/lime-plugin-mesh-wide/src/components/configPage/modals";
 import {
     getQueryByLinkType,
     usePointToPointErrors,
 } from "plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks";
 import { MacToMacLink } from "plugins/lime-plugin-mesh-wide/src/lib/links/PointToPointLink";
 import { readableBytes } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
+import { useSetLinkReferenceState } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
 import {
     BaseMacToMacLink,
     BatmanLinkErrorCodes,
@@ -99,6 +102,9 @@ const WifiDetail = ({
                 >
                     {node?.chains?.toString() ?? "0/0"}
                 </TitleAndText>
+                <TitleAndText title={<Trans>Channel</Trans>}>
+                    {node?.channel?.toString() ?? "0"}
+                </TitleAndText>
             </Row>
             <Row>
                 <TitleAndText title={<Trans>TxRate</Trans>}>
@@ -221,6 +227,8 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         type: reference.type,
     });
 
+    const isDown = !errors.linkUp;
+
     // Check if there are errors of global reference state to shown
     const { reference: fetchDataReference } = getQueryByLinkType(
         reference.type
@@ -232,8 +240,63 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         referenceError = true;
     }
 
+    const { toggleModal, confirmModal, isModalOpen } =
+        useSetLinkReferenceStateModal();
+    const { showToast } = useToast();
+
     // Mutation to update the reference state
-    const { mutate, btnText } = useSetReferenceState(reference.type);
+    const nodesToUpdate = reference.nodes.reduce((acc, node) => {
+        acc[node.ipv4] = node.hostname;
+        return acc;
+    }, {});
+    const { callMutations } = useSetLinkReferenceState({
+        linkType: reference.type,
+        linkToUpdate: reference,
+        isDown,
+        nodesToUpdate,
+        params: {
+            onSuccess: () => {
+                showToast({
+                    text: <Trans>New reference state set!</Trans>,
+                });
+            },
+            onError: () => {
+                showToast({
+                    text: <Trans>Error setting new reference state!</Trans>,
+                });
+            },
+            onSettled: () => {
+                if (isModalOpen) toggleModal();
+            },
+        },
+    });
+
+    const setReferenceState = useCallback(async () => {
+        confirmModal(
+            reference.type,
+            Object.values(nodesToUpdate),
+            isDown,
+            async () => {
+                await callMutations();
+            }
+        );
+    }, [callMutations, confirmModal, isDown, nodesToUpdate, reference.type]);
+
+    let btnText = (
+        <Trans>
+            Set reference state for this
+            <br /> {reference.type} link
+        </Trans>
+    );
+    if (isDown) {
+        btnText = (
+            <Trans>
+                Delete this {reference.type} link
+                <br />
+                from reference state
+            </Trans>
+        );
+    }
 
     let errorMessage = <Trans>Same status as in the reference state</Trans>;
     if (referenceError) {
@@ -252,7 +315,7 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         <StatusAndButton
             isError={hasError}
             btn={hasError && btnText}
-            onClick={mutate}
+            onClick={setReferenceState}
         >
             {errorMessage}
         </StatusAndButton>

plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx

@@ -1,16 +1,23 @@
 import { Trans } from "@lingui/macro";
+import { useCallback } from "react";
+
+import { useToast } from "components/toast/toastProvider";
 
 import { StatusAndButton } from "plugins/lime-plugin-mesh-wide/src/components/Components";
 import RemoteRebootBtn from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/RebootNodeBtn";
-import { useSetReferenceState } from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/SetReferenceStateBtn";
 import UpdateNodeInfoBtn from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/UpdateNodeInfoBtn";
 import {
     Row,
     TitleAndText,
 } from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/index";
+import { useSetNoeInfoReferenceStateModal } from "plugins/lime-plugin-mesh-wide/src/components/configPage/modals";
 import { useSingleNodeErrors } from "plugins/lime-plugin-mesh-wide/src/hooks/useSingleNodeErrors";
+import useSyncWithNode from "plugins/lime-plugin-mesh-wide/src/hooks/useSyncWithNode";
 import { getArrayDifference } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
-import { useMeshWideNodesReference } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
+import {
+    useMeshWideNodesReference,
+    useSetNodeInfoReferenceState,
+} from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
 import {
     NodeErrorCodes,
     NodeMapFeature,
@@ -19,14 +26,6 @@ import {
 import { isEmpty } from "utils/utils";
 
 const NodeDetails = ({ actual, reference, name }: NodeMapFeature) => {
-    // If node no reference is set, is a new node
-    const nodeToShow = reference ?? actual;
-
-    const uptime = nodeToShow.uptime;
-    const firmware = nodeToShow.firmware_version;
-    const ipv6 = nodeToShow.ipv6;
-    const ipv4 = nodeToShow.ipv4;
-    const device = nodeToShow.device;
     const { errors, isDown } = useSingleNodeErrors({
         actual,
         reference,
@@ -35,6 +34,12 @@ const NodeDetails = ({ actual, reference, name }: NodeMapFeature) => {
     if (isDown) {
         return <Trans>This node seems down</Trans>;
     }
+
+    const uptime = actual.uptime;
+    const firmware = actual.firmware_version;
+    const ipv6 = actual.ipv6;
+    const ipv4 = actual.ipv4;
+    const device = actual.device;
     const macs = actual.macs;
 
     return (
@@ -43,10 +48,11 @@ const NodeDetails = ({ actual, reference, name }: NodeMapFeature) => {
                 <div className={"text-3xl"}>{name}</div>
                 <div className={"flex flex-row gap-4"}>
                     <UpdateNodeInfoBtn
-                        ip={nodeToShow.ipv4}
-                        nodeName={nodeToShow.hostname}
+                        ip={actual.ipv4}
+                        nodeName={actual.hostname}
+                        updateOnMount={false}
                     />
-                    <RemoteRebootBtn node={nodeToShow} />
+                    <RemoteRebootBtn node={actual} />
                 </div>
             </Row>
             <Row>
@@ -111,12 +117,51 @@ export const NodeReferenceStatus = ({ actual, reference }: NodeMapFeature) => {
         reference,
     });
 
+    const hostname = isDown ? reference.hostname : actual.hostname;
+    const ip = isDown ? reference.ipv4 : actual.ipv4;
+
     // Check if there are errors of global reference state to shown
     const { data: meshWideNodesReference, isError: isReferenceError } =
         useMeshWideNodesReference({});
 
+    const { toggleModal, confirmModal, isModalOpen } =
+        useSetNoeInfoReferenceStateModal();
+    const { showToast } = useToast();
+    const { syncNode } = useSyncWithNode({ ip, nodeName: hostname });
+
     // Mutation to update the reference state
-    const { mutate, btnText } = useSetReferenceState("node_info");
+    const { mutateAsync } = useSetNodeInfoReferenceState({
+        ip,
+        hostname,
+        isDown,
+        params: {
+            onSuccess: async () => {
+                await syncNode();
+                showToast({
+                    text: <Trans>New reference state set!</Trans>,
+                });
+            },
+            onError: () => {
+                showToast({
+                    text: <Trans>Error setting new reference state!</Trans>,
+                });
+            },
+            onSettled: () => {
+                if (isModalOpen) toggleModal();
+            },
+        },
+    });
+
+    const setReferenceState = useCallback(async () => {
+        confirmModal(hostname, isDown, async () => {
+            await mutateAsync();
+        });
+    }, [confirmModal, hostname, isDown, mutateAsync]);
+
+    let btnText = <Trans>Set reference state for this node</Trans>;
+    if (isDown) {
+        btnText = <Trans>Delete this this node from reference state</Trans>;
+    }
 
     let referenceError = false;
     if (
@@ -144,7 +189,7 @@ export const NodeReferenceStatus = ({ actual, reference }: NodeMapFeature) => {
         <StatusAndButton
             isError={hasErrors}
             btn={hasErrors && btnText}
-            onClick={mutate}
+            onClick={setReferenceState}
         >
             {errorMessage}
         </StatusAndButton>

plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/RebootNodeBtn.tsx

@@ -7,6 +7,7 @@ import { useModal } from "components/Modal/Modal";
 import { Button } from "components/buttons/button";
 import { ErrorMsg } from "components/form";
 import Loading from "components/loading";
+import { useErrrorConnectionToast } from "components/toast/toasts";
 
 import { callToRemoteNode } from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/api";
 import { PowerIcon } from "plugins/lime-plugin-mesh-wide/src/icons/power";
@@ -28,18 +29,24 @@ export async function remoteReboot({ ip, password }: IRemoteRebotProps) {
 }
 
 const useRemoteReboot = (opts?) => {
+    const { show } = useErrrorConnectionToast();
     return useMutation((props: IRemoteRebotProps) => remoteReboot(props), {
         mutationKey: ["system", "reboot"],
+        onError: (error, variables) => {
+            show(variables.ip);
+        },
         ...opts,
     });
 };
 
 const useRebootNodeModal = ({ node }: { node: INodeInfo }) => {
-    const { toggleModal, setModalState, isModalOpen } = useModal();
+    const modalKey = "rebootNodeModal";
+    const { toggleModal, setModalState, isModalOpen, openModalKey } =
+        useModal();
     const [password, setPassword] = useState("");
     const { mutate, isLoading, error } = useRemoteReboot({
         onSuccess: () => {
-            toggleModal();
+            toggleModal(modalKey);
         },
     });
 
@@ -91,15 +98,15 @@ const useRebootNodeModal = ({ node }: { node: INodeInfo }) => {
 
     const rebootModal = useCallback(() => {
         updateModalState();
-        toggleModal();
+        toggleModal(modalKey);
     }, [toggleModal, updateModalState]);
 
     // Update modal state with mutation result
     useEffect(() => {
-        if (isModalOpen) {
+        if (isModalOpen && openModalKey === modalKey) {
             updateModalState();
         }
-    }, [isLoading, error, isModalOpen, updateModalState]);
+    }, [isLoading, error, isModalOpen, updateModalState, openModalKey]);
 
     return { rebootModal, toggleModal, isModalOpen };
 };