".concat(e,": ").concat(m[e],"
")})).join(""),P='');u.innerHTML="".concat(M,'
\n \n ').concat(P).concat(E,': ').concat(hs(p)," ").concat(c,'\n
\n ').concat(A,"
")}},Ds=n(2061),ks=n.n(Ds),Ss=function(e){var n=(0,t.useState)({width:0,height:0}),o=(0,r.Z)(n,2),i=o[0],a=o[1];return(0,t.useEffect)((function(){var t=new ResizeObserver((function(e){var t=e[0].contentRect,n=t.width,r=t.height;a({width:n,height:r})}));return e&&t.observe(e),function(){e&&t.unobserve(e)}}),[]),i};!function(e){e.xRange="xRange",e.yRange="yRange",e.data="data"}(ds||(ds={}));var Cs=function(e){var n=e.data,o=e.series,i=e.metrics,a=void 0===i?[]:i,u=e.period,l=e.yaxis,s=e.unit,c=e.setPeriod,d=e.container,f=(0,t.useRef)(null),p=(0,t.useState)(!1),h=(0,r.Z)(p,2),m=h[0],v=h[1],g=(0,t.useState)({min:u.start,max:u.end}),y=(0,r.Z)(g,2),b=y[0],x=y[1],Z=(0,t.useState)(),w=(0,r.Z)(Z,2),D=w[0],k=w[1],S=Ss(d),C=document.createElement("div");C.className="u-tooltip";var _={seriesIdx:null,dataIdx:void 0},E={left:0,top:0},M=(0,t.useCallback)(ks()((function(e){var t=e.min,n=e.max;c({from:new Date(1e3*t),to:new Date(1e3*n)})}),500),[]),A=function(e){var t=e.u,n=e.min,r=e.max,o=1e3*(r-n);o'+(n?e:Zk(e,!0))+""+(n?e:Zk(e,!0))+"\n".concat(e,"\n")}},{key:"html",value:function(e){return e}},{key:"heading",value:function(e,t,n,r){if(this.options.headerIds){var o=this.options.headerPrefix+r.slug(n);return"
\n":"
\n"}},{key:"list",value:function(e,t,n){var r=t?"ol":"ul";return"<"+r+(t&&1!==n?' start="'+n+'"':"")+">\n"+e+"\n"}},{key:"listitem",value:function(e){return"
".concat(e,"
\n")}},{key:"table",value:function(e,t){return t&&(t="".concat(t,"")),"".concat(e,"")}},{key:"br",value:function(){return this.options.xhtml?"":"
"}},{key:"del",value:function(e){return"
"+Zk(l.message+"",!0)+"";throw l}}Gk.options=Gk.setOptions=function(e){var t;return Fk(Gk.defaults,e),t=Gk.defaults,hk=t,Gk},Gk.getDefaults=pk,Gk.defaults=hk,Gk.use=function(){for(var e=arguments.length,t=new Array(e),n=0;n
"+Zk(r.message+"",!0)+"";throw r}},Gk.Parser=Xk,Gk.parser=Xk.parse,Gk.Renderer=Yk,Gk.TextRenderer=Uk,Gk.Lexer=Vk,Gk.lexer=Vk.lex,Gk.Tokenizer=zk,Gk.Slugger=qk,Gk.parse=Gk;Gk.options,Gk.setOptions,Gk.use,Gk.walkTokens,Gk.parseInline,Xk.parse,Vk.lex;var Kk,Qk,Jk,eS,tS,nS,rS,oS,iS=function(e){var n=e.title,o=e.description,i=e.unit,a=e.expr,u=e.showLegend,l=e.filename,s=e.alias,c=ao().time.period,d=uo(),f=(0,t.useRef)(null),p=(0,t.useState)(!0),h=(0,r.Z)(p,2),m=h[0],v=h[1],g=(0,t.useState)({enable:!1,value:c.step||1}),y=(0,r.Z)(g,2),b=y[0],x=y[1],Z=(0,t.useState)({limits:{enable:!1,range:{1:[0,0]}}}),w=(0,r.Z)(Z,2),D=w[0],k=w[1],S=(0,t.useMemo)((function(){return Array.isArray(a)&&a.every((function(e){return e}))}),[a]),C=Hv({predefinedQuery:S?a:[],display:"chart",visible:m,customStep:b}),_=C.isLoading,E=C.graphData,M=C.error,A=function(e){var t=vn({},D);t.limits.range=e,k(t)};return(0,t.useEffect)((function(){var e=new IntersectionObserver((function(e){e.forEach((function(e){return v(e.isIntersecting)}))}),{threshold:.1});return f.current&&e.observe(f.current),function(){f.current&&e.unobserve(f.current)}}),[]),S?(0,ie.BX)(fi,{border:"1px solid",borderRadius:"2px",borderColor:"divider",width:"100%",height:"100%",ref:f,children:[(0,ie.BX)(fi,{px:2,py:1,display:"flex",flexWrap:"wrap",width:"100%",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid",borderColor:"divider",children:[(0,ie.tZ)(xd,{arrow:!0,componentsProps:{tooltip:{sx:{maxWidth:"100%"}}},title:(0,ie.BX)(fi,{sx:{p:1},children:[o&&(0,ie.BX)(fi,{mb:2,children:[(0,ie.tZ)(cv,{fontWeight:"500",sx:{mb:.5,textDecoration:"underline"},children:"Description:"}),(0,ie.tZ)("div",{className:"panelDescription",dangerouslySetInnerHTML:{__html:Gk.parse(o)}})]}),(0,ie.BX)(fi,{children:[(0,ie.tZ)(cv,{fontWeight:"500",sx:{mb:.5,textDecoration:"underline"},children:"Queries:"}),(0,ie.tZ)("div",{children:a.map((function(e,t){return(0,ie.tZ)(fi,{mb:.5,children:e},"".concat(t,"_").concat(e))}))})]})]}),children:(0,ie.tZ)(fk.Z,{color:"info",sx:{mr:1}})}),(0,ie.tZ)(cv,{component:"div",variant:"subtitle1",fontWeight:500,sx:{mr:2,py:1,flexGrow:"1"},children:n||""}),(0,ie.tZ)(fi,{mr:2,py:1,children:(0,ie.tZ)(Rv,{defaultStep:c.step,customStepEnable:b.enable,setStep:function(e){return x(vn(vn({},b),{},{value:e}))},toggleEnableStep:function(){return x(vn(vn({},b),{},{enable:!b.enable}))}})}),(0,ie.tZ)(cg,{yaxis:D,setYaxisLimits:A,toggleEnableLimits:function(){var e=vn({},D);e.limits.enable=!e.limits.enable,k(e)}})]}),(0,ie.BX)(fi,{px:2,pb:2,children:[_&&(0,ie.tZ)(Ag,{isLoading:!0,height:"500px"}),M&&(0,ie.tZ)(_t,{color:"error",severity:"error",sx:{whiteSpace:"pre-wrap",mt:2},children:M}),E&&(0,ie.tZ)(Ed,{data:E,period:c,customStep:b,query:a,yaxis:D,unit:i,alias:s,showLegend:u,setYaxisLimits:A,setPeriod:function(e){var t=e.from,n=e.to;d({type:"SET_PERIOD",payload:{from:t,to:n}})}})]})]}):(0,ie.BX)(_t,{color:"error",severity:"error",sx:{m:4},children:[(0,ie.tZ)("code",{children:'"expr"'})," not found. Check the configuration file ",(0,ie.tZ)("b",{children:l}),"."]})},aS={position:"absolute",top:0,bottom:0,width:"10px",opacity:0,cursor:"ew-resize"},uS=function(e){var n=e.index,o=e.title,i=e.panels,a=e.filename,u=Ss(document.body),l=(0,t.useMemo)((function(){return u.width/12}),[u]),s=(0,t.useState)([]),c=(0,r.Z)(s,2),d=c[0],f=c[1];(0,t.useEffect)((function(){f(i.map((function(e){return e.width||12})))}),[i]);var p=(0,t.useState)({start:0,target:0,enable:!1}),h=(0,r.Z)(p,2),m=h[0],v=h[1],g=function(e){if(m.enable){var t=m.start,n=Math.ceil((t-e.clientX)/l);if(!(Math.abs(n)>=12)){var r=d.map((function(e,t){return e-(t===m.target?n:0)}));f(r)}}},y=function(){v(vn(vn({},m),{},{enable:!1}))};return(0,t.useEffect)((function(){return window.addEventListener("mousemove",g),window.addEventListener("mouseup",y),function(){window.removeEventListener("mousemove",g),window.removeEventListener("mouseup",y)}}),[m]),(0,ie.BX)(KD,{defaultExpanded:!n,sx:{boxShadow:"none"},children:[(0,ie.tZ)(ik,{sx:{px:3,bgcolor:"rgba(227, 242, 253, 0.6)"},"aria-controls":"panel".concat(n,"-content"),id:"panel".concat(n,"-header"),expandIcon:(0,ie.tZ)(dk.Z,{}),children:(0,ie.BX)(fi,{display:"flex",alignItems:"center",width:"100%",children:[o&&(0,ie.tZ)(cv,{variant:"h6",fontWeight:"bold",sx:{mr:2},children:o}),i&&(0,ie.BX)(cv,{variant:"body2",fontStyle:"italic",children:["(",i.length," panels)"]})]})}),(0,ie.tZ)(ck,{sx:{display:"grid",gridGap:"10px"},children:(0,ie.tZ)(rb,{container:!0,spacing:2,children:Array.isArray(i)&&i.length?i.map((function(e,t){return(0,ie.tZ)(rb,{item:!0,xs:d[t],sx:{transition:"200ms"},children:(0,ie.BX)(fi,{position:"relative",height:"100%",children:[(0,ie.tZ)(iS,{title:e.title,description:e.description,unit:e.unit,expr:e.expr,alias:e.alias,filename:a,showLegend:e.showLegend}),(0,ie.tZ)("button",{style:vn(vn({},aS),{},{right:0}),onMouseDown:function(e){return function(e,t){v({start:e.clientX,target:t,enable:!0})}(e,t)}})]})},t)})):(0,ie.BX)(_t,{color:"error",severity:"error",sx:{m:4},children:[(0,ie.tZ)("code",{children:'"panels"'})," not found. Check the configuration file ",(0,ie.tZ)("b",{children:a}),"."]})})})]})},lS=function(){var e=(0,t.useState)(),n=(0,r.Z)(e,2),o=n[0],i=n[1],a=(0,t.useState)(0),u=(0,r.Z)(a,2),l=u[0],s=u[1],c=(0,t.useMemo)((function(){return br()(o,[l,"filename"],"")}),[o,l]),d=(0,t.useMemo)((function(){return br()(o,[l,"rows"],[])}),[o,l]);return(0,t.useEffect)((function(){RD().then((function(e){return e.length&&i(e)}))}),[]),(0,ie.BX)(ie.HY,{children:[!o&&(0,ie.tZ)(_t,{color:"info",severity:"info",sx:{m:4},children:"Dashboards not found"}),o&&(0,ie.BX)(ie.HY,{children:[(0,ie.tZ)(fi,{sx:{borderBottom:1,borderColor:"divider"},children:(0,ie.tZ)(Jn,{value:l,onChange:function(e,t){return s(t)},"aria-label":"dashboard-tabs",children:o&&o.map((function(e,t){return(0,ie.tZ)(ur,{label:e.title||e.filename,id:"tab-".concat(t),"aria-controls":"tabpanel-".concat(t)},t)}))})}),(0,ie.tZ)(fi,{children:Array.isArray(d)&&d.length?d.map((function(e,t){return(0,ie.tZ)(uS,{index:t,filename:c,title:e.title,panels:e.panels},"".concat(l,"_").concat(t))})):(0,ie.BX)(_t,{color:"error",severity:"error",sx:{m:4},children:[(0,ie.tZ)("code",{children:'"rows"'})," not found. Check the configuration file ",(0,ie.tZ)("b",{children:c}),"."]})})]})]})},sS=function(e,t){var n=t.match?"&match[]=".concat(t.match):"";return"".concat(e,"/api/v1/status/tsdb?topN=").concat(t.topN,"&date=").concat(t.date).concat(n)},cS=jv(),dS=zv().serverURL,fS={totalSeries:0,totalLabelValuePairs:0,seriesCountByMetricName:[],seriesCountByLabelValuePair:[],labelValueCountByLabelName:[]},pS=(0,ht.Z)((0,ie.tZ)("path",{d:"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"}),"LastPage"),hS=(0,ht.Z)((0,ie.tZ)("path",{d:"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"}),"FirstPage"),mS=["backIconButtonProps","count","getItemAriaLabel","nextIconButtonProps","onPageChange","page","rowsPerPage","showFirstButton","showLastButton"],vS=t.forwardRef((function(e,t){var n=e.backIconButtonProps,r=e.count,i=e.getItemAriaLabel,a=e.nextIconButtonProps,u=e.onPageChange,l=e.page,s=e.rowsPerPage,c=e.showFirstButton,d=e.showLastButton,f=(0,X.Z)(e,mS),p=Ot();return(0,ie.BX)("div",(0,o.Z)({ref:t},f,{children:[c&&(0,ie.tZ)(pt,{onClick:function(e){u(e,0)},disabled:0===l,"aria-label":i("first",l),title:i("first",l),children:"rtl"===p.direction?Kk||(Kk=(0,ie.tZ)(pS,{})):Qk||(Qk=(0,ie.tZ)(hS,{}))}),(0,ie.tZ)(pt,(0,o.Z)({onClick:function(e){u(e,l-1)},disabled:0===l,color:"inherit","aria-label":i("previous",l),title:i("previous",l)},n,{children:"rtl"===p.direction?Jk||(Jk=(0,ie.tZ)(An,{})):eS||(eS=(0,ie.tZ)(Mn,{}))})),(0,ie.tZ)(pt,(0,o.Z)({onClick:function(e){u(e,l+1)},disabled:-1!==r&&l>=Math.ceil(r/s)-1,color:"inherit","aria-label":i("next",l),title:i("next",l)},a,{children:"rtl"===p.direction?tS||(tS=(0,ie.tZ)(Mn,{})):nS||(nS=(0,ie.tZ)(An,{}))})),d&&(0,ie.tZ)(pt,{onClick:function(e){u(e,Math.max(0,Math.ceil(r/s)-1))},disabled:l>=Math.ceil(r/s)-1,"aria-label":i("last",l),title:i("last",l),children:"rtl"===p.direction?rS||(rS=(0,ie.tZ)(hS,{})):oS||(oS=(0,ie.tZ)(pS,{}))})]}))})),gS=vS;function yS(e){return(0,ne.Z)("MuiTablePagination",e)}var bS,xS=(0,re.Z)("MuiTablePagination",["root","toolbar","spacer","selectLabel","selectRoot","select","selectIcon","input","menuItem","displayedRows","actions"]),ZS=["ActionsComponent","backIconButtonProps","className","colSpan","component","count","getItemAriaLabel","labelDisplayedRows","labelRowsPerPage","nextIconButtonProps","onPageChange","onRowsPerPageChange","page","rowsPerPage","rowsPerPageOptions","SelectProps","showFirstButton","showLastButton"],wS=(0,J.ZP)(Xd,{name:"MuiTablePagination",slot:"Root",overridesResolver:function(e,t){return t.root}})((function(e){var t=e.theme;return{overflow:"auto",color:t.palette.text.primary,fontSize:t.typography.pxToRem(14),"&:last-child":{padding:0}}})),DS=(0,J.ZP)(Qg,{name:"MuiTablePagination",slot:"Toolbar",overridesResolver:function(e,t){return(0,o.Z)((0,q.Z)({},"& .".concat(xS.actions),t.actions),t.toolbar)}})((function(e){var t,n=e.theme;return t={minHeight:52,paddingRight:2},(0,q.Z)(t,"".concat(n.breakpoints.up("xs")," and (orientation: landscape)"),{minHeight:52}),(0,q.Z)(t,n.breakpoints.up("sm"),{minHeight:52,paddingRight:2}),(0,q.Z)(t,"& .".concat(xS.actions),{flexShrink:0,marginLeft:20}),t})),kS=(0,J.ZP)("div",{name:"MuiTablePagination",slot:"Spacer",overridesResolver:function(e,t){return t.spacer}})({flex:"1 1 100%"}),SS=(0,J.ZP)("p",{name:"MuiTablePagination",slot:"SelectLabel",overridesResolver:function(e,t){return t.selectLabel}})((function(e){var t=e.theme;return(0,o.Z)({},t.typography.body2,{flexShrink:0})})),CS=(0,J.ZP)(Bm,{name:"MuiTablePagination",slot:"Select",overridesResolver:function(e,t){var n;return(0,o.Z)((n={},(0,q.Z)(n,"& .".concat(xS.selectIcon),t.selectIcon),(0,q.Z)(n,"& .".concat(xS.select),t.select),n),t.input,t.selectRoot)}})((0,q.Z)({color:"inherit",fontSize:"inherit",flexShrink:0,marginRight:32,marginLeft:8},"& .".concat(xS.select),{paddingLeft:8,paddingRight:24,textAlign:"right",textAlignLast:"right"})),_S=(0,J.ZP)(Jm,{name:"MuiTablePagination",slot:"MenuItem",overridesResolver:function(e,t){return t.menuItem}})({}),ES=(0,J.ZP)("p",{name:"MuiTablePagination",slot:"DisplayedRows",overridesResolver:function(e,t){return t.displayedRows}})((function(e){var t=e.theme;return(0,o.Z)({},t.typography.body2,{flexShrink:0})}));function MS(e){var t=e.from,n=e.to,r=e.count;return"".concat(t,"\u2013").concat(n," of ").concat(-1!==r?r:"more than ".concat(n))}function AS(e){return"Go to ".concat(e," page")}var PS=t.forwardRef((function(e,n){var r,i=(0,ee.Z)({props:e,name:"MuiTablePagination"}),a=i.ActionsComponent,u=void 0===a?gS:a,l=i.backIconButtonProps,s=i.className,c=i.colSpan,d=i.component,f=void 0===d?Xd:d,p=i.count,h=i.getItemAriaLabel,m=void 0===h?AS:h,v=i.labelDisplayedRows,g=void 0===v?MS:v,y=i.labelRowsPerPage,b=void 0===y?"Rows per page:":y,x=i.nextIconButtonProps,Z=i.onPageChange,w=i.onRowsPerPageChange,D=i.page,k=i.rowsPerPage,S=i.rowsPerPageOptions,C=void 0===S?[10,25,50,100]:S,_=i.SelectProps,E=void 0===_?{}:_,M=i.showFirstButton,A=void 0!==M&&M,P=i.showLastButton,T=void 0!==P&&P,R=(0,X.Z)(i,ZS),F=i,O=function(e){var t=e.classes;return(0,K.Z)({root:["root"],toolbar:["toolbar"],spacer:["spacer"],selectLabel:["selectLabel"],select:["select"],input:["input"],selectIcon:["selectIcon"],menuItem:["menuItem"],displayedRows:["displayedRows"],actions:["actions"]},yS,t)}(F),B=E.native?"option":_S;f!==Xd&&"td"!==f||(r=c||1e3);var I=(0,ld.Z)(E.id),L=(0,ld.Z)(E.labelId);return(0,ie.tZ)(wS,(0,o.Z)({colSpan:r,ref:n,as:f,ownerState:F,className:(0,G.Z)(O.root,s)},R,{children:(0,ie.BX)(DS,{className:O.toolbar,children:[(0,ie.tZ)(kS,{className:O.spacer}),C.length>1&&(0,ie.tZ)(SS,{className:O.selectLabel,id:L,children:b}),C.length>1&&(0,ie.tZ)(CS,(0,o.Z)({variant:"standard",input:bS||(bS=(0,ie.tZ)(qf,{})),value:k,onChange:w,id:I,labelId:L},E,{classes:(0,o.Z)({},E.classes,{root:(0,G.Z)(O.input,O.selectRoot,(E.classes||{}).root),select:(0,G.Z)(O.select,(E.classes||{}).select),icon:(0,G.Z)(O.selectIcon,(E.classes||{}).icon)}),children:C.map((function(e){return(0,t.createElement)(B,(0,o.Z)({},!Ps(B)&&{ownerState:F},{className:O.menuItem,key:e.label?e.label:e,value:e.value?e.value:e}),e.label?e.label:e)}))})),(0,ie.tZ)(ES,{className:O.displayedRows,children:g({from:0===p?0:D*k+1,to:-1===p?(D+1)*k:-1===k?p:Math.min(p,(D+1)*k),count:-1===p?-1:p,page:D})}),(0,ie.tZ)(u,{className:O.actions,backIconButtonProps:l,count:p,nextIconButtonProps:x,onPageChange:Z,page:D,rowsPerPage:k,showFirstButton:A,showLastButton:T,getItemAriaLabel:m})]})}))})),TS=PS,RS={border:0,clip:"rect(0 0 0 0)",height:"1px",margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:"1px"};function FS(e){var t=e.order,n=e.orderBy,r=e.onRequestSort,o=e.headerCells;return(0,ie.tZ)(lf,{children:(0,ie.tZ)(hf,{children:o.map((function(e){return(0,ie.tZ)(Xd,{align:e.numeric?"right":"left",sortDirection:n===e.id&&t,children:(0,ie.BX)(wf,{active:n===e.id,direction:n===e.id?t:"asc",onClick:(o=e.id,function(e){r(e,o)}),children:[e.label,n===e.id?(0,ie.tZ)(fi,{component:"span",sx:RS,children:"desc"===t?"sorted descending":"sorted ascending"}):null]})},e.id);var o}))})})}function OS(e,t,n){return t[n]
".concat(e,": ").concat(m[e],"
")})).join(""),T='');u.innerHTML="".concat(A,'
\n \n ').concat(T).concat(E,': ').concat(os(p)," ").concat(c,'\n
\n ').concat(M,"
")}},ps=n(2061),hs=n.n(ps),ms=function(e){var n=(0,t.useState)({width:0,height:0}),o=(0,r.Z)(n,2),i=o[0],a=o[1];return(0,t.useEffect)((function(){var t=new ResizeObserver((function(e){var t=e[0].contentRect,n=t.width,r=t.height;a({width:n,height:r})}));return e&&t.observe(e),function(){e&&t.unobserve(e)}}),[]),i};!function(e){e.xRange="xRange",e.yRange="yRange",e.data="data"}(ts||(ts={}));var vs=function(e){var n=e.data,o=e.series,i=e.metrics,a=void 0===i?[]:i,u=e.period,l=e.yaxis,s=e.unit,c=e.setPeriod,d=e.container,f=(0,t.useRef)(null),p=(0,t.useState)(!1),h=(0,r.Z)(p,2),m=h[0],v=h[1],g=(0,t.useState)({min:u.start,max:u.end}),y=(0,r.Z)(g,2),b=y[0],x=y[1],Z=(0,t.useState)(),w=(0,r.Z)(Z,2),D=w[0],k=w[1],S=ms(d),C=document.createElement("div");C.className="u-tooltip";var _={seriesIdx:null,dataIdx:void 0},E={left:0,top:0},A=(0,t.useCallback)(hs()((function(e){var t=e.min,n=e.max;c({from:new Date(1e3*t),to:new Date(1e3*n)})}),500),[]),M=function(e){var t=e.u,n=e.min,r=e.max,o=1e3*(r-n);o'+(n?e:ND(e,!0))+""+(n?e:ND(e,!0))+"\n".concat(e,"\n")}},{key:"html",value:function(e){return e}},{key:"heading",value:function(e,t,n,r){if(this.options.headerIds){var o=this.options.headerPrefix+r.slug(n);return"
\n":"
\n"}},{key:"list",value:function(e,t,n){var r=t?"ol":"ul";return"<"+r+(t&&1!==n?' start="'+n+'"':"")+">\n"+e+"\n"}},{key:"listitem",value:function(e){return"
".concat(e,"
\n")}},{key:"table",value:function(e,t){return t&&(t="".concat(t,"")),"".concat(e,"")}},{key:"br",value:function(){return this.options.xhtml?"":"
"}},{key:"del",value:function(e){return"
"+ND(l.message+"",!0)+"";throw l}}hk.options=hk.setOptions=function(e){var t;return QD(hk.defaults,e),t=hk.defaults,PD=t,hk},hk.getDefaults=TD,hk.defaults=PD,hk.use=function(){for(var e=arguments.length,t=new Array(e),n=0;n
"+ND(r.message+"",!0)+"";throw r}},hk.Parser=pk,hk.parser=pk.parse,hk.Renderer=ck,hk.TextRenderer=dk,hk.Lexer=sk,hk.lexer=sk.lex,hk.Tokenizer=ok,hk.Slugger=fk,hk.parse=hk;hk.options,hk.setOptions,hk.use,hk.walkTokens,hk.parseInline,pk.parse,sk.lex;var mk=function(e){var n=e.title,o=e.description,i=e.unit,a=e.expr,u=e.showLegend,l=e.filename,s=e.alias,c=no().time.period,d=ro(),f=(0,t.useRef)(null),p=(0,t.useState)(!0),h=(0,r.Z)(p,2),m=h[0],v=h[1],g=(0,t.useState)({enable:!1,value:c.step||1}),y=(0,r.Z)(g,2),b=y[0],x=y[1],Z=(0,t.useState)({limits:{enable:!1,range:{1:[0,0]}}}),w=(0,r.Z)(Z,2),D=w[0],k=w[1],S=(0,t.useMemo)((function(){return Array.isArray(a)&&a.every((function(e){return e}))}),[a]),C=Fv({predefinedQuery:S?a:[],display:"chart",visible:m,customStep:b}),_=C.isLoading,E=C.graphData,A=C.error,M=function(e){var t=vn({},D);t.limits.range=e,k(t)};return(0,t.useEffect)((function(){var e=new IntersectionObserver((function(e){e.forEach((function(e){return v(e.isIntersecting)}))}),{threshold:.1});return f.current&&e.observe(f.current),function(){f.current&&e.unobserve(f.current)}}),[]),S?(0,ie.BX)(ni,{border:"1px solid",borderRadius:"2px",borderColor:"divider",width:"100%",height:"100%",ref:f,children:[(0,ie.BX)(ni,{px:2,py:1,display:"flex",flexWrap:"wrap",width:"100%",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid",borderColor:"divider",children:[(0,ie.tZ)(cd,{arrow:!0,componentsProps:{tooltip:{sx:{maxWidth:"100%"}}},title:(0,ie.BX)(ni,{sx:{p:1},children:[o&&(0,ie.BX)(ni,{mb:2,children:[(0,ie.tZ)(ev,{fontWeight:"500",sx:{mb:.5,textDecoration:"underline"},children:"Description:"}),(0,ie.tZ)("div",{className:"panelDescription",dangerouslySetInnerHTML:{__html:hk.parse(o)}})]}),(0,ie.BX)(ni,{children:[(0,ie.tZ)(ev,{fontWeight:"500",sx:{mb:.5,textDecoration:"underline"},children:"Queries:"}),(0,ie.tZ)("div",{children:a.map((function(e,t){return(0,ie.tZ)(ni,{mb:.5,children:e},"".concat(t,"_").concat(e))}))})]})]}),children:(0,ie.tZ)(MD.Z,{color:"info",sx:{mr:1}})}),(0,ie.tZ)(ev,{component:"div",variant:"subtitle1",fontWeight:500,sx:{mr:2,py:1,flexGrow:"1"},children:n||""}),(0,ie.tZ)(ni,{mr:2,py:1,children:(0,ie.tZ)(Dv,{defaultStep:c.step,customStepEnable:b.enable,setStep:function(e){return x(vn(vn({},b),{},{value:e}))},toggleEnableStep:function(){return x(vn(vn({},b),{},{enable:!b.enable}))}})}),(0,ie.tZ)(eg,{yaxis:D,setYaxisLimits:M,toggleEnableLimits:function(){var e=vn({},D);e.limits.enable=!e.limits.enable,k(e)}})]}),(0,ie.BX)(ni,{px:2,pb:2,children:[_&&(0,ie.tZ)(bg,{isLoading:!0,height:"500px"}),A&&(0,ie.tZ)(_t,{color:"error",severity:"error",sx:{whiteSpace:"pre-wrap",mt:2},children:A}),E&&(0,ie.tZ)(yd,{data:E,period:c,customStep:b,query:a,yaxis:D,unit:i,alias:s,showLegend:u,setYaxisLimits:M,setPeriod:function(e){var t=e.from,n=e.to;d({type:"SET_PERIOD",payload:{from:t,to:n}})}})]})]}):(0,ie.BX)(_t,{color:"error",severity:"error",sx:{m:4},children:[(0,ie.tZ)("code",{children:'"expr"'})," not found. Check the configuration file ",(0,ie.tZ)("b",{children:l}),"."]})},vk={position:"absolute",top:0,bottom:0,width:"10px",opacity:0,cursor:"ew-resize"},gk=function(e){var n=e.index,o=e.title,i=e.panels,a=e.filename,u=ms(document.body),l=(0,t.useMemo)((function(){return u.width/12}),[u]),s=(0,t.useState)([]),c=(0,r.Z)(s,2),d=c[0],f=c[1];(0,t.useEffect)((function(){f(i.map((function(e){return e.width||12})))}),[i]);var p=(0,t.useState)({start:0,target:0,enable:!1}),h=(0,r.Z)(p,2),m=h[0],v=h[1],g=function(e){if(m.enable){var t=m.start,n=Math.ceil((t-e.clientX)/l);if(!(Math.abs(n)>=12)){var r=d.map((function(e,t){return e-(t===m.target?n:0)}));f(r)}}},y=function(){v(vn(vn({},m),{},{enable:!1}))};return(0,t.useEffect)((function(){return window.addEventListener("mousemove",g),window.addEventListener("mouseup",y),function(){window.removeEventListener("mousemove",g),window.removeEventListener("mouseup",y)}}),[m]),(0,ie.BX)(mD,{defaultExpanded:!n,sx:{boxShadow:"none"},children:[(0,ie.tZ)(DD,{sx:{px:3,bgcolor:"rgba(227, 242, 253, 0.6)"},"aria-controls":"panel".concat(n,"-content"),id:"panel".concat(n,"-header"),expandIcon:(0,ie.tZ)(AD.Z,{}),children:(0,ie.BX)(ni,{display:"flex",alignItems:"center",width:"100%",children:[o&&(0,ie.tZ)(ev,{variant:"h6",fontWeight:"bold",sx:{mr:2},children:o}),i&&(0,ie.BX)(ev,{variant:"body2",fontStyle:"italic",children:["(",i.length," panels)"]})]})}),(0,ie.tZ)(ED,{sx:{display:"grid",gridGap:"10px"},children:(0,ie.tZ)($y,{container:!0,spacing:2,children:Array.isArray(i)&&i.length?i.map((function(e,t){return(0,ie.tZ)($y,{item:!0,xs:d[t],sx:{transition:"200ms"},children:(0,ie.BX)(ni,{position:"relative",height:"100%",children:[(0,ie.tZ)(mk,{title:e.title,description:e.description,unit:e.unit,expr:e.expr,alias:e.alias,filename:a,showLegend:e.showLegend}),(0,ie.tZ)("button",{style:vn(vn({},vk),{},{right:0}),onMouseDown:function(e){return function(e,t){v({start:e.clientX,target:t,enable:!0})}(e,t)}})]})},t)})):(0,ie.BX)(_t,{color:"error",severity:"error",sx:{m:4},children:[(0,ie.tZ)("code",{children:'"panels"'})," not found. Check the configuration file ",(0,ie.tZ)("b",{children:a}),"."]})})})]})},yk=function(){var e=(0,t.useState)(),n=(0,r.Z)(e,2),o=n[0],i=n[1],a=(0,t.useState)(0),u=(0,r.Z)(a,2),l=u[0],s=u[1],c=(0,t.useMemo)((function(){return yr()(o,[l,"filename"],"")}),[o,l]),d=(0,t.useMemo)((function(){return yr()(o,[l,"rows"],[])}),[o,l]);return(0,t.useEffect)((function(){Kw().then((function(e){return e.length&&i(e)}))}),[]),(0,ie.BX)(ie.HY,{children:[!o&&(0,ie.tZ)(_t,{color:"info",severity:"info",sx:{m:4},children:"Dashboards not found"}),o&&(0,ie.BX)(ie.HY,{children:[(0,ie.tZ)(ni,{sx:{borderBottom:1,borderColor:"divider"},children:(0,ie.tZ)(Jn,{value:l,onChange:function(e,t){return s(t)},"aria-label":"dashboard-tabs",children:o&&o.map((function(e,t){return(0,ie.tZ)(ar,{label:e.title||e.filename,id:"tab-".concat(t),"aria-controls":"tabpanel-".concat(t)},t)}))})}),(0,ie.tZ)(ni,{children:Array.isArray(d)&&d.length?d.map((function(e,t){return(0,ie.tZ)(gk,{index:t,filename:c,title:e.title,panels:e.panels},"".concat(l,"_").concat(t))})):(0,ie.BX)(_t,{color:"error",severity:"error",sx:{m:4},children:[(0,ie.tZ)("code",{children:'"rows"'})," not found. Check the configuration file ",(0,ie.tZ)("b",{children:c}),"."]})})]})]})},bk=function(){return(0,ie.tZ)(ie.HY,{children:(0,ie.BX)(V,{children:[(0,ie.tZ)(Bo,{})," ",(0,ie.BX)(Lo,{dateAdapter:Vo,children:[" ",(0,ie.tZ)(So,{injectFirst:!0,children:(0,ie.BX)(To,{theme:Do,children:[" ",(0,ie.BX)(io,{children:[" ",(0,ie.BX)(mo,{children:[" ",(0,ie.BX)(Zo,{children:[" ",(0,ie.BX)(hn,{children:[" ",(0,ie.tZ)(j,{children:(0,ie.BX)(N,{path:"/",element:(0,ie.tZ)(Xw,{}),children:[(0,ie.tZ)(N,{path:br,element:(0,ie.tZ)(xg,{})}),(0,ie.tZ)(N,{path:xr,element:(0,ie.tZ)(yk,{})})]})})]})]})]})]})]})})]})]})})},xk=function(e){e&&e instanceof Function&&n.e(27).then(n.bind(n,4027)).then((function(t){var n=t.getCLS,r=t.getFID,o=t.getFCP,i=t.getLCP,a=t.getTTFB;n(e),r(e),o(e),i(e),a(e)}))},Zk=document.getElementById("root");Zk&&(0,t.render)((0,ie.tZ)(bk,{}),Zk),xk()}()}(); \ No newline at end of file diff --git a/app/vmstorage/transport/server.go b/app/vmstorage/transport/server.go index 412cba680a..901f28197c 100644 --- a/app/vmstorage/transport/server.go +++ b/app/vmstorage/transport/server.go @@ -959,6 +959,12 @@ func (s *Server) processVMSelectTSDBStatus(ctx *vmselectRequestCtx) error { if err := writeTopHeapEntries(ctx, status.SeriesCountByLabelValuePair); err != nil { return fmt.Errorf("cannot write seriesCountByLabelValuePair to vmselect: %w", err) } + if err := ctx.writeUint64(status.TotalSeries); err != nil { + return fmt.Errorf("cannot write totalSeries to vmselect: %w", err) + } + if err := ctx.writeUint64(status.TotalLabelValuePairs); err != nil { + return fmt.Errorf("cannot write totalLabelValuePairs to vmselect: %w", err) + } return nil } diff --git a/app/vmui/packages/vmui/public/favicon.ico b/app/vmui/packages/vmui/public/favicon.ico new file mode 100644 index 0000000000..efeb457029 Binary files /dev/null and b/app/vmui/packages/vmui/public/favicon.ico differ diff --git a/app/vmui/packages/vmui/src/App.tsx b/app/vmui/packages/vmui/src/App.tsx index 012c16f3ba..f039f87549 100644 --- a/app/vmui/packages/vmui/src/App.tsx +++ b/app/vmui/packages/vmui/src/App.tsx @@ -4,6 +4,7 @@ import {SnackbarProvider} from "./contexts/Snackbar"; import {StateProvider} from "./state/common/StateContext"; import {AuthStateProvider} from "./state/auth/AuthStateContext"; import {GraphStateProvider} from "./state/graph/GraphStateContext"; +import {CardinalityStateProvider} from "./state/cardinality/CardinalityStateContext"; import THEME from "./theme/theme"; import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; @@ -14,6 +15,7 @@ import router from "./router/index"; import CustomPanel from "./components/CustomPanel/CustomPanel"; import HomeLayout from "./components/Home/HomeLayout"; import DashboardsLayout from "./components/PredefinedPanels/DashboardsLayout"; +import CardinalityPanel from "./components/CardinalityPanel/CardinalityPanel"; const App: FC = () => { @@ -27,14 +29,17 @@ const App: FC = () => {
+
+
+
+
+ {`${props.value.toFixed(2)}%`}
+
+
+);
diff --git a/app/vmui/packages/vmui/src/components/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx b/app/vmui/packages/vmui/src/components/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
new file mode 100644
index 0000000000..e04254c691
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
@@ -0,0 +1,78 @@
+import React, {ChangeEvent, FC} from "react";
+import Box from "@mui/material/Box";
+import QueryEditor from "../../CustomPanel/Configurator/Query/QueryEditor";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
+import {useFetchQueryOptions} from "../../../hooks/useFetchQueryOptions";
+import {useAppDispatch, useAppState} from "../../../state/common/StateContext";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import BasicSwitch from "../../../theme/switch";
+import {saveToStorage} from "../../../utils/storage";
+import TextField from "@mui/material/TextField";
+import {ErrorTypes} from "../../../types";
+
+export interface CardinalityConfiguratorProps {
+ onSetHistory: (step: number, index: number) => void;
+ onSetQuery: (query: string, index: number) => void;
+ onRunQuery: () => void;
+ onTopNChange: (e: ChangeEvent) => void;
+ query: string;
+ topN: number;
+ error?: ErrorTypes | string;
+}
+
+const CardinalityConfigurator: FC = ({
+ topN,
+ error,
+ query,
+ onSetHistory,
+ onRunQuery,
+ onSetQuery,
+ onTopNChange }) => {
+ const dispatch = useAppDispatch();
+ const {queryControls: {autocomplete}} = useAppState();
+ const {queryOptions} = useFetchQueryOptions();
+
+ const onChangeAutocomplete = () => {
+ dispatch({type: "TOGGLE_AUTOCOMPLETE"});
+ saveToStorage("AUTOCOMPLETE", !autocomplete);
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+ ;
+};
+
+export default CardinalityConfigurator;
diff --git a/app/vmui/packages/vmui/src/components/CardinalityPanel/CardinalityPanel.tsx b/app/vmui/packages/vmui/src/components/CardinalityPanel/CardinalityPanel.tsx
new file mode 100644
index 0000000000..38fd1d0888
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/CardinalityPanel/CardinalityPanel.tsx
@@ -0,0 +1,157 @@
+import React, {ChangeEvent, FC, useState} from "react";
+import {SyntheticEvent} from "react";
+import {Typography, Grid, Alert, Box, Tabs, Tab, Tooltip} from "@mui/material";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import ShowChartIcon from "@mui/icons-material/ShowChart";
+import {useFetchQuery} from "../../hooks/useCardinalityFetch";
+import EnhancedTable from "../Table/Table";
+import {TSDBStatus, TopHeapEntry, DefaultState, Tabs as TabsType, Containers} from "./types";
+import {
+ defaultHeadCells,
+ headCellsWithProgress,
+ SPINNER_TITLE,
+ spinnerContainerStyles
+} from "./consts";
+import {defaultProperties, progressCount, queryUpdater, tableTitles} from "./helpers";
+import {Data} from "../Table/types";
+import BarChart from "../BarChart/BarChart";
+import CardinalityConfigurator from "./CardinalityConfigurator/CardinalityConfigurator";
+import {barOptions} from "../BarChart/consts";
+import Spinner from "../common/Spinner";
+import TabPanel from "../TabPanel/TabPanel";
+import {useCardinalityDispatch, useCardinalityState} from "../../state/cardinality/CardinalityStateContext";
+import {tableCells} from "./TableCells/TableCells";
+
+const CardinalityPanel: FC = () => {
+ const cardinalityDispatch = useCardinalityDispatch();
+
+ const {topN, match, date} = useCardinalityState();
+ const configError = "";
+ const [query, setQuery] = useState(match || "");
+ const [queryHistoryIndex, setQueryHistoryIndex] = useState(0);
+ const [queryHistory, setQueryHistory] = useState([]);
+
+ const onRunQuery = () => {
+ setQueryHistory(prev => [...prev, query]);
+ setQueryHistoryIndex(prev => prev + 1);
+ cardinalityDispatch({type: "SET_MATCH", payload: query});
+ cardinalityDispatch({type: "RUN_QUERY"});
+ };
+
+ const onSetQuery = (query: string) => {
+ setQuery(query);
+ };
+
+ const onSetHistory = (step: number) => {
+ const newIndexHistory = queryHistoryIndex + step;
+ if (newIndexHistory < 0 || newIndexHistory >= queryHistory.length) return;
+ setQueryHistoryIndex(newIndexHistory);
+ setQuery(queryHistory[newIndexHistory]);
+ };
+
+ const onTopNChange = (e: ChangeEvent) => {
+ cardinalityDispatch({type: "SET_TOP_N", payload: +e.target.value});
+ };
+
+ const {isLoading, tsdbStatus, error} = useFetchQuery();
+ const defaultProps = defaultProperties(tsdbStatus);
+ const [stateTabs, setTab] = useState(defaultProps.defaultState);
+
+ const handleTabChange = (e: SyntheticEvent, newValue: number) => {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ setTab({...stateTabs, [e.target.id]: newValue});
+ };
+
+ const handleFilterClick = (key: string) => (e: SyntheticEvent) => {
+ const name = e.currentTarget.id;
+ const query = queryUpdater[key](name);
+ setQuery(query);
+ setQueryHistory(prev => [...prev, query]);
+ setQueryHistoryIndex(prev => prev + 1);
+ cardinalityDispatch({type: "SET_MATCH", payload: query});
+ cardinalityDispatch({type: "RUN_QUERY"});
+ };
+
+ return (
+ <>
+ {isLoading &&
+ {SPINNER_TITLE}
+ }
+ />}
+ {error} }
+ {
+ Analyzed {tsdbStatus.totalSeries} series and {tsdbStatus.totalLabelValuePairs} label=value pairs
+ at {date} {match && for series selector {match}}. Show top {topN} entries per table.
+ }
+ {Object.keys(tsdbStatus).map((key ) => {
+ if (key == "totalSeries" || key == "totalLabelValuePairs") return null;
+ const tableTitle = tableTitles[key];
+ const rows = tsdbStatus[key as keyof TSDBStatus] as unknown as Data[];
+ rows.forEach((row) => {
+ progressCount(tsdbStatus.totalSeries, key, row);
+ row.actions = "0";
+ });
+ const headerCells = (key == "seriesCountByMetricName" || key == "seriesCountByLabelValuePair") ? headCellsWithProgress : defaultHeadCells;
+ return (
+ <>
+
+
+
+ {tableTitle}
+
+
+
+ {defaultProps.tabs[key as keyof TabsType].map((title: string, i: number) =>
+
+
+ {defaultProps.tabs[key as keyof TabsType].map((_,idx) =>
+
+
+
+ );
+ })}
+
+ );
+};
+
+export default CardinalityPanel;
diff --git a/app/vmui/packages/vmui/src/components/CardinalityPanel/TableCells/TableCells.tsx b/app/vmui/packages/vmui/src/components/CardinalityPanel/TableCells/TableCells.tsx
new file mode 100644
index 0000000000..f47fc88217
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/CardinalityPanel/TableCells/TableCells.tsx
@@ -0,0 +1,50 @@
+import {TableCell, ButtonGroup} from "@mui/material";
+import {Data} from "../../Table/types";
+import {BorderLinearProgressWithLabel} from "../../BorderLineProgress/BorderLinearProgress";
+import React from "preact/compat";
+import IconButton from "@mui/material/IconButton";
+import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
+import Tooltip from "@mui/material/Tooltip";
+import {SyntheticEvent} from "react";
+import dayjs from "dayjs";
+
+export const tableCells = (
+ row: Data,
+ date: string | null,
+ onFilterClick: (e: SyntheticEvent) => void) => {
+ const pathname = window.location.pathname;
+ const withday = dayjs(date).add(1, "day").toDate();
+ return Object.keys(row).map((key, idx) => {
+ if (idx === 0) {
+ return (
+ {row[key as keyof Data]}
+ );
+ }
+ if (key === "progressValue") {
+ return (
+
+
+ );
+ }
+ if (key === "actions") {
+ const title = `Filter by ${row.name}`;
+ return (
+
+
+
+
+
+
+ );
+ }
+ return ({row[key as keyof Data]} );
+ });
+};
diff --git a/app/vmui/packages/vmui/src/components/CardinalityPanel/consts.ts b/app/vmui/packages/vmui/src/components/CardinalityPanel/consts.ts
new file mode 100644
index 0000000000..246c27d100
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/CardinalityPanel/consts.ts
@@ -0,0 +1,44 @@
+import {HeadCell} from "../Table/types";
+
+export const headCellsWithProgress = [
+ {
+ disablePadding: false,
+ id: "name",
+ label: "Name",
+ numeric: false,
+ },
+ {
+ disablePadding: false,
+ id: "value",
+ label: "Value",
+ numeric: false,
+ },
+ {
+ disablePadding: false,
+ id: "percentage",
+ label: "Percent of series",
+ numeric: false,
+ },
+ {
+ disablePadding: false,
+ id: "action",
+ label: "Action",
+ numeric: false,
+ }
+] as HeadCell[];
+
+export const defaultHeadCells = headCellsWithProgress.filter((head) => head.id!=="percentage");
+
+export const spinnerContainerStyles = (height: string) => {
+ return {
+ width: "100%",
+ maxWidth: "100%",
+ position: "absolute",
+ height: height ?? "50%",
+ background: "rgba(255, 255, 255, 0.7)",
+ pointerEvents: "none",
+ zIndex: 1000,
+ };
+};
+
+export const SPINNER_TITLE = "Please wait while cardinality stats is calculated. This may take some time if the db contains big number of time series";
diff --git a/app/vmui/packages/vmui/src/components/CardinalityPanel/helpers.ts b/app/vmui/packages/vmui/src/components/CardinalityPanel/helpers.ts
new file mode 100644
index 0000000000..9129f64a6f
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/CardinalityPanel/helpers.ts
@@ -0,0 +1,59 @@
+import {Containers, DefaultState, QueryUpdater, Tabs, TSDBStatus, TypographyFunctions} from "./types";
+import {Data} from "../Table/types";
+import {useRef} from "preact/compat";
+
+export const tableTitles: {[key: string]: string} = {
+ "seriesCountByMetricName": "Metric names with the highest number of series",
+ "seriesCountByLabelValuePair": "Label=value pairs with the highest number of series",
+ "labelValueCountByLabelName": "Labels with the highest number of unique values",
+};
+
+export const queryUpdater: QueryUpdater = {
+ labelValueCountByLabelName: (query: string): string => `{${query}!=""}`,
+ seriesCountByLabelValuePair: (query: string): string => {
+ const a = query.split("=");
+ const label = a[0];
+ const value = a.slice(1).join("=");
+ return getSeriesSelector(label, value);
+ },
+ seriesCountByMetricName: (query: string): string => {
+ return getSeriesSelector("__name__", query);
+ },
+};
+
+const getSeriesSelector = (label: string, value: string): string => {
+ return "{" + label + "=" + JSON.stringify(value) + "}";
+};
+
+export const progressCount = (totalSeries: number, key: string, row: Data): Data => {
+ if (key === "seriesCountByMetricName" || key === "seriesCountByLabelValuePair") {
+ row.progressValue = row.value / totalSeries * 100;
+ return row;
+ }
+ return row;
+};
+
+export const defaultProperties = (tsdbStatus: TSDBStatus) => {
+ return Object.keys(tsdbStatus).reduce((acc, key) => {
+ if (key === "totalSeries" || key === "totalLabelValuePairs") return acc;
+ return {
+ ...acc,
+ tabs:{
+ ...acc.tabs,
+ [key]: ["table", "graph"],
+ },
+ containerRefs: {
+ ...acc.containerRefs,
+ [key]: useRef(null),
+ },
+ defaultState: {
+ ...acc.defaultState,
+ [key]: 0,
+ },
+ };
+ }, {
+ tabs:{} as Tabs,
+ containerRefs: {} as Containers,
+ defaultState: {} as DefaultState,
+ });
+};
diff --git a/app/vmui/packages/vmui/src/components/CardinalityPanel/types.ts b/app/vmui/packages/vmui/src/components/CardinalityPanel/types.ts
new file mode 100644
index 0000000000..41e1cb52b9
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/CardinalityPanel/types.ts
@@ -0,0 +1,40 @@
+import {MutableRef} from "preact/hooks";
+
+export interface TSDBStatus {
+ labelValueCountByLabelName: TopHeapEntry[];
+ seriesCountByLabelValuePair: TopHeapEntry[];
+ seriesCountByMetricName: TopHeapEntry[];
+ totalSeries: number;
+ totalLabelValuePairs: number;
+}
+
+export interface TopHeapEntry {
+ name: string;
+ count: number;
+}
+
+export type TypographyFunctions = {
+ [key: string]: (value: number) => string,
+}
+
+export type QueryUpdater = {
+ [key: string]: (query: string) => string,
+}
+
+export interface Tabs {
+ labelValueCountByLabelName: string[];
+ seriesCountByLabelValuePair: string[];
+ seriesCountByMetricName: string[];
+}
+
+export interface Containers {
+ labelValueCountByLabelName: MutableRef;
+ seriesCountByLabelValuePair: MutableRef;
+ seriesCountByMetricName: MutableRef;
+}
+
+export interface DefaultState {
+ labelValueCountByLabelName: number;
+ seriesCountByLabelValuePair: number;
+ seriesCountByMetricName: number;
+}
diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryConfigurator.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryConfigurator.tsx
index a84980b0c0..78d5fcae63 100644
--- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryConfigurator.tsx
@@ -72,8 +72,10 @@ const QueryConfigurator: FC = ({error, queryOptions}) =>
{query.map((q, i) =>
-
+
= ({error, queryOptions}) =>
;
};
-export default QueryConfigurator;
\ No newline at end of file
+export default QueryConfigurator;
diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryEditor.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryEditor.tsx
index 94723ce4bd..8cb055bb7c 100644
--- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryEditor.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryEditor.tsx
@@ -18,6 +18,7 @@ export interface QueryEditorProps {
autocomplete: boolean;
error?: ErrorTypes | string;
queryOptions: string[];
+ label: string;
}
const QueryEditor: FC = ({
@@ -28,7 +29,8 @@ const QueryEditor: FC = ({
runQuery,
autocomplete,
error,
- queryOptions
+ queryOptions,
+ label,
}) => {
const [focusField, setFocusField] = useState(false);
@@ -99,8 +101,9 @@ const QueryEditor: FC = ({
setFocusField(true)}
onBlur={(e) => {
diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/CustomPanel.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/CustomPanel.tsx
index 01996464f3..1b700cc789 100644
--- a/app/vmui/packages/vmui/src/components/CustomPanel/CustomPanel.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/CustomPanel.tsx
@@ -12,6 +12,7 @@ import GraphSettings from "./Configurator/Graph/GraphSettings";
import {useGraphDispatch, useGraphState} from "../../state/graph/GraphStateContext";
import {AxisRange} from "../../state/graph/reducer";
import Spinner from "../common/Spinner";
+import {useFetchQueryOptions} from "../../hooks/useFetchQueryOptions";
const CustomPanel: FC = () => {
@@ -33,7 +34,8 @@ const CustomPanel: FC = () => {
dispatch({type: "SET_PERIOD", payload: {from, to}});
};
- const {isLoading, liveData, graphData, error, queryOptions} = useFetchQuery({
+ const {queryOptions} = useFetchQueryOptions();
+ const {isLoading, liveData, graphData, error} = useFetchQuery({
visible: true,
customStep
});
diff --git a/app/vmui/packages/vmui/src/components/Header/Header.tsx b/app/vmui/packages/vmui/src/components/Header/Header.tsx
index e1cea87cfc..f9ab6d0bb4 100644
--- a/app/vmui/packages/vmui/src/components/Header/Header.tsx
+++ b/app/vmui/packages/vmui/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, {FC, useState} from "preact/compat";
+import React, {FC, useMemo, useState} from "preact/compat";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
@@ -12,7 +12,10 @@ import GlobalSettings from "../CustomPanel/Configurator/Settings/GlobalSettings"
import {Link as RouterLink, useLocation, useNavigate} from "react-router-dom";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
-import router from "../../router/index";
+import router, {RouterOptions, routerOptions} from "../../router/index";
+import DatePicker from "../Main/DatePicker/DatePicker";
+import {useCardinalityState, useCardinalityDispatch} from "../../state/cardinality/CardinalityStateContext";
+import {useEffect} from "react";
const classes = {
logo: {
@@ -54,11 +57,18 @@ const classes = {
const Header: FC = () => {
+ const {date} = useCardinalityState();
+ const cardinalityDispatch = useCardinalityDispatch();
+
const {search, pathname} = useLocation();
const navigate = useNavigate();
const [activeMenu, setActiveMenu] = useState(pathname);
+ const headerSetup = useMemo(() => {
+ return ((routerOptions[pathname] || {}) as RouterOptions).header || {};
+ }, [pathname]);
+
const onClickLogo = () => {
navigateHandler(router.home);
setQueryStringWithoutPageReload("");
@@ -69,6 +79,10 @@ const Header: FC = () => {
navigate({pathname, search: search});
};
+ useEffect(() => {
+ setActiveMenu(pathname);
+ }, [pathname]);
+
return
@@ -89,12 +103,23 @@ const Header: FC = () => {
onChange={(e, val) => setActiveMenu(val)}>
+
- cardinalityDispatch({type: "SET_DATE", payload: val})}
+ />
+ )}
+ {headerSetup?.executionControls &&
;
diff --git a/app/vmui/packages/vmui/src/components/Main/DatePicker/DatePicker.tsx b/app/vmui/packages/vmui/src/components/Main/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000000..781188deb4
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/Main/DatePicker/DatePicker.tsx
@@ -0,0 +1,67 @@
+import React, {FC} from "react";
+import TextField from "@mui/material/TextField";
+import {useState} from "preact/compat";
+import StaticDatePicker from "@mui/lab/StaticDatePicker";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import dayjs from "dayjs";
+import Popper from "@mui/material/Popper";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Paper from "@mui/material/Paper";
+import EventIcon from "@mui/icons-material/Event";
+
+const formatDate = "YYYY-MM-DD";
+
+interface DatePickerProps {
+ date: string | null,
+ onChange: (val: string | null) => void
+}
+
+const DatePicker: FC = ({date, onChange}) => {
+
+ const dateFormatted = date ? dayjs(date).format(formatDate) : null;
+
+ const [anchorEl, setAnchorEl] = useState(null);
+ const open = Boolean(anchorEl);
+
+ return <>
+
+
+
+
+ setAnchorEl(null)}>
+
+
+ {
+ onChange(newDate ? dayjs(newDate).format(formatDate) : null);
+ setAnchorEl(null);
+ }}
+ renderInput={(params) =>
+
+
+
+ ;
+};
+
+export default DatePicker;
diff --git a/app/vmui/packages/vmui/src/components/TabPanel/TabPanel.tsx b/app/vmui/packages/vmui/src/components/TabPanel/TabPanel.tsx
new file mode 100644
index 0000000000..d643a49862
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/TabPanel/TabPanel.tsx
@@ -0,0 +1,26 @@
+import {ReactNode} from "react";
+import {Box} from "@mui/material";
+import React from "preact/compat";
+
+interface TabPanelProps {
+ children?: ReactNode;
+ index: number;
+ value: number;
+}
+
+const TabPanel = (props: TabPanelProps) => {
+ const { children, value, index, ...other } = props;
+ return (
+ = ({
+ rows,
+ headerCells,
+ defaultSortColumn,
+ isPagingEnabled,
+ tableCells}) => {
+
+ const [order, setOrder] = useState("desc");
+ const [orderBy, setOrderBy] = useState(defaultSortColumn);
+ const [selected, setSelected] = useState([]);
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(5);
+
+ const handleRequestSort = (
+ event: MouseEvent,
+ property: keyof Data,
+ ) => {
+ const isAsc = orderBy === property && order === "asc";
+ setOrder(isAsc ? "desc" : "asc");
+ setOrderBy(property);
+ };
+
+ const handleSelectAllClick = (event: ChangeEvent) => {
+ if (event.target.checked) {
+ const newSelecteds = rows.map((n) => n.name) as string[];
+ setSelected(newSelecteds);
+ return;
+ }
+ setSelected([]);
+ };
+
+ const handleClick = (event: SyntheticEvent, name: string) => {
+ const selectedIndex = selected.indexOf(name);
+ let newSelected: readonly string[] = [];
+
+ if (selectedIndex === -1) {
+ newSelected = newSelected.concat(selected, name);
+ } else if (selectedIndex === 0) {
+ newSelected = newSelected.concat(selected.slice(1));
+ } else if (selectedIndex === selected.length - 1) {
+ newSelected = newSelected.concat(selected.slice(0, -1));
+ } else if (selectedIndex > 0) {
+ newSelected = newSelected.concat(
+ selected.slice(0, selectedIndex),
+ selected.slice(selectedIndex + 1),
+ );
+ }
+
+ setSelected(newSelected);
+ };
+
+ const handleChangePage = (event: unknown, newPage: number) => {
+ setPage(newPage);
+ };
+
+ const handleChangeRowsPerPage = (event: ChangeEvent) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ const isSelected = (name: string) => selected.indexOf(name) !== -1;
+
+ // Avoid a layout jump when reaching the last page with empty rows.
+ const emptyRows =
+ page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+ const sortedData = isPagingEnabled ? stableSort(rows, getComparator(order, orderBy))
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : stableSort(rows, getComparator(order, orderBy));
+ return (
+
+
+
+
+
+
;
+};
+
+export default BarChart;
diff --git a/app/vmui/packages/vmui/src/components/BarChart/consts.ts b/app/vmui/packages/vmui/src/components/BarChart/consts.ts
new file mode 100644
index 0000000000..7398818fcb
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/BarChart/consts.ts
@@ -0,0 +1,51 @@
+import {seriesBarsPlugin} from "../../utils/uplot/plugin";
+import {barDisp, getBarSeries} from "../../utils/uplot/series";
+import {Fill, Stroke} from "../../utils/uplot/types";
+import {PaddingSide, Series} from "uplot";
+
+
+const stroke: Stroke = {
+ unit: 3,
+ values: (u: { data: number[][]; }) => u.data[1].map((_: number, idx) =>
+ idx !== 0 ? "#33BB55" : "#F79420"
+ ),
+};
+
+const fill: Fill = {
+ unit: 3,
+ values: (u: { data: number[][]; }) => u.data[1].map((_: number, idx) =>
+ idx !== 0 ? "#33BB55" : "#F79420"
+ ),
+};
+
+export const barOptions = {
+ height: 500,
+ width: 500,
+ padding: [null, 0, null, 0] as [top: PaddingSide, right: PaddingSide, bottom: PaddingSide, left: PaddingSide],
+ axes: [{ show: false }],
+ series: [
+ {
+ label: "",
+ value: (u: uPlot, v: string) => v
+ },
+ {
+ label: " ",
+ width: 0,
+ fill: "",
+ values: (u: uPlot, seriesIdx: number) => {
+ const idxs = u.legend.idxs || [];
+
+ if (u.data === null || idxs.length === 0)
+ return {"Name": null, "Value": null,};
+
+ const dataIdx = idxs[seriesIdx] || 0;
+
+ const build = u.data[0][dataIdx];
+ const duration = u.data[seriesIdx][dataIdx];
+
+ return {"Name": build, "Value": duration};
+ }
+ },
+ ] as Series[],
+ plugins: [seriesBarsPlugin(getBarSeries([1], 0, 1, 0, barDisp(stroke, fill)))],
+};
diff --git a/app/vmui/packages/vmui/src/components/BarChart/types.ts b/app/vmui/packages/vmui/src/components/BarChart/types.ts
new file mode 100644
index 0000000000..90ccea463c
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/BarChart/types.ts
@@ -0,0 +1,7 @@
+import {AlignedData as uPlotData, Options as uPlotOptions} from "uplot";
+
+export interface BarChartProps {
+ data: uPlotData;
+ container: HTMLDivElement | null,
+ configs: uPlotOptions,
+}
diff --git a/app/vmui/packages/vmui/src/components/BorderLineProgress/BorderLinearProgress.tsx b/app/vmui/packages/vmui/src/components/BorderLineProgress/BorderLinearProgress.tsx
new file mode 100644
index 0000000000..169ab3d581
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/BorderLineProgress/BorderLinearProgress.tsx
@@ -0,0 +1,27 @@
+import React from "preact/compat";
+import { styled } from "@mui/material/styles";
+import LinearProgressWithLabel, {linearProgressClasses, LinearProgressProps} from "@mui/material/LinearProgress";
+import {Box, Typography} from "@mui/material";
+
+export const BorderLinearProgress = styled(LinearProgressWithLabel)(({ theme }) => ({
+ height: 20,
+ borderRadius: 5,
+ [`&.${linearProgressClasses.colorPrimary}`]: {
+ backgroundColor: theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
+ },
+ [`& .${linearProgressClasses.bar}`]: {
+ borderRadius: 5,
+ backgroundColor: theme.palette.mode === "light" ? "#1a90ff" : "#308fe8",
+ },
+}));
+
+export const BorderLinearProgressWithLabel = (props: LinearProgressProps & { value: number }) => (
+ ]}
+ style={{width: "100%", paddingRight: idx !== 0 ? "40px" : 0 }} key={`${key}-${idx}`}>
+
+ {stateTabs[key as keyof DefaultState] === 0 ? tableCells(row,date,handleFilterClick(key))}
+ />: v.name),
+ rows.map((v) => v.value),
+ rows.map((_, i) => i % 12 == 0 ? 1 : i % 10 == 0 ? 2 : 0),
+ ]}
+ container={defaultProps.containerRefs[key as keyof Containers]?.current}
+ configs={barOptions}
+ />}
+
+
+ )}
+
+ {value === index && ({children} )}
+
+ );
+};
+
+export default TabPanel;
diff --git a/app/vmui/packages/vmui/src/components/Table/Table.tsx b/app/vmui/packages/vmui/src/components/Table/Table.tsx
new file mode 100644
index 0000000000..5f6a3023b0
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/Table/Table.tsx
@@ -0,0 +1,137 @@
+import {Box, Paper, Table, TableBody, TableCell, TableContainer, TablePagination, TableRow,} from "@mui/material";
+import React, {FC, useState} from "preact/compat";
+import {ChangeEvent, MouseEvent, SyntheticEvent} from "react";
+import {Data, Order, TableProps,} from "./types";
+import {EnhancedTableHead} from "./TableHead";
+import {getComparator, stableSort} from "./helpers";
+
+
+const EnhancedTable: FC