Browse Source

- Fixes timestamp
- Adds timestamp helper method

George Vrancianu 8 years ago
parent
commit
4d02109c62

+ 2 - 1
src/components/CloudConnectionDetail/CloudConnectionDetail.js

@@ -89,6 +89,7 @@ class CloudConnectionDetail extends Component {
 
   render() {
     let item = this.props.connection
+    let createdAt = Helper.getTimeObject(item.created_at)
     if (item) {
       return (
         <div className={s.root}>
@@ -122,7 +123,7 @@ class CloudConnectionDetail extends Component {
                 Created
               </div>
               <div className={s.value}>
-                <Moment format="MM/DD/YYYY HH:MM" date={item.created} />
+                <Moment format="MM/DD/YYYY HH:mm" date={createdAt} />
               </div>
             </div>
           </div>

+ 10 - 8
src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -63,18 +63,18 @@ class CloudConnectionsView extends Component {
     }
   }
 
-  componentWillReceiveProps(newProps, oldProps) {
+  componentDidMount() {
+    this.context.onSetTitle(this.title);
+  }
+
+  componentWillReceiveProps(newProps) {
     if (newProps.connections) {
-      let connection = newProps.connections.filter((connection => connection.id == this.props.connectionId))[0]
+      let connection = newProps.connections.filter((item => item.id === this.props.connectionId))[0]
 
       this.setState({ connection: connection })
     }
   }
 
-  componentDidMount() {
-    this.context.onSetTitle(this.title);
-  }
-
   onConnectionsActionsChange(option) {
     switch (option.value) {
       case "delete":
@@ -183,7 +183,9 @@ class CloudConnectionsView extends Component {
                   <button onClick={(e) => this.validateConnection(e)}>Validate Endpoint</button>
                 </div>
                 <div className={s.rightSide}>
-                  <button onClick={(e) => this.deleteConnection(e)} className="wire" style={{float: "right"}}>Delete</button>
+                  <button onClick={(e) => this.deleteConnection(e)} className="wire" style={{ float: "right" }}>
+                    Delete
+                  </button>
                 </div>
               </div>
             </div>
@@ -221,7 +223,7 @@ class CloudConnectionsView extends Component {
     } else {
       return (
         <div className={s.root}>
-          <Header title={title} linkUrl="/cloud-endpoints"/>
+          <Header title={title} linkUrl="/cloud-endpoints" />
           <div className={s.container}>
             <LoadingIcon />
           </div>

+ 8 - 8
src/components/EndpointList/EndpointList.js

@@ -31,6 +31,7 @@ import EndpointUsage from '../EndpointUsage';
 import NotificationIcon from '../NotificationIcon';
 import ProjectsDropdown from '../ProjectsDropdown';
 import MainList from '../MainList';
+import Helper from '../Helper';
 
 
 const title = 'Cloud Endpoints';
@@ -48,19 +49,17 @@ const filters = [
   {
     field: "type",
     options: [
-      { value: null, label: "All"},
-      { value: "opc", label: "Oracle Cloud"},
-      { value: "oracle_vm", label: "Oracle VM Server"},
-      { value: "openstack", label: "Openstack"},
-      { value: "vmware_vsphere", label: "VMware"}
+      { value: null, label: "All" },
+      { value: "opc", label: "Oracle Cloud" },
+      { value: "oracle_vm", label: "Oracle VM Server" },
+      { value: "openstack", label: "Openstack" },
+      { value: "vmware_vsphere", label: "VMware" }
     ]
   }
 ]
 
 class EndpointList extends Reflux.Component {
 
-
-
   constructor(props) {
     super(props)
     this.store = ConnectionsStore
@@ -103,6 +102,7 @@ class EndpointList extends Reflux.Component {
   }
 
   renderItem(item) {
+    let createdAt = Helper.getTimeObject(item.created_at)
     return (
       <div className={"item " + (item.selected ? " selected" : "")} key={"vm_" + item.id}>
         <span className="cell cell-icon" onClick={(e) => this.connectionDetail(e, item)}>
@@ -118,7 +118,7 @@ class EndpointList extends Reflux.Component {
         <span className={"cell " + s.composite}>
           <span className={s.label}>Created</span>
           <span className={s.value}>
-            <Moment fromNow ago date={item.created_at}/> ago
+            <Moment fromNow ago date={createdAt} /> ago
           </span>
         </span>
         <span className={"cell " + s.composite}>

+ 5 - 0
src/components/Helper/Helper.js

@@ -25,6 +25,11 @@ class Helper extends Component {
   static generateMigrationName(type) {
     return type + "_" + moment().format("MMDDYY-HHmmss")
   }
+  static getTimeObject(rawDate) {
+    let offset = (new Date().getTimezoneOffset()) / 60 * -1;
+
+    return moment(rawDate).add(offset, 'hours')
+  }
 }
 
 export default Helper;

+ 1 - 1
src/components/MigrationDetail/MigrationDetail.js

@@ -132,7 +132,7 @@ class MigrationDetail extends Component {
                   Created
                 </div>
                 <div className={s.value}>
-                  <Moment format="MM/DD/YYYY HH:MM" date={item.created} />
+                  <Moment format="MM/DD/YYYY HH:mm" date={item.created_at} />
                 </div>
               </div>
               <div className={s.formGroup}>

+ 4 - 1
src/components/MigrationList/MigrationList.js

@@ -28,6 +28,7 @@ import MigrationActions from '../../actions/MigrationActions';
 import TextTruncate from 'react-text-truncate';
 import ProjectsDropdown from '../ProjectsDropdown';
 import MainList from '../MainList';
+import Helper from '../Helper';
 
 const title = 'Coriolis Migrations';
 
@@ -109,6 +110,8 @@ class MigrationList extends Reflux.Component {
       tasksRemaining = "-"
     }
 
+    let createdAt = Helper.getTimeObject(item.created_at)
+
     return (
       <div className={"item " + (item.selected ? "selected" : "")} key={"migration_" + item.id}>
         <span className="cell cell-icon" onClick={(e) => this.migrationDetail(e, item)}>
@@ -126,7 +129,7 @@ class MigrationList extends Reflux.Component {
         <span className={"cell " + s.composite} onClick={(e) => this.migrationDetail(e, item)}>
           <span className={s.label}>Created</span>
           <span className={s.value}>
-            <Moment format="MMM Do YYYY HH:ss" date={item.created_at} />
+            <Moment format="MMM Do YYYY HH:mm" date={createdAt} />
           </span>
         </span>
         {/*<span className={"cell " + s.composite} onClick={(e) => this.migrationDetail(e, item)}>

+ 4 - 2
src/components/ReplicaDetail/ReplicaDetail.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './ReplicaDetail.scss';
 import Moment from 'react-moment';
-import LoadingIcon from "../LoadingIcon";
+import Helper from "../Helper";
 import EndpointLink from '../EndpointLink';
 import ConfirmationDialog from '../ConfirmationDialog'
 import MigrationActions from '../../actions/MigrationActions';
@@ -86,6 +86,8 @@ class MigrationDetail extends Component {
         }
       }
 
+      let createdAt = Helper.getTimeObject(item.created_at)
+
       output = (
         <div className={s.root}>
           <div className={s.container}>
@@ -132,7 +134,7 @@ class MigrationDetail extends Component {
                   Created
                 </div>
                 <div className={s.value}>
-                  <Moment format="MM/DD/YYYY HH:MM" date={item.created} />
+                  <Moment format="MM/DD/YYYY HH:mm" date={createdAt} />
                 </div>
               </div>
               <div className={s.formGroup}>

+ 4 - 1
src/components/ReplicaList/ReplicaList.js

@@ -28,6 +28,7 @@ import MigrationActions from '../../actions/MigrationActions';
 import TextTruncate from 'react-text-truncate';
 import ProjectsDropdown from '../ProjectsDropdown';
 import MainList from '../MainList';
+import Helper from '../Helper';
 
 const title = 'Coriolis Replicas';
 
@@ -111,6 +112,8 @@ class ReplicaList extends Reflux.Component {
       tasksRemaining = "-"
     }
 
+    let createdAt = Helper.getTimeObject(item.created_at)
+
     return (
       <div className={"item " + (item.selected ? "selected" : "")} key={"replica_" + item.id}>
         <span className="cell cell-icon" onClick={(e) => this.replicaDetail(e, item)}>
@@ -128,7 +131,7 @@ class ReplicaList extends Reflux.Component {
         <span className={"cell " + s.composite} onClick={(e) => this.replicaDetail(e, item)}>
           <span className={s.label}>Created</span>
           <span className={s.value}>
-            <Moment format="MMM Do YYYY HH:ss" date={item.created_at} />
+            <Moment format="MMM Do YYYY HH:mm" date={createdAt} />
           </span>
         </span>
         <span className={"cell " + s.composite} onClick={(e) => this.replicaDetail(e, item)}>

+ 7 - 5
src/components/Tasks/Tasks.js

@@ -23,6 +23,7 @@ import s from './Tasks.scss';
 import TextTruncate from 'react-text-truncate';
 import LoadingIcon from "../LoadingIcon/LoadingIcon";
 import ProgressBar from '../ProgressBar';
+import Helper from '../Helper';
 
 function hasProgress(msg) {
   if (msg.indexOf('progress:') > -1) {
@@ -80,7 +81,8 @@ class Tasks extends Component {
           for (let i = item.progress_updates.length - 1; i >= 0; i--) {
             let date = "-"
             if (item.progress_updates[i]) {
-              date = moment(item.progress_updates[i].created_at).format("YYYY-MM-DD HH:mm:ss")
+              let createdAt = Helper.getTimeObject(item.progress_updates[i].created_at)
+              date = moment(createdAt).format("YYYY-MM-DD HH:mm:ss")
 
               progressUpdates.push(
                 <div key={"progress_" + i} className={first ? " first" : ""}>
@@ -134,11 +136,11 @@ class Tasks extends Component {
         let newItem = {
           task_type: (<span>
             <span className={"taskIcon " + item.status}/>
-            <TextTruncate line={1} truncateText="..." text={taskType}/>
+            <TextTruncate line={1} truncateText="..." text={taskType} />
           </span>),
-          instance: <TextTruncate line={1} text={item.instance} truncateText="..."/>,
-          latest_message: <TextTruncate line={1} truncateText="..." text={latestMessage}/>,
-          timestamp: item.updated_at ? moment(item.updated_at).format("YYYY-MM-DD HH:mm:ss") : "-",
+          instance: <TextTruncate line={1} text={item.instance} truncateText="..." />,
+          latest_message: <TextTruncate line={1} truncateText="..." text={latestMessage} />,
+          timestamp: item.updated_at ? Helper.getTimeObject(moment(item.updated_at)).format("YYYY-MM-DD HH:mm:ss") : "-",
           detailView: taskDetails,
           openState: item.status === 'RUNNING'
         }