[Dashboard] Deangularize Nav Bar

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

@@ -31,8 +31,6 @@ import { Storage } from '../../../../../../plugins/kibana_utils/public';
 import {
   configureAppAngularModule,
   confirmModalFactory,
-  createTopNavDirective,
-  createTopNavHelper,
   EventsProvider,
   IPrivate,
   KbnUrlProvider,
@@ -114,7 +112,6 @@ function createLocalAngularModule(core: AppMountContext['core'], navigation: Nav
   createLocalKbnUrlModule();
   createLocalStateModule();
   createLocalPersistedStateModule();
-  createLocalTopNavModule(navigation);
   createLocalConfirmModalModule();
   createLocalIconModule();
 
@@ -124,7 +121,6 @@ function createLocalAngularModule(core: AppMountContext['core'], navigation: Nav
     'app/dashboard/I18n',
     'app/dashboard/Private',
     'app/dashboard/PersistedState',
-    'app/dashboard/TopNav',
     'app/dashboard/State',
     'app/dashboard/ConfirmModal',
     'app/dashboard/icon',
@@ -196,13 +192,6 @@ function createLocalPrivateModule() {
   angular.module('app/dashboard/Private', []).provider('Private', PrivateProvider);
 }
 
-function createLocalTopNavModule(navigation: NavigationStart) {
-  angular
-    .module('app/dashboard/TopNav', ['react'])
-    .directive('kbnTopNav', createTopNavDirective)
-    .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
-}
-
 function createLocalI18nModule() {
   angular
     .module('app/dashboard/I18n', [])

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html

@@ -3,51 +3,7 @@
   ng-class="{'dshAppContainer--withMargins': model.useMargins}"
 >
   <!-- Local nav. -->
-  <kbn-top-nav
-    ng-show="isVisible"
-    app-name="'dashboard'"
-    config="topNavMenu"
-
-    show-search-bar="isVisible"
-    show-filter-bar="showFilterBar()"
-    show-save-query="showSaveQuery"
-
-    query="model.query"
-    saved-query="savedQuery"
-    screen-title="screenTitle"
-    on-query-submit="updateQueryAndFetch"
-    index-patterns="indexPatterns"
-    filters="model.filters"
-    on-filters-updated="onFiltersUpdated"
-    date-range-from="model.timeRange.from"
-    date-range-to="model.timeRange.to"
-    is-refresh-paused="model.refreshInterval.pause"
-    refresh-interval="model.refreshInterval.value"
-    on-saved="onQuerySaved"
-    on-saved-query-updated="onSavedQueryUpdated"
-    on-clear-saved-query="onClearSavedQuery"
-    on-refresh-change="onRefreshChange">
-  </kbn-top-nav>
-
-  <!--
-  The top nav is hidden in embed mode but the filter bar must still be present so
-  we show the filter bar on its own here if the chrome is not visible.
--->
-  <kbn-top-nav
-    ng-if="showFilterBar() && !isVisible"
-
-    app-name="'dashboard'"
-    show-search-bar="true"
-    show-filter-bar="true"
-    show-save-query="false"
-    show-date-picker="false"
-
-    filters="model.filters"
-    index-patterns="indexPatterns"
-    on-filters-updated="onFiltersUpdated"
-  >
-  </kbn-top-nav>
-
+  <div id="dashboardChrome"></div>
   <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   <div id="dashboardViewport"></div>
 

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

@@ -20,6 +20,7 @@
 import _, { uniq } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import angular from 'angular';
 
 import { Subscription } from 'rxjs';
@@ -44,6 +45,7 @@ import {
   SavedQuery,
   syncAppFilters,
   syncQuery,
+  TimeRange,
 } from '../../../../../../plugins/data/public';
 
 import {
@@ -83,12 +85,14 @@ import {
   removeQueryParam,
   unhashUrl,
 } from '../../../../../../plugins/kibana_utils/public';
+import { NavigationPublicPluginStart as NavigationStart } from '../../../../../../plugins/navigation/public';
 
 export interface DashboardAppControllerDependencies extends RenderDeps {
   $scope: DashboardAppScope;
   $route: any;
   $routeParams: any;
   indexPatterns: IndexPatternsContract;
+  navigation: NavigationStart;
   dashboardConfig: any;
   config: any;
   confirmModal: ConfirmModalFn;
@@ -119,6 +123,7 @@ export class DashboardAppController {
     core: { notifications, overlays, chrome, injectedMetadata, uiSettings, savedObjects, http },
     history,
     kbnUrlStateStorage,
+    navigation,
   }: DashboardAppControllerDependencies) {
     const filterManager = queryService.filterManager;
     const queryFilter = filterManager;
@@ -183,7 +188,6 @@ export class DashboardAppController {
       if (!container || isErrorEmbeddable(container)) {
         return;
       }
-
       let panelIndexPatterns: IndexPattern[] = [];
       Object.values(container.getChildIds()).forEach(id => {
         const embeddable = container.getChild(id);
@@ -261,6 +265,41 @@ export class DashboardAppController {
       };
     };
 
+    $scope.showFilterBar = () =>
+      $scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();
+
+    const getNavBarProps = () => {
+      const isFullScreenMode = dashboardStateManager.getFullScreenMode();
+      return {
+        appName: 'dashboard',
+        config: isFullScreenMode ? undefined : $scope.topNavMenu,
+        showSearchBar: !isFullScreenMode,
+        showFilterBar: $scope.showFilterBar() && !isFullScreenMode,
+        showSaveQuery: $scope.showSaveQuery,
+        noPadding: isFullScreenMode,
+        query: $scope.model.query,
+        savedQuery: $scope.savedQuery,
+        screenTitle: $scope.screenTitle,
+        onQuerySubmit: (payload: { dateRange: TimeRange; query?: Query }): void => {
+          if (!payload.query) {
+            $scope.updateQueryAndFetch({ query: $scope.model.query, dateRange: payload.dateRange });
+          } else {
+            $scope.updateQueryAndFetch({ query: payload.query, dateRange: payload.dateRange });
+          }
+        },
+        indexPatterns: $scope.indexPatterns,
+        filters: $scope.model.filters,
+        onFiltersUpdated: $scope.onFiltersUpdated,
+        isRefreshPaused: $scope.model.refreshInterval.pause,
+        refreshInterval: $scope.model.refreshInterval.value,
+        onSaved: $scope.onQuerySaved,
+        onSavedQueryUpdated: $scope.onSavedQueryUpdated,
+        onClearSavedQuery: $scope.onClearSavedQuery,
+        onRefreshChange: $scope.onRefreshChange,
+        timeHistory: queryService.timefilter.history,
+      };
+    };
+    const dashboardNavBar = document.getElementById('dashboardChrome');
     const updateState = () => {
       // Following the "best practice" of always have a '.' in your ng-models –
       // https://github.com/angular/angular.js/wiki/Understanding-Scopes
@@ -277,13 +316,19 @@ export class DashboardAppController {
       $scope.screenTitle = dashboardStateManager.getTitle();
     };
 
+    const updateNavBar = () => {
+      ReactDOM.render(<navigation.ui.TopNavMenu {...getNavBarProps()} />, dashboardNavBar);
+    };
+
     updateState();
+    updateNavBar();
 
     let dashboardContainer: DashboardContainer | undefined;
     let inputSubscription: Subscription | undefined;
     let outputSubscription: Subscription | undefined;
 
     const dashboardDom = document.getElementById('dashboardViewport');
+
     const dashboardFactory = embeddables.getEmbeddableFactory(
       DASHBOARD_CONTAINER_TYPE
     ) as DashboardContainerFactory;
@@ -335,6 +380,7 @@ export class DashboardAppController {
             $scope.$evalAsync(() => {
               if (dirty) {
                 updateState();
+                updateNavBar();
               }
             });
           });
@@ -370,6 +416,7 @@ export class DashboardAppController {
     dashboardStateManager.registerChangeListener(status => {
       this.appStatus.dirty = status.dirty || !dash.id;
       updateState();
+      updateNavBar();
     });
 
     dashboardStateManager.applyFilters(
@@ -448,22 +495,25 @@ export class DashboardAppController {
       }
     };
 
-    $scope.updateQueryAndFetch = function({ query, dateRange }) {
+    $scope.updateQueryAndFetch = function(payload) {
+      const dateRange = payload.dateRange;
+      const newQuery = payload.query;
       if (dateRange) {
         timefilter.setTime(dateRange);
       }
 
       const oldQuery = $scope.model.query;
-      if (_.isEqual(oldQuery, query)) {
+      if (_.isEqual(oldQuery, newQuery)) {
         // The user can still request a reload in the query bar, even if the
         // query is the same, and in that case, we have to explicitly ask for
         // a reload, since no state changes will cause it.
         lastReloadRequestTime = new Date().getTime();
         refreshDashboardContainer();
       } else {
-        $scope.model.query = query;
+        $scope.model.query = newQuery;
         dashboardStateManager.applyFilters($scope.model.query, $scope.model.filters);
       }
+      updateNavBar();
     };
 
     $scope.onRefreshChange = function({ isPaused, refreshInterval }) {
@@ -480,14 +530,17 @@ export class DashboardAppController {
 
     $scope.onQuerySaved = savedQuery => {
       $scope.savedQuery = savedQuery;
+      updateNavBar();
     };
 
     $scope.onSavedQueryUpdated = savedQuery => {
       $scope.savedQuery = { ...savedQuery };
+      updateStateFromSavedQuery(savedQuery);
     };
 
     $scope.onClearSavedQuery = () => {
       delete $scope.savedQuery;
+      delete $scope.model.query;
       dashboardStateManager.setSavedQueryId(undefined);
       dashboardStateManager.applyFilters(
         {
@@ -497,11 +550,10 @@ export class DashboardAppController {
         },
         queryFilter.getGlobalFilters()
       );
-      // Making this method sync broke the updates.
-      // Temporary fix, until we fix the complex state in this file.
       setTimeout(() => {
         queryFilter.setFilters(queryFilter.getGlobalFilters());
       }, 0);
+      updateNavBar();
     };
 
     const updateStateFromSavedQuery = (savedQuery: SavedQuery) => {
@@ -521,18 +573,20 @@ export class DashboardAppController {
       }
       // Making this method sync broke the updates.
       // Temporary fix, until we fix the complex state in this file.
-      setTimeout(() => {
-        queryFilter.setFilters(allFilters);
-      }, 0);
+      queryFilter.setFilters(allFilters);
+      updateNavBar();
     };
 
     $scope.$watch('savedQuery', (newSavedQuery: SavedQuery) => {
       if (!newSavedQuery) return;
       dashboardStateManager.setSavedQueryId(newSavedQuery.id);
-
       updateStateFromSavedQuery(newSavedQuery);
     });
 
+    $scope.$watch('indexPatterns', () => {
+      updateNavBar();
+    });
+
     $scope.$watch(
       () => {
         return dashboardStateManager.getSavedQueryId();
@@ -556,8 +610,8 @@ export class DashboardAppController {
     $scope.indexPatterns = [];
 
     $scope.$watch('model.query', (newQuery: Query) => {
-      const query = migrateLegacyQuery(newQuery) as Query;
-      $scope.updateQueryAndFetch({ query });
+      const legacyQuery = migrateLegacyQuery(newQuery) as Query;
+      $scope.updateQueryAndFetch({ query: legacyQuery });
     });
 
     $scope.$watch(
@@ -574,6 +628,7 @@ export class DashboardAppController {
         next: () => {
           updateState();
           refreshDashboardContainer();
+          updateNavBar();
         },
       })
     );
@@ -583,6 +638,7 @@ export class DashboardAppController {
         next: () => {
           updateState();
           refreshDashboardContainer();
+          updateNavBar();
         },
       })
     );
@@ -703,9 +759,6 @@ export class DashboardAppController {
         });
     }
 
-    $scope.showFilterBar = () =>
-      $scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();
-
     $scope.showAddPanel = () => {
       dashboardStateManager.setFullScreenMode(false);
       /*
@@ -768,7 +821,6 @@ export class DashboardAppController {
           return response;
         });
       };
-
       const dashboardSaveModal = (
         <DashboardSaveModal
           onSave={onSave}