Add breadcrumbs to metrics-explorer

Kerry350 · Aug 6, 2019 · 27d1c85 · 27d1c85
1 parent ad111be
commit 27d1c85
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/pages/infrastructure/metrics_explorer/index.tsx b/x-pack/legacy/plugins/infra/public/pages/infrastructure/metrics_explorer/index.tsx
@@ -7,9 +7,12 @@
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 import { StaticIndexPattern } from 'ui/index_patterns';
+import { UICapabilities } from 'ui/capabilities';
+import { injectUICapabilities } from 'ui/capabilities/react';
 import { DocumentTitle } from '../../../components/document_title';
 import { MetricsExplorerCharts } from '../../../components/metrics_explorer/charts';
 import { MetricsExplorerToolbar } from '../../../components/metrics_explorer/toolbar';
+import { Header } from '../../../components/header';
 import { SourceQuery } from '../../../../common/graphql/types';
 import { NoData } from '../../../components/empty_states';
 import { useMetricsExplorerState } from './use_metric_explorer_state';
@@ -19,10 +22,11 @@ interface MetricsExplorerPageProps {
   intl: InjectedIntl;
   source: SourceQuery.Query['source']['configuration'] | undefined;
   derivedIndexPattern: StaticIndexPattern;
+  uiCapabilities: UICapabilities;
 }
 
-export const MetricsExplorerPage = injectI18n(
-  ({ intl, source, derivedIndexPattern }: MetricsExplorerPageProps) => {
+export const MetricsExplorerPage = injectUICapabilities(
+  injectI18n(({ intl, source, derivedIndexPattern, uiCapabilities }: MetricsExplorerPageProps) => {
     if (!source) {
       return null;
     }
@@ -62,6 +66,18 @@ export const MetricsExplorerPage = injectI18n(
             )
           }
         />
+        <Header
+          breadcrumbs={[
+            {
+              href: '#/',
+              text: intl.formatMessage({
+                id: 'xpack.infra.header.infrastructureMetricsExplorerTitle',
+                defaultMessage: 'Infrastructure',
+              }),
+            },
+          ]}
+          readOnlyBadge={!uiCapabilities.infrastructure.save}
+        />
         <MetricsExplorerToolbar
           derivedIndexPattern={derivedIndexPattern}
           timeRange={currentTimerange}
@@ -104,5 +120,5 @@ export const MetricsExplorerPage = injectI18n(
         )}
       </React.Fragment>
     );
-  }
+  })
 );