[Ingest Manager] Consolidate routing and add breadcrumbs to all pages (…

…#66475) (#66668) * Initial pass at normalizing links and redirects * Remove unused nav components * Normalize & centralize routing paths * Add breadcrumbs to all pages * Remove unused var * Change /epm to /integrations (#66030) * Fixes from review: kuery param, getPath cleanup, use chrome.docTitle, and teardown breadcrumb and doc title Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · May 15, 2020 · cd17edf · cd17edf
1 parent f542b3f
commit cd17edf
Show file tree

Hide file tree

Showing 46 changed files with 673 additions and 460 deletions.
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/index.ts
@@ -14,17 +14,6 @@ export {
   DATASOURCE_SAVED_OBJECT_TYPE,
 } from '../../../../common';
 
-export const BASE_PATH = '/app/ingestManager';
-export const EPM_PATH = '/epm';
-export const EPM_LIST_ALL_PACKAGES_PATH = EPM_PATH;
-export const EPM_LIST_INSTALLED_PACKAGES_PATH = `${EPM_PATH}/installed`;
-export const EPM_DETAIL_VIEW_PATH = `${EPM_PATH}/detail/:pkgkey/:panel?`;
-export const AGENT_CONFIG_PATH = '/configs';
-export const AGENT_CONFIG_DETAILS_PATH = `${AGENT_CONFIG_PATH}/`;
-export const DATA_STREAM_PATH = '/data-streams';
-export const FLEET_PATH = '/fleet';
-export const FLEET_AGENTS_PATH = `${FLEET_PATH}/agents`;
-export const FLEET_AGENT_DETAIL_PATH = `${FLEET_AGENTS_PATH}/`;
-export const FLEET_ENROLLMENT_TOKENS_PATH = `/fleet/enrollment-tokens`;
+export * from './page_paths';
 
 export const INDEX_NAME = '.kibana';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/page_paths.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/page_paths.ts
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export type StaticPage =
+  | 'overview'
+  | 'integrations'
+  | 'integrations_all'
+  | 'integrations_installed'
+  | 'configurations'
+  | 'configurations_list'
+  | 'fleet'
+  | 'fleet_enrollment_tokens'
+  | 'data_streams';
+
+export type DynamicPage =
+  | 'integration_details'
+  | 'configuration_details'
+  | 'add_datasource_from_configuration'
+  | 'add_datasource_from_integration'
+  | 'edit_datasource'
+  | 'fleet_agent_list'
+  | 'fleet_agent_details';
+
+export type Page = StaticPage | DynamicPage;
+
+export interface DynamicPagePathValues {
+  [key: string]: string;
+}
+
+export const BASE_PATH = '/app/ingestManager';
+
+// If routing paths are changed here, please also check to see if
+// `pagePathGetters()`, below, needs any modifications
+export const PAGE_ROUTING_PATHS = {
+  overview: '/',
+  integrations: '/integrations/:tabId?',
+  integrations_all: '/integrations',
+  integrations_installed: '/integrations/installed',
+  integration_details: '/integrations/detail/:pkgkey/:panel?',
+  configurations: '/configs',
+  configurations_list: '/configs',
+  configuration_details: '/configs/:configId/:tabId?',
+  configuration_details_yaml: '/configs/:configId/yaml',
+  configuration_details_settings: '/configs/:configId/settings',
+  add_datasource_from_configuration: '/configs/:configId/add-datasource',
+  add_datasource_from_integration: '/integrations/:pkgkey/add-datasource',
+  edit_datasource: '/configs/:configId/edit-datasource/:datasourceId',
+  fleet: '/fleet',
+  fleet_agent_list: '/fleet/agents',
+  fleet_agent_details: '/fleet/agents/:agentId/:tabId?',
+  fleet_agent_details_events: '/fleet/agents/:agentId',
+  fleet_agent_details_details: '/fleet/agents/:agentId/details',
+  fleet_enrollment_tokens: '/fleet/enrollment-tokens',
+  data_streams: '/data-streams',
+};
+
+export const pagePathGetters: {
+  [key in StaticPage]: () => string;
+} &
+  {
+    [key in DynamicPage]: (values: DynamicPagePathValues) => string;
+  } = {
+  overview: () => '/',
+  integrations: () => '/integrations',
+  integrations_all: () => '/integrations',
+  integrations_installed: () => '/integrations/installed',
+  integration_details: ({ pkgkey, panel }) =>
+    `/integrations/detail/${pkgkey}${panel ? `/${panel}` : ''}`,
+  configurations: () => '/configs',
+  configurations_list: () => '/configs',
+  configuration_details: ({ configId, tabId }) => `/configs/${configId}${tabId ? `/${tabId}` : ''}`,
+  add_datasource_from_configuration: ({ configId }) => `/configs/${configId}/add-datasource`,
+  add_datasource_from_integration: ({ pkgkey }) => `/integrations/${pkgkey}/add-datasource`,
+  edit_datasource: ({ configId, datasourceId }) =>
+    `/configs/${configId}/edit-datasource/${datasourceId}`,
+  fleet: () => '/fleet',
+  fleet_agent_list: ({ kuery }) => `/fleet/agents${kuery ? `?kuery=${kuery}` : ''}`,
+  fleet_agent_details: ({ agentId, tabId }) =>
+    `/fleet/agents/${agentId}${tabId ? `/${tabId}` : ''}`,
+  fleet_enrollment_tokens: () => '/fleet/enrollment-tokens',
+  data_streams: () => '/data-streams',
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts
@@ -8,10 +8,12 @@ export { useCapabilities } from './use_capabilities';
 export { useCore, CoreContext } from './use_core';
 export { useConfig, ConfigContext } from './use_config';
 export { useSetupDeps, useStartDeps, DepsContext } from './use_deps';
+export { useBreadcrumbs } from './use_breadcrumbs';
 export { useLink } from './use_link';
 export { usePackageIconType, UsePackageIconType } from './use_package_icon_type';
 export { usePagination, Pagination } from './use_pagination';
 export { useDebounce } from './use_debounce';
 export * from './use_request';
 export * from './use_input';
 export * from './use_url_params';
+export * from './use_fleet_status';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_breadcrumbs.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_breadcrumbs.tsx
@@ -3,11 +3,225 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import { i18n } from '@kbn/i18n';
 import { ChromeBreadcrumb } from 'src/core/public';
+import { BASE_PATH, Page, DynamicPagePathValues, pagePathGetters } from '../constants';
 import { useCore } from './use_core';
 
-export function useBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]) {
-  const { chrome } = useCore();
-  return chrome.setBreadcrumbs(newBreadcrumbs);
+const BASE_BREADCRUMB: ChromeBreadcrumb = {
+  href: pagePathGetters.overview(),
+  text: i18n.translate('xpack.ingestManager.breadcrumbs.appTitle', {
+    defaultMessage: 'Ingest Manager',
+  }),
+};
+
+const breadcrumbGetters: {
+  [key in Page]: (values: DynamicPagePathValues) => ChromeBreadcrumb[];
+} = {
+  overview: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.overviewPageTitle', {
+        defaultMessage: 'Overview',
+      }),
+    },
+  ],
+  integrations: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.integrationsPageTitle', {
+        defaultMessage: 'Integrations',
+      }),
+    },
+  ],
+  integrations_all: () => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.integrations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.integrationsPageTitle', {
+        defaultMessage: 'Integrations',
+      }),
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.allIntegrationsPageTitle', {
+        defaultMessage: 'All',
+      }),
+    },
+  ],
+  integrations_installed: () => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.integrations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.integrationsPageTitle', {
+        defaultMessage: 'Integrations',
+      }),
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.installedIntegrationsPageTitle', {
+        defaultMessage: 'Installed',
+      }),
+    },
+  ],
+  integration_details: ({ pkgTitle }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.integrations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.integrationsPageTitle', {
+        defaultMessage: 'Integrations',
+      }),
+    },
+    { text: pkgTitle },
+  ],
+  configurations: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.configurationsPageTitle', {
+        defaultMessage: 'Configurations',
+      }),
+    },
+  ],
+  configurations_list: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.configurationsPageTitle', {
+        defaultMessage: 'Configurations',
+      }),
+    },
+  ],
+  configuration_details: ({ configName }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.configurations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.configurationsPageTitle', {
+        defaultMessage: 'Configurations',
+      }),
+    },
+    { text: configName },
+  ],
+  add_datasource_from_configuration: ({ configName, configId }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.configurations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.configurationsPageTitle', {
+        defaultMessage: 'Configurations',
+      }),
+    },
+    {
+      href: pagePathGetters.configuration_details({ configId }),
+      text: configName,
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.addDatasourcePageTitle', {
+        defaultMessage: 'Add data source',
+      }),
+    },
+  ],
+  add_datasource_from_integration: ({ pkgTitle, pkgkey }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.integrations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.integrationsPageTitle', {
+        defaultMessage: 'Integrations',
+      }),
+    },
+    {
+      href: pagePathGetters.integration_details({ pkgkey }),
+      text: pkgTitle,
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.addDatasourcePageTitle', {
+        defaultMessage: 'Add data source',
+      }),
+    },
+  ],
+  edit_datasource: ({ configName, configId }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.configurations(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.configurationsPageTitle', {
+        defaultMessage: 'Configurations',
+      }),
+    },
+    {
+      href: pagePathGetters.configuration_details({ configId }),
+      text: configName,
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.editDatasourcePageTitle', {
+        defaultMessage: 'Edit data source',
+      }),
+    },
+  ],
+  fleet: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetPageTitle', {
+        defaultMessage: 'Fleet',
+      }),
+    },
+  ],
+  fleet_agent_list: () => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.fleet(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetPageTitle', {
+        defaultMessage: 'Fleet',
+      }),
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetAgentsPageTitle', {
+        defaultMessage: 'Agents',
+      }),
+    },
+  ],
+  fleet_agent_details: ({ agentHost }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.fleet(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetPageTitle', {
+        defaultMessage: 'Fleet',
+      }),
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetAgentsPageTitle', {
+        defaultMessage: 'Agents',
+      }),
+    },
+    { text: agentHost },
+  ],
+  fleet_enrollment_tokens: () => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.fleet(),
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetPageTitle', {
+        defaultMessage: 'Fleet',
+      }),
+    },
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.fleetEnrollmentTokensPageTitle', {
+        defaultMessage: 'Enrollment tokens',
+      }),
+    },
+  ],
+  data_streams: () => [
+    BASE_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.ingestManager.breadcrumbs.datastreamsPageTitle', {
+        defaultMessage: 'Data streams',
+      }),
+    },
+  ],
+};
+
+export function useBreadcrumbs(page: Page, values: DynamicPagePathValues = {}) {
+  const { chrome, http } = useCore();
+  const breadcrumbs: ChromeBreadcrumb[] = breadcrumbGetters[page](values).map(breadcrumb => ({
+    ...breadcrumb,
+    href: breadcrumb.href ? http.basePath.prepend(`${BASE_PATH}#${breadcrumb.href}`) : undefined,
+  }));
+  const docTitle: string[] = [...breadcrumbs]
+    .reverse()
+    .map(breadcrumb => breadcrumb.text as string);
+  chrome.docTitle.change(docTitle);
+  chrome.setBreadcrumbs(breadcrumbs);
 }
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_kibana_link.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_kibana_link.ts
@@ -6,9 +6,9 @@
 
 import { useCore } from './';
 
-const BASE_PATH = '/app/kibana';
+const KIBANA_BASE_PATH = '/app/kibana';
 
 export function useKibanaLink(path: string = '/') {
   const core = useCore();
-  return core.http.basePath.prepend(`${BASE_PATH}#${path}`);
+  return core.http.basePath.prepend(`${KIBANA_BASE_PATH}#${path}`);
 }
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_link.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_link.ts
@@ -4,10 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { BASE_PATH } from '../constants';
+import {
+  BASE_PATH,
+  StaticPage,
+  DynamicPage,
+  DynamicPagePathValues,
+  pagePathGetters,
+} from '../constants';
 import { useCore } from './';
 
-export function useLink(path: string = '/') {
+const getPath = (page: StaticPage | DynamicPage, values: DynamicPagePathValues = {}): string => {
+  return values ? pagePathGetters[page](values) : pagePathGetters[page as StaticPage]();
+};
+
+export const useLink = () => {
   const core = useCore();
-  return core.http.basePath.prepend(`${BASE_PATH}#${path}`);
-}
+  return {
+    getPath,
+    getHref: (page: StaticPage | DynamicPage, values?: DynamicPagePathValues) => {
+      const path = getPath(page, values);
+      return core.http.basePath.prepend(`${BASE_PATH}#${path}`);
+    },
+  };
+};