fix(ui): Display error message instead of DAG when DAG cannot be rendered. Fixes #3091

test/e2e/ui/ui-workflow-error.yaml

@@ -0,0 +1,11 @@
+apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  name: ui-workflow-error
+  namespace: argo
+spec:
+  entrypoint: main
+  templates:
+    - name: noop
+  workflowTemplateRef:
+    name: not-exists

ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx

@@ -10,9 +10,9 @@ import {YamlEditor} from '../../../shared/components/yaml/yaml-editor';
 import {services} from '../../../shared/services';
 import {
     WorkflowArtifacts,
-    WorkflowDag,
     WorkflowLogsViewer,
     WorkflowNodeInfo,
+    WorkflowPanel,
     WorkflowParametersPanel,
     WorkflowSummaryPanel,
     WorkflowTimeline,
@@ -159,9 +159,9 @@ export class ArchivedWorkflowDetails extends BasePage<RouteComponentProps<any>,
                     <div>
                         <div className='workflow-details__graph-container'>
                             {this.tab === 'workflow' ? (
-                                <WorkflowDag
-                                    nodes={this.state.workflow.status.nodes}
-                                    workflowName={this.state.workflow.metadata.name}
+                                <WorkflowPanel
+                                    workflowMetadata={this.state.workflow.metadata}
+                                    workflowStatus={this.state.workflow.status}
                                     selectedNodeId={this.nodeId}
                                     nodeClicked={nodeId => (this.nodeId = nodeId)}
                                 />

ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx

@@ -1,6 +1,5 @@
 import {Page, SlidingPanel} from 'argo-ui';
 
-import * as classNames from 'classnames';
 import * as React from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 import * as models from '../../../../models';
@@ -9,6 +8,7 @@ import {uiUrl} from '../../../shared/base';
 import {BasePage} from '../../../shared/components/base-page';
 import {Loading} from '../../../shared/components/loading';
 import {PaginationPanel} from '../../../shared/components/pagination-panel';
+import {PhaseIcon} from '../../../shared/components/phase-icon';
 import {ResourceSubmit} from '../../../shared/components/resource-submit';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {ZeroState} from '../../../shared/components/zero-state';
@@ -235,7 +235,7 @@ export class ArchivedWorkflowList extends BasePage<RouteComponentProps<any>, Sta
                     {this.state.workflows.map(w => (
                         <Link className='row argo-table-list__row' key={`${w.metadata.uid}`} to={uiUrl(`archived-workflows/${w.metadata.namespace}/${w.metadata.uid}`)}>
                             <div className='columns small-1'>
-                                <i className={classNames('fa', Utils.statusIconClasses(w.status.phase))} />
+                                <PhaseIcon value={w.status.phase} />
                             </div>
                             <div className='columns small-3'>{w.metadata.name}</div>
                             <div className='columns small-2'>{w.metadata.namespace}</div>

ui/src/app/shared/components/phase-icon.tsx

@@ -0,0 +1,8 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+import {NodePhase} from '../../../models';
+import {Utils} from '../utils';
+
+export const PhaseIcon = ({value}: {value: NodePhase}) => {
+    return <i className={classNames('fa', Utils.statusIconClasses(value))} aria-hidden='true' />;
+};

ui/src/app/shared/components/phase.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {NodePhase} from '../../../models';
+import {PhaseIcon} from './phase-icon';
+
+export const Phase = ({value}: {value: NodePhase}) => {
+    return (
+        <>
+            <PhaseIcon value={value} /> {value}
+        </>
+    );
+};

ui/src/app/workflows/components/index.ts

@@ -5,5 +5,6 @@ export * from './workflow-timeline/workflow-timeline';
 export * from './workflow-yaml-viewer/workflow-yaml-viewer';
 export * from './workflows-list/workflows-list';
 export * from './workflow-artifacts';
+export * from './workflow-panel/workflow-panel';
 export * from './workflow-parameters-panel';
 export * from './workflow-summary-panel';

ui/src/app/workflows/components/workflow-details/workflow-details.tsx

@@ -9,8 +9,9 @@ import {Link, NodePhase, Workflow} from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {services} from '../../../shared/services';
 
-import {WorkflowArtifacts, WorkflowDag, WorkflowLogsViewer, WorkflowNodeInfo, WorkflowSummaryPanel, WorkflowTimeline, WorkflowYamlViewer} from '..';
+import {WorkflowArtifacts, WorkflowLogsViewer, WorkflowNodeInfo, WorkflowPanel, WorkflowSummaryPanel, WorkflowTimeline, WorkflowYamlViewer} from '..';
 import {CostOptimisationNudge} from '../../../shared/components/cost-optimisation-nudge';
+import {Loading} from '../../../shared/components/loading';
 import {hasWarningConditionBadge} from '../../../shared/conditions-panel';
 import {Consumer, ContextApis} from '../../../shared/context';
 import {Utils} from '../../../shared/utils';
@@ -129,9 +130,9 @@ export class WorkflowDetails extends React.Component<RouteComponentProps<any>, W
                                     <div>
                                         <div className='workflow-details__graph-container'>
                                             {(this.selectedTabKey === 'workflow' && (
-                                                <WorkflowDag
-                                                    nodes={this.state.workflow.status.nodes}
-                                                    workflowName={this.state.workflow.metadata.name}
+                                                <WorkflowPanel
+                                                    workflowMetadata={this.state.workflow.metadata}
+                                                    workflowStatus={this.state.workflow.status}
                                                     selectedNodeId={this.selectedNodeId}
                                                     nodeClicked={nodeId => this.selectNode(nodeId)}
                                                 />
@@ -384,7 +385,7 @@ export class WorkflowDetails extends React.Component<RouteComponentProps<any>, W
 
     private renderSummaryTab() {
         if (!this.state.workflow) {
-            return <div>Loading...</div>;
+            return <Loading />;
         }
         return (
             <div className='argo-container'>

ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx

@@ -1,14 +1,13 @@
 import {Duration, Tabs, Ticker} from 'argo-ui';
-import * as classNames from 'classnames';
 import * as moment from 'moment';
 import * as React from 'react';
 
 import * as models from '../../../../models';
+import {Phase} from '../../../shared/components/phase';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {ResourcesDuration} from '../../../shared/resources-duration';
 import {services} from '../../../shared/services';
 import {getResolvedTemplates} from '../../../shared/template-resolution';
-import {Utils} from '../../../shared/utils';
 
 require('./workflow-node-info.scss');
 
@@ -46,11 +45,7 @@ export const WorkflowNodeSummary = (props: Props) => {
         {title: 'TYPE', value: props.node.type},
         {
             title: 'PHASE',
-            value: (
-                <span>
-                    <i className={classNames('fa', Utils.statusIconClasses(props.node.phase))} aria-hidden='true' /> {props.node.phase}
-                </span>
-            )
+            value: <Phase value={props.node.phase} />
         },
         ...(props.node.message
             ? [

ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx

@@ -0,0 +1,36 @@
+import {ObjectMeta} from 'argo-ui/src/models/kubernetes';
+import * as React from 'react';
+import {WorkflowDag} from '..';
+import {labels, WorkflowStatus} from '../../../../models';
+import {Notice} from '../../../shared/components/notice';
+import {Phase} from '../../../shared/components/phase';
+
+interface Props {
+    workflowMetadata: ObjectMeta;
+    workflowStatus: WorkflowStatus;
+    selectedNodeId: string;
+    nodeClicked: (nodedId: string) => void;
+}
+
+export class WorkflowPanel extends React.Component<Props> {
+    public render() {
+        if (this.props.workflowMetadata.labels[labels.completed] === 'true' && !this.props.workflowStatus.nodes) {
+            return (
+                <div className='argo-container'>
+                    <Notice>
+                        <Phase value={this.props.workflowStatus.phase} />: {this.props.workflowStatus.message}
+                    </Notice>
+                </div>
+            );
+        }
+
+        return (
+            <WorkflowDag
+                workflowName={this.props.workflowMetadata.name}
+                nodes={this.props.workflowStatus.nodes}
+                selectedNodeId={this.props.selectedNodeId}
+                nodeClicked={this.props.nodeClicked}
+            />
+        );
+    }
+}

ui/src/app/workflows/components/workflow-summary-panel.tsx

@@ -2,6 +2,8 @@ import {Ticker} from 'argo-ui';
 import * as React from 'react';
 
 import {NODE_PHASE, Workflow} from '../../../models';
+import {Phase} from '../../shared/components/phase';
+import {Timestamp} from '../../shared/components/timestamp';
 import {ConditionsPanel} from '../../shared/conditions-panel';
 import {formatDuration, wfDuration} from '../../shared/duration';
 import {ResourcesDuration} from '../../shared/resources-duration';
@@ -10,12 +12,12 @@ export const WorkflowSummaryPanel = (props: {workflow: Workflow}) => (
     <Ticker disabled={props.workflow && props.workflow.status.phase !== NODE_PHASE.RUNNING}>
         {() => {
             const attributes: {title: string; value: any}[] = [
-                {title: 'Status', value: props.workflow.status.phase},
+                {title: 'Status', value: <Phase value={props.workflow.status.phase} />},
                 {title: 'Message', value: props.workflow.status.message},
                 {title: 'Name', value: props.workflow.metadata.name},
                 {title: 'Namespace', value: props.workflow.metadata.namespace},
-                {title: 'Started At', value: props.workflow.status.startedAt},
-                {title: 'Finished At', value: props.workflow.status.finishedAt || '-'},
+                {title: 'Started', value: <Timestamp date={props.workflow.status.startedAt} />},
+                {title: 'Finished ', value: <Timestamp date={props.workflow.status.finishedAt} />},
                 {title: 'Duration', value: formatDuration(wfDuration(props.workflow.status))}
             ];
             if (props.workflow.status.resourcesDuration) {

ui/src/app/workflows/components/workflows-list/workflows-list.tsx

@@ -18,9 +18,9 @@ import {exampleWorkflow} from '../../../shared/examples';
 import {Utils} from '../../../shared/utils';
 
 import {Ticker} from 'argo-ui/src/index';
-import * as classNames from 'classnames';
 import {CostOptimisationNudge} from '../../../shared/components/cost-optimisation-nudge';
 import {PaginationPanel} from '../../../shared/components/pagination-panel';
+import {PhaseIcon} from '../../../shared/components/phase-icon';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {formatDuration, wfDuration} from '../../../shared/duration';
 import {Pagination, parseLimit} from '../../../shared/pagination';
@@ -275,7 +275,7 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                             key={`${w.metadata.namespace}-${w.metadata.name}`}
                             to={uiUrl(`workflows/${w.metadata.namespace}/${w.metadata.name}`)}>
                             <div className='columns small-1'>
-                                <i className={classNames('fa', Utils.statusIconClasses(w.status.phase))} />
+                                <PhaseIcon value={w.status.phase} />
                             </div>
                             <div className='columns small-3'>{w.metadata.name}</div>
                             <div className='columns small-2'>{w.metadata.namespace}</div>