import React from 'react' ; import { Entity } from '@backstage/catalog-model' ; import { InfoCard } from '@backstage/core-components' ; import { useDatadogAppData } from './useDatadogAppData' ; import { Resizable } from 're-resizable' ; import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap' ; export const DatadogDashboardPage = ( { entity } ) => { const { dashboardUrl } = useDatadogAppData ( { entity } ) ; return ( < InfoCard title = "Datadog dashboard" > < Resizable defaultSize = { { width : '100%' , height : 500 , } } handleComponent = { { bottomRight : < ZoomOutMapIcon /> }}> < iframe title = "dashboard" src = { `${ dashboardUrl }` } style = { { border : 'none' , height : '100%' , width : '100%' , resize : 'both' , overflow : 'auto' , } } /> < /Resizable> < /InfoCard>); } ;