From ef414153a90406acdb9e7ee95bc211e22ac53207 Mon Sep 17 00:00:00 2001 From: noahtalerman <47070608+noahtalerman@users.noreply.github.com> Date: Thu, 25 Mar 2021 12:47:00 -0700 Subject: [PATCH] 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 | 5 +++++ .../hosts/HostDetailsPage/HostDetailsPage.jsx | 9 +++++--- .../pages/hosts/HostDetailsPage/_styles.scss | 21 +++++++++++++++---- .../HostContainer/HostTableConfig.tsx | 14 +++++++++---- server/service/transport.go | 2 ++ 5 files changed, 40 insertions(+), 11 deletions(-) diff --git a/frontend/kolide/helpers.ts b/frontend/kolide/helpers.ts index 1814fea4fc..de3e6f5e7a 100644 --- a/frontend/kolide/helpers.ts +++ b/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, }; diff --git a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx index e05987dbf7..86d16d0691 100644 --- a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx +++ b/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 {
-

{host.hostname}

+
+

{host.hostname}

+

{`Last fetched ${humanHostDetailUpdated(titleData.detail_updated_at)}`}

+
Status diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss index d11d69d894..a4d7dcc5ba 100644 --- a/frontend/pages/hosts/HostDetailsPage/_styles.scss +++ b/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; } } diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostContainer/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/components/HostContainer/HostTableConfig.tsx index 2e40fd45d2..b61e5c1f5b 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/HostContainer/HostTableConfig.tsx +++ b/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 => , }, { - title: 'Last Seen', + title: 'Last fetched', + Header: cellProps => , + accessor: 'detail_updated_at', + Cell: cellProps => , + }, + { + title: 'Last seen', Header: cellProps => , accessor: 'seen_time', Cell: cellProps => , @@ -97,7 +103,7 @@ const hostDataHeaders: IHostDataColumn[] = [ Cell: cellProps => , }, { - title: 'MAC Address', + title: 'MAC address', Header: cellProps => , accessor: 'primary_mac', Cell: cellProps => , @@ -109,7 +115,7 @@ const hostDataHeaders: IHostDataColumn[] = [ Cell: cellProps => , }, { - title: 'Hardware Model', + title: 'Hardware model', Header: cellProps => , accessor: 'hardware_model', Cell: cellProps => , diff --git a/server/service/transport.go b/server/service/transport.go index 7dbae1d019..905c7547ac 100644 --- a/server/service/transport.go +++ b/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{