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
4 lines • 11.4 kB
JavaScript
import{i as e}from"./chunk-DseTPa7n.js";import{D as t,Q as n,t as r,y as i}from"./Box-CXFf6N2h.js";import{n as a,o}from"./i18n.store-fGbhAfs-.js";import{t as s}from"./TextField-DJCDsXWr.js";import{t as c}from"./Divider-B-lgo4nA.js";import{t as l}from"./P3xrButton-De81XLvk.js";import{t as u}from"./List-C08Y9n9o.js";import{t as d}from"./ListItem-BVfb-I0T.js";import{n as ee,t as te}from"./CheckBoxOutlineBlank-BnFYgZ47.js";import{t as f}from"./Download-DT0KMSJC.js";import{n as p,t as ne}from"./PlayArrow-DQTZsekD.js";import{t as re}from"./Refresh-CL2VjXTi.js";import{r as ie}from"./redis-state.store-DtknZjXV.js";import{r as ae}from"./common.store-BMIRIqfN.js";import{r as oe}from"./socket.service-Bvd4M0Ji.js";import{t as m}from"./P3xrAccordion-mbxcxWWs.js";var h=n(),se=i((0,h.jsx)(`path`,{d:`M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M9 17H7v-5h2zm4 0h-2v-3h2zm0-5h-2v-2h2zm4 5h-2V7h2z`}),`Analytics`),g=e(o());function _(e){return e==null||isNaN(e)?`-`:e<1024?e+` B`:e<1024*1024?(e/1024).toFixed(1)+` KB`:e<1024*1024*1024?(e/(1024*1024)).toFixed(1)+` MB`:(e/(1024*1024*1024)).toFixed(2)+` GB`}function v(e){return!e||e<=0?`-`:e<60?e+`s`:e<3600?Math.floor(e/60)+`m `+e%60+`s`:e<86400?Math.floor(e/3600)+`h `+Math.floor(e%3600/60)+`m`:Math.floor(e/86400)+`d `+Math.floor(e%86400/3600)+`h`}function y(e,t){let n=new Blob([e],{type:`text/plain`}),r=URL.createObjectURL(n),i=document.createElement(`a`);i.href=r,i.download=t,i.click(),URL.revokeObjectURL(r)}function b(){let e=a(e=>e.strings),n=a(e=>e.currentLang),i=ie(e=>e.connection),{generalHandleError:o}=ae(),b=t(),x=b.palette.mode===`dark`,S=i?.name||`redis`,[C,w]=(0,g.useState)(null),[T,E]=(0,g.useState)(!1),[D,ce]=(0,g.useState)(20),[O,le]=(0,g.useState)(5e3),[k,A]=(0,g.useState)([]),[j,ue]=(0,g.useState)(null),[M,N]=(0,g.useState)(!1),[P,de]=(0,g.useState)(()=>localStorage.getItem(`p3xr-monitor-auto-doctor`)===`true`),F=(0,g.useRef)(null),I=(0,g.useRef)(null),L=(0,g.useRef)(null),R=(0,g.useRef)(null),z=(0,g.useRef)(()=>{}),B=(0,g.useCallback)(()=>({primary:b.palette.primary.main||(x?`#90caf9`:`#1976d2`),accent:b.palette.secondary.main||(x?`#ce93d8`:`#9c27b0`),warn:b.palette.error.main||(x?`#ef9a9a`:`#f44336`),text:x?`rgba(255,255,255,0.87)`:`rgba(0,0,0,0.87)`,grid:x?`rgba(255,255,255,0.08)`:`rgba(0,0,0,0.08)`}),[b,x]),V=(0,g.useCallback)(()=>{let e=B();return[e.primary,e.accent,e.warn,x?`#ffb74d`:`#ff9800`,x?`#81c784`:`#4caf50`,x?`#4dd0e1`:`#00bcd4`,x?`#a1887f`:`#795548`,x?`#90a4ae`:`#607d8b`]},[B,x]),H=(0,g.useCallback)((e,t)=>{if(!e||t.length===0||e.offsetWidth<=0)return;e.innerHTML=``;let n=B(),r=V(),i=window.devicePixelRatio||1,a=e.offsetWidth||500,o=a-80-8,s=o-128,c=8+t.length*28+8,l=document.createElement(`canvas`);l.width=a*i,l.height=c*i,l.style.width=a+`px`,l.style.height=c+`px`;let u=l.getContext(`2d`);u.scale(i,i);let d=Math.max(...t.map(e=>e.value),1);t.forEach((e,t)=>{let i=8+t*28;u.fillStyle=n.text,u.font=`12px Roboto, sans-serif`,u.textAlign=`right`,u.textBaseline=`middle`,u.fillText(e.label.length>15?e.label.substring(0,14)+`…`:e.label,120,i+24/2),u.fillStyle=n.grid,u.fillRect(128,i,s,24),u.fillStyle=r[t%r.length],u.fillRect(128,i,e.value/d*s,24),u.fillStyle=n.text,u.font=`11px Roboto Mono, monospace`,u.textAlign=`left`,u.fillText(_(e.value),o+8,i+24/2)}),e.appendChild(l)},[B,V]),U=(0,g.useCallback)((e,t)=>{H(I.current,t.map(e=>({label:e.type,value:e.bytes}))),H(L.current,(e?.prefixMemory||[]).slice(0,20).map(e=>({label:e.prefix,value:e.totalBytes})))},[H]);z.current=()=>{C&&k.length>0&&U(C,k)};let W=(0,g.useCallback)(async()=>{if(!T){E(!0);try{let e=(await oe({action:`memory/analysis`,payload:{topN:D,maxScanKeys:O}})).data;w(e);let t=Object.keys(e.typeDistribution).map(t=>({type:t,count:e.typeDistribution[t],bytes:e.typeMemory[t]||0})).sort((e,t)=>t.bytes-e.bytes);A(t),E(!1),setTimeout(()=>U(e,t),100)}catch(e){E(!1),o(e)}}},[D,O,T,U,o]),G=(0,g.useCallback)(async()=>{N(!0);try{ue((await oe({action:`memory/doctor`})).data.text)}catch(e){o(e)}finally{N(!1)}},[o]),fe=(0,g.useCallback)(()=>{de(e=>{let t=!e;return localStorage.setItem(`p3xr-monitor-auto-doctor`,String(t)),t&&G(),t})},[G]);(0,g.useEffect)(()=>(P?F.current=setInterval(()=>G(),2e3):clearInterval(F.current),()=>clearInterval(F.current)),[P,G]);let K=i?.id;(0,g.useEffect)(()=>{w(null),A([]),K&&W()},[K]);let pe=b.palette.primary.main;(0,g.useEffect)(()=>{C&&setTimeout(()=>U(C,k),100)},[x,n,pe]);let q=!!C;(0,g.useEffect)(()=>{if(!q)return;let e,t=new ResizeObserver(()=>{clearTimeout(e),e=setTimeout(()=>z.current(),50)});return R.current=t,I.current&&t.observe(I.current),L.current&&t.observe(L.current),()=>{clearTimeout(e),t.disconnect(),R.current=null}},[q]);let J=(0,g.useCallback)((e,t)=>{let n=e.current?.querySelector(`canvas`);if(!n)return;let r=document.createElement(`canvas`);r.width=n.width,r.height=n.height;let i=r.getContext(`2d`);i.fillStyle=x?`#1e1e1e`:`#ffffff`,i.fillRect(0,0,r.width,r.height),i.drawImage(n,0,0);let a=document.createElement(`a`);a.href=r.toDataURL(`image/png`),a.download=`${S}-${t}.png`,a.click()},[S,x]),Y=e?.page?.analysis||{},X=({label:e,value:t})=>(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(d,{sx:{px:2,py:1},children:(0,h.jsxs)(r,{sx:{display:`flex`,width:`100%`},children:[(0,h.jsx)(r,{sx:{flex:1},children:e}),(0,h.jsx)(r,{sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:t})]})}),(0,h.jsx)(c,{})]}),Z=(0,h.jsx)(m,{title:Y.memoryDoctor,accordionKey:`analysis-doctor`,actions:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(l,{icon:P?(0,h.jsx)(ee,{sx:{fontSize:18}}):(0,h.jsx)(te,{sx:{fontSize:18}}),label:e?.label?.autoRefresh,color:`inherit`,onClick:e=>{e.stopPropagation(),fe()}}),!P&&(0,h.jsx)(l,{icon:M?(0,h.jsx)(p,{sx:{fontSize:18}}):(0,h.jsx)(re,{sx:{fontSize:18}}),label:M?e?.label?.loading:e?.intention?.refresh,color:`inherit`,disabled:M,onClick:e=>{e.stopPropagation(),G()}}),(0,h.jsx)(l,{icon:(0,h.jsx)(f,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),j&&y(j,`${S}-memory-doctor.txt`)}})]}),children:j?(0,h.jsx)(r,{component:`pre`,sx:{whiteSpace:`pre-wrap`,fontFamily:`'Roboto Mono', monospace`,fontSize:13,p:2,m:0},children:j}):(0,h.jsx)(r,{sx:{p:2,opacity:.6},children:Y.doctorNoData})});if(T&&!C)return(0,h.jsxs)(r,{children:[Z,(0,h.jsx)(r,{sx:{mt:2}}),(0,h.jsxs)(r,{sx:{display:`flex`,alignItems:`center`,gap:1,p:4,opacity:.5},children:[(0,h.jsx)(p,{}),` `,Y.running]})]});if(!T&&!C)return(0,h.jsxs)(r,{children:[Z,(0,h.jsx)(r,{sx:{mt:2}}),(0,h.jsxs)(r,{sx:{display:`flex`,alignItems:`center`,gap:1,p:4,opacity:.5},children:[(0,h.jsx)(se,{}),` `,Y.noData]})]});if(!C)return null;let Q=C.memoryInfo,$=C.expirationOverview;return(0,h.jsxs)(r,{children:[Z,(0,h.jsx)(r,{sx:{mt:2}}),(0,h.jsx)(m,{title:Y.title,accordionKey:`analysis-controls`,actions:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(l,{icon:T?(0,h.jsx)(p,{sx:{fontSize:18}}):(0,h.jsx)(ne,{sx:{fontSize:18}}),label:T?Y.running:Y.runAnalysis,color:`inherit`,disabled:T,onClick:e=>{e.stopPropagation(),W()}}),(0,h.jsx)(l,{icon:(0,h.jsx)(f,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),y([`${Y.keysScanned}: ${C.totalScanned} / ${C.dbSize}`,`${Y.topN}: ${D}`,`${Y.maxScanKeys}: ${O}`].join(`
`),`${S}-analysis-overview.txt`)}})]}),children:(0,h.jsxs)(u,{disablePadding:!0,children:[(0,h.jsx)(X,{label:Y.keysScanned,value:`${C.totalScanned} / ${C.dbSize}`}),(0,h.jsx)(d,{sx:{px:2,py:1},children:(0,h.jsxs)(r,{sx:{display:`flex`,width:`100%`,alignItems:`center`},children:[(0,h.jsx)(r,{sx:{flex:1},children:Y.topN}),(0,h.jsx)(s,{size:`small`,type:`number`,value:D,onChange:e=>ce(Number(e.target.value)),slotProps:{htmlInput:{min:5,max:100}},sx:{width:80}})]})}),(0,h.jsx)(c,{}),(0,h.jsx)(d,{sx:{px:2,py:1},children:(0,h.jsxs)(r,{sx:{display:`flex`,width:`100%`,alignItems:`center`},children:[(0,h.jsx)(r,{sx:{flex:1},children:Y.maxScanKeys}),(0,h.jsx)(s,{size:`small`,type:`number`,value:O,onChange:e=>le(Number(e.target.value)),slotProps:{htmlInput:{min:100,max:1e5,step:1e3}},sx:{width:100}})]})})]})}),(0,h.jsx)(`br`,{}),(0,h.jsx)(m,{title:Y.memoryBreakdown,accordionKey:`analysis-memory-info`,actions:(0,h.jsx)(l,{icon:(0,h.jsx)(f,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),y([`${Y.totalMemory}: ${Q.usedHuman}`,`${Y.rssMemory}: ${Q.rssHuman}`,`${Y.peakMemory}: ${Q.peakHuman}`,`${Y.overheadMemory}: ${_(Q.overhead)}`,`${Y.datasetMemory}: ${_(Q.dataset)}`,`${Y.luaMemory}: ${_(Q.lua)}`,`${Y.fragmentation}: ${Q.fragRatio}x`,`${Y.allocator}: ${Q.allocator}`].join(`
`),`${S}-memory-breakdown.txt`)}}),children:(0,h.jsxs)(u,{disablePadding:!0,children:[(0,h.jsx)(X,{label:Y.totalMemory,value:Q.usedHuman}),(0,h.jsx)(X,{label:Y.rssMemory,value:Q.rssHuman}),(0,h.jsx)(X,{label:Y.peakMemory,value:Q.peakHuman}),(0,h.jsx)(X,{label:Y.overheadMemory,value:_(Q.overhead)}),(0,h.jsx)(X,{label:Y.datasetMemory,value:_(Q.dataset)}),(0,h.jsx)(X,{label:Y.luaMemory,value:_(Q.lua)}),(0,h.jsx)(X,{label:Y.fragmentation,value:`${Q.fragRatio}x`}),(0,h.jsx)(X,{label:Y.allocator,value:Q.allocator})]})}),(0,h.jsx)(`br`,{}),(0,h.jsxs)(m,{title:Y.typeDistribution,accordionKey:`analysis-type-dist`,actions:(0,h.jsx)(l,{icon:(0,h.jsx)(f,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),J(I,`type-distribution`)}}),children:[(0,h.jsx)(r,{ref:I,sx:{minHeight:200,width:`100%`}}),(0,h.jsx)(u,{disablePadding:!0,children:k.map(e=>(0,h.jsxs)(r,{children:[(0,h.jsx)(d,{sx:{px:2,py:1},children:(0,h.jsxs)(r,{sx:{display:`flex`,width:`100%`},children:[(0,h.jsxs)(r,{sx:{flex:1},children:[(0,h.jsx)(r,{component:`span`,sx:{fontWeight:500},children:e.type}),(0,h.jsxs)(r,{component:`span`,sx:{ml:1,opacity:.5,fontSize:12},children:[e.count,` keys`]})]}),(0,h.jsx)(r,{sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:_(e.bytes)})]})}),(0,h.jsx)(c,{})]},e.type))})]}),(0,h.jsx)(`br`,{}),(0,h.jsxs)(m,{title:Y.prefixMemory,accordionKey:`analysis-prefix-mem`,actions:(0,h.jsx)(l,{icon:(0,h.jsx)(f,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),J(L,`memory-by-prefix`)}}),children:[(0,h.jsx)(r,{ref:L,sx:{minHeight:200,width:`100%`}}),(0,h.jsx)(u,{disablePadding:!0,children:(C.prefixMemory||[]).map((e,t)=>(0,h.jsxs)(r,{children:[(0,h.jsx)(d,{sx:{px:2,py:1},children:(0,h.jsxs)(r,{sx:{display:`flex`,width:`100%`},children:[(0,h.jsxs)(r,{sx:{flex:1},children:[(0,h.jsxs)(r,{component:`span`,sx:{opacity:.4,mr:1},children:[`#`,t+1]}),(0,h.jsx)(r,{component:`span`,sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:e.prefix}),(0,h.jsxs)(r,{component:`span`,sx:{ml:1,opacity:.5,fontSize:12},children:[e.keyCount,` keys`]})]}),(0,h.jsx)(r,{sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:_(e.totalBytes)})]})}),(0,h.jsx)(c,{})]},e.prefix))})]}),(0,h.jsx)(`br`,{}),(0,h.jsx)(m,{title:Y.expirationOverview,accordionKey:`analysis-expiration`,actions:(0,h.jsx)(l,{icon:(0,h.jsx)(f,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),y([`${Y.withTTL}: ${$.withTTL}`,`${Y.persistent}: ${$.persistent}`,`${Y.avgTTL}: ${v($.avgTTL)}`].join(`
`),`${S}-expiration.txt`)}}),children:(0,h.jsxs)(u,{disablePadding:!0,children:[(0,h.jsx)(X,{label:Y.withTTL,value:$.withTTL}),(0,h.jsx)(X,{label:Y.persistent,value:$.persistent}),(0,h.jsx)(X,{label:Y.avgTTL,value:v($.avgTTL)})]})})]})}export{b as default};