Implement embeddable drilldown menu options (#59232)
* Implement embeddable drilldown menu options
This commit is contained in:
parent
55fa3d6f42
commit
74f9b448f7
|
@ -39,6 +39,7 @@ export {
|
|||
Embeddable,
|
||||
EmbeddableChildPanel,
|
||||
EmbeddableChildPanelProps,
|
||||
EmbeddableContext,
|
||||
EmbeddableFactory,
|
||||
EmbeddableFactoryNotFoundError,
|
||||
EmbeddableFactoryRenderer,
|
||||
|
|
|
@ -25,13 +25,13 @@ export interface OpenFlyoutAddDrilldownParams {
|
|||
export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLYOUT_ADD_DRILLDOWN> {
|
||||
public readonly type = OPEN_FLYOUT_ADD_DRILLDOWN;
|
||||
public readonly id = OPEN_FLYOUT_ADD_DRILLDOWN;
|
||||
public order = 5;
|
||||
public order = 100;
|
||||
|
||||
constructor(protected readonly params: OpenFlyoutAddDrilldownParams) {}
|
||||
|
||||
public getDisplayName() {
|
||||
return i18n.translate('xpack.drilldowns.FlyoutCreateDrilldownAction.displayName', {
|
||||
defaultMessage: 'Create Drilldown',
|
||||
defaultMessage: 'Create drilldown',
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -40,7 +40,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
|
|||
}
|
||||
|
||||
public async isCompatible({ embeddable }: FlyoutCreateDrilldownActionContext) {
|
||||
return true;
|
||||
return embeddable.getInput().viewMode === 'edit';
|
||||
}
|
||||
|
||||
public async execute(context: FlyoutCreateDrilldownActionContext) {
|
||||
|
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
* 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 React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { CoreStart } from 'src/core/public';
|
||||
import { EuiNotificationBadge } from '@elastic/eui';
|
||||
import { ActionByType } from '../../../../../../src/plugins/ui_actions/public';
|
||||
import {
|
||||
toMountPoint,
|
||||
reactToUiComponent,
|
||||
} from '../../../../../../src/plugins/kibana_react/public';
|
||||
import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public';
|
||||
import { FormCreateDrilldown } from '../../components/form_create_drilldown';
|
||||
|
||||
export const OPEN_FLYOUT_EDIT_DRILLDOWN = 'OPEN_FLYOUT_EDIT_DRILLDOWN';
|
||||
|
||||
export interface FlyoutEditDrilldownActionContext {
|
||||
embeddable: IEmbeddable;
|
||||
}
|
||||
|
||||
export interface FlyoutEditDrilldownParams {
|
||||
overlays: () => Promise<CoreStart['overlays']>;
|
||||
}
|
||||
|
||||
const displayName = i18n.translate('xpack.drilldowns.panel.openFlyoutEditDrilldown.displayName', {
|
||||
defaultMessage: 'Manage drilldowns',
|
||||
});
|
||||
|
||||
// mocked data
|
||||
const drilldrownCount = 2;
|
||||
|
||||
export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOUT_EDIT_DRILLDOWN> {
|
||||
public readonly type = OPEN_FLYOUT_EDIT_DRILLDOWN;
|
||||
public readonly id = OPEN_FLYOUT_EDIT_DRILLDOWN;
|
||||
public order = 100;
|
||||
|
||||
constructor(protected readonly params: FlyoutEditDrilldownParams) {}
|
||||
|
||||
public getDisplayName() {
|
||||
return displayName;
|
||||
}
|
||||
|
||||
public getIconType() {
|
||||
return 'list';
|
||||
}
|
||||
|
||||
private ReactComp: React.FC<{ context: FlyoutEditDrilldownActionContext }> = () => {
|
||||
return (
|
||||
<>
|
||||
{displayName}{' '}
|
||||
<EuiNotificationBadge color="subdued" style={{ float: 'right' }}>
|
||||
{drilldrownCount}
|
||||
</EuiNotificationBadge>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
MenuItem = reactToUiComponent(this.ReactComp);
|
||||
|
||||
public async isCompatible({ embeddable }: FlyoutEditDrilldownActionContext) {
|
||||
return embeddable.getInput().viewMode === 'edit' && drilldrownCount > 0;
|
||||
}
|
||||
|
||||
public async execute({ embeddable }: FlyoutEditDrilldownActionContext) {
|
||||
const overlays = await this.params.overlays();
|
||||
overlays.openFlyout(toMountPoint(<FormCreateDrilldown />));
|
||||
}
|
||||
}
|
|
@ -5,3 +5,4 @@
|
|||
*/
|
||||
|
||||
export * from './flyout_create_drilldown';
|
||||
export * from './flyout_edit_drilldown';
|
||||
|
|
|
@ -7,7 +7,12 @@
|
|||
import { CoreStart, CoreSetup, Plugin } from 'src/core/public';
|
||||
import { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
|
||||
import { DrilldownService } from './service';
|
||||
import { FlyoutCreateDrilldownActionContext, OPEN_FLYOUT_ADD_DRILLDOWN } from './actions';
|
||||
import {
|
||||
FlyoutCreateDrilldownActionContext,
|
||||
FlyoutEditDrilldownActionContext,
|
||||
OPEN_FLYOUT_ADD_DRILLDOWN,
|
||||
OPEN_FLYOUT_EDIT_DRILLDOWN,
|
||||
} from './actions';
|
||||
|
||||
export interface DrilldownsSetupDependencies {
|
||||
uiActions: UiActionsSetup;
|
||||
|
@ -25,6 +30,7 @@ export interface DrilldownsStartContract {}
|
|||
declare module '../../../../src/plugins/ui_actions/public' {
|
||||
export interface ActionContextMapping {
|
||||
[OPEN_FLYOUT_ADD_DRILLDOWN]: FlyoutCreateDrilldownActionContext;
|
||||
[OPEN_FLYOUT_EDIT_DRILLDOWN]: FlyoutEditDrilldownActionContext;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -6,17 +6,20 @@
|
|||
|
||||
import { CoreSetup } from 'src/core/public';
|
||||
import { CONTEXT_MENU_TRIGGER } from '../../../../../src/plugins/embeddable/public';
|
||||
import { FlyoutCreateDrilldownAction } from '../actions';
|
||||
import { FlyoutCreateDrilldownAction, FlyoutEditDrilldownAction } from '../actions';
|
||||
import { DrilldownsSetupDependencies } from '../plugin';
|
||||
|
||||
export class DrilldownService {
|
||||
bootstrap(core: CoreSetup, { uiActions }: DrilldownsSetupDependencies) {
|
||||
const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({
|
||||
overlays: async () => (await core.getStartServices())[0].overlays,
|
||||
});
|
||||
const overlays = async () => (await core.getStartServices())[0].overlays;
|
||||
|
||||
const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({ overlays });
|
||||
uiActions.registerAction(actionFlyoutCreateDrilldown);
|
||||
uiActions.attachAction(CONTEXT_MENU_TRIGGER, actionFlyoutCreateDrilldown);
|
||||
|
||||
const actionFlyoutEditDrilldown = new FlyoutEditDrilldownAction({ overlays });
|
||||
uiActions.registerAction(actionFlyoutEditDrilldown);
|
||||
uiActions.attachAction(CONTEXT_MENU_TRIGGER, actionFlyoutEditDrilldown);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue