Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[7.x] Use platform history (#74328) #76287

Merged
merged 1 commit into from
Aug 31, 2020
Merged

[7.x] Use platform history (#74328) #76287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions x-pack/plugins/apm/public/application/application.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { act } from '@testing-library/react';
import { createMemoryHistory } from 'history';
import { Observable } from 'rxjs';
import { AppMountParameters, CoreStart, HttpSetup } from 'src/core/public';
import { mockApmPluginContextValue } from '../context/ApmPluginContext/MockApmPluginContext';
import { ApmPluginSetupDeps } from '../plugin';
import { createCallApmApi } from '../services/rest/createCallApmApi';
import { renderApp } from './';
import { disableConsoleWarning } from '../utils/testHelpers';

describe('renderApp', () => {
let mockConsole: jest.SpyInstance;

beforeAll(() => {
// The RUM agent logs an unnecessary message here. There's a couple open
// issues need to be fixed to get the ability to turn off all of the logging:
//
// * https://github.com/elastic/apm-agent-rum-js/issues/799
// * https://github.com/elastic/apm-agent-rum-js/issues/861
//
// for now, override `console.warn` to filter those messages out.
mockConsole = disableConsoleWarning('[Elastic APM]');
});

afterAll(() => {
mockConsole.mockRestore();
});

it('renders the app', () => {
const { core, config } = mockApmPluginContextValue;
const plugins = {
licensing: { license$: new Observable() },
triggers_actions_ui: { actionTypeRegistry: {}, alertTypeRegistry: {} },
usageCollection: { reportUiStats: () => {} },
};
const params = {
element: document.createElement('div'),
history: createMemoryHistory(),
};
jest.spyOn(window, 'scrollTo').mockReturnValueOnce(undefined);
createCallApmApi((core.http as unknown) as HttpSetup);

jest
.spyOn(window.console, 'warn')
.mockImplementationOnce((message: string) => {
if (message.startsWith('[Elastic APM')) {
return;
} else {
console.warn(message); // eslint-disable-line no-console
}
});

let unmount: () => void;

act(() => {
unmount = renderApp(
(core as unknown) as CoreStart,
(plugins as unknown) as ApmPluginSetupDeps,
(params as unknown) as AppMountParameters,
config
);
});

expect(() => {
unmount();
}).not.toThrowError();
});
});
44 changes: 20 additions & 24 deletions x-pack/plugins/apm/public/application/csmApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ import { ApmPluginSetupDeps } from '../plugin';
import {
KibanaContextProvider,
useUiSetting$,
RedirectAppLinks,
} from '../../../../../src/plugins/kibana_react/public';
import { px, units } from '../style/variables';
import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
import { history, resetHistory } from '../utils/history';
import 'react-vis/dist/style.css';
import { RumHome } from '../components/app/RumDashboard/RumHome';
import { ConfigSchema } from '../index';
Expand Down Expand Up @@ -70,12 +70,12 @@ function CsmApp() {
export function CsmAppRoot({
core,
deps,
routerHistory,
history,
config,
}: {
core: CoreStart;
deps: ApmPluginSetupDeps;
routerHistory: typeof history;
history: AppMountParameters['history'];
config: ConfigSchema;
}) {
const i18nCore = core.i18n;
Expand All @@ -86,19 +86,21 @@ export function CsmAppRoot({
plugins,
};
return (
<ApmPluginContext.Provider value={apmPluginContextValue}>
<KibanaContextProvider services={{ ...core, ...plugins }}>
<i18nCore.Context>
<Router history={routerHistory}>
<UrlParamsProvider>
<LoadingIndicatorProvider>
<CsmApp />
</LoadingIndicatorProvider>
</UrlParamsProvider>
</Router>
</i18nCore.Context>
</KibanaContextProvider>
</ApmPluginContext.Provider>
<RedirectAppLinks application={core.application}>
<ApmPluginContext.Provider value={apmPluginContextValue}>
<KibanaContextProvider services={{ ...core, ...plugins }}>
<i18nCore.Context>
<Router history={history}>
<UrlParamsProvider>
<LoadingIndicatorProvider>
<CsmApp />
</LoadingIndicatorProvider>
</UrlParamsProvider>
</Router>
</i18nCore.Context>
</KibanaContextProvider>
</ApmPluginContext.Provider>
</RedirectAppLinks>
);
}

Expand All @@ -109,19 +111,13 @@ export function CsmAppRoot({
export const renderApp = (
core: CoreStart,
deps: ApmPluginSetupDeps,
{ element }: AppMountParameters,
{ element, history }: AppMountParameters,
config: ConfigSchema
) => {
createCallApmApi(core.http);

resetHistory();
ReactDOM.render(
<CsmAppRoot
core={core}
deps={deps}
routerHistory={history}
config={config}
/>,
<CsmAppRoot core={core} deps={deps} history={history} config={config} />,
element
);
return () => {
Expand Down
113 changes: 54 additions & 59 deletions x-pack/plugins/apm/public/application/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,36 @@
*/

import { ApmRoute } from '@elastic/apm-rum-react';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Router, Switch } from 'react-router-dom';
import styled, { ThemeProvider, DefaultTheme } from 'styled-components';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { CoreStart, AppMountParameters } from '../../../../../src/core/public';
import { ApmPluginSetupDeps } from '../plugin';
import 'react-vis/dist/style.css';
import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
import { ConfigSchema } from '../';
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
import {
KibanaContextProvider,
RedirectAppLinks,
useUiSetting$,
} from '../../../../../src/plugins/kibana_react/public';
import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
import { routes } from '../components/app/Main/route_config';
import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
import { ApmPluginContext } from '../context/ApmPluginContext';
import { LicenseProvider } from '../context/LicenseContext';
import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext';
import { LocationProvider } from '../context/LocationContext';
import { MatchedRouteProvider } from '../context/MatchedRouteContext';
import { UrlParamsProvider } from '../context/UrlParamsContext';
import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
import { ApmPluginSetupDeps } from '../plugin';
import { createCallApmApi } from '../services/rest/createCallApmApi';
import { createStaticIndexPattern } from '../services/rest/index_pattern';
import {
KibanaContextProvider,
useUiSetting$,
} from '../../../../../src/plugins/kibana_react/public';
import { px, units } from '../style/variables';
import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
import { routes } from '../components/app/Main/route_config';
import { history, resetHistory } from '../utils/history';
import { setHelpExtension } from '../setHelpExtension';
import { px, units } from '../style/variables';
import { setReadonlyBadge } from '../updateBadge';
import { createCallApmApi } from '../services/rest/createCallApmApi';
import { ConfigSchema } from '..';
import 'react-vis/dist/style.css';

const MainContainer = styled.div`
padding: ${px(units.plus)};
Expand Down Expand Up @@ -68,12 +68,12 @@ function App() {
export function ApmAppRoot({
core,
deps,
routerHistory,
history,
config,
}: {
core: CoreStart;
deps: ApmPluginSetupDeps;
routerHistory: typeof history;
history: AppMountParameters['history'];
config: ConfigSchema;
}) {
const i18nCore = core.i18n;
Expand All @@ -84,36 +84,38 @@ export function ApmAppRoot({
plugins,
};
return (
<ApmPluginContext.Provider value={apmPluginContextValue}>
<AlertsContextProvider
value={{
http: core.http,
docLinks: core.docLinks,
capabilities: core.application.capabilities,
toastNotifications: core.notifications.toasts,
actionTypeRegistry: plugins.triggers_actions_ui.actionTypeRegistry,
alertTypeRegistry: plugins.triggers_actions_ui.alertTypeRegistry,
}}
>
<KibanaContextProvider services={{ ...core, ...plugins }}>
<i18nCore.Context>
<Router history={routerHistory}>
<LocationProvider>
<MatchedRouteProvider routes={routes}>
<UrlParamsProvider>
<LoadingIndicatorProvider>
<LicenseProvider>
<App />
</LicenseProvider>
</LoadingIndicatorProvider>
</UrlParamsProvider>
</MatchedRouteProvider>
</LocationProvider>
</Router>
</i18nCore.Context>
</KibanaContextProvider>
</AlertsContextProvider>
</ApmPluginContext.Provider>
<RedirectAppLinks application={core.application}>
<ApmPluginContext.Provider value={apmPluginContextValue}>
<AlertsContextProvider
value={{
http: core.http,
docLinks: core.docLinks,
capabilities: core.application.capabilities,
toastNotifications: core.notifications.toasts,
actionTypeRegistry: plugins.triggers_actions_ui.actionTypeRegistry,
alertTypeRegistry: plugins.triggers_actions_ui.alertTypeRegistry,
}}
>
<KibanaContextProvider services={{ ...core, ...plugins }}>
<i18nCore.Context>
<Router history={history}>
<LocationProvider>
<MatchedRouteProvider routes={routes}>
<UrlParamsProvider>
<LoadingIndicatorProvider>
<LicenseProvider>
<App />
</LicenseProvider>
</LoadingIndicatorProvider>
</UrlParamsProvider>
</MatchedRouteProvider>
</LocationProvider>
</Router>
</i18nCore.Context>
</KibanaContextProvider>
</AlertsContextProvider>
</ApmPluginContext.Provider>
</RedirectAppLinks>
);
}

Expand All @@ -124,7 +126,7 @@ export function ApmAppRoot({
export const renderApp = (
core: CoreStart,
deps: ApmPluginSetupDeps,
{ element }: AppMountParameters,
{ element, history }: AppMountParameters,
config: ConfigSchema
) => {
// render APM feedback link in global help menu
Expand All @@ -133,21 +135,14 @@ export const renderApp = (

createCallApmApi(core.http);

resetHistory();

// Automatically creates static index pattern and stores as saved object
createStaticIndexPattern().catch((e) => {
// eslint-disable-next-line no-console
console.log('Error creating static index pattern', e);
});

ReactDOM.render(
<ApmAppRoot
core={core}
deps={deps}
routerHistory={history}
config={config}
/>,
<ApmAppRoot core={core} deps={deps} history={history} config={config} />,
element
);
return () => {
Expand Down
17 changes: 9 additions & 8 deletions x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,40 @@

import {
EuiButtonEmpty,
EuiIcon,
EuiPanel,
EuiSpacer,
EuiTab,
EuiTabs,
EuiTitle,
EuiIcon,
EuiToolTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Location } from 'history';
import { first } from 'lodash';
import React from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { first } from 'lodash';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { ErrorGroupAPIResponse } from '../../../../../server/lib/errors/get_error_group';
import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
import { IUrlParams } from '../../../../context/UrlParamsContext/types';
import { px, unit, units } from '../../../../style/variables';
import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
import { history } from '../../../../utils/history';
import { ErrorMetadata } from '../../../shared/MetadataTable/ErrorMetadata';
import { Stacktrace } from '../../../shared/Stacktrace';
import { Summary } from '../../../shared/Summary';
import { HttpInfoSummaryItem } from '../../../shared/Summary/HttpInfoSummaryItem';
import { UserAgentSummaryItem } from '../../../shared/Summary/UserAgentSummaryItem';
import { TimestampTooltip } from '../../../shared/TimestampTooltip';
import {
ErrorTab,
exceptionStacktraceTab,
getTabs,
logStacktraceTab,
} from './ErrorTabs';
import { Summary } from '../../../shared/Summary';
import { TimestampTooltip } from '../../../shared/TimestampTooltip';
import { HttpInfoSummaryItem } from '../../../shared/Summary/HttpInfoSummaryItem';
import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
import { UserAgentSummaryItem } from '../../../shared/Summary/UserAgentSummaryItem';
import { ExceptionStacktrace } from './ExceptionStacktrace';

const HeaderContainer = styled.div`
Expand Down Expand Up @@ -71,6 +71,7 @@ function getCurrentTab(
}

export function DetailView({ errorGroup, urlParams, location }: Props) {
const history = useHistory();
const { transaction, error, occurrencesCount } = errorGroup;

if (!error) {
Expand Down
Loading