Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Per panel time range #43153

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
};
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export {
ADD_PANEL_ACTION_ID,
APPLY_FILTER_ACTION,
APPLY_FILTER_TRIGGER,
PANEL_BADGE_TRIGGER,
Action,
ActionContext,
Adapters,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -58,6 +58,7 @@ interface State {
viewMode: ViewMode;
hidePanelTitles: boolean;
closeContextMenu: boolean;
badges: Action[];
}

export class EmbeddablePanel extends React.Component<Props, State> {
Expand All @@ -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;
Expand All @@ -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();
}
});

Expand All @@ -104,6 +120,8 @@ export class EmbeddablePanel extends React.Component<Props, State> {
this.setState({
hidePanelTitles: Boolean(parent.getInput().hidePanelTitles),
});

this.refreshBadges();
}
});
}
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -78,7 +100,8 @@ function PanelHeaderUi({
}
)}
>
{hidePanelTitles ? '' : title}
{showTitle ? `${title} ` : ''}
{renderBadges(badges, embeddable)}
</div>

<PanelOptionsMenu
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export interface VisualizeOutput extends EmbeddableOutput {
editUrl: string;
indexPatterns?: StaticIndexPattern[];
savedObjectId: string;
visTypeName: string;
}

export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOutput> {
Expand Down Expand Up @@ -99,6 +100,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
indexPatterns,
editable,
savedObjectId: savedVisualization.id!,
visTypeName: savedVisualization.vis.type.name,
},
parent
);
Expand Down
1 change: 1 addition & 0 deletions x-pack/.i18nrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions x-pack/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
Expand Down Expand Up @@ -85,5 +86,6 @@ module.exports = function (kibana) {
snapshotRestore(kibana),
actions(kibana),
alerting(kibana),
advancedUiActions(kibana),
];
};
16 changes: 16 additions & 0 deletions x-pack/legacy/plugins/advanced_ui_actions/index.ts
Original file line number Diff line number Diff line change
@@ -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',
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"id": "advanced_ui_actions",
"version": "kibana",
"requiredPlugins": [
"embeddable"
],
"server": false,
"ui": true
}
Original file line number Diff line number Diff line change
@@ -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);
});
Loading