[8.x] [ML] Data frame analytics: Fix screen flickering in Results Explorer and Analytics Map when no jobs are available (#193890) (#194527)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Data frame analytics: Fix screen flickering in Results Explorer
and Analytics Map when no jobs are available
(#193890)](https://github.com/elastic/kibana/pull/193890)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"92210485+rbrtj@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-01T08:32:37Z","message":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are available (#193890)\n\n##
Summary\r\n\r\nFix for
[#138193](https://github.com/elastic/kibana/issues/138193)\r\nI didn't
find any relation between user permissions and the issue.\r\nThe error
mentioned in the issue doesn't come from the ML package and
is\r\nunrelated to the problem.\r\nThe view was visible due to the
initial state of `jobsExist`. Added\r\nadditional loading state to
prevent screen flickering.\r\n\r\nDisabled automatic display of the job
selection flyout when no jobs
are\r\navailable.\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672","sha":"a2e995a9e735a50f54a314197ab1c2812a8416fb","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Feature:Data
Frame
Analytics","v9.0.0","Team:ML","v8.16.0","backport:version","v8.15.3"],"title":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are
available","number":193890,"url":"https://github.com/elastic/kibana/pull/193890","mergeCommit":{"message":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are available (#193890)\n\n##
Summary\r\n\r\nFix for
[#138193](https://github.com/elastic/kibana/issues/138193)\r\nI didn't
find any relation between user permissions and the issue.\r\nThe error
mentioned in the issue doesn't come from the ML package and
is\r\nunrelated to the problem.\r\nThe view was visible due to the
initial state of `jobsExist`. Added\r\nadditional loading state to
prevent screen flickering.\r\n\r\nDisabled automatic display of the job
selection flyout when no jobs
are\r\navailable.\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672","sha":"a2e995a9e735a50f54a314197ab1c2812a8416fb"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.15"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193890","number":193890,"mergeCommit":{"message":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are available (#193890)\n\n##
Summary\r\n\r\nFix for
[#138193](https://github.com/elastic/kibana/issues/138193)\r\nI didn't
find any relation between user permissions and the issue.\r\nThe error
mentioned in the issue doesn't come from the ML package and
is\r\nunrelated to the problem.\r\nThe view was visible due to the
initial state of `jobsExist`. Added\r\nadditional loading state to
prevent screen flickering.\r\n\r\nDisabled automatic display of the job
selection flyout when no jobs
are\r\navailable.\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672","sha":"a2e995a9e735a50f54a314197ab1c2812a8416fb"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.15","label":"v8.15.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-10-01 20:29:48 +10:00 committed by GitHub
parent 71b9f0faf7
commit f14c419d51
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 6 deletions

View file

@ -32,8 +32,9 @@ export const Page: FC<{
analysisType: DataFrameAnalysisConfigType;
}> = ({ jobId, analysisType }) => {
const [analyticsId, setAnalyticsId] = useState<AnalyticsSelectorIds | undefined>();
const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(!jobId);
const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(false);
const [jobsExist, setJobsExist] = useState(true);
const [isLoadingJobsExist, setIsLoadingJobsExist] = useState(false);
const {
services: { docLinks },
} = useMlKibana();
@ -49,12 +50,17 @@ export const Page: FC<{
const [, setGlobalState] = useUrlState('_g');
const checkJobsExist = async () => {
setIsLoadingJobsExist(true);
try {
const { count } = await getDataFrameAnalytics(undefined, undefined, 0);
setJobsExist(count > 0);
const hasAnalyticsJobs = count > 0;
setJobsExist(hasAnalyticsJobs);
setIsIdSelectorFlyoutVisible(hasAnalyticsJobs && !jobId);
} catch (e) {
// Swallow the error and just show the empty table in the analytics id selector
console.error('Error checking analytics jobs exist', e); // eslint-disable-line no-console
} finally {
setIsLoadingJobsExist(false);
}
};
@ -98,6 +104,10 @@ export const Page: FC<{
);
const getEmptyState = () => {
if (isLoadingJobsExist) {
return null;
}
if (jobsExist === false) {
return <AnalyticsEmptyPrompt />;
}

View file

@ -29,10 +29,9 @@ export const Page: FC = () => {
const modelId = globalState?.ml?.modelId;
const [isLoading, setIsLoading] = useState(false);
const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(
!jobId && !modelId
);
const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(false);
const [jobsExist, setJobsExist] = useState(true);
const [isLoadingJobsExist, setIsLoadingJobsExist] = useState(false);
const { refresh } = useRefreshAnalyticsList({ isLoading: setIsLoading });
const setAnalyticsId = useCallback(
@ -56,12 +55,17 @@ export const Page: FC = () => {
const helpLink = docLinks.links.ml.dataFrameAnalytics;
const checkJobsExist = async () => {
setIsLoadingJobsExist(true);
try {
const { count } = await getDataFrameAnalytics(undefined, undefined, 0);
setJobsExist(count > 0);
const hasAnalyticsJobs = count > 0;
setJobsExist(hasAnalyticsJobs);
setIsIdSelectorFlyoutVisible(hasAnalyticsJobs && !jobId && !modelId);
} catch (e) {
// Swallow the error and just show the empty table in the analytics id selector
console.error('Error checking analytics jobs exist', e); // eslint-disable-line no-console
} finally {
setIsLoadingJobsExist(false);
}
};
@ -71,6 +75,10 @@ export const Page: FC = () => {
}, []);
const getEmptyState = () => {
if (isLoadingJobsExist) {
return null;
}
if (jobsExist === false) {
return <AnalyticsEmptyPrompt />;
}