import React from 'react' ; import { Link , Theme , makeStyles , LinearProgress , TableContainer , Card , Typography , } from '@material-ui/core' ; import { Table } from '@backstage/core-components' ; import { Build , useBuilds } from '../hooks/useBuilds' ; import { getStatusComponent } from './BuildsPage/lib/CITable/CITable' ; const useStyles = makeStyles < Theme > ( { buildName : { display : 'inline-block' , maxWidth : '190px' , overflow : 'hidden' , textOverflow : 'ellipsis' , whiteSpace : 'nowrap' , } , } ) ; export const LastBuildCard = ( ) => { const classes = useStyles ( ) ; const [ { value , loading } ] = useBuilds ( ) ; if ( loading || ! value ) return < LinearProgress />; return ( < TableContainer component = { Card } > < Table title = "Recent Travis-CI Builds" subtitle = "All Branches" isLoading = { loading } options = { { search : false , paging : false , } } columns = { [ { title : 'Build name' , field : 'buildName' , render : ( data ) => ( < Link href = { data . buildUrl } target = "_blank" className = { classes . buildName } > { data . buildName } < /Link>), } , { title : 'Status' , field : 'status' , render : ( data ) => ( < Typography variant = "button" > { getStatusComponent ( data . status ) } { data . status } < /Typography>), } , { title : 'Branch' , field : 'source.branchName' } , ] } data = { value } / > < /TableContainer>); } ;