Merge pull request #11858 from keithjgrant/11409-empty-job-output

add JobOutput screens for empty content

awx/ui/src/components/ContentEmpty/ContentEmpty.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { t } from '@lingui/macro';
-
 import {
   Title,
   EmptyState,
@@ -9,9 +8,14 @@ import {
 } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
-const ContentEmpty = ({ title = '', message = '' }) => (
+const ContentEmpty = ({
-  <EmptyState variant="full">
+  title = '',
-    <EmptyStateIcon icon={CubesIcon} />
+  message = '',
+  icon = CubesIcon,
+  className = '',
+}) => (
+  <EmptyState variant="full" className={className}>
+    <EmptyStateIcon icon={icon} />
     <Title size="lg" headingLevel="h3">
       {title || t`No items found.`}
     </Title>

awx/ui/src/screens/Job/JobOutput/EmptyOutput.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import 'styled-components/macro';
+import { t } from '@lingui/macro';
+import { SearchIcon } from '@patternfly/react-icons';
+import ContentEmpty from 'components/ContentEmpty';
+
+export default function EmptyOutput({
+  hasQueryParams,
+  isJobRunning,
+  onUnmount,
+}) {
+  let title;
+  let message;
+  let icon;
+
+  useEffect(() => onUnmount);
+
+  if (hasQueryParams) {
+    title = t`The search filter did not produce any results…`;
+    message = t`Please try another search using the filter above`;
+    icon = SearchIcon;
+  } else if (isJobRunning) {
+    title = t`Waiting for job output…`;
+  } else {
+    title = t`No output found for this job.`;
+  }
+
+  return (
+    <ContentEmpty
+      css="height: 100%"
+      title={title}
+      message={message}
+      icon={icon}
+    />
+  );
+}

awx/ui/src/screens/Job/JobOutput/JobEvent.js

@@ -17,11 +17,15 @@ function JobEvent({
   isCollapsed,
   onToggleCollapsed,
   hasChildren,
+  jobStatus,
 }) {
   const numOutputLines = lineTextHtml?.length || 0;
   useEffect(() => {
-    measure();
+    const timeout = setTimeout(measure, 0);
-  }, [numOutputLines, isCollapsed, measure]);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [numOutputLines, isCollapsed, measure, jobStatus]);
 
   let toggleLineIndex = -1;
   if (hasChildren) {

awx/ui/src/screens/Job/JobOutput/JobOutput.js

@@ -30,6 +30,7 @@ import JobEventSkeleton from './JobEventSkeleton';
 import PageControls from './PageControls';
 import HostEventModal from './HostEventModal';
 import JobOutputSearch from './JobOutputSearch';
+import EmptyOutput from './EmptyOutput';
 import { HostStatusBar, OutputToolbar } from './shared';
 import getLineTextHtml from './getLineTextHtml';
 import connectJobSocket, { closeWebSocket } from './connectJobSocket';
@@ -220,6 +221,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
       ...Object.values(siblingRequests.current || {}),
       ...Object.values(numEventsRequests.current || {}),
     ];
+    setHasContentLoading(true); // prevents "no content found" screen from flashing
     Promise.all(pendingRequests).then(() => {
       setRemoteRowCount(0);
       clearLoadedEvents();
@@ -509,6 +511,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
               onToggleCollapsed={() => {
                 toggleNodeIsCollapsed(event.uuid, !node.isCollapsed);
               }}
+              jobStatus={jobStatus}
             />
           ) : (
             <JobEventSkeleton
@@ -715,7 +718,24 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
             rowCount={totalNonCollapsedRows + wsEvents.length}
             minimumBatchSize={50}
           >
-            {({ onRowsRendered, registerChild }) => (
+            {({ onRowsRendered, registerChild }) => {
+              if (
+                !hasContentLoading &&
+                remoteRowCount + wsEvents.length === 0
+              ) {
+                return (
+                  <EmptyOutput
+                    hasQueryParams={location.search.length > 1}
+                    isJobRunning={isJobRunning(jobStatus)}
+                    onUnmount={() => {
+                      if (listRef.current?.recomputeRowHeights) {
+                        listRef.current.recomputeRowHeights();
+                      }
+                    }}
+                  />
+                );
+              }
+              return (
                 <AutoSizer nonce={window.NONCE_ID} onResize={handleResize}>
                   {({ width, height }) => (
                     <>
@@ -744,7 +764,8 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
                     </>
                   )}
                 </AutoSizer>
-            )}
+              );
+            }}
           </InfiniteLoader>
           <OutputFooter />
         </OutputWrapper>