Removing the auto-apply feature from Time Series Visual Builder (#11460)

* Removing the auto-apply feature

* Removing commented out code

* Adding auto apply toggle; making apply bar perminant; only make apply sensitive to data changes

* Tweaking the auto apply behavior

* Moved auto apply toggle; added local storage for setting

package.json

@@ -176,6 +176,7 @@
     "react-router-redux": "4.0.4",
     "react-select": "1.0.0-rc.1",
     "react-sortable": "1.1.0",
+    "react-toggle": "3.0.1",
     "reactcss": "1.0.7",
     "redux": "3.0.0",
     "redux-thunk": "0.1.0",

src/core_plugins/metrics/public/components/vis_editor.js

@@ -39,9 +39,13 @@ class VisEditor extends Component {
             model={model}
             onChange={handleChange} />
           <VisEditorVisualization
+            dirty={this.props.dirty}
+            autoApply={this.props.autoApply}
             model={model}
             visData={this.props.visData}
             onBrush={this.props.onBrush}
+            onCommit={this.props.onCommit}
+            onToggleAutoApply={this.props.onToggleAutoApply}
             onChange={handleChange} />
           <PanelConfig
             fields={this.props.fields}
@@ -61,7 +65,11 @@ VisEditor.propTypes = {
   model: PropTypes.object,
   onBrush: PropTypes.func,
   onChange: PropTypes.func,
-  visData: PropTypes.object
+  onCommit: PropTypes.func,
+  onToggleAutoApply: PropTypes.func,
+  visData: PropTypes.object,
+  dirty: PropTypes.bool,
+  autoApply: PropTypes.bool
 };
 
 export default VisEditor;

src/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { findDOMNode } from 'react-dom';
 import Visualization from './visualization';
+import Toggle from 'react-toggle';
+import 'react-toggle/style.css';
 
 class VisEditorVisualization extends Component {
 
@@ -47,10 +49,38 @@ class VisEditorVisualization extends Component {
   }
 
   render() {
+    const { dirty, autoApply } = this.props;
     const style = { height: this.state.height };
     if (this.state.dragging) {
       style.userSelect = 'none';
     }
+
+    const applyButtonClassName = dirty ? 'thor__button-solid-default' : 'thor__button-outlined-grayLight';
+    let applyMessage = 'The latest changes have been applied.';
+    if (dirty) applyMessage = 'The changes to this visualization have not been applied.';
+    if (autoApply) applyMessage = 'The changes will be automatically applied.';
+    const applyButton = (
+      <div className="vis_editor__dirty_controls">
+        <div className="vis_editor__dirty_controls-toggle-label">Auto Apply</div>
+        <div className="vis_editor__dirty_controls-toggle">
+          <Toggle
+            defaultChecked={autoApply}
+            icons={false}
+            onChange={this.props.onToggleAutoApply} />
+        </div>
+        <div className="vis_editor__dirty_controls-button">
+          <button
+            disabled={!dirty}
+            onClick={this.props.onCommit}
+            className={`${applyButtonClassName} md`}>
+            <i className="fa fa-play"></i> Apply Changes</button>
+        </div>
+        <div className={`vis_editor__dirty_controls-message${dirty ? '-dirty' : ''}`}>
+          {applyMessage}
+        </div>
+      </div>
+    );
+
     const visBackgroundColor = '#FFF';
     return (
       <div>
@@ -67,6 +97,7 @@ class VisEditorVisualization extends Component {
             onChange={this.handleChange}
             visData={this.props.visData} />
         </div>
+        {applyButton}
         <div
           className="vis_editor__visualization-draghandle"
           onMouseDown={this.handleMouseDown}
@@ -82,7 +113,11 @@ VisEditorVisualization.propTypes = {
   model: PropTypes.object,
   onBrush: PropTypes.func,
   onChange: PropTypes.func,
-  visData: PropTypes.object
+  onCommit: PropTypes.func,
+  onToggleAutoApply: PropTypes.func,
+  visData: PropTypes.object,
+  dirty: PropTypes.bool,
+  autoApply: PropTypes.bool
 };
 
 export default VisEditorVisualization;

src/core_plugins/metrics/public/directives/vis_editor.js

@@ -10,13 +10,24 @@ app.directive('metricsVisEditor', (timefilter) => {
   return {
     restrict: 'E',
     link: ($scope, $el) => {
-      const addToState = ['embedded', 'fields', 'visData'];
+      const addToState = ['autoApply', 'dirty', 'embedded', 'fields', 'visData'];
       const Component = addScope(VisEditor, $scope, addToState);
       const handleBrush = createBrushHandler($scope, timefilter);
       const handleChange = part => {
         $scope.$evalAsync(() => angular.copy(part, $scope.model));
       };
-      render(<Component model={$scope.model} onChange={handleChange} onBrush={handleBrush} />, $el[0]);
+      const handleCommit = () => {
+        $scope.$evalAsync(() => $scope.commit());
+      };
+      const handleToggleAutoApply = () => {
+        $scope.$evalAsync(() => $scope.toggleAutoApply());
+      };
+      render(<Component
+        model={$scope.model}
+        onCommit={handleCommit}
+        onToggleAutoApply={handleToggleAutoApply}
+        onChange={handleChange}
+        onBrush={handleBrush} />, $el[0]);
       $scope.$on('$destroy', () => {
         unmountComponentAtNode($el[0]);
       });

src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js

@@ -5,6 +5,7 @@ import '../directives/vis_editor';
 import _ from 'lodash';
 import angular from 'angular';
 import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter';
+const AUTO_APPLY_KEY = 'metrics_autoApply';
 
 const app = uiModules.get('kibana/metrics_vis', ['kibana']);
 app.controller('MetricsEditorController', (
@@ -13,9 +14,12 @@ app.controller('MetricsEditorController', (
   $scope,
   Private,
   timefilter,
+  localStorage,
   metricsExecutor
 ) => {
 
+  const autoApply = localStorage.get(AUTO_APPLY_KEY);
+  $scope.autoApply = autoApply != null ? autoApply : true;
   $scope.embedded = $location.search().embed === 'true';
   const queryFilter = Private(FilterBarQueryFilterProvider);
   const createFetch = Private(require('../lib/fetch'));
@@ -28,9 +32,7 @@ app.controller('MetricsEditorController', (
   };
   const fetchFields = Private(require('../lib/fetch_fields'));
 
-  const debouncedFetch = _.debounce(() => {
-    fetch();
-  }, 1000, {
+  const debouncedFetch = _.debounce(() => fetch(), 1000, {
     leading: false,
     trailing: true
   });
@@ -49,12 +51,28 @@ app.controller('MetricsEditorController', (
       $scope.model = createNewPanel();
       angular.copy($scope.model, $scope.vis._editableVis.params);
     }
+    fetch();
   }
 
-  $scope.$watchCollection('model', newValue => {
+  $scope.commit = () => {
+    fetch();
+    $scope.dirty = false;
+  };
+
+  $scope.toggleAutoApply = () => {
+    $scope.autoApply = !$scope.autoApply;
+    localStorage.set(AUTO_APPLY_KEY, $scope.autoApply);
+  };
+
+  $scope.$watchCollection('model', (newValue, oldValue) => {
     angular.copy(newValue, $scope.vis._editableVis.params);
     $scope.stageEditableVis();
-    debouncedFetch();
+    $scope.dirty = !_.isEqual(newValue.series, oldValue.series);
+
+    if ($scope.dirty && $scope.autoApply) {
+      debouncedFetch();
+      $scope.dirty = false;
+    }
 
     const patternsToFetch = [];
     // Fetch any missing index patterns

src/core_plugins/metrics/public/less/editor.less

@@ -439,3 +439,37 @@
   color: @gray;
   font-size: 0.9em;
 }
+
+.vis_editor__dirty_controls {
+  padding: 8px 6px;
+  background-color: @grayLightest;
+  display: flex;
+  align-content: center;
+}
+
+.vis_editor__dirty_controls-button {
+  flex: 0 0 auto;
+}
+
+.vis_editor__dirty_controls-message {
+  flex: 1 0 auto;
+  color: @grayLight;
+  padding: 4px 10px 0;
+}
+
+.vis_editor__dirty_controls-message-dirty {
+  flex: 1 0 auto;
+  color: @gray;
+  padding: 4px 10px 0;
+}
+
+.vis_editor__dirty_controls-toggle-label {
+  padding: 4px 10px 0;
+  flex: 0 0 auto;
+  color: @gray;
+}
+
+.vis_editor__dirty_controls-toggle {
+  flex: 0 0 auto;
+}
+

src/core_plugins/metrics/public/less/misc.less

@@ -62,6 +62,7 @@
 
 
 .create-buttons(gray, @kibanaGray);
+.create-buttons(grayLight, @grayLight);
 .create-buttons(default, @esBlue);
 .create-buttons(primary, @esGreen);
 .create-buttons(danger, @esRed);