Skip to content

Commit

Permalink
Use platform history (#74328)
Browse files Browse the repository at this point in the history 
Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: cauemarcondes <[email protected]>
  • Loading branch information
@smith @elasticmachine @cauemarcondes
3 people authored Aug 31, 2020
1 parent 833d764 commit 9b59122
Show file tree
Hide file tree
Showing 67 changed files with 1,190 additions and 746 deletions.
74 changes: 74 additions & 0 deletions x-pack/plugins/apm/public/application/application.test.tsx
View file
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
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
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
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

0 comments on commit 9b59122

Please sign in to comment.