import React from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiFlyout , EuiFlyoutHeader , EuiFlyoutBody , EuiIconTip , EuiText , EuiCodeBlock , } from '@elastic/eui' ; import { msToPretty } from '../../lib' ; import { HighlightDetailsTable } from './highlight_details_table' ; import { Operation } from '../../types' ; export interface Props { operation : Omit < Operation , 'children' | 'parent' > ; shardName : string ; indexName : string ; onClose : ( ) => void ; } const FlyoutEntry = ( { title , body , } ) => ( < > < dt > { title } < /dt> < dd > { body } < /dd> < />); export const HighlightDetailsFlyout = ( { indexName , operation , shardName , onClose } ) => { return ( < EuiFlyout className = "prfDevTool__details" onClose = { ( ) => onClose ( ) } > < EuiFlyoutHeader hasBorder = { true } > < EuiText size = "s" > { indexName } < /EuiText> < EuiText > { shardName } < /EuiText> < /EuiFlyoutHeader> < EuiFlyoutBody > < EuiText > < dl > { } < FlyoutEntry title = { i18n . translate ( 'xpack.searchProfiler.highlightDetails.typeTitle' , { defaultMessage : 'Type' , } ) } body = { operation . query_type ! } / > { } < FlyoutEntry title = { i18n . translate ( 'xpack.searchProfiler.highlightDetails.descriptionTitle' , { defaultMessage : 'Description' , } ) } body = { < EuiCodeBlock paddingSize = "s" > { operation . lucene ! } < /EuiCodeBlock>}/ > { } < FlyoutEntry title = { < > { i18n . translate ( 'xpack.searchProfiler.highlightDetails.totalTimeTitle' , { defaultMessage : 'Total time' , } ) } { ' ' } < EuiIconTip type = "iInCircle" color = "subdued" content = { i18n . translate ( 'xpack.searchProfiler.highlightDetails.totalTimeTooltip' , { defaultMessage : 'The total time spent at this query component, inclusive of children' , } ) } / > < />} body={msToPretty(operation.time, 3)}/ > { } < FlyoutEntry title = { < > { i18n . translate ( 'xpack.searchProfiler.highlightDetails.selfTimeTitle' , { defaultMessage : 'Self time' , } ) } { ' ' } < EuiIconTip type = "iInCircle" color = "subdued" content = { i18n . translate ( 'xpack.searchProfiler.highlightDetails.selfTimeTooltip' , { defaultMessage : 'The time spent by this query component alone, exclusive of children' , } ) } / > < />} body={msToPretty(operation.selfTime || 0, 3)}/ > { } < FlyoutEntry title = { i18n . translate ( 'xpack.searchProfiler.highlightDetails.timingBreakdownTitle' , { defaultMessage : 'Timing breakdown' , } ) } body = { < HighlightDetailsTable breakdown = { operation . breakdown } / > } /> < /dl> < /EuiText> < /EuiFlyoutBody> < /EuiFlyout>); } ;