+ )
+};
+
+const NetworkNodes = () => {
+ const { data: networkNodes, isLoading } = useNetworkNodes();
+ const [ unfoldedNode, setunfoldedNode ] = useState(null);
+ const sortedNodes = (networkNodes &&
+ Object.entries(networkNodes)
+ .map(([k, v]) => ({ ...v, hostname: k }))
+ .filter(n => n.status !== 'gone')
+ .sort((a, b) => a.hostname > b.hostname));
+
+ function changeUnfolded(hostname) {
+ if (unfoldedNode == hostname) {
+ setunfoldedNode(null);
+ return;
+ }
+ setunfoldedNode(hostname);
+ }
+
+ return <_NetworkNodes nodes={sortedNodes} isLoading={isLoading}
+ unfoldedNode={unfoldedNode} onUnfold={changeUnfolded}/>;
+}
+
+export default NetworkNodes;
diff --git a/plugins/lime-plugin-network-nodes/src/networkNodesPage.stories.js b/plugins/lime-plugin-network-nodes/src/networkNodesPage.stories.js
new file mode 100644
index 00000000..45f7c376
--- /dev/null
+++ b/plugins/lime-plugin-network-nodes/src/networkNodesPage.stories.js
@@ -0,0 +1,51 @@
+import NetworkNodes, {_NetworkNodes} from './networkNodesPage';
+
+export default {
+ title: 'Containers/networkNodes'
+}
+
+const nodes = [
+ {
+ hostname: 'ql-berta',
+ ipv4:'10.5.0.16',
+ ipv6: 'fd0d:fe46:8ce8::8bbf:7500',
+ board: 'LibreRouter v1',
+ fw_version: 'LibreRouterOS 1.4'
+ },
+ {
+ hostname: 'ql-nelson',
+ ipv4:'10.5.0.17',
+ ipv6: 'fd0d:fe46:8ce8::8bbf:75bf',
+ board: 'LibreRouter v1',
+ fw_version: 'LibreRouterOS 1.4'
+ }
+];
+
+export const networkNodesNonUnfolded = () =>
+ <_NetworkNodes nodes={nodes} />
+
+export const networkNodesOneUnfolded = () =>
+ <_NetworkNodes nodes={nodes} unfoldedNode={'ql-berta'} />
+
+export const networkNodesLoading = () =>
+ <_NetworkNodes isLoading={true} />
+
+const manyNodes = [];
+for (let i = 0; i < 15; i++) {
+ const hostname = `host${i}`;
+ const node = {...nodes[0]};
+ node.hostname = hostname;
+ manyNodes.push(node);
+}
+
+export const networkNodesManyNodes = () =>
+ <_NetworkNodes nodes={manyNodes} />
+
+export const networkNodesInteractive = () =>
+
+networkNodesInteractive.args = {
+ queries: [
+ [['network-nodes', 'get_nodes'],
+ Object.fromEntries(nodes.map(n => [n.hostname, n]))]
+ ]
+}
\ No newline at end of file
diff --git a/plugins/lime-plugin-network-nodes/src/networkNodesQueries.js b/plugins/lime-plugin-network-nodes/src/networkNodesQueries.js
new file mode 100644
index 00000000..ad8a9356
--- /dev/null
+++ b/plugins/lime-plugin-network-nodes/src/networkNodesQueries.js
@@ -0,0 +1,18 @@
+import { useQuery, useMutation } from 'react-query';
+import { getNodes, markNodesAsGone } from './networkNodesApi';
+import queryCache from 'utils/queryCache';
+
+export const useNetworkNodes = () =>
+ useQuery(['network-nodes', 'get_nodes'], getNodes);
+
+export const useMarkNodesAsGone = () => useMutation(markNodesAsGone, {
+ onSuccess: hostnames => queryCache.setQueryData(['network-nodes', 'get_nodes'],
+ old => {
+ const result = old;
+ hostnames.forEach(hostname => {
+ result[hostname] = {...old[hostname], status: "gone"}
+ });
+ return result;
+ }
+ )
+})
diff --git a/plugins/lime-plugin-network-nodes/src/networkNodesStyle.less b/plugins/lime-plugin-network-nodes/src/networkNodesStyle.less
new file mode 100644
index 00000000..81dacaf6
--- /dev/null
+++ b/plugins/lime-plugin-network-nodes/src/networkNodesStyle.less
@@ -0,0 +1,5 @@
+.title {
+ text-align: center;
+ font-size: 2em;
+ padding-top: 1rem;
+}
\ No newline at end of file
diff --git a/plugins/lime-plugin-reachable-nodes/index.js b/plugins/lime-plugin-reachable-nodes/index.js
new file mode 100644
index 00000000..6d601450
--- /dev/null
+++ b/plugins/lime-plugin-reachable-nodes/index.js
@@ -0,0 +1,9 @@
+import Page from './src/reachableNodesPage';
+import { ReachableNodesMenu } from './src/reachableNodesMenu';
+
+export default {
+ name: 'ReachableNodes',
+ page: Page,
+ menu: ReachableNodesMenu,
+ menuView: 'community',
+};
diff --git a/plugins/lime-plugin-reachable-nodes/reachableNodes.spec.js b/plugins/lime-plugin-reachable-nodes/reachableNodes.spec.js
new file mode 100644
index 00000000..e490f644
--- /dev/null
+++ b/plugins/lime-plugin-reachable-nodes/reachableNodes.spec.js
@@ -0,0 +1,68 @@
+import { h } from 'preact';
+import { fireEvent, act, screen } from '@testing-library/preact';
+import '@testing-library/jest-dom';
+
+import ReachableNodesPage from './src/reachableNodesPage';
+import queryCache from 'utils/queryCache';
+import { getNodes, markNodesAsGone } from 'plugins/lime-plugin-network-nodes/src/networkNodesApi';
+import { render } from 'utils/test_utils';
+
+jest.mock('plugins/lime-plugin-network-nodes/src/networkNodesApi');
+
+beforeEach(() => {
+ getNodes.mockImplementation(async () => ({
+ 'node1': { hostname: 'node1', status: 'recently_reachable' },
+ 'node2': { hostname: 'node2', status: 'recently_reachable' },
+ 'node3': { hostname: 'node3', status: 'recently_reachable' },
+ 'node4': { hostname: 'node4', status: 'unreachable' },
+ 'node5': { hostname: 'node5', status: 'unreachable' },
+ 'node6': { hostname: 'node6', status: 'unreachable' },
+ 'node7': { hostname: 'node7', status: 'unreachable' },
+ 'node8': { hostname: 'node8', status: 'gone' },
+ 'node9': { hostname: 'node9', status: 'gone' },
+ }));
+ markNodesAsGone.mockImplementation(async () => []);
+});
+
+afterEach(() => {
+ act(() => queryCache.clear());
+});
+
+describe('network nodes screen', () => {
+ it('shows one tab for reachable nodes and one for unreachable nodes with length', async () => {
+ render();
+ expect(await screen.findByRole('tab', { name: /^reachable \(3\)/i })).toBeVisible();
+ expect(await screen.findByRole('tab', { name: /^unreachable \(4\)/i })).toBeVisible();
+ })
+
+ it('shows one row with the hostname for each connect node', async () => {
+ render();
+ expect(await screen.findByText('node1')).toBeVisible();
+ expect(await screen.findByText('node2')).toBeVisible();
+ expect(await screen.findByText('node3')).toBeVisible();
+ })
+
+ it('shows one row with the hostname for each disconnect node', async () => {
+ render();
+ const tabDisconnected = await screen.findByRole('tab', { name: /^unreachable \(4\)/i });
+ fireEvent.click(tabDisconnected);
+ expect(await screen.findByText('node4')).toBeVisible();
+ expect(await screen.findByText('node5')).toBeVisible();
+ expect(await screen.findByText('node6')).toBeVisible();
+ expect(await screen.findByText('node7')).toBeVisible();
+ })
+
+ it('shows help message when clicking on help button', async () => {
+ render();
+ const helpButton = await screen.findByLabelText('help');
+ fireEvent.click(helpButton);
+ expect(await screen.findByText("Reachable Nodes")).toBeVisible();
+ expect(await screen.findByText("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." +
+ "This information is synced periodically " +
+ "and can be outdated by some minutes")).toBeVisible();
+ expect(await screen.findByText("Unreachable Nodes")).toBeVisible();
+ expect(await screen.findByText("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.")).toBeVisible();
+ })
+});
diff --git a/plugins/lime-plugin-reachable-nodes/reachableNodes.stories.js b/plugins/lime-plugin-reachable-nodes/reachableNodes.stories.js
new file mode 100644
index 00000000..195b3226
--- /dev/null
+++ b/plugins/lime-plugin-reachable-nodes/reachableNodes.stories.js
@@ -0,0 +1,29 @@
+import { ReachableNodesPage_ } from "./src/reachableNodesPage";
+
+export default {
+ title: 'Containers/ReachableNodes',
+};
+
+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.4'
+ },
+ { hostname: "ql-irene", status: "recently_reachable" },
+ { hostname: "ql-ipem", status: "recently_reachable" },
+ { hostname: "ql-czuck-bbone", status: "recently_reachable" },
+ { hostname: "ql-graciela", status: "recently_reachable" },
+ { hostname: "ql-marisa", status: "recently_reachable" },
+ { hostname: "ql-anaymarcos", status: "recently_reachable" },
+ { hostname: "ql-quinteros", status: "recently_reachable" },
+ { hostname: "ql-guada", status: "recently_reachable" },
+ { hostname: "ql-refu-bbone", status: "unreachable" },
+ { hostname: "si-soniam", status: "unreachable" },
+ { hostname: "si-giordano", status: "unreachable" },
+ { hostname: "si-mario", status: "unreachable" },
+ { hostname: "si-manu", status: "unreachable" },
+];
+
+export const reachableNodesPage = () => (
+
+);
diff --git a/plugins/lime-plugin-reachable-nodes/src/reachableNodesMenu.js b/plugins/lime-plugin-reachable-nodes/src/reachableNodesMenu.js
new file mode 100644
index 00000000..72998454
--- /dev/null
+++ b/plugins/lime-plugin-reachable-nodes/src/reachableNodesMenu.js
@@ -0,0 +1,7 @@
+import { h } from 'preact';
+
+import { Trans } from '@lingui/macro';
+
+export const ReachableNodesMenu = () => (
+ Reachable Nodes
+);
diff --git a/plugins/lime-plugin-reachable-nodes/src/reachableNodesPage.js b/plugins/lime-plugin-reachable-nodes/src/reachableNodesPage.js
new file mode 100644
index 00000000..798a80b9
--- /dev/null
+++ b/plugins/lime-plugin-reachable-nodes/src/reachableNodesPage.js
@@ -0,0 +1,88 @@
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import Tabs from "components/tabs";
+import Loading from "components/loading";
+import { List } from "components/list";
+import { ExpandableNode } from "plugins/lime-plugin-network-nodes/src/components/expandableNode";
+import { useNetworkNodes } from "plugins/lime-plugin-network-nodes/src/networkNodesQueries";
+import Help from "components/help";
+import { Trans } from '@lingui/macro';
+
+const PageHelp = () => (
+
+
+
Reachable Nodes
+
+ 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.
+
+
+
+ This information is synced periodically
+ and can be outdated by some minutes.
+
+
+
+
Unreachable Nodes
+
+ 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.
+
+
+