import { Drawer , DrawerContent , DrawerContentBody , PageSection , PageSectionVariants , Title , } from '@patternfly/react-core' ; import React , { useEffect , useState } from 'react' ; import { useHistory , useLocation } from 'react-router-dom' ; import { IOptions } from '../../utils/interfaces' ; import TracesActions from './TracesActions' ; import TracesPanel from '../panel/Traces' ; import TracesToolbar from './TracesToolbar' ; import { getInitialOptions } from '../../utils/helpers' ; interface ITracesProps { name : string ; displayName : string ; description : string ; } const Traces = ( { name , displayName , description } ) => { const location = useLocation ( ) ; const history = useHistory ( ) ; const [ options , setOptions ] = useState < IOptions > ( ) ; const [ details , setDetails ] = useState < React . ReactNode > ( undefined ) ; const changeOptions = ( opts ) : void => { history . push ( { pathname : location . pathname , search : `?limit=${ opts . limit }&maxDuration=${ opts . maxDuration }&minDuration=${ opts . minDuration }&operation=${ opts . operation === 'All Operations' ? '' : opts . operation }&service=${ opts . service }&tags=${ opts . tags }&time=${ opts . times . time }&timeEnd=${ opts . times . timeEnd }&timeStart=${ opts . times . timeStart }` , } ) ; } ; useEffect ( ( ) => { setOptions ( ( prevOptions ) => getInitialOptions ( location . search , ! prevOptions ) ) ; } , [ location . search ] ) ; if ( ! options ) { return null ; } return ( < React . Fragment > < PageSection variant = { PageSectionVariants . light } > < div style = { { position : 'relative' } } > < Title headingLevel = "h6" size = "xl" > { displayName } < /Title> < TracesActions name = { name } / > < /div> < p > { description } < /p> < TracesToolbar name = { name } options = { options } setOptions = { changeOptions } / > < /PageSection> < Drawer isExpanded = { details !== undefined } > < DrawerContent panelContent = { details } > < DrawerContentBody > < PageSection style = { { minHeight : '100%' } } variant = { PageSectionVariants . default } > { options . service ? ( < TracesPanel name = { name } title = "" setDetails = { setDetails } queries = { [ { limit : options . limit , maxDuration : options . maxDuration , minDuration : options . minDuration , name : '' , operation : options . operation , service : options . service , tags : options . tags , } , ] } showChart = { true } times = { options . times } / > ) : null } < /PageSection> < /DrawerContentBody> < /DrawerContent> < /Drawer> < /React.Fragment>); } ; export default Traces ;