@nice2dev/ui-monitoring 1.0.10

package/README.md

@@ -0,0 +1,16 @@
+# @nice2dev/ui-monitoring
+
+Observability & monitoring React components extracted from `@nice2dev/ui`.
+
+## Components
+
+- **NiceMetricsDashboard** — Grafana-style metrics dashboard with panels, variables, alerts.
+- **NiceLogExplorer** — Loki-style log search & explorer with saved queries, tailing, patterns.
+
+## Install
+
+```bash
+npm install @nice2dev/ui-monitoring @nice2dev/ui
+```
+
+Requires `@nice2dev/ui` as a peer dependency for shared base types.

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),F={trace:{color:"var(--text-muted, #888)",bg:"#88888822",icon:"⋯"},debug:{color:"var(--color-accent, #8b5cf6)",bg:"#8b5cf622",icon:"🔍"},info:{color:"var(--color-primary, #3b82f6)",bg:"#3b82f622",icon:"ℹ️"},warn:{color:"var(--color-warning, #f59e0b)",bg:"#f59e0b22",icon:"⚠️"},error:{color:"var(--color-error, #ef4444)",bg:"#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:c,streams:k,totalCount:I,isLoading:p,savedQueries:B,patterns:v=[],onQueryExecute:V,onQuerySave:O,onQueryDelete:P,onStreamToggle:U,onLogClick:T,onExport:w,onTailStart:_,onTailStop:H,isTailing:z=!1,className:b,style:A,"data-testid":q})=>{const[C,R]=d.useState(""),[N,W]=d.useState("now-1h"),[M,Y]=d.useState(1e3),[L,J]=d.useState(new Set(["trace","debug","info","warn","error","fatal"])),[y,Q]=d.useState(new Set),[K,D]=d.useState(null),[t,o]=d.useState(!1),[n,u]=d.useState(""),[l,m]=d.useState("logs"),[x,j]=d.useState(""),i=d.useMemo(()=>c.filter(r=>!(!L.has(r.level)||x&&!r.message.toLowerCase().includes(x.toLowerCase()))),[c,L,x]),f=d.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return c.forEach(s=>r[s.level]++),r},[c]),g=()=>{V({query:C,timeRange:{from:N,to:"now"},limit:M,direction:"backward"})},h=r=>{Q(s=>{const a=new Set(s);return a.has(r)?a.delete(r):a.add(r),a})},G=r=>{J(s=>{const a=new Set(s);return a.has(r)?a.delete(r):a.add(r),a})},$=()=>{n.trim()&&(O(n,C),o(!1),u(""))},E=r=>{if(!x)return r;const s=new RegExp(`(${x})`,"gi");return r.replace(s,'<mark style="background: #f59e0b; color: black; padding: 0 2px; border-radius: 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":q,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:C,onChange:r=>R(r.target.value),placeholder:'Enter query... e.g., {service="api"} |= "error"',onKeyDown:r=>r.key==="Enter"&&g(),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:g,disabled:p,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:p?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:p?.7:1},children:[p?"⏳":"🔍"," 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:"💾"}),_&&e.jsx("button",{onClick:z?H:_,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:z?"var(--color-success, #22c55e)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:z?"⏹ 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(F).map(r=>{const s=F[r],a=f[r],S=L.has(r);return e.jsxs("button",{onClick:()=>G(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:S?s.bg:"transparent",color:S?s.color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:S?1:.5},children:[r.toUpperCase()," (",a,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:x,onChange:r=>j(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"}),k.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=>U(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)),k.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:()=>R(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(--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 (${i.length})`},{id:"patterns",label:`🔬 Patterns (${v.length})`}].map(r=>e.jsx("button",{onClick:()=>m(r.id),style:{padding:"10px 20px",border:"none",background:l===r.id?"var(--bg-elevated, #1e1e1e)":"transparent",color:l===r.id?"var(--bg-primary, #fff)":"var(--text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:l===r.id?"2px solid #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:()=>w("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:()=>w("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"})]})]}),l==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[i.map(r=>{const s=F[r.level],a=y.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid #252525"},children:[e.jsxs("div",{onClick:()=>h(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:a?"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: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(--color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:E(r.message)}})]}),a&&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(([S,X])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[S,"=",String(X)]},S))})]}),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:()=>R(`{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)}),i.length===0&&!p&&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"})]}),p&&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..."})]})]}),l==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[v.map(r=>{const s=F[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--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(--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)}),v.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:"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=>u(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:$,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:c,metrics:k,alerts:I=[],timeRanges:p=te,onTimeRangeChange:B,onVariableChange:v,onPanelEdit:V,onPanelAdd:O,onPanelRemove:P,onPanelMove:U,onAlertAcknowledge:T,onAlertSilence:w,onQueryExecute:_,onDashboardSave:H,onRefresh:z,isEditing:b=!1,onEditModeToggle:A,className:q,style:C,"data-testid":R})=>{const[N,W]=d.useState(!1),[M,Y]=d.useState(!0),[L,J]=d.useState(null),y=I.filter(t=>t.status==="firing"),Q=t=>{var n,u,l;const o=(n=t.queries[0])!=null&&n.expression?k[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 m=(o==null?void 0:o.currentValue)??0,x=((l=(u=t.thresholds)==null?void 0:u[t.thresholds.length-1])==null?void 0:l.value)??100,j=Math.min(m/x*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:"#333",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:D(m,t.thresholds),strokeWidth:"8",strokeDasharray:`${j*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"#e0e0e0",fontSize:"16",fontWeight:"600",children:m.toFixed(1)})]})});case"timeseries":return K(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((i,f)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)"},children:new Date(i.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)",textAlign:"right"},children:[i.value.toFixed(2)," ",o.unit]})]},f))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((i,f)=>{var $,E;const g=k[i.expression],h=(g==null?void 0:g.currentValue)??0,G=((E=($=t.thresholds)==null?void 0:$[t.thresholds.length-1])==null?void 0:E.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:i.legendFormat??i.expression}),e.jsx("span",{children:h.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:`${h/G*100}%`,background:D(h,t.thresholds),borderRadius:"4px"}})})]},f)})});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"})}},K=(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 u=n.map(i=>i.value),l=Math.min(...u),x=Math.max(...u)-l||1,j=n.map((i,f)=>{const g=f/(n.length-1)*100,h=100-(i.value-l)/x*80;return`${g},${h}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(i=>e.jsx("line",{x1:"0",y1:i,x2:"100",y2:i,stroke:"#333",strokeWidth:"0.5"},i)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${j} 100,100`,fill:"rgba(59, 130, 246, 0.2)"}):null,e.jsx("polyline",{points:j,fill:"none",stroke:"#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 ${q||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...C},"data-testid":R,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:c.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:"#ef444422",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:["🔴 ",y.length," Alert",y.length!==1&&"s"]}),e.jsx("select",{value:c.timeRange.display,onChange:t=>{const o=p.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:p.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsx("button",{onClick:z,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:O,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:H,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"})]}),c.variables.length>0&&M&&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:c.variables.map(t=>{var o;return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsxs("label",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:n=>v(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=>v(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:c.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:L===t.id?"2px solid #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:()=>V(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:()=>P(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:"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"?"#ef444422":"#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"}),w&&e.jsx("button",{onClick:()=>w(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;

package/dist/index.d.ts

@@ -0,0 +1,194 @@
+import { default as default_2 } from 'react';
+import { NiceBaseProps } from '@nice2dev/ui';
+
+export declare interface Alert {
+    id: string;
+    name: string;
+    severity: AlertSeverity;
+    message: string;
+    metric: string;
+    value: number;
+    threshold: number;
+    startsAt: Date;
+    endsAt?: Date;
+    labels: Record<string, string>;
+    annotations?: Record<string, string>;
+    status: 'firing' | 'pending' | 'resolved';
+}
+
+export declare type AlertSeverity = 'critical' | 'warning' | 'info';
+
+export declare type ChartType = 'line' | 'area' | 'bar' | 'stacked_area' | 'heatmap';
+
+export declare interface Dashboard {
+    id: string;
+    name: string;
+    description?: string;
+    tags: string[];
+    panels: Panel[];
+    variables: DashboardVariable[];
+    timeRange: TimeRange;
+    refreshInterval?: number;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+export declare interface DashboardVariable {
+    id: string;
+    name: string;
+    label: string;
+    type: 'query' | 'custom' | 'interval' | 'textbox';
+    query?: string;
+    options?: string[];
+    current: string;
+    multi?: boolean;
+}
+
+export declare interface LogEntry {
+    id: string;
+    timestamp: Date;
+    level: LogLevel;
+    message: string;
+    source: string;
+    service?: string;
+    host?: string;
+    traceId?: string;
+    spanId?: string;
+    attributes: Record<string, string | number | boolean>;
+    stackTrace?: string;
+}
+
+export declare type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+export declare interface LogPattern {
+    id: string;
+    pattern: string;
+    count: number;
+    samples: string[];
+    level: LogLevel;
+}
+
+export declare interface LogQuery {
+    query: string;
+    timeRange: LogTimeRange;
+    limit: number;
+    direction: 'forward' | 'backward';
+    streams?: string[];
+}
+
+export declare interface LogStream {
+    id: string;
+    name: string;
+    labels: Record<string, string>;
+    color: string;
+}
+
+export declare interface LogTimeRange {
+    from: Date | string;
+    to: Date | string;
+}
+
+export declare interface Metric {
+    id: string;
+    name: string;
+    description?: string;
+    type: MetricType;
+    unit?: string;
+    labels: Record<string, string>;
+    currentValue: number;
+    values: MetricDataPoint[];
+}
+
+export declare interface MetricDataPoint {
+    timestamp: Date;
+    value: number;
+}
+
+export declare interface MetricQuery {
+    id: string;
+    expression: string;
+    legendFormat?: string;
+    interval?: string;
+}
+
+export declare type MetricType = 'gauge' | 'counter' | 'histogram' | 'summary';
+
+export declare const NiceLogExplorer: default_2.FC<NiceLogExplorerProps>;
+
+export declare interface NiceLogExplorerProps extends NiceBaseProps {
+    logs: LogEntry[];
+    streams: LogStream[];
+    totalCount: number;
+    isLoading: boolean;
+    savedQueries: SavedQuery[];
+    patterns?: LogPattern[];
+    onQueryExecute: (query: LogQuery) => void;
+    onQuerySave: (name: string, query: string) => void;
+    onQueryDelete: (id: string) => void;
+    onStreamToggle: (streamId: string, enabled: boolean) => void;
+    onLogClick: (log: LogEntry) => void;
+    onExport: (format: 'json' | 'csv' | 'txt') => void;
+    onTailStart?: () => void;
+    onTailStop?: () => void;
+    isTailing?: boolean;
+}
+
+export declare const NiceMetricsDashboard: default_2.FC<NiceMetricsDashboardProps>;
+
+export declare interface NiceMetricsDashboardProps extends NiceBaseProps {
+    dashboard: Dashboard;
+    metrics: Record<string, Metric>;
+    alerts?: Alert[];
+    timeRanges: TimeRange[];
+    onTimeRangeChange: (range: TimeRange) => void;
+    onVariableChange: (variableId: string, value: string) => void;
+    onPanelEdit: (panel: Panel) => void;
+    onPanelAdd: () => void;
+    onPanelRemove: (panelId: string) => void;
+    onPanelMove: (panelId: string, position: Panel['position']) => void;
+    onAlertAcknowledge?: (alertId: string) => void;
+    onAlertSilence?: (alertId: string, duration: number) => void;
+    onQueryExecute: (query: string) => Promise<MetricDataPoint[]>;
+    onDashboardSave: () => void;
+    onRefresh: () => void;
+    isEditing?: boolean;
+    onEditModeToggle?: () => void;
+}
+
+export declare interface Panel {
+    id: string;
+    title: string;
+    description?: string;
+    type: 'timeseries' | 'stat' | 'gauge' | 'table' | 'heatmap' | 'bar_gauge' | 'text';
+    queries: MetricQuery[];
+    chartType?: ChartType;
+    position: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    thresholds?: Threshold[];
+    options?: Record<string, unknown>;
+}
+
+export declare interface SavedQuery {
+    id: string;
+    name: string;
+    query: string;
+    description?: string;
+}
+
+export declare interface Threshold {
+    value: number;
+    color: string;
+    label?: string;
+}
+
+export declare interface TimeRange {
+    from: Date | string;
+    to: Date | string;
+    display: string;
+}
+
+export { }