@nice2dev/ui-monitoring 1.2.2 → 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 +65 -58
  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"),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;
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 h, useMemo as oe } from "react";
4
- const se = [], pe = [], xe = [], $ = {
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 = [], $ = {
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 = [], $ = {
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,
42
+ ], we = ({
43
+ logs: c = pe,
44
+ streams: S = xe,
45
45
  totalCount: T,
46
46
  isLoading: b,
47
- savedQueries: B = xe,
47
+ savedQueries: B = ue,
48
48
  patterns: z = [],
49
49
  onQueryExecute: Q,
50
50
  onQuerySave: F,
@@ -60,9 +60,9 @@ const se = [], pe = [], xe = [], $ = {
60
60
  testId: q,
61
61
  "data-testid": H
62
62
  }) => {
63
- const Y = H ?? q, { t: i } = X(), [D, l] = h(""), [W, j] = h("now-1h"), [U, ne] = h(1e3), [I, ee] = h(
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] = 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(() => {
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,
@@ -76,25 +76,25 @@ const se = [], pe = [], xe = [], $ = {
76
76
  Q({
77
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 = () => {
92
+ }, le = () => {
93
93
  a.trim() && (F(a, D), n(!1), m(""));
94
- }, le = (r) => {
95
- if (!x)
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>'
@@ -160,7 +160,7 @@ const se = [], pe = [], xe = [], $ = {
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(
@@ -180,7 +180,7 @@ const se = [], pe = [], xe = [], $ = {
180
180
  opacity: b ? 0.7 : 1
181
181
  },
182
182
  children: [
183
- /* @__PURE__ */ e(s, { name: b ? "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,7 +215,7 @@ const se = [], pe = [], xe = [], $ = {
215
215
  fontSize: "12px"
216
216
  },
217
217
  children: [
218
- /* @__PURE__ */ e(s, { name: w ? "stop" : "play", size: 14, style: K }),
218
+ /* @__PURE__ */ e(s, { name: w ? "stop" : "play", size: 14, style: J }),
219
219
  w ? i("logExplorer.stop", "Stop") : i("logExplorer.tail", "Tail")
220
220
  ]
221
221
  }
@@ -224,11 +224,11 @@ const se = [], pe = [], xe = [], $ = {
224
224
  /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
225
225
  /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: i("logExplorer.levels", "Levels:") }),
226
226
  Object.keys($).map((r) => {
227
- const d = $[r], u = A[r], E = I.has(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 = [], $ = {
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 = [], $ = {
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 = [], $ = {
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",
@@ -459,7 +462,7 @@ const se = [], pe = [], xe = [], $ = {
459
462
  borderBottom: v === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
460
463
  },
461
464
  children: [
462
- /* @__PURE__ */ e(s, { name: r.icon, size: 12, style: K }),
465
+ /* @__PURE__ */ e(s, { name: r.icon, size: 12, style: J }),
463
466
  r.label
464
467
  ]
465
468
  },
@@ -505,7 +508,7 @@ const se = [], pe = [], xe = [], $ = {
505
508
  ),
506
509
  v === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
507
510
  p.map((r) => {
508
- const d = $[r.level], u = C.has(r.id);
511
+ const d = $[r.level], x = C.has(r.id);
509
512
  return /* @__PURE__ */ t(
510
513
  "div",
511
514
  {
@@ -514,6 +517,10 @@ const se = [], pe = [], xe = [], $ = {
514
517
  /* @__PURE__ */ t(
515
518
  "div",
516
519
  {
520
+ role: "button",
521
+ tabIndex: 0,
522
+ "aria-expanded": x,
523
+ onKeyDown: oe,
517
524
  onClick: () => R(r.id),
518
525
  style: {
519
526
  display: "flex",
@@ -521,7 +528,7 @@ const se = [], pe = [], xe = [], $ = {
521
528
  gap: "8px",
522
529
  padding: "6px 12px",
523
530
  cursor: "pointer",
524
- background: u ? "var(--nice-bg-elevated, #252525)" : "transparent"
531
+ background: x ? "var(--nice-bg-elevated, #252525)" : "transparent"
525
532
  },
526
533
  children: [
527
534
  /* @__PURE__ */ e(
@@ -570,13 +577,13 @@ const se = [], pe = [], xe = [], $ = {
570
577
  "span",
571
578
  {
572
579
  style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
573
- dangerouslySetInnerHTML: { __html: le(r.message) }
580
+ dangerouslySetInnerHTML: { __html: de(r.message) }
574
581
  }
575
582
  )
576
583
  ]
577
584
  }
578
585
  ),
579
- u && /* @__PURE__ */ t(
586
+ x && /* @__PURE__ */ t(
580
587
  "div",
581
588
  {
582
589
  style: {
@@ -652,7 +659,7 @@ const se = [], pe = [], xe = [], $ = {
652
659
  children: i("logExplorer.attributes", "Attributes")
653
660
  }
654
661
  ),
655
- /* @__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(
656
663
  "span",
657
664
  {
658
665
  style: {
@@ -664,7 +671,7 @@ const se = [], pe = [], xe = [], $ = {
664
671
  children: [
665
672
  E,
666
673
  "=",
667
- String(de)
674
+ String(ce)
668
675
  ]
669
676
  },
670
677
  E
@@ -900,7 +907,7 @@ const se = [], pe = [], xe = [], $ = {
900
907
  /* @__PURE__ */ e(
901
908
  "button",
902
909
  {
903
- onClick: ae,
910
+ onClick: le,
904
911
  style: {
905
912
  padding: "8px 16px",
906
913
  borderRadius: "6px",
@@ -921,14 +928,14 @@ const se = [], pe = [], xe = [], $ = {
921
928
  ]
922
929
  }
923
930
  );
924
- }, ge = {
931
+ }, he = {
925
932
  critical: { color: "var(--nice-color-error, #ef4444)", icon: "error" },
926
933
  warning: { color: "var(--nice-color-warning, #f59e0b)", icon: "warning" },
927
934
  info: { color: "var(--nice-color-primary, #3b82f6)", icon: "info" }
928
935
  }, V = {
929
936
  verticalAlign: "text-bottom",
930
937
  marginRight: "var(--nice-space-1, 4px)"
931
- }, he = [
938
+ }, ve = [
932
939
  { from: "now-5m", to: "now", display: "Last 5 minutes" },
933
940
  { from: "now-15m", to: "now", display: "Last 15 minutes" },
934
941
  { from: "now-1h", to: "now", display: "Last 1 hour" },
@@ -938,11 +945,11 @@ const se = [], pe = [], xe = [], $ = {
938
945
  { from: "now-24h", to: "now", display: "Last 24 hours" },
939
946
  { from: "now-7d", to: "now", display: "Last 7 days" },
940
947
  { from: "now-30d", to: "now", display: "Last 30 days" }
941
- ], ve = {}, fe = ({
948
+ ], fe = {}, be = ({
942
949
  dashboard: c,
943
- metrics: S = ve,
950
+ metrics: S = fe,
944
951
  alerts: T = [],
945
- timeRanges: b = he,
952
+ timeRanges: b = ve,
946
953
  onTimeRangeChange: B,
947
954
  onVariableChange: z,
948
955
  onPanelEdit: Q,
@@ -961,7 +968,7 @@ const se = [], pe = [], xe = [], $ = {
961
968
  testId: Y,
962
969
  "data-testid": i
963
970
  }) => {
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) => {
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) => {
965
972
  var a, m, v;
966
973
  const n = (a = o.queries[0]) != null && a.expression ? S[o.queries[0].expression] : null;
967
974
  switch (o.type) {
@@ -1003,7 +1010,7 @@ const se = [], pe = [], xe = [], $ = {
1003
1010
  }
1004
1011
  );
1005
1012
  case "gauge": {
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);
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);
1007
1014
  return /* @__PURE__ */ e(
1008
1015
  "div",
1009
1016
  {
@@ -1078,7 +1085,7 @@ const se = [], pe = [], xe = [], $ = {
1078
1085
  }
1079
1086
  )
1080
1087
  ] }) }),
1081
- /* @__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: [
1082
1089
  /* @__PURE__ */ e(
1083
1090
  "td",
1084
1091
  {
@@ -1104,7 +1111,7 @@ const se = [], pe = [], xe = [], $ = {
1104
1111
  ]
1105
1112
  }
1106
1113
  )
1107
- ] }, x)) })
1114
+ ] }, u)) })
1108
1115
  ] }) });
1109
1116
  case "bar_gauge":
1110
1117
  return /* @__PURE__ */ e(
@@ -1117,7 +1124,7 @@ const se = [], pe = [], xe = [], $ = {
1117
1124
  flexDirection: "column",
1118
1125
  justifyContent: "center"
1119
1126
  },
1120
- children: o.queries.map((g, x) => {
1127
+ children: o.queries.map((g, u) => {
1121
1128
  var k, R;
1122
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;
1123
1130
  return /* @__PURE__ */ t("div", { style: { marginBottom: "8px" }, children: [
@@ -1158,7 +1165,7 @@ const se = [], pe = [], xe = [], $ = {
1158
1165
  )
1159
1166
  }
1160
1167
  )
1161
- ] }, x);
1168
+ ] }, u);
1162
1169
  })
1163
1170
  }
1164
1171
  );
@@ -1183,8 +1190,8 @@ const se = [], pe = [], xe = [], $ = {
1183
1190
  children: l("metricsDashboard.noData", "No data")
1184
1191
  }
1185
1192
  );
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;
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;
1188
1195
  return `${k},${R}`;
1189
1196
  }).join(" ");
1190
1197
  return /* @__PURE__ */ t(
@@ -1385,7 +1392,7 @@ const se = [], pe = [], xe = [], $ = {
1385
1392
  ]
1386
1393
  }
1387
1394
  ),
1388
- c.variables.length > 0 && U && /* @__PURE__ */ e(
1395
+ c.variables.length > 0 && K && /* @__PURE__ */ e(
1389
1396
  "div",
1390
1397
  {
1391
1398
  style: {
@@ -1525,7 +1532,7 @@ const se = [], pe = [], xe = [], $ = {
1525
1532
  ]
1526
1533
  }
1527
1534
  ),
1528
- /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: J(o) })
1535
+ /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: U(o) })
1529
1536
  ]
1530
1537
  },
1531
1538
  o.id
@@ -1589,7 +1596,7 @@ const se = [], pe = [], xe = [], $ = {
1589
1596
  ),
1590
1597
  /* @__PURE__ */ t("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
1591
1598
  T.map((o) => {
1592
- const n = ge[o.severity];
1599
+ const n = he[o.severity];
1593
1600
  return /* @__PURE__ */ t(
1594
1601
  "div",
1595
1602
  {
@@ -1722,19 +1729,19 @@ const se = [], pe = [], xe = [], $ = {
1722
1729
  ]
1723
1730
  }
1724
1731
  );
1725
- }, we = (c) => {
1732
+ }, ke = (c) => {
1726
1733
  const { t: S } = X();
1727
- 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(
1728
1735
  "div",
1729
1736
  {
1730
1737
  className: c.className,
1731
1738
  style: c.style,
1732
1739
  "data-testid": c["data-testid"] ?? c.testId,
1733
- children: /* @__PURE__ */ e(ce, { title: S("metricsDashboard.noDashboard", "No dashboard") })
1740
+ children: /* @__PURE__ */ e(se, { title: S("metricsDashboard.noDashboard", "No dashboard") })
1734
1741
  }
1735
1742
  );
1736
1743
  };
1737
1744
  export {
1738
- Se as NiceLogExplorer,
1739
- we as NiceMetricsDashboard
1745
+ we as NiceLogExplorer,
1746
+ ke as NiceMetricsDashboard
1740
1747
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice2dev/ui-monitoring",
3
- "version": "1.2.2",
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.2",
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",