improvement(upgraded-nodes): show subheaders for each version

Author: germanferrero

i18n/generic.json

@@ -104,6 +104,8 @@
     "network_nodes_4368eb67": "Network Nodes",
     "no_network_found_try_realigning_your_node_and_resc_176a9b3e": "No network found, try realigning your node and rescanning.",
     "node_configuration_7342e6f5": "Node Configuration",
+    "not_upgraded_howmany_5ed230c3": "Not Upgraded (%{howMany})",
+    "not_upgraded_nodes_9e67db38": "Not Upgraded Nodes",
     "notes_c42e0fd5": "Notes",
     "notes_of_a44a4158": "Notes of",
     "ok_ff1b646a": "Ok",
@@ -170,8 +172,10 @@
     "there_s_an_active_remote_support_session_4a40a8bb": "There's an active remote support session",
     "there_s_no_open_session_for_remote_support_click_a_efd0d415": "There's no open session for remote support. Click at Create Session to begin one",
     "these_are_the_nodes_associated_on_this_radio_3d302167": "These are the nodes associated on this radio",
+    "these_are_the_nodes_running_the_last_version_of_th_5165bdfe": "These are the nodes running the last version of the Firmware",
     "these_are_the_nodes_that_can_be_reached_from_your__4c524abe": "These are the nodes that can be reached from your node, i.e. there is a working path from your node to each of them.",
     "these_are_the_nodes_that_can_t_be_reached_from_you_dbbf9032": "These are the nodes that can't be reached from your node, it is possible that they are not turned on or a link to reach them is down.",
+    "these_are_the_nodes_that_need_to_be_upgraded_to_th_d09d104": "These are the nodes that need to be upgraded to the last version of the Firmware",
     "this_device_does_not_support_secure_rollback_to_pr_1c167a2c": "This device does not support secure rollback to previous version if something goes wrong",
     "this_device_supports_secure_rollback_to_previous_v_a60ddbcb": "This device supports secure rollback to previous version if something goes wrong",
     "this_information_is_synced_periodically_and_can_be_8b74cb8c": "This information is synced periodically and can be outdated by some minutes",
@@ -188,6 +192,8 @@
     "upgrade_now_f300d697": "Upgrade Now",
     "upgrade_to_lastest_firmware_version_9b159910": "Upgrade to lastest firmware version",
     "upgrade_to_versionname_621a0b6a": "Upgrade to %{versionName}",
+    "upgraded_howmany_e439d4b1": "Upgraded (%{howMany})",
+    "upgraded_nodes_dfc85207": "Upgraded Nodes",
     "upload_firmware_image_from_your_device_57327bee": "Upload firmware image from your device",
     "uptime_c1d2415d": "Uptime",
     "versionname_is_now_available_a6fbbb63": "%{versionName} is now available",

i18n/translations/es.json

@@ -210,6 +210,12 @@
     "these_are_the_nodes_that_can_t_be_reached_from_you_dbbf9032": "Son los nodos con los que tienes conectividad, es decir que hay un camino funcionando entre tu nodo y cada uno de ellos.",
     "this_information_is_synced_periodically_and_can_be_8b74cb8c": "Esta información se sincroniza periódicamente, puede estar desactualizada algunos minutos.", 
     "unreachable_howmany_e5c8f844": "No Alcanzables (%{howMany})", 
-    "unreachable_nodes_e6785f10": "Nodos No Alcanzables"
+    "unreachable_nodes_e6785f10": "Nodos No Alcanzables",
+    "not_upgraded_howmany_5ed230c3": "No Actualizados (%{howMany})",
+    "not_upgraded_nodes_9e67db38": "Nodos No Actualizados",
+    "these_are_the_nodes_running_the_last_version_of_th_5165bdfe": "Estos son los nodos que están actualizados a la última versión del Firmware",
+    "these_are_the_nodes_that_need_to_be_upgraded_to_th_d09d104": "Estos son los nodos que necesitan actualizarse a la última versión del Firmware",
+    "upgraded_howmany_e439d4b1": "Actualizados (%{howMany})",
+    "upgraded_nodes_dfc85207": "Nodos Actualizados"
 }
 

…ugins/lime-plugin-upgradedNodes/index.js …gins/lime-plugin-upgraded-nodes/index.jsplugins/lime-plugin-upgradedNodes/index.js renamed to plugins/lime-plugin-upgraded-nodes/index.js plugins/lime-plugin-upgradedNodes/index.js renamed to plugins/lime-plugin-upgraded-nodes/index.js

@@ -0,0 +1,8 @@
+.stickySubheader {
+    position: sticky;
+    top: 0;
+    background-color: #325850;
+    padding: 0.2rem;
+    text-align: center;
+    color:white;
+}

plugins/lime-plugin-upgraded-nodes/src/style.less

@@ -1,4 +1,5 @@
-import { h } from "preact";
+import { h, Fragment } from "preact";
+import style from "./style.less";
 import { useEffect, useState } from "preact/hooks";
 import Tabs from "components/tabs";
 import Loading from "components/loading";
@@ -9,6 +10,19 @@ import { useNewVersion } from "plugins/lime-plugin-firmware/src/firmwareQueries"
 import Help from "components/help";
 import I18n from 'i18n-js';
 
+function groupBy(xs, key) {
+    return xs.reduce(function (rv, x) {
+        let v = key instanceof Function ? key(x) : x[key];
+        let el = rv.find((r) => r && r.key === v);
+        if (el) {
+            el.values.push(x);
+        } else {
+            rv.push({ key: v, values: [x] });
+        }
+        return rv;
+    }, []);
+};
+
 const PageHelp = () => (
     <div>
         <p>
@@ -33,8 +47,8 @@ const PageTabs = ({ nodes, ...props }) => {
 }
 
 export const UpgradedNodesPage_ = ({ nodes }) => {
-    const [ selectedGroup, setselectedGroup ] = useState('upgraded');
-    const [ unfoldedNode, setunfoldedNode ] = useState(null);
+    const [selectedGroup, setselectedGroup] = useState('upgraded');
+    const [unfoldedNode, setunfoldedNode] = useState(null);
 
     function changeUnfolded(hostname) {
         if (unfoldedNode == hostname) {
@@ -44,6 +58,13 @@ export const UpgradedNodesPage_ = ({ nodes }) => {
         setunfoldedNode(hostname);
     }
 
+    const groupNodes = nodes
+        .filter(n => n.status !== 'gone')
+        .filter(n => n.group === selectedGroup);
+
+    const grouppedByVersion = groupBy(groupNodes, 'fw_version')
+        .sort((a, b) => a.key > b.key);
+
     return (
         <div class="d-flex flex-column flex-grow-1 overflow-auto">
             <div class="d-flex">
@@ -53,32 +74,40 @@ export const UpgradedNodesPage_ = ({ nodes }) => {
                 </div>
             </div>
             <List>
-                {nodes
-                    .filter(n => n.status !== 'gone')
-                    .filter(n => n.group === selectedGroup)
-                    .sort((a, b) => a.hostname > b.hostname)
-                    .map(
-                        node =>
-                            <ExpandableNode key={node.hostname} node={node}
-                                showMore={unfoldedNode === node.hostname}
-                                onClick={() => changeUnfolded(node.hostname)}/>
-                    )}
+                {grouppedByVersion
+                    .map((versionGroup, index) => (
+                        <Fragment>
+                            {selectedGroup === 'not_upgraded' &&
+                                <div class={style.stickySubheader} style={{ zIndex: 990 + index }}>
+                                    {versionGroup.key}
+                                </div>
+                            }
+                            {versionGroup.values
+                                .map(node =>
+                                    <ExpandableNode key={node.hostname} node={node}
+                                        showMore={unfoldedNode === node.hostname}
+                                        onClick={() => changeUnfolded(node.hostname)} />
+                                )}
+                        </Fragment>
+                    ))
+                }
             </List>
         </div>
     )
 }
 
 const UpgradedNodesPage = () => {
     const { data: nodes, isLoading: isLoadingNodes } = useNetworkNodes();
-    const { data: newVersion, isLoading: isLoadingVersion} = useNewVersion();
+    const { data: newVersion, isLoading: isLoadingVersion } = useNewVersion();
     const [taggedNodes, setTaggedNodes] = useState(undefined);
 
     useEffect(() => {
-        if (nodes && newVersion){
+        if (nodes && newVersion) {
             const taggedNodes = [...nodes].map(
-                n => ({ ...n,
-                group: n.fw_version === newVersion.version ? 'upgraded' : 'not_upgraded'
-            }));
+                n => ({
+                    ...n,
+                    group: n.fw_version === newVersion.version ? 'upgraded' : 'not_upgraded'
+                }));
             setTaggedNodes(taggedNodes);
         }
     }, [nodes, newVersion])

…n-upgradedNodes/src/upgradedNodesMenu.js …-upgraded-nodes/src/upgradedNodesMenu.jsplugins/lime-plugin-upgradedNodes/src/upgradedNodesMenu.js renamed to plugins/lime-plugin-upgraded-nodes/src/upgradedNodesMenu.js plugins/lime-plugin-upgradedNodes/src/upgradedNodesMenu.js renamed to plugins/lime-plugin-upgraded-nodes/src/upgradedNodesMenu.js

@@ -1,6 +1,3 @@
-// Here you define tests that closely resemble how your component is used
-// Using the testing-library: https://testing-library.com
-
 import { h } from 'preact';
 import { fireEvent, screen, cleanup, act } from '@testing-library/preact';
 import '@testing-library/jest-dom';

…n-upgradedNodes/src/upgradedNodesPage.js …-upgraded-nodes/src/upgradedNodesPage.jsplugins/lime-plugin-upgradedNodes/src/upgradedNodesPage.js renamed to plugins/lime-plugin-upgraded-nodes/src/upgradedNodesPage.js plugins/lime-plugin-upgradedNodes/src/upgradedNodesPage.js renamed to plugins/lime-plugin-upgraded-nodes/src/upgradedNodesPage.js

@@ -0,0 +1,55 @@
+import { UpgradedNodesPage_ } from './src/upgradedNodesPage';
+
+export default {
+    title: 'Containers/Upgraded Nodes'
+}
+
+const nodes = [
+    { hostname: "ql-czuk", status: "recently_reachable",
+      ipv4:'10.5.0.3', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.3',
+      group: 'not_upgraded'
+    },
+    { hostname: "ql-czuk-bbone", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.3',
+      group: 'not_upgraded'
+    },
+    { hostname: "si-soniam", status: "recently_reachable",
+      ipv4:'10.5.0.16', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.4',
+      group: 'upgraded'
+    },
+    { hostname: "ql-berta", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.4',
+      group: 'upgraded'
+    },
+    { hostname: "ql-nelson", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.3',
+      group: 'not_upgraded'
+    },
+    { hostname: "ql-irene", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.3',
+      group: 'not_upgraded'
+    },
+    { hostname: "ql-guillermina", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.3',
+      group: 'not_upgraded'
+    },
+    { hostname: "ql-silviak", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.3',
+      group: 'not_upgraded'
+    },
+    { hostname: "ql-oncelotes", status: "recently_reachable",
+      ipv4:'10.5.0.9', ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+      board: 'LibreRouter v1', fw_version: 'LibreRouterOS 1.2',
+      group: 'not_upgraded'
+    },
+];
+
+export const upgradedNodesPage = () => <UpgradedNodesPage_ nodes={nodes} />