From a402ccab25971989d5037811ee12be9765a5b8f3 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 29 Mar 2022 10:35:02 -0400
Subject: [PATCH] Host Details Page: Same naming convention for info as device
 user page (#4815)

---
 .../pages/hosts/details/cards/About/About.tsx |  2 +-
 .../details/cards/HostSummary/HostSummary.tsx | 57 +++++--------------
 2 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx
index f43a6a43a5..d39d05afc5 100644
--- a/frontend/pages/hosts/details/cards/About/About.tsx
+++ b/frontend/pages/hosts/details/cards/About/About.tsx
@@ -176,7 +176,7 @@ const About = ({
       <p className="section__header">About</p>
       <div className="info-grid">
         <div className="info-grid__block">
-          <span className="info-grid__header">First enrolled</span>
+          <span className="info-grid__header">Added to Fleet</span>
           <span className="info-grid__data">
             {wrapFleetHelper(humanHostEnrolled, aboutData.last_enrolled_at)}
           </span>
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index 492539b5ad..7ed2ba5591 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
@@ -149,7 +149,7 @@ const HostSummary = ({
     return <span className="info-flex__data">No data available</span>;
   };
 
-  const renderDeviceUserSummary = () => {
+  const renderSummary = () => {
     return (
       <div className="info-flex">
         <div className="info-flex__item info-flex__item--title">
@@ -158,8 +158,12 @@ const HostSummary = ({
             {titleData.status}
           </span>
         </div>
+        {!deviceUser &&
+          titleData.issues?.total_issues_count > 0 &&
+          renderIssues()}
+        {!deviceUser && isPremiumTier && renderHostTeam()}
         <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">Disk Space</span>
+          <span className="info-flex__header">Disk space</span>
           {renderDiskSpace()}
         </div>
         <div className="info-flex__item info-flex__item--title">
@@ -174,41 +178,8 @@ const HostSummary = ({
         </div>
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Operating system</span>
-          <span className="info-flex__data">{titleData.os_version}</span>
-        </div>
-      </div>
-    );
-  };
-
-  const renderHostDetailsSummary = () => {
-    return (
-      <div className="info-flex">
-        <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">Status</span>
-          <span className={`${statusClassName} info-flex__data`}>
-            {titleData.status}
-          </span>
-        </div>
-        {titleData.issues?.total_issues_count > 0 && renderIssues()}
-        {isPremiumTier && renderHostTeam()}
-        <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">Disk Space</span>
-          {renderDiskSpace()}
-        </div>
-        <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">RAM</span>
           <span className="info-flex__data">
-            {wrapFleetHelper(humanHostMemory, titleData.memory)}
-          </span>
-        </div>
-        <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">CPU</span>
-          <span className="info-flex__data">{titleData.cpu_type}</span>
-        </div>
-        <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">OS</span>
-          <span className="info-flex__data">
-            {isOnlyObserver ? (
+            {isOnlyObserver || deviceUser ? (
               `${titleData.os_version}`
             ) : (
               <Button
@@ -221,10 +192,12 @@ const HostSummary = ({
             )}
           </span>
         </div>
-        <div className="info-flex__item info-flex__item--title">
-          <span className="info-flex__header">Osquery</span>
-          <span className="info-flex__data">{titleData.osquery_version}</span>
-        </div>
+        {!deviceUser && (
+          <div className="info-flex__item info-flex__item--title">
+            <span className="info-flex__header">Osquery</span>
+            <span className="info-flex__data">{titleData.osquery_version}</span>
+          </div>
+        )}
       </div>
     );
   };
@@ -249,9 +222,7 @@ const HostSummary = ({
         {renderActionButtons()}
       </div>
       <div className="section title">
-        <div className="title__inner">
-          {deviceUser ? renderDeviceUserSummary() : renderHostDetailsSummary()}
-        </div>
+        <div className="title__inner">{renderSummary()}</div>
       </div>
     </>
   );