@nice2dev/ui-monitoring 1.2.1 → 1.3.0

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 +143 -123
  3. package/package.json +3 -3
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"),p=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)"}},U={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:D,isLoading:f,savedQueries:N=ae,patterns:w=[],onQueryExecute:O,onQuerySave:V,onQueryDelete:F,onStreamToggle:J,onLogClick:T,onExport:I,onTailStart:M,onTailStop:Q,isTailing:j=!1,className:b,style:A,testId:q,"data-testid":G})=>{const H=G??q,{t:n}=a.useNiceTranslation(),[R,s]=p.useState(""),[B,_]=p.useState("now-1h"),[K,ee]=p.useState(1e3),[E,X]=p.useState(new Set(["trace","debug","info","warn","error","fatal"])),[k,Y]=p.useState(new Set),[Z,W]=p.useState(null),[t,o]=p.useState(!1),[i,y]=p.useState(""),[v,g]=p.useState("logs"),[u,h]=p.useState(""),d=p.useMemo(()=>c.filter(r=>!(!E.has(r.level)||u&&!r.message.toLowerCase().includes(u.toLowerCase()))),[c,E,u]),L=p.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=()=>{O({query:R,timeRange:{from:B,to:"now"},limit:K,direction:"backward"})},z=r=>{Y(l=>{const x=new Set(l);return x.has(r)?x.delete(r):x.add(r),x})},re=r=>{X(l=>{const x=new Set(l);return x.has(r)?x.delete(r):x.add(r),x})},te=()=>{i.trim()&&(V(i,R),o(!1),y(""))},oe=r=>{if(!u)return r;const l=new RegExp(`(${u})`,"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:R,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:U}),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")})}),M&&e.jsxs("button",{onClick:j?Q:M,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:U}),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],x=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()," (",x,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:u,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=>J(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")}),N.map(r=>e.jsxs("div",{role:"button",tabIndex:0,onKeyDown:a.clickOnActivationKey,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(),F(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)),N.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: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(a.NiceIcon,{name:r.icon,size:12,style:U}),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:()=>I("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:()=>I("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=P[r.level],x=k.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{role:"button",tabIndex:0,"aria-expanded":x,onKeyDown:a.clickOnActivationKey,onClick:()=>z(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:x?"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)}})]}),x&&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...")})]})]}),v==="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:D=[],timeRanges:f=xe,onTimeRangeChange:N,onVariableChange:w,onPanelEdit:O,onPanelAdd:V,onPanelRemove:F,onPanelMove:J,onAlertAcknowledge:T,onAlertSilence:I,onQueryExecute:M,onDashboardSave:Q,onRefresh:j,isEditing:b=!1,onEditModeToggle:A,className:q,style:G,testId:H,"data-testid":n})=>{const R=n??H,{t:s}=a.useNiceTranslation(),[B,_]=p.useState(!1),[K,ee]=p.useState(!0),[E,X]=p.useState(null),k=D.filter(t=>t.status==="firing"),Y=t=>{var i,y,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,u=((v=(y=t.thresholds)==null?void 0:y[t.thresholds.length-1])==null?void 0:v.value)??100,h=Math.min(g/u*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: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,u)=>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]})]},u))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((g,u)=>{var S,z;const h=m[g.expression],d=(h==null?void 0:h.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"}})})]},u)})});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),v=Math.min(...y),u=Math.max(...y)-v||1,h=i.map((d,L)=>{const S=L/(i.length-1)*100,z=100-(d.value-v)/u*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":R,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&&N(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:V,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:Q,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&&K&&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:()=>O(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:()=>F(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:Y(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:[D.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")}),I&&e.jsx("button",{onClick:()=>I(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)}),D.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
- 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 = {
2
+ import { useNiceTranslation as X, NiceIcon as s, clickOnActivationKey as oe, NiceEmpty as se } from "@nice2dev/ui";
3
+ import { useState as h, useMemo as ne } from "react";
4
+ const pe = [], xe = [], ue = [], $ = {
5
5
  trace: {
6
6
  color: "var(--nice-text-muted, #888)",
7
7
  bg: "var(--nice-overlay-15, #88888822)"
@@ -26,10 +26,10 @@ const se = [], pe = [], xe = [], P = {
26
26
  color: "var(--nice-color-error, #dc2626)",
27
27
  bg: "color-mix(in srgb, var(--nice-color-error, #dc2626) 13%, transparent)"
28
28
  }
29
- }, K = {
29
+ }, J = {
30
30
  verticalAlign: "text-bottom",
31
31
  marginRight: "var(--nice-space-1, 4px)"
32
- }, ue = [
32
+ }, ge = [
33
33
  { label: "Last 5 min", value: "now-5m" },
34
34
  { label: "Last 15 min", value: "now-15m" },
35
35
  { label: "Last 30 min", value: "now-30m" },
@@ -39,12 +39,12 @@ const se = [], pe = [], xe = [], P = {
39
39
  { label: "Last 12 hours", value: "now-12h" },
40
40
  { label: "Last 24 hours", value: "now-24h" },
41
41
  { label: "Last 7 days", value: "now-7d" }
42
- ], Se = ({
43
- logs: c = se,
44
- streams: S = pe,
45
- totalCount: A,
46
- isLoading: y,
47
- savedQueries: B = xe,
42
+ ], we = ({
43
+ logs: c = pe,
44
+ streams: S = xe,
45
+ totalCount: T,
46
+ isLoading: b,
47
+ savedQueries: B = ue,
48
48
  patterns: z = [],
49
49
  onQueryExecute: Q,
50
50
  onQuerySave: F,
@@ -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"), [K, ie] = 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, U] = h(/* @__PURE__ */ new Set()), [re, P] = h(null), [o, n] = h(!1), [a, m] = h(""), [v, g] = h("logs"), [u, f] = h(""), p = ne(() => c.filter((r) => !(!I.has(r.level) || u && !r.message.toLowerCase().includes(u.toLowerCase()))), [c, I, u]), A = ne(() => {
66
66
  const r = {
67
67
  trace: 0,
68
68
  debug: 0,
@@ -74,27 +74,27 @@ 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
- limit: U,
79
+ limit: K,
80
80
  direction: "backward"
81
81
  });
82
82
  }, R = (r) => {
83
- J((d) => {
84
- const u = new Set(d);
85
- return u.has(r) ? u.delete(r) : u.add(r), u;
83
+ U((d) => {
84
+ const x = new Set(d);
85
+ return x.has(r) ? x.delete(r) : x.add(r), x;
86
86
  });
87
- }, ie = (r) => {
87
+ }, ae = (r) => {
88
88
  ee((d) => {
89
- const u = new Set(d);
90
- return u.has(r) ? u.delete(r) : u.add(r), u;
89
+ const x = new Set(d);
90
+ return x.has(r) ? x.delete(r) : x.add(r), x;
91
91
  });
92
- }, ae = () => {
93
- a.trim() && (F(a, I), n(!1), m(""));
94
- }, le = (r) => {
95
- if (!x)
92
+ }, le = () => {
93
+ a.trim() && (F(a, D), n(!1), m(""));
94
+ }, de = (r) => {
95
+ if (!u)
96
96
  return r;
97
- const d = new RegExp(`(${x})`, "gi");
97
+ const d = new RegExp(`(${u})`, "gi");
98
98
  return r.replace(
99
99
  d,
100
100
  '<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>'
@@ -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",
@@ -160,27 +160,27 @@ const se = [], pe = [], xe = [], P = {
160
160
  color: "var(--nice-text-primary, #fff)",
161
161
  fontSize: "12px"
162
162
  },
163
- children: ue.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
163
+ children: ge.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
164
164
  }
165
165
  ),
166
166
  /* @__PURE__ */ t(
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: J }),
184
184
  i("logExplorer.search", "Search")
185
185
  ]
186
186
  }
@@ -215,20 +215,20 @@ const se = [], pe = [], xe = [], P = {
215
215
  fontSize: "12px"
216
216
  },
217
217
  children: [
218
- /* @__PURE__ */ e(s, { name: w ? "stop" : "play", size: 14, style: K }),
219
- w ? "Stop" : "Tail"
218
+ /* @__PURE__ */ e(s, { name: w ? "stop" : "play", size: 14, style: J }),
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], x = A[r], E = I.has(r);
228
228
  return /* @__PURE__ */ t(
229
229
  "button",
230
230
  {
231
- onClick: () => ie(r),
231
+ onClick: () => ae(r),
232
232
  style: {
233
233
  display: "flex",
234
234
  alignItems: "center",
@@ -245,7 +245,7 @@ const se = [], pe = [], xe = [], P = {
245
245
  children: [
246
246
  r.toUpperCase(),
247
247
  " (",
248
- u,
248
+ x,
249
249
  ")"
250
250
  ]
251
251
  },
@@ -257,7 +257,7 @@ const se = [], pe = [], xe = [], P = {
257
257
  "input",
258
258
  {
259
259
  type: "text",
260
- value: x,
260
+ value: u,
261
261
  onChange: (r) => f(r.target.value),
262
262
  placeholder: i("logExplorer.filterResults", "Filter results..."),
263
263
  style: {
@@ -363,6 +363,9 @@ const se = [], pe = [], xe = [], P = {
363
363
  B.map((r) => /* @__PURE__ */ t(
364
364
  "div",
365
365
  {
366
+ role: "button",
367
+ tabIndex: 0,
368
+ onKeyDown: oe,
366
369
  style: {
367
370
  display: "flex",
368
371
  alignItems: "center",
@@ -429,8 +432,22 @@ const se = [], pe = [], xe = [], P = {
429
432
  style: { display: "flex", borderBottom: "1px solid var(--nice-border-color, #333)" },
430
433
  children: [
431
434
  [
432
- { id: "logs", icon: "file", label: `Logs (${p.length})` },
433
- { id: "patterns", icon: "flask", label: `Patterns (${z.length})` }
435
+ {
436
+ id: "logs",
437
+ icon: "file",
438
+ label: i("logExplorer.logs", "Logs ({filteredLogs})").replace(
439
+ "{filteredLogs}",
440
+ String(p.length)
441
+ )
442
+ },
443
+ {
444
+ id: "patterns",
445
+ icon: "flask",
446
+ label: i("logExplorer.patterns", "Patterns ({patterns})").replace(
447
+ "{patterns}",
448
+ String(z.length)
449
+ )
450
+ }
434
451
  ].map((r) => /* @__PURE__ */ t(
435
452
  "button",
436
453
  {
@@ -438,14 +455,14 @@ const se = [], pe = [], xe = [], P = {
438
455
  style: {
439
456
  padding: "10px 20px",
440
457
  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)",
458
+ background: v === r.id ? "var(--nice-bg-elevated, #1e1e1e)" : "transparent",
459
+ color: v === r.id ? "var(--nice-text-primary, #fff)" : "var(--nice-text-muted, #888)",
443
460
  cursor: "pointer",
444
461
  fontSize: "12px",
445
- borderBottom: h === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
462
+ borderBottom: v === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
446
463
  },
447
464
  children: [
448
- /* @__PURE__ */ e(s, { name: r.icon, size: 12, style: K }),
465
+ /* @__PURE__ */ e(s, { name: r.icon, size: 12, style: J }),
449
466
  r.label
450
467
  ]
451
468
  },
@@ -489,9 +506,9 @@ const se = [], pe = [], xe = [], P = {
489
506
  ]
490
507
  }
491
508
  ),
492
- h === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
509
+ v === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
493
510
  p.map((r) => {
494
- const d = P[r.level], u = C.has(r.id);
511
+ const d = $[r.level], x = C.has(r.id);
495
512
  return /* @__PURE__ */ t(
496
513
  "div",
497
514
  {
@@ -500,6 +517,10 @@ const se = [], pe = [], xe = [], P = {
500
517
  /* @__PURE__ */ t(
501
518
  "div",
502
519
  {
520
+ role: "button",
521
+ tabIndex: 0,
522
+ "aria-expanded": x,
523
+ onKeyDown: oe,
503
524
  onClick: () => R(r.id),
504
525
  style: {
505
526
  display: "flex",
@@ -507,7 +528,7 @@ const se = [], pe = [], xe = [], P = {
507
528
  gap: "8px",
508
529
  padding: "6px 12px",
509
530
  cursor: "pointer",
510
- background: u ? "var(--nice-bg-elevated, #252525)" : "transparent"
531
+ background: x ? "var(--nice-bg-elevated, #252525)" : "transparent"
511
532
  },
512
533
  children: [
513
534
  /* @__PURE__ */ e(
@@ -556,13 +577,13 @@ const se = [], pe = [], xe = [], P = {
556
577
  "span",
557
578
  {
558
579
  style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
559
- dangerouslySetInnerHTML: { __html: le(r.message) }
580
+ dangerouslySetInnerHTML: { __html: de(r.message) }
560
581
  }
561
582
  )
562
583
  ]
563
584
  }
564
585
  ),
565
- u && /* @__PURE__ */ t(
586
+ x && /* @__PURE__ */ t(
566
587
  "div",
567
588
  {
568
589
  style: {
@@ -638,7 +659,7 @@ const se = [], pe = [], xe = [], P = {
638
659
  children: i("logExplorer.attributes", "Attributes")
639
660
  }
640
661
  ),
641
- /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([E, de]) => /* @__PURE__ */ t(
662
+ /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([E, ce]) => /* @__PURE__ */ t(
642
663
  "span",
643
664
  {
644
665
  style: {
@@ -650,7 +671,7 @@ const se = [], pe = [], xe = [], P = {
650
671
  children: [
651
672
  E,
652
673
  "=",
653
- String(de)
674
+ String(ce)
654
675
  ]
655
676
  },
656
677
  E
@@ -727,7 +748,7 @@ const se = [], pe = [], xe = [], P = {
727
748
  r.id
728
749
  );
729
750
  }),
730
- p.length === 0 && !y && /* @__PURE__ */ t(
751
+ p.length === 0 && !b && /* @__PURE__ */ t(
731
752
  "div",
732
753
  {
733
754
  style: {
@@ -741,7 +762,7 @@ const se = [], pe = [], xe = [], P = {
741
762
  ]
742
763
  }
743
764
  ),
744
- y && /* @__PURE__ */ t(
765
+ b && /* @__PURE__ */ t(
745
766
  "div",
746
767
  {
747
768
  style: {
@@ -756,9 +777,9 @@ const se = [], pe = [], xe = [], P = {
756
777
  }
757
778
  )
758
779
  ] }),
759
- h === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
780
+ v === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
760
781
  z.map((r) => {
761
- const d = P[r.level];
782
+ const d = $[r.level];
762
783
  return /* @__PURE__ */ t(
763
784
  "div",
764
785
  {
@@ -781,7 +802,7 @@ const se = [], pe = [], xe = [], P = {
781
802
  },
782
803
  children: [
783
804
  /* @__PURE__ */ e("span", { style: { fontFamily: "monospace", fontSize: "12px", fontWeight: 500 }, children: r.pattern }),
784
- /* @__PURE__ */ t(
805
+ /* @__PURE__ */ e(
785
806
  "span",
786
807
  {
787
808
  style: {
@@ -790,19 +811,19 @@ const se = [], pe = [], xe = [], P = {
790
811
  borderRadius: "4px",
791
812
  fontSize: "11px"
792
813
  },
793
- children: [
794
- r.count,
795
- " occurrences"
796
- ]
814
+ children: i("logExplorer.occurrences", "{count} occurrences").replace(
815
+ "{count}",
816
+ String(r.count)
817
+ )
797
818
  }
798
819
  )
799
820
  ]
800
821
  }
801
822
  ),
802
- /* @__PURE__ */ t("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: [
803
- "Sample: ",
804
- r.samples[0]
805
- ] })
823
+ /* @__PURE__ */ e("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: i("logExplorer.sample", "Sample: {samples}").replace(
824
+ "{samples}",
825
+ String(r.samples[0])
826
+ ) })
806
827
  ]
807
828
  },
808
829
  r.id
@@ -886,7 +907,7 @@ const se = [], pe = [], xe = [], P = {
886
907
  /* @__PURE__ */ e(
887
908
  "button",
888
909
  {
889
- onClick: ae,
910
+ onClick: le,
890
911
  style: {
891
912
  padding: "8px 16px",
892
913
  borderRadius: "6px",
@@ -907,7 +928,7 @@ const se = [], pe = [], xe = [], P = {
907
928
  ]
908
929
  }
909
930
  );
910
- }, ge = {
931
+ }, he = {
911
932
  critical: { color: "var(--nice-color-error, #ef4444)", icon: "error" },
912
933
  warning: { color: "var(--nice-color-warning, #f59e0b)", icon: "warning" },
913
934
  info: { color: "var(--nice-color-primary, #3b82f6)", icon: "info" }
@@ -924,11 +945,11 @@ const se = [], pe = [], xe = [], P = {
924
945
  { from: "now-24h", to: "now", display: "Last 24 hours" },
925
946
  { from: "now-7d", to: "now", display: "Last 7 days" },
926
947
  { from: "now-30d", to: "now", display: "Last 30 days" }
927
- ], he = {}, fe = ({
948
+ ], fe = {}, be = ({
928
949
  dashboard: c,
929
- metrics: S = he,
930
- alerts: A = [],
931
- timeRanges: y = ve,
950
+ metrics: S = fe,
951
+ alerts: T = [],
952
+ timeRanges: b = ve,
932
953
  onTimeRangeChange: B,
933
954
  onVariableChange: z,
934
955
  onPanelEdit: Q,
@@ -940,15 +961,15 @@ const se = [], pe = [], xe = [], P = {
940
961
  onQueryExecute: M,
941
962
  onDashboardSave: G,
942
963
  onRefresh: w,
943
- isEditing: b = !1,
964
+ isEditing: y = !1,
944
965
  onEditModeToggle: _,
945
966
  className: q,
946
967
  style: H,
947
968
  testId: Y,
948
969
  "data-testid": i
949
970
  }) => {
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;
971
+ const D = i ?? Y, { t: l } = X(), [W, j] = h(!1), [K, ie] = h(!0), [I, ee] = h(null), C = T.filter((o) => o.status === "firing"), U = (o) => {
972
+ var a, m, v;
952
973
  const n = (a = o.queries[0]) != null && a.expression ? S[o.queries[0].expression] : null;
953
974
  switch (o.type) {
954
975
  case "stat":
@@ -969,7 +990,7 @@ const se = [], pe = [], xe = [], P = {
969
990
  style: {
970
991
  fontSize: "48px",
971
992
  fontWeight: 600,
972
- color: n ? $(n.currentValue, o.thresholds) : "var(--nice-text-primary, #e0e0e0)"
993
+ color: n ? P(n.currentValue, o.thresholds) : "var(--nice-text-primary, #e0e0e0)"
973
994
  },
974
995
  children: (n == null ? void 0 : n.currentValue.toFixed(2)) ?? "-"
975
996
  }
@@ -989,7 +1010,7 @@ const se = [], pe = [], xe = [], P = {
989
1010
  }
990
1011
  );
991
1012
  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);
1013
+ const g = (n == null ? void 0 : n.currentValue) ?? 0, u = ((v = (m = o.thresholds) == null ? void 0 : m[o.thresholds.length - 1]) == null ? void 0 : v.value) ?? 100, f = Math.min(g / u * 100, 100);
993
1014
  return /* @__PURE__ */ e(
994
1015
  "div",
995
1016
  {
@@ -1015,7 +1036,7 @@ const se = [], pe = [], xe = [], P = {
1015
1036
  {
1016
1037
  d: "M 10 50 A 40 40 0 0 1 90 50",
1017
1038
  fill: "none",
1018
- stroke: $(g, o.thresholds),
1039
+ stroke: P(g, o.thresholds),
1019
1040
  strokeWidth: "8",
1020
1041
  strokeDasharray: `${f * 1.26} 126`
1021
1042
  }
@@ -1064,7 +1085,7 @@ const se = [], pe = [], xe = [], P = {
1064
1085
  }
1065
1086
  )
1066
1087
  ] }) }),
1067
- /* @__PURE__ */ e("tbody", { children: n == null ? void 0 : n.values.slice(-10).reverse().map((g, x) => /* @__PURE__ */ t("tr", { children: [
1088
+ /* @__PURE__ */ e("tbody", { children: n == null ? void 0 : n.values.slice(-10).reverse().map((g, u) => /* @__PURE__ */ t("tr", { children: [
1068
1089
  /* @__PURE__ */ e(
1069
1090
  "td",
1070
1091
  {
@@ -1090,7 +1111,7 @@ const se = [], pe = [], xe = [], P = {
1090
1111
  ]
1091
1112
  }
1092
1113
  )
1093
- ] }, x)) })
1114
+ ] }, u)) })
1094
1115
  ] }) });
1095
1116
  case "bar_gauge":
1096
1117
  return /* @__PURE__ */ e(
@@ -1103,9 +1124,9 @@ const se = [], pe = [], xe = [], P = {
1103
1124
  flexDirection: "column",
1104
1125
  justifyContent: "center"
1105
1126
  },
1106
- children: o.queries.map((g, x) => {
1127
+ children: o.queries.map((g, u) => {
1107
1128
  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;
1129
+ 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
1130
  return /* @__PURE__ */ t("div", { style: { marginBottom: "8px" }, children: [
1110
1131
  /* @__PURE__ */ t(
1111
1132
  "div",
@@ -1136,15 +1157,15 @@ const se = [], pe = [], xe = [], P = {
1136
1157
  {
1137
1158
  style: {
1138
1159
  height: "100%",
1139
- width: `${p / T * 100}%`,
1140
- background: $(p, o.thresholds),
1160
+ width: `${p / A * 100}%`,
1161
+ background: P(p, o.thresholds),
1141
1162
  borderRadius: "4px"
1142
1163
  }
1143
1164
  }
1144
1165
  )
1145
1166
  }
1146
1167
  )
1147
- ] }, x);
1168
+ ] }, u);
1148
1169
  })
1149
1170
  }
1150
1171
  );
@@ -1169,8 +1190,8 @@ const se = [], pe = [], xe = [], P = {
1169
1190
  children: l("metricsDashboard.noData", "No data")
1170
1191
  }
1171
1192
  );
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;
1193
+ const m = a.map((p) => p.value), v = Math.min(...m), u = Math.max(...m) - v || 1, f = a.map((p, A) => {
1194
+ const k = A / (a.length - 1) * 100, R = 100 - (p.value - v) / u * 80;
1174
1195
  return `${k},${R}`;
1175
1196
  }).join(" ");
1176
1197
  return /* @__PURE__ */ t(
@@ -1211,7 +1232,7 @@ const se = [], pe = [], xe = [], P = {
1211
1232
  ]
1212
1233
  }
1213
1234
  );
1214
- }, $ = (o, n) => {
1235
+ }, P = (o, n) => {
1215
1236
  if (!n || n.length === 0)
1216
1237
  return "var(--nice-color-primary, #3b82f6)";
1217
1238
  for (let a = n.length - 1; a >= 0; a--)
@@ -1231,7 +1252,7 @@ const se = [], pe = [], xe = [], P = {
1231
1252
  color: "var(--nice-text-primary, #e0e0e0)",
1232
1253
  ...H
1233
1254
  },
1234
- "data-testid": I,
1255
+ "data-testid": D,
1235
1256
  children: [
1236
1257
  /* @__PURE__ */ t(
1237
1258
  "div",
@@ -1276,7 +1297,7 @@ const se = [], pe = [], xe = [], P = {
1276
1297
  {
1277
1298
  value: c.timeRange.display,
1278
1299
  onChange: (o) => {
1279
- const n = y.find((a) => a.display === o.target.value);
1300
+ const n = b.find((a) => a.display === o.target.value);
1280
1301
  n && B(n);
1281
1302
  },
1282
1303
  style: {
@@ -1287,7 +1308,7 @@ const se = [], pe = [], xe = [], P = {
1287
1308
  color: "var(--nice-text-primary, #fff)",
1288
1309
  fontSize: "12px"
1289
1310
  },
1290
- children: y.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
1311
+ children: b.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
1291
1312
  }
1292
1313
  ),
1293
1314
  /* @__PURE__ */ t(
@@ -1309,7 +1330,7 @@ const se = [], pe = [], xe = [], P = {
1309
1330
  ]
1310
1331
  }
1311
1332
  ),
1312
- b ? /* @__PURE__ */ t(te, { children: [
1333
+ y ? /* @__PURE__ */ t(te, { children: [
1313
1334
  /* @__PURE__ */ t(
1314
1335
  "button",
1315
1336
  {
@@ -1357,21 +1378,21 @@ const se = [], pe = [], xe = [], P = {
1357
1378
  padding: "6px 12px",
1358
1379
  borderRadius: "4px",
1359
1380
  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)",
1381
+ background: y ? "var(--nice-color-warning, #f59e0b)" : "var(--nice-bg-tertiary, #333)",
1382
+ color: y ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)",
1362
1383
  cursor: "pointer",
1363
1384
  fontSize: "12px"
1364
1385
  },
1365
1386
  children: [
1366
- /* @__PURE__ */ e(s, { name: b ? "check" : "edit", size: 14, style: V }),
1367
- b ? "Done" : "Edit"
1387
+ /* @__PURE__ */ e(s, { name: y ? "check" : "edit", size: 14, style: V }),
1388
+ y ? l("metricsDashboard.done", "Done") : l("metricsDashboard.edit", "Edit")
1368
1389
  ]
1369
1390
  }
1370
1391
  )
1371
1392
  ]
1372
1393
  }
1373
1394
  ),
1374
- c.variables.length > 0 && U && /* @__PURE__ */ e(
1395
+ c.variables.length > 0 && K && /* @__PURE__ */ e(
1375
1396
  "div",
1376
1397
  {
1377
1398
  style: {
@@ -1443,7 +1464,7 @@ const se = [], pe = [], xe = [], P = {
1443
1464
  background: "var(--nice-bg-elevated, #252525)",
1444
1465
  borderRadius: "8px",
1445
1466
  overflow: "hidden",
1446
- border: D === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1467
+ border: I === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1447
1468
  },
1448
1469
  children: [
1449
1470
  /* @__PURE__ */ t(
@@ -1458,7 +1479,7 @@ const se = [], pe = [], xe = [], P = {
1458
1479
  },
1459
1480
  children: [
1460
1481
  /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: o.title }),
1461
- b && /* @__PURE__ */ t(te, { children: [
1482
+ y && /* @__PURE__ */ t(te, { children: [
1462
1483
  /* @__PURE__ */ e(
1463
1484
  "button",
1464
1485
  {
@@ -1511,7 +1532,7 @@ const se = [], pe = [], xe = [], P = {
1511
1532
  ]
1512
1533
  }
1513
1534
  ),
1514
- /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: J(o) })
1535
+ /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: U(o) })
1515
1536
  ]
1516
1537
  },
1517
1538
  o.id
@@ -1552,11 +1573,10 @@ const se = [], pe = [], xe = [], P = {
1552
1573
  borderBottom: "1px solid var(--nice-border-color, #333)"
1553
1574
  },
1554
1575
  children: [
1555
- /* @__PURE__ */ t("span", { style: { fontWeight: 600 }, children: [
1556
- "Active Alerts (",
1557
- C.length,
1558
- ")"
1559
- ] }),
1576
+ /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: l("metricsDashboard.activeAlerts", "Active Alerts ({firingAlerts})").replace(
1577
+ "{firingAlerts}",
1578
+ String(C.length)
1579
+ ) }),
1560
1580
  /* @__PURE__ */ e(
1561
1581
  "button",
1562
1582
  {
@@ -1575,8 +1595,8 @@ const se = [], pe = [], xe = [], P = {
1575
1595
  }
1576
1596
  ),
1577
1597
  /* @__PURE__ */ t("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
1578
- A.map((o) => {
1579
- const n = ge[o.severity];
1598
+ T.map((o) => {
1599
+ const n = he[o.severity];
1580
1600
  return /* @__PURE__ */ t(
1581
1601
  "div",
1582
1602
  {
@@ -1636,15 +1656,15 @@ const se = [], pe = [], xe = [], P = {
1636
1656
  color: "var(--nice-text-muted, #666)"
1637
1657
  },
1638
1658
  children: [
1639
- /* @__PURE__ */ t("span", { children: [
1640
- "Value: ",
1641
- o.value
1642
- ] }),
1659
+ /* @__PURE__ */ e("span", { children: l("metricsDashboard.value2", "Value: {value}").replace(
1660
+ "{value}",
1661
+ String(o.value)
1662
+ ) }),
1643
1663
  /* @__PURE__ */ e("span", { children: "•" }),
1644
- /* @__PURE__ */ t("span", { children: [
1645
- "Threshold: ",
1646
- o.threshold
1647
- ] }),
1664
+ /* @__PURE__ */ e("span", { children: l("metricsDashboard.threshold", "Threshold: {threshold}").replace(
1665
+ "{threshold}",
1666
+ String(o.threshold)
1667
+ ) }),
1648
1668
  /* @__PURE__ */ e("span", { children: "•" }),
1649
1669
  /* @__PURE__ */ e("span", { children: new Date(o.startsAt).toLocaleString() })
1650
1670
  ]
@@ -1689,7 +1709,7 @@ const se = [], pe = [], xe = [], P = {
1689
1709
  o.id
1690
1710
  );
1691
1711
  }),
1692
- A.length === 0 && /* @__PURE__ */ e(
1712
+ T.length === 0 && /* @__PURE__ */ e(
1693
1713
  "div",
1694
1714
  {
1695
1715
  style: {
@@ -1709,19 +1729,19 @@ const se = [], pe = [], xe = [], P = {
1709
1729
  ]
1710
1730
  }
1711
1731
  );
1712
- }, we = (c) => {
1732
+ }, ke = (c) => {
1713
1733
  const { t: S } = X();
1714
- return c.dashboard ? /* @__PURE__ */ e(fe, { ...c, dashboard: c.dashboard }) : /* @__PURE__ */ e(
1734
+ return c.dashboard ? /* @__PURE__ */ e(be, { ...c, dashboard: c.dashboard }) : /* @__PURE__ */ e(
1715
1735
  "div",
1716
1736
  {
1717
1737
  className: c.className,
1718
1738
  style: c.style,
1719
1739
  "data-testid": c["data-testid"] ?? c.testId,
1720
- children: /* @__PURE__ */ e(ce, { title: S("metricsDashboard.noDashboard", "No dashboard") })
1740
+ children: /* @__PURE__ */ e(se, { title: S("metricsDashboard.noDashboard", "No dashboard") })
1721
1741
  }
1722
1742
  );
1723
1743
  };
1724
1744
  export {
1725
- Se as NiceLogExplorer,
1726
- we as NiceMetricsDashboard
1745
+ we as NiceLogExplorer,
1746
+ ke as NiceMetricsDashboard
1727
1747
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice2dev/ui-monitoring",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "description": "Nice2Dev UI Monitoring - Observability React components: MetricsDashboard (Grafana-style), LogExplorer (Loki-style)",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -31,12 +31,12 @@
31
31
  },
32
32
  "dependencies": {},
33
33
  "peerDependencies": {
34
- "@nice2dev/ui": "^1.2.0",
34
+ "@nice2dev/ui": "^1.3.0",
35
35
  "react": ">=17.0.0",
36
36
  "react-dom": ">=17.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@nice2dev/ui": "^1.2.1",
39
+ "@nice2dev/ui": "^1.3.0",
40
40
  "@testing-library/react": "^16.3.3",
41
41
  "@types/react": "^19.2.18",
42
42
  "@types/react-dom": "^19.2.7",