Add vis straight to dashboard example

src/legacy/core_plugins/kibana/public/dashboard/legacy.ts

@@ -26,5 +26,8 @@ import { plugin } from './index';
     env: npSetup.plugins.kibanaLegacy.env,
   } as PluginInitializerContext);
   instance.setup(npSetup.core, npSetup.plugins);
-  instance.start(npStart.core, npStart.plugins);
+  instance.start(npStart.core, {
+    ...npStart.plugins,
+    dashboardEmbeddableContainer: npStart.plugins.dashboard_embeddable_container,
+  });
 })();

src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts

@@ -28,6 +28,7 @@ import {
   SavedObjectsClientContract,
   PluginInitializerContext,
 } from 'kibana/public';
+import { DashboardStart } from '../../../../../../plugins/dashboard_embeddable_container/public';
 import { Storage } from '../../../../../../plugins/kibana_utils/public';
 import {
   configureAppAngularModule,
@@ -65,6 +66,7 @@ export interface RenderDeps {
   localStorage: Storage;
   share: SharePluginStart;
   config: KibanaLegacyStart['config'];
+  dashboardEmbeddableContainer: DashboardStart;
 }
 
 let angularModuleInstance: IModule | null = null;

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx

@@ -120,6 +120,7 @@ export class DashboardAppController {
     },
     history,
     kbnUrlStateStorage,
+    dashboardEmbeddableContainer,
   }: DashboardAppControllerDependencies) {
     const filterManager = queryService.filterManager;
     const queryFilter = filterManager;
@@ -911,6 +912,9 @@ export class DashboardAppController {
         outputSubscription.unsubscribe();
       }
       if (dashboardContainer) {
+        dashboardEmbeddableContainer.setLastLoadedDashboardAppDashboardInput(
+          dashboardContainer.getInput()
+        );
         dashboardContainer.destroy();
       }
     });

src/legacy/core_plugins/kibana/public/dashboard/plugin.ts

@@ -47,13 +47,15 @@ import {
 import { createSavedDashboardLoader } from './saved_dashboard/saved_dashboards';
 import { createKbnUrlTracker } from '../../../../../plugins/kibana_utils/public';
 import { getQueryStateContainer } from '../../../../../plugins/data/public';
+import { DashboardStart } from '../../../../../plugins/dashboard_embeddable_container/public';
 
 export interface DashboardPluginStartDependencies {
   data: DataPublicPluginStart;
   embeddable: IEmbeddableStart;
   navigation: NavigationStart;
   share: SharePluginStart;
   kibanaLegacy: KibanaLegacyStart;
+  dashboardEmbeddableContainer: DashboardStart;
 }
 
 export interface DashboardPluginSetupDependencies {
@@ -69,6 +71,7 @@ export class DashboardPlugin implements Plugin {
     embeddable: IEmbeddableStart;
     navigation: NavigationStart;
     share: SharePluginStart;
+    dashboardEmbeddableContainer: DashboardStart;
     dashboardConfig: KibanaLegacyStart['dashboardConfig'];
   } | null = null;
 
@@ -114,6 +117,7 @@ export class DashboardPlugin implements Plugin {
           share,
           data: dataStart,
           dashboardConfig,
+          dashboardEmbeddableContainer,
         } = this.startDependencies;
         const savedDashboards = createSavedDashboardLoader({
           savedObjectsClient,
@@ -139,6 +143,7 @@ export class DashboardPlugin implements Plugin {
           embeddable,
           dashboardCapabilities: coreStart.application.capabilities.dashboard,
           localStorage: new Storage(localStorage),
+          dashboardEmbeddableContainer,
         };
         const { renderApp } = await import('./np_ready/application');
         const unmount = renderApp(params.element, params.appBasePath, deps);
@@ -178,6 +183,7 @@ export class DashboardPlugin implements Plugin {
       embeddable,
       navigation,
       data,
+      dashboardEmbeddableContainer,
       share,
       kibanaLegacy: { dashboardConfig },
     }: DashboardPluginStartDependencies
@@ -189,6 +195,7 @@ export class DashboardPlugin implements Plugin {
       navigation,
       share,
       dashboardConfig,
+      dashboardEmbeddableContainer,
     };
   }
 

src/legacy/core_plugins/kibana/public/visualize/kibana_services.ts

@@ -27,6 +27,7 @@ import {
   PluginInitializerContext,
 } from 'kibana/public';
 
+import { DashboardStart } from '../../../../../plugins/dashboard_embeddable_container/public';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public';
 import { Storage } from '../../../../../plugins/kibana_utils/public';
 import { IEmbeddableStart } from '../../../../../plugins/embeddable/public';
@@ -60,6 +61,7 @@ export interface VisualizeKibanaServices {
   usageCollection?: UsageCollectionSetup;
   I18nContext: I18nStart['Context'];
   setActiveUrl: (newUrl: string) => void;
+  dashboardEmbeddableContainer: DashboardStart;
 }
 
 let services: VisualizeKibanaServices | null = null;

src/legacy/core_plugins/kibana/public/visualize/legacy.ts

@@ -29,4 +29,5 @@ instance.setup(npSetup.core, npSetup.plugins);
 instance.start(npStart.core, {
   ...npStart.plugins,
   visualizations,
+  dashboardEmbeddableContainer: npStart.plugins.dashboard_embeddable_container,
 });

src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import url from 'url';
 import angular from 'angular';
 import _ from 'lodash';
 import { Subscription } from 'rxjs';
@@ -30,8 +30,9 @@ import { getEditBreadcrumbs } from '../breadcrumbs';
 
 import { addHelpMenuToAppChrome } from '../help_menu/help_menu_util';
 import { FilterStateManager } from '../../../../../data/public';
-import { unhashUrl } from '../../../../../../../plugins/kibana_utils/public';
+import { unhashUrl, setStateToKbnUrl } from '../../../../../../../plugins/kibana_utils/public';
 import { kbnBaseUrl } from '../../../../../../../plugins/kibana_legacy/public';
+import { convertPanelStateToSavedDashboardPanel } from '../../../dashboard/np_ready/lib/embeddable_saved_object_converters';
 import {
   SavedObjectSaveModal,
   showSaveModal,
@@ -50,6 +51,7 @@ import {
 } from '../../legacy_imports';
 
 import { getServices } from '../../kibana_services';
+import { DASHBOARD_CONTAINER_TYPE } from '../../../../../../../plugins/dashboard_embeddable_container/public';
 
 export function initEditorDirective(app, deps) {
   app.directive('visualizeApp', function() {
@@ -96,7 +98,9 @@ function VisualizeAppController(
     savedQueryService,
     uiSettings,
     I18nContext,
+    dashboardEmbeddableContainer,
     setActiveUrl,
+    embeddable,
   } = getServices();
 
   const filterStateManager = new FilterStateManager(globalState, getAppState, filterManager);
@@ -167,13 +171,61 @@ function VisualizeAppController(
                   isTitleDuplicateConfirmed,
                   onTitleDuplicate,
                 };
-                return doSave(saveOptions).then(response => {
-                  // If the save wasn't successful, put the original values back.
-                  if (!response.id || response.error) {
-                    savedVis.title = currentTitle;
-                  }
-                  return response;
-                });
+
+                const currentDashboardInput = dashboardEmbeddableContainer.getLastLoadedDashboardAppDashboardInput();
+                embeddable
+                  .getEmbeddableFactory(DASHBOARD_CONTAINER_TYPE)
+                  .create(currentDashboardInput)
+                  .then(currentDashboard => {
+                    if (currentDashboard) {
+                      currentDashboard
+                        // We need to extract out the serializable data from savedVis, trying it this way will
+                        // cause max call stack size exceeded from parent references inside the `savedVis` object.
+                        // .addNewEmbeddable('visualization', { savedVis }).then(() => {
+                        .addNewEmbeddable('TODO_EMBEDDABLE', { task: 'do something!' })
+                        .then(() => {
+                          const dashInput = currentDashboard.getInput();
+
+                          // We would use the URL service for this. I have a PR up here:
+                          // https://github.com/elastic/kibana/pull/57496/files. I'd probably register a
+                          // new generator that just takes in dashboard embeddable input and returns the
+                          // dashboard app id.  For now, I just hacked in minimum to get it to show the
+                          // added panel.
+                          const hash = dashInput.id ? `dashboard/${dashInput.id}` : `dashboard`;
+                          const parsedUrl = url.parse(window.location.href);
+                          const dashboardAppUrl = url.format({
+                            protocol: parsedUrl.protocol,
+                            host: parsedUrl.host,
+                            pathname: `app/kibana`,
+                            hash,
+                          });
+                          const dashUrl = setStateToKbnUrl(
+                            '_a',
+                            {
+                              query: dashInput.query,
+                              filters: dashInput.filters,
+                              panels: Object.values(dashInput.panels).map(panel =>
+                                convertPanelStateToSavedDashboardPanel(panel)
+                              ),
+                            },
+                            { useHash: false },
+                            dashboardAppUrl
+                          );
+
+                          window.location.hash = url.parse(dashUrl).hash;
+                        });
+                    } else {
+                      return doSave(saveOptions).then(response => {
+                        // If the save wasn't successful, put the original values back.
+                        if (!response.id || response.error) {
+                          savedVis.title = currentTitle;
+                        }
+                        return response;
+                      });
+                    }
+                  });
+                // Avoids a console error, this would need to be cleaned up.
+                return { id: '123' };
               };
 
               const confirmButtonLabel = $scope.isAddToDashMode() ? (

src/legacy/core_plugins/kibana/public/visualize/plugin.ts

@@ -29,6 +29,7 @@ import {
   SavedObjectsClientContract,
 } from 'kibana/public';
 
+import { DashboardStart } from '../../../../../plugins/dashboard_embeddable_container/public';
 import { Storage, createKbnUrlTracker } from '../../../../../plugins/kibana_utils/public';
 import {
   DataPublicPluginStart,
@@ -57,6 +58,7 @@ export interface VisualizePluginStartDependencies {
   navigation: NavigationStart;
   share: SharePluginStart;
   visualizations: VisualizationsStart;
+  dashboardEmbeddableContainer: DashboardStart;
 }
 
 export interface VisualizePluginSetupDependencies {
@@ -74,6 +76,7 @@ export class VisualizePlugin implements Plugin {
     savedObjectsClient: SavedObjectsClientContract;
     share: SharePluginStart;
     visualizations: VisualizationsStart;
+    dashboardEmbeddableContainer: DashboardStart;
   } | null = null;
   private appStateUpdater = new BehaviorSubject<AngularRenderedAppUpdater>(() => ({}));
   private stopUrlTracking: (() => void) | undefined = undefined;
@@ -125,6 +128,7 @@ export class VisualizePlugin implements Plugin {
           visualizations,
           data: dataStart,
           share,
+          dashboardEmbeddableContainer,
         } = this.startDependencies;
 
         const deps: VisualizeKibanaServices = {
@@ -150,6 +154,7 @@ export class VisualizePlugin implements Plugin {
           usageCollection,
           I18nContext: coreStart.i18n.Context,
           setActiveUrl,
+          dashboardEmbeddableContainer,
         };
         setServices(deps);
 
@@ -178,7 +183,14 @@ export class VisualizePlugin implements Plugin {
 
   public start(
     core: CoreStart,
-    { embeddable, navigation, data, share, visualizations }: VisualizePluginStartDependencies
+    {
+      embeddable,
+      navigation,
+      data,
+      share,
+      visualizations,
+      dashboardEmbeddableContainer,
+    }: VisualizePluginStartDependencies
   ) {
     this.startDependencies = {
       data,
@@ -187,6 +199,7 @@ export class VisualizePlugin implements Plugin {
       savedObjectsClient: core.savedObjects.client,
       share,
       visualizations,
+      dashboardEmbeddableContainer,
     };
   }
 

src/legacy/core_plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx

@@ -152,12 +152,40 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory<
     }
   }
 
-  public async create() {
+  // These changes don't actually get called because I ran into issues serializing `savedVis` but
+  // we might be able to reuse this embeddable type by doing something like this. If not, you could
+  // create a new embeddable type.
+  public async create(input: Partial<VisualizeInput>) {
     // 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({
       editorParams: ['addToDashboard'],
     });
     return undefined;
   }
+  //   if (!input) {
+  //     // 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({
+  //       editorParams: ['addToDashboard'],
+  //     });
+  //     return undefined;
+  //   } else {
+  //     const indexPattern = await getIndexPattern(input.savedVis);
+  //     const indexPatterns = indexPattern ? [indexPattern] : [];
+  //     return new VisualizeEmbeddable(
+  //       this.timefilter,
+  //       {
+  //         savedVisualization: input.savedVis,
+  //         indexPatterns,
+  //         editUrl: '',
+  //         editable: this.isEditable(),
+  //         appState: input.appState,
+  //         uiState: input.uiState,
+  //       },
+  //       input,
+  //       parent
+  //     );
+  //   }
+  // }
 }

src/legacy/ui/public/new_platform/new_platform.ts

@@ -20,6 +20,7 @@ import { IScope } from 'angular';
 
 import { UiActionsStart, UiActionsSetup } from 'src/plugins/ui_actions/public';
 import { IEmbeddableStart, IEmbeddableSetup } from 'src/plugins/embeddable/public';
+import { DashboardStart } from 'src/plugins/dashboard_embeddable_container/public';
 import { LegacyCoreSetup, LegacyCoreStart, App, AppMountDeprecated } from '../../../../core/public';
 import { Plugin as DataPlugin } from '../../../../plugins/data/public';
 import { Plugin as ExpressionsPlugin } from '../../../../plugins/expressions/public';
@@ -82,6 +83,7 @@ export interface PluginsStart {
   management: ManagementStart;
   advancedSettings: AdvancedSettingsStart;
   telemetry?: TelemetryPluginStart;
+  dashboard_embeddable_container: DashboardStart;
 }
 
 export const npSetup = {

src/plugins/dashboard_embeddable_container/public/index.ts

@@ -31,3 +31,5 @@ export function plugin(initializerContext: PluginInitializerContext) {
 }
 
 export { DashboardEmbeddableContainerPublicPlugin as Plugin };
+
+export { DashboardStart } from './plugin';