import React , { FC , useMemo } from 'react' ; import { EuiButtonGroup } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { useUrlState } from '../../util/url_state' ; import { useMlLocator , useNavigateToPath } from '../../contexts/kibana' ; import { ML_PAGES } from '../../../../common/constants/locator' ; interface Props { viewId : typeof ML_PAGES . SINGLE_METRIC_VIEWER | typeof ML_PAGES . ANOMALY_EXPLORER ; } export const AnomalyResultsViewSelector = ( { viewId } ) => { const locator = useMlLocator ( ) ! ; const navigateToPath = useNavigateToPath ( ) ; const toggleButtonsIcons = useMemo ( ( ) => [ { id : 'timeseriesexplorer' , label : i18n . translate ( 'xpack.ml.anomalyResultsViewSelector.singleMetricViewerLabel' , { defaultMessage : 'View results in the Single Metric Viewer' , } ) , iconType : 'visLine' , value : ML_PAGES . SINGLE_METRIC_VIEWER , 'data-test-subj' : 'mlAnomalyResultsViewSelectorSingleMetricViewer' , } , { id : 'explorer' , label : i18n . translate ( 'xpack.ml.anomalyResultsViewSelector.anomalyExplorerLabel' , { defaultMessage : 'View results in the Anomaly Explorer' , } ) , iconType : 'visTable' , value : ML_PAGES . ANOMALY_EXPLORER , 'data-test-subj' : 'mlAnomalyResultsViewSelectorExplorer' , } , ] , [ ] ) ; const [ globalState ] = useUrlState ( '_g' ) ; const onChangeView = async ( newViewId ) => { const url = await locator . getUrl ( { page : newViewId , pageState : { globalState , } , } ) ; await navigateToPath ( url ) ; } ; return ( < EuiButtonGroup legend = { i18n . translate ( 'xpack.ml.anomalyResultsViewSelector.buttonGroupLegend' , { defaultMessage : 'Anomaly results view selector' , } ) } name = "anomalyResultsViewSelector" data - test - subj = "mlAnomalyResultsViewSelector" options = { toggleButtonsIcons } idSelected = { viewId } onChange = { ( newViewId ) => onChangeView ( newViewId as Props [ 'viewId' ] ) } isIconOnly / > ) ; } ;