Skip to content

Commit 7bd5ad5

Browse files
darnautovdarnautov
committed
[ML] move page title, prettier formatting
1 parent c4603cd commit 7bd5ad5

File tree

2 files changed

+97
-89
lines changed

2 files changed

+97
-89
lines changed

‎x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js‎

Lines changed: 94 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
import React, { Component } from 'react';
88
import { timefilter } from 'ui/timefilter';
9-
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
9+
import { FormattedMessage } from '@kbn/i18n/react';
10+
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
1011

1112
import { ml } from 'plugins/ml/services/ml_api_service';
1213
import { checkForAutoStartDatafeed, filterJobs, loadFullJob } from '../utils';
@@ -31,8 +32,7 @@ import {
3132
MINIMUM_REFRESH_INTERVAL_MS,
3233
} from '../../../../../common/constants/jobs_list';
3334

34-
35-
let jobsRefreshInterval = null;
35+
let jobsRefreshInterval = null;
3636
let deletingJobsRefreshTimeout = null;
3737

3838
// 'isManagementTable' bool prop to determine when to configure table for use in Kibana management page
@@ -67,8 +67,8 @@ export class JobsListView extends Component {
6767
if (this.props.isManagementTable === true) {
6868
this.refreshJobSummaryList(true);
6969
} else {
70-
// The advanced job wizard is still angularjs based and triggers
71-
// broadcast events which it expects the jobs list to be subscribed to.
70+
// The advanced job wizard is still angularjs based and triggers
71+
// broadcast events which it expects the jobs list to be subscribed to.
7272
this.props.angularWrapperScope.$on('jobsUpdated', () => {
7373
this.refreshJobSummaryList(true);
7474
});
@@ -105,7 +105,7 @@ export class JobsListView extends Component {
105105
// so switch it on and set the interval to 30s
106106
timefilter.setRefreshInterval({
107107
pause: false,
108-
value: DEFAULT_REFRESH_INTERVAL_MS
108+
value: DEFAULT_REFRESH_INTERVAL_MS,
109109
});
110110
}
111111

@@ -115,7 +115,7 @@ export class JobsListView extends Component {
115115
initAutoRefreshUpdate() {
116116
// update the interval if it changes
117117
this.refreshIntervalSubscription = timefilter.getRefreshIntervalUpdate$().subscribe({
118-
next: () => this.setAutoRefresh()
118+
next: () => this.setAutoRefresh(),
119119
});
120120
}
121121

@@ -134,7 +134,7 @@ export class JobsListView extends Component {
134134
this.clearRefreshInterval();
135135
if (interval >= MINIMUM_REFRESH_INTERVAL_MS) {
136136
this.blockRefresh = false;
137-
jobsRefreshInterval = setInterval(() => (this.refreshJobSummaryList()), interval);
137+
jobsRefreshInterval = setInterval(() => this.refreshJobSummaryList(), interval);
138138
}
139139
}
140140

@@ -150,13 +150,12 @@ export class JobsListView extends Component {
150150
}
151151
}
152152

153-
toggleRow = (jobId) => {
153+
toggleRow = jobId => {
154154
if (this.state.itemIdToExpandedRowMap[jobId]) {
155155
const itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap };
156156
delete itemIdToExpandedRowMap[jobId];
157157
this.setState({ itemIdToExpandedRowMap });
158158
} else {
159-
160159
let itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap };
161160

162161
if (this.state.fullJobsList[jobId] !== undefined) {
@@ -182,7 +181,7 @@ export class JobsListView extends Component {
182181

183182
this.setState({ itemIdToExpandedRowMap }, () => {
184183
loadFullJob(jobId)
185-
.then((job) => {
184+
.then(job => {
186185
const fullJobsList = { ...this.state.fullJobsList };
187186
fullJobsList[jobId] = job;
188187
this.setState({ fullJobsList }, () => {
@@ -204,54 +203,54 @@ export class JobsListView extends Component {
204203
this.setState({ itemIdToExpandedRowMap });
205204
});
206205
})
207-
.catch((error) => {
206+
.catch(error => {
208207
console.error(error);
209208
});
210209
});
211210
}
212-
}
211+
};
213212

214213
addUpdateFunction = (id, f) => {
215214
this.updateFunctions[id] = f;
216-
}
217-
removeUpdateFunction = (id) => {
215+
};
216+
removeUpdateFunction = id => {
218217
delete this.updateFunctions[id];
219-
}
218+
};
220219

221-
setShowEditJobFlyoutFunction = (func) => {
220+
setShowEditJobFlyoutFunction = func => {
222221
this.showEditJobFlyout = func;
223-
}
222+
};
224223
unsetShowEditJobFlyoutFunction = () => {
225224
this.showEditJobFlyout = () => {};
226-
}
225+
};
227226

228-
setShowDeleteJobModalFunction = (func) => {
227+
setShowDeleteJobModalFunction = func => {
229228
this.showDeleteJobModal = func;
230-
}
229+
};
231230
unsetShowDeleteJobModalFunction = () => {
232231
this.showDeleteJobModal = () => {};
233-
}
232+
};
234233

235-
setShowStartDatafeedModalFunction = (func) => {
234+
setShowStartDatafeedModalFunction = func => {
236235
this.showStartDatafeedModal = func;
237-
}
236+
};
238237
unsetShowStartDatafeedModalFunction = () => {
239238
this.showStartDatafeedModal = () => {};
240-
}
239+
};
241240

242-
setShowCreateWatchFlyoutFunction = (func) => {
241+
setShowCreateWatchFlyoutFunction = func => {
243242
this.showCreateWatchFlyout = func;
244-
}
243+
};
245244
unsetShowCreateWatchFlyoutFunction = () => {
246245
this.showCreateWatchFlyout = () => {};
247-
}
246+
};
248247
getShowCreateWatchFlyoutFunction = () => {
249248
return this.showCreateWatchFlyout;
250-
}
249+
};
251250

252-
selectJobChange = (selectedJobs) => {
251+
selectJobChange = selectedJobs => {
253252
this.setState({ selectedJobs });
254-
}
253+
};
255254

256255
refreshSelectedJobs() {
257256
const selectedJobsIds = this.state.selectedJobs.map(j => j.id);
@@ -266,24 +265,23 @@ export class JobsListView extends Component {
266265
this.setState({ selectedJobs });
267266
}
268267

269-
setFilters = (filterClauses) => {
268+
setFilters = filterClauses => {
270269
const filteredJobsSummaryList = filterJobs(this.state.jobsSummaryList, filterClauses);
271270
this.setState({ filteredJobsSummaryList, filterClauses }, () => {
272271
this.refreshSelectedJobs();
273272
});
274-
}
273+
};
275274

276275
onRefreshClick = () => {
277276
this.setState({ isRefreshing: true });
278277
this.refreshJobSummaryList(true);
279-
}
278+
};
280279
isDoneRefreshing = () => {
281280
this.setState({ isRefreshing: false });
282-
}
281+
};
283282

284283
async refreshJobSummaryList(forceRefresh = false) {
285284
if (forceRefresh === true || this.blockRefresh === false) {
286-
287285
// Set loading to true for jobs_list table for initial job loading
288286
if (this.state.loading === null) {
289287
this.setState({ loading: true });
@@ -293,24 +291,27 @@ export class JobsListView extends Component {
293291
try {
294292
const jobs = await ml.jobs.jobsSummary(expandedJobsIds);
295293
const fullJobsList = {};
296-
const jobsSummaryList = jobs.map((job) => {
294+
const jobsSummaryList = jobs.map(job => {
297295
if (job.fullJob !== undefined) {
298296
fullJobsList[job.id] = job.fullJob;
299297
delete job.fullJob;
300298
}
301-
job.latestTimestampSortValue = (job.latestTimestampMs || 0);
299+
job.latestTimestampSortValue = job.latestTimestampMs || 0;
302300
return job;
303301
});
304302
const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
305-
this.setState({ jobsSummaryList, filteredJobsSummaryList, fullJobsList, loading: false }, () => {
306-
this.refreshSelectedJobs();
307-
});
303+
this.setState(
304+
{ jobsSummaryList, filteredJobsSummaryList, fullJobsList, loading: false },
305+
() => {
306+
this.refreshSelectedJobs();
307+
}
308+
);
308309

309-
Object.keys(this.updateFunctions).forEach((j) => {
310+
Object.keys(this.updateFunctions).forEach(j => {
310311
this.updateFunctions[j].setState({ job: fullJobsList[j] });
311312
});
312313

313-
jobs.forEach((job) => {
314+
jobs.forEach(job => {
314315
if (job.deleting && this.state.itemIdToExpandedRowMap[job.id]) {
315316
this.toggleRow(job.id);
316317
}
@@ -333,7 +334,8 @@ export class JobsListView extends Component {
333334
async checkDeletingJobTasks(forceRefresh = false) {
334335
const { jobIds: taskJobIds } = await ml.jobs.deletingJobTasks();
335336

336-
const taskListHasChanged = (isEqual(taskJobIds.sort(), this.state.deletingJobIds.sort()) === false);
337+
const taskListHasChanged =
338+
isEqual(taskJobIds.sort(), this.state.deletingJobIds.sort()) === false;
337339

338340
this.setState({
339341
deletingJobIds: taskJobIds,
@@ -354,7 +356,13 @@ export class JobsListView extends Component {
354356
}
355357

356358
renderManagementJobsListComponents() {
357-
const { loading, itemIdToExpandedRowMap, filteredJobsSummaryList, fullJobsList, selectedJobs } = this.state;
359+
const {
360+
loading,
361+
itemIdToExpandedRowMap,
362+
filteredJobsSummaryList,
363+
fullJobsList,
364+
selectedJobs,
365+
} = this.state;
358366
return (
359367
<div className="managementJobsList">
360368
<div>
@@ -433,41 +441,51 @@ export class JobsListView extends Component {
433441
const { isManagementTable } = this.props;
434442

435443
return (
436-
<React.Fragment>
437-
<div className="job-management" data-test-subj="ml-jobs-list">
438-
439-
<NodeAvailableWarning />
440-
441-
<UpgradeWarning />
442-
443-
<EuiFlexGroup justifyContent="spaceBetween">
444-
<EuiFlexItem grow={false}>
445-
<JobStatsBar
446-
jobsSummaryList={jobsSummaryList}
447-
/>
448-
</EuiFlexItem>
449-
<EuiFlexItem grow={false}>
450-
<EuiFlexGroup alignItems="center" gutterSize="s">
451-
<EuiFlexItem grow={false}>
452-
<RefreshJobsListButton
453-
onRefreshClick={this.onRefreshClick}
454-
isRefreshing={isRefreshing}
455-
/>
456-
</EuiFlexItem>
457-
{!isManagementTable &&
444+
<div className="job-management" data-test-subj="ml-jobs-list">
445+
{!isManagementTable && (
446+
<>
447+
<EuiTitle>
448+
<h1>
449+
<FormattedMessage
450+
id="xpack.ml.jobsList.title"
451+
defaultMessage="Anomaly detection jobs"
452+
/>
453+
</h1>
454+
</EuiTitle>
455+
<EuiSpacer size="m" />
456+
</>
457+
)}
458+
459+
<NodeAvailableWarning />
460+
461+
<UpgradeWarning />
462+
463+
<EuiFlexGroup justifyContent="spaceBetween">
464+
<EuiFlexItem grow={false}>
465+
<JobStatsBar jobsSummaryList={jobsSummaryList} />
466+
</EuiFlexItem>
467+
<EuiFlexItem grow={false}>
468+
<EuiFlexGroup alignItems="center" gutterSize="s">
469+
<EuiFlexItem grow={false}>
470+
<RefreshJobsListButton
471+
onRefreshClick={this.onRefreshClick}
472+
isRefreshing={isRefreshing}
473+
/>
474+
</EuiFlexItem>
475+
{!isManagementTable && (
458476
<EuiFlexItem grow={false}>
459477
<NewJobButton />
460-
</EuiFlexItem>}
461-
</EuiFlexGroup>
462-
</EuiFlexItem>
463-
</EuiFlexGroup>
478+
</EuiFlexItem>
479+
)}
480+
</EuiFlexGroup>
481+
</EuiFlexItem>
482+
</EuiFlexGroup>
464483

465-
<EuiSpacer size="s" />
484+
<EuiSpacer size="s" />
466485

467-
{ !isManagementTable && this.renderJobsListComponents() }
468-
{ isManagementTable && this.renderManagementJobsListComponents() }
469-
</ div>
470-
</React.Fragment>
486+
{!isManagementTable && this.renderJobsListComponents()}
487+
{isManagementTable && this.renderManagementJobsListComponents()}
488+
</div>
471489
);
472490
}
473491
}

‎x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,15 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React, { Fragment } from 'react';
8-
import { EuiTitle } from '@elastic/eui';
9-
import { FormattedMessage } from '@kbn/i18n/react';
7+
import React from 'react';
108

119
import { NavigationMenu } from '../../components/navigation_menu';
1210

1311
import { JobsListView } from './components/jobs_list_view';
1412

1513
export const JobsPage = (props) => (
16-
<Fragment>
14+
<>
1715
<NavigationMenu tabId="jobs" />
18-
<EuiTitle style={{ padding: '16px 16px 0 16px' }}>
19-
<h1>
20-
<FormattedMessage
21-
id="xpack.ml.jobsList.title"
22-
defaultMessage="Anomaly detection jobs"
23-
/>
24-
</h1>
25-
</EuiTitle>
2616
<JobsListView {...props} />
27-
</Fragment>
17+
</>
2818
);

0 commit comments

Comments
 (0)