import { Grid , GridItem } from '@patternfly/react-core' ; import React , { useEffect , useState } from 'react' ; import { useHistory , useLocation , useParams } from 'react-router-dom' ; import { ITrace } from '../../utils/interfaces' ; import TraceCompareData from './TraceCompareData' ; import TraceCompareID from './TraceCompareID' ; import TraceSelect from './TraceSelect' ; interface IJaegerPageCompareParams { traceID ? : string ; } interface IJaegerPageCompareProps { name : string ; } const JaegerPageCompare = ( { name } ) => { const params = useParams < IJaegerPageCompareParams > ( ) ; const history = useHistory ( ) ; const location = useLocation ( ) ; const [ compareTrace , setCompareTrace ] = useState < string > ( '' ) ; const [ uploadedTrace , setUploadedTrace ] = useState < ITrace | undefined > ( undefined ) ; const changeCompareTrace = ( traceID ) : void => { if ( params . traceID ) { history . push ( { pathname : location . pathname , search : `?compare=${ traceID }` , } ) ; } else { history . push ( { pathname : location . pathname . slice ( - 1 ) === '/' ? `${ location . pathname }${ traceID }` : `${ location . pathname }/${ traceID }` , } ) ; } } ; const handleUpload = ( trace ) : void => { setUploadedTrace ( trace ) ; history . push ( { pathname : location . pathname . slice ( - 1 ) === '/' ? `${ location . pathname }${ trace . traceID }` : `${ location . pathname }/${ trace . traceID }` , } ) ; } ; useEffect ( ( ) => { const params = new URLSearchParams ( location . search ) ; const traceID = params . get ( 'compare' ) ; setCompareTrace ( traceID ? traceID : '' ) ; } , [ location . search ] ) ; if ( ! params . traceID ) { return < TraceSelect setTraceID = { changeCompareTrace } setTrace = { handleUpload } / > ; } return ( < Grid style = { { height : '100%' } } > < GridItem sm = { 12 } md = { 12 } lg = { compareTrace ? 6 : 12 } xl = { compareTrace ? 6 : 12 } xl2 = { compareTrace ? 6 : 12 } > { uploadedTrace ? ( < TraceCompareData name = { name } traceData = { uploadedTrace } / > ) : ( < TraceCompareID name = { name } traceID = { params . traceID } / > ) } < /GridItem> { compareTrace ? ( < GridItem sm = { 12 } md = { 12 } lg = { compareTrace ? 6 : 12 } xl = { compareTrace ? 6 : 12 } xl2 = { compareTrace ? 6 : 12 } > < TraceCompareID name = { name } traceID = { compareTrace } / > < /GridItem>) : null} < /Grid>); } ; export default JaegerPageCompare ;