{"version":3,"file":"EmbeddedDashboard.3856404d3d608c739864.js","mappings":"2OAYO,SAASA,EAAkBC,EAA+B,CAC/D,MAAMC,KAAe,MAAkC,EACjD,CAAE,UAAAC,EAAW,UAAAC,CAAU,EAAIF,EAAa,SAAS,EASvD,SAPA,aAAU,KACRA,EAAa,cAAc,CAAE,IAAKD,EAAM,IAAM,MAAO,kBAAgB,QAAS,CAAC,EACxE,IAAM,CACXC,EAAa,WAAW,CAC1B,GACC,CAACA,EAAcD,EAAM,GAAG,CAAC,EAExBG,EAEA,gBAAC,IAAK,CAAC,SAAS,QAAQ,MAAM,4BAC3BA,CACH,EAICD,EAIE,gBAACE,EAAA,CAA0B,MAAOF,EAAY,GAAGF,CAAA,CAAO,EAHtD,gBAAC,IAAO,IAAC,CAIpB,CAMA,SAASI,EAA0B,CAAE,MAAAC,EAAO,aAAAC,EAAc,cAAAC,CAAc,EAAkB,CACxF,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxC,CAAE,SAAAC,EAAU,KAAAC,CAAK,EAAIN,EAAM,SAAS,EACpCO,KAAS,MAAWC,CAAS,EAgBnC,SAdA,aAAU,IAAM,CAGd,GAFAJ,EAAY,EAAI,EAEZH,EAAc,CAChB,MAAMQ,EAAc,IAAI,gBAAgBR,CAAY,EACpD,KAAW,0BAA0BD,EAAOS,CAAW,EAGzD,OAAOT,EAAM,SAAS,CAExB,EAAG,CAACA,CAAK,CAAC,EAEVU,EAA+BR,EAAeF,CAAK,EAE9CG,EAKH,gBAAC,OAAI,UAAWI,EAAO,QACpBF,GACC,gBAAC,OAAI,UAAWE,EAAO,UACpBF,EAAS,IAAKM,GACb,gBAACA,EAAQ,UAAR,CAAkB,IAAKA,EAAQ,MAAM,IAAK,MAAOA,CAAA,CAAS,CAC5D,CACH,EAEF,gBAAC,OAAI,UAAWJ,EAAO,MACrB,gBAACD,EAAK,UAAL,CAAe,MAAOA,CAAA,CAAM,CAC/B,CACF,EAfO,IAiBX,CAEA,SAASI,EAA+BR,EAAsDF,EAAuB,IACnH,aAAU,IAAM,CACd,GAAI,CAACE,EACH,OAGF,IAAIU,EAAY,GAChB,MAAMC,EAAMb,EAAM,iBAAiB,KAA+Bc,GAAQ,CACxE,GAAIA,EAAI,QAAQ,cAAc,QAAS,CACrC,MAAMC,EAAQ,KAAW,YAAYf,CAAK,EACpCgB,EAAgB,KAAQ,UAAU,GAAID,CAAK,EAE7CH,IAAcI,IAChBJ,EAAYI,EACZd,EAAcc,CAAa,GAGjC,CAAC,EAED,MAAO,IAAMH,EAAI,YAAY,CAC/B,EAAG,CAACb,EAAOE,CAAa,CAAC,CAC3B,CAEA,SAASM,EAAUS,EAAsB,CACvC,MAAO,CACL,UAAQ,OAAI,CACV,MAAO,iBACP,QAAS,OACT,cAAe,SACf,UAAW,OACX,SAAU,CACZ,CAAC,EACD,QAAM,OAAI,CACR,MAAO,OACP,SAAU,EACV,QAAS,OACT,IAAK,MACL,aAAcA,EAAM,QAAQ,CAAC,CAC/B,CAAC,EACD,YAAU,OAAI,CACZ,QAAS,OACT,SAAU,OACV,WAAY,SACZ,IAAKA,EAAM,QAAQ,CAAC,EACpB,IAAK,EACL,OAAQA,EAAM,OAAO,YACrB,QAASA,EAAM,QAAQ,EAAG,EAAG,EAAG,CAAC,CACnC,CAAC,CACH,CACF,C","sources":["webpack://grafana/./public/app/features/dashboard-scene/embedding/EmbeddedDashboard.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useEffect, useState } from 'react';\n\nimport { GrafanaTheme2, urlUtil } from '@grafana/data';\nimport { EmbeddedDashboardProps } from '@grafana/runtime';\nimport { SceneObjectStateChangedEvent, sceneUtils } from '@grafana/scenes';\nimport { Spinner, Alert, useStyles2 } from '@grafana/ui';\nimport { DashboardRoutes } from 'app/types';\n\nimport { getDashboardScenePageStateManager } from '../pages/DashboardScenePageStateManager';\nimport { DashboardScene } from '../scene/DashboardScene';\n\nexport function EmbeddedDashboard(props: EmbeddedDashboardProps) {\n  const stateManager = getDashboardScenePageStateManager();\n  const { dashboard, loadError } = stateManager.useState();\n\n  useEffect(() => {\n    stateManager.loadDashboard({ uid: props.uid!, route: DashboardRoutes.Embedded });\n    return () => {\n      stateManager.clearState();\n    };\n  }, [stateManager, props.uid]);\n\n  if (loadError) {\n    return (\n      <Alert severity=\"error\" title=\"Failed to load dashboard\">\n        {loadError}\n      </Alert>\n    );\n  }\n\n  if (!dashboard) {\n    return <Spinner />;\n  }\n\n  return <EmbeddedDashboardRenderer model={dashboard} {...props} />;\n}\n\ninterface RendererProps extends EmbeddedDashboardProps {\n  model: DashboardScene;\n}\n\nfunction EmbeddedDashboardRenderer({ model, initialState, onStateChange }: RendererProps) {\n  const [isActive, setIsActive] = useState(false);\n  const { controls, body } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  useEffect(() => {\n    setIsActive(true);\n\n    if (initialState) {\n      const searchParms = new URLSearchParams(initialState);\n      sceneUtils.syncStateFromSearchParams(model, searchParms);\n    }\n\n    return model.activate();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [model]);\n\n  useSubscribeToEmbeddedUrlState(onStateChange, model);\n\n  if (!isActive) {\n    return null;\n  }\n\n  return (\n    <div className={styles.canvas}>\n      {controls && (\n        <div className={styles.controls}>\n          {controls.map((control) => (\n            <control.Component key={control.state.key} model={control} />\n          ))}\n        </div>\n      )}\n      <div className={styles.body}>\n        <body.Component model={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction useSubscribeToEmbeddedUrlState(onStateChange: ((state: string) => void) | undefined, model: DashboardScene) {\n  useEffect(() => {\n    if (!onStateChange) {\n      return;\n    }\n\n    let lastState = '';\n    const sub = model.subscribeToEvent(SceneObjectStateChangedEvent, (evt) => {\n      if (evt.payload.changedObject.urlSync) {\n        const state = sceneUtils.getUrlState(model);\n        const stateAsString = urlUtil.renderUrl('', state);\n\n        if (lastState !== stateAsString) {\n          lastState = stateAsString;\n          onStateChange(stateAsString);\n        }\n      }\n    });\n\n    return () => sub.unsubscribe();\n  }, [model, onStateChange]);\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    canvas: css({\n      label: 'canvas-content',\n      display: 'flex',\n      flexDirection: 'column',\n      flexBasis: '100%',\n      flexGrow: 1,\n    }),\n    body: css({\n      label: 'body',\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n      marginBottom: theme.spacing(2),\n    }),\n    controls: css({\n      display: 'flex',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n      gap: theme.spacing(1),\n      top: 0,\n      zIndex: theme.zIndex.navbarFixed,\n      padding: theme.spacing(0, 0, 2, 0),\n    }),\n  };\n}\n"],"names":["EmbeddedDashboard","props","stateManager","dashboard","loadError","EmbeddedDashboardRenderer","model","initialState","onStateChange","isActive","setIsActive","controls","body","styles","getStyles","searchParms","useSubscribeToEmbeddedUrlState","control","lastState","sub","evt","state","stateAsString","theme"],"sourceRoot":""}