1
|
!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="e74218ad-2906-4523-9997-f0ed6afc09dc",e._sentryDebugIdIdentifier="sentry-dbid-e74218ad-2906-4523-9997-f0ed6afc09dc")}catch(e){}}();var _global="undefined"!==typeof window?window:"undefined"!==typeof global?global:"undefined"!==typeof self?self:{};_global.SENTRY_RELEASE={id:"30b1ba65cc8722be7e184f4a401fb43e6b21634d"},(self.webpackChunkcloud_frontend=self.webpackChunkcloud_frontend||[]).push([[195],{52919:(e,t,a)=>{a.d(t,{D7:()=>r,Jp:()=>d,NT:()=>u,N_:()=>h,iS:()=>i,vE:()=>c,v_:()=>o,xI:()=>s,z6:()=>m});var l=a(8711),n=a(83199);const o=l.default.img.withConfig({displayName:"styled__Illustration",componentId:"sc-1yhntgl-0"})(["margin:0 auto;"]),r=(0,l.default)(n.Text).withConfig({displayName:"styled__StyledText",componentId:"sc-1yhntgl-1"})(["display:block;"]),d=l.default.div.withConfig({displayName:"styled__TextHeader",componentId:"sc-1yhntgl-2"})(["margin-bottom:",";font-weight:700;"],(0,n.getSizeBy)(2)),s=l.default.div.withConfig({displayName:"styled__StaticCheckmarks",componentId:"sc-1yhntgl-3"})(["margin-top:",";margin-bottom:",";"],(0,n.getSizeBy)(2),(0,n.getSizeBy)(5)),i=l.default.div.withConfig({displayName:"styled__CheckmarkLine",componentId:"sc-1yhntgl-4"})(["display:flex;align-items:center;"]),c=(0,l.default)(n.Icon).withConfig({displayName:"styled__StyledIcon",componentId:"sc-1yhntgl-5"})(["margin-right:4px;height:18px;> use{fill:",";}"],(0,n.getColor)("primary")),u=(0,l.default)(c).withConfig({displayName:"styled__HelpIcon",componentId:"sc-1yhntgl-6"})(["vertical-align:middle;"]),m=l.default.div.withConfig({displayName:"styled__LearnMoreSection",componentId:"sc-1yhntgl-7"})(["margin-top:",";"],(0,n.getSizeBy)(4)),h=l.default.a.withConfig({displayName:"styled__Link",componentId:"sc-1yhntgl-8"})(["text-decoration:underline;color:",";&:visited{color:",";}"],(0,n.getColor)("success"),(0,n.getColor)("success"))},10195:(e,t,a)=>{a.r(t),a.d(t,{default:()=>B});a(62953);var l=a(96540),n=a(83199),o=a(87659),r=a(35304),d=a(21591),s=a(47767),i=a(15327),c=a(74618),u=a(45765),m=a(78969),h=a(69765),b=a(3914),g=a(67544),f=a(49667),y=a(8018),p=a(52919);const E=e=>{let{onClose:t}=e;const a=(0,s.Zp)(),[o,r]=(0,l.useState)(!1),[d,E]=(0,l.useState)(""),{id:w,slug:v}=(0,b.ap)(),A=(0,h.ID)(),C=(0,h.QW)(),D=(0,l.useCallback)((e=>{let{slug:l}=e;t(),a("/spaces/".concat(v,"/rooms/").concat(C,"/dashboards/").concat(l))}),[v,C]),x=(0,g.Dn)(w,A,{onSuccess:D}),T=(0,l.useCallback)((()=>x({name:d})),[d]),k=d.length>0;return l.createElement(i.GO,{onClose:t},l.createElement(c.z,{onClose:t,title:"New Dashboard"},l.createElement(n.Button,{label:"Add",icon:"plus",onClick:T,"data-testid":"addNewDashboardModal-add-button"})),l.createElement(u.U,null,"Create new Dashboard"),l.createElement(i.Yv,null,l.createElement(y.A,{value:d,label:"Name",onChange:e=>{E(e.target.value)},isValid:o,setIsValid:r,isDirty:k,instantFeedback:"all",onKeyDown:e=>e.keyCode===m.I7&&o&&T,"data-testid":"addNewDashboardModal-dashboardName-input",containerStyles:{flex:{grow:0,shrink:0},margin:[0,0,4,0]}}),l.createElement(p.D7,null,l.createElement(p.Jp,null,"What can you do with Dashboards?"),"Combine all the metrics that matter to you, from all the nodes that matter to you, into one clean interface that helps you visually detect anomalies as they\u2019re happening. Building a new dashboard will only take a few minutes, and the metrics are always real-time."),l.createElement(p.xI,null,l.createElement(p.iS,null,l.createElement(p.vE,{name:"check"}),l.createElement(n.Text,null,"Add charts from your infrastructure")),l.createElement(p.iS,null,l.createElement(p.vE,{name:"check"}),l.createElement(n.Text,null,"Group information in a meaningful way")),l.createElement(p.z6,null,l.createElement(p.NT,{name:"help"}),l.createElement(n.Text,null,"Learn more about Dashboards")," ",l.createElement(p.N_,{href:"https://learn.netdata.cloud/docs/cloud/visualize/dashboards",target:"_blank",rel:"noopener noreferrer"},"In our documentation"))),l.createElement(p.v_,{src:f.$})))};var w=a(28738),v=a(63950),A=a.n(v),C=(a(41393),a(8159),a(98992),a(81454),a(37550),a(73865));const D=e=>{let{handleOpenAddDashboardModal:t,hasPermissionToAddDashboard:a,hasPermissionToDeleteDashboard:n,refetch:o}=e;const r=(0,h.XA)("name"),s=(0,g.Ts)(),i=(0,d.q)(),{hasLimitations:c,maxDashboards:u}=(0,C.A)(),m=async(e,t)=>{const a=(Array.isArray(e)?e:[e]).map((e=>{let{id:t}=e;return t}));await s({ids:a},{onSuccess:()=>t.resetRowSelection()}),o()},b=(0,l.useMemo)((()=>({delete:{confirmLabel:"Yes, delete",confirmationMessage:e=>l.createElement(l.Fragment,null,"You are about to delete ",l.createElement("strong",null,e.name)," from ",l.createElement("strong",null,r),".",l.createElement("br",null),"Are you sure you want to continue?"),confirmationTitle:e=>"Delete ".concat(e.name),declineLabel:"Cancel",handleAction:m,tooltipText:"Delete dashboard",isVisible:n}})),[n]),f=(0,l.useMemo)((()=>({addEntry:{handleAction:t,isVisible:a,tooltipText:"Create dashboard",disabledTooltipText:"Your plan does not allow you to create more than ".concat(u," dashboards."),disabled:c&&i.length>=u},delete:{confirmLabel:"Yes, delete",confirmationMessage:(e,t)=>l.createElement(l.Fragment,null,"You are about to delete"," ",l.createElement("strong",null,t.length>1?"".concat(t.length," dashboards"):t[0].name)," ","from ",l.createElement("strong",null,r),".",l.createElement("br",null),"Are you sure you want to continue?"),confirmationTitle:()=>"Delete",disabledTooltipText:"Delete is disabled because you haven't selected dashboards",declineLabel:"Cancel",handleAction:m,tooltipText:"Delete dashboards",isVisible:n}})));return{rowActions:n?b:[],bulkActions:[a,n].some(Boolean)?f:[]}};var x=a(68980),T=a(29217);const k=e=>{const t=new Date(e),[,a,l,n]=t.toDateString().split(" ");return"".concat(a," ").concat(l,", ").concat(n)};var _=a(4659);const S=e=>{let{name:t}=e;return l.createElement(n.Flex,{width:"300px",column:!0,gap:1},l.createElement(n.Text,{strong:!0},"Locked!"),l.createElement(n.Text,null,"The dashboard ",l.createElement(n.Text,{strong:!0},t)," is locked."),l.createElement(n.Text,null,"Your plan is limited to 1 dashboard. You can delete some dashboards or upgrade your plan for no limitations."))},I=e=>{var t;let{getValue:a,row:o}=e;const r="notAvailable"==(null===o||void 0===o||null===(t=o.original)||void 0===t?void 0:t.state),d=a();return r?l.createElement(T.A,{content:l.createElement(S,{name:d}),align:"bottom",isBasic:!0},l.createElement(n.Flex,{alignItems:"center"},l.createElement(n.Text,null,d),l.createElement(n.Icon,{name:"padlock",height:"12px",color:"text"}))):l.createElement(_.A,{as:"Link",to:o.original.slug},d)};var N=a(46741);const L=e=>{let{refetch:t,handleOpenAddDashboardModal:a}=e;const[,o]=(0,l.useState)(),r=(0,d.q)(),s=(0,x.Sf)(r),i=(0,N.JT)("dashboard:Create"),c=(0,N.JT)("dashboard:Delete"),u=(0,l.useMemo)((()=>[{id:"name",accessorKey:"name",header:"Name",cell:I},{id:"updatedAt",accessorKey:"updatedAt",header:"Last modified",cell:e=>{let{getValue:t}=e;return l.createElement(n.TextSmall,null,k(t()))},sortingFn:"datetime"},{id:"createdAt",accessorKey:"createdAt",header:"Created",cell:e=>{let{getValue:t}=e;return l.createElement(n.TextSmall,null,k(t()))},sortingFn:"datetime"}]),[]),{rowActions:m,bulkActions:h}=D({dashboards:s,handleOpenAddDashboardModal:a,hasPermissionToAddDashboard:i,hasPermissionToDeleteDashboard:c,refetch:t});return{rowActions:m,bulkActions:h,data:s,enableSelection:c,columns:u,enableSorting:!0,globalFilterFn:(0,l.useCallback)(((e,t,a)=>{var l,n,o,r,d,s,i;const c=null===a||void 0===a||null===(l=a.toLowerCase)||void 0===l?void 0:l.call(a),u=null===(n=e.getValue("name"))||void 0===n||null===(o=n.toLowerCase)||void 0===o?void 0:o.call(n),m="".concat(null===(r=k(e.getValue("updatedAt")))||void 0===r||null===(d=r.toLowerCase)||void 0===d?void 0:d.call(r)),h="".concat(null===(s=k(e.getValue("createdAt")))||void 0===s||null===(i=s.toLowerCase)||void 0===i?void 0:i.call(s));return u.includes(c)||m.includes(c)||h.includes(c)}),[]),setGlobalFilter:o}},F=[{id:"updatedAt",desc:!0}],M=e=>{let{refetch:t=A(),handleOpenAddDashboardModal:a}=e;const{enableSelection:o,columns:r,data:d,rowActions:s,bulkActions:i,enableSorting:c,globalFilterFn:u,setGlobalFilter:m}=L({refetch:t,handleOpenAddDashboardModal:a});return l.createElement(n.Table,{rowActions:s,enableSelection:o,data:d,dataColumns:r,bulkActions:i,enableSorting:c,globalFilterFn:u,onSearch:m,testPrefixCallback:e=>e.name,sortBy:F,title:"Dashboards"})};var V=a(63314);const B=()=>{const e=(0,r.A)(),[t,,a,s]=(0,o.A)(!1);return(0,d.RQ)()?l.createElement(V.Ay,{feature:"DashboardOverview"},l.createElement(n.Flex,{position:"relative",width:"100%",height:"100%",flex:"1",column:!0,padding:[3,3,0],overflow:"hidden"},l.createElement(M,{refetch:e,handleOpenAddDashboardModal:a}),t&&l.createElement(E,{onClose:s}))):l.createElement(w.A,{title:"Loading dashboards..."})}}}]);
|
