From d6080aed52591449fbca9a0c1dd0765c3495b5b2 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 1 Jul 2024 15:38:49 +0200
Subject: [PATCH] chore(mesh-wide): Improve messages

---
 .../components/FeatureDetail/LinkDetail.tsx   | 21 +++++-
 .../components/FeatureDetail/NodeDetail.tsx   | 68 ++++++++++++++-----
 .../src/lib/nodes/processErrors.ts            | 12 ++--
 3 files changed, 75 insertions(+), 26 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
index b835f0ff..63c08d5f 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx
@@ -220,7 +220,7 @@ const LinkFeatureDetail = ({ actual, reference }: LinkMapFeature) => {
 };
 
 export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
-    const isNewNode = !reference;
+    const isNewLink = !reference;
 
     const { errors } = usePointToPointErrors({
         id: reference.id,
@@ -318,14 +318,29 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         errorMessage = <Trans>Reference is not set or has errors</Trans>;
     } else if (errors?.hasErrors) {
         errorMessage = <Trans>This link has errors</Trans>;
-    } else if (isNewNode) {
+    } else if (isNewLink) {
         errorMessage = (
             <Trans>This Link is not registered on the reference state</Trans>
         );
     }
 
     const hasError = errors?.hasErrors || referenceError;
-    const showSetReferenceButton = isDown || isNewNode || referenceError;
+    const showSetReferenceButton =
+        errors?.hasErrors || isDown || isNewLink || referenceError;
+
+    console.log(
+        "AAAAA",
+        "hasError",
+        hasError,
+        "showSetReferenceButton",
+        showSetReferenceButton,
+        "isDown",
+        isDown,
+        "isNewNode",
+        isNewLink,
+        "referenceError",
+        referenceError
+    );
 
     return (
         <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
index 07a62e0e..d667ba75 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx
@@ -43,6 +43,13 @@ const NodeDetails = ({ actual, reference, name }: NodeMapFeature) => {
     const device = actual.device;
     const macs = actual.macs;
 
+    let newMacs = [];
+    let notFoundMacs = [];
+    if (errors.includes(NodeErrorCodes.MACS_MISSMATCH)) {
+        notFoundMacs = getArrayDifference(reference.macs, macs);
+        newMacs = getArrayDifference(macs, reference.macs);
+    }
+
     return (
         <div>
             <Row>
@@ -84,7 +91,7 @@ const NodeDetails = ({ actual, reference, name }: NodeMapFeature) => {
                 </TitleAndText>
             </Row>
             <Row>
-                <TitleAndText title={<Trans>Macs</Trans>}>
+                <TitleAndText title={<Trans>Macs ({macs.length})</Trans>}>
                     <div>
                         {macs.map((mac, k) => (
                             <div key={k}>{mac}</div>
@@ -92,20 +99,46 @@ const NodeDetails = ({ actual, reference, name }: NodeMapFeature) => {
                     </div>
                 </TitleAndText>
                 {errors.includes(NodeErrorCodes.MACS_MISSMATCH) && (
-                    <TitleAndText
-                        title={<Trans>Macs not found</Trans>}
-                        error={
-                            <Trans>This macs are not on the actual state</Trans>
-                        }
-                    >
-                        <>
-                            {getArrayDifference(reference.macs, macs).map(
-                                (mac, k) => (
-                                    <div key={k}>{mac}</div>
-                                )
-                            )}
-                        </>
-                    </TitleAndText>
+                    <div className={"flex flex-col gap-4"}>
+                        {notFoundMacs && (
+                            <TitleAndText
+                                title={
+                                    <Trans>
+                                        Macs not found ({notFoundMacs.length})
+                                    </Trans>
+                                }
+                                error={
+                                    <Trans>
+                                        This macs are not on the actual state
+                                    </Trans>
+                                }
+                            >
+                                <>
+                                    {notFoundMacs.map((mac, k) => (
+                                        <div key={k}>{mac}</div>
+                                    ))}
+                                </>
+                            </TitleAndText>
+                        )}
+                        {newMacs && (
+                            <TitleAndText
+                                title={
+                                    <Trans>New Macs ({newMacs.length})</Trans>
+                                }
+                                error={
+                                    <Trans>
+                                        This macs are not on the reference state
+                                    </Trans>
+                                }
+                            >
+                                <>
+                                    {newMacs.map((mac, k) => (
+                                        <div key={k}>{mac}</div>
+                                    ))}
+                                </>
+                            </TitleAndText>
+                        )}
+                    </div>
                 )}
             </Row>
         </div>
@@ -193,12 +226,13 @@ export const NodeReferenceStatus = ({ actual, reference }: NodeMapFeature) => {
         );
     }
 
-    const hasErrors = hasNodeErrors || referenceError || isNewNode;
+    const hasErrors = hasNodeErrors || referenceError;
+    const showSetReferenceButton = hasNodeErrors || isNewNode || referenceError;
 
     return (
         <StatusAndButton
             isError={hasErrors}
-            btn={hasErrors && btnText}
+            btn={showSetReferenceButton && btnText}
             onClick={setReferenceState}
         >
             {errorMessage}
diff --git a/plugins/lime-plugin-mesh-wide/src/lib/nodes/processErrors.ts b/plugins/lime-plugin-mesh-wide/src/lib/nodes/processErrors.ts
index 0022fe3e..f21d21ba 100644
--- a/plugins/lime-plugin-mesh-wide/src/lib/nodes/processErrors.ts
+++ b/plugins/lime-plugin-mesh-wide/src/lib/nodes/processErrors.ts
@@ -24,12 +24,12 @@ export const processNodeErrors = (
     }
     const sortedRefMacs = reference.macs.slice().sort();
     const sortedActualMacs = actual.macs.slice().sort();
-
-    for (let i = 0; i < sortedRefMacs.length; i++) {
-        if (sortedRefMacs[i] !== sortedActualMacs[i]) {
-            errors.push(NodeErrorCodes.MACS_MISSMATCH);
-            break;
-        }
+    if (
+        !sortedRefMacs.every(
+            (value, index) => value === sortedActualMacs[index]
+        )
+    ) {
+        errors.push(NodeErrorCodes.MACS_MISSMATCH);
     }
 
     return errors;