Skip to content

Commit

Permalink
[Logs + Metrics UI] Prevent component errors from breaking the whole …
Browse files Browse the repository at this point in the history 
…UI (elastic#65456)
  • Loading branch information
@weltenwort
weltenwort committed May 7, 2020
1 parent c4ab557 commit 231c71a
Show file tree
Hide file tree
Showing 10 changed files with 218 additions and 196 deletions.
14 changes: 8 additions & 6 deletions x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx
View file
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
View file
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
View file
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>
);
};
5 changes: 3 additions & 2 deletions x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx
View file
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
View file
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
View file
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 231c71a

Please sign in to comment.