feat(ui): Replace 3 buttons with drop-down (argoproj#4648)

Signed-off-by: Alex Collins <[email protected]>

.gitignore

@@ -32,3 +32,4 @@ git-ask-pass.sh
 /site/
 /.brew_home
 /go-diagrams/
+/.run/

ui/src/app/shared/components/drop-down-button.scss

@@ -0,0 +1,14 @@
+.drop-down-button {
+ display: inline-block;
+
+ .items {
+ position: absolute; // hover at the bottom left of the containing element
+ z-index: 1; // must above other elements
+ box-shadow: 1px 1px 1px 1px; // add a small shadow to lift it off the page a tiny amount
+
+ .item {
+ border-radius: 0; // remove the 24px button radius which looks odd on a menu
+ width: 100%
+ }
+ }
+}

ui/src/app/shared/components/drop-down-button.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {ReactNode, useState} from 'react';
+
+require('./drop-down-button.scss');
+
+export const DropDownButton = ({onClick, items, children}: {onClick: () => void; children: ReactNode; items: {value: string; onClick: () => void}[]}) => {
+ const [dropped, setDropped] = useState(false);
+ return (
+ <div className='drop-down-button' onMouseEnter={() => setDropped(true)} onMouseLeave={() => setDropped(false)}>
+ <button onClick={onClick} className='argo-button argo-button--base'>
+ {children} <i className='fa fa-angle-down' />
+ </button>
+ <div className='items' style={{display: !dropped && 'none'}}>
+ {items.map(option => (
+ <div key={option.value}>
+ <button className='argo-button argo-button--base item' onClick={option.onClick}>
+ {option.value}
+ </button>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+};

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

@@ -3,6 +3,7 @@ import * as moment from 'moment';
 import * as React from 'react';
 
 import * as models from '../../../../models';
+import {DropDownButton} from '../../../shared/components/drop-down-button';
 import {DurationPanel} from '../../../shared/components/duration-panel';
 import {InlineTable} from '../../../shared/components/inline-table/inline-table';
 import {Phase} from '../../../shared/components/phase';
@@ -100,35 +101,39 @@ export const WorkflowNodeSummary = (props: Props) => {
  value: <ResourcesDuration resourcesDuration={props.node.resourcesDuration} />
  });
  }
+ const showLogs = (container = 'main') => props.onShowContainerLogs(props.node.id, container);
  return (
  <div className='white-box'>
  <div className='white-box__details'>{<AttributeRows attributes={attributes} />}</div>
  <div>
- <button className='argo-button argo-button--base-o' onClick={() => props.onShowYaml && props.onShowYaml(props.node.id)}>
+ <button className='argo-button argo-button--base' onClick={() => props.onShowYaml && props.onShowYaml(props.node.id)}>
  YAML
  </button>{' '}
- {props.node.type === 'Pod' &&
- ['main', 'wait', 'init'].map(container => (
- <button
- className='argo-button argo-button--base-o'
- onClick={() => props.onShowContainerLogs && props.onShowContainerLogs(props.node.id, container)}
- title='Examine the "wait" or "init" containers ("init" is only used with artifacts) if there is a problem unrelated to you main process.'>
- <i className='fa fa-file-alt' /> {container} logs
- </button>
- ))}
+ {props.node.type === 'Pod' && props.onShowContainerLogs && (
+ <DropDownButton
+ onClick={() => showLogs()}
+ items={[
+ {onClick: () => showLogs('init'), value: 'init logs'},
+ {onClick: () => showLogs('wait'), value: 'wait logs'}
+ ]}>
+ main logs
+ </DropDownButton>
+ )}{' '}
  {props.links &&
  props.links
  .filter(link => link.scope === 'pod')
  .map(link => (
- <a
- className='argo-button argo-button--base-o'
- href={link.url
- .replace(/\${metadata\.namespace}/g, props.workflow.metadata.namespace)
- .replace(/\${metadata\.name}/g, props.node.id)
- .replace(/\${status\.startedAt}/g, props.node.startedAt)
- .replace(/\${status\.finishedAt}/g, props.node.finishedAt)}>
+ <button
+ className='argo-button argo-button--base'
+ onClick={() => {
+ document.location.href = link.url
+ .replace(/\${metadata\.namespace}/g, props.workflow.metadata.namespace)
+ .replace(/\${metadata\.name}/g, props.node.id)
+ .replace(/\${status\.startedAt}/g, props.node.startedAt)
+ .replace(/\${status\.finishedAt}/g, props.node.finishedAt);
+ }}>
  <i className='fa fa-link' /> {link.name}
- </a>
+ </button>
  ))}
  </div>
  </div>