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 Dashboards from './Dashboards' ; import { IOptions } from '../../utils/interfaces' ; import { IPluginPageProps } from '@kobsio/plugin-core' ; import PageToolbar from './PageToolbar' ; import { getInitialOptions } from '../../utils/helpers' ; const Page = ( { name , displayName , description , pluginOptions , } ) => { const location = useLocation ( ) ; const history = useHistory ( ) ; const [ options , setOptions ] = useState < IOptions > ( ) ; const changeOptions = ( opts ) : void => { history . push ( { pathname : location . pathname , search : `?query=${ encodeURIComponent ( opts . query ) }` , } ) ; } ; useEffect ( ( ) => { setOptions ( getInitialOptions ( location . search ) ) ; } , [ location . search ] ) ; if ( ! options ) { return null ; } return ( < React . Fragment > < PageSection variant = { PageSectionVariants . light } > < Title headingLevel = "h6" size = "xl" > { displayName } < /Title> < p > { description } < /p> < PageToolbar name = { name } options = { options } setOptions = { changeOptions } / > < /PageSection> < Drawer isExpanded = { false } > < DrawerContent panelContent = { undefined } > < DrawerContentBody > < PageSection style = { { minHeight : '100%' } } variant = { PageSectionVariants . default } > < Dashboards name = { name } query = { options . query } publicAddress = { pluginOptions && pluginOptions . publicAddress ? pluginOptions . publicAddress : '' } /> < /PageSection> < /DrawerContentBody> < /DrawerContent> < /Drawer> < /React.Fragment>); } ; export default Page ;