"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2859],{72340(R,f,s){s.d(f,{EmbeddedDashboard:()=>T});var t=s(14553),l=s(22803),c=s(55501),u=s(5556),D=s(92745),i=s(36736),P=s(46633),M=s(34999),g=s(68079),O=s(63142),v=s(47797),m=s(6262),A=s(78102);function T(a){const r=(0,A.sP)(),{dashboard:e,loadError:n}=r.useState();return(0,c.useEffect)(()=>(r.loadDashboard({uid:a.uid,route:m.Z4.Embedded}),()=>{r.clearState()}),[r,a.uid]),n?(0,t.jsx)(M.F,{severity:"error",title:(0,D.t)("dashboard.errors.failed-to-load","Failed to load dashboard"),children:(0,v.q6)(n)}):e?(0,t.jsx)(b,{model:e,...a}):(0,t.jsx)(g.y,{})}function b({model:a,initialState:r,onStateChange:e}){const[n,E]=(0,c.useState)(!1),{controls:o,body:d}=a.useState(),_=(0,O.of)(x);return(0,c.useEffect)(()=>{if(E(!0),r){const C=new URLSearchParams(r);i.Go.syncStateFromSearchParams(a,C)}return a.activate()},[a]),h(e,a),n?(0,t.jsxs)("div",{className:(0,l.cx)(_.canvas,o&&_.canvasWithControls),children:[o&&(0,t.jsx)("div",{className:_.controlsWrapper,children:(0,t.jsx)(o.Component,{model:o})}),(0,t.jsx)("div",{className:_.body,children:(0,t.jsx)(d.Component,{model:d})})]}):null}function h(a,r){(0,c.useEffect)(()=>{if(!a)return;let e="";const n=r.subscribeToEvent(P.b,E=>{if(E.payload.changedObject.urlSync){const o=i.Go.getUrlState(r),d=u.kM.renderUrl("",o);e!==d&&(e=d,a(d))}});return()=>n.unsubscribe()},[r,a])}function x(a){return{canvas:(0,l.css)({label:"canvas-content",display:"grid",gridTemplateAreas:`
        "panels"`,gridTemplateColumns:"1fr",gridTemplateRows:"1fr",flexBasis:"100%",flexGrow:1}),canvasWithControls:(0,l.css)({gridTemplateAreas:`
        "controls"
        "panels"`,gridTemplateRows:"auto 1fr"}),body:(0,l.css)({label:"body",flexGrow:1,display:"flex",gap:"8px",gridArea:"panels",marginBottom:a.spacing(2)}),controlsWrapper:(0,l.css)({display:"flex",flexDirection:"column",flexGrow:0,gridArea:"controls",padding:a.spacing(2,0,2,2)})}}}}]);

//# sourceMappingURL=EmbeddedDashboard-react19.da745c338dab26bc9246.js.map