UNPKG

p3x-redis-ui-material

Version:

💿 P3X Redis UI triple frontend — Angular + React/MUI + Vue/Vuetify with 54 languages, 7 themes, Socket.IO, desktop notifications, and full feature parity

6 lines (5 loc) • 17.5 kB
import{a as Ct}from"./chunk-JTYQ6EUS.js";import{a as Et}from"./chunk-BLYHBMDZ.js";import{a as _t}from"./chunk-PVS3PBYN.js";import{a as gt}from"./chunk-YPZ33LVT.js";import{a as mt,b as dt,c as ct}from"./chunk-BN33DLGQ.js";import{a as lt,b as st}from"./chunk-SQBBDTZO.js";import"./chunk-KLZILXP3.js";import"./chunk-DCOXSL4B.js";import"./chunk-IDORGLM3.js";import{c as ft}from"./chunk-3QQZQR3D.js";import{e as vt}from"./chunk-TEXSADK3.js";import{a as ut,b as yt}from"./chunk-AN7C4JCR.js";import{f as at,j as ot,v as rt}from"./chunk-ICUC3WIE.js";import"./chunk-YA4NX3C4.js";import{c as nt}from"./chunk-VMTBY4VN.js";import{b as pt,c as xt}from"./chunk-HFDIHHHN.js";import"./chunk-7JNYLOAK.js";import{$a as $,Bb as s,Cb as m,Da as C,Db as M,Eb as J,Hb as O,Ia as G,Ib as N,Jb as P,Nb as E,Ob as T,Pd as it,Rd as ht,Xa as S,Ya as I,Zb as X,ab as B,ba as f,bb as h,ca as v,cb as o,db as r,eb as p,jb as A,ka as q,lb as g,nb as x,nc as tt,oc as et,ra as Q,rb as Y,sb as L,tb as V,xa as a}from"./chunk-KQUCMSSK.js";import"./chunk-FCVD6SGJ.js";import{a as U,b as Z,g as Mt,h as R}from"./chunk-O7S4L63H.js";var bt=Mt(Et());var Tt=["typeChart"],kt=["prefixChart"],Dt=(d,u)=>u.type,Rt=(d,u)=>u.prefix;function $t(d,u){if(d&1){let t=A();o(0,"p3xr-ng-button",11),g("click",function(i){return f(t),x().runDoctor(),v(i.stopPropagation())}),r()}if(d&2){let t,e=x();h("label",e.doctorLoading?(t=e.strings().label)==null?null:t.loading:(t=e.strings().intention)==null?null:t.refresh)("mdIcon",e.doctorLoading?"hourglass_empty":"refresh")("disabled",e.doctorLoading)}}function Bt(d,u){if(d&1&&(o(0,"div",8),s(1),r()),d&2){let t=x();a(),M(" ",t.s().doctorNoData," ")}}function At(d,u){if(d&1&&(o(0,"pre",9),s(1),r()),d&2){let t=x();a(),m(t.doctorText)}}function Lt(d,u){if(d&1&&(o(0,"div",10)(1,"mat-icon"),s(2,"hourglass_empty"),r(),o(3,"span"),s(4),r()()),d&2){let t=x();a(4),m(t.s().running)}}function Vt(d,u){if(d&1&&(o(0,"div",10)(1,"mat-icon"),s(2,"analytics"),r(),o(3,"span"),s(4),r()()),d&2){let t=x();a(4),m(t.s().noData)}}function Ot(d,u){if(d&1&&(o(0,"mat-list-item")(1,"div",13)(2,"div",14)(3,"span",24),s(4),r(),o(5,"span",25),s(6),r()(),o(7,"div",15),s(8),r()()(),p(9,"mat-divider")),d&2){let t=u.$implicit,e=x(2);a(4),m(t.type),a(2),M("",t.count," keys"),a(2),m(e.formatBytes(t.bytes))}}function Nt(d,u){if(d&1&&(o(0,"mat-list-item")(1,"div",13)(2,"div",14)(3,"span",26),s(4),r(),o(5,"span",27),s(6),r(),o(7,"span",25),s(8),r()(),o(9,"div",15),s(10),r()()(),p(11,"mat-divider")),d&2){let t=u.$implicit,e=u.$index,i=x(2);a(4),M("#",e+1),a(2),m(t.prefix),a(2),M("",t.keyCount," keys"),a(2),m(i.formatBytes(t.totalBytes))}}function Pt(d,u){if(d&1){let t=A();o(0,"p3xr-ng-accordion",12)(1,"div",3)(2,"p3xr-ng-button",11),g("click",function(i){return f(t),x().runAnalysis(),v(i.stopPropagation())}),r(),o(3,"p3xr-ng-button",6),g("click",function(i){return f(t),x().exportOverview(),v(i.stopPropagation())}),r()(),o(4,"div",7)(5,"mat-list")(6,"mat-list-item")(7,"div",13)(8,"div",14),s(9),r(),o(10,"div",15),s(11),E(12,"number"),E(13,"number"),r()()(),p(14,"mat-divider"),o(15,"mat-list-item")(16,"div",13)(17,"div",14),s(18),r(),o(19,"div",16)(20,"p3xr-ng-input",17),P("ngModelChange",function(i){f(t);let l=x();return N(l.topN,i)||(l.topN=i),v(i)}),r()()()(),p(21,"mat-divider"),o(22,"mat-list-item")(23,"div",13)(24,"div",14),s(25),r(),o(26,"div",16)(27,"p3xr-ng-input",18),P("ngModelChange",function(i){f(t);let l=x();return N(l.maxScanKeys,i)||(l.maxScanKeys=i),v(i)}),r()()()()()()(),p(28,"br"),o(29,"p3xr-ng-accordion",19)(30,"div",3)(31,"p3xr-ng-button",6),g("click",function(i){return f(t),x().exportMemoryBreakdown(),v(i.stopPropagation())}),r()(),o(32,"div",7)(33,"mat-list")(34,"mat-list-item")(35,"div",13)(36,"div",14),s(37),r(),o(38,"div",15),s(39),r()()(),p(40,"mat-divider"),o(41,"mat-list-item")(42,"div",13)(43,"div",14),s(44),r(),o(45,"div",15),s(46),r()()(),p(47,"mat-divider"),o(48,"mat-list-item")(49,"div",13)(50,"div",14),s(51),r(),o(52,"div",15),s(53),r()()(),p(54,"mat-divider"),o(55,"mat-list-item")(56,"div",13)(57,"div",14),s(58),r(),o(59,"div",15),s(60),r()()(),p(61,"mat-divider"),o(62,"mat-list-item")(63,"div",13)(64,"div",14),s(65),r(),o(66,"div",15),s(67),r()()(),p(68,"mat-divider"),o(69,"mat-list-item")(70,"div",13)(71,"div",14),s(72),r(),o(73,"div",15),s(74),r()()(),p(75,"mat-divider"),o(76,"mat-list-item")(77,"div",13)(78,"div",14),s(79),r(),o(80,"div",15),s(81),r()()(),p(82,"mat-divider"),o(83,"mat-list-item")(84,"div",13)(85,"div",14),s(86),r(),o(87,"div",15),s(88),r()()()()()(),p(89,"br"),o(90,"p3xr-ng-accordion",20)(91,"div",3)(92,"p3xr-ng-button",6),g("click",function(i){f(t);let l=x();return l.exportChart(l.typeChartRef,"type-distribution"),v(i.stopPropagation())}),r()(),o(93,"div",7),p(94,"div",21,0),o(96,"mat-list"),$(97,Ot,10,3,null,null,Dt),r()()(),p(99,"br"),o(100,"p3xr-ng-accordion",22)(101,"div",3)(102,"p3xr-ng-button",6),g("click",function(i){f(t);let l=x();return l.exportChart(l.prefixChartRef,"memory-by-prefix"),v(i.stopPropagation())}),r()(),o(103,"div",7),p(104,"div",21,1),o(106,"mat-list"),$(107,Nt,12,4,null,null,Rt),r()()(),p(109,"br"),o(110,"p3xr-ng-accordion",23)(111,"div",3)(112,"p3xr-ng-button",6),g("click",function(i){return f(t),x().exportExpiration(),v(i.stopPropagation())}),r()(),o(113,"div",7)(114,"mat-list")(115,"mat-list-item")(116,"div",13)(117,"div",14),s(118),r(),o(119,"div",15),s(120),E(121,"number"),r()()(),p(122,"mat-divider"),o(123,"mat-list-item")(124,"div",13)(125,"div",14),s(126),r(),o(127,"div",15),s(128),E(129,"number"),r()()(),p(130,"mat-divider"),o(131,"mat-list-item")(132,"div",13)(133,"div",14),s(134),r(),o(135,"div",15),s(136),r()()()()()()}if(d&2){let t,e,i,l,c,n=x();h("title",n.s().title),a(2),h("label",n.loading?n.s().running:n.s().runAnalysis)("mdIcon",n.loading?"hourglass_empty":"play_arrow")("disabled",n.loading),a(),h("label",(t=n.strings().intention)==null?null:t.export),a(6),m(n.s().keysScanned),a(2),J("",T(12,42,n.data.totalScanned)," / ",T(13,44,n.data.dbSize)),a(7),m(n.s().topN),a(2),O("ngModel",n.topN),a(5),m(n.s().maxScanKeys),a(2),O("ngModel",n.maxScanKeys),a(2),h("title",n.s().memoryBreakdown),a(2),h("label",(e=n.strings().intention)==null?null:e.export),a(6),m(n.s().totalMemory),a(2),m(n.data.memoryInfo.usedHuman),a(5),m(n.s().rssMemory),a(2),m(n.data.memoryInfo.rssHuman),a(5),m(n.s().peakMemory),a(2),m(n.data.memoryInfo.peakHuman),a(5),m(n.s().overheadMemory),a(2),m(n.formatBytes(n.data.memoryInfo.overhead)),a(5),m(n.s().datasetMemory),a(2),m(n.formatBytes(n.data.memoryInfo.dataset)),a(5),m(n.s().luaMemory),a(2),m(n.formatBytes(n.data.memoryInfo.lua)),a(5),m(n.s().fragmentation),a(2),M("",n.data.memoryInfo.fragRatio,"x"),a(5),m(n.s().allocator),a(2),m(n.data.memoryInfo.allocator),a(2),h("title",n.s().typeDistribution),a(2),h("label",(i=n.strings().intention)==null?null:i.export),a(5),B(n.typeEntries),a(3),h("title",n.s().prefixMemory),a(2),h("label",(l=n.strings().intention)==null?null:l.export),a(5),B(n.data.prefixMemory),a(3),h("title",n.s().expirationOverview),a(2),h("label",(c=n.strings().intention)==null?null:c.export),a(6),m(n.s().withTTL),a(2),m(T(121,46,n.data.expirationOverview.withTTL)),a(6),m(n.s().persistent),a(2),m(T(129,48,n.data.expirationOverview.persistent)),a(6),m(n.s().avgTTL),a(2),m(n.formatTTL(n.data.expirationOverview.avgTTL))}}var pe=(()=>{class d{i18n;socket;common;cdr;ngZone;elementRef;state;settings;strings;data=null;loading=!1;topN=20;maxScanKeys=5e3;typeEntries=[];doctorText=null;doctorLoading=!1;autoRefreshDoctor=!1;doctorInterval=null;typeChartRef;prefixChartRef;unsubFns=[];resizeObserver=null;themeObserver=null;resizeTimer;constructor(t,e,i,l,c,n,_,b){this.i18n=t,this.socket=e,this.common=i,this.cdr=l,this.ngZone=c,this.elementRef=n,this.state=_,this.settings=b,this.strings=this.i18n.strings}s(){return this.strings().page?.analysis||{}}get connName(){return this.state.connection()?.name||"redis"}ngOnInit(){this.autoRefreshDoctor=localStorage.getItem("p3xr-monitor-auto-doctor")==="true",this.autoRefreshDoctor&&this.startDoctorInterval(),this.state.connection()&&this.runAnalysis();let t=this.socket.stateChanged$.subscribe(()=>{this.data=null,this.state.connection()&&this.runAnalysis()});this.unsubFns.push(()=>t.unsubscribe())}ngAfterViewInit(){this.ngZone.runOutsideAngular(()=>{this.resizeObserver=new ResizeObserver(()=>{clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout(()=>{this.data&&this.drawCharts()},150)}),this.resizeObserver.observe(this.elementRef.nativeElement)}),this.ngZone.runOutsideAngular(()=>{this.themeObserver=new MutationObserver(()=>{this.data&&setTimeout(()=>this.drawCharts(),100)}),this.themeObserver.observe(document.body,{attributes:!0,attributeFilter:["class"]})})}ngOnDestroy(){this.stopDoctorInterval(),this.themeObserver?.disconnect(),this.resizeObserver?.disconnect(),this.unsubFns.forEach(t=>t())}recalcHostHeight(){let t=this.elementRef.nativeElement;if(!t)return;let e=t.getBoundingClientRect(),i=document.getElementById("p3xr-layout-footer-container")?.offsetHeight||48,l=window.innerHeight-e.top-i;t.style.height=Math.max(l,100)+"px",t.style.overflowY="auto"}runAnalysis(){return R(this,null,function*(){if(!this.loading){this.loading=!0,this.safeDetectChanges();try{let t=yield this.socket.request({action:"memory/analysis",payload:{topN:this.topN,maxScanKeys:this.maxScanKeys}});this.data=t.data,this.typeEntries=Object.keys(this.data.typeDistribution).map(e=>({type:e,count:this.data.typeDistribution[e],bytes:this.data.typeMemory[e]||0})).sort((e,i)=>i.bytes-e.bytes),this.loading=!1,this.safeDetectChanges(),setTimeout(()=>this.drawCharts(),100)}catch(t){this.loading=!1,this.safeDetectChanges(),this.common.generalHandleError(t)}}})}runDoctor(){return R(this,null,function*(){this.doctorLoading=!0,this.safeDetectChanges();try{let t=yield this.socket.request({action:"memory/doctor"});this.doctorText=t.data.text}catch(t){this.common.generalHandleError(t)}finally{this.doctorLoading=!1,this.safeDetectChanges()}})}toggleAutoDoctor(){this.autoRefreshDoctor=!this.autoRefreshDoctor,localStorage.setItem("p3xr-monitor-auto-doctor",String(this.autoRefreshDoctor)),this.autoRefreshDoctor?(this.runDoctor(),this.startDoctorInterval()):this.stopDoctorInterval()}startDoctorInterval(){this.stopDoctorInterval(),this.doctorInterval=setInterval(()=>this.runDoctor(),2e3)}stopDoctorInterval(){this.doctorInterval&&(clearInterval(this.doctorInterval),this.doctorInterval=null)}exportDoctor(){this.doctorText&&this.downloadText(this.doctorText,`${this.connName}-memory-doctor.txt`)}formatBytes(t){return t==null||isNaN(t)?"-":t<1024?t+" B":t<1024*1024?(t/1024).toFixed(1)+" KB":t<1024*1024*1024?(t/(1024*1024)).toFixed(1)+" MB":(t/(1024*1024*1024)).toFixed(2)+" GB"}formatTTL(t){if(!t||t<=0)return"-";try{let e=this.settings.getHumanizeDurationOptions();return(0,bt.default)(t*1e3,Z(U({},e),{delimiter:" "}))}catch(e){return t<60?t+"s":t<3600?Math.floor(t/60)+"m "+t%60+"s":t<86400?Math.floor(t/3600)+"h "+Math.floor(t%3600/60)+"m":Math.floor(t/86400)+"d "+Math.floor(t%86400/3600)+"h"}}formatUptime(t){let e=Math.floor(t/86400),i=Math.floor(t%86400/3600),l=Math.floor(t%3600/60);return e>0?`${e}d ${i}h ${l}m`:i>0?`${i}h ${l}m`:`${l}m`}downloadText(t,e){let i=new Blob([t],{type:"text/plain"}),l=URL.createObjectURL(i),c=document.createElement("a");c.href=l,c.download=e,c.click(),URL.revokeObjectURL(l)}exportOverview(){if(!this.data)return;let t=this.s();this.downloadText([`${t.keysScanned}: ${this.data.totalScanned} / ${this.data.dbSize}`,`${t.topN}: ${this.topN}`,`${t.maxScanKeys}: ${this.maxScanKeys}`].join(` `),`${this.connName}-analysis-overview.txt`)}exportMemoryBreakdown(){if(!this.data)return;let t=this.s(),e=this.data.memoryInfo;this.downloadText([`${t.totalMemory}: ${e.usedHuman}`,`${t.rssMemory}: ${e.rssHuman}`,`${t.peakMemory}: ${e.peakHuman}`,`${t.overheadMemory}: ${this.formatBytes(e.overhead)}`,`${t.datasetMemory}: ${this.formatBytes(e.dataset)}`,`${t.luaMemory}: ${this.formatBytes(e.lua)}`,`${t.fragmentation}: ${e.fragRatio}x`,`${t.allocator}: ${e.allocator}`].join(` `),`${this.connName}-memory-breakdown.txt`)}exportExpiration(){if(!this.data)return;let t=this.s(),e=this.data.expirationOverview;this.downloadText([`${t.withTTL}: ${e.withTTL}`,`${t.persistent}: ${e.persistent}`,`${t.avgTTL}: ${this.formatTTL(e.avgTTL)}`].join(` `),`${this.connName}-expiration.txt`)}exportChart(t,e){let i=t?.nativeElement?.querySelector("canvas");if(!i)return;let l=document.createElement("canvas");l.width=i.width,l.height=i.height;let c=l.getContext("2d");c.fillStyle=getComputedStyle(document.body).getPropertyValue("--p3xr-body-bg").trim()||"#ffffff",c.fillRect(0,0,l.width,l.height),c.drawImage(i,0,0);let n=l.toDataURL("image/png"),_=document.createElement("a");_.href=n,_.download=`${this.connName}-${e}.png`,_.click()}safeDetectChanges(){this.ngZone.run(()=>{try{this.cdr.detectChanges()}catch(t){}})}drawCharts(){this.drawBarChart(this.typeChartRef?.nativeElement,this.typeEntries.map(t=>({label:t.type,value:t.bytes}))),this.drawBarChart(this.prefixChartRef?.nativeElement,(this.data?.prefixMemory||[]).slice(0,20).map(t=>({label:t.prefix,value:t.totalBytes})))}getChartColors(){let t=document.body.classList.contains("p3xr-theme-dark"),e=getComputedStyle(document.body),i=e.getPropertyValue("--p3xr-btn-primary-bg").trim(),l=e.getPropertyValue("--p3xr-btn-accent-bg").trim(),c=e.getPropertyValue("--p3xr-btn-warn-bg").trim();return{primary:i||(t?"#90caf9":"#1976d2"),accent:l||(t?"#ce93d8":"#9c27b0"),warn:c||(t?"#ef9a9a":"#f44336"),text:t?"rgba(255,255,255,0.87)":"rgba(0,0,0,0.87)",grid:t?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",isDark:t}}getBarColors(t){let e=t.isDark;return[t.primary,t.accent,t.warn,e?"#ffb74d":"#ff9800",e?"#81c784":"#4caf50",e?"#4dd0e1":"#00bcd4",e?"#a1887f":"#795548",e?"#90a4ae":"#607d8b"]}drawBarChart(t,e){if(!t||e.length===0||t.offsetWidth<=0)return;t.innerHTML="";let i=this.getChartColors(),l=this.getBarColors(i),c=document.createElement("canvas"),n=window.devicePixelRatio||1,_=t.offsetWidth||500,b=24,z=120,wt=80,D=z+8,j=_-wt-8,H=j-D,K=8,W=K+e.length*(b+4)+8;c.width=_*n,c.height=W*n,c.style.width=_+"px",c.style.height=W+"px";let y=c.getContext("2d");y.scale(n,n);let St=Math.max(...e.map(w=>w.value),1);e.forEach((w,F)=>{let k=K+F*(b+4);y.fillStyle=i.text,y.font="12px Roboto, sans-serif",y.textAlign="right",y.textBaseline="middle",y.fillText(w.label.length>15?w.label.substring(0,14)+"\u2026":w.label,z,k+b/2),y.fillStyle=i.grid,y.fillRect(D,k,H,b);let It=w.value/St*H;y.fillStyle=l[F%l.length],y.fillRect(D,k,It,b),y.fillStyle=i.text,y.font="11px Roboto Mono, monospace",y.textAlign="left",y.fillText(this.formatBytes(w.value),j+8,k+b/2)}),t.appendChild(c)}static \u0275fac=function(e){return new(e||d)(C(ht),C(ft),C(vt),C(X),C(q),C(Q),C(yt),C(ut))};static \u0275cmp=G({type:d,selectors:[["p3xr-memory-analysis"]],viewQuery:function(e,i){if(e&1&&Y(Tt,5)(kt,5),e&2){let l;L(l=V())&&(i.typeChartRef=l.first),L(l=V())&&(i.prefixChartRef=l.first)}},decls:12,vars:9,consts:[["typeChart",""],["prefixChart",""],["accordionKey","analysis-doctor",3,"title"],["actions",""],[3,"click","label","mdIcon"],[3,"label","mdIcon","disabled"],["mdIcon","download",3,"click","label"],["content",""],[2,"padding","12px 16px","opacity","0.6"],[2,"white-space","pre-wrap","font-family","'Roboto Mono', monospace","font-size","13px","padding","12px 16px","margin","0"],[1,"p3xr-analysis-loading"],[3,"click","label","mdIcon","disabled"],["accordionKey","analysis-controls",3,"title"],[1,"p3xr-settings-pair-row"],[1,"p3xr-settings-row-label"],[1,"p3xr-settings-row-value","p3xr-mono"],[1,"p3xr-settings-row-value"],["type","number","min","5","max","100",3,"ngModelChange","ngModel"],["type","number","min","100","max","100000","step","1000",3,"ngModelChange","ngModel"],["accordionKey","analysis-memory-info",3,"title"],["accordionKey","analysis-type-dist",3,"title"],[1,"p3xr-analysis-chart"],["accordionKey","analysis-prefix-mem",3,"title"],["accordionKey","analysis-expiration",3,"title"],[2,"font-weight","500"],[1,"p3xr-analysis-sub"],[2,"opacity","0.4","margin-right","8px"],[1,"p3xr-mono",2,"font-size","13px"]],template:function(e,i){if(e&1&&(o(0,"p3xr-ng-accordion",2)(1,"div",3)(2,"p3xr-ng-button",4),g("click",function(c){return i.toggleAutoDoctor(),c.stopPropagation()}),r(),S(3,$t,1,3,"p3xr-ng-button",5),o(4,"p3xr-ng-button",6),g("click",function(c){return i.exportDoctor(),c.stopPropagation()}),r()(),o(5,"div",7),S(6,Bt,2,1,"div",8)(7,At,2,1,"pre",9),r()(),p(8,"br"),S(9,Lt,5,1,"div",10),S(10,Vt,5,1,"div",10),S(11,Pt,137,50)),e&2){let l,c;h("title",i.s().memoryDoctor),a(2),h("label",(l=i.strings().label)==null?null:l.autoRefresh)("mdIcon",i.autoRefreshDoctor?"check_box":"check_box_outline_blank"),a(),I(i.autoRefreshDoctor?-1:3),a(),h("label",(c=i.strings().intention)==null?null:c.export),a(2),I(i.doctorText?7:6),a(3),I(i.loading&&!i.data?9:-1),a(),I(!i.loading&&!i.data?10:-1),a(),I(i.data?11:-1)}},dependencies:[et,rt,at,ot,xt,pt,it,nt,st,lt,ct,mt,dt,gt,_t,Ct,tt],styles:[`p3xr-memory-analysis{display:block;color:var(--mat-app-text-color, inherit)}.p3xr-analysis-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:64px;opacity:.5;font-size:18px}.p3xr-analysis-server-info{opacity:.6;font-size:12px;white-space:nowrap}.p3xr-analysis-sub{opacity:.5;font-size:12px;margin-left:8px}.p3xr-analysis-chart{width:100%;min-height:200px;overflow:hidden}.p3xr-analysis-chart canvas{width:100%!important} `],encapsulation:2,changeDetection:0})}return d})();export{pe as MemoryAnalysisComponent};