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