[ML] Fix table layout on the Stack Management page (#137442)

* AD management table fixes

* DFA management table fixes

* Models management table fixes, add titles to links

* datafeed state width

* remove unused refresh button

* style refresh button

* loading indicator

* remove unused translation

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx

@@ -142,7 +142,11 @@ export const DFAnalyticsJobIdLink = ({ jobId }: { jobId: string }) => {
     pageState: { jobId },
   });
 
-  return <EuiLink href={href}>{jobId}</EuiLink>;
+  return (
+    <EuiLink href={href} css={{ overflow: 'hidden', 'text-overflow': 'ellipsis' }} title={jobId}>
+      {jobId}
+    </EuiLink>
+  );
 };
 
 export const useColumns = (

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/job_id_link.tsx

@@ -59,14 +59,18 @@ export const AnomalyDetectionJobIdLink = (props: AnomalyDetectionJobIdLinkProps)
 
   if (isGroupIdLink(props)) {
     return (
-      // Set margin-left to match EuiBadge (in JobGroup) built-in left margin for consistent badge spacing in management and plugin jobs list
+      <EuiLink key={props.groupId} href={href}>
-      <EuiLink style={{ marginLeft: '4px' }} key={props.groupId} href={href}>
         <JobGroup name={props.groupId} />
       </EuiLink>
     );
   } else {
     return (
-      <EuiLink key={props.id} href={href}>
+      <EuiLink
+        key={props.id}
+        href={href}
+        css={{ overflow: 'hidden', 'text-overflow': 'ellipsis' }}
+        title={props.id}
+      >
         {props.id}
       </EuiLink>
     );

x-pack/plugins/ml/public/application/jobs/jobs_list/components/refresh_jobs_list_button/index.js

@@ -1,8 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-export { RefreshJobsListButton } from './refresh_jobs_list_button';

x-pack/plugins/ml/public/application/jobs/jobs_list/components/refresh_jobs_list_button/refresh_jobs_list_button.js

@@ -1,27 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { EuiButtonEmpty } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-
-export const RefreshJobsListButton = ({ onRefreshClick, isRefreshing }) => (
-  <EuiButtonEmpty
-    data-test-subj={`mlRefreshJobListButton${isRefreshing ? ' loading' : ' loaded'}`}
-    onClick={onRefreshClick}
-    isLoading={isRefreshing}
-  >
-    <FormattedMessage id="xpack.ml.jobsList.refreshButtonLabel" defaultMessage="Refresh" />
-  </EuiButtonEmpty>
-);
-
-RefreshJobsListButton.propTypes = {
-  onRefreshClick: PropTypes.func.isRequired,
-  isRefreshing: PropTypes.bool.isRequired,
-};

x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/space_management/columns.tsx

@@ -41,6 +41,7 @@ const adColumns: Array<EuiBasicTableColumn<AnomalyDetectionManagementItems>> = [
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnId',
     scope: 'row',
+    width: '250px',
     render: (id: string) => <AnomalyDetectionJobIdLink id={id} />,
   },
   {
@@ -66,6 +67,7 @@ const adColumns: Array<EuiBasicTableColumn<AnomalyDetectionManagementItems>> = [
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnJobState',
+    width: '100px',
   },
   {
     field: 'datafeedState',
@@ -75,6 +77,7 @@ const adColumns: Array<EuiBasicTableColumn<AnomalyDetectionManagementItems>> = [
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnDatafeedState',
+    width: '150px',
   },
 ];
 
@@ -88,6 +91,7 @@ const dfaColumns: Array<EuiBasicTableColumn<AnalyticsManagementItems>> = [
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnId',
     scope: 'row',
+    width: '250px',
     render: (id: string) => <DFAnalyticsJobIdLink jobId={id} />,
   },
   {
@@ -107,6 +111,7 @@ const dfaColumns: Array<EuiBasicTableColumn<AnalyticsManagementItems>> = [
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnSourceIndex',
+    width: '200px',
   },
   {
     field: 'dest_index',
@@ -116,6 +121,7 @@ const dfaColumns: Array<EuiBasicTableColumn<AnalyticsManagementItems>> = [
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnDestIndex',
+    width: '200px',
   },
   {
     field: 'job_type',
@@ -125,6 +131,7 @@ const dfaColumns: Array<EuiBasicTableColumn<AnalyticsManagementItems>> = [
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnJobType',
+    width: '150px',
   },
   {
     field: 'state',
@@ -134,6 +141,7 @@ const dfaColumns: Array<EuiBasicTableColumn<AnalyticsManagementItems>> = [
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnState',
+    width: '100px',
   },
 ];
 
@@ -147,6 +155,7 @@ const trainedModelColumns: Array<EuiBasicTableColumn<TrainedModelsManagementItem
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnId',
     scope: 'row',
+    width: '250px',
     render: (id: string) => <TrainedModelLink id={id} />,
   },
   {
@@ -169,6 +178,7 @@ const trainedModelColumns: Array<EuiBasicTableColumn<TrainedModelsManagementItem
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnType',
+    width: '250px',
   },
   {
     field: 'state',
@@ -178,5 +188,6 @@ const trainedModelColumns: Array<EuiBasicTableColumn<TrainedModelsManagementItem
     sortable: true,
     truncateText: true,
     'data-test-subj': 'mlSpaceManagementTableColumnState',
+    width: '100px',
   },
 ];

x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/space_management/space_management.tsx

@@ -16,6 +16,7 @@ import {
   EuiInMemoryTable,
   SearchFilterConfig,
   EuiBasicTableColumn,
+  EuiProgress,
 } from '@elastic/eui';
 
 import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
@@ -102,6 +103,8 @@ export const SpaceManagement: FC<Props> = ({ spacesApi, setCurrentTab }) => {
               'data-test-subj': 'mlSpaceManagementTableColumnSpaces',
               sortable: true,
               truncateText: true,
+              align: 'right',
+              width: '10%',
               render: (item: ManagementItems) => {
                 return (
                   <MLSavedObjectsSpacesList
@@ -122,11 +125,12 @@ export const SpaceManagement: FC<Props> = ({ spacesApi, setCurrentTab }) => {
   const getTable = useCallback(() => {
     return (
       <>
+        {isLoading ? <EuiProgress size="xs" color="accent" /> : null}
+
         <EuiSpacer size="m" />
         {items === undefined ? null : (
           <>
-            <EuiFlexGroup>
+            <EuiFlexGroup justifyContent={'flexEnd'} gutterSize={'none'}>
-              <EuiFlexItem />
               <EuiFlexItem grow={false}>
                 <RefreshButton
                   onRefreshClick={refresh.bind(null, currentTabId)}
@@ -210,6 +214,9 @@ export const RefreshButton: FC<{ onRefreshClick: () => void; isRefreshing: boole
     data-test-subj={`mlRefreshJobListButton${isRefreshing ? ' loading' : ' loaded'}`}
     onClick={onRefreshClick}
     isLoading={isRefreshing}
+    iconType={'refresh'}
+    iconSide={'left'}
+    iconSize={'m'}
   >
     <FormattedMessage id="xpack.ml.management.list.refreshButtonLabel" defaultMessage="Refresh" />
   </EuiButtonEmpty>

x-pack/plugins/ml/public/application/trained_models/models_management/model_link.tsx

@@ -20,5 +20,9 @@ export const TrainedModelLink: FC<TrainedModelLinkProps> = ({ id }) => {
     pageState: { modelId: id },
   });
 
-  return <EuiLink href={href}>{id}</EuiLink>;
+  return (
+    <EuiLink href={href} css={{ overflow: 'hidden', 'text-overflow': 'ellipsis' }} title={id}>
+      {id}
+    </EuiLink>
+  );
 };

x-pack/plugins/translations/translations/fr-FR.json

@@ -19223,7 +19223,6 @@
     "xpack.ml.jobsList.nodeAvailableWarning.unavailableCreateOrRunJobsDescription": "Vous ne pourrez ni créer ni exécuter de tâches.",
     "xpack.ml.jobsList.noJobsFoundLabel": "Aucune tâche n'a été trouvée",
     "xpack.ml.jobsList.processedRecordsLabel": "Enregistrements traités",
-    "xpack.ml.jobsList.refreshButtonLabel": "Actualiser",
     "xpack.ml.jobsList.resetActionStatusText": "réinitialiser",
     "xpack.ml.jobsList.resetJobErrorMessage": "Impossible de réinitialiser les tâches",
     "xpack.ml.jobsList.resetJobModal.cancelButtonLabel": "Annuler",

x-pack/plugins/translations/translations/ja-JP.json

@@ -19308,7 +19308,6 @@
     "xpack.ml.jobsList.nodeAvailableWarning.unavailableCreateOrRunJobsDescription": "ジョブの作成または実行はできません。",
     "xpack.ml.jobsList.noJobsFoundLabel": "ジョブが見つかりません",
     "xpack.ml.jobsList.processedRecordsLabel": "処理済みレコード",
-    "xpack.ml.jobsList.refreshButtonLabel": "更新",
     "xpack.ml.jobsList.resetActionStatusText": "リセット",
     "xpack.ml.jobsList.resetJobErrorMessage": "ジョブのリセットに失敗しました",
     "xpack.ml.jobsList.resetJobModal.cancelButtonLabel": "キャンセル",

x-pack/plugins/translations/translations/zh-CN.json

@@ -19328,7 +19328,6 @@
     "xpack.ml.jobsList.nodeAvailableWarning.unavailableCreateOrRunJobsDescription": "您将无法创建或运行作业。",
     "xpack.ml.jobsList.noJobsFoundLabel": "找不到作业",
     "xpack.ml.jobsList.processedRecordsLabel": "已处理记录",
-    "xpack.ml.jobsList.refreshButtonLabel": "刷新",
     "xpack.ml.jobsList.resetActionStatusText": "重置",
     "xpack.ml.jobsList.resetJobErrorMessage": "作业无法重置",
     "xpack.ml.jobsList.resetJobModal.cancelButtonLabel": "取消",