Per panel time range (elastic#43153)

* Per panel time range

* Added tests and fixed lack of await check for incompatibility

* Remove a couple more unneccessary `anys`

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);
+});