Skip to content

Commit

Permalink
[Inference] Fix table responsiveness (#189265)
Browse files Browse the repository at this point in the history
## 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 <[email protected]>
  • Loading branch information
sphilipse and kibanamachine authored Jul 30, 2024
1 parent 7bd6ca6 commit a9ae3e5
Show file tree
Hide file tree
Showing 23 changed files with 304 additions and 405 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
21 changes: 0 additions & 21 deletions x-pack/plugins/search_inference_endpoints/common/translations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
{
Expand All @@ -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',
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -35,8 +35,6 @@ Object.defineProperty(navigator, 'clipboard', {
configurable: true,
});

const mockOnActionSuccess = jest.fn();

jest.mock('../../../../../../hooks/use_kibana', () => ({
useKibana: jest.fn(),
}));
Expand All @@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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>
);
};

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
);
Original file line number Diff line number Diff line change
@@ -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}
/>
)}
</>
);
};

This file was deleted.

This file was deleted.

Loading

0 comments on commit a9ae3e5

Please sign in to comment.