diff --git a/packages/admin-ui/src/__mock-backend__/index.ts b/packages/admin-ui/src/__mock-backend__/index.ts index b547e360d..efa1a72eb 100644 --- a/packages/admin-ui/src/__mock-backend__/index.ts +++ b/packages/admin-ui/src/__mock-backend__/index.ts @@ -386,7 +386,8 @@ export const otherCalls: Omit = { 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 = { diff --git a/packages/admin-ui/src/pages/packages/components/Network/index.tsx b/packages/admin-ui/src/pages/packages/components/Network/index.tsx index 511dce5fb..c873d5573 100644 --- a/packages/admin-ui/src/pages/packages/components/Network/index.tsx +++ b/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 { ServiceSelector } from "../ServiceSelector"; 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 { + setAliases(await api.getContainerAliases(container!.containerId)); + } + getContainerAliases(); + } + }, [container]); + return ( <> - + {container && (
Container IP: {container.ip || "Not available"} + {alisases && ( + <> +
+
+ Aliases: +
    + {alisases.map(alias => ( +
  • {alias}
  • + ))} +
+ + )} + + {/* TODO: include docu "Network tab" url when done */} + + Learn more about Network tab in our Documentation +
)} -
- {container && ( - <> - Public port mapping - - - + {container && ( + <> +
+ {mappings.map((mapping, i) => ( +
setMappingSelected(i)} + className={mappingSelected === i ? 'selected':undefined} + > + {mapping} +
+ ))} +
- HTTPs domain mapping - - - - - )} + {mappings[mappingSelected]} +
+ {mappingSelected === 0 ? ( + + ) : mappingSelected === 1 ? ( + + ) : ( +
TODO TOR IMPLEMENTATION
+ )} +
+ + )} + ); } diff --git a/packages/admin-ui/src/pages/packages/components/Network/network.scss b/packages/admin-ui/src/pages/packages/components/Network/network.scss index e254aec2f..31ae4d0c7 100644 --- a/packages/admin-ui/src/pages/packages/components/Network/network.scss +++ b/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; + } +} diff --git a/packages/dappmanager/src/calls/getContainerAliases.ts b/packages/dappmanager/src/calls/getContainerAliases.ts new file mode 100644 index 000000000..c7875dc0c --- /dev/null +++ b/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 { + const inspectOutput = await dockerContainerInspect(containerId); + const aliases = + inspectOutput.NetworkSettings.Networks["dncore_network"].Aliases; + return aliases; +} diff --git a/packages/dappmanager/src/calls/index.ts b/packages/dappmanager/src/calls/index.ts index a61851ced..241e9c029 100644 --- a/packages/dappmanager/src/calls/index.ts +++ b/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"; diff --git a/packages/types/src/routes.ts b/packages/types/src/routes.ts index 5173890dc..25dfcef39 100644 --- a/packages/types/src/routes.ts +++ b/packages/types/src/routes.ts @@ -226,6 +226,11 @@ export interface Routes { */ disableEthicalMetrics: () => Promise; + /** + * Returns current docker aliases from provided container + */ + getContainerAliases: (containerId: string) => Promise; + /** * 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: {},