AMBARI-7395. Configs: hover dismiss issues and ui cleanup.(xiwang)

ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html

@@ -66,7 +66,6 @@
           Launch Install Wizard
         </a>
       </div>
-        
     </div>
   </div>
 
@@ -98,6 +97,5 @@
         
     </div>
   </div>
-
 </div>
   

ambari-web/app/messages.js

@@ -2013,6 +2013,7 @@ Em.I18n.translations = {
   'dashboard.configHistory.table.configGroup.default' : 'default',
   'dashboard.configHistory.table.empty' : 'No history to display',
   'dashboard.configHistory.table.notes.default': 'Initial configurations for {0}',
+  'dashboard.configHistory.table.notes.no': '<i>No notes</i>',
   'dashboard.configHistory.table.version.versionText' : 'V{0}',
   'dashboard.configHistory.table.version.prefix' : 'V',
   'dashboard.configHistory.table.current.tooltip' : 'Current config for {0}:{1}',

ambari-web/app/models/service_config_version.js

@@ -42,9 +42,12 @@ App.ServiceConfigVersion = DS.Model.extend({
   configGroupName: function () {
     return (this.get('groupName') === 'default') ? (this.get('displayName') + ' ' + Em.I18n.t('common.default')) : this.get('groupName');
   }.property('groupName'),
-  briefNotes: function () {
-    return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, 81) : "";
+  fullNotes: function () {
+    return (typeof this.get('notes') === 'string') ? this.get('notes') || Em.I18n.t('dashboard.configHistory.table.notes.no') : Em.I18n.t('dashboard.configHistory.table.notes.no');
   }.property('notes'),
+  briefNotes: function () {
+    return this.get('fullNotes').slice(0, 81);
+  }.property('fullNotes'),
   moreNotesExists: function () {
     return (typeof this.get('notes') === 'string') ?  this.get('notes').length > 80 : false;
   }.property('notes'),

ambari-web/app/styles/application.less

@@ -4995,15 +4995,15 @@ ul.inline li {
     height: 58px;
     margin: 5px 0;
     .flow-element {
-      width: 18.5%;
       height: 58px;
+      width: 15.2%;
       .version-box {
         position: relative;
         height: 90%;
       }
       .version-box .box {
         cursor: pointer;
-        width: 72%;
+        width: 92%;
         height: 100%;
         background-color: #ffffff;
         -webkit-border-radius: 4px;
@@ -5066,11 +5066,14 @@ ul.inline li {
           .date{
             color: #808080;
             font-size: 11px;
-            word-wrap: break-word;
+            white-space: nowrap;
           }
         }
-        .btn {
-          font-size: 13px;
+        .version-operations-buttons {
+          text-align: center;
+          .btn {
+            font-size: 13px;
+          }
         }
       }
       .version-box:hover{
@@ -5098,17 +5101,10 @@ ul.inline li {
         }
 
       }
-      .arrow-box {
-        width: 20%;
-        margin-left: 1px;
-        margin-top: 9px;
-        .icon-arrow-right {
-          color: #c3c3c3;
-        }
-      }
+
     }
     .first {
-      width: 13%;
+      width: 14%;
       margin-left: 0px;
       .arrow-box {
         display: none;
@@ -5119,8 +5115,8 @@ ul.inline li {
     }
 
     .icon-chevron-box {
-      margin-top: 12px;
-      width: 5%;
+      margin-top: 10px;
+      width: 4%;
       cursor: pointer;
       .icon-chevron-right,
       .icon-chevron-left{
@@ -5131,6 +5127,15 @@ ul.inline li {
         color: #808080;
       }
     }
+    .icon-chevron-box.disabled {
+      margin-top: 10px;
+      width: 4%;
+      cursor: not-allowed;
+      .icon-chevron-right,
+      .icon-chevron-left{
+        color: #c3c3c3;
+      }
+    }
   }
   .version-info-bar-wrapper {
     position: fixed;
@@ -5208,8 +5213,9 @@ ul.inline li {
       min-width: 200px;
       max-width: 300px;
       line-height: 20px;
+      font-size: 13px;
       margin: 0px;
-      padding: 5px;
+      padding: 8px;
       color: #333333;
       cursor: default;
       .content {
@@ -5217,7 +5223,7 @@ ul.inline li {
         .date{
           color: #808080;
           font-size: 11px;
-          word-wrap: break-word;
+          white-space: nowrap;
         }
         .notes{
           word-wrap: break-word;
@@ -5225,8 +5231,11 @@ ul.inline li {
           white-space: pre-wrap;
         }
       }
-      .btn {
-        font-size: 13px;
+      .version-operations-buttons {
+        text-align: center;
+        .btn {
+          font-size: 13px;
+        }
       }
     }
   }
@@ -7019,4 +7028,4 @@ i.icon-asterisks {
       }
     }
   }
-}
+}

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

@@ -19,13 +19,14 @@
 
 <div id="config_history_flow" {{bindAttr class="view.showCompareVersionBar:two-stories-bar:one-story-bar"}}>
   <div class="version-slider">
-    <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::hide"}} {{action shiftBack target="view"}} data-toggle="arrow-tooltip"
-      {{translateAttr data-original-title="services.service.config.configHistory.leftArrow.tooltip"}}><i class="icon-chevron-left icon-3x"></i></div>
+    <div {{bindAttr disabled="view.showLeftArrow"}} {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::disabled"}} {{action shiftBack target="view"}} data-toggle="arrow-tooltip"
+      {{translateAttr data-original-title="services.service.config.configHistory.rightArrow.tooltip"}}><i class="icon-chevron-left icon-3x"></i></div>
+    <div {{bindAttr disabled="view.showRightArrow"}} {{bindAttr class=":icon-chevron-box :pull-left view.showRightArrow::disabled"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip"
+      {{translateAttr data-original-title="services.service.config.configHistory.leftArrow.tooltip"}}><i class="icon-chevron-right icon-3x"></i></div>
     {{#each serviceVersion in view.visibleServiceVersion}}
       {{view view.serviceVersionBox serviceVersionBinding=serviceVersion}}
     {{/each}}
-    <div {{bindAttr class=":icon-chevron-box :pull-right view.showRightArrow::hide"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip"
-      {{translateAttr data-original-title="services.service.config.configHistory.rightArrow.tooltip"}}><i class="icon-chevron-right icon-3x"></i></div>
+
   </div>
   <div class="version-info-bar-wrapper">
     {{#if App.isManager}}
@@ -35,7 +36,7 @@
                   <i class="icon-remove-circle icon-large"></i>
               </div>
               <div class="label-wrapper span8"
-                   data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.notes"}}>
+                   data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.fullNotes"}}>
                   {{t services.service.config.configHistory.comparing}}
                   <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span>
                   ...
@@ -70,10 +71,9 @@
                                 <div class="pull-right"><i class="icon-caret-right"></i></div>
                             </div>
                             <ul class="dropdown-menu version-info-operations">
-                                <div class="content"> <strong>{{serviceVersion.displayName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
-                                    <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
-                                    <div class="date">{{serviceVersion.createdDate}}</div>
-                                    <div class="notes">{{serviceVersion.notes}}</div>
+                                <div class="content"><span class="label label-info">{{serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{serviceVersion.configGroupName}}</strong></span>
+                                    <div class="date"><strong>{{serviceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{serviceVersion.createdDate}}</strong></div>
+                                    <div class="notes">{{{serviceVersion.fullNotes}}}</div>
                                 </div>
                                 <div class="version-operations-buttons">
                                     <button {{bindAttr disabled="serviceVersion.disabledActionAttr.view" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.view"}} {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
@@ -94,7 +94,7 @@
                   </ul>
               </div>
             {{/if}}
-              <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.notes"}}>
+              <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.fullNotes"}}>
                   <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span>
                 {{#if view.displayedServiceVersion.isCurrent}}
                     <span class="label label-success">{{t common.current}}</span>

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

@@ -17,7 +17,7 @@
 }}
 
 <div {{bindAttr class=":flow-element :pull-left serviceVersion.first:first"}}>
-  <div class="arrow-box pull-left"><i class="icon-arrow-right icon-3x"></i></div>
+  <div class="arrow-box pull-left"></div>
   <div class="version-box">
     <div {{bindAttr class=":version-info :box :pull-right serviceVersion.isDisplayed:displayed serviceVersion.isDisabled:grayedOut"}} {{action switchVersion serviceVersion target="view.parentView"}}>
       <div class="top-label">
@@ -27,19 +27,18 @@
       <div class="content">{{serviceVersion.timeSinceCreated}}</div>
       {{#if serviceVersion.isCurrent}}
         <div class="current-label">
-                <span class="label label-success">
-                  {{t common.current}}
-                  <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i>
-                </span>
+          <span class="label label-success">
+            {{t common.current}}
+            <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i>
+          </span>
         </div>
       {{/if}}
     </div>
 
     <div class="version-popover">
-      <div class="content"> <strong>{{serviceVersion.displayName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
-        <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
-        <div class="date">{{serviceVersion.createdDate}}</div>
-        <div class="notes">{{serviceVersion.notes}}</div>
+      <div class="content"><span class="label label-info">{{serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{serviceVersion.configGroupName}}</strong></span>
+        <div class="date"><strong>{{serviceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{serviceVersion.createdDate}}</strong></div>
+        <div class="notes">{{{serviceVersion.fullNotes}}}</div>
       </div>
       <div class="version-operations-buttons">
         <button {{bindAttr disabled="serviceVersion.disabledActionAttr.view" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.view"}} {{action switchVersion serviceVersion target="view.parentView"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>

ambari-web/app/templates/main/dashboard/config_history.hbs

@@ -60,14 +60,14 @@
             <td class="notes">
               {{#if item.moreNotesExists}}
                 {{#if view.showLessNotes}}
-                  {{item.briefNotes}}
+                  {{{item.briefNotes}}}
                   <a {{action toggleShowLessStatus target="view"}} class="show-more-button">>> More</a>
                 {{else}}
-                  {{item.notes}}
+                  {{{item.fullNotes}}}
                   <a {{action toggleShowLessStatus target="view"}} class="show-more-button"><< Less</a>
                 {{/if}}
               {{else}}
-                {{item.briefNotes}}
+                {{{item.briefNotes}}}
               {{/if}}
             </td>
           {{/view}}

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

@@ -27,7 +27,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
   startIndex: 0,
   showLeftArrow: false,
   showRightArrow: false,
-  VERSIONS_IN_FLOW: 5,
+  VERSIONS_IN_FLOW: 6,
   VERSIONS_IN_DROPDOWN: 6,
   /**
    * flag identify whether to show all versions or short list of them
@@ -97,7 +97,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
     });
 
     return serviceVersions.sort(function (a, b) {
-      return Em.get(a, 'createTime') - Em.get(b, 'createTime');
+      return Em.get(b, 'createTime') - Em.get(a, 'createTime');
     });
   }.property('serviceName', 'controller.selectedConfigGroup.name'),
 
@@ -142,11 +142,6 @@ App.ConfigHistoryFlowView = Em.View.extend({
   },
 
   didInsertElement: function () {
-    $('.version-box').hoverIntent(function() {
-      $(this).find('.version-popover').delay(800).fadeIn(400);
-    }, function() {
-      $(this).find('.version-popover').hide();
-    });
     App.tooltip(this.$('[data-toggle=tooltip]'),{
       placement: 'bottom'
     });
@@ -217,7 +212,6 @@ App.ConfigHistoryFlowView = Em.View.extend({
         serviceVersions.forEach(function (serviceVersion, index) {
           // find current in default group
           if (serviceVersion.get('isCurrent') && serviceVersion.get('groupName') == Em.I18n.t('dashboard.configHistory.table.configGroup.default')){
-
             serviceVersion.set('isDisplayed', true);
             currentIndex = index;
           }
@@ -228,7 +222,6 @@ App.ConfigHistoryFlowView = Em.View.extend({
           // find current in selected group
           if (serviceVersion.get('isCurrent') && serviceVersion.get('groupName') == selectedGroupName){
             serviceVersion.set('isDisplayed', true);
-
             currentIndex = index;
           }
         });
@@ -238,7 +231,6 @@ App.ConfigHistoryFlowView = Em.View.extend({
             // find current in default group
             if (serviceVersion.get('isCurrent') && serviceVersion.get('groupName') == Em.I18n.t('dashboard.configHistory.table.configGroup.default')){
               serviceVersion.set('isDisplayed', true);
-
               currentIndex = index;
             }
           });
@@ -297,7 +289,6 @@ App.ConfigHistoryFlowView = Em.View.extend({
    */
   adjustFlowView: function () {
     var startIndex = this.get('startIndex');
-
     this.get('serviceVersions').forEach(function (serviceVersion, index) {
       serviceVersion.set('first', (index === startIndex));
     });
@@ -461,16 +452,18 @@ App.ConfigHistoryFlowView = Em.View.extend({
     });
   },
   /**
-   * move back to the previous service version
+   * move back to the later service version
    */
   shiftBack: function () {
+    if (!this.get('showLeftArrow')) return;
     this.decrementProperty('startIndex');
     this.adjustFlowView();
   },
   /**
-   * move forward to the next service version
+   * move forward to the previous service version
    */
   shiftForward: function () {
+    if (!this.get('showRightArrow')) return;
     this.incrementProperty('startIndex');
     this.adjustFlowView();
   },