@nice2dev/ui-monitoring 1.0.16 → 1.0.18

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),$={trace:{color:"var(--text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)",icon:"⋯"},debug:{color:"var(--color-accent, #8b5cf6)",bg:"#8b5cf622",icon:"🔍"},info:{color:"var(--color-primary, #3b82f6)",bg:"var(--nice-primary-tint-15, #3b82f622)",icon:"ℹ️"},warn:{color:"var(--color-warning, #f59e0b)",bg:"var(--nice-warning-tint-15, #f59e0b22)",icon:"⚠️"},error:{color:"var(--color-error, #ef4444)",bg:"var(--nice-danger-tint-15, #ef444422)",icon:"❌"},fatal:{color:"var(--color-error, #dc2626)",bg:"#dc262622",icon:"💀"}},Z=[{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"}],ee=({logs:x,streams:S,totalCount:I,isLoading:g,savedQueries:B,patterns:h=[],onQueryExecute:_,onQuerySave:E,onQueryDelete:F,onStreamToggle:q,onLogClick:T,onExport:k,onTailStart:V,onTailStop:O,isTailing:w=!1,className:b,style:A,"data-testid":P})=>{const[z,C]=a.useState(""),[N,W]=a.useState("now-1h"),[H,U]=a.useState(1e3),[R,Q]=a.useState(new Set(["trace","debug","info","warn","error","fatal"])),[y,M]=a.useState(new Set),[G,D]=a.useState(null),[t,o]=a.useState(!1),[n,v]=a.useState(""),[p,c]=a.useState("logs"),[d,u]=a.useState(""),s=a.useMemo(()=>x.filter(r=>!(!R.has(r.level)||d&&!r.message.toLowerCase().includes(d.toLowerCase()))),[x,R,d]),L=a.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return x.forEach(i=>r[i.level]++),r},[x]),f=()=>{_({query:z,timeRange:{from:N,to:"now"},limit:H,direction:"backward"})},m=r=>{M(i=>{const l=new Set(i);return l.has(r)?l.delete(r):l.add(r),l})},J=r=>{Q(i=>{const l=new Set(i);return l.has(r)?l.delete(r):l.add(r),l})},K=()=>{n.trim()&&(E(n,z),o(!1),v(""))},Y=r=>{if(!d)return r;const i=new RegExp(`(${d})`,"gi");return r.replace(i,'<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(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...A},"data-testid":P,children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"12px"},children:[e.jsx("input",{type:"text",value:z,onChange:r=>C(r.target.value),placeholder:'Enter query... e.g., {service="api"} |= "error"',onKeyDown:r=>r.key==="Enter"&&f(),style:{flex:1,padding:"10px 16px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:N,onChange:r=>W(r.target.value),style:{padding:"10px 12px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:Z.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:f,disabled:g,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:g?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:g?.7:1},children:[g?"⏳":"🔍"," Search"]}),e.jsx("button",{onClick:()=>o(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾"}),V&&e.jsx("button",{onClick:w?O:V,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:w?"var(--color-success, #22c55e)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:w?"⏹ Stop":"▶ Tail"})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:"Levels:"}),Object.keys($).map(r=>{const i=$[r],l=L[r],j=R.has(r);return e.jsxs("button",{onClick:()=>J(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:j?i.bg:"transparent",color:j?i.color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:j?1:.5},children:[r.toUpperCase()," (",l,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:d,onChange:r=>u(r.target.value),placeholder:"Filter results...",style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-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(--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(--text-muted, #888)",textTransform:"uppercase"},children:"Log Streams"}),S.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:i=>q(r.id,i.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),S.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"No streams discovered"})]}),e.jsxs("div",{style:{borderTop:"1px solid var(--border-color, #333)",padding:"12px",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--text-muted, #888)",textTransform:"uppercase"},children:"Saved Queries"}),B.map(r=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 8px",marginBottom:"4px",background:"var(--bg-elevated, #252525)",borderRadius:"4px",cursor:"pointer",fontSize:"11px"},onClick:()=>C(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:i=>{i.stopPropagation(),F(r.id)},style:{background:"none",border:"none",color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:"✕"})]},r.id)),B.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"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(--border-color, #333)"},children:[[{id:"logs",label:`📜 Logs (${s.length})`},{id:"patterns",label:`🔬 Patterns (${h.length})`}].map(r=>e.jsx("button",{onClick:()=>c(r.id),style:{padding:"10px 20px",border:"none",background:p===r.id?"var(--bg-elevated, #1e1e1e)":"transparent",color:p===r.id?"var(--bg-primary, #fff)":"var(--text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:p===r.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent"},children: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:()=>k("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"JSON"}),e.jsx("button",{onClick:()=>k("csv"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),p==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[s.map(r=>{const i=$[r.level],l=y.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>m(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:l?"var(--bg-elevated, #252525)":"transparent"},children:[e.jsx("span",{style:{color:"var(--text-muted, #666)",fontSize:"10px",minWidth:"160px"},children:new Date(r.timestamp).toISOString()}),e.jsx("span",{style:{padding:"2px 6px",borderRadius:"4px",background:i.bg,color:i.color,fontSize:"10px",fontWeight:500,minWidth:"50px",textAlign:"center"},children:r.level.toUpperCase()}),r.service&&e.jsxs("span",{style:{color:"var(--color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:Y(r.message)}})]}),l&&e.jsxs("div",{style:{padding:"12px 12px 12px 200px",background:"var(--bg-elevated, #252525)",borderTop:"1px solid var(--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(--text-muted, #888)",marginBottom:"2px"},children:"Source"}),e.jsx("div",{style:{fontSize:"11px"},children:r.source})]}),r.host&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Host"}),e.jsx("div",{style:{fontSize:"11px"},children:r.host})]}),r.traceId&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"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(--text-muted, #888)",marginBottom:"4px"},children:"Attributes"}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([j,X])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[j,"=",String(X)]},j))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"4px"},children:"Stack Trace"}),e.jsx("pre",{style:{margin:0,padding:"8px",background:"var(--bg-elevated, #1e1e1e)",borderRadius:"4px",fontSize:"10px",overflow:"auto",maxHeight:"200px",color:"var(--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(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"View Details"}),r.traceId&&e.jsx("button",{onClick:()=>C(`{traceId="${r.traceId}"}`),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"Show Trace"})]})]})]},r.id)}),s.length===0&&!g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"📭"}),e.jsx("p",{style:{marginTop:"16px"},children:"No logs match your query"})]}),g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"⏳"}),e.jsx("p",{style:{marginTop:"16px"},children:"Loading logs..."})]})]}),p==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[h.map(r=>{const i=$[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${i.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(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:[r.count," occurrences"]})]}),e.jsxs("div",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:["Sample: ",r.samples[0]]})]},r.id)}),h.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:e.jsx("p",{children:"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(--bg-elevated, #252525)",borderRadius:"12px",padding:"24px"},children:[e.jsx("h3",{style:{margin:"0 0 16px 0",fontSize:"14px"},children:"Save Query"}),e.jsx("input",{type:"text",value:n,onChange:r=>v(r.target.value),placeholder:"Query name...",style:{width:"100%",padding:"10px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-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(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Cancel"}),e.jsx("button",{onClick:K,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Save"})]})]})})]})},re={critical:{color:"var(--color-error, #ef4444)",icon:"🔴"},warning:{color:"var(--color-warning, #f59e0b)",icon:"🟡"},info:{color:"var(--color-primary, #3b82f6)",icon:"🔵"}},te=[{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"}],oe=({dashboard:x,metrics:S,alerts:I=[],timeRanges:g=te,onTimeRangeChange:B,onVariableChange:h,onPanelEdit:_,onPanelAdd:E,onPanelRemove:F,onPanelMove:q,onAlertAcknowledge:T,onAlertSilence:k,onQueryExecute:V,onDashboardSave:O,onRefresh:w,isEditing:b=!1,onEditModeToggle:A,className:P,style:z,"data-testid":C})=>{const[N,W]=a.useState(!1),[H,U]=a.useState(!0),[R,Q]=a.useState(null),y=I.filter(t=>t.status==="firing"),M=t=>{var n,v,p;const o=(n=t.queries[0])!=null&&n.expression?S[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?D(o.currentValue,t.thresholds):"var(--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(--text-muted, #888)",marginTop:"4px"},children:o.unit})]});case"gauge":{const c=(o==null?void 0:o.currentValue)??0,d=((p=(v=t.thresholds)==null?void 0:v[t.thresholds.length-1])==null?void 0:p.value)??100,u=Math.min(c/d*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-text, #333)",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:D(c,t.thresholds),strokeWidth:"8",strokeDasharray:`${u*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"var(--nice-border, #e0e0e0)",fontSize:"16",fontWeight:"600",children:c.toFixed(1)})]})})}case"timeseries":return G(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(--bg-elevated, #252525)"},children:[e.jsx("th",{style:{padding:"6px 8px",textAlign:"left",borderBottom:"1px solid var(--border-color, #333)"},children:"Time"}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--border-color, #333)"},children:"Value"})]})}),e.jsx("tbody",{children:o==null?void 0:o.values.slice(-10).reverse().map((c,d)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)"},children:new Date(c.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)",textAlign:"right"},children:[c.value.toFixed(2)," ",o.unit]})]},d))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((c,d)=>{var f,m;const u=S[c.expression],s=(u==null?void 0:u.currentValue)??0,L=((m=(f=t.thresholds)==null?void 0:f[t.thresholds.length-1])==null?void 0:m.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:c.legendFormat??c.expression}),e.jsx("span",{children:s.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${s/L*100}%`,background:D(s,t.thresholds),borderRadius:"4px"}})})]},d)})});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(--text-muted, #666)"},children:"Unsupported panel type"})}},G=(t,o)=>{const n=(o==null?void 0:o.values)??[];if(n.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--text-muted, #666)"},children:"No data"});const v=n.map(s=>s.value),p=Math.min(...v),d=Math.max(...v)-p||1,u=n.map((s,L)=>{const f=L/(n.length-1)*100,m=100-(s.value-p)/d*80;return`${f},${m}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(s=>e.jsx("line",{x1:"0",y1:s,x2:"100",y2:s,stroke:"var(--nice-text, #333)",strokeWidth:"0.5"},s)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${u} 100,100`,fill:"var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))"}):null,e.jsx("polyline",{points:u,fill:"none",stroke:"var(--nice-primary, #3b82f6)",strokeWidth:"1"})]})},D=(t,o)=>{if(!o||o.length===0)return"var(--color-primary, #3b82f6)";for(let n=o.length-1;n>=0;n--)if(t>=o[n].value)return o[n].color;return"var(--color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${P||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...z},"data-testid":C,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsx("span",{style:{fontSize:"20px"},children:"📊"}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:x.name}),e.jsx("div",{style:{flex:1}}),y.length>0&&e.jsxs("button",{onClick:()=>W(!0),style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-danger-tint-15, #ef444422)",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:["🔴 ",y.length," Alert",y.length!==1&&"s"]}),e.jsx("select",{value:x.timeRange.display,onChange:t=>{const o=g.find(n=>n.display===t.target.value);o&&B(o)},style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:g.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsx("button",{onClick:w,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"🔄 Refresh"}),b?e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:E,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"+ Add Panel"}),e.jsx("button",{onClick:O,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾 Save"})]}):null,A&&e.jsx("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:b?"var(--color-warning, #f59e0b)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:b?"✓ Done":"✏️ Edit"})]}),x.variables.length>0&&H&&e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:x.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(--text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:n=>h(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:n=>h(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px"},children:(o=t.options)==null?void 0:o.map(n=>e.jsx("option",{value:n,children:n},n))})]},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:x.panels.map(t=>e.jsxs("div",{style:{gridColumn:`span ${t.position.w}`,gridRow:`span ${t.position.h}`,background:"var(--bg-elevated, #252525)",borderRadius:"8px",overflow:"hidden",border:R===t.id?"2px solid var(--nice-primary, #3b82f6)":"1px solid var(--border-color, #333)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",padding:"8px 12px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--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:()=>_(t),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"10px"},children:"✏️"}),e.jsx("button",{onClick:()=>F(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--color-error, #ef4444)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"✕"})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:M(t)})]},t.id))})}),N&&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(--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(--border-color, #333)"},children:[e.jsxs("span",{style:{fontWeight:600},children:["Active Alerts (",y.length,")"]}),e.jsx("button",{onClick:()=>W(!1),style:{background:"none",border:"none",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:"✕"})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[I.map(t=>{const o=re[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--border-color, #333)",borderLeft:`4px solid ${o.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx("span",{children:o.icon}),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(--color-error, #ef4444)":"var(--color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--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(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Acknowledge"}),k&&e.jsx("button",{onClick:()=>k(t.id,36e5),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Silence 1h"})]})]},t.id)}),I.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--text-muted, #666)"},children:"No alerts"})]})]})})]})};exports.NiceLogExplorer=ee;exports.NiceMetricsDashboard=oe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),$={trace:{color:"var(--text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)",icon:"⋯"},debug:{color:"var(--color-accent, #8b5cf6)",bg:"#8b5cf622",icon:"🔍"},info:{color:"var(--color-primary, #3b82f6)",bg:"var(--nice-primary-tint-15, #3b82f622)",icon:"ℹ️"},warn:{color:"var(--color-warning, #f59e0b)",bg:"var(--nice-warning-tint-15, #f59e0b22)",icon:"⚠️"},error:{color:"var(--color-error, #ef4444)",bg:"var(--nice-danger-tint-15, #ef444422)",icon:"❌"},fatal:{color:"var(--color-error, #dc2626)",bg:"#dc262622",icon:"💀"}},re=[{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"}],te=({logs:x,streams:S,totalCount:I,isLoading:g,savedQueries:B,patterns:h=[],onQueryExecute:_,onQuerySave:E,onQueryDelete:F,onStreamToggle:G,onLogClick:T,onExport:k,onTailStart:V,onTailStop:O,isTailing:w=!1,className:b,style:A,testId:P,"data-testid":H})=>{const M=H??P,[z,C]=a.useState(""),[N,W]=a.useState("now-1h"),[q,K]=a.useState(1e3),[R,U]=a.useState(new Set(["trace","debug","info","warn","error","fatal"])),[y,Q]=a.useState(new Set),[J,D]=a.useState(null),[t,o]=a.useState(!1),[n,v]=a.useState(""),[p,c]=a.useState("logs"),[d,u]=a.useState(""),s=a.useMemo(()=>x.filter(r=>!(!R.has(r.level)||d&&!r.message.toLowerCase().includes(d.toLowerCase()))),[x,R,d]),L=a.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return x.forEach(i=>r[i.level]++),r},[x]),f=()=>{_({query:z,timeRange:{from:N,to:"now"},limit:q,direction:"backward"})},m=r=>{Q(i=>{const l=new Set(i);return l.has(r)?l.delete(r):l.add(r),l})},Y=r=>{U(i=>{const l=new Set(i);return l.has(r)?l.delete(r):l.add(r),l})},X=()=>{n.trim()&&(E(n,z),o(!1),v(""))},Z=r=>{if(!d)return r;const i=new RegExp(`(${d})`,"gi");return r.replace(i,'<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(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...A},"data-testid":M,children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"12px"},children:[e.jsx("input",{type:"text",value:z,onChange:r=>C(r.target.value),placeholder:'Enter query... e.g., {service="api"} |= "error"',onKeyDown:r=>r.key==="Enter"&&f(),style:{flex:1,padding:"10px 16px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:N,onChange:r=>W(r.target.value),style:{padding:"10px 12px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:re.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:f,disabled:g,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:g?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:g?.7:1},children:[g?"⏳":"🔍"," Search"]}),e.jsx("button",{onClick:()=>o(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾"}),V&&e.jsx("button",{onClick:w?O:V,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:w?"var(--color-success, #22c55e)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:w?"⏹ Stop":"▶ Tail"})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:"Levels:"}),Object.keys($).map(r=>{const i=$[r],l=L[r],j=R.has(r);return e.jsxs("button",{onClick:()=>Y(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:j?i.bg:"transparent",color:j?i.color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:j?1:.5},children:[r.toUpperCase()," (",l,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:d,onChange:r=>u(r.target.value),placeholder:"Filter results...",style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-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(--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(--text-muted, #888)",textTransform:"uppercase"},children:"Log Streams"}),S.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:i=>G(r.id,i.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),S.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"No streams discovered"})]}),e.jsxs("div",{style:{borderTop:"1px solid var(--border-color, #333)",padding:"12px",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--text-muted, #888)",textTransform:"uppercase"},children:"Saved Queries"}),B.map(r=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 8px",marginBottom:"4px",background:"var(--bg-elevated, #252525)",borderRadius:"4px",cursor:"pointer",fontSize:"11px"},onClick:()=>C(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:i=>{i.stopPropagation(),F(r.id)},style:{background:"none",border:"none",color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:"✕"})]},r.id)),B.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"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(--border-color, #333)"},children:[[{id:"logs",label:`📜 Logs (${s.length})`},{id:"patterns",label:`🔬 Patterns (${h.length})`}].map(r=>e.jsx("button",{onClick:()=>c(r.id),style:{padding:"10px 20px",border:"none",background:p===r.id?"var(--bg-elevated, #1e1e1e)":"transparent",color:p===r.id?"var(--bg-primary, #fff)":"var(--text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:p===r.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent"},children: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:()=>k("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"JSON"}),e.jsx("button",{onClick:()=>k("csv"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),p==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[s.map(r=>{const i=$[r.level],l=y.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>m(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:l?"var(--bg-elevated, #252525)":"transparent"},children:[e.jsx("span",{style:{color:"var(--text-muted, #666)",fontSize:"10px",minWidth:"160px"},children:new Date(r.timestamp).toISOString()}),e.jsx("span",{style:{padding:"2px 6px",borderRadius:"4px",background:i.bg,color:i.color,fontSize:"10px",fontWeight:500,minWidth:"50px",textAlign:"center"},children:r.level.toUpperCase()}),r.service&&e.jsxs("span",{style:{color:"var(--color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:Z(r.message)}})]}),l&&e.jsxs("div",{style:{padding:"12px 12px 12px 200px",background:"var(--bg-elevated, #252525)",borderTop:"1px solid var(--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(--text-muted, #888)",marginBottom:"2px"},children:"Source"}),e.jsx("div",{style:{fontSize:"11px"},children:r.source})]}),r.host&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Host"}),e.jsx("div",{style:{fontSize:"11px"},children:r.host})]}),r.traceId&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"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(--text-muted, #888)",marginBottom:"4px"},children:"Attributes"}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([j,ee])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[j,"=",String(ee)]},j))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"4px"},children:"Stack Trace"}),e.jsx("pre",{style:{margin:0,padding:"8px",background:"var(--bg-elevated, #1e1e1e)",borderRadius:"4px",fontSize:"10px",overflow:"auto",maxHeight:"200px",color:"var(--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(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"View Details"}),r.traceId&&e.jsx("button",{onClick:()=>C(`{traceId="${r.traceId}"}`),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"Show Trace"})]})]})]},r.id)}),s.length===0&&!g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"📭"}),e.jsx("p",{style:{marginTop:"16px"},children:"No logs match your query"})]}),g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"⏳"}),e.jsx("p",{style:{marginTop:"16px"},children:"Loading logs..."})]})]}),p==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[h.map(r=>{const i=$[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${i.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(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:[r.count," occurrences"]})]}),e.jsxs("div",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:["Sample: ",r.samples[0]]})]},r.id)}),h.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:e.jsx("p",{children:"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(--bg-elevated, #252525)",borderRadius:"12px",padding:"24px"},children:[e.jsx("h3",{style:{margin:"0 0 16px 0",fontSize:"14px"},children:"Save Query"}),e.jsx("input",{type:"text",value:n,onChange:r=>v(r.target.value),placeholder:"Query name...",style:{width:"100%",padding:"10px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-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(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Cancel"}),e.jsx("button",{onClick:X,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Save"})]})]})})]})},oe={critical:{color:"var(--color-error, #ef4444)",icon:"🔴"},warning:{color:"var(--color-warning, #f59e0b)",icon:"🟡"},info:{color:"var(--color-primary, #3b82f6)",icon:"🔵"}},ne=[{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"}],ie=({dashboard:x,metrics:S,alerts:I=[],timeRanges:g=ne,onTimeRangeChange:B,onVariableChange:h,onPanelEdit:_,onPanelAdd:E,onPanelRemove:F,onPanelMove:G,onAlertAcknowledge:T,onAlertSilence:k,onQueryExecute:V,onDashboardSave:O,onRefresh:w,isEditing:b=!1,onEditModeToggle:A,className:P,style:H,testId:M,"data-testid":z})=>{const C=z??M,[N,W]=a.useState(!1),[q,K]=a.useState(!0),[R,U]=a.useState(null),y=I.filter(t=>t.status==="firing"),Q=t=>{var n,v,p;const o=(n=t.queries[0])!=null&&n.expression?S[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?D(o.currentValue,t.thresholds):"var(--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(--text-muted, #888)",marginTop:"4px"},children:o.unit})]});case"gauge":{const c=(o==null?void 0:o.currentValue)??0,d=((p=(v=t.thresholds)==null?void 0:v[t.thresholds.length-1])==null?void 0:p.value)??100,u=Math.min(c/d*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-text, #333)",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:D(c,t.thresholds),strokeWidth:"8",strokeDasharray:`${u*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"var(--nice-border, #e0e0e0)",fontSize:"16",fontWeight:"600",children:c.toFixed(1)})]})})}case"timeseries":return J(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(--bg-elevated, #252525)"},children:[e.jsx("th",{style:{padding:"6px 8px",textAlign:"left",borderBottom:"1px solid var(--border-color, #333)"},children:"Time"}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--border-color, #333)"},children:"Value"})]})}),e.jsx("tbody",{children:o==null?void 0:o.values.slice(-10).reverse().map((c,d)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)"},children:new Date(c.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)",textAlign:"right"},children:[c.value.toFixed(2)," ",o.unit]})]},d))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((c,d)=>{var f,m;const u=S[c.expression],s=(u==null?void 0:u.currentValue)??0,L=((m=(f=t.thresholds)==null?void 0:f[t.thresholds.length-1])==null?void 0:m.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:c.legendFormat??c.expression}),e.jsx("span",{children:s.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${s/L*100}%`,background:D(s,t.thresholds),borderRadius:"4px"}})})]},d)})});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(--text-muted, #666)"},children:"Unsupported panel type"})}},J=(t,o)=>{const n=(o==null?void 0:o.values)??[];if(n.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--text-muted, #666)"},children:"No data"});const v=n.map(s=>s.value),p=Math.min(...v),d=Math.max(...v)-p||1,u=n.map((s,L)=>{const f=L/(n.length-1)*100,m=100-(s.value-p)/d*80;return`${f},${m}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(s=>e.jsx("line",{x1:"0",y1:s,x2:"100",y2:s,stroke:"var(--nice-text, #333)",strokeWidth:"0.5"},s)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${u} 100,100`,fill:"var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))"}):null,e.jsx("polyline",{points:u,fill:"none",stroke:"var(--nice-primary, #3b82f6)",strokeWidth:"1"})]})},D=(t,o)=>{if(!o||o.length===0)return"var(--color-primary, #3b82f6)";for(let n=o.length-1;n>=0;n--)if(t>=o[n].value)return o[n].color;return"var(--color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${P||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...H},"data-testid":C,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsx("span",{style:{fontSize:"20px"},children:"📊"}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:x.name}),e.jsx("div",{style:{flex:1}}),y.length>0&&e.jsxs("button",{onClick:()=>W(!0),style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-danger-tint-15, #ef444422)",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:["🔴 ",y.length," Alert",y.length!==1&&"s"]}),e.jsx("select",{value:x.timeRange.display,onChange:t=>{const o=g.find(n=>n.display===t.target.value);o&&B(o)},style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:g.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsx("button",{onClick:w,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"🔄 Refresh"}),b?e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:E,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"+ Add Panel"}),e.jsx("button",{onClick:O,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾 Save"})]}):null,A&&e.jsx("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:b?"var(--color-warning, #f59e0b)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:b?"✓ Done":"✏️ Edit"})]}),x.variables.length>0&&q&&e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:x.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(--text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:n=>h(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:n=>h(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px"},children:(o=t.options)==null?void 0:o.map(n=>e.jsx("option",{value:n,children:n},n))})]},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:x.panels.map(t=>e.jsxs("div",{style:{gridColumn:`span ${t.position.w}`,gridRow:`span ${t.position.h}`,background:"var(--bg-elevated, #252525)",borderRadius:"8px",overflow:"hidden",border:R===t.id?"2px solid var(--nice-primary, #3b82f6)":"1px solid var(--border-color, #333)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",padding:"8px 12px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--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:()=>_(t),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"10px"},children:"✏️"}),e.jsx("button",{onClick:()=>F(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--color-error, #ef4444)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"✕"})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:Q(t)})]},t.id))})}),N&&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(--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(--border-color, #333)"},children:[e.jsxs("span",{style:{fontWeight:600},children:["Active Alerts (",y.length,")"]}),e.jsx("button",{onClick:()=>W(!1),style:{background:"none",border:"none",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:"✕"})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[I.map(t=>{const o=oe[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--border-color, #333)",borderLeft:`4px solid ${o.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx("span",{children:o.icon}),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(--color-error, #ef4444)":"var(--color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--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(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Acknowledge"}),k&&e.jsx("button",{onClick:()=>k(t.id,36e5),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Silence 1h"})]})]},t.id)}),I.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--text-muted, #666)"},children:"No alerts"})]})]})})]})};exports.NiceLogExplorer=te;exports.NiceMetricsDashboard=ie;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { default as default_2 } from 'react';
-import { NiceBaseProps } from '@nice2dev/ui';
+import { NiceStandardProps } from '@nice2dev/ui';
 
 export declare interface Alert {
     id: string;
@@ -115,7 +115,7 @@ export declare type MetricType = 'gauge' | 'counter' | 'histogram' | 'summary';
 
 export declare const NiceLogExplorer: default_2.FC<NiceLogExplorerProps>;
 
-export declare interface NiceLogExplorerProps extends NiceBaseProps {
+export declare interface NiceLogExplorerProps extends NiceStandardProps {
     logs: LogEntry[];
     streams: LogStream[];
     totalCount: number;
@@ -135,7 +135,7 @@ export declare interface NiceLogExplorerProps extends NiceBaseProps {
 
 export declare const NiceMetricsDashboard: default_2.FC<NiceMetricsDashboardProps>;
 
-export declare interface NiceMetricsDashboardProps extends NiceBaseProps {
+export declare interface NiceMetricsDashboardProps extends NiceStandardProps {
     dashboard: Dashboard;
     metrics: Record<string, Metric>;
     alerts?: Alert[];

package/dist/index.mjs

@@ -1,13 +1,25 @@
-import { jsxs as t, jsx as e, Fragment as J } from "react/jsx-runtime";
-import { useState as p, useMemo as K } from "react";
+import { jsxs as t, jsx as e, Fragment as Y } from "react/jsx-runtime";
+import { useState as p, useMemo as X } from "react";
 const _ = {
   trace: { color: "var(--text-muted, #888)", bg: "var(--nice-overlay-15, #88888822)", icon: "⋯" },
   debug: { color: "var(--color-accent, #8b5cf6)", bg: "#8b5cf622", icon: "🔍" },
-  info: { color: "var(--color-primary, #3b82f6)", bg: "var(--nice-primary-tint-15, #3b82f622)", icon: "ℹ️" },
-  warn: { color: "var(--color-warning, #f59e0b)", bg: "var(--nice-warning-tint-15, #f59e0b22)", icon: "⚠️" },
-  error: { color: "var(--color-error, #ef4444)", bg: "var(--nice-danger-tint-15, #ef444422)", icon: "❌" },
+  info: {
+    color: "var(--color-primary, #3b82f6)",
+    bg: "var(--nice-primary-tint-15, #3b82f622)",
+    icon: "ℹ️"
+  },
+  warn: {
+    color: "var(--color-warning, #f59e0b)",
+    bg: "var(--nice-warning-tint-15, #f59e0b22)",
+    icon: "⚠️"
+  },
+  error: {
+    color: "var(--color-error, #ef4444)",
+    bg: "var(--nice-danger-tint-15, #ef444422)",
+    icon: "❌"
+  },
   fatal: { color: "var(--color-error, #dc2626)", bg: "#dc262622", icon: "💀" }
-}, te = [
+}, ne = [
   { label: "Last 5 min", value: "now-5m" },
   { label: "Last 15 min", value: "now-15m" },
   { label: "Last 30 min", value: "now-30m" },
@@ -17,7 +29,7 @@ const _ = {
   { label: "Last 12 hours", value: "now-12h" },
   { label: "Last 24 hours", value: "now-24h" },
   { label: "Last 7 days", value: "now-7d" }
-], de = ({
+], se = ({
   logs: u,
   streams: w,
   totalCount: T,
@@ -27,7 +39,7 @@ const _ = {
   onQueryExecute: E,
   onQuerySave: F,
   onQueryDelete: V,
-  onStreamToggle: G,
+  onStreamToggle: U,
   onLogClick: W,
   onExport: z,
   onTailStart: O,
@@ -35,11 +47,12 @@ const _ = {
   isTailing: C = !1,
   className: y,
   style: j,
-  "data-testid": H
+  testId: H,
+  "data-testid": Q
 }) => {
-  const [R, L] = p(""), [N, $] = p("now-1h"), [Q, Y] = p(1e3), [I, M] = p(
+  const q = Q ?? H, [R, L] = p(""), [N, $] = p("now-1h"), [G, Z] = p(1e3), [I, J] = p(
     /* @__PURE__ */ new Set(["trace", "debug", "info", "warn", "error", "fatal"])
-  ), [m, q] = p(/* @__PURE__ */ new Set()), [U, D] = p(null), [o, n] = p(!1), [i, f] = p(""), [x, c] = p("logs"), [l, g] = p(""), d = K(() => u.filter((r) => !(!I.has(r.level) || l && !r.message.toLowerCase().includes(l.toLowerCase()))), [u, I, l]), B = K(() => {
+  ), [m, M] = p(/* @__PURE__ */ new Set()), [K, D] = p(null), [o, n] = p(!1), [i, f] = p(""), [x, c] = p("logs"), [l, g] = p(""), d = X(() => u.filter((r) => !(!I.has(r.level) || l && !r.message.toLowerCase().includes(l.toLowerCase()))), [u, I, l]), B = X(() => {
     const r = {
       trace: 0,
       debug: 0,
@@ -53,22 +66,22 @@ const _ = {
     E({
       query: R,
       timeRange: { from: N, to: "now" },
-      limit: Q,
+      limit: G,
       direction: "backward"
     });
   }, S = (r) => {
-    q((a) => {
+    M((a) => {
       const s = new Set(a);
       return s.has(r) ? s.delete(r) : s.add(r), s;
     });
-  }, X = (r) => {
-    M((a) => {
+  }, ee = (r) => {
+    J((a) => {
       const s = new Set(a);
       return s.has(r) ? s.delete(r) : s.add(r), s;
     });
-  }, Z = () => {
+  }, re = () => {
     i.trim() && (F(i, R), n(!1), f(""));
-  }, ee = (r) => {
+  }, te = (r) => {
     if (!l)
       return r;
     const a = new RegExp(`(${l})`, "gi");
@@ -89,7 +102,7 @@ const _ = {
         color: "var(--text-primary, #e0e0e0)",
         ...j
       },
-      "data-testid": H,
+      "data-testid": q,
       children: [
         /* @__PURE__ */ t(
           "div",
@@ -134,7 +147,7 @@ const _ = {
                       color: "var(--bg-primary, #fff)",
                       fontSize: "12px"
                     },
-                    children: te.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
+                    children: ne.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
                   }
                 ),
                 /* @__PURE__ */ t(
@@ -199,7 +212,7 @@ const _ = {
                   return /* @__PURE__ */ t(
                     "button",
                     {
-                      onClick: () => X(r),
+                      onClick: () => ee(r),
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -288,7 +301,7 @@ const _ = {
                           {
                             type: "checkbox",
                             defaultChecked: !0,
-                            onChange: (a) => G(r.id, a.target.checked)
+                            onChange: (a) => U(r.id, a.target.checked)
                           }
                         ),
                         /* @__PURE__ */ e(
@@ -447,233 +460,240 @@ const _ = {
             x === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
               d.map((r) => {
                 const a = _[r.level], s = m.has(r.id);
-                return /* @__PURE__ */ t("div", { style: { borderBottom: "1px solid var(--nice-bg-secondary, #252525)" }, children: [
-                  /* @__PURE__ */ t(
-                    "div",
-                    {
-                      onClick: () => S(r.id),
-                      style: {
-                        display: "flex",
-                        alignItems: "flex-start",
-                        gap: "8px",
-                        padding: "6px 12px",
-                        cursor: "pointer",
-                        background: s ? "var(--bg-elevated, #252525)" : "transparent"
-                      },
-                      children: [
-                        /* @__PURE__ */ e(
-                          "span",
-                          {
-                            style: {
-                              color: "var(--text-muted, #666)",
-                              fontSize: "10px",
-                              minWidth: "160px"
-                            },
-                            children: new Date(r.timestamp).toISOString()
-                          }
-                        ),
-                        /* @__PURE__ */ e(
-                          "span",
-                          {
-                            style: {
-                              padding: "2px 6px",
-                              borderRadius: "4px",
-                              background: a.bg,
-                              color: a.color,
-                              fontSize: "10px",
-                              fontWeight: 500,
-                              minWidth: "50px",
-                              textAlign: "center"
-                            },
-                            children: r.level.toUpperCase()
-                          }
-                        ),
-                        r.service && /* @__PURE__ */ t(
-                          "span",
-                          {
-                            style: {
-                              color: "var(--color-accent, #8b5cf6)",
-                              fontSize: "10px",
-                              minWidth: "80px"
-                            },
-                            children: [
-                              "[",
-                              r.service,
-                              "]"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ e(
-                          "span",
-                          {
-                            style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
-                            dangerouslySetInnerHTML: { __html: ee(r.message) }
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  s && /* @__PURE__ */ t(
-                    "div",
-                    {
-                      style: {
-                        padding: "12px 12px 12px 200px",
-                        background: "var(--bg-elevated, #252525)",
-                        borderTop: "1px solid var(--border-color, #333)"
-                      },
-                      children: [
-                        /* @__PURE__ */ t(
-                          "div",
-                          {
-                            style: {
-                              display: "grid",
-                              gridTemplateColumns: "repeat(3, 1fr)",
-                              gap: "12px",
-                              marginBottom: "12px"
-                            },
-                            children: [
-                              /* @__PURE__ */ t("div", { children: [
-                                /* @__PURE__ */ e(
-                                  "div",
-                                  {
-                                    style: {
-                                      fontSize: "10px",
-                                      color: "var(--text-muted, #888)",
-                                      marginBottom: "2px"
-                                    },
-                                    children: "Source"
-                                  }
-                                ),
-                                /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.source })
-                              ] }),
-                              r.host && /* @__PURE__ */ t("div", { children: [
-                                /* @__PURE__ */ e(
-                                  "div",
-                                  {
-                                    style: {
-                                      fontSize: "10px",
-                                      color: "var(--text-muted, #888)",
-                                      marginBottom: "2px"
-                                    },
-                                    children: "Host"
-                                  }
-                                ),
-                                /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.host })
-                              ] }),
-                              r.traceId && /* @__PURE__ */ t("div", { children: [
-                                /* @__PURE__ */ e(
-                                  "div",
-                                  {
-                                    style: {
-                                      fontSize: "10px",
-                                      color: "var(--text-muted, #888)",
-                                      marginBottom: "2px"
-                                    },
-                                    children: "Trace ID"
-                                  }
-                                ),
-                                /* @__PURE__ */ e("div", { style: { fontSize: "11px", fontFamily: "monospace" }, children: r.traceId })
-                              ] })
-                            ]
-                          }
-                        ),
-                        Object.keys(r.attributes).length > 0 && /* @__PURE__ */ t("div", { style: { marginBottom: "12px" }, children: [
-                          /* @__PURE__ */ e(
-                            "div",
-                            {
-                              style: {
-                                fontSize: "10px",
-                                color: "var(--text-muted, #888)",
-                                marginBottom: "4px"
-                              },
-                              children: "Attributes"
-                            }
-                          ),
-                          /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([k, re]) => /* @__PURE__ */ t(
-                            "span",
-                            {
-                              style: {
-                                padding: "2px 8px",
-                                background: "var(--bg-tertiary, #333)",
-                                borderRadius: "4px",
-                                fontSize: "10px"
-                              },
-                              children: [
-                                k,
-                                "=",
-                                String(re)
-                              ]
-                            },
-                            k
-                          )) })
-                        ] }),
-                        r.stackTrace && /* @__PURE__ */ t("div", { children: [
-                          /* @__PURE__ */ e(
-                            "div",
-                            {
-                              style: {
-                                fontSize: "10px",
-                                color: "var(--text-muted, #888)",
-                                marginBottom: "4px"
-                              },
-                              children: "Stack Trace"
-                            }
-                          ),
-                          /* @__PURE__ */ e(
-                            "pre",
-                            {
-                              style: {
-                                margin: 0,
-                                padding: "8px",
-                                background: "var(--bg-elevated, #1e1e1e)",
-                                borderRadius: "4px",
-                                fontSize: "10px",
-                                overflow: "auto",
-                                maxHeight: "200px",
-                                color: "var(--color-error, #ef4444)"
-                              },
-                              children: r.stackTrace
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ t("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
-                          /* @__PURE__ */ e(
-                            "button",
-                            {
-                              onClick: () => W(r),
-                              style: {
-                                padding: "4px 12px",
-                                borderRadius: "4px",
-                                border: "none",
-                                background: "var(--color-primary, #3b82f6)",
-                                color: "var(--bg-primary, #fff)",
-                                cursor: "pointer",
-                                fontSize: "10px"
-                              },
-                              children: "View Details"
-                            }
-                          ),
-                          r.traceId && /* @__PURE__ */ e(
-                            "button",
-                            {
-                              onClick: () => L(`{traceId="${r.traceId}"}`),
-                              style: {
-                                padding: "4px 12px",
-                                borderRadius: "4px",
-                                border: "none",
-                                background: "var(--bg-tertiary, #333)",
-                                color: "var(--bg-primary, #fff)",
-                                cursor: "pointer",
-                                fontSize: "10px"
-                              },
-                              children: "Show Trace"
-                            }
-                          )
-                        ] })
-                      ]
-                    }
-                  )
-                ] }, r.id);
+                return /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: { borderBottom: "1px solid var(--nice-bg-secondary, #252525)" },
+                    children: [
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          onClick: () => S(r.id),
+                          style: {
+                            display: "flex",
+                            alignItems: "flex-start",
+                            gap: "8px",
+                            padding: "6px 12px",
+                            cursor: "pointer",
+                            background: s ? "var(--bg-elevated, #252525)" : "transparent"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  color: "var(--text-muted, #666)",
+                                  fontSize: "10px",
+                                  minWidth: "160px"
+                                },
+                                children: new Date(r.timestamp).toISOString()
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  padding: "2px 6px",
+                                  borderRadius: "4px",
+                                  background: a.bg,
+                                  color: a.color,
+                                  fontSize: "10px",
+                                  fontWeight: 500,
+                                  minWidth: "50px",
+                                  textAlign: "center"
+                                },
+                                children: r.level.toUpperCase()
+                              }
+                            ),
+                            r.service && /* @__PURE__ */ t(
+                              "span",
+                              {
+                                style: {
+                                  color: "var(--color-accent, #8b5cf6)",
+                                  fontSize: "10px",
+                                  minWidth: "80px"
+                                },
+                                children: [
+                                  "[",
+                                  r.service,
+                                  "]"
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
+                                dangerouslySetInnerHTML: { __html: te(r.message) }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      s && /* @__PURE__ */ t(
+                        "div",
+                        {
+                          style: {
+                            padding: "12px 12px 12px 200px",
+                            background: "var(--bg-elevated, #252525)",
+                            borderTop: "1px solid var(--border-color, #333)"
+                          },
+                          children: [
+                            /* @__PURE__ */ t(
+                              "div",
+                              {
+                                style: {
+                                  display: "grid",
+                                  gridTemplateColumns: "repeat(3, 1fr)",
+                                  gap: "12px",
+                                  marginBottom: "12px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ t("div", { children: [
+                                    /* @__PURE__ */ e(
+                                      "div",
+                                      {
+                                        style: {
+                                          fontSize: "10px",
+                                          color: "var(--text-muted, #888)",
+                                          marginBottom: "2px"
+                                        },
+                                        children: "Source"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.source })
+                                  ] }),
+                                  r.host && /* @__PURE__ */ t("div", { children: [
+                                    /* @__PURE__ */ e(
+                                      "div",
+                                      {
+                                        style: {
+                                          fontSize: "10px",
+                                          color: "var(--text-muted, #888)",
+                                          marginBottom: "2px"
+                                        },
+                                        children: "Host"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.host })
+                                  ] }),
+                                  r.traceId && /* @__PURE__ */ t("div", { children: [
+                                    /* @__PURE__ */ e(
+                                      "div",
+                                      {
+                                        style: {
+                                          fontSize: "10px",
+                                          color: "var(--text-muted, #888)",
+                                          marginBottom: "2px"
+                                        },
+                                        children: "Trace ID"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ e("div", { style: { fontSize: "11px", fontFamily: "monospace" }, children: r.traceId })
+                                  ] })
+                                ]
+                              }
+                            ),
+                            Object.keys(r.attributes).length > 0 && /* @__PURE__ */ t("div", { style: { marginBottom: "12px" }, children: [
+                              /* @__PURE__ */ e(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: "10px",
+                                    color: "var(--text-muted, #888)",
+                                    marginBottom: "4px"
+                                  },
+                                  children: "Attributes"
+                                }
+                              ),
+                              /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([k, oe]) => /* @__PURE__ */ t(
+                                "span",
+                                {
+                                  style: {
+                                    padding: "2px 8px",
+                                    background: "var(--bg-tertiary, #333)",
+                                    borderRadius: "4px",
+                                    fontSize: "10px"
+                                  },
+                                  children: [
+                                    k,
+                                    "=",
+                                    String(oe)
+                                  ]
+                                },
+                                k
+                              )) })
+                            ] }),
+                            r.stackTrace && /* @__PURE__ */ t("div", { children: [
+                              /* @__PURE__ */ e(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: "10px",
+                                    color: "var(--text-muted, #888)",
+                                    marginBottom: "4px"
+                                  },
+                                  children: "Stack Trace"
+                                }
+                              ),
+                              /* @__PURE__ */ e(
+                                "pre",
+                                {
+                                  style: {
+                                    margin: 0,
+                                    padding: "8px",
+                                    background: "var(--bg-elevated, #1e1e1e)",
+                                    borderRadius: "4px",
+                                    fontSize: "10px",
+                                    overflow: "auto",
+                                    maxHeight: "200px",
+                                    color: "var(--color-error, #ef4444)"
+                                  },
+                                  children: r.stackTrace
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ t("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
+                              /* @__PURE__ */ e(
+                                "button",
+                                {
+                                  onClick: () => W(r),
+                                  style: {
+                                    padding: "4px 12px",
+                                    borderRadius: "4px",
+                                    border: "none",
+                                    background: "var(--color-primary, #3b82f6)",
+                                    color: "var(--bg-primary, #fff)",
+                                    cursor: "pointer",
+                                    fontSize: "10px"
+                                  },
+                                  children: "View Details"
+                                }
+                              ),
+                              r.traceId && /* @__PURE__ */ e(
+                                "button",
+                                {
+                                  onClick: () => L(`{traceId="${r.traceId}"}`),
+                                  style: {
+                                    padding: "4px 12px",
+                                    borderRadius: "4px",
+                                    border: "none",
+                                    background: "var(--bg-tertiary, #333)",
+                                    color: "var(--bg-primary, #fff)",
+                                    cursor: "pointer",
+                                    fontSize: "10px"
+                                  },
+                                  children: "Show Trace"
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  r.id
+                );
               }),
               d.length === 0 && !v && /* @__PURE__ */ t(
                 "div",
@@ -819,7 +839,7 @@ const _ = {
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: Z,
+                        onClick: re,
                         style: {
                           padding: "8px 16px",
                           borderRadius: "6px",
@@ -840,11 +860,11 @@ const _ = {
       ]
     }
   );
-}, oe = {
+}, ie = {
   critical: { color: "var(--color-error, #ef4444)", icon: "🔴" },
   warning: { color: "var(--color-warning, #f59e0b)", icon: "🟡" },
   info: { color: "var(--color-primary, #3b82f6)", icon: "🔵" }
-}, ne = [
+}, ae = [
   { 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" },
@@ -854,17 +874,17 @@ const _ = {
   { 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" }
-], le = ({
+], ce = ({
   dashboard: u,
   metrics: w,
   alerts: T = [],
-  timeRanges: v = ne,
+  timeRanges: v = ae,
   onTimeRangeChange: A,
   onVariableChange: b,
   onPanelEdit: E,
   onPanelAdd: F,
   onPanelRemove: V,
-  onPanelMove: G,
+  onPanelMove: U,
   onAlertAcknowledge: W,
   onAlertSilence: z,
   onQueryExecute: O,
@@ -873,10 +893,11 @@ const _ = {
   isEditing: y = !1,
   onEditModeToggle: j,
   className: H,
-  style: R,
-  "data-testid": L
+  style: Q,
+  testId: q,
+  "data-testid": R
 }) => {
-  const [N, $] = p(!1), [Q, Y] = p(!0), [I, M] = p(null), m = T.filter((o) => o.status === "firing"), q = (o) => {
+  const L = R ?? q, [N, $] = p(!1), [G, Z] = p(!0), [I, J] = p(null), m = T.filter((o) => o.status === "firing"), M = (o) => {
     var i, f, x;
     const n = (i = o.queries[0]) != null && i.expression ? w[o.queries[0].expression] : null;
     switch (o.type) {
@@ -920,7 +941,15 @@ const _ = {
               height: "100%"
             },
             children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 60", style: { width: "100%", maxWidth: "200px" }, children: [
-              /* @__PURE__ */ e("path", { d: "M 10 50 A 40 40 0 0 1 90 50", fill: "none", stroke: "var(--nice-text, #333)", strokeWidth: "8" }),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M 10 50 A 40 40 0 0 1 90 50",
+                  fill: "none",
+                  stroke: "var(--nice-text, #333)",
+                  strokeWidth: "8"
+                }
+              ),
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -931,13 +960,24 @@ const _ = {
                   strokeDasharray: `${g * 1.26} 126`
                 }
               ),
-              /* @__PURE__ */ e("text", { x: "50", y: "45", textAnchor: "middle", fill: "var(--nice-border, #e0e0e0)", fontSize: "16", fontWeight: "600", children: c.toFixed(1) })
+              /* @__PURE__ */ e(
+                "text",
+                {
+                  x: "50",
+                  y: "45",
+                  textAnchor: "middle",
+                  fill: "var(--nice-border, #e0e0e0)",
+                  fontSize: "16",
+                  fontWeight: "600",
+                  children: c.toFixed(1)
+                }
+              )
             ] })
           }
         );
       }
       case "timeseries":
-        return U(o, n);
+        return K(o, n);
       case "table":
         return /* @__PURE__ */ e("div", { style: { overflow: "auto", height: "100%" }, children: /* @__PURE__ */ t("table", { style: { width: "100%", fontSize: "11px", borderCollapse: "collapse" }, children: [
           /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { style: { background: "var(--bg-elevated, #252525)" }, children: [
@@ -1053,7 +1093,7 @@ const _ = {
       default:
         return /* @__PURE__ */ e("div", { style: { padding: "12px", color: "var(--text-muted, #666)" }, children: "Unsupported panel type" });
     }
-  }, U = (o, n) => {
+  }, K = (o, n) => {
     const i = (n == null ? void 0 : n.values) ?? [];
     if (i.length === 0)
       return /* @__PURE__ */ e(
@@ -1080,9 +1120,34 @@ const _ = {
         preserveAspectRatio: "none",
         style: { width: "100%", height: "100%" },
         children: [
-          [0, 25, 50, 75, 100].map((d) => /* @__PURE__ */ e("line", { x1: "0", y1: d, x2: "100", y2: d, stroke: "var(--nice-text, #333)", strokeWidth: "0.5" }, d)),
-          o.chartType === "area" || o.chartType === "stacked_area" ? /* @__PURE__ */ e("polygon", { points: `0,100 ${g} 100,100`, fill: "var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))" }) : null,
-          /* @__PURE__ */ e("polyline", { points: g, fill: "none", stroke: "var(--nice-primary, #3b82f6)", strokeWidth: "1" })
+          [0, 25, 50, 75, 100].map((d) => /* @__PURE__ */ e(
+            "line",
+            {
+              x1: "0",
+              y1: d,
+              x2: "100",
+              y2: d,
+              stroke: "var(--nice-text, #333)",
+              strokeWidth: "0.5"
+            },
+            d
+          )),
+          o.chartType === "area" || o.chartType === "stacked_area" ? /* @__PURE__ */ e(
+            "polygon",
+            {
+              points: `0,100 ${g} 100,100`,
+              fill: "var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))"
+            }
+          ) : null,
+          /* @__PURE__ */ e(
+            "polyline",
+            {
+              points: g,
+              fill: "none",
+              stroke: "var(--nice-primary, #3b82f6)",
+              strokeWidth: "1"
+            }
+          )
         ]
       }
     );
@@ -1104,7 +1169,7 @@ const _ = {
         height: "100%",
         background: "var(--bg-elevated, #1e1e1e)",
         color: "var(--text-primary, #e0e0e0)",
-        ...R
+        ...Q
       },
       "data-testid": L,
       children: [
@@ -1182,7 +1247,7 @@ const _ = {
                   children: "🔄 Refresh"
                 }
               ),
-              y ? /* @__PURE__ */ t(J, { children: [
+              y ? /* @__PURE__ */ t(Y, { children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
@@ -1235,7 +1300,7 @@ const _ = {
             ]
           }
         ),
-        u.variables.length > 0 && Q && /* @__PURE__ */ e(
+        u.variables.length > 0 && G && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -1322,7 +1387,7 @@ const _ = {
                       },
                       children: [
                         /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: o.title }),
-                        y && /* @__PURE__ */ t(J, { children: [
+                        y && /* @__PURE__ */ t(Y, { children: [
                           /* @__PURE__ */ e(
                             "button",
                             {
@@ -1361,7 +1426,7 @@ const _ = {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: q(o) })
+                  /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: M(o) })
                 ]
               },
               o.id
@@ -1426,7 +1491,7 @@ const _ = {
                   ),
                   /* @__PURE__ */ t("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
                     T.map((o) => {
-                      const n = oe[o.severity];
+                      const n = ie[o.severity];
                       return /* @__PURE__ */ t(
                         "div",
                         {
@@ -1557,6 +1622,6 @@ const _ = {
   );
 };
 export {
-  de as NiceLogExplorer,
-  le as NiceMetricsDashboard
+  se as NiceLogExplorer,
+  ce as NiceMetricsDashboard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-monitoring",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Nice2Dev UI Monitoring - Observability React components: MetricsDashboard (Grafana-style), LogExplorer (Loki-style)",
   "type": "module",
   "sideEffects": [
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@nice2dev/ui": "^1.0.16",
+    "@nice2dev/ui": "^1.0.18",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },