import React from 'react' ; import { prettyDuration , commonDurationRanges } from '@elastic/eui' ; import { IEmbeddable , Embeddable , EmbeddableInput } from 'src/plugins/embeddable/public' ; import { Action , IncompatibleActionError } from '../../../../src/plugins/ui_actions/public' ; import { TimeRange } from '../../../../src/plugins/data/public' ; import { doesInheritTimeRange } from './does_inherit_time_range' ; import { OpenModal , CommonlyUsedRange } from './types' ; export const CUSTOM_TIME_RANGE_BADGE = 'CUSTOM_TIME_RANGE_BADGE' ; export interface TimeRangeInput extends EmbeddableInput { timeRange : TimeRange ; } function hasTimeRange ( embeddable ) { return ( embeddable as Embeddable < TimeRangeInput > ) . getInput ( ) . timeRange !== undefined ; } export interface TimeBadgeActionContext { embeddable : Embeddable < TimeRangeInput > ; } export class CustomTimeRangeBadge implements Action < TimeBadgeActionContext > { public readonly type = CUSTOM_TIME_RANGE_BADGE ; public readonly id = CUSTOM_TIME_RANGE_BADGE ; public order = 7 ; private openModal : OpenModal ; private dateFormat : string ; private commonlyUsedRanges : CommonlyUsedRange [ ] ; constructor ( { openModal , dateFormat , commonlyUsedRanges , } ) { this . openModal = openModal ; this . dateFormat = dateFormat ; this . commonlyUsedRanges = commonlyUsedRanges ; } public getDisplayName ( { embeddable } ) { return prettyDuration ( embeddable . getInput ( ) . timeRange . from , embeddable . getInput ( ) . timeRange . to , commonDurationRanges , this . dateFormat ) ; } public getIconType ( ) { return 'calendar' ; } public async isCompatible ( { embeddable } ) { return Boolean ( embeddable && hasTimeRange ( embeddable ) && ! doesInheritTimeRange ( embeddable ) ) ; } public async execute ( { embeddable } ) { const isCompatible = await this . isCompatible ( { embeddable } ) ; if ( ! isCompatible ) { throw new IncompatibleActionError ( ) ; } if ( hasTimeRange ( embeddable ) ) { const CustomizeTimeRangeModal = await import ( './customize_time_range_modal' ) . then ( ( m ) => m . CustomizeTimeRangeModal ) ; const modalSession = this . openModal ( < CustomizeTimeRangeModal onClose = { ( ) => modalSession . close ( ) } embeddable = { embeddable } dateFormat = { this . dateFormat } commonlyUsedRanges = { this . commonlyUsedRanges } / > , { 'data-test-subj' : 'customizeTimeRangeModal' , } ) ; } } }