responsive deployment stats

elastic · Apr 24, 2024 · e736905 · e736905
1 parent 5776e5b
commit e736905
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 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}
       items={models}
@@ -264,7 +266,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/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: '2%',
+      width: '32px',
       isExpander: true,
       render: (item: ModelItem) => {
         if (!item.stats) {