diff --git a/x-pack/plugins/enterprise_search/common/types/ml.ts b/x-pack/plugins/enterprise_search/common/types/ml.ts index 5723d4383d1ea..894ffa6f0726b 100644 --- a/x-pack/plugins/enterprise_search/common/types/ml.ts +++ b/x-pack/plugins/enterprise_search/common/types/ml.ts @@ -29,7 +29,8 @@ export interface MlModel { type: string; title: string; description?: string; - license?: string; + licenseType?: string; + licensePageUrl?: string; modelDetailsPageUrl?: string; deploymentState: MlModelDeploymentState; deploymentStateReason?: string; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.test.tsx index 411bb8947257c..54372fd4144b4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.test.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { EuiBadge, EuiText } from '@elastic/eui'; +import { EuiLink, EuiText } from '@elastic/eui'; import { MlModelDeploymentState } from '../../../../../../../common/types/ml'; import { TrainedModelHealth } from '../ml_model_health'; @@ -19,6 +19,7 @@ import { TrainedModelHealth } from '../ml_model_health'; import { DeployModelButton, getContextMenuPanel, + LicenseBadge, ModelSelectOption, ModelSelectOptionProps, StartModelButton, @@ -30,7 +31,8 @@ const DEFAULT_PROPS: ModelSelectOptionProps = { label: 'Model 1', title: 'Model 1', description: 'Model 1 description', - license: 'elastic', + licenseType: 'elastic', + licensePageUrl: 'https://licen.se', deploymentState: MlModelDeploymentState.NotDeployed, startTime: 0, targetAllocationCount: 0, @@ -47,16 +49,16 @@ describe('ModelSelectOption', () => { }); it('renders with license badge if present', () => { const wrapper = shallow(); - expect(wrapper.find(EuiBadge)).toHaveLength(1); + expect(wrapper.find(LicenseBadge)).toHaveLength(1); }); it('renders without license badge if not present', () => { const props = { ...DEFAULT_PROPS, - license: undefined, + licenseType: undefined, }; const wrapper = shallow(); - expect(wrapper.find(EuiBadge)).toHaveLength(0); + expect(wrapper.find(LicenseBadge)).toHaveLength(0); }); it('renders with description if present', () => { const wrapper = shallow(); @@ -93,11 +95,27 @@ describe('ModelSelectOption', () => { const wrapper = shallow(); expect(wrapper.find(TrainedModelHealth)).toHaveLength(1); }); +}); + +describe('LicenseBadge', () => { + it('renders with link if URL is present', () => { + const wrapper = shallow( + + ); + expect(wrapper.find(EuiLink)).toHaveLength(1); + }); + it('renders without link if URL is not present', () => { + const wrapper = shallow(); + expect(wrapper.find(EuiLink)).toHaveLength(0); + }); +}); - describe('getContextMenuPanel', () => { - it('gets model details link if URL is present', () => { - const panels = getContextMenuPanel('https://model.ai'); - expect(panels[0].items).toHaveLength(2); - }); +describe('getContextMenuPanel', () => { + it('gets model details link if URL is present', () => { + const panels = getContextMenuPanel('https://model.ai'); + expect(panels[0].items).toHaveLength(2); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.tsx index 3133dc6feb3bd..f59007403929b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/model_select_option.tsx @@ -18,6 +18,7 @@ import { EuiContextMenuPanelDescriptor, EuiFlexGroup, EuiFlexItem, + EuiLink, EuiPopover, EuiRadio, EuiText, @@ -142,11 +143,41 @@ export const ModelMenuPopover: React.FC<{ ); }; +export interface LicenseBadgeProps { + licenseType: string; + licensePageUrl?: string; +} + +export const LicenseBadge: React.FC = ({ licenseType, licensePageUrl }) => { + const licenseLabel = i18n.translate( + 'xpack.enterpriseSearch.content.indices.pipelines.modelSelectOption.licenseBadge.label', + { + defaultMessage: 'License: {licenseType}', + values: { + licenseType, + }, + } + ); + + return ( + + {licensePageUrl ? ( + + {licenseLabel} + + ) : ( + {licenseLabel} + )} + + ); +}; + export const ModelSelectOption: React.FC = ({ modelId, title, description, - license, + licenseType, + licensePageUrl, deploymentState, deploymentStateReason, modelDetailsPageUrl, @@ -184,24 +215,14 @@ export const ModelSelectOption: React.FC = ({ {modelId} - {(license || description) && ( + {(licenseType || description) && ( - {license && ( + {licenseType && ( {/* Wrap in a div to prevent the badge from growing to a whole row on mobile */} - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.pipelines.modelSelectOption.licenseBadge.label', - { - defaultMessage: 'License: {license}', - values: { - license, - }, - } - )} - + )} diff --git a/x-pack/plugins/enterprise_search/server/lib/ml/utils.ts b/x-pack/plugins/enterprise_search/server/lib/ml/utils.ts index cc81b78c3ff09..6be9cf5153e7d 100644 --- a/x-pack/plugins/enterprise_search/server/lib/ml/utils.ts +++ b/x-pack/plugins/enterprise_search/server/lib/ml/utils.ts @@ -81,7 +81,8 @@ export const E5_MODEL_PLACEHOLDER: MlModel = { defaultMessage: 'E5 is an NLP model that enables you to perform multi-lingual semantic search by using dense vector representations. This model performs best for non-English language documents and queries.', }), - license: 'MIT', + licenseType: 'mit', + licensePageUrl: 'https://huggingface.co/elastic/multilingual-e5-small-optimized', modelDetailsPageUrl: 'https://huggingface.co/intfloat/multilingual-e5-small', isPlaceholder: true, };
{licenseLabel}