import React from 'react' ; import { EuiTabs , EuiTab } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { Targets } from '../../types' ; export interface Props { activeTab : Targets | null ; activateTab : ( target : Targets ) => void ; has : { searches : boolean ; aggregations : boolean ; } ; } export const SearchProfilerTabs = ( { activeTab , activateTab , has } ) => { return ( < EuiTabs > < EuiTab data - test - subj = "queryProfileTab" isSelected = { activeTab === 'searches' } disabled = { ! has . searches } onClick = { ( ) => activateTab ( 'searches' ) } > { i18n . translate ( 'xpack.searchProfiler.queryProfileTabTitle' , { defaultMessage : 'Query Profile' , } ) } < /EuiTab> < EuiTab data - test - subj = "aggregationProfileTab" isSelected = { activeTab === 'aggregations' } disabled = { ! has . aggregations } onClick = { ( ) => activateTab ( 'aggregations' ) } > { i18n . translate ( 'xpack.searchProfiler.aggregationProfileTabTitle' , { defaultMessage : 'Aggregation Profile' , } ) } < /EuiTab> < /EuiTabs>); } ;