AMBARI-6595 Config History: Implement Config Version History Pulldown and hover menu actions (with mock data). (atkach)

ambari-web/app/config.js

@@ -79,7 +79,8 @@ App.supports = {
   ubuntu: true,
   views: false,
   flume: true,
-  databaseConnection: true
+  databaseConnection: true,
+  configHistory: true
 };
 
 if (App.enableExperimental) {

ambari-web/app/messages.js

@@ -212,6 +212,8 @@ Em.I18n.translations = {
   'common.type.number': 'number',
   'common.author': 'Author',
   'common.notes': 'Notes',
+  'common.view': 'View',
+  'common.compare': 'Compare',
 
   'passiveState.turnOn':'Turn On Maintenance Mode',
   'passiveState.turnOff':'Turn Off Maintenance Mode',
@@ -1934,6 +1936,10 @@ Em.I18n.translations = {
   'dashboard.configHistory.table.filteredHostsInfo': '{0} of {1} versions showing',
   'dashboard.configHistory.table.current': '(Current)',
   'dashboard.configHistory.info-bar.authoredOn': 'authored on',
+  'dashboard.configHistory.info-bar.changesToHandle': 'Changes to handle',
+  'dashboard.configHistory.info-bar.showMore': 'Show more',
+  'dashboard.configHistory.info-bar.save.popup.title': 'Save Configuration',
+  'dashboard.configHistory.info-bar.save.popup.placeholder': 'What did you change?',
 
   'timeRange.presets.1hour':'1h',
   'timeRange.presets.12hour':'12h',

ambari-web/app/routes/main.js

@@ -157,13 +157,17 @@ module.exports = Em.Route.extend({
     configHistory: Em.Route.extend({
       route: '/config_history',
       connectOutlets: function (router, context) {
-        router.set('mainDashboardController.selectedCategory', 'configHistory');
-        router.get('mainDashboardController').connectOutlet('mainConfigHistory');
+        if (App.get('supports.configHistory')) {
+          router.set('mainDashboardController.selectedCategory', 'configHistory');
+          router.get('mainDashboardController').connectOutlet('mainConfigHistory');
+        } else {
+          router.transitionTo('main.dashboard.widgets');
+        }
       }
     }),
     goToServiceConfigs: function (router, event) {
       router.get('mainServiceItemController').set('routeToConfigs', true);
-      App.router.transitionTo('main.services.service.configs', App.Service.find(event.context));
+      router.transitionTo('main.services.service.configs', App.Service.find(event.context));
       router.get('mainServiceItemController').set('routeToConfigs', false);
     }
   }),

ambari-web/app/styles/application.less

@@ -129,6 +129,7 @@ footer {
 @top-nav-menu-dropdown-border-color: #c3c3c3;
 @top-nav-menu-dropdown-bg-color: #ffffff;
 @top-nav-menu-dropdown-text-color: #333333;
+@default-font-size: 14px;
 
 #top-nav {
 
@@ -2496,7 +2497,7 @@ width:100%;
   }
 }
 
-.modal-footer.align-center {
+.align-center {
   text-align: center;
 }
 
@@ -4847,6 +4848,7 @@ ul.inline li {
 }
 
 #config_history_flow {
+  margin-bottom: 100px;
   .version-slider {
     width: 100%;
     height: 100px;
@@ -4860,24 +4862,27 @@ ul.inline li {
         height: 100%;
         background-color: #dcdcdc;
         border: 1px solid #000000;
+        font-size: 0.9em;
         .top-right-label {
+          font-size: @default-font-size;
           background-color: white;
           position: absolute;
           top: 0;
           left: 0;
-          width: 20px;
+          min-width: 20px;
           border: solid #000000;
           border-width: 0 1px 1px 0;
           padding: 5px;
           text-align: center;
         }
         .date {
-          margin-left: 35px;
+          margin-left: 40px;
           line-height: 30px;
           white-space: nowrap;
         }
         .content {
           padding: 0 5px;
+          line-height: 16px;
         }
         .current-label {
           position: absolute;
@@ -4933,8 +4938,12 @@ ul.inline li {
     height: 60px;
     border: 2px solid #a9a9a9;
     background-color: #dcdcdc;
-    margin: 10px 0;
+    margin: 5px 0;
     padding: 5px;
+    position: fixed;
+    width: 52%;
+    z-index: 2;
+    min-width: 743px;
 
     .label-wrapper {
       line-height: 30px;
@@ -4944,6 +4953,27 @@ ul.inline li {
         padding: 5px;
       }
     }
+    .dropdown-menu {
+      min-width: 660px;
+      li {
+        line-height: 30px;
+      }
+      li:hover {
+        background-color: #666666;
+        background-image: linear-gradient(to bottom, #666666, #555555);
+        color: white;
+      }
+      .icon-caret-right {
+        font-size: 20px;
+        margin-right: 20px;
+      }
+      div.row-fluid, a {
+        padding-left: 10px;
+      }
+    }
+    .dropdown-submenu .dropdown-menu {
+      min-width: 80px;
+    }
   }
 }
 
@@ -4951,6 +4981,18 @@ ul.inline li {
   cursor: pointer;
 }
 
+.lowercase {
+  text-transform:lowercase;
+}
+.ellipsis:after {
+  content: '...';
+}
+
+.full-width {
+  width: 100%
+}
+
+
 .big-arrow-right {
   background-repeat: no-repeat;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAA2CAQAAAAYac0YAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAFxIAABcSAWef0lIAAAC8SURBVGje7dfBDcIwDIXhv4h7uwmMkA1YjZGyQcMktBO0l6oEDhBQJMfoPZ9y8qcosmKonZ6RpaDunKr3FlhggQUWWGCBBRZYYOsI3Cy4Y7G2v81E4PY4Hqw9HzIQ8xtunfsCbp/7BPbAzcA+uDu49cmQZyJ44kL0xE0EL28XEoHZCzcRmL1Mhg3rg7tjPXAzLByJJoiB8/dYq5T+d0d6a6qwwgorrLDCCiussMIK+x/Yrjr3UriFXX/ZwVZCWg1F9uJ6aQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNC0wNy0yM1QxMzoxNzowNyswMjowMP0r3LUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMDctMjNUMTM6MTc6MDcrMDI6MDCMdmQJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==);

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

@@ -38,12 +38,35 @@
   <div class="version-info-bar">
     <div class="row-fluid">
         <div class="btn-group pull-left">
-            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}}>
                 <i class="icon-random"></i>
                 <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
-
+              {{#each serviceVersion in view.dropDownList}}
+                  <li class="pointer dropdown-submenu">
+                      <div class="row-fluid">
+                          <div class="span2">{{t common.version}}:&nbsp;{{serviceVersion.version}}</div>
+                          <div class="span3">{{serviceVersion.date}}</div>
+                          <div class="span2">{{serviceVersion.author}}</div>
+                          <div class="span4"><span class="ellipsis">{{t dashboard.configHistory.info-bar.changesToHandle}}</span></div>
+                          <div class="pull-right"><i class="icon-caret-right"></i></div>
+                      </div>
+                      <ul class="dropdown-menu">
+                          <li><a {{action "view" 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>
+                      </ul>
+                  </li>
+              {{/each}}
+              {{#unless view.showFullList}}
+                  <li class="align-center pointer" id="show_more">
+                      <a {{action openFullList target="view"}}>
+                        {{t dashboard.configHistory.info-bar.showMore}}&nbsp;{{view.currentServiceVersion.serviceName}}
+                          &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
+                      </a>
+                  </li>
+              {{/unless}}
             </ul>
         </div>
         <div class="label-wrapper span8">
@@ -51,8 +74,8 @@
             <strong>{{view.currentServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.currentServiceVersion.date}}</strong>
         </div>
         <div class="pull-right">
-            <div class="btn">{{t common.cancel}}</div>
-            <div class="btn btn-success">{{t common.save}}</div>
+            <button class="btn" {{action cancel target="view"}}>{{t common.cancel}}</button>
+            <button class="btn btn-success" {{action save target="view"}}>{{t common.save}}</button>
         </div>
     </div>
     <div class="label-wrapper">

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

@@ -0,0 +1,22 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<div class="row-fluid">
+    <div class="span1">{{t common.notes}}</div>
+    <div class="span10">{{view view.notesArea}}</div>
+</div>

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

@@ -77,8 +77,10 @@
 	</div>
 {{/if}}
 
-{{#if view.showConfigHistoryFlow}}
-  {{view App.ConfigHistoryFlowView serviceBinding="selectedService"}}
+{{#if App.supports.configHistory}}
+  {{#if view.showConfigHistoryFlow}}
+    {{view App.ConfigHistoryFlowView serviceBinding="selectedService"}}
+  {{/if}}
 {{/if}}
 
 <div class="accordion">

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

@@ -27,6 +27,10 @@ App.ConfigHistoryFlowView = Em.View.extend({
   startIndex: 0,
   showLeftArrow: true,
   showRightArrow: false,
+  /**
+   * flag identify whether to show all versions or short list of them
+   */
+  showFullList: false,
 
   currentServiceVersion: function () {
     return this.get('serviceVersions').findProperty('current');
@@ -55,6 +59,26 @@ App.ConfigHistoryFlowView = Em.View.extend({
     return this.get('serviceVersions').slice(this.get('startIndex'), (this.get('startIndex') + 5));
   }.property('startIndex'),
 
+  /**
+   * list of service versions
+   * by default 6 is number of items in short list
+   */
+  dropDownList: function () {
+    var serviceVersions = this.get('serviceVersions').without(this.get('currentServiceVersion')).reverse();
+    if (this.get('showFullList')) {
+      return serviceVersions;
+    }
+    return serviceVersions.slice(0, 6);
+  }.property('serviceVersions', 'showFullList'),
+
+  openFullList: function (event) {
+    event.stopPropagation();
+    this.set('showFullList', true);
+  },
+  hideFullList: function (event) {
+    this.set('showFullList', false);
+  },
+
   willInsertElement: function () {
     var serviceVersions = this.get('serviceVersions');
     var startIndex = 0;
@@ -79,6 +103,61 @@ App.ConfigHistoryFlowView = Em.View.extend({
     this.set('showLeftArrow', (startIndex !== 0));
     this.set('showRightArrow', ((startIndex + 5) !== this.get('serviceVersions.length')));
   },
+
+  /**
+   * switch configs view version to chosen
+   */
+  view: function () {
+
+  },
+  /**
+   * add config values of chosen version to view for comparison
+   */
+  compare: function () {
+
+  },
+  /**
+   * revert config values to chosen version
+   */
+  revert: function () {
+
+  },
+  /**
+   * cancel configuration saving
+   */
+  cancel: function () {
+
+  },
+  /**
+   * save configuration
+   * @return {object}
+   */
+  save: function () {
+    return App.ModalPopup.show({
+      header: Em.I18n.t('dashboard.configHistory.info-bar.save.popup.title'),
+      bodyClass: Em.View.extend({
+        templateName: require('templates/common/configs/save_configuration'),
+        notesArea: Em.TextArea.extend({
+          classNames: ['full-width'],
+          placeholder: Em.I18n.t('dashboard.configHistory.info-bar.save.popup.placeholder')
+        })
+      }),
+      footerClass: Ember.View.extend({
+        templateName: require('templates/main/service/info/save_popup_footer')
+      }),
+      primary: Em.I18n.t('common.save'),
+      secondary: Em.I18n.t('common.cancel'),
+      onSave: function () {
+        this.hide();
+      },
+      onDiscard: function () {
+        this.hide();
+      },
+      onCancel: function () {
+        this.hide();
+      }
+    });
+  },
   serviceVersions: [
     Em.Object.create({
       serviceName: 'HDFS',

ambari-web/app/views/main/dashboard.js

@@ -24,23 +24,28 @@ App.MainDashboardView = Em.View.extend({
   templateName: require('templates/main/dashboard'),
 
   selectedBinding: 'controller.selectedCategory',
-  categories: [
-    {
-      name: 'widgets',
-      url: 'dashboard.index',
-      label: Em.I18n.t('dashboard.widgets.title')
-    },
-    {
-      name: 'charts',
-      url: 'dashboard.charts.index',
-      label: Em.I18n.t('dashboard.heatmaps.title')
-    },
-    {
-      name: 'configHistory',
-      url: 'dashboard.configHistory',
-      label: Em.I18n.t('dashboard.configHistory.title')
+  categories: function () {
+    var categories = [
+      {
+        name: 'widgets',
+        url: 'dashboard.index',
+        label: Em.I18n.t('dashboard.widgets.title')
+      },
+      {
+        name: 'charts',
+        url: 'dashboard.charts.index',
+        label: Em.I18n.t('dashboard.heatmaps.title')
+      }
+    ];
+    if (App.get('supports.configHistory')) {
+      categories.push({
+        name: 'configHistory',
+        url: 'dashboard.configHistory',
+        label: Em.I18n.t('dashboard.configHistory.title')
+      })
     }
-  ],
+    return categories;
+  }.property('App.supports.configHistory'),
   NavItemView: Ember.View.extend({
     tagName: 'li',
     classNameBindings: 'isActive:active'.w(),