import React , { FC } from 'react' ; import { EuiIcon , EuiSelect , EuiToolTip } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { usePageUrlState } from '../../../util/url_state' ; export interface TableInterval { display : string ; val : string ; } const OPTIONS = [ { value : 'auto' , text : i18n . translate ( 'xpack.ml.controls.selectInterval.autoLabel' , { defaultMessage : 'Auto' } ) , } , { value : 'hour' , text : i18n . translate ( 'xpack.ml.controls.selectInterval.hourLabel' , { defaultMessage : '1 hour' , } ) , } , { value : 'day' , text : i18n . translate ( 'xpack.ml.controls.selectInterval.dayLabel' , { defaultMessage : '1 day' } ) , } , { value : 'second' , text : i18n . translate ( 'xpack.ml.controls.selectInterval.showAllLabel' , { defaultMessage : 'Show all' , } ) , } , ] ; function optionValueToInterval ( value ) { const option = OPTIONS . find ( ( opt ) => opt . value === value ) ; let interval = { display : OPTIONS [ 0 ] . text , val : OPTIONS [ 0 ] . value } ; if ( option !== undefined ) { interval = { display : option . text , val : option . value } ; } return interval ; } export const TABLE_INTERVAL_DEFAULT = optionValueToInterval ( 'auto' ) ; export const useTableInterval = ( ) : [ TableInterval , ( v : TableInterval ) => void ] => { return usePageUrlState < TableInterval > ( 'mlSelectInterval' , TABLE_INTERVAL_DEFAULT ) ; } ; export const SelectInterval = ( ) => { const [ interval , setInterval ] = useTableInterval ( ) ; return < SelectIntervalUI interval = { interval } onChange = { setInterval } / > ; } ; interface SelectIntervalUIProps { interval : TableInterval ; onChange : ( interval : TableInterval ) => void ; } export const SelectIntervalUI = ( { interval , onChange } ) => { const handleOnChange = ( e ) => { onChange ( optionValueToInterval ( e . target . value ) ) ; } ; return ( < EuiSelect prepend = { i18n . translate ( 'xpack.ml.explorer.intervalLabel' , { defaultMessage : 'Interval' , } ) } append = { < EuiToolTip content = { i18n . translate ( 'xpack.ml.explorer.intervalTooltip' , { defaultMessage : 'Show only the highest severity anomaly for each interval (such as hour or day) or show all anomalies in the selected time period.' , } ) } > < EuiIcon type = "questionInCircle" color = "subdued" / > < /EuiToolTip>} compressed id="selectInterval" options={OPTIONS} value={interval.val} onChange={handleOnChange}/ > ) ; } ;