maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Ensure loading indicator is present on initial jobs load (#27151) (#27231)

Browse source 
* Show table loading on initial jobs load

* Use async/await and try/catch to catch job load failure
This commit is contained in:
Melissa Alvarez 2018-12-14 11:57:29 -06:00 committed by GitHub
parent 72f71ef468
commit ffbfb9de22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
View file

@ -98,7 +98,7 @@ class JobsListUI extends Component {
}
render() {
const { intl } = this.props;
const { intl, loading } = this.props;
const selectionControls = {
selectable: () => true,
selectableMessage: (selectable) => (!selectable) ? intl.formatMessage({
@ -253,6 +253,7 @@ class JobsListUI extends Component {
return (
<EuiBasicTable
loading={loading === true}
itemId="id"
className={`jobs-list-table ${selectedJobsClass}`}
items={pageOfItems}
@ -279,6 +280,10 @@ JobsListUI.propTypes = {
showStartDatafeedModal: PropTypes.func.isRequired,
refreshJobs: PropTypes.func.isRequired,
selectedJobsCount: PropTypes.number.isRequired,
loading: PropTypes.bool,
};
JobsListUI.defaultProps = {
loading: false,
};
export const JobsList = injectI18n(JobsListUI);

61
x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
View file

@ -42,6 +42,7 @@ export class JobsListView extends Component {
this.state = {
isRefreshing: false,
loading: null,
jobsSummaryList: [],
filteredJobsSummaryList: [],
fullJobsList: {},
@ -245,39 +246,46 @@ export class JobsListView extends Component {
this.setState({ isRefreshing: false });
}
refreshJobSummaryList(forceRefresh = false) {
async refreshJobSummaryList(forceRefresh = false) {
if (forceRefresh === true || this.blockRefresh === false) {
// Set loading to true for jobs_list table for initial job loading
if (this.state.loading === null) {
this.setState({ loading: true });
}
const expandedJobsIds = Object.keys(this.state.itemIdToExpandedRowMap);
ml.jobs.jobsSummary(expandedJobsIds)
.then((jobs) => {
const fullJobsList = {};
const jobsSummaryList = jobs.map((job) => {
if (job.fullJob !== undefined) {
fullJobsList[job.id] = job.fullJob;
delete job.fullJob;
}
job.latestTimestampSortValue = (job.latestTimestampMs || 0);
return job;
});
const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
this.setState({ jobsSummaryList, filteredJobsSummaryList, fullJobsList }, () => {
this.refreshSelectedJobs();
});
Object.keys(this.updateFunctions).forEach((j) => {
this.updateFunctions[j].setState({ job: fullJobsList[j] });
});
this.isDoneRefreshing();
})
.catch((error) => {
console.error(error);
try {
const jobs = await ml.jobs.jobsSummary(expandedJobsIds);
const fullJobsList = {};
const jobsSummaryList = jobs.map((job) => {
if (job.fullJob !== undefined) {
fullJobsList[job.id] = job.fullJob;
delete job.fullJob;
}
job.latestTimestampSortValue = (job.latestTimestampMs || 0);
return job;
});
const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
this.setState({ jobsSummaryList, filteredJobsSummaryList, fullJobsList, loading: false }, () => {
this.refreshSelectedJobs();
});
Object.keys(this.updateFunctions).forEach((j) => {
this.updateFunctions[j].setState({ job: fullJobsList[j] });
});
this.isDoneRefreshing();
} catch (error) {
console.error(error);
this.setState({ loading: false });
}
}
}
renderJobsListComponents() {
const jobIds = this.state.jobsSummaryList.map(j => j.id);
const { loading, jobsSummaryList } = this.state;
const jobIds = jobsSummaryList.map(j => j.id);
return (
<div>
<div className="actions-bar">
@ -301,6 +309,7 @@ export class JobsListView extends Component {
showStartDatafeedModal={this.showStartDatafeedModal}
refreshJobs={() => this.refreshJobSummaryList(true)}
selectedJobsCount={this.state.selectedJobs.length}
loading={loading}
/>
<EditJobFlyout
setShowFunction={this.setShowEditJobFlyoutFunction}