[Logs & Metrics] refactor breadcrumbs (#103249)

* [Logs & Metrics] refactor breadcrumbs * [Logs & Metrics] remove Header component, move translations and create readonly badge hook * add breadcrumb to metric detail page * fix check_file_casing ci issues * create separate breadcrumb hook for logs and metrics * fix metrics translation title * fix wrong imports and unused variables * fix translation imports * fix unused import * refactor use_breadcrumbs * remove Header component * fix linter exhaustive-deps error by wrapping into useMemo * refactor use_readonly_badge * remove commented out code Co-authored-by: Kibana Machine <[email protected]>
elastic · Jul 1, 2021 · ba85f45 · ba85f45
1 parent 1b75ac5
commit ba85f45
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 117 deletions.
diff --git a/x-pack/plugins/infra/common/constants.ts b/x-pack/plugins/infra/common/constants.ts
@@ -9,3 +9,5 @@ export const DEFAULT_SOURCE_ID = 'default';
 export const METRICS_INDEX_PATTERN = 'metrics-*,metricbeat-*';
 export const LOGS_INDEX_PATTERN = 'logs-*,filebeat-*,kibana_sample_data_logs*';
 export const TIMESTAMP_FIELD = '@timestamp';
+export const METRICS_APP = 'metrics';
+export const LOGS_APP = 'logs';
diff --git a/x-pack/plugins/infra/public/components/header/header.tsx b/x-pack/plugins/infra/public/components/header/header.tsx
diff --git a/x-pack/plugins/infra/public/components/header/index.ts b/x-pack/plugins/infra/public/components/header/index.ts
diff --git a/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts b/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { useEffect } from 'react';
+import { observabilityTitle } from '../translations';
+import { useKibanaContextForPlugin } from './use_kibana';
+import { useLinkProps } from './use_link_props';
+
+type AppId = 'logs' | 'metrics';
+
+export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: ChromeBreadcrumb[]) => {
+  const {
+    services: { chrome },
+  } = useKibanaContextForPlugin();
+
+  const observabilityLinkProps = useLinkProps({ app: 'observability-overview' });
+  const appLinkProps = useLinkProps({ app });
+
+  useEffect(() => {
+    chrome?.setBreadcrumbs?.([
+      {
+        ...observabilityLinkProps,
+        text: observabilityTitle,
+      },
+      {
+        ...appLinkProps,
+        text: appTitle,
+      },
+      ...extraCrumbs,
+    ]);
+  }, [appLinkProps, appTitle, chrome, extraCrumbs, observabilityLinkProps]);
+};
diff --git a/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx b/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { useBreadcrumbs } from './use_breadcrumbs';
+import { LOGS_APP } from '../../common/constants';
+import { logsTitle } from '../translations';
+
+export const useLogsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
+  useBreadcrumbs(LOGS_APP, logsTitle, extraCrumbs);
+};
diff --git a/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx b/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { useBreadcrumbs } from './use_breadcrumbs';
+import { METRICS_APP } from '../../common/constants';
+import { metricsTitle } from '../translations';
+
+export const useMetricsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
+  useBreadcrumbs(METRICS_APP, metricsTitle, extraCrumbs);
+};
diff --git a/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx b/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../../../src/plugins/kibana_react/public';
+
+export const useReadOnlyBadge = (isReadOnly = false) => {
+  const chrome = useKibana().services.chrome;
+
+  useEffect(() => {
+    chrome?.setBadge(
+      isReadOnly
+        ? {
+            text: i18n.translate('xpack.infra.header.badge.readOnly.text', {
+              defaultMessage: 'Read only',
+            }),
+            tooltip: i18n.translate('xpack.infra.header.badge.readOnly.tooltip', {
+              defaultMessage: 'Unable to change source configuration',
+            }),
+            iconType: 'glasses',
+          }
+        : undefined
+    );
+  }, [chrome, isReadOnly]);
+
+  return null;
+};
diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx
@@ -18,7 +18,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
 import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
-import { Header } from '../components/header';
 import { ColumnarPage, PageContent } from '../components/page';
 
 const DetailPageContent = euiStyled(PageContent)`
@@ -33,7 +32,6 @@ interface Props {
 export const Error: React.FC<Props> = ({ message }) => {
   return (
     <ColumnarPage>
-      <Header />
       <DetailPageContent>
         <ErrorPageBody message={message} />
       </DetailPageContent>

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx
@@ -7,10 +7,18 @@
 
 import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { LogEntryCategoriesPageContent } from './page_content';
 import { LogEntryCategoriesPageProviders } from './page_providers';
+import { logCategoriesTitle } from '../../../translations';
 
 export const LogEntryCategoriesPage = () => {
+  useLogsBreadcrumbs([
+    {
+      text: logCategoriesTitle,
+    },
+  ]);
+
   return (
     <EuiErrorBoundary>
       <LogEntryCategoriesPageProviders>

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx
@@ -9,8 +9,15 @@ import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { LogEntryRatePageContent } from './page_content';
 import { LogEntryRatePageProviders } from './page_providers';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
+import { anomaliesTitle } from '../../../translations';
 
 export const LogEntryRatePage = () => {
+  useLogsBreadcrumbs([
+    {
+      text: anomaliesTitle,
+    },
+  ]);
   return (
     <EuiErrorBoundary>
       <LogEntryRatePageProviders>

diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -14,7 +14,6 @@ import useMount from 'react-use/lib/useMount';
 import { AlertDropdown } from '../../alerting/log_threshold';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { DocumentTitle } from '../../components/document_title';
-import { Header } from '../../components/header';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useLogSourceContext } from '../../containers/logs/log_source';
 import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params';
@@ -25,6 +24,7 @@ import { StreamPage } from './stream';
 import { HeaderMenuPortal } from '../../../../observability/public';
 import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
 import { useLinkProps } from '../../hooks/use_link_props';
+import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 
 export const LogsPageContent: React.FunctionComponent = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
@@ -34,6 +34,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
   const kibana = useKibana();
 
+  useReadOnlyBadge(!uiCapabilities?.logs?.save);
+
   useMount(() => {
     initialize();
   });
@@ -101,14 +103,6 @@ export const LogsPageContent: React.FunctionComponent = () => {
         </HeaderMenuPortal>
       )}
 
-      <Header
-        breadcrumbs={[
-          {
-            text: pageTitle,
-          },
-        ]}
-        readOnlyBadge={!uiCapabilities?.logs?.save}
-      />
       <Switch>
         <Route path={streamTab.pathname} component={StreamPage} />
         <Route path={anomaliesTab.pathname} component={LogEntryRatePage} />

diff --git a/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx b/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx
@@ -18,6 +18,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback, useMemo } from 'react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
 import { Prompt } from '../../../utils/navigation_warning_prompt';
@@ -27,10 +28,7 @@ import { NameConfigurationPanel } from './name_configuration_panel';
 import { LogSourceConfigurationFormErrors } from './source_configuration_form_errors';
 import { useLogSourceConfigurationFormState } from './source_configuration_form_state';
 import { LogsPageTemplate } from '../page_template';
-
-const settingsTitle = i18n.translate('xpack.infra.logs.settingsTitle', {
-  defaultMessage: 'Settings',
-});
+import { settingsTitle } from '../../../translations';
 
 export const LogsSettingsPage = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
@@ -43,6 +41,12 @@ export const LogsSettingsPage = () => {
     delay: 15000,
   });
 
+  useLogsBreadcrumbs([
+    {
+      text: settingsTitle,
+    },
+  ]);
+
   const {
     sourceConfiguration: source,
     hasFailedLoadingSource,

diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page.tsx
@@ -8,13 +8,21 @@
 import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { StreamPageContent } from './page_content';
 import { StreamPageHeader } from './page_header';
 import { LogsPageProviders } from './page_providers';
+import { streamTitle } from '../../../translations';
 
 export const StreamPage = () => {
   useTrackPageview({ app: 'infra_logs', path: 'stream' });
   useTrackPageview({ app: 'infra_logs', path: 'stream', delay: 15000 });
+
+  useLogsBreadcrumbs([
+    {
+      text: streamTitle,
+    },
+  ]);
   return (
     <EuiErrorBoundary>
       <LogsPageProviders>

diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -15,7 +15,7 @@ import { IIndexPattern } from 'src/plugins/data/common';
 import { MetricsSourceConfigurationProperties } from '../../../common/metrics_sources';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
-import { Header } from '../../components/header';
+import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import {
   MetricsExplorerOptionsContainer,
   DEFAULT_METRICS_EXPLORER_VIEW_STATE,
@@ -56,6 +56,8 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
 
   const kibana = useKibana();
 
+  useReadOnlyBadge(!uiCapabilities?.infrastructure?.save);
+
   const settingsLinkProps = useLinkProps({
     app: 'metrics',
     pathname: 'settings',
@@ -111,17 +113,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                       </EuiFlexGroup>
                     </HeaderMenuPortal>
                   )}
-
-                  <Header
-                    breadcrumbs={[
-                      {
-                        text: i18n.translate('xpack.infra.header.infrastructureTitle', {
-                          defaultMessage: 'Metrics',
-                        }),
-                      },
-                    ]}
-                    readOnlyBadge={!uiCapabilities?.infrastructure?.save}
-                  />
                   <Switch>
                     <Route path={'/inventory'} component={SnapshotPage} />
                     <Route

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
@@ -8,7 +8,6 @@
 import { EuiButton, EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
-
 import { FilterBar } from './components/filter_bar';
 
 import { DocumentTitle } from '../../../components/document_title';
@@ -19,6 +18,7 @@ import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { ViewSourceConfigurationButton } from '../../../components/source_configuration/view_source_configuration_button';
 import { Source } from '../../../containers/metrics_source';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { LayoutView } from './components/layout_view';
 import { useLinkProps } from '../../../hooks/use_link_props';
@@ -28,10 +28,7 @@ import { useWaffleOptionsContext } from './hooks/use_waffle_options';
 import { MetricsPageTemplate } from '../page_template';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { APP_WRAPPER_CLASS } from '../../../../../../../src/core/public';
-
-const inventoryTitle = i18n.translate('xpack.infra.metrics.inventoryPageTitle', {
-  defaultMessage: 'Inventory',
-});
+import { inventoryTitle } from '../../../translations';
 
 export const SnapshotPage = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
@@ -52,6 +49,12 @@ export const SnapshotPage = () => {
     hash: '/tutorial_directory/metrics',
   });
 
+  useMetricsBreadcrumbs([
+    {
+      text: inventoryTitle,
+    },
+  ]);
+
   return (
     <EuiErrorBoundary>
       <DocumentTitle