@nice2dev/ui-monitoring 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.mjs +94 -81
  3. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@nice2dev/ui"),x=require("react"),ie=[],se=[],ae=[],$={trace:{color:"var(--nice-text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)"},debug:{color:"var(--nice-color-accent, #8b5cf6)",bg:"color-mix(in srgb, var(--nice-color-accent, #8b5cf6) 13%, transparent)"},info:{color:"var(--nice-color-primary, #3b82f6)",bg:"var(--nice-primary-tint-15, #3b82f622)"},warn:{color:"var(--nice-color-warning, #f59e0b)",bg:"var(--nice-warning-tint-15, #f59e0b22)"},error:{color:"var(--nice-color-error, #ef4444)",bg:"var(--nice-danger-tint-15, #ef444422)"},fatal:{color:"var(--nice-color-error, #dc2626)",bg:"color-mix(in srgb, var(--nice-color-error, #dc2626) 13%, transparent)"}},J={verticalAlign:"text-bottom",marginRight:"var(--nice-space-1, 4px)"},le=[{label:"Last 5 min",value:"now-5m"},{label:"Last 15 min",value:"now-15m"},{label:"Last 30 min",value:"now-30m"},{label:"Last 1 hour",value:"now-1h"},{label:"Last 3 hours",value:"now-3h"},{label:"Last 6 hours",value:"now-6h"},{label:"Last 12 hours",value:"now-12h"},{label:"Last 24 hours",value:"now-24h"},{label:"Last 7 days",value:"now-7d"}],ce=({logs:c=ie,streams:m=se,totalCount:L,isLoading:f,savedQueries:D=ae,patterns:w=[],onQueryExecute:V,onQuerySave:F,onQueryDelete:M,onStreamToggle:K,onLogClick:T,onExport:R,onTailStart:Q,onTailStop:O,isTailing:j=!1,className:y,style:A,testId:q,"data-testid":G})=>{const H=G??q,{t:n}=s.useNiceTranslation(),[I,a]=x.useState(""),[B,_]=x.useState("now-1h"),[Y,ee]=x.useState(1e3),[E,X]=x.useState(new Set(["trace","debug","info","warn","error","fatal"])),[k,U]=x.useState(new Set),[Z,W]=x.useState(null),[t,o]=x.useState(!1),[i,b]=x.useState(""),[v,g]=x.useState("logs"),[p,h]=x.useState(""),d=x.useMemo(()=>c.filter(r=>!(!E.has(r.level)||p&&!r.message.toLowerCase().includes(p.toLowerCase()))),[c,E,p]),N=x.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return c.forEach(l=>r[l.level]++),r},[c]),S=()=>{V({query:I,timeRange:{from:B,to:"now"},limit:Y,direction:"backward"})},z=r=>{U(l=>{const u=new Set(l);return u.has(r)?u.delete(r):u.add(r),u})},re=r=>{X(l=>{const u=new Set(l);return u.has(r)?u.delete(r):u.add(r),u})},te=()=>{i.trim()&&(F(i,I),o(!1),b(""))},oe=r=>{if(!p)return r;const l=new RegExp(`(${p})`,"gi");return r.replace(l,'<mark style="background: var(--nice-warning, #f59e0b); color: black; padding: 0 var(--nice-space-0-5, 2px); border-radius: var(--nice-radius-sm, 2px);">$1</mark>')};return e.jsxs("div",{className:`nice-log-explorer ${y||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...A},"data-testid":H,children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #252525)"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"12px"},children:[e.jsx("input",{type:"text",value:I,onChange:r=>a(r.target.value),placeholder:n("logExplorer.enterQueryEGService",'Enter query... e.g., {service="api"} |= "error"'),onKeyDown:r=>r.key==="Enter"&&S(),style:{flex:1,padding:"10px 16px",borderRadius:"8px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:B,onChange:r=>_(r.target.value),style:{padding:"10px 12px",borderRadius:"8px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"12px"},children:le.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:S,disabled:f,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:f?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:f?.7:1},children:[e.jsx(s.NiceIcon,{name:f?"clock":"search",size:14,style:J}),n("logExplorer.search","Search")]}),e.jsx("button",{onClick:()=>o(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:e.jsx(s.NiceIcon,{name:"save",size:14,title:n("logExplorer.saveQuery","Save query")})}),Q&&e.jsxs("button",{onClick:j?O:Q,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:j?"var(--nice-color-success, #22c55e)":"var(--nice-bg-tertiary, #333)",color:j?"var(--nice-color-white, #fff)":"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(s.NiceIcon,{name:j?"stop":"play",size:14,style:J}),j?"Stop":"Tail"]})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:"Levels:"}),Object.keys($).map(r=>{const l=$[r],u=N[r],C=E.has(r);return e.jsxs("button",{onClick:()=>re(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:C?l.bg:"transparent",color:C?l.color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:C?1:.5},children:[r.toUpperCase()," (",u,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:p,onChange:r=>h(r.target.value),placeholder:n("logExplorer.filterResults","Filter results..."),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"11px",width:"150px"}})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[e.jsxs("div",{style:{width:"220px",borderRight:"1px solid var(--nice-border-color, #333)",display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"12px"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--nice-text-muted, #888)",textTransform:"uppercase"},children:n("logExplorer.logStreams","Log Streams")}),m.map(r=>e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 0",cursor:"pointer",fontSize:"12px"},children:[e.jsx("input",{type:"checkbox",defaultChecked:!0,onChange:l=>K(r.id,l.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),m.length===0&&e.jsx("div",{style:{color:"var(--nice-text-muted, #666)",fontSize:"11px"},children:n("logExplorer.noStreamsDiscovered","No streams discovered")})]}),e.jsxs("div",{style:{borderTop:"1px solid var(--nice-border-color, #333)",padding:"12px",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--nice-text-muted, #888)",textTransform:"uppercase"},children:n("logExplorer.savedQueries","Saved Queries")}),D.map(r=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 8px",marginBottom:"4px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"4px",cursor:"pointer",fontSize:"11px"},onClick:()=>a(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:l=>{l.stopPropagation(),M(r.id)},style:{background:"none",border:"none",color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:e.jsx(s.NiceIcon,{name:"close",size:10,title:n("logExplorer.deleteQuery","Delete saved query")})})]},r.id)),D.length===0&&e.jsx("div",{style:{color:"var(--nice-text-muted, #666)",fontSize:"11px"},children:n("logExplorer.noSavedQueries","No saved queries")})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",borderBottom:"1px solid var(--nice-border-color, #333)"},children:[[{id:"logs",icon:"file",label:`Logs (${d.length})`},{id:"patterns",icon:"flask",label:`Patterns (${w.length})`}].map(r=>e.jsxs("button",{onClick:()=>g(r.id),style:{padding:"10px 20px",border:"none",background:v===r.id?"var(--nice-bg-elevated, #1e1e1e)":"transparent",color:v===r.id?"var(--nice-text-primary, #fff)":"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:v===r.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent"},children:[e.jsx(s.NiceIcon,{name:r.icon,size:12,style:J}),r.label]},r.id)),e.jsx("div",{style:{flex:1}}),e.jsxs("div",{style:{display:"flex",gap:"8px",padding:"8px"},children:[e.jsx("button",{onClick:()=>R("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:n("logExplorer.json","JSON")}),e.jsx("button",{onClick:()=>R("csv"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),v==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[d.map(r=>{const l=$[r.level],u=k.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>z(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:u?"var(--nice-bg-elevated, #252525)":"transparent"},children:[e.jsx("span",{style:{color:"var(--nice-text-muted, #666)",fontSize:"10px",minWidth:"160px"},children:new Date(r.timestamp).toISOString()}),e.jsx("span",{style:{padding:"2px 6px",borderRadius:"4px",background:l.bg,color:l.color,fontSize:"10px",fontWeight:500,minWidth:"50px",textAlign:"center"},children:r.level.toUpperCase()}),r.service&&e.jsxs("span",{style:{color:"var(--nice-color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:oe(r.message)}})]}),u&&e.jsxs("div",{style:{padding:"12px 12px 12px 200px",background:"var(--nice-bg-elevated, #252525)",borderTop:"1px solid var(--nice-border-color, #333)"},children:[e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"12px",marginBottom:"12px"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"2px"},children:n("logExplorer.source","Source")}),e.jsx("div",{style:{fontSize:"11px"},children:r.source})]}),r.host&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"2px"},children:n("logExplorer.host","Host")}),e.jsx("div",{style:{fontSize:"11px"},children:r.host})]}),r.traceId&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"2px"},children:n("logExplorer.traceId","Trace ID")}),e.jsx("div",{style:{fontSize:"11px",fontFamily:"monospace"},children:r.traceId})]})]}),Object.keys(r.attributes).length>0&&e.jsxs("div",{style:{marginBottom:"12px"},children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"4px"},children:n("logExplorer.attributes","Attributes")}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([C,ne])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[C,"=",String(ne)]},C))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"4px"},children:n("logExplorer.stackTrace","Stack Trace")}),e.jsx("pre",{style:{margin:0,padding:"8px",background:"var(--nice-bg-elevated, #1e1e1e)",borderRadius:"4px",fontSize:"10px",overflow:"auto",maxHeight:"200px",color:"var(--nice-color-error, #ef4444)"},children:r.stackTrace})]}),e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(r),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:n("logExplorer.viewDetails","View Details")}),r.traceId&&e.jsx("button",{onClick:()=>a(`{traceId="${r.traceId}"}`),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:n("logExplorer.showTrace","Show Trace")})]})]})]},r.id)}),d.length===0&&!f&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:[e.jsx(s.NiceIcon,{name:"archive",size:48}),e.jsx("p",{style:{marginTop:"16px"},children:n("logExplorer.noLogsMatchYourQuery","No logs match your query")})]}),f&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:[e.jsx(s.NiceIcon,{name:"clock",size:48}),e.jsx("p",{style:{marginTop:"16px"},children:n("logExplorer.loadingLogs","Loading logs...")})]})]}),v==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[w.map(r=>{const l=$[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${l.color}`},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"8px"},children:[e.jsx("span",{style:{fontFamily:"monospace",fontSize:"12px",fontWeight:500},children:r.pattern}),e.jsxs("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:[r.count," occurrences"]})]}),e.jsxs("div",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:["Sample: ",r.samples[0]]})]},r.id)}),w.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:e.jsx("p",{children:n("logExplorer.noPatternsDetectedRunA","No patterns detected. Run a query first.")})})]})]})]}),t&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"400px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"12px",padding:"24px"},children:[e.jsx("h3",{style:{margin:"0 0 16px 0",fontSize:"14px"},children:n("logExplorer.saveQuery2","Save Query")}),e.jsx("input",{type:"text",value:i,onChange:r=>b(r.target.value),placeholder:n("logExplorer.queryName","Query name..."),style:{width:"100%",padding:"10px",borderRadius:"8px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"13px",marginBottom:"16px"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px"},children:[e.jsx("button",{onClick:()=>o(!1),style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer"},children:n("logExplorer.cancel","Cancel")}),e.jsx("button",{onClick:te,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer"},children:n("logExplorer.save","Save")})]})]})})]})},de={critical:{color:"var(--nice-color-error, #ef4444)",icon:"error"},warning:{color:"var(--nice-color-warning, #f59e0b)",icon:"warning"},info:{color:"var(--nice-color-primary, #3b82f6)",icon:"info"}},P={verticalAlign:"text-bottom",marginRight:"var(--nice-space-1, 4px)"},xe=[{from:"now-5m",to:"now",display:"Last 5 minutes"},{from:"now-15m",to:"now",display:"Last 15 minutes"},{from:"now-1h",to:"now",display:"Last 1 hour"},{from:"now-3h",to:"now",display:"Last 3 hours"},{from:"now-6h",to:"now",display:"Last 6 hours"},{from:"now-12h",to:"now",display:"Last 12 hours"},{from:"now-24h",to:"now",display:"Last 24 hours"},{from:"now-7d",to:"now",display:"Last 7 days"},{from:"now-30d",to:"now",display:"Last 30 days"}],pe={},ue=({dashboard:c,metrics:m=pe,alerts:L=[],timeRanges:f=xe,onTimeRangeChange:D,onVariableChange:w,onPanelEdit:V,onPanelAdd:F,onPanelRemove:M,onPanelMove:K,onAlertAcknowledge:T,onAlertSilence:R,onQueryExecute:Q,onDashboardSave:O,onRefresh:j,isEditing:y=!1,onEditModeToggle:A,className:q,style:G,testId:H,"data-testid":n})=>{const I=n??H,{t:a}=s.useNiceTranslation(),[B,_]=x.useState(!1),[Y,ee]=x.useState(!0),[E,X]=x.useState(null),k=L.filter(t=>t.status==="firing"),U=t=>{var i,b,v;const o=(i=t.queries[0])!=null&&i.expression?m[t.queries[0].expression]:null;switch(t.type){case"stat":return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",flexDirection:"column"},children:[e.jsx("div",{style:{fontSize:"48px",fontWeight:600,color:o?W(o.currentValue,t.thresholds):"var(--nice-text-primary, #e0e0e0)"},children:(o==null?void 0:o.currentValue.toFixed(2))??"-"}),(o==null?void 0:o.unit)&&e.jsx("div",{style:{fontSize:"14px",color:"var(--nice-text-muted, #888)",marginTop:"4px"},children:o.unit})]});case"gauge":{const g=(o==null?void 0:o.currentValue)??0,p=((v=(b=t.thresholds)==null?void 0:b[t.thresholds.length-1])==null?void 0:v.value)??100,h=Math.min(g/p*100,100);return e.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%"},children:e.jsxs("svg",{viewBox:"0 0 100 60",style:{width:"100%",maxWidth:"200px"},children:[e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:"var(--nice-border-color, #333)",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:W(g,t.thresholds),strokeWidth:"8",strokeDasharray:`${h*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"var(--nice-text-primary, #e0e0e0)",fontSize:"16",fontWeight:"600",children:g.toFixed(1)})]})})}case"timeseries":return Z(t,o);case"table":return e.jsx("div",{style:{overflow:"auto",height:"100%"},children:e.jsxs("table",{style:{width:"100%",fontSize:"11px",borderCollapse:"collapse"},children:[e.jsx("thead",{children:e.jsxs("tr",{style:{background:"var(--nice-bg-elevated, #252525)"},children:[e.jsx("th",{style:{padding:"6px 8px",textAlign:"left",borderBottom:"1px solid var(--nice-border-color, #333)"},children:a("metricsDashboard.time","Time")}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--nice-border-color, #333)"},children:a("metricsDashboard.value","Value")})]})}),e.jsx("tbody",{children:o==null?void 0:o.values.slice(-10).reverse().map((g,p)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:new Date(g.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)",textAlign:"right"},children:[g.value.toFixed(2)," ",o.unit]})]},p))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((g,p)=>{var S,z;const h=m[g.expression],d=(h==null?void 0:h.currentValue)??0,N=((z=(S=t.thresholds)==null?void 0:S[t.thresholds.length-1])==null?void 0:z.value)??100;return e.jsxs("div",{style:{marginBottom:"8px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"11px",marginBottom:"4px"},children:[e.jsx("span",{children:g.legendFormat??g.expression}),e.jsx("span",{children:d.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${d/N*100}%`,background:W(d,t.thresholds),borderRadius:"4px"}})})]},p)})});case"text":return e.jsx("div",{style:{padding:"12px",fontSize:"12px",lineHeight:"1.6"},children:t.description});default:return e.jsx("div",{style:{padding:"12px",color:"var(--nice-text-muted, #666)"},children:a("metricsDashboard.unsupportedPanelType","Unsupported panel type")})}},Z=(t,o)=>{const i=(o==null?void 0:o.values)??[];if(i.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--nice-text-muted, #666)"},children:a("metricsDashboard.noData","No data")});const b=i.map(d=>d.value),v=Math.min(...b),p=Math.max(...b)-v||1,h=i.map((d,N)=>{const S=N/(i.length-1)*100,z=100-(d.value-v)/p*80;return`${S},${z}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(d=>e.jsx("line",{x1:"0",y1:d,x2:"100",y2:d,stroke:"var(--nice-text, #333)",strokeWidth:"0.5"},d)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${h} 100,100`,fill:"var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))"}):null,e.jsx("polyline",{points:h,fill:"none",stroke:"var(--nice-primary, #3b82f6)",strokeWidth:"1"})]})},W=(t,o)=>{if(!o||o.length===0)return"var(--nice-color-primary, #3b82f6)";for(let i=o.length-1;i>=0;i--)if(t>=o[i].value)return o[i].color;return"var(--nice-color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${q||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...G},"data-testid":I,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #252525)"},children:[e.jsx(s.NiceIcon,{name:"bar-chart",size:20}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:c.name}),e.jsx("div",{style:{flex:1}}),k.length>0&&e.jsxs("button",{onClick:()=>_(!0),style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-danger-tint-15, #ef444422)",color:"var(--nice-color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(s.NiceIcon,{name:"error",size:14})," ",(k.length===1?a("metricsDashboard.oneAlert","1 Alert"):a("metricsDashboard.alertsCount","{count} Alerts")).replace("{count}",String(k.length))]}),e.jsx("select",{value:c.timeRange.display,onChange:t=>{const o=f.find(i=>i.display===t.target.value);o&&D(o)},style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"12px"},children:f.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsxs("button",{onClick:j,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(s.NiceIcon,{name:"refresh",size:14,style:P}),a("metricsDashboard.refresh","Refresh")]}),y?e.jsxs(e.Fragment,{children:[e.jsxs("button",{onClick:F,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(s.NiceIcon,{name:"plus",size:14,style:P}),a("metricsDashboard.addPanel","Add Panel")]}),e.jsxs("button",{onClick:O,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-success, #22c55e)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(s.NiceIcon,{name:"save",size:14,style:P}),a("metricsDashboard.save","Save")]})]}):null,A&&e.jsxs("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:y?"var(--nice-color-warning, #f59e0b)":"var(--nice-bg-tertiary, #333)",color:y?"var(--nice-color-white, #fff)":"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(s.NiceIcon,{name:y?"check":"edit",size:14,style:P}),y?"Done":"Edit"]})]}),c.variables.length>0&&Y&&e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #252525)"},children:c.variables.map(t=>{var o;return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsxs("label",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:i=>w(t.id,i.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:i=>w(t.id,i.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"11px"},children:(o=t.options)==null?void 0:o.map(i=>e.jsx("option",{value:i,children:i},i))})]},t.id)})}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(12, 1fr)",gridAutoRows:"minmax(100px, auto)",gap:"16px"},children:c.panels.map(t=>e.jsxs("div",{style:{gridColumn:`span ${t.position.w}`,gridRow:`span ${t.position.h}`,background:"var(--nice-bg-elevated, #252525)",borderRadius:"8px",overflow:"hidden",border:E===t.id?"2px solid var(--nice-primary, #3b82f6)":"1px solid var(--nice-border-color, #333)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",padding:"8px 12px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #1e1e1e)"},children:[e.jsx("span",{style:{flex:1,fontSize:"12px",fontWeight:500},children:t.title}),y&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:()=>V(t),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"10px"},children:e.jsx(s.NiceIcon,{name:"edit",size:12,title:a("metricsDashboard.editPanel","Edit panel")})}),e.jsx("button",{onClick:()=>M(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--nice-color-error, #ef4444)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:e.jsx(s.NiceIcon,{name:"close",size:12,title:a("metricsDashboard.removePanel","Remove panel")})})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:U(t)})]},t.id))})}),B&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"600px",maxHeight:"80vh",background:"var(--nice-bg-elevated, #252525)",borderRadius:"12px",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:[e.jsxs("span",{style:{fontWeight:600},children:["Active Alerts (",k.length,")"]}),e.jsx("button",{onClick:()=>_(!1),style:{background:"none",border:"none",color:"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:e.jsx(s.NiceIcon,{name:"close",size:18,title:a("close","Close")})})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[L.map(t=>{const o=de[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--nice-border-color, #333)",borderLeft:`4px solid ${o.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx(s.NiceIcon,{name:o.icon,size:14,color:o.color}),e.jsx("span",{style:{fontWeight:500},children:t.name}),e.jsx("span",{style:{marginLeft:"auto",padding:"2px 8px",borderRadius:"4px",background:t.status==="firing"?"var(--nice-danger-tint-15, #ef444422)":"var(--nice-success-tint-15, #22c55e22)",color:t.status==="firing"?"var(--nice-color-error, #ef4444)":"var(--nice-color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--nice-text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--nice-text-muted, #666)"},children:[e.jsxs("span",{children:["Value: ",t.value]}),e.jsx("span",{children:"•"}),e.jsxs("span",{children:["Threshold: ",t.threshold]}),e.jsx("span",{children:"•"}),e.jsx("span",{children:new Date(t.startsAt).toLocaleString()})]}),t.status==="firing"&&T&&e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(t.id),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:a("metricsDashboard.acknowledge","Acknowledge")}),R&&e.jsx("button",{onClick:()=>R(t.id,36e5),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:a("metricsDashboard.silence1h","Silence 1h")})]})]},t.id)}),L.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:a("metricsDashboard.noAlerts","No alerts")})]})]})})]})},ge=c=>{const{t:m}=s.useNiceTranslation();return c.dashboard?e.jsx(ue,{...c,dashboard:c.dashboard}):e.jsx("div",{className:c.className,style:c.style,"data-testid":c["data-testid"]??c.testId,children:e.jsx(s.NiceEmpty,{title:m("metricsDashboard.noDashboard","No dashboard")})})};exports.NiceLogExplorer=ce;exports.NiceMetricsDashboard=ge;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@nice2dev/ui"),x=require("react"),ie=[],se=[],ae=[],P={trace:{color:"var(--nice-text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)"},debug:{color:"var(--nice-color-accent, #8b5cf6)",bg:"color-mix(in srgb, var(--nice-color-accent, #8b5cf6) 13%, transparent)"},info:{color:"var(--nice-color-primary, #3b82f6)",bg:"var(--nice-primary-tint-15, #3b82f622)"},warn:{color:"var(--nice-color-warning, #f59e0b)",bg:"var(--nice-warning-tint-15, #f59e0b22)"},error:{color:"var(--nice-color-error, #ef4444)",bg:"var(--nice-danger-tint-15, #ef444422)"},fatal:{color:"var(--nice-color-error, #dc2626)",bg:"color-mix(in srgb, var(--nice-color-error, #dc2626) 13%, transparent)"}},J={verticalAlign:"text-bottom",marginRight:"var(--nice-space-1, 4px)"},le=[{label:"Last 5 min",value:"now-5m"},{label:"Last 15 min",value:"now-15m"},{label:"Last 30 min",value:"now-30m"},{label:"Last 1 hour",value:"now-1h"},{label:"Last 3 hours",value:"now-3h"},{label:"Last 6 hours",value:"now-6h"},{label:"Last 12 hours",value:"now-12h"},{label:"Last 24 hours",value:"now-24h"},{label:"Last 7 days",value:"now-7d"}],ce=({logs:c=ie,streams:m=se,totalCount:N,isLoading:f,savedQueries:D=ae,patterns:w=[],onQueryExecute:V,onQuerySave:F,onQueryDelete:M,onStreamToggle:K,onLogClick:T,onExport:R,onTailStart:Q,onTailStop:O,isTailing:j=!1,className:b,style:A,testId:q,"data-testid":G})=>{const H=G??q,{t:n}=a.useNiceTranslation(),[I,s]=x.useState(""),[B,_]=x.useState("now-1h"),[Y,ee]=x.useState(1e3),[E,X]=x.useState(new Set(["trace","debug","info","warn","error","fatal"])),[k,U]=x.useState(new Set),[Z,W]=x.useState(null),[t,o]=x.useState(!1),[i,y]=x.useState(""),[h,g]=x.useState("logs"),[p,v]=x.useState(""),d=x.useMemo(()=>c.filter(r=>!(!E.has(r.level)||p&&!r.message.toLowerCase().includes(p.toLowerCase()))),[c,E,p]),L=x.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return c.forEach(l=>r[l.level]++),r},[c]),S=()=>{V({query:I,timeRange:{from:B,to:"now"},limit:Y,direction:"backward"})},z=r=>{U(l=>{const u=new Set(l);return u.has(r)?u.delete(r):u.add(r),u})},re=r=>{X(l=>{const u=new Set(l);return u.has(r)?u.delete(r):u.add(r),u})},te=()=>{i.trim()&&(F(i,I),o(!1),y(""))},oe=r=>{if(!p)return r;const l=new RegExp(`(${p})`,"gi");return r.replace(l,'<mark style="background: var(--nice-warning, #f59e0b); color: black; padding: 0 var(--nice-space-0-5, 2px); border-radius: var(--nice-radius-sm, 2px);">$1</mark>')};return e.jsxs("div",{className:`nice-log-explorer ${b||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...A},"data-testid":H,children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #252525)"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"12px"},children:[e.jsx("input",{type:"text",value:I,onChange:r=>s(r.target.value),placeholder:n("logExplorer.enterQueryEGService",'Enter query... e.g., {service="api"} |= "error"'),onKeyDown:r=>r.key==="Enter"&&S(),style:{flex:1,padding:"10px 16px",borderRadius:"8px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:B,onChange:r=>_(r.target.value),style:{padding:"10px 12px",borderRadius:"8px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"12px"},children:le.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:S,disabled:f,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:f?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:f?.7:1},children:[e.jsx(a.NiceIcon,{name:f?"clock":"search",size:14,style:J}),n("logExplorer.search","Search")]}),e.jsx("button",{onClick:()=>o(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:e.jsx(a.NiceIcon,{name:"save",size:14,title:n("logExplorer.saveQuery","Save query")})}),Q&&e.jsxs("button",{onClick:j?O:Q,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:j?"var(--nice-color-success, #22c55e)":"var(--nice-bg-tertiary, #333)",color:j?"var(--nice-color-white, #fff)":"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(a.NiceIcon,{name:j?"stop":"play",size:14,style:J}),j?n("logExplorer.stop","Stop"):n("logExplorer.tail","Tail")]})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:n("logExplorer.levels","Levels:")}),Object.keys(P).map(r=>{const l=P[r],u=L[r],C=E.has(r);return e.jsxs("button",{onClick:()=>re(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:C?l.bg:"transparent",color:C?l.color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:C?1:.5},children:[r.toUpperCase()," (",u,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:p,onChange:r=>v(r.target.value),placeholder:n("logExplorer.filterResults","Filter results..."),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"11px",width:"150px"}})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[e.jsxs("div",{style:{width:"220px",borderRight:"1px solid var(--nice-border-color, #333)",display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"12px"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--nice-text-muted, #888)",textTransform:"uppercase"},children:n("logExplorer.logStreams","Log Streams")}),m.map(r=>e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 0",cursor:"pointer",fontSize:"12px"},children:[e.jsx("input",{type:"checkbox",defaultChecked:!0,onChange:l=>K(r.id,l.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),m.length===0&&e.jsx("div",{style:{color:"var(--nice-text-muted, #666)",fontSize:"11px"},children:n("logExplorer.noStreamsDiscovered","No streams discovered")})]}),e.jsxs("div",{style:{borderTop:"1px solid var(--nice-border-color, #333)",padding:"12px",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--nice-text-muted, #888)",textTransform:"uppercase"},children:n("logExplorer.savedQueries","Saved Queries")}),D.map(r=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 8px",marginBottom:"4px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"4px",cursor:"pointer",fontSize:"11px"},onClick:()=>s(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:l=>{l.stopPropagation(),M(r.id)},style:{background:"none",border:"none",color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:e.jsx(a.NiceIcon,{name:"close",size:10,title:n("logExplorer.deleteQuery","Delete saved query")})})]},r.id)),D.length===0&&e.jsx("div",{style:{color:"var(--nice-text-muted, #666)",fontSize:"11px"},children:n("logExplorer.noSavedQueries","No saved queries")})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",borderBottom:"1px solid var(--nice-border-color, #333)"},children:[[{id:"logs",icon:"file",label:n("logExplorer.logs","Logs ({filteredLogs})").replace("{filteredLogs}",String(d.length))},{id:"patterns",icon:"flask",label:n("logExplorer.patterns","Patterns ({patterns})").replace("{patterns}",String(w.length))}].map(r=>e.jsxs("button",{onClick:()=>g(r.id),style:{padding:"10px 20px",border:"none",background:h===r.id?"var(--nice-bg-elevated, #1e1e1e)":"transparent",color:h===r.id?"var(--nice-text-primary, #fff)":"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:h===r.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent"},children:[e.jsx(a.NiceIcon,{name:r.icon,size:12,style:J}),r.label]},r.id)),e.jsx("div",{style:{flex:1}}),e.jsxs("div",{style:{display:"flex",gap:"8px",padding:"8px"},children:[e.jsx("button",{onClick:()=>R("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:n("logExplorer.json","JSON")}),e.jsx("button",{onClick:()=>R("csv"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),h==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[d.map(r=>{const l=P[r.level],u=k.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>z(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:u?"var(--nice-bg-elevated, #252525)":"transparent"},children:[e.jsx("span",{style:{color:"var(--nice-text-muted, #666)",fontSize:"10px",minWidth:"160px"},children:new Date(r.timestamp).toISOString()}),e.jsx("span",{style:{padding:"2px 6px",borderRadius:"4px",background:l.bg,color:l.color,fontSize:"10px",fontWeight:500,minWidth:"50px",textAlign:"center"},children:r.level.toUpperCase()}),r.service&&e.jsxs("span",{style:{color:"var(--nice-color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:oe(r.message)}})]}),u&&e.jsxs("div",{style:{padding:"12px 12px 12px 200px",background:"var(--nice-bg-elevated, #252525)",borderTop:"1px solid var(--nice-border-color, #333)"},children:[e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"12px",marginBottom:"12px"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"2px"},children:n("logExplorer.source","Source")}),e.jsx("div",{style:{fontSize:"11px"},children:r.source})]}),r.host&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"2px"},children:n("logExplorer.host","Host")}),e.jsx("div",{style:{fontSize:"11px"},children:r.host})]}),r.traceId&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"2px"},children:n("logExplorer.traceId","Trace ID")}),e.jsx("div",{style:{fontSize:"11px",fontFamily:"monospace"},children:r.traceId})]})]}),Object.keys(r.attributes).length>0&&e.jsxs("div",{style:{marginBottom:"12px"},children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"4px"},children:n("logExplorer.attributes","Attributes")}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([C,ne])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[C,"=",String(ne)]},C))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"4px"},children:n("logExplorer.stackTrace","Stack Trace")}),e.jsx("pre",{style:{margin:0,padding:"8px",background:"var(--nice-bg-elevated, #1e1e1e)",borderRadius:"4px",fontSize:"10px",overflow:"auto",maxHeight:"200px",color:"var(--nice-color-error, #ef4444)"},children:r.stackTrace})]}),e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(r),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:n("logExplorer.viewDetails","View Details")}),r.traceId&&e.jsx("button",{onClick:()=>s(`{traceId="${r.traceId}"}`),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:n("logExplorer.showTrace","Show Trace")})]})]})]},r.id)}),d.length===0&&!f&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:[e.jsx(a.NiceIcon,{name:"archive",size:48}),e.jsx("p",{style:{marginTop:"16px"},children:n("logExplorer.noLogsMatchYourQuery","No logs match your query")})]}),f&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:[e.jsx(a.NiceIcon,{name:"clock",size:48}),e.jsx("p",{style:{marginTop:"16px"},children:n("logExplorer.loadingLogs","Loading logs...")})]})]}),h==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[w.map(r=>{const l=P[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${l.color}`},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"8px"},children:[e.jsx("span",{style:{fontFamily:"monospace",fontSize:"12px",fontWeight:500},children:r.pattern}),e.jsx("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:n("logExplorer.occurrences","{count} occurrences").replace("{count}",String(r.count))})]}),e.jsx("div",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:n("logExplorer.sample","Sample: {samples}").replace("{samples}",String(r.samples[0]))})]},r.id)}),w.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:e.jsx("p",{children:n("logExplorer.noPatternsDetectedRunA","No patterns detected. Run a query first.")})})]})]})]}),t&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"400px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"12px",padding:"24px"},children:[e.jsx("h3",{style:{margin:"0 0 16px 0",fontSize:"14px"},children:n("logExplorer.saveQuery2","Save Query")}),e.jsx("input",{type:"text",value:i,onChange:r=>y(r.target.value),placeholder:n("logExplorer.queryName","Query name..."),style:{width:"100%",padding:"10px",borderRadius:"8px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"13px",marginBottom:"16px"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px"},children:[e.jsx("button",{onClick:()=>o(!1),style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer"},children:n("logExplorer.cancel","Cancel")}),e.jsx("button",{onClick:te,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer"},children:n("logExplorer.save","Save")})]})]})})]})},de={critical:{color:"var(--nice-color-error, #ef4444)",icon:"error"},warning:{color:"var(--nice-color-warning, #f59e0b)",icon:"warning"},info:{color:"var(--nice-color-primary, #3b82f6)",icon:"info"}},$={verticalAlign:"text-bottom",marginRight:"var(--nice-space-1, 4px)"},xe=[{from:"now-5m",to:"now",display:"Last 5 minutes"},{from:"now-15m",to:"now",display:"Last 15 minutes"},{from:"now-1h",to:"now",display:"Last 1 hour"},{from:"now-3h",to:"now",display:"Last 3 hours"},{from:"now-6h",to:"now",display:"Last 6 hours"},{from:"now-12h",to:"now",display:"Last 12 hours"},{from:"now-24h",to:"now",display:"Last 24 hours"},{from:"now-7d",to:"now",display:"Last 7 days"},{from:"now-30d",to:"now",display:"Last 30 days"}],pe={},ue=({dashboard:c,metrics:m=pe,alerts:N=[],timeRanges:f=xe,onTimeRangeChange:D,onVariableChange:w,onPanelEdit:V,onPanelAdd:F,onPanelRemove:M,onPanelMove:K,onAlertAcknowledge:T,onAlertSilence:R,onQueryExecute:Q,onDashboardSave:O,onRefresh:j,isEditing:b=!1,onEditModeToggle:A,className:q,style:G,testId:H,"data-testid":n})=>{const I=n??H,{t:s}=a.useNiceTranslation(),[B,_]=x.useState(!1),[Y,ee]=x.useState(!0),[E,X]=x.useState(null),k=N.filter(t=>t.status==="firing"),U=t=>{var i,y,h;const o=(i=t.queries[0])!=null&&i.expression?m[t.queries[0].expression]:null;switch(t.type){case"stat":return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",flexDirection:"column"},children:[e.jsx("div",{style:{fontSize:"48px",fontWeight:600,color:o?W(o.currentValue,t.thresholds):"var(--nice-text-primary, #e0e0e0)"},children:(o==null?void 0:o.currentValue.toFixed(2))??"-"}),(o==null?void 0:o.unit)&&e.jsx("div",{style:{fontSize:"14px",color:"var(--nice-text-muted, #888)",marginTop:"4px"},children:o.unit})]});case"gauge":{const g=(o==null?void 0:o.currentValue)??0,p=((h=(y=t.thresholds)==null?void 0:y[t.thresholds.length-1])==null?void 0:h.value)??100,v=Math.min(g/p*100,100);return e.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%"},children:e.jsxs("svg",{viewBox:"0 0 100 60",style:{width:"100%",maxWidth:"200px"},children:[e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:"var(--nice-border-color, #333)",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:W(g,t.thresholds),strokeWidth:"8",strokeDasharray:`${v*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"var(--nice-text-primary, #e0e0e0)",fontSize:"16",fontWeight:"600",children:g.toFixed(1)})]})})}case"timeseries":return Z(t,o);case"table":return e.jsx("div",{style:{overflow:"auto",height:"100%"},children:e.jsxs("table",{style:{width:"100%",fontSize:"11px",borderCollapse:"collapse"},children:[e.jsx("thead",{children:e.jsxs("tr",{style:{background:"var(--nice-bg-elevated, #252525)"},children:[e.jsx("th",{style:{padding:"6px 8px",textAlign:"left",borderBottom:"1px solid var(--nice-border-color, #333)"},children:s("metricsDashboard.time","Time")}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--nice-border-color, #333)"},children:s("metricsDashboard.value","Value")})]})}),e.jsx("tbody",{children:o==null?void 0:o.values.slice(-10).reverse().map((g,p)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:new Date(g.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)",textAlign:"right"},children:[g.value.toFixed(2)," ",o.unit]})]},p))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((g,p)=>{var S,z;const v=m[g.expression],d=(v==null?void 0:v.currentValue)??0,L=((z=(S=t.thresholds)==null?void 0:S[t.thresholds.length-1])==null?void 0:z.value)??100;return e.jsxs("div",{style:{marginBottom:"8px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"11px",marginBottom:"4px"},children:[e.jsx("span",{children:g.legendFormat??g.expression}),e.jsx("span",{children:d.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${d/L*100}%`,background:W(d,t.thresholds),borderRadius:"4px"}})})]},p)})});case"text":return e.jsx("div",{style:{padding:"12px",fontSize:"12px",lineHeight:"1.6"},children:t.description});default:return e.jsx("div",{style:{padding:"12px",color:"var(--nice-text-muted, #666)"},children:s("metricsDashboard.unsupportedPanelType","Unsupported panel type")})}},Z=(t,o)=>{const i=(o==null?void 0:o.values)??[];if(i.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--nice-text-muted, #666)"},children:s("metricsDashboard.noData","No data")});const y=i.map(d=>d.value),h=Math.min(...y),p=Math.max(...y)-h||1,v=i.map((d,L)=>{const S=L/(i.length-1)*100,z=100-(d.value-h)/p*80;return`${S},${z}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(d=>e.jsx("line",{x1:"0",y1:d,x2:"100",y2:d,stroke:"var(--nice-text, #333)",strokeWidth:"0.5"},d)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${v} 100,100`,fill:"var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))"}):null,e.jsx("polyline",{points:v,fill:"none",stroke:"var(--nice-primary, #3b82f6)",strokeWidth:"1"})]})},W=(t,o)=>{if(!o||o.length===0)return"var(--nice-color-primary, #3b82f6)";for(let i=o.length-1;i>=0;i--)if(t>=o[i].value)return o[i].color;return"var(--nice-color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${q||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...G},"data-testid":I,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #252525)"},children:[e.jsx(a.NiceIcon,{name:"bar-chart",size:20}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:c.name}),e.jsx("div",{style:{flex:1}}),k.length>0&&e.jsxs("button",{onClick:()=>_(!0),style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-danger-tint-15, #ef444422)",color:"var(--nice-color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(a.NiceIcon,{name:"error",size:14})," ",(k.length===1?s("metricsDashboard.oneAlert","1 Alert"):s("metricsDashboard.alertsCount","{count} Alerts")).replace("{count}",String(k.length))]}),e.jsx("select",{value:c.timeRange.display,onChange:t=>{const o=f.find(i=>i.display===t.target.value);o&&D(o)},style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"12px"},children:f.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsxs("button",{onClick:j,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(a.NiceIcon,{name:"refresh",size:14,style:$}),s("metricsDashboard.refresh","Refresh")]}),b?e.jsxs(e.Fragment,{children:[e.jsxs("button",{onClick:F,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(a.NiceIcon,{name:"plus",size:14,style:$}),s("metricsDashboard.addPanel","Add Panel")]}),e.jsxs("button",{onClick:O,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-success, #22c55e)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(a.NiceIcon,{name:"save",size:14,style:$}),s("metricsDashboard.save","Save")]})]}):null,A&&e.jsxs("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:b?"var(--nice-color-warning, #f59e0b)":"var(--nice-bg-tertiary, #333)",color:b?"var(--nice-color-white, #fff)":"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(a.NiceIcon,{name:b?"check":"edit",size:14,style:$}),b?s("metricsDashboard.done","Done"):s("metricsDashboard.edit","Edit")]})]}),c.variables.length>0&&Y&&e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #252525)"},children:c.variables.map(t=>{var o;return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsxs("label",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:i=>w(t.id,i.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:i=>w(t.id,i.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #fff)",fontSize:"11px"},children:(o=t.options)==null?void 0:o.map(i=>e.jsx("option",{value:i,children:i},i))})]},t.id)})}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(12, 1fr)",gridAutoRows:"minmax(100px, auto)",gap:"16px"},children:c.panels.map(t=>e.jsxs("div",{style:{gridColumn:`span ${t.position.w}`,gridRow:`span ${t.position.h}`,background:"var(--nice-bg-elevated, #252525)",borderRadius:"8px",overflow:"hidden",border:E===t.id?"2px solid var(--nice-primary, #3b82f6)":"1px solid var(--nice-border-color, #333)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",padding:"8px 12px",borderBottom:"1px solid var(--nice-border-color, #333)",background:"var(--nice-bg-elevated, #1e1e1e)"},children:[e.jsx("span",{style:{flex:1,fontSize:"12px",fontWeight:500},children:t.title}),b&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:()=>V(t),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"10px"},children:e.jsx(a.NiceIcon,{name:"edit",size:12,title:s("metricsDashboard.editPanel","Edit panel")})}),e.jsx("button",{onClick:()=>M(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--nice-color-error, #ef4444)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:e.jsx(a.NiceIcon,{name:"close",size:12,title:s("metricsDashboard.removePanel","Remove panel")})})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:U(t)})]},t.id))})}),B&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"600px",maxHeight:"80vh",background:"var(--nice-bg-elevated, #252525)",borderRadius:"12px",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:[e.jsx("span",{style:{fontWeight:600},children:s("metricsDashboard.activeAlerts","Active Alerts ({firingAlerts})").replace("{firingAlerts}",String(k.length))}),e.jsx("button",{onClick:()=>_(!1),style:{background:"none",border:"none",color:"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:e.jsx(a.NiceIcon,{name:"close",size:18,title:s("close","Close")})})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[N.map(t=>{const o=de[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--nice-border-color, #333)",borderLeft:`4px solid ${o.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx(a.NiceIcon,{name:o.icon,size:14,color:o.color}),e.jsx("span",{style:{fontWeight:500},children:t.name}),e.jsx("span",{style:{marginLeft:"auto",padding:"2px 8px",borderRadius:"4px",background:t.status==="firing"?"var(--nice-danger-tint-15, #ef444422)":"var(--nice-success-tint-15, #22c55e22)",color:t.status==="firing"?"var(--nice-color-error, #ef4444)":"var(--nice-color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--nice-text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--nice-text-muted, #666)"},children:[e.jsx("span",{children:s("metricsDashboard.value2","Value: {value}").replace("{value}",String(t.value))}),e.jsx("span",{children:"•"}),e.jsx("span",{children:s("metricsDashboard.threshold","Threshold: {threshold}").replace("{threshold}",String(t.threshold))}),e.jsx("span",{children:"•"}),e.jsx("span",{children:new Date(t.startsAt).toLocaleString()})]}),t.status==="firing"&&T&&e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(t.id),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:s("metricsDashboard.acknowledge","Acknowledge")}),R&&e.jsx("button",{onClick:()=>R(t.id,36e5),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:s("metricsDashboard.silence1h","Silence 1h")})]})]},t.id)}),N.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:s("metricsDashboard.noAlerts","No alerts")})]})]})})]})},ge=c=>{const{t:m}=a.useNiceTranslation();return c.dashboard?e.jsx(ue,{...c,dashboard:c.dashboard}):e.jsx("div",{className:c.className,style:c.style,"data-testid":c["data-testid"]??c.testId,children:e.jsx(a.NiceEmpty,{title:m("metricsDashboard.noDashboard","No dashboard")})})};exports.NiceLogExplorer=ce;exports.NiceMetricsDashboard=ge;
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsxs as t, jsx as e, Fragment as te } from "react/jsx-runtime";
2
2
  import { useNiceTranslation as X, NiceIcon as s, NiceEmpty as ce } from "@nice2dev/ui";
3
- import { useState as v, useMemo as oe } from "react";
4
- const se = [], pe = [], xe = [], P = {
3
+ import { useState as h, useMemo as oe } from "react";
4
+ const se = [], pe = [], xe = [], $ = {
5
5
  trace: {
6
6
  color: "var(--nice-text-muted, #888)",
7
7
  bg: "var(--nice-overlay-15, #88888822)"
@@ -42,8 +42,8 @@ const se = [], pe = [], xe = [], P = {
42
42
  ], Se = ({
43
43
  logs: c = se,
44
44
  streams: S = pe,
45
- totalCount: A,
46
- isLoading: y,
45
+ totalCount: T,
46
+ isLoading: b,
47
47
  savedQueries: B = xe,
48
48
  patterns: z = [],
49
49
  onQueryExecute: Q,
@@ -55,14 +55,14 @@ const se = [], pe = [], xe = [], P = {
55
55
  onTailStart: M,
56
56
  onTailStop: G,
57
57
  isTailing: w = !1,
58
- className: b,
58
+ className: y,
59
59
  style: _,
60
60
  testId: q,
61
61
  "data-testid": H
62
62
  }) => {
63
- const Y = H ?? q, { t: i } = X(), [I, l] = v(""), [W, j] = v("now-1h"), [U, ne] = v(1e3), [D, ee] = v(
63
+ const Y = H ?? q, { t: i } = X(), [D, l] = h(""), [W, j] = h("now-1h"), [U, ne] = h(1e3), [I, ee] = h(
64
64
  /* @__PURE__ */ new Set(["trace", "debug", "info", "warn", "error", "fatal"])
65
- ), [C, J] = v(/* @__PURE__ */ new Set()), [re, $] = v(null), [o, n] = v(!1), [a, m] = v(""), [h, g] = v("logs"), [x, f] = v(""), p = oe(() => c.filter((r) => !(!D.has(r.level) || x && !r.message.toLowerCase().includes(x.toLowerCase()))), [c, D, x]), T = oe(() => {
65
+ ), [C, J] = h(/* @__PURE__ */ new Set()), [re, P] = h(null), [o, n] = h(!1), [a, m] = h(""), [v, g] = h("logs"), [x, f] = h(""), p = oe(() => c.filter((r) => !(!I.has(r.level) || x && !r.message.toLowerCase().includes(x.toLowerCase()))), [c, I, x]), A = oe(() => {
66
66
  const r = {
67
67
  trace: 0,
68
68
  debug: 0,
@@ -74,7 +74,7 @@ const se = [], pe = [], xe = [], P = {
74
74
  return c.forEach((d) => r[d.level]++), r;
75
75
  }, [c]), k = () => {
76
76
  Q({
77
- query: I,
77
+ query: D,
78
78
  timeRange: { from: W, to: "now" },
79
79
  limit: U,
80
80
  direction: "backward"
@@ -90,7 +90,7 @@ const se = [], pe = [], xe = [], P = {
90
90
  return u.has(r) ? u.delete(r) : u.add(r), u;
91
91
  });
92
92
  }, ae = () => {
93
- a.trim() && (F(a, I), n(!1), m(""));
93
+ a.trim() && (F(a, D), n(!1), m(""));
94
94
  }, le = (r) => {
95
95
  if (!x)
96
96
  return r;
@@ -103,7 +103,7 @@ const se = [], pe = [], xe = [], P = {
103
103
  return /* @__PURE__ */ t(
104
104
  "div",
105
105
  {
106
- className: `nice-log-explorer ${b || ""}`,
106
+ className: `nice-log-explorer ${y || ""}`,
107
107
  style: {
108
108
  display: "flex",
109
109
  flexDirection: "column",
@@ -128,7 +128,7 @@ const se = [], pe = [], xe = [], P = {
128
128
  "input",
129
129
  {
130
130
  type: "text",
131
- value: I,
131
+ value: D,
132
132
  onChange: (r) => l(r.target.value),
133
133
  placeholder: i(
134
134
  "logExplorer.enterQueryEGService",
@@ -167,20 +167,20 @@ const se = [], pe = [], xe = [], P = {
167
167
  "button",
168
168
  {
169
169
  onClick: k,
170
- disabled: y,
170
+ disabled: b,
171
171
  style: {
172
172
  padding: "10px 24px",
173
173
  borderRadius: "8px",
174
174
  border: "none",
175
175
  background: "var(--nice-color-primary, #3b82f6)",
176
176
  color: "var(--nice-text-on-primary, #fff)",
177
- cursor: y ? "not-allowed" : "pointer",
177
+ cursor: b ? "not-allowed" : "pointer",
178
178
  fontSize: "13px",
179
179
  fontWeight: 500,
180
- opacity: y ? 0.7 : 1
180
+ opacity: b ? 0.7 : 1
181
181
  },
182
182
  children: [
183
- /* @__PURE__ */ e(s, { name: y ? "clock" : "search", size: 14, style: K }),
183
+ /* @__PURE__ */ e(s, { name: b ? "clock" : "search", size: 14, style: K }),
184
184
  i("logExplorer.search", "Search")
185
185
  ]
186
186
  }
@@ -216,15 +216,15 @@ const se = [], pe = [], xe = [], P = {
216
216
  },
217
217
  children: [
218
218
  /* @__PURE__ */ e(s, { name: w ? "stop" : "play", size: 14, style: K }),
219
- w ? "Stop" : "Tail"
219
+ w ? i("logExplorer.stop", "Stop") : i("logExplorer.tail", "Tail")
220
220
  ]
221
221
  }
222
222
  )
223
223
  ] }),
224
224
  /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
225
- /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: "Levels:" }),
226
- Object.keys(P).map((r) => {
227
- const d = P[r], u = T[r], E = D.has(r);
225
+ /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: i("logExplorer.levels", "Levels:") }),
226
+ Object.keys($).map((r) => {
227
+ const d = $[r], u = A[r], E = I.has(r);
228
228
  return /* @__PURE__ */ t(
229
229
  "button",
230
230
  {
@@ -429,8 +429,22 @@ const se = [], pe = [], xe = [], P = {
429
429
  style: { display: "flex", borderBottom: "1px solid var(--nice-border-color, #333)" },
430
430
  children: [
431
431
  [
432
- { id: "logs", icon: "file", label: `Logs (${p.length})` },
433
- { id: "patterns", icon: "flask", label: `Patterns (${z.length})` }
432
+ {
433
+ id: "logs",
434
+ icon: "file",
435
+ label: i("logExplorer.logs", "Logs ({filteredLogs})").replace(
436
+ "{filteredLogs}",
437
+ String(p.length)
438
+ )
439
+ },
440
+ {
441
+ id: "patterns",
442
+ icon: "flask",
443
+ label: i("logExplorer.patterns", "Patterns ({patterns})").replace(
444
+ "{patterns}",
445
+ String(z.length)
446
+ )
447
+ }
434
448
  ].map((r) => /* @__PURE__ */ t(
435
449
  "button",
436
450
  {
@@ -438,11 +452,11 @@ const se = [], pe = [], xe = [], P = {
438
452
  style: {
439
453
  padding: "10px 20px",
440
454
  border: "none",
441
- background: h === r.id ? "var(--nice-bg-elevated, #1e1e1e)" : "transparent",
442
- color: h === r.id ? "var(--nice-text-primary, #fff)" : "var(--nice-text-muted, #888)",
455
+ background: v === r.id ? "var(--nice-bg-elevated, #1e1e1e)" : "transparent",
456
+ color: v === r.id ? "var(--nice-text-primary, #fff)" : "var(--nice-text-muted, #888)",
443
457
  cursor: "pointer",
444
458
  fontSize: "12px",
445
- borderBottom: h === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
459
+ borderBottom: v === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
446
460
  },
447
461
  children: [
448
462
  /* @__PURE__ */ e(s, { name: r.icon, size: 12, style: K }),
@@ -489,9 +503,9 @@ const se = [], pe = [], xe = [], P = {
489
503
  ]
490
504
  }
491
505
  ),
492
- h === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
506
+ v === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
493
507
  p.map((r) => {
494
- const d = P[r.level], u = C.has(r.id);
508
+ const d = $[r.level], u = C.has(r.id);
495
509
  return /* @__PURE__ */ t(
496
510
  "div",
497
511
  {
@@ -727,7 +741,7 @@ const se = [], pe = [], xe = [], P = {
727
741
  r.id
728
742
  );
729
743
  }),
730
- p.length === 0 && !y && /* @__PURE__ */ t(
744
+ p.length === 0 && !b && /* @__PURE__ */ t(
731
745
  "div",
732
746
  {
733
747
  style: {
@@ -741,7 +755,7 @@ const se = [], pe = [], xe = [], P = {
741
755
  ]
742
756
  }
743
757
  ),
744
- y && /* @__PURE__ */ t(
758
+ b && /* @__PURE__ */ t(
745
759
  "div",
746
760
  {
747
761
  style: {
@@ -756,9 +770,9 @@ const se = [], pe = [], xe = [], P = {
756
770
  }
757
771
  )
758
772
  ] }),
759
- h === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
773
+ v === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
760
774
  z.map((r) => {
761
- const d = P[r.level];
775
+ const d = $[r.level];
762
776
  return /* @__PURE__ */ t(
763
777
  "div",
764
778
  {
@@ -781,7 +795,7 @@ const se = [], pe = [], xe = [], P = {
781
795
  },
782
796
  children: [
783
797
  /* @__PURE__ */ e("span", { style: { fontFamily: "monospace", fontSize: "12px", fontWeight: 500 }, children: r.pattern }),
784
- /* @__PURE__ */ t(
798
+ /* @__PURE__ */ e(
785
799
  "span",
786
800
  {
787
801
  style: {
@@ -790,19 +804,19 @@ const se = [], pe = [], xe = [], P = {
790
804
  borderRadius: "4px",
791
805
  fontSize: "11px"
792
806
  },
793
- children: [
794
- r.count,
795
- " occurrences"
796
- ]
807
+ children: i("logExplorer.occurrences", "{count} occurrences").replace(
808
+ "{count}",
809
+ String(r.count)
810
+ )
797
811
  }
798
812
  )
799
813
  ]
800
814
  }
801
815
  ),
802
- /* @__PURE__ */ t("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: [
803
- "Sample: ",
804
- r.samples[0]
805
- ] })
816
+ /* @__PURE__ */ e("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: i("logExplorer.sample", "Sample: {samples}").replace(
817
+ "{samples}",
818
+ String(r.samples[0])
819
+ ) })
806
820
  ]
807
821
  },
808
822
  r.id
@@ -914,7 +928,7 @@ const se = [], pe = [], xe = [], P = {
914
928
  }, V = {
915
929
  verticalAlign: "text-bottom",
916
930
  marginRight: "var(--nice-space-1, 4px)"
917
- }, ve = [
931
+ }, he = [
918
932
  { from: "now-5m", to: "now", display: "Last 5 minutes" },
919
933
  { from: "now-15m", to: "now", display: "Last 15 minutes" },
920
934
  { from: "now-1h", to: "now", display: "Last 1 hour" },
@@ -924,11 +938,11 @@ const se = [], pe = [], xe = [], P = {
924
938
  { from: "now-24h", to: "now", display: "Last 24 hours" },
925
939
  { from: "now-7d", to: "now", display: "Last 7 days" },
926
940
  { from: "now-30d", to: "now", display: "Last 30 days" }
927
- ], he = {}, fe = ({
941
+ ], ve = {}, fe = ({
928
942
  dashboard: c,
929
- metrics: S = he,
930
- alerts: A = [],
931
- timeRanges: y = ve,
943
+ metrics: S = ve,
944
+ alerts: T = [],
945
+ timeRanges: b = he,
932
946
  onTimeRangeChange: B,
933
947
  onVariableChange: z,
934
948
  onPanelEdit: Q,
@@ -940,15 +954,15 @@ const se = [], pe = [], xe = [], P = {
940
954
  onQueryExecute: M,
941
955
  onDashboardSave: G,
942
956
  onRefresh: w,
943
- isEditing: b = !1,
957
+ isEditing: y = !1,
944
958
  onEditModeToggle: _,
945
959
  className: q,
946
960
  style: H,
947
961
  testId: Y,
948
962
  "data-testid": i
949
963
  }) => {
950
- const I = i ?? Y, { t: l } = X(), [W, j] = v(!1), [U, ne] = v(!0), [D, ee] = v(null), C = A.filter((o) => o.status === "firing"), J = (o) => {
951
- var a, m, h;
964
+ const D = i ?? Y, { t: l } = X(), [W, j] = h(!1), [U, ne] = h(!0), [I, ee] = h(null), C = T.filter((o) => o.status === "firing"), J = (o) => {
965
+ var a, m, v;
952
966
  const n = (a = o.queries[0]) != null && a.expression ? S[o.queries[0].expression] : null;
953
967
  switch (o.type) {
954
968
  case "stat":
@@ -969,7 +983,7 @@ const se = [], pe = [], xe = [], P = {
969
983
  style: {
970
984
  fontSize: "48px",
971
985
  fontWeight: 600,
972
- color: n ? $(n.currentValue, o.thresholds) : "var(--nice-text-primary, #e0e0e0)"
986
+ color: n ? P(n.currentValue, o.thresholds) : "var(--nice-text-primary, #e0e0e0)"
973
987
  },
974
988
  children: (n == null ? void 0 : n.currentValue.toFixed(2)) ?? "-"
975
989
  }
@@ -989,7 +1003,7 @@ const se = [], pe = [], xe = [], P = {
989
1003
  }
990
1004
  );
991
1005
  case "gauge": {
992
- const g = (n == null ? void 0 : n.currentValue) ?? 0, x = ((h = (m = o.thresholds) == null ? void 0 : m[o.thresholds.length - 1]) == null ? void 0 : h.value) ?? 100, f = Math.min(g / x * 100, 100);
1006
+ const g = (n == null ? void 0 : n.currentValue) ?? 0, x = ((v = (m = o.thresholds) == null ? void 0 : m[o.thresholds.length - 1]) == null ? void 0 : v.value) ?? 100, f = Math.min(g / x * 100, 100);
993
1007
  return /* @__PURE__ */ e(
994
1008
  "div",
995
1009
  {
@@ -1015,7 +1029,7 @@ const se = [], pe = [], xe = [], P = {
1015
1029
  {
1016
1030
  d: "M 10 50 A 40 40 0 0 1 90 50",
1017
1031
  fill: "none",
1018
- stroke: $(g, o.thresholds),
1032
+ stroke: P(g, o.thresholds),
1019
1033
  strokeWidth: "8",
1020
1034
  strokeDasharray: `${f * 1.26} 126`
1021
1035
  }
@@ -1105,7 +1119,7 @@ const se = [], pe = [], xe = [], P = {
1105
1119
  },
1106
1120
  children: o.queries.map((g, x) => {
1107
1121
  var k, R;
1108
- const f = S[g.expression], p = (f == null ? void 0 : f.currentValue) ?? 0, T = ((R = (k = o.thresholds) == null ? void 0 : k[o.thresholds.length - 1]) == null ? void 0 : R.value) ?? 100;
1122
+ const f = S[g.expression], p = (f == null ? void 0 : f.currentValue) ?? 0, A = ((R = (k = o.thresholds) == null ? void 0 : k[o.thresholds.length - 1]) == null ? void 0 : R.value) ?? 100;
1109
1123
  return /* @__PURE__ */ t("div", { style: { marginBottom: "8px" }, children: [
1110
1124
  /* @__PURE__ */ t(
1111
1125
  "div",
@@ -1136,8 +1150,8 @@ const se = [], pe = [], xe = [], P = {
1136
1150
  {
1137
1151
  style: {
1138
1152
  height: "100%",
1139
- width: `${p / T * 100}%`,
1140
- background: $(p, o.thresholds),
1153
+ width: `${p / A * 100}%`,
1154
+ background: P(p, o.thresholds),
1141
1155
  borderRadius: "4px"
1142
1156
  }
1143
1157
  }
@@ -1169,8 +1183,8 @@ const se = [], pe = [], xe = [], P = {
1169
1183
  children: l("metricsDashboard.noData", "No data")
1170
1184
  }
1171
1185
  );
1172
- const m = a.map((p) => p.value), h = Math.min(...m), x = Math.max(...m) - h || 1, f = a.map((p, T) => {
1173
- const k = T / (a.length - 1) * 100, R = 100 - (p.value - h) / x * 80;
1186
+ const m = a.map((p) => p.value), v = Math.min(...m), x = Math.max(...m) - v || 1, f = a.map((p, A) => {
1187
+ const k = A / (a.length - 1) * 100, R = 100 - (p.value - v) / x * 80;
1174
1188
  return `${k},${R}`;
1175
1189
  }).join(" ");
1176
1190
  return /* @__PURE__ */ t(
@@ -1211,7 +1225,7 @@ const se = [], pe = [], xe = [], P = {
1211
1225
  ]
1212
1226
  }
1213
1227
  );
1214
- }, $ = (o, n) => {
1228
+ }, P = (o, n) => {
1215
1229
  if (!n || n.length === 0)
1216
1230
  return "var(--nice-color-primary, #3b82f6)";
1217
1231
  for (let a = n.length - 1; a >= 0; a--)
@@ -1231,7 +1245,7 @@ const se = [], pe = [], xe = [], P = {
1231
1245
  color: "var(--nice-text-primary, #e0e0e0)",
1232
1246
  ...H
1233
1247
  },
1234
- "data-testid": I,
1248
+ "data-testid": D,
1235
1249
  children: [
1236
1250
  /* @__PURE__ */ t(
1237
1251
  "div",
@@ -1276,7 +1290,7 @@ const se = [], pe = [], xe = [], P = {
1276
1290
  {
1277
1291
  value: c.timeRange.display,
1278
1292
  onChange: (o) => {
1279
- const n = y.find((a) => a.display === o.target.value);
1293
+ const n = b.find((a) => a.display === o.target.value);
1280
1294
  n && B(n);
1281
1295
  },
1282
1296
  style: {
@@ -1287,7 +1301,7 @@ const se = [], pe = [], xe = [], P = {
1287
1301
  color: "var(--nice-text-primary, #fff)",
1288
1302
  fontSize: "12px"
1289
1303
  },
1290
- children: y.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
1304
+ children: b.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
1291
1305
  }
1292
1306
  ),
1293
1307
  /* @__PURE__ */ t(
@@ -1309,7 +1323,7 @@ const se = [], pe = [], xe = [], P = {
1309
1323
  ]
1310
1324
  }
1311
1325
  ),
1312
- b ? /* @__PURE__ */ t(te, { children: [
1326
+ y ? /* @__PURE__ */ t(te, { children: [
1313
1327
  /* @__PURE__ */ t(
1314
1328
  "button",
1315
1329
  {
@@ -1357,14 +1371,14 @@ const se = [], pe = [], xe = [], P = {
1357
1371
  padding: "6px 12px",
1358
1372
  borderRadius: "4px",
1359
1373
  border: "none",
1360
- background: b ? "var(--nice-color-warning, #f59e0b)" : "var(--nice-bg-tertiary, #333)",
1361
- color: b ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)",
1374
+ background: y ? "var(--nice-color-warning, #f59e0b)" : "var(--nice-bg-tertiary, #333)",
1375
+ color: y ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)",
1362
1376
  cursor: "pointer",
1363
1377
  fontSize: "12px"
1364
1378
  },
1365
1379
  children: [
1366
- /* @__PURE__ */ e(s, { name: b ? "check" : "edit", size: 14, style: V }),
1367
- b ? "Done" : "Edit"
1380
+ /* @__PURE__ */ e(s, { name: y ? "check" : "edit", size: 14, style: V }),
1381
+ y ? l("metricsDashboard.done", "Done") : l("metricsDashboard.edit", "Edit")
1368
1382
  ]
1369
1383
  }
1370
1384
  )
@@ -1443,7 +1457,7 @@ const se = [], pe = [], xe = [], P = {
1443
1457
  background: "var(--nice-bg-elevated, #252525)",
1444
1458
  borderRadius: "8px",
1445
1459
  overflow: "hidden",
1446
- border: D === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1460
+ border: I === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1447
1461
  },
1448
1462
  children: [
1449
1463
  /* @__PURE__ */ t(
@@ -1458,7 +1472,7 @@ const se = [], pe = [], xe = [], P = {
1458
1472
  },
1459
1473
  children: [
1460
1474
  /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: o.title }),
1461
- b && /* @__PURE__ */ t(te, { children: [
1475
+ y && /* @__PURE__ */ t(te, { children: [
1462
1476
  /* @__PURE__ */ e(
1463
1477
  "button",
1464
1478
  {
@@ -1552,11 +1566,10 @@ const se = [], pe = [], xe = [], P = {
1552
1566
  borderBottom: "1px solid var(--nice-border-color, #333)"
1553
1567
  },
1554
1568
  children: [
1555
- /* @__PURE__ */ t("span", { style: { fontWeight: 600 }, children: [
1556
- "Active Alerts (",
1557
- C.length,
1558
- ")"
1559
- ] }),
1569
+ /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: l("metricsDashboard.activeAlerts", "Active Alerts ({firingAlerts})").replace(
1570
+ "{firingAlerts}",
1571
+ String(C.length)
1572
+ ) }),
1560
1573
  /* @__PURE__ */ e(
1561
1574
  "button",
1562
1575
  {
@@ -1575,7 +1588,7 @@ const se = [], pe = [], xe = [], P = {
1575
1588
  }
1576
1589
  ),
1577
1590
  /* @__PURE__ */ t("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
1578
- A.map((o) => {
1591
+ T.map((o) => {
1579
1592
  const n = ge[o.severity];
1580
1593
  return /* @__PURE__ */ t(
1581
1594
  "div",
@@ -1636,15 +1649,15 @@ const se = [], pe = [], xe = [], P = {
1636
1649
  color: "var(--nice-text-muted, #666)"
1637
1650
  },
1638
1651
  children: [
1639
- /* @__PURE__ */ t("span", { children: [
1640
- "Value: ",
1641
- o.value
1642
- ] }),
1652
+ /* @__PURE__ */ e("span", { children: l("metricsDashboard.value2", "Value: {value}").replace(
1653
+ "{value}",
1654
+ String(o.value)
1655
+ ) }),
1643
1656
  /* @__PURE__ */ e("span", { children: "•" }),
1644
- /* @__PURE__ */ t("span", { children: [
1645
- "Threshold: ",
1646
- o.threshold
1647
- ] }),
1657
+ /* @__PURE__ */ e("span", { children: l("metricsDashboard.threshold", "Threshold: {threshold}").replace(
1658
+ "{threshold}",
1659
+ String(o.threshold)
1660
+ ) }),
1648
1661
  /* @__PURE__ */ e("span", { children: "•" }),
1649
1662
  /* @__PURE__ */ e("span", { children: new Date(o.startsAt).toLocaleString() })
1650
1663
  ]
@@ -1689,7 +1702,7 @@ const se = [], pe = [], xe = [], P = {
1689
1702
  o.id
1690
1703
  );
1691
1704
  }),
1692
- A.length === 0 && /* @__PURE__ */ e(
1705
+ T.length === 0 && /* @__PURE__ */ e(
1693
1706
  "div",
1694
1707
  {
1695
1708
  style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice2dev/ui-monitoring",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "Nice2Dev UI Monitoring - Observability React components: MetricsDashboard (Grafana-style), LogExplorer (Loki-style)",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -36,7 +36,7 @@
36
36
  "react-dom": ">=17.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@nice2dev/ui": "^1.2.1",
39
+ "@nice2dev/ui": "^1.2.2",
40
40
  "@testing-library/react": "^16.3.3",
41
41
  "@types/react": "^19.2.18",
42
42
  "@types/react-dom": "^19.2.7",