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

corifeus.com/redis-ui-material

patrikx3/redis-ui-material

5 lines • 17.3 kB
1
2
3
4
5
import {Y,S}from'./chunk-BAYRo-WK.js';import {X as Xe,f as fQ,b as bi,G as It,L as uc,V as N,a9 as q,Q,F as x,_ as _e,m as mb,aJ as jn,bd as On,be as tn,y as yt,w as wt,e as aY,i as Qt,a as f,u,Y as Yt,W as Wt,Z as Zt,aM as lt,cR as FM,B as Ba,k as bv,v as vf,n as no,h as hv,p as pv,c as In,r as ro,a$ as rc,b0 as Df,b1 as Ef,x as YT,J as JT,I as IS,t as If,R as Rv,z as fm,A as pm,cK as FS,cr as Lv,cu as AS,bj as Mx,H as HT,aN as Ov,cL as jS,cs as Fv,bk as Nx,U as UT}from'./chunk-BwlFOdbx.js';import {X}from'./chunk-DeaQoucA.js';import {L,F,E,K}from'./main-HNF44SV3.js';var St=K(Y());var Dt=["typeChart"],Rt=["prefixChart"],$t=(d,h)=>h.type,Bt=(d,h)=>h.prefix;function At(d,h){if(d&1){let t=YT();Ba(0,"p3xr-ng-button",11),bv("click",function(i){return fm(t),JT().runDoctor(),pm(i.stopPropagation())}),vf();}if(d&2){let t=JT();pv("label",t.doctorLoading?t.strings().label?.loading:t.strings().intention?.refresh)("mdIcon",t.doctorLoading?"hourglass_empty":"refresh")("disabled",t.doctorLoading);}}function Lt(d,h){if(d&1&&(Ba(0,"div",8),IS(1),vf()),d&2){let t=JT();In(),If(" ",t.s().doctorNoData," ");}}function Vt(d,h){if(d&1&&(Ba(0,"pre",9),IS(1),vf()),d&2){let t=JT();In(),Rv(t.doctorText);}}function Ot(d,h){if(d&1&&(Ba(0,"div",10)(1,"mat-icon"),IS(2,"hourglass_empty"),vf(),Ba(3,"span"),IS(4),vf()()),d&2){let t=JT();In(4),Rv(t.s().running);}}function Nt(d,h){if(d&1&&(Ba(0,"div",10)(1,"mat-icon"),IS(2,"analytics"),vf(),Ba(3,"span"),IS(4),vf()()),d&2){let t=JT();In(4),Rv(t.s().noData);}}function Pt(d,h){if(d&1&&(Ba(0,"mat-list-item")(1,"div",13)(2,"div",14)(3,"span",24),IS(4),vf(),Ba(5,"span",25),IS(6),vf()(),Ba(7,"div",15),IS(8),vf()()(),hv(9,"mat-divider")),d&2){let t=h.$implicit,e=JT(2);In(4),Rv(t.type),In(2),If("",t.count," keys"),In(2),Rv(e.formatBytes(t.bytes));}}function zt(d,h){if(d&1&&(Ba(0,"mat-list-item")(1,"div",13)(2,"div",14)(3,"span",26),IS(4),vf(),Ba(5,"span",27),IS(6),vf(),Ba(7,"span",25),IS(8),vf()(),Ba(9,"div",15),IS(10),vf()()(),hv(11,"mat-divider")),d&2){let t=h.$implicit,e=h.$index,i=JT(2);In(4),If("#",e+1),In(2),Rv(t.prefix),In(2),If("",t.keyCount," keys"),In(2),Rv(i.formatBytes(t.totalBytes));}}function jt(d,h){if(d&1){let t=YT();Ba(0,"p3xr-ng-accordion",12)(1,"div",3)(2,"p3xr-ng-button",11),bv("click",function(i){return fm(t),JT().runAnalysis(),pm(i.stopPropagation())}),vf(),Ba(3,"p3xr-ng-button",6),bv("click",function(i){return fm(t),JT().exportOverview(),pm(i.stopPropagation())}),vf()(),Ba(4,"div",7)(5,"mat-list")(6,"mat-list-item")(7,"div",13)(8,"div",14),IS(9),vf(),Ba(10,"div",15),IS(11),FS(12,"number"),FS(13,"number"),vf()()(),hv(14,"mat-divider"),Ba(15,"mat-list-item")(16,"div",13)(17,"div",14),IS(18),vf(),Ba(19,"div",16)(20,"p3xr-ng-input",17),Lv("ngModelChange",function(i){fm(t);let r=JT();return AS(r.topN,i)||(r.topN=i),pm(i)}),vf(),Mx(),vf()()(),hv(21,"mat-divider"),Ba(22,"mat-list-item")(23,"div",13)(24,"div",14),IS(25),vf(),Ba(26,"div",16)(27,"p3xr-ng-input",18),Lv("ngModelChange",function(i){fm(t);let r=JT();return AS(r.maxScanKeys,i)||(r.maxScanKeys=i),pm(i)}),vf(),Mx(),vf()()()()()(),hv(28,"br"),Ba(29,"p3xr-ng-accordion",19)(30,"div",3)(31,"p3xr-ng-button",6),bv("click",function(i){return fm(t),JT().exportMemoryBreakdown(),pm(i.stopPropagation())}),vf()(),Ba(32,"div",7)(33,"mat-list")(34,"mat-list-item")(35,"div",13)(36,"div",14),IS(37),vf(),Ba(38,"div",15),IS(39),vf()()(),hv(40,"mat-divider"),Ba(41,"mat-list-item")(42,"div",13)(43,"div",14),IS(44),vf(),Ba(45,"div",15),IS(46),vf()()(),hv(47,"mat-divider"),Ba(48,"mat-list-item")(49,"div",13)(50,"div",14),IS(51),vf(),Ba(52,"div",15),IS(53),vf()()(),hv(54,"mat-divider"),Ba(55,"mat-list-item")(56,"div",13)(57,"div",14),IS(58),vf(),Ba(59,"div",15),IS(60),vf()()(),hv(61,"mat-divider"),Ba(62,"mat-list-item")(63,"div",13)(64,"div",14),IS(65),vf(),Ba(66,"div",15),IS(67),vf()()(),hv(68,"mat-divider"),Ba(69,"mat-list-item")(70,"div",13)(71,"div",14),IS(72),vf(),Ba(73,"div",15),IS(74),vf()()(),hv(75,"mat-divider"),Ba(76,"mat-list-item")(77,"div",13)(78,"div",14),IS(79),vf(),Ba(80,"div",15),IS(81),vf()()(),hv(82,"mat-divider"),Ba(83,"mat-list-item")(84,"div",13)(85,"div",14),IS(86),vf(),Ba(87,"div",15),IS(88),vf()()()()()(),hv(89,"br"),Ba(90,"p3xr-ng-accordion",20)(91,"div",3)(92,"p3xr-ng-button",6),bv("click",function(i){fm(t);let r=JT();return r.exportChart(r.typeChartRef,"type-distribution"),pm(i.stopPropagation())}),vf()(),Ba(93,"div",7),hv(94,"div",21,0),Ba(96,"mat-list"),HT(97,Pt,10,3,null,null,$t),vf()()(),hv(99,"br"),Ba(100,"p3xr-ng-accordion",22)(101,"div",3)(102,"p3xr-ng-button",6),bv("click",function(i){fm(t);let r=JT();return r.exportChart(r.prefixChartRef,"memory-by-prefix"),pm(i.stopPropagation())}),vf()(),Ba(103,"div",7),hv(104,"div",21,1),Ba(106,"mat-list"),HT(107,zt,12,4,null,null,Bt),vf()()(),hv(109,"br"),Ba(110,"p3xr-ng-accordion",23)(111,"div",3)(112,"p3xr-ng-button",6),bv("click",function(i){return fm(t),JT().exportExpiration(),pm(i.stopPropagation())}),vf()(),Ba(113,"div",7)(114,"mat-list")(115,"mat-list-item")(116,"div",13)(117,"div",14),IS(118),vf(),Ba(119,"div",15),IS(120),FS(121,"number"),vf()()(),hv(122,"mat-divider"),Ba(123,"mat-list-item")(124,"div",13)(125,"div",14),IS(126),vf(),Ba(127,"div",15),IS(128),FS(129,"number"),vf()()(),hv(130,"mat-divider"),Ba(131,"mat-list-item")(132,"div",13)(133,"div",14),IS(134),vf(),Ba(135,"div",15),IS(136),vf()()()()()();}if(d&2){let t=JT();pv("title",t.s().title),In(2),pv("label",t.loading?t.s().running:t.s().runAnalysis)("mdIcon",t.loading?"hourglass_empty":"play_arrow")("disabled",t.loading),In(),pv("label",t.strings().intention?.export),In(6),Rv(t.s().keysScanned),In(2),Ov("",jS(12,42,t.data.totalScanned)," / ",jS(13,44,t.data.dbSize)),In(7),Rv(t.s().topN),In(2),Fv("ngModel",t.topN),Nx(),In(5),Rv(t.s().maxScanKeys),In(2),Fv("ngModel",t.maxScanKeys),Nx(),In(2),pv("title",t.s().memoryBreakdown),In(2),pv("label",t.strings().intention?.export),In(6),Rv(t.s().totalMemory),In(2),Rv(t.data.memoryInfo.usedHuman),In(5),Rv(t.s().rssMemory),In(2),Rv(t.data.memoryInfo.rssHuman),In(5),Rv(t.s().peakMemory),In(2),Rv(t.data.memoryInfo.peakHuman),In(5),Rv(t.s().overheadMemory),In(2),Rv(t.formatBytes(t.data.memoryInfo.overhead)),In(5),Rv(t.s().datasetMemory),In(2),Rv(t.formatBytes(t.data.memoryInfo.dataset)),In(5),Rv(t.s().luaMemory),In(2),Rv(t.formatBytes(t.data.memoryInfo.lua)),In(5),Rv(t.s().fragmentation),In(2),If("",t.data.memoryInfo.fragRatio,"x"),In(5),Rv(t.s().allocator),In(2),Rv(t.data.memoryInfo.allocator),In(2),pv("title",t.s().typeDistribution),In(2),pv("label",t.strings().intention?.export),In(5),UT(t.typeEntries),In(3),pv("title",t.s().prefixMemory),In(2),pv("label",t.strings().intention?.export),In(5),UT(t.data.prefixMemory),In(3),pv("title",t.s().expirationOverview),In(2),pv("label",t.strings().intention?.export),In(6),Rv(t.s().withTTL),In(2),Rv(jS(121,46,t.data.expirationOverview.withTTL)),In(6),Rv(t.s().persistent),In(2),Rv(jS(129,48,t.data.expirationOverview.persistent)),In(6),Rv(t.s().avgTTL),In(2),Rv(t.formatTTL(t.data.expirationOverview.avgTTL));}}var he=(()=>{class d{i18n;socket;common;cdr;ngZone;elementRef;state;settings;strings;data=null;loading=false;topN=20;maxScanKeys=5e3;typeEntries=[];doctorText=null;doctorLoading=false;autoRefreshDoctor=false;doctorInterval=null;typeChartRef;prefixChartRef;unsubFns=[];resizeObserver=null;themeObserver=null;resizeTimer;constructor(t,e,i,r,m,C,g,b){this.i18n=t,this.socket=e,this.common=i,this.cdr=r,this.ngZone=m,this.elementRef=C,this.state=g,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:true,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,r=window.innerHeight-e.top-i;t.style.height=Math.max(r,100)+"px",t.style.overflowY="auto";}runAnalysis(){return L(this,null,function*(){if(!this.loading){this.loading=true,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=false,this.safeDetectChanges(),this.common.generalHandleError(t);}}})}runDoctor(){return L(this,null,function*(){this.doctorLoading=true,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=false,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,St.default)(t*1e3,F(E({},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),r=Math.floor(t%3600/60);return e>0?`${e}d ${i}h ${r}m`:i>0?`${i}h ${r}m`:`${r}m`}downloadText(t,e){let i=new Blob([t],{type:"text/plain"}),r=URL.createObjectURL(i),m=document.createElement("a");m.href=r,m.download=e,m.click(),URL.revokeObjectURL(r);}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 r=document.createElement("canvas");r.width=i.width,r.height=i.height;let m=r.getContext("2d");m.fillStyle=getComputedStyle(document.body).getPropertyValue("--p3xr-body-bg").trim()||"#ffffff",m.fillRect(0,0,r.width,r.height),m.drawImage(i,0,0);let C=r.toDataURL("image/png"),g=document.createElement("a");g.href=C,g.download=`${this.connName}-${e}.png`,g.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(),r=e.getPropertyValue("--p3xr-btn-accent-bg").trim(),m=e.getPropertyValue("--p3xr-btn-warn-bg").trim();return {primary:i||(t?"#90caf9":"#1976d2"),accent:r||(t?"#ce93d8":"#9c27b0"),warn:m||(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(),r=this.getBarColors(i),m=document.createElement("canvas"),C=window.devicePixelRatio||1,g=t.offsetWidth||500,b=24,H=120,It=80,D=H+8,K=g-It-8,W=K-D,F=8,U=F+e.length*(b+4)+8;m.width=g*C,m.height=U*C,m.style.width=g+"px",m.style.height=U+"px";let y=m.getContext("2d");y.scale(C,C);let Mt=Math.max(...e.map(w=>w.value),1);e.forEach((w,Z)=>{let k=F+Z*(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,H,k+b/2),y.fillStyle=i.grid,y.fillRect(D,k,W,b);let Et=w.value/Mt*W;y.fillStyle=r[Z%r.length],y.fillRect(D,k,Et,b),y.fillStyle=i.text,y.font="11px Roboto Mono, monospace",y.textAlign="left",y.fillText(this.formatBytes(w.value),K+8,k+b/2);}),t.appendChild(m);}static \u0275fac=function(e){return new(e||d)(Xe(fQ),Xe(bi),Xe(It),Xe(uc),Xe(N),Xe(q),Xe(Q),Xe(x))};static \u0275cmp=_e({type:d,selectors:[["p3xr-memory-analysis"]],viewQuery:function(e,i){if(e&1&&rc(Dt,5)(Rt,5),e&2){let r;Df(r=Ef())&&(i.typeChartRef=r.first),Df(r=Ef())&&(i.prefixChartRef=r.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){e&1&&(Ba(0,"p3xr-ng-accordion",2)(1,"div",3)(2,"p3xr-ng-button",4),bv("click",function(m){return i.toggleAutoDoctor(),m.stopPropagation()}),vf(),no(3,At,1,3,"p3xr-ng-button",5),Ba(4,"p3xr-ng-button",6),bv("click",function(m){return i.exportDoctor(),m.stopPropagation()}),vf()(),Ba(5,"div",7),no(6,Lt,2,1,"div",8)(7,Vt,2,1,"pre",9),vf()(),hv(8,"br"),no(9,Ot,5,1,"div",10),no(10,Nt,5,1,"div",10),no(11,jt,137,50)),e&2&&(pv("title",i.s().memoryDoctor),In(2),pv("label",i.strings().label?.autoRefresh)("mdIcon",i.autoRefreshDoctor?"check_box":"check_box_outline_blank"),In(),ro(i.autoRefreshDoctor?-1:3),In(),pv("label",i.strings().intention?.export),In(2),ro(i.doctorText?7:6),In(3),ro(i.loading&&!i.data?9:-1),In(),ro(!i.loading&&!i.data?10:-1),In(),ro(i.data?11:-1));},dependencies:[mb,jn,On,tn,yt,wt,aY,Qt,f,u,Yt,Wt,Zt,X,lt,S,FM],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})}return d})();export{he as MemoryAnalysisComponent};