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
2 lines • 17.5 kB
JavaScript
import{A as e,B as t,C as n,D as r,E as i,I as a,Jt as o,K as s,M as c,Nt as ee,O as te,T as l,Tt as u,Y as d,Z as ne,Zt as f,_ as p,_t as m,at as h,g as re,k as ie,lt as g,o as ae,q as oe,rt as _,t as se,u as v,w as y,y as b,z as ce}from"./i18n.store-Bkc9i0ZB.js";import{t as x,x as le}from"./_plugin-vue_export-helper-BZ1AqotW.js";import{t as ue}from"./preload-helper-Cpp8KLTa.js";import{t as de}from"./redis-state.store-6nwmGrRG.js";import{t as fe}from"./common.store-yJBdXfWc.js";import{t as pe}from"./overlay.store-BBYRGnlo.js";import{i as S}from"./socket.service-CwqYs11N.js";import{C as me,D as C,b as he,d as ge,i as w,u as _e,w as T,x as E}from"./index-BNz7Rlxf.js";import{d as D}from"./key-type-base-COna9PL5.js";import{t as ve}from"./KeyNewOrSetDialog-BuqDvXgd.js";import{t as ye}from"./esm-2StPq51h.js";import{t as be}from"./P3xrAccordion-HdyTZEnI.js";/* empty css */a(),g(),v(),ee();var xe={class:`p3xr-key-type-content`},Se={style:{padding:`16px`}},Ce={class:`p3xr-ts-controls`},we={style:{padding:`4px 0`,opacity:`0.6`,"font-size":`13px`}},Te={key:0,class:`p3xr-ts-controls`,style:{"margin-top":`16px`}},Ee={class:`p3xr-key-table-header`},De={style:{flex:`1`}},Oe={key:0,style:{"min-width":`52px`}},ke={style:{flex:`1`,"font-size":`13px`}},Ae={style:{"font-size":`13px`,"font-family":`'Roboto Mono', monospace`}},je={key:0,style:{display:`flex`,"align-items":`center`}},Me={key:0,style:{padding:`16px`}},Ne={class:`p3xr-ts-controls`},Pe={style:{display:`flex`,width:`100%`}},Fe={style:{flex:`1`,"font-weight":`500`}},Ie={style:{"word-break":`break-all`}},Le={style:{display:`flex`,width:`100%`}},Re={style:{flex:`1`,"font-weight":`500`}},ze={style:{"word-break":`break-all`}},Be={style:{display:`flex`,width:`100%`}},Ve={style:{flex:`1`,"font-weight":`500`}},O=x(c({__name:`KeyTimeseries`,props:{response:{},value:{},valueBuffer:{},keyName:{},valueFormat:{}},emits:[`refresh`],setup(a,{emit:c}){let ee=[`avg`,`min`,`max`,`sum`,`count`,`first`,`last`,`range`,`std.p`,`std.s`,`var.p`,`var.s`],g=[`#1976d2`,`#9c27b0`,`#f44336`,`#4caf50`,`#ff9800`,`#00bcd4`,`#e91e63`,`#8bc34a`],v=a,x=c,O=se(),k=n(()=>O.strings),He=de(),A=fe();pe();let{themeKey:Ue}=ae(_e()),j=n(()=>[`dark`,`darkNeu`,`darkoBluo`,`matrix`].includes(Ue.value)),M=n(()=>He.connection?.readonly===!0),N=m({}),P=m([]),F=m(``),I=m(``),L=m(``),We=n(()=>[{title:D(k.value?.page?.key?.timeseries?.none),value:``},...ee.map(e=>({title:e,value:e}))]),R=m(``),Ge=m(`*`),z=m(``),B=m(!1),V=m(!1),H=m(0),U=m(`LAST`),W=m(``),Ke=m(``),G=m(``),K=m([]),q=m(!1),J=m(null),Y=m(!1),X=m(),qe=m(),Je=null,Z=null,Ye=null,Xe=null,Ze=null,Qe=ye(n(()=>({count:P.value.length,getScrollElement:()=>qe.value,estimateSize:()=>40,overscan:10}))),$e=n(()=>{if(!N.value)return[];let e=new Set([`labels`,`rules`,`sourceKey`,`chunks`]);return Object.entries(N.value).filter(([t])=>!e.has(t)).map(([e,t])=>({key:e,value:t}))}),et=n(()=>{let e=N.value?.labels;return!e||typeof e!=`object`?[]:Object.entries(e).map(([e,t])=>({key:e,value:String(t)}))}),tt=n(()=>Array.isArray(N.value?.rules)?N.value.rules:[]),nt=e=>e?e.charAt(0).toUpperCase()+e.slice(1):``;function rt(e){let t=O.currentLang;return new Date(e).toLocaleString(t,{year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`,fractionalSecondDigits:3})}function it(){let e=j.value;return{primary:getComputedStyle(document.body).getPropertyValue(`--p3xr-btn-primary-bg`).trim()||(e?`#90caf9`:`#1976d2`),text:e?`rgba(255,255,255,0.87)`:`rgba(0,0,0,0.87)`,grid:e?`rgba(255,255,255,0.08)`:`rgba(0,0,0,0.08)`}}function at(e,t){if(t.length===0)return[e.map(e=>e.timestamp/1e3),e.map(e=>e.value)];let n=[e,...t.map(e=>e.data)],r=new Set;for(let e of n)for(let t of e)r.add(t.timestamp);let i=Array.from(r).sort((e,t)=>e-t),a=[i.map(e=>e/1e3)];for(let e of n){let t=new Map;for(let n of e)t.set(n.timestamp,n.value);a.push(i.map(e=>t.has(e)?t.get(e):null))}return a}function ot(){Ye?.disconnect(),Ye=null,Z?.destroy(),Z=null}function st(){if(!Je||!X.value)return;ot();let e=X.value,t=e.clientWidth||400,n=it();O.currentLang;let r=[{label:D(k.value?.label?.time),value:(e,t)=>t?new Date(t*1e3).toLocaleString(O.currentLang,{year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`}):``},{label:v.keyName,stroke:n.primary,width:2,fill:n.primary+`15`}];for(let e=0;e<K.value.length;e++)r.push({label:K.value[e].key,stroke:g[(e+1)%g.length],width:2});let i={width:t,height:400,cursor:{show:!0,drag:{x:!1,y:!1}},legend:{show:!0,live:!0},scales:{x:{time:!0}},axes:[{stroke:n.text,grid:{stroke:n.grid,width:1},ticks:{stroke:n.grid},font:`11px Roboto`,values:(e,t)=>t.map(e=>new Date(e*1e3).toLocaleTimeString(O.currentLang,{hour:`2-digit`,minute:`2-digit`,second:`2-digit`,hour12:!1}))},{stroke:n.text,grid:{stroke:n.grid,width:1},ticks:{stroke:n.grid},font:`11px Roboto Mono`,size:65}],series:r},a=at(P.value,K.value);Z=new Je(i,a,e);let o;Ye=new ResizeObserver(()=>{clearTimeout(o),o=setTimeout(()=>{let t=e.clientWidth;t>0&&Z?.setSize({width:t,height:400})},50)}),Ye.observe(e)}function ct(){if(!Je||!X.value)return;let e=2+K.value.length;if(!Z||Z.series?.length!==e){st();return}let t=at(P.value,K.value);Z.setData(t,!0),t[0].length>0&&Z.setScale(`x`,{min:t[0][0],max:t[0][t[0].length-1]})}async function Q(){try{let e={key:v.keyName};F.value&&(e.from=F.value),I.value&&(e.to=I.value),L.value&&R.value&&(e.aggregation={type:L.value,timeBucket:parseInt(R.value,10)}),P.value=(await S({action:`timeseries/range`,payload:e})).data||[];let n=[],r=Ke.value.split(`,`).map(e=>e.trim()).filter(e=>e.length>0);for(let e of r)try{let t={key:e};F.value&&(t.from=F.value),I.value&&(t.to=I.value),L.value&&R.value&&(t.aggregation={type:L.value,timeBucket:parseInt(R.value,10)});let r=await S({action:`timeseries/range`,payload:t});n.push({key:e,data:r.data||[]})}catch{}if(G.value.trim().length>0)try{let e={filter:G.value.trim()};F.value&&(e.from=F.value),I.value&&(e.to=I.value),L.value&&R.value&&(e.aggregation={type:L.value,timeBucket:parseInt(R.value,10)});let t=await S({action:`timeseries/mrange`,payload:e});for(let e of t.data||[])e.key!==v.keyName&&n.push({key:e.key,data:e.data})}catch{}K.value=n,t(()=>ct())}catch(e){A.generalHandleError(e)}}function $(){clearTimeout(Ze),Ze=setTimeout(()=>Q(),500)}async function lt(){if(z.value)try{await S({action:`timeseries/add`,payload:{key:v.keyName,timestamp:Ge.value,value:parseFloat(z.value)}}),A.toast(D(k.value?.status?.added)),z.value=``,x(`refresh`)}catch(e){A.generalHandleError(e)}}async function ut(e){try{await A.confirm({message:D(k.value?.confirm?.delete)}),await S({action:`timeseries/del`,payload:{key:v.keyName,from:e.timestamp,to:e.timestamp}}),A.toast(D(k.value?.status?.deleted)),x(`refresh`)}catch(e){e!=null&&A.generalHandleError(e)}}function dt(e){J.value={type:`edit`,model:{type:`timeseries`,key:v.keyName,tsTimestamp:String(e.timestamp),value:e.value,originalTimestamp:e.timestamp}},q.value=!0}function ft(){let e=P.value.map(e=>`${e.timestamp} ${e.value}`).join(`
`),t=et.value.map(e=>`${e.key} ${e.value}`).join(` `)||`key ${v.keyName}`;J.value={type:`edit`,model:{type:`timeseries`,key:v.keyName,value:e,tsEditAll:!0,tsLabels:t}},q.value=!0}function pt(e){q.value=!1,J.value=null,e&&(x(`refresh`),Q())}function mt(){V.value=!V.value,V.value&&(H.value=N.value?.retentionTime||0,U.value=(N.value?.duplicatePolicy).toUpperCase(),W.value=et.value.map(e=>`${e.key} ${e.value}`).join(` `)||`key ${v.keyName}`)}async function ht(){try{let e=W.value.trim().length>0?W.value:`key ${v.keyName}`;await S({action:`timeseries/alter`,payload:{key:v.keyName,retention:H.value,duplicatePolicy:U.value,labels:e}}),A.toast(D(k.value?.status?.saved)),V.value=!1,x(`refresh`)}catch(e){A.generalHandleError(e)}}function gt(){if(!Z||!X.value)return;let e=X.value.querySelector(`canvas`);if(!e)return;let t=j.value,n=t?`#1e1e1e`:`#ffffff`,r=t?`rgba(255,255,255,0.87)`:`rgba(0,0,0,0.87)`,i=e.width+40,a=e.height+40+30+30,o=document.createElement(`canvas`);o.width=i,o.height=a;let s=o.getContext(`2d`);s.fillStyle=n,s.fillRect(0,0,i,a),s.fillStyle=r,s.font=`bold 14px Roboto, sans-serif`,s.fillText(v.keyName,20,36),s.drawImage(e,20,50);let c=[v.keyName,...K.value.map(e=>e.key)],ee=[it().primary,...K.value.map((e,t)=>g[(t+1)%g.length])],te=20,l=50+e.height+16;s.font=`12px Roboto, sans-serif`;for(let e=0;e<c.length;e++)s.fillStyle=ee[e],s.fillRect(te,l-8,12,12),s.fillStyle=r,s.fillText(c[e],te+16,l+2),te+=s.measureText(c[e]).width+32;let u=o.toDataURL(`image/png`),d=document.createElement(`a`);d.href=u,d.download=`${v.keyName}-chart.png`,d.click()}s(async()=>{N.value=v.value||{};try{Je=(await ue(()=>import(`./uPlot.esm-DlluxdM_.js`),[])).default,Y.value=!0}catch(e){console.error(`Failed to load uPlot`,e)}if(Q(),!M.value){let e=v.value?.labels;if((e&&typeof e==`object`?Object.keys(e).length:0)===0)try{await S({action:`timeseries/alter`,payload:{key:v.keyName,labels:`key ${v.keyName}`}}),N.value={...N.value,labels:{key:v.keyName}}}catch{}}}),oe(()=>{ot(),clearInterval(Xe),clearTimeout(Ze)}),_([Y,P],()=>{Y.value&&setTimeout(()=>{Z?ct():st()},150)},{flush:`post`}),_([j,()=>O.currentLang,Ue],()=>{Y.value&&setTimeout(()=>{ot(),st()},100)}),_(()=>v.value,()=>{N.value=v.value||{},Q()}),_(B,e=>{clearInterval(Xe),e&&(Xe=setInterval(()=>Q(),1e4))});let _t=n(()=>j.value?`rgba(255,255,255,0.05)`:`rgba(0,0,0,0.06)`),vt=n(()=>j.value?`rgba(255,255,255,0.05)`:`rgba(0,0,0,0.04)`);return n(()=>j.value?`rgba(255,255,255,0.1)`:`rgba(0,0,0,0.1)`),(t,n)=>(d(),r(`div`,xe,[n[28]||=y(`br`,null,null,-1),e(be,{title:u(D)(k.value?.page?.key?.timeseries?.chart),"accordion-key":`ts-chart`},{actions:h(()=>[M.value?i(``,!0):(d(),l(w,{key:0,icon:`mdi-pencil`,label:u(D)(k.value?.intention?.edit),breakpoint:1280,color:`inherit`,onClick:n[0]||=p(e=>ft(),[`stop`])},null,8,[`label`])),e(w,{icon:`mdi-image`,label:u(D)(k.value?.page?.key?.timeseries?.exportChart),breakpoint:1280,color:`inherit`,onClick:n[1]||=p(e=>gt(),[`stop`])},null,8,[`label`]),e(w,{icon:B.value?`mdi-checkbox-marked`:`mdi-checkbox-blank-outline`,label:u(D)(k.value?.label?.autoRefresh),breakpoint:1280,color:`inherit`,onClick:n[2]||=p(e=>B.value=!B.value,[`stop`])},null,8,[`icon`,`label`]),B.value?i(``,!0):(d(),l(w,{key:1,icon:`mdi-refresh`,label:u(D)(k.value?.intention?.refresh),breakpoint:1280,color:`inherit`,onClick:n[3]||=p(e=>Q(),[`stop`])},null,8,[`label`]))]),default:h(()=>[y(`div`,Se,[y(`div`,Ce,[e(E,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,label:u(D)(k.value?.page?.key?.timeseries?.from),placeholder:`-`,modelValue:F.value,"onUpdate:modelValue":[n[4]||=e=>F.value=e,n[5]||=e=>$()]},null,8,[`label`,`modelValue`]),e(E,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,label:u(D)(k.value?.page?.key?.timeseries?.to),placeholder:`+`,modelValue:I.value,"onUpdate:modelValue":[n[6]||=e=>I.value=e,n[7]||=e=>$()]},null,8,[`label`,`modelValue`]),e(he,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,label:u(D)(k.value?.page?.key?.timeseries?.aggregation),modelValue:L.value,"onUpdate:modelValue":[n[8]||=e=>L.value=e,n[9]||=e=>Q()],items:We.value,"item-title":`title`,"item-value":`value`},null,8,[`label`,`modelValue`,`items`]),L.value?(d(),l(E,{key:0,density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,type:`number`,label:u(D)(k.value?.page?.key?.timeseries?.timeBucket),placeholder:`5000`,modelValue:R.value,"onUpdate:modelValue":[n[10]||=e=>R.value=e,n[11]||=e=>$()]},null,8,[`label`,`modelValue`])):i(``,!0),e(E,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,style:{"min-width":`200px`},label:u(D)(k.value?.page?.key?.timeseries?.overlay),placeholder:u(D)(k.value?.page?.key?.timeseries?.overlayHint),modelValue:Ke.value,"onUpdate:modelValue":[n[12]||=e=>Ke.value=e,n[13]||=e=>$()]},null,8,[`label`,`placeholder`,`modelValue`]),e(E,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,style:{"min-width":`180px`},label:u(D)(k.value?.page?.key?.timeseries?.mrangeFilter),placeholder:u(D)(k.value?.page?.key?.timeseries?.mrangeHint),modelValue:G.value,"onUpdate:modelValue":[n[14]||=e=>G.value=e,n[15]||=e=>$()]},null,8,[`label`,`placeholder`,`modelValue`])]),y(`div`,we,f(P.value.length)+` `+f(u(D)(k.value?.page?.key?.timeseries?.dataPoints)),1),y(`div`,{ref_key:`chartEl`,ref:X,style:{width:`100%`,"min-height":`400px`}},null,512),M.value?i(``,!0):(d(),r(`div`,Te,[e(E,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,label:u(D)(k.value?.page?.key?.timeseries?.timestamp),placeholder:`* (auto)`,modelValue:Ge.value,"onUpdate:modelValue":n[16]||=e=>Ge.value=e},null,8,[`label`,`modelValue`]),e(E,{density:`compact`,variant:`outlined`,"hide-details":``,class:`p3xr-ts-field`,type:`number`,label:u(D)(k.value?.page?.key?.timeseries?.value),modelValue:z.value,"onUpdate:modelValue":n[17]||=e=>z.value=e,onKeydown:n[18]||=re(e=>lt(),[`enter`])},null,8,[`label`,`modelValue`]),e(w,{icon:`mdi-plus`,label:u(D)(k.value?.intention?.add),raised:``,color:`primary`,disabled:!z.value,onClick:n[19]||=e=>lt()},null,8,[`label`,`disabled`])]))])]),_:1},8,[`title`]),P.value.length>0?(d(),r(b,{key:0},[n[27]||=y(`br`,null,null,-1),e(be,{title:nt(u(D)(k.value?.page?.key?.timeseries?.dataPoints))+` (${P.value.length})`,"accordion-key":`ts-data`},{default:h(()=>[y(`div`,Ee,[y(`span`,De,f(u(D)(k.value?.page?.key?.timeseries?.timestamp)),1),y(`span`,null,f(u(D)(k.value?.page?.key?.timeseries?.value)),1),M.value?i(``,!0):(d(),r(`span`,Oe))]),y(`div`,{ref_key:`dataParentEl`,ref:qe,style:{height:`600px`,overflow:`auto`}},[y(`div`,{style:o({height:u(Qe).getTotalSize()+`px`,width:`100%`,position:`relative`})},[(d(!0),r(b,null,ne(u(Qe).getVirtualItems(),t=>(d(),r(`div`,{key:t.key,style:o({position:`absolute`,top:0,left:0,width:`100%`,transform:`translateY(${t.start}px)`,height:t.size+`px`,display:`flex`,alignItems:`center`,gap:`8px`,padding:`0 16px`,borderBottom:`1px solid ${_t.value}`,backgroundColor:t.index%2==0?vt.value:`transparent`}),class:`p3xr-ts-data-row`},[y(`span`,ke,f(rt(P.value[t.index].timestamp)),1),y(`span`,Ae,f(P.value[t.index].value),1),M.value?i(``,!0):(d(),r(`span`,je,[e(ge,{text:u(D)(k.value?.intention?.delete),location:`top`},{activator:h(({props:r})=>[e(le,ce({ref_for:!0},r,{size:`24`,class:`p3xr-key-icon`,style:{color:`rgb(var(--v-theme-error))`},onClick:e=>ut(P.value[t.index])}),{default:h(()=>[...n[25]||=[ie(`mdi-delete`,-1)]]),_:1},16,[`onClick`])]),_:2},1032,[`text`]),e(ge,{text:u(D)(k.value?.intention?.edit),location:`top`},{activator:h(({props:r})=>[e(le,ce({ref_for:!0},r,{size:`24`,class:`p3xr-key-icon`,style:{color:`rgb(var(--v-theme-primary))`},onClick:e=>dt(P.value[t.index])}),{default:h(()=>[...n[26]||=[ie(`mdi-pencil`,-1)]]),_:1},16,[`onClick`])]),_:2},1032,[`text`])]))],4))),128))],4)],512)]),_:1},8,[`title`])],64)):i(``,!0),n[29]||=y(`br`,null,null,-1),e(be,{title:u(D)(k.value?.page?.key?.timeseries?.info),"accordion-key":`ts-info`},te({default:h(()=>[V.value?(d(),r(`div`,Me,[y(`div`,Ne,[e(E,{density:`compact`,variant:`outlined`,type:`number`,style:{flex:`1`,"min-width":`150px`},label:`${u(D)(k.value?.page?.key?.timeseries?.retention)} (ms)`,hint:u(D)(k.value?.page?.key?.timeseries?.retentionHint),"persistent-hint":``,modelValue:H.value,"onUpdate:modelValue":n[21]||=e=>H.value=e,modelModifiers:{number:!0}},null,8,[`label`,`hint`,`modelValue`]),e(he,{density:`compact`,variant:`outlined`,style:{flex:`1`,"min-width":`150px`},label:u(D)(k.value?.page?.key?.timeseries?.duplicatePolicy),modelValue:U.value,"onUpdate:modelValue":n[22]||=e=>U.value=e,items:[`LAST`,`FIRST`,`MIN`,`MAX`,`SUM`,`BLOCK`]},null,8,[`label`,`modelValue`]),e(E,{density:`compact`,variant:`outlined`,style:{flex:`1`,"min-width":`200px`},label:u(D)(k.value?.page?.key?.timeseries?.labels),hint:u(D)(k.value?.page?.key?.timeseries?.labelsHint),"persistent-hint":``,modelValue:W.value,"onUpdate:modelValue":n[23]||=e=>W.value=e},null,8,[`label`,`hint`,`modelValue`]),e(w,{icon:`mdi-content-save`,label:u(D)(k.value?.intention?.save),raised:``,color:`primary`,onClick:n[24]||=e=>ht()},null,8,[`label`])])])):i(``,!0),e(me,{density:`compact`},{default:h(()=>[(d(!0),r(b,null,ne($e.value,t=>(d(),r(b,{key:t.key},[e(T,null,{default:h(()=>[y(`div`,Pe,[y(`span`,Fe,f(t.key),1),y(`span`,Ie,f(t.value),1)])]),_:2},1024),e(C)],64))),128)),et.value.length>0?(d(),r(b,{key:0},[e(T,null,{default:h(()=>[y(`strong`,null,f(u(D)(k.value?.page?.key?.timeseries?.labels)),1)]),_:1}),e(C),(d(!0),r(b,null,ne(et.value,t=>(d(),r(b,{key:t.key},[e(T,null,{default:h(()=>[y(`div`,Le,[y(`span`,Re,f(t.key),1),y(`span`,ze,f(t.value),1)])]),_:2},1024),e(C)],64))),128))],64)):i(``,!0),tt.value.length>0?(d(),r(b,{key:1},[e(T,null,{default:h(()=>[y(`strong`,null,f(u(D)(k.value?.page?.key?.timeseries?.rules)),1)]),_:1}),e(C),(d(!0),r(b,null,ne(tt.value,t=>(d(),r(b,{key:t.destKey},[e(T,null,{default:h(()=>[y(`div`,Be,[y(`span`,Ve,f(t.destKey),1),y(`span`,null,f(t.aggregationType)+` / `+f(t.bucketDuration)+`ms`,1)])]),_:2},1024),e(C)],64))),128))],64)):i(``,!0)]),_:1})]),_:2},[M.value?void 0:{name:`actions`,fn:h(()=>[e(w,{icon:V.value?`mdi-checkbox-marked`:`mdi-pencil`,label:u(D)(k.value?.intention?.edit),color:`inherit`,onClick:n[20]||=p(e=>mt(),[`stop`])},null,8,[`icon`,`label`])]),key:`0`}]),1032,[`title`]),e(ve,{open:q.value,data:J.value,onClose:pt},null,8,[`open`,`data`])]))}}),[[`__scopeId`,`data-v-1d480ed6`]]);export{O as default};