fix: Various UI fixes (#5449)

Signed-off-by: Simon Behar <simbeh7@gmail.com>
argoproj · Mar 18, 2021 · 8d20061 · 8d20061
1 parent fc8ecc4
commit 8d20061
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/...app/archived-workflows/components/archived-workflow-filters/archived-workflow-filters.tsx b/...app/archived-workflows/components/archived-workflow-filters/archived-workflow-filters.tsx
@@ -25,7 +25,7 @@ export class ArchivedWorkflowFilters extends React.Component<ArchivedWorkflowFil
         return (
             <div className='wf-filters-container'>
                 <div className='row'>
-                    <div className='columns small-3 xlarge-12'>
+                    <div className='columns small-2 xlarge-12'>
                         <p className='wf-filters-container__title'>Namespace</p>
                         <NamespaceFilter
                             value={this.props.namespace}
@@ -34,7 +34,7 @@ export class ArchivedWorkflowFilters extends React.Component<ArchivedWorkflowFil
                             }}
                         />
                     </div>
-                    <div className='columns small-3 xlarge-12'>
+                    <div className='columns small-2 xlarge-12'>
                         <p className='wf-filters-container__title'>Labels</p>
                         <TagsInput
                             placeholder=''
@@ -45,7 +45,7 @@ export class ArchivedWorkflowFilters extends React.Component<ArchivedWorkflowFil
                             }}
                         />
                     </div>
-                    <div className='columns small-6 xlarge-12'>
+                    <div className='columns small-3 xlarge-12'>
                         <p className='wf-filters-container__title'>Phases</p>
                         <CheckboxFilter
                             selected={this.props.selectedPhases}
@@ -56,8 +56,8 @@ export class ArchivedWorkflowFilters extends React.Component<ArchivedWorkflowFil
                             type='phase'
                         />
                     </div>
-                    <div className='columns small-6 xlarge-12'>
-                        <p className='wf-filters-container__title'>Started At</p>
+                    <div className='columns small-5 xlarge-12'>
+                        <p className='wf-filters-container__title'>Started Time</p>
                         <DatePicker
                             selected={this.props.minStartedAt}
                             onChange={date => {

diff --git a/ui/src/app/shared/components/checkbox-filter/checkbox-filter.scss b/ui/src/app/shared/components/checkbox-filter/checkbox-filter.scss
@@ -5,11 +5,12 @@
     transition: max-height 0.25s cubic-bezier(0, 1, 0, 1);
     overflow-y: auto;
     margin-left: 0.2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 120px));
 }
 
 .checkbox-filter li {
     list-style: none;
-    float: left;
 }
 
 .checkbox-filter__label {

diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.scss b/ui/src/app/workflows/components/workflow-filters/workflow-filters.scss
@@ -1,7 +1,7 @@
 @import 'node_modules/argo-ui/src/styles/config';
 
 .wf-filters-container {
-    overflow: hidden;
+    overflow: visible;
     position: relative;
     border-radius: 5px;
     box-shadow: 1px 1px 3px #8fa4b1;

diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx b/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
@@ -35,7 +35,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
         return (
             <div className='wf-filters-container'>
                 <div className='row'>
-                    <div className='columns small-3 xlarge-12'>
+                    <div className='columns small-2 xlarge-12'>
                         <p className='wf-filters-container__title'>Namespace</p>
                         <NamespaceFilter
                             value={this.props.namespace}
@@ -44,7 +44,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                             }}
                         />
                     </div>
-                    <div className='columns small-3 xlarge-12'>
+                    <div className='columns small-2 xlarge-12'>
                         <p className='wf-filters-container__title'>Labels</p>
                         <TagsInput
                             placeholder=''
@@ -55,21 +55,21 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                             }}
                         />
                     </div>
-                    <div className='columns small-3 xlarge-12'>
+                    <div className='columns small-2 xlarge-12'>
                         <p className='wf-filters-container__title'>Workflow Template</p>
                         <DataLoaderDropdown
                             load={() => services.workflowTemplate.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
                             onChange={value => (this.workflowTemplate = value)}
                         />
                     </div>
-                    <div className='columns small-3 xlarge-12'>
+                    <div className='columns small-2 xlarge-12'>
                         <p className='wf-filters-container__title'>Cron Workflow</p>
                         <DataLoaderDropdown
                             load={() => services.cronWorkflows.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
                             onChange={value => (this.cronWorkflow = value)}
                         />
                     </div>
-                    <div className='columns small-12 xlarge-12'>
+                    <div className='columns small-4 xlarge-12'>
                         <p className='wf-filters-container__title'>Phases</p>
                         <CheckboxFilter
                             selected={this.props.selectedPhases}

diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
@@ -37,7 +37,11 @@ export const WorkflowLogsViewer = ({workflow, nodeId, container, archived}: Work
             .map(e => (!podName ? e.podName + ': ' : '') + e.content + '\n')
             .publishReplay()
             .refCount();
-        const subscription = source.subscribe(() => setLoaded(true), setError);
+        const subscription = source.subscribe(
+            () => setLoaded(true),
+            setError,
+            () => setLoaded(true)
+        );
         setLogsObservable(source);
         return () => subscription.unsubscribe();
     }, [workflow.metadata.namespace, workflow.metadata.name, podName, selectedContainer, archived]);
@@ -103,6 +107,8 @@ export const WorkflowLogsViewer = ({workflow, nodeId, container, archived}: Work
                         <a href={services.workflows.getArtifactLogsUrl(workflow, podName, selectedContainer, archived)}>logs from the artifacts</a>.
                     </>
                 )}
+            </p>
+            <p>
                 {execSpec(workflow).podGC && (
                     <>
                         <WarningIcon /> You pod GC settings will delete pods and their logs immediately on completion.