[8.15] Modify the Inference Endpoints management page based on propos…

…ed recommendations (elastic#188783) (elastic#189219) # Backport This will backport the following commits from `main` to `8.15`: - [Modify the Inference Endpoints management page based on proposed recommendations (elastic#188783)](elastic#188783)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Saikat Sarkar <[email protected]>
lcawl · Jul 25, 2024 · 156ccfe · 156ccfe
1 parent b148078
commit 156ccfe
Show file tree

Hide file tree

Showing 15 changed files with 238 additions and 314 deletions.
diff --git a/x-pack/plugins/search_inference_endpoints/common/doc_links.ts b/x-pack/plugins/search_inference_endpoints/common/doc_links.ts
@@ -8,14 +8,16 @@
 import { DocLinks } from '@kbn/doc-links';
 
 class InferenceEndpointsDocLinks {
-  public nlpImportModel: string = '';
-  public supportedNlpModels: string = '';
+  public createInferenceEndpoint: string = '';
+  public semanticSearchElser: string = '';
+  public semanticSearchE5: string = '';
 
   constructor() {}
 
   setDocLinks(newDocLinks: DocLinks) {
-    this.nlpImportModel = newDocLinks.ml.nlpImportModel;
-    this.supportedNlpModels = newDocLinks.ml.supportedNlpModels;
+    this.createInferenceEndpoint = newDocLinks.enterpriseSearch.inferenceApiCreate;
+    this.semanticSearchElser = newDocLinks.enterpriseSearch.elser;
+    this.semanticSearchE5 = newDocLinks.enterpriseSearch.e5Model;
   }
 }
 

diff --git a/x-pack/plugins/search_inference_endpoints/common/translations.ts b/x-pack/plugins/search_inference_endpoints/common/translations.ts
@@ -21,29 +21,22 @@ export const CANCEL = i18n.translate('xpack.searchInferenceEndpoints.cancel', {
 export const MANAGE_INFERENCE_ENDPOINTS_LABEL = i18n.translate(
   'xpack.searchInferenceEndpoints.allInferenceEndpoints.description',
   {
-    defaultMessage: 'Manage your inference endpoints.',
-  }
-);
-
-export const ADD_ENDPOINT_LABEL = i18n.translate(
-  'xpack.searchInferenceEndpoints.newInferenceEndpointButtonLabel',
-  {
-    defaultMessage: 'Add endpoint',
+    defaultMessage: 'View and manage your deployed inference endpoints.',
   }
 );
 
 export const CREATE_FIRST_INFERENCE_ENDPOINT_DESCRIPTION = i18n.translate(
   'xpack.searchInferenceEndpoints.addEmptyPrompt.createFirstInferenceEndpointDescription',
   {
     defaultMessage:
-      'Connect to your third-party model provider to create an inference endpoint for semantic search.',
+      "Inference endpoints enable you to perform inference tasks using NLP models provided by third-party services or Elastic's built-in models like ELSER and E5. Set up tasks such as text embedding, completions, reranking, and more by using the Create Inference API.",
   }
 );
 
 export const START_WITH_PREPARED_ENDPOINTS_LABEL = i18n.translate(
   'xpack.searchInferenceEndpoints.addEmptyPrompt.startWithPreparedEndpointsLabel',
   {
-    defaultMessage: 'Get started quickly with our prepared endpoints:',
+    defaultMessage: 'Learn more about built-in NLP models:',
   }
 );
 
@@ -54,23 +47,50 @@ export const ELSER_TITLE = i18n.translate(
   }
 );
 
+export const LEARN_HOW_TO_CREATE_INFERENCE_ENDPOINTS_LINK = i18n.translate(
+  'xpack.searchInferenceEndpoints.addEmptyPrompt.learnHowToCreateInferenceEndpoints',
+  {
+    defaultMessage: 'Learn how to create inference endpoints',
+  }
+);
+
+export const SEMANTIC_SEARCH_WITH_ELSER_LINK = i18n.translate(
+  'xpack.searchInferenceEndpoints.addEmptyPrompt.semanticSearchWithElser',
+  {
+    defaultMessage: 'Semantic search with ELSER',
+  }
+);
+
+export const SEMANTIC_SEARCH_WITH_E5_LINK = i18n.translate(
+  'xpack.searchInferenceEndpoints.addEmptyPrompt.semanticSearchWithE5',
+  {
+    defaultMessage: 'Semantic search with E5 Multilingual',
+  }
+);
+
+export const VIEW_YOUR_MODELS_LINK = i18n.translate(
+  'xpack.searchInferenceEndpoints.addEmptyPrompt.viewYourModels',
+  {
+    defaultMessage: 'View your models',
+  }
+);
+
 export const ELSER_DESCRIPTION = i18n.translate(
   'xpack.searchInferenceEndpoints.addEmptyPrompt.elserDescription',
   {
-    defaultMessage:
-      'ELSER is a sparse vector NLP model trained by Elastic for semantic search. Recommended for English language.',
+    defaultMessage: "ELSER is Elastic's sparse vector NLP model for semantic search in English.",
   }
 );
 
 export const E5_TITLE = i18n.translate('xpack.searchInferenceEndpoints.addEmptyPrompt.e5Title', {
-  defaultMessage: 'Multilingual E5',
+  defaultMessage: 'E5 Multilingual',
 });
 
 export const E5_DESCRIPTION = i18n.translate(
   'xpack.searchInferenceEndpoints.addEmptyPrompt.e5Description',
   {
     defaultMessage:
-      'E5 is a dense vector NLP model that enables you to perform multi-lingual semantic search.',
+      'E5 is a third-party NLP model that enables you to perform multilingual semantic search by using dense vector representations.',
   }
 );
 

diff --git a/...nents/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.test.tsx b/...nents/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.test.tsx
@@ -9,6 +9,16 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { EndpointInfo } from './endpoint_info';
 
+jest.mock('@kbn/ml-trained-models-utils', () => ({
+  ...jest.requireActual('@kbn/ml-trained-models-utils'),
+  ELASTIC_MODEL_DEFINITIONS: {
+    'model-with-mit-license': {
+      license: 'MIT',
+      licenseUrl: 'https://abc.com',
+    },
+  },
+}));
+
 describe('RenderEndpoint component tests', () => {
   describe('with cohere service', () => {
     const mockEndpoint = {
@@ -254,4 +264,40 @@ describe('RenderEndpoint component tests', () => {
       expect(screen.queryByText('Rate limit:')).not.toBeInTheDocument();
     });
   });
+
+  describe('for MIT licensed models', () => {
+    const mockEndpointWithMitLicensedModel = {
+      model_id: 'model-123',
+      service: 'elasticsearch',
+      service_settings: {
+        num_allocations: 5,
+        num_threads: 10,
+        model_id: 'model-with-mit-license',
+      },
+    } as any;
+
+    it('renders the MIT license badge if the model is eligible', () => {
+      render(<EndpointInfo endpoint={mockEndpointWithMitLicensedModel} />);
+
+      const mitBadge = screen.getByTestId('mit-license-badge');
+      expect(mitBadge).toBeInTheDocument();
+      expect(mitBadge).toHaveAttribute('href', 'https://abc.com');
+    });
+
+    it('does not render the MIT license badge if the model is not eligible', () => {
+      const mockEndpointWithNonMitLicensedModel = {
+        model_id: 'model-123',
+        service: 'elasticsearch',
+        service_settings: {
+          num_allocations: 5,
+          num_threads: 10,
+          model_id: 'model-without-mit-license',
+        },
+      } as any;
+
+      render(<EndpointInfo endpoint={mockEndpointWithNonMitLicensedModel} />);
+
+      expect(screen.queryByTestId('mit-license-badge')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/...components/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.tsx b/...components/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.tsx
@@ -6,8 +6,11 @@
  */
 
 import React from 'react';
-import { InferenceAPIConfigResponse } from '@kbn/ml-trained-models-utils';
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import {
+  InferenceAPIConfigResponse,
+  ELASTIC_MODEL_DEFINITIONS,
+} from '@kbn/ml-trained-models-utils';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiBadge } from '@elastic/eui';
 import { ServiceProviderKeys } from '../../types';
 import { ModelBadge } from './model_badge';
 import * as i18n from './translations';
@@ -38,13 +41,31 @@ export const EndpointModelInfo: React.FC<EndpointInfoProps> = ({ endpoint }) =>
       ? serviceSettings.model
       : undefined;
 
+  const isEligibleForMITBadge = modelId && ELASTIC_MODEL_DEFINITIONS[modelId]?.license === 'MIT';
+
   return (
-    <EuiFlexGroup gutterSize="s" alignItems="center">
+    <EuiFlexGroup gutterSize="s" wrap alignItems="center">
       {modelId && (
         <EuiFlexItem grow={false}>
           <ModelBadge model={modelId} />
         </EuiFlexItem>
       )}
+
+      {isEligibleForMITBadge && (
+        <EuiFlexItem grow={false}>
+          <EuiBadge
+            color="hollow"
+            iconType="popout"
+            iconSide="right"
+            href={ELASTIC_MODEL_DEFINITIONS[modelId].licenseUrl ?? ''}
+            target="_blank"
+            data-test-subj={'mit-license-badge'}
+          >
+            {i18n.MIT_LICENSE}
+          </EuiBadge>
+        </EuiFlexItem>
+      )}
+
       <EuiFlexItem grow={false}>
         <EuiText color="subdued" size="xs">
           {endpointModelAtrributes(endpoint)}

diff --git a/...c/components/all_inference_endpoints/render_table_columns/render_endpoint/translations.ts b/...c/components/all_inference_endpoints/render_table_columns/render_endpoint/translations.ts
@@ -18,3 +18,10 @@ export const ALLOCATIONS = (numAllocations: number) =>
     defaultMessage: 'Allocations: {numAllocations}',
     values: { numAllocations },
   });
+
+export const MIT_LICENSE = i18n.translate(
+  'xpack.searchInferenceEndpoints.elasticsearch.mitLicense',
+  {
+    defaultMessage: 'License: MIT',
+  }
+);
diff --git a/...ndpoints/public/components/all_inference_endpoints/render_table_columns/table_columns.tsx b/...ndpoints/public/components/all_inference_endpoints/render_table_columns/table_columns.tsx
@@ -57,7 +57,7 @@ export const useTableColumns = () => {
         return null;
       },
       sortable: false,
-      width: '265px',
+      width: '185px',
     },
     {
       field: 'type',
@@ -70,7 +70,7 @@ export const useTableColumns = () => {
         return null;
       },
       sortable: false,
-      width: '265px',
+      width: '185px',
     },
     actions,
   ];

diff --git a/...ugins/search_inference_endpoints/public/components/empty_prompt/add_empty_prompt.test.tsx b/...ugins/search_inference_endpoints/public/components/empty_prompt/add_empty_prompt.test.tsx
@@ -6,28 +6,42 @@
  */
 
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { AddEmptyPrompt } from './add_empty_prompt';
 
 import { renderReactTestingLibraryWithI18n as render } from '@kbn/test-jest-helpers';
 import '@testing-library/jest-dom';
-const setIsInferenceFlyoutVisibleMock = jest.fn();
 
 describe('When empty prompt is loaded', () => {
   beforeEach(() => {
-    render(<AddEmptyPrompt setIsInferenceFlyoutVisible={setIsInferenceFlyoutVisibleMock} />);
+    render(<AddEmptyPrompt />);
   });
 
   it('should display the description for creation of the first inference endpoint', () => {
     expect(
       screen.getByText(
-        /Connect to your third-party model provider to create an inference endpoint for semantic search./
+        /Inference endpoints enable you to perform inference tasks using NLP models provided by third-party services/
       )
     ).toBeInTheDocument();
   });
 
-  it('calls setIsInferenceFlyoutVisible when the addInferenceEndpoint button is clicked', async () => {
-    fireEvent.click(screen.getByTestId('addEndpointButtonForEmptyPrompt'));
-    expect(setIsInferenceFlyoutVisibleMock).toHaveBeenCalled();
+  it('should have a learn-more link', () => {
+    const learnMoreLink = screen.getByTestId('learn-how-to-create-inference-endpoints');
+    expect(learnMoreLink).toBeInTheDocument();
+  });
+
+  it('should have a view-your-models link', () => {
+    const learnMoreLink = screen.getByTestId('view-your-models');
+    expect(learnMoreLink).toBeInTheDocument();
+  });
+
+  it('should have a semantic-search-with-elser link', () => {
+    const learnMoreLink = screen.getByTestId('semantic-search-with-elser');
+    expect(learnMoreLink).toBeInTheDocument();
+  });
+
+  it('should have a semantic-search-with-e5 link', () => {
+    const learnMoreLink = screen.getByTestId('semantic-search-with-e5');
+    expect(learnMoreLink).toBeInTheDocument();
   });
 });