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

4 lines • 11.4 kB
import{i as e}from"./chunk-62oNxeRG.js";import{D as t,Q as n,t as r,y as i}from"./Box-zFhO8JOc.js";import{n as a,o}from"./i18n.store-BgO27SyP.js";import{t as s}from"./TextField-sQcIcHBz.js";import{t as c}from"./Divider-DPHOdJ7A.js";import{t as l}from"./List-CZs-BLg-.js";import{t as u}from"./ListItem-CFJQ4Kff.js";import{t as d}from"./Download-Cac6Ozym.js";import{n as f,t as ee}from"./PlayArrow-DWTdOIUH.js";import{t as te}from"./Refresh-DRlF8MPp.js";import{r as ne}from"./redis-state.store-D1VAMKQx.js";import{r as re}from"./common.store-BdGjnV1l.js";import{r as p}from"./socket.service-B0twmIgP.js";import{_ as ie,g as ae,r as m}from"./index-CHO_02-t.js";import{t as h}from"./P3xrAccordion-BWRXmowz.js";var g=n(),oe=i((0,g.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`),_=e(o());function v(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 y(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 b(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 x(){let e=a(e=>e.strings),n=a(e=>e.currentLang),i=ne(e=>e.connection),{generalHandleError:o}=re(),x=t(),S=x.palette.mode===`dark`,C=i?.name||`redis`,[w,T]=(0,_.useState)(null),[E,D]=(0,_.useState)(!1),[O,se]=(0,_.useState)(20),[k,ce]=(0,_.useState)(5e3),[A,le]=(0,_.useState)([]),[j,ue]=(0,_.useState)(null),[M,N]=(0,_.useState)(!1),[P,de]=(0,_.useState)(()=>localStorage.getItem(`p3xr-monitor-auto-doctor`)===`true`),F=(0,_.useRef)(null),I=(0,_.useRef)(null),L=(0,_.useRef)(null),R=(0,_.useRef)(null),z=(0,_.useRef)(()=>{}),B=(0,_.useCallback)(()=>({primary:x.palette.primary.main||(S?`#90caf9`:`#1976d2`),accent:x.palette.secondary.main||(S?`#ce93d8`:`#9c27b0`),warn:x.palette.error.main||(S?`#ef9a9a`:`#f44336`),text:S?`rgba(255,255,255,0.87)`:`rgba(0,0,0,0.87)`,grid:S?`rgba(255,255,255,0.08)`:`rgba(0,0,0,0.08)`}),[x,S]),V=(0,_.useCallback)(()=>{let e=B();return[e.primary,e.accent,e.warn,S?`#ffb74d`:`#ff9800`,S?`#81c784`:`#4caf50`,S?`#4dd0e1`:`#00bcd4`,S?`#a1887f`:`#795548`,S?`#90a4ae`:`#607d8b`]},[B,S]),H=(0,_.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(v(e.value),o+8,i+24/2)}),e.appendChild(l)},[B,V]),U=(0,_.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=()=>{w&&A.length>0&&U(w,A)};let W=(0,_.useCallback)(async()=>{if(!E){D(!0);try{let e=(await p({action:`memory/analysis`,payload:{topN:O,maxScanKeys:k}})).data;T(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);le(t),D(!1),setTimeout(()=>U(e,t),100)}catch(e){D(!1),o(e)}}},[O,k,E,U,o]),G=(0,_.useCallback)(async()=>{N(!0);try{ue((await p({action:`memory/doctor`})).data.text)}catch(e){o(e)}finally{N(!1)}},[o]),fe=(0,_.useCallback)(()=>{de(e=>{let t=!e;return localStorage.setItem(`p3xr-monitor-auto-doctor`,String(t)),t&&G(),t})},[G]);(0,_.useEffect)(()=>(P?F.current=setInterval(()=>G(),2e3):clearInterval(F.current),()=>clearInterval(F.current)),[P,G]);let K=i?.id;(0,_.useEffect)(()=>{T(null),le([]),K&&W()},[K]);let pe=x.palette.primary.main;(0,_.useEffect)(()=>{w&&setTimeout(()=>U(w,A),100)},[S,n,pe]);let q=!!w;(0,_.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,_.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=S?`#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=`${C}-${t}.png`,a.click()},[C,S]),Y=e?.page?.analysis||{},X=({label:e,value:t})=>(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(u,{sx:{px:2,py:1},children:(0,g.jsxs)(r,{sx:{display:`flex`,width:`100%`},children:[(0,g.jsx)(r,{sx:{flex:1},children:e}),(0,g.jsx)(r,{sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:t})]})}),(0,g.jsx)(c,{})]}),Z=(0,g.jsx)(h,{title:Y.memoryDoctor,accordionKey:`analysis-doctor`,actions:(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(m,{icon:P?(0,g.jsx)(ie,{sx:{fontSize:18}}):(0,g.jsx)(ae,{sx:{fontSize:18}}),label:e?.label?.autoRefresh,color:`inherit`,onClick:e=>{e.stopPropagation(),fe()}}),!P&&(0,g.jsx)(m,{icon:M?(0,g.jsx)(f,{sx:{fontSize:18}}):(0,g.jsx)(te,{sx:{fontSize:18}}),label:M?e?.label?.loading:e?.intention?.refresh,color:`inherit`,disabled:M,onClick:e=>{e.stopPropagation(),G()}}),(0,g.jsx)(m,{icon:(0,g.jsx)(d,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),j&&b(j,`${C}-memory-doctor.txt`)}})]}),children:j?(0,g.jsx)(r,{component:`pre`,sx:{whiteSpace:`pre-wrap`,fontFamily:`'Roboto Mono', monospace`,fontSize:13,p:2,m:0},children:j}):(0,g.jsx)(r,{sx:{p:2,opacity:.6},children:Y.doctorNoData})});if(E&&!w)return(0,g.jsxs)(r,{children:[Z,(0,g.jsx)(r,{sx:{mt:2}}),(0,g.jsxs)(r,{sx:{display:`flex`,alignItems:`center`,gap:1,p:4,opacity:.5},children:[(0,g.jsx)(f,{}),` `,Y.running]})]});if(!E&&!w)return(0,g.jsxs)(r,{children:[Z,(0,g.jsx)(r,{sx:{mt:2}}),(0,g.jsxs)(r,{sx:{display:`flex`,alignItems:`center`,gap:1,p:4,opacity:.5},children:[(0,g.jsx)(oe,{}),` `,Y.noData]})]});if(!w)return null;let Q=w.memoryInfo,$=w.expirationOverview;return(0,g.jsxs)(r,{children:[Z,(0,g.jsx)(r,{sx:{mt:2}}),(0,g.jsx)(h,{title:Y.title,accordionKey:`analysis-controls`,actions:(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(m,{icon:E?(0,g.jsx)(f,{sx:{fontSize:18}}):(0,g.jsx)(ee,{sx:{fontSize:18}}),label:E?Y.running:Y.runAnalysis,color:`inherit`,disabled:E,onClick:e=>{e.stopPropagation(),W()}}),(0,g.jsx)(m,{icon:(0,g.jsx)(d,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),b([`${Y.keysScanned}: ${w.totalScanned} / ${w.dbSize}`,`${Y.topN}: ${O}`,`${Y.maxScanKeys}: ${k}`].join(` `),`${C}-analysis-overview.txt`)}})]}),children:(0,g.jsxs)(l,{disablePadding:!0,children:[(0,g.jsx)(X,{label:Y.keysScanned,value:`${w.totalScanned} / ${w.dbSize}`}),(0,g.jsx)(u,{sx:{px:2,py:1},children:(0,g.jsxs)(r,{sx:{display:`flex`,width:`100%`,alignItems:`center`},children:[(0,g.jsx)(r,{sx:{flex:1},children:Y.topN}),(0,g.jsx)(s,{size:`small`,type:`number`,value:O,onChange:e=>se(Number(e.target.value)),slotProps:{htmlInput:{min:5,max:100}},sx:{width:80}})]})}),(0,g.jsx)(c,{}),(0,g.jsx)(u,{sx:{px:2,py:1},children:(0,g.jsxs)(r,{sx:{display:`flex`,width:`100%`,alignItems:`center`},children:[(0,g.jsx)(r,{sx:{flex:1},children:Y.maxScanKeys}),(0,g.jsx)(s,{size:`small`,type:`number`,value:k,onChange:e=>ce(Number(e.target.value)),slotProps:{htmlInput:{min:100,max:1e5,step:1e3}},sx:{width:100}})]})})]})}),(0,g.jsx)(`br`,{}),(0,g.jsx)(h,{title:Y.memoryBreakdown,accordionKey:`analysis-memory-info`,actions:(0,g.jsx)(m,{icon:(0,g.jsx)(d,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),b([`${Y.totalMemory}: ${Q.usedHuman}`,`${Y.rssMemory}: ${Q.rssHuman}`,`${Y.peakMemory}: ${Q.peakHuman}`,`${Y.overheadMemory}: ${v(Q.overhead)}`,`${Y.datasetMemory}: ${v(Q.dataset)}`,`${Y.luaMemory}: ${v(Q.lua)}`,`${Y.fragmentation}: ${Q.fragRatio}x`,`${Y.allocator}: ${Q.allocator}`].join(` `),`${C}-memory-breakdown.txt`)}}),children:(0,g.jsxs)(l,{disablePadding:!0,children:[(0,g.jsx)(X,{label:Y.totalMemory,value:Q.usedHuman}),(0,g.jsx)(X,{label:Y.rssMemory,value:Q.rssHuman}),(0,g.jsx)(X,{label:Y.peakMemory,value:Q.peakHuman}),(0,g.jsx)(X,{label:Y.overheadMemory,value:v(Q.overhead)}),(0,g.jsx)(X,{label:Y.datasetMemory,value:v(Q.dataset)}),(0,g.jsx)(X,{label:Y.luaMemory,value:v(Q.lua)}),(0,g.jsx)(X,{label:Y.fragmentation,value:`${Q.fragRatio}x`}),(0,g.jsx)(X,{label:Y.allocator,value:Q.allocator})]})}),(0,g.jsx)(`br`,{}),(0,g.jsxs)(h,{title:Y.typeDistribution,accordionKey:`analysis-type-dist`,actions:(0,g.jsx)(m,{icon:(0,g.jsx)(d,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),J(I,`type-distribution`)}}),children:[(0,g.jsx)(r,{ref:I,sx:{minHeight:200,width:`100%`}}),(0,g.jsx)(l,{disablePadding:!0,children:A.map(e=>(0,g.jsxs)(r,{children:[(0,g.jsx)(u,{sx:{px:2,py:1},children:(0,g.jsxs)(r,{sx:{display:`flex`,width:`100%`},children:[(0,g.jsxs)(r,{sx:{flex:1},children:[(0,g.jsx)(r,{component:`span`,sx:{fontWeight:500},children:e.type}),(0,g.jsxs)(r,{component:`span`,sx:{ml:1,opacity:.5,fontSize:12},children:[e.count,` keys`]})]}),(0,g.jsx)(r,{sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:v(e.bytes)})]})}),(0,g.jsx)(c,{})]},e.type))})]}),(0,g.jsx)(`br`,{}),(0,g.jsxs)(h,{title:Y.prefixMemory,accordionKey:`analysis-prefix-mem`,actions:(0,g.jsx)(m,{icon:(0,g.jsx)(d,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),J(L,`memory-by-prefix`)}}),children:[(0,g.jsx)(r,{ref:L,sx:{minHeight:200,width:`100%`}}),(0,g.jsx)(l,{disablePadding:!0,children:(w.prefixMemory||[]).map((e,t)=>(0,g.jsxs)(r,{children:[(0,g.jsx)(u,{sx:{px:2,py:1},children:(0,g.jsxs)(r,{sx:{display:`flex`,width:`100%`},children:[(0,g.jsxs)(r,{sx:{flex:1},children:[(0,g.jsxs)(r,{component:`span`,sx:{opacity:.4,mr:1},children:[`#`,t+1]}),(0,g.jsx)(r,{component:`span`,sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:e.prefix}),(0,g.jsxs)(r,{component:`span`,sx:{ml:1,opacity:.5,fontSize:12},children:[e.keyCount,` keys`]})]}),(0,g.jsx)(r,{sx:{fontFamily:`'Roboto Mono', monospace`,fontSize:13},children:v(e.totalBytes)})]})}),(0,g.jsx)(c,{})]},e.prefix))})]}),(0,g.jsx)(`br`,{}),(0,g.jsx)(h,{title:Y.expirationOverview,accordionKey:`analysis-expiration`,actions:(0,g.jsx)(m,{icon:(0,g.jsx)(d,{sx:{fontSize:18}}),label:e?.intention?.export,color:`inherit`,onClick:e=>{e.stopPropagation(),b([`${Y.withTTL}: ${$.withTTL}`,`${Y.persistent}: ${$.persistent}`,`${Y.avgTTL}: ${y($.avgTTL)}`].join(` `),`${C}-expiration.txt`)}}),children:(0,g.jsxs)(l,{disablePadding:!0,children:[(0,g.jsx)(X,{label:Y.withTTL,value:$.withTTL}),(0,g.jsx)(X,{label:Y.persistent,value:$.persistent}),(0,g.jsx)(X,{label:Y.avgTTL,value:y($.avgTTL)})]})})]})}export{x as default};