making badges clickable to filter in index management (#29635) (#29679)

* making badges clickable to filter in index management

* improving a11y for clickable badge

x-pack/plugins/cross_cluster_replication/public/extend_index_management/index.js

@@ -17,7 +17,8 @@ export const followerBadgeExtension = {
   label: i18n.translate('xpack.crossClusterReplication.indexMgmtBadge.followerLabel', {
     defaultMessage: 'Follower',
   }),
-  color: 'default'
+  color: 'default',
+  filterExpression: 'isFollowerIndex:true'
 };
 
 addBadgeExtension(followerBadgeExtension);

x-pack/plugins/index_management/public/index_management_extensions.js

@@ -47,6 +47,7 @@ const badgeExtensions = [
     label: i18n.translate('xpack.idxMgmt.frozenBadgeLabel', {
       defaultMessage: 'Frozen',
     }),
+    filterExpression: 'isFrozen:true',
     color: 'primary'
   }
 ];

x-pack/plugins/index_management/public/lib/render_badges.js

@@ -6,15 +6,34 @@
 
 
 import React, { Fragment } from 'react';
-import { EuiBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiBadge, EuiSearchBar } from '@elastic/eui';
 import { getBadgeExtensions } from '../index_management_extensions';
-export const renderBadges = (index) => {
+export const renderBadges = (index, filterChanged) => {
   const badgeLabels = [];
-  getBadgeExtensions().forEach(({ matchIndex, label, color }) => {
+  getBadgeExtensions().forEach(({ matchIndex, label, color, filterExpression }) => {
     if (matchIndex(index)) {
+      const clickHandler = () => {
+        filterChanged
+          && filterExpression
+          && filterChanged(EuiSearchBar.Query.parse(filterExpression));
+      };
       badgeLabels.push(
         <Fragment key={label}>
-          {' '}<EuiBadge color={color}>{label}</EuiBadge>
+          {' '}
+          <EuiBadge
+            color={color}
+            onClick={clickHandler}
+            aria-label={i18n.translate(
+              'xpack.idxMgmt.badgeAriaLabel',
+              {
+                defaultMessage: '{label}. Select to filter on this.',
+                values: { label },
+              },
+            )}
+          >
+            {label}
+          </EuiBadge>
         </Fragment>
       );
     }

x-pack/plugins/index_management/public/sections/index_list/components/index_table/index_table.js

@@ -216,20 +216,23 @@ export class IndexTableUi extends Component {
   }
 
   buildRowCell(fieldName, value, index) {
-    const { openDetailPanel } = this.props;
+    const { openDetailPanel, filterChanged } = this.props;
     if (fieldName === 'health') {
       return <EuiHealth color={healthToColor(value)}>{value}</EuiHealth>;
     } else if (fieldName === 'name') {
       return (
-        <EuiLink
-          className="indTable__link"
-          data-test-subj="indexTableIndexNameLink"
-          onClick={() => {
-            openDetailPanel(value);
-          }}
-        >
-          {value}{renderBadges(index)}
-        </EuiLink>
+        <Fragment>
+          <EuiLink
+            className="indTable__link"
+            data-test-subj="indexTableIndexNameLink"
+            onClick={() => {
+              openDetailPanel(value);
+            }}
+          >
+            {value}
+          </EuiLink>
+          {renderBadges(index, filterChanged)}
+        </Fragment>
       );
     }
     return value;

x-pack/plugins/rollup/public/extend_index_management/index.js

@@ -27,7 +27,8 @@ export const rollupBadgeExtension = {
   label: i18n.translate('xpack.rollupJobs.indexMgmtBadge.rollupLabel', {
     defaultMessage: 'Rollup',
   }),
-  color: 'secondary'
+  color: 'secondary',
+  filterExpression: 'isRollupIndex:true'
 };
 
 addBadgeExtension(rollupBadgeExtension);