AMBARI-6144. Views: create a main landing page. (xiwang)

ambari-web/app/controllers/global/cluster_controller.js

@@ -349,30 +349,33 @@ App.ClusterController = Em.Controller.extend({
   },
 
   loadAmbariViewsSuccess: function (data) {
-    this.set('ambariViews', []);
-    data.items.forEach(function (item) {
+    if (data.items.length) {
       App.ajax.send({
         name: 'views.instances',
-        data: {
-          viewName: item.ViewInfo.view_name
-        },
         sender: this,
         success: 'loadViewInstancesSuccess'
       });
-    }, this)
+    }
   },
 
   loadViewInstancesSuccess: function (data) {
-    data.versions.forEach(function (version) {
-      version.instances.forEach(function (instance) {
-        var view = Em.Object.create({
-          label: instance.ViewInstanceInfo.label || instance.ViewInstanceInfo.instance_name,
-          viewName: instance.ViewInstanceInfo.view_name,
-          instanceName: instance.ViewInstanceInfo.instance_name,
-          version: version.ViewVersionInfo.version,
-          href: "/views/" + instance.ViewInstanceInfo.view_name + "/" + version.ViewVersionInfo.version + "/" + instance.ViewInstanceInfo.instance_name
-        });
-        this.get('ambariViews').pushObject(view);
+    this.set('ambariViews', []);
+    var self = this;
+    data.items.forEach(function (view) {
+      view.versions.forEach(function (version) {
+        version.instances.forEach(function (instance) {
+          var current_instance = Em.Object.create({
+            iconPath: instance.ViewInstanceInfo.icon_path || "/img/ambari-view-default.png",
+            label: instance.ViewInstanceInfo.label || version.ViewVersionInfo.label || instance.ViewInstanceInfo.view_name,
+            visible: instance.ViewInstanceInfo.visible || false,
+            version: instance.ViewInstanceInfo.version,
+            description: instance.ViewInstanceInfo.description || Em.I18n.t('views.main.instance.noDescription'),
+            viewName: instance.ViewInstanceInfo.view_name,
+            instanceName: instance.ViewInstanceInfo.instance_name,
+            href: instance.ViewInstanceInfo.context_path
+          });
+          self.get('ambariViews').pushObject(current_instance);
+        }, this);
       }, this);
     }, this);
   },

ambari-web/app/messages.js

@@ -2084,6 +2084,10 @@ Em.I18n.translations = {
   'jobs.hive.tez.edge.broadcast':'Broadcast',
   'jobs.hive.tez.edge.scatter_gather':'Shuffle',
 
+  'views.main.yourViews': 'Your Views',
+  'views.main.noViews': 'No views',
+  'views.main.instance.noDescription': 'No description',
+
   'number.validate.empty': 'cannot be empty',
   'number.validate.notValidNumber': 'not a valid number',
   'number.validate.lessThanMinumum': 'value less than {0}',

ambari-web/app/routes/main.js

@@ -66,26 +66,48 @@ module.exports = Em.Route.extend({
     router.get('applicationController').connectOutlet('main');
   },
 
-  test: Em.Route.extend({
-    route: '/test',
-    connectOutlets: function (router, context) {
-      router.get('mainController').connectOutlet('mainTest');
-    }
-  }),
 
   views: Em.Route.extend({
     route: '/views',
     connectOutlets: function (router, context) {
       router.get('mainController').connectOutlet('mainViews');
     },
-    viewDetails: Em.Route.extend({
-      route : '/:viewName/:version/:instanceName',
-      connectOutlets :  function (router, context) {
+    index: Em.Route.extend({
+      route: '/',
+      enter: function (router) {
+        Em.run.next(function () {
+          router.transitionTo('allViews');
+        });
+      }
+    }),
+    allViews: Em.Route.extend({
+      route: '/',
+      connectOutlets: function (router, context) {
         router.get('mainController').connectOutlet('mainViews');
       }
+    }),
+    viewDetails: Em.Route.extend({
+      route: '/:viewName/:version/:instanceName',
+      connectOutlets: function (router, view) {
+        router.get('mainController').connectOutlet('mainViewsDetails');
+      },
+      index: Em.Route.extend({
+        route: '/',
+        connectOutlets: function (router, context) {
+          router.get('mainController').connectOutlet('mainViewsDetails');
+        }
+      })
     })
   }),
 
+
+  test: Em.Route.extend({
+    route: '/test',
+    connectOutlets: function (router, context) {
+      router.get('mainController').connectOutlet('mainTest');
+    }
+  }),
+
   dashboard: Em.Route.extend({
     route: '/dashboard',
     connectOutlets: function (router, context) {

ambari-web/app/styles/application.less

@@ -6411,6 +6411,36 @@ i.icon-asterisks {
   }
 }
 
+#views {
+  table.views-table {
+    td.icon {
+      width: 6%;
+      padding: 13px 5px 5px 20px;
+      .view-icon-image {
+        img {
+          height: 32px;
+        }
+      }
+    }
+    td.label-version-description {
+      padding-top: 10px;
+      .view-label-text {
+        display: inline;
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .view-version-text,
+      .view-description-text {
+        font-size: 14px;
+        display: inline;
+        color: #808080;
+      }
+    }
+  }
+  .no-views-text {
+    padding-left: 20px;
+  }
+}
 .views_sizes {
   width:100%;
   min-height:600px;

ambari-web/app/templates/main/menu_item.hbs

@@ -16,20 +16,15 @@
 * limitations under the License.
 }}
 
-{{#if view.content.isView}}
-  <a href="javascript:void(null);">
-    {{{unbound view.content.label}}}
-  </a>
-{{else}}
-  <a href="#/main/{{unbound view.content.routing}}">
-    {{{unbound view.content.label}}}
-    {{#if view.alertsCount}}
-      <span class="label label-important alerts-count">
-        {{view.alertsCount}}
-      </span>
-    {{/if}}
-  </a>
-{{/if}}
+
+<a href="#/main/{{unbound view.content.routing}}">
+  {{{unbound view.content.label}}}
+  {{#if view.alertsCount}}
+    <span class="label label-important alerts-count">
+      {{view.alertsCount}}
+    </span>
+  {{/if}}
+</a>
 
 <!--dropdown menu for the items had dropdowns-->
 {{#if view.isServicesItem}}

ambari-web/app/templates/main/views.hbs

@@ -0,0 +1,43 @@
+{{!
+* 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="views">
+  <h4>{{t views.main.yourViews}}</h4>
+  {{#if view.views.length}}
+    <table class="table views-table">
+      <tbody>
+        {{#each instance in view.views}}
+          {{#if instance.visible}}
+            <tr {{action "setView" instance target="controller"}}>
+              <td class="icon">
+                <a class="view-icon-image" target="_blank"><img {{bindAttr src="instance.iconPath"}}></a>
+              </td>
+              <td class="label-version-description">
+                <p class="view-label-text">{{instance.label}}</p>
+                <p class="view-version-text"> &nbsp;&nbsp;({{instance.version}})</p> <br />
+                <p class="view-description-text">{{instance.description}}</p>
+              </td>
+            </tr>
+          {{/if}}
+        {{/each}}
+      </tbody>
+    </table>
+  {{else}}
+    <div class="muted no-views-text">{{t views.main.noViews}}</div>
+  {{/if}}
+</div>

ambari-web/app/utils/ajax/ajax.js

@@ -2081,11 +2081,10 @@ var urls = {
     'mock':''
   },
   /**
-   * Get all instances of {viewName} across versions
-   * @param {String} viewName
+   * Get all instances of all views across versions
    */
   'views.instances': {
-    'real': '/views/{viewName}?fields=versions/instances',
+    'real': '/views?fields=versions/instances/ViewInstanceInfo,versions/ViewVersionInfo/label',
     'mock':''
   },
   'host.host_component.flume.metrics': {

ambari-web/app/views.js

@@ -39,6 +39,7 @@ require('views/login');
 require('views/main');
 require('views/main/menu');
 require('views/main/charts');
+require('views/main/views/details');
 require('views/main/host');
 require('views/main/host/hosts_table_menu_view');
 require('views/main/host/details');

ambari-web/app/views/main/views/details.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+App.MainViewsDetailsView = Em.View.extend({
+
+  name: "mainViewsDetailsView",
+
+  tagName: "iframe",
+  classNames: ["views_sizes"],
+  attributeBindings: ['src','seamless'],
+  seamless: "seamless",
+
+  src: function() {
+    return window.location.origin + App.router.get('mainViewsController.selectedView.href');
+  }.property('App.MainViewsController.selectedView')
+
+});

ambari-web/app/views/main/views_view.js

@@ -20,15 +20,14 @@ var App = require('app');
 
 App.MainViewsView = Em.View.extend({
 
-  tagName: "iframe",
+  name: "mainViewsView",
+  templateName: require('templates/main/views'),
+  classNames: [""],
 
-  classNames: ["views_sizes"],
+  views: function() {
+    return App.router.get('clusterController.ambariViews');
+  }.property('App.ClusterController.ambariViews'),
 
-  attributeBindings: ['src','seamless'],
+  selectedViewBinding: 'controller.selectedView'
 
-  seamless: "seamless",
-
-  src: function() {
-    return window.location.origin + this.get('controller.selectedView.href');
-  }.property('controller.selectedView')
 });