AMBARI-7388 Configs: no hover on SCV when viewing non-current version. (ababiichuk)

ambari-web/app/styles/application.less

@@ -4996,7 +4996,7 @@ ul.inline li {
     margin: 5px 0;
     .flow-element {
       width: 18.5%;
-      height: 100%;
+      height: 58px;
       .version-box {
         position: relative;
         height: 90%;

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

@@ -22,41 +22,7 @@
     <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>
     {{#each serviceVersion in view.visibleServiceVersion}}
-      <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="version-box">
-          <div {{bindAttr class=":version-info :box :pull-right serviceVersion.isDisplayed:displayed serviceVersion.isDisabled:grayedOut"}} {{action switchVersion serviceVersion target="view"}}>
-            <div class="top-label">
-              <span class="label label-info">{{serviceVersion.versionText}}</span>
-              <span class="author pull-right">{{serviceVersion.author}}</span>
-            </div>
-            <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>
-              </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>
-            <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>
-                {{#if App.isManager}}
-                    <button {{bindAttr disabled="serviceVersion.disabledActionAttr.compare" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.compare"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
-                    <button {{bindAttr disabled="serviceVersion.disabledActionAttr.revert" class=":btn serviceVersion.isCurrent:not-allowed-cursor" title="serviceVersion.disabledActionMessages.revert"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
-                {{/if}}
-            </div>
-          </div>
-        </div>
-      </div>
+      {{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>

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

@@ -0,0 +1,53 @@
+{{!
+* 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 {{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="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">
+        <span class="label label-info">{{serviceVersion.versionText}}</span>
+        <span class="author pull-right">{{serviceVersion.author}}</span>
+      </div>
+      <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>
+        </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>
+      <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>
+        {{#if App.isManager}}
+          <button {{bindAttr disabled="serviceVersion.disabledActionAttr.compare" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.compare"}} {{action compare serviceVersion target="view.parentView"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+          <button {{bindAttr disabled="serviceVersion.disabledActionAttr.revert" class=":btn serviceVersion.isCurrent:not-allowed-cursor" title="serviceVersion.disabledActionMessages.revert"}} {{action revert serviceVersion target="view.parentView"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -155,6 +155,28 @@ App.ConfigHistoryFlowView = Em.View.extend({
     });
   },
 
+  serviceVersionBox: Em.View.extend({
+    templateName: require('templates/common/configs/service_version_box'),
+    didInsertElement: function () {
+      $('.version-box').hoverIntent(function() {
+        var self = this;
+        setTimeout(function() {
+          if ($(self).is(':hover')) {
+            $(self).find('.version-popover').fadeIn(200);
+          }
+        }, 700);
+      }, function() {
+        $(this).find('.version-popover').hide();
+      });
+      App.tooltip(this.$('[data-toggle=tooltip]'),{
+        placement: 'bottom'
+      });
+      App.tooltip(this.$('[data-toggle=arrow-tooltip]'),{
+        placement: 'top'
+      });
+    }
+  }),
+
   willInsertElement: function () {
     var serviceVersions = this.get('serviceVersions');
     var startIndex = 0;