Drilldowns

.github/CODEOWNERS

@@ -3,6 +3,7 @@
 # For more info, see https://help.github.com/articles/about-codeowners/
 
 # App
+/x-pack/legacy/plugins/dashboard_enhanced/ @elastic/kibana-app
 /x-pack/legacy/plugins/lens/ @elastic/kibana-app
 /x-pack/legacy/plugins/graph/ @elastic/kibana-app
 /src/legacy/server/url_shortening/ @elastic/kibana-app

src/dev/storybook/aliases.ts

@@ -18,12 +18,13 @@
  */
 
 export const storybookAliases = {
+  advanced_ui_actions: 'x-pack/plugins/advanced_ui_actions/scripts/storybook.js',
   apm: 'x-pack/legacy/plugins/apm/scripts/storybook.js',
   canvas: 'x-pack/legacy/plugins/canvas/scripts/storybook_new.js',
   codeeditor: 'src/plugins/kibana_react/public/code_editor/scripts/storybook.ts',
   drilldowns: 'x-pack/plugins/drilldowns/scripts/storybook.js',
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   siem: 'x-pack/legacy/plugins/siem/scripts/storybook.js',
-  ui_actions: 'x-pack/plugins/advanced_ui_actions/scripts/storybook.js',
+  ui_actions: 'src/plugins/ui_actions/scripts/storybook.js',
 };

src/plugins/embeddable/public/bootstrap.ts

@@ -21,6 +21,7 @@ import { Filter } from '../../data/public';
 import {
   applyFilterTrigger,
   contextMenuTrigger,
+  contextMenuDrilldownsTrigger,
   createFilterAction,
   panelBadgeTrigger,
   selectRangeTrigger,
@@ -32,6 +33,7 @@ import {
   VALUE_CLICK_TRIGGER,
   SELECT_RANGE_TRIGGER,
   CONTEXT_MENU_TRIGGER,
+  CONTEXT_MENU_DRILLDOWNS_TRIGGER,
   PANEL_BADGE_TRIGGER,
   ACTION_ADD_PANEL,
   ACTION_CUSTOMIZE_PANEL,
@@ -51,6 +53,7 @@ declare module '../../ui_actions/public' {
       filters: Filter[];
     };
     [CONTEXT_MENU_TRIGGER]: EmbeddableContext;
+    [CONTEXT_MENU_DRILLDOWNS_TRIGGER]: EmbeddableContext;
     [PANEL_BADGE_TRIGGER]: EmbeddableContext;
   }
 
@@ -70,6 +73,7 @@ declare module '../../ui_actions/public' {
  */
 export const bootstrap = (uiActions: UiActionsSetup) => {
   uiActions.registerTrigger(contextMenuTrigger);
+  uiActions.registerTrigger(contextMenuDrilldownsTrigger);
   uiActions.registerTrigger(applyFilterTrigger);
   uiActions.registerTrigger(panelBadgeTrigger);
   uiActions.registerTrigger(selectRangeTrigger);

src/plugins/embeddable/public/index.ts

@@ -33,6 +33,7 @@ export {
   ContainerInput,
   ContainerOutput,
   CONTEXT_MENU_TRIGGER,
+  CONTEXT_MENU_DRILLDOWNS_TRIGGER,
   contextMenuTrigger,
   ACTION_EDIT_PANEL,
   EditPanelAction,

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -44,7 +44,7 @@ import {
 import { inspectorPluginMock } from 'src/plugins/inspector/public/mocks';
 import { EuiBadge } from '@elastic/eui';
 
-const actionRegistry = new Map<string, Action<object | undefined | string | number>>();
+const actionRegistry = new Map<string, Action>();
 const triggerRegistry = new Map<string, Trigger>();
 const embeddableFactories = new Map<string, EmbeddableFactory>();
 const getEmbeddableFactory: GetEmbeddableFactory = (id: string) => embeddableFactories.get(id);
@@ -213,13 +213,17 @@ const renderInEditModeAndOpenContextMenu = async (
 };
 
 test('HelloWorldContainer in edit mode hides disabledActions', async () => {
-  const action: Action = {
+  const action = {
     id: 'FOO',
     type: 'FOO' as ActionType,
     getIconType: () => undefined,
     getDisplayName: () => 'foo',
     isCompatible: async () => true,
     execute: async () => {},
+    order: 10,
+    getHref: () => {
+      return undefined;
+    },
   };
   const getActions = () => Promise.resolve([action]);
 
@@ -245,13 +249,17 @@ test('HelloWorldContainer in edit mode hides disabledActions', async () => {
 });
 
 test('HelloWorldContainer hides disabled badges', async () => {
-  const action: Action = {
+  const action = {
     id: 'BAR',
     type: 'BAR' as ActionType,
     getIconType: () => undefined,
     getDisplayName: () => 'bar',
     isCompatible: async () => true,
     execute: async () => {},
+    order: 10,
+    getHref: () => {
+      return undefined;
+    },
   };
   const getActions = () => Promise.resolve([action]);
 

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -20,12 +20,22 @@ import { EuiContextMenuPanelDescriptor, EuiPanel, htmlIdGenerator } from '@elast
 import classNames from 'classnames';
 import React from 'react';
 import { Subscription } from 'rxjs';
-import { buildContextMenuForActions, UiActionsService, Action } from '../ui_actions';
+import {
+  buildContextMenuForActions,
+  UiActionsService,
+  Action,
+  contextMenuSeparatorAction,
+} from '../ui_actions';
 import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { toMountPoint } from '../../../../kibana_react/public';
 
 import { Start as InspectorStartContract } from '../inspector';
-import { CONTEXT_MENU_TRIGGER, PANEL_BADGE_TRIGGER, EmbeddableContext } from '../triggers';
+import {
+  CONTEXT_MENU_TRIGGER,
+  CONTEXT_MENU_DRILLDOWNS_TRIGGER,
+  PANEL_BADGE_TRIGGER,
+  EmbeddableContext,
+} from '../triggers';
 import { IEmbeddable } from '../embeddables/i_embeddable';
 import { ViewMode, GetEmbeddableFactory, GetEmbeddableFactories } from '../types';
 
@@ -37,6 +47,14 @@ import { InspectPanelAction } from './panel_header/panel_actions/inspect_panel_a
 import { EditPanelAction } from '../actions';
 import { CustomizePanelModal } from './panel_header/panel_actions/customize_title/customize_panel_modal';
 
+const sortByOrderField = (
+  { order: orderA }: { order?: number },
+  { order: orderB }: { order?: number }
+) => (orderB || 0) - (orderA || 0);
+
+const removeById = (disabledActions: string[]) => ({ id }: { id: string }) =>
+  disabledActions.indexOf(id) === -1;
+
 interface Props {
   embeddable: IEmbeddable<any, any>;
   getActions: UiActionsService['getTriggerCompatibleActions'];
@@ -200,13 +218,18 @@ export class EmbeddablePanel extends React.Component<Props, State> {
   };
 
   private getActionContextMenuPanel = async () => {
-    let actions = await this.props.getActions(CONTEXT_MENU_TRIGGER, {
+    let regularActions = await this.props.getActions(CONTEXT_MENU_TRIGGER, {
+      embeddable: this.props.embeddable,
+    });
+    let drilldownActions = await this.props.getActions(CONTEXT_MENU_DRILLDOWNS_TRIGGER, {
       embeddable: this.props.embeddable,
     });
 
     const { disabledActions } = this.props.embeddable.getInput();
     if (disabledActions) {
-      actions = actions.filter(action => disabledActions.indexOf(action.id) === -1);
+      const removeDisabledActions = removeById(disabledActions);
+      regularActions = regularActions.filter(removeDisabledActions);
+      drilldownActions = drilldownActions.filter(removeDisabledActions);
     }
 
     const createGetUserData = (overlays: OverlayStart) =>
@@ -245,16 +268,16 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       new EditPanelAction(this.props.getEmbeddableFactory),
     ];
 
-    const sorted = actions
-      .concat(extraActions)
-      .sort((a: Action<EmbeddableContext>, b: Action<EmbeddableContext>) => {
-        const bOrder = b.order || 0;
-        const aOrder = a.order || 0;
-        return bOrder - aOrder;
-      });
+    const sortedRegularActions = [...regularActions, ...extraActions].sort(sortByOrderField);
+    const sortedDrilldownActions = [...drilldownActions].sort(sortByOrderField);
+    const actions = [
+      ...sortedDrilldownActions,
+      ...(sortedDrilldownActions.length ? [contextMenuSeparatorAction] : []),
+      ...sortedRegularActions,
+    ];
 
     return await buildContextMenuForActions({
-      actions: sorted,
+      actions,
       actionContext: { embeddable: this.props.embeddable },
       closeMenu: this.closeMyContextMenuPanel,
     });

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

@@ -54,6 +54,13 @@ export const contextMenuTrigger: Trigger<'CONTEXT_MENU_TRIGGER'> = {
   description: 'Triggered on top-right corner context-menu select.',
 };
 
+export const CONTEXT_MENU_DRILLDOWNS_TRIGGER = 'CONTEXT_MENU_DRILLDOWNS_TRIGGER';
+export const contextMenuDrilldownsTrigger: Trigger<'CONTEXT_MENU_DRILLDOWNS_TRIGGER'> = {
+  id: CONTEXT_MENU_DRILLDOWNS_TRIGGER,
+  title: 'Drilldown context menu',
+  description: 'Triggered on top-right corner context-menu select.',
+};
+
 export const APPLY_FILTER_TRIGGER = 'FILTER_TRIGGER';
 export const applyFilterTrigger: Trigger<'FILTER_TRIGGER'> = {
   id: APPLY_FILTER_TRIGGER,

src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.ts

@@ -24,15 +24,58 @@ import { Comparator, Connect, StateContainer, UnboxState } from './types';
 
 const { useContext, useLayoutEffect, useRef, createElement: h } = React;
 
+/**
+ * Returns the latest state of a state container.
+ *
+ * @param container State container which state to track.
+ */
+export const useContainerState = <Container extends StateContainer<any, any>>(
+  container: Container
+): UnboxState<Container> => useObservable(container.state$, container.get());
+
+/**
+ * Apply selector to state container to extract only needed information. Will
+ * re-render your component only when the section changes.
+ *
+ * @param container State container which state to track.
+ * @param selector Function used to pick parts of state.
+ * @param comparator Comparator function used to memoize previous result, to not
+ *    re-render React component if state did not change. By default uses
+ *    `fast-deep-equal` package.
+ */
+export const useContainerSelector = <Container extends StateContainer<any, any>, Result>(
+  container: Container,
+  selector: (state: UnboxState<Container>) => Result,
+  comparator: Comparator<Result> = defaultComparator
+): Result => {
+  const { state$, get } = container;
+  const lastValueRef = useRef<Result>(get());
+  const [value, setValue] = React.useState<Result>(() => {
+    const newValue = selector(get());
+    lastValueRef.current = newValue;
+    return newValue;
+  });
+  useLayoutEffect(() => {
+    const subscription = state$.subscribe((currentState: UnboxState<Container>) => {
+      const newValue = selector(currentState);
+      if (!comparator(lastValueRef.current, newValue)) {
+        lastValueRef.current = newValue;
+        setValue(newValue);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [state$, comparator]);
+  return value;
+};
+
 export const createStateContainerReactHelpers = <Container extends StateContainer<any, any>>() => {
   const context = React.createContext<Container>(null as any);
 
   const useContainer = (): Container => useContext(context);
 
   const useState = (): UnboxState<Container> => {
-    const { state$, get } = useContainer();
-    const value = useObservable(state$, get());
-    return value;
+    const container = useContainer();
+    return useContainerState(container);
   };
 
   const useTransitions: () => Container['transitions'] = () => useContainer().transitions;
@@ -41,24 +84,8 @@ export const createStateContainerReactHelpers = <Container extends StateContaine
     selector: (state: UnboxState<Container>) => Result,
     comparator: Comparator<Result> = defaultComparator
   ): Result => {
-    const { state$, get } = useContainer();
-    const lastValueRef = useRef<Result>(get());
-    const [value, setValue] = React.useState<Result>(() => {
-      const newValue = selector(get());
-      lastValueRef.current = newValue;
-      return newValue;
-    });
-    useLayoutEffect(() => {
-      const subscription = state$.subscribe((currentState: UnboxState<Container>) => {
-        const newValue = selector(currentState);
-        if (!comparator(lastValueRef.current, newValue)) {
-          lastValueRef.current = newValue;
-          setValue(newValue);
-        }
-      });
-      return () => subscription.unsubscribe();
-    }, [state$, comparator]);
-    return value;
+    const container = useContainer();
+    return useContainerSelector<Container, Result>(container, selector, comparator);
   };
 
   const connect: Connect<UnboxState<Container>> = mapStateToProp => component => props =>

src/plugins/ui_actions/public/actions/action.ts

@@ -19,10 +19,12 @@
 
 import { UiComponent } from 'src/plugins/kibana_utils/common';
 import { ActionType, ActionContextMapping } from '../types';
+import { Presentable } from '../util/presentable';
 
 export type ActionByType<T extends ActionType> = Action<ActionContextMapping[T], T>;
 
-export interface Action<Context = {}, T = ActionType> {
+export interface Action<Context extends {} = {}, T = ActionType>
+  extends Partial<Presentable<Context>> {
   /**
    * Determined the order when there is more than one action matched to a trigger.
    * Higher numbers are displayed first.
@@ -72,3 +74,47 @@ export interface Action<Context = {}, T = ActionType> {
    */
   execute(context: Context): Promise<void>;
 }
+
+/**
+ * A convenience interface used to register an action.
+ */
+export interface ActionDefinition<
+  Context extends object = object,
+  Config extends object | undefined = undefined
+> extends Partial<Presentable<Context>> {
+  /**
+   * ID of the action that uniquely identifies this action in the actions registry.
+   */
+  readonly id: string;
+
+  /**
+   * ID of the factory for this action. Used to construct dynamic actions.
+   */
+  readonly type?: ActionType;
+
+  getHref?(context: Context): string | undefined;
+
+  /**
+   * Executes the action.
+   */
+  execute(context: Context): Promise<void>;
+}
+
+export type AnyActionDefinition = ActionDefinition<any, any>;
+export type ActionContext<A> = A extends ActionDefinition<infer Context, any> ? Context : never;
+export type ActionConfig<A> = A extends ActionDefinition<any, infer Config> ? Config : never;
+
+/**
+ * A convenience interface used to register a dynamic action.
+ *
+ * A dynamic action is one that can be create by user and registered into the
+ * actions registry at runtime. User can also provide custom config for this
+ * action. And dynamic actions can be serialized for storage and deserialized
+ * back.
+ */
+export type DynamicActionDefinition<
+  Context extends object = object,
+  Config extends object | undefined = undefined
+> = ActionDefinition<Context, Config>;
+
+export type AnyDynamicActionDefinition = DynamicActionDefinition<any, any>;

src/plugins/ui_actions/public/actions/action_contract.ts

@@ -0,0 +1,38 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ActionInternal } from './action_internal';
+import { AnyActionDefinition } from './action';
+
+/**
+ * Action representation that is exposed out to other plugins.
+ */
+export type ActionContract<A extends AnyActionDefinition> = Pick<
+  ActionInternal<A>,
+  | 'id'
+  | 'type'
+  | 'order'
+  | 'getIconType'
+  | 'getDisplayName'
+  | 'isCompatible'
+  | 'getHref'
+  | 'execute'
+>;
+
+export type AnyActionContract = ActionContract<any>;