@nice2dev/ui-monitoring 1.1.6 → 1.1.9

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:"💀"}},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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@nice2dev/ui"),l=require("react"),$={trace:{color:"var(--nice-text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)"},debug:{color:"var(--nice-color-accent, #8b5cf6)",bg:"#8b5cf622"},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:"#dc262622"}},K={verticalAlign:"text-bottom",marginRight:"var(--nice-space-1, 4px)"},ie=[{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"}],se=({logs:a,streams:y,totalCount:L,isLoading:g,savedQueries:T,patterns:S=[],onQueryExecute:V,onQuerySave:O,onQueryDelete:P,onStreamToggle:Y,onLogClick:B,onExport:C,onTailStart:q,onTailStop:M,isTailing:b=!1,className:h,style:A,testId:Q,"data-testid":H})=>{const G=H??Q,{t:D}=i.useNiceTranslation(),[I,m]=l.useState(""),[E,W]=l.useState("now-1h"),[U,ee]=l.useState(1e3),[R,X]=l.useState(new Set(["trace","debug","info","warn","error","fatal"])),[k,J]=l.useState(new Set),[Z,_]=l.useState(null),[t,n]=l.useState(!1),[o,f]=l.useState(""),[u,p]=l.useState("logs"),[c,v]=l.useState(""),d=l.useMemo(()=>a.filter(r=>!(!R.has(r.level)||c&&!r.message.toLowerCase().includes(c.toLowerCase()))),[a,R,c]),N=l.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return a.forEach(s=>r[s.level]++),r},[a]),j=()=>{V({query:I,timeRange:{from:E,to:"now"},limit:U,direction:"backward"})},w=r=>{J(s=>{const x=new Set(s);return x.has(r)?x.delete(r):x.add(r),x})},re=r=>{X(s=>{const x=new Set(s);return x.has(r)?x.delete(r):x.add(r),x})},te=()=>{o.trim()&&(O(o,I),n(!1),f(""))},ne=r=>{if(!c)return r;const s=new RegExp(`(${c})`,"gi");return r.replace(s,'<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 ${h||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...A},"data-testid":G,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=>m(r.target.value),placeholder:'Enter query... e.g., {service="api"} |= "error"',onKeyDown:r=>r.key==="Enter"&&j(),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:E,onChange:r=>W(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:ie.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:j,disabled:g,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-text-on-primary, #fff)",cursor:g?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:g?.7:1},children:[e.jsx(i.NiceIcon,{name:g?"clock":"search",size:14,style:K}),"Search"]}),e.jsx("button",{onClick:()=>n(!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(i.NiceIcon,{name:"save",size:14,title:D("logExplorer.saveQuery","Save query")})}),q&&e.jsxs("button",{onClick:b?M:q,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:b?"var(--nice-color-success, #22c55e)":"var(--nice-bg-tertiary, #333)",color:b?"var(--nice-text-on-primary, #fff)":"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(i.NiceIcon,{name:b?"stop":"play",size:14,style:K}),b?"Stop":"Tail"]})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:"Levels:"}),Object.keys($).map(r=>{const s=$[r],x=N[r],z=R.has(r);return e.jsxs("button",{onClick:()=>re(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:z?s.bg:"transparent",color:z?s.color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:z?1:.5},children:[r.toUpperCase()," (",x,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:c,onChange:r=>v(r.target.value),placeholder:"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:"Log Streams"}),y.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:s=>Y(r.id,s.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),y.length===0&&e.jsx("div",{style:{color:"var(--nice-text-muted, #666)",fontSize:"11px"},children:"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:"Saved Queries"}),T.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:()=>m(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:s=>{s.stopPropagation(),P(r.id)},style:{background:"none",border:"none",color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:e.jsx(i.NiceIcon,{name:"close",size:10,title:D("logExplorer.deleteQuery","Delete saved query")})})]},r.id)),T.length===0&&e.jsx("div",{style:{color:"var(--nice-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(--nice-border-color, #333)"},children:[[{id:"logs",icon:"file",label:`Logs (${d.length})`},{id:"patterns",icon:"flask",label:`Patterns (${S.length})`}].map(r=>e.jsxs("button",{onClick:()=>p(r.id),style:{padding:"10px 20px",border:"none",background:u===r.id?"var(--nice-bg-elevated, #1e1e1e)":"transparent",color:u===r.id?"var(--nice-text-primary, #fff)":"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:u===r.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent"},children:[e.jsx(i.NiceIcon,{name:r.icon,size:12,style:K}),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:()=>C("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:"JSON"}),e.jsx("button",{onClick:()=>C("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"})]})]}),u==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[d.map(r=>{const s=$[r.level],x=k.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>w(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:s.bg,color:s.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:ne(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:"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:"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:"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:"Attributes"}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([z,oe])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[z,"=",String(oe)]},z))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--nice-text-muted, #888)",marginBottom:"4px"},children:"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:()=>B(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:"View Details"}),r.traceId&&e.jsx("button",{onClick:()=>m(`{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:"Show Trace"})]})]})]},r.id)}),d.length===0&&!g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:[e.jsx(i.NiceIcon,{name:"archive",size:48}),e.jsx("p",{style:{marginTop:"16px"},children:"No logs match your query"})]}),g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:[e.jsx(i.NiceIcon,{name:"clock",size:48}),e.jsx("p",{style:{marginTop:"16px"},children:"Loading logs..."})]})]}),u==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[S.map(r=>{const s=$[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${s.color}`},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"8px"},children:[e.jsx("span",{style:{fontFamily:"monospace",fontSize:"12px",fontWeight:500},children:r.pattern}),e.jsxs("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:[r.count," occurrences"]})]}),e.jsxs("div",{style:{fontSize:"11px",color:"var(--nice-text-muted, #888)"},children:["Sample: ",r.samples[0]]})]},r.id)}),S.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-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(--nice-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:o,onChange:r=>f(r.target.value),placeholder:"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:()=>n(!1),style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-text-primary, #fff)",cursor:"pointer"},children:"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:"Save"})]})]})})]})},ae={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"}},F={verticalAlign:"text-bottom",marginRight:"var(--nice-space-1, 4px)"},de=[{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"}],le={},ce=({dashboard:a,metrics:y=le,alerts:L=[],timeRanges:g=de,onTimeRangeChange:T,onVariableChange:S,onPanelEdit:V,onPanelAdd:O,onPanelRemove:P,onPanelMove:Y,onAlertAcknowledge:B,onAlertSilence:C,onQueryExecute:q,onDashboardSave:M,onRefresh:b,isEditing:h=!1,onEditModeToggle:A,className:Q,style:H,testId:G,"data-testid":D})=>{const I=D??G,{t:m}=i.useNiceTranslation(),[E,W]=l.useState(!1),[U,ee]=l.useState(!0),[R,X]=l.useState(null),k=L.filter(t=>t.status==="firing"),J=t=>{var o,f,u;const n=(o=t.queries[0])!=null&&o.expression?y[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:n?_(n.currentValue,t.thresholds):"var(--nice-text-primary, #e0e0e0)"},children:(n==null?void 0:n.currentValue.toFixed(2))??"-"}),(n==null?void 0:n.unit)&&e.jsx("div",{style:{fontSize:"14px",color:"var(--nice-text-muted, #888)",marginTop:"4px"},children:n.unit})]});case"gauge":{const p=(n==null?void 0:n.currentValue)??0,c=((u=(f=t.thresholds)==null?void 0:f[t.thresholds.length-1])==null?void 0:u.value)??100,v=Math.min(p/c*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:_(p,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:p.toFixed(1)})]})})}case"timeseries":return Z(t,n);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:"Time"}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--nice-border-color, #333)"},children:"Value"})]})}),e.jsx("tbody",{children:n==null?void 0:n.values.slice(-10).reverse().map((p,c)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:new Date(p.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)",textAlign:"right"},children:[p.value.toFixed(2)," ",n.unit]})]},c))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((p,c)=>{var j,w;const v=y[p.expression],d=(v==null?void 0:v.currentValue)??0,N=((w=(j=t.thresholds)==null?void 0:j[t.thresholds.length-1])==null?void 0:w.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:p.legendFormat??p.expression}),e.jsx("span",{children:d.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${d/N*100}%`,background:_(d,t.thresholds),borderRadius:"4px"}})})]},c)})});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:"Unsupported panel type"})}},Z=(t,n)=>{const o=(n==null?void 0:n.values)??[];if(o.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--nice-text-muted, #666)"},children:"No data"});const f=o.map(d=>d.value),u=Math.min(...f),c=Math.max(...f)-u||1,v=o.map((d,N)=>{const j=N/(o.length-1)*100,w=100-(d.value-u)/c*80;return`${j},${w}`}).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"})]})},_=(t,n)=>{if(!n||n.length===0)return"var(--nice-color-primary, #3b82f6)";for(let o=n.length-1;o>=0;o--)if(t>=n[o].value)return n[o].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)",...H},"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(i.NiceIcon,{name:"bar-chart",size:20}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:a.name}),e.jsx("div",{style:{flex:1}}),k.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(--nice-color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(i.NiceIcon,{name:"error",size:14})," ",k.length," Alert",k.length!==1&&"s"]}),e.jsx("select",{value:a.timeRange.display,onChange:t=>{const n=g.find(o=>o.display===t.target.value);n&&T(n)},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:g.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsxs("button",{onClick:b,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(i.NiceIcon,{name:"refresh",size:14,style:F}),"Refresh"]}),h?e.jsxs(e.Fragment,{children:[e.jsxs("button",{onClick:O,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(i.NiceIcon,{name:"plus",size:14,style:F}),"Add Panel"]}),e.jsxs("button",{onClick:M,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(i.NiceIcon,{name:"save",size:14,style:F}),"Save"]})]}):null,A&&e.jsxs("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:h?"var(--nice-color-warning, #f59e0b)":"var(--nice-bg-tertiary, #333)",color:h?"var(--nice-text-on-primary, #fff)":"var(--nice-text-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:[e.jsx(i.NiceIcon,{name:h?"check":"edit",size:14,style:F}),h?"Done":"Edit"]})]}),a.variables.length>0&&U&&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:a.variables.map(t=>{var n;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:o=>S(t.id,o.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:o=>S(t.id,o.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:(n=t.options)==null?void 0:n.map(o=>e.jsx("option",{value:o,children:o},o))})]},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:a.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:R===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}),h&&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(i.NiceIcon,{name:"edit",size:12,title:m("metricsDashboard.editPanel","Edit panel")})}),e.jsx("button",{onClick:()=>P(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(i.NiceIcon,{name:"close",size:12,title:m("metricsDashboard.removePanel","Remove panel")})})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:J(t)})]},t.id))})}),E&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"600px",maxHeight:"80vh",background:"var(--nice-bg-elevated, #252525)",borderRadius:"12px",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:[e.jsxs("span",{style:{fontWeight:600},children:["Active Alerts (",k.length,")"]}),e.jsx("button",{onClick:()=>W(!1),style:{background:"none",border:"none",color:"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:e.jsx(i.NiceIcon,{name:"close",size:18,title:m("close","Close")})})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[L.map(t=>{const n=ae[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--nice-border-color, #333)",borderLeft:`4px solid ${n.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx(i.NiceIcon,{name:n.icon,size:14,color:n.color}),e.jsx("span",{style:{fontWeight:500},children:t.name}),e.jsx("span",{style:{marginLeft:"auto",padding:"2px 8px",borderRadius:"4px",background:t.status==="firing"?"var(--nice-danger-tint-15, #ef444422)":"var(--nice-success-tint-15, #22c55e22)",color:t.status==="firing"?"var(--nice-color-error, #ef4444)":"var(--nice-color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--nice-text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--nice-text-muted, #666)"},children:[e.jsxs("span",{children:["Value: ",t.value]}),e.jsx("span",{children:"•"}),e.jsxs("span",{children:["Threshold: ",t.threshold]}),e.jsx("span",{children:"•"}),e.jsx("span",{children:new Date(t.startsAt).toLocaleString()})]}),t.status==="firing"&&B&&e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>B(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:"Acknowledge"}),C&&e.jsx("button",{onClick:()=>C(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:"Silence 1h"})]})]},t.id)}),L.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--nice-text-muted, #666)"},children:"No alerts"})]})]})})]})},xe=a=>{const{t:y}=i.useNiceTranslation();return a.dashboard?e.jsx(ce,{...a,dashboard:a.dashboard}):e.jsx("div",{className:a.className,style:a.style,"data-testid":a["data-testid"]??a.testId,children:e.jsx(i.NiceEmpty,{title:y("metricsDashboard.noDashboard","No dashboard")})})};exports.NiceLogExplorer=se;exports.NiceMetricsDashboard=xe;

package/dist/index.d.ts

@@ -133,13 +133,20 @@ export declare interface NiceLogExplorerProps extends NiceStandardProps {
     isTailing?: boolean;
 }
 
+/**
+ * Grafana-style metrics dashboard. Without a `dashboard` it shows an empty state; the
+ * dashboard view (and its state) mounts only once there is one.
+ */
 export declare const NiceMetricsDashboard: default_2.FC<NiceMetricsDashboardProps>;
 
 export declare interface NiceMetricsDashboardProps extends NiceStandardProps {
-    dashboard: Dashboard;
-    metrics: Record<string, Metric>;
+    /** Dashboard to show. Omit it to show a "no dashboard" empty state. */
+    dashboard?: Dashboard;
+    /** Latest metrics by query expression. Defaults to none. */
+    metrics?: Record<string, Metric>;
     alerts?: Alert[];
-    timeRanges: TimeRange[];
+    /** Selectable time ranges. Defaults to a built-in list from 5 minutes to 30 days. */
+    timeRanges?: TimeRange[];
     onTimeRangeChange: (range: TimeRange) => void;
     onVariableChange: (variableId: string, value: string) => void;
     onPanelEdit: (panel: Panel) => void;