From 8d5c1c37d30e678ac3a83411388752a33b392c5c Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Thu, 18 Feb 2021 12:59:27 -0800
Subject: [PATCH] Add number of hosts responding in live query UI. (#333)

These changes fixe #303 by adding the number of hosts successfully responding to the live query UI. This information was previously removed in Fleet 3.7.1
---
 .../QueryProgressDetails.jsx                   | 18 ++++++++++++------
 .../queries/QueryProgressDetails/_styles.scss  |  4 ++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/components/queries/QueryProgressDetails/QueryProgressDetails.jsx b/frontend/components/queries/QueryProgressDetails/QueryProgressDetails.jsx
index b7a0d7bcda..e74d776a88 100644
--- a/frontend/components/queries/QueryProgressDetails/QueryProgressDetails.jsx
+++ b/frontend/components/queries/QueryProgressDetails/QueryProgressDetails.jsx
@@ -19,10 +19,10 @@ const QueryProgressDetails = ({ campaign, className, onRunQuery, onStopQuery, qu
   const totalRowsCount = get(campaign, ['query_results', 'length'], 0);
   const campaignIsEmpty = !hostsCount.successful && hostsCount.successful !== 0;
 
-  const onlineHostsTotalDisplay = totalHostsOnline === 1 ? '1 host' : `${totalHostsOnline} hosts`;
+  const onlineHostsTotalDisplay = totalHostsOnline === 1 ? '1 online host' : `${totalHostsOnline} online hosts`;
   const onlineResultsTotalDisplay = totalRowsCount === 1 ? '1 result' : `${totalRowsCount} results`;
-  const offlineHostsTotalDisplay = totalHostsOffline === 1 ? '1 host' : `${totalHostsOffline} hosts`;
-  const failedHostsTotalDisplay = hostsCount.failed === 1 ? '1 host' : `${hostsCount.failed} hosts`;
+  const offlineHostsTotalDisplay = totalHostsOffline === 1 ? '1 offline host' : `${totalHostsOffline} offline hosts`;
+  const failedHostsTotalDisplay = hostsCount.failed === 1 ? '1 failed host' : `${hostsCount.failed} failed hosts`;
   let totalErrorsDisplay = '0 errors';
   if (errors) {
     totalErrorsDisplay = errors.length === 1 ? '1 error' : `${errors.length} errors`;
@@ -66,9 +66,15 @@ const QueryProgressDetails = ({ campaign, className, onRunQuery, onStopQuery, qu
     <div className={`${baseClass} ${className}`}>
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__text-wrapper`}>
-          <span className={`${baseClass}__text-online`}>Online - {onlineHostsTotalDisplay} returning {onlineResultsTotalDisplay}</span>
-          <span className={`${baseClass}__text-offline`}>Offline - {offlineHostsTotalDisplay} returning 0 results</span>
-          <span className={`${baseClass}__text-error`}>Failed - {failedHostsTotalDisplay} returning {totalErrorsDisplay}</span>
+          <span className={`${baseClass}__text-online`}>{hostsCount.successful} out of {onlineHostsTotalDisplay} responding
+            <span className={`${baseClass}__text-results`}> returning {onlineResultsTotalDisplay}</span>
+          </span>
+          <span className={`${baseClass}__text-offline`}>{offlineHostsTotalDisplay}
+            <span className={`${baseClass}__text-results`}> returning 0 results</span>
+          </span>
+          <span className={`${baseClass}__text-error`}>{failedHostsTotalDisplay}
+            <span className={`${baseClass}__text-results`}> returning {totalErrorsDisplay}</span>
+          </span>
         </div>
         <ProgressBar
           error={hostsCount.failed}
diff --git a/frontend/components/queries/QueryProgressDetails/_styles.scss b/frontend/components/queries/QueryProgressDetails/_styles.scss
index 708cfd1755..83d6f3c0ff 100644
--- a/frontend/components/queries/QueryProgressDetails/_styles.scss
+++ b/frontend/components/queries/QueryProgressDetails/_styles.scss
@@ -56,6 +56,10 @@
     }
   }
 
+  &__text-results {
+    color: $core-medium-blue-grey;
+  }
+
   &__btn-wrapper {
     float: right;