import React from 'react' ; import { Grid } from '@material-ui/core' ; import { Page , Content , ContentHeader , SupportButton , MissingAnnotationEmptyState } from '@backstage/core-components' ; import { GITHUB_INSIGHTS_ANNOTATION , isGithubInsightsAvailable } from '../utils/isGithubInsightsAvailable' ; import { ComplianceCard , ContributorsCard , ReadMeCard , LanguagesCard , ReleasesCard , } from '../Widgets' ; import { useEntity } from "@backstage/plugin-catalog-react" ; export const InsightsPage = ( ) => { const { entity } = useEntity ( ) ; return isGithubInsightsAvailable ( entity ) ? ( < Page themeId = "tool" > < Content > < ContentHeader title = "GitHub Insights" > < SupportButton > Plugin to show GitHub Insights < /SupportButton> < /ContentHeader> < Grid container spacing = { 3 } direction = "row" alignItems = "stretch" > < Grid item sm = { 12 } md = { 6 } lg = { 4 } > < ContributorsCard /> < LanguagesCard / > < ReleasesCard /> < ComplianceCard / > < /Grid> < Grid item sm = { 12 } md = { 6 } lg = { 8 } > < ReadMeCard maxHeight = { 450 } /> < /Grid> < /Grid> < /Content> < /Page>) : (<MissingAnnotationEmptyState annotation={GITHUB_INSIGHTS_ANNOTATION}/ > ) ; } ;