Implement sidecar container viewing

Author: Alexander Matyushentsev

src/app/shared/styles/config.scss

@@ -1,5 +1,6 @@
 $body-font-family: 'Heebo', sans-serif !default;
 $global-width: 100%;
+$breakpoint-classes: (small medium large xlarge xxlarge);
 
 $argo-color-gray-1: #F8FBFB;
 $argo-color-gray-2: #EFF3F5;

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

@@ -70,7 +70,7 @@ class Component extends React.Component<Props, any> {
                 <div className='workflow-details'>
                     {this.props.selectedTabKey === 'summary' && this.renderSummaryTab() || (
                         <div className='row'>
-                            <div className='columns small-9'>
+                            <div className='columns xlarge-6 xxlarge-9'>
                                 {this.props.workflow && (
                                     <div className='workflow-details__graph-container'>
                                         { this.props.selectedTabKey === 'workflow' && (
@@ -85,7 +85,7 @@ class Component extends React.Component<Props, any> {
                                     </div>
                                 )}
                             </div>
-                            <div className='columns small-3 workflow-details__step-info'>
+                            <div className='columns xlarge-6 xxlarge-3 workflow-details__step-info'>
                                 {selectedNode && (
                                     <WorkflowNodeInfo
                                         node={selectedNode}

src/app/workflows/components/workflow-node-info/workflow-node-info.scss

@@ -18,4 +18,41 @@
             border-left: none;
         }
     }
+
+    &__containers {
+        position: relative;
+    }
+
+    &__sidecar-back {
+        position: absolute;
+        left: 16px;
+        top: 8px;
+        font-size: 2em !important;
+        z-index: 10;
+        height: 16px;
+        width: 16px;
+        cursor: pointer;
+        color: $argo-color-teal-5;
+    }
+
+    &__sidecar {
+        text-transform: uppercase;
+        border-top: 1px solid $argo-color-gray-5;
+        cursor: pointer;
+        font-size: 0.8em;
+
+        span {
+            color: $argo-color-teal-5;
+        }
+        
+        i {
+            float: right;
+            font-size: 1.5em;
+        }
+
+        &:last-child {
+            border-bottom: 1px solid $argo-color-gray-5;
+            padding: 1em 0;
+        }
+    }
 }

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

@@ -62,13 +62,13 @@ export const WorkflowNodeInputs = (props: { inputs: models.Inputs }) => {
             <div className='white-box__details'>
                 {parameters.length > 0 && [
                     <div className='row white-box__details-row' key='title'>
-                        <h6>Parameters</h6>
+                        <p>Parameters</p>
                     </div>,
                     <AttributeRows key='attrs' attributes={parameters}/>,
                 ]}
                 {artifacts.length > 0 && [
                     <div className='row white-box__details-row' key='title'>
-                        <h6>Artifacts</h6>
+                        <p>Artifacts</p>
                     </div>,
                     <AttributeRows key='attrs' attributes={artifacts}/>,
                 ]}
@@ -77,7 +77,7 @@ export const WorkflowNodeInputs = (props: { inputs: models.Inputs }) => {
     );
 };
 
-export const WorkflowNodeContainer = (props: { nodeId: string, container: models.Container, onShowContainerLogs: (pod: string, container: string) => any; }) => {
+export const WorkflowNodeContainer = (props: { nodeId: string, container: models.Container | models.Sidecar, onShowContainerLogs: (pod: string, container: string) => any; }) => {
     const attributes = [
         {title: 'NAME', value: props.container.name || 'main'},
         {title: 'IMAGE', value: props.container.image},
@@ -98,29 +98,36 @@ export const WorkflowNodeContainer = (props: { nodeId: string, container: models
     );
 };
 
-export const WorkflowNodeContainers = (props: Props) => {
-    const template = props.workflow.spec.templates.find((item) => item.name === props.node.templateName);
-    if (!template || !template.container) {
-        return <p>Step does not have containers</p>;
+export class WorkflowNodeContainers extends React.Component<Props, { selectedSidecar: string }> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { selectedSidecar: null };
     }
-    return (
-        <div>
-            <WorkflowNodeContainer nodeId={props.node.id} container={template.container} onShowContainerLogs={props.onShowContainerLogs}/>
-            {template.sidecars && template.sidecars.length > 0 && (
-                <div>
-                    <h6>SIDECARS:</h6>
-                    {template.sidecars.map((sidecar) => (
-                        <div className='row' key={sidecar.name}>
-                            <div className='columns small-3'>
-                                {sidecar.name}
+
+    public render() {
+        const template = this.props.workflow.spec.templates.find((item) => item.name === this.props.node.templateName);
+        if (!template || !template.container) {
+            return <p>Step does not have containers</p>;
+        }
+        const container = this.state.selectedSidecar && template.sidecars.find((item) => item.name === this.state.selectedSidecar) || template.container;
+        return (
+            <div className='workflow-node-info__containers'>
+                {this.state.selectedSidecar && <i className='fa fa-angle-left workflow-node-info__sidecar-back' onClick={() => this.setState({ selectedSidecar: null })}/>}
+                <WorkflowNodeContainer nodeId={this.props.node.id} container={container} onShowContainerLogs={this.props.onShowContainerLogs}/>
+                {!this.state.selectedSidecar && template.sidecars && template.sidecars.length > 0 && (
+                    <div>
+                        <p>SIDECARS:</p>
+                        {template.sidecars.map((sidecar) => (
+                            <div className='workflow-node-info__sidecar' key={sidecar.name} onClick={() => this.setState({ selectedSidecar: sidecar.name })}>
+                                <span>{sidecar.name}</span> <i className='fa fa-angle-right'/>
                             </div>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
 
 export const WorkflowNodeArtifacts = (props: Props) => {
     const artifacts = props.node.outputs && props.node.outputs.artifacts && props.node.outputs.artifacts.map((artifact) => Object.assign({}, artifact, {