Drilldowns for TSVB

src/plugins/data/public/actions/filters/create_filters_from_range_select.test.ts

@@ -25,12 +25,12 @@ import { IndexPatternsContract, RangeFilter } from '../../../public';
 import { dataPluginMock } from '../../../public/mocks';
 import { setIndexPatterns } from '../../../public/services';
 import { mockDataServices } from '../../../public/search/aggs/test_helpers';
-import { TriggerContextMapping } from '../../../../ui_actions/public';
+import { RangeSelectTriggerContextTableDataEvent } from '../../../../embeddable/public/lib/triggers/triggers';
 
 describe('brushEvent', () => {
   const DAY_IN_MS = 24 * 60 * 60 * 1000;
   const JAN_01_2014 = 1388559600000;
-  let baseEvent: TriggerContextMapping['SELECT_RANGE_TRIGGER']['data'];
+  let baseEvent: RangeSelectTriggerContextTableDataEvent;
 
   const indexPattern = {
     id: 'indexPatternId',

src/plugins/data/public/actions/filters/create_filters_from_range_select.ts

@@ -22,9 +22,16 @@ import moment from 'moment';
 import { esFilters, IFieldType, RangeFilterParams } from '../../../public';
 import { getIndexPatterns } from '../../../public/services';
 import { deserializeAggConfig } from '../../search/expressions/utils';
-import { RangeSelectTriggerContext } from '../../../../embeddable/public';
+import {
+  RangeSelectTriggerContext,
+  isRangeSelectTriggerContextTimeRangeFilterEvent,
+} from '../../../../embeddable/public';
 
 export async function createFiltersFromRangeSelectAction(event: RangeSelectTriggerContext['data']) {
+  if (isRangeSelectTriggerContextTimeRangeFilterEvent(event)) {
+    return esFilters.mapAndFlattenFilters([event.timeRangeFilter]);
+  }
+
   const column: Record<string, any> = event.table.columns[event.column];
 
   if (!column || !column.meta) {

src/plugins/data/public/public.api.md

@@ -140,6 +140,7 @@ import { PopoverAnchorPosition } from '@elastic/eui';
 import { PublicUiSettingsParams } from 'src/core/server/types';
 import { PutScriptParams } from 'elasticsearch';
 import { PutTemplateParams } from 'elasticsearch';
+import { RangeFilter as RangeFilter_2 } from 'src/plugins/data/public';
 import React from 'react';
 import * as React_2 from 'react';
 import { ReindexParams } from 'elasticsearch';

src/plugins/embeddable/public/index.ts

@@ -68,6 +68,10 @@ export {
   SavedObjectEmbeddableInput,
   isSavedObjectEmbeddableInput,
   isRangeSelectTriggerContext,
+  RangeSelectTriggerContextTableDataEvent,
+  isRangeSelectTriggerContextTableDataEvent,
+  RangeSelectTriggerContextTimeRangeFilterEvent,
+  isRangeSelectTriggerContextTimeRangeFilterEvent,
   isValueClickTriggerContext,
   EmbeddableRenderer,
   EmbeddableRendererProps,

src/plugins/embeddable/public/lib/triggers/triggers.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { RangeFilter } from 'src/plugins/data/public';
 import { KibanaDatatable } from '../../../../expressions';
 import { Trigger } from '../../../../ui_actions/public';
 import { IEmbeddable } from '..';
@@ -43,19 +44,44 @@ export const isValueClickTriggerContext = (
   context: ValueClickTriggerContext | RangeSelectTriggerContext
 ): context is ValueClickTriggerContext => context.data && 'data' in context.data;
 
+export interface RangeSelectTriggerContextTableDataEvent {
+  table: KibanaDatatable;
+  column: number;
+  range: number[];
+  timeFieldName?: string;
+}
+
+export function isRangeSelectTriggerContextTableDataEvent(
+  event: any
+): event is RangeSelectTriggerContextTableDataEvent {
+  return event && 'range' in event;
+}
+
+/** Some of our existing visualizations (Vega, TSVB, Timelion and etc) do not use AggConfigs / esaggs.
+ *  For such visualizations, instead of raising RangeSelectTriggerContextTableDataEvent event we can
+ *  generate a RangeFilter inside the visualization and pass it in RangeSelectTriggerContextTimeRangeFilterEvent
+ **/
+export interface RangeSelectTriggerContextTimeRangeFilterEvent {
+  timeFieldName: string;
+  timeRangeFilter: RangeFilter;
+}
+
+export function isRangeSelectTriggerContextTimeRangeFilterEvent(
+  event: any
+): event is RangeSelectTriggerContextTimeRangeFilterEvent {
+  return event && 'timeFieldName' in event && 'timeRangeFilter' in event;
+}
+
 export interface RangeSelectTriggerContext<T extends IEmbeddable = IEmbeddable> {
   embeddable?: T;
-  data: {
-    table: KibanaDatatable;
-    column: number;
-    range: number[];
-    timeFieldName?: string;
-  };
+  data: RangeSelectTriggerContextTableDataEvent | RangeSelectTriggerContextTimeRangeFilterEvent;
 }
 
 export const isRangeSelectTriggerContext = (
   context: ValueClickTriggerContext | RangeSelectTriggerContext
-): context is RangeSelectTriggerContext => context.data && 'range' in context.data;
+): context is RangeSelectTriggerContext =>
+  isRangeSelectTriggerContextTableDataEvent(context.data) ||
+  isRangeSelectTriggerContextTimeRangeFilterEvent(context.data);
 
 export const CONTEXT_MENU_TRIGGER = 'CONTEXT_MENU_TRIGGER';
 export const contextMenuTrigger: Trigger<'CONTEXT_MENU_TRIGGER'> = {

src/plugins/vis_default_editor/public/components/agg_group.test.tsx

@@ -27,14 +27,19 @@ import { DefaultEditorAggAdd } from './agg_add';
 import { ISchemas, Schemas } from '../schemas';
 import { EditorVisState } from './sidebar/state/reducers';
 
-jest.mock('@elastic/eui', () => ({
-  EuiTitle: 'eui-title',
-  EuiDragDropContext: 'eui-drag-drop-context',
-  EuiDroppable: 'eui-droppable',
-  EuiDraggable: (props: any) => props.children({ dragHandleProps: {} }),
-  EuiSpacer: 'eui-spacer',
-  EuiPanel: 'eui-panel',
-}));
+jest.mock('@elastic/eui', () => {
+  const originalModule = jest.requireActual('@elastic/eui');
+
+  return {
+    ...originalModule,
+    EuiTitle: 'eui-title',
+    EuiDragDropContext: 'eui-drag-drop-context',
+    EuiDroppable: 'eui-droppable',
+    EuiDraggable: (props: any) => props.children({ dragHandleProps: {} }),
+    EuiSpacer: 'eui-spacer',
+    EuiPanel: 'eui-panel',
+  };
+});
 
 jest.mock('./agg', () => ({
   DefaultEditorAgg: () => <div />,

src/plugins/vis_type_timeseries/common/constants.ts

@@ -18,3 +18,5 @@
  */
 
 export const MAX_BUCKETS_SETTING = 'metrics:max_buckets';
+
+export const DEFAULT_TIME_FIELD = '@timestamp';

src/plugins/vis_type_timeseries/public/application/components/vis_editor.js

@@ -50,7 +50,8 @@ export class VisEditor extends Component {
       visFields: props.visFields,
       extractedIndexPatterns: [''],
     };
-    this.onBrush = createBrushHandler(getDataStart().query.timefilter.timefilter);
+
+    this.onBrush = createBrushHandler(this.props.vis);
     this.visDataSubject = new Rx.BehaviorSubject(this.props.visData);
     this.visData$ = this.visDataSubject.asObservable().pipe(share());
 

src/plugins/vis_type_timeseries/public/application/lib/create_brush_handler.test.js → src/plugins/vis_type_timeseries/public/application/lib/create_brush_handler.test.ts

@@ -18,28 +18,40 @@
  */
 
 import { createBrushHandler } from './create_brush_handler';
-import moment from 'moment';
+import { ExprVis } from '../../../../visualizations/public';
 
 describe('brushHandler', () => {
-  let mockTimefilter;
-  let onBrush;
+  let onBrush: ReturnType<typeof createBrushHandler>;
+  let vis: ExprVis;
 
   beforeEach(() => {
-    mockTimefilter = {
-      time: {},
-      setTime: function (time) {
-        this.time = time;
+    vis = ({
+      API: {
+        events: {
+          brush: jest.fn(),
+        },
       },
-    };
-    onBrush = createBrushHandler(mockTimefilter);
+      params: {
+        time_field: 'time_field',
+        index_pattern: 'index_pattern',
+      },
+    } as unknown) as ExprVis;
+
+    onBrush = createBrushHandler(vis);
   });
 
-  it('returns brushHandler() that updates timefilter', () => {
-    const from = '2017-01-01T00:00:00Z';
-    const to = '2017-01-01T00:10:00Z';
-    onBrush(from, to);
-    expect(mockTimefilter.time.from).toEqual(moment(from).toISOString());
-    expect(mockTimefilter.time.to).toEqual(moment(to).toISOString());
-    expect(mockTimefilter.time.mode).toEqual('absolute');
+  test('returns brushHandler() should updates timefilter through vis.API.events.brush', () => {
+    const gte = '2017-01-01T00:00:00Z';
+    const lte = '2017-01-01T00:10:00Z';
+
+    onBrush(gte, lte);
+
+    expect(vis.API.events.brush).toHaveBeenCalledWith({
+      timeFieldName: 'time_field',
+      timeRangeFilter: {
+        meta: { index: 'index_pattern', params: {} },
+        range: { time_field: { gte: '2017-01-01T00:00:00.000Z', lte: '2017-01-01T00:10:00.000Z' } },
+      },
+    });
   });
 });

src/plugins/vis_type_timeseries/public/application/lib/create_brush_handler.js → src/plugins/vis_type_timeseries/public/application/lib/create_brush_handler.ts

@@ -19,12 +19,29 @@
 
 import moment from 'moment';
 
-const TIME_MODE = 'absolute';
+import { IIndexPattern, esFilters, IFieldType } from '../../../../data/public';
+import { ExprVis } from '../../../../visualizations/public';
 
-export const createBrushHandler = (timefilter) => (from, to) => {
-  timefilter.setTime({
-    from: moment(from).toISOString(),
-    to: moment(to).toISOString(),
-    mode: TIME_MODE,
-  });
+import { DEFAULT_TIME_FIELD } from '../../../common/constants';
+
+export const createBrushHandler = (vis: ExprVis) => (gte: string, lte: string) => {
+  const timeFieldName = vis.params.time_field || DEFAULT_TIME_FIELD;
+  const field = {
+    name: timeFieldName,
+  } as IFieldType;
+
+  const indexPattern = {
+    id: vis.params.index_pattern,
+  } as IIndexPattern;
+
+  const timeRangeFilter = esFilters.buildRangeFilter(
+    field,
+    {
+      gte: moment(gte).toISOString(),
+      lte: moment(lte).toISOString(),
+    },
+    indexPattern
+  );
+
+  vis.API.events.brush({ timeRangeFilter, timeFieldName });
 };

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -388,12 +388,13 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
       case 'table':
       case 'tagcloud':
         return [VIS_EVENT_TO_TRIGGER.filter];
+      case 'metrics':
+        return [VIS_EVENT_TO_TRIGGER.brush];
       case 'gauge':
       case 'goal':
       case 'input_control_vis':
       case 'markdown':
       case 'metric':
-      case 'metrics':
       case 'region_map':
       case 'tile_map':
       case 'timelion':

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx

@@ -42,7 +42,10 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
     if (!supportedTriggers || !supportedTriggers.length) return false;
     if (context.embeddable.getRoot().type !== 'dashboard') return false;
 
-    return supportedTriggers.indexOf('VALUE_CLICK_TRIGGER') > -1;
+    return (
+      supportedTriggers.includes('VALUE_CLICK_TRIGGER') ||
+      supportedTriggers.includes('SELECT_RANGE_TRIGGER')
+    );
   }
 
   public async isCompatible(context: EmbeddableContext) {