client: Fix uptime sort in table view (#3038)

* client: Fix uptime sort in table view

Duration dataType for table columns is now sorted as numeric value.
Default sorting is kept as ascending and text is left-aligned, unlike
numbers.

* Make non-second unit show up in tests

client/app/scripts/components/node-details/__tests__/node-details-table-test.js

@@ -15,6 +15,7 @@ describe('NodeDetailsTable', () => {
     columns = [
       { id: 'kubernetes_ip', label: 'IP', dataType: 'ip' },
       { id: 'kubernetes_namespace', label: 'Namespace' },
+      { id: 'uptime', label: 'Uptime', dataType: 'duration' },
     ];
     nodes = [
       {
@@ -22,24 +23,36 @@ describe('NodeDetailsTable', () => {
         metadata: [
           { id: 'kubernetes_ip', label: 'IP', value: '10.244.253.24' },
           { id: 'kubernetes_namespace', label: 'Namespace', value: '1111' },
+          {
+            id: 'uptime', dataType: 'duration', label: 'Uptime', value: '1'
+          },
         ]
       }, {
         id: 'node-2',
         metadata: [
           { id: 'kubernetes_ip', label: 'IP', value: '10.244.253.4' },
           { id: 'kubernetes_namespace', label: 'Namespace', value: '12' },
+          {
+            id: 'uptime', dataType: 'duration', label: 'Uptime', value: '4'
+          },
         ]
       }, {
         id: 'node-3',
         metadata: [
           { id: 'kubernetes_ip', label: 'IP', value: '10.44.253.255' },
           { id: 'kubernetes_namespace', label: 'Namespace', value: '5' },
+          {
+            id: 'uptime', dataType: 'duration', label: 'Uptime', value: '30'
+          },
         ]
       }, {
         id: 'node-4',
         metadata: [
           { id: 'kubernetes_ip', label: 'IP', value: '10.244.253.100' },
           { id: 'kubernetes_namespace', label: 'Namespace', value: '00000' },
+          {
+            id: 'uptime', dataType: 'duration', label: 'Uptime', value: '22222'
+          },
         ]
       },
     ];
@@ -125,4 +138,23 @@ describe('NodeDetailsTable', () => {
       matchColumnValues('kubernetes_namespace', ['00000', '1111', '12', '5']);
     });
   });
+
+  describe('uptime duration', () => {
+    it('sorts by column', () => {
+      component = TestUtils.renderIntoDocument((
+        <Provider store={configureStore()}>
+          <NodeDetailsTable
+            columns={columns}
+            sortedBy="uptime"
+            nodeIdKey="id"
+            nodes={nodes}
+          />
+        </Provider>
+      ));
+
+      matchColumnValues('uptime', ['1 second', '4 seconds', '30 seconds', '6 hours']);
+      clickColumn('Uptime');
+      matchColumnValues('uptime', ['6 hours', '30 seconds', '4 seconds', '1 second']);
+    });
+  });
 });

client/app/scripts/components/node-details/node-details-generic-table.js

@@ -5,7 +5,7 @@ import { Map as makeMap } from 'immutable';
 import { NODE_DETAILS_DATA_ROWS_DEFAULT_LIMIT } from '../../constants/limits';
 
 import {
-  isNumber,
+  isNumeric,
   getTableColumnsStyles,
   genericTableEntryKey
 } from '../../utils/node-details-utils';
@@ -18,7 +18,7 @@ function sortedRows(rows, columns, sortedBy, sortedDesc) {
   const column = columns.find(c => c.id === sortedBy);
   const sorted = sortBy(rows, (row) => {
     let value = row.entries[sortedBy];
-    if (isNumber(column)) {
+    if (isNumeric(column)) {
       value = parseFloat(value);
     }
     return value;

client/app/scripts/components/node-details/node-details-table.js

@@ -12,7 +12,7 @@ import NodeDetailsTableHeaders from './node-details-table-headers';
 import { ipToPaddedString } from '../../utils/string-utils';
 import { moveElement, insertElement } from '../../utils/array-utils';
 import {
-  isIP, isNumber, defaultSortDesc, getTableColumnsStyles
+  isIP, isNumeric, defaultSortDesc, getTableColumnsStyles
 } from '../../utils/node-details-utils';
 
 
@@ -49,7 +49,7 @@ function getNodeValue(node, header) {
       if (isIP(header)) {
         // Format the IPs so that they are sorted numerically.
         return ipToPaddedString(field.value);
-      } else if (isNumber(header)) {
+      } else if (isNumeric(header)) {
         return parseFloat(field.value);
       }
       return field.value;
@@ -81,7 +81,7 @@ function getMetaDataSorters(nodes) {
   return get(nodes, [0, 'metadata'], []).map((field, index) => (node) => {
     const nodeMetadataField = node.metadata && node.metadata[index];
     if (nodeMetadataField) {
-      if (isNumber(nodeMetadataField)) {
+      if (isNumeric(nodeMetadataField)) {
         return parseFloat(nodeMetadataField.value);
       }
       return nodeMetadataField.value;

client/app/scripts/utils/node-details-utils.js

@@ -12,6 +12,11 @@ export function isNumber(data) {
   return data && data.dataType && data.dataType === 'number';
 }
 
+/** Whether the value is considered numeric for sorting purposes. */
+export function isNumeric(data) {
+  return data && data.dataType && (data.dataType === 'number' || data.dataType === 'duration');
+}
+
 export function isIP(data) {
   return data && data.dataType && data.dataType === 'ip';
 }