[Released bug] Fleet UI: Fix my device page last restarted date (#16879)

changes/16681-device-last-restarted-bug

@@ -0,0 +1 @@
+- Fix device page showing invalid date for last restarted

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -25,7 +25,11 @@ import InfoBanner from "components/InfoBanner";
 import Icon from "components/Icon/Icon";
 import { normalizeEmptyValues } from "utilities/helpers";
 import PATHS from "router/paths";
-import { DOCUMENT_TITLE_SUFFIX } from "utilities/constants";
+import {
+  DOCUMENT_TITLE_SUFFIX,
+  HOST_ABOUT_DATA,
+  HOST_SUMMARY_DATA,
+} from "utilities/constants";
 
 import HostSummaryCard from "../cards/HostSummary";
 import AboutCard from "../cards/About";
@@ -205,39 +209,9 @@ const DeviceUserPage = ({
     }
   );
 
-  const titleData = normalizeEmptyValues(
-    pick(host, [
-      "id",
-      "status",
-      "issues",
-      "memory",
-      "cpu_type",
-      "os_version",
-      "osquery_version",
-      "enroll_secret_name",
-      "detail_updated_at",
-      "percent_disk_space_available",
-      "gigs_disk_space_available",
-      "team_name",
-      "platform",
-      "mdm",
-    ])
-  );
+  const summaryData = normalizeEmptyValues(pick(host, HOST_SUMMARY_DATA));
 
-  const aboutData = normalizeEmptyValues(
-    pick(host, [
-      "seen_time",
-      "uptime",
-      "last_enrolled_at",
-      "hardware_model",
-      "hardware_serial",
-      "primary_ip",
-      "public_ip",
-      "geolocation",
-      "batteries",
-      "detail_updated_at",
-    ])
-  );
+  const aboutData = normalizeEmptyValues(pick(host, HOST_ABOUT_DATA));
 
   const toggleInfoModal = useCallback(() => {
     setShowInfoModal(!showInfoModal);
@@ -392,8 +366,7 @@ const DeviceUserPage = ({
               </InfoBanner>
             )}
             <HostSummaryCard
-              titleData={titleData}
-              diskEncryptionEnabled={host?.disk_encryption_enabled}
+              summaryData={summaryData}
               bootstrapPackageData={bootstrapPackageData}
               isPremiumTier={isPremiumTier}
               toggleOSSettingsModal={toggleOSSettingsModal}

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -46,7 +46,12 @@ import {
   TAGGED_TEMPLATES,
 } from "utilities/helpers";
 import permissions from "utilities/permissions";
-import { DOCUMENT_TITLE_SUFFIX } from "utilities/constants";
+import {
+  DOCUMENT_TITLE_SUFFIX,
+  HOST_SUMMARY_DATA,
+  HOST_ABOUT_DATA,
+  HOST_OSQUERY_DATA,
+} from "utilities/constants";
 
 import Spinner from "components/Spinner";
 import TabsWrapper from "components/TabsWrapper";
@@ -457,48 +462,11 @@ const HostDetailsPage = ({
     setPathname(location.pathname + location.search);
   }, [location]);
 
-  const titleData = normalizeEmptyValues(
-    pick(host, [
-      "id",
-      "status",
-      "issues",
-      "memory",
-      "cpu_type",
-      "platform",
-      "os_version",
-      "osquery_version",
-      "enroll_secret_name",
-      "detail_updated_at",
-      "percent_disk_space_available",
-      "gigs_disk_space_available",
-      "team_name",
-      "display_name",
-    ])
-  );
+  const summaryData = normalizeEmptyValues(pick(host, HOST_SUMMARY_DATA));
 
-  const aboutData = normalizeEmptyValues(
-    pick(host, [
-      "seen_time",
-      "uptime",
-      "last_enrolled_at",
-      "hardware_model",
-      "hardware_serial",
-      "primary_ip",
-      "public_ip",
-      "geolocation",
-      "batteries",
-      "detail_updated_at",
-      "last_restarted_at",
-    ])
-  );
+  const aboutData = normalizeEmptyValues(pick(host, HOST_ABOUT_DATA));
 
-  const osqueryData = normalizeEmptyValues(
-    pick(host, [
-      "config_tls_refresh",
-      "logger_tls_period",
-      "distributed_interval",
-    ])
-  );
+  const osqueryData = normalizeEmptyValues(pick(host, HOST_OSQUERY_DATA));
 
   const togglePolicyDetailsModal = useCallback(
     (policy: IHostPolicy) => {
@@ -795,8 +763,7 @@ const HostDetailsPage = ({
           />
         </div>
         <HostSummaryCard
-          titleData={titleData}
-          diskEncryptionEnabled={host?.disk_encryption_enabled}
+          summaryData={summaryData}
           bootstrapPackageData={bootstrapPackageData}
           isPremiumTier={isPremiumTier}
           isSandboxMode={isSandboxMode}

frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx

@@ -102,9 +102,8 @@ interface IBootstrapPackageData {
 }
 
 interface IHostSummaryProps {
-  titleData: any; // TODO: create interfaces for this and use consistently across host pages and related helpers
+  summaryData: any; // TODO: create interfaces for this and use consistently across host pages and related helpers
   bootstrapPackageData?: IBootstrapPackageData;
-  diskEncryptionEnabled?: boolean;
   isPremiumTier?: boolean;
   isSandboxMode?: boolean;
   toggleOSSettingsModal?: () => void;
@@ -164,9 +163,8 @@ const getHostDiskEncryptionTooltipMessage = (
 };
 
 const HostSummary = ({
-  titleData,
+  summaryData,
   bootstrapPackageData,
-  diskEncryptionEnabled,
   isPremiumTier,
   isSandboxMode = false,
   toggleOSSettingsModal,
@@ -180,10 +178,14 @@ const HostSummary = ({
   osSettings,
   hostMdmDeviceStatus,
 }: IHostSummaryProps): JSX.Element => {
-  const { status, platform } = titleData;
+  const {
+    status,
+    platform,
+    disk_encryption_enabled: diskEncryptionEnabled,
+  } = summaryData;
 
   const renderRefetch = () => {
-    const isOnline = titleData.status === "online";
+    const isOnline = summaryData.status === "online";
     let isDisabled = false;
     let tooltip: React.ReactNode = <></>;
 
@@ -237,11 +239,11 @@ const HostSummary = ({
           data-html
         >
           <span className={`tooltip__tooltip-text`}>
-            Failing policies ({titleData.issues.failing_policies_count})
+            Failing policies ({summaryData.issues.failing_policies_count})
           </span>
         </ReactTooltip>
         <span className={"info-flex__data__text"}>
-          {titleData.issues.total_issues_count}
+          {summaryData.issues.total_issues_count}
         </span>
       </span>
     </div>
@@ -251,8 +253,8 @@ const HostSummary = ({
     <div className="info-flex__item info-flex__item--title">
       <span className="info-flex__header">Team</span>
       <span className={`info-flex__data`}>
-        {titleData.team_name ? (
-          `${titleData.team_name}`
+        {summaryData.team_name ? (
+          `${summaryData.team_name}`
         ) : (
           <span className="info-flex__no-team">No team</span>
         )}
@@ -316,7 +318,7 @@ const HostSummary = ({
           />
         </div>
 
-        {(titleData.issues?.total_issues_count > 0 || isSandboxMode) &&
+        {(summaryData.issues?.total_issues_count > 0 || isSandboxMode) &&
           isPremiumTier &&
           renderIssues()}
 
@@ -352,9 +354,11 @@ const HostSummary = ({
             <span className="info-flex__header">Disk space</span>
             <DiskSpaceGraph
               baseClass="info-flex"
-              gigsDiskSpaceAvailable={titleData.gigs_disk_space_available}
-              percentDiskSpaceAvailable={titleData.percent_disk_space_available}
-              id={`disk-space-tooltip-${titleData.id}`}
+              gigsDiskSpaceAvailable={summaryData.gigs_disk_space_available}
+              percentDiskSpaceAvailable={
+                summaryData.percent_disk_space_available
+              }
+              id={`disk-space-tooltip-${summaryData.id}`}
               platform={platform}
               tooltipPosition="bottom"
             />
@@ -366,28 +370,28 @@ const HostSummary = ({
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Memory</span>
           <span className="info-flex__data">
-            {wrapFleetHelper(humanHostMemory, titleData.memory)}
+            {wrapFleetHelper(humanHostMemory, summaryData.memory)}
           </span>
         </div>
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Processor type</span>
-          <span className="info-flex__data">{titleData.cpu_type}</span>
+          <span className="info-flex__data">{summaryData.cpu_type}</span>
         </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>
+          <span className="info-flex__data">{summaryData.os_version}</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>
+          <span className="info-flex__data">{summaryData.osquery_version}</span>
         </div>
       </div>
     );
   };
 
-  const lastFetched = titleData.detail_updated_at ? (
+  const lastFetched = summaryData.detail_updated_at ? (
     <HumanTimeDiffWithFleetLaunchCutoff
-      timeString={titleData.detail_updated_at}
+      timeString={summaryData.detail_updated_at}
     />
   ) : (
     ": unavailable"
@@ -430,7 +434,7 @@ const HostSummary = ({
             <h1 className="display-name">
               {deviceUser
                 ? "My device"
-                : titleData.display_name || DEFAULT_EMPTY_CELL_VALUE}
+                : summaryData.display_name || DEFAULT_EMPTY_CELL_VALUE}
             </h1>
 
             {renderDeviceStatusTag()}

frontend/utilities/constants.tsx

@@ -307,3 +307,41 @@ export const EMPTY_AGENT_OPTIONS = {
 export const DEFAULT_EMPTY_CELL_VALUE = "---";
 
 export const DOCUMENT_TITLE_SUFFIX = "Fleet";
+
+export const HOST_SUMMARY_DATA = [
+  "id",
+  "status",
+  "issues",
+  "memory",
+  "cpu_type",
+  "platform",
+  "os_version",
+  "osquery_version",
+  "enroll_secret_name",
+  "detail_updated_at",
+  "percent_disk_space_available",
+  "gigs_disk_space_available",
+  "team_name",
+  "disk_encryption_enabled",
+  "display_name", // Not rendered on my device page
+];
+
+export const HOST_ABOUT_DATA = [
+  "seen_time",
+  "uptime",
+  "last_enrolled_at",
+  "hardware_model",
+  "hardware_serial",
+  "primary_ip",
+  "public_ip",
+  "geolocation",
+  "batteries",
+  "detail_updated_at",
+  "last_restarted_at",
+];
+
+export const HOST_OSQUERY_DATA = [
+  "config_tls_refresh",
+  "logger_tls_period",
+  "distributed_interval",
+];