From 7c610ca6b91765f1cb5463ccc4b6d348c506139a Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Tue, 23 Apr 2024 11:08:40 +0800
Subject: [PATCH] Add back model id column

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 .../__tests__/model_deployment_table.test.tsx | 25 +++++++++++-
 .../monitoring/model_deployment_table.tsx     | 38 +++++++++++++++++--
 2 files changed, 58 insertions(+), 5 deletions(-)

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('<DeployedModelTable />', () => {
       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) => (
+          <>
+            <EuiCopy
+              className="ml-modelModelIdCellTextWrapper"
+              textToCopy={id}
+              beforeMessage="Copy model ID"
+              anchorClassName="ml-modelModelIdCell"
+            >
+              {(copy) => (
+                <EuiButtonIcon
+                  aria-label="Copy ID to clipboard"
+                  color="text"
+                  iconType="copy"
+                  onClick={copy}
+                />
+              )}
+            </EuiCopy>
+            <EuiText className="eui-textTruncate ml-modelModelIdText" size="s">
+              {id}
+            </EuiText>
+          </>
+        ),
+      },
       {
         field: 'id',
         name: 'Action',