AMBARI-7076 Slider View: Hovering on app in slider apps table should show diagnostics and description.(ababiichuk)

contrib/views/slider/src/main/resources/ui/app/controllers/tooltip_controller.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+App.TooltipBoxController = Bootstrap.TooltipBoxController;

contrib/views/slider/src/main/resources/ui/app/mappers/slider_apps_mapper.js

@@ -153,7 +153,8 @@ App.SliderAppsMapper = App.Mapper.createWithMixins(App.RunPeriodically, {
           started: app.startTime ? (new Date(app.startTime).toUTCString()) : "-",
           ended: app.endTime ? (new Date(app.endTime).toUTCString()) : "-",
           appType: app.type.toUpperCase(),
-          diagnostics: app.diagnostics ? app.diagnostics : "-",
+          diagnostics: app.diagnostics || "-",
+          description: app.description || "-",
           components: componentsId,
           quickLinks: quickLinks,
           configs: configs,

contrib/views/slider/src/main/resources/ui/app/models/slider_app.js

@@ -53,6 +53,11 @@ App.SliderApp = DS.Model.extend({
    */
   appType: DS.belongsTo('sliderAppType'),
 
+  /**
+   * @type {string}
+   */
+
+  description: DS.attr('string'),
   /**
    * @type {string}
    */

contrib/views/slider/src/main/resources/ui/app/routes/main.js

@@ -16,6 +16,18 @@
  * limitations under the License.
  */
 
+App.ApplicationRoute = Ember.Route.extend({
+  renderTemplate: function() {
+    this.render();
+    var controller = this.controllerFor('tooltip-box');
+    this.render("bs-tooltip-box", {
+      outlet: "bs-tooltip-box",
+      controller: controller,
+      into: "application"
+    });
+  }
+});
+
 App.IndexRoute = Ember.Route.extend({
 
   model: function () {

contrib/views/slider/src/main/resources/ui/app/styles/application.less

@@ -20,6 +20,9 @@ html {
   overflow-y: scroll;
 }
 
+.popover {
+  max-width: 800px;
+}
 a {
   cursor: pointer;
 }

contrib/views/slider/src/main/resources/ui/app/templates/application.hbs

@@ -21,6 +21,7 @@
 </div>
 {{#if App.viewEnabled}}
   {{outlet}}
+  {{outlet bs-tooltip-box}}
 {{else}}
   {{#each error in App.viewErrors}}
     <h3>{{error}}</h3>

contrib/views/slider/src/main/resources/ui/app/templates/common/app_tooltip.hbs

@@ -0,0 +1,28 @@
+{{!
+* 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 id="hover-on-app" class="row-fluid">
+    <div class="row">
+        <div class="col-md-4"><b>{{t common.description}}</b></div>
+        <div class="col-md-8"><b>{{t common.diagnostics}}</b></div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">{{formatWordBreak view.content.description devider='.'}}</div>
+        <div class="col-md-8">{{formatWordBreak view.content.diagnostics devider='.'}}</div>
+    </div>
+</div>

contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs

@@ -40,7 +40,7 @@
             </tr>
             <tr>
               <td>{{t common.diagnostics}}</td>
-              <td>{{formatWordBreak controller.model.diagnostics}}</td>
+              <td>{{formatWordBreak controller.model.diagnostics devider="."}}</td>
             </tr>
             {{#each controller.model.jmx}}
               <tr>

contrib/views/slider/src/main/resources/ui/app/templates/slider_apps.hbs

@@ -51,7 +51,7 @@
 
           <td>
             {{#link-to 'slider_app.summary' slider}}
-              {{slider.name}}
+              <span {{bs-bind-popover view.popover}}>{{slider.name}}</span>
             {{/link-to}}
           </td>
 

contrib/views/slider/src/main/resources/ui/app/translations.js

@@ -45,7 +45,8 @@ Em.I18n.translations = {
     'status': 'Status',
     'started': 'Started',
     'finished': 'Finished',
-    'diagnostics': 'Diagnostics'
+    'diagnostics': 'Diagnostics',
+    'description': 'Description'
   },
 
   'popup.confirmation.commonHeader': 'Confirmation',

contrib/views/slider/src/main/resources/ui/app/views/slider_apps_view.js

@@ -84,8 +84,18 @@ App.SliderAppsView = App.TableView.extend({
   }),
 
   SliderView: Em.View.extend({
-    content:null,
-    tagName: 'tr'
+    content: null,
+    tagName: 'tr',
+    popover: function(){
+      var template = this.createChildView(App.SliderTooltip, {
+        content: this.get('content')
+      });
+      return Ember.Object.create({
+        trigger: 'hover',
+        template: template.renderToBuffer().string(),
+        placement: "right"
+      });
+    }.property('content')
   }),
 
   /**
@@ -165,3 +175,7 @@ App.SliderAppsView = App.TableView.extend({
   }.property()
 
 });
+
+App.SliderTooltip = Em.View.extend({
+  templateName: "common/app_tooltip"
+});

contrib/views/slider/src/main/resources/ui/config.js

@@ -45,6 +45,7 @@ exports.config = {
           'vendor/scripts/common/bs-basic.min.js',
           'vendor/scripts/common/bs-button.min.js',
           'vendor/scripts/common/bs-modal.min.js',
+          'vendor/scripts/common/bs-popover.min.js',
           'vendor/scripts/common/ember-i18n-1.4.1.js',
           'vendor/scripts/common/bootstrap.js'
         ]
@@ -97,6 +98,7 @@ exports.config = {
               'vendor/scripts/common/bs-basic.min.js',
               'vendor/scripts/common/bs-button.min.js',
               'vendor/scripts/common/bs-modal.min.js',
+              'vendor/scripts/common/bs-popover.min.js',
               'vendor/scripts/common/ember-i18n-1.4.1.js',
               'vendor/scripts/common/bootstrap.js'
             ]