replace moment with humanize-duration

pkg/ui/package.json

@@ -11,12 +11,12 @@
     "flexboxgrid": "6.3.1",
     "font-awesome": "4.7.0",
     "history": "^4.5.1",
+    "humanize-duration": "^3.10.1",
     "js-yaml": "^3.8.4",
     "json-stream": "^1.0.0",
     "longest-common-subsequence": "^1.0.4",
     "material-ui": "^0.18.0",
     "material-ui-chip-input": "^0.14.0",
-    "moment": "^2.18.1",
     "node-interval-tree": "^1.2.0",
     "prop-types": "^15.5.10",
     "query-string": "^4.3.4",

pkg/ui/src/components/ClusterPage.js

@@ -7,7 +7,7 @@ import { addFilter, removeFilter, removeResource } from '../state/actions/cluste
 import sizeMe from 'react-sizeme'
 import {Tabs, Tab} from 'material-ui/Tabs'
 import FilterTable from './filter-table/FilterTable'
-import * as moment from 'moment'
+import { toHumanizedAge } from './converters'
 
 import ChipInput from 'material-ui-chip-input'
 import Chip from 'material-ui/Chip'
@@ -408,7 +408,7 @@ class ClusterPage extends React.Component {
       //   return <IconMore color={'rgba(0,0,0,0.4)'} hoverColor={'rgba(0,0,0,0.87)'} data-rh="Actions..."/>
       case 'age':
         let age = Date.now() - Date.parse(row.metadata.creationTimestamp)
-        return moment.duration(age).humanize()
+        return toHumanizedAge(age)
       case 'status':
         return resourceStatusIcons[row.statusSummary]
       default:

pkg/ui/src/components/ResourceGroup.js

@@ -6,7 +6,7 @@ import { routerActions } from 'react-router-redux'
 import { connect } from 'react-redux'
 import { addFilter, removeFilter, removeResource } from '../state/actions/access'
 import FilterTable from './filter-table/FilterTable'
-import * as moment from 'moment'
+import { toHumanizedAge } from './converters'
 
 import ChipInput from 'material-ui-chip-input'
 import Chip from 'material-ui/Chip'

pkg/ui/src/components/WorkloadsPage.js

@@ -7,7 +7,6 @@ import { connect } from 'react-redux'
 import { addFilter, removeFilter, removeResource, scaleResource } from '../state/actions/workloads'
 import sizeMe from 'react-sizeme'
 import FilterTable from './filter-table/FilterTable'
-import * as moment from 'moment'
 
 import { withRouter } from 'react-router-dom'
 import { linkForResource } from '../routes'
@@ -18,6 +17,7 @@ import IconMore from 'material-ui/svg-icons/navigation/more-horiz'
 import Paper from 'material-ui/Paper'
 
 import { arraysEqual } from '../comparators'
+import { toHumanizedAge } from '../converters'
 import { resourceStatus as resourceStatusIcons } from './icons'
 import { compareStatuses } from '../utils/resource-utils'
 
@@ -462,7 +462,7 @@ class WorkloadsPage extends React.Component {
         return <IconMore color={'rgba(0,0,0,0.4)'} hoverColor={'rgba(0,0,0,0.87)'} data-rh="Actions..."/>
       case 'age':
         let age = Date.now() - Date.parse(row.metadata.creationTimestamp)
-        return moment.duration(age).humanize()
+        return toHumanizedAge(age)
       case 'status':
         return <div style={styles.statusIcon}>{resourceStatusIcons[row.statusSummary]}</div>
       case 'pods':

pkg/ui/src/components/access/ResourcesTab.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import { addFilter, removeFilter, removeResource } from '../../state/actions/access'
 import sizeMe from 'react-sizeme'
 import FilterTable from '../filter-table/FilterTable'
-import * as moment from 'moment'
+import { toHumanizedAge } from '../../converters'
 
 import { withRouter } from 'react-router-dom'
 import { linkForResource } from '../../routes'
@@ -308,7 +308,7 @@ class ResourcesTab extends React.Component {
         return <IconMore color={'rgba(0,0,0,0.4)'} hoverColor={'rgba(0,0,0,0.87)'} data-rh="Actions..."/>
       case 'age':
         let age = Date.now() - Date.parse(row.metadata.creationTimestamp)
-        return moment.duration(age).humanize()
+        return toHumanizedAge(age)
       case 'status':
         return <div style={styles.statusIcon}>{resourceStatusIcons[row.statusSummary]}</div>
       case 'pods':

pkg/ui/src/components/cluster/NodesTab.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { addFilter, removeFilter, removeResource } from '../../state/actions/cluster'
 import sizeMe from 'react-sizeme'
 import FilterTable from '../filter-table/FilterTable'
-import * as moment from 'moment'
+import { toHumanizedAge } from '../../converters'
 
 import { withRouter } from 'react-router-dom'
 import { linkForResource } from '../../routes'
@@ -397,7 +397,7 @@ class NodesTab extends React.Component {
       //   return <IconMore color={'rgba(0,0,0,0.4)'} hoverColor={'rgba(0,0,0,0.87)'} data-rh="Actions..."/>
       case 'age':
         let age = Date.now() - Date.parse(row.metadata.creationTimestamp)
-        return moment.duration(age).humanize()
+        return toHumanizedAge(age)
       case 'status':
         return resourceStatusIcons[row.statusSummary]
       default:

pkg/ui/src/components/cluster/PersistentVolumesTab.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import { addFilter, removeFilter, removeResource } from '../../state/actions/cluster'
 import sizeMe from 'react-sizeme'
 import FilterTable from '../filter-table/FilterTable'
-import * as moment from 'moment'
+import { toHumanizedAge } from './converters'
 
 import ChipInput from 'material-ui-chip-input'
 import Chip from 'material-ui/Chip'
@@ -87,7 +87,7 @@ export default class StorageClassesTab extends React.Component {
         },
         render: function(r) {
           let age = Date.now() - Date.parse(r.metadata.creationTimestamp)
-          return moment.duration(age).humanize()
+          return toHumanizedAge(age)
         }
       },
     ]

pkg/ui/src/components/cluster/ResourceQuotasTab.js

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import { white } from 'material-ui/styles/colors'
-import * as moment from 'moment'
+import { toHumanizedAge } from '../../converters'
 import ClusterResourceTab from './ClusterResourceTab'
 
 const styles = {
@@ -61,7 +61,7 @@ export default class StorageClassesTab extends React.Component {
         },
         render: function(r) {
           let age = Date.now() - Date.parse(r.metadata.creationTimestamp)
-          return moment.duration(age).humanize()
+          return toHumanizedAge(age)
         }
       },
     ]

pkg/ui/src/components/cluster/StorageClassesTab.js

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import { white } from 'material-ui/styles/colors'
-import * as moment from 'moment'
+import { toHumanizedAge } from '../../converters'
 import ClusterResourceTab from './ClusterResourceTab'
 
 const styles = {
@@ -61,7 +61,7 @@ export default class StorageClassesTab extends React.Component {
         },
         render: function(r) {
           let age = Date.now() - Date.parse(r.metadata.creationTimestamp)
-          return moment.duration(age).humanize()
+          return toHumanizedAge(age)
         }
       },
     ]

pkg/ui/src/converters.js

@@ -1,4 +1,5 @@
-import * as moment from 'moment'
+// import * as moment from 'moment'
+import humanizeDuration from 'humanize-duration'
 
 /**
  * 
@@ -58,7 +59,8 @@ export function fixUnits(number, units) {
 
 export function toHumanizedAge(timestamp) {
   let age = Date.now() - Date.parse(timestamp)
-  let humanized = moment.duration(age).humanize()
+  // let humanized = moment.duration(age).humanize()
+  let humanized = humanizeDuration(age, {largest: 1})
   return humanized.replace("a few ", "")
 }