fix(ui): v3 UI tweaks

Signed-off-by: Alex Collins <alex_collins@intuit.com>
argoproj · Jan 22, 2021 · 0454d29 · 0454d29
1 parent 8f2f427
commit 0454d29
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -93,9 +93,9 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
                         entrypoints={(workflowTemplate.spec.templates || []).map(t => t.name)}
                         parameters={workflowTemplate.spec.arguments.parameters || []}
                     />
-                    <Button outline={true} onClick={() => setStage('full-editor')}>
-                        Edit using full workflow options
-                    </Button>
+                    <a onClick={() => setStage('full-editor')}>
+                        Edit using full workflow options <i className='fa fa-caret-right' />
+                    </a>
                 </>
             )}
             {stage === 'full-editor' && workflow && (

diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -176,7 +176,13 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
         const retryWatch = new RetryWatch<Workflow>(
             () => services.workflows.watch({name, namespace}),
             () => setError(null),
-            e => setWorkflow(e.object),
+            e => {
+                if (e.type === 'DELETED') {
+                    setError(new Error('Workflow deleted'));
+                } else {
+                    setWorkflow(e.object);
+                }
+            },
             setError
         );
         retryWatch.start();
@@ -250,6 +256,7 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                                         workflow={workflow}
                                         links={links}
                                         onShowContainerLogs={(_, container) => setSidePanel(`logs:${nodeId}:${container}`)}
+                                        onShowEvents={() => setSidePanel(`events:${nodeId}`)}
                                         onShowYaml={() => setSidePanel(`yaml:${nodeId}`)}
                                         archived={false}
                                     />
@@ -263,6 +270,7 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                     {parsedSidePanel.type === 'logs' && (
                         <WorkflowLogsViewer workflow={workflow} nodeId={parsedSidePanel.nodeId} container={parsedSidePanel.container} archived={false} />
                     )}
+                    {parsedSidePanel.type === 'events' && <EventsPanel namespace={namespace} kind='Pod' name={parsedSidePanel.nodeId} />}
                     {parsedSidePanel.type === 'share' && <WidgetGallery namespace={namespace} name={name} />}
                     {parsedSidePanel.type === 'yaml' && <WorkflowYamlViewer workflow={workflow} selectedNode={selectedNode} />}
                     {!parsedSidePanel}

diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -13,7 +13,6 @@ import {Timestamp} from '../../../shared/components/timestamp';
 import {ResourcesDuration} from '../../../shared/resources-duration';
 import {services} from '../../../shared/services';
 import {getResolvedTemplates} from '../../../shared/template-resolution';
-import {EventsPanel} from '../events-panel';
 
 require('./workflow-node-info.scss');
 
@@ -39,6 +38,7 @@ interface Props {
     links: models.Link[];
     archived: boolean;
     onShowContainerLogs: (nodeId: string, container: string) => any;
+    onShowEvents?: () => void;
     onShowYaml?: (nodeId: string) => any;
 }
 
@@ -142,6 +142,11 @@ const WorkflowNodeSummary = (props: Props) => {
                         <i className='fa fa-bars' /> main logs
                     </DropDownButton>
                 )}{' '}
+                {props.node.type === 'Pod' && props.onShowEvents && (
+                    <Button icon='bell' onClick={() => props.onShowEvents()}>
+                        EVENTS
+                    </Button>
+                )}{' '}
                 <Links
                     object={{
                         metadata: {
@@ -218,6 +223,7 @@ const WorkflowNodeContainer = (props: {
     nodeId: string;
     container: models.kubernetes.Container | models.Sidecar | models.Script;
     onShowContainerLogs: (nodeId: string, container: string) => any;
+    onShowEvents: () => void;
 }) => {
     const container = {name: 'main', args: Array<string>(), source: '', ...props.container};
     const maybeQuote = (v: string) => (v.includes(' ') ? `'${v}'` : v);
@@ -281,7 +287,12 @@ class WorkflowNodeContainers extends React.Component<Props, {selectedSidecar: st
         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} />
+                <WorkflowNodeContainer
+                    nodeId={this.props.node.id}
+                    container={container}
+                    onShowContainerLogs={this.props.onShowContainerLogs}
+                    onShowEvents={this.props.onShowEvents}
+                />
                 {!this.state.selectedSidecar && template.sidecars && template.sidecars.length > 0 && (
                     <div>
                         <p>SIDECARS:</p>
@@ -366,11 +377,6 @@ export const WorkflowNodeInfo = (props: Props) => (
                         </div>
                     )
                 },
-                props.node.type === 'Pod' && {
-                    title: 'EVENTS',
-                    key: 'events',
-                    content: <EventsPanel namespace={props.workflow.metadata.namespace} kind='Pod' name={props.node.id} />
-                },
                 {
                     title: 'CONTAINERS',
                     key: 'containers',