[ML] Fix responsive layout for Trained Models table (elastic#181541)

## Summary Closes elastic#181530 - Sets percentage width for all columns - Sets responsive breakpoint - Makes Deployment stats table responsive as well ![Apr-24-2024 12-16-48](https://github.com/elastic/kibana/assets/5236598/2a14ffb9-de15-45e9-b8bc-276e10080864) ### Checklist - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit d5999c3) # Conflicts: # x-pack/plugins/ml/public/application/model_management/models_list.tsx
darnautov · Apr 24, 2024 · e6bd6b8 · e6bd6b8
1 parent 18ab054
commit e6bd6b8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/allocated_models.tsx b/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/allocated_models.tsx
@@ -41,21 +41,22 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
 
   const columns: Array<EuiBasicTableColumn<AllocatedModel>> = [
     {
+      width: '10%',
       id: 'deployment_id',
       field: 'deployment_id',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.deploymentIdHeader', {
         defaultMessage: 'ID',
       }),
-      width: '150px',
       sortable: true,
       truncateText: false,
+      isExpander: false,
       'data-test-subj': 'mlAllocatedModelsTableDeploymentId',
     },
     {
+      width: '8%',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.modelRoutingStateHeader', {
         defaultMessage: 'Routing state',
       }),
-      width: '100px',
       'data-test-subj': 'mlAllocatedModelsTableRoutingState',
       render: (v: AllocatedModel) => {
         const { routing_state: routingState, reason } = v.node.routing_state;
@@ -68,39 +69,40 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
       },
     },
     {
+      width: '8%',
       id: 'node_name',
       field: 'node.name',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.nodeNameHeader', {
         defaultMessage: 'Node name',
       }),
-      width: '150px',
       sortable: true,
       truncateText: false,
       'data-test-subj': 'mlAllocatedModelsTableNodeName',
     },
     {
+      width: '10%',
       id: 'model_id',
       field: 'model_id',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.modelNameHeader', {
         defaultMessage: 'Name',
       }),
-      width: '250px',
       sortable: true,
       truncateText: false,
       'data-test-subj': 'mlAllocatedModelsTableName',
     },
     {
+      width: '8%',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.modelSizeHeader', {
         defaultMessage: 'Size',
       }),
-      width: '100px',
       truncateText: true,
       'data-test-subj': 'mlAllocatedModelsTableSize',
       render: (v: AllocatedModel) => {
         return bytesFormatter(v.required_native_memory_bytes);
       },
     },
     {
+      width: '8%',
       name: (
         <EuiToolTip
           content={i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.allocationTooltip', {
@@ -115,7 +117,6 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
           </span>
         </EuiToolTip>
       ),
-      width: '100px',
       truncateText: false,
       'data-test-subj': 'mlAllocatedModelsTableAllocation',
       render: (v: AllocatedModel) => {
@@ -129,6 +130,7 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
       },
     },
     {
+      width: '8%',
       name: (
         <EuiToolTip
           content={i18n.translate(
@@ -150,11 +152,11 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
         </EuiToolTip>
       ),
       field: 'node.throughput_last_minute',
-      width: '100px',
       truncateText: false,
       'data-test-subj': 'mlAllocatedModelsTableThroughput',
     },
     {
+      width: '8%',
       name: (
         <EuiToolTip
           display={'block'}
@@ -186,7 +188,6 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
           </EuiFlexGroup>
         </EuiToolTip>
       ),
-      width: '100px',
       truncateText: false,
       'data-test-subj': 'mlAllocatedModelsTableAvgInferenceTime',
       render: (v: AllocatedModel) => {
@@ -196,56 +197,56 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
       },
     },
     {
+      width: '8%',
       name: i18n.translate(
         'xpack.ml.trainedModels.nodesList.modelsList.modelInferenceCountHeader',
         {
           defaultMessage: 'Inference count',
         }
       ),
-      width: '100px',
       'data-test-subj': 'mlAllocatedModelsTableInferenceCount',
       render: (v: AllocatedModel) => {
         return v.node.inference_count;
       },
     },
     {
+      width: '12%',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.modelStartTimeHeader', {
         defaultMessage: 'Start time',
       }),
-      width: '200px',
       'data-test-subj': 'mlAllocatedModelsTableStartedTime',
       render: (v: AllocatedModel) => {
         return dateFormatter(v.node.start_time);
       },
     },
     {
+      width: '12%',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.modelLastAccessHeader', {
         defaultMessage: 'Last access',
       }),
-      width: '200px',
       'data-test-subj': 'mlAllocatedModelsTableInferenceCount',
       render: (v: AllocatedModel) => {
         return v.node.last_access ? dateFormatter(v.node.last_access) : '-';
       },
     },
     {
+      width: '8%',
       name: i18n.translate(
         'xpack.ml.trainedModels.nodesList.modelsList.modelNumberOfPendingRequestsHeader',
         {
           defaultMessage: 'Pending requests',
         }
       ),
-      width: '100px',
       'data-test-subj': 'mlAllocatedModelsTableNumberOfPendingRequests',
       render: (v: AllocatedModel) => {
         return v.node.number_of_pending_requests;
       },
     },
     {
+      width: '8%',
       name: i18n.translate('xpack.ml.trainedModels.nodesList.modelsList.errorCountHeader', {
         defaultMessage: 'Errors',
       }),
-      width: '60px',
       'data-test-subj': 'mlAllocatedModelsTableErrorCount',
       render: (v: AllocatedModel) => {
         return v.node.error_count ?? 0;
@@ -255,6 +256,7 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
 
   return (
     <EuiInMemoryTable<AllocatedModel>
+      responsiveBreakpoint={'xl'}
       allowNeutralSort={false}
       columns={columns}
       hasActions={false}
@@ -267,7 +269,6 @@ export const AllocatedModels: FC<AllocatedModelsProps> = ({
       })}
       onTableChange={() => {}}
       data-test-subj={'mlNodesAllocatedModels'}
-      css={{ overflow: 'auto' }}
     />
   );
 };
diff --git a/x-pack/plugins/ml/public/application/model_management/model_actions.tsx b/x-pack/plugins/ml/public/application/model_management/model_actions.tsx
@@ -199,9 +199,8 @@ export function useModelActions({
           }
         ),
         'data-test-subj': 'mlModelsTableRowStartDeploymentAction',
-        // @ts-ignore EUI has a type check issue when type "button" is combined with an icon.
         icon: 'play',
-        type: 'button',
+        type: 'icon',
         isPrimary: true,
         enabled: (item) => {
           return canStartStopTrainedModels && !isLoading && item.state !== MODEL_STATE.DOWNLOADING;
@@ -409,9 +408,8 @@ export function useModelActions({
           defaultMessage: 'Download',
         }),
         'data-test-subj': 'mlModelsTableRowDownloadModelAction',
-        // @ts-ignore EUI has a type check issue when type "button" is combined with an icon.
         icon: 'download',
-        type: 'button',
+        type: 'icon',
         isPrimary: true,
         available: (item) =>
           canCreateTrainedModels &&

diff --git a/x-pack/plugins/ml/public/application/model_management/models_list.tsx b/x-pack/plugins/ml/public/application/model_management/models_list.tsx
@@ -486,7 +486,7 @@ export const ModelsList: FC<Props> = ({
   const columns: Array<EuiBasicTableColumn<ModelItem>> = [
     {
       align: 'left',
-      width: '40px',
+      width: '32px',
       isExpander: true,
       render: (item: ModelItem) => {
         if (!item.stats) {
@@ -512,7 +512,7 @@ export const ModelsList: FC<Props> = ({
     },
     {
       name: modelIdColumnName,
-      width: '215px',
+      width: '15%',
       sortable: ({ model_id: modelId }: ModelItem) => modelId,
       truncateText: false,
       textOnly: false,
@@ -533,7 +533,6 @@ export const ModelsList: FC<Props> = ({
       },
     },
     {
-      width: '300px',
       name: i18n.translate('xpack.ml.trainedModels.modelsList.modelDescriptionHeader', {
         defaultMessage: 'Description',
       }),
@@ -567,6 +566,7 @@ export const ModelsList: FC<Props> = ({
       },
     },
     {
+      width: '15%',
       field: ModelsTableToConfigMapping.type,
       name: i18n.translate('xpack.ml.trainedModels.modelsList.typeHeader', {
         defaultMessage: 'Type',
@@ -586,9 +586,9 @@ export const ModelsList: FC<Props> = ({
         </EuiFlexGroup>
       ),
       'data-test-subj': 'mlModelsTableColumnType',
-      width: '130px',
     },
     {
+      width: '10%',
       field: 'state',
       name: i18n.translate('xpack.ml.trainedModels.modelsList.stateHeader', {
         defaultMessage: 'State',
@@ -604,9 +604,9 @@ export const ModelsList: FC<Props> = ({
         ) : null;
       },
       'data-test-subj': 'mlModelsTableColumnDeploymentState',
-      width: '130px',
     },
     {
+      width: '20%',
       field: ModelsTableToConfigMapping.createdAt,
       name: i18n.translate('xpack.ml.trainedModels.modelsList.createdAtHeader', {
         defaultMessage: 'Created at',
@@ -615,10 +615,9 @@ export const ModelsList: FC<Props> = ({
       render: (v: number) => dateFormatter(v),
       sortable: true,
       'data-test-subj': 'mlModelsTableColumnCreatedAt',
-      width: '210px',
     },
     {
-      width: '150px',
+      width: '15%',
       name: i18n.translate('xpack.ml.trainedModels.modelsList.actionsHeader', {
         defaultMessage: 'Actions',
       }),
@@ -768,7 +767,7 @@ export const ModelsList: FC<Props> = ({
       <EuiSpacer size="m" />
       <div data-test-subj="mlModelsTableContainer">
         <EuiInMemoryTable<ModelItem>
-          css={{ overflowX: 'auto' }}
+          responsiveBreakpoint={'xl'}
           isSelectable={true}
           isExpandable={true}
           hasActions={true}