[Uptime] Synthetics UI #77960

justinkambic · 2020-09-18T22:05:32Z

Summary

Adds UI for synthetic monitors. Code is WIP.

TODOs:

Write tests
Support console error/out 504dfbd
Succeeded/Failed/Skipped summary count incorrect b098917
Add experimental callout 4408c81

Stretch:

Paginate steps
Handle case of no step/end and no console steps https://github.com/elastic/kibana/pull/77960/files#diff-00781de1da0b1f33e2e66b3c0cedfdc1R82
~~Loading spinner positioning~~ no longer needed, img src attributes point directly to server

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
This was checked for keyboard-only and screenreader accessibility
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

justinkambic · 2020-10-02T17:58:54Z

@elasticmachine merge upstream

andrewvc

Nearly LGTM except for two lines of code you forgot to delete!

Great work here, looks fantastic!

andrewvc · 2020-10-02T18:18:36Z

...ugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx

+  }));
+
+  it('displays screenshot thumbnail when present', () => {
+    // reactUseSpy.


Delete this line?

Same as the console log, happened due to a blanket commit that I forgot to undo.

andrewvc · 2020-10-02T18:21:27Z

x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx

+
+  if (journey.steps.some(stepConsole)) return <ConsoleOutputEventList journey={journey} />;
+
+  // TODO: should not happen, this means that the journey has no step/end and no console logs, but some other steps; filmstrip, screenshot, etc.


I'm OK with this in an experimental release

andrewvc · 2020-10-02T18:33:02Z

x-pack/plugins/uptime/public/components/monitor/synthetics/empty_journey.tsx

+            defaultMessage="There are no steps associated with the run of this journey."
+          />
+        </p>
+        {!!checkGroup && (


I'm fine with this for now, this is sort of an app-wide problem, this not specific to this PR.

I'm remembering the reason it's optional is that prior to heartbeat 7.something it didn't exist.

I think we can fix this in heartbeat 8.0

andrewvc · 2020-10-02T18:39:12Z

x-pack/plugins/uptime/public/state/selectors/index.ts

@@ -94,3 +94,8 @@ export const searchTextSelector = ({ ui: { searchText } }: AppState) => searchTe
 export const selectedFiltersSelector = ({ selectedFilters }: AppState) => selectedFilters;

 export const monitorIdSelector = ({ ui: { monitorId } }: AppState) => monitorId;
+
+export const journeySelector = ({ journeys }: AppState) => {
+  console.log('journeys', journeys);


We need to remove this console.log statement

I kinda like it /s

This is leftover from the demo I gave you this morning. I did a quick add . && commit for a checkpoint and forgot to reset it and review what I was merging.

see a6764f2

andrewvc · 2020-10-02T18:42:56Z

x-pack/plugins/uptime/server/lib/requests/get_pings.ts

@@ -14,6 +14,43 @@ import {

 const DEFAULT_PAGE_SIZE = 25;

+/**
+ * This branch of filtering is used for monitors of type `browser`. This monitor


Great comment

…c/kibana into uptime_synth-monitors-extend

andrewvc

LGTM WFG

Great job!

kibanamachine · 2020-10-02T20:46:17Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 257f13c

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`uptime`	513	655	+142

async chunks size

id	before	after	diff
`uptime`	1.5MB	1.7MB	+192.2KB

distributable file count

id	before	after	diff
`default`	45831	45835	+4

History

💔 Build #79273 failed 512ea42
💔 Build #79229 failed 01ace89
💔 Build #79173 failed 59b6f99
💔 Build #78971 failed 5f6f325
💔 Build #78944 failed 628e3a2

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

* master: (128 commits) add core-js production dependency (elastic#79395) Add support for sharing saved objects to all spaces (elastic#76132) [Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters (elastic#79038) load js-yaml lazily (elastic#79092) skip flaky suite (elastic#77278) Fix agentPolicyUpdateEventHandler() to use app context soClient for creation of actions (elastic#79341) [Security Solution] Untitled Timeline created when first action is to add note (elastic#78988) [Security Solutions][Detection Engine] Updates the edit rules page to:wq! only have what is selected for editing (elastic#79233) Cleanup yarn.lock from duplicates (elastic#66617) [kbn/optimizer] implement more efficient auto transpilation for node (elastic#79052) [Ingest Manager] Rename Fleet setup and requirement, Fleet => Central… (elastic#79291) [core/server/plugins] don't run discovery in dev server parent process (take 2) (elastic#79358) [babel/register] remove from build (take 2) (elastic#79379) [Security Solution] Changes rules table tag display (elastic#77102) define integrationTestRoot in config file and use to define screensho… (elastic#79247) Revert "[babel/register] remove from build (elastic#79176)" skip flaky suite (elastic#75241) [Uptime] Synthetics UI (elastic#77960) [Security Solution] [Detections] Only display actions options if user has "read" privileges (elastic#78812) [babel/register] remove from build (elastic#79176) ...

* master: (288 commits) add core-js production dependency (elastic#79395) Add support for sharing saved objects to all spaces (elastic#76132) [Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters (elastic#79038) load js-yaml lazily (elastic#79092) skip flaky suite (elastic#77278) Fix agentPolicyUpdateEventHandler() to use app context soClient for creation of actions (elastic#79341) [Security Solution] Untitled Timeline created when first action is to add note (elastic#78988) [Security Solutions][Detection Engine] Updates the edit rules page to only have what is selected for editing (elastic#79233) Cleanup yarn.lock from duplicates (elastic#66617) [kbn/optimizer] implement more efficient auto transpilation for node (elastic#79052) [Ingest Manager] Rename Fleet setup and requirement, Fleet => Central… (elastic#79291) [core/server/plugins] don't run discovery in dev server parent process (take 2) (elastic#79358) [babel/register] remove from build (take 2) (elastic#79379) [Security Solution] Changes rules table tag display (elastic#77102) define integrationTestRoot in config file and use to define screensho… (elastic#79247) Revert "[babel/register] remove from build (elastic#79176)" skip flaky suite (elastic#75241) [Uptime] Synthetics UI (elastic#77960) [Security Solution] [Detections] Only display actions options if user has "read" privileges (elastic#78812) [babel/register] remove from build (elastic#79176) ...

@ts-ignore

* Checkpoint * Various * Display synthetics steps. * Add loading state for snapshots. Add error and stack trace fields. * Lazy load screenshot images and cache screenshot GET endpoint. * Fix extra requests bug. * Improve screenshot empty state. * Switch to use of code block for stack and error. * Add onmouseenter and onmouseleave for image input/popover. * Add image overlay. * Support `skipped` state. * Add synthetics type for Ping. * Fix type references in reducer, api request, components. * Add required mapping logic to journey request function. * Modularize new components. * Delete obsolete code. * Delete unused code. * Test expanded row changes. * Add a test for ping list expand check. * Various fixes * Extract code accordion to new component * Subsume synthetics type into Ping type. * Add new journey viz for 0 steps case. * Use code block for console output. * Expand step count cap. * Improve formatting of console steps visualization. * Improve empty prompt. * Extract empty prompt to dedicated file. * Extract executed journey UI to dedicated file. * Extract console step list components to dedicated files. * Update empty journey prompt to accept only check_group. * Clean up script expanded row component. * Translate console output steps component. * Fix logic error. * Clean up console step component. * Translate empty journey component. * Translate status badge component. * Translate screenshot component. * Add experimental warning callout. * Re-introduce deleted code. * Simplify console output step list. * Support skipped step for executed journeys. * Simplify executed journey component. * Add translations for executed step. * Refresh outdated test snapshots. * Simplify journey reducer signature. * Repair types. * Fix broken i18n naming. * Add summary field to outdated ping test data. * Fix linting error. * Remove @ts-ignore comment. * Add tests for step screenshot display. * Add tests for status badge. * Rename test file. * Add tests for script expanded row. * Add tests for executed step. * Delete request and response fields from Ping's `synthetics` field. * Fix screenshot querying effect, add flag to journey step state. * Update screenshot api route to reply 404 when screenshot is null. * Simplify screenshot image fetching. * Delete obsolete code. * Rename BrowserExpandedRow component. * Remove all references to "suitejourney". * Add intentional var names. * Rename Console components to use "event" terminology instead of "step". * Employ better copy. * First names always bad names. * Rename CodeBlockAccordion component. * Add blob_mime field to Ping type. * Fix busted import path. * Update ping type for new position of errors field. * Repair broken types. * Fix summary querying * Type fixes. * Switch state object from list to KVP. * Checkpoint. * Fix screenshot display test. * Fix executed step test. * Refresh outdated test snapshots. * Repair broken types. * More typing fixes. * Fix console log and add a test. Co-authored-by: Andrew Cholakian <andrew@andrewvc.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # x-pack/test/functional/es_archives/uptime/pings/data.json.gz

@ts-ignore

* Checkpoint * Various * Display synthetics steps. * Add loading state for snapshots. Add error and stack trace fields. * Lazy load screenshot images and cache screenshot GET endpoint. * Fix extra requests bug. * Improve screenshot empty state. * Switch to use of code block for stack and error. * Add onmouseenter and onmouseleave for image input/popover. * Add image overlay. * Support `skipped` state. * Add synthetics type for Ping. * Fix type references in reducer, api request, components. * Add required mapping logic to journey request function. * Modularize new components. * Delete obsolete code. * Delete unused code. * Test expanded row changes. * Add a test for ping list expand check. * Various fixes * Extract code accordion to new component * Subsume synthetics type into Ping type. * Add new journey viz for 0 steps case. * Use code block for console output. * Expand step count cap. * Improve formatting of console steps visualization. * Improve empty prompt. * Extract empty prompt to dedicated file. * Extract executed journey UI to dedicated file. * Extract console step list components to dedicated files. * Update empty journey prompt to accept only check_group. * Clean up script expanded row component. * Translate console output steps component. * Fix logic error. * Clean up console step component. * Translate empty journey component. * Translate status badge component. * Translate screenshot component. * Add experimental warning callout. * Re-introduce deleted code. * Simplify console output step list. * Support skipped step for executed journeys. * Simplify executed journey component. * Add translations for executed step. * Refresh outdated test snapshots. * Simplify journey reducer signature. * Repair types. * Fix broken i18n naming. * Add summary field to outdated ping test data. * Fix linting error. * Remove @ts-ignore comment. * Add tests for step screenshot display. * Add tests for status badge. * Rename test file. * Add tests for script expanded row. * Add tests for executed step. * Delete request and response fields from Ping's `synthetics` field. * Fix screenshot querying effect, add flag to journey step state. * Update screenshot api route to reply 404 when screenshot is null. * Simplify screenshot image fetching. * Delete obsolete code. * Rename BrowserExpandedRow component. * Remove all references to "suitejourney". * Add intentional var names. * Rename Console components to use "event" terminology instead of "step". * Employ better copy. * First names always bad names. * Rename CodeBlockAccordion component. * Add blob_mime field to Ping type. * Fix busted import path. * Update ping type for new position of errors field. * Repair broken types. * Fix summary querying * Type fixes. * Switch state object from list to KVP. * Checkpoint. * Fix screenshot display test. * Fix executed step test. * Refresh outdated test snapshots. * Repair broken types. * More typing fixes. * Fix console log and add a test. Co-authored-by: Andrew Cholakian <andrew@andrewvc.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # x-pack/test/functional/es_archives/uptime/pings/data.json.gz

justinkambic · 2020-10-05T16:47:42Z

Backported to:

7.x/7.10.0 863988a
[7.x] [Uptime] Synthetics UI (#77960) #79482

andrewvc and others added 8 commits June 15, 2020 20:14

Checkpoint

6ab28e6

Various

4cb1b54

Blah

f7e7a0c

Merge remote-tracking branch 'origin/master' into script-monitors

b5e12c2

Merge branch 'master' into uptime_synth-monitors-extend

1a067d7

Merge branch 'master' into uptime_synth-monitors-extend

e1ad0a4

Merge branch 'master' into uptime_synth-monitors-extend

3807a1a

Display synthetics steps.

ce80357

justinkambic added release_note:enhancement v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.10.0 labels Sep 18, 2020

justinkambic self-assigned this Sep 18, 2020

justinkambic added 17 commits September 21, 2020 10:05

Merge branch 'master' into uptime_synth-monitors-extend

f306d44

Add loading state for snapshots. Add error and stack trace fields.

a0ae07e

Merge branch 'master' into uptime_synth-monitors-extend

3068243

Lazy load screenshot images and cache screenshot GET endpoint.

ab26710

Merge branch 'master' into uptime_synth-monitors-extend

2674db2

Fix extra requests bug.

d861e1a

Improve screenshot empty state.

a088ed1

Switch to use of code block for stack and error.

b20f6cc

Add onmouseenter and onmouseleave for image input/popover.

d3f18d1

Add image overlay.

6893024

Support skipped state.

7ee39d7

Add synthetics type for Ping.

e99421f

Fix type references in reducer, api request, components.

a7b21af

Add required mapping logic to journey request function.

bb7ff42

Merge branch 'master' into uptime_synth-monitors-extend

4558c34

Modularize new components.

67a5a85

Delete obsolete code.

bd015f0

Fix summary querying

628e3a2

justinkambic mentioned this pull request Oct 1, 2020

[Uptime] Use KVP data structure for synthetics UI state management elastic/uptime#257

Open

justinkambic added 8 commits October 1, 2020 16:59

Type fixes.

f4473da

Switch state object from list to KVP.

5f6f325

Checkpoint.

59b6f99

Fix screenshot display test.

486d1ec

Fix executed step test.

2696683

Refresh outdated test snapshots.

e302a02

Repair broken types.

33ef0ad

More typing fixes.

01ace89

Merge branch 'master' into uptime_synth-monitors-extend

512ea42

andrewvc requested changes Oct 2, 2020

View reviewed changes

justinkambic added 2 commits October 2, 2020 15:11

Fix console log and add a test.

a6764f2

Merge branch 'uptime_synth-monitors-extend' of github.com:justinkambi…

257f13c

…c/kibana into uptime_synth-monitors-extend

andrewvc approved these changes Oct 2, 2020

View reviewed changes

justinkambic merged commit 0ce8025 into elastic:master Oct 2, 2020

justinkambic mentioned this pull request Oct 2, 2020

[Uptime] Add client-side unit tests for remaining synthetics code #79366

Closed

7 tasks

This was referenced Oct 5, 2020

[Uptime] Revert test data change #79479

Merged

[7.x] [Uptime] Synthetics UI (#77960) #79482

Merged

andrewvc mentioned this pull request Oct 5, 2020

Synthetics MVP elastic/uptime#239

Closed

11 tasks

justinkambic deleted the uptime_synth-monitors-extend branch October 5, 2020 16:47

justinkambic restored the uptime_synth-monitors-extend branch October 12, 2020 19:38

justinkambic mentioned this pull request Oct 12, 2020

[Uptime] Add client-side unit tests for remaining synthetics code #80215

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime] Synthetics UI #77960

[Uptime] Synthetics UI #77960

justinkambic commented Sep 18, 2020 •

edited

Loading

justinkambic commented Oct 2, 2020

andrewvc left a comment

andrewvc Oct 2, 2020

justinkambic Oct 2, 2020

andrewvc Oct 2, 2020

andrewvc Oct 2, 2020

andrewvc Oct 2, 2020

justinkambic Oct 2, 2020

justinkambic Oct 2, 2020

andrewvc Oct 2, 2020

andrewvc left a comment

kibanamachine commented Oct 2, 2020

justinkambic commented Oct 5, 2020


		if (journey.steps.some(stepConsole)) return <ConsoleOutputEventList journey={journey} />;

		// TODO: should not happen, this means that the journey has no step/end and no console logs, but some other steps; filmstrip, screenshot, etc.

[Uptime] Synthetics UI #77960

[Uptime] Synthetics UI #77960

Conversation

justinkambic commented Sep 18, 2020 • edited Loading

Summary

Checklist

For maintainers

justinkambic commented Oct 2, 2020

andrewvc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewvc left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 2, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

distributable file count

History

justinkambic commented Oct 5, 2020

justinkambic commented Sep 18, 2020 •

edited

Loading