"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2859],{13251:(W,f,t)=>{t.d(f,{EmbeddedDashboard:()=>P});var r=t(32196),a=t(96540),p=t(76885),E=t(86849),_=t(42418),m=t(62930),g=t(40845),D=t(31678),v=t(72255);function P(e){const s=(0,v.sP)(),{dashboard:n,loadError:o}=s.useState();return(0,a.useEffect)(()=>(s.loadDashboard({uid:e.uid,route:D.DashboardRoutes.Embedded}),()=>{s.clearState()}),[s,e.uid]),o?a.createElement(_.F,{severity:"error",title:"Failed to load dashboard"},o):n?a.createElement(b,{model:n,...e}):a.createElement(m.y,null)}function b({model:e,initialState:s,onStateChange:n}){const[o,u]=(0,a.useState)(!1),{controls:c,body:l,scopes:d}=e.useState(),i=(0,g.of)(O);return(0,a.useEffect)(()=>{if(u(!0),s){const T=new URLSearchParams(s);E.Go.syncStateFromSearchParams(e,T)}return e.activate()},[e]),M(n,e),o?a.createElement("div",{className:(0,r.cx)(i.canvas,c&&!d&&i.canvasWithControls,d&&i.canvasWithScopes)},d&&a.createElement(d.Component,{model:d}),c&&a.createElement("div",{className:(0,r.cx)(i.controlsWrapper,d&&i.controlsWrapperWithScopes)},a.createElement(c.Component,{model:c})),a.createElement("div",{className:i.body},a.createElement(l.Component,{model:l}))):null}function M(e,s){(0,a.useEffect)(()=>{if(!e)return;let n="";const o=s.subscribeToEvent(E.bZ,u=>{if(u.payload.changedObject.urlSync){const c=E.Go.getUrlState(s),l=p.kM.renderUrl("",c);n!==l&&(n=l,e(l))}});return()=>o.unsubscribe()},[s,e])}function O(e){return{canvas:(0,r.css)({label:"canvas-content",display:"grid",gridTemplateAreas:`
        "panels"`,gridTemplateColumns:"1fr",gridTemplateRows:"1fr",flexBasis:"100%",flexGrow:1}),canvasWithControls:(0,r.css)({gridTemplateAreas:`
        "controls"
        "panels"`,gridTemplateRows:"auto 1fr"}),canvasWithScopes:(0,r.css)({gridTemplateAreas:`
        "scopes controls"
        "panels panels"`,gridTemplateColumns:`${e.spacing(32)} 1fr`,gridTemplateRows:"auto 1fr"}),body:(0,r.css)({label:"body",flexGrow:1,display:"flex",gap:"8px",gridArea:"panels",marginBottom:e.spacing(2)}),controlsWrapper:(0,r.css)({display:"flex",flexDirection:"column",flexGrow:0,gridArea:"controls",padding:e.spacing(2,0,2,2)}),controlsWrapperWithScopes:(0,r.css)({padding:e.spacing(2,0)})}}}}]);

//# sourceMappingURL=EmbeddedDashboard.04bc52995342c2ebc3f7.js.map