diff --git a/client/app/scripts/components/node-details/node-details-info.js b/client/app/scripts/components/node-details/node-details-info.js index e21a9664d..7c2ce1758 100644 --- a/client/app/scripts/components/node-details/node-details-info.js +++ b/client/app/scripts/components/node-details/node-details-info.js @@ -3,6 +3,7 @@ import { Map as makeMap } from 'immutable'; import MatchedText from '../matched-text'; import ShowMore from '../show-more'; +import { formatDataType } from '../../utils/string-utils'; export default class NodeDetailsInfo extends React.Component { @@ -37,18 +38,22 @@ export default class NodeDetailsInfo extends React.Component { return (
- {rows.map(field => (
-
- {field.label} + {rows.map(field => { + const { value, title } = formatDataType(field); + return ( +
+
+ {field.label} +
+
+ +
-
- -
-
- ))} + ); + })}
diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js index b312e0a83..2a9f9e3eb 100644 --- a/client/app/scripts/components/node-details/node-details-table-row.js +++ b/client/app/scripts/components/node-details/node-details-table-row.js @@ -4,7 +4,7 @@ import classNames from 'classnames'; import NodeDetailsTableNodeLink from './node-details-table-node-link'; import NodeDetailsTableNodeMetric from './node-details-table-node-metric'; - +import { formatDataType } from '../../utils/string-utils'; function getValuesForNode(node) { const values = {}; @@ -31,7 +31,6 @@ function getValuesForNode(node) { return values; } - function renderValues(node, columns = [], columnStyles = []) { const fields = getValuesForNode(node); return columns.map(({id}, i) => { @@ -39,11 +38,12 @@ function renderValues(node, columns = [], columnStyles = []) { const style = columnStyles[i]; if (field) { if (field.valueType === 'metadata') { + const {value, title} = formatDataType(field); return ( - - {field.value} + {value} ); } diff --git a/client/app/scripts/utils/string-utils.js b/client/app/scripts/utils/string-utils.js index 7f19f4f9e..63cc2d29e 100644 --- a/client/app/scripts/utils/string-utils.js +++ b/client/app/scripts/utils/string-utils.js @@ -2,6 +2,7 @@ import React from 'react'; import filesize from 'filesize'; import d3 from 'd3'; import LCP from 'lcp'; +import moment from 'moment'; const formatLargeValue = d3.format('s'); @@ -73,3 +74,22 @@ export function slugify(label) { export function longestCommonPrefix(strArr) { return (new LCP(strArr)).lcp(); } + +// Formats metadata values. Add a key to the `formatters` obj +// that matches the `dataType` of the field. You must return an Object +// with the keys `value` and `title` defined. +export function formatDataType(field) { + const formatters = { + datetime(dateString) { + const date = moment(new Date(dateString)); + return { + value: date.fromNow(), + title: date.format('YYYY-MM-DD HH:mm:ss.SSS') + }; + } + }; + const format = formatters[field.dataType]; + return format + ? format(field.value) + : {value: field.value, title: field.value}; +} diff --git a/probe/docker/reporter.go b/probe/docker/reporter.go index f9bf68276..f591c2e84 100644 --- a/probe/docker/reporter.go +++ b/probe/docker/reporter.go @@ -32,7 +32,7 @@ var ( ContainerNetworks: {ID: ContainerNetworks, Label: "Networks", From: report.FromSets, Priority: 14}, ContainerIPs: {ID: ContainerIPs, Label: "IPs", From: report.FromSets, Priority: 15}, ContainerPorts: {ID: ContainerPorts, Label: "Ports", From: report.FromSets, Priority: 16}, - ContainerCreated: {ID: ContainerCreated, Label: "Created", From: report.FromLatest, Priority: 17}, + ContainerCreated: {ID: ContainerCreated, Label: "Created", From: report.FromLatest, Datatype: "datetime", Priority: 17}, } ContainerMetricTemplates = report.MetricTemplates{ diff --git a/probe/kubernetes/reporter.go b/probe/kubernetes/reporter.go index e9c4f08d7..abafe7922 100644 --- a/probe/kubernetes/reporter.go +++ b/probe/kubernetes/reporter.go @@ -31,14 +31,14 @@ var ( IP: {ID: IP, Label: "IP", From: report.FromLatest, Priority: 3}, report.Container: {ID: report.Container, Label: "# Containers", From: report.FromCounters, Datatype: "number", Priority: 4}, Namespace: {ID: Namespace, Label: "Namespace", From: report.FromLatest, Priority: 5}, - Created: {ID: Created, Label: "Created", From: report.FromLatest, Priority: 6}, + Created: {ID: Created, Label: "Created", From: report.FromLatest, Datatype: "datetime", Priority: 6}, } PodMetricTemplates = docker.ContainerMetricTemplates ServiceMetadataTemplates = report.MetadataTemplates{ Namespace: {ID: Namespace, Label: "Namespace", From: report.FromLatest, Priority: 2}, - Created: {ID: Created, Label: "Created", From: report.FromLatest, Priority: 3}, + Created: {ID: Created, Label: "Created", From: report.FromLatest, Datatype: "datetime", Priority: 3}, PublicIP: {ID: PublicIP, Label: "Public IP", From: report.FromLatest, Priority: 4}, IP: {ID: IP, Label: "Internal IP", From: report.FromLatest, Priority: 5}, report.Pod: {ID: report.Pod, Label: "# Pods", From: report.FromCounters, Datatype: "number", Priority: 6}, @@ -48,7 +48,7 @@ var ( DeploymentMetadataTemplates = report.MetadataTemplates{ Namespace: {ID: Namespace, Label: "Namespace", From: report.FromLatest, Priority: 2}, - Created: {ID: Created, Label: "Created", From: report.FromLatest, Priority: 3}, + Created: {ID: Created, Label: "Created", From: report.FromLatest, Datatype: "datetime", Priority: 3}, ObservedGeneration: {ID: ObservedGeneration, Label: "Observed Gen.", From: report.FromLatest, Priority: 4}, DesiredReplicas: {ID: DesiredReplicas, Label: "Desired Replicas", From: report.FromLatest, Datatype: "number", Priority: 5}, report.Pod: {ID: report.Pod, Label: "# Pods", From: report.FromCounters, Datatype: "number", Priority: 6}, @@ -59,7 +59,7 @@ var ( ReplicaSetMetadataTemplates = report.MetadataTemplates{ Namespace: {ID: Namespace, Label: "Namespace", From: report.FromLatest, Priority: 2}, - Created: {ID: Created, Label: "Created", From: report.FromLatest, Priority: 3}, + Created: {ID: Created, Label: "Created", From: report.FromLatest, Datatype: "datetime", Priority: 3}, ObservedGeneration: {ID: ObservedGeneration, Label: "Observed Gen.", From: report.FromLatest, Priority: 4}, DesiredReplicas: {ID: DesiredReplicas, Label: "Desired Replicas", From: report.FromLatest, Datatype: "number", Priority: 5}, report.Pod: {ID: report.Pod, Label: "# Pods", From: report.FromCounters, Datatype: "number", Priority: 6},