import React from 'react' ; import { EuiDatePicker , EuiDatePickerRange } from '@elastic/eui' ; import { Moment } from 'moment' ; import DateMath from '@elastic/datemath' ; import { i18n } from '@kbn/i18n' ; import { useSeriesStorage } from '../hooks/use_series_storage' ; import { useUiSetting } from '../../../../../../../../src/plugins/kibana_react/public' ; import { SeriesUrl } from '../types' ; import { ReportTypes } from '../configurations/constants' ; export const parseRelativeDate = ( date , options = { } ) : Moment | void => { return DateMath . parse ( date , options ) ! ; } ; export function DateRangePicker ( { seriesId , series } ) { const { firstSeries , setSeries , reportType } = useSeriesStorage ( ) ; const dateFormat = useUiSetting < string > ( 'dateFormat' ) ; const seriesFrom = series . time ?. from ; const seriesTo = series . time ?. to ; const { from : mainFrom , to : mainTo } = firstSeries ! . time ; const startDate = parseRelativeDate ( seriesFrom ?? mainFrom ) ! ; const endDate = parseRelativeDate ( seriesTo ?? mainTo , { roundUp : true } ) ! ; const getTotalDuration = ( ) => { const mainStartDate = parseRelativeDate ( mainFrom ) ! ; const mainEndDate = parseRelativeDate ( mainTo , { roundUp : true } ) ! ; return mainEndDate . diff ( mainStartDate , 'millisecond' ) ; } ; const onStartChange = ( newStartDate ) => { if ( reportType === ReportTypes . KPI ) { const totalDuration = getTotalDuration ( ) ; const newFrom = newStartDate . toISOString ( ) ; const newTo = newStartDate . add ( totalDuration , 'millisecond' ) . toISOString ( ) ; setSeries ( seriesId , { ... series , time : { from : newFrom , to : newTo } , } ) ; } else { const newFrom = newStartDate . toISOString ( ) ; setSeries ( seriesId , { ... series , time : { from : newFrom , to : seriesTo } , } ) ; } } ; const onEndChange = ( newEndDate ) => { if ( reportType === ReportTypes . KPI ) { const totalDuration = getTotalDuration ( ) ; const newTo = newEndDate . toISOString ( ) ; const newFrom = newEndDate . subtract ( totalDuration , 'millisecond' ) . toISOString ( ) ; setSeries ( seriesId , { ... series , time : { from : newFrom , to : newTo } , } ) ; } else { const newTo = newEndDate . toISOString ( ) ; setSeries ( seriesId , { ... series , time : { from : seriesFrom , to : newTo } , } ) ; } } ; return ( < EuiDatePickerRange fullWidth isCustom startDateControl = { < EuiDatePicker fullWidth selected = { startDate } onChange = { onStartChange } startDate = { startDate } endDate = { endDate } isInvalid = { startDate > endDate } aria - label = { i18n . translate ( 'xpack.observability.expView.dateRanger.startDate' , { defaultMessage : 'Start date' , } ) } dateFormat = { dateFormat . replace ( 'ss.SSS' , 'ss' ) } showTimeSelect popoverPlacement = "right" / > } endDateControl = { < EuiDatePicker fullWidth showIcon = { false } selected = { endDate } onChange = { onEndChange } startDate = { startDate } endDate = { endDate } isInvalid = { startDate > endDate } aria - label = { i18n . translate ( 'xpack.observability.expView.dateRanger.endDate' , { defaultMessage : 'End date' , } ) } dateFormat = { dateFormat . replace ( 'ss.SSS' , 'ss' ) } showTimeSelect popoverPlacement = "right" / > } />); }