chore(rxPage): implement new landing (#388)

Implement new landing page with

- last internet path and internet status
- Most active iface
- Eth ports usage

.eslintignore

@@ -4,3 +4,4 @@ storybook-static
 build
 package-lock.json
 i18n
+tailwind.config.js

lingui.config.js

@@ -0,0 +1,23 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+    locales: ["es", "pt", "en", "it"],
+    catalogs: [
+        {
+            path: "i18n/{locale}/messages",
+            include: ["src", "plugins"],
+        },
+    ],
+    format: "po",
+    compileNamespace: "cjs",
+    extractBabelOptions: {
+        presets: [
+            "preact",
+            "@babel/preset-typescript",
+            "@lingui/babel-preset-react",
+        ],
+    },
+    sourceLocale: "en",
+    fallbackLocales: {
+        default: "en",
+    },
+};

package.json

@@ -31,10 +31,10 @@
     "devDependencies": {
         "@babel/preset-react": "^7.18.6",
         "@lingui/babel-preset-react": "^2.9.2",
-        "@lingui/cli": "^3.14.0",
-        "@lingui/detect-locale": "^3.14.0",
-        "@lingui/loader": "^3.14.0",
-        "@lingui/macro": "^3.14.0",
+        "@lingui/cli": "^3.17.2",
+        "@lingui/detect-locale": "^3.17.2",
+        "@lingui/loader": "^3.17.2",
+        "@lingui/macro": "^3.17.2",
         "@storybook/addon-actions": "^6.5.12",
         "@storybook/addon-controls": "^6.5.12",
         "@storybook/addon-essentials": "^6.5.12",

plugins/lime-plugin-metrics/src/metricsApi.js

@@ -1,12 +1,16 @@
 import api from "utils/uhttpd.service";
 
 export const getMetrics = (ip) => {
-    console.log("getting metrics for ", ip);
     return api.call("lime-metrics", "get_metrics", { target: ip });
 };
 
 export const getGateway = () =>
     api.call("lime-metrics", "get_gateway", {}).then((res) => res.gateway);
 
-export const getPath = () =>
+export const getPath = async () =>
     api.call("lime-metrics", "get_path", {}).then((res) => res.path);
+
+export const getLoss = async (ip) =>
+    api
+        .call("lime-metrics", "get_loss", { target: ip })
+        .then((res) => +res.loss);

plugins/lime-plugin-metrics/src/metricsQueries.js

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import queryCache from "utils/queryCache";
 
-import { getGateway, getMetrics, getPath } from "./metricsApi";
+import { getGateway, getLoss, getMetrics, getPath } from "./metricsApi";
 
 export function useMetrics(ip, params) {
     return useQuery(["lime-metrics", "get_metrics", ip], () => getMetrics(ip), {
@@ -42,3 +42,31 @@ export function useGateway(params) {
 export function usePath(params) {
     return useQuery(["lime-metrics", "get_path"], getPath, params);
 }
+
+export function useLoss(ip, params) {
+    return useQuery(["lime-metrics", "get_loss", ip], () => getLoss(ip), {
+        retry: false,
+        ...params,
+    });
+}
+
+export const getAllLoss = async (nodes) => {
+    let losses = {};
+    for (const node of nodes) {
+        const queryKey = ["lime-metrics", "get_loss", node.ip];
+        await queryCache.invalidateQueries(queryKey);
+        losses[node.ip] = await queryCache.fetchQuery(queryKey);
+    }
+    return losses;
+};
+
+export function usePathLoss(nodes, params) {
+    return useQuery(
+        ["lime-metrics", "get_loss", nodes],
+        (query) => getAllLoss(query.queryKey[2]),
+        {
+            retry: false,
+            ...params,
+        }
+    );
+}

plugins/lime-plugin-rx/src/components/components.tsx

@@ -0,0 +1,30 @@
+import { ComponentChildren, FunctionalComponent } from "preact";
+
+export const IconsClassName = "h-14 w-14";
+
+interface SectionTitleProps {
+    children?: ComponentChildren;
+    icon: ComponentChildren;
+}
+
+export const SectionTitle: FunctionalComponent<SectionTitleProps> = ({
+    children,
+    icon,
+}) => {
+    return (
+        <div className="flex items-center gap-x-4 ml-6 mt-6">
+            <span className={"text-primary-dark fill-current"}>{icon}</span>
+            <h1 className="text-4xl font-bold text-left">{children}</h1>
+        </div>
+    );
+};
+
+export const Section = ({ ...props }) => {
+    return (
+        <div className={"w-full container "}>
+            <div className="w-full" {...props}>
+                {props.children}
+            </div>
+        </div>
+    );
+};

plugins/lime-plugin-rx/src/components/footer.tsx

@@ -0,0 +1,52 @@
+import { Trans } from "@lingui/macro";
+
+export const Footer = () => {
+    const imgClass = "h-16";
+    return (
+        <div
+            className={
+                "z-50 fixed bottom-0 w-full flex justify-around content-center items-center"
+            }
+        >
+            <div>
+                <img
+                    src={"assets/icons/AlterMundiLogo.svg"}
+                    className={imgClass}
+                />
+            </div>
+            <div className={"flex flex-col text-center text-xl"}>
+                <div className={"italic font-normal text-2xl"}>
+                    <Trans>Need support?</Trans>
+                </div>
+                <div>
+                    <Trans>
+                        Join{" "}
+                        <a
+                            className={"text-[#0198FE] hover:text-[#F39100]"}
+                            href={"https://foro.librerouter.org"}
+                        >
+                            foro.librerouter.org
+                        </a>
+                    </Trans>
+                </div>
+                <div>
+                    <Trans>
+                        Visit{" "}
+                        <a
+                            className={"text-[#F39100] hover:text-[#0198FE]"}
+                            href={"https://docs.altermundi.net"}
+                        >
+                            docs.altermundi.net
+                        </a>
+                    </Trans>
+                </div>
+            </div>
+            <div>
+                <img
+                    src={"assets/icons/LibreRouterLogo.svg"}
+                    className={imgClass}
+                />
+            </div>
+        </div>
+    );
+};