import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { IEmbeddable , Embeddable , EmbeddableInput , EmbeddableOutput , } from 'src/plugins/embeddable/public' ; import { Action , IncompatibleActionError } from '../../../../src/plugins/ui_actions/public' ; import { TimeRange } from '../../../../src/plugins/data/public' ; import { OpenModal , CommonlyUsedRange } from './types' ; export const CUSTOM_TIME_RANGE = 'CUSTOM_TIME_RANGE' ; export interface TimeRangeInput extends EmbeddableInput { timeRange : TimeRange ; } function hasTimeRange ( embeddable ) { return ( embeddable as Embeddable < TimeRangeInput > ) . getInput ( ) . timeRange !== undefined ; } const VISUALIZE_EMBEDDABLE_TYPE = 'visualization' ; type VisualizeEmbeddable = IEmbeddable < { id : string ; } , EmbeddableOutput & { visTypeName : string ; } > ; function isVisualizeEmbeddable ( embeddable ) { return embeddable . type === VISUALIZE_EMBEDDABLE_TYPE ; } export interface TimeRangeActionContext { embeddable : Embeddable < TimeRangeInput > ; } export class CustomTimeRangeAction implements Action < TimeRangeActionContext > { public readonly type = CUSTOM_TIME_RANGE ; private openModal : OpenModal ; private dateFormat ? : string ; private commonlyUsedRanges : CommonlyUsedRange [ ] ; public readonly id = CUSTOM_TIME_RANGE ; public order = 30 ; constructor ( { openModal , dateFormat , commonlyUsedRanges , } ) { this . openModal = openModal ; this . dateFormat = dateFormat ; this . commonlyUsedRanges = commonlyUsedRanges ; } public getDisplayName ( ) { return i18n . translate ( 'xpack.uiActionsEnhanced.customizeTimeRangeMenuItem.displayName' , { defaultMessage : 'Customize time range' , } ) ; } public getIconType ( ) { return 'calendar' ; } public async isCompatible ( { embeddable } ) { const isInputControl = isVisualizeEmbeddable ( embeddable ) && ( embeddable as VisualizeEmbeddable ) . getOutput ( ) . visTypeName === 'input_control_vis' ; const isMarkdown = isVisualizeEmbeddable ( embeddable ) && ( embeddable as VisualizeEmbeddable ) . getOutput ( ) . visTypeName === 'markdown' ; return Boolean ( embeddable && embeddable . parent && hasTimeRange ( embeddable ) && ! isInputControl && ! isMarkdown ) ; } 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' , } ) ; } } }