Skip to content

Commit

Permalink
Add error boundaries to metrics page and tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@weltenwort
weltenwort committed May 6, 2020
1 parent 58abd5c commit d1a4ffb
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 171 deletions.
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>
);
};
121 changes: 63 additions & 58 deletions x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiButton, EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useContext } from 'react';

Expand Down Expand Up @@ -41,65 +41,70 @@ export const SnapshotPage = () => {
});

return (
<ColumnarPage>
<DocumentTitle
title={(previousTitle: string) =>
i18n.translate('xpack.infra.infrastructureSnapshotPage.documentTitle', {
defaultMessage: '{previousTitle} | Inventory',
values: {
previousTitle,
},
})
}
/>
{isLoading ? (
<SourceLoadingPage />
) : metricIndicesExist ? (
<>
<FilterBar />
<Layout />
</>
) : hasFailedLoadingSource ? (
<SourceErrorPage errorMessage={loadSourceFailureMessage || ''} retry={loadSource} />
) : (
<NoIndices
title={i18n.translate('xpack.infra.homePage.noMetricsIndicesTitle', {
defaultMessage: "Looks like you don't have any metrics indices.",
})}
message={i18n.translate('xpack.infra.homePage.noMetricsIndicesDescription', {
defaultMessage: "Let's add some!",
})}
actions={
<EuiFlexGroup>
<EuiFlexItem>
<EuiButton
{...tutorialLinkProps}
color="primary"
fill
data-test-subj="infrastructureViewSetupInstructionsButton"
>
{i18n.translate('xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel', {
defaultMessage: 'View setup instructions',
})}
</EuiButton>
</EuiFlexItem>
{uiCapabilities?.infrastructure?.configureSource ? (
<EuiErrorBoundary>
<ColumnarPage>
<DocumentTitle
title={(previousTitle: string) =>
i18n.translate('xpack.infra.infrastructureSnapshotPage.documentTitle', {
defaultMessage: '{previousTitle} | Inventory',
values: {
previousTitle,
},
})
}
/>
{isLoading ? (
<SourceLoadingPage />
) : metricIndicesExist ? (
<>
<FilterBar />
<Layout />
</>
) : hasFailedLoadingSource ? (
<SourceErrorPage errorMessage={loadSourceFailureMessage || ''} retry={loadSource} />
) : (
<NoIndices
title={i18n.translate('xpack.infra.homePage.noMetricsIndicesTitle', {
defaultMessage: "Looks like you don't have any metrics indices.",
})}
message={i18n.translate('xpack.infra.homePage.noMetricsIndicesDescription', {
defaultMessage: "Let's add some!",
})}
actions={
<EuiFlexGroup>
<EuiFlexItem>
<ViewSourceConfigurationButton
app="metrics"
data-test-subj="configureSourceButton"
<EuiButton
{...tutorialLinkProps}
color="primary"
fill
data-test-subj="infrastructureViewSetupInstructionsButton"
>
{i18n.translate('xpack.infra.configureSourceActionLabel', {
defaultMessage: 'Change source configuration',
})}
</ViewSourceConfigurationButton>
{i18n.translate(
'xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel',
{
defaultMessage: 'View setup instructions',
}
)}
</EuiButton>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
}
data-test-subj="noMetricsIndicesPrompt"
/>
)}
</ColumnarPage>
{uiCapabilities?.infrastructure?.configureSource ? (
<EuiFlexItem>
<ViewSourceConfigurationButton
app="metrics"
data-test-subj="configureSourceButton"
>
{i18n.translate('xpack.infra.configureSourceActionLabel', {
defaultMessage: 'Change source configuration',
})}
</ViewSourceConfigurationButton>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
}
data-test-subj="noMetricsIndicesPrompt"
/>
)}
</ColumnarPage>
</EuiErrorBoundary>
);
};
14 changes: 8 additions & 6 deletions x-pack/plugins/infra/public/pages/metrics/metric_detail/page_providers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@
* you may not use this file except in compliance with the Elastic License.
*/

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

import { Source } from '../../../containers/source';
import { MetricsTimeProvider } from './hooks/use_metrics_time';

export const withMetricPageProviders = <T extends object>(Component: React.ComponentType<T>) => (
props: T
) => (
<Source.Provider sourceId="default">
<MetricsTimeProvider>
<Component {...props} />
</MetricsTimeProvider>
</Source.Provider>
<EuiErrorBoundary>
<Source.Provider sourceId="default">
<MetricsTimeProvider>
<Component {...props} />
</MetricsTimeProvider>
</Source.Provider>
</EuiErrorBoundary>
);
Loading

0 comments on commit d1a4ffb

Please sign in to comment.