Skip to content

Commit

Permalink
[APM] Use new platform for toast notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@smith
smith committed Oct 3, 2019
1 parent ebb62cb commit 7ade8c5
Show file tree
Hide file tree
Showing 7 changed files with 151 additions and 94 deletions.
34 changes: 20 additions & 14 deletions .../public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@

import { i18n } from '@kbn/i18n';
import React, { Component } from 'react';
import { toastNotifications } from 'ui/notify';
import { startMLJob } from '../../../../../services/rest/ml';
import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink';
import { MachineLearningFlyoutView } from './view';
import { KibanaCoreContext } from '../../../../../../../observability/public/context/kibana_core';

interface Props {
isOpen: boolean;
Expand All @@ -23,6 +23,8 @@ interface State {
}

export class MachineLearningFlyout extends Component<Props, State> {
static contextType = KibanaCoreContext;

public state: State = {
isCreatingJob: false
};
Expand Down Expand Up @@ -53,14 +55,15 @@ export class MachineLearningFlyout extends Component<Props, State> {
};

public addErrorToast = () => {
const core = this.context;
const { urlParams } = this.props;
const { serviceName } = urlParams;

if (!serviceName) {
return;
}

toastNotifications.addWarning({
core.notifications.toasts.addWarning({
title: i18n.translate(
'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationTitle',
{
Expand All @@ -86,14 +89,15 @@ export class MachineLearningFlyout extends Component<Props, State> {
}: {
transactionType: string;
}) => {
const core = this.context;
const { urlParams } = this.props;
const { serviceName } = urlParams;

if (!serviceName) {
return;
}

toastNotifications.addSuccess({
core.notifications.toasts.addSuccess({
title: i18n.translate(
'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationTitle',
{
Expand All @@ -113,17 +117,19 @@ export class MachineLearningFlyout extends Component<Props, State> {
}
}
)}{' '}
<MLJobLink
serviceName={serviceName}
transactionType={transactionType}
>
{i18n.translate(
'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText.viewJobLinkText',
{
defaultMessage: 'View job'
}
)}
</MLJobLink>
<KibanaCoreContext.Provider value={core}>
<MLJobLink
serviceName={serviceName}
transactionType={transactionType}
>
{i18n.translate(
'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText.viewJobLinkText',
{
defaultMessage: 'View job'
}
)}
</MLJobLink>
</KibanaCoreContext.Provider>
</p>
)
});
Expand Down
31 changes: 18 additions & 13 deletions ...cy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import { memoize, padLeft, range } from 'lodash';
import moment from 'moment-timezone';
import React, { Component } from 'react';
import styled from 'styled-components';
import { toastNotifications } from 'ui/notify';
import { LegacyCoreStart } from 'src/core/public';
import { KibanaCoreContext } from '../../../../../../observability/public';
import { IUrlParams } from '../../../../context/UrlParamsContext/types';
Expand Down Expand Up @@ -218,7 +217,9 @@ export class WatcherFlyout extends Component<
};

public addErrorToast = () => {
toastNotifications.addWarning({
const core = this.context;

core.notifications.toasts.addWarning({
title: i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationTitle',
{
Expand All @@ -240,7 +241,9 @@ export class WatcherFlyout extends Component<
};

public addSuccessToast = (id: string) => {
toastNotifications.addSuccess({
const core = this.context;

core.notifications.toasts.addSuccess({
title: i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreatedNotificationTitle',
{
Expand All @@ -259,16 +262,18 @@ export class WatcherFlyout extends Component<
}
}
)}{' '}
<KibanaLink
path={`/management/elasticsearch/watcher/watches/watch/${id}`}
>
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreatedNotificationText.viewWatchLinkText',
{
defaultMessage: 'View watch'
}
)}
</KibanaLink>
<KibanaCoreContext.Provider value={core}>
<KibanaLink
path={`/management/elasticsearch/watcher/watches/watch/${id}`}
>
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreatedNotificationText.viewWatchLinkText',
{
defaultMessage: 'View watch'
}
)}
</KibanaLink>
</KibanaCoreContext.Provider>
</p>
)
});
Expand Down
105 changes: 58 additions & 47 deletions ...egacy/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import React from 'react';
import { render, wait, waitForElement } from 'react-testing-library';
import 'react-testing-library/cleanup-after-each';
import { toastNotifications } from 'ui/notify';
import * as callApmApi from '../../../../services/rest/callApmApi';
import { ServiceOverview } from '..';
import * as urlParamsHooks from '../../../../hooks/useUrlParams';
Expand All @@ -22,16 +21,17 @@ function renderServiceOverview() {
return render(<ServiceOverview />);
}

const coreMock = ({
http: {
basePath: {
prepend: (path: string) => `/basepath${path}`
}
},
notifications: { toasts: { addWarning: () => {} } }
} as unknown) as LegacyCoreStart;

describe('Service Overview -> View', () => {
beforeEach(() => {
const coreMock = ({
http: {
basePath: {
prepend: (path: string) => `/basepath${path}`
}
}
} as unknown) as LegacyCoreStart;

// mock urlParams
spyOn(urlParamsHooks, 'useUrlParams').and.returnValue({
urlParams: {
Expand Down Expand Up @@ -141,45 +141,56 @@ describe('Service Overview -> View', () => {
expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
});

it('should render upgrade migration notification when legacy data is found, ', async () => {
// create spies
const toastSpy = jest.spyOn(toastNotifications, 'addWarning');
const dataFetchingSpy = jest
.spyOn(callApmApi, 'callApmApi')
.mockResolvedValue({
hasLegacyData: true,
hasHistoricalData: true,
items: []
});

renderServiceOverview();

// wait for requests to be made
await wait(() => expect(dataFetchingSpy).toHaveBeenCalledTimes(1));

expect(toastSpy).toHaveBeenLastCalledWith(
expect.objectContaining({
title: 'Legacy data was detected within the selected time range'
})
);
describe('when legacy data is found', () => {
it('renders an upgrade migration notification', async () => {
// create spies
const addWarning = jest.spyOn(
coreMock.notifications.toasts,
'addWarning'
);

const dataFetchingSpy = jest
.spyOn(callApmApi, 'callApmApi')
.mockResolvedValue({
hasLegacyData: true,
hasHistoricalData: true,
items: []
});

renderServiceOverview();

// wait for requests to be made
await wait(() => expect(dataFetchingSpy).toHaveBeenCalledTimes(1));

expect(addWarning).toHaveBeenLastCalledWith(
expect.objectContaining({
title: 'Legacy data was detected within the selected time range'
})
);
});
});

it('should not render upgrade migration notification when legacy data is not found, ', async () => {
// create spies
const toastSpy = jest.spyOn(toastNotifications, 'addWarning');
const dataFetchingSpy = jest
.spyOn(callApmApi, 'callApmApi')
.mockResolvedValue({
hasLegacyData: false,
hasHistoricalData: true,
items: []
});

renderServiceOverview();

// wait for requests to be made
await wait(() => expect(dataFetchingSpy).toHaveBeenCalledTimes(1));

expect(toastSpy).not.toHaveBeenCalled();
describe('when legacy data is not found', () => {
it('does not render an upgrade migration notification', async () => {
// create spies
const addWarning = jest.spyOn(
coreMock.notifications.toasts,
'addWarning'
);
const dataFetchingSpy = jest
.spyOn(callApmApi, 'callApmApi')
.mockResolvedValue({
hasLegacyData: false,
hasHistoricalData: true,
items: []
});

renderServiceOverview();

// wait for requests to be made
await wait(() => expect(dataFetchingSpy).toHaveBeenCalledTimes(1));

expect(addWarning).not.toHaveBeenCalled();
});
});
});
6 changes: 3 additions & 3 deletions x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { EuiPanel, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiLink } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useEffect, useMemo } from 'react';
import { toastNotifications } from 'ui/notify';
import url from 'url';
import { useFetcher } from '../../../hooks/useFetcher';
import { NoServicesMessage } from './NoServicesMessage';
Expand Down Expand Up @@ -48,7 +47,8 @@ export function ServiceOverview() {
useEffect(() => {
if (data.hasLegacyData && !hasDisplayedToast) {
hasDisplayedToast = true;
toastNotifications.addWarning({

core.notifications.toasts.addWarning({
title: i18n.translate('xpack.apm.serviceOverview.toastTitle', {
defaultMessage:
'Legacy data was detected within the selected time range'
Expand Down Expand Up @@ -77,7 +77,7 @@ export function ServiceOverview() {
)
});
}
}, [data.hasLegacyData, core.http.basePath]);
}, [data.hasLegacyData, core.http.basePath, core.notifications.toasts]);

useTrackPageview({ app: 'apm', path: 'services_overview' });
useTrackPageview({ app: 'apm', path: 'services_overview', delay: 15000 });
Expand Down
Loading

0 comments on commit 7ade8c5

Please sign in to comment.