import React from 'react' ; import { Subscription } from 'rxjs' ; import { PanelState , EmbeddableStart } from '../../../embeddable_plugin' ; import { DashboardContainer , DashboardReactContextValue } from '../dashboard_container' ; import { DashboardGrid } from '../grid' ; import { context } from '../../../../../opensearch_dashboards_react/public' ; export interface DashboardViewportProps { container : DashboardContainer ; PanelComponent : EmbeddableStart [ 'EmbeddablePanel' ] ; renderEmpty ? : ( ) => React . ReactNode ; } interface State { isFullScreenMode : boolean ; useMargins : boolean ; title : string ; description ? : string ; panels : { [ key ] : PanelState ; } ; isEmbeddedExternally ? : boolean ; isEmptyState ? : boolean ; } export class DashboardViewport extends React . Component < DashboardViewportProps , State > { static contextType = context ; public readonly context ! : DashboardReactContextValue ; private subscription ? : Subscription ; private mounted : boolean = false ; constructor ( props ) { super ( props ) ; const { isFullScreenMode , panels , useMargins , title , isEmbeddedExternally , isEmptyState , } = this . props . container . getInput ( ) ; this . state = { isFullScreenMode , panels , useMargins , title , isEmbeddedExternally , isEmptyState , } ; } public componentDidMount ( ) { this . mounted = true ; this . subscription = this . props . container . getInput$ ( ) . subscribe ( ( ) => { const { isFullScreenMode , useMargins , title , description , isEmbeddedExternally , isEmptyState , } = this . props . container . getInput ( ) ; if ( this . mounted ) { this . setState ( { isFullScreenMode , description , useMargins , title , isEmbeddedExternally , isEmptyState , } ) ; } } ) ; } public componentWillUnmount ( ) { this . mounted = false ; if ( this . subscription ) { this . subscription . unsubscribe ( ) ; } } public onExitFullScreenMode = ( ) => { this . props . container . updateInput ( { isFullScreenMode : false , } ) ; } ; private renderEmptyScreen ( ) { const { renderEmpty } = this . props ; const { isEmbeddedExternally , isFullScreenMode } = this . state ; return ( < div className = "dshDashboardEmptyScreen" > { isFullScreenMode && ( < this . context . services . ExitFullScreenButton onExitFullScreenMode = { this . onExitFullScreenMode } toggleChrome = { ! isEmbeddedExternally } />)} { renderEmpty && renderEmpty ( ) } < /div>); } private renderContainerScreen ( ) { const { container , PanelComponent } = this . props ; const { isEmbeddedExternally , isFullScreenMode , panels , title , description , useMargins , } = this . state ; return ( < div data - shared - items - count = { Object . values ( panels ) . length } data - shared - items - container data - title = { title } data - description = { description } className = { useMargins ? 'dshDashboardViewport-withMargins' : 'dshDashboardViewport' } > { isFullScreenMode && ( < this . context . services . ExitFullScreenButton onExitFullScreenMode = { this . onExitFullScreenMode } toggleChrome = { ! isEmbeddedExternally } />)} < DashboardGrid container = { container } PanelComponent = { PanelComponent } / > < /div>); } public render ( ) { return ( < React . Fragment > { this . state . isEmptyState ? this . renderEmptyScreen ( ) : null } { this . renderContainerScreen ( ) } < /React.Fragment>); } }