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

* 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 (cherry picked from commit 7791671371) Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>
2025-04-24 09:48:58 -04:00 · 2022-07-28 13:16:53 -04:00 · 2022-07-28 13:16:53 -04:00 · 6adce2d03f
commit 6adce2d03f
parent 893a14f141
10 changed files with 37 additions and 45 deletions
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx
+++ b/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 = (
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/job_id_link.tsx
+++ b/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 style={{ marginLeft: '4px' }} key={props.groupId} href={href}>
+      <EuiLink 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>
    );
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/refresh_jobs_list_button/index.js
+++ b/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';
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/refresh_jobs_list_button/refresh_jobs_list_button.js
+++ b/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,
-};
--- a/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/space_management/columns.tsx
+++ b/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',
  },
 ];
--- a/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/space_management/space_management.tsx
+++ b/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>
-              <EuiFlexItem />
+            <EuiFlexGroup justifyContent={'flexEnd'} gutterSize={'none'}>
              <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>
--- a/x-pack/plugins/ml/public/application/trained_models/models_management/model_link.tsx
+++ b/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>
+  );
 };
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/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",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -19310,7 +19310,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": "キャンセル",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -19330,7 +19330,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": "取消",