Show backup screenshot in activity log

[pidgeonman]

Changes proposed in this Pull Request

• Render an image component to display a screenshot of a backup in the Activity Log entry.
• The image generation was a meetup project.

Testing instructions

1. Apply D36774 and related diffs. Make sure you sandbox both wpcom and vaultpress.
2. Trigger a backup. Take note of the period number.
3. Run the job async_store_backup_screenshot() by hand.
4. You should see the generated screenshot in the AL. It can take some time for it to be generated and saved, so keep refreshing.

OPTIONAL:

Use the API console.

[matticbot]

Test live: https://calypso.live/?branch=add/show_backup_screenshot_in_activity_log

[pidgeonman]

This is a WIP. I need to determine how to get the period parameter. Currently using the rewindId, but it doesn't seem to be the same as the period. However, the basic image retrieval from the backend and rendering is working.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~669 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
stats             +660 B  (+0.1%)     +277 B  (+0.1%)
activity          +660 B  (+0.2%)     +277 B  (+0.3%)
woocommerce        +72 B  (+0.0%)      +25 B  (+0.0%)
settings           +72 B  (+0.0%)      +23 B  (+0.0%)
people             +72 B  (+0.0%)      +23 B  (+0.0%)
hosting            +72 B  (+0.1%)      +23 B  (+0.1%)
account            +72 B  (+0.0%)      +21 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~349 bytes added 📈 [gzipped])

name                                 parsed_size           gzip_size
async-load-signup-steps-clone-point       +660 B  (+0.4%)     +273 B  (+0.8%)
async-load-design-playground               +72 B  (+0.0%)      +25 B  (+0.0%)
async-load-design-blocks                   +72 B  (+0.0%)      +26 B  (+0.0%)
async-load-design                          +72 B  (+0.0%)      +25 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[Aurorum]

Should this phrase be translatable?

[stale]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.

[github-actions]

This PR has been marked as stale due to lack of activity within the last 30 days.