chore(meshwide): implement set reference state

libremesh · May 12, 2024 · 3ee252e · 3ee252e
1 parent 50c69b6
commit 3ee252e
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 145 deletions.
diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx b/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,
@@ -221,6 +224,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 +237,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 +312,7 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         <StatusAndButton
             isError={hasError}
             btn={hasError && btnText}
-            onClick={mutate}
+            onClick={setReferenceState}
         >
             {errorMessage}
         </StatusAndButton>

diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx
@@ -1,16 +1,22 @@
 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 { 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,
@@ -111,12 +117,49 @@ 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();
+
     // Mutation to update the reference state
-    const { mutate, btnText } = useSetReferenceState("node_info");
+    const { mutateAsync } = useSetNodeInfoReferenceState({
+        ip,
+        hostname,
+        isDown,
+        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(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 +187,7 @@ export const NodeReferenceStatus = ({ actual, reference }: NodeMapFeature) => {
         <StatusAndButton
             isError={hasErrors}
             btn={hasErrors && btnText}
-            onClick={mutate}
+            onClick={setReferenceState}
         >
             {errorMessage}
         </StatusAndButton>

diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/SetReferenceStateBtn.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/SetReferenceStateBtn.tsx
diff --git a/plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx b/plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx
@@ -85,18 +85,77 @@ export const useAddNewSectionModal = () => {
     return { actionModal, toggleModal };
 };
 
-export const useSetReferenceStateModal = () => {
+export const useSetNoeInfoReferenceStateModal = () => {
     const { toggleModal, setModalState, isModalOpen } = useModal();
 
     const confirmModal = useCallback(
-        (dataType: DataTypes, cb: () => Promise<void>) => {
+        (nodeName: string, isDown: boolean, cb: () => Promise<void>) => {
+            let title = <Trans>Set reference state for {nodeName}</Trans>;
+            let content = <Trans>Set the reference state for this node.</Trans>;
+            if (isDown) {
+                title = (
+                    <Trans>Remove {nodeName} from the reference state</Trans>
+                );
+                content = (
+                    <Trans>
+                        This node seems down, remove them from the reference
+                        state?
+                    </Trans>
+                );
+            }
             setModalState({
-                title: <Trans>Set reference state for {dataType}</Trans>,
-                content: (
+                title,
+                content,
+                successCb: cb,
+                successBtnText: <Trans>Continue</Trans>,
+            });
+            toggleModal();
+        },
+        [setModalState, toggleModal]
+    );
+    return { confirmModal, toggleModal, isModalOpen };
+};
+
+export const useSetLinkReferenceStateModal = () => {
+    const { toggleModal, setModalState, isModalOpen } = useModal();
+
+    const confirmModal = useCallback(
+        (
+            dataType: DataTypes,
+            nodes: string[],
+            isDown: boolean,
+            cb: () => Promise<void>
+        ) => {
+            let title = (
+                <Trans>Set reference state for this {dataType} link?</Trans>
+            );
+            let content = (
+                <Trans>This will set the reference state of this link:</Trans>
+            );
+            if (isDown) {
+                title = (
+                    <Trans>
+                        Remove this {dataType} from the reference state
+                    </Trans>
+                );
+                content = (
                     <Trans>
-                        Are you sure you want to set this reference state for{" "}
-                        {dataType}
+                        This link seems down, remove them from the reference
+                        state?
                     </Trans>
+                );
+            }
+            setModalState({
+                title,
+                content: (
+                    <div>
+                        {content}
+                        <br />
+                        <div className={"flex flex-row"}>
+                            <div>{nodes[0]}</div>
+                            <div>{nodes[1]}</div>
+                        </div>
+                    </div>
                 ),
                 successCb: cb,
                 successBtnText: <Trans>Continue</Trans>,

diff --git a/plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks.tsx b/plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks.tsx
@@ -35,16 +35,19 @@ interface getQueryByLinkTypeReturnType<T extends LinkType> {
 export const getQueryByLinkType = <T extends LinkType>(
     type: T
 ): getQueryByLinkTypeReturnType<T> => {
-    if (type === "bat_links_info") {
-        return {
-            state: useMeshWideBatman,
-            reference: useMeshWideBatmanReference,
-        } as getQueryByLinkTypeReturnType<T>;
+    switch (type) {
+        case "bat_links_info":
+            return {
+                state: useMeshWideBatman,
+                reference: useMeshWideBatmanReference,
+            } as getQueryByLinkTypeReturnType<T>;
+        case "wifi_links_info":
+        default:
+            return {
+                state: useMeshWideLinks,
+                reference: useMeshWideLinksReference,
+            } as getQueryByLinkTypeReturnType<T>;
     }
-    return {
-        state: useMeshWideLinks,
-        reference: useMeshWideLinksReference,
-    } as getQueryByLinkTypeReturnType<T>;
 };
 
 interface IUselocatedLinks {