[ML] Jobs list bug fixes (#20823) (#20829)

x-pack/plugins/ml/public/jobs/jobs_list_new/components/delete_job_modal/delete_job_modal.js

@@ -94,6 +94,7 @@ export class DeleteJobModal extends Component {
             confirmButtonText="Delete"
             buttonColor="danger"
             defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+            className="eui-textBreakWord"
           >
             {(this.state.deleting === true) &&
               <div>
@@ -107,7 +108,7 @@ export class DeleteJobModal extends Component {
 
             {(this.state.deleting === false) &&
               <React.Fragment>
-                <p>Are you sure you want to delete {(this.state.jobs.length > 1) ? 'these jobs' : 'this job'}</p>
+                <p>Are you sure you want to delete {(this.state.jobs.length > 1) ? 'these jobs' : 'this job'}?</p>
                 {(this.state.jobs.length > 1) &&
                   <p>Deleting multiple jobs can be time consuming.
                     They will be deleted in the background and may not disappear from the jobs list instantly

x-pack/plugins/ml/public/jobs/jobs_list_new/components/job_details/job_details.js

@@ -117,5 +117,5 @@ JobDetails.propTypes = {
   jobId: PropTypes.string.isRequired,
   job: PropTypes.object,
   addYourself: PropTypes.func.isRequired,
-  removeYourself: PropTypes.func,
+  removeYourself: PropTypes.func.isRequired,
 };

x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js

@@ -25,6 +25,7 @@ import React, {
 
 const DEFAULT_REFRESH_INTERVAL_MS = 30000;
 const MINIMUM_REFRESH_INTERVAL_MS = 5000;
+let jobsRefreshInterval =  null;
 
 export class JobsListView extends Component {
   constructor(props) {
@@ -46,7 +47,6 @@ export class JobsListView extends Component {
     this.showStartDatafeedModal = () => {};
 
     this.blockRefresh = false;
-    this.refreshInterval = null;
   }
 
   componentDidMount() {
@@ -58,6 +58,7 @@ export class JobsListView extends Component {
   }
 
   componentWillUnmount() {
+    timefilter.off('refreshIntervalUpdate');
     this.clearRefreshInterval();
   }
 
@@ -95,13 +96,13 @@ export class JobsListView extends Component {
     this.clearRefreshInterval();
     if (interval >= MINIMUM_REFRESH_INTERVAL_MS) {
       this.blockRefresh = false;
-      this.refreshInterval = setInterval(() => (this.refreshJobSummaryList()), interval);
+      jobsRefreshInterval = setInterval(() => (this.refreshJobSummaryList()), interval);
     }
   }
 
   clearRefreshInterval() {
     this.blockRefresh = true;
-    clearInterval(this.refreshInterval);
+    clearInterval(jobsRefreshInterval);
   }
 
   toggleRow = (jobId) => {
@@ -119,13 +120,15 @@ export class JobsListView extends Component {
             jobId={jobId}
             job={this.state.fullJobsList[jobId]}
             addYourself={this.addUpdateFunction}
+            removeYourself={this.removeUpdateFunction}
           />
         );
       } else {
         itemIdToExpandedRowMap[jobId] = (
           <JobDetails
             jobId={jobId}
             addYourself={this.addUpdateFunction}
+            removeYourself={this.removeUpdateFunction}
           />
         );
       }

x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/jobs_stats_bar.js

@@ -106,7 +106,7 @@ export class JobStatsBar extends Component {
     const stats = Object.keys(jobStats).map(k => jobStats[k]);
 
     return (
-      <div className="jobs-stats-bar-new">
+      <div className="jobs-stats-bar">
         {
           stats.filter(s => (s.show)).map(s => <Stat key={s.label} stat={s} />)
         }

x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/styles/main.less

@@ -1,4 +1,4 @@
-.jobs-stats-bar-new {
+.jobs-stats-bar {
 
   height: 42px;
   padding: 14px;

x-pack/plugins/ml/public/jobs/jobs_list_new/components/start_datafeed_modal/start_datafeed_modal.js

@@ -91,6 +91,8 @@ export class StartDatafeedModal extends Component {
   }
 
   render() {
+    const { jobs } = this.state;
+    const startableJobs = (jobs !== undefined) ? jobs.filter(j => j.hasDatafeed) : [];
     let modal;
 
     if (this.state.isModalVisible) {
@@ -102,7 +104,7 @@ export class StartDatafeedModal extends Component {
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle>
-                Start {(this.state.jobs.length > 1) ? `${this.state.jobs.length} jobs` : this.state.jobs[0].id}
+                Start {(startableJobs.length > 1) ? `${startableJobs.length} jobs` : startableJobs[0].id}
               </EuiModalHeaderTitle>
             </EuiModalHeader>
 

x-pack/plugins/ml/public/jobs/jobs_list_new/jobs_directive.js → x-pack/plugins/ml/public/jobs/jobs_list_new/directive.js

@@ -5,11 +5,11 @@
  */
 
 
-import 'ngreact';
+import ReactDOM from 'react-dom';
+import React from 'react';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
-import template from './jobs.html';
 
 import { checkLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
@@ -19,6 +19,8 @@ import { initPromise } from 'plugins/ml/util/promise';
 
 import uiRoutes from 'ui/routes';
 
+const template = `<ml-nav-menu name="jobs" /><jobs-page />`;
+
 uiRoutes
   .when('/jobs/?', {
     template,
@@ -27,16 +29,21 @@ uiRoutes
       privileges: checkGetJobsPrivilege,
       mlNodeCount: getMlNodeCount,
       loadNewJobDefaults,
-      initPromise: initPromise(true)
+      initPromise: initPromise(false)
     }
   });
 
-
-
 import { JobsPage } from './jobs';
 
-module.directive('jobsPage', function ($injector) {
-  const reactDirective = $injector.get('reactDirective');
-
-  return reactDirective(JobsPage, undefined, { restrict: 'E' }, { });
+module.directive('jobsPage', function () {
+  return {
+    scope: {},
+    restrict: 'E',
+    link: (scope, element) => {
+      ReactDOM.render(
+        React.createElement(JobsPage),
+        element[0]
+      );
+    }
+  };
 });

x-pack/plugins/ml/public/jobs/jobs_list_new/index.js

@@ -5,4 +5,4 @@
  */
 
 
-import './jobs_directive';
+import './directive';