format datetimes (#38)

* format datetimes

fix next_run update after toggle schedule active

* use moment-timezone to lock the timezone in tests

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>

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

@@ -78,7 +78,9 @@ exports[`WorkflowDetail success 1`] = `
           <dt>
             Next Run
           </dt>
-          <dd />
+          <dd>
+            
+          </dd>
           <dt>
             Parameters
           </dt>

frontend/src/tests/mocks.js

@@ -1,5 +1,13 @@
+import moment from "moment-timezone";
+
 import API from '../API';
 
+/*
+* Set the timezone to UTC when running tests, for consistent
+* snapshots.
+* */
+moment.tz.setDefault('UTC');
+
 /*
  Mock API with canned responses; it will call the callback
  immediately instead of waiting for a Promise. This means

frontend/src/utilities.js

@@ -0,0 +1,8 @@
+import moment from "moment";
+
+export function formatDateTime(datetime) {
+  if (!datetime) {
+    return '';
+  }
+  return moment(datetime).format('MMMM Do YYYY, h:mm:ss a');
+}

frontend/yarn.lock

@@ -4058,6 +4058,16 @@ [email protected], [email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+moment-timezone@^0.5.17:
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.17.tgz#3c8fef32051d84c3af174d91dc52977dcb0ad7e5"
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.22.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 [email protected]:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

setup.py

@@ -22,7 +22,7 @@
     # Versions should comply with PEP440.  For a discussion on single-sourcing
     # the version across setup.py and the project code, see
     # https://packaging.python.org/en/latest/single_source_version.html
-    version='0.2.2',
+    version='0.2.3',
 
     description='Yet Another Workflow Engine, a subprocess-based DAG execution system',
     long_description=long_description,