From 27cfe19ac2159bdfe91e8cb9501ca310df6c0fb8 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Tue, 18 May 2021 18:02:39 -0400
Subject: [PATCH] Disable "Refetch" button for offline hosts (#799)

- Disable "Refetch" button if the host is offline
- Disable the refetch tooltip if the host is in the `refetch_requested` state.
---
 frontend/components/LoginRoutes/_styles.scss               | 2 +-
 frontend/components/packs/PacksList/Row/_styles.scss       | 2 +-
 .../queries/QueriesList/QueriesListRow/_styles.scss        | 2 +-
 .../ScheduledQueriesListItem/_styles.scss                  | 2 +-
 .../side_panels/HostSidePanel/PanelGroupItem/_styles.scss  | 2 +-
 frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx   | 7 ++++---
 frontend/styles/global/_global.scss                        | 2 +-
 7 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/components/LoginRoutes/_styles.scss b/frontend/components/LoginRoutes/_styles.scss
index 90b9e1c35c..3db8a8804a 100644
--- a/frontend/components/LoginRoutes/_styles.scss
+++ b/frontend/components/LoginRoutes/_styles.scss
@@ -5,5 +5,5 @@
   justify-content: center;
   position: relative;
   min-height: 100vh;
-  background-color: $gradients-dark-gradient;
+  background-color: $gradients-dark-gradient-vertical;
 }
diff --git a/frontend/components/packs/PacksList/Row/_styles.scss b/frontend/components/packs/PacksList/Row/_styles.scss
index d4b5d13aeb..ab17fd65a2 100644
--- a/frontend/components/packs/PacksList/Row/_styles.scss
+++ b/frontend/components/packs/PacksList/Row/_styles.scss
@@ -3,7 +3,7 @@
   cursor: pointer;
 
   &--selected {
-    background-color: $ui-vibrant-blue-10;
+    background-color: $ui-vibrant-blue-25;
   }
 
   &:focus {
diff --git a/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss b/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
index 08a83d0bb8..9b1ad30c13 100644
--- a/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
+++ b/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
@@ -11,7 +11,7 @@
   }
 
   &--selected {
-    background-color: $ui-vibrant-blue-10;
+    background-color: $ui-vibrant-blue-25;
   }
 
   &:hover {
diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
index 4d365643bc..9e6468be80 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
@@ -8,6 +8,6 @@
   }
 
   &--selected {
-    background-color: $ui-vibrant-blue-10;
+    background-color: $ui-vibrant-blue-25;
   }
 }
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
index 035a709492..3d398e58cd 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
@@ -13,7 +13,7 @@ $base-class: "panel-group-item";
 
   &.#{$base-class}--selected {
     font-weight: $bold;
-    background-color: $ui-vibrant-blue-10;
+    background-color: $ui-vibrant-blue-25;
 
     .#{$base-class}__count {
       font-weight: $bold;
diff --git a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
index a984451823..e968f4239f 100644
--- a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
+++ b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
@@ -218,7 +218,7 @@ export class HostDetailsPage extends Component {
           backgroundColor="#3e4771"
         >
           <span className={`${baseClass}__tooltip-text`}>
-            You can’t query <br /> a offline host.
+            You can’t query <br /> an offline host.
           </span>
         </ReactTooltip>
         <Button onClick={toggleDeleteHostModal()} variant="active">
@@ -380,7 +380,7 @@ export class HostDetailsPage extends Component {
           className="refetch"
           data-tip
           data-for="refetch-tooltip"
-          data-tip-disable={isOnline}
+          data-tip-disable={isOnline || showRefetchLoadingSpinner}
         >
           <Button
             className={`
@@ -389,6 +389,7 @@ export class HostDetailsPage extends Component {
               ${isOffline ? "refetch-offline" : ""} 
               ${showRefetchLoadingSpinner ? "refetch-spinner" : "refetch-btn"}
             `}
+            disabled={isOffline}
             onClick={onRefetchHost}
           >
             {showRefetchLoadingSpinner
@@ -527,7 +528,7 @@ export class HostDetailsPage extends Component {
                 </span>
                 <span className="info__header">Updated at</span>
                 <span className="info__data">
-                  {humanHostLastSeen(aboutData.seen_time)}
+                  {humanHostLastSeen(titleData.detail_updated_at)}
                 </span>
                 <span className="info__header">Uptime</span>
                 <span className="info__data">
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index 1036a56537..3aef2cf874 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -46,7 +46,7 @@ a {
 }
 
 .wrapper {
-  background: $gradients-dark-gradient;
+  background: $gradients-dark-gradient-vertical;
   margin: 0;
 }