Per panel time range

src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/tests/dashboard_container.test.tsx

@@ -70,7 +70,7 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => {
  <I18nProvider>
  <EmbeddablePanel
  embeddable={embeddable}
- getActions={(() => []) as any}
+ getActions={() => Promise.resolve([])}
  getAllEmbeddableFactories={(() => []) as any}
  getEmbeddableFactory={(() => null) as any}
  notifications={{} as any}

src/legacy/core_plugins/embeddable_api/public/np_ready/public/bootstrap.ts

@@ -18,7 +18,12 @@
  */
 
 import { EmbeddableApi } from './api/types';
-import { CONTEXT_MENU_TRIGGER, APPLY_FILTER_TRIGGER, ApplyFilterAction } from './lib';
+import {
+ CONTEXT_MENU_TRIGGER,
+ APPLY_FILTER_TRIGGER,
+ ApplyFilterAction,
+ PANEL_BADGE_TRIGGER,
+} from './lib';
 
 /**
  * This method initializes Embeddable plugin with initial set of
@@ -39,10 +44,17 @@ export const bootstrap = (api: EmbeddableApi) => {
  description: 'Triggered when user applies filter to an embeddable.',
  actionIds: [],
  };
+ const triggerBadge = {
+ id: PANEL_BADGE_TRIGGER,
+ title: 'Panel badges',
+ description: 'Actions appear in title bar when an embeddable loads in a panel',
+ actionIds: [],
+ };
  const actionApplyFilter = new ApplyFilterAction();
 
  api.registerTrigger(triggerContext);
  api.registerTrigger(triggerFilter);
  api.registerAction(actionApplyFilter);
+ api.registerTrigger(triggerBadge);
  api.attachAction(triggerFilter.id, actionApplyFilter.id);
 };

src/legacy/core_plugins/embeddable_api/public/np_ready/public/index.ts

@@ -24,6 +24,7 @@ export {
  ADD_PANEL_ACTION_ID,
  APPLY_FILTER_ACTION,
  APPLY_FILTER_TRIGGER,
+ PANEL_BADGE_TRIGGER,
  Action,
  ActionContext,
  Adapters,

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/container.ts

@@ -35,10 +35,10 @@ const getKeys = <T extends {}>(o: T): Array<keyof T> => Object.keys(o) as Array<
 
 export abstract class Container<
  TChildInput extends Partial<EmbeddableInput> = {},
- TContainerInput extends ContainerInput = ContainerInput,
+ TContainerInput extends ContainerInput<TChildInput> = ContainerInput<TChildInput>,
  TContainerOutput extends ContainerOutput = ContainerOutput
 > extends Embeddable<TContainerInput, TContainerOutput>
- implements IContainer<TContainerInput, TContainerOutput> {
+ implements IContainer<TChildInput, TContainerInput, TContainerOutput> {
  public readonly isContainer: boolean = true;
  protected readonly children: {
  [key: string]: IEmbeddable<any, any> | ErrorEmbeddable;

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.test.tsx

@@ -63,7 +63,7 @@ test('EmbeddableChildPanel renders an embeddable when it is done loading', async
  intl={null as any}
  container={container}
  embeddableId={newEmbeddable.id}
- getActions={(() => undefined) as any}
+ getActions={() => Promise.resolve([])}
  getAllEmbeddableFactories={(() => []) as any}
  getEmbeddableFactory={(() => undefined) as any}
  notifications={{} as any}
@@ -102,7 +102,7 @@ test(`EmbeddableChildPanel renders an error message if the factory doesn't exist
  intl={null as any}
  container={container}
  embeddableId={'1'}
- getActions={(() => undefined) as any}
+ getActions={() => Promise.resolve([])}
  getAllEmbeddableFactories={(() => []) as any}
  getEmbeddableFactory={(() => undefined) as any}
  notifications={{} as any}

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/i_container.ts

@@ -50,7 +50,8 @@ export interface ContainerInput<PanelExplicitInput = {}> extends EmbeddableInput
 }
 
 export interface IContainer<
- I extends ContainerInput = ContainerInput,
+ Inherited extends {} = {},
+ I extends ContainerInput<Inherited> = ContainerInput<Inherited>,
  O extends ContainerOutput = ContainerOutput
 > extends IEmbeddable<I, O> {
  /**

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/embeddable_panel.test.tsx

@@ -156,7 +156,7 @@ test('HelloWorldContainer in view mode hides edit mode actions', async () => {
  <I18nProvider>
  <EmbeddablePanel
  embeddable={embeddable}
- getActions={(() => undefined) as any}
+ getActions={() => Promise.resolve([])}
  getAllEmbeddableFactories={(() => []) as any}
  getEmbeddableFactory={(() => undefined) as any}
  notifications={{} as any}
@@ -193,7 +193,7 @@ test('HelloWorldContainer in edit mode shows edit mode actions', async () => {
  <I18nProvider>
  <EmbeddablePanel
  embeddable={embeddable}
- getActions={(() => undefined) as any}
+ getActions={() => Promise.resolve([])}
  getAllEmbeddableFactories={(() => []) as any}
  getEmbeddableFactory={(() => undefined) as any}
  notifications={{} as any}
@@ -255,7 +255,7 @@ test('Updates when hidePanelTitles is toggled', async () => {
  <I18nProvider>
  <EmbeddablePanel
  embeddable={embeddable}
- getActions={(() => undefined) as any}
+ getActions={() => Promise.resolve([])}
  getAllEmbeddableFactories={(() => []) as any}
  getEmbeddableFactory={(() => undefined) as any}
  notifications={{} as any}

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/embeddable_panel.tsx

@@ -23,7 +23,7 @@ import { Subscription } from 'rxjs';
 import { CoreStart } from '../../../../../../../../core/public';
 import { buildContextMenuForActions } from '../context_menu_actions';
 
-import { CONTEXT_MENU_TRIGGER } from '../triggers';
+import { CONTEXT_MENU_TRIGGER, PANEL_BADGE_TRIGGER } from '../triggers';
 import { IEmbeddable } from '../embeddables/i_embeddable';
 import {
  ViewMode,
@@ -58,6 +58,7 @@ interface State {
  viewMode: ViewMode;
  hidePanelTitles: boolean;
  closeContextMenu: boolean;
+ badges: Action[];
 }
 
 export class EmbeddablePanel extends React.Component<Props, State> {
@@ -80,11 +81,24 @@ export class EmbeddablePanel extends React.Component<Props, State> {
  viewMode,
  hidePanelTitles,
  closeContextMenu: false,
+ badges: [],
  };
 
  this.embeddableRoot = React.createRef();
  }
 
+ private async refreshBadges() {
+ const badges = await this.props.getActions(PANEL_BADGE_TRIGGER, {
+ embeddable: this.props.embeddable,
+ });
+
+ if (this.mounted) {
+ this.setState({
+ badges,
+ });
+ }
+ }
+
  public componentWillMount() {
  this.mounted = true;
  const { embeddable } = this.props;
@@ -95,6 +109,8 @@ export class EmbeddablePanel extends React.Component<Props, State> {
  this.setState({
  viewMode: embeddable.getInput().viewMode ? embeddable.getInput().viewMode : ViewMode.EDIT,
  });
+
+ this.refreshBadges();
  }
  });
 
@@ -104,6 +120,8 @@ export class EmbeddablePanel extends React.Component<Props, State> {
  this.setState({
  hidePanelTitles: Boolean(parent.getInput().hidePanelTitles),
  });
+
+ this.refreshBadges();
  }
  });
  }
@@ -144,6 +162,8 @@ export class EmbeddablePanel extends React.Component<Props, State> {
  isViewMode={viewOnlyMode}
  closeContextMenu={this.state.closeContextMenu}
  title={title}
+ badges={this.state.badges}
+ embeddable={this.props.embeddable}
  />
  <div className="embPanel__content" ref={this.embeddableRoot} />
  </EuiPanel>

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts

@@ -29,9 +29,9 @@ interface ExpandedPanelInput extends ContainerInput {
 }
 
 function hasExpandedPanelInput(
- container: IContainer | IContainer<ExpandedPanelInput>
-): container is IContainer<ExpandedPanelInput> {
- return (container as IContainer<ExpandedPanelInput>).getInput().expandedPanelId !== undefined;
+ container: IContainer
+): container is IContainer<{}, ExpandedPanelInput> {
+ return (container as IContainer<{}, ExpandedPanelInput>).getInput().expandedPanelId !== undefined;
 }
 
 export class RemovePanelAction extends Action {

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx

@@ -17,37 +17,59 @@
  * under the License.
  */
 
-import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import { EuiContextMenuPanelDescriptor, EuiBadge } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import React from 'react';
 import { PanelOptionsMenu } from './panel_options_menu';
+import { Action } from '../../actions';
+import { IEmbeddable } from '../../embeddables';
 
 export interface PanelHeaderProps {
  title?: string;
  isViewMode: boolean;
  hidePanelTitles: boolean;
  getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor>;
  closeContextMenu: boolean;
+ badges: Action[];
+ embeddable: IEmbeddable;
 }
 
 interface PanelHeaderUiProps extends PanelHeaderProps {
  intl: InjectedIntl;
 }
 
+function renderBadges(badges: Action[], embeddable: IEmbeddable) {
+ return badges.map(badge => (
+ <EuiBadge
+ key={badge.id}
+ iconType={badge.getIconType({ embeddable })}
+ onClick={() => badge.execute({ embeddable })}
+ onClickAriaLabel={badge.getDisplayName({ embeddable })}
+ >
+ {badge.getDisplayName({ embeddable })}
+ </EuiBadge>
+ ));
+}
+
 function PanelHeaderUi({
  title,
  isViewMode,
  hidePanelTitles,
  getActionContextMenuPanel,
  intl,
  closeContextMenu,
+ badges,
+ embeddable,
 }: PanelHeaderUiProps) {
  const classes = classNames('embPanel__header', {
  'embPanel__header--floater': !title || hidePanelTitles,
  });
 
- if (isViewMode && (!title || hidePanelTitles)) {
+ const showTitle = !isViewMode || (title && !hidePanelTitles);
+ const showPanelBar = badges.length > 0 || showTitle;
+
+ if (!showPanelBar) {
  return (
  <div className={classes}>
  <PanelOptionsMenu
@@ -78,7 +100,8 @@ function PanelHeaderUi({
  }
  )}
  >
- {hidePanelTitles ? '' : title}
+ {showTitle ? `${title} ` : ''}
+ {renderBadges(badges, embeddable)}
  </div>
 
  <PanelOptionsMenu

src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/triggers/index.ts

@@ -19,3 +19,4 @@
 
 export const CONTEXT_MENU_TRIGGER = 'CONTEXT_MENU_TRIGGER';
 export const APPLY_FILTER_TRIGGER = 'FILTER_TRIGGER';
+export const PANEL_BADGE_TRIGGER = 'PANEL_BADGE_TRIGGER';

src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts

@@ -65,6 +65,7 @@ export interface VisualizeOutput extends EmbeddableOutput {
  editUrl: string;
  indexPatterns?: StaticIndexPattern[];
  savedObjectId: string;
+ visTypeName: string;
 }
 
 export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOutput> {
@@ -99,6 +100,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
  indexPatterns,
  editable,
  savedObjectId: savedVisualization.id!,
+ visTypeName: savedVisualization.vis.type.name,
  },
  parent
  );

x-pack/.i18nrc.json

@@ -2,6 +2,7 @@
  "prefix": "xpack",
  "paths": {
  "xpack.actions": "legacy/plugins/actions",
+ "xpack.advancedUiActions": "legacy/plugins/advanced_ui_actions",
  "xpack.alerting": "legacy/plugins/alerting",
  "xpack.apm": "legacy/plugins/apm",
  "xpack.beatsManagement": "legacy/plugins/beats_management",

x-pack/index.js

@@ -43,6 +43,7 @@ import { encryptedSavedObjects } from './legacy/plugins/encrypted_saved_objects'
 import { snapshotRestore } from './legacy/plugins/snapshot_restore';
 import { actions } from './legacy/plugins/actions';
 import { alerting } from './legacy/plugins/alerting';
+import { advancedUiActions } from './legacy/plugins/advanced_ui_actions';
 
 module.exports = function (kibana) {
  return [
@@ -85,5 +86,6 @@ module.exports = function (kibana) {
  snapshotRestore(kibana),
  actions(kibana),
  alerting(kibana),
+ advancedUiActions(kibana),
  ];
 };

x-pack/legacy/plugins/advanced_ui_actions/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { resolve } from 'path';
+
+export const advancedUiActions = (kibana: any) =>
+ new kibana.Plugin({
+ id: 'advanced_ui_actions',
+ publicDir: resolve(__dirname, 'public'),
+ uiExports: {
+ hacks: 'plugins/advanced_ui_actions/np_ready/public/legacy',
+ },
+ });

x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/kibana.json

@@ -0,0 +1,9 @@
+{
+ "id": "advanced_ui_actions",
+ "version": "kibana",
+ "requiredPlugins": [
+ "embeddable"
+ ],
+ "server": false,
+ "ui": true
+}

x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.test.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { canInheritTimeRange } from './can_inherit_time_range';
+import {
+ HelloWorldEmbeddable,
+ HelloWorldContainer,
+} from '../../../../../../../src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/test_samples';
+import { TimeRangeEmbeddable, TimeRangeContainer } from './test_helpers';
+
+jest.mock('ui/new_platform');
+
+test('canInheritTimeRange returns false if embeddable is inside container without a time range', () => {
+ const embeddable = new TimeRangeEmbeddable(
+ { id: '1234', timeRange: { from: 'noxw-15m', to: 'now' } },
+ new HelloWorldContainer({ id: '123', panels: {} }, (() => null) as any)
+ );
+
+ expect(canInheritTimeRange(embeddable)).toBe(false);
+});
+
+test('canInheritTimeRange returns false if embeddable is without a time range', () => {
+ const embeddable = new HelloWorldEmbeddable(
+ { id: '1234' },
+ new HelloWorldContainer({ id: '123', panels: {} }, (() => null) as any)
+ );
+ // @ts-ignore
+ expect(canInheritTimeRange(embeddable)).toBe(false);
+});
+
+test('canInheritTimeRange returns true if embeddable is inside a container with a time range', () => {
+ const embeddable = new TimeRangeEmbeddable(
+ { id: '1234', timeRange: { from: 'noxw-15m', to: 'now' } },
+ new TimeRangeContainer(
+ { id: '123', panels: {}, timeRange: { from: 'noxw-15m', to: 'now' } },
+ (() => null) as any
+ )
+ );
+ expect(canInheritTimeRange(embeddable)).toBe(true);
+});