feat: Split Metrics tab into sub-tabs and fix early mode storage (v0.4.3)

- Add sub-tabs: Endpoint, Selection, Runtime, Advanced - Fix early mode checkbox not saving (was outside form element) - Add CSS styling for horizontal sub-tab navigation - Update translations with new sub-tab strings Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-02 21:45:36 +01:00
parent 19d75ab7b2
commit cf1797d4bf
8 changed files with 330 additions and 66 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,18 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## [0.4.2] - 2026-02-02
+## [0.4.3] - 2026-02-02

 ### Added

- Option to disable early mode in admin settings (Metrics tab)
+- Sub-tabs navigation within Metrics tab (Endpoint, Selection, Runtime, Advanced)
+- Option to disable early mode in admin settings (Metrics → Advanced)
 - Support for `WP_PROMETHEUS_DISABLE_EARLY_MODE` environment variable
 - Early mode status display in settings

+### Fixed
+
+- Early mode setting now saves correctly (moved into form with proper settings group)
+
 ### Changed

- Early mode can now be disabled for users who need the `wp_prometheus_collect_metrics` hook for custom metrics
- Updated translations with new early mode strings (English and German)
+- Reorganized Metrics tab into logical sub-sections for better usability
+- Early mode can now be disabled for users who need the `wp_prometheus_collect_metrics` hook
+- Updated translations with sub-tab and early mode strings (English and German)

 ## [0.4.1] - 2026-02-02

--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -291,6 +291,20 @@ add_action( 'wp_prometheus_collect_metrics', function( $collector ) {

 ## Session History

+### 2026-02-02 - Sub-tabs & Early Mode Fix (v0.4.3)
+
+- Split Metrics tab into sub-tabs for better organization:
+  - **Endpoint**: Authentication token configuration
+  - **Selection**: Enable/disable individual metrics
+  - **Runtime**: Reset runtime metrics data
+  - **Advanced**: Early mode toggle and status
+- Fixed early mode setting not being saved (was outside form element)
+- Added CSS styling for horizontal sub-tab navigation
+- **Key Learning**: WordPress Settings API form structure
+  - Settings must be inside `<form action="options.php">` with `settings_fields()` call
+  - Each sub-tab needs its own form wrapper for proper saving
+  - Sub-tabs use URL query parameter (`subtab`) within the main tab
+
 ### 2026-02-02 - Early Mode Toggle (v0.4.2)

 - Added option to disable early mode for users who need extensibility
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -9,6 +9,61 @@
    margin-top: 20px;
 }

+/* Sub-tabs navigation */
+.wp-prometheus-subtabs {
+    margin-top: 15px;
+}
+
+.wp-prometheus-subtab-nav {
+    display: flex;
+    margin: 0 0 20px 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: 1px solid #c3c4c7;
+}
+
+.wp-prometheus-subtab-item {
+    margin: 0;
+    padding: 0;
+}
+
+.wp-prometheus-subtab-item a {
+    display: block;
+    padding: 8px 16px;
+    text-decoration: none;
+    color: #50575e;
+    border: 1px solid transparent;
+    border-bottom: none;
+    margin-bottom: -1px;
+    background: transparent;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.wp-prometheus-subtab-item a:hover {
+    color: #2271b1;
+    background: #f6f7f7;
+}
+
+.wp-prometheus-subtab-item.active a {
+    color: #1d2327;
+    background: #fff;
+    border-color: #c3c4c7;
+    border-bottom-color: #fff;
+    font-weight: 600;
+}
+
+.wp-prometheus-subtab-content {
+    background: #fff;
+    border: 1px solid #c3c4c7;
+    border-top: none;
+    padding: 20px;
+}
+
+.wp-prometheus-subtab-content h3:first-child {
+    margin-top: 0;
+}
+
 /* License status box */
 .wp-prometheus-license-status {
    margin: 15px 0;
--- a/languages/wp-prometheus-de_CH.mo
+++ b/languages/wp-prometheus-de_CH.mo
--- a/languages/wp-prometheus-de_CH.po
+++ b/languages/wp-prometheus-de_CH.po
@@ -919,3 +919,31 @@ msgstr "Fruehzeitiger Modus ist aktiviert (aktiv fuer /metrics-Anfragen)"
 #: src/Admin/Settings.php
 msgid "Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh."
 msgstr "Alle gesammelten Laufzeit-Metrikdaten loeschen (HTTP-Anfragen, Datenbank-Abfragen). Dies ist nuetzlich zum Testen oder fuer einen Neuanfang."
+
+#: src/Admin/Settings.php
+msgid "Endpoint"
+msgstr "Endpunkt"
+
+#: src/Admin/Settings.php
+msgid "Selection"
+msgstr "Auswahl"
+
+#: src/Admin/Settings.php
+msgid "Runtime"
+msgstr "Laufzeit"
+
+#: src/Admin/Settings.php
+msgid "Advanced"
+msgstr "Erweitert"
+
+#: src/Admin/Settings.php
+msgid "Runtime Metrics Management"
+msgstr "Laufzeit-Metriken Verwaltung"
+
+#: src/Admin/Settings.php
+msgid "Runtime metrics track HTTP requests and database queries across requests. Use this section to manage accumulated data."
+msgstr "Laufzeit-Metriken erfassen HTTP-Anfragen und Datenbank-Abfragen ueber mehrere Anfragen hinweg. Verwenden Sie diesen Bereich zur Verwaltung der gesammelten Daten."
+
+#: src/Admin/Settings.php
+msgid "Reset Data"
+msgstr "Daten zuruecksetzen"
--- a/languages/wp-prometheus.pot
+++ b/languages/wp-prometheus.pot
@@ -916,3 +916,31 @@ msgstr ""
 #: src/Admin/Settings.php
 msgid "Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh."
 msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Endpoint"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Selection"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Runtime"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Advanced"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Runtime Metrics Management"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Runtime metrics track HTTP requests and database queries across requests. Use this section to manage accumulated data."
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Reset Data"
+msgstr ""
--- a/src/Admin/Settings.php
+++ b/src/Admin/Settings.php
@@ -400,95 +400,228 @@ class Settings {
 		<?php
 	}

+	/**
+	 * Get metrics sub-tabs.
+	 *
+	 * @return array
+	 */
+	private function get_metrics_subtabs(): array {
+		return array(
+			'endpoint'  => __( 'Endpoint', 'wp-prometheus' ),
+			'selection' => __( 'Selection', 'wp-prometheus' ),
+			'runtime'   => __( 'Runtime', 'wp-prometheus' ),
+			'advanced'  => __( 'Advanced', 'wp-prometheus' ),
+		);
+	}
+
+	/**
+	 * Get current metrics sub-tab.
+	 *
+	 * @return string
+	 */
+	private function get_current_metrics_subtab(): string {
+		$subtab  = isset( $_GET['subtab'] ) ? sanitize_key( $_GET['subtab'] ) : 'endpoint';
+		$subtabs = $this->get_metrics_subtabs();
+		return array_key_exists( $subtab, $subtabs ) ? $subtab : 'endpoint';
+	}
+
 	/**
 	 * Render metrics tab content.
 	 *
 	 * @return void
 	 */
 	private function render_metrics_tab(): void {
+		$subtabs         = $this->get_metrics_subtabs();
+		$current_subtab  = $this->get_current_metrics_subtab();
 		?>
-		<form method="post" action="options.php">
-			<?php
-			settings_fields( 'wp_prometheus_metrics_settings' );
-			do_settings_sections( 'wp-prometheus-metrics' );
-			submit_button();
-			?>
-		</form>
+		<div class="wp-prometheus-subtabs">
+			<ul class="wp-prometheus-subtab-nav">
+				<?php foreach ( $subtabs as $subtab_id => $subtab_name ) : ?>
+					<?php
+					$subtab_url = add_query_arg(
+						array(
+							'page'   => 'wp-prometheus',
+							'tab'    => 'metrics',
+							'subtab' => $subtab_id,
+						),
+						admin_url( 'options-general.php' )
+					);
+					$active_class = ( $current_subtab === $subtab_id ) ? ' active' : '';
+					?>
+					<li class="wp-prometheus-subtab-item<?php echo esc_attr( $active_class ); ?>">
+						<a href="<?php echo esc_url( $subtab_url ); ?>"><?php echo esc_html( $subtab_name ); ?></a>
+					</li>
+				<?php endforeach; ?>
+			</ul>

-		<hr style="margin: 30px 0;">
-
-		<h3><?php esc_html_e( 'Reset Runtime Metrics', 'wp-prometheus' ); ?></h3>
-		<p class="description"><?php esc_html_e( 'Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh.', 'wp-prometheus' ); ?></p>
-		<p>
-			<button type="button" id="wp-prometheus-reset-runtime" class="button button-secondary">
-				<?php esc_html_e( 'Reset Runtime Metrics', 'wp-prometheus' ); ?>
-			</button>
-			<span id="wp-prometheus-reset-spinner" class="spinner" style="float: none;"></span>
-		</p>
-		<div id="wp-prometheus-reset-message" style="display: none; margin-top: 10px;"></div>
-
-		<hr style="margin: 30px 0;">
-
-		<?php $this->render_early_mode_section(); ?>
+			<div class="wp-prometheus-subtab-content">
+				<?php
+				switch ( $current_subtab ) {
+					case 'endpoint':
+						$this->render_metrics_endpoint_subtab();
+						break;
+					case 'selection':
+						$this->render_metrics_selection_subtab();
+						break;
+					case 'runtime':
+						$this->render_metrics_runtime_subtab();
+						break;
+					case 'advanced':
+						$this->render_metrics_advanced_subtab();
+						break;
+				}
+				?>
+			</div>
+		</div>
 		<?php
 	}

 	/**
-	 * Render early mode section.
+	 * Render metrics endpoint sub-tab.
 	 *
 	 * @return void
 	 */
-	private function render_early_mode_section(): void {
-		$disabled       = get_option( 'wp_prometheus_disable_early_mode', false );
-		$env_override   = false !== getenv( 'WP_PROMETHEUS_DISABLE_EARLY_MODE' );
-		$early_active   = defined( 'WP_PROMETHEUS_EARLY_METRICS' ) && WP_PROMETHEUS_EARLY_METRICS;
+	private function render_metrics_endpoint_subtab(): void {
 		?>
-		<h3><?php esc_html_e( 'Early Mode', 'wp-prometheus' ); ?></h3>
-		<p class="description">
-			<?php esc_html_e( 'Early mode intercepts /metrics requests before full WordPress initialization. This prevents memory exhaustion issues caused by some plugins (e.g., Twig-based themes/plugins) but disables the wp_prometheus_collect_metrics hook for custom metrics.', 'wp-prometheus' ); ?>
-		</p>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'wp_prometheus_metrics_settings' ); ?>

-		<?php if ( $env_override ) : ?>
-			<div class="notice notice-info inline" style="padding: 12px; margin: 15px 0;">
-				<strong><?php esc_html_e( 'Environment Override Active', 'wp-prometheus' ); ?></strong>
-				<p><?php esc_html_e( 'Early mode is configured via WP_PROMETHEUS_DISABLE_EARLY_MODE environment variable. Admin settings will be ignored.', 'wp-prometheus' ); ?></p>
-			</div>
-		<?php endif; ?>
+			<h3><?php esc_html_e( 'Authentication', 'wp-prometheus' ); ?></h3>
+			<p class="description"><?php esc_html_e( 'Configure authentication for the /metrics endpoint.', 'wp-prometheus' ); ?></p>
+
+			<table class="form-table" role="presentation">
+				<tr>
+					<th scope="row">
+						<label for="wp_prometheus_auth_token"><?php esc_html_e( 'Auth Token', 'wp-prometheus' ); ?></label>
+					</th>
+					<td>
+						<?php $this->render_auth_token_field(); ?>
+					</td>
+				</tr>
+			</table>
+
+			<?php submit_button(); ?>
+		</form>
+		<?php
+	}
+
+	/**
+	 * Render metrics selection sub-tab.
+	 *
+	 * @return void
+	 */
+	private function render_metrics_selection_subtab(): void {
+		?>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'wp_prometheus_metrics_settings' ); ?>
+
+			<h3><?php esc_html_e( 'Enabled Metrics', 'wp-prometheus' ); ?></h3>
+			<p class="description"><?php esc_html_e( 'Select which metrics to expose on the /metrics endpoint.', 'wp-prometheus' ); ?></p>
+
+			<table class="form-table" role="presentation">
+				<tr>
+					<th scope="row"><?php esc_html_e( 'Select Metrics', 'wp-prometheus' ); ?></th>
+					<td>
+						<?php $this->render_enabled_metrics_field(); ?>
+					</td>
+				</tr>
+			</table>
+
+			<?php submit_button(); ?>
+		</form>
+		<?php
+	}
+
+	/**
+	 * Render metrics runtime sub-tab.
+	 *
+	 * @return void
+	 */
+	private function render_metrics_runtime_subtab(): void {
+		?>
+		<h3><?php esc_html_e( 'Runtime Metrics Management', 'wp-prometheus' ); ?></h3>
+		<p class="description"><?php esc_html_e( 'Runtime metrics track HTTP requests and database queries across requests. Use this section to manage accumulated data.', 'wp-prometheus' ); ?></p>

 		<table class="form-table" role="presentation">
 			<tr>
-				<th scope="row"><?php esc_html_e( 'Disable Early Mode', 'wp-prometheus' ); ?></th>
+				<th scope="row"><?php esc_html_e( 'Reset Data', 'wp-prometheus' ); ?></th>
 				<td>
-					<label>
-						<input type="checkbox" name="wp_prometheus_disable_early_mode" value="1"
-							<?php checked( $disabled ); ?>
-							<?php disabled( $env_override ); ?>>
-						<?php esc_html_e( 'Disable early metrics interception', 'wp-prometheus' ); ?>
-					</label>
-					<p class="description">
-						<?php esc_html_e( 'When disabled, metrics are collected through normal WordPress template loading. This enables the wp_prometheus_collect_metrics hook for custom metrics but may cause issues with some plugins.', 'wp-prometheus' ); ?>
+					<p class="description" style="margin-bottom: 10px;">
+						<?php esc_html_e( 'Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh.', 'wp-prometheus' ); ?>
 					</p>
-				</td>
-			</tr>
-			<tr>
-				<th scope="row"><?php esc_html_e( 'Current Status', 'wp-prometheus' ); ?></th>
-				<td>
-					<?php if ( $early_active ) : ?>
-						<span class="dashicons dashicons-yes-alt" style="color: green;"></span>
-						<?php esc_html_e( 'Early mode is active (this request was served via early interception)', 'wp-prometheus' ); ?>
-					<?php elseif ( $disabled || $env_override ) : ?>
-						<span class="dashicons dashicons-dismiss" style="color: gray;"></span>
-						<?php esc_html_e( 'Early mode is disabled', 'wp-prometheus' ); ?>
-					<?php else : ?>
-						<span class="dashicons dashicons-yes-alt" style="color: green;"></span>
-						<?php esc_html_e( 'Early mode is enabled (active for /metrics requests)', 'wp-prometheus' ); ?>
-					<?php endif; ?>
+					<button type="button" id="wp-prometheus-reset-runtime" class="button button-secondary">
+						<?php esc_html_e( 'Reset Runtime Metrics', 'wp-prometheus' ); ?>
+					</button>
+					<span id="wp-prometheus-reset-spinner" class="spinner" style="float: none;"></span>
+					<div id="wp-prometheus-reset-message" style="display: none; margin-top: 10px;"></div>
 				</td>
 			</tr>
 		</table>
 		<?php
 	}

+	/**
+	 * Render metrics advanced sub-tab.
+	 *
+	 * @return void
+	 */
+	private function render_metrics_advanced_subtab(): void {
+		$disabled     = get_option( 'wp_prometheus_disable_early_mode', false );
+		$env_override = false !== getenv( 'WP_PROMETHEUS_DISABLE_EARLY_MODE' );
+		$early_active = defined( 'WP_PROMETHEUS_EARLY_METRICS' ) && WP_PROMETHEUS_EARLY_METRICS;
+		?>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'wp_prometheus_metrics_settings' ); ?>
+
+			<h3><?php esc_html_e( 'Early Mode', 'wp-prometheus' ); ?></h3>
+			<p class="description">
+				<?php esc_html_e( 'Early mode intercepts /metrics requests before full WordPress initialization. This prevents memory exhaustion issues caused by some plugins (e.g., Twig-based themes/plugins) but disables the wp_prometheus_collect_metrics hook for custom metrics.', 'wp-prometheus' ); ?>
+			</p>
+
+			<?php if ( $env_override ) : ?>
+				<div class="notice notice-info inline" style="padding: 12px; margin: 15px 0;">
+					<strong><?php esc_html_e( 'Environment Override Active', 'wp-prometheus' ); ?></strong>
+					<p><?php esc_html_e( 'Early mode is configured via WP_PROMETHEUS_DISABLE_EARLY_MODE environment variable. Admin settings will be ignored.', 'wp-prometheus' ); ?></p>
+				</div>
+			<?php endif; ?>
+
+			<table class="form-table" role="presentation">
+				<tr>
+					<th scope="row"><?php esc_html_e( 'Disable Early Mode', 'wp-prometheus' ); ?></th>
+					<td>
+						<label>
+							<input type="checkbox" name="wp_prometheus_disable_early_mode" value="1"
+								<?php checked( $disabled ); ?>
+								<?php disabled( $env_override ); ?>>
+							<?php esc_html_e( 'Disable early metrics interception', 'wp-prometheus' ); ?>
+						</label>
+						<p class="description">
+							<?php esc_html_e( 'When disabled, metrics are collected through normal WordPress template loading. This enables the wp_prometheus_collect_metrics hook for custom metrics but may cause issues with some plugins.', 'wp-prometheus' ); ?>
+						</p>
+					</td>
+				</tr>
+				<tr>
+					<th scope="row"><?php esc_html_e( 'Current Status', 'wp-prometheus' ); ?></th>
+					<td>
+						<?php if ( $early_active ) : ?>
+							<span class="dashicons dashicons-yes-alt" style="color: green;"></span>
+							<?php esc_html_e( 'Early mode is active (this request was served via early interception)', 'wp-prometheus' ); ?>
+						<?php elseif ( $disabled || $env_override ) : ?>
+							<span class="dashicons dashicons-dismiss" style="color: gray;"></span>
+							<?php esc_html_e( 'Early mode is disabled', 'wp-prometheus' ); ?>
+						<?php else : ?>
+							<span class="dashicons dashicons-yes-alt" style="color: green;"></span>
+							<?php esc_html_e( 'Early mode is enabled (active for /metrics requests)', 'wp-prometheus' ); ?>
+						<?php endif; ?>
+					</td>
+				</tr>
+			</table>
+
+			<?php submit_button(); ?>
+		</form>
+		<?php
+	}
+
 	/**
 	 * Render storage tab content.
 	 *
--- a/wp-prometheus.php
+++ b/wp-prometheus.php
@@ -130,7 +130,7 @@ wp_prometheus_early_metrics_check();
 *
 * @var string
 */
-define( 'WP_PROMETHEUS_VERSION', '0.4.2' );
+define( 'WP_PROMETHEUS_VERSION', '0.4.3' );

 /**
 * Plugin file path.