'+(n?e:Cs(e,!0))+""+(n?e:Cs(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 i=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"
"+Cs(e.message+"",!0)+"";throw e}try{var l=Gs.lex(e,t);if(t.walkTokens){if(t.async)return Promise.all(ef.walkTokens(l,t.walkTokens)).then((function(){return Xs.parse(l,t)})).catch(u);ef.walkTokens(l,t.walkTokens)}return Xs.parse(l,t)}catch(c){u(c)}}ef.options=ef.setOptions=function(e){var t;return Rs(ef.defaults,e),t=ef.defaults,ys=t,ef},ef.getDefaults=gs,ef.defaults=ys,ef.use=function(){for(var e=ef.defaults.extensions||{renderers:{},childTokens:{}},t=arguments.length,n=new Array(t),r=0;r
"+Cs(r.message+"",!0)+"";throw r}},ef.Parser=Xs,ef.parser=Xs.parse,ef.Renderer=Js,ef.TextRenderer=Zs,ef.Lexer=Gs,ef.lexer=Gs.lex,ef.Tokenizer=Vs,ef.Slugger=Ks,ef.parse=ef;ef.options,ef.setOptions,ef.use,ef.walkTokens,ef.parseInline,Xs.parse,Gs.lex;var tf=function(e){var t=e.title,n=e.description,i=e.unit,a=e.expr,o=e.showLegend,u=e.filename,l=e.alias,c=Hr().isMobile,s=wn().period,f=Lr().customStep,d=kn(),h=(0,r.useRef)(null),p=v((0,r.useState)(!1),2),m=p[0],g=p[1],y=v((0,r.useState)({limits:{enable:!1,range:{1:[0,0]}}}),2),_=y[0],b=y[1],D=(0,r.useMemo)((function(){return Array.isArray(a)&&a.every((function(e){return e}))}),[a]),w=Yc({predefinedQuery:D?a:[],display:"chart",visible:m,customStep:f}),k=w.isLoading,x=w.graphData,C=w.error,E=w.warning,S=function(e){var t=ot({},_);t.limits.range=e,b(t)};return(0,r.useEffect)((function(){var e=new IntersectionObserver((function(e){e.forEach((function(e){return g(e.isIntersecting)}))}),{threshold:.1});return h.current&&e.observe(h.current),function(){h.current&&e.unobserve(h.current)}}),[h]),D?Lt("div",{className:"vm-predefined-panel",ref:h,children:[Lt("div",{className:"vm-predefined-panel-header",children:[Lt(ai,{title:Lt((function(){return Lt("div",{className:"vm-predefined-panel-header__description vm-default-styles",children:[n&&Lt(Ot.HY,{children:[Lt("div",{children:[Lt("span",{children:"Description:"}),Lt("div",{dangerouslySetInnerHTML:{__html:ef.parse(n)}})]}),Lt("hr",{})]}),Lt("div",{children:[Lt("span",{children:"Queries:"}),Lt("div",{children:a.map((function(e,t){return Lt("div",{children:e},"".concat(t,"_").concat(e))}))})]})]})}),{}),children:Lt("div",{className:"vm-predefined-panel-header__info",children:Lt(In,{})})}),Lt("h3",{className:"vm-predefined-panel-header__title",children:t||""}),Lt(Wc,{yaxis:_,setYaxisLimits:S,toggleEnableLimits:function(){var e=ot({},_);e.limits.enable=!e.limits.enable,b(e)}})]}),Lt("div",{className:"vm-predefined-panel-body",children:[k&&Lt(Qc,{}),C&&Lt(Vr,{variant:"error",children:C}),E&&Lt(Vr,{variant:"warning",children:E}),x&&Lt(Nc,{data:x,period:s,customStep:f,query:a,yaxis:_,unit:i,alias:l,showLegend:o,setYaxisLimits:S,setPeriod:function(e){var t=e.from,n=e.to;d({type:"SET_PERIOD",payload:{from:t,to:n}})},fullWidth:!1,height:c?.5*window.innerHeight:500})]})]}):Lt(Vr,{variant:"error",children:[Lt("code",{children:'"expr"'})," not found. Check the configuration file ",Lt("b",{children:u}),"."]})},nf=function(e){var t=e.index,n=e.title,i=e.panels,a=e.filename,o=hr(document.body),u=(0,r.useMemo)((function(){return o.width/12}),[o]),l=v((0,r.useState)(!t),2),c=l[0],s=l[1],f=v((0,r.useState)([]),2),d=f[0],h=f[1];(0,r.useEffect)((function(){h(i&&i.map((function(e){return e.width||12})))}),[i]);var p=v((0,r.useState)({start:0,target:0,enable:!1}),2),m=p[0],g=p[1],y=function(e){if(m.enable){var t=m.start,n=Math.ceil((t-e.clientX)/u);if(!(Math.abs(n)>=12)){var r=d.map((function(e,t){return e-(t===m.target?n:0)}));h(r)}}},_=function(){g(ot(ot({},m),{},{enable:!1}))},b=function(e){return function(t){!function(e,t){g({start:e.clientX,target:t,enable:!0})}(t,e)}};return(0,r.useEffect)((function(){return window.addEventListener("mousemove",y),window.addEventListener("mouseup",_),function(){window.removeEventListener("mousemove",y),window.removeEventListener("mouseup",_)}}),[m]),Lt("div",{className:"vm-predefined-dashboard",children:Lt(Ri,{defaultExpanded:c,onChange:function(e){return s(e)},title:Lt((function(){return Lt("div",{className:mr()({"vm-predefined-dashboard-header":!0,"vm-predefined-dashboard-header_open":c}),children:[(n||a)&&Lt("span",{className:"vm-predefined-dashboard-header__title",children:n||"".concat(t+1,". ").concat(a)}),i&&Lt("span",{className:"vm-predefined-dashboard-header__count",children:["(",i.length," panels)"]})]})}),{}),children:Lt("div",{className:"vm-predefined-dashboard-panels",children:Array.isArray(i)&&i.length?i.map((function(e,t){return Lt("div",{className:"vm-predefined-dashboard-panels-panel vm-block vm-block_empty-padding",style:{gridColumn:"span ".concat(d[t])},children:[Lt(tf,{title:e.title,description:e.description,unit:e.unit,expr:e.expr,alias:e.alias,filename:a,showLegend:e.showLegend}),Lt("button",{className:"vm-predefined-dashboard-panels-panel__resizer",onMouseDown:b(t)})]},t)})):Lt("div",{className:"vm-predefined-dashboard-panels-panel__alert",children:Lt(Vr,{variant:"error",children:[Lt("code",{children:'"panels"'})," not found. Check the configuration file ",Lt("b",{children:a}),"."]})})})})})},rf=function(){!function(){var e=wn(),t=e.duration,n=e.relativeTime,i=e.period.date,a=Lr().customStep,o=v(nt(),2)[1],u=function(){var e,r=rs((it(e={},"g0.range_input",t),it(e,"g0.end_input",i),it(e,"g0.step_input",a),it(e,"g0.relative_time",n),e));o(r)};(0,r.useEffect)(u,[t,n,i,a]),(0,r.useEffect)(u,[])}();var e=Hr().isMobile,t=Jr(),n=t.dashboardsSettings,i=t.dashboardsLoading,a=t.dashboardsError,o=v((0,r.useState)(0),2),u=o[0],l=o[1],c=(0,r.useMemo)((function(){return n.map((function(e,t){return{label:e.title||"",value:t}}))}),[n]),s=(0,r.useMemo)((function(){return n[u]||{}}),[n,u]),f=(0,r.useMemo)((function(){return null===s||void 0===s?void 0:s.rows}),[s]),d=(0,r.useMemo)((function(){return s.title||s.filename||""}),[s]),h=(0,r.useMemo)((function(){return Array.isArray(f)&&!!f.length}),[f]),p=function(e){return function(){!function(e){l(e)}(e)}};return Lt("div",{className:"vm-predefined-panels",children:[i&&Lt(Qc,{}),!n.length&&a&&Lt(Vr,{variant:"error",children:a}),!n.length&&Lt(Vr,{variant:"info",children:"Dashboards not found"}),c.length>1&&Lt("div",{className:mr()({"vm-predefined-panels-tabs":!0,"vm-predefined-panels-tabs_mobile":e}),children:c.map((function(e){return Lt("div",{className:mr()({"vm-predefined-panels-tabs__tab":!0,"vm-predefined-panels-tabs__tab_active":e.value==u}),onClick:p(e.value),children:e.label},e.value)}))}),Lt("div",{className:"vm-predefined-panels__dashboards",children:[h&&f.map((function(e,t){return Lt(nf,{index:t,filename:d,title:e.title,panels:e.panels},"".concat(u,"_").concat(t))})),!!n.length&&!h&&Lt(Vr,{variant:"error",children:[Lt("code",{children:'"rows"'})," not found. Check the configuration file ",Lt("b",{children:d}),"."]})]})]})},af=function(e,t){var n=t.match?"&match[]="+encodeURIComponent(t.match):"",r=t.focusLabel?"&focusLabel="+encodeURIComponent(t.focusLabel):"";return"".concat(e,"/api/v1/status/tsdb?topN=").concat(t.topN,"&date=").concat(t.date).concat(n).concat(r)},of=function(){function e(){b(this,e),this.tsdbStatus=void 0,this.tabsNames=void 0,this.tsdbStatus=this.defaultTSDBStatus,this.tabsNames=["table","graph"],this.getDefaultState=this.getDefaultState.bind(this)}return x(e,[{key:"tsdbStatusData",get:function(){return this.tsdbStatus},set:function(e){this.tsdbStatus=e}},{key:"defaultTSDBStatus",get:function(){return{totalSeries:0,totalLabelValuePairs:0,totalSeriesByAll:0,seriesCountByMetricName:[],seriesCountByLabelName:[],seriesCountByFocusLabelValue:[],seriesCountByLabelValuePair:[],labelValueCountByLabelName:[]}}},{key:"keys",value:function(e,t){var n=e&&/__name__=".+"/.test(e),r=e&&/{.+=".+"}/g.test(e),i=e&&/__name__=".+", .+!=""/g.test(e),a=[];return a=t||i?a.concat("seriesCountByFocusLabelValue"):n?a.concat("labelValueCountByLabelName"):r?a.concat("seriesCountByMetricName","seriesCountByLabelName"):a.concat("seriesCountByMetricName","seriesCountByLabelName","seriesCountByLabelValuePair"),a}},{key:"getDefaultState",value:function(e,t){var n=this;return this.keys(e,t).reduce((function(e,t){return ot(ot({},e),{},{tabs:ot(ot({},e.tabs),{},it({},t,n.tabsNames)),containerRefs:ot(ot({},e.containerRefs),{},it({},t,(0,r.useRef)(null)))})}),{tabs:{},containerRefs:{}})}},{key:"sectionsTitles",value:function(e){return{seriesCountByMetricName:"Metric names with the highest number of series",seriesCountByLabelName:"Labels with the highest number of series",seriesCountByFocusLabelValue:'Values for "'.concat(e,'" label 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"}}},{key:"sectionsTips",get:function(){return{seriesCountByMetricName:"\n
\n This table returns a list of metrics with the highest cardinality.\n The cardinality of a metric is the number of time series associated with that metric,\n where each time series is defined as a unique combination of key-value label pairs.\n
\n\n When looking to reduce the number of active series in your data source,\n you can start by inspecting individual metrics with high cardinality\n (i.e. that have lots of active time series associated with them),\n since that single metric contributes a large fraction of the series that make up your total series count.\n
",seriesCountByLabelName:"\n\n This table returns a list of the labels with the highest number of series.\n
\n\n Use this table to identify labels that are storing dimensions with high cardinality\n (many different label values).\n
\n\n It is recommended to choose labels such that they have a finite set of values,\n since every unique combination of key-value label pairs creates a new time series\n and therefore can dramatically increase the number of time series in your system.\n
",seriesCountByFocusLabelValue:"\n\n This table returns a list of unique label values per selected label.\n
\n\n Use this table to identify label values that are storing per each selected series.\n
",labelValueCountByLabelName:"",seriesCountByLabelValuePair:"\n\n This table returns a list of the label values pairs with the highest number of series.\n
\n\n Use this table to identify unique label values pairs. This helps to identify same labels \n is applied to count timeseries in your system, since every unique combination of key-value label pairs \n creates a new time series and therefore can dramatically increase the number of time series in your system\n
"}}},{key:"tablesHeaders",get:function(){return{seriesCountByMetricName:uf,seriesCountByLabelName:lf,seriesCountByFocusLabelValue:cf,seriesCountByLabelValuePair:sf,labelValueCountByLabelName:ff}}},{key:"totalSeries",value:function(e){return"labelValueCountByLabelName"===e?-1:this.tsdbStatus.totalSeries}}]),e}(),uf=[{id:"name",label:"Metric name"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total",info:"Shows the share of a metric to the total number of series"},{id:"action",label:""}],lf=[{id:"name",label:"Label name"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total",info:"Shows the share of the label to the total number of series"},{id:"action",label:""}],cf=[{id:"name",label:"Label value"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total"},{disablePadding:!1,id:"action",label:"",numeric:!1}],sf=[{id:"name",label:"Label=value pair"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total",info:"Shows the share of the label value pair to the total number of series"},{id:"action",label:""}],ff=[{id:"name",label:"Label name"},{id:"value",label:"Number of unique values"},{id:"action",label:""}],df={seriesCountByMetricName:function(e){var t=e.query;return hf("__name__",t)},seriesCountByLabelName:function(e){var t=e.query;return"{".concat(t,'!=""}')},seriesCountByFocusLabelValue:function(e){var t=e.query,n=e.focusLabel;return hf(n,t)},seriesCountByLabelValuePair:function(e){var t=e.query.split("="),n=t[0],r=t.slice(1).join("=");return hf(n,r)},labelValueCountByLabelName:function(e){var t=e.query,n=e.match;return"".concat(n.replace("}",""),", ").concat(t,'!=""}')}},hf=function(e,t){return e?"{"+e+"="+JSON.stringify(t)+"}":""},pf=function(e){var t,n=e.totalSeries,r=e.totalSeriesAll,i=e.seriesCountByMetricName,a=Hr().isMobile,o=v(nt(),1)[0],u=o.get("match"),l=o.get("focusLabel"),c=/__name__/.test(u||""),s=(null===(t=i[0])||void 0===t?void 0:t.value)/r*100,f=[{title:"Total series",value:n.toLocaleString("en-US"),display:!l,info:'The total number of active time series. \n A time series is uniquely identified by its name plus a set of its labels. \n For example, temperature{city="NY",country="US"} and temperature{city="SF",country="US"} \n are two distinct series, since they differ by the city label.'},{title:"Percentage from total",value:isNaN(s)?"-":"".concat(s.toFixed(2),"%"),display:c,info:"The share of these series in the total number of time series."}].filter((function(e){return e.display}));return f.length?Lt("div",{className:mr()({"vm-cardinality-totals":!0,"vm-cardinality-totals_mobile":a}),children:f.map((function(e){var t=e.title,n=e.value,r=e.info;return Lt("div",{className:"vm-cardinality-totals-card",children:[Lt("div",{className:"vm-cardinality-totals-card-header",children:[r&&Lt(ai,{title:Lt("p",{className:"vm-cardinality-totals-card-header__tooltip",children:r}),children:Lt("div",{className:"vm-cardinality-totals-card-header__info-icon",children:Lt(In,{})})}),Lt("h4",{className:"vm-cardinality-totals-card-header__title",children:t})]}),Lt("span",{className:"vm-cardinality-totals-card__value",children:n})]},t)}))}):null},mf=function(e){var t=Hr().isMobile,n=v(nt(),2),i=n[0],a=n[1],o=i.get("tips")||"",u=v((0,r.useState)(i.get("match")||""),2),l=u[0],c=u[1],s=v((0,r.useState)(i.get("focusLabel")||""),2),f=s[0],d=s[1],h=v((0,r.useState)(+(i.get("topN")||10)),2),p=h[0],m=h[1],g=(0,r.useMemo)((function(){return p<0?"Number must be bigger than zero":""}),[p]),y=function(){i.set("match",l),i.set("topN",p.toString()),i.set("focusLabel",f),a(i)};return(0,r.useEffect)((function(){var e=i.get("match"),t=+(i.get("topN")||10),n=i.get("focusLabel");e!==l&&c(e||""),t!==p&&m(t),n!==f&&d(n||"")}),[i]),Lt("div",{className:mr()({"vm-cardinality-configurator":!0,"vm-cardinality-configurator_mobile":t,"vm-block":!0,"vm-block_mobile":t}),children:[Lt("div",{className:"vm-cardinality-configurator-controls",children:[Lt("div",{className:"vm-cardinality-configurator-controls__query",children:Lt(di,{label:"Time series selector",type:"string",value:l,onChange:c,onEnter:y})}),Lt("div",{className:"vm-cardinality-configurator-controls__item",children:Lt(di,{label:"Focus label",type:"text",value:f||"",onChange:d,onEnter:y,endIcon:Lt(ai,{title:Lt("div",{children:Lt("p",{children:"To identify values with the highest number of series for the selected label."})}),children:Lt(lr,{})})})}),Lt("div",{className:"vm-cardinality-configurator-controls__item vm-cardinality-configurator-controls__item_limit",children:Lt(di,{label:"Limit entries",type:"number",value:p,error:g,onChange:function(e){var t=+e;m(isNaN(t)?0:t)},onEnter:y})})]}),Lt("div",{className:"vm-cardinality-configurator-bottom",children:[Lt(pf,ot({},e)),Lt("div",{className:"vm-cardinality-configurator-bottom-helpful",children:Lt("a",{className:"vm-link vm-link_with-icon",target:"_blank",href:"https://docs.victoriametrics.com/#cardinality-explorer",rel:"help noreferrer",children:[Lt(or,{}),"Documentation"]})}),Lt("div",{className:"vm-cardinality-configurator-bottom__execute",children:[Lt(ai,{title:o?"Hide tips":"Show tips",children:Lt(ei,{variant:"text",color:o?"warning":"gray",startIcon:Lt(dr,{}),onClick:function(){i.get("tips")||""?i.delete("tips"):i.set("tips","true"),a(i)}})}),Lt(ei,{variant:"text",startIcon:Lt(Ln,{}),onClick:function(){i.set("match",""),i.set("focusLabel",""),a(i)},children:"Reset"}),Lt(ei,{startIcon:Lt(qn,{}),onClick:y,children:"Execute Query"})]})]})]})};function vf(e){var t=e.order,n=e.orderBy,r=e.onRequestSort,i=e.headerCells;return Lt("thead",{className:"vm-table-header",children:Lt("tr",{className:"vm-table__row vm-table__row_header",children:i.map((function(e){return Lt("th",{className:mr()({"vm-table-cell vm-table-cell_header":!0,"vm-table-cell_sort":"action"!==e.id&&"percentage"!==e.id,"vm-table-cell_right":"action"===e.id}),onClick:(i=e.id,function(e){r(e,i)}),children:Lt("div",{className:"vm-table-cell__content",children:[e.info?Lt(ai,{title:e.info,children:[Lt("div",{className:"vm-metrics-content-header__tip-icon",children:Lt(In,{})}),e.label]}):Lt(Ot.HY,{children:e.label}),"action"!==e.id&&"percentage"!==e.id&&Lt("div",{className:mr()({"vm-table__sort-icon":!0,"vm-table__sort-icon_active":n===e.id,"vm-table__sort-icon_desc":"desc"===t&&n===e.id}),children:Lt($n,{})})]})},e.id);var i}))})})}function gf(e,t,n){return t[n]'+(n?e:Ss(e,!0))+""+(n?e:Ss(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 i=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"
"+Ss(e.message+"",!0)+"";throw e}try{var l=Zs.lex(e,t);if(t.walkTokens){if(t.async)return Promise.all(nf.walkTokens(l,t.walkTokens)).then((function(){return tf.parse(l,t)})).catch(u);nf.walkTokens(l,t.walkTokens)}return tf.parse(l,t)}catch(c){u(c)}}nf.options=nf.setOptions=function(e){var t;return js(nf.defaults,e),t=nf.defaults,bs=t,nf},nf.getDefaults=_s,nf.defaults=bs,nf.use=function(){for(var e=nf.defaults.extensions||{renderers:{},childTokens:{}},t=arguments.length,n=new Array(t),r=0;r
"+Ss(r.message+"",!0)+"";throw r}},nf.Parser=tf,nf.parser=tf.parse,nf.Renderer=Ks,nf.TextRenderer=Xs,nf.Lexer=Zs,nf.lexer=Zs.lex,nf.Tokenizer=qs,nf.Slugger=ef,nf.parse=nf;nf.options,nf.setOptions,nf.use,nf.walkTokens,nf.parseInline,tf.parse,Zs.lex;var rf=function(e){var t=e.title,n=e.description,i=e.unit,a=e.expr,o=e.showLegend,u=e.filename,l=e.alias,c=Hr().isMobile,s=wn().period,f=Lr().customStep,d=kn(),h=(0,r.useRef)(null),p=v((0,r.useState)(!1),2),m=p[0],g=p[1],y=v((0,r.useState)({limits:{enable:!1,range:{1:[0,0]}}}),2),_=y[0],b=y[1],D=(0,r.useMemo)((function(){return Array.isArray(a)&&a.every((function(e){return e}))}),[a]),w=Uc({predefinedQuery:D?a:[],display:"chart",visible:m,customStep:f}),k=w.isLoading,x=w.graphData,C=w.error,E=w.warning,S=function(e){var t=ot({},_);t.limits.range=e,b(t)};return(0,r.useEffect)((function(){var e=new IntersectionObserver((function(e){e.forEach((function(e){return g(e.isIntersecting)}))}),{threshold:.1});return h.current&&e.observe(h.current),function(){h.current&&e.unobserve(h.current)}}),[h]),D?Lt("div",{className:"vm-predefined-panel",ref:h,children:[Lt("div",{className:"vm-predefined-panel-header",children:[Lt(ai,{title:Lt((function(){return Lt("div",{className:"vm-predefined-panel-header__description vm-default-styles",children:[n&&Lt(Ot.HY,{children:[Lt("div",{children:[Lt("span",{children:"Description:"}),Lt("div",{dangerouslySetInnerHTML:{__html:nf.parse(n)}})]}),Lt("hr",{})]}),Lt("div",{children:[Lt("span",{children:"Queries:"}),Lt("div",{children:a.map((function(e,t){return Lt("div",{children:e},"".concat(t,"_").concat(e))}))})]})]})}),{}),children:Lt("div",{className:"vm-predefined-panel-header__info",children:Lt(In,{})})}),Lt("h3",{className:"vm-predefined-panel-header__title",children:t||""}),Lt(Gc,{yaxis:_,setYaxisLimits:S,toggleEnableLimits:function(){var e=ot({},_);e.limits.enable=!e.limits.enable,b(e)}})]}),Lt("div",{className:"vm-predefined-panel-body",children:[k&&Lt(Jc,{}),C&&Lt(Vr,{variant:"error",children:C}),E&&Lt(Vr,{variant:"warning",children:E}),x&&Lt(Fc,{data:x,period:s,customStep:f,query:a,yaxis:_,unit:i,alias:l,showLegend:o,setYaxisLimits:S,setPeriod:function(e){var t=e.from,n=e.to;d({type:"SET_PERIOD",payload:{from:t,to:n}})},fullWidth:!1,height:c?.5*window.innerHeight:500})]})]}):Lt(Vr,{variant:"error",children:[Lt("code",{children:'"expr"'})," not found. Check the configuration file ",Lt("b",{children:u}),"."]})},af=function(e){var t=e.index,n=e.title,i=e.panels,a=e.filename,o=hr(document.body),u=(0,r.useMemo)((function(){return o.width/12}),[o]),l=v((0,r.useState)(!t),2),c=l[0],s=l[1],f=v((0,r.useState)([]),2),d=f[0],h=f[1];(0,r.useEffect)((function(){h(i&&i.map((function(e){return e.width||12})))}),[i]);var p=v((0,r.useState)({start:0,target:0,enable:!1}),2),m=p[0],g=p[1],y=function(e){if(m.enable){var t=m.start,n=Math.ceil((t-e.clientX)/u);if(!(Math.abs(n)>=12)){var r=d.map((function(e,t){return e-(t===m.target?n:0)}));h(r)}}},_=function(){g(ot(ot({},m),{},{enable:!1}))},b=function(e){return function(t){!function(e,t){g({start:e.clientX,target:t,enable:!0})}(t,e)}};return(0,r.useEffect)((function(){return window.addEventListener("mousemove",y),window.addEventListener("mouseup",_),function(){window.removeEventListener("mousemove",y),window.removeEventListener("mouseup",_)}}),[m]),Lt("div",{className:"vm-predefined-dashboard",children:Lt(Ri,{defaultExpanded:c,onChange:function(e){return s(e)},title:Lt((function(){return Lt("div",{className:mr()({"vm-predefined-dashboard-header":!0,"vm-predefined-dashboard-header_open":c}),children:[(n||a)&&Lt("span",{className:"vm-predefined-dashboard-header__title",children:n||"".concat(t+1,". ").concat(a)}),i&&Lt("span",{className:"vm-predefined-dashboard-header__count",children:["(",i.length," panels)"]})]})}),{}),children:Lt("div",{className:"vm-predefined-dashboard-panels",children:Array.isArray(i)&&i.length?i.map((function(e,t){return Lt("div",{className:"vm-predefined-dashboard-panels-panel vm-block vm-block_empty-padding",style:{gridColumn:"span ".concat(d[t])},children:[Lt(rf,{title:e.title,description:e.description,unit:e.unit,expr:e.expr,alias:e.alias,filename:a,showLegend:e.showLegend}),Lt("button",{className:"vm-predefined-dashboard-panels-panel__resizer",onMouseDown:b(t)})]},t)})):Lt("div",{className:"vm-predefined-dashboard-panels-panel__alert",children:Lt(Vr,{variant:"error",children:[Lt("code",{children:'"panels"'})," not found. Check the configuration file ",Lt("b",{children:a}),"."]})})})})})},of=function(){!function(){var e=wn(),t=e.duration,n=e.relativeTime,i=e.period.date,a=Lr().customStep,o=v(nt(),2)[1],u=function(){var e,r=as((it(e={},"g0.range_input",t),it(e,"g0.end_input",i),it(e,"g0.step_input",a),it(e,"g0.relative_time",n),e));o(r)};(0,r.useEffect)(u,[t,n,i,a]),(0,r.useEffect)(u,[])}();var e=Hr().isMobile,t=Jr(),n=t.dashboardsSettings,i=t.dashboardsLoading,a=t.dashboardsError,o=v((0,r.useState)(0),2),u=o[0],l=o[1],c=(0,r.useMemo)((function(){return n.map((function(e,t){return{label:e.title||"",value:t}}))}),[n]),s=(0,r.useMemo)((function(){return n[u]||{}}),[n,u]),f=(0,r.useMemo)((function(){return null===s||void 0===s?void 0:s.rows}),[s]),d=(0,r.useMemo)((function(){return s.title||s.filename||""}),[s]),h=(0,r.useMemo)((function(){return Array.isArray(f)&&!!f.length}),[f]),p=function(e){return function(){!function(e){l(e)}(e)}};return Lt("div",{className:"vm-predefined-panels",children:[i&&Lt(Jc,{}),!n.length&&a&&Lt(Vr,{variant:"error",children:a}),!n.length&&Lt(Vr,{variant:"info",children:"Dashboards not found"}),c.length>1&&Lt("div",{className:mr()({"vm-predefined-panels-tabs":!0,"vm-predefined-panels-tabs_mobile":e}),children:c.map((function(e){return Lt("div",{className:mr()({"vm-predefined-panels-tabs__tab":!0,"vm-predefined-panels-tabs__tab_active":e.value==u}),onClick:p(e.value),children:e.label},e.value)}))}),Lt("div",{className:"vm-predefined-panels__dashboards",children:[h&&f.map((function(e,t){return Lt(af,{index:t,filename:d,title:e.title,panels:e.panels},"".concat(u,"_").concat(t))})),!!n.length&&!h&&Lt(Vr,{variant:"error",children:[Lt("code",{children:'"rows"'})," not found. Check the configuration file ",Lt("b",{children:d}),"."]})]})]})},uf=function(e,t){var n=t.match?"&match[]="+encodeURIComponent(t.match):"",r=t.focusLabel?"&focusLabel="+encodeURIComponent(t.focusLabel):"";return"".concat(e,"/api/v1/status/tsdb?topN=").concat(t.topN,"&date=").concat(t.date).concat(n).concat(r)},lf=function(){function e(){b(this,e),this.tsdbStatus=void 0,this.tabsNames=void 0,this.tsdbStatus=this.defaultTSDBStatus,this.tabsNames=["table","graph"],this.getDefaultState=this.getDefaultState.bind(this)}return x(e,[{key:"tsdbStatusData",get:function(){return this.tsdbStatus},set:function(e){this.tsdbStatus=e}},{key:"defaultTSDBStatus",get:function(){return{totalSeries:0,totalLabelValuePairs:0,totalSeriesByAll:0,seriesCountByMetricName:[],seriesCountByLabelName:[],seriesCountByFocusLabelValue:[],seriesCountByLabelValuePair:[],labelValueCountByLabelName:[]}}},{key:"keys",value:function(e,t){var n=e&&/__name__=".+"/.test(e),r=e&&/{.+=".+"}/g.test(e),i=e&&/__name__=".+", .+!=""/g.test(e),a=[];return a=t||i?a.concat("seriesCountByFocusLabelValue"):n?a.concat("labelValueCountByLabelName"):r?a.concat("seriesCountByMetricName","seriesCountByLabelName"):a.concat("seriesCountByMetricName","seriesCountByLabelName","seriesCountByLabelValuePair"),a}},{key:"getDefaultState",value:function(e,t){var n=this;return this.keys(e,t).reduce((function(e,t){return ot(ot({},e),{},{tabs:ot(ot({},e.tabs),{},it({},t,n.tabsNames)),containerRefs:ot(ot({},e.containerRefs),{},it({},t,(0,r.useRef)(null)))})}),{tabs:{},containerRefs:{}})}},{key:"sectionsTitles",value:function(e){return{seriesCountByMetricName:"Metric names with the highest number of series",seriesCountByLabelName:"Labels with the highest number of series",seriesCountByFocusLabelValue:'Values for "'.concat(e,'" label 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"}}},{key:"sectionsTips",get:function(){return{seriesCountByMetricName:"\n
\n This table returns a list of metrics with the highest cardinality.\n The cardinality of a metric is the number of time series associated with that metric,\n where each time series is defined as a unique combination of key-value label pairs.\n
\n\n When looking to reduce the number of active series in your data source,\n you can start by inspecting individual metrics with high cardinality\n (i.e. that have lots of active time series associated with them),\n since that single metric contributes a large fraction of the series that make up your total series count.\n
",seriesCountByLabelName:"\n\n This table returns a list of the labels with the highest number of series.\n
\n\n Use this table to identify labels that are storing dimensions with high cardinality\n (many different label values).\n
\n\n It is recommended to choose labels such that they have a finite set of values,\n since every unique combination of key-value label pairs creates a new time series\n and therefore can dramatically increase the number of time series in your system.\n
",seriesCountByFocusLabelValue:"\n\n This table returns a list of unique label values per selected label.\n
\n\n Use this table to identify label values that are storing per each selected series.\n
",labelValueCountByLabelName:"",seriesCountByLabelValuePair:"\n\n This table returns a list of the label values pairs with the highest number of series.\n
\n\n Use this table to identify unique label values pairs. This helps to identify same labels \n is applied to count timeseries in your system, since every unique combination of key-value label pairs \n creates a new time series and therefore can dramatically increase the number of time series in your system\n
"}}},{key:"tablesHeaders",get:function(){return{seriesCountByMetricName:cf,seriesCountByLabelName:sf,seriesCountByFocusLabelValue:ff,seriesCountByLabelValuePair:df,labelValueCountByLabelName:hf}}},{key:"totalSeries",value:function(e){return"labelValueCountByLabelName"===e?-1:this.tsdbStatus.totalSeries}}]),e}(),cf=[{id:"name",label:"Metric name"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total",info:"Shows the share of a metric to the total number of series"},{id:"action",label:""}],sf=[{id:"name",label:"Label name"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total",info:"Shows the share of the label to the total number of series"},{id:"action",label:""}],ff=[{id:"name",label:"Label value"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total"},{disablePadding:!1,id:"action",label:"",numeric:!1}],df=[{id:"name",label:"Label=value pair"},{id:"value",label:"Number of series"},{id:"percentage",label:"Share in total",info:"Shows the share of the label value pair to the total number of series"},{id:"action",label:""}],hf=[{id:"name",label:"Label name"},{id:"value",label:"Number of unique values"},{id:"action",label:""}],pf={seriesCountByMetricName:function(e){var t=e.query;return mf("__name__",t)},seriesCountByLabelName:function(e){var t=e.query;return"{".concat(t,'!=""}')},seriesCountByFocusLabelValue:function(e){var t=e.query,n=e.focusLabel;return mf(n,t)},seriesCountByLabelValuePair:function(e){var t=e.query.split("="),n=t[0],r=t.slice(1).join("=");return mf(n,r)},labelValueCountByLabelName:function(e){var t=e.query,n=e.match;return"".concat(n.replace("}",""),", ").concat(t,'!=""}')}},mf=function(e,t){return e?"{"+e+"="+JSON.stringify(t)+"}":""},vf=function(e){var t,n=e.totalSeries,r=e.totalSeriesAll,i=e.seriesCountByMetricName,a=Hr().isMobile,o=v(nt(),1)[0],u=o.get("match"),l=o.get("focusLabel"),c=/__name__/.test(u||""),s=(null===(t=i[0])||void 0===t?void 0:t.value)/r*100,f=[{title:"Total series",value:n.toLocaleString("en-US"),display:!l,info:'The total number of active time series. \n A time series is uniquely identified by its name plus a set of its labels. \n For example, temperature{city="NY",country="US"} and temperature{city="SF",country="US"} \n are two distinct series, since they differ by the city label.'},{title:"Percentage from total",value:isNaN(s)?"-":"".concat(s.toFixed(2),"%"),display:c,info:"The share of these series in the total number of time series."}].filter((function(e){return e.display}));return f.length?Lt("div",{className:mr()({"vm-cardinality-totals":!0,"vm-cardinality-totals_mobile":a}),children:f.map((function(e){var t=e.title,n=e.value,r=e.info;return Lt("div",{className:"vm-cardinality-totals-card",children:[Lt("div",{className:"vm-cardinality-totals-card-header",children:[r&&Lt(ai,{title:Lt("p",{className:"vm-cardinality-totals-card-header__tooltip",children:r}),children:Lt("div",{className:"vm-cardinality-totals-card-header__info-icon",children:Lt(In,{})})}),Lt("h4",{className:"vm-cardinality-totals-card-header__title",children:t})]}),Lt("span",{className:"vm-cardinality-totals-card__value",children:n})]},t)}))}):null},gf=function(e){var t=Hr().isMobile,n=v(nt(),2),i=n[0],a=n[1],o=i.get("tips")||"",u=v((0,r.useState)(i.get("match")||""),2),l=u[0],c=u[1],s=v((0,r.useState)(i.get("focusLabel")||""),2),f=s[0],d=s[1],h=v((0,r.useState)(+(i.get("topN")||10)),2),p=h[0],m=h[1],g=(0,r.useMemo)((function(){return p<0?"Number must be bigger than zero":""}),[p]),y=function(){i.set("match",l),i.set("topN",p.toString()),i.set("focusLabel",f),a(i)};return(0,r.useEffect)((function(){var e=i.get("match"),t=+(i.get("topN")||10),n=i.get("focusLabel");e!==l&&c(e||""),t!==p&&m(t),n!==f&&d(n||"")}),[i]),Lt("div",{className:mr()({"vm-cardinality-configurator":!0,"vm-cardinality-configurator_mobile":t,"vm-block":!0,"vm-block_mobile":t}),children:[Lt("div",{className:"vm-cardinality-configurator-controls",children:[Lt("div",{className:"vm-cardinality-configurator-controls__query",children:Lt(di,{label:"Time series selector",type:"string",value:l,onChange:c,onEnter:y})}),Lt("div",{className:"vm-cardinality-configurator-controls__item",children:Lt(di,{label:"Focus label",type:"text",value:f||"",onChange:d,onEnter:y,endIcon:Lt(ai,{title:Lt("div",{children:Lt("p",{children:"To identify values with the highest number of series for the selected label."})}),children:Lt(lr,{})})})}),Lt("div",{className:"vm-cardinality-configurator-controls__item vm-cardinality-configurator-controls__item_limit",children:Lt(di,{label:"Limit entries",type:"number",value:p,error:g,onChange:function(e){var t=+e;m(isNaN(t)?0:t)},onEnter:y})})]}),Lt("div",{className:"vm-cardinality-configurator-bottom",children:[Lt(vf,ot({},e)),Lt("div",{className:"vm-cardinality-configurator-bottom-helpful",children:Lt("a",{className:"vm-link vm-link_with-icon",target:"_blank",href:"https://docs.victoriametrics.com/#cardinality-explorer",rel:"help noreferrer",children:[Lt(or,{}),"Documentation"]})}),Lt("div",{className:"vm-cardinality-configurator-bottom__execute",children:[Lt(ai,{title:o?"Hide tips":"Show tips",children:Lt(ei,{variant:"text",color:o?"warning":"gray",startIcon:Lt(dr,{}),onClick:function(){i.get("tips")||""?i.delete("tips"):i.set("tips","true"),a(i)}})}),Lt(ei,{variant:"text",startIcon:Lt(Ln,{}),onClick:function(){i.set("match",""),i.set("focusLabel",""),a(i)},children:"Reset"}),Lt(ei,{startIcon:Lt(qn,{}),onClick:y,children:"Execute Query"})]})]})]})};function yf(e){var t=e.order,n=e.orderBy,r=e.onRequestSort,i=e.headerCells;return Lt("thead",{className:"vm-table-header",children:Lt("tr",{className:"vm-table__row vm-table__row_header",children:i.map((function(e){return Lt("th",{className:mr()({"vm-table-cell vm-table-cell_header":!0,"vm-table-cell_sort":"action"!==e.id&&"percentage"!==e.id,"vm-table-cell_right":"action"===e.id}),onClick:(i=e.id,function(e){r(e,i)}),children:Lt("div",{className:"vm-table-cell__content",children:[e.info?Lt(ai,{title:e.info,children:[Lt("div",{className:"vm-metrics-content-header__tip-icon",children:Lt(In,{})}),e.label]}):Lt(Ot.HY,{children:e.label}),"action"!==e.id&&"percentage"!==e.id&&Lt("div",{className:mr()({"vm-table__sort-icon":!0,"vm-table__sort-icon_active":n===e.id,"vm-table__sort-icon_desc":"desc"===t&&n===e.id}),children:Lt($n,{})})]})},e.id);var i}))})})}function _f(e,t,n){return t[n]- {metricName}: - {valueFormat} - {unit} + value: {valueFormat}{unit}
- {fields.map((f, i) => (
-
- )}
+ {f}
- ))}
-
+ {bucket}
+
), targetPortal);
};
diff --git a/app/vmui/packages/vmui/src/components/Chart/HeatmapChart/HeatmapChart.tsx b/app/vmui/packages/vmui/src/components/Chart/Heatmap/HeatmapChart/HeatmapChart.tsx
similarity index 89%
rename from app/vmui/packages/vmui/src/components/Chart/HeatmapChart/HeatmapChart.tsx
rename to app/vmui/packages/vmui/src/components/Chart/Heatmap/HeatmapChart/HeatmapChart.tsx
index 8f7cbc179e..cdbe20fc58 100644
--- a/app/vmui/packages/vmui/src/components/Chart/HeatmapChart/HeatmapChart.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/Heatmap/HeatmapChart/HeatmapChart.tsx
@@ -4,21 +4,21 @@ import uPlot, {
Options as uPlotOptions,
Range
} from "uplot";
-import { defaultOptions, sizeAxis } from "../../../utils/uplot/helpers";
-import { dragChart } from "../../../utils/uplot/events";
-import { getAxes } from "../../../utils/uplot/axes";
-import { MetricResult } from "../../../api/types";
-import { dateFromSeconds, formatDateForNativeInput, limitsDurations } from "../../../utils/time";
+import { defaultOptions, sizeAxis } from "../../../../utils/uplot/helpers";
+import { dragChart } from "../../../../utils/uplot/events";
+import { getAxes } from "../../../../utils/uplot/axes";
+import { MetricResult } from "../../../../api/types";
+import { dateFromSeconds, formatDateForNativeInput, limitsDurations } from "../../../../utils/time";
import throttle from "lodash.throttle";
-import useResize from "../../../hooks/useResize";
-import { TimeParams } from "../../../types";
-import { YaxisState } from "../../../state/graph/reducer";
+import useResize from "../../../../hooks/useResize";
+import { TimeParams } from "../../../../types";
+import { YaxisState } from "../../../../state/graph/reducer";
import "uplot/dist/uPlot.min.css";
import classNames from "classnames";
import dayjs from "dayjs";
-import { useAppState } from "../../../state/common/StateContext";
-import { heatmapPaths } from "../../../utils/uplot/heatmap";
-import { DATE_FULL_TIMEZONE_FORMAT } from "../../../constants/date";
+import { useAppState } from "../../../../state/common/StateContext";
+import { heatmapPaths } from "../../../../utils/uplot/heatmap";
+import { DATE_FULL_TIMEZONE_FORMAT } from "../../../../constants/date";
import ChartTooltipHeatmap, {
ChartTooltipHeatmapProps,
TooltipHeatmapProps
@@ -33,7 +33,7 @@ export interface HeatmapChartProps {
setPeriod: ({ from, to }: {from: Date, to: Date}) => void;
container: HTMLDivElement | null;
height?: number;
- onChangeLegend: (val: number) => void;
+ onChangeLegend: (val: TooltipHeatmapProps) => void;
}
enum typeChartUpdate {xRange = "xRange", yRange = "yRange"}
@@ -62,7 +62,7 @@ const HeatmapChart: FC
+
+ );
+};
+
+export default LegendHeatmap;
diff --git a/app/vmui/packages/vmui/src/components/Chart/LegendHeatmap/style.scss b/app/vmui/packages/vmui/src/components/Chart/Heatmap/LegendHeatmap/style.scss
similarity index 86%
rename from app/vmui/packages/vmui/src/components/Chart/LegendHeatmap/style.scss
rename to app/vmui/packages/vmui/src/components/Chart/Heatmap/LegendHeatmap/style.scss
index acba34f2bb..359dda224c 100644
--- a/app/vmui/packages/vmui/src/components/Chart/LegendHeatmap/style.scss
+++ b/app/vmui/packages/vmui/src/components/Chart/Heatmap/LegendHeatmap/style.scss
@@ -7,6 +7,14 @@
justify-content: space-between;
gap: 4px;
+ &__wrapper {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: $padding-global;
+ flex-wrap: wrap;
+ }
+
&__value {
color: $color-text;
font-size: $font-size-small;
@@ -52,4 +60,8 @@
}
}
}
+
+ &__labels {
+ word-break: break-all;
+ }
}
diff --git a/app/vmui/packages/vmui/src/components/Chart/LegendHeatmap/LegendHeatmap.tsx b/app/vmui/packages/vmui/src/components/Chart/LegendHeatmap/LegendHeatmap.tsx
deleted file mode 100644
index 4747331c63..0000000000
--- a/app/vmui/packages/vmui/src/components/Chart/LegendHeatmap/LegendHeatmap.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { FC, useEffect, useState } from "preact/compat";
-import { gradMetal16 } from "../../../utils/uplot/heatmap";
-import "./style.scss";
-
-interface LegendHeatmapProps {
- min: number
- max: number
- value?: number
-}
-
-const LegendHeatmap: FC
+
+ {series[1] && (
+
+ {!!legendValue?.value && (
+
+
+ {valueFormat}
+
+ )}
+ {minFormat}
+ {maxFormat}
+
-
- );
-};
-
-export default LegendHeatmap;
diff --git a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx b/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/ChartTooltip.tsx
similarity index 93%
rename from app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
rename to app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/ChartTooltip.tsx
index d69a99da7b..23c2a434a3 100644
--- a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/ChartTooltip.tsx
@@ -1,17 +1,17 @@
import React, { FC, useEffect, useMemo, useRef, useState } from "preact/compat";
import uPlot from "uplot";
-import { MetricResult } from "../../../api/types";
-import { formatPrettyNumber } from "../../../utils/uplot/helpers";
+import { MetricResult } from "../../../../api/types";
+import { formatPrettyNumber } from "../../../../utils/uplot/helpers";
import dayjs from "dayjs";
-import { DATE_FULL_TIMEZONE_FORMAT } from "../../../constants/date";
+import { DATE_FULL_TIMEZONE_FORMAT } from "../../../../constants/date";
import ReactDOM from "react-dom";
import get from "lodash.get";
-import Button from "../../Main/Button/Button";
-import { CloseIcon, DragIcon } from "../../Main/Icons";
+import Button from "../../../Main/Button/Button";
+import { CloseIcon, DragIcon } from "../../../Main/Icons";
import classNames from "classnames";
import { MouseEvent as ReactMouseEvent } from "react";
import "./style.scss";
-import { SeriesItem } from "../../../utils/uplot/series";
+import { SeriesItem } from "../../../../utils/uplot/series";
export interface ChartTooltipProps {
id: string,
diff --git a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss
similarity index 98%
rename from app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss
rename to app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss
index 891bd3125d..e924130d5c 100644
--- a/app/vmui/packages/vmui/src/components/Chart/ChartTooltip/style.scss
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss
@@ -78,5 +78,6 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
display: grid;
grid-gap: 4px;
word-break: break-all;
+ white-space: pre-wrap;
}
}
diff --git a/app/vmui/packages/vmui/src/components/Chart/Legend/Legend.tsx b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/Legend.tsx
similarity index 92%
rename from app/vmui/packages/vmui/src/components/Chart/Legend/Legend.tsx
rename to app/vmui/packages/vmui/src/components/Chart/Line/Legend/Legend.tsx
index 6cdc476327..9cdffff432 100644
--- a/app/vmui/packages/vmui/src/components/Chart/Legend/Legend.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/Legend.tsx
@@ -1,7 +1,7 @@
import React, { FC, useMemo } from "preact/compat";
-import { LegendItemType } from "../../../utils/uplot/types";
+import { LegendItemType } from "../../../../utils/uplot/types";
import LegendItem from "./LegendItem/LegendItem";
-import Accordion from "../../Main/Accordion/Accordion";
+import Accordion from "../../../Main/Accordion/Accordion";
import "./style.scss";
interface LegendProps {
diff --git a/app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/LegendItem.tsx b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx
similarity index 68%
rename from app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/LegendItem.tsx
rename to app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx
index 813f5933c3..ebc080825d 100644
--- a/app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/LegendItem.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/LegendItem.tsx
@@ -1,19 +1,23 @@
import React, { FC, useState, useMemo } from "preact/compat";
import { MouseEvent } from "react";
-import { LegendItemType } from "../../../../utils/uplot/types";
+import { LegendItemType } from "../../../../../utils/uplot/types";
import "./style.scss";
import classNames from "classnames";
-import Tooltip from "../../../Main/Tooltip/Tooltip";
+import Tooltip from "../../../../Main/Tooltip/Tooltip";
import { getFreeFields } from "./helpers";
interface LegendItemProps {
legend: LegendItemType;
- onChange: (item: LegendItemType, metaKey: boolean) => void;
+ onChange?: (item: LegendItemType, metaKey: boolean) => void;
+ isHeatmap?: boolean;
}
-const LegendItem: FC
- {!!value && (
-
-
- {valueFormat}
-
- )}
- {minFormat}
- {maxFormat}
-
{legend.freeFormFields["__name__"]}
- {
+ {!!freeFormFields.length && <>{}
{freeFormFields.map((f, i) => (
= ({ legend, onChange }) => {
))}
- }
+ {!!freeFormFields.length && <>}}
- {showCalculations && (
+ {!isHeatmap && showCalculations && (
median:{calculations.median}, min:{calculations.min}, max:{calculations.max}, last:{calculations.last}
diff --git a/app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/helpers.ts b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/helpers.ts
similarity index 84%
rename from app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/helpers.ts
rename to app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/helpers.ts
index 53e6bed59d..6fed3c686c 100644
--- a/app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/helpers.ts
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/helpers.ts
@@ -1,4 +1,4 @@
-import { LegendItemType } from "../../../../utils/uplot/types";
+import { LegendItemType } from "../../../../../utils/uplot/types";
export const getFreeFields = (legend: LegendItemType) => {
const keys = Object.keys(legend.freeFormFields).filter(f => f !== "__name__");
diff --git a/app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
similarity index 84%
rename from app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/style.scss
rename to app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
index 4e32bc26f6..7c5e2ed1bc 100644
--- a/app/vmui/packages/vmui/src/components/Chart/Legend/LegendItem/style.scss
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
@@ -21,6 +21,17 @@
opacity: 0.5;
}
+ &_static {
+ grid-template-columns: 1fr;
+ margin: 0;
+ padding: 0;
+ cursor: default;
+
+ &:hover {
+ background-color: $color-background-block;
+ }
+ }
+
&__marker {
width: 14px;
height: 14px;
diff --git a/app/vmui/packages/vmui/src/components/Chart/Legend/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/style.scss
similarity index 100%
rename from app/vmui/packages/vmui/src/components/Chart/Legend/style.scss
rename to app/vmui/packages/vmui/src/components/Chart/Line/Legend/style.scss
diff --git a/app/vmui/packages/vmui/src/components/Chart/LineChart/LineChart.tsx b/app/vmui/packages/vmui/src/components/Chart/Line/LineChart/LineChart.tsx
similarity index 94%
rename from app/vmui/packages/vmui/src/components/Chart/LineChart/LineChart.tsx
rename to app/vmui/packages/vmui/src/components/Chart/Line/LineChart/LineChart.tsx
index f3e41ac55e..7fab79c11e 100644
--- a/app/vmui/packages/vmui/src/components/Chart/LineChart/LineChart.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/Line/LineChart/LineChart.tsx
@@ -7,22 +7,22 @@ import uPlot, {
Scales,
Scale,
} from "uplot";
-import { defaultOptions } from "../../../utils/uplot/helpers";
-import { dragChart } from "../../../utils/uplot/events";
-import { getAxes, getMinMaxBuffer } from "../../../utils/uplot/axes";
-import { MetricResult } from "../../../api/types";
-import { dateFromSeconds, formatDateForNativeInput, limitsDurations } from "../../../utils/time";
+import { defaultOptions } from "../../../../utils/uplot/helpers";
+import { dragChart } from "../../../../utils/uplot/events";
+import { getAxes, getMinMaxBuffer } from "../../../../utils/uplot/axes";
+import { MetricResult } from "../../../../api/types";
+import { dateFromSeconds, formatDateForNativeInput, limitsDurations } from "../../../../utils/time";
import throttle from "lodash.throttle";
-import useResize from "../../../hooks/useResize";
-import { TimeParams } from "../../../types";
-import { YaxisState } from "../../../state/graph/reducer";
+import useResize from "../../../../hooks/useResize";
+import { TimeParams } from "../../../../types";
+import { YaxisState } from "../../../../state/graph/reducer";
import "uplot/dist/uPlot.min.css";
import "./style.scss";
import classNames from "classnames";
import ChartTooltip, { ChartTooltipProps } from "../ChartTooltip/ChartTooltip";
import dayjs from "dayjs";
-import { useAppState } from "../../../state/common/StateContext";
-import { SeriesItem } from "../../../utils/uplot/series";
+import { useAppState } from "../../../../state/common/StateContext";
+import { SeriesItem } from "../../../../utils/uplot/series";
export interface LineChartProps {
metrics: MetricResult[];
diff --git a/app/vmui/packages/vmui/src/components/Chart/LineChart/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/LineChart/style.scss
similarity index 100%
rename from app/vmui/packages/vmui/src/components/Chart/LineChart/style.scss
rename to app/vmui/packages/vmui/src/components/Chart/Line/LineChart/style.scss
diff --git a/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx b/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx
index d5d6165f1c..cdd95003d1 100644
--- a/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx
+++ b/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx
@@ -1,10 +1,10 @@
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "preact/compat";
import { MetricResult } from "../../../api/types";
-import LineChart from "../../Chart/LineChart/LineChart";
+import LineChart from "../../Chart/Line/LineChart/LineChart";
import { AlignedData as uPlotData, Series as uPlotSeries } from "uplot";
-import Legend from "../../Chart/Legend/Legend";
-import LegendHeatmap from "../../Chart/LegendHeatmap/LegendHeatmap";
-import { getHideSeries, getLegendItem, getSeriesItemContext } from "../../../utils/uplot/series";
+import Legend from "../../Chart/Line/Legend/Legend";
+import LegendHeatmap from "../../Chart/Heatmap/LegendHeatmap/LegendHeatmap";
+import { getHideSeries, getLegendItem, getSeriesItemContext, SeriesItem } from "../../../utils/uplot/series";
import { getLimitsYAxis, getMinMaxBuffer, getTimeSeries } from "../../../utils/uplot/axes";
import { LegendItemType } from "../../../utils/uplot/types";
import { TimeParams } from "../../../types";
@@ -12,11 +12,12 @@ import { AxisRange, YaxisState } from "../../../state/graph/reducer";
import { getAvgFromArray, getMaxFromArray, getMinFromArray } from "../../../utils/math";
import classNames from "classnames";
import { useTimeState } from "../../../state/time/TimeStateContext";
-import HeatmapChart from "../../Chart/HeatmapChart/HeatmapChart";
+import HeatmapChart from "../../Chart/Heatmap/HeatmapChart/HeatmapChart";
import "./style.scss";
import { promValueToNumber } from "../../../utils/metric";
import { normalizeData } from "../../../utils/uplot/heatmap";
import useDeviceDetect from "../../../hooks/useDeviceDetect";
+import { TooltipHeatmapProps } from "../../Chart/Heatmap/ChartTooltipHeatmap/ChartTooltipHeatmap";
export interface GraphViewProps {
data?: MetricResult[];
@@ -60,7 +61,7 @@ const GraphView: FC