[ML] Fix start datafeed start time selection (#21203)

* [ML] Fix start datafeed start time selection * disabling start button if start and end are the same * adding comment
elastic · Jul 25, 2018 · f87ef51 · f87ef51
1 parent f82b971
commit f87ef51
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/.../plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js b/.../plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js
@@ -34,17 +34,19 @@ export class StartDatafeedModal extends Component {
   constructor(props) {
     super(props);
 
+    const now = moment();
     this.state = {
       jobs: this.props.jobs,
       isModalVisible: false,
-      startTime: moment(),
-      endTime: moment(),
+      startTime: now,
+      endTime: now,
       createWatch: false,
       allowCreateWatch: false,
-      initialSpecifiedStartTime: moment()
+      initialSpecifiedStartTime: now,
+      now,
     };
 
-    this.initialSpecifiedStartTime = moment();
+    this.initialSpecifiedStartTime = now;
     this.refreshJobs = this.props.refreshJobs;
     this.getShowCreateWatchFlyoutFunction = this.props.getShowCreateWatchFlyoutFunction;
   }
@@ -79,7 +81,8 @@ export class StartDatafeedModal extends Component {
 
   showModal = (jobs, showCreateWatchFlyout) => {
     const startTime = undefined;
-    const endTime = moment();
+    const now = moment();
+    const endTime = now;
     const initialSpecifiedStartTime = getLowestLatestTime(jobs);
     const allowCreateWatch = (jobs.length === 1);
     this.setState({
@@ -91,13 +94,15 @@ export class StartDatafeedModal extends Component {
       showCreateWatchFlyout,
       allowCreateWatch,
       createWatch: false,
+      now,
     });
   }
 
   save = () => {
     const { jobs } = this.state;
     const start = moment.isMoment(this.state.startTime) ? this.state.startTime.valueOf() : this.state.startTime;
     const end = moment.isMoment(this.state.endTime) ? this.state.endTime.valueOf() : this.state.endTime;
+
     forceStartDatafeeds(jobs, start, end, () => {
       if (this.state.createWatch && jobs.length === 1) {
         const jobId = jobs[0].id;
@@ -112,10 +117,14 @@ export class StartDatafeedModal extends Component {
     const {
       jobs,
       initialSpecifiedStartTime,
+      startTime,
       endTime,
-      createWatch
+      createWatch,
+      now,
     } = this.state;
     const startableJobs = (jobs !== undefined) ? jobs.filter(j => j.hasDatafeed) : [];
+    // disable start button if the start and end times are the same
+    const startDisabled = (startTime !== undefined && (startTime === endTime));
     let modal;
 
     if (this.state.isModalVisible) {
@@ -133,10 +142,11 @@ export class StartDatafeedModal extends Component {
 
             <EuiModalBody>
               <TimeRangeSelector
-                startTime={initialSpecifiedStartTime}
+                startTime={(startTime === undefined) ? initialSpecifiedStartTime : startTime}
                 endTime={endTime}
                 setStartTime={this.setStartTime}
                 setEndTime={this.setEndTime}
+                now={now}
               />
               {
                 this.state.endTime === undefined &&
@@ -161,6 +171,7 @@ export class StartDatafeedModal extends Component {
 
               <EuiButton
                 onClick={this.save}
+                isDisabled={startDisabled}
                 fill
               >
                 Start

diff --git a/...jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js b/...jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
@@ -29,6 +29,7 @@ export class TimeRangeSelector extends Component {
       endTab: 1,
     };
     this.latestTimeStamp = this.props.startTime;
+    this.now = this.props.now;
   }
 
   setStartTab = (tab) => {
@@ -38,7 +39,7 @@ export class TimeRangeSelector extends Component {
         this.setStartTime(undefined);
         break;
       case 1:
-        this.setStartTime('now');
+        this.setStartTime(this.now);
         break;
       default:
         break;
@@ -52,7 +53,7 @@ export class TimeRangeSelector extends Component {
         this.setEndTime(undefined);
         break;
       case 1:
-        this.setEndTime(moment());
+        this.setEndTime(this.now);
         break;
       default:
         break;
@@ -70,7 +71,7 @@ export class TimeRangeSelector extends Component {
   getTabItems() {
     const datePickerTimes = {
       start: (moment.isMoment(this.props.startTime)) ? this.props.startTime : this.latestTimeStamp,
-      end: (moment.isMoment(this.props.endTime)) ? this.props.endTime : moment()
+      end: (moment.isMoment(this.props.endTime)) ? this.props.endTime : this.now,
     };
     const formattedStartTime = this.latestTimeStamp.format(TIME_FORMAT);
     const startItems = [