From b6413753abd3e143cc5b48afd3543329faaac900 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Thu, 19 Dec 2024 17:32:53 +0100
Subject: [PATCH 1/3] remove special layout for job status

---
 .../analytics_list/expanded_row.tsx           | 17 ++++++-
 .../expanded_row_details_pane.tsx             | 46 +++++++------------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
index 2ca4409c3a98a..38f8949443a56 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
@@ -155,9 +155,22 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       defaultMessage: 'Overall',
     }),
     items: [
-      { title: 'badge', description: stateValues.state },
       {
-        title: 'Create time',
+        title: i18n.translate(
+          'xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettings.status',
+          {
+            defaultMessage: 'Status',
+          }
+        ),
+        description: stateValues.state,
+      },
+      {
+        title: i18n.translate(
+          'xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettings.createTime',
+          {
+            defaultMessage: 'Create time',
+          }
+        ),
         description: formatHumanReadableDateTimeSeconds(
           moment(item.config.create_time).unix() * 1000
         ),
diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
index a2d759d21e77f..0f1327c660ffe 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -11,7 +11,6 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiBasicTable,
-  EuiBetaBadge,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
   EuiFlexGroup,
@@ -41,35 +40,24 @@ export const OverallDetails: FC<{
   overallDetails: SectionConfig;
 }> = ({ overallDetails }) => (
   <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
-    {overallDetails.items.map((item) => {
-      const key = item.title;
-      if (item.title === 'badge') {
-        return (
-          <EuiFlexItem grow={false} key={key}>
-            <EuiBetaBadge label={item.description} color="subdued" title={item.title} />
+    {overallDetails.items.map((item) => (
+      <EuiFlexItem grow={false} key={item.title}>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <EuiDescriptionListDescription className="descriptionListTitle">
+              <EuiText size="xs">{item.title}</EuiText>
+            </EuiDescriptionListDescription>
           </EuiFlexItem>
-        );
-      }
-
-      return (
-        <EuiFlexItem grow={false} key={key}>
-          <EuiFlexGroup gutterSize="xs">
-            <EuiFlexItem grow={false}>
-              <EuiDescriptionListDescription className="descriptionListTitle">
-                <EuiText size="xs">{item.title}</EuiText>
-              </EuiDescriptionListDescription>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiDescriptionListTitle className="descriptionListDescription">
-                <EuiText size="s">
-                  <h5>{item.description}</h5>
-                </EuiText>
-              </EuiDescriptionListTitle>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      );
-    })}
+          <EuiFlexItem>
+            <EuiDescriptionListTitle className="descriptionListDescription">
+              <EuiText size="s">
+                <h5>{item.description}</h5>
+              </EuiText>
+            </EuiDescriptionListTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    ))}
   </EuiFlexGroup>
 );
 

From 64133feb6a426799c0c732ccb4261b3f05fdf968 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Thu, 19 Dec 2024 20:16:00 +0100
Subject: [PATCH 2/3] fix functional test assertions

---
 .../classification_creation.ts                |  3 +-
 .../classification_creation_saved_search.ts   | 24 ++++++++++---
 .../outlier_detection_creation.ts             |  9 ++++-
 ...outlier_detection_creation_saved_search.ts | 36 ++++++++++++++++---
 .../regression_creation.ts                    |  3 +-
 .../regression_creation_saved_search.ts       | 24 ++++++++++---
 6 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts
index 11333741acf48..8ee2e23e2be84 100644
--- a/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts
+++ b/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts
@@ -123,7 +123,8 @@ export default function ({ getService }: FtrProviderContext) {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
                 expectedEntries: [
-                  'STOPPED',
+                  'Status',
+                  'stopped',
                   'Create time',
                   'Model memory limit',
                   '25mb',
diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation_saved_search.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation_saved_search.ts
index b3789ceeac28b..a76d0fb27d92c 100644
--- a/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation_saved_search.ts
+++ b/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation_saved_search.ts
@@ -119,7 +119,8 @@ export default function ({ getService }: FtrProviderContext) {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
                 expectedEntries: [
-                  'STOPPED',
+                  'Status',
+                  'stopped',
                   'Create time',
                   'Model memory limit',
                   '20mb',
@@ -219,7 +220,8 @@ export default function ({ getService }: FtrProviderContext) {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
                 expectedEntries: [
-                  'STOPPED',
+                  'Status',
+                  'stopped',
                   'Create time',
                   'Model memory limit',
                   '20mb',
@@ -317,7 +319,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '7mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '7mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
@@ -407,7 +416,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '6mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '6mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts
index 52d81d2663cc5..d706cb4ec9468 100644
--- a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts
+++ b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts
@@ -135,7 +135,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '2mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '2mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation_saved_search.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation_saved_search.ts
index ddfc9e540bee1..98e8e45c241d2 100644
--- a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation_saved_search.ts
+++ b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation_saved_search.ts
@@ -83,7 +83,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '1mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '1mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
@@ -160,7 +167,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '1mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '1mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
@@ -237,7 +251,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '1mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '1mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
@@ -315,7 +336,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '1mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '1mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts
index 6978452afdc32..07126c69a250c 100644
--- a/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts
+++ b/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts
@@ -119,7 +119,8 @@ export default function ({ getService }: FtrProviderContext) {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
                 expectedEntries: [
-                  'STOPPED',
+                  'Status',
+                  'stopped',
                   'Create time',
                   'Model memory limit',
                   '16mb',
diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation_saved_search.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation_saved_search.ts
index fb5702e98ac1d..b9553fd69be71 100644
--- a/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation_saved_search.ts
+++ b/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation_saved_search.ts
@@ -89,7 +89,8 @@ export default function ({ getService }: FtrProviderContext) {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
                 expectedEntries: [
-                  'STOPPED',
+                  'Status',
+                  'stopped',
                   'Create time',
                   'Model memory limit',
                   '10mb',
@@ -177,7 +178,8 @@ export default function ({ getService }: FtrProviderContext) {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
                 expectedEntries: [
-                  'STOPPED',
+                  'Status',
+                  'stopped',
                   'Create time',
                   'Model memory limit',
                   '10mb',
@@ -264,7 +266,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '5mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '5mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',
@@ -346,7 +355,14 @@ export default function ({ getService }: FtrProviderContext) {
               {
                 section: 'state',
                 // Don't include the 'Create time' value entry as it's not stable.
-                expectedEntries: ['STOPPED', 'Create time', 'Model memory limit', '5mb', 'Version'],
+                expectedEntries: [
+                  'Status',
+                  'stopped',
+                  'Create time',
+                  'Model memory limit',
+                  '5mb',
+                  'Version',
+                ],
               },
               {
                 section: 'stats',

From 3c80c88787fe6150ae676fdd50a669e362ac6ae8 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Tue, 7 Jan 2025 16:31:11 +0100
Subject: [PATCH 3/3] use EuiBadge for status

---
 .../components/analytics_list/expanded_row.tsx     |  1 +
 .../analytics_list/expanded_row_details_pane.tsx   | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
index 38f8949443a56..3cd99f7bfdebd 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
@@ -162,6 +162,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
             defaultMessage: 'Status',
           }
         ),
+        type: 'badge',
         description: stateValues.state,
       },
       {
diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
index 0f1327c660ffe..8c63f3bbc2894 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import {
+  EuiBadge,
   EuiBasicTable,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
@@ -24,6 +25,7 @@ import {
 
 export interface SectionItem {
   title: string;
+  type?: 'plain' | 'badge';
   description: string | ReactElement;
 }
 export interface SectionConfig {
@@ -42,7 +44,7 @@ export const OverallDetails: FC<{
   <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
     {overallDetails.items.map((item) => (
       <EuiFlexItem grow={false} key={item.title}>
-        <EuiFlexGroup gutterSize="xs">
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiDescriptionListDescription className="descriptionListTitle">
               <EuiText size="xs">{item.title}</EuiText>
@@ -50,9 +52,13 @@ export const OverallDetails: FC<{
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiDescriptionListTitle className="descriptionListDescription">
-              <EuiText size="s">
-                <h5>{item.description}</h5>
-              </EuiText>
+              {item.type === 'badge' ? (
+                <EuiBadge color="hollow">{item.description}</EuiBadge>
+              ) : (
+                <EuiText size="s">
+                  <h5>{item.description}</h5>
+                </EuiText>
+              )}
             </EuiDescriptionListTitle>
           </EuiFlexItem>
         </EuiFlexGroup>