AMBARI-17636 Service Configs page: can't see all config versions in dropdown (Vivek Ratnavel Subramanian via zhewang)

ambari-web/app/styles/config_history_flow.less

@@ -239,12 +239,33 @@
         padding: 5px;
       }
     }
+
+    ul#dropdown_menu {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+      float: left;
+      min-width: 400px;
+      height: 300px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 5px 0;
+      margin: 5px 0;
+    }
+
+    #dropdown_content {
+      height: 300px;
+      overflow: hidden;
+      overflow-y: scroll;
+    }
+
     .dropdown-menu {
       min-width: 400px;
       margin-top: 4px !important;
       font-size: 13px;
       li {
-        line-height: 30px;
+        line-height: 12px;
         .icon-caret-right {
           font-size: 18px;
           margin-right: 20px;
@@ -305,6 +326,33 @@
       }
     }
   }
+
+  #config_version_popup {
+    z-index: 1001;
+    line-height: 20px;
+    padding: 8px;
+    font-size: 13px;
+    .content {
+      padding: 1px 5px 15px 5px;
+      .group {
+        text-align: right;
+        margin-top: -20px;
+      }
+      .date{
+        color: #808080;
+        font-size: 11px;
+        white-space: nowrap;
+      }
+      .notes{
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        white-space: pre-wrap;
+      }
+    }
+    .version-operations-buttons .btn {
+      font-size: 13px;
+    }
+  }
   .stack {
     padding: 1px 10px;
     font-size: 11px;
@@ -362,3 +410,23 @@
     cursor: pointer;
   }
 }
+
+.version-in-dropdown [class*="span"] {
+  min-height: 24px;
+}
+
+// Firefox specific styles
+body:not(:-moz-handler-blocked) {
+  #config_history_flow {
+    .version-info-bar {
+      .dropdown-menu {
+        li {
+          line-height: 30px;
+        }
+      }
+    }
+  }
+  .version-in-dropdown [class*="span"] {
+    min-height: 30px;
+  }
+}

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

@@ -0,0 +1,24 @@
+{{!
+* 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 version-in-dropdown" {{action doAction view.serviceVersion view.actionTypes.SWITCH target="view"}}>
+  <div class="span2">{{view.serviceVersion.versionText}}</div>
+  <div class="span6">{{view.serviceVersion.createdDate}}</div>
+  <div class="span3">{{view.serviceVersion.authorFormatted}}</div>
+  <div class="pull-right"><i class="icon-caret-right"></i></div>
+</div>

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

@@ -31,97 +31,94 @@
   <div class="version-info-bar-wrapper">
     {{#isAuthorized "SERVICE.COMPARE_CONFIGS"}}
       <div {{bindAttr class="view.showCompareVersionBar::hidden :version-info-bar"}}>
-          <div class="row-fluid">
-              <div class="span1 remove-compare-bar" {{action removeCompareVersionBar target="view"}} data-toggle="arrow-tooltip" {{translateAttr data-original-title="services.service.config.configHistory.dismissIcon.tooltip"}}>
-                  <i class="icon-remove-circle icon-large"></i>
-              </div>
-              <div class="label-wrapper span8"
-                   data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.fullNotes"}}>
-                  {{t services.service.config.configHistory.comparing}}
-                  <span class="label label-info current-version-label">{{view.displayedServiceVersion.versionText}}</span>
-                  ...
-                  <span class="label label-info compare-version-label">{{view.compareServiceVersion.versionText}}</span>
-                {{#if view.compareServiceVersion.isCurrent}}
-                    <span class="label label-success">{{t common.current}}</span>
-                {{/if}}
-                  <strong>{{view.compareServiceVersion.authorFormatted}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}
-                  &nbsp;<strong>{{view.compareServiceVersion.createdDate}}</strong>
-              </div>
-            {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
-              <div class="pull-right operations-button">
-                  <button class="btn btn-success"  {{action doAction view.serviceVersionsReferences.compare view.actionTypes.REVERT target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.compareServiceVersion.canBeMadeCurrent::hidden"}}>{{view.compareServiceVersion.makeCurrentButtonText}}</button>
-              </div>
-            {{/isAuthorized}}
-          </div>
-      </div>
-    {{/isAuthorized}}
-      <div class="version-info-bar">
         <div class="row-fluid">
-            <div class="btn-group pull-left">
-              <button id="toggle-dropdown-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>
-              </button>
-              <ul class="dropdown-menu">
-                {{#each serviceVersion in view.dropDownList}}
-                  <li {{bindAttr class=":pointer :dropdown-submenu serviceVersion.isDisplayed:not-allowed"}} {{action computePosition on="mouseEnter" target="view" }}>
-                    <div class="row-fluid version-in-dropdown " {{action doAction serviceVersion view.actionTypes.SWITCH target="view"}}>
-                      <div class="span2">{{serviceVersion.versionText}}</div>
-                      <div class="span6">{{serviceVersion.createdDate}}</div>
-                      <div class="span3">{{serviceVersion.authorFormatted}}</div>
-                      <div class="pull-right"><i class="icon-caret-right"></i></div>
-                    </div>
-                    <ul class="dropdown-menu version-info-operations">
-                      <div class="content">
-                        <span class="label label-info">{{serviceVersion.versionText}}</span>
-                        <span class="stack">{{serviceVersion.stackVersion}}</span>
-                        <div class="group"><strong>{{serviceVersion.configGroupName}}</strong></div>
-                        <div class="date"><strong>{{serviceVersion.authorFormatted}}</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 doAction serviceVersion view.actionTypes.SWITCH target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
-                        {{#isAuthorized "SERVICE.COMPARE_CONFIGS"}}
-                          <button {{bindAttr disabled="serviceVersion.disabledActionAttr.compare" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.compare"}} {{action doAction serviceVersion view.actionTypes.COMPARE target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
-                        {{/isAuthorized}}
-                        {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
-                          <button {{bindAttr disabled="serviceVersion.disabledActionAttr.revert" class=":btn serviceVersion.isCurrent:not-allowed-cursor serviceVersion.isCompatible::hidden" title="serviceVersion.disabledActionMessages.revert"}} {{action doAction serviceVersion view.actionTypes.REVERT target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
-                        {{/isAuthorized}}
-                      </div>
-                    </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.displayName}}
-                            &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
-                        </a>
-                    </li>
-                {{/unless}}
-              </ul>
-            </div>
-            <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.fullNotes"}}>
-              {{#if view.displayedServiceVersion.versionText}}
-                <span class="label label-info current-version-label">{{view.displayedServiceVersion.versionText}}</span>
-              {{/if}}
-              {{#if view.displayedServiceVersion.isCurrent}}
-                  <span class="label-current label label-success icon-ok" data-toggle="tooltip" {{translateAttr title="common.current"}}></span>
-              {{/if}}
-              {{#if view.displayedServiceVersion.author}}
-                <strong>{{view.displayedServiceVersion.authorFormatted}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
-              {{/if}}
-            </div>
+          <div class="span1 remove-compare-bar" {{action removeCompareVersionBar target="view"}} data-toggle="arrow-tooltip" {{translateAttr data-original-title="services.service.config.configHistory.dismissIcon.tooltip"}}>
+            <i class="icon-remove-circle icon-large"></i>
+          </div>
+          <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.fullNotes"}}>
+            {{t services.service.config.configHistory.comparing}}
+            <span class="label label-info current-version-label">{{view.displayedServiceVersion.versionText}}</span>
+            ...
+            <span class="label label-info compare-version-label">{{view.compareServiceVersion.versionText}}</span>
+            {{#if view.compareServiceVersion.isCurrent}}
+              <span class="label label-success">{{t common.current}}</span>
+            {{/if}}
+              <strong>{{view.compareServiceVersion.authorFormatted}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}
+              &nbsp;<strong>{{view.compareServiceVersion.createdDate}}</strong>
+          </div>
           {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
             <div class="pull-right operations-button">
-                <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
-                    <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.isDiscardDisabled"}}>{{t common.discard}}</button>
-                    <button class="btn btn-success" {{action save target="view"}} {{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
-                </div>
-                <button class="btn btn-success"  {{action doAction view.serviceVersionsReferences.displayed view.actionTypes.REVERT target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.canBeMadeCurrent::hidden"}}>{{view.displayedServiceVersion.makeCurrentButtonText}}</button>
+              <button class="btn btn-success"  {{action doAction view.serviceVersionsReferences.compare view.actionTypes.REVERT target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.compareServiceVersion.canBeMadeCurrent::hidden"}}>{{view.compareServiceVersion.makeCurrentButtonText}}</button>
             </div>
           {{/isAuthorized}}
         </div>
       </div>
+    {{/isAuthorized}}
+    {{#view App.ConfigHistoryDropdownSubMenuView id="config_version_popup"}}
+      {{#if view.parentView.hoveredServiceVersion}}
+        <div class="content">
+          <span class="label label-info">{{view.parentView.hoveredServiceVersion.versionText}}</span>
+          <span class="stack">{{view.parentView.hoveredServiceVersion.stackVersion}}</span>
+          <div class="group"><strong>{{view.parentView.hoveredServiceVersion.configGroupName}}</strong></div>
+          <div class="date"><strong>{{view.parentView.hoveredServiceVersion.authorFormatted}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.parentView.hoveredServiceVersion.createdDate}}</strong></div>
+          <div class="notes">{{view.parentView.hoveredServiceVersion.fullNotes}}</div>
+        </div>
+        <div class="version-operations-buttons">
+          <button {{bindAttr disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.view" class=":btn view.parentView.hoveredServiceVersion.isDisplayed:not-allowed-cursor" title="view.parentView.hoveredServiceVersion.disabledActionMessages.view"}} {{action doAction view.parentView.hoveredServiceVersion view.parentView.actionTypes.SWITCH target="view.parentView"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
+          {{#isAuthorized "SERVICE.COMPARE_CONFIGS"}}
+            <button {{bindAttr disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.compare" class=":btn view.parentView.hoveredServiceVersion.isDisplayed:not-allowed-cursor" title="view.parentView.hoveredServiceVersion.disabledActionMessages.compare"}} {{action doAction view.parentView.hoveredServiceVersion view.parentView.actionTypes.COMPARE target="view.parentView"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+          {{/isAuthorized}}
+          {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
+            <button {{bindAttr disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.revert" class=":btn view.parentView.hoveredServiceVersion.isCurrent:not-allowed-cursor view.parentView.hoveredServiceVersion.isCompatible::hidden" title="view.parentView.hoveredServiceVersion.disabledActionMessages.revert"}} {{action doAction view.parentView.hoveredServiceVersion view.parentView.actionTypes.REVERT target="view.parentView"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+          {{/isAuthorized}}
+        </div>
+      {{/if}}
+    {{/view}}
+    <div class="version-info-bar">
+      <div class="row-fluid">
+        <div class="btn-group pull-left">
+          <button id="toggle-dropdown-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>
+          </button>
+          <div id="dropdown_content" class="dropdown-menu">
+            <ul id="dropdown_menu">
+              {{#each serviceVersion in view.dropDownList}}
+                {{view App.ConfigHistoryDropdownRowView serviceVersionBinding="serviceVersion"}}
+              {{/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.displayName}}
+                    &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
+                  </a>
+                </li>
+              {{/unless}}
+            </ul>
+          </div>
+        </div>
+        <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.fullNotes"}}>
+          {{#if view.displayedServiceVersion.versionText}}
+            <span class="label label-info current-version-label">{{view.displayedServiceVersion.versionText}}</span>
+          {{/if}}
+          {{#if view.displayedServiceVersion.isCurrent}}
+              <span class="label-current label label-success icon-ok" data-toggle="tooltip" {{translateAttr title="common.current"}}></span>
+          {{/if}}
+          {{#if view.displayedServiceVersion.author}}
+            <strong>{{view.displayedServiceVersion.authorFormatted}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
+          {{/if}}
+        </div>
+        {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
+          <div class="pull-right operations-button">
+            <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
+              <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.isDiscardDisabled"}}>{{t common.discard}}</button>
+              <button class="btn btn-success" {{action save target="view"}} {{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
+            </div>
+            <button class="btn btn-success"  {{action doAction view.serviceVersionsReferences.displayed view.actionTypes.REVERT target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.canBeMadeCurrent::hidden"}}>{{view.displayedServiceVersion.makeCurrentButtonText}}</button>
+          </div>
+        {{/isAuthorized}}
+      </div>
+    </div>
   </div>
 </div>

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

@@ -30,7 +30,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
   leftArrowTooltip: Em.computed.ifThenElse('showLeftArrow', Em.I18n.t('services.service.config.configHistory.leftArrow.tooltip'), null),
   rightArrowTooltip: Em.computed.ifThenElse('showRightArrow', Em.I18n.t('services.service.config.configHistory.rightArrow.tooltip'), null),
   VERSIONS_IN_FLOW: 6,
-  VERSIONS_IN_DROPDOWN: 6,
+  VERSIONS_IN_DROPDOWN: 25,
   /**
    * flag identify whether to show all versions or short list of them
    */
@@ -46,6 +46,19 @@ App.ConfigHistoryFlowView = Em.View.extend({
     REVERT: 'revert'
   },
 
+  /**
+   * serviceVersion object that is currently being hovered in the dropdown menu
+   */
+  hoveredServiceVersion: null,
+  /**
+   * flag to check if sub-menu popup is currently being hovered
+   */
+  displaySubMenuFlag: false,
+  /**
+   * flag to check if any dropdown item is currently hovered by the user
+   */
+  isHovered: false,
+
   /**
    * In reason of absence of properties dynamic values support which passed to an action,
    * used property map to get latest values of properties for action
@@ -151,21 +164,6 @@ App.ConfigHistoryFlowView = Em.View.extend({
     this.set('showFullList', !(this.get('serviceVersions.length') > this.VERSIONS_IN_DROPDOWN));
   },
 
-  computePosition: function(event) {
-    var $el = this.$('.dropdown-menu', event.currentTarget);
-    // remove existing style - in case user scrolls the page
-    $el.removeAttr('style');
-    var elHeight = $el.outerHeight(),
-      parentHeight = $el.parent().outerHeight(),
-      pagePosition = window.innerHeight + window.pageYOffset,
-      elBottomPosition = $el.offset().top + elHeight,
-      shouldShowUp = elBottomPosition > pagePosition ;
-    if (shouldShowUp) {
-      $el.css('margin-top', -(elHeight - parentHeight));
-    }
-    $el = null;
-  },
-
   didInsertElement: function () {
     App.tooltip(this.$('[data-toggle=tooltip]'),{
       placement: 'bottom',
@@ -297,6 +295,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
       self.disableVersions();
       callback();
     });
+    $("#config_version_popup").removeAttr('style');
   },
 
   /**
@@ -304,6 +303,9 @@ App.ConfigHistoryFlowView = Em.View.extend({
    */
   switchVersion: function (event) {
     var version = event.context.get('version');
+    if(this.get('hoveredServiceVersion')) {
+      version = this.get('hoveredServiceVersion.version');
+    }
     var versionIndex = 0;
 
     this.set('compareServiceVersion', null);
@@ -324,8 +326,10 @@ App.ConfigHistoryFlowView = Em.View.extend({
    * add a second version-info-bar for the chosen version
    */
   compare: function (event) {
-    this.set('controller.compareServiceVersion', event.context);
-    this.set('compareServiceVersion', event.context);
+    this.set('controller.compareServiceVersion', this.get('hoveredServiceVersion'));
+    var serviceConfigVersion = this.get('hoveredServiceVersion') || event.context;
+    this.set('compareServiceVersion', serviceConfigVersion);
+
     var controller = this.get('controller');
     controller.get('stepConfigs').clear();
     controller.loadCompareVersionConfigs(controller.get('allConfigs')).done(function() {
@@ -359,7 +363,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
    */
   revert: function (event) {
     var self = this;
-    var serviceConfigVersion = event.context || Em.Object.create({
+    var serviceConfigVersion = this.get('hoveredServiceVersion') || event.context || Em.Object.create({
       version: this.get('displayedServiceVersion.version'),
       serviceName: this.get('displayedServiceVersion.serviceName'),
       notes:''
@@ -555,3 +559,86 @@ App.ConfigsServiceVersionBoxView = Em.View.extend({
     this.$('[data-toggle=arrow-tooltip]').tooltip('destroy');
   }
 });
+
+App.ConfigHistoryDropdownRowView = Em.View.extend({
+
+  templateName: require('templates/common/configs/config_history_dropdown_row'),
+
+  tagName: "li",
+
+  classNameBindings: [':pointer', ':dropdown-submenu', 'isDisplayed:not-allowed'],
+
+  serviceVersion: null,
+
+  isDisplayed: function() {
+    var serviceVersion = this.get('serviceVersion');
+    if(serviceVersion) {
+      return serviceVersion.get('isDisplayed');
+    }
+    return false;
+  }.property('serviceVersion'),
+
+  actionTypesBinding: 'parentView.actionTypes',
+
+  doAction: function(event) {
+    this.get('parentView').doAction(event);
+  },
+
+  eventManager: Ember.Object.create({
+    mouseEnter: function(event, view) {
+      var serviceVersion = view.get('serviceVersion');
+      var version = serviceVersion.get('version');
+      var $el = $('#config_version_popup');
+      var $currentTarget = $(event.currentTarget);
+      var parentView = view.get('parentView');
+      if (!serviceVersion.get("isDisplayed"))  {
+        parentView.set('hoveredServiceVersion', serviceVersion);
+        parentView.set('isHovered', true);
+        var elHeight = $el.outerHeight(),
+          pagePosition = window.innerHeight + window.pageYOffset,
+          elBottomPosition = $currentTarget[0].getBoundingClientRect().top + elHeight,
+          shouldShowUp = elBottomPosition > pagePosition;
+        $el.css({
+          "position": "fixed",
+          "top": $currentTarget[0].getBoundingClientRect().top,
+          "left": $currentTarget[0].getBoundingClientRect().left + 400,
+          "margin-top": -(elHeight/3),
+          "display": "block"
+        });
+        if (shouldShowUp) {
+          $el.css('margin-top', -(elHeight - $currentTarget.outerHeight()));
+        }
+      }
+      $el = null;
+    },
+    mouseLeave: function(event, view) {
+      var parentView = view.get('parentView');
+      parentView.set('isHovered', false);
+      Em.run.later(function() {
+        if(!parentView.get('displaySubMenuFlag') && !parentView.get('isHovered')) {
+          parentView.set('hoveredServiceVersion', null);
+          $('#config_version_popup').removeAttr('style');
+        }
+      }, 200);
+    }
+  })
+});
+
+App.ConfigHistoryDropdownSubMenuView = Em.View.extend({
+
+  tagName: 'ul',
+
+  classNameBindings: [':dropdown-menu', ':version-info-operations'],
+
+  eventManager: Ember.Object.create({
+    mouseEnter: function(event, view) {
+      view.get('parentView').set('displaySubMenuFlag', true);
+    },
+    mouseLeave: function(event, view) {
+      var parentView = view.get('parentView');
+      parentView.set('displaySubMenuFlag', false);
+      parentView.set('hoveredServiceVersion', null);
+      $("#config_version_popup").removeAttr('style');
+    }
+  })
+});