From 62e05e92140b21ef68a70a51c6566d1cbe5b68f4 Mon Sep 17 00:00:00 2001
From: Sergey Smolnikov <ssmol@equinor.com>
Date: Tue, 27 Feb 2024 16:53:55 +0100
Subject: [PATCH] Show ext alias links (#972)

* Added ext alias to component

* Added ext alias to app

* Ext alias in app changed to accordeon

* Ext alias added to env

* Removed duplicate component

* Added collapsable DNSs for components

* Fixed fail
---
 src/components/app-overview/dns-aliases.tsx   |  59 -------
 src/components/app-overview/index.tsx         |  29 +++-
 .../default-app-alias.tsx                     |   0
 src/components/component/dns-aliases.tsx      |  71 ++++++++
 src/components/component/dns_alias.tsx        |  38 +++++
 .../active-component-overview.tsx             |   1 +
 .../page-active-component/dns-alias.tsx       |  40 ++---
 .../page-active-component/dns-aliases.tsx     |  53 ++++++
 .../page-active-component/overview.tsx        | 152 ++++++++++--------
 .../page-environment/environment-overview.tsx |  27 +++-
 src/store/radix-api.ts                        |  10 ++
 11 files changed, 320 insertions(+), 160 deletions(-)
 delete mode 100644 src/components/app-overview/dns-aliases.tsx
 rename src/components/{app-overview => component}/default-app-alias.tsx (100%)
 create mode 100644 src/components/component/dns-aliases.tsx
 create mode 100644 src/components/component/dns_alias.tsx
 create mode 100644 src/components/page-active-component/dns-aliases.tsx

diff --git a/src/components/app-overview/dns-aliases.tsx b/src/components/app-overview/dns-aliases.tsx
deleted file mode 100644
index f8c59fc63..000000000
--- a/src/components/app-overview/dns-aliases.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Icon, List, Typography } from '@equinor/eds-core-react';
-import { link } from '@equinor/eds-icons';
-import { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
-
-import { getActiveComponentUrl, getEnvUrl } from '../../utils/routing';
-import { DnsAlias } from '../../store/radix-api';
-
-export interface DefaultAppAliasProps {
-  appName: string;
-  dnsAliases?: DnsAlias[];
-}
-
-export const DnsAliases: FunctionComponent<DefaultAppAliasProps> = ({
-  appName,
-  dnsAliases,
-}) => (
-  <>
-    {dnsAliases && (
-      <div className="grid grid--gap-x-small">
-        <Typography variant="h4">
-          DNS alias{dnsAliases.length > 1 ? 'es' : ''}
-        </Typography>
-        <List>
-          {dnsAliases?.map((dnsAlias, index) => (
-            <div key={index} className="o-item-list">
-              <Typography>
-                <Icon data={link} />
-                <Typography link href={`https://${dnsAlias.url}`}>
-                  {dnsAlias.url}
-                </Typography>{' '}
-                is mapped to component{' '}
-                <Typography
-                  as={Link}
-                  to={getActiveComponentUrl(
-                    appName,
-                    dnsAlias.environmentName,
-                    dnsAlias.componentName
-                  )}
-                  link
-                >
-                  {dnsAlias.componentName}
-                </Typography>{' '}
-                in environment{' '}
-                <Typography
-                  as={Link}
-                  to={getEnvUrl(appName, dnsAlias.environmentName)}
-                  link
-                >
-                  {dnsAlias.environmentName}
-                </Typography>
-              </Typography>
-            </div>
-          ))}
-        </List>
-      </div>
-    )}
-  </>
-);
diff --git a/src/components/app-overview/index.tsx b/src/components/app-overview/index.tsx
index b6bf54c8b..5f0ace26a 100644
--- a/src/components/app-overview/index.tsx
+++ b/src/components/app-overview/index.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@equinor/eds-core-react';
 
-import { DefaultAppAlias } from './default-app-alias';
-import { DnsAliases } from './dns-aliases';
+import { DefaultAppAlias } from '../component/default-app-alias';
+import { DNSAliases } from '../component/dns-aliases';
 import { Alert } from '../alert';
 import ApplicationCost from '../application-cost';
 import { FutureApplicationCost } from '../application-future-cost';
@@ -25,8 +25,14 @@ export function AppOverview({ appName }: { appName: string }) {
     { skip: !appName, pollingInterval }
   );
 
-  const { appAlias, dnsAliases, environments, jobs, registration } =
-    application ?? {};
+  const {
+    appAlias,
+    dnsAliases,
+    dnsExternalAliases,
+    environments,
+    jobs,
+    registration,
+  } = application ?? {};
 
   return (
     <main className="grid grid--gap-medium">
@@ -47,7 +53,20 @@ export function AppOverview({ appName }: { appName: string }) {
         </div>
 
         {appAlias && <DefaultAppAlias appName={appName} appAlias={appAlias} />}
-        {dnsAliases && <DnsAliases appName={appName} dnsAliases={dnsAliases} />}
+        {dnsAliases && (
+          <DNSAliases
+            appName={appName}
+            dnsAliases={dnsAliases}
+            title={'DNS aliases'}
+          />
+        )}
+        {DNSAliases && (
+          <DNSAliases
+            appName={appName}
+            dnsAliases={dnsExternalAliases}
+            title={'DNS external aliases'}
+          />
+        )}
         {environments?.length > 0 && (
           <Typography variant="h4">Environments</Typography>
         )}
diff --git a/src/components/app-overview/default-app-alias.tsx b/src/components/component/default-app-alias.tsx
similarity index 100%
rename from src/components/app-overview/default-app-alias.tsx
rename to src/components/component/default-app-alias.tsx
diff --git a/src/components/component/dns-aliases.tsx b/src/components/component/dns-aliases.tsx
new file mode 100644
index 000000000..4dbd30d71
--- /dev/null
+++ b/src/components/component/dns-aliases.tsx
@@ -0,0 +1,71 @@
+import { Accordion, List, Typography } from '@equinor/eds-core-react';
+import { FunctionComponent } from 'react';
+import { DnsAlias, DnsExternalAlias } from '../../store/radix-api';
+import { DNSAlias } from './dns_alias';
+
+export interface DefaultAppAliasProps {
+  appName: string;
+  dnsAliases?: DnsAlias[] | DnsExternalAlias[];
+  title: string;
+}
+
+export const DNSAliases: FunctionComponent<DefaultAppAliasProps> = ({
+  appName,
+  dnsAliases,
+  title,
+}) => (
+  <>
+    {dnsAliases?.length > 0 &&
+      (dnsAliases.length == 1 ? (
+        <div className="grid grid--gap-x-small">
+          <Typography variant="h4">{title}</Typography>
+          <Typography as="span">
+            <DNSAlias
+              appName={appName}
+              url={dnsAliases[0].url}
+              componentName={dnsAliases[0].componentName}
+              environmentName={dnsAliases[0].environmentName}
+            />
+          </Typography>
+        </div>
+      ) : (
+        <>
+          <Typography className="whitespace-nowrap" variant="h4" as="span">
+            {title}
+          </Typography>
+          <Accordion className="accordion elevated" chevronPosition="right">
+            <Accordion.Item isExpanded={false}>
+              <Accordion.Header>
+                <Accordion.HeaderTitle>
+                  <Typography className="whitespace-nowrap" as="span">
+                    <DNSAlias
+                      appName={appName}
+                      url={dnsAliases[0].url}
+                      componentName={dnsAliases[0].componentName}
+                      environmentName={dnsAliases[0].environmentName}
+                    />
+                  </Typography>
+                </Accordion.HeaderTitle>
+              </Accordion.Header>
+              <Accordion.Panel>
+                <List>
+                  {dnsAliases.slice(1)?.map((dnsAlias, index) => (
+                    <div key={index} className="o-item-list">
+                      <Typography as="span">
+                        <DNSAlias
+                          appName={appName}
+                          url={dnsAlias.url}
+                          componentName={dnsAlias.componentName}
+                          environmentName={dnsAlias.environmentName}
+                        />
+                      </Typography>
+                    </div>
+                  ))}
+                </List>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
+        </>
+      ))}
+  </>
+);
diff --git a/src/components/component/dns_alias.tsx b/src/components/component/dns_alias.tsx
new file mode 100644
index 000000000..341a57644
--- /dev/null
+++ b/src/components/component/dns_alias.tsx
@@ -0,0 +1,38 @@
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { link } from '@equinor/eds-icons';
+import { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+import { getActiveComponentUrl, getEnvUrl } from '../../utils/routing';
+export interface EnvironmentComponentProps {
+  appName: string;
+  url: string;
+  componentName: string;
+  environmentName: string;
+}
+
+export const DNSAlias: FunctionComponent<EnvironmentComponentProps> = ({
+  appName,
+  url,
+  componentName,
+  environmentName,
+}) => (
+  <>
+    <Icon data={link} />
+    <Typography link href={`https://${url}`}>
+      {url}
+    </Typography>{' '}
+    is mapped to component{' '}
+    <Typography
+      as={Link}
+      to={getActiveComponentUrl(appName, environmentName, componentName)}
+      link
+    >
+      {componentName}
+    </Typography>{' '}
+    in environment{' '}
+    <Typography as={Link} to={getEnvUrl(appName, environmentName)} link>
+      {environmentName}
+    </Typography>
+  </>
+);
diff --git a/src/components/page-active-component/active-component-overview.tsx b/src/components/page-active-component/active-component-overview.tsx
index bbf5af3ea..39b5fab1a 100644
--- a/src/components/page-active-component/active-component-overview.tsx
+++ b/src/components/page-active-component/active-component-overview.tsx
@@ -79,6 +79,7 @@ export const ActiveComponentOverview: FunctionComponent<{
             <Overview
               appAlias={appAlias}
               dnsAliases={componentDNSAliases}
+              dnsExternalAliases={component.externalDNS}
               envName={envName}
               component={component}
               deployment={deployment}
diff --git a/src/components/page-active-component/dns-alias.tsx b/src/components/page-active-component/dns-alias.tsx
index 6479e932a..152836cb7 100644
--- a/src/components/page-active-component/dns-alias.tsx
+++ b/src/components/page-active-component/dns-alias.tsx
@@ -1,37 +1,17 @@
-import * as PropTypes from 'prop-types';
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { external_link } from '@equinor/eds-icons';
 import { FunctionComponent } from 'react';
-import { Icon, List, Typography } from '@equinor/eds-core-react';
-import { link } from '@equinor/eds-icons';
-import { DnsAlias as DnsAliasModel } from '../../store/radix-api';
 
-export interface DNSAliasProps {
-  dnsAliases?: DnsAliasModel[];
+export interface EnvironmentComponentProps {
+  url: string;
 }
 
-export const DnsAlias: FunctionComponent<DNSAliasProps> = ({ dnsAliases }) => (
+export const DNSAlias: FunctionComponent<EnvironmentComponentProps> = ({
+  url,
+}) => (
   <>
-    {dnsAliases && (
-      <div className="grid grid--gap-x-small">
-        <Typography>DNS alias{dnsAliases.length > 1 ? 'es' : ''}</Typography>
-        <List>
-          {dnsAliases.map((dnsAlias, index) => (
-            <div key={index} className="o-item-list">
-              <Typography>
-                <Icon data={link} />
-                <Typography link href={`https://${dnsAlias.url}`}>
-                  {dnsAlias.url}
-                </Typography>
-              </Typography>
-            </div>
-          ))}
-        </List>
-      </div>
-    )}
+    <Typography link href={`https://${url}`}>
+      {url} <Icon data={external_link} size={16} />
+    </Typography>
   </>
 );
-
-DnsAlias.propTypes = {
-  dnsAliases: PropTypes.arrayOf(
-    PropTypes.object as PropTypes.Validator<DnsAliasModel>
-  ).isRequired,
-};
diff --git a/src/components/page-active-component/dns-aliases.tsx b/src/components/page-active-component/dns-aliases.tsx
new file mode 100644
index 000000000..d70725d62
--- /dev/null
+++ b/src/components/page-active-component/dns-aliases.tsx
@@ -0,0 +1,53 @@
+import { Accordion, List, Typography } from '@equinor/eds-core-react';
+import { FunctionComponent } from 'react';
+import { DNSAlias } from './dns-alias';
+
+export interface DefaultAppAliasProps {
+  urls?: string[];
+  title: string;
+}
+
+export const DNSAliases: FunctionComponent<DefaultAppAliasProps> = ({
+  urls,
+  title,
+}) => (
+  <>
+    {urls.length > 0 &&
+      (urls.length == 1 ? (
+        <div className="grid grid--gap-x-small">
+          <Typography variant="h4">{title}</Typography>
+          <Typography as="span">
+            <DNSAlias url={urls[0]} />
+          </Typography>
+        </div>
+      ) : (
+        <>
+          <Typography className="whitespace-nowrap" variant="h4" as="span">
+            {title}
+          </Typography>
+          <Accordion className="accordion elevated" chevronPosition="right">
+            <Accordion.Item isExpanded={false}>
+              <Accordion.Header>
+                <Accordion.HeaderTitle>
+                  <Typography className="whitespace-nowrap" as="span">
+                    <DNSAlias url={urls[0]} />
+                  </Typography>
+                </Accordion.HeaderTitle>
+              </Accordion.Header>
+              <Accordion.Panel>
+                <List>
+                  {urls.slice(1)?.map((url, index) => (
+                    <div key={index} className="o-item-list">
+                      <Typography as="span">
+                        <DNSAlias url={url} />
+                      </Typography>
+                    </div>
+                  ))}
+                </List>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
+        </>
+      ))}
+  </>
+);
diff --git a/src/components/page-active-component/overview.tsx b/src/components/page-active-component/overview.tsx
index db1d6ca33..84f198328 100644
--- a/src/components/page-active-component/overview.tsx
+++ b/src/components/page-active-component/overview.tsx
@@ -4,102 +4,124 @@ import * as PropTypes from 'prop-types';
 import { FunctionComponent } from 'react';
 
 import { DefaultAlias } from './default-alias';
-import { DnsAlias } from './dns-alias';
 
 import { Alert } from '../alert';
 import { ComponentIdentity } from '../component/component-identity';
 import { ComponentPorts } from '../component/component-ports';
 import { DockerImage } from '../docker-image';
 import { ComponentStatusBadge } from '../status-badges';
+
 import {
   ApplicationAlias,
   Component,
   Deployment,
   DnsAlias as DnsAliasModel,
+  ExternalDns,
 } from '../../store/radix-api';
-
 import './style.css';
+import { DNSAliases } from './dns-aliases';
 
 const URL_VAR_NAME = 'RADIX_PUBLIC_DOMAIN_NAME';
 
 export const Overview: FunctionComponent<{
   appAlias?: ApplicationAlias;
   dnsAliases?: DnsAliasModel[];
+  dnsExternalAliases?: ExternalDns[];
   envName: string;
   component: Component;
   deployment: Deployment;
-}> = ({ appAlias, dnsAliases, envName, component, deployment }) => (
-  <div className="grid grid--gap-medium">
-    <Typography variant="h4">Overview</Typography>
+}> = ({
+  appAlias,
+  dnsAliases,
+  dnsExternalAliases,
+  envName,
+  component,
+  deployment,
+}) => {
+  const dnsAliasUrls = dnsAliases ? dnsAliases.map((alias) => alias.url) : [];
+  const dnsExternalAliasUrls = dnsExternalAliases
+    ? dnsExternalAliases.map((alias) => alias.fqdn)
+    : [];
+  return (
+    <div className="grid grid--gap-medium">
+      <Typography variant="h4">Overview</Typography>
 
-    {component.status === 'Stopped' && (
-      <Alert>
-        Component has been manually stopped; please note that a new deployment
-        will cause it to be restarted unless you set <code>replicas</code> of
-        the component to <code>0</code> in{' '}
-        <Typography
-          link
-          href="https://radix.equinor.com/references/reference-radix-config/#replicas"
-        >
-          radixconfig.yaml
-        </Typography>
-      </Alert>
-    )}
-
-    <div className="grid grid--gap-medium grid--overview-columns">
-      <div className="grid grid--gap-medium">
-        <Typography>
-          Component <strong>{component.name}</strong>
-        </Typography>
-        <Typography>
-          Image <DockerImage path={component.image} />
-        </Typography>
-        {component.identity && (
-          <ComponentIdentity
-            identity={component.identity}
-            deployment={deployment}
-          />
-        )}
-      </div>
+      {component.status === 'Stopped' && (
+        <Alert>
+          Component has been manually stopped; please note that a new deployment
+          will cause it to be restarted unless you set <code>replicas</code> of
+          the component to <code>0</code> in{' '}
+          <Typography
+            link
+            href="https://radix.equinor.com/references/reference-radix-config/#replicas"
+          >
+            radixconfig.yaml
+          </Typography>
+        </Alert>
+      )}
 
-      <div className="grid grid--gap-medium">
-        <div className="grid grid--gap-small grid--auto-columns">
-          <Typography>Status</Typography>
-          <ComponentStatusBadge status={component.status} />
-        </div>
-        {component.variables?.[URL_VAR_NAME] && (
+      <div className="grid grid--gap-medium grid--overview-columns">
+        <div className="grid grid--gap-medium">
           <Typography>
-            Publicly available{' '}
-            <Typography
-              link
-              href={`https://${component.variables[URL_VAR_NAME]}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              link <Icon data={external_link} size={16} />
-            </Typography>
+            Component <strong>{component.name}</strong>
           </Typography>
-        )}
-        {appAlias && (
-          <DefaultAlias
-            appAlias={appAlias}
-            componentName={component.name}
-            envName={envName}
-          />
-        )}
-        {dnsAliases?.length > 0 && (
-          <>
-            <DnsAlias dnsAliases={dnsAliases} />
-          </>
-        )}
-        <ComponentPorts ports={component.ports} />
+          <Typography>
+            Image <DockerImage path={component.image} />
+          </Typography>
+          {component.identity && (
+            <ComponentIdentity
+              identity={component.identity}
+              deployment={deployment}
+            />
+          )}
+        </div>
+
+        <div className="grid grid--gap-medium">
+          <div className="grid grid--gap-small grid--auto-columns">
+            <Typography>Status</Typography>
+            <ComponentStatusBadge status={component.status} />
+          </div>
+          {component.variables?.[URL_VAR_NAME] && (
+            <Typography>
+              Publicly available{' '}
+              <Typography
+                link
+                href={`https://${component.variables[URL_VAR_NAME]}`}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                link <Icon data={external_link} size={16} />
+              </Typography>
+            </Typography>
+          )}
+          {appAlias && (
+            <DefaultAlias
+              appAlias={appAlias}
+              componentName={component.name}
+              envName={envName}
+            />
+          )}
+          {dnsAliasUrls?.length > 0 && (
+            <DNSAliases urls={dnsAliasUrls} title={'DNS aliases'} />
+          )}
+          {dnsExternalAliasUrls?.length > 0 && (
+            <DNSAliases
+              urls={dnsExternalAliasUrls}
+              title={'DNS external aliases'}
+            />
+          )}
+          <ComponentPorts ports={component.ports} />
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 Overview.propTypes = {
   appAlias: PropTypes.object as PropTypes.Validator<ApplicationAlias>,
+  dnsExternalAliases: PropTypes.arrayOf(
+    PropTypes.object as PropTypes.Validator<ExternalDns>
+  ),
   envName: PropTypes.string.isRequired,
   component: PropTypes.object.isRequired as PropTypes.Validator<Component>,
   deployment: PropTypes.object.isRequired as PropTypes.Validator<Deployment>,
diff --git a/src/components/page-environment/environment-overview.tsx b/src/components/page-environment/environment-overview.tsx
index 667d2f55d..865e0c890 100644
--- a/src/components/page-environment/environment-overview.tsx
+++ b/src/components/page-environment/environment-overview.tsx
@@ -41,6 +41,8 @@ import {
 
 import './style.css';
 import { GitCommitTags } from '../component/git-commit-tags';
+import { DefaultAppAlias } from '../component/default-app-alias';
+import { DNSAliases } from '../component/dns-aliases';
 
 export const EnvironmentOverview: FunctionComponent<{
   appName: string;
@@ -64,6 +66,13 @@ export const EnvironmentOverview: FunctionComponent<{
   );
   const [deleteEnvTrigger, deleteEnvState] =
     radixApi.endpoints.deleteEnvironment.useMutation();
+  const { appAlias, dnsAliases, dnsExternalAliases } = application ?? {};
+  const envDNSAliases = dnsAliases
+    ? dnsAliases.filter((alias) => alias.environmentName == envName)
+    : [];
+  const envDNSExternalAliases = dnsExternalAliases
+    ? dnsExternalAliases.filter((alias) => alias.environmentName == envName)
+    : [];
 
   const isLoaded = application && environment;
   const isOrphan = environment?.status === 'Orphan';
@@ -126,7 +135,6 @@ export const EnvironmentOverview: FunctionComponent<{
           )}
         </div>
       )}
-
       <AsyncResource asyncState={envState}>
         {isLoaded && (
           <>
@@ -255,6 +263,23 @@ export const EnvironmentOverview: FunctionComponent<{
               </div>
             </section>
 
+            {appAlias?.environmentName == envName && (
+              <DefaultAppAlias appName={appName} appAlias={appAlias} />
+            )}
+            {envDNSAliases?.length > 0 && (
+              <DNSAliases
+                appName={appName}
+                dnsAliases={envDNSAliases}
+                title={'DNS aliases'}
+              />
+            )}
+            {envDNSExternalAliases?.length > 0 && (
+              <DNSAliases
+                appName={appName}
+                dnsAliases={envDNSExternalAliases}
+                title={'DNS external aliases'}
+              />
+            )}
             {deployment && (
               <ComponentList
                 appName={appName}
diff --git a/src/store/radix-api.ts b/src/store/radix-api.ts
index 433e28b6d..90b06d7f0 100644
--- a/src/store/radix-api.ts
+++ b/src/store/radix-api.ts
@@ -2394,6 +2394,14 @@ export type DnsAlias = {
   /** URL the public endpoint */
   url: string;
 };
+export type DnsExternalAlias = {
+  /** ComponentName the component exposing the endpoint */
+  componentName: string;
+  /** EnvironmentName the environment hosting the endpoint */
+  environmentName: string;
+  /** URL the public endpoint */
+  url: string;
+};
 export type ComponentSummary = {
   /** CommitID the commit ID of the branch to build
     REQUIRED for "build" and "build-deploy" pipelines */
@@ -2450,6 +2458,8 @@ export type Application = {
   appAlias?: ApplicationAlias;
   /** DNS aliases showing nicer endpoint for application, without "app." subdomain domain */
   dnsAliases?: DnsAlias[];
+  /** List of external DNS names and which component and environment incoming requests shall be routed to. */
+  dnsExternalAliases?: DnsExternalAlias[];
   /** Environments List of environments for this application */
   environments?: EnvironmentSummary[];
   /** Jobs list of run jobs for the application */