[8.16] [Search: Inference Management UI] Adding restriction on deleti…

…ng preconfigured endpoints (elastic#196580) (elastic#197378) # Backport This will backport the following commits from `main` to `8.16`: - [[Search: Inference Management UI] Adding restriction on deleting preconfigured endpoints (elastic#196580)](elastic#196580)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Samiul Monir <[email protected]>
kibanamachine · Oct 23, 2024 · da9808c · da9808c
1 parent c329375
commit da9808c
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 10 deletions.
diff --git a/...plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts b/...plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts
@@ -34,3 +34,8 @@ export const DEFAULT_INFERENCE_ENDPOINTS_TABLE_STATE: AllInferenceEndpointsTable
 };
 
 export const PIPELINE_URL = 'ingest/ingest_pipelines';
+
+export const PRECONFIGURED_ENDPOINTS = {
+  ELSER: '.elser-2',
+  E5: '.multi-e5-small',
+};
diff --git a/...ints/render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/index.tsx b/...ints/render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/index.tsx
@@ -75,6 +75,7 @@ export const ConfirmDeleteEndpointModal: React.FC<ConfirmDeleteEndpointModalProp
       onConfirm={onConfirm}
       title={i18n.DELETE_TITLE}
       confirmButtonDisabled={deleteDisabled}
+      data-test-subj="deleteModalForInferenceUI"
     >
       <EuiFlexGroup gutterSize="l" direction="column">
         <EuiFlexItem grow={false}>{i18n.CONFIRM_DELETE_WARNING}</EuiFlexItem>

diff --git a/...rence_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx b/...rence_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+import { DeleteAction } from './delete_action';
+import { InferenceEndpointUI } from '../../../../types';
+
+describe('Delete Action', () => {
+  const mockProvider = {
+    inference_id: 'my-hugging-face',
+    service: 'hugging_face',
+    service_settings: {
+      api_key: 'aaaa',
+      url: 'https://dummy.huggingface.com',
+    },
+    task_settings: {},
+  } as any;
+
+  const mockItem: InferenceEndpointUI = {
+    endpoint: 'my-hugging-face',
+    provider: mockProvider,
+    type: 'text_embedding',
+  };
+
+  const Wrapper = ({ item }: { item: InferenceEndpointUI }) => {
+    const queryClient = new QueryClient();
+    return (
+      <QueryClientProvider client={queryClient}>
+        <DeleteAction selectedEndpoint={item} />
+      </QueryClientProvider>
+    );
+  };
+  it('renders', () => {
+    render(<Wrapper item={mockItem} />);
+
+    expect(screen.getByTestId('inferenceUIDeleteAction')).toBeEnabled();
+  });
+
+  it('disable the delete action for preconfigured endpoint', () => {
+    const preconfiguredMockItem = { ...mockItem, endpoint: '.elser-2' };
+    render(<Wrapper item={preconfiguredMockItem} />);
+
+    expect(screen.getByTestId('inferenceUIDeleteAction')).toBeDisabled();
+  });
+
+  it('loads confirm delete modal', () => {
+    render(<Wrapper item={mockItem} />);
+
+    fireEvent.click(screen.getByTestId('inferenceUIDeleteAction'));
+    expect(screen.getByTestId('deleteModalForInferenceUI')).toBeInTheDocument();
+  });
+});
diff --git a/..._inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx b/..._inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx
@@ -8,6 +8,7 @@
 import { EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
+import { isEndpointPreconfigured } from '../../../../../../utils/preconfigured_endpoint_helper';
 import { useDeleteEndpoint } from '../../../../../../hooks/use_delete_endpoint';
 import { InferenceEndpointUI } from '../../../../types';
 import { ConfirmDeleteEndpointModal } from './confirm_delete_endpoint';
@@ -39,6 +40,8 @@ export const DeleteAction: React.FC<DeleteActionProps> = ({ selectedEndpoint })
           defaultMessage: 'Delete inference endpoint {selectedEndpointName}',
           values: { selectedEndpointName: selectedEndpoint.endpoint },
         })}
+        data-test-subj="inferenceUIDeleteAction"
+        disabled={isEndpointPreconfigured(selectedEndpoint.endpoint)}
         key="delete"
         iconType="trash"
         color="danger"

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
@@ -5,14 +5,28 @@
  * 2.0.
  */
 
+import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
+import { isEndpointPreconfigured } from '../../../../utils/preconfigured_endpoint_helper';
+import * as i18n from './translations';
 
 export interface EndpointInfoProps {
   inferenceId: string;
 }
 
 export const EndpointInfo: React.FC<EndpointInfoProps> = ({ inferenceId }) => (
-  <span>
-    <strong>{inferenceId}</strong>
-  </span>
+  <EuiFlexGroup justifyContent="spaceBetween">
+    <EuiFlexItem grow={false}>
+      <span>
+        <strong>{inferenceId}</strong>
+      </span>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <span>
+        {isEndpointPreconfigured(inferenceId) ? (
+          <EuiBetaBadge label={i18n.PRECONFIGURED_LABEL} size="s" color="hollow" />
+        ) : null}
+      </span>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 );
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
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const PRECONFIGURED_LABEL = i18n.translate(
+  'xpack.searchInferenceEndpoints.elasticsearch.endpointInfo.preconfigured',
+  {
+    defaultMessage: 'PRECONFIGURED',
+  }
+);
diff --git a/...earch_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx b/...earch_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx
@@ -45,6 +45,28 @@ const inferenceEndpoints = [
     },
     task_settings: {},
   },
+  {
+    inference_id: '.elser-2',
+    task_type: 'sparse_embedding',
+    service: 'elasticsearch',
+    service_settings: {
+      num_allocations: 1,
+      num_threads: 1,
+      model_id: '.elser_model_2',
+    },
+    task_settings: {},
+  },
+  {
+    inference_id: '.multi-e5-small',
+    task_type: 'text_embedding',
+    service: 'elasticsearch',
+    service_settings: {
+      num_allocations: 1,
+      num_threads: 1,
+      model_id: '.multilingual-e5-small',
+    },
+    task_settings: {},
+  },
 ] as InferenceAPIConfigResponse[];
 
 jest.mock('../../hooks/use_delete_endpoint', () => ({
@@ -58,22 +80,55 @@ describe('When the tabular page is loaded', () => {
     render(<TabularPage inferenceEndpoints={inferenceEndpoints} />);
 
     const rows = screen.getAllByRole('row');
-    expect(rows[1]).toHaveTextContent('local-model');
-    expect(rows[2]).toHaveTextContent('my-elser-model-05');
-    expect(rows[3]).toHaveTextContent('third-party-model');
+    expect(rows[1]).toHaveTextContent('.elser-2');
+    expect(rows[2]).toHaveTextContent('.multi-e5-small');
+    expect(rows[3]).toHaveTextContent('local-model');
+    expect(rows[4]).toHaveTextContent('my-elser-model-05');
+    expect(rows[5]).toHaveTextContent('third-party-model');
   });
 
   it('should display all service and model ids in the table', () => {
     render(<TabularPage inferenceEndpoints={inferenceEndpoints} />);
 
     const rows = screen.getAllByRole('row');
     expect(rows[1]).toHaveTextContent('Elasticsearch');
-    expect(rows[1]).toHaveTextContent('.own_model');
+    expect(rows[1]).toHaveTextContent('.elser_model_2');
 
     expect(rows[2]).toHaveTextContent('Elasticsearch');
-    expect(rows[2]).toHaveTextContent('.elser_model_2');
+    expect(rows[2]).toHaveTextContent('.multilingual-e5-small');
 
-    expect(rows[3]).toHaveTextContent('OpenAI');
+    expect(rows[3]).toHaveTextContent('Elasticsearch');
     expect(rows[3]).toHaveTextContent('.own_model');
+
+    expect(rows[4]).toHaveTextContent('Elasticsearch');
+    expect(rows[4]).toHaveTextContent('.elser_model_2');
+
+    expect(rows[5]).toHaveTextContent('OpenAI');
+    expect(rows[5]).toHaveTextContent('.own_model');
+  });
+
+  it('should only disable delete action for preconfigured endpoints', () => {
+    render(<TabularPage inferenceEndpoints={inferenceEndpoints} />);
+
+    const deleteActions = screen.getAllByTestId('inferenceUIDeleteAction');
+
+    expect(deleteActions[0]).toBeDisabled();
+    expect(deleteActions[1]).toBeDisabled();
+    expect(deleteActions[2]).toBeEnabled();
+    expect(deleteActions[3]).toBeEnabled();
+    expect(deleteActions[4]).toBeEnabled();
+  });
+
+  it('should show preconfigured badge only for preconfigured endpoints', () => {
+    render(<TabularPage inferenceEndpoints={inferenceEndpoints} />);
+
+    const preconfigured = 'PRECONFIGURED';
+
+    const rows = screen.getAllByRole('row');
+    expect(rows[1]).toHaveTextContent(preconfigured);
+    expect(rows[2]).toHaveTextContent(preconfigured);
+    expect(rows[3]).not.toHaveTextContent(preconfigured);
+    expect(rows[4]).not.toHaveTextContent(preconfigured);
+    expect(rows[5]).not.toHaveTextContent(preconfigured);
   });
 });
diff --git a/...ins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx b/...ins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx
@@ -60,7 +60,6 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
         return null;
       },
       sortable: true,
-      truncateText: true,
       width: '300px',
     },
     {

diff --git a/x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.test.ts b/x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.test.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PRECONFIGURED_ENDPOINTS } from '../components/all_inference_endpoints/constants';
+import { isEndpointPreconfigured } from './preconfigured_endpoint_helper';
+
+describe('Preconfigured Endpoint helper', () => {
+  it('return true for preconfigured elser', () => {
+    expect(isEndpointPreconfigured(PRECONFIGURED_ENDPOINTS.ELSER)).toEqual(true);
+  });
+
+  it('return true for preconfigured e5', () => {
+    expect(isEndpointPreconfigured(PRECONFIGURED_ENDPOINTS.E5)).toEqual(true);
+  });
+
+  it('return false for other endpoints', () => {
+    expect(isEndpointPreconfigured('other-endpoints')).toEqual(false);
+  });
+});
diff --git a/x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.ts b/x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PRECONFIGURED_ENDPOINTS } from '../components/all_inference_endpoints/constants';
+
+export const isEndpointPreconfigured = (endpoint: string) =>
+  Object.values(PRECONFIGURED_ENDPOINTS).includes(endpoint);