@nice2dev/ui-monitoring 1.1.7 â 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +389 -347
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),K=require("@nice2dev/ui"),E={trace:{color:"var(--nice-text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)",icon:"â¯"},debug:{color:"var(--nice-color-accent, #8b5cf6)",bg:"#8b5cf622",icon:"đ"},info:{color:"var(--nice-color-primary, #3b82f6)",bg:"var(--nice-primary-tint-15, #3b82f622)",icon:"âšī¸"},warn:{color:"var(--nice-color-warning, #f59e0b)",bg:"var(--nice-warning-tint-15, #f59e0b22)",icon:"â ī¸"},error:{color:"var(--nice-color-error, #ef4444)",bg:"var(--nice-danger-tint-15, #ef444422)",icon:"â"},fatal:{color:"var(--nice-color-error, #dc2626)",bg:"#dc262622",icon:"đ"}},te=[{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"}],ne=({logs:s,streams:h,totalCount:I,isLoading:g,savedQueries:T,patterns:b=[],onQueryExecute:_,onQuerySave:$,onQueryDelete:F,onStreamToggle:G,onLogClick:B,onExport:w,onTailStart:V,onTailStop:O,isTailing:k=!1,className:y,style:N,testId:M,"data-testid":P})=>{const q=P??M,[z,C]=d.useState(""),[A,D]=d.useState("now-1h"),[H,Y]=d.useState(1e3),[R,U]=d.useState(new Set(["trace","debug","info","warn","error","fatal"])),[m,Q]=d.useState(new Set),[J,W]=d.useState(null),[t,n]=d.useState(!1),[i,v]=d.useState(""),[p,x]=d.useState("logs"),[l,u]=d.useState(""),a=d.useMemo(()=>s.filter(r=>!(!R.has(r.level)||l&&!r.message.toLowerCase().includes(l.toLowerCase()))),[s,R,l]),L=d.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return s.forEach(o=>r[o.level]++),r},[s]),f=()=>{_({query:z,timeRange:{from:A,to:"now"},limit:H,direction:"backward"})},j=r=>{Q(o=>{const c=new Set(o);return c.has(r)?c.delete(r):c.add(r),c})},X=r=>{U(o=>{const c=new Set(o);return c.has(r)?c.delete(r):c.add(r),c})},Z=()=>{i.trim()&&($(i,z),n(!1),v(""))},ee=r=>{if(!l)return r;const o=new RegExp(`(${l})`,"gi");return r.replace(o,'<mark style="background: var(--nice-warning, #f59e0b); color: black; padding: 0 var(--nice-space-0-5, 2px); border-radius: var(--nice-radius-sm, 2px);">$1</mark>')};return e.jsxs("div",{className:`nice-log-explorer ${y||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...N},"data-testid":q,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: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(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-bg-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:A,onChange:r=>D(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-bg-primary, #fff)",fontSize:"12px"},children:te.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(--nice-color-primary, #3b82f6)",color:"var(--nice-bg-primary, #fff)",cursor:g?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:g?.7:1},children:[g?"âŗ":"đ"," Search"]}),e.jsx("button",{onClick:()=>n(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"đž"}),V&&e.jsx("button",{onClick:k?O:V,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:k?"var(--nice-color-success, #22c55e)":"var(--nice-bg-tertiary, #333)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:k?"âš 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(E).map(r=>{const o=E[r],c=L[r],S=R.has(r);return e.jsxs("button",{onClick:()=>X(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:S?o.bg:"transparent",color:S?o.color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:S?1:.5},children:[r.toUpperCase()," (",c,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:l,onChange:r=>u(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-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(--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"}),h.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:o=>G(r.id,o.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),h.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:()=>C(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:o=>{o.stopPropagation(),F(r.id)},style:{background:"none",border:"none",color:"var(--nice-text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:"â"})]},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",label:`đ Logs (${a.length})`},{id:"patterns",label:`đŦ Patterns (${b.length})`}].map(r=>e.jsx("button",{onClick:()=>x(r.id),style:{padding:"10px 20px",border:"none",background:p===r.id?"var(--nice-bg-elevated, #1e1e1e)":"transparent",color:p===r.id?"var(--nice-bg-primary, #fff)":"var(--nice-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:()=>w("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-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(--nice-bg-tertiary, #333)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),p==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[a.map(r=>{const o=E[r.level],c=m.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>j(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:c?"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:o.bg,color:o.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:ee(r.message)}})]}),c&&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(([S,re])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--nice-bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[S,"=",String(re)]},S))})]}),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-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(--nice-bg-tertiary, #333)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"Show Trace"})]})]})]},r.id)}),a.length===0&&!g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--nice-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(--nice-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:[b.map(r=>{const o=E[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--nice-bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${o.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)}),b.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:i,onChange:r=>v(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-bg-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-bg-primary, #fff)",cursor:"pointer"},children:"Cancel"}),e.jsx("button",{onClick:Z,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer"},children:"Save"})]})]})})]})},ie={critical:{color:"var(--nice-color-error, #ef4444)",icon:"đ´"},warning:{color:"var(--nice-color-warning, #f59e0b)",icon:"đĄ"},info:{color:"var(--nice-color-primary, #3b82f6)",icon:"đĩ"}},oe=[{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"}],se={},ae=({dashboard:s,metrics:h=se,alerts:I=[],timeRanges:g=oe,onTimeRangeChange:T,onVariableChange:b,onPanelEdit:_,onPanelAdd:$,onPanelRemove:F,onPanelMove:G,onAlertAcknowledge:B,onAlertSilence:w,onQueryExecute:V,onDashboardSave:O,onRefresh:k,isEditing:y=!1,onEditModeToggle:N,className:M,style:P,testId:q,"data-testid":z})=>{const C=z??q,[A,D]=d.useState(!1),[H,Y]=d.useState(!0),[R,U]=d.useState(null),m=I.filter(t=>t.status==="firing"),Q=t=>{var i,v,p;const n=(i=t.queries[0])!=null&&i.expression?h[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?W(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 x=(n==null?void 0:n.currentValue)??0,l=((p=(v=t.thresholds)==null?void 0:v[t.thresholds.length-1])==null?void 0:p.value)??100,u=Math.min(x/l*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:W(x,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:x.toFixed(1)})]})})}case"timeseries":return J(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((x,l)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)"},children:new Date(x.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--nice-border-color, #333)",textAlign:"right"},children:[x.value.toFixed(2)," ",n.unit]})]},l))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((x,l)=>{var f,j;const u=h[x.expression],a=(u==null?void 0:u.currentValue)??0,L=((j=(f=t.thresholds)==null?void 0:f[t.thresholds.length-1])==null?void 0:j.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:x.legendFormat??x.expression}),e.jsx("span",{children:a.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:`${a/L*100}%`,background:W(a,t.thresholds),borderRadius:"4px"}})})]},l)})});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"})}},J=(t,n)=>{const i=(n==null?void 0:n.values)??[];if(i.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--nice-text-muted, #666)"},children:"No data"});const v=i.map(a=>a.value),p=Math.min(...v),l=Math.max(...v)-p||1,u=i.map((a,L)=>{const f=L/(i.length-1)*100,j=100-(a.value-p)/l*80;return`${f},${j}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(a=>e.jsx("line",{x1:"0",y1:a,x2:"100",y2:a,stroke:"var(--nice-text, #333)",strokeWidth:"0.5"},a)),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"})]})},W=(t,n)=>{if(!n||n.length===0)return"var(--nice-color-primary, #3b82f6)";for(let i=n.length-1;i>=0;i--)if(t>=n[i].value)return n[i].color;return"var(--nice-color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${M||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-text-primary, #e0e0e0)",...P},"data-testid":C,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("span",{style:{fontSize:"20px"},children:"đ"}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:s.name}),e.jsx("div",{style:{flex:1}}),m.length>0&&e.jsxs("button",{onClick:()=>D(!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:["đ´ ",m.length," Alert",m.length!==1&&"s"]}),e.jsx("select",{value:s.timeRange.display,onChange:t=>{const n=g.find(i=>i.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-bg-primary, #fff)",fontSize:"12px"},children:g.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsx("button",{onClick:k,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-bg-tertiary, #333)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"đ Refresh"}),y?e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:$,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-color-primary, #3b82f6)",color:"var(--nice-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(--nice-color-success, #22c55e)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"đž Save"})]}):null,N&&e.jsx("button",{onClick:N,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:y?"var(--nice-color-warning, #f59e0b)":"var(--nice-bg-tertiary, #333)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:y?"â Done":"âī¸ Edit"})]}),s.variables.length>0&&H&&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:s.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:i=>b(t.id,i.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-bg-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:i=>b(t.id,i.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--nice-border-color, #444)",background:"var(--nice-bg-elevated, #1e1e1e)",color:"var(--nice-bg-primary, #fff)",fontSize:"11px"},children:(n=t.options)==null?void 0:n.map(i=>e.jsx("option",{value:i,children:i},i))})]},t.id)})}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(12, 1fr)",gridAutoRows:"minmax(100px, auto)",gap:"16px"},children:s.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}),y&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:()=>_(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("button",{onClick:()=>F(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--nice-color-error, #ef4444)",color:"var(--nice-bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"â"})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:Q(t)})]},t.id))})}),A&&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 (",m.length,")"]}),e.jsx("button",{onClick:()=>D(!1),style:{background:"none",border:"none",color:"var(--nice-text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:"â"})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[I.map(t=>{const n=ie[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("span",{children:n.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(--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-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(--nice-bg-tertiary, #333)",color:"var(--nice-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(--nice-text-muted, #666)"},children:"No alerts"})]})]})})]})},de=s=>{const{t:h}=K.useNiceTranslation();return s.dashboard?e.jsx(ae,{...s,dashboard:s.dashboard}):e.jsx("div",{className:s.className,style:s.style,"data-testid":s["data-testid"]??s.testId,children:e.jsx(K.NiceEmpty,{title:h("metricsDashboard.noDashboard","No dashboard")})})};exports.NiceLogExplorer=ne;exports.NiceMetricsDashboard=de;
|
|
1
|
+
"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;
|