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

[Dashboard] Add visualization by value to Dashboard #68902

Closed
wants to merge 21 commits into from
Closed
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
1 change: 1 addition & 0 deletions scripts/functional_tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const alwaysImportedTests = [
require.resolve('../test/functional/config.js'),
require.resolve('../test/plugin_functional/config.js'),
require.resolve('../test/ui_capabilities/newsfeed_err/config.ts'),
require.resolve('../test/new_visualize_flow/config.js'),
];
// eslint-disable-next-line no-restricted-syntax
const onlyNotInCoverageTests = [
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/dashboard/public/application/application.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
ScopedHistory,
} from 'kibana/public';
import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
import { DashboardStart } from 'src/plugins/dashboard/public';
import { Storage } from '../../../kibana_utils/public';
// @ts-ignore
import { initDashboardApp } from './legacy_app';
Expand Down Expand Up @@ -73,6 +74,7 @@ export interface RenderDeps {
navigateToLegacyKibanaUrl: KibanaLegacyStart['navigateToLegacyKibanaUrl'];
scopedHistory: () => ScopedHistory;
savedObjects: SavedObjectsStart;
dashboard: DashboardStart;
restorePreviousUrl: () => void;
}

Expand Down
2 changes: 2 additions & 0 deletions src/plugins/dashboard/public/application/dashboard_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { DashboardAppState, SavedDashboardPanel } from '../types';
import { DashboardAppController } from './dashboard_app_controller';
import { RenderDeps } from './application';
import { SavedObjectDashboard } from '../saved_dashboards';
import { DashboardStart } from '../plugin';

export interface DashboardAppScope extends ng.IScope {
dash: SavedObjectDashboard;
Expand Down Expand Up @@ -60,6 +61,7 @@ export interface DashboardAppScope extends ng.IScope {
enterEditMode: () => void;
timefilterSubscriptions$: Subscription;
isVisible: boolean;
dashboard: DashboardStart;
}

export function initDashboardAppDirective(app: any, deps: RenderDeps) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ export class DashboardAppController {
kbnUrlStateStorage,
usageCollection,
navigation,
dashboard,
}: DashboardAppControllerDependencies) {
const filterManager = queryService.filterManager;
const queryFilter = filterManager;
Expand Down Expand Up @@ -1111,6 +1112,7 @@ export class DashboardAppController {
outputSubscription.unsubscribe();
}
if (dashboardContainer) {
dashboard.setLastLoadedDashboardAppDashboardInput(dashboardContainer.getInput());
dashboardContainer.destroy();
}
});
Expand Down
4 changes: 4 additions & 0 deletions src/plugins/dashboard/public/application/embeddable/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,7 @@ export interface DashboardPanelState<
> extends PanelState<TEmbeddableInput> {
readonly gridData: GridData;
}

export interface DashboardPanels {
[panelId: string]: DashboardPanelState<EmbeddableInput & { [k: string]: unknown }>;
}
55 changes: 51 additions & 4 deletions src/plugins/dashboard/public/plugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,16 @@ import {
SavedObjectsClientContract,
ScopedHistory,
} from 'src/core/public';
import { parseUrl } from 'query-string';
import { DashboardContainerInput } from './index';
import { UsageCollectionSetup } from '../../usage_collection/public';
import { CONTEXT_MENU_TRIGGER, EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
import { DataPublicPluginSetup, DataPublicPluginStart, esFilters } from '../../data/public';
import {
CONTEXT_MENU_TRIGGER,
EmbeddableInput,
EmbeddableSetup,
EmbeddableStart,
} from '../../embeddable/public';
import { DataPublicPluginStart, DataPublicPluginSetup, esFilters } from '../../data/public';
import { SharePluginSetup, SharePluginStart, UrlGeneratorContract } from '../../share/public';
import { UiActionsSetup, UiActionsStart } from '../../ui_actions/public';

Expand All @@ -50,7 +57,7 @@ import {
ExitFullScreenButton as ExitFullScreenButtonUi,
ExitFullScreenButtonProps,
} from '../../kibana_react/public';
import { createKbnUrlTracker, Storage } from '../../kibana_utils/public';
import { createKbnUrlTracker, setStateToKbnUrl, Storage } from '../../kibana_utils/public';
import {
initAngularBootstrap,
KibanaLegacySetup,
Expand Down Expand Up @@ -84,6 +91,8 @@ import { DashboardConstants } from './dashboard_constants';
import { addEmbeddableToDashboardUrl } from './url_utils/url_helper';
import { PlaceholderEmbeddableFactory } from './application/embeddable/placeholder';
import { createDashboardContainerByValueRenderer } from './application';
import { convertPanelStateToSavedDashboardPanel } from './application/lib/embeddable_saved_object_converters';
import { DashboardPanels } from './application/embeddable/types';

declare module '../../share/public' {
export interface UrlGeneratorStateMapping {
Expand All @@ -101,6 +110,7 @@ interface SetupDependencies {
share?: SharePluginSetup;
uiActions: UiActionsSetup;
usageCollection?: UsageCollectionSetup;
dashboard: DashboardStart;
}

interface StartDependencies {
Expand All @@ -113,6 +123,7 @@ interface StartDependencies {
share?: SharePluginStart;
uiActions: UiActionsStart;
savedObjects: SavedObjectsStart;
dashboard: DashboardStart;
}

export type Setup = void;
Expand All @@ -123,8 +134,11 @@ export interface DashboardStart {
embeddableId: string;
embeddableType: string;
}) => void | undefined;
navigateToDashboard: (input: DashboardContainerInput) => void;
dashboardUrlGenerator?: DashboardUrlGenerator;
DashboardContainerByValueRenderer: ReturnType<typeof createDashboardContainerByValueRenderer>;
getLastLoadedDashboardAppDashboardInput: () => DashboardContainerInput | undefined;
setLastLoadedDashboardAppDashboardInput: (dashboard: DashboardContainerInput | undefined) => void;
}

declare module '../../../plugins/ui_actions/public' {
Expand All @@ -137,6 +151,7 @@ declare module '../../../plugins/ui_actions/public' {

export class DashboardPlugin
implements Plugin<Setup, DashboardStart, SetupDependencies, StartDependencies> {
private currentDashboardInput: DashboardContainerInput | undefined;
constructor(private initializerContext: PluginInitializerContext) {}

private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
Expand Down Expand Up @@ -169,7 +184,7 @@ export class DashboardPlugin
}

const getStartServices = async () => {
const [coreStart, deps] = await core.getStartServices();
const [coreStart, deps, dashboardStart] = await core.getStartServices();

const useHideChrome = ({ toggleChrome } = { toggleChrome: true }) => {
React.useEffect(() => {
Expand Down Expand Up @@ -203,6 +218,7 @@ export class DashboardPlugin
SavedObjectFinder: getSavedObjectFinder(coreStart.savedObjects, coreStart.uiSettings),
ExitFullScreenButton,
uiActions: deps.uiActions,
dashboard: dashboardStart,
};
};

Expand Down Expand Up @@ -295,6 +311,7 @@ export class DashboardPlugin
usageCollection,
scopedHistory: () => this.currentHistory!,
savedObjects,
dashboard: dashboardStart,
restorePreviousUrl,
};
// make sure the index pattern list is up to date
Expand Down Expand Up @@ -356,6 +373,32 @@ export class DashboardPlugin
}
}

private navigateToDashboard(core: CoreStart, dashInput: EmbeddableInput) {
if (!this.getActiveUrl) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we navigate to empty dashboard if one was not loaded ? should we allow for passing dashboardId to navigateToDashboard function ?

return;
}
const lastDashboardUrl = this.getActiveUrl();
const { query, filters } = dashInput;
const panels = dashInput.panels as DashboardPanels;
const { url } = parseUrl(lastDashboardUrl);
const dashUrl = setStateToKbnUrl(
'_a',
{
query,
filters,
panels: Object.values(panels).map((panel) => {
return convertPanelStateToSavedDashboardPanel(
panel,
this.initializerContext.env.packageInfo.version
);
}),
},
{ useHash: false },
url
);
core.application.navigateToApp('dashboards', { path: dashUrl });
}

private addEmbeddableToDashboard(
core: CoreStart,
{ embeddableId, embeddableType }: { embeddableId: string; embeddableType: string }
Expand Down Expand Up @@ -413,6 +456,10 @@ export class DashboardPlugin
DashboardContainerByValueRenderer: createDashboardContainerByValueRenderer({
factory: dashboardContainerFactory,
}),
getLastLoadedDashboardAppDashboardInput: () => this.currentDashboardInput,
setLastLoadedDashboardAppDashboardInput: (dashboardInput) =>
(this.currentDashboardInput = dashboardInput),
navigateToDashboard: this.navigateToDashboard.bind(this, core),
};
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
import { DisabledLabEmbeddable } from './disabled_lab_embeddable';
import { VisualizeEmbeddable, VisualizeInput, VisualizeOutput } from './visualize_embeddable';
import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
import { Vis } from '../vis';
import { SerializedVis, Vis } from '../vis';
import {
getCapabilities,
getTypes,
Expand Down Expand Up @@ -124,13 +124,20 @@ export class VisualizeEmbeddableFactory
}
}

public async create() {
public async create(input: VisualizeInput & { savedVis?: SerializedVis }, parent?: IContainer) {
// TODO: This is a bit of a hack to preserve the original functionality. Ideally we will clean this up
// to allow for in place creation of visualizations without having to navigate away to a new URL.
showNewVisModal({
originatingApp: await this.getCurrentAppId(),
outsideVisualizeApp: true,
});
return undefined;
if (input.savedVis) {
const visState = input.savedVis;
const vis = new Vis(visState.type, visState);
await vis.setState(visState);
return createVisEmbeddableFromObject(this.deps)(vis, input, parent);
} else {
showNewVisModal({
originatingApp: await this.getCurrentAppId(),
outsideVisualizeApp: true,
});
return undefined;
}
}
}
26 changes: 26 additions & 0 deletions src/plugins/visualize/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import { schema, TypeOf } from '@kbn/config-schema';

export const configSchema = schema.object({
showNewVisualizeFlow: schema.boolean({ defaultValue: false }),
});

export type ConfigSchema = TypeOf<typeof configSchema>;
30 changes: 27 additions & 3 deletions src/plugins/visualize/public/application/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ import React from 'react';
import { makeStateful, useVisualizeAppState } from './lib';
import { VisualizeConstants } from '../visualize_constants';
import { getEditBreadcrumbs } from '../breadcrumbs';

import { addHelpMenuToAppChrome } from '../help_menu/help_menu_util';

import { unhashUrl } from '../../../../kibana_utils/public';
import { MarkdownSimple, toMountPoint } from '../../../../kibana_react/public';
import {
Expand Down Expand Up @@ -76,10 +76,11 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
I18nContext,
setActiveUrl,
visualizations,
dashboard,
embeddable,
featureFlagConfig,
scopedHistory,
} = getServices();

const {
filterManager,
timefilter: { timefilter },
Expand Down Expand Up @@ -252,6 +253,24 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
});
};

const createVisReference = () => {
const currentDashboardInput = dashboard.getLastLoadedDashboardAppDashboardInput();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we should not be loading the dashboard and manipulating it in visualize (this requires internal knowledge about dashboard structure)

rather we should navigate to dashboard and let dashboard take care of that:

navigateToApp('dashboard', { newVis: vis.serialize(); })

and then dashboard should check for newVis on its state, if its there it can append it to its panels

Copy link
Contributor Author

@majagrubic majagrubic Jun 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. The problem here is that we started working on a better inter-app communication logic and the PR hasn't been merged yet. As I mentioned in the description, this code is definitely going to change after #67064 is merged, and what you're describing is pretty similar to how it is going to work. We'll navigate to dashboard and pass the serialized vis as input, and the dashboard is going to render.

I did not want to base this PR off an unmerged PR, but I also didn't want to be blocked by that change.

I think this way of communicating between dashboard and visualization is good enough for now.

embeddable
.getEmbeddableFactory('dashboard')
.create(currentDashboardInput)
.then((currentDashboard) => {
if (currentDashboard) {
const input = {
savedVis: { ...vis.serialize() },
};
currentDashboard.addNewEmbeddable('visualization', input).then(() => {
const dashInput = currentDashboard.getInput();
dashboard.navigateToDashboard(dashInput);
});
}
});
};

const saveModal = (
<SavedObjectSaveModalOrigin
documentInfo={savedVis}
Expand All @@ -261,7 +280,12 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
originatingApp={$scope.getOriginatingApp()}
/>
);
showSaveModal(saveModal, I18nContext);
const lastAppType = $scope.getOriginatingApp();
if (lastAppType === 'dashboards' && featureFlagConfig.showNewVisualizeFlow) {
createVisReference();
} else {
showSaveModal(saveModal, I18nContext);
}
},
},
]
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/visualize/public/kibana_services.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { SavedVisualizations } from './application/types';
import { KibanaLegacyStart } from '../../kibana_legacy/public';
import { SavedObjectsStart } from '../../saved_objects/public';
import { EmbeddableStart } from '../../embeddable/public';
import { ConfigSchema } from '../config';

export interface VisualizeKibanaServices {
pluginInitializerContext: PluginInitializerContext;
Expand All @@ -59,6 +60,7 @@ export interface VisualizeKibanaServices {
createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject'];
scopedHistory: () => ScopedHistory;
savedObjects: SavedObjectsStart;
featureFlagConfig: ConfigSchema;
}

let services: VisualizeKibanaServices | null = null;
Expand Down
8 changes: 7 additions & 1 deletion src/plugins/visualize/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export interface VisualizePluginStartDependencies {
embeddable: EmbeddableStart;
kibanaLegacy: KibanaLegacyStart;
savedObjects: SavedObjectsStart;
dashboard: DashboardStart;
}

export interface VisualizePluginSetupDependencies {
Expand All @@ -60,6 +61,10 @@ export interface VisualizePluginSetupDependencies {
data: DataPublicPluginSetup;
}

export interface FeatureFlagConfig {
showNewVisualizeFlow: boolean;
}

export class VisualizePlugin
implements
Plugin<void, void, VisualizePluginSetupDependencies, VisualizePluginStartDependencies> {
Expand Down Expand Up @@ -119,7 +124,6 @@ export class VisualizePlugin
this.currentHistory = params.history;

appMounted();

const deps: VisualizeKibanaServices = {
pluginInitializerContext: this.initializerContext,
addBasePath: coreStart.http.basePath.prepend,
Expand All @@ -140,8 +144,10 @@ export class VisualizePlugin
setActiveUrl,
createVisEmbeddableFromObject:
pluginsStart.visualizations.__LEGACY.createVisEmbeddableFromObject,
dashboard: pluginsStart.dashboard,
scopedHistory: () => this.currentHistory!,
savedObjects: pluginsStart.savedObjects,
featureFlagConfig: this.initializerContext.config.get<FeatureFlagConfig>(),
restorePreviousUrl,
};
setServices(deps);
Expand Down
Loading