AMBARI-5849. Populate Slider App quick links (alexantonenko)

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

@@ -0,0 +1,23 @@
+/**
+ * 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.SliderAppController = Ember.ObjectController.extend({
+  quickLinks: function() {
+    return this.get('content').get('quickLinks');
+  }.property('content.quickLinks')
+});

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

@@ -66,17 +66,17 @@ App.SliderApp = DS.Model.extend({
   /**
    * @type {App.SliderAppComponent[]}
    */
-  components: DS.hasMany('sliderAppComponent'),
+  components: DS.hasMany('sliderAppComponent', {async:true}),
 
   /**
    * @type {App.QuickLink[]}
    */
-  quickLinks: DS.hasMany('quickLink'),
+  quickLinks: DS.hasMany('quickLink', {async:true}),
 
   /**
    * @type {App.TypedProperty[]}
    */
-  runtimeProperties: DS.hasMany('typedProperty')
+  runtimeProperties: DS.hasMany('typedProperty', {async:true})
 });
 
 App.SliderApp.FIXTURES = [
@@ -92,7 +92,7 @@ App.SliderApp.FIXTURES = [
     appType: 1,
     diagnostics: 'd1',
     components: [3, 4, 5],
-    quickLinks: [1, 2],
+    quickLinks: [1, 2, 6],
     runtimeProperties: [1, 2, 3]
   },
   {
@@ -107,7 +107,7 @@ App.SliderApp.FIXTURES = [
     appType: 2,
     diagnostics: 'd2',
     components: [1, 3],
-    quickLinks: [4, 5],
+    quickLinks: [4, 5, 6],
     runtimeProperties: [3, 4]
   },
   {
@@ -122,7 +122,7 @@ App.SliderApp.FIXTURES = [
     appType: 3,
     diagnostics: 'd3',
     components: [1],
-    quickLinks: [1, 2, 4, 5],
+    quickLinks: [1, 2, 4, 5, 6],
     runtimeProperties: [2, 3]
   },
   {
@@ -137,7 +137,7 @@ App.SliderApp.FIXTURES = [
     appType: 4,
     diagnostics: 'd4',
     components: [1, 2, 3, 4, 5],
-    quickLinks: [4],
+    quickLinks: [4, 6],
     runtimeProperties: [1, 2, 3, 4, 5]
   },
   {
@@ -152,7 +152,7 @@ App.SliderApp.FIXTURES = [
     appType: 5,
     diagnostics: 'd5',
     components: [2, 5],
-    quickLinks: [3, 4],
+    quickLinks: [3, 4, 6],
     runtimeProperties: [1, 2, 3]
   }
 ];

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

@@ -31,7 +31,7 @@ App.SliderAppType = DS.Model.extend({
   /**
    * @type {App.SliderAppTypeComponent[]}
    */
-  components: DS.hasMany('sliderAppTypeComponent'),
+  components: DS.hasMany('sliderAppTypeComponent', {async:true}),
 
   /**
    * @type {object}

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

@@ -55,5 +55,10 @@ App.QuickLink.FIXTURES = [
     id: 5,
     label: 'link5',
     url: 'url5'
+  },
+  {
+    id: 6,
+    label: 'YARN application',
+    url: 'http://yarn_application_url'
   }
 ];

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

@@ -18,6 +18,10 @@
 
 App.IndexRoute = Ember.Route.extend({
 
+  model: function () {
+    return this.modelFor('sliderApps');
+  },
+
   redirect: function () {
     this.transitionTo('slider_apps');
   }
@@ -37,14 +41,6 @@ App.SliderAppsRoute = Ember.Route.extend({
   }
 });
 
-App.SliderAppsIndexRoute = Ember.Route.extend({
-
-  model: function () {
-    return this.modelFor('sliderApps');
-  }
-
-});
-
 App.SliderAppRoute = Ember.Route.extend({
 
   model: function(params) {

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

@@ -338,4 +338,44 @@ a {
   .components-table {
     margin-bottom: 30px;
   }
+}
+.app-page {
+  .wrap-tabs {
+    margin-top: 30px;
+  }
+  .quick-links-wrapper {
+    margin-top: -53px;
+    position: relative;
+    left: 278px;
+    .nav-pills.move {
+      float: right;
+      width:135px;
+      &>li {
+        position: absolute;
+      }
+    }
+    .dropdown-submenu {
+      &> a:after {
+        border-left-color: #333;
+      }
+    }
+    .nav li.dropdown.open {
+      .dropdown-toggle{
+        color: #005580;
+        background-color: #eeeeee;
+        border-color: #eeeeee;
+        -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+        -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+      }
+      a:hover .caret {
+        border-top-color: #005580;
+        border-bottom-color: #005580;
+      }
+      .caret {
+        border-top-color: #005580;
+        border-bottom-color: #005580;
+      }
+    }
+  }
 }

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

@@ -15,10 +15,27 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
-{{#link-to 'slider_apps'}}
-  {{t slider.apps.title}}
-{{/link-to}}
-  →
-{{model.name}}
-
+<div class="app-page">
+  <div>
+    {{#link-to 'slider_apps'}}
+      {{t slider.apps.title}}
+    {{/link-to}}
+      &rarr;
+    {{model.name}}
+  </div>
+  <div class="wrap-tabs">
+    <ul class="nav nav-tabs"></ul>
+    <div class="span3 quick-links-wrapper">
+      <ul class="nav nav-pills move">
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{t common.quickLinks}}<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            {{#each quickLink in controller.quickLinks}}
+                <li><a {{bind-attr href="quickLink.url"}} target="_blank">{{quickLink.label}}</a></li>
+            {{/each}}
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

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

@@ -22,7 +22,8 @@ Em.I18n.translations = {
   'common' : {
     'show': "Show",
     'name': "Name",
-    'next': "Next"
+    'next': "Next",
+    'quickLinks': "Quick Links"
   },
   'tableView.filters.all': 'All',
   'tableView.filters.filtered': 'Filtered',