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

…#66475) * 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>
elastic · May 14, 2020 · 7c22204 · 7c22204
1 parent 3546f71
commit 7c22204
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}`);
+ },
+ };
+};