import React , { FC } from 'react' ; import { EuiCodeBlock , EuiFlexGroup , EuiFlexItem , EuiSpacer } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; interface Props { json : object ; dataTestSubj : string ; } export const ExpandedRowJsonPane = ( { json , dataTestSubj } ) => { return ( < EuiFlexGroup data - test - subj = { dataTestSubj } > < EuiFlexItem > < EuiSpacer size = "s" / > < EuiCodeBlock aria - label = { i18n . translate ( 'xpack.ml.dataframe.analyticsList.analyticsDetails.expandedRowJsonPane' , { defaultMessage : 'JSON of data frame analytics configuration' , } ) } style = { { width : '100%' } } language = "json" fontSize = "s" paddingSize = "s" overflowHeight = { 300 } isCopyable data - test - subj = { `mlAnalyticsDetailsJsonPreview` } > { JSON . stringify ( json , null , 2 ) } < /EuiCodeBlock> < /EuiFlexItem> < EuiFlexItem grow = { false } > & nbsp ; < /EuiFlexItem> < /EuiFlexGroup>); } ;