[8.x] [Onboarding] Make search_indices index details page as default route in index management (#194857) (#195973)

# Backport This will backport the following commits from `main` to `8.x`: - [[Onboarding] Make search_indices index details page as default route in index management (#194857)](https://github.com/elastic/kibana/pull/194857)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-10-12 07:01:37 +11:00 · 2024-10-12 07:01:37 +11:00 · 644692ab84
commit 644692ab84
parent c9b0d86381
12 changed files with 133 additions and 17 deletions
--- a/x-pack/packages/index-management/index_management_shared_types/src/services/extensions_service.ts
+++ b/x-pack/packages/index-management/index_management_shared_types/src/services/extensions_service.ts
@ -30,6 +30,9 @@ export interface IndexBadge {
  filterExpression?: string;
  color: EuiBadgeProps['color'];
 }
+export interface IndexDetailsPageRoute {
+  renderRoute: (indexName: string) => string;
+}

 export interface EmptyListContent {
  renderContent: (args: {
@ -68,4 +71,6 @@ export interface ExtensionsSetup {
  setIndexOverviewContent(content: IndexContent): void;
  // sets content to render below the docs link on the mappings tab of the index page
  setIndexMappingsContent(content: IndexContent): void;
+  // sets index details page route
+  setIndexDetailsPageRoute(route: IndexDetailsPageRoute): void;
 }
--- a/x-pack/plugins/index_management/README.md
+++ b/x-pack/plugins/index_management/README.md
@ -7,7 +7,6 @@ This service is exposed from the Index Management setup contract and can be used
 - `addToggle(toggle: any)`: adds a toggle to the indices list, for example to display hidden indices
 - `addColumn(column: IndicesListColumn)`: adds a column to the indices list, for example to display an ILM phase
 - `setEmptyListContent(content: EmptyListContent)`: replaces the default empty prompt displayed when there are no indices in the indices list. The empty list content has the following interface:
-
 ```ts
 export interface EmptyListContent {
  renderContent: (args: {
@ -15,6 +14,8 @@ export interface EmptyListContent {
  }) => ReturnType<FunctionComponent>;
 }
 ```
+- `setIndexDetailsPageRoute`: registers a new route for index details page in indices list table. For example, for serverless search users, navigating to an index on the indices list page will lead to the Search Indices detail page.
+

 #### Extensions to the indices list and the index details page
 - `addAction(action: any)`: adds an option to the "manage index" menu, for example to add an ILM policy to the index
--- a/x-pack/plugins/index_management/jest/client_integration/home/indices_tab.test.tsx
+++ b/x-pack/plugins/index_management/jest/client_integration/home/indices_tab.test.tsx
@ -557,5 +557,35 @@ describe('<IndexManagementHome />', () => {
      expect(text).toContain('ILM column 2');
      expect(text).toContain('ILM managed');
    });
+    it('renders to search_indices index details page', async () => {
+      const indexName = 'search-index';
+      httpRequestsMockHelpers.setLoadIndicesResponse([createNonDataStreamIndex(indexName)]);
+      httpRequestsMockHelpers.setLoadIndexDetailsResponse(
+        indexName,
+        createNonDataStreamIndex(indexName)
+      );
+
+      const navigateToUrl = jest.fn();
+      const url = `/app/elasticsearch/indices/index_details/${indexName}`;
+      testBed = await setup(httpSetup, {
+        core: {
+          application: { navigateToUrl },
+        },
+        history: createMemoryHistory(),
+        services: {
+          extensionsService: {
+            _indexDetailsPageRoute: {
+              renderRoute: () => {
+                return url;
+              },
+            },
+          },
+        },
+      });
+      testBed.component.update();
+      await testBed.actions.clickIndexNameAt(0);
+      expect(navigateToUrl).toHaveBeenCalledTimes(1);
+      expect(navigateToUrl).toHaveBeenCalledWith(url);
+    });
  });
 });
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
@ -56,6 +56,8 @@ const getColumnConfigs = ({
  filterChanged,
  extensionsService,
  location,
+  application,
+  http,
 }) => {
  const columns = [
    {
@ -64,17 +66,26 @@ const getColumnConfigs = ({
        defaultMessage: 'Name',
      }),
      order: 10,
-      render: (index) => (
-        <>
-          <EuiLink
-            data-test-subj="indexTableIndexNameLink"
-            onClick={() => history.push(getIndexDetailsLink(index.name, location.search || ''))}
-          >
-            {index.name}
-          </EuiLink>
-          {renderBadges(index, extensionsService, filterChanged)}
-        </>
-      ),
+      render: (index) => {
+        return (
+          <>
+            <EuiLink
+              data-test-subj="indexTableIndexNameLink"
+              onClick={() => {
+                if (!extensionsService.indexDetailsPageRoute) {
+                  history.push(getIndexDetailsLink(index.name, location.search || ''));
+                } else {
+                  const route = extensionsService.indexDetailsPageRoute.renderRoute(index.name);
+                  application.navigateToUrl(http.basePath.prepend(route));
+                }
+              }}
+            >
+              {index.name}
+            </EuiLink>
+            {renderBadges(index, extensionsService, filterChanged)}
+          </>
+        );
+      },
    },
    {
      fieldName: 'data_stream',
@ -529,14 +540,17 @@ export class IndexTable extends Component {

    return (
      <AppContextConsumer>
-        {({ services, config }) => {
+        {({ services, config, core }) => {
          const { extensionsService } = services;
+          const { application, http } = core;
          const columnConfigs = getColumnConfigs({
            showIndexStats: config.enableIndexStats,
            extensionsService,
            filterChanged,
            history,
            location,
+            application,
+            http,
          });
          const columnsCount = columnConfigs.length + 1;
          return (
--- a/x-pack/plugins/index_management/public/services/extensions_service.mock.ts
+++ b/x-pack/plugins/index_management/public/services/extensions_service.mock.ts
@ -22,6 +22,7 @@ const createServiceMock = (): ExtensionsSetupMock => ({
  addIndexDetailsTab: jest.fn(),
  setIndexOverviewContent: jest.fn(),
  setIndexMappingsContent: jest.fn(),
+  setIndexDetailsPageRoute: jest.fn(),
 });

 const createMock = () => {
--- a/x-pack/plugins/index_management/public/services/extensions_service.ts
+++ b/x-pack/plugins/index_management/public/services/extensions_service.ts
@ -13,6 +13,7 @@ import {
  EmptyListContent,
  IndexContent,
  ExtensionsSetup,
+  IndexDetailsPageRoute,
 } from '@kbn/index-management-shared-types';
 import { IndexDetailsTab } from '../../common/constants';

@ -48,6 +49,7 @@ export class ExtensionsService {
  private _indexDetailsTabs: IndexDetailsTab[] = [];
  private _indexOverviewContent: IndexContent | null = null;
  private _indexMappingsContent: IndexContent | null = null;
+  private _indexDetailsPageRoute: IndexDetailsPageRoute | null = null;
  private service?: ExtensionsSetup;

  public setup(): ExtensionsSetup {
@ -62,6 +64,7 @@ export class ExtensionsService {
      addIndexDetailsTab: this.addIndexDetailsTab.bind(this),
      setIndexOverviewContent: this.setIndexOverviewContent.bind(this),
      setIndexMappingsContent: this.setIndexMappingsContent.bind(this),
+      setIndexDetailsPageRoute: this.setIndexDetailsPageRoute.bind(this),
    };

    return this.service;
@ -118,6 +121,13 @@ export class ExtensionsService {
      this._indexMappingsContent = content;
    }
  }
+  private setIndexDetailsPageRoute(route: IndexDetailsPageRoute) {
+    if (this._indexDetailsPageRoute) {
+      throw new Error(`The route for index details has already been set.`);
+    } else {
+      this._indexDetailsPageRoute = route;
+    }
+  }

  public get actions() {
    return this._actions;
@ -158,4 +168,7 @@ export class ExtensionsService {
  public get indexMappingsContent() {
    return this._indexMappingsContent;
  }
+  public get indexDetailsPageRoute() {
+    return this._indexDetailsPageRoute;
+  }
 }
--- a/x-pack/plugins/search_indices/public/plugin.ts
+++ b/x-pack/plugins/search_indices/public/plugin.ts
@ -81,8 +81,17 @@ export class SearchIndicesPlugin
    };
  }

-  public start(core: CoreStart): SearchIndicesPluginStart {
+  public start(
+    core: CoreStart,
+    deps: SearchIndicesAppPluginStartDependencies
+  ): SearchIndicesPluginStart {
+    const { indexManagement } = deps;
    docLinks.setDocLinks(core.docLinks.links);
+    indexManagement?.extensionsService.setIndexDetailsPageRoute({
+      renderRoute: (indexName) => {
+        return `/app/elasticsearch/indices/index_details/${indexName}`;
+      },
+    });
    return {
      enabled: this.pluginEnabled,
      startAppId: START_APP_ID,
--- a/x-pack/plugins/search_indices/public/types.ts
+++ b/x-pack/plugins/search_indices/public/types.ts
@ -39,6 +39,7 @@ export interface SearchIndicesAppPluginStartDependencies {
  cloud?: CloudStart;
  share: SharePluginStart;
  usageCollection?: UsageCollectionStart;
+  indexManagement: IndexManagementPluginStart;
 }

 export interface SearchIndicesServicesContextDeps {
--- a/x-pack/test/functional/apps/index_management/index_details_page.ts
+++ b/x-pack/test/functional/apps/index_management/index_details_page.ts
@ -25,6 +25,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
      await pageObjects.indexManagement.toggleHiddenIndices();
      // click the first index in the table and wait for the index details page
      await pageObjects.indexManagement.indexDetailsPage.openIndexDetailsPage(0);
+      await pageObjects.indexManagement.indexDetailsPage.expectIndexDetailsPageIsLoaded();
    });
  });
 };
--- a/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
+++ b/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
@ -193,5 +193,18 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
      await testSubjects.click('documentMetadataButton');
      await testSubjects.missingOrFail('deleteDocumentButton');
    },
+    async openIndicesDetailFromIndexManagementIndicesListTable(indexOfRow: number) {
+      const indexList = await testSubjects.findAll('indexTableIndexNameLink');
+      await indexList[indexOfRow].click();
+      await retry.waitFor('index details page title to show up', async () => {
+        return (await testSubjects.isDisplayed('searchIndexDetailsHeader')) === true;
+      });
+    },
+
+    async expectSearchIndexDetailsTabsExists() {
+      await testSubjects.existOrFail('dataTab');
+      await testSubjects.existOrFail('mappingsTab');
+      await testSubjects.existOrFail('settingsTab');
+    },
  };
 }
--- a/x-pack/test_serverless/functional/test_suites/common/management/index_management/index_detail.ts
+++ b/x-pack/test_serverless/functional/test_suites/common/management/index_management/index_detail.ts
@ -33,9 +33,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
      await pageObjects.indexManagement.clickCreateIndexSaveButton();
      await pageObjects.indexManagement.expectIndexToExist(testIndexName);
    });
-    it('index with no documents', async () => {
-      await pageObjects.indexManagement.indexDetailsPage.openIndexDetailsPage(0);
-      await pageObjects.indexManagement.indexDetailsPage.expectIndexDetailsPageIsLoaded();
+    describe('can view index details', function () {
+      this.tags(['skipSvlSearch']);
+      it('index with no documents', async () => {
+        await pageObjects.indexManagement.indexDetailsPage.openIndexDetailsPage(0);
+        await pageObjects.indexManagement.indexDetailsPage.expectIndexDetailsPageIsLoaded();
+      });
    });
  });
 };
--- a/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
+++ b/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
@ -13,9 +13,13 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
    'embeddedConsole',
    'svlSearchIndexDetailPage',
    'svlApiKeys',
+    'header',
+    'common',
+    'indexManagement',
  ]);
  const svlSearchNavigation = getService('svlSearchNavigation');
  const es = getService('es');
+  const security = getService('security');

  const esDeleteAllIndices = getService('esDeleteAllIndices');
  const indexName = 'test-my-index';
@ -39,6 +43,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
      });
      it('can load index detail page', async () => {
        await pageObjects.svlSearchIndexDetailPage.expectIndexDetailPageHeader();
+        await pageObjects.svlSearchIndexDetailPage.expectSearchIndexDetailsTabsExists();
        await pageObjects.svlSearchIndexDetailPage.expectAPIReferenceDocLinkExists();
      });
      it('should have embedded dev console', async () => {
@ -170,5 +175,25 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
        });
      });
    });
+    describe('index management index details', () => {
+      before(async () => {
+        await es.indices.create({ index: indexName });
+        await security.testUser.setRoles(['index_management_user']);
+        await pageObjects.common.navigateToApp('indexManagement');
+        // Navigate to the indices tab
+        await pageObjects.indexManagement.changeTabs('indicesTab');
+        await pageObjects.header.waitUntilLoadingHasFinished();
+      });
+      describe('can view search index details', function () {
+        it('renders search index details with no documents', async () => {
+          await pageObjects.svlSearchIndexDetailPage.openIndicesDetailFromIndexManagementIndicesListTable(
+            0
+          );
+          await pageObjects.svlSearchIndexDetailPage.expectIndexDetailPageHeader();
+          await pageObjects.svlSearchIndexDetailPage.expectSearchIndexDetailsTabsExists();
+          await pageObjects.svlSearchIndexDetailPage.expectAPIReferenceDocLinkExists();
+        });
+      });
+    });
  });
 }