Skip to content

Commit

Permalink
Merge pull request #973 from equinor/master
Browse files Browse the repository at this point in the history
Show ext alias links (#972)
  • Loading branch information
satr authored Feb 28, 2024
2 parents 97fa8dc + 62e05e9 commit 7ce3fe1
Show file tree
Hide file tree
Showing 11 changed files with 320 additions and 160 deletions.
59 changes: 0 additions & 59 deletions src/components/app-overview/dns-aliases.tsx

This file was deleted.

29 changes: 24 additions & 5 deletions src/components/app-overview/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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">
Expand All @@ -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>
)}
Expand Down
71 changes: 71 additions & 0 deletions src/components/component/dns-aliases.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
))}
</>
);
38 changes: 38 additions & 0 deletions src/components/component/dns_alias.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export const ActiveComponentOverview: FunctionComponent<{
<Overview
appAlias={appAlias}
dnsAliases={componentDNSAliases}
dnsExternalAliases={component.externalDNS}
envName={envName}
component={component}
deployment={deployment}
Expand Down
40 changes: 10 additions & 30 deletions src/components/page-active-component/dns-alias.tsx
Original file line number Diff line number Diff line change
@@ -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,
};
53 changes: 53 additions & 0 deletions src/components/page-active-component/dns-aliases.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
))}
</>
);
Loading

0 comments on commit 7ce3fe1

Please sign in to comment.