Skip to content

Commit

Permalink
[Uptime] Fix Monitor status toggle alert receovery state (#89273) (#9…
Browse files Browse the repository at this point in the history
…9094)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
  • Loading branch information
kibanamachine and shahzad31 authored May 3, 2021
1 parent f98c2a2 commit c40f965
Show file tree
Hide file tree
Showing 12 changed files with 337 additions and 246 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,7 @@ export const MonitorPageTitle: React.FC = () => {
<EuiSpacer size="xs" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
<EnableMonitorAlert
monitorId={monitorId}
monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
/>
<EnableMonitorAlert monitorId={monitorId} selectedMonitor={selectedMonitor!} />
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,112 +7,86 @@

import React from 'react';
import { EnableMonitorAlert } from './enable_alert';
import * as redux from 'react-redux';
import {
mountWithRouterRedux,
renderWithRouterRedux,
shallowWithRouterRedux,
} from '../../../../lib';
import { EuiPopover, EuiText } from '@elastic/eui';
import { fireEvent } from '@testing-library/dom';

import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../common/constants';
import { ReactRouterEuiLink } from '../../../common/react_router_helpers';
import { makePing } from '../../../../../common/runtime_types/ping';
import { render } from '../../../../lib/helper/rtl_helpers';
import { DISABLE_STATUS_ALERT, ENABLE_STATUS_ALERT } from './translations';
import { mockState } from '../../../../lib/__mocks__/uptime_store.mock';
import { AlertsResult } from '../../../../state/actions/types';

describe('EnableAlertComponent', () => {
let defaultConnectors: string[] = [];
let alerts: any = [];

beforeEach(() => {
jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn());

jest.spyOn(redux, 'useSelector').mockImplementation((fn, d) => {
if (fn.name === 'selectDynamicSettings') {
return {
settings: Object.assign(DYNAMIC_SETTINGS_DEFAULTS, {
defaultConnectors,
}),
};
}
if (fn.name === 'alertsSelector') {
return {
data: {
data: alerts,
},
loading: false,
};
}
return {};
});
});

it('shallow renders without errors for valid props', () => {
const wrapper = shallowWithRouterRedux(
<EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
it('it displays define connectors when there is none', () => {
const { getByTestId, getByLabelText, getByText } = render(
<EnableMonitorAlert
monitorId={'testMonitor'}
selectedMonitor={makePing({ name: 'My website' })}
/>
);
expect(wrapper).toMatchSnapshot();
});
expect(getByTestId('uptimeDisplayDefineConnector'));
expect(getByLabelText(ENABLE_STATUS_ALERT));

it('renders without errors for valid props', () => {
const wrapper = renderWithRouterRedux(
<EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
);
expect(wrapper).toMatchSnapshot();
});
fireEvent.click(getByTestId('uptimeDisplayDefineConnector'));

it('displays define connectors when there is none', () => {
defaultConnectors = [];
const wrapper = mountWithRouterRedux(
<EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
expect(getByTestId('uptimeSettingsLink')).toHaveAttribute(
'href',
'/settings?focusConnectorField=true'
);
expect(wrapper.find(EuiPopover)).toHaveLength(1);
wrapper.find('button').simulate('click');
expect(wrapper.find(EuiText).text()).toBe(
'To start enabling alerts, please define a default alert action connector in Settings'
expect(
getByText('To start enabling alerts, please define a default alert action connector in')
);
expect(wrapper.find(ReactRouterEuiLink)).toMatchInlineSnapshot(`
<ReactRouterEuiLink
data-test-subj="uptimeSettingsLink"
to="/settings?focusConnectorField=true"
>
<ReactRouterHelperForEui
to="/settings?focusConnectorField=true"
>
<EuiLink
data-test-subj="uptimeSettingsLink"
href="/settings?focusConnectorField=true"
onClick={[Function]}
>
<a
className="euiLink euiLink--primary"
data-test-subj="uptimeSettingsLink"
href="/settings?focusConnectorField=true"
onClick={[Function]}
rel="noreferrer"
>
Settings
</a>
</EuiLink>
</ReactRouterHelperForEui>
</ReactRouterEuiLink>
`);
});

it('does not displays define connectors when there is connector', () => {
defaultConnectors = ['infra-slack-connector-id'];
const wrapper = mountWithRouterRedux(
<EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
const defaultConnectors = ['infra-slack-connector-id'];

const { getByTestId, getByLabelText } = render(
<EnableMonitorAlert
monitorId={'testMonitor'}
selectedMonitor={makePing({ name: 'My website' })}
/>,
{
state: {
dynamicSettings: {
settings: { ...DYNAMIC_SETTINGS_DEFAULTS, defaultConnectors },
loading: false,
},
},
}
);

expect(wrapper.find(EuiPopover)).toHaveLength(0);
expect(getByTestId('uptimeEnableSimpleDownAlerttestMonitor'));
expect(getByLabelText(ENABLE_STATUS_ALERT));
});

it('displays disable when alert is there', () => {
alerts = [{ id: 'test-alert', params: { search: 'testMonitor' } }];
defaultConnectors = ['infra-slack-connector-id'];
const alerts = [{ id: 'test-alert', params: { search: 'testMonitor' } }];
const defaultConnectors = ['infra-slack-connector-id'];

const wrapper = mountWithRouterRedux(
<EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
const { getByTestId, getByLabelText } = render(
<EnableMonitorAlert
monitorId={'testMonitor'}
selectedMonitor={makePing({ name: 'My website' })}
/>,
{
state: {
dynamicSettings: {
settings: { ...DYNAMIC_SETTINGS_DEFAULTS, defaultConnectors },
loading: false,
},
alerts: {
...mockState.alerts,
alerts: {
data: ({ data: alerts } as unknown) as AlertsResult,
loading: false,
},
},
},
}
);

expect(wrapper.find('button').prop('aria-label')).toBe('Disable status alert');
expect(getByTestId('uptimeDisableSimpleDownAlerttestMonitor'));
expect(getByLabelText(DISABLE_STATUS_ALERT));
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ import {
import { MONITOR_ROUTE } from '../../../../../common/constants';
import { DefineAlertConnectors } from './define_connectors';
import { DISABLE_STATUS_ALERT, ENABLE_STATUS_ALERT } from './translations';
import { Ping } from '../../../../../common/runtime_types/ping';

interface Props {
monitorId: string;
monitorName?: string;
selectedMonitor: Ping;
}

export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => {
export const EnableMonitorAlert = ({ monitorId, selectedMonitor }: Props) => {
const [isLoading, setIsLoading] = useState(false);

const { settings } = useSelector(selectDynamicSettings);
Expand Down Expand Up @@ -66,7 +67,7 @@ export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => {
createAlertAction.get({
defaultActions,
monitorId,
monitorName,
selectedMonitor,
})
);
setIsLoading(true);
Expand Down Expand Up @@ -102,28 +103,26 @@ export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => {

return hasDefaultConnectors || hasAlert ? (
<div className="eui-displayInlineBlock" style={{ marginRight: 10 }}>
{
<EuiToolTip content={btnLabel}>
<>
<EuiSwitch
id={'enableDisableAlertSwitch'}
compressed={!isMonitorPage}
disabled={showSpinner}
label={btnLabel}
showLabel={!!isMonitorPage}
aria-label={btnLabel}
onChange={onAlertClick}
checked={!!hasAlert}
data-test-subj={
hasAlert
? 'uptimeDisableSimpleDownAlert' + monitorId
: 'uptimeEnableSimpleDownAlert' + monitorId
}
/>{' '}
{showSpinner && <EuiLoadingSpinner className="eui-alignMiddle" />}
</>
</EuiToolTip>
}
<EuiToolTip content={btnLabel}>
<>
<EuiSwitch
id={'enableDisableAlertSwitch'}
compressed={!isMonitorPage}
disabled={showSpinner}
label={btnLabel}
showLabel={!!isMonitorPage}
aria-label={btnLabel}
onChange={onAlertClick}
checked={!!hasAlert}
data-test-subj={
hasAlert
? 'uptimeDisableSimpleDownAlert' + monitorId
: 'uptimeEnableSimpleDownAlert' + monitorId
}
/>{' '}
{showSpinner && <EuiLoadingSpinner className="eui-alignMiddle" />}
</>
</EuiToolTip>
</div>
) : (
<DefineAlertConnectors />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export const MonitorListComponent: ({
render: (item: MonitorSummary) => (
<EnableMonitorAlert
monitorId={item.monitor_id}
monitorName={item.state.monitor.name || item.monitor_id}
selectedMonitor={item.state.summaryPings[0]}
/>
),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ describe('SyntheticsCallout', () => {
grow={false}
>
<EuiButtonEmpty
data-test-subj="uptimeDismissSyntheticsCallout"
onClick={[Function]}
>
<FormattedMessage
Expand Down Expand Up @@ -115,6 +116,7 @@ describe('SyntheticsCallout', () => {
grow={false}
>
<EuiButtonEmpty
data-test-subj="uptimeDismissSyntheticsCallout"
onClick={[Function]}
>
<FormattedMessage
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const SyntheticsCallout = () => {
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="uptimeDismissSyntheticsCallout"
onClick={() => {
if (shouldShow) {
hideSyntheticsCallout();
Expand Down
Loading

0 comments on commit c40f965

Please sign in to comment.