Display status indicator when live query results are empty (#257)

These changes resolve the case during which a host goes offline after a live query begins. Now, the status indicator is displayed during, and after, a query is running and the live query results are empty.

Additional changes:
- Add no results messaging for the case when there are no results and no errors (rendered when live query is completed)

frontend/components/queries/QueryProgressDetails/QueryProgressDetails.jsx

@@ -11,14 +11,17 @@ const baseClass = 'query-progress-details';
 
 const QueryProgressDetails = ({ campaign, className, onRunQuery, onStopQuery, queryIsRunning, queryTimerMilliseconds, disableRun }) => {
   const { hosts_count: hostsCount } = campaign;
-  const { Metrics: metrics = {} } = campaign;
   const { errors } = campaign;
+
+  const totalHostsOnline = get(campaign, ['totals', 'online'], 0);
+  const totalHostsOffline = get(campaign, ['totals', 'offline'], 0);
   const totalHostsCount = get(campaign, ['totals', 'count'], 0);
   const totalRowsCount = get(campaign, ['query_results', 'length'], 0);
+  const campaignIsEmpty = !hostsCount.successful && hostsCount.successful !== 0;
 
-  const onlineHostsTotalDisplay = metrics.OnlineHosts === 1 ? '1 host' : `${metrics.OnlineHosts} hosts`;
+  const onlineHostsTotalDisplay = totalHostsOnline === 1 ? '1 host' : `${totalHostsOnline} hosts`;
   const onlineResultsTotalDisplay = totalRowsCount === 1 ? '1 result' : `${totalRowsCount} results`;
-  const offlineHostsTotalDisplay = metrics.OfflineHosts === 1 ? '1 host' : `${metrics.OfflineHosts} hosts`;
+  const offlineHostsTotalDisplay = totalHostsOffline === 1 ? '1 host' : `${totalHostsOffline} hosts`;
   const failedHostsTotalDisplay = hostsCount.failed === 1 ? '1 host' : `${hostsCount.failed} hosts`;
   let totalErrorsDisplay = '0 errors';
   if (errors) {
@@ -50,7 +53,7 @@ const QueryProgressDetails = ({ campaign, className, onRunQuery, onStopQuery, qu
     </div>
   );
 
-  if (!hostsCount.total) {
+  if (!hostsCount.total && campaignIsEmpty) {
     return (
       <div className={`${baseClass} ${className}`}>
         <div className={`${baseClass}__wrapper`} />

frontend/components/queries/QueryProgressDetails/QueryProgressDetails.tests.jsx

@@ -121,6 +121,25 @@ describe('QueryProgressDetails - component', () => {
     });
   });
 
+  describe('when the campaign is empty', () => {
+    describe('and the query is running', () => {
+      const noResults = { failed: 0, successful: 0, total: 0 };
+      const campaignWithNoResults = Object.assign({}, campaignStub, { hosts_count: noResults });
+      const props = {
+        ...defaultProps,
+        campaign: campaignWithNoResults,
+        queryIsRunning: true,
+      };
+      const Component = mount(<QueryProgressDetails {...props} />);
+
+      it('renders a ProgressBar component', () => {
+        const ProgressBar = Component.find('ProgressBar');
+
+        expect(ProgressBar.length).toEqual(1, 'ProgressBar is expected to render');
+      });
+    });
+  });
+
   describe('running a query', () => {
     it('calls the onRunQuery prop with the query text', () => {
       const spy = jest.fn();

frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx

@@ -214,7 +214,8 @@ class QueryResultsTable extends Component {
         </header>
         <span className={`${baseClass}__table-title`}>Results</span>
         <div className={`${baseClass}__results-table-wrapper`}>
-          {hasNoResults && <span className="no-results-message">No results found. Check the table below for errors.</span>}
+          {hasNoResults && !hasErrors && <span className="no-results-message">No results found.</span>}
+          {hasNoResults && hasErrors && <span className="no-results-message">No results found. Check the table below for errors.</span>}
           {!hasNoResults && renderTable()}
         </div>
         {hasErrors &&