import React , { useMemo , useState } from 'react' ; import { EuiTab , EuiTabs , EuiText } from '@elastic/eui' ; import { monaco , XJsonLang } from '@kbn/monaco' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { IndexPattern } from '../../../../../src/plugins/data/public' ; import { CodeEditor } from '../../../../../src/plugins/kibana_react/public' ; interface InspectPanelProps { showInspect : boolean ; indexPattern ? : IndexPattern ; lastRequest ? : string ; lastResponse ? : string ; } const CODE_EDITOR_OPTIONS = { automaticLayout : true , fontSize : 12 , lineNumbers : 'on' , minimap : { enabled : false , } , overviewRulerBorder : false , readOnly : true , scrollbar : { alwaysConsumeMouseWheel : false , } , scrollBeyondLastLine : false , wordWrap : 'on' , wrappingIndent : 'indent' , } ; const dummyCallback = ( ) => { } ; export const InspectPanel = ( { showInspect , lastRequest , lastResponse , indexPattern , } ) => { const [ selectedTabId , setSelectedTabId ] = useState ( 'request' ) ; const onRequestClick = ( ) => setSelectedTabId ( 'request' ) ; const onResponseClick = ( ) => setSelectedTabId ( 'response' ) ; const editorContent = useMemo ( ( ) => ( selectedTabId === 'request' ? lastRequest : lastResponse ) , [ lastRequest , lastResponse , selectedTabId ] ) ; if ( showInspect ) { return ( < div className = "gphGraph__menus" > < div > < div className = "kuiLocalDropdownTitle" > < FormattedMessage id = "xpack.graph.inspect.title" defaultMessage = "Inspect" / > < /div> < div className = "list-group-item" > < EuiText size = "xs" className = "help-block" > < span > http : < /EuiText> < EuiTabs > < EuiTab onClick = { onRequestClick } isSelected = { 'request' === selectedTabId } > < FormattedMessage id = "xpack.graph.inspect.requestTabTitle" defaultMessage = "Request" / > < /EuiTab> < EuiTab onClick = { onResponseClick } isSelected = { 'response' === selectedTabId } > < FormattedMessage id = "xpack.graph.inspect.responseTabTitle" defaultMessage = "Response" / > < /EuiTab> < /EuiTabs> < CodeEditor languageId = { XJsonLang . ID } height = { 240 } value = { editorContent || '' } onChange = { dummyCallback } editorDidMount = { dummyCallback } options = { CODE_EDITOR_OPTIONS } / > < /div> < /div> < /div>); } return null ; } ;