"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2859],{13251:(I,f,s)=>{s.d(f,{EmbeddedDashboard:()=>v});var l=s(32196),e=s(96540),i=s(76885),E=s(79065),D=s(42418),b=s(62930),m=s(40845),P=s(80348),g=s(72255);function v(a){const t=(0,g.sP)(),{dashboard:n,loadError:r}=t.useState();return(0,e.useEffect)(()=>(t.loadDashboard({uid:a.uid,route:P.DashboardRoutes.Embedded}),()=>{t.clearState()}),[t,a.uid]),r?e.createElement(D.F,{severity:"error",title:"Failed to load dashboard"},r):n?e.createElement(M,{model:n,...a}):e.createElement(b.y,null)}function M({model:a,initialState:t,onStateChange:n}){const[r,u]=(0,e.useState)(!1),{controls:o,body:c}=a.useState(),_=(0,m.of)(y);return(0,e.useEffect)(()=>{if(u(!0),t){const d=new URLSearchParams(t);E.Go.syncStateFromSearchParams(a,d)}return a.activate()},[a]),O(n,a),r?e.createElement("div",{className:_.canvas},o&&e.createElement("div",{className:_.controls},o.map(d=>e.createElement(d.Component,{key:d.state.key,model:d}))),e.createElement("div",{className:_.body},e.createElement(c.Component,{model:c}))):null}function O(a,t){(0,e.useEffect)(()=>{if(!a)return;let n="";const r=t.subscribeToEvent(E.bZ,u=>{if(u.payload.changedObject.urlSync){const o=E.Go.getUrlState(t),c=i.kM.renderUrl("",o);n!==c&&(n=c,a(c))}});return()=>r.unsubscribe()},[t,a])}function y(a){return{canvas:(0,l.css)({label:"canvas-content",display:"flex",flexDirection:"column",flexBasis:"100%",flexGrow:1}),body:(0,l.css)({label:"body",flexGrow:1,display:"flex",gap:"8px",marginBottom:a.spacing(2)}),controls:(0,l.css)({display:"flex",flexWrap:"wrap",alignItems:"center",gap:a.spacing(1),top:0,zIndex:a.zIndex.navbarFixed,padding:a.spacing(0,0,2,0)})}}}}]);

//# sourceMappingURL=EmbeddedDashboard.3856404d3d608c739864.js.map