[Inference] Fix table responsiveness (elastic#189265)

## Summary This improves the inference endpoint's table responsiveness and code clarity. It also fixes a bug where deleting one endpoint and then a second one would try to delete the same endpoint twice. <img width="879" alt="Screenshot 2024-07-26 at 12 18 59" src="https://github.com/user-attachments/assets/003f47ef-6cd4-4244-abe4-141ebf570a98"> <img width="1016" alt="Screenshot 2024-07-26 at 12 18 52" src="https://github.com/user-attachments/assets/9d7fd119-6c5c-4d5d-b381-68f6189e56e5"> <img width="1410" alt="Screenshot 2024-07-26 at 12 18 37" src="https://github.com/user-attachments/assets/790fe616-36d4-4a11-9ced-dca325efb753"> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
klacabane · Jul 30, 2024 · a9ae3e5 · a9ae3e5
1 parent 7bd6ca6
commit a9ae3e5
Show file tree

Hide file tree

Showing 23 changed files with 304 additions and 405 deletions.
diff --git a/x-pack/plugins/search_inference_endpoints/common/constants.ts b/x-pack/plugins/search_inference_endpoints/common/constants.ts
@@ -9,3 +9,4 @@ export const PLUGIN_ID = 'searchInferenceEndpoints';
 export const PLUGIN_NAME = 'InferenceEndpoints';
 
 export const INFERENCE_ENDPOINTS_QUERY_KEY = 'inferenceEndpointsQueryKey';
+export const TRAINED_MODEL_STATS_QUERY_KEY = 'trainedModelStats';
diff --git a/x-pack/plugins/search_inference_endpoints/common/translations.ts b/x-pack/plugins/search_inference_endpoints/common/translations.ts
@@ -119,20 +119,6 @@ export const FORBIDDEN_TO_ACCESS_TRAINED_MODELS = i18n.translate(
   }
 );
 
-export const COPY_ID_ACTION_LABEL = i18n.translate(
-  'xpack.searchInferenceEndpoints.actions.copyID',
-  {
-    defaultMessage: 'Copy endpoint ID',
-  }
-);
-
-export const COPY_ID_ACTION_SUCCESS = i18n.translate(
-  'xpack.searchInferenceEndpoints.actions.copyIDSuccess',
-  {
-    defaultMessage: 'Inference endpoint ID copied!',
-  }
-);
-
 export const ENDPOINT_ADDED_SUCCESS = i18n.translate(
   'xpack.searchInferenceEndpoints.actions.endpointAddedSuccess',
   {
@@ -153,13 +139,6 @@ export const ENDPOINT_ADDED_SUCCESS_DESCRIPTION = (endpointId: string) =>
     values: { endpointId },
   });
 
-export const DELETE_ACTION_LABEL = i18n.translate(
-  'xpack.searchInferenceEndpoints.actions.deleteSingleEndpoint',
-  {
-    defaultMessage: 'Delete endpoint',
-  }
-);
-
 export const ENDPOINT = i18n.translate('xpack.searchInferenceEndpoints.endpoint', {
   defaultMessage: 'Endpoint',
 });

diff --git a/...tions/copy_id/use_copy_id_action.test.tsx → ...s/actions/copy_id/copy_id_action.test.tsx b/...tions/copy_id/use_copy_id_action.test.tsx → ...s/actions/copy_id/copy_id_action.test.tsx
@@ -8,7 +8,7 @@
 import { renderReactTestingLibraryWithI18n as render } from '@kbn/test-jest-helpers';
 import React from 'react';
 import { useKibana } from '../../../../../../hooks/use_kibana';
-import { useCopyIDAction } from './use_copy_id_action';
+import { CopyIDAction } from './copy_id_action';
 
 const mockInferenceEndpoint = {
   deployment: 'not_applicable',
@@ -35,8 +35,6 @@ Object.defineProperty(navigator, 'clipboard', {
   configurable: true,
 });
 
-const mockOnActionSuccess = jest.fn();
-
 jest.mock('../../../../../../hooks/use_kibana', () => ({
   useKibana: jest.fn(),
 }));
@@ -53,21 +51,19 @@ const addSuccess = jest.fn();
   },
 }));
 
-describe('useCopyIDAction hook', () => {
+describe('CopyIDAction', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders the label with correct text', () => {
     const TestComponent = () => {
-      const { getAction } = useCopyIDAction({ onActionSuccess: mockOnActionSuccess });
-      const action = getAction(mockInferenceEndpoint);
-      return <div>{action}</div>;
+      return <CopyIDAction modelId={mockInferenceEndpoint.endpoint.model_id} />;
     };
 
     const { getByTestId } = render(<TestComponent />);
     const labelElement = getByTestId('inference-endpoints-action-copy-id-label');
 
-    expect(labelElement).toHaveTextContent('Copy endpoint ID');
+    expect(labelElement).toBeVisible();
   });
 });
diff --git a/...nference_endpoints/render_table_columns/render_actions/actions/copy_id/copy_id_action.tsx b/...nference_endpoints/render_table_columns/render_actions/actions/copy_id/copy_id_action.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 { EuiButtonIcon, EuiCopy } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useKibana } from '../../../../../../hooks/use_kibana';
+
+interface CopyIDActionProps {
+  modelId: string;
+}
+
+export const CopyIDAction = ({ modelId }: CopyIDActionProps) => {
+  const {
+    services: { notifications },
+  } = useKibana();
+  const toasts = notifications?.toasts;
+
+  return (
+    <EuiCopy textToCopy={modelId}>
+      {(copy) => (
+        <EuiButtonIcon
+          aria-label={i18n.translate('xpack.searchInferenceEndpoints.actions.copyID', {
+            defaultMessage: 'Copy inference endpoint ID {modelId}',
+            values: { modelId },
+          })}
+          data-test-subj="inference-endpoints-action-copy-id-label"
+          iconType="copyClipboard"
+          onClick={() => {
+            copy();
+            toasts?.addSuccess({
+              title: i18n.translate('xpack.searchInferenceEndpoints.actions.copyIDSuccess', {
+                defaultMessage: 'Inference endpoint ID {modelId} copied',
+                values: { modelId },
+              }),
+            });
+          }}
+          size="s"
+        />
+      )}
+    </EuiCopy>
+  );
+};
diff --git a/...ence_endpoints/render_table_columns/render_actions/actions/copy_id/use_copy_id_action.tsx b/...ence_endpoints/render_table_columns/render_actions/actions/copy_id/use_copy_id_action.tsx
diff --git a/...render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/index.test.tsx b/...render_table_columns/render_actions/actions/delete/confirm_delete_endpoint/index.test.tsx
@@ -18,7 +18,7 @@ describe('ConfirmDeleteEndpointModal', () => {
     render(<ConfirmDeleteEndpointModal onCancel={mockOnCancel} onConfirm={mockOnConfirm} />);
   });
 
-  it('renders the modal with correct texts', () => {
+  it('renders the modal with correct elements', () => {
     expect(screen.getByText(i18n.DELETE_TITLE)).toBeInTheDocument();
     expect(screen.getByText(i18n.CONFIRM_DELETE_WARNING)).toBeInTheDocument();
     expect(screen.getByText(i18n.CANCEL)).toBeInTheDocument();

diff --git a/...ender_table_columns/render_actions/actions/delete/confirm_delete_endpoint/translations.ts b/...ender_table_columns/render_actions/actions/delete/confirm_delete_endpoint/translations.ts
@@ -22,3 +22,10 @@ export const CONFIRM_DELETE_WARNING = i18n.translate(
       'Deleting an active endpoint will cause operations targeting associated semantic_text fields and inference pipelines to fail.',
   }
 );
+
+export const DELETE_ACTION_LABEL = i18n.translate(
+  'xpack.searchInferenceEndpoints.actions.deleteSingleEndpoint',
+  {
+    defaultMessage: 'Delete endpoint',
+  }
+);
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
@@ -0,0 +1,55 @@
+/*
+ * 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 { EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+import { useDeleteEndpoint } from '../../../../../../hooks/use_delete_endpoint';
+import { InferenceEndpointUI } from '../../../../types';
+import { ConfirmDeleteEndpointModal } from './confirm_delete_endpoint';
+
+interface DeleteActionProps {
+  selectedEndpoint?: InferenceEndpointUI;
+}
+
+export const DeleteAction: React.FC<DeleteActionProps> = ({ selectedEndpoint }) => {
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+
+  const { mutate: deleteEndpoint } = useDeleteEndpoint(() => setIsModalVisible(false));
+
+  const onConfirmDeletion = () => {
+    if (!selectedEndpoint) {
+      return;
+    }
+
+    deleteEndpoint({
+      type: selectedEndpoint.type,
+      id: selectedEndpoint.endpoint.model_id,
+    });
+  };
+
+  return (
+    <>
+      <EuiButtonIcon
+        aria-label={i18n.translate('xpack.searchInferenceEndpoints.actions.deleteEndpoint', {
+          defaultMessage: 'Delete inference endpoint {selectedEndpointName}',
+          values: { selectedEndpointName: selectedEndpoint?.endpoint.model_id },
+        })}
+        key="delete"
+        iconType="trash"
+        color="danger"
+        onClick={() => setIsModalVisible(true)}
+      />
+      {isModalVisible && (
+        <ConfirmDeleteEndpointModal
+          onCancel={() => setIsModalVisible(false)}
+          onConfirm={onConfirmDeletion}
+        />
+      )}
+    </>
+  );
+};
diff --git a/...erence_endpoints/render_table_columns/render_actions/actions/delete/use_delete_action.tsx b/...erence_endpoints/render_table_columns/render_actions/actions/delete/use_delete_action.tsx
diff --git a/...c/components/all_inference_endpoints/render_table_columns/render_actions/actions/types.ts b/...c/components/all_inference_endpoints/render_table_columns/render_actions/actions/types.ts