Per panel time range

src/legacy/core_plugins/dashboard_embeddable_container/public/actions/expand_panel_action.test.tsx

@@ -99,5 +99,5 @@ test('Returns title', async () => {
 
 test('Returns an icon', async () => {
   const action = new ExpandPanelAction();
-  expect(action.getIcon({ embeddable })).toBeDefined();
+  expect(action.getIconType({ embeddable })).toBeDefined();
 });

src/legacy/core_plugins/dashboard_embeddable_container/public/actions/expand_panel_action.tsx → src/legacy/core_plugins/dashboard_embeddable_container/public/actions/expand_panel_action.ts

@@ -17,9 +17,7 @@
  * under the License.
  */
 
-import { EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
 import {
   Action,
   IEmbeddable,
@@ -72,12 +70,12 @@ export class ExpandPanelAction extends Action {
         );
   }
 
-  public getIcon({ embeddable }: ActionContext) {
+  public getIconType({ embeddable }: ActionContext) {
     if (!embeddable.parent || !isDashboard(embeddable.parent)) {
       throw new IncompatibleActionError();
     }
     // TODO: use 'minimize' when an eui-icon of such is available.
-    return <EuiIcon type={isExpanded(embeddable) ? 'expand' : 'expand'} />;
+    return isExpanded(embeddable) ? 'expand' : 'expand';
   }
 
   public async isCompatible({ embeddable }: ActionContext) {

src/legacy/core_plugins/embeddable_api/public/actions/action.ts

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { EuiContextMenuItemIcon } from '@elastic/eui';
-
 import { IEmbeddable } from '../embeddables';
 
 export interface ActionContext<
@@ -45,9 +43,7 @@ export abstract class Action<
   /**
    * Optional icon that can be displayed along with the title.
    */
-  public getIcon(
-    context: ActionContext<TEmbeddable, TTriggerContext>
-  ): EuiContextMenuItemIcon | undefined {
+  public getIconType(context: ActionContext<TEmbeddable, TTriggerContext>): string | undefined {
     return undefined;
   }
 

src/legacy/core_plugins/embeddable_api/public/context_menu_actions/build_eui_context_menu_panels.ts

@@ -99,7 +99,7 @@ function convertPanelActionToContextMenuItem({
 }): EuiContextMenuPanelItemDescriptor {
   const menuPanelItem: EuiContextMenuPanelItemDescriptor = {
     name: action.getDisplayName(actionContext),
-    icon: action.getIcon(actionContext),
+    icon: action.getIconType(actionContext),
     panel: _.get(action, 'childContextMenuPanel.id'),
     'data-test-subj': `embeddablePanelAction-${action.id}`,
   };

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

@@ -38,6 +38,7 @@ export {
   triggerRegistry,
   executeTriggerActions,
   CONTEXT_MENU_TRIGGER,
+  PANEL_BADGE_TRIGGER,
   attachAction,
 } from './triggers';
 

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

@@ -22,15 +22,15 @@ import React from 'react';
 import { Subscription } from 'rxjs';
 import { buildContextMenuForActions } from '../context_menu_actions';
 
-import { CONTEXT_MENU_TRIGGER, triggerRegistry } from '../triggers';
+import { CONTEXT_MENU_TRIGGER, triggerRegistry, PANEL_BADGE_TRIGGER } from '../triggers';
 import { IEmbeddable } from '../embeddables/i_embeddable';
 import { ViewMode } from '../types';
 
 import { RemovePanelAction } from './panel_header/panel_actions';
 import { AddPanelAction } from './panel_header/panel_actions/add_panel/add_panel_action';
 import { CustomizePanelTitleAction } from './panel_header/panel_actions/customize_title/customize_panel_action';
 import { PanelHeader } from './panel_header/panel_header';
-import { actionRegistry } from '../actions';
+import { actionRegistry, Action } from '../actions';
 import { InspectPanelAction } from './panel_header/panel_actions/inspect_panel_action';
 import { EditPanelAction } from './panel_header/panel_actions/edit_panel_action';
 import { getActionsForTrigger } from '../get_actions_for_trigger';
@@ -45,6 +45,7 @@ interface State {
   viewMode: ViewMode;
   hidePanelTitles: boolean;
   closeContextMenu: boolean;
+  badges: Action[];
 }
 
 export class EmbeddablePanel extends React.Component<Props, State> {
@@ -67,12 +68,13 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       viewMode,
       hidePanelTitles,
       closeContextMenu: false,
+      badges: [],
     };
 
     this.embeddableRoot = React.createRef();
   }
 
-  public componentWillMount() {
+  public async componentWillMount() {
     this.mounted = true;
     const { embeddable } = this.props;
     const { parent } = embeddable;
@@ -82,6 +84,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
         this.setState({
           viewMode: embeddable.getInput().viewMode ? embeddable.getInput().viewMode : ViewMode.EDIT,
         });
+        this.refreshBadges();
       }
     });
 
@@ -91,11 +94,29 @@ export class EmbeddablePanel extends React.Component<Props, State> {
           this.setState({
             hidePanelTitles: Boolean(parent.getInput().hidePanelTitles),
           });
+          this.refreshBadges();
         }
       });
     }
   }
 
+  private async refreshBadges() {
+    const badges = await getActionsForTrigger(
+      actionRegistry,
+      triggerRegistry,
+      PANEL_BADGE_TRIGGER,
+      {
+        embeddable: this.props.embeddable,
+      }
+    );
+
+    if (this.mounted) {
+      this.setState({
+        badges,
+      });
+    }
+  }
+
   public componentWillUnmount() {
     this.mounted = false;
     if (this.subscription) {
@@ -122,6 +143,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     const classes = classNames('embPanel', {
       'embPanel--editing': !viewOnlyMode,
     });
+
     const title = this.props.embeddable.getTitle();
     return (
       <EuiPanel className={classes} data-test-subj="embeddablePanel" paddingSize="none">
@@ -131,6 +153,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/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx

@@ -116,5 +116,5 @@ test('Returns title', async () => {
 
 test('Returns an icon', async () => {
   const action = new AddPanelAction();
-  expect(action.getIcon()).toBeDefined();
+  expect(action.getIconType()).toBeDefined();
 });

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/add_panel/add_panel_action.tsx → src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/add_panel/add_panel_action.ts

@@ -16,10 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { EuiIcon } from '@elastic/eui';
-import React from 'react';
-
 import { i18n } from '@kbn/i18n';
 import { ViewMode } from '../../../../types';
 import { Action, ActionContext } from '../../../../actions';
@@ -40,8 +36,8 @@ export class AddPanelAction extends Action {
     });
   }
 
-  public getIcon() {
-    return <EuiIcon type="plusInCircleFilled" />;
+  public getIconType() {
+    return 'plusInCircleFilled';
   }
 
   public async isCompatible({ embeddable }: ActionContext) {

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/customize_title/customize_panel_action.tsx → src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { EuiIcon } from '@elastic/eui';
-import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { Action, ActionContext } from '../../../../actions';
 import { ViewMode } from '../../../../types';
@@ -45,8 +43,8 @@ export class CustomizePanelTitleAction extends Action {
     });
   }
 
-  public getIcon() {
-    return <EuiIcon type="pencil" />;
+  public getIconType() {
+    return 'pencil';
   }
 
   public async isCompatible({ embeddable }: ActionContext) {

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/edit_panel_action.tsx → src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/edit_panel_action.ts

@@ -17,9 +17,7 @@
  * under the License.
  */
 
-import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiIcon } from '@elastic/eui';
 
 import { embeddableFactories } from '../../../embeddables/embeddable_factories_registry';
 import { Action, ActionContext } from '../../../actions';
@@ -48,8 +46,8 @@ export class EditPanelAction extends Action {
     });
   }
 
-  getIcon() {
-    return <EuiIcon type="pencil" />;
+  getIconType() {
+    return 'pencil';
   }
 
   public async isCompatible({ embeddable }: ActionContext) {

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/inspect_panel_action.test.tsx

@@ -125,5 +125,5 @@ test('Returns title', async () => {
 
 test('Returns an icon', async () => {
   const inspectAction = new InspectPanelAction();
-  expect(inspectAction.getIcon()).toBeDefined();
+  expect(inspectAction.getIconType()).toBeDefined();
 });

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/inspect_panel_action.tsx → src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/inspect_panel_action.ts

@@ -16,10 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { EuiIcon } from '@elastic/eui';
-import React from 'react';
-
 import { i18n } from '@kbn/i18n';
 import { Inspector } from 'ui/inspector';
 import { Action, ActionContext } from '../../../actions';
@@ -39,8 +35,8 @@ export class InspectPanelAction extends Action {
     });
   }
 
-  public getIcon() {
-    return <EuiIcon type="inspect" />;
+  public getIconType() {
+    return 'inspect';
   }
 
   public async isCompatible({ embeddable }: ActionContext) {

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/remove_panel_action.test.tsx

@@ -103,5 +103,5 @@ test('Returns title', async () => {
 
 test('Returns an icon', async () => {
   const action = new RemovePanelAction();
-  expect(action.getIcon()).toBeDefined();
+  expect(action.getIconType()).toBeDefined();
 });

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/remove_panel_action.tsx → src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_actions/remove_panel_action.ts

@@ -16,9 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiIcon } from '@elastic/eui';
 import { ContainerInput, IContainer } from '../../../containers';
 import { ViewMode } from '../../../types';
 import { Action, ActionContext, IncompatibleActionError } from '../../../actions';
@@ -49,8 +47,8 @@ export class RemovePanelAction extends Action {
     });
   }
 
-  public getIcon() {
-    return <EuiIcon type="trash" />;
+  public getIconType() {
+    return 'trash';
   }
 
   public async isCompatible({ embeddable }: ActionContext) {

src/legacy/core_plugins/embeddable_api/public/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,
+    'embPanel__header--floater': (!title || hidePanelTitles) && badges.length === 0,
   });
 
-  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/triggers/index.ts

@@ -22,9 +22,17 @@ export { executeTriggerActions } from './execute_trigger_actions';
 
 export const CONTEXT_MENU_TRIGGER = 'CONTEXT_MENU_TRIGGER';
 export const APPLY_FILTER_TRIGGER = 'FITLER_TRIGGER';
+export const PANEL_BADGE_TRIGGER = 'PANEL_BADGE_TRIGGER';
+
 import { Trigger } from '../types';
 export const triggerRegistry = new Map<string, Trigger>();
 
+triggerRegistry.set(PANEL_BADGE_TRIGGER, {
+  id: PANEL_BADGE_TRIGGER,
+  title: 'Panel badges',
+  actionIds: [],
+});
+
 triggerRegistry.set(CONTEXT_MENU_TRIGGER, {
   id: CONTEXT_MENU_TRIGGER,
   title: 'Context menu',