* Show table loading on initial jobs load * Use async/await and try/catch to catch job load failure
This commit is contained in:
parent
72f71ef468
commit
ffbfb9de22
|
@ -98,7 +98,7 @@ class JobsListUI extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { intl } = this.props;
|
const { intl, loading } = this.props;
|
||||||
const selectionControls = {
|
const selectionControls = {
|
||||||
selectable: () => true,
|
selectable: () => true,
|
||||||
selectableMessage: (selectable) => (!selectable) ? intl.formatMessage({
|
selectableMessage: (selectable) => (!selectable) ? intl.formatMessage({
|
||||||
|
@ -253,6 +253,7 @@ class JobsListUI extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiBasicTable
|
<EuiBasicTable
|
||||||
|
loading={loading === true}
|
||||||
itemId="id"
|
itemId="id"
|
||||||
className={`jobs-list-table ${selectedJobsClass}`}
|
className={`jobs-list-table ${selectedJobsClass}`}
|
||||||
items={pageOfItems}
|
items={pageOfItems}
|
||||||
|
@ -279,6 +280,10 @@ JobsListUI.propTypes = {
|
||||||
showStartDatafeedModal: PropTypes.func.isRequired,
|
showStartDatafeedModal: PropTypes.func.isRequired,
|
||||||
refreshJobs: PropTypes.func.isRequired,
|
refreshJobs: PropTypes.func.isRequired,
|
||||||
selectedJobsCount: PropTypes.number.isRequired,
|
selectedJobsCount: PropTypes.number.isRequired,
|
||||||
|
loading: PropTypes.bool,
|
||||||
|
};
|
||||||
|
JobsListUI.defaultProps = {
|
||||||
|
loading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const JobsList = injectI18n(JobsListUI);
|
export const JobsList = injectI18n(JobsListUI);
|
||||||
|
|
|
@ -42,6 +42,7 @@ export class JobsListView extends Component {
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
isRefreshing: false,
|
isRefreshing: false,
|
||||||
|
loading: null,
|
||||||
jobsSummaryList: [],
|
jobsSummaryList: [],
|
||||||
filteredJobsSummaryList: [],
|
filteredJobsSummaryList: [],
|
||||||
fullJobsList: {},
|
fullJobsList: {},
|
||||||
|
@ -245,39 +246,46 @@ export class JobsListView extends Component {
|
||||||
this.setState({ isRefreshing: false });
|
this.setState({ isRefreshing: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
refreshJobSummaryList(forceRefresh = false) {
|
async refreshJobSummaryList(forceRefresh = false) {
|
||||||
if (forceRefresh === true || this.blockRefresh === 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);
|
const expandedJobsIds = Object.keys(this.state.itemIdToExpandedRowMap);
|
||||||
ml.jobs.jobsSummary(expandedJobsIds)
|
try {
|
||||||
.then((jobs) => {
|
const jobs = await ml.jobs.jobsSummary(expandedJobsIds);
|
||||||
const fullJobsList = {};
|
const fullJobsList = {};
|
||||||
const jobsSummaryList = jobs.map((job) => {
|
const jobsSummaryList = jobs.map((job) => {
|
||||||
if (job.fullJob !== undefined) {
|
if (job.fullJob !== undefined) {
|
||||||
fullJobsList[job.id] = job.fullJob;
|
fullJobsList[job.id] = job.fullJob;
|
||||||
delete job.fullJob;
|
delete job.fullJob;
|
||||||
}
|
}
|
||||||
job.latestTimestampSortValue = (job.latestTimestampMs || 0);
|
job.latestTimestampSortValue = (job.latestTimestampMs || 0);
|
||||||
return job;
|
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);
|
|
||||||
});
|
});
|
||||||
|
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() {
|
renderJobsListComponents() {
|
||||||
const jobIds = this.state.jobsSummaryList.map(j => j.id);
|
const { loading, jobsSummaryList } = this.state;
|
||||||
|
const jobIds = jobsSummaryList.map(j => j.id);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="actions-bar">
|
<div className="actions-bar">
|
||||||
|
@ -301,6 +309,7 @@ export class JobsListView extends Component {
|
||||||
showStartDatafeedModal={this.showStartDatafeedModal}
|
showStartDatafeedModal={this.showStartDatafeedModal}
|
||||||
refreshJobs={() => this.refreshJobSummaryList(true)}
|
refreshJobs={() => this.refreshJobSummaryList(true)}
|
||||||
selectedJobsCount={this.state.selectedJobs.length}
|
selectedJobsCount={this.state.selectedJobs.length}
|
||||||
|
loading={loading}
|
||||||
/>
|
/>
|
||||||
<EditJobFlyout
|
<EditJobFlyout
|
||||||
setShowFunction={this.setShowEditJobFlyoutFunction}
|
setShowFunction={this.setShowEditJobFlyoutFunction}
|
||||||
|
|
Loading…
Reference in a new issue