AMBARI-5843. Clicking on app in Slider Apps table should show the details page (alexantonenko)

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

@@ -19,7 +19,7 @@
 'use strict';
 
 module.exports = App.Router.map(function () {
-  this.resource("slider_apps", { path: "/slider" }, function () {
+  this.resource("slider_apps", { path: "/" }, function () {
     this.resource('createAppWizard', function(){
       this.route('step1');
       this.route('step2');
@@ -27,5 +27,6 @@ module.exports = App.Router.map(function () {
       this.route('step4');
     });
   });
+  this.resource('slider_app', { path: 'apps/:slider_app_id' });
 });
 

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

@@ -0,0 +1,20 @@
+/**
+ * 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.SliderAppsController = Ember.ArrayController.extend({
+});

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

@@ -19,6 +19,10 @@
 'use strict';
 
 window.App = require('config/app');
+
+App.ApplicationAdapter = DS.FixtureAdapter.extend({
+  namespace: 'slider-emberjs'
+});
 require('config/router');
 require('config/store');
 require('translations');

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

@@ -56,7 +56,7 @@ App.SliderApp = DS.Model.extend({
   /**
    * @type {App.SliderAppType}
    */
-  appType: DS.belongsTo('App.SliderAppType'),
+  appType: DS.belongsTo('SliderAppType'),
 
   /**
    * @type {string}
@@ -66,17 +66,17 @@ App.SliderApp = DS.Model.extend({
   /**
    * @type {App.SliderAppComponent[]}
    */
-  components: DS.hasMany('App.SliderAppComponent'),
+  components: DS.hasMany('SliderAppComponent'),
 
   /**
    * @type {App.QuickLink[]}
    */
-  quickLinks: DS.hasMany('App.QuickLink'),
+  quickLinks: DS.hasMany('QuickLink'),
 
   /**
    * @type {App.TypedProperty[]}
    */
-  runtimeProperties: DS.hasMany('App.TypedProperty')
+  runtimeProperties: DS.hasMany('TypedProperty')
 });
 
 App.SliderApp.FIXTURES = [
@@ -85,7 +85,7 @@ App.SliderApp.FIXTURES = [
     index: 'indx1',
     yarnId: 'y1',
     name: 'name1',
-    status: 'Running',
+    status: 'FROZEN',
     user: 'u1',
     started: 1400132912,
     ended: 1400152912,

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

@@ -31,7 +31,7 @@ App.SliderAppComponent = DS.Model.extend({
   /**
    * @type {App.Host}
    */
-  host: DS.belongsTo('App.Host')
+  host: DS.belongsTo('Host')
 
 });
 

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('App.SliderAppTypeComponent'),
+  components: DS.hasMany('SliderAppTypeComponent'),
 
   /**
    * @type {object}
@@ -44,7 +44,7 @@ App.SliderAppType.FIXTURES = [
   {
     id: 1,
     index: 'indx1',
-    disaplyName: 'Index 1',
+    displayName: 'Index 1',
     components: [1, 2],
     configs: {
       c1: 'v1',
@@ -54,7 +54,7 @@ App.SliderAppType.FIXTURES = [
   {
     id: 2,
     index: 'indx2',
-    disaplyName: 'Index 2',
+    displayName: 'Index 2',
     components: [2, 4, 5],
     configs: {
       c1: 'v2',
@@ -64,7 +64,7 @@ App.SliderAppType.FIXTURES = [
   {
     id: 3,
     index: 'indx3',
-    disaplyName: 'Index 3',
+    displayName: 'Index 3',
     components: [1, 2, 4],
     configs: {
       c1: 'v3',
@@ -74,7 +74,7 @@ App.SliderAppType.FIXTURES = [
   {
     id: 4,
     index: 'indx4',
-    disaplyName: 'Index 4',
+    displayName: 'Index 4',
     components: [5],
     configs: {
       c1: 'v4',
@@ -84,7 +84,7 @@ App.SliderAppType.FIXTURES = [
   {
     id: 5,
     index: 'indx5',
-    disaplyName: 'Index 5',
+    displayName: 'Index 5',
     components: [1, 2, 3, 4, 5],
     configs: {
       c1: 'v5',

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

@@ -17,14 +17,17 @@
  */
 
 App.IndexRoute = Ember.Route.extend({
+
   redirect: function () {
     this.transitionTo('slider_apps');
   }
+
 });
 
 App.SliderAppsRoute = Ember.Route.extend({
-  setupController: function (controller) {
-    controller.set('model', App.SliderApp.FIXTURES);
+
+  model: function () {
+    return this.store.find('sliderApp');
   },
 
   actions: {
@@ -33,3 +36,19 @@ App.SliderAppsRoute = Ember.Route.extend({
     }
   }
 });
+
+App.SliderAppsIndexRoute = Ember.Route.extend({
+
+  model: function () {
+    return this.modelFor('sliderApps');
+  }
+
+});
+
+App.SliderAppRoute = Ember.Route.extend({
+
+  model: function(params) {
+    return this.store.find('sliderApp', params.slider_app_id);
+  }
+
+});

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

@@ -16,6 +16,10 @@
  * limitations under the License.
  */
 
+a {
+  cursor: pointer;
+}
+
 #slider-apps-table  {
   .create-app {
     margin-top:27px;

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

@@ -16,6 +16,9 @@
 * limitations under the License.
 }}
 
+<div>
+  <h1>{{t slider.apps.title}}</h1>
+</div>
 {{#if App.viewEnabled}}
   {{outlet}}
 {{else}}

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

@@ -28,10 +28,10 @@
             <div class="span3">
               <div class="well">
                 <ul class="nav nav-pills nav-stacked">
-                  <li {{bindAttr class="view.isStep1:active view.isStep1Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 1 target="controller"}}>{{t wizard.step1.name}}</a></li>
-                  <li {{bindAttr class="view.isStep2:active view.isStep2Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 2 target="controller"}}>{{t wizard.step2.name}}</a></li>
-                  <li {{bindAttr class="view.isStep3:active view.isStep3Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 3 target="controller"}}>{{t wizard.step3.name}}</a></li>
-                  <li {{bindAttr class="view.isStep4:active view.isStep4Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 4 target="controller"}}>{{t wizard.step4.name}}</a></li>
+                  <li {{bind-attr class="view.isStep1:active view.isStep1Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 1 target="controller"}}>{{t wizard.step1.name}}</a></li>
+                  <li {{bind-attr class="view.isStep2:active view.isStep2Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 2 target="controller"}}>{{t wizard.step2.name}}</a></li>
+                  <li {{bind-attr class="view.isStep3:active view.isStep3Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 3 target="controller"}}>{{t wizard.step3.name}}</a></li>
+                  <li {{bind-attr class="view.isStep4:active view.isStep4Disabled:disabled"}}><a href="javascript:void(null);" {{action gotoStep 4 target="controller"}}>{{t wizard.step4.name}}</a></li>
                 </ul>
               </div>
             </div>

contrib/views/slider/src/main/resources/ui/app/templates/slider_app.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.
+}}
+
+{{#link-to 'slider_apps'}}
+  {{t slider.apps.title}}
+{{/link-to}}
+  →
+{{model.name}}
+

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

@@ -18,9 +18,6 @@
 
 <div id="slider-apps-table">
   <div class="box-header row">
-    <div class="pull-left">
-      <h1>{{t slider.apps.title}}</h1>
-    </div>
     <div class="pull-right create-app">
       <a href="#" class="btn btn-inverse" {{action createApp}}>
         <i class="icon-plus"></i><span>&nbsp;{{t slider.apps.create}}</span>
@@ -51,11 +48,15 @@
       {{#each slider in view.pageContent}}
         {{#view view.SliderView contentBinding="slider"}}
 
-          <td><a href="#">{{slider.name}}</a></td>
+          <td>
+            {{#link-to 'slider_app' slider}}
+              {{slider.name}}
+            {{/link-to}}
+          </td>
 
           <td>{{slider.status}}</td>
 
-          <td>{{slider.appType}}</td>
+          <td>{{slider.appType.displayName}}</td>
 
           <td>{{slider.user}}</td>
 

contrib/views/slider/src/main/resources/ui/app/views/common/sort_view.js

@@ -168,7 +168,7 @@ var wrapperView = Em.View.extend({
  * @type {*}
  */
 var fieldView = Em.View.extend({
-  template:Em.Handlebars.compile('<span {{bindAttr class="view.status :column-name"}}>{{view.displayName}}</span>'),
+  template:Em.Handlebars.compile('<span {{bind-attr class="view.status :column-name"}}>{{view.displayName}}</span>'),
   classNameBindings: ['viewNameClass'],
   tagName: 'th',
   name: null,

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

@@ -0,0 +1,21 @@
+/**
+ * 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.SliderAppView = Ember.View.extend({
+
+});