AMBARI-6743 Config History: E2E Integration of Config Version History Pulldown and hover menu actions. (atkach)

ambari-web/app/controllers/main/service/info/configs.js

@@ -48,6 +48,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend({
   overrideToAdd: null,
   //latest version of service config versions
   currentVersion: null,
+  versionLoaded: false,
   serviceConfigs: function () {
     return App.config.get('preDefinedServiceConfigs');
   }.property('App.config.preDefinedServiceConfigs'),
@@ -149,6 +150,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend({
     this.set('hash', null);
     this.set('forceTransition', false);
     this.set('dataIsLoaded', false);
+    this.set('versionLoaded', false);
     this.set('filter', '');
     this.get('filterColumns').setEach('selected', false);
     this.get('stepConfigs').clear();
@@ -271,6 +273,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend({
    */
   loadSelectedVersion: function (version) {
     var self = this;
+    this.set('versionLoaded', false);
 
     App.ajax.send({
       name: 'service.serviceConfigVersion.get',
@@ -503,7 +506,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend({
             serviceConfig.isComparison = true;
           }
         });
-        self.set('compareServiceVersion', null)
+        self.set('compareServiceVersion', null);
         dfd.resolve();
       }).fail(function () {
           dfd.resolve();
@@ -564,6 +567,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend({
       this.set('selectedService', this.get('stepConfigs').objectAt(0));
       this.checkForSecureConfig(this.get('selectedService'));
       this.set('dataIsLoaded', true);
+      this.set('versionLoaded', true);
       this.set('hash', this.getHash());
       this.set('isInit', false);
     }
@@ -577,6 +581,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend({
     this.get('stepConfigs').pushObject(serviceConfig);
     this.set('selectedService', this.get('stepConfigs').objectAt(0));
     this.checkForSecureConfig(this.get('selectedService'));
+    this.set('versionLoaded', true);
     this.set('dataIsLoaded', true);
     this.set('hash', this.getHash());
     this.set('isInit', false);

ambari-web/app/styles/application.less

@@ -583,6 +583,27 @@ h1 {
   border-right: 20px solid transparent;
 }
 
+
+.arrow-up {
+  cursor: pointer;
+  display: inline-block;
+  border-left: 70px solid #dedede;
+  border-bottom: 15px solid #dedede;
+  border-right: 70px solid #dedede;
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+
+.arrow-down {
+  cursor: pointer;
+  display: inline-block;
+  border-left: 70px solid #dedede;
+  border-top: 15px solid #dedede;
+  border-right: 70px solid #dedede;
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+
 .visibleArrow {
   border-right-color: #dedede;
   border-left-color: #dedede;

ambari-web/app/templates/common/configs/config_history_flow.hbs

@@ -41,10 +41,10 @@
   <div class="version-info-bar">
     <div class="row-fluid">
         <div class="btn-group pull-left">
-            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}}>
+            <button class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>
                 <i class="icon-random"></i>
                 <span class="caret"></span>
-            </a>
+            </button>
             <ul class="dropdown-menu">
               {{#each serviceVersion in view.dropDownList}}
                   <li class="pointer dropdown-submenu">
@@ -58,7 +58,7 @@
                       <ul class="dropdown-menu">
                           <li><a {{action switchVersion serviceVersion target="view"}}>{{t common.view}}</a></li>
                           <li><a {{action compare serviceVersion target="view"}}>{{t common.compare}}</a></li>
-                          <li><a {{action revert serviceVersion target="view"}}>{{t common.revert}}</a></li>
+                          <li><a {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</a></li>
                       </ul>
                   </li>
               {{/each}}
@@ -81,7 +81,7 @@
                 <button class="btn" {{action doCancel target="controller"}}>{{t common.cancel}}</button>
                 <button class="btn btn-success" {{bindAttr disabled="isSubmitDisabled"}} {{action save target="view"}}>{{t common.save}}</button>
             {{else}}
-                <button class="btn btn-success" {{action revert target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+                <button class="btn btn-success" {{action revert view.displayedServiceVersion target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
             {{/if}}
         </div>
     </div>

ambari-web/app/templates/common/configs/service_config.hbs

@@ -83,14 +83,18 @@
   {{/if}}
 {{/if}}
 
-<div class="accordion">
-  {{#each category in selectedService.configCategories}}
-    {{#if category.isCustomView}}
-      {{#if App.supports.capacitySchedulerUi}}
-        {{view category.customView categoryBinding="category" serviceBinding="selectedService" canEditBinding="view.canEdit" serviceConfigsBinding="selectedService.configs"}}
-      {{/if}}
-    {{else}}
-      {{view App.ServiceConfigsByCategoryView categoryBinding="category" canEditBinding="view.canEdit" serviceBinding="selectedService" serviceConfigsBinding="selectedService.configs" supportsHostOverridesBinding="view.supportsHostOverrides"}}
-    {{/if}}
-  {{/each}}
-</div>
+{{#if versionLoaded}}
+    <div class="accordion">
+      {{#each category in selectedService.configCategories}}
+        {{#if category.isCustomView}}
+          {{#if App.supports.capacitySchedulerUi}}
+            {{view category.customView categoryBinding="category" serviceBinding="selectedService" canEditBinding="view.canEdit" serviceConfigsBinding="selectedService.configs"}}
+          {{/if}}
+        {{else}}
+          {{view App.ServiceConfigsByCategoryView categoryBinding="category" canEditBinding="view.canEdit" serviceBinding="selectedService" serviceConfigsBinding="selectedService.configs" supportsHostOverridesBinding="view.supportsHostOverrides"}}
+        {{/if}}
+      {{/each}}
+    </div>
+{{else}}
+    <div class="spinner"></div>
+{{/if}}

ambari-web/app/utils/ajax/ajax.js

@@ -1773,6 +1773,16 @@ var urls = {
   'service.serviceConfigVersion.get': {
     real: '/clusters/{clusterName}/configurations/serviceconfigversions?service_name={serviceName}&serviceconfigversion={serviceConfigVersion}',
     mock: ''
+  },
+  'service.serviceConfigVersion.revert': {
+    'real': '/clusters/{clusterName}',
+    'mock': '',
+    'type': 'PUT',
+    'format': function (data) {
+      return {
+        data: JSON.stringify(data.data)
+      }
+    }
   }
 };
 /**

ambari-web/app/views/common/configs/config_history_flow.js

@@ -65,6 +65,13 @@ App.ConfigHistoryFlowView = Em.View.extend({
     return this.get('serviceVersions').slice(this.get('startIndex'), (this.get('startIndex') + this.VERSIONS_IN_FLOW));
   }.property('startIndex'),
 
+  /**
+   * enable actions to manipulate version only after it's loaded
+   */
+  versionActionsDisabled: function () {
+    return !this.get('controller.versionLoaded');
+  }.property('controller.versionLoaded'),
+
   /**
    * list of service versions
    * by default 6 is number of items in short list
@@ -151,10 +158,19 @@ App.ConfigHistoryFlowView = Em.View.extend({
    */
   switchVersion: function (event) {
     var version = event.context.get('version');
-    this.get('serviceVersions').forEach(function (serviceVersion) {
-      serviceVersion.set('isDisplayed', serviceVersion.get('version') === version);
+    var versionIndex = 0;
+
+    this.get('serviceVersions').forEach(function (serviceVersion, index) {
+      if (serviceVersion.get('version') === version) {
+        serviceVersion.set('isDisplayed', true);
+        versionIndex = index;
+      } else {
+        serviceVersion.set('isDisplayed', false);
+      }
     });
-    //TODO implement load configs for chosen version
+    this.shiftFlowOnSwitch(versionIndex);
+
+    this.get('controller').loadSelectedVersion(version);
   },
 
   /**
@@ -167,8 +183,46 @@ App.ConfigHistoryFlowView = Em.View.extend({
   /**
    * revert config values to chosen version and apply reverted configs to server
    */
-  revert: function () {
-    //TODO implement put configs of chosen version to server
+  revert: function (event) {
+    var self = this;
+    App.showConfirmationPopup(function () {
+      self.sendRevertCall(event.context);
+    });
+  },
+
+  /**
+   * send PUT call to revert config to selected version
+   * @param serviceConfigVersion
+   */
+  sendRevertCall: function (serviceConfigVersion) {
+    App.ajax.send({
+      name: 'service.serviceConfigVersion.revert',
+      sender: this,
+      data: {
+        data: {
+          "Clusters": {
+            "desired_serviceconfigversions": {
+              "serviceconfigversion": serviceConfigVersion.get('version'),
+              "service_name": serviceConfigVersion.get('serviceName')
+            }
+          }
+        }
+      },
+      success: 'sendRevertCallSuccess'
+    });
+  },
+
+  sendRevertCallSuccess: function (data, opt, params) {
+    var version = params.data.Clusters.desired_serviceconfigversions.serviceconfigversion;
+
+    this.get('serviceVersions').forEach(function (serviceVersion) {
+      serviceVersion.set('isCurrent', serviceVersion.get('version') === version);
+    });
+    if (this.get('displayedServiceVersion.version') !== version) {
+      this.switchVersion({context: Em.Object.create({
+        version: version
+      })});
+    }
   },
 
   /**
@@ -219,5 +273,18 @@ App.ConfigHistoryFlowView = Em.View.extend({
   shiftForward: function () {
     this.incrementProperty('startIndex');
     this.adjustFlowView();
+  },
+  /**
+   * shift flow view to position where selected version is visible
+   * @param versionIndex
+   */
+  shiftFlowOnSwitch: function (versionIndex) {
+    var serviceVersions = this.get('serviceVersions');
+
+    if ((this.get('startIndex') + this.VERSIONS_IN_FLOW) < versionIndex || versionIndex < this.get('startIndex')) {
+      versionIndex = (serviceVersions.length < (versionIndex + this.VERSIONS_IN_FLOW)) ? serviceVersions.length - this.VERSIONS_IN_FLOW : versionIndex;
+      this.set('startIndex', versionIndex);
+      this.adjustFlowView();
+    }
   }
 });