[Uptime] Add callout for synthetics UI #79563

justinkambic · 2020-10-05T20:48:24Z

Summary

Adds a callout to the top of the overview page in the Uptime app. When dismissed, a localStorage key is updated to hide the callout permanently.

Working copy is shown here:

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2020-10-05T20:48:27Z

Pinging @elastic/uptime (Team:uptime)

andrewvc · 2020-10-05T22:32:08Z

@elasticmachine merge upstream

andrewvc · 2020-10-06T00:08:30Z

x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx

+        <p>
+          <FormattedMessage
+            id="xpack.uptime.overview.pageHeader.syntheticsCallout.content"
+            defaultMessage="Elastic Uptime now supports synthetic browser monitors! Learn how to use them {here}."


@drewpost thoughts on this copy? and the URL below?

Can I make a small design suggestion for the callout layout? I would like to suggest that we make the link to the synthetics elastic.co page the primary link and allow for users to dismiss the callout as a secondary option. I don't think the small inline link is going to be clicked, thereby making the dismiss option the most common action. Perhaps something like this? I'm sure that we can beef up the copy as well of this announcement 😊

@andrewvc "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"

@andrewvc https://www.elastic.co/what-is/synthetic-monitoring That's the link

@drewpost URL updated in 6e93592.

andrewvc

LGTM pending copy / URL approval from @drewpost

…ibana into uptime_callout-synthetics

justinkambic · 2020-10-06T14:38:14Z

Here's an updated screenshot of how the callout will look:

drewpost · 2020-10-06T15:05:00Z

Here's an updated screenshot of how the callout will look:

Ship it

justinkambic · 2020-10-06T15:06:26Z

Ship it

@drewpost I think you meant to say:

😉

justinkambic · 2020-10-06T19:59:45Z

@elasticmachine merge upstream

kibanamachine · 2020-10-06T21:34:16Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: eabe044

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`uptime`	656	657	+1

async chunks size

id	before	after	diff
`uptime`	1.7MB	1.7MB	+9.4KB

History

💔 Build #80143 failed 4417839
💚 Build #79973 succeeded 3d0a2ca
💔 Build #79936 failed 26b1c47
💔 Build #79891 failed bc78f67

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* 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 <[email protected]>

* 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 <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

justinkambic · 2020-10-07T02:04:55Z

Back ported to:

7.x / 7.10.0 f5116ad
[7.x] [Uptime] Add callout for synthetics UI (#79563) #79803

Add callout for synthetics UI.

bc78f67

justinkambic added v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability release_note:skip Skip the PR/issue when compiling release notes v7.10.0 labels Oct 5, 2020

justinkambic requested review from andrewvc and shahzad31 October 5, 2020 20:48

justinkambic requested a review from a team as a code owner October 5, 2020 20:48

justinkambic self-assigned this Oct 5, 2020

Merge branch 'master' into uptime_callout-synthetics

26b1c47

andrewvc reviewed Oct 6, 2020

View reviewed changes

andrewvc approved these changes Oct 6, 2020

View reviewed changes

justinkambic added 4 commits October 5, 2020 21:11

Refresh outdated test snapshots.

0d4f0c3

Test synthetics callout component.

9b3bd6d

Merge branch 'uptime_callout-synthetics' of github.com:justinkambic/k…

3d0a2ca

…ibana into uptime_callout-synthetics

Merge branch 'master' into uptime_callout-synthetics

b0d5919

justinkambic added 3 commits October 6, 2020 10:44

Update callout copy.

5bb5372

Update URL for announcement link.

6e93592

Update test snapshots.

4417839

Merge branch 'master' into uptime_callout-synthetics

eabe044

justinkambic merged commit 8472bb7 into elastic:master Oct 7, 2020

justinkambic mentioned this pull request Oct 7, 2020

[7.x] [Uptime] Add callout for synthetics UI (#79563) #79803

Merged

justinkambic deleted the uptime_callout-synthetics branch October 7, 2020 02:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime] Add callout for synthetics UI #79563

[Uptime] Add callout for synthetics UI #79563

justinkambic commented Oct 5, 2020 •

edited

Loading

elasticmachine commented Oct 5, 2020

andrewvc commented Oct 5, 2020

andrewvc Oct 6, 2020

formgeist Oct 6, 2020

drewpost Oct 6, 2020

drewpost Oct 6, 2020

justinkambic Oct 6, 2020

andrewvc left a comment

justinkambic commented Oct 6, 2020

drewpost commented Oct 6, 2020

justinkambic commented Oct 6, 2020

justinkambic commented Oct 6, 2020

kibanamachine commented Oct 6, 2020

justinkambic commented Oct 7, 2020 •

edited

Loading

[Uptime] Add callout for synthetics UI #79563

[Uptime] Add callout for synthetics UI #79563

Conversation

justinkambic commented Oct 5, 2020 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Oct 5, 2020

andrewvc commented Oct 5, 2020

andrewvc Oct 6, 2020

Choose a reason for hiding this comment

formgeist Oct 6, 2020

Choose a reason for hiding this comment

drewpost Oct 6, 2020

Choose a reason for hiding this comment

drewpost Oct 6, 2020

Choose a reason for hiding this comment

justinkambic Oct 6, 2020

Choose a reason for hiding this comment

andrewvc left a comment

Choose a reason for hiding this comment

justinkambic commented Oct 6, 2020

drewpost commented Oct 6, 2020

justinkambic commented Oct 6, 2020

justinkambic commented Oct 6, 2020

kibanamachine commented Oct 6, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

History

justinkambic commented Oct 7, 2020 • edited Loading

justinkambic commented Oct 5, 2020 •

edited

Loading

justinkambic commented Oct 7, 2020 •

edited

Loading