[Index Management] Feature add button handler for the ilm banner via …

…extension service (elastic#199077) ## Summary Close elastic#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)
TattdCodeMonkey · Nov 21, 2024 · a9ba123 · a9ba123
1 parent 492917d
commit a9ba123
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 8 deletions.
diff --git a/...s/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/...s/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
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
@@ -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
@@ -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/...nagement/public/application/sections/home/index_list/index_table/index_table.container.js b/...nagement/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/...s/index_management/public/application/sections/home/index_list/index_table/index_table.js b/...s/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>