import React , { FC , Suspense , useEffect } from 'react' ; import { Accordion , AccordionDetails , AccordionSummary , LinearProgress , Typography , Box , } from '@material-ui/core' ; import { LogViewer } from '@backstage/core-components' ; import { makeStyles } from '@material-ui/core/styles' ; import Alert from '@material-ui/lab/Alert' ; import ExpandMoreIcon from '@material-ui/icons/ExpandMore' ; import moment from 'moment' ; import { useLog } from '../../useLog' ; import { generateRequestUrl } from '../../utils' ; const useStyles = makeStyles ( { accordion : { margin : '0!important' , } , accordionDetails : { padding : 0 , } , button : { order : - 1 , marginRight : 0 , marginLeft : '-20px' , } , } ) ; export const ActionOutput = ( { url , job , className } ) => { const classes = useStyles ( ) ; const { value , error , fetchLogs } = useLog ( generateRequestUrl ( url ) ) ; useEffect ( ( ) => { fetchLogs ( ) ; } , [ job , fetchLogs ] ) ; if ( error ) { return < Alert severity = "error" > { error . message } < /Alert>; } const timeElapsed = job . finished_at ? ( moment . duration ( moment ( job . finished_at || moment ( ) ) . diff ( moment ( job . started_at ) ) ) . humanize ( ) ) : ( job . started_at ? 'In Progress' : 'Pending' ) ; return value ? ( < Accordion TransitionProps = { { unmountOnExit : true } } className = { `${ classes . accordion } ${ className }` } > < AccordionSummary expandIcon = { < ExpandMoreIcon />} aria-controls={`panel-${name}-content`} id={`panel-${name}-header`} IconButtonProps={{ className : classes . button , } } > < Typography variant = "button" > { job . name || job . command } ( { timeElapsed } ) < /Typography> < /AccordionSummary> < AccordionDetails className = { classes . accordionDetails } > { value . size === 0 ? ( < Box ml = { 3 } > < Typography variant = "h3" component = "h3" > Job pending . . < /Typography> < /Box>) : (<Suspense fallback={<LinearProgress / > } > < div style = { { height : '30vh' , width : '100%' } } > < LogViewer text = { value . content } /> < /div> < /Suspense>)} < /AccordionDetails> < /Accordion>) : null; } ;