Skip to content

Commit 8a8647a

Browse files
weltenwortweltenwort
authored
[Logs + Metrics UI] Prevent component errors from breaking the whole UI (#65456)
1 parent f53b147 commit 8a8647a

File tree

10 files changed

+218
-196
lines changed

10 files changed

+218
-196
lines changed

‎x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7+
import { EuiErrorBoundary } from '@elastic/eui';
78
import React from 'react';
8-
99
import { ColumnarPage } from '../../../components/page';
1010
import { LogEntryCategoriesPageContent } from './page_content';
1111
import { LogEntryCategoriesPageProviders } from './page_providers';
1212

1313
export const LogEntryCategoriesPage = () => {
1414
return (
15-
<LogEntryCategoriesPageProviders>
16-
<ColumnarPage data-test-subj="logsLogEntryCategoriesPage">
17-
<LogEntryCategoriesPageContent />
18-
</ColumnarPage>
19-
</LogEntryCategoriesPageProviders>
15+
<EuiErrorBoundary>
16+
<LogEntryCategoriesPageProviders>
17+
<ColumnarPage data-test-subj="logsLogEntryCategoriesPage">
18+
<LogEntryCategoriesPageContent />
19+
</ColumnarPage>
20+
</LogEntryCategoriesPageProviders>
21+
</EuiErrorBoundary>
2022
);
2123
};

‎x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7+
import { EuiErrorBoundary } from '@elastic/eui';
78
import React from 'react';
8-
99
import { ColumnarPage } from '../../../components/page';
1010
import { LogEntryRatePageContent } from './page_content';
1111
import { LogEntryRatePageProviders } from './page_providers';
1212

1313
export const LogEntryRatePage = () => {
1414
return (
15-
<LogEntryRatePageProviders>
16-
<ColumnarPage data-test-subj="logsLogEntryRatePage">
17-
<LogEntryRatePageContent />
18-
</ColumnarPage>
19-
</LogEntryRatePageProviders>
15+
<EuiErrorBoundary>
16+
<LogEntryRatePageProviders>
17+
<ColumnarPage data-test-subj="logsLogEntryRatePage">
18+
<LogEntryRatePageContent />
19+
</ColumnarPage>
20+
</LogEntryRatePageProviders>
21+
</EuiErrorBoundary>
2022
);
2123
};

‎x-pack/plugins/infra/public/pages/logs/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7+
import { EuiErrorBoundary } from '@elastic/eui';
78
import React from 'react';
89
import { RouteComponentProps } from 'react-router-dom';
9-
1010
import { LogsPageContent } from './page_content';
1111
import { LogsPageProviders } from './page_providers';
1212

13-
export const LogsPage: React.FunctionComponent<RouteComponentProps> = ({ match }) => {
13+
export const LogsPage: React.FunctionComponent<RouteComponentProps> = () => {
1414
return (
15-
<LogsPageProviders>
16-
<LogsPageContent />
17-
</LogsPageProviders>
15+
<EuiErrorBoundary>
16+
<LogsPageProviders>
17+
<LogsPageContent />
18+
</LogsPageProviders>
19+
</EuiErrorBoundary>
1820
);
1921
};

‎x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import {
88
EuiButton,
99
EuiCallOut,
10+
EuiErrorBoundary,
1011
EuiFlexGroup,
1112
EuiFlexItem,
1213
EuiPanel,
@@ -74,7 +75,7 @@ export const LogsSettingsPage = () => {
7475
}
7576

7677
return (
77-
<>
78+
<EuiErrorBoundary>
7879
<EuiPage>
7980
<EuiPageBody
8081
className="eui-displayBlock"
@@ -181,7 +182,7 @@ export const LogsSettingsPage = () => {
181182
</EuiFlexGroup>
182183
</EuiPageBody>
183184
</EuiPage>
184-
</>
185+
</EuiErrorBoundary>
185186
);
186187
};
187188

‎x-pack/plugins/infra/public/pages/logs/stream/page.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7+
import { EuiErrorBoundary } from '@elastic/eui';
78
import React from 'react';
89
import { useTrackPageview } from '../../../../../observability/public';
910
import { ColumnarPage } from '../../../components/page';
@@ -15,11 +16,13 @@ export const StreamPage = () => {
1516
useTrackPageview({ app: 'infra_logs', path: 'stream' });
1617
useTrackPageview({ app: 'infra_logs', path: 'stream', delay: 15000 });
1718
return (
18-
<LogsPageProviders>
19-
<ColumnarPage data-test-subj="infraLogsPage">
20-
<StreamPageHeader />
21-
<StreamPageContent />
22-
</ColumnarPage>
23-
</LogsPageProviders>
19+
<EuiErrorBoundary>
20+
<LogsPageProviders>
21+
<ColumnarPage data-test-subj="infraLogsPage">
22+
<StreamPageHeader />
23+
<StreamPageContent />
24+
</ColumnarPage>
25+
</LogsPageProviders>
26+
</EuiErrorBoundary>
2427
);
2528
};

‎x-pack/plugins/infra/public/pages/metrics/index.tsx‎

Lines changed: 98 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
99
import React from 'react';
1010
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
1111

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

3838
return (
39-
<Source.Provider sourceId="default">
40-
<WaffleOptionsProvider>
41-
<WaffleTimeProvider>
42-
<WaffleFiltersProvider>
43-
<ColumnarPage>
44-
<DocumentTitle
45-
title={i18n.translate('xpack.infra.homePage.documentTitle', {
46-
defaultMessage: 'Metrics',
47-
})}
48-
/>
49-
50-
<HelpCenterContent
51-
feedbackLink="https://discuss.elastic.co/c/metrics"
52-
appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {
53-
defaultMessage: 'Metrics',
54-
})}
55-
/>
39+
<EuiErrorBoundary>
40+
<Source.Provider sourceId="default">
41+
<WaffleOptionsProvider>
42+
<WaffleTimeProvider>
43+
<WaffleFiltersProvider>
44+
<ColumnarPage>
45+
<DocumentTitle
46+
title={i18n.translate('xpack.infra.homePage.documentTitle', {
47+
defaultMessage: 'Metrics',
48+
})}
49+
/>
5650

57-
<Header
58-
breadcrumbs={[
59-
{
60-
text: i18n.translate('xpack.infra.header.infrastructureTitle', {
61-
defaultMessage: 'Metrics',
62-
}),
63-
},
64-
]}
65-
readOnlyBadge={!uiCapabilities?.infrastructure?.save}
66-
/>
67-
<AppNavigation
68-
aria-label={i18n.translate('xpack.infra.header.infrastructureNavigationTitle', {
69-
defaultMessage: 'Metrics',
70-
})}
71-
>
72-
<EuiFlexGroup gutterSize={'none'} alignItems={'center'}>
73-
<EuiFlexItem>
74-
<RoutedTabs
75-
tabs={[
76-
{
77-
app: 'metrics',
78-
title: i18n.translate('xpack.infra.homePage.inventoryTabTitle', {
79-
defaultMessage: 'Inventory',
80-
}),
81-
pathname: '/inventory',
82-
},
83-
{
84-
app: 'metrics',
85-
title: i18n.translate('xpack.infra.homePage.metricsExplorerTabTitle', {
86-
defaultMessage: 'Metrics Explorer',
87-
}),
88-
pathname: '/explorer',
89-
},
90-
{
91-
app: 'metrics',
92-
title: i18n.translate('xpack.infra.homePage.settingsTabTitle', {
93-
defaultMessage: 'Settings',
94-
}),
95-
pathname: '/settings',
96-
},
97-
]}
98-
/>
99-
</EuiFlexItem>
100-
<EuiFlexItem grow={false}>
101-
<Route path={'/explorer'} component={MetricsAlertDropdown} />
102-
<Route path={'/inventory'} component={InventoryAlertDropdown} />
103-
</EuiFlexItem>
104-
</EuiFlexGroup>
105-
</AppNavigation>
51+
<HelpCenterContent
52+
feedbackLink="https://discuss.elastic.co/c/metrics"
53+
appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {
54+
defaultMessage: 'Metrics',
55+
})}
56+
/>
10657

107-
<Switch>
108-
<Route path={'/inventory'} component={SnapshotPage} />
109-
<Route
110-
path={'/explorer'}
111-
render={props => (
112-
<WithSource>
113-
{({ configuration, createDerivedIndexPattern }) => (
114-
<MetricsExplorerOptionsContainer.Provider>
115-
<WithMetricsExplorerOptionsUrlState />
116-
{configuration ? (
117-
<MetricsExplorerPage
118-
derivedIndexPattern={createDerivedIndexPattern('metrics')}
119-
source={configuration}
120-
{...props}
121-
/>
122-
) : (
123-
<SourceLoadingPage />
124-
)}
125-
</MetricsExplorerOptionsContainer.Provider>
126-
)}
127-
</WithSource>
128-
)}
58+
<Header
59+
breadcrumbs={[
60+
{
61+
text: i18n.translate('xpack.infra.header.infrastructureTitle', {
62+
defaultMessage: 'Metrics',
63+
}),
64+
},
65+
]}
66+
readOnlyBadge={!uiCapabilities?.infrastructure?.save}
12967
/>
130-
<Route path={'/settings'} component={MetricsSettingsPage} />
131-
</Switch>
132-
</ColumnarPage>
133-
</WaffleFiltersProvider>
134-
</WaffleTimeProvider>
135-
</WaffleOptionsProvider>
136-
</Source.Provider>
68+
<AppNavigation
69+
aria-label={i18n.translate('xpack.infra.header.infrastructureNavigationTitle', {
70+
defaultMessage: 'Metrics',
71+
})}
72+
>
73+
<EuiFlexGroup gutterSize={'none'} alignItems={'center'}>
74+
<EuiFlexItem>
75+
<RoutedTabs
76+
tabs={[
77+
{
78+
app: 'metrics',
79+
title: i18n.translate('xpack.infra.homePage.inventoryTabTitle', {
80+
defaultMessage: 'Inventory',
81+
}),
82+
pathname: '/inventory',
83+
},
84+
{
85+
app: 'metrics',
86+
title: i18n.translate('xpack.infra.homePage.metricsExplorerTabTitle', {
87+
defaultMessage: 'Metrics Explorer',
88+
}),
89+
pathname: '/explorer',
90+
},
91+
{
92+
app: 'metrics',
93+
title: i18n.translate('xpack.infra.homePage.settingsTabTitle', {
94+
defaultMessage: 'Settings',
95+
}),
96+
pathname: '/settings',
97+
},
98+
]}
99+
/>
100+
</EuiFlexItem>
101+
<EuiFlexItem grow={false}>
102+
<Route path={'/explorer'} component={MetricsAlertDropdown} />
103+
<Route path={'/inventory'} component={InventoryAlertDropdown} />
104+
</EuiFlexItem>
105+
</EuiFlexGroup>
106+
</AppNavigation>
107+
108+
<Switch>
109+
<Route path={'/inventory'} component={SnapshotPage} />
110+
<Route
111+
path={'/explorer'}
112+
render={props => (
113+
<WithSource>
114+
{({ configuration, createDerivedIndexPattern }) => (
115+
<MetricsExplorerOptionsContainer.Provider>
116+
<WithMetricsExplorerOptionsUrlState />
117+
{configuration ? (
118+
<MetricsExplorerPage
119+
derivedIndexPattern={createDerivedIndexPattern('metrics')}
120+
source={configuration}
121+
{...props}
122+
/>
123+
) : (
124+
<SourceLoadingPage />
125+
)}
126+
</MetricsExplorerOptionsContainer.Provider>
127+
)}
128+
</WithSource>
129+
)}
130+
/>
131+
<Route path={'/settings'} component={MetricsSettingsPage} />
132+
</Switch>
133+
</ColumnarPage>
134+
</WaffleFiltersProvider>
135+
</WaffleTimeProvider>
136+
</WaffleOptionsProvider>
137+
</Source.Provider>
138+
</EuiErrorBoundary>
137139
);
138140
};

0 commit comments

Comments
 (0)