From cf1797d4bf56dcd199de6762ebc7ecf3e8197736 Mon Sep 17 00:00:00 2001 From: magdev Date: Mon, 2 Feb 2026 21:45:36 +0100 Subject: [PATCH] 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 --- CHANGELOG.md | 14 +- CLAUDE.md | 14 ++ assets/css/admin.css | 55 +++++++ languages/wp-prometheus-de_CH.mo | Bin 20435 -> 20987 bytes languages/wp-prometheus-de_CH.po | 28 ++++ languages/wp-prometheus.pot | 28 ++++ src/Admin/Settings.php | 255 +++++++++++++++++++++++-------- wp-prometheus.php | 2 +- 8 files changed, 330 insertions(+), 66 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index adc7bd9..868fa1f 100644 --- 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 diff --git a/CLAUDE.md b/CLAUDE.md index 8fadf55..eb24c7f 100644 --- 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 `
` 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 diff --git a/assets/css/admin.css b/assets/css/admin.css index 785bc62..54b908e 100644 --- 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; diff --git a/languages/wp-prometheus-de_CH.mo b/languages/wp-prometheus-de_CH.mo index 0ec05dd725ad892890268fba3a35f9cf469e1577..415103a6257613cd8b3aec47571a0e13b798693c 100644 GIT binary patch delta 5373 zcmYk<33yFs9>?)FZ6XP=C6=+Dh`kadNHIYO4aJZON-M79BqGVp+Zj{_lHE_3Va- z|89y1U5bxfX}E3>Er}7)#-v3UGrOKzjmb_hrXvo+)>wh@xD0j6CbV!jcEhvS79Vb8 z%mD0wiCBpBaRF+aHONpQvzI~x8V+JDJcSMM9LC}|SQl?&XZ#UkuybQ$YGW#DA{nUP zjX+IgGOE8NScxmK3pQwCOdR&ZG{!gC6jsqN8#VKUrs0{H-q@Xbf7Hy&Q3Hig11~{M zWG%MC*HJ6`7&Y*9tb;dE8N7qaT$^7wiG@O9Kbj zoI<7iD(aBja_jd{6Nzf$bQp)~AQ2hUWS}xP36;5g)E1N@yJhC0Ch`huqVFO}G3P?= z7ym>}AlhIhxorK}kqE?uL>c~btEz@xru0u_%2HW8es0Ajm ze62hk882kUQcx;=s1z;1blikGd|#nfbQ3k;|4@guKE3LBZ;#rtbhkdpt&c^$H}X*T zm!UE=57qA?Y_8{j9fcV*yoWX>vrPS<3YEI8ZhbE*L!Y7!BY1p~KXZ*vc#up2uR|T;URWQqLliXN z1nh%zkj0n-_ypc?zwevsq<$)DFDp?Q*@z8s8!BV(qh2_N-S)3hXXEdfhEaUPVjomy zLxU-(gHfnMF$H^K5Ow1=T#S2AE6L&+A%A8w9|?F7 z2e1{l@hR#(Nb@3Gf=PP*n{xsO($F8nDM6jmg{TZ{LUptgHL(w|34Vf|@CwFbZPKCd zTVY-7fZF4p*a)+*0G~u{;URoU&wmXC?Oi4LYmReJr*$2YJ#zqC;y+L;ubbiA-xoE( zf!G3vqZUwzdi*M|4$eSLU@mGxt5I9B1w%S)`zdHfHK-NE^>_BL7b+7OsELh3y&o#j z!sXZsccTV4jmks~YT&!52}KTYUTF1E{WU>7HQfe~f1Ws#>)tRA^_VS0&2Sy+2Rl(I z{|NPpy@(oE`=+gFjg2uC)p0iJar2@wwhXm^gIEjCqb7KHV94p{CJoxV*i2`jcx+9* zGsa;y=3*}LAeil_6kkSV?mBAVI)j}1dm!i2^vAXsL``H3YMf)JiJuBlP)ApBAbx{+ z*lDn{@&%~VzY+C=6K?$?TGXSmoPSVsKyATrBsnGzmB|gL4DLc@-~=jD*HIY`-J?*C zLfjCigBGZPx}#E_g>7&WYUZ<0KYSi_C|BV|tj497JJiWs4Qc|ByaX(4jBT+us{bdk zM9+U2g|ReTz>b)b?Hs;ws17Eh9;b3l#Ai{5Yy;{v??&Bs7~A1l)E?i(82l0SeatZD zebEdjQtyFN^!zWTV9{_3)p5Py&YLa~`K=j)o$+PV%8#N3{sOz;4OFHYKJEc;Od0^cOciCM%8 zgf3p&<`sgMVfZTKQ;%jQkr-|vBd7@}iz|sz;&tNwl|*3!@q6umF@^So2G*sFEFn&) z;$B+S8^lh+Pxy!wVj6LZ&~=q~nz%r$C$p>569byl0mbgyn zXzw6&t#B}d@y|q*x;R4NEn+RPis(V;dY?E)q!K!&I)ZHoJp+e`t;GH76AEQSEkZ|A zS8bw*s3uAXT?2^4;S$F*EK8VAK@Z5Q#E@{K^N|Oyx%F}Q8{$1;G|`$kO7O^-4~f~t z7lf`1hXY?zfF_efW-X$&*3y2p9UE7E` z)#u`CBBBdsc)a;`LG`{y_oAw|Ht!Z2ndJ$1s?H>JjWAU=lG=oDuceDonPX&1C>?Z4jxq1Hmm*gakg)!r!)}s z7MT&AU|}UcO&+N=l<))FSLpHkDQF$ZnchMl%k^48))DS;s>fTBoH_M=vpv=Jk$`DF z+hu*mj%%F66g%{1J5N_EeyhaQT~ Q4Ekq!rj=Ir8oECA|3iO_p#T5? delta 4936 zcmYk<3shBA0><%;@>ECx5f#*n0tyL;C@Pg;0xF4?WHgg04l+JV2T_9@ZfaPfW{H-f zCZs*Jn(-#3W|4)DX{HD*qB0yG)l4>{YgWuSy4KA9yJxdjXZ7*h``mNSex7sf#$KN@ zdwksAhWTzY9PK2U^a?O0&BvJFTXfc#FT;!(f^9eeeZq~QXk4gE($Ix>VhR@HAgsYm zY`_@oz#iDAm($Krq$#(_q0o~L^3fk>VJMbh5U#`!T#X618N1!=#Kd#bfraNCB1?gKu0w5uM;8toeLsSQy7ivz+meL z)Ck679Nve6aTUg69coEVqONO3HEU&2}Gk6+x-502lUP3Kh zmw0EXf>0d`MJ;s<=F`3zOQ8^-K<(Og)JQv!zL>xv&KoNUIc4UcZuBH-b8bgHX0M}` zpcMz=Rn%Jd17@ zdzc*LKeL2Cn(|$!&2|JCylJ)P|A)GN|0JhlQ&F36b`tZSN8wRUXv8N_4P8NP7CjO# z`mny3LiHej*zo28YIFK>SItNys=*;R7N;S7HtVqf582Oycs*+BQ&CGf*-b%HvJ^wH z95rPdP%n~a?D_quy>SfF@GN%2z!A>(!clu64o6}J2H_Iih~=mO`157mCmnA?cRmG8 z^?JM=C-Ln7tip-72}AL7)JVTaHT-W>16@WrOA(AN>glKf6=EnLI@{rU=aqTJMV*q7*72K%w!1~a3=MR(aw)h!5HV&+KySA@5;QZW7(+9IStjp z`KbGpVsBiB>|?VV!}R>0pr9VNp*nH_HPWlt3$?Z9LIi5fDsU^-qn0Y2dF+R`qc&$D zG8VG}wHXhfMtmA|eFv&zH!(`jzd!S?o)1DjZb_)kHv-jxai|Uzpq8Q-wYip~I#iDu z(J9o@T|>>lbyUZ~?r`1*N$8@Uk9t}jMzQE#4pRdz{R8Cp$y{(#&=UAh zaQ?X*g__C-P&ZnPnt>|ROx2;LxB>O!a|-qSR@4k!!GYK{+qrHqZl*p8H8V}9`(HvA zx__oHh(hlir>A3a5%qk$7Z0PJ-&=B>FQ%iOl8G3DGf;bHC2EsaqZ+8iSlo~P*o>ON zR@CR`(fj;gqws4^1o5^h!nx?eCe)3;!xX%ZlQ4ll30R7niCw6M-@rtC4>c2iL%nMC zuM_Q+KB%QgxAi>ir{{k@1@&|-M&T>o5BMJo)MM6;U9o$f^Dm?xs2hz#-FP~(f6Y?l zQu8Kisjj0s*yAo|uf$*g^>_@#WUQopGnzs^Heee1PT^lcI0i4`7L3OgT%@($jjA8S zL~O$Z^quMqAQ?5FJRFKk(1qJ^I37kV!QauX3vW=EgRW`Ljn<$>Z~%4Tar8kCd5Dyg zwM54lQb#g~j=7|OWD*zA(M$#t&0-B%NOlnpjo-c;@Ch=Hs8ecK2R~fiU$Eoen)7D} zJWpOCzavXY68SATNpyTo9w04bJLx?BXbX?v`)Yp;g(iFQR(yr@CAp-S=y;TTPBbea zWESDUFh_}worEXZyKL+`v!3iBoyQ3Z6UpQD#52gMnQa<>GKnE^L{Ea&Ovio)@8()g zc?nrz&uzje5@_omTVKZ%@+a~zd5-*^=wKDS`)fLO*9i{ypZRl+Xd}HybUf`~#^WjC zN8Tm%n3X6z8(MyfP?fs!Cp>%*O&?$~P zNVT`bZnak7DqEgl6%UeHTh|L~C3%yur@fEoG2{Uw)}?m9jiD^%E-&A{NjkT}{lRR=C z*-aLc&VlTs98Nlq`4pZaGstH074ao+5f0~TK~BZ{ixy2e-q!zseMk{mMs%EUFkj$j zq>HV8U=7CmNj3>1uaPgwI __( '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(); ?> - - - +
+
    + $subtab_name ) : ?> + 'wp-prometheus', + 'tab' => 'metrics', + 'subtab' => $subtab_id, + ), + admin_url( 'options-general.php' ) + ); + $active_class = ( $current_subtab === $subtab_id ) ? ' active' : ''; + ?> +
  • + +
    • + +
-
- -

-

-

- - -

- - -
- - render_early_mode_section(); ?> +
+ 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; + } + ?> +
+
-

-

- -

+
+ - -
- -

-
- +

+

+ + + + + + + + + +
+ +
+ + +

+

+ + + + + + + + + +
+ +

+

- + - - - - +
+ + +

+

+ +

+ + +
+ +

+
+ + + + + + + + + + + + + + +
+