import { Entity } from '@backstage/catalog-model' ; import { useEntity } from '@backstage/plugin-catalog-react' ; import { MissingAnnotationEmptyState } from '@backstage/core-components' ; import { Card , CardContent , CardHeader , Typography } from '@material-ui/core' ; import React from 'react' ; import { isDatadogGraphAvailable } from '../plugin' ; import ErrorBoundary from './ErrorBoundary' ; import { DATADOG_ANNOTATION_GRAPH_TOKEN , GraphSize , useDatadogAppData } from './useDatadogAppData' ; const mapGraphSizeToDimensions = ( graphSize ) => { switch ( graphSize ) { case 'small' : return { width : 400 , height : 200 } ; case 'medium' : return { width : 600 , height : 300 } ; case 'large' : return { width : 800 , height : 400 } ; case 'x-large' : return { width : 1000 , height : 500 } ; default : return { width : 600 , height : 300 } ; } } ; const DatadogGraph = ( { entity } ) => { const { graphToken , graphSize , site } = useDatadogAppData ( { entity } ) ; const { width , height } = mapGraphSizeToDimensions ( graphSize ) ; return ( < Card > < CardHeader title = { < Typography variant = "h5" > Datadog Graph < /Typography>}/ > < CardContent > < iframe title = "graph" src = { `https://app.${ site }/graph/embed?token=${ graphToken }&height=${ height }&width=${ width }&legend=true` } width = { width } height = { height } frameBorder = "0" / > < /CardContent> < /Card>); } ; deprecated export const GraphWidget = ( ) => { const { entity } = useEntity ( ) ; return ! isDatadogGraphAvailable ( entity ) ? ( < MissingAnnotationEmptyState annotation = { DATADOG_ANNOTATION_GRAPH_TOKEN } / > ) : ( < ErrorBoundary > < DatadogGraph entity = { entity } / > < /ErrorBoundary>); } ;