@unblind/react 0.1.0-alpha.0 → 0.1.0-alpha.1
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.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +11 -3
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{QueryClient as oe,QueryClientProvider as Pe,useQueryClient as Ue}from"@tanstack/react-query";import{createContext as Se,useCallback as Ee,useContext as Re,useMemo as ie}from"react";import{jsx as ne}from"react/jsx-runtime";var ae=Se(void 0);function $({children:e,queryClient:t,queryClientConfig:r,apiBaseUrl:i="/api/unblind",fetchImpl:o}){let s=ie(()=>{if(t)return t;let n={refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1},l={defaultOptions:{queries:n}};return r?new oe({...r,defaultOptions:{...r.defaultOptions,queries:{...n,...r.defaultOptions?.queries}}}):new oe(l)},[t,r]),a=ie(()=>({apiBaseUrl:i,fetchImpl:o}),[i,o]);return ne(Pe,{client:s,children:ne(ae.Provider,{value:a,children:e})})}function R(){let e=Re(ae);if(!e)throw new Error("useUnblindConfig must be used within an UnblindClientProvider. Please wrap your app or component tree with <UnblindClientProvider>.");return e}function se(){let e=Ue();return Ee(async()=>{await e.refetchQueries({queryKey:["unblind","timeseries"]})},[e])}import{createContext as Me,useContext as ce,useMemo as le}from"react";import{jsx as L,jsxs as De}from"react/jsx-runtime";var W=Me(void 0);function K({children:e,timeRange:t,startTime:r,endTime:i,interval:o,attributes:s,groupBy:a,operator:n,appearance:l}){let c=ce(W),p=l?.components?.Loading,u=l?.components?.Error,m=l?.components?.Tooltip,d=le(()=>{if(!(!p&&!u&&!m))return{components:{...p&&{Loading:p},...u&&{Error:u},...m&&{Tooltip:m}}}},[p,u,m]),h=le(()=>({timeRange:t??c?.timeRange,startTime:r??c?.startTime,endTime:i??c?.endTime,interval:o??c?.interval,attributes:s??c?.attributes,groupBy:a??c?.groupBy,operator:n??c?.operator,appearance:d??c?.appearance}),[t,r,i,o,s,a,n,d,c]);return L(W.Provider,{value:h,children:e})}var Le=()=>L("div",{className:"flex h-full items-center justify-center text-sm text-gray-500",children:"Loading data..."}),Ne=({error:e})=>L("div",{className:"flex h-full items-center justify-center text-sm text-red-500",children:e?.message??"Something went wrong"}),ze=()=>L("div",{className:"flex h-full items-center justify-center",children:De("div",{className:"text-center",children:[L("div",{className:"mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-zinc-800",children:L("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"size-5 text-gray-400 dark:text-gray-500",children:L("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"})})}),L("p",{className:"mt-2 text-sm text-gray-500 dark:text-gray-400",children:"No data available for this time range"})]})}),Ae=["#7c3aed","#eab308","#2563eb","#dc2626","#16a34a","#f97316","#0891b2","#9333ea","#ca8a04","#4f46e5","#0d9488","#be185d"],Ie="6h";function V(){let e=ce(W);return{timeRange:e?.timeRange||Ie,startTime:e?.startTime,endTime:e?.endTime,interval:e?.interval,attributes:e?.attributes,groupBy:e?.groupBy,operator:e?.operator,appearance:{components:{Loading:e?.appearance?.components?.Loading??Le,Error:e?.appearance?.components?.Error??Ne,Empty:e?.appearance?.components?.Empty??ze,Tooltip:e?.appearance?.components?.Tooltip},colors:e?.appearance?.colors||Ae}}}import{jsx as pe}from"react/jsx-runtime";function Oe({children:e,queryClient:t,apiBaseUrl:r,fetchImpl:i,timeRange:o,startTime:s,endTime:a,interval:n,attributes:l,groupBy:c,operator:p,appearance:u}){return pe($,{queryClient:t,apiBaseUrl:r,fetchImpl:i,children:pe(K,{timeRange:o,startTime:s,endTime:a,interval:n,attributes:l,groupBy:c,operator:p,appearance:u,children:e})})}import{useQuery as Ve}from"@tanstack/react-query";function Be(){let{apiBaseUrl:e,fetchImpl:t=fetch}=R(),r=Ve({queryKey:["unblind","metrics"],queryFn:async()=>{let i=await t(`${e}/metrics`,{headers:{"Content-Type":"application/json"}});if(!i.ok)throw new Error("Error loading metrics metadata");if(i.status===200){let{data:o}=await i.json();return o}else throw new Error("Unexpected status code")}});return{list:r.data,isLoading:r.isLoading,hasError:r.isError,refetch:r.refetch}}import{useQuery as He}from"@tanstack/react-query";import{useMemo as q}from"react";import je from"ms";function Fe(e){let t=Date.now();return[t-je(e),t]}function B(e,t,r){let i,o;if(typeof t=="number"&&typeof r=="number")i=t,o=r;else if(e){let[s,a]=Fe(e);i=s,o=a}else throw new Error("Either timeRange or both startTime and endTime must be provided");return[i,o]}function Y({queries:e,timeRange:t,startTime:r,endTime:i,interval:o}){let{apiBaseUrl:s,fetchImpl:a=fetch}=R(),n=q(()=>e.map(b=>b.metrics.join(",")).join(","),[e]),l=q(()=>e.map(b=>{let k=b.attributes;if(!k)return"";let y=Object.keys(k);return y.length===0?"":y.map(x=>x+":"+k[x]?.join(",")).join(",")}).join(","),[e]),c=q(()=>e.map(b=>b.operator),[e]),p=q(()=>e.map(b=>b.groupBy).join(", "),[e]),m=He({queryKey:["unblind","timeseries",n,l,r,i,t,o,c,p],queryFn:async()=>{if(!n)throw new Error("Missing required parameters");if(n.length===0)throw new Error("No series provided");let[b,k]=B(t,r,i),y={queries:e,startTime:b,endTime:k,interval:o},x=await a(`${s}/tenants/timeseries`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(y)});if(!x.ok)throw new Error("Error fetching metric");let{series:T,times:C,metadata:S}=await x.json();if(!T)throw console.error("Series not found"),new Error("Series not found");return{series:T,times:C,metadata:S}},enabled:!!n&&(typeof r=="number"&&typeof i=="number"||!!t)}),{metadata:d,series:h,times:v}=q(()=>m.data?{series:m.data.series,times:m.data.times,metadata:m.data.metadata}:{series:[],times:[],metadata:{}},[m]),w=m.isLoading,f=m.isFetching,g=m.isError;return{data:{series:h,times:v,metadata:d},isLoading:w,isFetching:f,hasError:g,refetch:m.refetch}}import{useQuery as qe}from"@tanstack/react-query";import{useMemo as _e}from"react";function Ge({timeRange:e,startTime:t,endTime:r}){let{apiBaseUrl:i,fetchImpl:o=fetch}=R(),a=qe({queryKey:["unblind","usage",e,t,r],queryFn:async()=>{let[p,u]=B(e,t,r),m=`${i}/tenants/usage`,d=await o(m,{headers:{"Content-Type":"application/json"},body:JSON.stringify({startTime:p,endTime:u})});if(!d.ok)throw new Error("Error fetching usage");let{data:h}=await d.json();if(!h)throw new Error("usage not found");return h},enabled:typeof t=="number"&&typeof r=="number"||!!e}),n=_e(()=>a.data?a.data||[]:[],[a]),l=a.isLoading||a.isRefetching,c=a.isError;return{usage:n,isLoading:l,hasError:c,refetch:a.refetch}}import{useInfiniteQuery as Qe}from"@tanstack/react-query";import{useMemo as $e}from"react";function We({timeRange:e,filters:t,startTime:r,endTime:i}){let{apiBaseUrl:o,fetchImpl:s=fetch}=R(),a=typeof r=="number"&&typeof i=="number"||!!e,n=Qe({queryKey:["unblind","logs",e,t.map(c=>c.name+":"+c.value).sort().join(",")],queryFn:async({pageParam:c})=>{let p=t.reduce((T,C)=>(T[C.name]||(T[C.name]=[]),T[C.name].push(C.value),T),{}),{body:u=[],severity:m=[],"service.name":d=[],"trace.id":h=[],"span.id":v=[],...w}=p,[f,g]=B(e,r,i),b=Date.now(),k=await s(`${o}/tenants/logs`,{method:"POST",body:JSON.stringify({filter:{attributes:w,body:u,severity:m,traceId:h,spanId:v,service:d},startTime:f,endTime:g,pagination:{page:c}}),headers:{"Content-Type":"application/json"}});if(!k.ok)throw new Error("Error fetching logs");let{data:y,next_page:x}=await k.json();if(!y)throw new Error("logs not found");return{data:y,next_page:x}},enabled:a,initialPageParam:void 0,getNextPageParam:c=>c.next_page});return{logs:$e(()=>n.data?n.data.pages.flatMap(c=>c.data||[]):[],[n.data]),isLoading:n.isLoading,hasError:n.isError,hasNextPage:n.hasNextPage??!1,fetchNextPage:n.fetchNextPage,isFetchingNextPage:n.isFetchingNextPage,refetch:n.refetch}}import{useEffect as Ke,useState as Ye}from"react";function X(){let[e,t]=Ye(!1);return Ke(()=>{let r=()=>t(document.documentElement.classList.contains("dark"));return r(),window.addEventListener("storage",r),window.addEventListener("theme-change",r),()=>{window.removeEventListener("storage",r),window.removeEventListener("theme-change",r)}},[]),e}import{useEffect as Ut,useRef as St}from"react";import Et from"uplot";import G from"uplot";import{getValueFormat as vt}from"@grafana/data";import{dateTimeFormat as Xe,dateTimeFormatTimeAgo as Je,systemDateFormats as _}from"@grafana/data";var P={millisecond:1,second:1e3,minute:6e4,hour:36e5,day:864e5,month:24192e5,year:31536e6},j={second:[1,2,5,10,15,30],minute:[1,2,5,10,15,30],hour:[1,2,3,4,6,8,12],day:[1,2,3,7,14],month:[1,2,3,6],year:[1,2,5,10,20,50,100]};function Ze(e,t,r,i){if(t>P.day){let o=_.interval.year,s=Math.round(P.year/P.day)*P.day;return Math.round(t/P.day)*P.day===s?o=_.interval.year:t<=P.year?o=_.interval.month:o=_.interval.day,e.map(n=>Xe(n,{format:o,timeZone:i}))}return e.map(o=>{let s=new Date(o),a=t<P.minute,n=t<P.second,l=s.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit",hour12:!1,timeZone:i});return(l==="00:00"||l==="24:00")&&!a&&!n?s.toLocaleDateString(void 0,{day:"2-digit",month:"short",timeZone:i}):s.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:a?"2-digit":void 0,fractionalSecondDigits:n?3:void 0,hour12:!1,timeZone:i})})}function me(e){let t=[{size:P.second/1e3,increments:j.second},{size:P.minute/1e3,increments:j.minute},{size:P.hour/1e3,increments:j.hour},{size:P.day/1e3,increments:j.day},{size:P.month/1e3,increments:j.month},{size:P.year/1e3,increments:j.year}];for(let o of t)for(let s of o.increments){let a=o.size*s;if(a>=e)return{increment:a*1e3,multiplier:s}}let r=t[t.length-1],i=r.increments[r.increments.length-1];return{increment:r.size*i*1e3,multiplier:i}}function de(e,t,r){return[t,r]}function et(e,t,r,i){let o=r-t,s=e.width,a=Math.floor(s/100),n=o/a,{increment:l,multiplier:c}=me(n),p=l/1e3,u=[];if(o<12*3600){let d=Math.ceil(t/p)*p;for(;d<=r;d+=p)u.push(d);return u}if(o<3*86400){if(l>=6*3600*1e3){let h=l/1e3/3600,v=new Date(t*1e3);if(i==="UTC"){let f=v.getUTCHours(),g=Math.floor(f/h)*h;v.setUTCHours(g,0,0,0)}else{let f=v.getHours(),g=Math.floor(f/h)*h;v.setHours(g,0,0,0)}let w=v.getTime()/1e3;for(w<t&&(w+=p);w<=r;)u.push(w),w+=p;return u}let d=Math.ceil(t/p)*p;for(;d<=r;d+=p)u.push(d);return u}if(l>=P.day){let d=new Date(t*1e3);i==="UTC"?(d.setUTCHours(0,0,0,0),d.getTime()/1e3<t&&d.setUTCDate(d.getUTCDate()+c)):(d.setHours(0,0,0,0),d.getTime()/1e3<t&&d.setDate(d.getDate()+c));let h=d.getTime()/1e3;for(;h<=r;)u.push(h),i==="UTC"?d.setUTCDate(d.getUTCDate()+c):d.setDate(d.getDate()+c),h=d.getTime()/1e3;return u}let m=Math.ceil(t/p)*p;for(;m<=r;m+=p)u.push(m);return u}function ue(e,t,r){return t.length===0?[]:t.map((i,o)=>o===0||o===t.length-1?Je(i*1e3,{timeZone:r}):"")}function tt(e,t,r){let i=e.scales.x,o=((i?.max??0)-(i?.min??0))*1e3,s=Math.floor(e.width/100),a=o/1e3/s,{increment:n}=me(a),l=t.map(c=>c*1e3);return Ze(l,n,o,r)}function fe(e,t=!1){let r=t?(s,a,n,l)=>de(s,n,l):(s,a,n,l)=>et(s,n,l,e),i=t?(s,a)=>ue(s,a,e):(s,a)=>tt(s,a,e),o=t?(s,a,n,l,c)=>{let u=document.createElement("canvas").getContext("2d");if(!u)return 0;u.font=I;let m=ue(s,de(s,n,l),e),d=Math.max(u.measureText(m[0]||"").width,u.measureText(m[1]||"").width);return Math.ceil(d/2)+15}:void 0;return{font:I,labelFont:I,grid:{show:!1,width:.5},ticks:{width:.5},splits:r,values:i,size:20}}import{computePosition as dt,flip as ut,offset as mt}from"@floating-ui/dom";import ft from"uplot";import{createRoot as rt}from"react-dom/client";var J=class{overlay=null;reactRoot=null;initialize(){this.overlay||(this.overlay=document.createElement("div"),this.overlay.id="unblind-tooltip-overlay",this.overlay.style.display="none",this.overlay.style.position="fixed",this.overlay.style.pointerEvents="none",this.overlay.style.zIndex="9999",document.body.appendChild(this.overlay),this.reactRoot=rt(this.overlay))}getOverlay(){return this.overlay}render(t){this.reactRoot&&this.reactRoot.render(t)}show(){this.overlay&&(this.overlay.style.display="block")}hide(){this.overlay&&(this.overlay.style.display="none"),this.render(null)}destroy(){this.reactRoot&&(this.reactRoot.unmount(),this.reactRoot=null),this.overlay&&(this.overlay.remove(),this.overlay=null)}},F=new J;import{dateTimeFormat as ge}from"@grafana/data";import{useMemo as it}from"react";import{jsx as ot}from"react/jsx-runtime";function Z({className:e="h-px bg-gray-200 border-gray-200 dark:bg-white/15",...t}){return ot("hr",{role:"presentation",...t,className:e})}import{jsx as U,jsxs as D}from"react/jsx-runtime";function nt(e){return typeof e.metric=="string"?e.metric:e.metric?.textContent||"Unknown Metric"}function he(e){let t=e.attributes||{};if(t["service.name"])return String(t["service.name"]);let i=Object.keys(t)[0];return i?String(t[i]):"z-fallback"}function be(e){return[...e].sort((t,r)=>(Number(r.value)||0)-(Number(t.value)||0))}function at(e){return[...e].sort((t,r)=>he(t).localeCompare(he(r)))}function st(e){let t={};return e.forEach(r=>{let i=nt(r);t[i]||(t[i]=[]),t[i].push(r)}),t}function lt(e,t){let r=st(e);return Object.keys(r).sort((o,s)=>o.localeCompare(s)).map(o=>{let s=r[o];if(!s)return{metricName:o,items:[]};let a=t?be(s):at(s);return{metricName:o,items:a}})}function ct({item:e,groupIdx:t,idx:r}){let i=e.attributes||{},o=Object.entries(i),s=typeof e.metric=="string"?e.metric:e.metric?.textContent||"Unknown",a=o,n=o.find(([l])=>l==="service.name");return n?(s=String(n[1]),a=o.filter(([l])=>l!=="service.name")):o.length>0&&o[0]&&(s=`${o[0][0]}: ${o[0][1]}`,a=o.slice(1)),D("div",{className:"group flex flex-col px-3 py-1 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors",children:[D("div",{className:"flex items-center justify-between gap-4",children:[D("div",{className:"flex items-center gap-2.5 min-w-0 overflow-hidden",children:[U("span",{className:"size-2 mt-0.5 shrink-0 rounded-full shadow-sm ring-1 ring-black/5 dark:ring-white/10",style:{backgroundColor:e.color}}),U("span",{className:"truncate font-medium text-slate-600 dark:text-slate-300",title:s,children:s})]}),U("div",{className:"font-semibold tabular-nums text-slate-900 dark:text-white whitespace-nowrap",children:e.formattedValue??U("span",{className:"font-normal text-slate-400",children:"\u2014"})})]}),a.length>0&&U("div",{className:"mt-0.5 flex flex-wrap gap-x-3 gap-y-0.5 pl-4.5 text-xs text-slate-500 dark:text-slate-400",children:a.map(([l,c])=>D("span",{className:"flex items-center gap-1",children:[D("span",{className:"opacity-70",children:[l,":"]}),U("span",{className:"font-medium text-slate-600 dark:text-slate-300",children:String(c)})]},l))})]},`item-${t}-${r}`)}function pt({group:e,groupIdx:t,hasAttributes:r}){return D("div",{className:"flex flex-col",children:[r&&U("div",{className:`sticky top-0 z-10 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm px-3 py-1.5 font-semibold text-slate-900 dark:text-white ${t>0?"mt-2 border-t border-gray-100 dark:border-white/5 pt-3":""}`,children:e.metricName}),U("div",{className:"flex flex-col gap-1",children:e.items.map((i,o)=>U(ct,{item:i,groupIdx:t,idx:o},`item-${t}-${o}`))})]},e.metricName)}function ye({timestamp:e,items:t,timeZone:r,spansMultipleDays:i,orderByValues:o,hasAttributes:s}){let a=i?ge(e*1e3,{format:"MMM DD, HH:mm:ss",timeZone:r}):ge(e*1e3,{format:"HH:mm:ss",timeZone:r}),n=it(()=>{let l=lt(t,o);if(!s&&o&&l.length>0){let c=l.flatMap(m=>m.items),p=be(c);return[{metricName:l[0]?.metricName||"Metrics",items:p}]}return l},[t,o,s]);return D("div",{style:{fontSize:"13px"},className:"flex w-[320px] flex-col gap-1 text-sm rounded-lg text-slate-900 dark:text-slate-200 border border-gray-200/80 bg-white shadow-xl ring-1 ring-gray-200/40 dark:ring-zinc-800/40 dark:border-white/10 dark:bg-zinc-900",children:[U("div",{className:"flex items-center justify-between px-3 pt-2.5 font-medium text-slate-700 dark:text-slate-100",children:a}),U(Z,{className:"my-1 border-gray-100 dark:border-white/5"}),n.length>0?U("div",{className:"flex flex-col pb-2",children:n.map((l,c)=>U(pt,{group:l,groupIdx:c,hasAttributes:s},l.metricName))}):U("div",{className:"px-3 pb-3 italic text-zinc-400 text-xs",children:"No data available"})]})}import{jsx as we}from"react/jsx-runtime";var gt=4,ht=8;function bt(e,t){if(!e||e.length===0)return!1;let r=e[0],i=e[e.length-1];if(r==null||i==null)return!1;let o=new Date(r*1e3),s=new Date(i*1e3),a=n=>t==="UTC"?`${n.getUTCFullYear()}-${n.getUTCMonth()}-${n.getUTCDate()}`:n.toLocaleDateString(void 0,{timeZone:t});return a(o)!==a(s)}function yt(e,t){let r=!1;for(let o=1;o<e.series.length;o++)if(e.data[o]?.[t]!=null){r=!0;break}if(r)return t;let i=e.data[0].length;for(let o=1;t+o<i||t-o>=0;o++){let s=t-o,a=t+o;if(s>=0){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[s]!=null)return s}if(a<i){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[a]!=null)return a}}return t}function wt(e,t,r,i,o){let s=!1,a=[];for(let n=1;n<e.series.length;n++){let l=e.data[n]?.[t]??null;if(i&&l!=null&&n>1){let v=e.data[n-1]?.[t]??0;l=l-v}let c=e.series[n],p=o?.[n-1],u=c?.label??`Series ${n}`,m=c?.stroke,d=typeof m=="function"?m(ft,n):m??"#ffffff00",h=l==null?void 0:r?r(l):String(l);p?.attributes&&Object.keys(p?.attributes).length>0&&(s=!0),a.push({metric:u,color:d,value:l===null?void 0:l,formattedValue:h,attributes:p?.attributes})}return{items:a,hasAttributes:s}}async function xt(e,t){let{x:r,y:i}=await dt({getBoundingClientRect:()=>({x:t.left,y:t.top,width:0,height:0,top:t.top,left:t.left,right:t.left,bottom:t.top})},e,{placement:"top-start",strategy:"fixed",middleware:[mt({mainAxis:gt,crossAxis:ht}),ut()]});e.style.left=`${r}px`,e.style.top=`${i}px`}function xe(e,t,r,i,o,s){let a,n,l,c=!1;function p(){let d=a.getBoundingClientRect();n=d.left,l=d.top}function u(){F.hide()}function m(){F.show()}return{hooks:{init:d=>{F.initialize(),a=d.over,window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),a.onmouseenter=()=>{c=!0,m()},a.onmouseleave=()=>{c=!1,u()},p()},setSize:()=>{p()},setCursor:d=>{let{left:h,top:v,idx:w}=d.cursor;if(!c||w==null){u();return}let g=d.data[0],b=bt(g,r),k=yt(d,w),y=d.data[0][k];if(y===void 0)return;let{items:x,hasAttributes:T}=wt(d,k,e,t,o),C={left:(h||0)+n,top:(v||0)+l};m();let S=i,N=S?we(S,{timestamp:y,items:x,timeZone:r}):we(ye,{timestamp:y,items:x,timeZone:r,spansMultipleDays:b,stacked:t,hasAttributes:T,orderByValues:s});F.render(N);let z=F.getOverlay();z&&xt(z,C)},destroy(){window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}}}}var I='11px "Inter", sans-serif';var ve=(e,t)=>{let r=e;return t&&t.unit&&t.unit.code&&t.unit.code!=="1"&&(!r&&t.unit?r=t.unit.code:r&&t.unit.code!==r&&(r=void 0)),r},ee=(e,t,r)=>Array.isArray(r)?r[t]:r(e,t),kt=e=>{let t=G.paths.bars({size:[.6,100],radius:0,gap:0}),r=G.paths.linear({alignGaps:0}),i=G.paths.spline({alignGaps:1}),o=G.paths.stepped({alignGaps:1});switch(e){case"line":return r;case"bar":return t;case"area":return r;case"step":return o;case"spline":return i;default:return r}},Tt=(e,t,r,i)=>{switch(i){case"area":return ee(e,t,r);case"bar":return ee(e,t,r);default:return}},Ct=e=>{switch(e){case"bar":return 1;case"line":return 2;case"area":return 2;case"step":return 1.5;default:return 1}},ke=(e,t,r,i,o,s,a,n,l,c,p)=>{let u=e?.clientWidth??1050,m=e?.clientHeight??250,d=typeof t=="string"?String(t).toLowerCase().replaceAll("by","bytes"):t,h=vt(d==="1"?null:d),v=Ct(i),w={width:u,height:m,scales:{y:{range:{min:{mode:1,soft:0},max:{pad:2}}}},plugins:[xe(f=>{let g=h(f,2);return g.text+(g.suffix?.trim()||"")},o,n,l,r,p)],padding:c?[10,15,10,15]:[8,15,8,15],cursor:{y:!1,sync:{key:"_"},drag:{setScale:!0,x:!0,y:!1},move:(f,g,b)=>{let k=f.posToVal(g,"x"),y=f.data[0];if(!y||y.length===0)return[g,b];let x=0,T=0,C=y.length-1;for(;C-T>1;){let M=Math.floor((T+C)/2),H=y[M];H!=null&&H<k?T=M:C=M}let S=y[T],N=y[C];S!=null&&N!=null?x=Math.abs(S-k)<Math.abs(N-k)?T:C:S!=null?x=T:N!=null&&(x=C);let z=x;for(let M=x;M>=0;M--){let H=!1;for(let Q=1;Q<f.data.length;Q++){let re=f.data[Q];if(re&&re[M]!=null){H=!0;break}}if(H){z=M;break}}let A=y[z];return A==null?[g,b]:[f.valToPos(A,"x"),b]}},series:[{},...r.map((f,g)=>({label:f.metric,stroke:ee(f,g,a),width:v,points:{show:!1},spanGaps:!0,paths:kt(i),fill:Tt(f,g,a,i)}))],axes:[fe(n,c),Te(h)],legend:{show:!1}};if(s){let f=w.axes?.[0],g=w.axes?.[1];f&&(f.stroke="#dadada",f.grid&&(f.grid.stroke="#2c3235")),g&&(g.stroke="#dadada",g.grid&&(g.grid.stroke="#2c3235"))}else{let f=w.axes?.[0],g=w.axes?.[1];f&&(f.stroke="#45556c"),g&&(g.stroke="#45556c")}return w};var Pt=(e,t,r,i)=>{let o=e.axes[r];if(i>1)return o?._size;let s=(o?.ticks?.size||0)+(o?.gap||0),a=(t??[]).reduce((n,l)=>l.length>n.length?l:n,"");return a!=""&&(e.ctx.font=o?.font?.[0]??e.ctx.font,s+=e.ctx.measureText(a).width/devicePixelRatio),Math.ceil(s)};function Te(e){return{gap:0,font:I,labelFont:I,grid:{show:!0,width:.5},ticks:{width:.5},values:(t,r)=>r.map(i=>{let o=e(i);return o.text+(o.suffix?.trim()||"")}),size:Pt}}function Ce(e,t){let r=[],i=e[0],o=i.length,s=Array(o).fill(0),a=[i];return e.forEach((n,l)=>{l!==0&&(t?a.push(n):a.push(n.map((c,p)=>s[p]=s[p]+(c||0))))}),e.forEach((n,l)=>{l===0||t||r.push({series:[e.findIndex((c,p)=>p>l),l]})}),{data:a,bands:r.filter(n=>n.series[1]>-1)}}import{jsx as Rt}from"react/jsx-runtime";function te(e){let{times:t,series:r,metadata:i,type:o,className:s,timeZone:a,options:n,tooltipAppearance:l,colors:c,orderByValues:p}=e,u=St(null),m=X(),d=V(),h=c||d.appearance.colors;return Ut(()=>{if(!r||r.length===0){console.warn("No series provided");return}let v=[t],w;r.forEach(x=>{let T=i[x.metric];w=ve(w,T),v.push(x.values)});let f=o==="bar"||o==="area",g=Ce(v,!f),b=u.current,k=ke(b,w,r,o,f,m,h,a,l,p),y=null;if(b){k.bands=g.bands,y=new Et({...k,...n},g.data,b);let x=new ResizeObserver(()=>{y?.setSize({width:b.clientWidth,height:b.clientHeight})});return x.observe(b),()=>{y?.destroy(),x.disconnect()}}},[r,t,o,m,i,a,l,h,p]),Rt("div",{ref:u,className:s})}import{jsx as O}from"react/jsx-runtime";function Mt({metrics:e,operator:t,attributes:r,groupBy:i,timeRange:o,startTime:s,endTime:a,interval:n,type:l="line",className:c,appearance:p}){let u=V(),m=o??u.timeRange,d=s??u.startTime,h=a??u.endTime,v=n??u.interval,w=r??u.attributes,f=i??u.groupBy,g=t??u.operator,b=p?.colors??u.appearance.colors,k=p?.orderByValues??u.appearance.orderByValues,{isLoading:y,data:x,hasError:T}=Y({queries:e.map(E=>({metrics:[E],operator:g,attributes:w,groupBy:f})),timeRange:m,startTime:d,endTime:h,interval:v}),{series:C,times:S,metadata:N}=x,z=C.every(E=>E.isEmpty),A=c||"h-full w-full";if(y){let E=p?.components?.Loading??u.appearance.components.Loading;return O("div",{className:A,children:O(E,{})})}if(z){let E=p?.components?.Empty??u.appearance.components.Empty;return O("div",{className:A,children:O(E,{})})}if(T){let E=p?.components?.Error??u.appearance.components.Error;return O("div",{className:A,children:O(E,{})})}return O(te,{times:S,series:C,metadata:N,type:l,className:A,tooltipAppearance:p?.components?.Tooltip??u.appearance.components.Tooltip,colors:b,orderByValues:k})}export{te as Chart,Z as Divider,Mt as TimeseriesChart,$ as UnblindClientProvider,Oe as UnblindProvider,K as UnblindScope,We as useLogs,Be as useMetrics,se as useRefresh,V as useScope,X as useTheme,Y as useTimeseries,R as useUnblindClientConfig,Ge as useUsage};
|
|
1
|
+
import{QueryClient as oe,QueryClientProvider as Pe,useQueryClient as Ue}from"@tanstack/react-query";import{createContext as Se,useCallback as Ee,useContext as Re,useMemo as ie}from"react";import{jsx as ne}from"react/jsx-runtime";var ae=Se(void 0);function $({children:e,queryClient:t,queryClientConfig:r,apiBaseUrl:i="/api/unblind",fetchImpl:o}){let s=ie(()=>{if(t)return t;let n={refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1},l={defaultOptions:{queries:n}};return r?new oe({...r,defaultOptions:{...r.defaultOptions,queries:{...n,...r.defaultOptions?.queries}}}):new oe(l)},[t,r]),a=ie(()=>({apiBaseUrl:i,fetchImpl:o}),[i,o]);return ne(Pe,{client:s,children:ne(ae.Provider,{value:a,children:e})})}function R(){let e=Re(ae);if(!e)throw new Error("useUnblindConfig must be used within an UnblindClientProvider. Please wrap your app or component tree with <UnblindClientProvider>.");return e}function se(){let e=Ue();return Ee(async()=>{await e.refetchQueries({queryKey:["unblind","timeseries"]})},[e])}import{createContext as Me,useContext as ce,useMemo as le}from"react";import{jsx as L,jsxs as De}from"react/jsx-runtime";var W=Me(void 0);function K({children:e,timeRange:t,startTime:r,endTime:i,interval:o,attributes:s,groupBy:a,operator:n,appearance:l}){let c=ce(W),p=l?.components?.Loading,u=l?.components?.Error,m=l?.components?.Tooltip,d=le(()=>{if(!(!p&&!u&&!m))return{components:{...p&&{Loading:p},...u&&{Error:u},...m&&{Tooltip:m}}}},[p,u,m]),h=le(()=>({timeRange:t??c?.timeRange,startTime:r??c?.startTime,endTime:i??c?.endTime,interval:o??c?.interval,attributes:s??c?.attributes,groupBy:a??c?.groupBy,operator:n??c?.operator,appearance:d??c?.appearance}),[t,r,i,o,s,a,n,d,c]);return L(W.Provider,{value:h,children:e})}var Le=()=>L("div",{className:"flex h-full items-center justify-center text-sm text-gray-500",children:"Loading data..."}),Ne=({error:e})=>L("div",{className:"flex h-full items-center justify-center text-sm text-red-500",children:e?.message??"Something went wrong"}),ze=()=>L("div",{className:"flex h-full items-center justify-center",children:De("div",{className:"text-center",children:[L("div",{className:"mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-zinc-800",children:L("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"size-5 text-gray-400 dark:text-gray-500",children:L("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"})})}),L("p",{className:"mt-2 text-sm text-gray-500 dark:text-gray-400",children:"No data available for this time range"})]})}),Ae=["#7c3aed","#eab308","#2563eb","#dc2626","#16a34a","#f97316","#0891b2","#9333ea","#ca8a04","#4f46e5","#0d9488","#be185d"],Ie="6h";function V(){let e=ce(W);return{timeRange:e?.timeRange||Ie,startTime:e?.startTime,endTime:e?.endTime,interval:e?.interval,attributes:e?.attributes,groupBy:e?.groupBy,operator:e?.operator,appearance:{components:{Loading:e?.appearance?.components?.Loading??Le,Error:e?.appearance?.components?.Error??Ne,Empty:e?.appearance?.components?.Empty??ze,Tooltip:e?.appearance?.components?.Tooltip},colors:e?.appearance?.colors||Ae}}}import{jsx as pe}from"react/jsx-runtime";function Oe({children:e,queryClient:t,apiBaseUrl:r,fetchImpl:i,timeRange:o,startTime:s,endTime:a,interval:n,attributes:l,groupBy:c,operator:p,appearance:u}){return pe($,{queryClient:t,apiBaseUrl:r,fetchImpl:i,children:pe(K,{timeRange:o,startTime:s,endTime:a,interval:n,attributes:l,groupBy:c,operator:p,appearance:u,children:e})})}import{useQuery as Ve}from"@tanstack/react-query";function Be(){let{apiBaseUrl:e,fetchImpl:t=fetch}=R(),r=Ve({queryKey:["unblind","metrics"],queryFn:async()=>{let i=await t(`${e}/metrics`,{headers:{"Content-Type":"application/json"}});if(!i.ok)throw new Error("Error loading metrics metadata");if(i.status===200){let{data:o}=await i.json();return o}else throw new Error("Unexpected status code")}});return{metrics:r.data,isLoading:r.isLoading,hasError:r.isError,refetch:r.refetch}}import{useQuery as He}from"@tanstack/react-query";import{useMemo as q}from"react";import je from"ms";function Fe(e){let t=Date.now();return[t-je(e),t]}function B(e,t,r){let i,o;if(typeof t=="number"&&typeof r=="number")i=t,o=r;else if(e){let[s,a]=Fe(e);i=s,o=a}else throw new Error("Either timeRange or both startTime and endTime must be provided");return[i,o]}function Y({queries:e,timeRange:t,startTime:r,endTime:i,interval:o}){let{apiBaseUrl:s,fetchImpl:a=fetch}=R(),n=q(()=>e.map(b=>b.metrics.join(",")).join(","),[e]),l=q(()=>e.map(b=>{let k=b.attributes;if(!k)return"";let y=Object.keys(k);return y.length===0?"":y.map(x=>x+":"+k[x]?.join(",")).join(",")}).join(","),[e]),c=q(()=>e.map(b=>b.operator),[e]),p=q(()=>e.map(b=>b.groupBy).join(", "),[e]),m=He({queryKey:["unblind","timeseries",n,l,r,i,t,o,c,p],queryFn:async()=>{if(!n)throw new Error("Missing required parameters");if(n.length===0)throw new Error("No series provided");let[b,k]=B(t,r,i),y={queries:e,startTime:b,endTime:k,interval:o},x=await a(`${s}/tenants/timeseries`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(y)});if(!x.ok)throw new Error("Error fetching metric");let{series:T,times:C,metadata:S}=await x.json();if(!T)throw console.error("Series not found"),new Error("Series not found");return{series:T,times:C,metadata:S}},enabled:!!n&&(typeof r=="number"&&typeof i=="number"||!!t)}),{metadata:d,series:h,times:v}=q(()=>m.data?{series:m.data.series,times:m.data.times,metadata:m.data.metadata}:{series:[],times:[],metadata:{}},[m]),w=m.isLoading,f=m.isFetching,g=m.isError;return{data:{series:h,times:v,metadata:d},isLoading:w,isFetching:f,hasError:g,refetch:m.refetch}}import{useQuery as qe}from"@tanstack/react-query";import{useMemo as _e}from"react";function Ge({timeRange:e,startTime:t,endTime:r}){let{apiBaseUrl:i,fetchImpl:o=fetch}=R(),a=qe({queryKey:["unblind","usage",e,t,r],queryFn:async()=>{let[p,u]=B(e,t,r),m=`${i}/tenants/usage`,d=await o(m,{headers:{"Content-Type":"application/json"},body:JSON.stringify({startTime:p,endTime:u})});if(!d.ok)throw new Error("Error fetching usage");let{data:h}=await d.json();if(!h)throw new Error("usage not found");return h},enabled:typeof t=="number"&&typeof r=="number"||!!e}),n=_e(()=>a.data?a.data||[]:[],[a]),l=a.isLoading||a.isRefetching,c=a.isError;return{usage:n,isLoading:l,hasError:c,refetch:a.refetch}}import{useInfiniteQuery as Qe}from"@tanstack/react-query";import{useMemo as $e}from"react";function We({timeRange:e,filters:t,startTime:r,endTime:i}){let{apiBaseUrl:o,fetchImpl:s=fetch}=R(),a=typeof r=="number"&&typeof i=="number"||!!e,n=Qe({queryKey:["unblind","logs",e,t.map(c=>c.name+":"+c.value).sort().join(",")],queryFn:async({pageParam:c})=>{let p=t.reduce((T,C)=>(T[C.name]||(T[C.name]=[]),T[C.name].push(C.value),T),{}),{body:u=[],severity:m=[],"service.name":d=[],"trace.id":h=[],"span.id":v=[],...w}=p,[f,g]=B(e,r,i),b=Date.now(),k=await s(`${o}/tenants/logs`,{method:"POST",body:JSON.stringify({filter:{attributes:w,body:u,severity:m,traceId:h,spanId:v,service:d},startTime:f,endTime:g,pagination:{page:c}}),headers:{"Content-Type":"application/json"}});if(!k.ok)throw new Error("Error fetching logs");let{data:y,next_page:x}=await k.json();if(!y)throw new Error("logs not found");return{data:y,next_page:x}},enabled:a,initialPageParam:void 0,getNextPageParam:c=>c.next_page});return{logs:$e(()=>n.data?n.data.pages.flatMap(c=>c.data||[]):[],[n.data]),isLoading:n.isLoading,hasError:n.isError,hasNextPage:n.hasNextPage??!1,fetchNextPage:n.fetchNextPage,isFetchingNextPage:n.isFetchingNextPage,refetch:n.refetch}}import{useEffect as Ke,useState as Ye}from"react";function X(){let[e,t]=Ye(!1);return Ke(()=>{let r=()=>t(document.documentElement.classList.contains("dark"));return r(),window.addEventListener("storage",r),window.addEventListener("theme-change",r),()=>{window.removeEventListener("storage",r),window.removeEventListener("theme-change",r)}},[]),e}import{useEffect as Ut,useRef as St}from"react";import Et from"uplot";import G from"uplot";import{getValueFormat as vt}from"@grafana/data";import{dateTimeFormat as Xe,dateTimeFormatTimeAgo as Je,systemDateFormats as _}from"@grafana/data";var P={millisecond:1,second:1e3,minute:6e4,hour:36e5,day:864e5,month:24192e5,year:31536e6},j={second:[1,2,5,10,15,30],minute:[1,2,5,10,15,30],hour:[1,2,3,4,6,8,12],day:[1,2,3,7,14],month:[1,2,3,6],year:[1,2,5,10,20,50,100]};function Ze(e,t,r,i){if(t>P.day){let o=_.interval.year,s=Math.round(P.year/P.day)*P.day;return Math.round(t/P.day)*P.day===s?o=_.interval.year:t<=P.year?o=_.interval.month:o=_.interval.day,e.map(n=>Xe(n,{format:o,timeZone:i}))}return e.map(o=>{let s=new Date(o),a=t<P.minute,n=t<P.second,l=s.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit",hour12:!1,timeZone:i});return(l==="00:00"||l==="24:00")&&!a&&!n?s.toLocaleDateString(void 0,{day:"2-digit",month:"short",timeZone:i}):s.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:a?"2-digit":void 0,fractionalSecondDigits:n?3:void 0,hour12:!1,timeZone:i})})}function me(e){let t=[{size:P.second/1e3,increments:j.second},{size:P.minute/1e3,increments:j.minute},{size:P.hour/1e3,increments:j.hour},{size:P.day/1e3,increments:j.day},{size:P.month/1e3,increments:j.month},{size:P.year/1e3,increments:j.year}];for(let o of t)for(let s of o.increments){let a=o.size*s;if(a>=e)return{increment:a*1e3,multiplier:s}}let r=t[t.length-1],i=r.increments[r.increments.length-1];return{increment:r.size*i*1e3,multiplier:i}}function de(e,t,r){return[t,r]}function et(e,t,r,i){let o=r-t,s=e.width,a=Math.floor(s/100),n=o/a,{increment:l,multiplier:c}=me(n),p=l/1e3,u=[];if(o<12*3600){let d=Math.ceil(t/p)*p;for(;d<=r;d+=p)u.push(d);return u}if(o<3*86400){if(l>=6*3600*1e3){let h=l/1e3/3600,v=new Date(t*1e3);if(i==="UTC"){let f=v.getUTCHours(),g=Math.floor(f/h)*h;v.setUTCHours(g,0,0,0)}else{let f=v.getHours(),g=Math.floor(f/h)*h;v.setHours(g,0,0,0)}let w=v.getTime()/1e3;for(w<t&&(w+=p);w<=r;)u.push(w),w+=p;return u}let d=Math.ceil(t/p)*p;for(;d<=r;d+=p)u.push(d);return u}if(l>=P.day){let d=new Date(t*1e3);i==="UTC"?(d.setUTCHours(0,0,0,0),d.getTime()/1e3<t&&d.setUTCDate(d.getUTCDate()+c)):(d.setHours(0,0,0,0),d.getTime()/1e3<t&&d.setDate(d.getDate()+c));let h=d.getTime()/1e3;for(;h<=r;)u.push(h),i==="UTC"?d.setUTCDate(d.getUTCDate()+c):d.setDate(d.getDate()+c),h=d.getTime()/1e3;return u}let m=Math.ceil(t/p)*p;for(;m<=r;m+=p)u.push(m);return u}function ue(e,t,r){return t.length===0?[]:t.map((i,o)=>o===0||o===t.length-1?Je(i*1e3,{timeZone:r}):"")}function tt(e,t,r){let i=e.scales.x,o=((i?.max??0)-(i?.min??0))*1e3,s=Math.floor(e.width/100),a=o/1e3/s,{increment:n}=me(a),l=t.map(c=>c*1e3);return Ze(l,n,o,r)}function fe(e,t=!1){let r=t?(s,a,n,l)=>de(s,n,l):(s,a,n,l)=>et(s,n,l,e),i=t?(s,a)=>ue(s,a,e):(s,a)=>tt(s,a,e),o=t?(s,a,n,l,c)=>{let u=document.createElement("canvas").getContext("2d");if(!u)return 0;u.font=I;let m=ue(s,de(s,n,l),e),d=Math.max(u.measureText(m[0]||"").width,u.measureText(m[1]||"").width);return Math.ceil(d/2)+15}:void 0;return{font:I,labelFont:I,grid:{show:!1,width:.5},ticks:{width:.5},splits:r,values:i,size:20}}import{computePosition as dt,flip as ut,offset as mt}from"@floating-ui/dom";import ft from"uplot";import{createRoot as rt}from"react-dom/client";var J=class{overlay=null;reactRoot=null;initialize(){this.overlay||(this.overlay=document.createElement("div"),this.overlay.id="unblind-tooltip-overlay",this.overlay.style.display="none",this.overlay.style.position="fixed",this.overlay.style.pointerEvents="none",this.overlay.style.zIndex="9999",document.body.appendChild(this.overlay),this.reactRoot=rt(this.overlay))}getOverlay(){return this.overlay}render(t){this.reactRoot&&this.reactRoot.render(t)}show(){this.overlay&&(this.overlay.style.display="block")}hide(){this.overlay&&(this.overlay.style.display="none"),this.render(null)}destroy(){this.reactRoot&&(this.reactRoot.unmount(),this.reactRoot=null),this.overlay&&(this.overlay.remove(),this.overlay=null)}},F=new J;import{dateTimeFormat as ge}from"@grafana/data";import{useMemo as it}from"react";import{jsx as ot}from"react/jsx-runtime";function Z({className:e="h-px bg-gray-200 border-gray-200 dark:bg-white/15",...t}){return ot("hr",{role:"presentation",...t,className:e})}import{jsx as U,jsxs as D}from"react/jsx-runtime";function nt(e){return typeof e.metric=="string"?e.metric:e.metric?.textContent||"Unknown Metric"}function he(e){let t=e.attributes||{};if(t["service.name"])return String(t["service.name"]);let i=Object.keys(t)[0];return i?String(t[i]):"z-fallback"}function be(e){return[...e].sort((t,r)=>(Number(r.value)||0)-(Number(t.value)||0))}function at(e){return[...e].sort((t,r)=>he(t).localeCompare(he(r)))}function st(e){let t={};return e.forEach(r=>{let i=nt(r);t[i]||(t[i]=[]),t[i].push(r)}),t}function lt(e,t){let r=st(e);return Object.keys(r).sort((o,s)=>o.localeCompare(s)).map(o=>{let s=r[o];if(!s)return{metricName:o,items:[]};let a=t?be(s):at(s);return{metricName:o,items:a}})}function ct({item:e,groupIdx:t,idx:r}){let i=e.attributes||{},o=Object.entries(i),s=typeof e.metric=="string"?e.metric:e.metric?.textContent||"Unknown",a=o,n=o.find(([l])=>l==="service.name");return n?(s=String(n[1]),a=o.filter(([l])=>l!=="service.name")):o.length>0&&o[0]&&(s=`${o[0][0]}: ${o[0][1]}`,a=o.slice(1)),D("div",{className:"group flex flex-col px-3 py-1 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors",children:[D("div",{className:"flex items-center justify-between gap-4",children:[D("div",{className:"flex items-center gap-2.5 min-w-0 overflow-hidden",children:[U("span",{className:"size-2 mt-0.5 shrink-0 rounded-full shadow-sm ring-1 ring-black/5 dark:ring-white/10",style:{backgroundColor:e.color}}),U("span",{className:"truncate font-medium text-slate-600 dark:text-slate-300",title:s,children:s})]}),U("div",{className:"font-semibold tabular-nums text-slate-900 dark:text-white whitespace-nowrap",children:e.formattedValue??U("span",{className:"font-normal text-slate-400",children:"\u2014"})})]}),a.length>0&&U("div",{className:"mt-0.5 flex flex-wrap gap-x-3 gap-y-0.5 pl-4.5 text-xs text-slate-500 dark:text-slate-400",children:a.map(([l,c])=>D("span",{className:"flex items-center gap-1",children:[D("span",{className:"opacity-70",children:[l,":"]}),U("span",{className:"font-medium text-slate-600 dark:text-slate-300",children:String(c)})]},l))})]},`item-${t}-${r}`)}function pt({group:e,groupIdx:t,hasAttributes:r}){return D("div",{className:"flex flex-col",children:[r&&U("div",{className:`sticky top-0 z-10 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm px-3 py-1.5 font-semibold text-slate-900 dark:text-white ${t>0?"mt-2 border-t border-gray-100 dark:border-white/5 pt-3":""}`,children:e.metricName}),U("div",{className:"flex flex-col gap-1",children:e.items.map((i,o)=>U(ct,{item:i,groupIdx:t,idx:o},`item-${t}-${o}`))})]},e.metricName)}function ye({timestamp:e,items:t,timeZone:r,spansMultipleDays:i,orderByValues:o,hasAttributes:s}){let a=i?ge(e*1e3,{format:"MMM DD, HH:mm:ss",timeZone:r}):ge(e*1e3,{format:"HH:mm:ss",timeZone:r}),n=it(()=>{let l=lt(t,o);if(!s&&o&&l.length>0){let c=l.flatMap(m=>m.items),p=be(c);return[{metricName:l[0]?.metricName||"Metrics",items:p}]}return l},[t,o,s]);return D("div",{style:{fontSize:"13px"},className:"flex w-[320px] flex-col gap-1 text-sm rounded-lg text-slate-900 dark:text-slate-200 border border-gray-200/80 bg-white shadow-xl ring-1 ring-gray-200/40 dark:ring-zinc-800/40 dark:border-white/10 dark:bg-zinc-900",children:[U("div",{className:"flex items-center justify-between px-3 pt-2.5 font-medium text-slate-700 dark:text-slate-100",children:a}),U(Z,{className:"my-1 border-gray-100 dark:border-white/5"}),n.length>0?U("div",{className:"flex flex-col pb-2",children:n.map((l,c)=>U(pt,{group:l,groupIdx:c,hasAttributes:s},l.metricName))}):U("div",{className:"px-3 pb-3 italic text-zinc-400 text-xs",children:"No data available"})]})}import{jsx as we}from"react/jsx-runtime";var gt=4,ht=8;function bt(e,t){if(!e||e.length===0)return!1;let r=e[0],i=e[e.length-1];if(r==null||i==null)return!1;let o=new Date(r*1e3),s=new Date(i*1e3),a=n=>t==="UTC"?`${n.getUTCFullYear()}-${n.getUTCMonth()}-${n.getUTCDate()}`:n.toLocaleDateString(void 0,{timeZone:t});return a(o)!==a(s)}function yt(e,t){let r=!1;for(let o=1;o<e.series.length;o++)if(e.data[o]?.[t]!=null){r=!0;break}if(r)return t;let i=e.data[0].length;for(let o=1;t+o<i||t-o>=0;o++){let s=t-o,a=t+o;if(s>=0){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[s]!=null)return s}if(a<i){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[a]!=null)return a}}return t}function wt(e,t,r,i,o){let s=!1,a=[];for(let n=1;n<e.series.length;n++){let l=e.data[n]?.[t]??null;if(i&&l!=null&&n>1){let v=e.data[n-1]?.[t]??0;l=l-v}let c=e.series[n],p=o?.[n-1],u=c?.label??`Series ${n}`,m=c?.stroke,d=typeof m=="function"?m(ft,n):m??"#ffffff00",h=l==null?void 0:r?r(l):String(l);p?.attributes&&Object.keys(p?.attributes).length>0&&(s=!0),a.push({metric:u,color:d,value:l===null?void 0:l,formattedValue:h,attributes:p?.attributes})}return{items:a,hasAttributes:s}}async function xt(e,t){let{x:r,y:i}=await dt({getBoundingClientRect:()=>({x:t.left,y:t.top,width:0,height:0,top:t.top,left:t.left,right:t.left,bottom:t.top})},e,{placement:"top-start",strategy:"fixed",middleware:[mt({mainAxis:gt,crossAxis:ht}),ut()]});e.style.left=`${r}px`,e.style.top=`${i}px`}function xe(e,t,r,i,o,s){let a,n,l,c=!1;function p(){let d=a.getBoundingClientRect();n=d.left,l=d.top}function u(){F.hide()}function m(){F.show()}return{hooks:{init:d=>{F.initialize(),a=d.over,window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),a.onmouseenter=()=>{c=!0,m()},a.onmouseleave=()=>{c=!1,u()},p()},setSize:()=>{p()},setCursor:d=>{let{left:h,top:v,idx:w}=d.cursor;if(!c||w==null){u();return}let g=d.data[0],b=bt(g,r),k=yt(d,w),y=d.data[0][k];if(y===void 0)return;let{items:x,hasAttributes:T}=wt(d,k,e,t,o),C={left:(h||0)+n,top:(v||0)+l};m();let S=i,N=S?we(S,{timestamp:y,items:x,timeZone:r}):we(ye,{timestamp:y,items:x,timeZone:r,spansMultipleDays:b,stacked:t,hasAttributes:T,orderByValues:s});F.render(N);let z=F.getOverlay();z&&xt(z,C)},destroy(){window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}}}}var I='11px "Inter", sans-serif';var ve=(e,t)=>{let r=e;return t&&t.unit&&t.unit.code&&t.unit.code!=="1"&&(!r&&t.unit?r=t.unit.code:r&&t.unit.code!==r&&(r=void 0)),r},ee=(e,t,r)=>Array.isArray(r)?r[t]:r(e,t),kt=e=>{let t=G.paths.bars({size:[.6,100],radius:0,gap:0}),r=G.paths.linear({alignGaps:0}),i=G.paths.spline({alignGaps:1}),o=G.paths.stepped({alignGaps:1});switch(e){case"line":return r;case"bar":return t;case"area":return r;case"step":return o;case"spline":return i;default:return r}},Tt=(e,t,r,i)=>{switch(i){case"area":return ee(e,t,r);case"bar":return ee(e,t,r);default:return}},Ct=e=>{switch(e){case"bar":return 1;case"line":return 2;case"area":return 2;case"step":return 1.5;default:return 1}},ke=(e,t,r,i,o,s,a,n,l,c,p)=>{let u=e?.clientWidth??1050,m=e?.clientHeight??250,d=typeof t=="string"?String(t).toLowerCase().replaceAll("by","bytes"):t,h=vt(d==="1"?null:d),v=Ct(i),w={width:u,height:m,scales:{y:{range:{min:{mode:1,soft:0},max:{pad:2}}}},plugins:[xe(f=>{let g=h(f,2);return g.text+(g.suffix?.trim()||"")},o,n,l,r,p)],padding:c?[10,15,10,15]:[8,15,8,15],cursor:{y:!1,sync:{key:"_"},drag:{setScale:!0,x:!0,y:!1},move:(f,g,b)=>{let k=f.posToVal(g,"x"),y=f.data[0];if(!y||y.length===0)return[g,b];let x=0,T=0,C=y.length-1;for(;C-T>1;){let M=Math.floor((T+C)/2),H=y[M];H!=null&&H<k?T=M:C=M}let S=y[T],N=y[C];S!=null&&N!=null?x=Math.abs(S-k)<Math.abs(N-k)?T:C:S!=null?x=T:N!=null&&(x=C);let z=x;for(let M=x;M>=0;M--){let H=!1;for(let Q=1;Q<f.data.length;Q++){let re=f.data[Q];if(re&&re[M]!=null){H=!0;break}}if(H){z=M;break}}let A=y[z];return A==null?[g,b]:[f.valToPos(A,"x"),b]}},series:[{},...r.map((f,g)=>({label:f.metric,stroke:ee(f,g,a),width:v,points:{show:!1},spanGaps:!0,paths:kt(i),fill:Tt(f,g,a,i)}))],axes:[fe(n,c),Te(h)],legend:{show:!1}};if(s){let f=w.axes?.[0],g=w.axes?.[1];f&&(f.stroke="#dadada",f.grid&&(f.grid.stroke="#2c3235")),g&&(g.stroke="#dadada",g.grid&&(g.grid.stroke="#2c3235"))}else{let f=w.axes?.[0],g=w.axes?.[1];f&&(f.stroke="#45556c"),g&&(g.stroke="#45556c")}return w};var Pt=(e,t,r,i)=>{let o=e.axes[r];if(i>1)return o?._size;let s=(o?.ticks?.size||0)+(o?.gap||0),a=(t??[]).reduce((n,l)=>l.length>n.length?l:n,"");return a!=""&&(e.ctx.font=o?.font?.[0]??e.ctx.font,s+=e.ctx.measureText(a).width/devicePixelRatio),Math.ceil(s)};function Te(e){return{gap:0,font:I,labelFont:I,grid:{show:!0,width:.5},ticks:{width:.5},values:(t,r)=>r.map(i=>{let o=e(i);return o.text+(o.suffix?.trim()||"")}),size:Pt}}function Ce(e,t){let r=[],i=e[0],o=i.length,s=Array(o).fill(0),a=[i];return e.forEach((n,l)=>{l!==0&&(t?a.push(n):a.push(n.map((c,p)=>s[p]=s[p]+(c||0))))}),e.forEach((n,l)=>{l===0||t||r.push({series:[e.findIndex((c,p)=>p>l),l]})}),{data:a,bands:r.filter(n=>n.series[1]>-1)}}import{jsx as Rt}from"react/jsx-runtime";function te(e){let{times:t,series:r,metadata:i,type:o,className:s,timeZone:a,options:n,tooltipAppearance:l,colors:c,orderByValues:p}=e,u=St(null),m=X(),d=V(),h=c||d.appearance.colors;return Ut(()=>{if(!r||r.length===0){console.warn("No series provided");return}let v=[t],w;r.forEach(x=>{let T=i[x.metric];w=ve(w,T),v.push(x.values)});let f=o==="bar"||o==="area",g=Ce(v,!f),b=u.current,k=ke(b,w,r,o,f,m,h,a,l,p),y=null;if(b){k.bands=g.bands,y=new Et({...k,...n},g.data,b);let x=new ResizeObserver(()=>{y?.setSize({width:b.clientWidth,height:b.clientHeight})});return x.observe(b),()=>{y?.destroy(),x.disconnect()}}},[r,t,o,m,i,a,l,h,p]),Rt("div",{ref:u,className:s})}import{jsx as O}from"react/jsx-runtime";function Mt({metrics:e,operator:t,attributes:r,groupBy:i,timeRange:o,startTime:s,endTime:a,interval:n,type:l="line",className:c,appearance:p}){let u=V(),m=o??u.timeRange,d=s??u.startTime,h=a??u.endTime,v=n??u.interval,w=r??u.attributes,f=i??u.groupBy,g=t??u.operator,b=p?.colors??u.appearance.colors,k=p?.orderByValues??u.appearance.orderByValues,{isLoading:y,data:x,hasError:T}=Y({queries:e.map(E=>({metrics:[E],operator:g,attributes:w,groupBy:f})),timeRange:m,startTime:d,endTime:h,interval:v}),{series:C,times:S,metadata:N}=x,z=C.every(E=>E.isEmpty),A=c||"h-full w-full";if(y){let E=p?.components?.Loading??u.appearance.components.Loading;return O("div",{className:A,children:O(E,{})})}if(z){let E=p?.components?.Empty??u.appearance.components.Empty;return O("div",{className:A,children:O(E,{})})}if(T){let E=p?.components?.Error??u.appearance.components.Error;return O("div",{className:A,children:O(E,{})})}return O(te,{times:S,series:C,metadata:N,type:l,className:A,tooltipAppearance:p?.components?.Tooltip??u.appearance.components.Tooltip,colors:b,orderByValues:k})}export{te as Chart,Z as Divider,Mt as TimeseriesChart,$ as UnblindClientProvider,Oe as UnblindProvider,K as UnblindScope,We as useLogs,Be as useMetrics,se as useRefresh,V as useScope,X as useTheme,Y as useTimeseries,R as useUnblindClientConfig,Ge as useUsage};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|