diff --git a/public/components/monitoring/__tests__/model_deployment_table.test.tsx b/public/components/monitoring/__tests__/model_deployment_table.test.tsx
index 020a60d2..24490c59 100644
--- a/public/components/monitoring/__tests__/model_deployment_table.test.tsx
+++ b/public/components/monitoring/__tests__/model_deployment_table.test.tsx
@@ -157,8 +157,31 @@ describe('', () => {
expect(within(cells[2] as HTMLElement).getByText('Not responding')).toBeInTheDocument();
});
- it('should render Action column and call onViewDetail with the model item of the current table row', async () => {
+ it('should render Model ID at fifth column and copy to clipboard after text clicked', async () => {
+ const execCommandOrigin = document.execCommand;
+ document.execCommand = jest.fn(() => true);
+
const columnIndex = 4;
+ setup();
+ const header = screen.getAllByRole('columnheader')[columnIndex];
+ const columnContent = header
+ .closest('table')
+ ?.querySelectorAll(`tbody tr td:nth-child(${columnIndex + 1})`);
+ expect(within(header).getByText('Model ID')).toBeInTheDocument();
+ expect(columnContent?.length).toBe(3);
+ const cells = columnContent!;
+ expect(within(cells[0] as HTMLElement).getByText('model-1-id')).toBeInTheDocument();
+ expect(within(cells[1] as HTMLElement).getByText('model-2-id')).toBeInTheDocument();
+ expect(within(cells[2] as HTMLElement).getByText('model-3-id')).toBeInTheDocument();
+
+ await userEvent.click(within(cells[0] as HTMLElement).getByLabelText('Copy ID to clipboard'));
+ expect(document.execCommand).toHaveBeenCalledWith('copy');
+
+ document.execCommand = execCommandOrigin;
+ });
+
+ it('should render Action column and call onViewDetail with the model item of the current table row', async () => {
+ const columnIndex = 5;
const onViewDetailMock = jest.fn();
const { finalProps } = setup({
onViewDetail: onViewDetailMock,
diff --git a/public/components/monitoring/model_deployment_table.tsx b/public/components/monitoring/model_deployment_table.tsx
index d53b9599..231eff05 100644
--- a/public/components/monitoring/model_deployment_table.tsx
+++ b/public/components/monitoring/model_deployment_table.tsx
@@ -17,6 +17,8 @@ import {
EuiSpacer,
EuiLink,
EuiToolTip,
+ EuiCopy,
+ EuiText,
} from '@elastic/eui';
import { MODEL_STATE } from '../../../common';
@@ -76,14 +78,14 @@ export const ModelDeploymentTable = ({
{
field: 'name',
name: 'Name',
- width: '23.84%',
+ width: '26.13%',
sortable: true,
truncateText: true,
},
{
field: 'id',
name: 'Source',
- width: '23.84%',
+ width: '14%',
sortable: false,
truncateText: true,
render: (_id: string, modelDeploymentItem: ModelDeploymentItem) => {
@@ -93,7 +95,7 @@ export const ModelDeploymentTable = ({
{
field: 'id',
name: 'Connector name',
- width: '22.61%',
+ width: '22%',
truncateText: true,
textOnly: true,
render: (_id: string, modelDeploymentItem: ModelDeploymentItem) => {
@@ -103,7 +105,7 @@ export const ModelDeploymentTable = ({
{
field: 'model_state',
name: 'Status',
- width: '23.84%',
+ width: '14%',
sortable: true,
truncateText: true,
render: (
@@ -138,6 +140,34 @@ export const ModelDeploymentTable = ({
);
},
},
+ {
+ field: 'id',
+ name: 'Model ID',
+ width: '18%',
+ sortable: true,
+ render: (id: string) => (
+ <>
+
+ {(copy) => (
+
+ )}
+
+
+ {id}
+
+ >
+ ),
+ },
{
field: 'id',
name: 'Action',