feat: Allow external links on Application (argoproj#3487)

Signed-off-by: Keith Chong <kykchong@redhat.com>
keithchong · Jan 19, 2022 · b2dacce · b2dacce
1 parent dc24d05
commit b2dacce
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 5 deletions.
diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -11,7 +11,7 @@ import {Consumer} from '../../../shared/context';
 import {ApplicationURLs} from '../application-urls';
 import {ResourceIcon} from '../resource-icon';
 import {ResourceLabel} from '../resource-label';
-import {BASE_COLORS, ComparisonStatusIcon, getAppOverridesCount, HealthStatusIcon, isAppNode, NodeId, nodeKey} from '../utils';
+import {BASE_COLORS, ComparisonStatusIcon, getAppOverridesCount, getExternalUrls, HealthStatusIcon, isAppNode, NodeId, nodeKey} from '../utils';
 import {NodeUpdateAnimation} from './node-update-animation';
 
 function treeNodeKey(node: NodeId & {uid?: string}) {
@@ -337,6 +337,10 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
     }
     const appNode = isAppNode(node);
     const rootNode = !node.root;
+    let extLinks: string[] = props.app.status.summary.externalURLs;
+    if (rootNode) {
+        extLinks = getExternalUrls(props.app.metadata.annotations, props.app.status.summary.externalURLs);
+    }
     return (
         <div
             onClick={() => props.onNodeClick && props.onNodeClick(fullName)}
@@ -374,7 +378,7 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                             )}
                         </Consumer>
                     )}
-                    <ApplicationURLs urls={rootNode ? props.app.status.summary.externalURLs : node.networkingInfo && node.networkingInfo.externalURLs} />
+                    <ApplicationURLs urls={rootNode ? extLinks : node.networkingInfo && node.networkingInfo.externalURLs} />
                 </span>
             </div>
             <div className='application-resource-tree__node-labels'>

diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -49,7 +49,7 @@ export const ApplicationsTable = (props: {
                                     <div className='row'>
                                         <div className='show-for-xxlarge columns small-3'>Name:</div>
                                         <div className='columns small-12 xxlarge-9'>
-                                            {app.metadata.name} <ApplicationURLs urls={app.status.summary.externalURLs} />
+                                            {app.metadata.name} <ApplicationURLs urls={AppUtils.getExternalUrls(app.metadata.annotations, app.status.summary.externalURLs)} />
                                         </div>
                                     </div>
                                 </div>

diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -114,7 +114,7 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                                         <div className='row' onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {view: pref.appDetails.view}, {event: e})}>
                                             <div className={`columns small-12 applications-list__info qe-applications-list-${app.metadata.name}`}>
                                                 <div className='applications-list__external-link'>
-                                                    <ApplicationURLs urls={app.status.summary.externalURLs} />
+                                                    <ApplicationURLs urls={AppUtils.getExternalUrls(app.metadata.annotations, app.status.summary.externalURLs)} />
                                                 </div>
                                                 <div className='row'>
                                                     <div className='columns small-12'>

diff --git a/ui/src/app/applications/components/utils.test.tsx b/ui/src/app/applications/components/utils.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import {Application, HealthStatus, HealthStatuses, OperationPhases, ResourceResult, ResultCodes, SyncStatuses} from '../../shared/models';
-import {ComparisonStatusIcon, getAppOperationState, getOperationType, HealthStatusIcon, OperationState, ResourceResultIcon} from './utils';
+import {ComparisonStatusIcon, getAppOperationState, getExternalUrls, getOperationType, HealthStatusIcon, OperationState, ResourceResultIcon} from './utils';
 
 const zero = new Date(0).toISOString();
 
@@ -28,6 +28,38 @@ test('getAppOperationState.Status', () => {
     expect(state.phase).toBe(OperationPhases.Error);
 });
 
+test('getExternalUrls One URL from annotation, Empty External URL array', () => {
+    const links = getExternalUrls(
+        {
+            'link.argocd.argoproj.io/external-link' : 'https://github.com/argoproj/argo-cd'
+        }, []
+    );
+    expect(links.length).toBe(1);
+    expect(links[0]).toBe('https://github.com/argoproj/argo-cd');
+});
+
+test('getExternalUrls One URL from annotation, null URL array', () => {
+    const links = getExternalUrls(
+        {
+            'link.argocd.argoproj.io/external-link' : 'https://github.com/argoproj/argo-cd'
+        }, null
+    );
+    expect(links.length).toBe(1);
+    expect(links[0]).toBe('https://github.com/argoproj/argo-cd');
+});
+
+test('getExternalUrls One URL from annotation, One External URL array', () => {
+    const links = getExternalUrls(
+        {
+            'link.argocd.argoproj.io/external-link' : 'https://github.com/argoproj/argo-cd'
+        }, ['http://ingress-url:1234']
+    );
+
+    expect(links.length).toBe(2);
+    expect(links[0]).toBe('http://ingress-url:1234');
+    expect(links[1]).toBe('https://github.com/argoproj/argo-cd');
+});
+
 test('getOperationType.Delete', () => {
     const state = getOperationType({metadata: {deletionTimestamp: zero.toString()}} as Application);
 

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -23,6 +23,8 @@ export interface NodeId {
     group: string;
 }
 
+export const ExternalLinkAnnotation = 'link.argocd.argoproj.io/external-link';
+
 type ActionMenuItem = MenuItem & {disabled?: boolean};
 
 export function nodeKey(node: NodeId) {
@@ -655,6 +657,20 @@ export const getAppOperationState = (app: appModels.Application): appModels.Oper
     }
 };
 
+export function getExternalUrls(annotations: {[name: string]: string}, urls: string[]): string[] {
+    if (!annotations) {
+        return urls;
+    }
+    const extLinks = urls || [];
+    const extLink: string = annotations[ExternalLinkAnnotation];
+    if (extLink) {
+        if (!extLinks.includes(extLink)) {
+            extLinks.push(extLink);
+        }
+    }
+    return extLinks;
+}
+
 export function getOperationType(application: appModels.Application) {
     const operation = application.operation || (application.status && application.status.operationState && application.status.operationState.operation);
     if (application.metadata.deletionTimestamp && !application.operation) {