"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2859],{6857:(x,f,s)=>{s.d(f,{EmbeddedDashboard:()=>b});var t=s(74848),l=s(22803),c=s(96540),u=s(93407),i=s(60),D=s(37e3),P=s(20968),M=s(29675),g=s(11817),v=s(44608),O=s(61491),m=s(44172);function b(a){const r=(0,m.sP)(),{dashboard:e,loadError:n}=r.useState();return(0,c.useEffect)(()=>(r.loadDashboard({uid:a.uid,route:O.DashboardRoutes.Embedded}),()=>{r.clearState()}),[r,a.uid]),n?(0,t.jsx)(D.F,{severity:"error",title:(0,g.t)("dashboard.errors.failed-to-load","Failed to load dashboard"),children:(0,v.q6)(n)}):e?(0,t.jsx)(h,{model:e,...a}):(0,t.jsx)(P.y,{})}function h({model:a,initialState:r,onStateChange:e}){const[n,E]=(0,c.useState)(!1),{controls:o,body:d}=a.useState(),_=(0,M.of)(A);return(0,c.useEffect)(()=>{if(E(!0),r){const T=new URLSearchParams(r);i.Go.syncStateFromSearchParams(a,T)}return a.activate()},[a]),p(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 p(a,r){(0,c.useEffect)(()=>{if(!a)return;let e="";const n=r.subscribeToEvent(i.bZ,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 A(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.736acbf8288a1ddc1908.js.map