From a9ba123bdf645b15f60cd8c736f601bae50ff753 Mon Sep 17 00:00:00 2001
From: Jusheng Huang <117657272+viajes7@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:28:50 +0800
Subject: [PATCH] [Index Management] Feature add button handler for the ilm
 banner via extension service (#199077)

## Summary

Close #27159

Add a button handler for the ilm banner.


![image](https://github.com/user-attachments/assets/c3314a4d-8632-4913-8ea5-6dba5f9d3659)

UI reference Eui callout component style.
[https://eui.elastic.co/#/display/callout#warning](https://eui.elastic.co/#/display/callout#warning)


![image](https://github.com/user-attachments/assets/92f4afcf-3a14-491f-9ce8-31d4b4efc430)
---
 .../extend_index_management.test.tsx.snap     |  8 ++++
 .../__jest__/extend_index_management.test.tsx | 18 +++++++++
 .../public/extend_index_management/index.tsx  |  8 ++++
 .../index_table/index_table.container.js      |  4 ++
 .../index_list/index_table/index_table.js     | 39 +++++++++++++++----
 5 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
index ff8d0f4d7caa..83e73494fcb0 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
@@ -2,6 +2,14 @@
 
 exports[`extend index management ilm banner extension should return extension when any index has lifecycle error 1`] = `
 Object {
+  "action": Object {
+    "buttonLabel": "Retry lifecycle step",
+    "indexNames": Array [
+      "testy3",
+    ],
+    "requestMethod": [Function],
+    "successMessage": "Called retry lifecycle step for: \\"testy3\\"",
+  },
   "filter": Query {
     "ast": _AST {
       "_clauses": Array [
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.tsx
index e26000bcacc7..78a2aeddec1c 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.tsx
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.tsx
@@ -302,6 +302,24 @@ describe('extend index management', () => {
       expect(extension).toBeDefined();
       expect(extension).toMatchSnapshot();
     });
+
+    test('should return action definition when any index has lifecycle error', () => {
+      const extension = ilmBannerExtension([
+        indexWithoutLifecyclePolicy,
+        indexWithLifecyclePolicy,
+        indexWithLifecycleError,
+      ]);
+      const { requestMethod, successMessage, buttonLabel } =
+        retryLifecycleActionExtension({
+          indices: [indexWithLifecycleError],
+        }) ?? {};
+      expect(extension?.action).toEqual({
+        requestMethod,
+        successMessage,
+        buttonLabel,
+        indexNames: [indexWithLifecycleError.name],
+      });
+    });
   });
 
   describe('ilm summary extension', () => {
diff --git a/x-pack/plugins/index_lifecycle_management/public/extend_index_management/index.tsx b/x-pack/plugins/index_lifecycle_management/public/extend_index_management/index.tsx
index 519a0606c36a..2466020deb06 100644
--- a/x-pack/plugins/index_lifecycle_management/public/extend_index_management/index.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/extend_index_management/index.tsx
@@ -128,12 +128,20 @@ export const ilmBannerExtension = (indices: Index[]) => {
   if (!numIndicesWithLifecycleErrors) {
     return null;
   }
+  const { requestMethod, successMessage, indexNames, buttonLabel } =
+    retryLifecycleActionExtension({ indices: indicesWithLifecycleErrors }) ?? {};
   return {
     type: 'warning',
     filter: Query.parse(`${stepPath}:ERROR`),
     filterLabel: i18n.translate('xpack.indexLifecycleMgmt.indexMgmtBanner.filterLabel', {
       defaultMessage: 'Show errors',
     }),
+    action: {
+      buttonLabel,
+      indexNames: indexNames?.[0] ?? [],
+      requestMethod,
+      successMessage,
+    },
     title: i18n.translate('xpack.indexLifecycleMgmt.indexMgmtBanner.errorMessage', {
       defaultMessage: `{ numIndicesWithLifecycleErrors, number}
           {numIndicesWithLifecycleErrors, plural, one {index has} other {indices have} }
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
index 6ea481ae463a..66406576902c 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
@@ -25,6 +25,7 @@ import {
   sortChanged,
   loadIndices,
   toggleChanged,
+  performExtensionAction,
 } from '../../../../store/actions';
 
 import { IndexTable as PresentationComponent } from './index_table';
@@ -63,6 +64,9 @@ const mapDispatchToProps = (dispatch) => {
     loadIndices: () => {
       dispatch(loadIndices());
     },
+    performExtensionAction: (requestMethod, successMessage, indexNames) => {
+      dispatch(performExtensionAction({ requestMethod, successMessage, indexNames }));
+    },
   };
 };
 
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
index 1d102419c5bd..ee72f56d2103 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
@@ -404,24 +404,47 @@ export class IndexTable extends Component {
   }
 
   renderBanners(extensionsService) {
-    const { allIndices = [], filterChanged } = this.props;
+    const { allIndices = [], filterChanged, performExtensionAction } = this.props;
     return extensionsService.banners.map((bannerExtension, i) => {
       const bannerData = bannerExtension(allIndices);
       if (!bannerData) {
         return null;
       }
 
-      const { type, title, message, filter, filterLabel } = bannerData;
+      const { type, title, message, filter, filterLabel, action } = bannerData;
 
       return (
         <Fragment key={`bannerExtension${i}`}>
           <EuiCallOut color={type} size="m" title={title}>
-            <EuiText>
-              {message}
-              {filter ? (
-                <EuiLink onClick={() => filterChanged(filter)}>{filterLabel}</EuiLink>
-              ) : null}
-            </EuiText>
+            {message && <p>{message}</p>}
+            {action || filter ? (
+              <EuiFlexGroup gutterSize="s" alignItems="center">
+                {action ? (
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      color="warning"
+                      fill
+                      onClick={() => {
+                        performExtensionAction(
+                          action.requestMethod,
+                          action.successMessage,
+                          action.indexNames
+                        );
+                      }}
+                    >
+                      {action.buttonLabel}
+                    </EuiButton>
+                  </EuiFlexItem>
+                ) : null}
+                {filter ? (
+                  <EuiFlexItem grow={false}>
+                    <EuiText>
+                      <EuiLink onClick={() => filterChanged(filter)}>{filterLabel}</EuiLink>
+                    </EuiText>
+                  </EuiFlexItem>
+                ) : null}
+              </EuiFlexGroup>
+            ) : null}
           </EuiCallOut>
           <EuiSpacer size="m" />
         </Fragment>