Skip to content

Commit

Permalink
[InfraUI] [LogsUI] Fix breadcrumbs (elastic#42679) (elastic#42916)
Browse files Browse the repository at this point in the history 
* Add breadcrumbs to metrics-explorer

* Revert "Add breadcrumbs to metrics-explorer"

This reverts commit 27d1c85.

* Hoist Breadcrumb handling to the index pages
  • Loading branch information
@Kerry350
Kerry350 authored Aug 8, 2019
1 parent eee2485 commit 7c3b549
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 133 deletions.
142 changes: 80 additions & 62 deletions x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
import React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { UICapabilities } from 'ui/capabilities';
import { injectUICapabilities } from 'ui/capabilities/react';

import { DocumentTitle } from '../../components/document_title';
import { HelpCenterContent } from '../../components/help_center_content';
import { RoutedTabs } from '../../components/navigation/routed_tabs';
import { ColumnarPage } from '../../components/page';
import { Header } from '../../components/header';
import { MetricsExplorerOptionsContainer } from '../../containers/metrics_explorer/use_metrics_explorer_options';
import { WithMetricsExplorerOptionsUrlState } from '../../containers/metrics_explorer/with_metrics_explorer_options_url_state';
import { WithSource } from '../../containers/with_source';
Expand All @@ -23,75 +26,90 @@ import { AppNavigation } from '../../components/navigation/app_navigation';

interface InfrastructurePageProps extends RouteComponentProps {
intl: InjectedIntl;
uiCapabilities: UICapabilities;
}

export const InfrastructurePage = injectI18n(({ match, intl }: InfrastructurePageProps) => (
<Source.Provider sourceId="default">
<ColumnarPage>
<DocumentTitle
title={intl.formatMessage({
id: 'xpack.infra.homePage.documentTitle',
defaultMessage: 'Infrastructure',
})}
/>
export const InfrastructurePage = injectUICapabilities(
injectI18n(({ match, intl, uiCapabilities }: InfrastructurePageProps) => (
<Source.Provider sourceId="default">
<ColumnarPage>
<DocumentTitle
title={intl.formatMessage({
id: 'xpack.infra.homePage.documentTitle',
defaultMessage: 'Infrastructure',
})}
/>

<HelpCenterContent
feedbackLink="https://discuss.elastic.co/c/infrastructure"
feedbackLinkText={intl.formatMessage({
id: 'xpack.infra.infrastructure.infrastructureHelpContent.feedbackLinkText',
defaultMessage: 'Provide feedback for Infrastructure',
})}
/>
<HelpCenterContent
feedbackLink="https://discuss.elastic.co/c/infrastructure"
feedbackLinkText={intl.formatMessage({
id: 'xpack.infra.infrastructure.infrastructureHelpContent.feedbackLinkText',
defaultMessage: 'Provide feedback for Infrastructure',
})}
/>

<AppNavigation>
<RoutedTabs
tabs={[
{
title: intl.formatMessage({
id: 'xpack.infra.homePage.inventoryTabTitle',
defaultMessage: 'Inventory',
}),
path: `${match.path}/inventory`,
},
<Header
breadcrumbs={[
{
title: intl.formatMessage({
id: 'xpack.infra.homePage.metricsExplorerTabTitle',
defaultMessage: 'Metrics Explorer',
text: intl.formatMessage({
id: 'xpack.infra.header.infrastructureTitle',
defaultMessage: 'Infrastructure',
}),
path: `${match.path}/metrics-explorer`,
},
{
title: intl.formatMessage({
id: 'xpack.infra.homePage.settingsTabTitle',
defaultMessage: 'Settings',
}),
path: `${match.path}/settings`,
},
]}
readOnlyBadge={!uiCapabilities.infrastructure.save}
/>
</AppNavigation>

<Switch>
<Route path={`${match.path}/inventory`} component={SnapshotPage} />
<Route
path={`${match.path}/metrics-explorer`}
render={props => (
<WithSource>
{({ configuration, createDerivedIndexPattern }) => (
<MetricsExplorerOptionsContainer.Provider>
<WithMetricsExplorerOptionsUrlState />
<MetricsExplorerPage
derivedIndexPattern={createDerivedIndexPattern('metrics')}
source={configuration}
{...props}
/>
</MetricsExplorerOptionsContainer.Provider>
)}
</WithSource>
)}
/>
<Route path={`${match.path}/settings`} component={SettingsPage} />
</Switch>
</ColumnarPage>
</Source.Provider>
));
<AppNavigation>
<RoutedTabs
tabs={[
{
title: intl.formatMessage({
id: 'xpack.infra.homePage.inventoryTabTitle',
defaultMessage: 'Inventory',
}),
path: `${match.path}/inventory`,
},
{
title: intl.formatMessage({
id: 'xpack.infra.homePage.metricsExplorerTabTitle',
defaultMessage: 'Metrics Explorer',
}),
path: `${match.path}/metrics-explorer`,
},
{
title: intl.formatMessage({
id: 'xpack.infra.homePage.settingsTabTitle',
defaultMessage: 'Settings',
}),
path: `${match.path}/settings`,
},
]}
/>
</AppNavigation>

<Switch>
<Route path={`${match.path}/inventory`} component={SnapshotPage} />
<Route
path={`${match.path}/metrics-explorer`}
render={props => (
<WithSource>
{({ configuration, createDerivedIndexPattern }) => (
<MetricsExplorerOptionsContainer.Provider>
<WithMetricsExplorerOptionsUrlState />
<MetricsExplorerPage
derivedIndexPattern={createDerivedIndexPattern('metrics')}
source={configuration}
{...props}
/>
</MetricsExplorerOptionsContainer.Provider>
)}
</WithSource>
)}
/>
<Route path={`${match.path}/settings`} component={SettingsPage} />
</Switch>
</ColumnarPage>
</Source.Provider>
))
);
13 changes: 0 additions & 13 deletions x-pack/legacy/plugins/infra/public/pages/infrastructure/snapshot/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { SnapshotToolbar } from './toolbar';

import { DocumentTitle } from '../../../components/document_title';
import { NoIndices } from '../../../components/empty_states/no_indices';
import { Header } from '../../../components/header';
import { ColumnarPage } from '../../../components/page';

import { SourceErrorPage } from '../../../components/source_error_page';
Expand Down Expand Up @@ -65,18 +64,6 @@ export const SnapshotPage = injectUICapabilities(
)
}
/>
<Header
breadcrumbs={[
{
href: '#/',
text: intl.formatMessage({
id: 'xpack.infra.header.infrastructureTitle',
defaultMessage: 'Infrastructure',
}),
},
]}
readOnlyBadge={!uiCapabilities.infrastructure.save}
/>
{isLoading ? (
<SourceLoadingPage />
) : metricIndicesExist ? (
Expand Down
94 changes: 56 additions & 38 deletions x-pack/legacy/plugins/infra/public/pages/logs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@
*/

import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { UICapabilities } from 'ui/capabilities';
import { injectUICapabilities } from 'ui/capabilities/react';

import { DocumentTitle } from '../../components/document_title';
import { HelpCenterContent } from '../../components/help_center_content';
import { Header } from '../../components/header';
import { RoutedTabs } from '../../components/navigation/routed_tabs';
import { ColumnarPage } from '../../components/page';
import { Source } from '../../containers/source';
Expand All @@ -19,51 +23,65 @@ import { AppNavigation } from '../../components/navigation/app_navigation';

interface LogsPageProps extends RouteComponentProps {
intl: InjectedIntl;
uiCapabilities: UICapabilities;
}

export const LogsPage = injectI18n(({ match, intl }: LogsPageProps) => (
<Source.Provider sourceId="default">
<ColumnarPage>
<DocumentTitle
title={intl.formatMessage({
id: 'xpack.infra.logs.index.documentTitle',
defaultMessage: 'Logs',
})}
/>
export const LogsPage = injectUICapabilities(
injectI18n(({ match, intl, uiCapabilities }: LogsPageProps) => (
<Source.Provider sourceId="default">
<ColumnarPage>
<DocumentTitle
title={intl.formatMessage({
id: 'xpack.infra.logs.index.documentTitle',
defaultMessage: 'Logs',
})}
/>

<HelpCenterContent
feedbackLink="https://discuss.elastic.co/c/logs"
feedbackLinkText={intl.formatMessage({
id: 'xpack.infra.logsPage.logsHelpContent.feedbackLinkText',
defaultMessage: 'Provide feedback for Logs',
})}
/>
<HelpCenterContent
feedbackLink="https://discuss.elastic.co/c/logs"
feedbackLinkText={intl.formatMessage({
id: 'xpack.infra.logsPage.logsHelpContent.feedbackLinkText',
defaultMessage: 'Provide feedback for Logs',
})}
/>

<AppNavigation>
<RoutedTabs
tabs={[
{
title: intl.formatMessage({
id: 'xpack.infra.logs.index.streamTabTitle',
defaultMessage: 'Stream',
}),
path: `${match.path}/stream`,
},
<Header
breadcrumbs={[
{
title: intl.formatMessage({
id: 'xpack.infra.logs.index.settingsTabTitle',
defaultMessage: 'Settings',
text: i18n.translate('xpack.infra.header.logsTitle', {
defaultMessage: 'Logs',
}),
path: `${match.path}/settings`,
},
]}
readOnlyBadge={!uiCapabilities.logs.save}
/>
</AppNavigation>

<Switch>
<Route path={`${match.path}/stream`} component={StreamPage} />
<Route path={`${match.path}/settings`} component={SettingsPage} />
</Switch>
</ColumnarPage>
</Source.Provider>
));
<AppNavigation>
<RoutedTabs
tabs={[
{
title: intl.formatMessage({
id: 'xpack.infra.logs.index.streamTabTitle',
defaultMessage: 'Stream',
}),
path: `${match.path}/stream`,
},
{
title: intl.formatMessage({
id: 'xpack.infra.logs.index.settingsTabTitle',
defaultMessage: 'Settings',
}),
path: `${match.path}/settings`,
},
]}
/>
</AppNavigation>

<Switch>
<Route path={`${match.path}/stream`} component={StreamPage} />
<Route path={`${match.path}/settings`} component={SettingsPage} />
</Switch>
</ColumnarPage>
</Source.Provider>
))
);
22 changes: 2 additions & 20 deletions x-pack/legacy/plugins/infra/public/pages/logs/stream/page_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,11 @@
import { i18n } from '@kbn/i18n';
import React from 'react';

import { UICapabilities } from 'ui/capabilities';
import { injectUICapabilities } from 'ui/capabilities/react';
import { DocumentTitle } from '../../../components/document_title';
import { Header } from '../../../components/header';

interface StreamPageHeaderProps {
uiCapabilities: UICapabilities;
}

export const StreamPageHeader = injectUICapabilities((props: StreamPageHeaderProps) => {
const { uiCapabilities } = props;
export const StreamPageHeader = () => {
return (
<>
<Header
breadcrumbs={[
{
text: i18n.translate('xpack.infra.logs.streamPage.logsBreadcrumbsText', {
defaultMessage: 'Logs',
}),
},
]}
readOnlyBadge={!uiCapabilities.logs.save}
/>
<DocumentTitle
title={(previousTitle: string) =>
i18n.translate('xpack.infra.logs.streamPage.documentTitle', {
Expand All @@ -42,4 +24,4 @@ export const StreamPageHeader = injectUICapabilities((props: StreamPageHeaderPro
/>
</>
);
});
};

0 comments on commit 7c3b549

Please sign in to comment.