feat(ui): Add drawer with more details for each workflow in Workflow List

ui/src/app/shared/conditions-panel.tsx

@@ -26,13 +26,18 @@ export function hasWarningConditionBadge(conditions: Condition[]): boolean {
 }
 
 function getConditionIcon(condition: ConditionType): JSX.Element {
+    let icon;
     if (WarningConditions.includes(condition as ConditionType)) {
-        return <span className={'fa fa-exclamation-triangle'} style={{color: '#d7b700'}} />;
+        icon = <span className={'fa fa-exclamation-triangle'} style={{color: '#d7b700'}} />;
     }
     if (ErrorConditions.includes(condition as ConditionType)) {
-        return <span className={'fa fa-exclamation-circle'} style={{color: '#d70022'}} />;
+        icon = <span className={'fa fa-exclamation-circle'} style={{color: '#d70022'}} />;
+    }
+    if (!icon) {
+        return <span />;
+    } else {
+        return <>{icon}&nbsp;</>;
     }
-    return <span />;
 }
 
 export class ConditionsPanel extends React.Component<Props> {
@@ -43,7 +48,9 @@ export class ConditionsPanel extends React.Component<Props> {
                     Object.entries(this.props.conditions).map(([_, condition]) => {
                         return (
                             <div key={condition.type} style={{lineHeight: '120%', marginTop: '16px'}}>
-                                {getConditionIcon(condition.type)} {condition.type + ': ' + (condition.message || condition.status)}
+                                {getConditionIcon(condition.type)}
+                                <span className='condition-panel__type'>{condition.type}</span>
+                                {': ' + (condition.message || condition.status)}
                             </div>
                         );
                     })}

ui/src/app/workflows/components/workflow-drawer/workflow-drawer.scss

@@ -0,0 +1,119 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
+.workflow-drawer {
+  height: 100%;
+  font-size: .8125em;
+  background-color: $argo-color-gray-1;
+  margin-top: -8px;
+  padding: 1.5em 15px;
+  border-radius: 0 0 3px 3px;
+
+  &__section {
+    padding: 1em 0;
+    box-sizing: border-box;
+    border-top: 2px solid $argo-color-gray-3;
+
+    &:first-child {
+      padding-top: 0;
+      border-top: none;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    &:only-child {
+      padding: 0;
+    }
+  }
+
+  &__message {
+
+    &--label {
+      margin-bottom: 1em; 
+    }
+
+    &--content {
+      font-weight: 600;
+    }
+
+  }
+
+  &__labels {
+    &--list {
+      margin-top: 0.5em; 
+    }
+  }
+
+  &__message {
+    border-top: none;
+  }
+
+  .tag {
+    line-height: normal;
+    background-color: $argo-color-gray-3;
+    border-radius: 3px;
+    height: auto;
+    margin: 0.5em 0;
+    margin-right: 10px;
+    display: flex;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+      .key {
+        color: $argo-color-teal-5;
+      }
+      .value {
+        color: $argo-color-gray-3;
+      }
+    }
+
+    .key, .value {
+      padding: 0.5em 8px;
+    }
+
+    .key {
+      color: $argo-color-gray-6;
+    }
+
+    .value {
+      color: white;
+      background-color: $argo-color-teal-5;
+    }
+  }
+
+  &__resourcesDuration {
+    display: flex;
+    align-items: center;
+
+    $gutter: 2em;
+
+    &--label {
+      margin-left: 0.5em;
+    }
+
+    &--value {
+      font-weight: 600; 
+    }
+
+    &--container {
+      padding-left: $gutter / 2; 
+      margin-left: $gutter / 2; 
+      border-left: 1px solid $argo-color-gray-3;
+    }
+
+  }
+
+  &__conditions {
+    margin-top: 0.5em;
+
+    .condition-panel__type {
+      font-weight: 600;
+    }
+
+    .type {
+      font-weight: 600;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import * as models from '../../../../models';
+
+import {ConditionsPanel} from '../../../shared/conditions-panel';
+import {WorkflowLabels} from '../workflow-labels/workflow-labels';
+
+require('./workflow-drawer.scss');
+
+interface WorkflowDrawerProps {
+    workflow: models.Workflow;
+    onChange: (key: string) => void;
+}
+
+export class WorkflowDrawer extends React.Component<WorkflowDrawerProps, {}> {
+    public render() {
+        const wf = this.props.workflow;
+        return (
+            <div className='workflow-drawer'>
+                {!wf.status.message ? null : (
+                    <div className='workflow-drawer__section workflow-drawer__message'>
+                        <div className='workflow-drawer__title workflow-drawer__message--label'>MESSAGE</div>
+                        <div className='workflow-drawer__message--content'>{wf.status.message}</div>
+                    </div>
+                )}
+                {!wf.status.conditions ? null : (
+                    <div className='workflow-drawer__section'>
+                        <div className='workflow-drawer__title'>CONDITIONS</div>
+                        <div className='workflow-drawer__conditions'>
+                            <ConditionsPanel conditions={wf.status.conditions} />
+                        </div>
+                    </div>
+                )}
+                {!wf.status.resourcesDuration ? null : (
+                    <div className='workflow-drawer__section'>
+                        <div className='workflow-drawer__resourcesDuration'>
+                            <div className='workflow-drawer__title'>
+                                RESOURCES DURATION&nbsp;
+                                <a href='https://github.com/argoproj/argo/blob/master/docs/resource-duration.md' target='_blank'>
+                                    <i className='fas fa-info-circle' />
+                                </a>
+                            </div>
+                            <div className='workflow-drawer__resourcesDuration--container'>
+                                <div>
+                                    <span className='workflow-drawer__resourcesDuration--value'>{wf.status.resourcesDuration.cpu} sec</span>
+                                    <span className='workflow-drawer__resourcesDuration--label'>(*1 CPU)</span>
+                                </div>
+                                <div>
+                                    <span className='workflow-drawer__resourcesDuration--value'>{wf.status.resourcesDuration.memory} sec</span>
+                                    <span className='workflow-drawer__resourcesDuration--label'>(*100Mi Memory)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+                <div className='workflow-drawer__section workflow-drawer__labels'>
+                    <div className='workflow-drawer__title'>LABELS</div>
+                    <div className='workflow-drawer__labels--list'>
+                        <WorkflowLabels
+                            workflow={wf}
+                            onChange={key => {
+                                this.props.onChange(key);
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

ui/src/app/workflows/components/workflow-labels/workflow-labels.scss

@@ -5,12 +5,9 @@
   flex-wrap: wrap;
   align-items: center;
   height: 100%;
-  padding: 0.25em 0;
   $gutter: 0.5em;
-  font-size: .8125em;
   background-color: $argo-color-gray-1;
   margin-top: -8px;
-  padding: 0.5em 15px;
   border-radius: 0 0 3px 3px;
 
   .tag {

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

@@ -265,7 +265,7 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                         <div className='columns small-2'>STARTED</div>
                         <div className='columns small-2'>FINISHED</div>
                         <div className='columns small-1'>DURATION</div>
-                        <div className='columns small-1'>LABELS</div>
+                        <div className='columns small-1'>DETAILS</div>
                     </div>
                     {this.state.workflows.map(wf => {
                         return (

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

@@ -6,20 +6,30 @@ import {uiUrl} from '../../../shared/base';
 import {PhaseIcon} from '../../../shared/components/phase-icon';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {formatDuration, wfDuration} from '../../../shared/duration';
-import {WorkflowLabels} from '../workflow-labels/workflow-labels';
+import {services} from '../../../shared/services';
+import {WorkflowDrawer} from '../workflow-drawer/workflow-drawer';
 
 interface WorkflowsRowProps {
     workflow: models.Workflow;
     onChange: (key: string) => void;
 }
-export class WorkflowsRow extends React.Component<WorkflowsRowProps, {hideLabels: boolean}> {
+
+interface WorkflowRowState {
+    hideDrawer: boolean;
+    workflow: models.Workflow;
+}
+
+export class WorkflowsRow extends React.Component<WorkflowsRowProps, WorkflowRowState> {
     constructor(props: WorkflowsRowProps) {
         super(props);
-        this.state = {hideLabels: true};
+        this.state = {
+            workflow: this.props.workflow,
+            hideDrawer: true
+        };
     }
 
     public render() {
-        const wf = this.props.workflow;
+        const wf = this.state.workflow;
         return (
             <div className='workflows-list__row-container'>
                 <Link className='row argo-table-list__row' to={uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`)}>
@@ -42,10 +52,11 @@ export class WorkflowsRow extends React.Component<WorkflowsRowProps, {hideLabels
                             <div
                                 onClick={e => {
                                     e.preventDefault();
-                                    this.setState({hideLabels: !this.state.hideLabels});
+                                    this.fetchFullWorkflow();
+                                    this.setState({hideDrawer: !this.state.hideDrawer});
                                 }}
-                                className={`workflows-row__action workflows-row__action--${this.state.hideLabels ? 'show' : 'hide'}`}>
-                                {this.state.hideLabels ? (
+                                className={`workflows-row__action workflows-row__action--${this.state.hideDrawer ? 'show' : 'hide'}`}>
+                                {this.state.hideDrawer ? (
                                     <span>
                                         SHOW <i className='fas fa-caret-down' />{' '}
                                     </span>
@@ -58,19 +69,23 @@ export class WorkflowsRow extends React.Component<WorkflowsRowProps, {hideLabels
                         </div>
                     </div>
                 </Link>
-                {this.state.hideLabels ? (
+                {this.state.hideDrawer ? (
                     <span />
                 ) : (
-                    <div>
-                        <WorkflowLabels
-                            workflow={wf}
-                            onChange={key => {
-                                this.props.onChange(key);
-                            }}
-                        />
-                    </div>
+                    <WorkflowDrawer
+                        workflow={wf}
+                        onChange={key => {
+                            this.props.onChange(key);
+                        }}
+                    />
                 )}
             </div>
         );
     }
+
+    private fetchFullWorkflow(): void {
+        services.workflows.get(this.props.workflow.metadata.namespace, this.props.workflow.metadata.name).then(wf => {
+            this.setState({workflow: wf});
+        });
+    }
 }