Handle invalid time values on host details page (#7217)

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

@@ -229,6 +229,7 @@ const DeviceUserPage = ({
   const statusClassName = classnames("status", `status--${host?.status}`);
 
   const renderDeviceUserPage = () => {
+    const failing_policies_count = titleData?.issues;
     return (
       <div className="fleet-desktop-wrapper">
         {isLoadingHost ? (
@@ -252,9 +253,9 @@ const DeviceUserPage = ({
                   {isPremiumTier && (
                     <Tab>
                       <div>
-                        {titleData.issues.failing_policies_count > 0 && (
+                        {failing_policies_count > 0 && (
                           <span className="count">
-                            {titleData.issues.failing_policies_count}
+                            {failing_policies_count}
                           </span>
                         )}
                         Policies

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

@@ -536,6 +536,7 @@ const HostDetailsPage = ({
   }
 
   const statusClassName = classnames("status", `status--${host?.status}`);
+  const failingPoliciesCount = titleData?.issues;
 
   return (
     <MainContent className={baseClass}>
@@ -571,10 +572,8 @@ const HostDetailsPage = ({
               <Tab>Software</Tab>
               <Tab>Schedule</Tab>
               <Tab>
-                {titleData.issues.failing_policies_count > 0 && (
-                  <span className="count">
-                    {titleData.issues.failing_policies_count}
-                  </span>
+                {failingPoliciesCount > 0 && (
+                  <span className="count">{failingPoliciesCount}</span>
                 )}
                 Policies
               </Tab>

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

@@ -15,7 +15,7 @@ const baseClass = "host-summary";
 
 interface IHostSummaryProps {
   statusClassName: string;
-  titleData: any;
+  titleData: any; // TODO: create interfaces for this and use consistently across host pages and related helpers
   isPremiumTier?: boolean;
   isOnlyObserver?: boolean;
   toggleOSPolicyModal?: () => void;

frontend/utilities/helpers.ts

@@ -590,27 +590,47 @@ export const humanHostLastRestart = (
   detailUpdatedAt: string,
   uptime: number
 ): string => {
-  const currentDate = new Date();
-  const updatedDate = new Date(detailUpdatedAt);
-  const millisecondsLastUpdated = currentDate.getTime() - updatedDate.getTime();
+  if (
+    !detailUpdatedAt ||
+    !uptime ||
+    detailUpdatedAt === "---" ||
+    detailUpdatedAt < "2016-07-28T00:00:00Z" ||
+    typeof uptime !== "number"
+  ) {
+    return "Unavailable";
+  }
+  try {
+    const currentDate = new Date();
+    const updatedDate = new Date(detailUpdatedAt);
+    const millisecondsLastUpdated =
+      currentDate.getTime() - updatedDate.getTime();
 
-  // Sum of calculated milliseconds since last updated with uptime
-  const millisecondsLastRestart =
-    millisecondsLastUpdated + uptime / NANOSECONDS_PER_MILLISECOND;
+    // Sum of calculated milliseconds since last updated with uptime
+    const millisecondsLastRestart =
+      millisecondsLastUpdated + uptime / NANOSECONDS_PER_MILLISECOND;
 
-  const restartDate = new Date();
-  restartDate.setMilliseconds(
-    restartDate.getMilliseconds() - millisecondsLastRestart
-  );
+    const restartDate = new Date();
+    restartDate.setMilliseconds(
+      restartDate.getMilliseconds() - millisecondsLastRestart
+    );
 
-  return formatDistanceToNow(new Date(restartDate), { addSuffix: true });
+    return formatDistanceToNow(new Date(restartDate), { addSuffix: true });
+  } catch {
+    return "Unavailable";
+  }
 };
 
 export const humanHostLastSeen = (lastSeen: string): string => {
+  if (!lastSeen || lastSeen < "2016-07-28T00:00:00Z") {
+    return "Never";
+  }
   return format(new Date(lastSeen), "MMM d yyyy, HH:mm:ss");
 };
 
 export const humanHostEnrolled = (enrolled: string): string => {
+  if (!enrolled || enrolled < "2016-07-28T00:00:00Z") {
+    return "Never";
+  }
   return formatDistanceToNow(new Date(enrolled), { addSuffix: true });
 };
 
@@ -618,15 +638,18 @@ export const humanHostMemory = (bytes: number): string => {
   return `${inGigaBytes(bytes)} GB`;
 };
 
-export const humanHostDetailUpdated = (detailUpdated: string): string => {
+export const humanHostDetailUpdated = (detailUpdated?: string): string => {
   // Handles the case when a host has checked in to Fleet but
   // its details haven't been updated.
   // July 28, 2016 is the date of the initial commit to fleet/fleet.
-  if (detailUpdated < "2016-07-28T00:00:00Z") {
-    return "Never";
+  if (!detailUpdated || detailUpdated < "2016-07-28T00:00:00Z") {
+    return "unavailable";
+  }
+  try {
+    return formatDistanceToNow(new Date(detailUpdated), { addSuffix: true });
+  } catch {
+    return "unavailable";
   }
-
-  return formatDistanceToNow(new Date(detailUpdated), { addSuffix: true });
 };
 
 export const hostTeamName = (teamName: string | null): string => {
@@ -640,11 +663,15 @@ export const hostTeamName = (teamName: string | null): string => {
 export const humanQueryLastRun = (lastRun: string): string => {
   // Handles the case when a query has never been ran.
   // July 28, 2016 is the date of the initial commit to fleet/fleet.
-  if (lastRun < "2016-07-28T00:00:00Z") {
+  if (!lastRun || lastRun < "2016-07-28T00:00:00Z") {
     return "Has not run";
   }
 
-  return formatDistanceToNow(new Date(lastRun), { addSuffix: true });
+  try {
+    return formatDistanceToNow(new Date(lastRun), { addSuffix: true });
+  } catch {
+    return "Unavailable";
+  }
 };
 
 export const licenseExpirationWarning = (expiration: string): boolean => {
@@ -768,7 +795,10 @@ export const getValidatedTeamId = (
 // returns a mixture of props from host
 export const normalizeEmptyValues = (
   hostData: Partial<IHost>
-): { [key: string]: any } => {
+): Record<
+  string,
+  number | string | boolean | Record<string, number | string | boolean>
+> => {
   return reduce(
     hostData,
     (result, value, key) => {
@@ -784,7 +814,7 @@ export const normalizeEmptyValues = (
 };
 
 export const wrapFleetHelper = (
-  helperFn: (value: any) => string, // number or string or never
+  helperFn: (value: any) => string, // TODO: replace any with unknown and improve type narrowing by callers
   value: string
 ): string => {
   return value === "---" ? value : helperFn(value);