import { Alert , AlertActionLink , AlertVariant , PageSection , PageSectionVariants , Spinner , Tab , TabTitleText , Tabs , } from '@patternfly/react-core' ; import { QueryObserverResult , useQuery } from 'react-query' ; import React , { useEffect , useState } from 'react' ; import { useHistory , useLocation } from 'react-router-dom' ; import { IDashboard , IDashboardReference } from '@kobsio/plugin-core' ; import Dashboard from './Dashboard' ; import { IDashboardsOptions } from '../../utils/interfaces' ; import { getInitialOptions } from '../../utils/dashboard' ; interface IDashboardsProps { cluster : string ; namespace : string ; references : IDashboardReference [ ] ; setDetails ? : ( details : React . ReactNode ) => void ; forceDefaultSpan : boolean ; } const Dashboards = ( { cluster , namespace , references , setDetails , forceDefaultSpan , } ) => { const location = useLocation ( ) ; const history = useHistory ( ) ; const [ options , setOptions ] = useState < IDashboardsOptions > ( ) ; const changeOptions = ( opts ) : void => { history . push ( { pathname : location . pathname , search : `?dashboard=${ opts . dashboard }` , } ) ; } ; useEffect ( ( ) => { setOptions ( getInitialOptions ( location . search , references , setDetails !== undefined ) ) ; } , [ location . search , references , setDetails ] ) ; const { isError , isLoading , error , data , refetch } = useQuery < IDashboard [ ] , Error > ( [ 'dashboards/dashboards' , references , cluster , namespace ] , async ( ) => { try { const response = await fetch ( `/api/plugins/dashboards/dashboards` , { body : JSON . stringify ( { cluster : cluster , namespace : namespace , references : references , } ) , method : 'post' , } ) ; const json = await response . json ( ) ; if ( response . status >= 200 && response . status < 300 ) { return json ; } else { if ( json . error ) { throw new Error ( json . error ) ; } else { throw new Error ( 'An unknown error occured' ) ; } } } catch ( err ) { throw err ; } } ) ; if ( ! options ) { return null ; } if ( isLoading ) { return ( < div className = "pf-u-text-align-center" > < Spinner /> < /div>); } if ( isError ) { return ( < PageSection style = { { minHeight : '100%' } } variant = { PageSectionVariants . default } > < Alert variant = { AlertVariant . danger } title = "Could not get dashboards" actionLinks = { < React . Fragment > < AlertActionLink onClick = { ( ) : Promise < QueryObserverResult < IDashboard [ ] , Error > > => refetch ( ) } > Retry < /AlertActionLink> < /React.Fragment>}> < p > { error ?. message } < /p> < /Alert> < /PageSection>); } if ( ! data ) { return < PageSection style = { { minHeight : '100%' } } variant = { PageSectionVariants . default } > < /PageSection>; } return ( < Tabs activeKey = { options . dashboard } onSelect = { ( event , tabIndex ) : void => setDetails ? changeOptions ( { ... options , dashboard : tabIndex . toString ( ) } ) : setOptions ( { ... options , dashboard : tabIndex . toString ( ) } ) } className = "pf-u-mt-md kobsio-dashboards-tabs-without-margin-top" isFilled = { true } > { data . map ( ( dashboard ) => ( < Tab key = { dashboard . title } eventKey = { dashboard . title } title = { < TabTitleText > { dashboard . title } < /TabTitleText>}> < PageSection style = { { minHeight : '100%' } } variant = { PageSectionVariants . default } > < Dashboard activeKey = { options . dashboard } eventKey = { dashboard . title } dashboard = { dashboard } forceDefaultSpan = { forceDefaultSpan } setDetails = { setDetails } / > < /PageSection> < /Tab>))} < /Tabs>); } ; export default Dashboards ;