import React from 'react' ; import { Grid } from '@material-ui/core' ; import { Content , ContentHeader , MissingAnnotationEmptyState , SupportButton , } from '@backstage/core-components' ; import { PrometheusGraph } from './PrometheusGraph' ; import { useEntity } from '@backstage/plugin-catalog-react' ; import { isPrometheusAlertAvailable , isPrometheusGraphAvailable , PROMETHEUS_ALERT_ANNOTATION , PROMETHEUS_RULE_ANNOTATION , } from './util' ; import { PrometheusAlertStatus } from './PrometheusAlertStatus' ; const PrometheusContentWrapper = ( { step = 14 , range = { hours : 1 } , graphType , } ) => { const { entity } = useEntity ( ) ; const graphContent = isPrometheusGraphAvailable ( entity ) ; const alertContent = isPrometheusAlertAvailable ( entity ) ; if ( ! graphContent && ! alertContent ) { return ( < MissingAnnotationEmptyState annotation = { `${ PROMETHEUS_RULE_ANNOTATION } or ${ PROMETHEUS_ALERT_ANNOTATION }` } />); } const ruleTuples = graphContent ? entity . metadata . annotations ! ! [ PROMETHEUS_RULE_ANNOTATION ] . split ( ',' ) . map ( it => it . split ( '|' ) ) : [ ] ; const alerts = alertContent ? entity . metadata . annotations ! ! [ PROMETHEUS_ALERT_ANNOTATION ] . split ( ',' ) : [ ] ; const alertProp = alerts . length > 0 && alerts [ 0 ] === 'all' ? 'all' : alerts ; return ( < Content > < ContentHeader title = "Prometheus" > < SupportButton > Plugin to show Prometheus graphs and alerts for the project < /SupportButton> < /ContentHeader> { alertContent && ( < Grid container spacing = { 3 } direction = "column" > < Grid item > < PrometheusAlertStatus alerts = { alertProp } /> < /Grid> < /Grid>)} { graphContent && ruleTuples && ( < Grid container spacing = { 3 } direction = "column" > { ruleTuples . map ( ( [ query , dimension ] ) => ( < Grid item key = { query } > < PrometheusGraph dimension = { dimension } query = { query } range = { range } step = { step } graphType = { graphType } / > < /Grid>))} < /Grid>)} < /Content>); } ; export default PrometheusContentWrapper ;