File: //opt/netdata/netdata-web-files/v3/180.998d5289a2e69cabc6dc.chunk.js
try{!function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="1baefece-8f51-4020-ac8f-0c6c59a8601a",e._sentryDebugIdIdentifier="sentry-dbid-1baefece-8f51-4020-ac8f-0c6c59a8601a")}()}catch(e){}!function(){try{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{}).SENTRY_RELEASE={id:"ff6b4c14193f160501d7117c313cc3a769881a66"}}catch(e){}}(),(self.webpackChunkcloud_frontend=self.webpackChunkcloud_frontend||[]).push([[180],{97799:(e,t,r)=>{r.d(t,{A:()=>ce});var n=r(96540),i=r(33185),o=r(80689),a=r(57068),d=r(15524),s=r(64156),c=r(20871),l=(r(98992),r(54520),r(72577),r(81454),r(8872),r(67012)),u=r(57377),g=r(40961),h=r(43375),p=r(43627),m=r(43305),f=r(71123),x=r(61710),b=r(74979),y=r(45427),I=r(74848);const v=e=>(0,p.uU)({...e,wasDragging:!0}),C=e=>{let{id:t,items:r,containerWidth:n,rowHeight:i,gutter:o,Component:a,isSortingContainer:d,onRemove:s,onItemRemove:c,Item:l,gridTracks:u,transforming:g,containerDndProps:h,itemProps:m,dragOverlay:x,rootId:C,...w}=e;const{active:j,attributes:T,isDragging:k,listeners:A,over:S,setNodeRef:O,transition:D,transform:E}=(0,p.gl)({id:x?`dragOverlay-${t}`:t,disabled:x,data:{rootId:C,isContainer:!0,items:r,containerId:t,dropArea:!0,...h},animateLayoutChanges:v}),R=!!S&&(t===S.id&&"container"!==j?.data.current?.type||r.includes(S.id)),P=(0,f.Hp)(r),_=P*i+(P-1)*o+"px";return(0,I.jsx)(a,{ref:O,style:x?{width:n,height:_}:{transition:D,transform:b.Ks.Translate.toString(E),opacity:k?.5:void 0,width:n,height:_},hover:R,onRemove:s,attributes:T,listeners:A,...w,itemProps:m,id:t,dragOverlay:x,children:r.map(((e,a)=>(0,I.jsx)(y.A,{disabled:d,...e,index:a,containerId:t,Item:l,onRemove:c,draggable:!0,containerWidth:n,rowHeight:i,gridTracks:u,gutter:o,transformed:g?r[a]:null,itemProps:m,containerDragOverlay:x,rootId:C,containerDndProps:h,draggableProps:e,isOnTV:w.isOnTV},e.id)))})},w=e=>{let{containers:t,Container:r,containerWidth:n,isSortingContainer:i,items:o,Item:a,transforming:d,onContainerRemove:s,onRemove:c,rowHeight:l,gridTracks:u,gutter:g,containerDndProps:h,itemProps:p,rootId:m,isOnTV:f}=e;return t.map((e=>(0,I.jsx)(C,{id:e,items:o[e],onRemove:()=>s(e),containerWidth:n,rowHeight:l,gridTracks:u,gutter:g,Component:r,Item:a,isSortingContainer:i,transforming:d,onItemRemove:c,containerDndProps:h,itemProps:p,rootId:m,isOnTV:f},e)))},j={sideEffects(e){let{active:t}=e;t.node.animate([{opacity:0},{opacity:1}],{easing:"ease-in",duration:250})}},T="TRASH_ID",k="PLACEHOLDER_ID",A=e=>{let{id:t}=e;const{setNodeRef:r,isOver:n}=(0,h.zM)({id:t,data:{dropArea:!0,isTrash:!0}});return(0,I.jsx)("div",{ref:r,style:{display:"flex",alignItems:"center",justifyContent:"center",position:"fixed",left:"50%",marginLeft:-150,bottom:20,width:300,height:60,borderRadius:5,border:"1px solid",borderColor:n?"red":"#DDD"},children:"Drop here to delete"})},S=e=>{let{rootId:t,items:r,containers:i,trashable:o=!0,onRemove:a,Item:d,containerWidth:s=800,rowHeight:c=40,gridTracks:b=12,gutter:v=4,allowOverlap:S=!1,compactType:O="vertical",maxRows:D=3e5,Container:E=m.A,onDragEnd:R,containerDndProps:P,itemProps:_,updateOnNewProps:B=!1,rearrangeable:H=!0,isOnTV:N}=e;const{active:F}=(0,h.fF)(),L=(0,n.useRef)(null),[V,W]=(0,n.useState)((()=>(i||Object.keys(r)).reduce(((e,t)=>(e[t]=(0,f.oE)((0,f.Su)(r[t]),O,b),e)),{})),{}),[$,z]=(0,n.useState)((()=>i||Object.keys(V)));(0,l.A)((()=>{W((i||Object.keys(r)).reduce(((e,t)=>(e[t]=(0,f.oE)((0,f.Su)(r[t]),O,b),e)),{}))}),[b]),(0,l.A)((()=>{B&&((0,u.Ay)(r,V)||(W((i||Object.keys(r)).reduce(((e,t)=>(e[t]=(0,f.oE)((0,f.Su)(r[t]),O,b),e)),{})),z(i)))}),[i,r]);const M=F?.isContainer,[G,U]=(0,n.useState)(null),[q,J]=(0,n.useState)(null),Y=(0,n.useRef)(null),Z=e=>e in V?e:null,K=()=>{G&&W(G),U(null),J(null),Y.current=null},Q=()=>{const e=Object.keys(V),t=e[e.length-1];return String.fromCharCode(t.charCodeAt(0)+1)},X=e=>{let{active:t}=e;const{isContainer:r}=t.data.current||{};U(V),r||J(V)};return(0,n.useLayoutEffect)((()=>{if(F)return X({active:F}),K}),[]),(0,h.E5)({onDragStart:X,onDragMove:e=>{let{active:t,over:r,collisions:n}=e;const{isResizer:i,isContainer:o,itemId:a,itemContainerId:d}=t.data.current||{};if(o||!q)return;const{initial:l,translated:u}=t.rect.current;let g=(0,f.Su)(q[d]);const h=!q[d],p=(0,f.GN)(h?q:g,a,h)||(0,f.lc)(t.data.current);if(!p||!p.width)return;const m=r?.id;if(i){if(!m)return;const e=r.rect.width+(u.right-l.right),t=r.rect.height+(u.bottom-l.bottom);let{width:i,height:o}=(0,x.tr)({gutter:v,maxRows:D,gridTracks:b,rowHeight:c,containerWidth:s},e,t,p);if(p.width===i&&p.height===o)return;if(!n)return;return g=g.map((e=>e.id===p.id?{...p,width:i,height:o}:e)),n=n.filter((e=>e.id!==p.id)),g=(0,f.oE)(g,O,b),Y.current={...p,itemContainerId:d},void J((e=>({...e,[d]:[...g]})))}if(m===T)return void J(G);if(!H)return;const y=Z(d),I=Z(m)||r&&Z(r.data.current.itemContainerId)||y;if(!I)return;if(I&&I===y||(g=[...q[I],p]),!n)return;const C=n.find((e=>e.id===I));if(!C)return;let{left:w,top:j}=(0,x.zA)({gutter:v,maxRows:D,gridTracks:b,rowHeight:c,containerWidth:s},u.top-C.data.droppableContainer.rect.current.top,u.left-C.data.droppableContainer.rect.current.left,p);if(p.top===j&&p.left===w&&y===I)return;g=(0,f.Pe)(g,p,w,j,!0,!1,O,b,S),g=(0,f.oE)(g,O,b);const k=I!==y;k&&(L.current=t.itemContainerId),Y.current={...p,itemContainerId:I},J((e=>({...e,[I]:g.filter((e=>!!e)),...k&&!!e[d]&&{[d]:(0,f.oE)(e[d].filter((e=>e.id!==p.id)),O,b)}})))},onDragEnd:e=>{let{active:t,over:r}=e;if(!q)return;const{isResizer:n,isItem:i}=t.data.current||{},o=r?.id;if(null===o)return void J(null);if(o===T)return W((e=>({...e,[t.containerId]:(0,f.oE)(e[t.containerId].filter((e=>{let{id:r}=e;return r!==t.itemId})),O,b)}))),void J(null);if(i||n)return q&&W(q),J(null),void R(q,Y.current,$);t.id in V&&r?.id&&z((e=>{const n=e.indexOf(t.id),i=e.indexOf(r.id),o=(0,p.be)(e,n,i);return R(q,Y.current,o),o}));const a=Z(t.id);if(a)if(o!==k)q&&W(q),J(null),R(q,Y.current,$);else{const e=Q();(0,g.unstable_batchedUpdates)((()=>{z((t=>[...t,e])),W((r=>({...r,[a]:r[a].filter((e=>e!==t.itemId)),[e]:[t.id]})))}))}},onDragCancel:K}),q||V?(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(p.gB,{items:[...$,k],strategy:p._G,children:(0,I.jsx)(w,{rootId:t,containers:$,Container:E,containerWidth:s,isSortingContainer:M,items:q||V,transforming:null!==q,Item:d,onContainerRemove:e=>{z((t=>t.filter((t=>t!==e))))},onRemove:a,rowHeight:c,gridTracks:b,gutter:v,itemProps:_,containerDndProps:P,isOnTV:N})}),(0,g.createPortal)((0,I.jsx)(h.Hd,{adjustScale:!1,dropAnimation:j,children:F&&F.data.current?.rootId===t?F.data.current.isContainer?(ee=F.data.current,(0,I.jsx)(C,{rootId:t,id:ee,items:q||V,containerWidth:s,rowHeight:c,gutter:v,Component:E,Item:d,gridTracks:b,containerDndProps:P,itemProps:_,dragOverlay:!0})):F.data.current.isItem?(e=>{const r=(q||V)[e.itemContainerId];if(!r)return null;const n=r.find((t=>t.id===e.itemId));return n?(0,I.jsx)(y.A,{rootId:t,...n,containerId:e.itemContainerId,Item:d,onRemove:a,draggable:!0,containerWidth:s,rowHeight:c,gridTracks:b,gutter:v,dragOverlay:!0,itemProps:_}):null})(F.data.current):null:null}),document.body),o&&F&&(F.isContainer||F.isItem)?(0,I.jsx)(A,{id:T}):null]}):null;var ee},O=i.default.div.withConfig({displayName:"gridLayout__Div",componentId:"sc-jna1fu-0"})(["position:relative;"]),D=e=>{let{id:t,onRemove:r,children:n,attributes:i,listeners:d,itemProps:s={},itemProps:{dashboardId:c},style:l,dragOverlay:u,ref:g,...h}=e;(0,a.QZ)(c,t);return(0,I.jsx)(o.Flex,{...h,ref:g,column:!0,flex:!0,round:!0,background:"mainBackground",padding:[3],gap:2,children:(0,I.jsx)(O,{style:l,children:n})})},E=e=>{let{id:t,Component:r,containerWidth:i,onActiveMenuId:l,...u}=e;const[g,h]=(0,a.B1)(t),[p,m]=(0,a.Ix)(t),f=(0,s.A)("(max-width: 767px)"),x=(0,d.A)(),b=(0,n.useRef)(),y=(0,n.useMemo)((()=>(b.current&&b.current.cancel(),b.current=(0,c.A)(),()=>{})),[g,l]);return(0,I.jsx)(o.Flex,{ref:x,column:!0,overflow:{vertical:"auto"},flex:"1","data-testid":"dashboardGrid",height:"100%",onScroll:y,children:(0,I.jsx)(S,{rootId:t,Container:D,onDragEnd:(e,t,r)=>{h(e),m(r)},containers:p,items:g,containerWidth:i-(f?16:26),...u,Item:r,gridTracks:12,itemProps:{dashboardId:t},containerDndProps:{droppable:!0},updateOnNewProps:!0},t)})};var R=r(4844),P=r(6393),_=r(28973),B=r(19371);const H=(0,i.default)(o.Flex).attrs((e=>({height:"100%",background:"mainChartBg",round:!0,...e}))).withConfig({displayName:"container__Card",componentId:"sc-esi601-0"})(["",""],(e=>{let{dragging:t,theme:r}=e;return t&&`\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: ${(0,o.getRgbColor)("primary",.2)({theme:r})};\n z-index: 10;\n backdrop-filter: blur(3px);\n }\n\n `}));var N=r(92726),F=r(93536),L=r(28657);const V={},W=(0,n.memo)((e=>{let{dashboardId:t,id:r,handleProps:i,listeners:o,attributes:a,style:d,dragging:s,dragOverlay:c,isOnTV:u,...g}=e;const h=(0,B.eg)(),{nodesScope:p,contextScope:m,...f}=(0,P.bE)(t,r)||V,x=(0,P.v_)(t,r),b=(0,N.fz)(t,"respectNodesScope"),y=(0,n.useMemo)((()=>{const e=(0,R.My)(h,t);let n=e.getNode({id:c?`dragOverlay-${r}`:r});if(n)return n;const[d]=m||[];return d?(n=h.makeChart({attributes:{...(0,F.L)(d),id:c?`dragOverlay-${r}`:r,cardId:r,dashboardId:t,contextScope:m,...b?{nodesScope:p}:{},...f,toolboxProps:{drag:{...i,...o,...a},isOnTV:u}},makeTrack:R.qh}),e.appendChild(n),n):null}),[t,r]);(0,n.useEffect)((()=>{h&&h.getRoot().updateAttribute("autofetchOnHovering",u)}),[h,u]),(0,l.A)((()=>{y&&(y.updateAttributes({height:d.height,width:d.width}),y.trigger("resize"))}),[y,d.height,d.width]),(0,l.A)((()=>{y&&y.updateAttributes({toolboxProps:{drag:{...i,...o,...a,dragging:s},isOnTV:u}})}),[s]),(0,n.useLayoutEffect)((()=>{if(y)return(0,_.unregister)(y.onAttributesChange(["aggregationMethod","groupBy","groupByLabel","postAggregationMethod","postGroupBy","postGroupByLabel","groupingMethod","groupingTime","chartType","chartLibrary","selectedDimensions","selectedLabels","selectedNodes","selectedInstances","sparkline","selectedLegendDimensions","showingInfo","dimensionsSortBy","instancesSortBy","nodesSortBy","groupBySortBy","labelsSortBy","dimensionsSort","nodesExpanded","groupByExpanded","labelsExpanded","expanded","staticZones","title","description","showPostAggregations","selectedNodeLabelsFilter","staticValueRange","enabledYAxis","enabledXAxis","legend","desiredUnits","staticFractionDigits"],((e,t,r)=>{x((t=>({...t,[r]:e})))})))}),[y,x]),(0,l.A)((()=>{y&&y.updateAttributes(f)}),[f]),(0,l.A)((()=>{if(!y||!b)return;y.updateAttribute("nodesScope",p);y.getAttribute("active")&&"chart"===y.type&&y.fetch()}),[b,p]);const{onRemove:v,...C}=g;return y?(0,I.jsx)(H,{"data-testid":`chartCard-${(f.contextScope||[]).join(",")}`,height:d.height,width:"100%",...C,dragging:s,children:(0,I.jsx)(L.A,{chart:y,"data-chartid":c?`dragOverlay-${r}`:r,"data-track":y.track("container"),height:d.height,width:"100%"})}):null})),$=W;var z=r(99728),M=r(64981),G=r(5907);const U="text",q="customDashboard",J=e=>{let{dashboardId:t,id:r,onClick:n}=e;const i=(0,P.bE)(t,r,"editing"),o=(0,P.v_)(t,r,"editing");return(0,I.jsx)(M.t,{icon:"pencilSolid",onClick:()=>{n(),o(!0)},"data-ga":`${U}-reset::${q}`,"data-testid":"textCard-edit",disabled:i,children:"Edit"})},Y=e=>{let{dashboardId:t,id:r}=e;const n=(0,G.c6)(t,r);return(0,I.jsx)(M.t,{icon:"trashcan",onClick:n,"data-ga":`${U}-reset::${q}`,"data-testid":"textCard-remove",children:"Remove"})},Z=e=>{let{dashboardId:t,id:r,children:n,...i}=e;return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(M.A,{category:U,context:q,testId:"chartTextDropdown",...i,children:e=>{let{close:n}=e;return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(J,{dashboardId:t,id:r,onClick:n}),(0,I.jsx)(Y,{dashboardId:t,id:r})]})}}),n]})},K=(0,i.default)(o.Flex).attrs({as:"form",column:!0,flex:!0,gap:2,height:"100%",padding:[0,0,2],onMouseDown:e=>e.stopPropagation()}).withConfig({displayName:"form__CardContent",componentId:"sc-3tcqxu-0"})(["cursor:auto;"]),Q=(0,i.default)(o.Box).attrs((e=>({as:"textarea",background:"inputBg",height:"100%",round:!0,border:!0,padding:[2],...e}))).withConfig({displayName:"form__Textarea",componentId:"sc-3tcqxu-1"})(["resize:none;font-size:12px;color:",";"],(0,o.getColor)("text")),X=(0,n.memo)((e=>{let{dashboardId:t,id:r}=e;const i=(0,P.bE)(t,r,"text"),a=(0,P.v_)(t,r,"editing"),d=(0,P.v_)(t,r,"text"),[s,c]=(0,n.useState)(i);return(0,I.jsxs)(K,{"data-testid":"textCardForm",children:[(0,I.jsx)(Q,{placeholder:"Add some text",value:s.replace(/<\/?[^>]+(>|$)/g,""),onChange:e=>c(e.target.value)}),(0,I.jsxs)(o.Flex,{position:"absolute",right:"24px",bottom:0,gap:1,children:[(0,I.jsx)(o.IconButton,{icon:"check",small:!0,padding:[0],onClick:()=>{d(s),a(!1)},"data-testid":"textCardForm-cancel",neutral:!1,flavour:"default"}),(0,I.jsx)(o.IconButton,{icon:"x",small:!0,padding:[0],onClick:()=>a(!1),"data-testid":"textCardForm-done",flavour:"default"})]})]})})),ee={h1:o.H2,h2:o.H4,text:o.Text,micro:o.TextNano},te=e=>{let{dashboardId:t,id:r}=e;const n=(0,P.bE)(t,r,"text")||"",i=(0,P.bE)(t,r,"textType"),a=ee[i]||ee.text;return(0,I.jsx)(o.Box,{"data-testid":"textCardContent",children:(0,I.jsx)(a,{whiteSpace:"pre-wrap",children:n.replace(/<\/?[^>]+(>|$)/g,"")})})},re=(0,i.default)(o.Flex).attrs({column:!0}).withConfig({displayName:"text__StyledOptions",componentId:"sc-1f67m9f-0"})([""]),ne=(0,n.forwardRef)(((e,t)=>{let{dragging:r,...n}=e;const i=(0,z.JT)("dashboard:Update");return(0,I.jsx)(o.IconButton,{ref:t,position:"absolute",top:0,right:0,padding:[0],width:"12px",height:"12px",icon:"rearrange",title:"Drag & drop","data-testid":"text-drag",disabled:!i,cursor:r?"grabbing":"grab",...n})})),ie=["h1","h2","text","micro"],oe=e=>{let{id:t,dashboardId:r}=e;const n=(0,z.JT)("dashboard:Update"),i=(0,P.bE)(r,t,"textType")||"text",a=(0,P.v_)(r,t,"textType");return(0,I.jsx)(o.IconButton,{padding:[0],width:"12px",height:"12px",icon:"text_add",title:"Change text component","data-testid":"text-component",disabled:!n,onClick:()=>{const e=ie.findIndex((e=>e===i)),t=ie[e>ie.length-2?0:e+1];a(t)}})},ae=(0,i.default)(H).withConfig({displayName:"text__StyledCard",componentId:"sc-1f67m9f-1"})(["","{opacity:0;}&:hover{border:1px solid ",";}&:hover ","{opacity:1;}"],re,(0,o.getColor)("border"),re),de={chart:$,text:(0,n.memo)((e=>{let{dashboardId:t,id:r,listeners:n,handleProps:i,dragging:o,isOnTV:a}=e;const d=(0,P.bE)(t,r,"editing");return(0,I.jsxs)(ae,{"data-testid":"textCard",alignItems:"start",overflow:"hidden",dragging:o,children:[!a&&(0,I.jsxs)(re,{children:[(0,I.jsx)(Z,{dashboardId:t,id:r}),(0,I.jsx)(oe,{dashboardId:t,id:r})]}),d&&!a&&(0,I.jsx)(X,{dashboardId:t,id:r}),!d&&(0,I.jsx)(te,{dashboardId:t,id:r}),!a&&(0,I.jsx)(ne,{...n,...i,dragging:o})]})})),placeholder:(0,n.memo)((()=>(0,I.jsx)(H,{column:!0,"data-testid":"placeholderCard",background:"secondaryHighlight",width:"100%"})))},se=e=>{let{dashboardId:t,id:r,attributes:n,style:i,resizeHandle:o,ref:a,isOnTV:d,...s}=e;const c=(0,P.bE)(t,r,"type")||"placeholder",l=de[c]||de.chart;return(0,I.jsxs)("div",{ref:a,...n,style:i,children:[(0,I.jsx)(l,{dashboardId:t,id:r,style:i,isOnTV:d,...s}),!d&&o]})},ce=(0,n.memo)((e=>{let{id:t,...r}=e;return(0,R.Ay)(t),(0,I.jsx)(E,{id:t,Component:se,...r})}))}}]);