[8.19] [ML] Inference endpoints UI improvements (#218496) (#221149)

kibanamachine · alvarezmelissa87 · elasticmachine · web-flow · commit 671b264482be · 2025-05-21T19:46:03.000+02:00
# Backport This will backport the following commits from `main` to `8.19`: - [[ML] Inference endpoints UI improvements (#218496)](#218496)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
diff --git a/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_flyout_wrapper.test.tsx b/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_flyout_wrapper.test.tsx
@@ -148,7 +148,7 @@ describe('InferenceFlyout', () => {
     });
   }, 10000);
 
-  it('disables submit button for preconfigured endpoints', () => {
+  it('removes submit button for preconfigured endpoints', () => {
     const mockEndpoint = {
       config: {
         inferenceId: '.test-id',
@@ -162,7 +162,7 @@ describe('InferenceFlyout', () => {
     };
 
     renderComponent({ isEdit: true, inferenceEndpoint: mockEndpoint });
-    expect(screen.getByTestId('inference-endpoint-submit-button')).toBeDisabled();
+    expect(screen.queryByTestId('inference-endpoint-submit-button')).not.toBeInTheDocument();
   });
 
   it('disables the num_allocations field for preconfigured endpoints', () => {
diff --git a/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_flyout_wrapper.tsx b/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_flyout_wrapper.tsx
@@ -101,23 +101,23 @@ export const InferenceFlyoutWrapper: React.FC<InferenceFlyoutWrapperProps> = ({
             isPreconfigured={isPreconfigured}
           />
           <EuiSpacer size="m" />
-          <EuiFlexGroup justifyContent="flexStart">
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                color="success"
-                size="m"
-                isLoading={form.isSubmitting || isLoading}
-                disabled={
-                  (!form.isValid && form.isSubmitted) || isLoading || isPreconfigured // Disable edit option for preconfigured endpoints
-                }
-                data-test-subj="inference-endpoint-submit-button"
-                onClick={handleSubmit}
-              >
-                {LABELS.SAVE}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          {isPreconfigured ? null : (
+            <EuiFlexGroup justifyContent="flexStart">
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  fill
+                  color="success"
+                  size="m"
+                  isLoading={form.isSubmitting || isLoading}
+                  disabled={(!form.isValid && form.isSubmitted) || isLoading}
+                  data-test-subj="inference-endpoint-submit-button"
+                  onClick={handleSubmit}
+                >
+                  {LABELS.SAVE}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
         </Form>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
diff --git a/x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/filter/service_provider_filter.tsx b/x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/filter/service_provider_filter.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SERVICE_PROVIDERS, ServiceProviderKeys } from '@kbn/inference-endpoint-ui-common';
 import type { FilterOptions } from '../types';
 import { MultiSelectFilter, MultiSelectFilterOption } from './multi_select_filter';
@@ -14,14 +14,14 @@ import * as i18n from './translations';
 interface Props {
   optionKeys: ServiceProviderKeys[];
   onChange: (newFilterOptions: Partial<FilterOptions>) => void;
+  uniqueProviders: Set<ServiceProviderKeys>;
 }
 
-const options = Object.entries(SERVICE_PROVIDERS).map(([key, { name }]) => ({
-  key,
-  label: name,
-}));
-
-export const ServiceProviderFilter: React.FC<Props> = ({ optionKeys, onChange }) => {
+export const ServiceProviderFilter: React.FC<Props> = ({
+  optionKeys,
+  onChange,
+  uniqueProviders,
+}) => {
   const filterId: string = 'provider';
   const onSystemFilterChange = (newOptions: MultiSelectFilterOption[]) => {
     onChange({
@@ -31,11 +31,23 @@ export const ServiceProviderFilter: React.FC<Props> = ({ optionKeys, onChange })
     });
   };
 
+  const filteredOptions = useMemo(() => {
+    const options: any = [];
+    uniqueProviders.forEach((provider) => {
+      const { name } = SERVICE_PROVIDERS[provider];
+      options.push({
+        key: provider,
+        label: name,
+      });
+    });
+    return options;
+  }, [uniqueProviders]);
+
   return (
     <MultiSelectFilter
       buttonLabel={i18n.SERVICE_PROVIDER}
       onChange={onSystemFilterChange}
-      options={options}
+      options={filteredOptions}
       renderOption={(option) => option.label}
       selectedOptionKeys={optionKeys}
       dataTestSubj="service-field-endpoints"
diff --git a/x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/filter/task_type_filter.tsx b/x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/filter/task_type_filter.tsx
@@ -5,29 +5,19 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { InferenceTaskType } from '@elastic/elasticsearch/lib/api/types';
 import { FilterOptions } from '../types';
 import { MultiSelectFilter, MultiSelectFilterOption } from './multi_select_filter';
 import * as i18n from './translations';
 
-enum TaskTypes {
-  completion = 'completion',
-  rerank = 'rerank',
-  sparse_embedding = 'sparse_embedding',
-  text_embedding = 'text_embedding',
-}
 interface Props {
   optionKeys: InferenceTaskType[];
   onChange: (newFilterOptions: Partial<FilterOptions>) => void;
+  uniqueTaskTypes: Set<InferenceTaskType>;
 }
 
-const options = Object.values(TaskTypes).map((option) => ({
-  key: option,
-  label: option,
-}));
-
-export const TaskTypeFilter: React.FC<Props> = ({ optionKeys, onChange }) => {
+export const TaskTypeFilter: React.FC<Props> = ({ optionKeys, onChange, uniqueTaskTypes }) => {
   const filterId: string = 'type';
   const onSystemFilterChange = (newOptions: MultiSelectFilterOption[]) => {
     onChange({
@@ -37,11 +27,18 @@ export const TaskTypeFilter: React.FC<Props> = ({ optionKeys, onChange }) => {
     });
   };
 
+  const filteredOptions = useMemo(() => {
+    return [...uniqueTaskTypes].map((type) => ({
+      key: type,
+      label: type,
+    }));
+  }, [uniqueTaskTypes]);
+
   return (
     <MultiSelectFilter
       buttonLabel={i18n.TASK_TYPE}
       onChange={onSystemFilterChange}
-      options={options}
+      options={filteredOptions}
       renderOption={(option) => option.label}
       selectedOptionKeys={optionKeys}
       dataTestSubj="type-field-endpoints"
diff --git a/x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx b/x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx
@@ -60,6 +60,20 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
     [toasts]
   );
 
+  const uniqueProvidersAndTaskTypes = useMemo(() => {
+    return inferenceEndpoints.reduce(
+      (acc, { service, task_type: taskType }) => {
+        acc.providers.add(service as ServiceProviderKeys);
+        acc.taskTypes.add(taskType);
+        return acc;
+      },
+      {
+        providers: new Set<ServiceProviderKeys>(),
+        taskTypes: new Set<InferenceTaskType>(),
+      }
+    );
+  }, [inferenceEndpoints]);
+
   const onCancelDeleteModal = useCallback(() => {
     setSelectedInferenceEndpoint(undefined);
     setShowDeleteAction(false);
@@ -211,11 +225,16 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
             <EuiFlexItem grow={false}>
               <ServiceProviderFilter
                 optionKeys={filterOptions.provider}
+                uniqueProviders={uniqueProvidersAndTaskTypes.providers}
                 onChange={onFilterChangedCallback}
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <TaskTypeFilter optionKeys={filterOptions.type} onChange={onFilterChangedCallback} />
+              <TaskTypeFilter
+                optionKeys={filterOptions.type}
+                onChange={onFilterChangedCallback}
+                uniqueTaskTypes={uniqueProvidersAndTaskTypes.taskTypes}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
diff --git a/x-pack/test_serverless/functional/page_objects/svl_search_inference_management_page.ts b/x-pack/test_serverless/functional/page_objects/svl_search_inference_management_page.ts
@@ -137,7 +137,7 @@ export function SvlSearchInferenceManagementPageProvider({ getService }: FtrProv
         (await testSubjects.getVisibleText('provider-select')).includes('Elasticsearch');
         (await testSubjects.getVisibleText('model_id-input')).includes('.elser_model_2');
 
-        expect(await testSubjects.isEnabled('inference-endpoint-submit-button')).to.be(false);
+        await testSubjects.missingOrFail('inference-endpoint-submit-button');
       },
     },
   };
