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