[Index Management] Add ingest pipelines link to the index details page

x-pack/plugins/index_management/README.md

@@ -34,14 +34,15 @@ interface IndexDetailsTab {
 
 An example of adding an ILM tab can be found in [this file](https://github.com/elastic/kibana/blob/main/x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx#L250).
 
-- `setIndexOverviewContent(content: IndexOverviewContent)`: replaces the default content in the overview tab (code block describing adding documents to the index) with the custom content. The custom content has the following interface: 
+- `setIndexOverviewContent(content: IndexContent)`: replaces the default content in the overview tab (code block describing adding documents to the index) with the custom content. The custom content has the following interface: 
 ```ts
-interface IndexOverviewContent {
+interface IndexContent {
   renderContent: (args: {
     index: Index;
     getUrlForApp: ApplicationStart['getUrlForApp'];
   }) => ReturnType<FunctionComponent>;
 ```
+- `setIndexMappingsContent(content: IndexContent)`: adds content to the mappings tab of the index details page. The content is displayed in the right bottom corner, below the mappings docs link. 
 
 ## Indices tab
 

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx

@@ -501,6 +501,28 @@ describe('<IndexDetailsPage />', () => {
         expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests + 1);
       });
     });
+
+    it('renders the content set via the extensions service', async () => {
+      const mappingsContent = 'test mappings extension';
+      await act(async () => {
+        testBed = await setup({
+          httpSetup,
+          dependencies: {
+            services: {
+              extensionsService: {
+                _indexMappingsContent: {
+                  renderContent: () => mappingsContent,
+                },
+              },
+            },
+          },
+        });
+      });
+      testBed.component.update();
+      await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Mappings);
+      const content = testBed.actions.getActiveTabContent();
+      expect(content).toContain(mappingsContent);
+    });
   });
 
   describe('Settings tab', () => {

x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx

@@ -50,7 +50,7 @@ const defaultTabs: IndexDetailsTab[] = [
     name: (
       <FormattedMessage id="xpack.idxMgmt.indexDetails.mappingsTitle" defaultMessage="Mappings" />
     ),
-    renderTabContent: ({ index }) => <DetailsPageMappings indexName={index.name} />,
+    renderTabContent: ({ index }) => <DetailsPageMappings index={index} />,
     order: 20,
   },
   {

x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings.tsx

@@ -6,27 +6,18 @@
  */
 
 import React, { FunctionComponent, useEffect } from 'react';
-import {
-  EuiButton,
-  EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiPageTemplate,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiButton, EuiPageTemplate, EuiSpacer, EuiText } from '@elastic/eui';
+
 import { FormattedMessage } from '@kbn/i18n-react';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
-import { useLoadIndexMappings, documentationService } from '../../../../services';
+
+import { DetailsPageMappingsContent } from './details_page_mappings_content';
+import { Index } from '../../../../../../common';
+import { useLoadIndexMappings } from '../../../../services';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 
-export const DetailsPageMappings: FunctionComponent<{ indexName: string }> = ({ indexName }) => {
-  const { isLoading, data, error, resendRequest } = useLoadIndexMappings(indexName);
+export const DetailsPageMappings: FunctionComponent<{ index: Index }> = ({ index }) => {
+  const { isLoading, data, error, resendRequest } = useLoadIndexMappings(index.name);
 
   useEffect(() => {
     breadcrumbService.setBreadcrumbs(IndexManagementBreadcrumb.indexDetailsMappings);
@@ -63,7 +54,7 @@ export const DetailsPageMappings: FunctionComponent<{ indexName: string }> = ({
                 id="xpack.idxMgmt.indexDetails.mappings.errorDescription"
                 defaultMessage="We encountered an error loading mappings for index {indexName}. Make sure that the index name in the URL is correct and try again."
                 values={{
-                  indexName,
+                  indexName: index.name,
                 }}
               />
             </EuiText>
@@ -86,82 +77,5 @@ export const DetailsPageMappings: FunctionComponent<{ indexName: string }> = ({
     );
   }
 
-  return (
-    // using "rowReverse" to keep docs links on the top of the mappings code block on smaller screen
-    <EuiFlexGroup
-      wrap
-      direction="rowReverse"
-      css={css`
-        height: 100%;
-      `}
-    >
-      <EuiFlexItem
-        grow={1}
-        css={css`
-          min-width: 400px;
-        `}
-      >
-        <EuiPanel grow={false} paddingSize="l">
-          <EuiFlexGroup alignItems="center" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="iInCircle" />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiTitle size="xs">
-                <h2>
-                  <FormattedMessage
-                    id="xpack.idxMgmt.indexDetails.mappings.docsCardTitle"
-                    defaultMessage="About index mappings"
-                  />
-                </h2>
-              </EuiTitle>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="s" />
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="xpack.idxMgmt.indexDetails.mappings.docsCardDescription"
-                defaultMessage="Your documents are made up of a set of fields. Index mappings give each field a type
-              (such as keyword, number, or date) and additional subfields. These index mappings determine the functions
-              available in your relevance tuning and search experience."
-              />
-            </p>
-          </EuiText>
-          <EuiSpacer size="m" />
-          <EuiLink
-            data-test-subj="indexDetailsMappingsDocsLink"
-            href={documentationService.getMappingDocumentationLink()}
-            target="_blank"
-            external
-          >
-            <FormattedMessage
-              id="xpack.idxMgmt.indexDetails.mappings.docsCardLink"
-              defaultMessage="Learn more about mappings"
-            />
-          </EuiLink>
-        </EuiPanel>
-      </EuiFlexItem>
-
-      <EuiFlexItem
-        grow={3}
-        css={css`
-          min-width: 600px;
-        `}
-      >
-        <EuiPanel>
-          <EuiCodeBlock
-            language="json"
-            isCopyable
-            data-test-subj="indexDetailsMappingsCodeBlock"
-            css={css`
-              height: 100%;
-            `}
-          >
-            {JSON.stringify(data, null, 2)}
-          </EuiCodeBlock>
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
+  return <DetailsPageMappingsContent index={index} data={data} />;
 };

x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 {
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
+
+import { Index } from '../../../../../../common';
+import { documentationService } from '../../../../services';
+import { useAppContext } from '../../../../app_context';
+
+export const DetailsPageMappingsContent: FunctionComponent<{ index: Index; data: any }> = ({
+  index,
+  data,
+}) => {
+  const {
+    services: { extensionsService },
+    core: { getUrlForApp },
+  } = useAppContext();
+  return (
+    // using "rowReverse" to keep docs links on the top of the mappings code block on smaller screen
+    <EuiFlexGroup
+      wrap
+      direction="rowReverse"
+      css={css`
+        height: 100%;
+      `}
+    >
+      <EuiFlexItem
+        grow={1}
+        css={css`
+          min-width: 400px;
+        `}
+      >
+        <EuiPanel grow={false} paddingSize="l">
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="iInCircle" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiTitle size="xs">
+                <h2>
+                  <FormattedMessage
+                    id="xpack.idxMgmt.indexDetails.mappings.docsCardTitle"
+                    defaultMessage="About index mappings"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.idxMgmt.indexDetails.mappings.docsCardDescription"
+                defaultMessage="Your documents are made up of a set of fields. Index mappings give each field a type
+              (such as keyword, number, or date) and additional subfields. These index mappings determine the functions
+              available in your relevance tuning and search experience."
+              />
+            </p>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiLink
+            data-test-subj="indexDetailsMappingsDocsLink"
+            href={documentationService.getMappingDocumentationLink()}
+            target="_blank"
+            external
+          >
+            <FormattedMessage
+              id="xpack.idxMgmt.indexDetails.mappings.docsCardLink"
+              defaultMessage="Learn more about mappings"
+            />
+          </EuiLink>
+        </EuiPanel>
+        {extensionsService.indexMappingsContent && (
+          <>
+            <EuiSpacer />
+            {extensionsService.indexMappingsContent.renderContent({ index, getUrlForApp })}
+          </>
+        )}
+      </EuiFlexItem>
+
+      <EuiFlexItem
+        grow={3}
+        css={css`
+          min-width: 600px;
+        `}
+      >
+        <EuiPanel>
+          <EuiCodeBlock
+            language="json"
+            isCopyable
+            data-test-subj="indexDetailsMappingsCodeBlock"
+            css={css`
+              height: 100%;
+            `}
+          >
+            {JSON.stringify(data, null, 2)}
+          </EuiCodeBlock>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/index_management/public/index.ts

@@ -14,7 +14,7 @@ export const plugin = (ctx: PluginInitializerContext) => {
   return new IndexMgmtUIPlugin(ctx);
 };
 
-export type { IndexManagementPluginSetup } from './types';
+export type { IndexManagementPluginSetup, IndexManagementPluginStart } from './types';
 
 export { getIndexListUri, getTemplateDetailsLink } from './application/services/routing';
 

x-pack/plugins/index_management/public/plugin.ts

@@ -81,6 +81,10 @@ export class IndexMgmtUIPlugin {
     };
   }
 
-  public start() {}
+  public start() {
+    return {
+      extensionsService: this.extensionsService.setup(),
+    };
+  }
   public stop() {}
 }

x-pack/plugins/index_management/public/services/extensions_service.mock.ts

@@ -18,6 +18,7 @@ const createServiceMock = (): ExtensionsSetupMock => ({
   addToggle: jest.fn(),
   addIndexDetailsTab: jest.fn(),
   setIndexOverviewContent: jest.fn(),
+  setIndexMappingsContent: jest.fn(),
 });
 
 const createMock = () => {