format datetimes (#38)

* format datetimes

fix next_run update after toggle schedule active

* use moment-timezone to lock the timezone in tests

Author: aclowes

frontend/package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "bootswatch": "^3.3.7",
     "dagre-d3": "^0.4.17",
+    "moment": "^2.22.2",
+    "moment-timezone": "^0.5.17",
     "react": "^15.6.1",
     "react-bootstrap": "^0.30.10",
     "react-dom": "^15.6.1",

frontend/src/ExecutionTable.js

@@ -2,6 +2,8 @@ import React from 'react';
 import {Table} from 'react-bootstrap';
 import {Link} from 'react-router';
 
+import {formatDateTime} from "./utilities";
+
 
 export default class ExecutionTable extends React.Component {
 
@@ -19,7 +21,7 @@ export default class ExecutionTable extends React.Component {
           <td>{execution.task.workflow && execution.task.workflow.name}</td>
           <td><Link to={`/tasks/${execution.task.id}`}>{execution.task.name}</Link></td>
           <td>{execution.status}</td>
-          <td>{execution.start_timestamp}</td>
+          <td>{formatDateTime(execution.start_timestamp)}</td>
           <td>{execution.minutes_running}</td>
         </tr>
       ))

frontend/src/TaskDetail.js

@@ -3,6 +3,7 @@ import {PanelGroup, Panel, Alert, Pagination, Button} from 'react-bootstrap';
 import {Link} from 'react-router';
 
 import API from "./API";
+import {formatDateTime} from "./utilities";
 
 export default class TaskDetail extends React.Component {
   constructor(props) {
@@ -92,9 +93,9 @@ export default class TaskDetail extends React.Component {
           </Link>
         </dd>
         <dt>Start Time</dt>
-        <dd>{execution.start_timestamp}</dd>
+        <dd>{formatDateTime(execution.start_timestamp)}</dd>
         <dt>Stop Time</dt>
-        <dd>{execution.stop_timestamp}</dd>
+        <dd>{formatDateTime(execution.stop_timestamp)}</dd>
         <dt>Exit Code</dt>
         <dd>{execution.exit_code}</dd>
         <dt>Standard Output</dt>

frontend/src/WorkerDetail.js

@@ -3,6 +3,7 @@ import {Panel, PanelGroup, Alert} from 'react-bootstrap';
 
 import API from "./API";
 import ExecutionTable from "./ExecutionTable";
+import {formatDateTime} from "./utilities";
 
 export default class WorkerDetail extends React.Component {
   constructor(props) {
@@ -36,9 +37,9 @@ export default class WorkerDetail extends React.Component {
               <dt>Status</dt>
               <dd>{worker.status}</dd>
               <dt>Start Timestamp</dt>
-              <dd>{worker.start_timestamp}</dd>
+              <dd>{formatDateTime(worker.start_timestamp)}</dd>
               <dt>Last Heartbeat</dt>
-              <dd>{worker.last_heartbeat}</dd>
+              <dd>{formatDateTime(worker.last_heartbeat)}</dd>
             </dl>
           </Panel>
           <Panel header="Executions">

frontend/src/WorkerList.js

@@ -3,6 +3,7 @@ import {Table, Alert} from 'react-bootstrap';
 import {Link} from 'react-router';
 
 import API from "./API";
+import {formatDateTime} from "./utilities";
 
 export default class WorkerList extends React.Component {
   constructor(props) {
@@ -30,8 +31,8 @@ export default class WorkerList extends React.Component {
           <tr key={worker.id}>
             <td><Link to={`/workers/${worker.id}`}>{worker.name}</Link></td>
             <td>{worker.status}</td>
-            <td>{worker.start_timestamp}</td>
-            <td>{worker.last_heartbeat}</td>
+            <td>{formatDateTime(worker.start_timestamp)}</td>
+            <td>{formatDateTime(worker.last_heartbeat)}</td>
           </tr>
         )
       })

frontend/src/WorkflowDetailForm.js

@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 
 import API from './API'
+import {formatDateTime} from "./utilities";
 
 /* Helper to extract form values from a given object */
 function formValues(object) {
@@ -26,6 +27,7 @@ function formValues(object) {
     schedule: object.schedule,
     schedule_active: object.schedule_active,
     parameters: parameters,
+    next_run: object.next_run,
   }
 }
 
@@ -122,7 +124,7 @@ export default class WorkflowDetailForm extends React.Component {
             <dt>Schedule</dt>
             <dd>{this.state.schedule}</dd>
             <dt>Next Run</dt>
-            <dd>{this.props.workflow.next_run}</dd>
+            <dd>{formatDateTime(this.state.next_run)}</dd>
             <dt>Parameters</dt>
             <dd>
               <pre>{this.state.parameters}</pre>

frontend/src/tests/__snapshots__/ExecutionList.test.js.snap

@@ -147,7 +147,7 @@ exports[`ExecutionList success 1`] = `
           succeeded
         </td>
         <td>
-          2017-01-30T04:17:47.008524Z
+          January 30th 2017, 4:17:47 am
         </td>
         <td>
           0m 0.05s

frontend/src/tests/__snapshots__/TaskDetail.test.js.snap

@@ -156,12 +156,14 @@ exports[`TaskDetail success 1`] = `
             Start Time
           </dt>
           <dd>
-            2017-01-30T03:26:38.211839Z
+            January 30th 2017, 3:26:38 am
           </dd>
           <dt>
             Stop Time
           </dt>
-          <dd />
+          <dd>
+            
+          </dd>
           <dt>
             Exit Code
           </dt>

frontend/src/tests/__snapshots__/WorkerDetail.test.js.snap

@@ -53,13 +53,13 @@ exports[`WorkerDetail success 1`] = `
           Start Timestamp
         </dt>
         <dd>
-          2017-01-30T04:13:47.966080Z
+          January 30th 2017, 4:13:47 am
         </dd>
         <dt>
           Last Heartbeat
         </dt>
         <dd>
-          2017-01-30T04:15:10.845289Z
+          January 30th 2017, 4:15:10 am
         </dd>
       </dl>
     </div>
@@ -126,7 +126,7 @@ exports[`WorkerDetail success 1`] = `
               succeeded
             </td>
             <td>
-              2017-01-30T04:17:03.806599Z
+              January 30th 2017, 4:17:03 am
             </td>
             <td />
           </tr>

frontend/src/tests/__snapshots__/WorkerList.test.js.snap

@@ -118,10 +118,10 @@ exports[`WorkerList success 1`] = `
           exited
         </td>
         <td>
-          2017-01-30T04:13:47.966080Z
+          January 30th 2017, 4:13:47 am
         </td>
         <td>
-          2017-01-30T04:15:10.845289Z
+          January 30th 2017, 4:15:10 am
         </td>
       </tr>
     </tbody>