feat: add labels to pod log navigation buttons (argoproj#10890)

Author: rbreeze

ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.scss

@@ -9,22 +9,24 @@
     padding-left: 5px;
     color: black;
 
-    
     &--inverted {
         background-color: black;
         color: white;
     }
-    
+
     &__settings {
         display: flex;
-        
-        .argo-checkbox, .argo-checkbox input, .argo-checkbox input:focus {
+
+        .argo-checkbox,
+        .argo-checkbox input,
+        .argo-checkbox input:focus {
             outline: none !important;
             border: none !important;
             width: 12px;
             margin-right: 8px;
-            input:checked + span, input + span {
-                border:  none;
+            input:checked + span,
+            input + span {
+                border: none;
                 width: 12px !important;
                 background-color: transparent;
             }
@@ -34,7 +36,7 @@
         }
 
         margin-bottom: 1em;
-        
+
         > * {
             display: flex;
             align-items: center;
@@ -65,13 +67,19 @@
         display: flex;
         margin-bottom: 1em;
         padding-left: 10px;
-        i {
+        .page-info {
+            margin-left: auto;
+            margin-right: auto;
+            padding: 3px 8px;
+            text-overflow: clip;
+            white-space: nowrap;
+        }
+        .nav-container {
+            display: flex;
+            align-self: flex-start;
+            padding: 3px 8px;
             cursor: pointer;
             border-radius: 7px;
-            $size: 25px;
-            width: $size;
-            height: $size;
-            display: flex;
             align-items: center;
             justify-content: center;
             border: 1px solid black;
@@ -85,6 +93,9 @@
                 cursor: not-allowed;
             }
         }
+        i {
+            margin-left: 5px;
+        }
 
         &--inverted {
             i {

ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx

@@ -503,22 +503,45 @@ interface PageInfo {
     canPageBack: boolean;
 }
 
+const NavButton = (props: {children: React.ReactNode; disabled?: boolean; onClick: () => void}) => {
+    return (
+        <div className={`nav-container ${props.disabled ? 'disabled' : ''}`} onClick={props.onClick}>
+            {props.children}
+        </div>
+    );
+};
+
 const logNavigators = (actions: NavActions, darkMode: boolean, info?: PageInfo) => {
     return (
         <div className={`pod-logs-viewer__menu ${darkMode ? 'pod-logs-viewer__menu--inverted' : ''}`}>
-            {actions.begin && <i className='fa fa-angle-double-left' onClick={actions.begin || (() => null)} />}
-            <i className={`fa fa-angle-left ${info && info.canPageBack ? '' : 'disabled'}`} onClick={actions.left || (() => null)} />
-            <i className='fa fa-angle-down' onClick={actions.bottom || (() => null)} />
-            <i className='fa fa-angle-up' onClick={actions.top || (() => null)} />
-            <div style={{marginLeft: 'auto', marginRight: 'auto'}}>
+            {actions.begin && (
+                <NavButton onClick={actions.begin || (() => null)}>
+                    Begin <i className='fa fa-angle-double-left' />
+                </NavButton>
+            )}
+
+            <NavButton disabled={!(info && info.canPageBack)} onClick={actions.left || (() => null)}>
+                Prev <i className='fa fa-angle-left' />
+            </NavButton>
+            <NavButton onClick={actions.bottom || (() => null)}>
+                Bottom <i className='fa fa-angle-down' />
+            </NavButton>
+            <NavButton onClick={actions.top || (() => null)}>
+                Top <i className='fa fa-angle-up' />
+            </NavButton>
+            <div className={`page-info`}>
                 {info && (
                     <React.Fragment>
                         Page {info.curPage + 1} (Lines {info.firstLine} to {info.lastLine})
                     </React.Fragment>
                 )}
             </div>
-            <i className={`fa fa-angle-right ${info && info.curPage > 0 ? '' : 'disabled'}`} onClick={(info && info.curPage > 0 && actions.right) || null} />
-            <i className={`fa fa-angle-double-right ${info && info.curPage > 1 ? '' : 'disabled'}`} onClick={(info && info.curPage > 1 && actions.end) || null} />
+            <NavButton onClick={(info && info.curPage > 0 && actions.right) || null} disabled={!(info && info.curPage > 0)}>
+                Next <i className='fa fa-angle-right' />
+            </NavButton>
+            <NavButton onClick={(info && info.curPage > 1 && actions.end) || null} disabled={!(info && info.curPage > 1)}>
+                End <i className='fa fa-angle-double-right' />
+            </NavButton>
         </div>
     );
 };