[ML] Add initial docs screenshot generation #121495

pheyos · 2021-12-17T09:10:44Z

Summary

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation.

Details

Scope

Not all of the initially generated screenshots are showing the desired content yet. Also, there's still a list of required screenshots that's not yet taken. This is just the basis so we have something to iterate on.

How to use it

After pulling latest changes, make sure to run yarn kbn bootstrap.

From the x-pack directory run:

node scripts/functional_tests_server.js --config test/screenshot_creation/config.ts

and when that's up, run the following in a separate terminal (again from the x-pack directory, you can also set the environment variable TEST_BROWSER_HEADLESS=1 to run in headless mode):

node scripts/functional_test_runner.js --config test/screenshot_creation/config.ts

After that has finished, you'll find the screenshots in x-pack/test/functional/screenshots/session/ml_docs.
The screenshot files all have a _new suffix, which allows to easily compare them side by side with the already existing docs screenshots.

Implementation

A new directory screenshot_creation has been created in x-pack/test, which behaves like a regular functional test directory but is not connected to any ciGroup, so it won't be picked up automatically and needs manual execution.
The changes outside of that new directory are
- Add screenshot generation details to the ML plugin readme
- Add / adjust data-test-subj properties in the ML UI
- Add / adjust test helper methods: mostly ML services, but also small changes to the screenshot service and the gis_page

elasticmachine · 2021-12-17T09:10:46Z

Pinging @elastic/ml-ui (:ml)

walterra

Code LGTM. Tested screenshot generation locally. Great update!

x-pack/test/screenshot_creation/apps/ml_docs/anomaly_detection/mapping_anomalies.ts

peteharverson · 2021-12-20T10:29:48Z

x-pack/test/screenshot_creation/apps/ml_docs/data_frame_analytics/outlier_detection.ts

+      await transform.wizard.assertDefineStepActive();
+
+      await ml.testExecution.logTestStep('take screenshot');
+      await mlScreenshots.takeScreenshot('logs-transform-preview', screenshotDirectories);


Nit - might be worth including clone in the file name here, in case we add in a screenshot of the preview from the usual create workflow e.g logs-clone-transform-preview?

The screenshot file names are currently defined by the docs team and we're using the exact same names here, so it's easy for them to compare contents. I wouldn't change that as part of this PR, but we can discuss this with docs folks for a follow-up.

x-pack/test/screenshot_creation/apps/ml_docs/anomaly_detection/population_analysis.ts

peteharverson · 2021-12-20T10:37:21Z

x-pack/test/screenshot_creation/apps/ml_docs/data_frame_analytics/outlier_detection.ts

+      await ml.testExecution.logTestStep('fold scatterplot section and take screenshot');
+      await ml.dataFrameAnalyticsResults.expandScatterplotMatrixSection(false);
+      await mlScreenshots.removeFocusFromElement();
+      await mlScreenshots.takeScreenshot('outliers', screenshotDirectories);


Nit - cold add data set and view type new into this file name for consistency with the others e.g. weblog-outliers-results?

See my comment above: we can discuss screenshot file names with docs folks in a follow-up.

peteharverson · 2021-12-20T10:38:09Z

x-pack/test/screenshot_creation/apps/ml_docs/data_frame_analytics/outlier_detection.ts

+      await mlScreenshots.removeFocusFromElement();
+      await ml.dataFrameAnalyticsResults.assertScatterplotMatrixLoaded();
+      await ml.dataFrameAnalyticsResults.scrollScatterplotMatrixIntoView();
+      await mlScreenshots.takeScreenshot('outliers-scatterplot', screenshotDirectories);


Nit - could ad the data set name in here for consistency with the others e.g. weblog-outliers-scatterplot (although that would clash for a screenshot used from the outlier wizard).

See my comment above: we can discuss screenshot file names with docs folks in a follow-up.

x-pack/plugins/ml/readme.md

peteharverson

Tested locally, and latest changes LGTM

kibana-ci · 2021-12-20T12:17:58Z

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id	before	after	diff
`ml`	3.5MB	3.5MB	+254.0B

History

💚 Build #14113 succeeded 6007bca
💚 Build #13837 succeeded c5ec476

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

marius-dr

LGTM

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation.

kibanamachine · 2021-12-20T14:48:41Z

💔 Backport failed

Status	Branch	Result
✅	8.0
❌	7.17	Commit could not be cherrypicked due to conflicts

Successful backport PRs will be merged automatically after passing CI.

To backport manually run:
node scripts/backport --pr 121495

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation. # Conflicts: # x-pack/test/functional/services/ml/test_resources.ts

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation. Co-authored-by: Robert Oskamp <robert.oskamp@elastic.co>

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation. # Conflicts: # x-pack/test/functional/services/ml/test_resources.ts

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation.

pheyos added 10 commits December 17, 2021 09:42

POC for automatic docs screenshot creation

0325cfe

Use non-snapshot Kibana sample data

83323f4

Directory changes and DFA screenshots

b1af5f0

Directory changes, services, first AD screenshots

a1c0e69

initial population job screenshots

2a5fd15

Adjustments for population job screenshots

997b9cd

Add custom urls screenshots

de13c06

Add mapping anomalies screenshots

09c29b9

Skip ecommerce geopoint screenshot

758ebe5

Add back accidentally removed log line

c5ec476

pheyos added :ml v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v8.1.0 v7.17.0 labels Dec 17, 2021

pheyos requested review from walterra, peteharverson and qn895 December 17, 2021 09:10

pheyos requested review from a team as code owners December 17, 2021 09:10

pheyos requested a review from dmlemeshko December 17, 2021 09:11

Merge branch 'main' into docs_screenshots

6007bca

walterra approved these changes Dec 20, 2021

View reviewed changes

Add screenshot generation details to readme

ab39e16

peteharverson reviewed Dec 20, 2021

View reviewed changes

x-pack/plugins/ml/readme.md Show resolved Hide resolved

Address review feedback

a49e3eb

peteharverson approved these changes Dec 20, 2021

View reviewed changes

pheyos added the auto-backport Deprecated - use backport:version if exact versions are needed label Dec 20, 2021

marius-dr approved these changes Dec 20, 2021

View reviewed changes

dmlemeshko approved these changes Dec 20, 2021

View reviewed changes

pheyos merged commit 1d4dce3 into elastic:main Dec 20, 2021

pheyos deleted the docs_screenshots branch December 20, 2021 14:45

kibanamachine mentioned this pull request Dec 20, 2021

[8.0] [ML] Add initial docs screenshot generation (#121495) #121645

Merged

pheyos mentioned this pull request Dec 20, 2021

[7.17] [ML] Add initial docs screenshot generation (#121495) #121647

Merged

mibragimov pushed a commit to mibragimov/kibana that referenced this pull request Dec 22, 2021

[ML] Add initial docs screenshot generation (elastic#121495)

991f1be

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation.

This was referenced Mar 2, 2022

[DOCS] Refresh automated screenshots elastic/elasticsearch#84543

Merged

[DOCS] Refresh automated screenshots elastic/stack-docs#2078

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Add initial docs screenshot generation #121495

[ML] Add initial docs screenshot generation #121495

pheyos commented Dec 17, 2021 •

edited

Loading

elasticmachine commented Dec 17, 2021

walterra left a comment

peteharverson Dec 20, 2021

pheyos Dec 20, 2021

peteharverson Dec 20, 2021

pheyos Dec 20, 2021

peteharverson Dec 20, 2021

pheyos Dec 20, 2021

peteharverson left a comment

kibana-ci commented Dec 20, 2021

marius-dr left a comment

kibanamachine commented Dec 20, 2021

[ML] Add initial docs screenshot generation #121495

[ML] Add initial docs screenshot generation #121495

Conversation

pheyos commented Dec 17, 2021 • edited Loading

Summary

Details

Scope

How to use it

Implementation

elasticmachine commented Dec 17, 2021

walterra left a comment

Choose a reason for hiding this comment

peteharverson Dec 20, 2021

Choose a reason for hiding this comment

pheyos Dec 20, 2021

Choose a reason for hiding this comment

peteharverson Dec 20, 2021

Choose a reason for hiding this comment

pheyos Dec 20, 2021

Choose a reason for hiding this comment

peteharverson Dec 20, 2021

Choose a reason for hiding this comment

pheyos Dec 20, 2021

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

kibana-ci commented Dec 20, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

History

marius-dr left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 20, 2021

💔 Backport failed

pheyos commented Dec 17, 2021 •

edited

Loading