Packages' network tab modifications

packages/admin-ui/src/__mock-backend__/index.ts

@@ -386,7 +386,8 @@
     dockerLatestVersion: "20.10.8"
   }),
   getIsConnectedToInternet: async () => false,
-  getCoreVersion: async () => "0.2.92"
+  getCoreVersion: async () => "0.2.92",
+  getContainerAliases: async ()=> ['validator', 'validator.lodestar.dappnode', 'validator.mainnet.dncore.dappnode']
 };
 
 export const calls: Routes = {

packages/admin-ui/src/pages/packages/components/Network/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useState } from "react";
 import Card from "components/Card";
 import SubTitle from "components/SubTitle";
@@ -7,36 +7,95 @@
 import { PortsByService } from "./PortsByService";
 import { HttpsMappings } from "./HttpsMappings";
 import "./network.scss";
+import { api } from "api";
+import LinkDocs from "components/LinkDocs";
+import { docsUrl } from "params";
 
 export function Network({ containers }: { containers: PackageContainer[] }) {
-  const serviceNames = containers.map((c) => c.serviceName);
+  const serviceNames = containers.map(c => c.serviceName);
   const [serviceName, setServiceName] = useState(serviceNames[0]);
-  const container = containers.find((c) => c.serviceName === serviceName);
+  const container = containers.find(c => c.serviceName === serviceName);
+  const [alisases, setAliases] = useState([]);
+  const mappings = [
+    "Public port mapping",
+    "HTTPs domain mapping",
+    "TOR domain mapping"
+  ];
+  const [mappingSelected, setMappingSelected] = useState(0);
+  useEffect(() => {
+    if (container) {
+      async function getContainerAliases(): Promise<void> {
+        setAliases(await api.getContainerAliases(container!.containerId));
+      }
+      getContainerAliases();
+    }
+  }, [container]);
+
   return (
     <>
       <Card spacing className="network-editor">
-        <ServiceSelector serviceName={serviceName} setServiceName={setServiceName} containers={containers} />
+        <ServiceSelector
+          serviceName={serviceName}
+          setServiceName={setServiceName}
+          containers={containers}
+        />
         {container && (
           <div>
             <strong>Container IP: </strong>
             {container.ip || "Not available"}
+            {alisases && (
+              <>
+                <br />
+                <br />
+                <b>Aliases: </b>
+                <ul>
+                  {alisases.map(alias => (
+                    <li>{alias}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {/* TODO: include docu "Network tab" url when done */}
+            <LinkDocs href={docsUrl.main}>
+              Learn more about Network tab in our Documentation
+            </LinkDocs>
           </div>
         )}
-      </Card>
 
-      {container && (
-        <>
-          <SubTitle>Public port mapping</SubTitle>
-          <Card spacing className="network-editor">
-            <PortsByService dnpName={container.dnpName} serviceName={container.serviceName} ports={container.ports} />
-          </Card>
+        {container && (
+          <>
+            <div className="mappings-navbar">
+              {mappings.map((mapping, i) => (
+                  <div
+                    onClick={() => setMappingSelected(i)}
+                    className={mappingSelected === i ? 'selected':undefined}                 
+                  >
+                    {mapping}
+                  </div>
+              ))}
+            </div>
 
-          <SubTitle>HTTPs domain mapping</SubTitle>
-          <Card spacing className="network-editor">
-            <HttpsMappings dnpName={container.dnpName} serviceName={container.serviceName} />
-          </Card>
-        </>
-      )}
+            <SubTitle>{mappings[mappingSelected]}</SubTitle>
+            <div className="network-editor">
+              {mappingSelected === 0 ? (
+                <PortsByService
+                  dnpName={container.dnpName}
+                  serviceName={container.serviceName}
+                  ports={container.ports}
+                />
+              ) : mappingSelected === 1 ? (
+                <HttpsMappings
+                  dnpName={container.dnpName}
+                  serviceName={container.serviceName}
+                />
+              ) : (
+                <div>TODO TOR IMPLEMENTATION</div>
+              )}
+            </div>
+          </>
+        )}
+      </Card>
     </>
   );
 }

packages/admin-ui/src/pages/packages/components/Network/network.scss

@@ -16,6 +16,7 @@
   }
 
   .button-row {
+    margin-top: 20px;
     display: flex;
     justify-content: space-between;
   }
@@ -42,3 +43,28 @@
     border-color: #ced4da;
   }
 }
+
+.mappings-navbar {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 30px;
+  font-size: large;
+  color: #7b7d7f;
+
+  div{
+    cursor: pointer;
+  }
+
+  div:hover{
+    color: black;
+    transition: color 0.3s ease-in-out; 
+  }
+
+  .selected {
+    border: none;  
+    border-bottom: 5px solid var(--dappnode-strong-main-color);
+    color: black;
+  }
+}

packages/dappmanager/src/calls/getContainerAliases.ts

@@ -0,0 +1,11 @@
+import { dockerContainerInspect } from "@dappnode/dockerapi";
+
+/**
+ * Returns a string list with the aliases from the container provided
+ */
+export async function getContainerAliases(containerId: string): Promise<any> {
+  const inspectOutput = await dockerContainerInspect(containerId);
+  const aliases =
+    inspectOutput.NetworkSettings.Networks["dncore_network"].Aliases;
+  return aliases;
+}

packages/dappmanager/src/calls/index.ts

@@ -18,6 +18,7 @@ export { fetchCoreUpdateData } from "./fetchCoreUpdateData.js";
 export { fetchDirectory } from "./fetchDirectory.js";
 export { fetchDnpRequest } from "./fetchDnpRequest.js";
 export { fetchRegistry } from "./fetchRegistry.js";
+export { getContainerAliases } from "./getContainerAliases.js";
 export { getCoreVersion } from "./getCoreVersion.js";
 export { getUserActionLogs } from "./getUserActionLogs.js";
 export { getHostUptime } from "./getHostUptime.js";

packages/types/src/routes.ts

@@ -226,6 +226,11 @@ export interface Routes {
    */
   disableEthicalMetrics: () => Promise<void>;
 
+  /**
+   * Returns current docker aliases from provided container
+   */
+  getContainerAliases: (containerId: string) => Promise<any>;
+
   /**
    * Returns current core version in string if core was installed, else returns empty string
    */
@@ -682,6 +687,7 @@ export const routesData: { [P in keyof Routes]: RouteData } = {
   ethClientFallbackSet: {},
   ethClientTargetSet: { log: true },
   enableEthicalMetrics: { log: true },
+  getContainerAliases: {},
   getCoreVersion: {},
   getEthicalMetricsConfig: { log: true },
   getIsConnectedToInternet: {},