import React from 'react' ; import { useApi } from '@backstage/core-plugin-api' ; import { Table , TableColumn , Link , Progress } from '@backstage/core-components' ; import Alert from '@material-ui/lab/Alert' ; import OpenInNew from '@material-ui/icons/OpenInNew' ; import { makeStyles } from '@material-ui/core' ; import { useAsync } from 'react-use' ; import { bugsnagApiRef } from '../..' ; import { BugsnagError , Project } from '../../api/types' ; import { DateTime } from 'luxon' ; const useStyles = makeStyles ( { iconClass : { verticalAlign : 'middle' , } } ) ; const getDetailsUrl = ( errorId , errorClass , organisationName , projectName ) => { const classes = useStyles ( ) ; const url = `https://app.bugsnag.com/${ organisationName }/${ projectName }/errors/${ errorId }` ; return ( < Link to = { url } > < OpenInNew onClick = { ( ) => window . open ( url , '_blank' ) } aria - label = "View" fontSize = "small" className = { classes . iconClass } / > { errorClass } < /Link>); } ; export const DenseTable = ( { errors , organisationName , projectName } ) => { const columns = [ { title : '' , field : 'class' } , { title : 'Events' , field : 'events' } , { title : 'Users' , field : 'users' } , { title : 'Stage' , field : 'stage' } , { title : 'First seen' , field : 'first_seen' } , { title : 'Last seen' , field : 'last_seen' } , { title : 'Severity' , field : 'severity' } , ] ; const data = errors . map ( error => { return { severity : error . severity , class : getDetailsUrl ( error . id , error . error_class , organisationName , projectName ) , stage : error . release_stages , events : error . events , id : error . id , project_id : error . project_id , users : error . users , first_seen : DateTime . fromISO ( error . first_seen ) . toLocaleString ( ) , last_seen : DateTime . fromISO ( error . last_seen ) . toLocaleString ( ) } ; } ) ; return ( < Table title = "Errors overview" options = { { search : true , paging : true } } columns = { columns } data = { data } / > ) ; } ; export const ErrorsTable = ( { organisationName , project } ) => { const api = useApi ( bugsnagApiRef ) ; const { value , loading , error } = useAsync ( async ( ) => await api . fetchErrors ( project . id ) ) ; if ( loading ) { return < Progress />; } else if ( error ) { return < Alert severity = "error" > { error . message } < /Alert>; } return < DenseTable organisationName = { organisationName } projectName = { project . slug } errors = { value || [ ] } />; } ;