import { EuiText , EuiIcon , EuiSpacer } from '@elastic/eui' ; import React from 'react' ; import ReactDOM from 'react-dom' ; import { Markdown } from '../../../../opensearch_dashboards_react/public' ; import { Embeddable } from './embeddable' ; import { EmbeddableInput , EmbeddableOutput , IEmbeddable } from './i_embeddable' ; import { IContainer } from '../containers' ; export const ERROR_EMBEDDABLE_TYPE = 'error' ; export function isErrorEmbeddable < TEmbeddable extends IEmbeddable > ( embeddable ) { return Boolean ( embeddable . fatalError || ( embeddable as ErrorEmbeddable ) . error !== undefined ) ; } export class ErrorEmbeddable extends Embeddable < EmbeddableInput , EmbeddableOutput > { public readonly type = ERROR_EMBEDDABLE_TYPE ; public error : Error | string ; private dom ? : HTMLElement ; constructor ( error , input , parent ? ) { super ( input , { } , parent ) ; this . error = error ; } public reload ( ) { } public render ( dom ) { const title = typeof this . error === 'string' ? this . error : this . error . message ; this . dom = dom ; ReactDOM . render ( < div className = "embPanel__error embPanel__content" data - test - subj = "embeddableStackError" > < EuiText color = "subdued" size = "xs" > < EuiIcon type = "alert" color = "danger" / > < EuiSpacer size = "s" / > < Markdown markdown = { title } openLinksInNewTab = { true } data - test - subj = "errorMessageMarkdown" / > < /EuiText> < /div>, dom); } public destroy ( ) { if ( this . dom ) { ReactDOM . unmountComponentAtNode ( this . dom ) ; } } }