Skip to content

Commit

Permalink
[8.6] [ML] Fix anomaly detection jobs list not refreshing (elastic#14…
Browse files Browse the repository at this point in the history 
…5757) (elastic#145971)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[ML] Fix anomaly detection jobs list not refreshing
(elastic#145757)](elastic#145757)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"James
Gowdy","email":"jgowdy@elastic.co"},"sourceCommit":{"committedDate":"2022-11-22T10:53:18Z","message":"[ML]
Fix anomaly detection jobs list not refreshing (elastic#145757)\n\nFixes
https://github.com/elastic/kibana/issues/144529\r\n\r\nRemoves the
`blockRefresh` prop which is no longer needed since the page\r\nrefresh
controls trigger a whole re-render of the `JobsPage`
component.","sha":"c5208695a9fc7c88de781500179864141ca99098","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix",":ml","Feature:Anomaly
Detection","v8.6.0","v8.7.0"],"number":145757,"url":"https://github.com/elastic/kibana/pull/145757","mergeCommit":{"message":"[ML]
Fix anomaly detection jobs list not refreshing (elastic#145757)\n\nFixes
https://github.com/elastic/kibana/issues/144529\r\n\r\nRemoves the
`blockRefresh` prop which is no longer needed since the page\r\nrefresh
controls trigger a whole re-render of the `JobsPage`
component.","sha":"c5208695a9fc7c88de781500179864141ca99098"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145757","number":145757,"mergeCommit":{"message":"[ML]
Fix anomaly detection jobs list not refreshing (elastic#145757)\n\nFixes
https://github.com/elastic/kibana/issues/144529\r\n\r\nRemoves the
`blockRefresh` prop which is no longer needed since the page\r\nrefresh
controls trigger a whole re-render of the `JobsPage`
component.","sha":"c5208695a9fc7c88de781500179864141ca99098"}}]}]
BACKPORT-->

Co-authored-by: James Gowdy <jgowdy@elastic.co>
  • Loading branch information
@kibanamachine @jgowdyelastic
kibanamachine and jgowdyelastic authored Nov 22, 2022
1 parent b52b34c commit 6dfa1dd
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 72 deletions.
134 changes: 68 additions & 66 deletions .../plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class JobsListView extends Component {

componentDidMount() {
this._isMounted = true;
this.refreshJobSummaryList(true);
this.refreshJobSummaryList();
this.openAutoStartDatafeedModal();
}

Expand Down Expand Up @@ -290,72 +290,74 @@ export class JobsListView extends Component {

onRefreshClick = () => {
this.setState({ isRefreshing: true });
this.refreshJobSummaryList(true);
this.refreshJobSummaryList();
};

isDoneRefreshing = () => {
this.setState({ isRefreshing: false });
};

async refreshJobSummaryList(forceRefresh = false) {
if (this._isMounted && (forceRefresh === true || this.props.blockRefresh !== true)) {
// Set loading to true for jobs_list table for initial job loading
if (this.state.loading === null) {
this.setState({ loading: true });
}
async refreshJobSummaryList() {
if (this._isMounted === false) {
return;
}

const expandedJobsIds = Object.keys(this.state.itemIdToExpandedRowMap);
try {
let jobsAwaitingNodeCount = 0;
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;

if (job.awaitingNodeAssignment === true) {
jobsAwaitingNodeCount++;
}
return job;
});
const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
this.setState(
{
jobsSummaryList,
filteredJobsSummaryList,
fullJobsList,
loading: false,
jobsAwaitingNodeCount,
},
() => {
this.refreshSelectedJobs();
}
);
// 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);
try {
let jobsAwaitingNodeCount = 0;
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;

if (job.awaitingNodeAssignment === true) {
jobsAwaitingNodeCount++;
}
return job;
});
const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
this.setState(
{
jobsSummaryList,
filteredJobsSummaryList,
fullJobsList,
loading: false,
jobsAwaitingNodeCount,
},
() => {
this.refreshSelectedJobs();
}
);

Object.keys(this.updateFunctions).forEach((j) => {
this.updateFunctions[j](fullJobsList[j]);
});

Object.keys(this.updateFunctions).forEach((j) => {
this.updateFunctions[j](fullJobsList[j]);
});

jobs.forEach((job) => {
if (job.blocked !== undefined && this.state.itemIdToExpandedRowMap[job.id]) {
this.toggleRow(job.id);
}
});

this.isDoneRefreshing();
if (jobsSummaryList.some((j) => j.blocked !== undefined)) {
// if there are some jobs in a deleting state, start polling for
// deleting jobs so we can update the jobs list once the
// deleting tasks are over
this.checkBlockingJobTasks(forceRefresh);
jobs.forEach((job) => {
if (job.blocked !== undefined && this.state.itemIdToExpandedRowMap[job.id]) {
this.toggleRow(job.id);
}
} catch (error) {
console.error(error);
this.setState({ loading: false });
});

this.isDoneRefreshing();
if (jobsSummaryList.some((j) => j.blocked !== undefined)) {
// if there are some jobs in a deleting state, start polling for
// deleting jobs so we can update the jobs list once the
// deleting tasks are over
this.checkBlockingJobTasks(true);
}
} catch (error) {
console.error(error);
this.setState({ loading: false });
}
}

Expand Down Expand Up @@ -432,7 +434,7 @@ export class JobsListView extends Component {
showResetJobModal={this.showResetJobModal}
showCreateAlertFlyout={this.showCreateAlertFlyout}
showStopDatafeedsConfirmModal={this.showStopDatafeedsConfirmModal}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
/>
<JobFilterBar
setFilters={this.setFilters}
Expand All @@ -452,7 +454,7 @@ export class JobsListView extends Component {
showCloseJobsConfirmModal={this.showCloseJobsConfirmModal}
showStartDatafeedModal={this.showStartDatafeedModal}
showStopDatafeedsConfirmModal={this.showStopDatafeedsConfirmModal}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
jobsViewState={this.props.jobsViewState}
onJobsViewStateUpdate={this.props.onJobsViewStateUpdate}
selectedJobsCount={this.state.selectedJobs.length}
Expand All @@ -466,40 +468,40 @@ export class JobsListView extends Component {
<EditJobFlyout
setShowFunction={this.setShowEditJobFlyoutFunction}
unsetShowFunction={this.unsetShowEditJobFlyoutFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
allJobIds={jobIds}
/>
<JobListDatafeedChartFlyout
setShowFunction={this.setShowDatafeedChartFlyoutFunction}
unsetShowFunction={this.unsetShowDatafeedChartFlyoutFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
/>
<StopDatafeedsConfirmModal
setShowFunction={this.setShowStopDatafeedsConfirmModalFunction}
unsetShowFunction={this.unsetShowStopDatafeedsConfirmModalFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
allJobIds={jobIds}
/>
<CloseJobsConfirmModal
setShowFunction={this.setShowCloseJobsConfirmModalFunction}
unsetShowFunction={this.unsetShowCloseJobsConfirmModalFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
/>
<DeleteJobModal
setShowFunction={this.setShowDeleteJobModalFunction}
unsetShowFunction={this.unsetShowDeleteJobModalFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
/>
<ResetJobModal
setShowFunction={this.setShowResetJobModalFunction}
unsetShowFunction={this.unsetShowResetJobModalFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
/>
<StartDatafeedModal
setShowFunction={this.setShowStartDatafeedModalFunction}
unsetShowFunction={this.unsetShowDeleteJobModalFunction}
getShowCreateAlertFlyoutFunction={this.getShowCreateAlertFlyoutFunction}
refreshJobs={() => this.refreshJobSummaryList(true)}
refreshJobs={() => this.refreshJobSummaryList()}
/>
<JobListMlAnomalyAlertFlyout
setShowFunction={this.setShowCreateAlertFlyoutFunction}
Expand Down
10 changes: 7 additions & 3 deletions x-pack/plugins/ml/public/application/jobs/jobs_list/jobs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { HeaderMenuPortal } from '../../components/header_menu_portal';
import { JobsActionMenu } from '../components/jobs_action_menu';

interface JobsPageProps {
blockRefresh?: boolean;
isMlEnabledInSpace?: boolean;
lastRefresh?: number;
}
Expand All @@ -31,7 +30,7 @@ export const getDefaultAnomalyDetectionJobsListState = (): ListingPageUrlState =
sortDirection: 'asc',
});

export const JobsPage: FC<JobsPageProps> = (props) => {
export const JobsPage: FC<JobsPageProps> = ({ isMlEnabledInSpace, lastRefresh }) => {
const [pageState, setPageState] = usePageUrlState(
ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
getDefaultAnomalyDetectionJobsListState()
Expand All @@ -48,7 +47,12 @@ export const JobsPage: FC<JobsPageProps> = (props) => {
<HeaderMenuPortal>
<JobsActionMenu />
</HeaderMenuPortal>
<JobsListView {...props} jobsViewState={pageState} onJobsViewStateUpdate={setPageState} />
<JobsListView
isMlEnabledInSpace={isMlEnabledInSpace}
lastRefresh={lastRefresh}
jobsViewState={pageState}
onJobsViewStateUpdate={setPageState}
/>
<HelpMenu docLink={helpLink} />
</>
);
Expand Down
4 changes: 1 addition & 3 deletions x-pack/plugins/ml/public/application/routing/routes/jobs_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,6 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
const refreshValue = refresh.value ?? 0;
const refreshPause = refresh.pause ?? true;

const blockRefresh = refreshValue === 0 || refreshPause === true;

useEffect(() => {
const refreshInterval =
refreshValue === 0 && refreshPause === true
Expand All @@ -75,7 +73,7 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
return (
<PageLoader context={context}>
<MlAnnotationUpdatesContext.Provider value={annotationUpdatesService}>
<JobsPage blockRefresh={blockRefresh} lastRefresh={lastRefresh} />
<JobsPage lastRefresh={lastRefresh} />
</MlAnnotationUpdatesContext.Provider>
</PageLoader>
);
Expand Down

0 comments on commit 6dfa1dd

Please sign in to comment.