[Dashboard] Add visualization by value to Dashboard

scripts/functional_tests.js

@@ -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 = [

src/plugins/dashboard/public/application/application.ts

@@ -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';
@@ -73,6 +74,7 @@ export interface RenderDeps {
   navigateToDefaultApp: KibanaLegacyStart['navigateToDefaultApp'];
   scopedHistory: () => ScopedHistory;
   savedObjects: SavedObjectsStart;
+  dashboard: DashboardStart;
 }
 
 let angularModuleInstance: IModule | null = null;

src/plugins/dashboard/public/application/dashboard_app.tsx

@@ -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;
@@ -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) {

src/plugins/dashboard/public/application/dashboard_app_controller.tsx

@@ -149,6 +149,7 @@ export class DashboardAppController {
     kbnUrlStateStorage,
     usageCollection,
     navigation,
+    dashboard,
   }: DashboardAppControllerDependencies) {
     const filterManager = queryService.filterManager;
     const queryFilter = filterManager;
@@ -1112,6 +1113,7 @@ export class DashboardAppController {
         outputSubscription.unsubscribe();
       }
       if (dashboardContainer) {
+        dashboard.setLastLoadedDashboardAppDashboardInput(dashboardContainer.getInput());
         dashboardContainer.destroy();
       }
     });

src/plugins/dashboard/public/application/embeddable/types.ts

@@ -27,3 +27,7 @@ export interface DashboardPanelState<
 > extends PanelState<TEmbeddableInput> {
   readonly gridData: GridData;
 }
+
+export interface DashboardPanels {
+  [panelId: string]: DashboardPanelState<EmbeddableInput & { [k: string]: unknown }>;
+}

src/plugins/dashboard/public/plugin.tsx

@@ -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';
 
@@ -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,
@@ -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 {
@@ -101,6 +110,7 @@ interface SetupDependencies {
   share?: SharePluginSetup;
   uiActions: UiActionsSetup;
   usageCollection?: UsageCollectionSetup;
+  dashboard: DashboardStart;
 }
 
 interface StartDependencies {
@@ -113,6 +123,7 @@ interface StartDependencies {
   share?: SharePluginStart;
   uiActions: UiActionsStart;
   savedObjects: SavedObjectsStart;
+  dashboard: DashboardStart;
 }
 
 export type Setup = void;
@@ -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' {
@@ -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>(() => ({}));
@@ -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(() => {
@@ -203,6 +218,7 @@ export class DashboardPlugin
         SavedObjectFinder: getSavedObjectFinder(coreStart.savedObjects, coreStart.uiSettings),
         ExitFullScreenButton,
         uiActions: deps.uiActions,
+        dashboard: dashboardStart,
       };
     };
 
@@ -286,6 +302,7 @@ export class DashboardPlugin
           usageCollection,
           scopedHistory: () => this.currentHistory!,
           savedObjects,
+          dashboard: dashboardStart,
         };
         // make sure the index pattern list is up to date
         await dataStart.indexPatterns.clearCache();
@@ -346,6 +363,32 @@ export class DashboardPlugin
     }
   }
 
+  private navigateToDashboard(core: CoreStart, dashInput: EmbeddableInput) {
+    if (!this.getActiveUrl) {
+      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 }
@@ -403,6 +446,10 @@ export class DashboardPlugin
       DashboardContainerByValueRenderer: createDashboardContainerByValueRenderer({
         factory: dashboardContainerFactory,
       }),
+      getLastLoadedDashboardAppDashboardInput: () => this.currentDashboardInput,
+      setLastLoadedDashboardAppDashboardInput: (dashboardInput) =>
+        (this.currentDashboardInput = dashboardInput),
+      navigateToDashboard: this.navigateToDashboard.bind(this, core),
     };
   }
 

src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx

@@ -31,7 +31,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,
@@ -133,14 +133,21 @@ 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.
     const originatingAppParam = await this.getCurrentAppId();
-    showNewVisModal({
-      editorParams: [`${EMBEDDABLE_ORIGINATING_APP_PARAM}=${originatingAppParam}`],
-      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({
+        editorParams: [`${EMBEDDABLE_ORIGINATING_APP_PARAM}=${originatingAppParam}`],
+        outsideVisualizeApp: true,
+      });
+      return undefined;
+    }
   }
 }

src/plugins/visualize/config.ts

@@ -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>;

src/plugins/visualize/kibana.json

@@ -9,7 +9,8 @@
     "navigation",
     "savedObjects",
     "visualizations",
-    "dashboard"
+    "dashboard",
+    "embeddable"
   ],
   "optionalPlugins": ["home", "share"]
 }

src/plugins/visualize/public/application/editor/editor.js

@@ -30,7 +30,6 @@ import { VisualizeConstants } from '../visualize_constants';
 import { getEditBreadcrumbs } from '../breadcrumbs';
 
 import { EMBEDDABLE_ORIGINATING_APP_PARAM } from '../../../../embeddable/public';
-
 import { addHelpMenuToAppChrome } from '../help_menu/help_menu_util';
 import { unhashUrl, removeQueryParam } from '../../../../kibana_utils/public';
 import { MarkdownSimple, toMountPoint } from '../../../../kibana_react/public';
@@ -79,8 +78,9 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
     setActiveUrl,
     visualizations,
     dashboard,
+    embeddable,
+    featureFlagConfig,
   } = getServices();
-
   const {
     filterManager,
     timefilter: { timefilter },
@@ -253,6 +253,24 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
                 });
               };
 
+              const createVisReference = () => {
+                const currentDashboardInput = dashboard.getLastLoadedDashboardAppDashboardInput();
+                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}
@@ -262,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);
+              }
             },
           },
         ]

src/plugins/visualize/public/kibana_services.ts

@@ -36,6 +36,8 @@ import { SavedVisualizations } from './application/types';
 import { KibanaLegacyStart } from '../../kibana_legacy/public';
 import { DashboardStart } from '../../dashboard/public';
 import { SavedObjectsStart } from '../../saved_objects/public';
+import { EmbeddableStart } from '../../embeddable/public';
+import { ConfigSchema } from '../config';
 
 export interface VisualizeKibanaServices {
   pluginInitializerContext: PluginInitializerContext;
@@ -58,6 +60,8 @@ export interface VisualizeKibanaServices {
   createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject'];
   scopedHistory: () => ScopedHistory;
   savedObjects: SavedObjectsStart;
+  embeddable: EmbeddableStart;
+  featureFlagConfig: ConfigSchema;
 }
 
 let services: VisualizeKibanaServices | null = null;

src/plugins/visualize/public/plugin.ts

@@ -43,6 +43,7 @@ import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/publ
 import { DashboardStart } from '../../dashboard/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
 import { SavedObjectsStart } from '../../saved_objects/public';
+import { EmbeddableStart } from '../../embeddable/public';
 
 export interface VisualizePluginStartDependencies {
   data: DataPublicPluginStart;
@@ -52,6 +53,7 @@ export interface VisualizePluginStartDependencies {
   dashboard: DashboardStart;
   kibanaLegacy: KibanaLegacyStart;
   savedObjects: SavedObjectsStart;
+  embeddable: EmbeddableStart;
 }
 
 export interface VisualizePluginSetupDependencies {
@@ -60,6 +62,10 @@ export interface VisualizePluginSetupDependencies {
   data: DataPublicPluginSetup;
 }
 
+export interface FeatureFlagConfig {
+  showNewVisualizeFlow: boolean;
+}
+
 export class VisualizePlugin
   implements
     Plugin<void, void, VisualizePluginSetupDependencies, VisualizePluginStartDependencies> {
@@ -113,7 +119,6 @@ export class VisualizePlugin
         this.currentHistory = params.history;
 
         appMounted();
-
         const deps: VisualizeKibanaServices = {
           pluginInitializerContext: this.initializerContext,
           addBasePath: coreStart.http.basePath.prepend,
@@ -136,6 +141,8 @@ export class VisualizePlugin
           dashboard: pluginsStart.dashboard,
           scopedHistory: () => this.currentHistory!,
           savedObjects: pluginsStart.savedObjects,
+          embeddable: pluginsStart.embeddable,
+          featureFlagConfig: this.initializerContext.config.get<FeatureFlagConfig>(),
         };
         setServices(deps);