[8.x] [Index Management] Feature add button handler for the ilm banner via extension service (#199077) (#200965)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Index Management] Feature add button handler for the ilm banner via
extension service
(#199077)](https://github.com/elastic/kibana/pull/199077)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jusheng
Huang","email":"117657272+viajes7@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-20T15:28:50Z","message":"[Index
Management] Feature add button handler for the ilm banner via extension
service (#199077)\n\n## Summary\r\n\r\nClose #27159 \r\n\r\nAdd a button
handler for the ilm banner.
\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/c3314a4d-8632-4913-8ea5-6dba5f9d3659)\r\n\r\nUI
reference Eui callout component
style.\r\n[92f4afcf-3a14-491f-9ce8-31d4b4efc430)","sha":"c82e6edb97ed2fde7b76e662bc6cac3ac54b827b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Index
Management","Team:Kibana
Management","release_note:skip","💝community","v9.0.0","backport:prev-minor"],"title":"[Index
Management] Feature add button handler for the ilm banner via extension
service","number":199077,"url":"https://github.com/elastic/kibana/pull/199077","mergeCommit":{"message":"[Index
Management] Feature add button handler for the ilm banner via extension
service (#199077)\n\n## Summary\r\n\r\nClose #27159 \r\n\r\nAdd a button
handler for the ilm banner.
\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/c3314a4d-8632-4913-8ea5-6dba5f9d3659)\r\n\r\nUI
reference Eui callout component
style.\r\n[92f4afcf-3a14-491f-9ce8-31d4b4efc430)","sha":"c82e6edb97ed2fde7b76e662bc6cac3ac54b827b"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199077","number":199077,"mergeCommit":{"message":"[Index
Management] Feature add button handler for the ilm banner via extension
service (#199077)\n\n## Summary\r\n\r\nClose #27159 \r\n\r\nAdd a button
handler for the ilm banner.
\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/c3314a4d-8632-4913-8ea5-6dba5f9d3659)\r\n\r\nUI
reference Eui callout component
style.\r\n[92f4afcf-3a14-491f-9ce8-31d4b4efc430)","sha":"c82e6edb97ed2fde7b76e662bc6cac3ac54b827b"}}]}]
BACKPORT-->

Co-authored-by: Jusheng Huang <117657272+viajes7@users.noreply.github.com>

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 [

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', () => {

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} }

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 }));
+    },
   };
 };
 

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>