From 768ac01f5803cab4baf5174d39803347520ae985 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Wed, 5 May 2021 11:13:23 -0400
Subject: [PATCH] Add basic output tailing

When follow mode is enabled, fix the scroll position to the highest row
so that the output panel is always displaying the latest events.
---
 .../src/screens/Job/JobOutput/JobOutput.jsx   | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
index 976952afc7..13b36a776f 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
@@ -183,6 +183,11 @@ const OutputWrapper = styled.div`
     Object.keys(cssMap).map(className => `.${className}{${cssMap[className]}}`)}
 `;
 
+const ListWrapper = styled(List)`
+  ${({ isFollowModeEnabled }) =>
+    isFollowModeEnabled ? `overflow: hidden !important;` : ''}
+`;
+
 const OutputFooter = styled.div`
   background-color: #ebebeb;
   border-right: 1px solid #d7d7d7;
@@ -310,6 +315,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
   const [showCancelModal, setShowCancelModal] = useState(false);
   const [remoteRowCount, setRemoteRowCount] = useState(0);
   const [results, setResults] = useState({});
+  const [isFollowModeEnabled, setIsFollowModeEnabled] = useState(false);
 
   useEffect(() => {
     loadJobEvents();
@@ -657,6 +663,14 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
     history.push(qs ? `${pathname}?${qs}` : pathname);
   };
 
+  const handleFollowToggle = () => setIsFollowModeEnabled(!isFollowModeEnabled);
+
+  useEffect(() => {
+    if (isFollowModeEnabled) {
+      scrollToRow(remoteRowCount);
+    }
+  }, [remoteRowCount, isFollowModeEnabled]);
+
   const renderSearchComponent = () => (
     <Search
       qsConfig={QS_CONFIG}
@@ -763,6 +777,11 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
                 )}
               </ToolbarItem>
             </ToolbarToggleGroup>
+            {isJobRunning(job.status) ? (
+              <Button onClick={handleFollowToggle}>
+                {isFollowModeEnabled ? t`Unfollow` : t`Follow`}
+              </Button>
+            ) : null}
           </SearchToolbarContent>
         </SearchToolbar>
         <PageControls
@@ -771,7 +790,10 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
           onScrollNext={handleScrollNext}
           onScrollPrevious={handleScrollPrevious}
         />
-        <OutputWrapper cssMap={cssMap}>
+        <OutputWrapper
+          cssMap={cssMap}
+          isFollowModeEnabled={isFollowModeEnabled}
+        >
           <InfiniteLoader
             isRowLoaded={isRowLoaded}
             loadMoreRows={loadMoreRows}
@@ -787,7 +809,8 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
                           <ContentLoading />
                         </div>
                       ) : (
-                        <List
+                        <ListWrapper
+                          isFollowModeEnabled={isFollowModeEnabled}
                           ref={ref => {
                             registerChild(ref);
                             listRef.current = ref;