Add "Last fetched" to Hosts page and Host details page (#540)

- Add a "Last fetched" column to the table on the Hosts page. This column uses the `detail_updated_at` property.
- Add a "Last fetched" timestamp to the Host details page.
- Adjust styles on _Host details_ page

frontend/kolide/helpers.ts

@@ -246,6 +246,10 @@ export const humanHostMemory = (bytes: number): string => {
   return `${inGigaBytes(bytes)} GB`;
 };
 
+export const humanHostDetailUpdated = (detailUpdated: string): string => {
+  return moment(detailUpdated).fromNow();
+};
+
 export default {
   addGravatarUrlToResource,
   formatConfigDataForServer,
@@ -257,6 +261,7 @@ export default {
   humanHostLastSeen,
   humanHostEnrolled,
   humanHostMemory,
+  humanHostDetailUpdated,
   labelSlug,
   setupData,
 };

frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx

@@ -16,7 +16,7 @@ import { push } from 'react-router-redux';
 import PATHS from 'router/paths';
 
 import hostInterface from 'interfaces/host';
-import { humanHostUptime, humanHostLastSeen, humanHostEnrolled, humanHostMemory } from 'kolide/helpers';
+import { humanHostUptime, humanHostLastSeen, humanHostEnrolled, humanHostMemory, humanHostDetailUpdated } from 'kolide/helpers';
 import helpers from './helpers';
 
 const baseClass = 'host-details';
@@ -209,7 +209,7 @@ export class HostDetailsPage extends Component {
       renderPacks,
     } = this;
 
-    const titleData = pick(host, ['status', 'memory', 'host_cpu', 'os_version', 'enroll_secret_name']);
+    const titleData = pick(host, ['status', 'memory', 'host_cpu', 'os_version', 'enroll_secret_name', 'detail_updated_at']);
     const aboutData = pick(host, ['seen_time', 'uptime', 'last_enrolled_at', 'hardware_model', 'hardware_serial', 'primary_ip']);
     const osqueryData = pick(host, ['config_tls_refresh', 'logger_tls_period', 'distributed_interval']);
     const data = [titleData, aboutData, osqueryData];
@@ -236,7 +236,10 @@ export class HostDetailsPage extends Component {
       <div className={`${baseClass} body-wrap`}>
         <div className="section title">
           <div className="title__inner">
-            <h1 className="hostname">{host.hostname}</h1>
+            <div className="hostname-container">
+              <h1 className="hostname">{host.hostname}</h1>
+              <p className="last-fetched">{`Last fetched ${humanHostDetailUpdated(titleData.detail_updated_at)}`}</p>
+            </div>
             <div className="info">
               <div className="info__item info__item--title">
                 <span className="info__header">Status</span>

frontend/pages/hosts/HostDetailsPage/_styles.scss

@@ -11,8 +11,7 @@
 
     &__header {
       margin: 0 0 16px;
-      font-size: $x-small;
-      font-weight: $bold;
+      font-size: $medium;
     }
 
     .info {
@@ -31,7 +30,8 @@
       }
 
       &__header {
-        color: $core-medium-blue-grey;
+        color: $core-black;
+        font-weight: $bold;
       }
 
     }
@@ -62,9 +62,22 @@
       padding-bottom: 16px;
     }
 
+    .hostname-container {
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: $pad-large;
+    }
+
     .hostname {
       font-size: $large;
-      margin-bottom: 16px;
+      font-weight: $bold;
+    }
+
+    .last-fetched {
+      font-size: $xx-small;
+      color: $core-dark-blue-grey;
+      margin: 0;
+      padding-left: $pad-small;
     }
   }
 

frontend/pages/hosts/ManageHostsPage/components/HostContainer/HostTableConfig.tsx

@@ -5,7 +5,7 @@ import HeaderCell from '../HeaderCell/HeaderCell';
 import LinkCell from '../LinkCell/LinkCell';
 import StatusCell from '../StatusCell/StatusCell';
 import TextCell from '../TextCell/TextCell';
-import { humanHostMemory, humanHostUptime, humanHostLastSeen } from '../../../../../kolide/helpers';
+import { humanHostMemory, humanHostUptime, humanHostLastSeen, humanHostDetailUpdated } from '../../../../../kolide/helpers';
 
 interface IHeaderProps {
   column: {
@@ -66,7 +66,13 @@ const hostDataHeaders: IHostDataColumn[] = [
     Cell: cellProps => <TextCell value={cellProps.cell.value} />,
   },
   {
-    title: 'Last Seen',
+    title: 'Last fetched',
+    Header: cellProps => <HeaderCell value={cellProps.column.title} isSortedDesc={cellProps.column.isSortedDesc} />,
+    accessor: 'detail_updated_at',
+    Cell: cellProps => <TextCell value={cellProps.cell.value} formatter={humanHostDetailUpdated} />,
+  },
+  {
+    title: 'Last seen',
     Header: cellProps => <HeaderCell value={cellProps.column.title} isSortedDesc={cellProps.column.isSortedDesc} />,
     accessor: 'seen_time',
     Cell: cellProps => <TextCell value={cellProps.cell.value} formatter={humanHostLastSeen} />,
@@ -97,7 +103,7 @@ const hostDataHeaders: IHostDataColumn[] = [
     Cell: cellProps => <TextCell value={cellProps.cell.value} formatter={humanHostMemory} />,
   },
   {
-    title: 'MAC Address',
+    title: 'MAC address',
     Header: cellProps => <HeaderCell value={cellProps.column.title} isSortedDesc={cellProps.column.isSortedDesc} />,
     accessor: 'primary_mac',
     Cell: cellProps => <TextCell value={cellProps.cell.value} />,
@@ -109,7 +115,7 @@ const hostDataHeaders: IHostDataColumn[] = [
     Cell: cellProps => <TextCell value={cellProps.cell.value} />,
   },
   {
-    title: 'Hardware Model',
+    title: 'Hardware model',
     Header: cellProps => <HeaderCell value={cellProps.column.title} isSortedDesc={cellProps.column.isSortedDesc} />,
     accessor: 'hardware_model',
     Cell: cellProps => <TextCell value={cellProps.cell.value} />,

server/service/transport.go

@@ -152,6 +152,8 @@ func listOptionsFromRequest(r *http.Request) (kolide.ListOptions, error) {
 		orderKey = "host_name"
 	case "memory":
 		orderKey = "physical_memory"
+	case "detail_updated_at":
+		orderKey = "detail_update_time"
 	}
 
 	return kolide.ListOptions{