Merge pull request #1927 from jpellizzari/1866-table-time-format

1866: Improve metadata table 'date' format

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 (
       <div className="node-details-info">
-        {rows.map(field => (<div className="node-details-info-field" key={field.id}>
-            <div className="node-details-info-field-label truncate" title={field.label}>
-              {field.label}
+        {rows.map(field => {
+          const { value, title } = formatDataType(field);
+          return (
+            <div className="node-details-info-field" key={field.id}>
+              <div className="node-details-info-field-label truncate" title={field.label}>
+                {field.label}
+              </div>
+              <div className="node-details-info-field-value truncate" title={title}>
+                <MatchedText
+                  text={value}
+                  truncate={field.truncate}
+                  match={matches.get(field.id)} />
+              </div>
             </div>
-            <div className="node-details-info-field-value truncate" title={field.value}>
-              <MatchedText
-                text={field.value}
-                truncate={field.truncate}
-                match={matches.get(field.id)} />
-            </div>
-          </div>
-        ))}
+          );
+        })}
         <ShowMore handleClick={this.handleClickMore} collection={this.props.rows}
           expanded={this.state.expanded} notShown={notShown} />
       </div>

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 (
-          <td className="node-details-table-node-value truncate" title={field.value}
+          <td className="node-details-table-node-value truncate" title={title}
             style={style}
             key={field.id}>
-            {field.value}
+            {value}
           </td>
         );
       }

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};
+}

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{

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},