Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Screenshotting] PoC print media #126913

Closed

Conversation

jloleysens
Copy link
Contributor

@jloleysens jloleysens commented Mar 4, 2022

Summary

Demonstration (focussing on the dashboard plugin) of how we might leverage browser printing functionality for creating PNG or PDF reports. This will enable users to print certain pages of Kibana in their browser rather than requesting a report from the Kibana server.

If this work succeeds it may have far-reaching implications:

  • we can entirely remove "on-demand" reports from being generated on Kibana and instead only power scheduled reports.
  • plugin owners that wish to provide reports can fully own how their application looks in print by checking the "print" view in browsers, this will greatly ease the development burden of reports
  • we can provide DX utilities that scope SCSS/CSS to print or screens in a trivial way as well as other utilities for specifically working with print media
  • We can remove a node dependency we rely on today, pdfmake, and instead utilise existing browser functionaliy
  • Where rendered as text (not text on Canvas) we can have copy-pastable text in PDFs 馃コ

With this PoC we want to establish that we can:

  • Support preserve-layout style reports (PDF & PNG)
  • Support print-optimized style reports (PDF only)
  • Support canvas, multi-page style reports (PDF only)
  • Support headers and footers (potentially make the custom)
  • Support page numbers
  • Offload all styling concerns to the plugin

Rest of the description TODO

Checklist

Delete any items that are not applicable to this PR.

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk Probability Severity Mitigation/Notes
Multiple Spaces鈥攗nexpected behavior in non-default Kibana Space. Low High Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes鈥擡lasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. High Low Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled. Medium High Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

@jloleysens jloleysens added Feature:Reporting Reporting (PDF, CSV, ..) feature release_note:skip Skip the PR/issue when compiling release notes (Deprecated) Team:Reporting Services Use Team:Global Experiance and Feature:Reporting instead. Team:AppServicesUx v8.2.0 labels Mar 4, 2022
Comment on lines +39 to +55
const mediaAwareStyleLoaders = [
{
resourceQuery: /print/,
loader: 'style-loader',
options: {
attributes: { 'data-print-media-style': 'true' },
},
},
{
resourceQuery: undefined,
loader: 'style-loader',
options: {
attributes: { media: 'screen, projection' },
},
},
];

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The version of style-loader we are using has a known bug for setting the media attribute on style tags webpack-contrib/style-loader#458

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a work-around that instead uses the MutationObserver hacked into core for updating media attributes based on the presence of the data-print-media-style. The result of this is the print styles "flash" once as they are applied by the browser until the MutationObserver kicks in. Very hacky, but work-around for rather not updating style-loader + webpack to latest version.

@jloleysens
Copy link
Contributor Author

@elasticmachine merge upstream

@jloleysens
Copy link
Contributor Author

@elasticmachine merge upstream

@jloleysens
Copy link
Contributor Author

@elasticmachine merge upstream

@jloleysens
Copy link
Contributor Author

@elasticmachine merge upstream

@kibana-ci
Copy link
Collaborator

kibana-ci commented Mar 18, 2022

馃挃 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] Jest Integration Tests #2 / builds expected bundles, saves bundle counts to metadata
  • [job] [logs] Jest Integration Tests #2 / prepares assets for distribution

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
advancedSettings 44 45 +1
banners 14 15 +1
canvas 1088 1090 +2
charts 77 81 +4
console 169 170 +1
controls 143 146 +3
core 335 339 +4
dashboard 266 269 +3
data 533 534 +1
dataEnhanced 57 59 +2
dataViewEditor 86 91 +5
dataViewFieldEditor 136 140 +4
dataViewManagement 135 136 +1
dataVisualizer 345 353 +8
devTools 17 18 +1
discover 429 453 +24
embeddable 75 76 +1
enterpriseSearch 1392 1443 +51
esUiShared 159 161 +2
expressionError 24 25 +1
expressionGauge 32 33 +1
expressionHeatmap 29 30 +1
expressionMetricVis 30 31 +1
expressions 172 173 +1
expressionTagcloud 19 20 +1
fieldFormats 60 61 +1
fleet 573 574 +1
globalSearchBar 29 30 +1
graph 163 166 +3
home 64 65 +1
indexLifecycleManagement 182 189 +7
indexManagement 480 484 +4
infra 915 916 +1
ingestPipelines 458 468 +10
inputControlVis 101 103 +2
inspector 42 44 +2
interactiveSetup 50 51 +1
kibanaOverview 25 26 +1
kibanaReact 317 327 +10
lens 757 794 +37
licenseManagement 127 128 +1
management 30 31 +1
maps 773 776 +3
ml 1555 1573 +18
monitoring 497 514 +17
navigation 16 17 +1
observability 378 381 +3
osquery 250 251 +1
painlessLab 32 33 +1
presentationUtil 182 192 +10
remoteClusters 120 121 +1
reporting 84 86 +2
rollup 140 141 +1
savedObjects 37 38 +1
savedObjectsManagement 76 79 +3
savedObjectsTagging 88 90 +2
searchprofiler 81 82 +1
security 401 412 +11
securitySolution 2944 2945 +1
share 59 60 +1
snapshotRestore 184 185 +1
spaces 185 198 +13
stackAlerts 111 113 +2
transform 298 299 +1
triggersActionsUi 334 347 +13
uiActionsEnhanced 159 161 +2
upgradeAssistant 192 196 +4
visDefaultEditor 124 125 +1
visTypeMarkdown 19 20 +1
visTypeTable 35 36 +1
visTypeTimelion 111 114 +3
visTypeTimeseries 302 305 +3
visTypeVega 228 232 +4
visTypeVislib 176 177 +1
visTypeXy 94 96 +2
visualizations 216 226 +10
watcher 175 176 +1
total +350

Async chunks

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

id before after diff
advancedSettings 40.6KB 40.8KB +280.0B
apm 2.9MB 2.9MB +40.0B
canvas 1.0MB 1.0MB +562.0B
controls 398.6KB 399.4KB +840.0B
core 132.3KB 132.3KB +12.0B
dashboard 294.8KB 291.8KB -3.0KB
dataEnhanced 45.4KB 45.9KB +560.0B
dataViewEditor 114.5KB 115.6KB +1.1KB
dataViewFieldEditor 148.0KB 151.8KB +3.8KB
dataViewManagement 120.8KB 121.1KB +277.0B
dataVisualizer 538.5KB 540.7KB +2.2KB
discover 380.3KB 387.3KB +7.0KB
enterpriseSearch 1.4MB 1.4MB +13.9KB
esUiShared 5.4KB 5.6KB +280.0B
expressionError 13.4KB 14.0KB +554.0B
expressionGauge 10.2KB 10.5KB +280.0B
expressionHeatmap 15.6KB 15.9KB +280.0B
expressionMetricVis 11.1KB 11.4KB +280.0B
expressions 44.6KB 44.6KB +1.0B
expressionTagcloud 7.7KB 8.0KB +280.0B
fleet 676.3KB 676.6KB +279.0B
graph 449.3KB 450.2KB +839.0B
home 75.8KB 76.1KB +277.0B
indexLifecycleManagement 148.2KB 150.1KB +1.9KB
indexManagement 514.8KB 515.6KB +832.0B
infra 925.9KB 926.2KB +283.0B
ingestPipelines 452.0KB 454.8KB +2.7KB
inputControlVis 77.3KB 77.9KB +557.0B
kibanaReact 212.0KB 212.6KB +579.0B
lens 1.1MB 1.1MB +10.1KB
management 8.5KB 8.8KB +280.0B
maps 2.5MB 2.5MB +874.0B
ml 3.3MB 3.3MB +4.9KB
monitoring 470.7KB 475.3KB +4.6KB
observability 408.6KB 409.4KB +844.0B
osquery 949.9KB 950.5KB +563.0B
presentationUtil 136.8KB 138.8KB +1.9KB
remoteClusters 83.3KB 83.6KB +277.0B
reporting 60.4KB 60.9KB +560.0B
rollup 128.9KB 129.2KB +277.0B
savedObjectsManagement 82.7KB 83.5KB +835.0B
savedObjectsTagging 40.6KB 41.1KB +560.0B
security 493.6KB 496.9KB +3.3KB
securitySolution 4.8MB 4.8MB +281.0B
share 2.4KB 2.4KB +1.0B
spaces 152.1KB 155.7KB +3.6KB
stackAlerts 193.9KB 194.4KB +558.0B
transform 375.0KB 375.0KB +1.0B
triggersActionsUi 659.9KB 667.3KB +7.4KB
uiActionsEnhanced 126.7KB 127.3KB +562.0B
upgradeAssistant 178.3KB 179.4KB +1.1KB
visDefaultEditor 142.4KB 142.7KB +277.0B
visTypeMarkdown 5.5KB 5.8KB +277.0B
visTypeTable 15.7KB 16.0KB +280.0B
visTypeTimelion 120.6KB 121.4KB +839.0B
visTypeTimeseries 470.3KB 471.1KB +850.0B
visTypeVega 1.7MB 1.7MB +1.1KB
visTypeVislib 351.5KB 351.8KB +282.0B
visTypeXy 60.6KB 61.2KB +560.0B
visualizations 164.3KB 167.0KB +2.8KB
total +88.1KB

Page load bundle

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

id before after diff
banners 6.5KB 6.8KB +276.0B
charts 58.3KB 59.3KB +1.1KB
console 12.1KB 12.3KB +276.0B
core 295.9KB 297.4KB +1.5KB
dashboard 66.4KB 70.1KB +3.7KB
data 457.3KB 457.6KB +278.0B
dataViewEditor 10.6KB 10.9KB +276.0B
devTools 10.7KB 10.9KB +276.0B
embeddable 65.8KB 66.0KB +277.0B
esUiShared 122.3KB 122.6KB +277.0B
expressions 88.4KB 88.7KB +277.0B
fieldFormats 47.8KB 48.0KB +277.0B
globalSearchBar 19.6KB 19.8KB +276.0B
indexManagement 27.2KB 27.5KB +276.0B
inspector 22.6KB 23.1KB +552.0B
interactiveSetup 58.3KB 58.6KB +277.0B
kibanaOverview 15.5KB 15.7KB +276.0B
kibanaReact 58.7KB 60.9KB +2.2KB
licenseManagement 10.2KB 10.4KB +276.0B
navigation 9.3KB 9.6KB +276.0B
painlessLab 10.5KB 10.7KB +276.0B
presentationUtil 44.6KB 45.7KB +1.1KB
savedObjects 29.0KB 29.3KB +276.0B
searchprofiler 21.5KB 21.7KB +276.0B
security 50.2KB 50.4KB +278.0B
share 52.9KB 53.1KB +275.0B
snapshotRestore 26.6KB 26.9KB +277.0B
transform 14.0KB 14.3KB +276.0B
watcher 13.6KB 13.8KB +276.0B
total +16.3KB

History

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

@jloleysens jloleysens closed this Mar 21, 2022
@jloleysens jloleysens deleted the screenshotting/poc-print-media branch March 21, 2022 09:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
(Deprecated) Team:Reporting Services Use Team:Global Experiance and Feature:Reporting instead. Feature:Reporting Reporting (PDF, CSV, ..) feature release_note:skip Skip the PR/issue when compiling release notes v8.2.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants