Merge pull request elastic#8148 from BigFunger/appstatus_port

Port of appStatus from 4.x branch

src/core_plugins/kibana/public/dashboard/index.html

@@ -1,4 +1,4 @@
-<div dashboard-app class="app-container dashboard-container">
+<dashboard-app class="app-container dashboard-container">
   <kbn-top-nav name="dashboard" config="topNavMenu">
     <div class="kibana-nav-info">
       <span ng-show="dash.id" class="kibana-nav-info-title">
@@ -46,4 +46,4 @@ <h2>Ready to get started?</h2>
   </div>
 
   <dashboard-grid></dashboard-grid>
-</div>
+</dashboard-app>

src/core_plugins/kibana/public/dashboard/index.js

@@ -13,6 +13,7 @@ import 'plugins/kibana/dashboard/services/saved_dashboards';
 import 'plugins/kibana/dashboard/styles/main.less';
 import FilterBarQueryFilterProvider from 'ui/filter_bar/query_filter';
 import DocTitleProvider from 'ui/doc_title';
+import stateMonitorFactory  from 'ui/state_management/state_monitor_factory';
 import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';
 import indexTemplate from 'plugins/kibana/dashboard/index.html';
@@ -54,6 +55,8 @@ uiRoutes
 
 app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter, kbnUrl) {
   return {
+    restrict: 'E',
+    controllerAs: 'dashboardApp',
     controller: function ($scope, $rootScope, $route, $routeParams, $location, Private, getAppState) {
 
       const queryFilter = Private(FilterBarQueryFilterProvider);
@@ -92,8 +95,10 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         filters: _.reject(dash.searchSource.getOwn('filter'), matchQueryFilter),
       };
 
+      let stateMonitor;
       const $state = $scope.state = new AppState(stateDefaults);
       const $uiState = $scope.uiState = $state.makeStateful('uiState');
+      const $appStatus = $scope.appStatus = this.appStatus = {};
 
       $scope.$watchCollection('state.options', function (newVal, oldVal) {
         if (!angular.equals(newVal, oldVal)) $state.save();
@@ -143,6 +148,14 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         }
 
         initPanelIndices();
+
+        // watch for state changes and update the appStatus.dirty value
+        stateMonitor = stateMonitorFactory.create($state, stateDefaults);
+        stateMonitor.onChange((status) => {
+          $appStatus.dirty = status.dirty;
+        });
+        $scope.$on('$destroy', () => stateMonitor.destroy());
+
         $scope.$emit('application.load');
       }
 
@@ -216,6 +229,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
 
         dash.save()
         .then(function (id) {
+          stateMonitor.setInitialState($state.toJSON());
           $scope.kbnTopNav.close('save');
           if (id) {
             notify.info('Saved Dashboard as "' + dash.title + '"');

src/core_plugins/kibana/public/discover/controllers/discover.js

@@ -22,6 +22,7 @@ import PluginsKibanaDiscoverHitSortFnProvider from 'plugins/kibana/discover/_hit
 import FilterBarQueryFilterProvider from 'ui/filter_bar/query_filter';
 import FilterManagerProvider from 'ui/filter_manager';
 import AggTypesBucketsIntervalOptionsProvider from 'ui/agg_types/buckets/_interval_options';
+import stateMonitorFactory  from 'ui/state_management/state_monitor_factory';
 import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';
 import indexTemplate from 'plugins/kibana/discover/index.html';
@@ -79,7 +80,15 @@ uiRoutes
   }
 });
 
-app.controller('discover', function ($scope, config, courier, $route, $window, Notifier,
+app.directive('discoverApp', function () {
+  return {
+    restrict: 'E',
+    controllerAs: 'discoverApp',
+    controller: discoverController
+  };
+});
+
+function discoverController($scope, config, courier, $route, $window, Notifier,
   AppState, timefilter, Promise, Private, kbnUrl, highlightTags) {
 
   const Vis = Private(VisProvider);
@@ -136,6 +145,8 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
     docTitle.change(savedSearch.title);
   }
 
+  let stateMonitor;
+  const $appStatus = $scope.appStatus = this.appStatus = {};
   const $state = $scope.state = new AppState(getStateDefaults());
   $scope.uiState = $state.makeStateful('uiState');
 
@@ -178,6 +189,12 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
       $scope.failuresShown = showTotal;
     };
 
+    stateMonitor = stateMonitorFactory.create($state, getStateDefaults());
+    stateMonitor.onChange((status) => {
+      $appStatus.dirty = status.dirty;
+    });
+    $scope.$on('$destroy', () => stateMonitor.destroy());
+
     $scope.updateDataSource()
     .then(function () {
       $scope.$listen(timefilter, 'fetch', function () {
@@ -303,6 +320,7 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
 
       return savedSearch.save()
       .then(function (id) {
+        stateMonitor.setInitialState($state.toJSON());
         $scope.kbnTopNav.close('save');
 
         if (id) {
@@ -571,4 +589,4 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
   }
 
   init();
-});
+};

src/core_plugins/kibana/public/discover/index.html

@@ -1,4 +1,4 @@
-<div ng-controller="discover" class="app-container">
+<discover-app class="app-container">
   <kbn-top-nav name="discover" config="topNavMenu">
     <div class="kibana-nav-info">
       <span ng-show="opts.savedSearch.id" class="kibana-nav-info-title">
@@ -126,4 +126,4 @@ <h2>Searching</h2>
       </div>
     </div>
   </div>
-</div>
+</discover-app>

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller="VisEditor" class="app-container vis-editor vis-type-{{ vis.type.name }}">
+<visualize-app class="app-container vis-editor vis-type-{{ vis.type.name }}">
 
   <kbn-top-nav name="visualize" config="topNavMenu">
     <div class="vis-editor-info">
@@ -91,5 +91,4 @@
       </visualize>
     </div>
   </div>
-
-</div>
+</visualize-app>

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

@@ -12,6 +12,7 @@ import DocTitleProvider from 'ui/doc_title';
 import UtilsBrushEventProvider from 'ui/utils/brush_event';
 import FilterBarQueryFilterProvider from 'ui/filter_bar/query_filter';
 import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
+import stateMonitorFactory from 'ui/state_management/state_monitor_factory';
 import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';
 import editorTemplate from 'plugins/kibana/visualize/editor/editor.html';
@@ -55,8 +56,15 @@ uiModules
   'kibana/notify',
   'kibana/courier'
 ])
-.controller('VisEditor', function ($scope, $route, timefilter, AppState, $location, kbnUrl, $timeout, courier, Private, Promise) {
+.directive('visualizeApp', function () {
+  return {
+    restrict: 'E',
+    controllerAs: 'visualizeApp',
+    controller: VisEditor,
+  };
+});
 
+function VisEditor($scope, $route, timefilter, AppState, $location, kbnUrl, $timeout, courier, Private, Promise) {
   const docTitle = Private(DocTitleProvider);
   const brushEvent = Private(UtilsBrushEventProvider);
   const queryFilter = Private(FilterBarQueryFilterProvider);
@@ -66,6 +74,9 @@ uiModules
     location: 'Visualization Editor'
   });
 
+  let stateMonitor;
+  const $appStatus = this.appStatus = {};
+
   const savedVis = $route.current.locals.savedVis;
 
   const vis = savedVis.vis;
@@ -104,16 +115,16 @@ uiModules
     docTitle.change(savedVis.title);
   }
 
-  let $state = $scope.$state = (function initState() {
-    const savedVisState = vis.getState();
-    const stateDefaults = {
-      uiState: savedVis.uiStateJSON ? JSON.parse(savedVis.uiStateJSON) : {},
-      linked: !!savedVis.savedSearchId,
-      query: searchSource.getOwn('query') || {query_string: {query: '*'}},
-      filters: searchSource.getOwn('filter') || [],
-      vis: savedVisState
-    };
+  const savedVisState = vis.getState();
+  const stateDefaults = {
+    uiState: savedVis.uiStateJSON ? JSON.parse(savedVis.uiStateJSON) : {},
+    linked: !!savedVis.savedSearchId,
+    query: searchSource.getOwn('query') || {query_string: {query: '*'}},
+    filters: searchSource.getOwn('filter') || [],
+    vis: savedVisState
+  };
 
+  let $state = $scope.$state = (function initState() {
     $state = new AppState(stateDefaults);
 
     if (!angular.equals($state.vis, savedVisState)) {
@@ -138,10 +149,18 @@ uiModules
     $scope.editableVis = editableVis;
     $scope.state = $state;
     $scope.uiState = $state.makeStateful('uiState');
+    $scope.appStatus = $appStatus;
+
     vis.setUiState($scope.uiState);
     $scope.timefilter = timefilter;
     $scope.opts = _.pick($scope, 'doSave', 'savedVis', 'shareData', 'timefilter');
 
+    stateMonitor = stateMonitorFactory.create($state, stateDefaults);
+    stateMonitor.ignoreProps([ 'vis.listeners' ]).onChange((status) => {
+      $appStatus.dirty = status.dirty;
+    });
+    $scope.$on('$destroy', () => stateMonitor.destroy());
+
     editableVis.listeners.click = vis.listeners.click = filterBarClickHandler($state);
     editableVis.listeners.brush = vis.listeners.brush = brushEvent;
 
@@ -248,6 +267,7 @@ uiModules
 
     savedVis.save()
     .then(function (id) {
+      stateMonitor.setInitialState($state.toJSON());
       $scope.kbnTopNav.close('save');
 
       if (id) {
@@ -316,4 +336,4 @@ uiModules
   }
 
   init();
-});
+};