[Uptime] Add callout for synthetics UI (#79563)
* Add callout for synthetics UI. * Refresh outdated test snapshots. * Test synthetics callout component. * Update callout copy. * Update URL for announcement link. * Update test snapshots. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Justin Kambic
GitHub
parent
7f5b824726
commit
8472bb7d10
|
|
@ -0,0 +1,137 @@
|
|||
/*
|
||||
* 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 { shallowWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import React from 'react';
|
||||
import { SyntheticsCallout } from '../synthetics_callout';
|
||||
|
||||
describe('SyntheticsCallout', () => {
|
||||
let setItemMock;
|
||||
let localStorageMock: any;
|
||||
|
||||
beforeEach(() => {
|
||||
setItemMock = jest.fn();
|
||||
localStorageMock = {
|
||||
getItem: jest.fn().mockImplementation(() => null),
|
||||
setItem: setItemMock,
|
||||
};
|
||||
|
||||
// @ts-expect-error replacing a call to localStorage we use for monitor list size
|
||||
global.localStorage = localStorageMock;
|
||||
});
|
||||
|
||||
it('renders component if dismissal flag is unset', () => {
|
||||
expect(shallowWithIntl(<SyntheticsCallout />)).toMatchInlineSnapshot(`
|
||||
<Fragment>
|
||||
<EuiCallOut
|
||||
iconType="beaker"
|
||||
title="Elastic Synthetics"
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
defaultMessage="Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime."
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.content"
|
||||
values={Object {}}
|
||||
/>
|
||||
</p>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButton
|
||||
href="https://www.elastic.co/what-is/synthetic-monitoring"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Read announcement"
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonEmpty
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Dismiss"
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiCallOut>
|
||||
<EuiSpacer
|
||||
size="s"
|
||||
/>
|
||||
</Fragment>
|
||||
`);
|
||||
});
|
||||
|
||||
it('returns null if callout has been dismissed', () => {
|
||||
localStorageMock.getItem = jest.fn().mockImplementation(() => 'true');
|
||||
expect(shallowWithIntl(<SyntheticsCallout />)).toEqual({});
|
||||
});
|
||||
|
||||
it('renders the component, and then returns null when dismiss button clicked', () => {
|
||||
localStorageMock.getItem = jest
|
||||
.fn()
|
||||
.mockImplementationOnce(() => null)
|
||||
.mockImplementationOnce(() => 'true');
|
||||
const wrapper = shallowWithIntl(<SyntheticsCallout />);
|
||||
expect(wrapper).toMatchInlineSnapshot(`
|
||||
<Fragment>
|
||||
<EuiCallOut
|
||||
iconType="beaker"
|
||||
title="Elastic Synthetics"
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
defaultMessage="Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime."
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.content"
|
||||
values={Object {}}
|
||||
/>
|
||||
</p>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButton
|
||||
href="https://www.elastic.co/what-is/synthetic-monitoring"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Read announcement"
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonEmpty
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Dismiss"
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiCallOut>
|
||||
<EuiSpacer
|
||||
size="s"
|
||||
/>
|
||||
</Fragment>
|
||||
`);
|
||||
wrapper.find('EuiButton').simulate('click');
|
||||
expect(wrapper).toEqual({});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
* 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 {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiCallOut,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
import React, { useState } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
const SYNTHETICS_CALLOUT_LS_KEY = 'xpack.uptime.syntheticsCallout.display';
|
||||
const shouldShowSyntheticsCallout = () => {
|
||||
let value = localStorage.getItem(SYNTHETICS_CALLOUT_LS_KEY);
|
||||
if (value === null) {
|
||||
localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'true');
|
||||
value = 'true';
|
||||
}
|
||||
return value === 'true';
|
||||
};
|
||||
const hideSyntheticsCallout = () => localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'false');
|
||||
|
||||
export const SyntheticsCallout = () => {
|
||||
const [shouldShow, setShouldShow] = useState<boolean>(shouldShowSyntheticsCallout());
|
||||
if (!shouldShow) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<EuiCallOut
|
||||
title={i18n.translate('xpack.uptime.overview.pageHeader.syntheticsCallout.title', {
|
||||
defaultMessage: 'Elastic Synthetics',
|
||||
})}
|
||||
iconType="beaker"
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.content"
|
||||
defaultMessage="Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime."
|
||||
/>
|
||||
</p>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton href="https://www.elastic.co/what-is/synthetic-monitoring">
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink"
|
||||
defaultMessage="Read announcement"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
onClick={() => {
|
||||
if (shouldShow) {
|
||||
hideSyntheticsCallout();
|
||||
setShouldShow(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText"
|
||||
defaultMessage="Dismiss"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiCallOut>
|
||||
<EuiSpacer size="s" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -3,6 +3,91 @@
|
|||
exports[`PageHeader shallow renders extra links: page_header_with_extra_links 1`] = `
|
||||
Array [
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width:880px) {
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
class="euiCallOut euiCallOut--primary"
|
||||
>
|
||||
<div
|
||||
class="euiCallOutHeader"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="euiCallOutHeader__icon"
|
||||
data-euiicon-type="beaker"
|
||||
/>
|
||||
<span
|
||||
class="euiCallOutHeader__title"
|
||||
>
|
||||
Elastic Synthetics
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="euiText euiText--small"
|
||||
>
|
||||
<p>
|
||||
Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime.
|
||||
</p>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<a
|
||||
class="euiButton euiButton--primary"
|
||||
href="https://www.elastic.co/what-is/synthetic-monitoring"
|
||||
rel=""
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
class="euiButton__text"
|
||||
>
|
||||
Read announcement
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Dismiss
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width:880px) {
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
/>,
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
.c0.c0.c0 .euiSuperDatePicker__flexWrapper {
|
||||
width: 500px;
|
||||
}
|
||||
|
|
@ -231,6 +316,91 @@ Array [
|
|||
exports[`PageHeader shallow renders with the date picker: page_header_with_date_picker 1`] = `
|
||||
Array [
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width:880px) {
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
class="euiCallOut euiCallOut--primary"
|
||||
>
|
||||
<div
|
||||
class="euiCallOutHeader"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="euiCallOutHeader__icon"
|
||||
data-euiicon-type="beaker"
|
||||
/>
|
||||
<span
|
||||
class="euiCallOutHeader__title"
|
||||
>
|
||||
Elastic Synthetics
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="euiText euiText--small"
|
||||
>
|
||||
<p>
|
||||
Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime.
|
||||
</p>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<a
|
||||
class="euiButton euiButton--primary"
|
||||
href="https://www.elastic.co/what-is/synthetic-monitoring"
|
||||
rel=""
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
class="euiButton__text"
|
||||
>
|
||||
Read announcement
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Dismiss
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width:880px) {
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
/>,
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
.c0.c0.c0 .euiSuperDatePicker__flexWrapper {
|
||||
width: 500px;
|
||||
}
|
||||
|
|
@ -372,6 +542,75 @@ Array [
|
|||
|
||||
exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="euiCallOut euiCallOut--primary"
|
||||
>
|
||||
<div
|
||||
class="euiCallOutHeader"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="euiCallOutHeader__icon"
|
||||
data-euiicon-type="beaker"
|
||||
/>
|
||||
<span
|
||||
class="euiCallOutHeader__title"
|
||||
>
|
||||
Elastic Synthetics
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="euiText euiText--small"
|
||||
>
|
||||
<p>
|
||||
Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime.
|
||||
</p>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<a
|
||||
class="euiButton euiButton--primary"
|
||||
href="https://www.elastic.co/what-is/synthetic-monitoring"
|
||||
rel=""
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
class="euiButton__text"
|
||||
>
|
||||
Read announcement
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Dismiss
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
/>,
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
|
||||
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import styled from 'styled-components';
|
||||
import { UptimeDatePicker } from '../components/common/uptime_date_picker';
|
||||
|
|
@ -13,6 +13,7 @@ import { SETTINGS_ROUTE } from '../../common/constants';
|
|||
import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
|
||||
import { useKibana } from '../../../../../src/plugins/kibana_react/public';
|
||||
import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
|
||||
import { SyntheticsCallout } from '../components/overview/synthetics_callout';
|
||||
|
||||
interface PageHeaderProps {
|
||||
headingText: string | JSX.Element;
|
||||
|
|
@ -83,6 +84,7 @@ export const PageHeader = React.memo(
|
|||
|
||||
return (
|
||||
<>
|
||||
<SyntheticsCallout />
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="spaceBetween"
|
||||
|
|
|
|||
Loading…
Reference in a new issue