From e6bd6b8ca80ea30764303bcd99c7c83bc498a32f Mon Sep 17 00:00:00 2001 From: Dima Arnautov Date: Wed, 24 Apr 2024 16:29:06 +0200 Subject: [PATCH] [ML] Fix responsive layout for Trained Models table (#181541) ## Summary Closes https://github.com/elastic/kibana/issues/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 d5999c339a615a4e7cbd23741747dffa984da678) # Conflicts: # x-pack/plugins/ml/public/application/model_management/models_list.tsx --- .../nodes_overview/allocated_models.tsx | 29 ++++++++++--------- .../model_management/model_actions.tsx | 6 ++-- .../model_management/models_list.tsx | 15 +++++----- 3 files changed, 24 insertions(+), 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 index d33c1a0c8bc40..6df06eebda714 100644 --- 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 = ({ const columns: Array> = [ { + 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,32 +69,32 @@ export const AllocatedModels: FC = ({ }, }, { + 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) => { @@ -101,6 +102,7 @@ export const AllocatedModels: FC = ({ }, }, { + width: '8%', name: ( = ({ ), - width: '100px', truncateText: false, 'data-test-subj': 'mlAllocatedModelsTableAllocation', render: (v: AllocatedModel) => { @@ -129,6 +130,7 @@ export const AllocatedModels: FC = ({ }, }, { + width: '8%', name: ( = ({ ), field: 'node.throughput_last_minute', - width: '100px', truncateText: false, 'data-test-subj': 'mlAllocatedModelsTableThroughput', }, { + width: '8%', name: ( = ({ ), - width: '100px', truncateText: false, 'data-test-subj': 'mlAllocatedModelsTableAvgInferenceTime', render: (v: AllocatedModel) => { @@ -196,56 +197,56 @@ export const AllocatedModels: FC = ({ }, }, { + 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 = ({ return ( + responsiveBreakpoint={'xl'} allowNeutralSort={false} columns={columns} hasActions={false} @@ -267,7 +269,6 @@ export const AllocatedModels: FC = ({ })} 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 index c3b726d8bd2d6..5d690a7a58fd8 100644 --- 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 index b26014b57c065..2e3adb8e38a0d 100644 --- 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 = ({ const columns: Array> = [ { align: 'left', - width: '40px', + width: '32px', isExpander: true, render: (item: ModelItem) => { if (!item.stats) { @@ -512,7 +512,7 @@ export const ModelsList: FC = ({ }, { name: modelIdColumnName, - width: '215px', + width: '15%', sortable: ({ model_id: modelId }: ModelItem) => modelId, truncateText: false, textOnly: false, @@ -533,7 +533,6 @@ export const ModelsList: FC = ({ }, }, { - width: '300px', name: i18n.translate('xpack.ml.trainedModels.modelsList.modelDescriptionHeader', { defaultMessage: 'Description', }), @@ -567,6 +566,7 @@ export const ModelsList: FC = ({ }, }, { + width: '15%', field: ModelsTableToConfigMapping.type, name: i18n.translate('xpack.ml.trainedModels.modelsList.typeHeader', { defaultMessage: 'Type', @@ -586,9 +586,9 @@ export const ModelsList: FC = ({ ), '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 = ({ ) : 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 = ({ 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 = ({
- css={{ overflowX: 'auto' }} + responsiveBreakpoint={'xl'} isSelectable={true} isExpandable={true} hasActions={true}