From c0a1e7e0530f246b2ac0c8dafe55858fcf362cdf Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 16 Jul 2018 15:11:36 +0100 Subject: [PATCH] [ML] Jobs list bug fixes --- .../delete_job_modal/delete_job_modal.js | 3 ++- .../components/job_details/job_details.js | 2 +- .../jobs_list_view/jobs_list_view.js | 9 ++++--- .../jobs_stats_bar/jobs_stats_bar.js | 2 +- .../jobs_stats_bar/styles/main.less | 2 +- .../start_datafeed_modal.js | 4 ++- .../{jobs_directive.js => directive.js} | 25 ++++++++++++------- .../ml/public/jobs/jobs_list_new/index.js | 2 +- .../ml/public/jobs/jobs_list_new/jobs.html | 9 ------- 9 files changed, 31 insertions(+), 27 deletions(-) rename x-pack/plugins/ml/public/jobs/jobs_list_new/{jobs_directive.js => directive.js} (72%) delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_new/jobs.html diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/delete_job_modal/delete_job_modal.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/delete_job_modal/delete_job_modal.js index f6bd4a853caca..fd148bd37ea9a 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/delete_job_modal/delete_job_modal.js +++ b/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) &&
@@ -107,7 +108,7 @@ export class DeleteJobModal extends Component { {(this.state.deleting === false) && -

Are you sure you want to delete {(this.state.jobs.length > 1) ? 'these jobs' : 'this job'}

+

Are you sure you want to delete {(this.state.jobs.length > 1) ? 'these jobs' : 'this job'}?

{(this.state.jobs.length > 1) &&

Deleting multiple jobs can be time consuming. They will be deleted in the background and may not disappear from the jobs list instantly diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/job_details/job_details.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/job_details/job_details.js index 452907f39f2cc..7d6fcff7e4299 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/job_details/job_details.js +++ b/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, }; diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js index c8ca2742d4327..89a1e7874ebda 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js +++ b/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,6 +120,7 @@ export class JobsListView extends Component { jobId={jobId} job={this.state.fullJobsList[jobId]} addYourself={this.addUpdateFunction} + removeYourself={this.removeUpdateFunction} /> ); } else { @@ -126,6 +128,7 @@ export class JobsListView extends Component { ); } diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/jobs_stats_bar.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/jobs_stats_bar.js index fc4f6db0469cf..7f43d65bd1596 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/jobs_stats_bar.js +++ b/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 ( -

+
{ stats.filter(s => (s.show)).map(s => ) } diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/styles/main.less index 86b6bb7e5d5f5..8af32911e05fe 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_stats_bar/styles/main.less +++ b/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; diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/start_datafeed_modal/start_datafeed_modal.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/start_datafeed_modal/start_datafeed_modal.js index 6e04716fad68f..0a7a83ae21d95 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/start_datafeed_modal/start_datafeed_modal.js +++ b/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 { > - 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} diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/jobs_directive.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/directive.js similarity index 72% rename from x-pack/plugins/ml/public/jobs/jobs_list_new/jobs_directive.js rename to x-pack/plugins/ml/public/jobs/jobs_list_new/directive.js index 890ae11ce0c95..146f44b6df370 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/jobs_directive.js +++ b/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 = ``; + 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] + ); + } + }; }); diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/index.js index 00187985d4b30..3839017291326 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_new/index.js @@ -5,4 +5,4 @@ */ -import './jobs_directive'; +import './directive'; diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/jobs.html b/x-pack/plugins/ml/public/jobs/jobs_list_new/jobs.html deleted file mode 100644 index d27717782219d..0000000000000 --- a/x-pack/plugins/ml/public/jobs/jobs_list_new/jobs.html +++ /dev/null @@ -1,9 +0,0 @@ - - -
- - {{js.label}}: {{js.value}} - -
- -