Skip to content

Protect Dashboard: Add the Monitor section - #53194

Open
enejb wants to merge 34 commits into
trunkfrom
add/protect-dashboard-monitor
Open

enejb wants to merge 34 commits into
trunkfrom
add/protect-dashboard-monitor

Conversation

@enejb

@enejb enejb commented Oct 6, 2026 •

Copy link
Copy Markdown
Member

Fixes JETPACK-2933

Part of JETPACK-2887

Proposed changes

  • Adds the Monitor section to the flag-gated Protect dashboard, as one file per side of the section framework in packages/protect:
    • PHP src/sections/class-monitor.php: state is the Monitor module's available/active, the number of days shown and whether the current user is connected to WordPress.com, and a new GET jetpack/v4/protect-dashboard/uptime route returning { days, isUp }. It asks WordPress.com (as the connected user) for 90 days of jetpack-monitor-uptime, keeps the newest 40 valid days oldest-first as { date, status, downtimeInMinutes }, and reads the current status from jetpack-monitor-status (isUp: true / false / null). Results are cached for 10 minutes; failures and unknown status for 1 minute. The cache is dropped when Monitor is turned on or off, by any route. A 401 or 403 from WordPress.com is not cached, since it is about one user's token.
    • The route returns 409 while Monitor is off, 403 when the user isn't connected to WordPress.com (checked before the cache), and 502 when WordPress.com fails or returns no usable days.
    • JS routes/dashboard/sections/monitor/: an Overview card with one bar per day (UTC days, localized dates; down days striped, no-data days shorter), a visible "X days up, Y days down, Z days with no data" summary and a screen-reader list of every day, a current-status badge (Operational / Down / Status unknown / Off / Unavailable) and a link to Settings. A Settings card with the "Monitor your site for downtime" toggle and the "Email me…" toggle, which is disabled while Monitor is off or when the user has no WordPress.com connection. Turning Monitor on re-reads the email setting, because activation subscribes the user on the server. Both cards respect available.
    • The bars stay visible in forced-colors mode.
  • packages/protect now requires automattic/jetpack-connection directly, since the section uses the connection client.
  • Dashboard_Test no longer assumes src/sections/ is empty, so the tests keep passing as real sections land.

Related product discussion/links

Does this pull request change what data or activity we track or use?

No. It reads the site's existing Monitor uptime history from WordPress.com.

Testing instructions

  • On a connected site with this branch, enable the flag and module:
    • wp companion feature-flag enable jetpack-protect-dashboard (or the jetpack_feature_flag_enabled_jetpack-protect-dashboard filter)
    • wp eval 'Jetpack_Options::delete_option("available_modules");' then wp jetpack module activate protect-dashboard
    • Make sure the Monitor module is on (wp jetpack module activate monitor).
  • Go to Jetpack › Protect (admin.php?page=jetpack-protect).
  • Overview: the Monitor card shows "Uptime, last 40 days (UTC)" with 40 bars and a summary line below them. Days with full uptime are green and full height, down days red and striped, days without data gray and shorter. Hover a bar to see its localized date and status. The badge reflects the site's current status ("Operational" when up) and the link says "Configure Downtime Monitoring".
  • Click the link: it switches to the Settings tab. The Monitor card has two toggles.
  • Turn "Email me when my site goes down…" off, reload: it stays off. Turn it back on, reload: it stays on.
  • Turn "Monitor your site for downtime" off: the email toggle becomes disabled. Back on Overview the card shows "Off" and "Turn on in Settings". Turn Monitor back on and return to Overview: the bars load again.
  • Turn the email toggle off, then turn Monitor off and on again: the email toggle is back on without a reload.
  • With an admin who is not connected to WordPress.com, the card says "Uptime history is unavailable right now." and the badge says "Status unknown" (even when another admin has warmed the cache). On Settings, the email toggle is disabled and says to connect a WordPress.com account.
  • REST: wp --user=<admin> eval '$r = rest_do_request( new WP_REST_Request( "GET", "/jetpack/v4/protect-dashboard/uptime" ) ); echo wp_json_encode( $r->get_data() );' returns { "days": [...40], "isUp": true }.

Screenshots

Overview card on a site where Monitor was just turned on, so most days have no data:
Monitor card showing Operational with one day up and 39 days with no data

Site down, with sample history (the WordPress.com answer was substituted on a test site to show down days):
Monitor card showing Down with striped down days

The same card in forced-colors mode:
Monitor card in forced-colors mode

WordPress.com unreachable, or the user not connected:
Monitor card saying uptime history is unavailable right now

390px wide RTL
Monitor card at 390px wide Monitor card in a right-to-left admin

Settings card:
Monitor settings card with both toggles on

Settings card for an admin with no WordPress.com connection:
Monitor settings card with the email toggle disabled

@enejb enejb self-assigned this Oct 6, 2026
@github-actions

github-actions Bot commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the add/protect-dashboard-monitor branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack add/protect-dashboard-monitor

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions github-actions Bot added [Feature] Protect Dashboard [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Oct 6, 2026
@github-actions

github-actions Bot commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!


Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

@jp-launch-control

jp-launch-control Bot commented Oct 6, 2026 •

Copy link
Copy Markdown

Code Coverage Summary

Coverage changed in 6 files. Only the first 5 are listed here.

File Coverage Δ% Δ Uncovered
projects/packages/protect/routes/dashboard/data/use-protect-settings.ts 59/61 (96.72%) 0.29% 0 💚
projects/packages/protect/routes/dashboard/components/overview.tsx 5/6 (83.33%) 16.67% -1 💚
projects/packages/protect/routes/dashboard/data/is-module-active.ts 1/1 (100.00%) 100.00% -1 💚
projects/packages/protect/routes/dashboard/components/card.tsx 2/3 (66.67%) 66.67% -2 💚
projects/packages/protect/routes/dashboard/components/settings/setting-toggle.tsx 3/3 (100.00%) 100.00% -3 💚

4 files are newly checked for coverage.

File Coverage
projects/packages/protect/src/sections/class-monitor.php 75/78 (96.15%) 💚
projects/packages/protect/routes/dashboard/sections/monitor/monitor-card.tsx 40/40 (100.00%) 💚
projects/packages/protect/routes/dashboard/sections/monitor/settings-card.tsx 9/9 (100.00%) 💚
projects/packages/protect/routes/dashboard/sections/monitor/types.ts 0/0 (—%) 🤷

Full summary · PHP report · JS report

@enejb
enejb force-pushed the add/protect-dashboard-monitor branch from a2e0ab7 to 7a7a9a5 Compare October 6, 2026 00:55
@enejb
enejb force-pushed the add/protect-dashboard-monitor branch from 6ff6d1b to 9218a31 Compare October 6, 2026 01:22
With the protect-dashboard module active and no standalone plugin, the link went to protect-details or Jetpack Cloud instead of the Protect page.
… retry

A failed save no longer resets the IP list field to the saved value, and a
failed settings load now clears its error on retry and offers a Try again
button. Section types take an optional state type, the tab search param is
narrowed at runtime, and the settings hook returns a stable object.
ProtectCard and CardRow keep their props and now render through Card from
the WordPress UI package, so border, radius, background and header spacing
come from the design system.
… section registry

Adds routes/ to the client Jest roots so route tests run.
The base branch added a Jetpack_Protect_Dashboard_Test class of its own, so
the section registry tests now live in that class and the threats test moves
into the same suite directory.
…to add/protect-dashboard-foundation

# Conflicts:
#	projects/plugins/jetpack/composer.lock
My Jetpack no longer depends on the feature flags package, so the Jetpack plugin now reports the flag through jetpack_my_jetpack_protect_in_jetpack.
Pass MonitorState to ProtectSection and DashboardContext now that they
take a state type, and drop the casts.
@enejb
enejb force-pushed the add/protect-dashboard-foundation branch 3 times, most recently from b531356 to 6567e4b Compare October 8, 2026 14:23
Base automatically changed from add/protect-dashboard-foundation to trunk October 8, 2026 15:34
…d-monitor

# Conflicts:
#	projects/packages/my-jetpack/src/class-main-features.php
#	projects/packages/my-jetpack/src/products/class-protect.php
#	projects/packages/my-jetpack/tests/php/Protect_Product_Test.php
#	projects/plugins/jetpack/_inc/lib/class-jetpack-protect-dashboard-feature-flags.php
#	projects/plugins/jetpack/composer.json
#	projects/plugins/jetpack/composer.lock
#	projects/plugins/jetpack/modules/protect-dashboard.php
#	projects/plugins/jetpack/tests/php/_inc/lib/Jetpack_Protect_Dashboard_Feature_Flags_Test.php
Refuse the uptime route while Monitor is off, drop the cached history when
Monitor is toggled, wait for a Monitor save before fetching, count the days
actually returned in the heading, keep the bars visible in forced-colors
mode, and declare the connection package dependency.
@kraftbj
kraftbj marked this pull request as ready for review October 8, 2026 16:43
@kraftbj kraftbj added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Oct 8, 2026
Re-read the email setting after Monitor is turned on, lock the email toggle
for users without a WordPress.com connection, clear the cached history from
any Monitor toggle, stop one user's refused request from being cached for
every admin, make the day summary translatable as a whole, and cover the
route's permission check and the card's remaining states in tests.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Protect Dashboard [Package] Protect [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] Needs Review This PR is ready for review. [Tests] Includes Tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants