From 22d0fbbb2ca486993cf2a7dfe2121a45a95de0d8 Mon Sep 17 00:00:00 2001 From: Samiul Monir Date: Fri, 18 Oct 2024 12:15:33 -0400 Subject: [PATCH] Adding preconfigured badge and refactoring preconfigure endpoint validation --- .../common/constants.ts | 2 -- .../all_inference_endpoints/constants.ts | 5 ++++ .../actions/delete/delete_action.test.tsx | 14 ++++++----- .../actions/delete/delete_action.tsx | 9 +++----- .../render_endpoint/endpoint_info.tsx | 20 +++++++++++++--- .../render_endpoint/translations.ts | 15 ++++++++++++ .../tabular_page.test.tsx | 13 +++++++++++ .../all_inference_endpoints/tabular_page.tsx | 12 +++------- .../preconfigured_endpoint_helper.test.ts | 23 +++++++++++++++++++ .../utils/preconfigured_endpoint_helper.ts | 11 +++++++++ 10 files changed, 98 insertions(+), 26 deletions(-) create mode 100644 x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/translations.ts create mode 100644 x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.test.ts create mode 100644 x-pack/plugins/search_inference_endpoints/public/utils/preconfigured_endpoint_helper.ts diff --git a/x-pack/plugins/search_inference_endpoints/common/constants.ts b/x-pack/plugins/search_inference_endpoints/common/constants.ts index 9b94272caeeb4..b76246aa53a49 100644 --- a/x-pack/plugins/search_inference_endpoints/common/constants.ts +++ b/x-pack/plugins/search_inference_endpoints/common/constants.ts @@ -10,5 +10,3 @@ export const PLUGIN_NAME = 'Inference Endpoints'; export const INFERENCE_ENDPOINTS_QUERY_KEY = 'inferenceEndpointsQueryKey'; export const TRAINED_MODEL_STATS_QUERY_KEY = 'trainedModelStats'; - -export const PRECONFIGURED_ENDPOINTS = ['.elser-2', '.multi-e5-small']; diff --git a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts index 7ce1e578f1db0..26b6a93cec9fa 100644 --- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts +++ b/x-pack/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/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx index 0a93027020733..22c509ca22989 100644 --- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx +++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.test.tsx @@ -10,6 +10,7 @@ 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 = { @@ -22,34 +23,35 @@ describe('Delete Action', () => { task_settings: {}, } as any; - const mockItem = { + const mockItem: InferenceEndpointUI = { endpoint: 'my-hugging-face', provider: mockProvider, type: 'text_embedding', }; - const Wrapper = ({ preconfiguredEndpoint }: { preconfiguredEndpoint: boolean }) => { + const Wrapper = ({ item }: { item: InferenceEndpointUI }) => { const queryClient = new QueryClient(); return ( - + ); }; it('renders', () => { - render(); + render(); expect(screen.getByTestId('inferenceUIDeleteAction')).toBeEnabled(); }); it('disable the delete action for preconfigured endpoint', () => { - render(); + const preconfiguredMockItem = { ...mockItem, endpoint: '.elser-2' }; + render(); expect(screen.getByTestId('inferenceUIDeleteAction')).toBeDisabled(); }); it('loads confirm delete modal', () => { - render(); + render(); fireEvent.click(screen.getByTestId('inferenceUIDeleteAction')); expect(screen.getByTestId('deleteModalForInferenceUI')).toBeInTheDocument(); diff --git a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx index 8271d442d5b19..fb31aeb31dcaa 100644 --- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx +++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_actions/actions/delete/delete_action.tsx @@ -8,19 +8,16 @@ 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'; interface DeleteActionProps { selectedEndpoint: InferenceEndpointUI; - preconfiguredEndpoint: boolean; } -export const DeleteAction: React.FC = ({ - selectedEndpoint, - preconfiguredEndpoint, -}) => { +export const DeleteAction: React.FC = ({ selectedEndpoint }) => { const [isModalVisible, setIsModalVisible] = useState(false); const { mutate: deleteEndpoint } = useDeleteEndpoint(() => setIsModalVisible(false)); @@ -44,7 +41,7 @@ export const DeleteAction: React.FC = ({ values: { selectedEndpointName: selectedEndpoint.endpoint }, })} data-test-subj="inferenceUIDeleteAction" - disabled={preconfiguredEndpoint} + disabled={isEndpointPreconfigured(selectedEndpoint.endpoint)} key="delete" iconType="trash" color="danger" diff --git a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.tsx b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.tsx index 3d810a24a9ffc..26b12328dafd4 100644 --- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/endpoint_info.tsx +++ b/x-pack/plugins/search_inference_endpoints/public/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 = ({ inferenceId }) => ( - - {inferenceId} - + + + + {inferenceId} + + + + + {isEndpointPreconfigured(inferenceId) ? ( + + ) : null} + + + ); diff --git a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/translations.ts b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/render_table_columns/render_endpoint/translations.ts new file mode 100644 index 0000000000000..70b1576a9ddc0 --- /dev/null +++ b/x-pack/plugins/search_inference_endpoints/public/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/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx index b013988bc8f48..91cc303ed4568 100644 --- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx +++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.test.tsx @@ -118,4 +118,17 @@ describe('When the tabular page is loaded', () => { expect(deleteActions[3]).toBeEnabled(); expect(deleteActions[4]).toBeEnabled(); }); + + it('should show preconfigured badge only for preconfigured endpoints', () => { + render(); + + 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/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx index cfa4d60b33de9..4cf4b3112396d 100644 --- a/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx +++ b/x-pack/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx @@ -9,7 +9,6 @@ import React, { useCallback } from 'react'; import { EuiBasicTable, EuiBasicTableColumn, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { InferenceAPIConfigResponse } from '@kbn/ml-trained-models-utils'; -import { PRECONFIGURED_ENDPOINTS } from '../../../common/constants'; import { TaskTypes } from '../../../common/types'; import * as i18n from '../../../common/translations'; @@ -61,7 +60,6 @@ export const TabularPage: React.FC = ({ inferenceEndpoints }) return null; }, sortable: true, - truncateText: true, width: '300px', }, { @@ -98,13 +96,9 @@ export const TabularPage: React.FC = ({ inferenceEndpoints }) ), }, { - render: (inferenceEndpoint: InferenceEndpointUI) => { - return PRECONFIGURED_ENDPOINTS.includes(inferenceEndpoint.endpoint) ? ( - - ) : ( - - ); - }, + render: (inferenceEndpoint: InferenceEndpointUI) => ( + + ), }, ], width: '165px', 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 new file mode 100644 index 0000000000000..b853109352dd9 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..418e7e95319ef --- /dev/null +++ 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);