[ILM] Added a flyout with linked index templates (elastic#106734)

* [ILM] Server to use new in_use_by property returned by ES API

* [ILM] Cleaning up the PR changes

* [ILM] Fixed functional test

* [ILM] Fixed 'modifiedDate' display in the table

* [ILM] Fixed sorting test

* [ILM] Removed a not needed function declaration

* [ILM] Added index templates flyout to the policies list

* [ILM] Added test for the index templates flyout

* [ILM] Added an a11y test for the index templates flyout

* Update x-pack/plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx

Co-authored-by: debadair <debadair@elastic.co>

* [ILM] Fixed jest test and made 0 index templates to not open the flyout

* [ILM] Fixed a11y test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: debadair <debadair@elastic.co>

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/init_test_bed.tsx

@@ -23,9 +23,6 @@ const getTestBedConfig = (testBedConfigArgs?: Partial<TestBedConfig>): TestBedCo
       initialEntries: [`/policies/edit/${POLICY_NAME}`],
       componentRoutePath: `/policies/edit/:policyName`,
     },
-    defaultProps: {
-      getUrlForApp: () => {},
-    },
     ...testBedConfigArgs,
   };
 };
@@ -38,6 +35,7 @@ const EditPolicyContainer = ({ appServicesContext, ...rest }: any) => {
       services={{
         breadcrumbService,
         license: licensingMock.createLicense({ license: { type: 'enterprise' } }),
+        getUrlForApp: () => {},
         ...appServicesContext,
       }}
     >

x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx

@@ -14,7 +14,6 @@ import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test';
 import {
   fatalErrorsServiceMock,
   injectedMetadataServiceMock,
-  scopedHistoryMock,
 } from '../../../../src/core/public/mocks';
 import { HttpService } from '../../../../src/core/public/http';
 import { usageCollectionPluginMock } from '../../../../src/plugins/usage_collection/public/mocks';
@@ -23,6 +22,7 @@ import { PolicyFromES } from '../common/types';
 import { PolicyTable } from '../public/application/sections/policy_table/policy_table';
 import { init as initHttp } from '../public/application/services/http';
 import { init as initUiMetric } from '../public/application/services/ui_metric';
+import { KibanaContextProvider } from '../public/shared_imports';
 
 initHttp(
   new HttpService().setup({
@@ -36,20 +36,40 @@ initUiMetric(usageCollectionPluginMock.createSetupContract());
 const testDate = '2020-07-21T14:16:58.666Z';
 const testDateFormatted = moment(testDate).format('YYYY-MM-DD HH:mm:ss');
 
-const policies: PolicyFromES[] = [];
-for (let i = 0; i < 105; i++) {
+const testPolicy = {
+  version: 0,
+  modifiedDate: testDate,
+  indices: [`index1`],
+  indexTemplates: [`indexTemplate1`, `indexTemplate2`, `indexTemplate3`, `indexTemplate4`],
+  name: `testy0`,
+  policy: {
+    name: `testy0`,
+    phases: {},
+  },
+};
+
+const policies: PolicyFromES[] = [testPolicy];
+for (let i = 1; i < 105; i++) {
   policies.push({
     version: i,
-    modifiedDate: i === 0 ? testDate : moment().subtract(i, 'days').toISOString(),
+    modifiedDate: moment().subtract(i, 'days').toISOString(),
     indices: i % 2 === 0 ? [`index${i}`] : [],
+    indexTemplates: i % 2 === 0 ? [`indexTemplate${i}`] : [],
     name: `testy${i}`,
     policy: {
       name: `testy${i}`,
       phases: {},
     },
   });
 }
-jest.mock('');
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    createHref: jest.fn(),
+  }),
+}));
+
 let component: ReactElement;
 
 const snapshot = (rendered: string[]) => {
@@ -88,24 +108,14 @@ const openContextMenu = (buttonIndex: number) => {
 describe('policy table', () => {
   beforeEach(() => {
     component = (
-      <PolicyTable
-        policies={policies}
-        history={scopedHistoryMock.create()}
-        navigateToApp={jest.fn()}
-        updatePolicies={jest.fn()}
-      />
+      <KibanaContextProvider services={{ getUrlForApp: () => '' }}>
+        <PolicyTable policies={policies} updatePolicies={jest.fn()} />
+      </KibanaContextProvider>
     );
   });
 
   test('should show empty state when there are not any policies', () => {
-    component = (
-      <PolicyTable
-        policies={[]}
-        history={scopedHistoryMock.create()}
-        navigateToApp={jest.fn()}
-        updatePolicies={jest.fn()}
-      />
-    );
+    component = <PolicyTable policies={[]} updatePolicies={jest.fn()} />;
     const rendered = mountWithIntl(component);
     mountedSnapshot(rendered);
   });
@@ -147,6 +157,9 @@ describe('policy table', () => {
   test('should sort when linked indices header is clicked', () => {
     testSort('indices');
   });
+  test('should sort when linked index templates header is clicked', () => {
+    testSort('indexTemplates');
+  });
   test('should have proper actions in context menu when there are linked indices', () => {
     const rendered = openContextMenu(0);
     const buttons = rendered.find('button.euiContextMenuItem');
@@ -180,9 +193,21 @@ describe('policy table', () => {
   });
   test('displays policy properties', () => {
     const rendered = mountWithIntl(component);
-    const firstRow = findTestSubject(rendered, 'policyTableRow').at(0).text();
-    const version = 0;
-    const numberOfIndices = 1;
-    expect(firstRow).toBe(`testy0${numberOfIndices}${version}${testDateFormatted}Actions`);
+    const firstRow = findTestSubject(rendered, 'policyTableRow-testy0').text();
+    const numberOfIndices = testPolicy.indices.length;
+    const numberOfIndexTemplates = testPolicy.indexTemplates.length;
+    expect(firstRow).toBe(
+      `testy0${numberOfIndices}${numberOfIndexTemplates}${testPolicy.version}${testDateFormatted}Actions`
+    );
+  });
+  test('opens a flyout with index templates', () => {
+    const rendered = mountWithIntl(component);
+    const indexTemplatesButton = findTestSubject(rendered, 'viewIndexTemplates').at(0);
+    indexTemplatesButton.simulate('click');
+    rendered.update();
+    const flyoutTitle = findTestSubject(rendered, 'indexTemplatesFlyoutHeader').text();
+    expect(flyoutTitle).toContain('testy0');
+    const indexTemplatesLinks = findTestSubject(rendered, 'indexTemplateLink');
+    expect(indexTemplatesLinks.length).toBe(testPolicy.indexTemplates.length);
   });
 });

x-pack/plugins/index_lifecycle_management/public/application/app.tsx

@@ -7,50 +7,25 @@
 
 import React, { useEffect } from 'react';
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
-import { ScopedHistory, ApplicationStart } from 'kibana/public';
+import { ScopedHistory } from 'kibana/public';
 import { METRIC_TYPE } from '@kbn/analytics';
 
-import { UIM_APP_LOAD } from './constants/ui_metric';
+import { UIM_APP_LOAD } from './constants';
 import { EditPolicy } from './sections/edit_policy';
 import { PolicyTable } from './sections/policy_table';
 import { trackUiMetric } from './services/ui_metric';
 import { ROUTES } from './services/navigation';
 
-export const AppWithRouter = ({
-  history,
-  navigateToApp,
-  getUrlForApp,
-}: {
-  history: ScopedHistory;
-  navigateToApp: ApplicationStart['navigateToApp'];
-  getUrlForApp: ApplicationStart['getUrlForApp'];
-}) => (
-  <Router history={history}>
-    <App navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
-  </Router>
-);
-
-export const App = ({
-  navigateToApp,
-  getUrlForApp,
-}: {
-  navigateToApp: ApplicationStart['navigateToApp'];
-  getUrlForApp: ApplicationStart['getUrlForApp'];
-}) => {
+export const App = ({ history }: { history: ScopedHistory }) => {
   useEffect(() => trackUiMetric(METRIC_TYPE.LOADED, UIM_APP_LOAD), []);
 
   return (
-    <Switch>
-      <Redirect exact from="/" to={ROUTES.list} />
-      <Route
-        exact
-        path={ROUTES.list}
-        render={(props) => <PolicyTable {...props} navigateToApp={navigateToApp} />}
-      />
-      <Route
-        path={ROUTES.edit}
-        render={(props) => <EditPolicy {...props} getUrlForApp={getUrlForApp} />}
-      />
-    </Switch>
+    <Router history={history}>
+      <Switch>
+        <Redirect exact from="/" to={ROUTES.list} />
+        <Route exact path={ROUTES.list} component={PolicyTable} />
+        <Route path={ROUTES.edit} component={EditPolicy} />
+      </Switch>
+    </Router>
   );
 };

x-pack/plugins/index_lifecycle_management/public/application/components/index_templates_flyout.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiButtonEmpty,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiTitle,
+} from '@elastic/eui';
+import { PolicyFromES } from '../../../common/types';
+import { useKibana } from '../../shared_imports';
+import { getTemplateDetailsLink } from '../../../../index_management/public/';
+
+interface Props {
+  policy: PolicyFromES;
+  close: () => void;
+}
+export const IndexTemplatesFlyout: FunctionComponent<Props> = ({ policy, close }) => {
+  const {
+    services: { getUrlForApp },
+  } = useKibana();
+  const getUrlForIndexTemplate = (name: string) => {
+    return getUrlForApp('management', {
+      path: `data/index_management${getTemplateDetailsLink(name)}`,
+    });
+  };
+  return (
+    <EuiFlyout onClose={close}>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m" data-test-subj="indexTemplatesFlyoutHeader">
+          <h2>
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.policyTable.indexTemplatesFlyout.headerText"
+              defaultMessage="Index templates that apply {policyName}"
+              values={{ policyName: policy.name }}
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiInMemoryTable
+          pagination={true}
+          items={policy.indexTemplates ?? []}
+          columns={[
+            {
+              name: i18n.translate(
+                'xpack.indexLifecycleMgmt.policyTable.indexTemplatesTable.nameHeader',
+                { defaultMessage: 'Index template name' }
+              ),
+              render: (value: string) => {
+                return (
+                  <EuiLink
+                    data-test-subj="indexTemplateLink"
+                    className="eui-textBreakAll"
+                    href={getUrlForIndexTemplate(value)}
+                  >
+                    {value}
+                  </EuiLink>
+                );
+              },
+            },
+          ]}
+        />
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty iconType="cross" onClick={close} flush="left">
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.indexTemplatesFlyout.closeButtonLabel"
+            defaultMessage="Close"
+          />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -14,30 +14,31 @@ import { ILicense } from '../../../licensing/public';
 
 import { KibanaContextProvider } from '../shared_imports';
 
-import { AppWithRouter } from './app';
+import { App } from './app';
 
 import { BreadcrumbService } from './services/breadcrumbs';
+import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
 
 export const renderApp = (
   element: Element,
   I18nContext: I18nStart['Context'],
   history: ScopedHistory,
-  navigateToApp: ApplicationStart['navigateToApp'],
-  getUrlForApp: ApplicationStart['getUrlForApp'],
+  application: ApplicationStart,
   breadcrumbService: BreadcrumbService,
   license: ILicense,
   cloud?: CloudSetup
 ): UnmountCallback => {
+  const { navigateToApp, getUrlForApp } = application;
   render(
-    <I18nContext>
-      <KibanaContextProvider services={{ cloud, breadcrumbService, license }}>
-        <AppWithRouter
-          history={history}
-          navigateToApp={navigateToApp}
-          getUrlForApp={getUrlForApp}
-        />
-      </KibanaContextProvider>
-    </I18nContext>,
+    <RedirectAppLinks application={application}>
+      <I18nContext>
+        <KibanaContextProvider
+          services={{ cloud, breadcrumbService, license, navigateToApp, getUrlForApp }}
+        >
+          <App history={history} />
+        </KibanaContextProvider>
+      </I18nContext>
+    </RedirectAppLinks>,
     element
   );
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx

@@ -85,9 +85,9 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({
   canBeDisabled = true,
 }) => {
   const {
-    services: { cloud },
+    services: { cloud, getUrlForApp },
   } = useKibana();
-  const { getUrlForApp, policy, license, isNewPolicy } = useEditPolicyContext();
+  const { policy, license, isNewPolicy } = useEditPolicyContext();
   const { isUsingSearchableSnapshotInHotPhase } = useConfiguration();
 
   const searchableSnapshotRepoPath = `phases.${phase}.actions.searchable_snapshot.snapshot_repository`;