From 9a2035860646af6341a5349a0fc91cb2084eacff Mon Sep 17 00:00:00 2001 From: Quynh Nguyen <43350163+qn895@users.noreply.github.com> Date: Sun, 14 Feb 2021 15:26:14 -0600 Subject: [PATCH] [7.x] [ML] Add Create Data Frame Analytics card to Data Visualizer (#91011) (#91202) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../ml/common/constants/ml_url_generator.ts | 1 + .../ml/common/types/ml_url_generator.ts | 1 + .../data_recognizer/recognized_result.js | 4 +- .../index.ts | 2 +- .../link_card.tsx} | 2 +- .../actions_panel/actions_panel.tsx | 176 ++++++++++-------- .../jobs/new_job/pages/job_type/page.tsx | 6 +- .../ml_url_generator/ml_url_generator.ts | 1 + .../index_data_visualizer_actions_panel.ts | 1 + .../apps/ml/permissions/full_ml_access.ts | 1 + .../apps/ml/permissions/read_ml_access.ts | 1 + .../ml/data_visualizer_index_based.ts | 8 + .../index_data_visualizer_actions_panel.ts | 3 +- .../apps/ml/permissions/full_ml_access.ts | 1 + .../apps/ml/permissions/read_ml_access.ts | 1 + 15 files changed, 128 insertions(+), 81 deletions(-) rename x-pack/plugins/ml/public/application/components/{create_job_link_card => link_card}/index.ts (80%) rename x-pack/plugins/ml/public/application/components/{create_job_link_card/create_job_link_card.tsx => link_card/link_card.tsx} (97%) diff --git a/x-pack/plugins/ml/common/constants/ml_url_generator.ts b/x-pack/plugins/ml/common/constants/ml_url_generator.ts index ab2116df3e7cb..bb0684309201c 100644 --- a/x-pack/plugins/ml/common/constants/ml_url_generator.ts +++ b/x-pack/plugins/ml/common/constants/ml_url_generator.ts @@ -36,6 +36,7 @@ export const ML_PAGES = { */ DATA_VISUALIZER_INDEX_VIEWER: 'jobs/new_job/datavisualizer', ANOMALY_DETECTION_CREATE_JOB: `jobs/new_job`, + ANOMALY_DETECTION_CREATE_JOB_ADVANCED: `jobs/new_job/advanced`, ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE: `jobs/new_job/step/job_type`, ANOMALY_DETECTION_CREATE_JOB_SELECT_INDEX: `jobs/new_job/step/index_or_search`, SETTINGS: 'settings', diff --git a/x-pack/plugins/ml/common/types/ml_url_generator.ts b/x-pack/plugins/ml/common/types/ml_url_generator.ts index 216d4571804e9..766b714abcc98 100644 --- a/x-pack/plugins/ml/common/types/ml_url_generator.ts +++ b/x-pack/plugins/ml/common/types/ml_url_generator.ts @@ -64,6 +64,7 @@ export interface DataVisualizerFileBasedAppState extends Omit { @@ -34,7 +34,7 @@ export const RecognizedResult = ({ config, indexPattern, savedSearch }) => { return ( - = ({ +export const LinkCard: FC = ({ icon, iconAreaLabel, title, diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/actions_panel/actions_panel.tsx b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/actions_panel/actions_panel.tsx index 255dfcc21ccab..850367fc1a65a 100644 --- a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/actions_panel/actions_panel.tsx +++ b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/actions_panel/actions_panel.tsx @@ -9,24 +9,15 @@ import React, { FC, useState, useEffect } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { - EuiSpacer, - EuiText, - EuiTitle, - EuiFlexGroup, - EuiFlexItem, - EuiCard, - EuiIcon, -} from '@elastic/eui'; -import { Link } from 'react-router-dom'; -import { CreateJobLinkCard } from '../../../../components/create_job_link_card'; +import { EuiSpacer, EuiText, EuiTitle, EuiFlexGroup } from '@elastic/eui'; +import { LinkCard } from '../../../../components/link_card'; import { DataRecognizer } from '../../../../components/data_recognizer'; import { ML_PAGES } from '../../../../../../common/constants/ml_url_generator'; import { DISCOVER_APP_URL_GENERATOR, DiscoverUrlGeneratorState, } from '../../../../../../../../../src/plugins/discover/public'; -import { useMlKibana } from '../../../../contexts/kibana'; +import { useMlKibana, useMlLink } from '../../../../contexts/kibana'; import { isFullLicense } from '../../../../license'; import { checkPermission } from '../../../../capabilities/check_capabilities'; import { mlNodesAvailable } from '../../../../ml_nodes_check'; @@ -57,12 +48,18 @@ export const ActionsPanel: FC = ({ indexPattern, searchString, searchQuer setRecognizerResultsCount(recognizerResults.count); }, }; - const showCreateJob = - isFullLicense() && - checkPermission('canCreateJob') && - mlNodesAvailable() && - indexPattern.timeFieldName !== undefined; - const createJobLink = `/${ML_PAGES.ANOMALY_DETECTION_CREATE_JOB}/advanced?index=${indexPattern.id}`; + const mlAvailable = isFullLicense() && checkPermission('canCreateJob') && mlNodesAvailable(); + const showCreateAnomalyDetectionJob = mlAvailable && indexPattern.timeFieldName !== undefined; + + const createJobLink = useMlLink({ + page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_ADVANCED, + pageState: { index: indexPattern.id }, + }); + + const createDataFrameAnalyticsLink = useMlLink({ + page: ML_PAGES.DATA_FRAME_ANALYTICS_CREATE_JOB, + pageState: { index: indexPattern.id }, + }); useEffect(() => { let unmounted = false; @@ -95,6 +92,7 @@ export const ActionsPanel: FC = ({ indexPattern, searchString, searchQuer setDiscoverLink(discoverUrl); } }; + getDiscoverUrl(); return () => { unmounted = true; @@ -106,7 +104,7 @@ export const ActionsPanel: FC = ({ indexPattern, searchString, searchQuer // controls whether the recognizer section is ultimately displayed. return (
- {showCreateJob && ( + {mlAvailable && ( <>

@@ -117,50 +115,84 @@ export const ActionsPanel: FC = ({ indexPattern, searchString, searchQuer

- + + + )} + + )} + {mlAvailable && indexPattern.id !== undefined && createDataFrameAnalyticsLink && ( + <>

- - - + + } + data-test-subj="mlDataVisualizerCreateDataFrameAnalyticsCard" + /> )} @@ -176,25 +208,23 @@ export const ActionsPanel: FC = ({ indexPattern, searchString, searchQuer - - } - description={i18n.translate( - 'xpack.ml.datavisualizer.actionsPanel.viewIndexInDiscoverDescription', - { - defaultMessage: 'Explore index in Discover', - } - )} - title={ - + - + )} + title={ + + } + data-test-subj="mlDataVisualizerViewInDiscoverCard" + /> )}
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/job_type/page.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/job_type/page.tsx index e879256d53c76..782a23be87dec 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/job_type/page.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/job_type/page.tsx @@ -26,7 +26,7 @@ import { isSavedSearchSavedObject } from '../../../../../../common/types/kibana' import { DataRecognizer } from '../../../../components/data_recognizer'; import { addItemToRecentlyAccessed } from '../../../../util/recently_accessed'; import { timeBasedIndexCheck } from '../../../../util/index_utils'; -import { CreateJobLinkCard } from '../../../../components/create_job_link_card'; +import { LinkCard } from '../../../../components/link_card'; import { CategorizationIcon } from './categorization_job_icon'; import { ML_PAGES } from '../../../../../../common/constants/ml_url_generator'; import { useCreateAndNavigateToMlLink } from '../../../../contexts/kibana/use_create_url'; @@ -257,7 +257,7 @@ export const Page: FC = () => { {jobTypes.map(({ onClick, icon, title, description, id }) => ( - { - { diff --git a/x-pack/test/functional/apps/ml/permissions/read_ml_access.ts b/x-pack/test/functional/apps/ml/permissions/read_ml_access.ts index 69ae3961dfd4d..00cda88e0dc58 100644 --- a/x-pack/test/functional/apps/ml/permissions/read_ml_access.ts +++ b/x-pack/test/functional/apps/ml/permissions/read_ml_access.ts @@ -359,6 +359,7 @@ export default function ({ getService }: FtrProviderContext) { await ml.testExecution.logTestStep('should not display job cards'); await ml.dataVisualizerIndexBased.assertCreateAdvancedJobCardNotExists(); await ml.dataVisualizerIndexBased.assertRecognizerCardNotExists(ecExpectedModuleId); + await ml.dataVisualizerIndexBased.assertCreateDataFrameAnalyticsCardNotExists(); }); it('should display elements on File Data Visualizer page correctly', async () => { diff --git a/x-pack/test/functional/services/ml/data_visualizer_index_based.ts b/x-pack/test/functional/services/ml/data_visualizer_index_based.ts index d8ec8ed49f011..53b87042d48da 100644 --- a/x-pack/test/functional/services/ml/data_visualizer_index_based.ts +++ b/x-pack/test/functional/services/ml/data_visualizer_index_based.ts @@ -153,6 +153,14 @@ export function MachineLearningDataVisualizerIndexBasedProvider({ await testSubjects.clickWhenNotDisabled('mlDataVisualizerCreateAdvancedJobCard'); }, + async assertCreateDataFrameAnalyticsCardExists() { + await testSubjects.existOrFail('mlDataVisualizerCreateDataFrameAnalyticsCard'); + }, + + async assertCreateDataFrameAnalyticsCardNotExists() { + await testSubjects.missingOrFail('mlDataVisualizerCreateDataFrameAnalyticsCard'); + }, + async assertViewInDiscoverCardExists() { await testSubjects.existOrFail('mlDataVisualizerViewInDiscoverCard'); }, diff --git a/x-pack/test/functional_basic/apps/ml/data_visualizer/index_data_visualizer_actions_panel.ts b/x-pack/test/functional_basic/apps/ml/data_visualizer/index_data_visualizer_actions_panel.ts index 8a59d6ed3ce2a..642cc60e90441 100644 --- a/x-pack/test/functional_basic/apps/ml/data_visualizer/index_data_visualizer_actions_panel.ts +++ b/x-pack/test/functional_basic/apps/ml/data_visualizer/index_data_visualizer_actions_panel.ts @@ -41,8 +41,9 @@ export default function ({ getService }: FtrProviderContext) { }); it('navigates to Discover page', async () => { - await ml.testExecution.logTestStep('should not display create job card'); + await ml.testExecution.logTestStep('should not display create job cards'); await ml.dataVisualizerIndexBased.assertCreateAdvancedJobCardNotExists(); + await ml.dataVisualizerIndexBased.assertCreateDataFrameAnalyticsCardNotExists(); await ml.testExecution.logTestStep('displays the actions panel with view in Discover card'); await ml.dataVisualizerIndexBased.assertActionsPanelExists(); diff --git a/x-pack/test/functional_basic/apps/ml/permissions/full_ml_access.ts b/x-pack/test/functional_basic/apps/ml/permissions/full_ml_access.ts index b09270b1d0f78..9806c186914a3 100644 --- a/x-pack/test/functional_basic/apps/ml/permissions/full_ml_access.ts +++ b/x-pack/test/functional_basic/apps/ml/permissions/full_ml_access.ts @@ -134,6 +134,7 @@ export default function ({ getService }: FtrProviderContext) { await ml.testExecution.logTestStep('should not display job cards'); await ml.dataVisualizerIndexBased.assertCreateAdvancedJobCardNotExists(); await ml.dataVisualizerIndexBased.assertRecognizerCardNotExists(ecExpectedModuleId); + await ml.dataVisualizerIndexBased.assertCreateDataFrameAnalyticsCardNotExists(); }); it('should display elements on File Data Visualizer page correctly', async () => { diff --git a/x-pack/test/functional_basic/apps/ml/permissions/read_ml_access.ts b/x-pack/test/functional_basic/apps/ml/permissions/read_ml_access.ts index 14cc4e93b37ab..632922a353b33 100644 --- a/x-pack/test/functional_basic/apps/ml/permissions/read_ml_access.ts +++ b/x-pack/test/functional_basic/apps/ml/permissions/read_ml_access.ts @@ -134,6 +134,7 @@ export default function ({ getService }: FtrProviderContext) { await ml.testExecution.logTestStep('should not display job cards'); await ml.dataVisualizerIndexBased.assertCreateAdvancedJobCardNotExists(); await ml.dataVisualizerIndexBased.assertRecognizerCardNotExists(ecExpectedModuleId); + await ml.dataVisualizerIndexBased.assertCreateDataFrameAnalyticsCardNotExists(); }); it('should display elements on File Data Visualizer page correctly', async () => {