[POC] Performance Dashboard (Web Vitals)

package.json

@@ -7,11 +7,17 @@
     "npm": ">=10.2.3"
   },
   "dependencies": {
+    "react-google-charts": "^4.0.1",
     "web-vitals": "3.5.0"
   },
   "devDependencies": {
     "@octokit/rest": "^19.0.5",
+    "@wordpress/api-fetch": "^6.51.0",
+    "@wordpress/components": "^27.2.0",
+    "@wordpress/dom-ready": "^3.54.0",
+    "@wordpress/element": "^5.31.0",
     "@wordpress/env": "^8.13.0",
+    "@wordpress/i18n": "^4.54.0",
     "@wordpress/scripts": "^26.19.0",
     "chalk": "^4.1.2",
     "commander": "^9.4.1",
@@ -37,6 +43,7 @@
     "build:plugin:optimization-detective": "webpack --mode production --env plugin=optimization-detective",
     "build:plugin:speculation-rules": "webpack --mode production --env plugin=speculation-rules",
     "build:plugin:webp-uploads": "webpack --mode production --env plugin=webp-uploads",
+    "start:plugin:optimization-detective": "webpack --mode development --watch --env plugin=optimization-detective",
     "format-js": "wp-scripts format",
     "lint-js": "wp-scripts lint-js",
     "format-php": "composer format",

plugins/optimization-detective/class-od-url-metric.php

@@ -14,21 +14,27 @@
 /**
  * Representation of the measurements taken from a single client's visit to a specific URL.
  *
- * @phpstan-type RectData    array{ width: int, height: int }
- * @phpstan-type ElementData array{
- *                               isLCP: bool,
- *                               isLCPCandidate: bool,
- *                               xpath: string,
- *                               intersectionRatio: float,
- *                               intersectionRect: RectData,
- *                               boundingClientRect: RectData,
- *                           }
- * @phpstan-type Data        array{
- *                               url: string,
- *                               timestamp: int,
- *                               viewport: RectData,
- *                               elements: ElementData[]
- *                           }
+ * @phpstan-type RectData     array{ width: int, height: int }
+ * @phpstan-type ElementData  array{
+ *                                isLCP: bool,
+ *                                isLCPCandidate: bool,
+ *                                xpath: string,
+ *                                intersectionRatio: float,
+ *                                intersectionRect: RectData,
+ *                                boundingClientRect: RectData,
+ *                            }
+ * @phpstan-type Data         array{
+ *                                url: string,
+ *                                timestamp: int,
+ *                                viewport: RectData,
+ *                                elements: ElementData[]
+ *                            }
+ * @phpstan-type WebVitalData array{
+ *                                LCP: int,
+ *                                CLS: int,
+ *                                INP: int,
+ *                                TTFB: int,
+ *                            }
  *
  * @since 0.1.0
  * @access private
@@ -38,7 +44,8 @@ final class OD_URL_Metric implements JsonSerializable {
 	/**
 	 * Data.
 	 *
-	 * @var Data
+	 * @var array
+	 * @phpstan-var Data
 	 */
 	private $data;
 
@@ -148,6 +155,34 @@ public static function get_json_schema(): array {
 						'additionalProperties' => false,
 					),
 				),
+				'webVitals'  => array(
+					'description' => __( 'Web vitals metrics', 'optimization-detective' ),
+					'type'        => 'object',
+					'required'    => true,
+					'properties'  => array(
+						// See the URLMetrics in detect.js.
+						'type'                 => 'object',
+						'properties'           => array(
+							'LCP'              => array(
+								'type'     => 'number',
+								'required' => false,
+							),
+							'CLS'              => array(
+								'type'     => 'number',
+								'required' => false,
+							),
+							'TTFB'              => array(
+								'type'     => 'number',
+								'required' => false,
+							),
+							'INP'              => array(
+								'type'     => 'number',
+								'required' => false,
+							),
+						),
+						'additionalProperties' => false,
+					),
+				),
 			),
 			'additionalProperties' => false,
 		);
@@ -165,7 +200,8 @@ public function get_url(): string {
 	/**
 	 * Gets viewport data.
 	 *
-	 * @return RectData Viewport data.
+	 * @return array Viewport data.
+	 * @phpstan-return RectData
 	 */
 	public function get_viewport(): array {
 		return $this->data['viewport'];
@@ -192,16 +228,28 @@ public function get_timestamp(): float {
 	/**
 	 * Gets elements.
 	 *
-	 * @return ElementData[] Elements.
+	 * @return array Elements.
+	 * @phpstan-return ElementData[]
 	 */
 	public function get_elements(): array {
 		return $this->data['elements'];
 	}
 
+	/**
+	 * Gets web vitals.
+	 *
+	 * @return array Web Vitals.
+	 * @phpstan-return WebVitalData
+	 */
+	public function get_web_vitals(): array {
+		return $this->data['webVitals'];
+	}
+
 	/**
 	 * Specifies data which should be serialized to JSON.
 	 *
-	 * @return Data Exports to be serialized by json_encode().
+	 * @return array Exports to be serialized by json_encode().
+	 * @phpstan-return Data
 	 */
 	public function jsonSerialize(): array {
 		return $this->data;

plugins/optimization-detective/dashboard.php

@@ -0,0 +1,82 @@
+<?php
+/**
+ * Optimizing for Optimization Detective.
+ *
+ * @package optimization-detective
+ * @since 0.1.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+function od_add_submenu_page() {
+	add_submenu_page(
+		'index.php',
+		__( 'Performance', 'optimization-detective' ),
+		__( 'Performance', 'optimization-detective' ),
+		'manage_options',
+		'od-performance-dashboard',
+		'od_render_dashboard_page'
+	);
+}
+
+add_action( 'admin_menu', 'od_add_submenu_page' );
+
+function od_render_dashboard_page() {
+	$asset_file = plugin_dir_path( __FILE__ ) . 'build/performance-dashboard.asset.php';
+
+	$asset = require $asset_file;
+
+	wp_enqueue_style( 'wp-components' );
+
+	wp_enqueue_script(
+		'od-performance-dashboard',
+		plugin_dir_url( __FILE__ ) . 'build/performance-dashboard.js',
+		$asset['dependencies'],
+		$asset['version'],
+		array(
+			'in_footer' => true,
+			'strategy'  => 'defer',
+		)
+	);
+
+	$recent_entries = get_posts(
+		array(
+			'post_type'              => OD_URL_Metrics_Post_Type::SLUG,
+			'post_status'            => 'publish',
+			'numberposts'            => 10,
+			'suppress_filters'       => false,
+			'no_found_rows'          => true,
+			'cache_results'          => true,
+			'update_post_meta_cache' => false,
+			'update_post_term_cache' => false,
+			'lazy_load_term_meta'    => false,
+		)
+	);
+
+	$options = array_map( function( $entry ) {
+		return array(
+			'value' => $entry->ID,
+			'label' => $entry->post_title,
+		);
+	}, $recent_entries );
+
+	wp_localize_script(
+		'od-performance-dashboard',
+		'performanceDashboard',
+		array(
+			'options'  => $options,
+			'homeUrl'  => home_url( '/' ),
+			'postType' => OD_URL_Metrics_Post_Type::SLUG,
+		)
+	);
+	?>
+	<div class="wrap">
+		<h2><?php esc_html_e( 'Performance Dashboard', 'optimization-detective' ); ?></h2>
+		<div id="od-performance-dashboard">
+			<?php esc_html_e( 'Loading…', 'optimization-detective' ); ?>
+		</div>
+	</div>
+	<?php
+}