Skip to content

Commit

Permalink
[7.8] [Logs + Metrics UI] Prevent component errors from breaking the …
Browse files Browse the repository at this point in the history
…whole UI (#65456) (#65640)

Backports the following commits to 7.8:
 - [Logs + Metrics UI] Prevent component errors from breaking the whole UI (#65456)
  • Loading branch information
weltenwort authored May 7, 2020
1 parent 0bed14a commit ad58055
Show file tree
Hide file tree
Showing 10 changed files with 218 additions and 196 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiErrorBoundary } from '@elastic/eui';
import React from 'react';

import { ColumnarPage } from '../../../components/page';
import { LogEntryCategoriesPageContent } from './page_content';
import { LogEntryCategoriesPageProviders } from './page_providers';

export const LogEntryCategoriesPage = () => {
return (
<LogEntryCategoriesPageProviders>
<ColumnarPage data-test-subj="logsLogEntryCategoriesPage">
<LogEntryCategoriesPageContent />
</ColumnarPage>
</LogEntryCategoriesPageProviders>
<EuiErrorBoundary>
<LogEntryCategoriesPageProviders>
<ColumnarPage data-test-subj="logsLogEntryCategoriesPage">
<LogEntryCategoriesPageContent />
</ColumnarPage>
</LogEntryCategoriesPageProviders>
</EuiErrorBoundary>
);
};
14 changes: 8 additions & 6 deletions x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiErrorBoundary } from '@elastic/eui';
import React from 'react';

import { ColumnarPage } from '../../../components/page';
import { LogEntryRatePageContent } from './page_content';
import { LogEntryRatePageProviders } from './page_providers';

export const LogEntryRatePage = () => {
return (
<LogEntryRatePageProviders>
<ColumnarPage data-test-subj="logsLogEntryRatePage">
<LogEntryRatePageContent />
</ColumnarPage>
</LogEntryRatePageProviders>
<EuiErrorBoundary>
<LogEntryRatePageProviders>
<ColumnarPage data-test-subj="logsLogEntryRatePage">
<LogEntryRatePageContent />
</ColumnarPage>
</LogEntryRatePageProviders>
</EuiErrorBoundary>
);
};
12 changes: 7 additions & 5 deletions x-pack/plugins/infra/public/pages/logs/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiErrorBoundary } from '@elastic/eui';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';

import { LogsPageContent } from './page_content';
import { LogsPageProviders } from './page_providers';

export const LogsPage: React.FunctionComponent<RouteComponentProps> = ({ match }) => {
export const LogsPage: React.FunctionComponent<RouteComponentProps> = () => {
return (
<LogsPageProviders>
<LogsPageContent />
</LogsPageProviders>
<EuiErrorBoundary>
<LogsPageProviders>
<LogsPageContent />
</LogsPageProviders>
</EuiErrorBoundary>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import {
EuiButton,
EuiCallOut,
EuiErrorBoundary,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
Expand Down Expand Up @@ -74,7 +75,7 @@ export const LogsSettingsPage = () => {
}

return (
<>
<EuiErrorBoundary>
<EuiPage>
<EuiPageBody
className="eui-displayBlock"
Expand Down Expand Up @@ -181,7 +182,7 @@ export const LogsSettingsPage = () => {
</EuiFlexGroup>
</EuiPageBody>
</EuiPage>
</>
</EuiErrorBoundary>
);
};

Expand Down
15 changes: 9 additions & 6 deletions x-pack/plugins/infra/public/pages/logs/stream/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiErrorBoundary } from '@elastic/eui';
import React from 'react';
import { useTrackPageview } from '../../../../../observability/public';
import { ColumnarPage } from '../../../components/page';
Expand All @@ -15,11 +16,13 @@ export const StreamPage = () => {
useTrackPageview({ app: 'infra_logs', path: 'stream' });
useTrackPageview({ app: 'infra_logs', path: 'stream', delay: 15000 });
return (
<LogsPageProviders>
<ColumnarPage data-test-subj="infraLogsPage">
<StreamPageHeader />
<StreamPageContent />
</ColumnarPage>
</LogsPageProviders>
<EuiErrorBoundary>
<LogsPageProviders>
<ColumnarPage data-test-subj="infraLogsPage">
<StreamPageHeader />
<StreamPageContent />
</ColumnarPage>
</LogsPageProviders>
</EuiErrorBoundary>
);
};
194 changes: 98 additions & 96 deletions x-pack/plugins/infra/public/pages/metrics/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
import React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';

import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { DocumentTitle } from '../../components/document_title';
import { HelpCenterContent } from '../../components/help_center_content';
import { RoutedTabs } from '../../components/navigation/routed_tabs';
Expand All @@ -36,103 +36,105 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
const uiCapabilities = useKibana().services.application?.capabilities;

return (
<Source.Provider sourceId="default">
<WaffleOptionsProvider>
<WaffleTimeProvider>
<WaffleFiltersProvider>
<ColumnarPage>
<DocumentTitle
title={i18n.translate('xpack.infra.homePage.documentTitle', {
defaultMessage: 'Metrics',
})}
/>

<HelpCenterContent
feedbackLink="https://discuss.elastic.co/c/metrics"
appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {
defaultMessage: 'Metrics',
})}
/>
<EuiErrorBoundary>
<Source.Provider sourceId="default">
<WaffleOptionsProvider>
<WaffleTimeProvider>
<WaffleFiltersProvider>
<ColumnarPage>
<DocumentTitle
title={i18n.translate('xpack.infra.homePage.documentTitle', {
defaultMessage: 'Metrics',
})}
/>

<Header
breadcrumbs={[
{
text: i18n.translate('xpack.infra.header.infrastructureTitle', {
defaultMessage: 'Metrics',
}),
},
]}
readOnlyBadge={!uiCapabilities?.infrastructure?.save}
/>
<AppNavigation
aria-label={i18n.translate('xpack.infra.header.infrastructureNavigationTitle', {
defaultMessage: 'Metrics',
})}
>
<EuiFlexGroup gutterSize={'none'} alignItems={'center'}>
<EuiFlexItem>
<RoutedTabs
tabs={[
{
app: 'metrics',
title: i18n.translate('xpack.infra.homePage.inventoryTabTitle', {
defaultMessage: 'Inventory',
}),
pathname: '/inventory',
},
{
app: 'metrics',
title: i18n.translate('xpack.infra.homePage.metricsExplorerTabTitle', {
defaultMessage: 'Metrics Explorer',
}),
pathname: '/explorer',
},
{
app: 'metrics',
title: i18n.translate('xpack.infra.homePage.settingsTabTitle', {
defaultMessage: 'Settings',
}),
pathname: '/settings',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Route path={'/explorer'} component={MetricsAlertDropdown} />
<Route path={'/inventory'} component={InventoryAlertDropdown} />
</EuiFlexItem>
</EuiFlexGroup>
</AppNavigation>
<HelpCenterContent
feedbackLink="https://discuss.elastic.co/c/metrics"
appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {
defaultMessage: 'Metrics',
})}
/>

<Switch>
<Route path={'/inventory'} component={SnapshotPage} />
<Route
path={'/explorer'}
render={props => (
<WithSource>
{({ configuration, createDerivedIndexPattern }) => (
<MetricsExplorerOptionsContainer.Provider>
<WithMetricsExplorerOptionsUrlState />
{configuration ? (
<MetricsExplorerPage
derivedIndexPattern={createDerivedIndexPattern('metrics')}
source={configuration}
{...props}
/>
) : (
<SourceLoadingPage />
)}
</MetricsExplorerOptionsContainer.Provider>
)}
</WithSource>
)}
<Header
breadcrumbs={[
{
text: i18n.translate('xpack.infra.header.infrastructureTitle', {
defaultMessage: 'Metrics',
}),
},
]}
readOnlyBadge={!uiCapabilities?.infrastructure?.save}
/>
<Route path={'/settings'} component={MetricsSettingsPage} />
</Switch>
</ColumnarPage>
</WaffleFiltersProvider>
</WaffleTimeProvider>
</WaffleOptionsProvider>
</Source.Provider>
<AppNavigation
aria-label={i18n.translate('xpack.infra.header.infrastructureNavigationTitle', {
defaultMessage: 'Metrics',
})}
>
<EuiFlexGroup gutterSize={'none'} alignItems={'center'}>
<EuiFlexItem>
<RoutedTabs
tabs={[
{
app: 'metrics',
title: i18n.translate('xpack.infra.homePage.inventoryTabTitle', {
defaultMessage: 'Inventory',
}),
pathname: '/inventory',
},
{
app: 'metrics',
title: i18n.translate('xpack.infra.homePage.metricsExplorerTabTitle', {
defaultMessage: 'Metrics Explorer',
}),
pathname: '/explorer',
},
{
app: 'metrics',
title: i18n.translate('xpack.infra.homePage.settingsTabTitle', {
defaultMessage: 'Settings',
}),
pathname: '/settings',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Route path={'/explorer'} component={MetricsAlertDropdown} />
<Route path={'/inventory'} component={InventoryAlertDropdown} />
</EuiFlexItem>
</EuiFlexGroup>
</AppNavigation>

<Switch>
<Route path={'/inventory'} component={SnapshotPage} />
<Route
path={'/explorer'}
render={props => (
<WithSource>
{({ configuration, createDerivedIndexPattern }) => (
<MetricsExplorerOptionsContainer.Provider>
<WithMetricsExplorerOptionsUrlState />
{configuration ? (
<MetricsExplorerPage
derivedIndexPattern={createDerivedIndexPattern('metrics')}
source={configuration}
{...props}
/>
) : (
<SourceLoadingPage />
)}
</MetricsExplorerOptionsContainer.Provider>
)}
</WithSource>
)}
/>
<Route path={'/settings'} component={MetricsSettingsPage} />
</Switch>
</ColumnarPage>
</WaffleFiltersProvider>
</WaffleTimeProvider>
</WaffleOptionsProvider>
</Source.Provider>
</EuiErrorBoundary>
);
};
Loading

0 comments on commit ad58055

Please sign in to comment.