feat(ui): use Moment component to render duration, upgrade moment pac…

…kage to 1.0.0

react-moment@1.0.0 fixed duration formatting bug, headzoo/react-moment#114

Signed-off-by: Tianchu Zhao <evantczhao@gmail.com>

ui/package.json

@@ -30,7 +30,7 @@
         "react-chartjs-2": "^2.9.0",
         "react-datepicker": "^2.14.0",
         "react-dom": "^16.8.3",
-        "react-moment": "^0.9.7",
+        "react-moment": "^1.0.0",
         "react-monaco-editor": "^0.36.0",
         "react-router-dom": "^4.2.2",
         "superagent": "^3.8.2",

ui/src/app/shared/components/duration-panel.tsx

@@ -1,5 +1,6 @@
 import * as moment from 'moment';
 import * as React from 'react';
+import Moment from 'react-moment';
 import {NODE_PHASE, NodePhase} from '../../../models';
 import {formatDuration} from '../duration';
 import {ProgressLine} from './progress-line';
@@ -32,7 +33,5 @@ export const DurationFromNow = ({getDate, frequency = 1000}: {getDate: () => str
         };
     }, []);
 
-    const duration = moment.duration(moment(date).diff(now)).asSeconds();
-
-    return <>{formatDuration(duration)}</>;
+    return <Moment duration={now} date={date} format='dd:hh:mm:ss' />;
 };

ui/yarn.lock

@@ -5251,10 +5251,10 @@ react-lifecycles-compat@^3.0.0:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-moment@^0.9.7:
-  version "0.9.7"
-  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.9.7.tgz#ca570466595b1aa4f7619e62da18b3bb2de8b6f3"
-  integrity sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g==
+react-moment@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-1.0.0.tgz#aedac867cd08739065799de9452c898d954ba6d7"
+  integrity sha512-J4iIiwUT4oZcL7cp2U7naQKbQtqvmzGXXBMg/DLj+Pi7n9EW0VhBRx/1aJ1Tp2poCqTCAPoadLEoUIkReGnNNg==
 
 react-monaco-editor@^0.36.0:
   version "0.36.0"