From ef2f6ced9d31606dccba4b985ee5c35287efcb54 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Thu, 7 Dec 2023 09:33:52 -0500 Subject: [PATCH 01/12] Align text size --- .../search_index/pipelines/inference_pipeline_card.tsx | 5 +++-- .../pipelines/ml_inference/pipeline_select_option.tsx | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index dcc4b2a0cad8f..373a6d7646880 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -18,7 +18,6 @@ import { EuiPanel, EuiPopover, EuiText, - EuiTextColor, EuiTitle, EuiToolTip, } from '@elastic/eui'; @@ -86,7 +85,9 @@ export const InferencePipelineCard: React.FC = (pipeline) => - {modelId} + + {modelId} + diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx index deea940cfe68d..06c111c6e32c8 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx @@ -45,8 +45,8 @@ export const PipelineSelectOption: React.FC = ({ pipe // TODO: Add model state & pipeline info link. Make sure to check mobile rendering when doing this! - -
{pipeline.pipelineName}
+ +

{pipeline.pipelineName}

 From 122002e3556d1ba4d80c7596d5550c71cf67b1f4 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Thu, 7 Dec 2023 14:42:32 -0500 Subject: [PATCH 02/12] center-align model ID --- .../pipelines/ml_inference/pipeline_select_option.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx index 06c111c6e32c8..63d2500a48b35 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx @@ -50,16 +50,16 @@ export const PipelineSelectOption: React.FC = ({ pipe - + {modelIdDisplay} {pipeline.modelType.length > 0 && ( {/* Wrap in a div to prevent the badge from growing to a whole row on mobile*/} -
+ -
+ )} From e7a8166cb42cc57a948ca701a41a2aabe7bd61ad Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Thu, 7 Dec 2023 16:19:20 -0500 Subject: [PATCH 03/12] Adjusted inference pipeline card mobile formatting --- .../pipelines/inference_pipeline_card.tsx | 15 ++++++--------- .../ml_inference/pipeline_select_option.tsx | 2 +- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index 373a6d7646880..610ca440b57b5 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -20,6 +20,7 @@ import { EuiText, EuiTitle, EuiToolTip, + useIsWithinMaxBreakpoint, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -45,6 +46,7 @@ export const InferencePipelineCard: React.FC = (pipeline) => const [isPopOverOpen, setIsPopOverOpen] = useState(false); const [showConfirmDelete, setShowConfirmDelete] = useState(false); const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic); + const isSmallScreen = useIsWithinMaxBreakpoint('s'); const showConfirmDeleteModal = () => { setShowConfirmDelete(true); setIsPopOverOpen(false); @@ -68,18 +70,13 @@ export const InferencePipelineCard: React.FC = (pipeline) => return ( - + - - - -

{pipelineName ?? modelTitle}

- - - - + +

{pipelineName ?? modelTitle}

+ {modelTitle && ( diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx index 63d2500a48b35..49e00f30c12d4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx @@ -56,7 +56,7 @@ export const PipelineSelectOption: React.FC = ({ pipe {pipeline.modelType.length > 0 && ( - {/* Wrap in a div to prevent the badge from growing to a whole row on mobile*/} + {/* Wrap in a span to prevent the badge from growing to a whole row on mobile*/} From 4f195474e8d5c13d84c4e552224db58e6b212654 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Thu, 7 Dec 2023 17:09:45 -0500 Subject: [PATCH 04/12] Refactored inference pipeline card to move popover code into a separate function --- .../pipelines/inference_pipeline_card.tsx | 253 ++++++++++-------- 1 file changed, 134 insertions(+), 119 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index 610ca440b57b5..53141664218d3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -39,21 +39,18 @@ import { TrainedModelHealth } from './ml_model_health'; import { MLModelTypeBadge } from './ml_model_type_badge'; import { PipelinesLogic } from './pipelines_logic'; -export const InferencePipelineCard: React.FC = (pipeline) => { +const TrainedModelHealthPopover: React.FC = (pipeline) => { const { http } = useValues(HttpLogic); const { indexName } = useValues(IndexNameLogic); const { ingestionMethod } = useValues(IndexViewLogic); + + const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic); + const [isPopOverOpen, setIsPopOverOpen] = useState(false); const [showConfirmDelete, setShowConfirmDelete] = useState(false); - const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic); - const isSmallScreen = useIsWithinMaxBreakpoint('s'); - const showConfirmDeleteModal = () => { - setShowConfirmDelete(true); - setIsPopOverOpen(false); - }; - const { modelId, pipelineName, types: modelTypes } = pipeline; - const modelType = getMLType(modelTypes); - const modelTitle = getModelDisplayTitle(modelType); + + const { pipelineName } = pipeline; + const actionButton = ( = (pipeline) => ); + const showConfirmDeleteModal = () => { + setShowConfirmDelete(true); + setIsPopOverOpen(false); + }; + return ( - - - - - - -

{pipelineName ?? modelTitle}

- - - {modelTitle && ( - - - - - {modelId} - - - - - - - - - - )} - - - - setIsPopOverOpen(false)} - > - {pipeline.modelState === TrainedModelState.NotDeployed && ( - - - - - - )} - - -
- - {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', { - defaultMessage: 'View in Stack Management', - })} - -
- - -
- { - detachMlPipeline({ indexName, pipelineName }); - setIsPopOverOpen(false); - }} - > - {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.detach', { - defaultMessage: 'Detach pipeline', - })} - -
- - -
- -
- - - - - + <> + setIsPopOverOpen(false)} + > + {pipeline.modelState === TrainedModelState.NotDeployed && ( + + + + + + )} + + +
+ + {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', { + defaultMessage: 'View in Stack Management', + })} + +
+ + +
+ { + detachMlPipeline({ indexName, pipelineName }); + setIsPopOverOpen(false); + }} + > + {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.detach', { + defaultMessage: 'Detach pipeline', + })} + +
+ + +
+ +
+ + + {showConfirmDelete && ( = (pipeline) => )} + + ); +}; + +export const InferencePipelineCard: React.FC = (pipeline) => { + const { modelId, pipelineName, types: modelTypes } = pipeline; + const modelType = getMLType(modelTypes); + const modelTitle = getModelDisplayTitle(modelType); + const isSmallScreen = useIsWithinMaxBreakpoint('s'); + + return ( + + + + + + +

{pipelineName ?? modelTitle}

+ + + {modelTitle && ( + + + + + {modelId} + + + + + + + + + + )} + + + + + + ); }; From 77c63ce82fe78800b39184eb5e0f82954d308a89 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Fri, 8 Dec 2023 08:06:30 -0500 Subject: [PATCH 05/12] Made "Fix issue in Trained Models" button match style of other popover buttons --- .../pipelines/inference_pipeline_card.tsx | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index 53141664218d3..ec1a785adcc22 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -11,7 +11,6 @@ import { useActions, useValues } from 'kea'; import { EuiButtonEmpty, - EuiButtonIcon, EuiConfirmModal, EuiFlexGroup, EuiFlexItem, @@ -19,7 +18,6 @@ import { EuiPopover, EuiText, EuiTitle, - EuiToolTip, useIsWithinMaxBreakpoint, } from '@elastic/eui'; @@ -77,32 +75,28 @@ const TrainedModelHealthPopover: React.FC = (pipeline) => { isOpen={isPopOverOpen} closePopover={() => setIsPopOverOpen(false)} > - {pipeline.modelState === TrainedModelState.NotDeployed && ( - - - - - - )} + {pipeline.modelState === TrainedModelState.NotDeployed && ( + +
+ + {i18n.translate( + 'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink', + { + defaultMessage: 'Fix issue in Trained Models', + } + )} + +
+ + )}
Date: Fri, 8 Dec 2023 08:09:49 -0500 Subject: [PATCH 06/12] Added TODO --- .../search_index/pipelines/inference_pipeline_card.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index ec1a785adcc22..fa77fae7a567c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -192,6 +192,7 @@ export const InferencePipelineCard: React.FC = (pipeline) => const modelTitle = getModelDisplayTitle(modelType); const isSmallScreen = useIsWithinMaxBreakpoint('s'); + // TODO: Handle redacted model ID return ( From a4e1569f7d6cde1985e0b57df8bd5211d3c29cdc Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Fri, 8 Dec 2023 09:15:59 -0500 Subject: [PATCH 07/12] Fixed inference pipeline card tests --- .../inference_pipeline_card.test.tsx | 29 ++++++++++--------- .../pipelines/inference_pipeline_card.tsx | 2 +- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx index 970b1488010c0..cab1a06055087 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx @@ -11,11 +11,11 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { EuiButtonIcon, EuiPanel, EuiTextColor, EuiTitle } from '@elastic/eui'; +import { EuiButtonEmpty, EuiPanel, EuiText, EuiTitle } from '@elastic/eui'; import { InferencePipeline, TrainedModelState } from '../../../../../../common/types/pipelines'; -import { InferencePipelineCard } from './inference_pipeline_card'; +import { InferencePipelineCard, TrainedModelHealthPopover } from './inference_pipeline_card'; import { MLModelTypeBadge } from './ml_model_type_badge'; export const DEFAULT_VALUES: InferencePipeline = { @@ -40,7 +40,7 @@ describe('InferencePipelineCard', () => { it('renders pipeline as title', () => { const wrapper = shallow(); expect(wrapper.find(EuiTitle)).toHaveLength(1); - const title = wrapper.find(EuiTitle).dive(); + const title = wrapper.find(EuiTitle).at(0).children(); expect(title.text()).toBe(DEFAULT_VALUES.pipelineName); }); it('renders pipeline as title with unknown model type', () => { @@ -51,14 +51,14 @@ describe('InferencePipelineCard', () => { const wrapper = shallow(); expect(wrapper.find(EuiTitle)).toHaveLength(1); // does not render subtitle - expect(wrapper.find(EuiTextColor)).toHaveLength(0); - const title = wrapper.find(EuiTitle).dive(); + expect(wrapper.find(EuiText)).toHaveLength(0); + const title = wrapper.find(EuiTitle).at(0).children(); expect(title.text()).toBe(DEFAULT_VALUES.pipelineName); }); it('renders model ID as subtitle', () => { const wrapper = shallow(); - expect(wrapper.find(EuiTextColor)).toHaveLength(1); - const subtitle = wrapper.find(EuiTextColor).dive(); + expect(wrapper.find(EuiText)).toHaveLength(1); + const subtitle = wrapper.find(EuiText).at(0).children(); expect(subtitle.text()).toBe(DEFAULT_VALUES.modelId); }); it('renders model type as badge', () => { @@ -67,20 +67,21 @@ describe('InferencePipelineCard', () => { const badge = wrapper.find(MLModelTypeBadge).render(); expect(badge.text()).toBe('ner'); }); - it('renders fix button when model not deployed', () => { + it('popover renders fix button when model not deployed', () => { const values = { ...DEFAULT_VALUES, modelState: TrainedModelState.NotDeployed, }; - const wrapper = shallow(); - expect(wrapper.find(EuiButtonIcon)).toHaveLength(1); + const wrapper = shallow(); + expect(wrapper.find(EuiButtonEmpty)).toHaveLength(3); - const fixButton = wrapper.find(EuiButtonIcon); + const fixButton = wrapper.find(EuiButtonEmpty).at(0); expect(fixButton.prop('iconType')).toBe('wrench'); expect(fixButton.prop('href')).toBe('/app/ml/trained_models'); + expect(fixButton.children().text()).toBe('Fix issue in Trained Models'); }); - it('does not render fix button when model deployed', () => { - const wrapper = shallow(); - expect(wrapper.find(EuiButtonIcon)).toHaveLength(0); + it('popover does not render fix button when model deployed', () => { + const wrapper = shallow(); + expect(wrapper.find(EuiButtonEmpty)).toHaveLength(2); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index fa77fae7a567c..875a910ba922d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -37,7 +37,7 @@ import { TrainedModelHealth } from './ml_model_health'; import { MLModelTypeBadge } from './ml_model_type_badge'; import { PipelinesLogic } from './pipelines_logic'; -const TrainedModelHealthPopover: React.FC = (pipeline) => { +export const TrainedModelHealthPopover: React.FC = (pipeline) => { const { http } = useValues(HttpLogic); const { indexName } = useValues(IndexNameLogic); const { ingestionMethod } = useValues(IndexViewLogic); From 95a05063e44709d0b5043fb16d8bcdf7fdf15838 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Fri, 8 Dec 2023 13:49:10 -0500 Subject: [PATCH 08/12] Fix keyboard accessibility for EuiButtonEmpty components that act as links --- .../inference_pipeline_card.test.tsx | 1 - .../pipelines/inference_pipeline_card.tsx | 19 +++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx index cab1a06055087..23c2384c6f51c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx @@ -77,7 +77,6 @@ describe('InferencePipelineCard', () => { const fixButton = wrapper.find(EuiButtonEmpty).at(0); expect(fixButton.prop('iconType')).toBe('wrench'); - expect(fixButton.prop('href')).toBe('/app/ml/trained_models'); expect(fixButton.children().text()).toBe('Fix issue in Trained Models'); }); it('popover does not render fix button when model deployed', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index 875a910ba922d..a0ea08e36d4b3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -25,7 +25,7 @@ import { i18n } from '@kbn/i18n'; import { InferencePipeline, TrainedModelState } from '../../../../../../common/types/pipelines'; import { CANCEL_BUTTON_LABEL, DELETE_BUTTON_LABEL } from '../../../../shared/constants'; -import { HttpLogic } from '../../../../shared/http'; +import { KibanaLogic } from '../../../../shared/kibana'; import { ML_MANAGE_TRAINED_MODELS_PATH } from '../../../routes'; import { getMLType, getModelDisplayTitle } from '../../shared/ml_inference/utils'; import { IndexNameLogic } from '../index_name_logic'; @@ -38,7 +38,7 @@ import { MLModelTypeBadge } from './ml_model_type_badge'; import { PipelinesLogic } from './pipelines_logic'; export const TrainedModelHealthPopover: React.FC = (pipeline) => { - const { http } = useValues(HttpLogic); + const { navigateToUrl } = useValues(KibanaLogic); const { indexName } = useValues(IndexNameLogic); const { ingestionMethod } = useValues(IndexViewLogic); @@ -85,7 +85,11 @@ export const TrainedModelHealthPopover: React.FC = (pipeline) flush="both" iconType="wrench" color="text" - href={http.basePath.prepend(ML_MANAGE_TRAINED_MODELS_PATH)} + onClick={() => { + navigateToUrl(ML_MANAGE_TRAINED_MODELS_PATH, { + shouldNotCreateHref: true, + }); + }} > {i18n.translate( 'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink', @@ -105,9 +109,12 @@ export const TrainedModelHealthPopover: React.FC = (pipeline) flush="both" iconType="eye" color="text" - href={http.basePath.prepend( - `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}` - )} + onClick={() => { + navigateToUrl( + `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}`, + { shouldNotCreateHref: true } + ); + }} > {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', { defaultMessage: 'View in Stack Management', From 90c4585a7f64cee5302de4f27661ca02d51d1e49 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Fri, 8 Dec 2023 13:54:29 -0500 Subject: [PATCH 09/12] Change div to span --- .../pipelines/inference_pipeline_card.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index a0ea08e36d4b3..ed6080af2abdf 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -78,7 +78,7 @@ export const TrainedModelHealthPopover: React.FC = (pipeline) {pipeline.modelState === TrainedModelState.NotDeployed && ( -
+ = (pipeline) } )} -
+ )} -
+ = (pipeline) defaultMessage: 'View in Stack Management', })} -
+ -
+ = (pipeline) defaultMessage: 'Detach pipeline', })} -
+ -
+ -
+ From e8f094c7ec885dc439727903a62461c591dd2af5 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Fri, 8 Dec 2023 13:55:33 -0500 Subject: [PATCH 10/12] Removed TODO --- .../search_index/pipelines/inference_pipeline_card.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index ed6080af2abdf..a9422a65f5aaf 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -199,7 +199,6 @@ export const InferencePipelineCard: React.FC = (pipeline) => const modelTitle = getModelDisplayTitle(modelType); const isSmallScreen = useIsWithinMaxBreakpoint('s'); - // TODO: Handle redacted model ID return ( From 3a3ba93c392d9de6ed83e99c0290268114d0e262 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Fri, 8 Dec 2023 14:00:16 -0500 Subject: [PATCH 11/12] Moved popover tests --- .../pipelines/inference_pipeline_card.test.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx index 23c2384c6f51c..f6adea30b019f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx @@ -67,6 +67,13 @@ describe('InferencePipelineCard', () => { const badge = wrapper.find(MLModelTypeBadge).render(); expect(badge.text()).toBe('ner'); }); +}); + +describe('TrainedModelHealthPopover', () => { + beforeEach(() => { + jest.clearAllMocks(); + setMockValues(mockValues); + }); it('popover renders fix button when model not deployed', () => { const values = { ...DEFAULT_VALUES, From fb1a34bdb450add825eddb66da8af57966d6b168 Mon Sep 17 00:00:00 2001 From: Mike Pellegrini Date: Mon, 11 Dec 2023 08:57:59 -0500 Subject: [PATCH 12/12] Revert "Fix keyboard accessibility for EuiButtonEmpty components that act as links" This reverts commit 95a05063e44709d0b5043fb16d8bcdf7fdf15838. --- .../inference_pipeline_card.test.tsx | 1 + .../pipelines/inference_pipeline_card.tsx | 19 ++++++------------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx index f6adea30b019f..62ac53004a773 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx @@ -84,6 +84,7 @@ describe('TrainedModelHealthPopover', () => { const fixButton = wrapper.find(EuiButtonEmpty).at(0); expect(fixButton.prop('iconType')).toBe('wrench'); + expect(fixButton.prop('href')).toBe('/app/ml/trained_models'); expect(fixButton.children().text()).toBe('Fix issue in Trained Models'); }); it('popover does not render fix button when model deployed', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx index a9422a65f5aaf..342d05c398878 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx @@ -25,7 +25,7 @@ import { i18n } from '@kbn/i18n'; import { InferencePipeline, TrainedModelState } from '../../../../../../common/types/pipelines'; import { CANCEL_BUTTON_LABEL, DELETE_BUTTON_LABEL } from '../../../../shared/constants'; -import { KibanaLogic } from '../../../../shared/kibana'; +import { HttpLogic } from '../../../../shared/http'; import { ML_MANAGE_TRAINED_MODELS_PATH } from '../../../routes'; import { getMLType, getModelDisplayTitle } from '../../shared/ml_inference/utils'; import { IndexNameLogic } from '../index_name_logic'; @@ -38,7 +38,7 @@ import { MLModelTypeBadge } from './ml_model_type_badge'; import { PipelinesLogic } from './pipelines_logic'; export const TrainedModelHealthPopover: React.FC = (pipeline) => { - const { navigateToUrl } = useValues(KibanaLogic); + const { http } = useValues(HttpLogic); const { indexName } = useValues(IndexNameLogic); const { ingestionMethod } = useValues(IndexViewLogic); @@ -85,11 +85,7 @@ export const TrainedModelHealthPopover: React.FC = (pipeline) flush="both" iconType="wrench" color="text" - onClick={() => { - navigateToUrl(ML_MANAGE_TRAINED_MODELS_PATH, { - shouldNotCreateHref: true, - }); - }} + href={http.basePath.prepend(ML_MANAGE_TRAINED_MODELS_PATH)} > {i18n.translate( 'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink', @@ -109,12 +105,9 @@ export const TrainedModelHealthPopover: React.FC = (pipeline) flush="both" iconType="eye" color="text" - onClick={() => { - navigateToUrl( - `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}`, - { shouldNotCreateHref: true } - ); - }} + href={http.basePath.prepend( + `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}` + )} > {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', { defaultMessage: 'View in Stack Management',