AMBARI-5375 Views: Dynamic Views menu (query views from server). (ababiichuk)

ambari-web/app/controllers.js

@@ -117,7 +117,7 @@ require('controllers/main/mirroring/edit_dataset_controller');
 require('controllers/main/mirroring/datasets_controller');
 require('controllers/main/mirroring/jobs_controller');
 require('controllers/main/mirroring/manage_clusters_controller');
-require('controllers/main/views');
+require('controllers/main/views_controller');
 require('controllers/wizard/slave_component_groups_controller');
 require('controllers/wizard/step0_controller');
 require('controllers/wizard/step1_controller');

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

@@ -24,6 +24,7 @@ App.ClusterController = Em.Controller.extend({
   isLoaded:false,
   ambariProperties: null,
   ambariVersion: null,
+  ambariViews: [],
   clusterDataLoadedPercent: 'width:0', // 0 to 1
   /**
    * Whether we need to update statuses automatically or not
@@ -279,6 +280,7 @@ App.ClusterController = Em.Controller.extend({
   loadClusterData:function () {
     var self = this;
     this.loadAmbariProperties();
+    this.loadAmbariViews();
     if (!this.get('clusterName')) {
       return;
     }
@@ -382,6 +384,40 @@ App.ClusterController = Em.Controller.extend({
     }, callback)
   },
 
+  loadAmbariViews: function() {
+    App.ajax.send({
+      name: 'views.info',
+      sender: this,
+      success: 'loadAmbariViewsSuccess'
+    });
+  },
+
+  loadAmbariViewsSuccess: function(data) {
+    this.set('ambariViews',[]);
+    data.items.forEach(function(item){
+      App.ajax.send({
+        name: 'views.instances',
+        data: {
+          viewName: item.ViewInfo.view_name
+        },
+        sender: this,
+        success: 'loadViewInstancesSuccess'
+      });
+    }, this)
+  },
+
+  loadViewInstancesSuccess: function(data) {
+    data.instances.forEach(function(instance){
+      var view = Em.Object.create({
+        label: data.ViewInfo.label,
+        viewName: instance.ViewInstanceInfo.view_name,
+        instanceName: instance.ViewInstanceInfo.instance_name,
+        href: "/views/" + instance.ViewInstanceInfo.view_name + "/" + instance.ViewInstanceInfo.instance_name
+      });
+      this.get('ambariViews').push(view);
+    }, this);
+  },
+
   loadAmbariProperties: function() {
     App.ajax.send({
       name: 'ambari.service',

ambari-web/app/controllers/main/views.js → ambari-web/app/controllers/main/views_controller.js

@@ -19,5 +19,14 @@
 var App = require('app');
 
 App.MainViewsController = Em.Controller.extend({
-  name:'mainViewsController'
+  name:'mainViewsController',
+
+  selectedView: null,
+
+  setView: function(event) {
+    if(event.context){
+      this.set('selectedView', event.context);
+      App.router.transitionTo('views');
+    }
+  }
 })

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

@@ -15,17 +15,25 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
-<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}}
-  <!--{{#if view.hostDetailsOperationsCount}}-->
-    <!--<span class="label operations-count" {{action "showBackgroundOperationsPopup" target="App.router.mainHostDetailsController"}}>-->
-      <!--{{view.hostDetailsOperationsCount}}-->
-    <!--</span>-->
-  <!--{{/if}}-->
-</a>
+{{#if view.content.isView}}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{view.content.label}}<b class="caret pull-right"></b></a>
+    <ul class="dropdown-menu pull-right">
+      {{#each v in view.content.views}}
+          <li><a href="#" class="align-right" {{action "setView" v target="App.router.mainViewsController"}}>{{v.label}}</a></li>
+      {{/each}}
+    </ul>
+{{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}}
+        <!--{{#if view.hostDetailsOperationsCount}}-->
+        <!--<span class="label operations-count" {{action "showBackgroundOperationsPopup" target="App.router.mainHostDetailsController"}}>-->
+        <!--{{view.hostDetailsOperationsCount}}-->
+        <!--</span>-->
+        <!--{{/if}}-->
+    </a>
+{{/if}}

ambari-web/app/utils/ajax.js

@@ -1756,6 +1756,14 @@ var urls = {
     'real': '/proxy?url=http://{historyServerHostName}:{ahsWebPort}/ws/v1/timeline/TEZ_VERTEX_ID/{tezDagVertexId}?fields=otherinfo',
     'mock': '/data/jobs/tezDagVertex.json',
     'apiPrefix': ''
+  },
+  'views.info': {
+    'real': '/views',
+    'mock':''
+  },
+  'views.instances': {
+    'real': '/views/{viewName}',
+    'mock':''
   }
 };
 /**

ambari-web/app/views.js

@@ -236,7 +236,7 @@ require('views/main/mirroring/datasets_view');
 require('views/main/mirroring/jobs_view');
 require('views/main/mirroring/manage_clusters_view');
 
-require('views/main/views');
+require('views/main/views_view');
 
 require('views/installer');
 require('views/wizard/controls_view');

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

@@ -25,6 +25,11 @@ var App = require('app');
 App.MainMenuView = Em.CollectionView.extend({
   tagName:'ul',
   classNames:['nav'],
+
+  views: function() {
+    return App.router.get('clusterController.ambariViews');
+  }.property('App.ClusterController.ambariViews'),
+
   content:function(){
     var result = [
       { label:Em.I18n.t('menu.item.dashboard'), routing:'dashboard', active:'active'},
@@ -49,7 +54,7 @@ App.MainMenuView = Em.CollectionView.extend({
     }
 
     if (App.supports.views) {
-      result.push({ label:Em.I18n.t('menu.item.views'), routing:'views'});
+      result.push({ label:Em.I18n.t('menu.item.views'), routing:'views', isView:true, views: this.get('views')});
     }
     return result;
   }.property(),

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

@@ -29,16 +29,6 @@ App.MainViewsView = Em.View.extend({
   seamless: "seamless",
 
   src: function() {
-    return window.location.origin + this.get('views')[1].link;
-  }.property("views"),
-
-  views: [{
-      name: "filebrowser",
-      link: "/views/FILE_BROWSER/FILEBROWSER_1/#/?path=/"
-    },
-    {
-      name: "pig",
-      link: "/views/PIG/PIG_1/"
-  }]
-
+    return window.location.origin + this.get('controller.selectedView.href');
+  }.property('controller.selectedView')
 });