[Synthetics 1.0] Monitor Details -> Monitor Summary -> Last test run panels #137059

awahab07 · 2022-07-25T11:38:57Z

Summary

Tracked in #134204.

Adds the Last test run and Last 10 Test Runs panels on the Monitor Details -> Summary page. Both of the sections are added in one PR as the state is shared between the two UI sections.

A parent level Monitor Details directory is created which will house the Summary, History and Error related sub directories.
A copy is added when a monitor has never run and no information about last test run is available for the selected location. (wasn't in design)
For ping monitors, label-value list is added for Last test run instead of table of steps. (wasn't in design)
The title Last 10 Test Runs will switch to Test Runs if number of available past test runs are less than 10. (wasn't in design)
The empty Status trail histogram panel is hidden for now.

How to test

Setup Kibana and a Synthetics project so that you are able to create monitors via UI as well as push project monitors.
Create at least one browser and one lightweight monitor (HTTP, TCP or ICMP monitor).
Push at least one browser monitor via @elastic/synthetics npm package.
Wait a bit for the results to be ingested.
Go to Synthetics -> Monitors -> click the ... menu of a monitor -> Go to monitor.
Confirm that you can see expected data (as designs suggest) under Last test run and Last 10 Test Runs.
Repeat steps 5 and 6 for other monitors.
Bonus 1 - Use a private location to test the same steps.
Bonus 2 - Push a Lightweight Project Monitor using a yaml as Lightweight Project Monitors are a new implementation. Consult the respective PR for instructions if you are up to it.

elasticmachine · 2022-07-25T18:13:52Z

Pinging @elastic/uptime (Team:uptime)

dominiqueclarke · 2022-08-23T23:40:17Z

@elasticmachine merge upstream

dominiqueclarke · 2022-08-26T16:21:53Z

...nthetics/public/apps/synthetics/components/common/monitor_test_result/browser_steps_list.tsx

+            </strong>
+          </EuiText>
+        ),
+        header: 'Step',


Thanks for catching.

dominiqueclarke · 2022-08-26T16:22:43Z

...nthetics/public/apps/synthetics/components/common/monitor_test_result/no_image_available.tsx

+import { EuiProgress, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { euiStyled } from '@kbn/kibana-react-plugin/common';


I think we're transitioning to using emotion.

dominiqueclarke · 2022-08-26T16:23:54Z

...nthetics/public/apps/synthetics/components/common/monitor_test_result/no_image_available.tsx

+};
+
+const BorderedTextLoading = euiStyled(EuiText)`
+  display: flex;


Seems to be the same styles as above, so could be in a reusable variable.

dominiqueclarke · 2022-08-26T16:24:38Z

...nthetics/public/apps/synthetics/components/common/monitor_test_result/no_image_available.tsx

+  border: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
+`;
+
+export const LoadingImageState = () => {


I'd check with @hbharding about loading states. I think I introduced this loading state in the original Uptime app, but design wasn't happy with it.

dominiqueclarke · 2022-08-26T16:25:58Z

...s/synthetics/public/apps/synthetics/components/common/monitor_test_result/ping_timestamp.tsx

+import { StepImageCaption } from './step_image_caption';
+import { StepImagePopover } from './step_image_popover';
+
+const StepDiv = euiStyled.div`


use emotion if possible.

dominiqueclarke · 2022-08-26T16:28:04Z

...nthetics/public/apps/synthetics/components/common/monitor_test_result/step_image_popover.tsx

+const POPOVER_IMG_HEIGHT = 360;
+const POPOVER_IMG_WIDTH = 640;
+
+const StepImage = euiStyled(EuiImage)`


use emotion if possible.

dominiqueclarke · 2022-08-26T16:30:08Z

.../synthetics/public/apps/synthetics/components/monitor_details/hooks/use_selected_monitor.tsx

+  const { syntheticsMonitor, syntheticsMonitorLoading } = useSelector(selectorMonitorDetailsState);
+  const dispatch = useDispatch();
+
+  const availableMonitor = monitorId


This nested ternary is hard to rease about. Can you refactor it as a switch or if else statement or a helper function of some sort.

dominiqueclarke · 2022-08-26T17:13:03Z

...synthetics/public/apps/synthetics/components/monitor_details/monitor_details_page_header.tsx

+    <>
+      <MonitorDetailsTabs />
+    </>


Suggested change

<>

<MonitorDetailsTabs />

</>

<MonitorDetailsTabs />

dominiqueclarke · 2022-08-29T14:06:40Z

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_details/api.ts

+}
+
+// TODO: Remove the following along with the rest route if not needed
+export const fetchMonitorStatus = async (params: QueryParams): Promise<Ping> => {


Looks like this isn't being used after all. Let's delete it.

dominiqueclarke · 2022-08-29T14:09:56Z

x-pack/plugins/synthetics/public/legacy_uptime/state/effects/synthetic_journey_blocks.ts

+import {
+  ScreenshotBlockDoc,
+  ScreenshotBlockCache,
+  isPendingBlock,


Why is a helper function being imported from runtime_types?

Considering isPendingBlock is a type guard, runtime_types seems a suitable common place. (Also, isScreenshotBlockDoc, another related type guard, was already exported in there)

dominiqueclarke

Lightweight Pings

Lightweight pings contain a hyperlink on the monitor time execution time. This links to the waterfall chart. Hyperlinks should be excluded for lightweight monitors as no further data is available for lightweight monitors in the waterfall chart.

Browser pings

The hyperlink for the waterfall chart in the last test run panel is broken. Notably, the check group appears to be wrong. The check group for the last test run seems to be correct, while the check group for the last test run reported in the last 10 panel is different.

Also, the screenshot in the table is missing. For reference, here is a screenshot from Figma.

Project monitors

Last 10 test runs doesn't work with project monitors

awahab07 · 2022-09-21T08:46:06Z

Updated the implementation to match the updated design (journey and step screenshots)

shahzad31 · 2022-09-21T10:01:06Z

Waterfall is opening in new tab, i think it should remain in same tab

shahzad31

Overall looks great and works as expected.
Code is very clean and well organised.

Great work !!

Please do a follow up to add some e2e test journey for these panels .
I tested this with Browser monitors and an HTTP Monitors.

I can see that it's display a detail panel for ping monitors.

And display step lists for browser monitors.

…r Summary page.

…itor Summary page.

Improve loading spinner styles. Fix step's carousel on step image popover.

kibana-ci · 2022-09-21T15:39:23Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`synthetics`	969	992	+23

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`synthetics`	993.1KB	1021.1KB	+28.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`synthetics`	24.1KB	24.1KB	+56.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`synthetics`	59	60	+1

Total ESLint disabled count

id	before	after	diff
`synthetics`	65	66	+1

History

💚 Build #74389 succeeded f0eb58aba27b945f8c2eb3884e3df7f513106e9f
💛 Build #74360 was flaky 9b6bbb6ed8f4e236cbfe6eed058521362a4e8403
💚 Build #74325 succeeded d29a71b8ecb5b0777df20e4fc668aa815c3b0a19
💚 Build #74211 succeeded 2fe885605bb9e370fd0b24d98fc17b0fd9e8d05b
💚 Build #66927 succeeded 4617f7581cb413f74a2677739c98a5d48067254c
💔 Build #66766 failed de47f53e11237cc1d43d06592c6a8ac244fb42fc

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

dominiqueclarke

LGTM

justinkambic · 2022-10-10T20:34:20Z

In Post-FF testing I've observed that the last test run info block at the top of the page isn't showing up for project monitors. There aren't any pending network requests in my browser either, so it's likely isolated to the client, or we're getting null data back and not handling it in the loading logic:

It's working properly for the monitors I'm managing via the synthetics UI, and a private location:

Aside from these project monitor issues, I'm seeing the appropriate data show up for my monitors as specified in the testing instructions.

paulb-elastic · 2022-10-11T11:58:27Z

Raised #143059 as per @justinkambic's comment

awahab07 force-pushed the summary-page-last-10-test-results branch 4 times, most recently from 4d2550b to 2126a46 Compare July 25, 2022 18:11

awahab07 marked this pull request as ready for review July 25, 2022 18:11

awahab07 requested a review from a team as a code owner July 25, 2022 18:11

awahab07 added Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting v8.4.0 labels Jul 25, 2022

awahab07 mentioned this pull request Jul 25, 2022

[Synthetics] Implement Monitor Overview page #134204

Closed

13 tasks

awahab07 force-pushed the summary-page-last-10-test-results branch from 2126a46 to 1d43936 Compare July 26, 2022 16:29

awahab07 added v8.5.0 and removed v8.4.0 labels Jul 28, 2022

awahab07 force-pushed the summary-page-last-10-test-results branch from 1d43936 to 1b56356 Compare August 17, 2022 10:49

dominiqueclarke reviewed Aug 29, 2022

View reviewed changes

dominiqueclarke requested changes Aug 29, 2022

View reviewed changes

awahab07 force-pushed the summary-page-last-10-test-results branch from 4617f75 to 45c5423 Compare September 20, 2022 18:03

dominiqueclarke self-requested a review September 20, 2022 20:20

shahzad31 approved these changes Sep 21, 2022

View reviewed changes

awahab07 force-pushed the summary-page-last-10-test-results branch 2 times, most recently from f0eb58a to 5b9eee7 Compare September 21, 2022 14:02

awahab07 added 4 commits September 21, 2022 16:38

Serialize error before saving in state.

3355af0

Created monitor_details redux slice.

d48cb30

Rename parent components from "summary" to "details".

b48e0fd

Last test run - browser journey steps under Monitor Details -> Monito…

48313b1

…r Summary page.

awahab07 added 17 commits September 21, 2022 16:38

Last test run - ping monitor type result under Monitor Details -> Mon…

a8a17d5

…itor Summary page.

Last ten test runs panel under Monitor Details -> Monitor Summary.

15a0c0d

Hide empty status panel.

05dbdab

Fix import.

8e1d04c

Fix test.

9c3bef7

Fix step image popover styles and test.

beaf9dc

Rename SyntheticsReducerState to BrowserJourneyState.

268c92d

PR Feedback.

a2eca14

Include step screenshots in "Last 10 Test Results" table.

211062a

Improve loading spinner styles. Fix step's carousel on step image popover.

Fix useBreakpoint.

fda5572

Removed monitor_summary directory.

621d20d

Use config_id instead of monitor.id in monitor_details_panel.tsx

b0a80ab

Use "Result" as step status label.

34823ee

Do not show a link to test details for ping monitors.

bdba73a

Merge with 'main' after rebase for synthetics plugin.

a9c225d

Merge the rebase diff.

8584aea

Open waterfall in _self tab.

5902b5f

awahab07 force-pushed the summary-page-last-10-test-results branch from 5b9eee7 to 5902b5f Compare September 21, 2022 14:39

dominiqueclarke approved these changes Sep 21, 2022

View reviewed changes

awahab07 merged commit fdbf462 into elastic:main Sep 21, 2022

paulb-elastic mentioned this pull request Oct 11, 2022

[Synthetic UI] Incomplete data for Project Monitors on summary page #143059

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Synthetics 1.0] Monitor Details -> Monitor Summary -> Last test run panels #137059

[Synthetics 1.0] Monitor Details -> Monitor Summary -> Last test run panels #137059

awahab07 commented Jul 25, 2022 •

edited

Loading

elasticmachine commented Jul 25, 2022

dominiqueclarke commented Aug 23, 2022

dominiqueclarke Aug 26, 2022

awahab07 Sep 6, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 26, 2022

dominiqueclarke Aug 29, 2022

dominiqueclarke Aug 29, 2022

awahab07 Sep 6, 2022

dominiqueclarke left a comment

awahab07 commented Sep 21, 2022

shahzad31 commented Sep 21, 2022

shahzad31 left a comment

kibana-ci commented Sep 21, 2022

ESLint disabled line counts

Total ESLint disabled count

dominiqueclarke left a comment

justinkambic commented Oct 10, 2022

paulb-elastic commented Oct 11, 2022

[Synthetics 1.0] Monitor Details -> Monitor Summary -> Last test run panels #137059

[Synthetics 1.0] Monitor Details -> Monitor Summary -> Last test run panels #137059

Conversation

awahab07 commented Jul 25, 2022 • edited Loading

Summary

How to test

elasticmachine commented Jul 25, 2022

dominiqueclarke commented Aug 23, 2022

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dominiqueclarke left a comment

Choose a reason for hiding this comment

Lightweight Pings

Browser pings

Project monitors

awahab07 commented Sep 21, 2022

shahzad31 commented Sep 21, 2022

shahzad31 left a comment

Choose a reason for hiding this comment

kibana-ci commented Sep 21, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

dominiqueclarke left a comment

Choose a reason for hiding this comment

justinkambic commented Oct 10, 2022

paulb-elastic commented Oct 11, 2022

awahab07 commented Jul 25, 2022 •

edited

Loading