AMBARI-20834. LogSearch: LogSearch UI support for viewing data from multiple clusters (akovalenko)

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/audit/AuditTabLayoutView.js

@@ -18,6 +18,7 @@
 
 define(['require',
   'backbone',
+  'App',
   'utils/Globals',
   'utils/Utils',
   'utils/ViewUtils',
@@ -26,7 +27,7 @@ define(['require',
   'models/VAuditLog',
   'hbs!tmpl/audit/AuditTabLayoutView_tmpl',
   'moment'
-], function (require, Backbone, Globals, Utils, ViewUtils, VGroupList, VAuditLogList, VAuditLog, AuditTabLayoutViewTmpl, moment) {
+], function (require, Backbone, App, Globals, Utils, ViewUtils, VGroupList, VAuditLogList, VAuditLog, AuditTabLayoutViewTmpl, moment) {
 
   'use strict';
 
@@ -133,7 +134,9 @@ define(['require',
             params: that.defaultParams,
             viewType: Globals.graphType.MULTILINE.value,
             showDatePicker: true,
-            futureDate: false
+            futureDate: false,
+            showSelectClustersDropdown: true,
+            loadClustersUrl: App.baseUrl + 'audit/logs/clusters'
           }));
         })
       },

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/SelectClusterDropdown.js

@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+
+define(['require', 'backbone', 'hbs!tmpl/common/SelectClusterDropdown_tmpl'], function (require, Backbone, SelectClusterDropdownTmpl) {
+	'use strict';
+
+	var SelectClusterDropdown = Backbone.Marionette.ItemView.extend(
+		{
+			_viewName: "SelectClusterDropdown",
+
+			template: SelectClusterDropdownTmpl,
+			templateHelpers : function(){
+				return {
+					clusterNames: this.clusterNames
+				};
+			},
+			/** ui selector cache */
+			ui: {
+				menuItem: ".dropdown-menu a",
+				applyButton: ".apply-button"
+			},
+			className: "select-cluster-dropdown",
+
+			events: function () {
+				var events = {};
+				events['click ' + this.ui.menuItem] = 'onClusterSelectChange';
+				events['click ' + this.ui.applyButton] = 'applyClusterSelection';
+				return events;
+			},
+
+			clusterNames: [],
+
+			initialize: function(options) {
+				_.extend(this, _.pick(options, 'clustersUrl', 'vent'));
+        this.loadClusters();
+      },
+
+			loadClusters: function () {
+        var self = this;
+				$.ajax(this.clustersUrl).then(function (data) {
+					self.clusterNames = data;
+					self.render();
+				});
+			},
+
+			onClusterSelectChange: function (e) {
+				var self = this;
+				var item = e.currentTarget;
+				setTimeout(function () {
+					self.selectCluster(item);
+				}, 0);
+				return false;
+			},
+
+			selectCluster: function (item) {
+				var cluster = item.innerText.trim();
+				var dropdown = $(item.parentElement.parentElement);
+				var checkbox = $(item).find('input');
+				var newValue = !checkbox.prop('checked');
+				checkbox.prop('checked', newValue);
+				if (cluster === 'All Clusters') {
+					dropdown.find('input').prop('checked', newValue);
+				} else {
+					dropdown.find('input:first').prop('checked', !dropdown.find('input.cluster-checkbox:not(:checked)').length);
+				}
+			},
+
+			applyClusterSelection: function (event) {
+				var clusterNames = [];
+				var clustersParam = '';
+				$(event.target).parent().find('.cluster-checkbox:checked').each(function(i, element){
+					clusterNames.push($(element).parent().text().trim());
+				});
+
+				clustersParam = clusterNames.length ? clusterNames.join(',') : 'NONE';
+
+				this.vent.trigger("logtime:filter", {
+					clusters: clustersParam
+				});
+			}
+
+		});
+
+	return SelectClusterDropdown;
+});

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js

@@ -36,6 +36,12 @@ define(['require',
 
             template: GraphLayoutViewTmpl,
 
+            templateHelpers: function () {
+                return {
+                    showSelectClustersDropdown: this.showSelectClustersDropdown
+                }
+            },
+
             /** ui selector cache */
             ui: {
                 histoGraph: "div[data-id='rHistogramGraph']",
@@ -47,6 +53,11 @@ define(['require',
 
             },
 
+            /** Layout sub regions */
+            regions: {
+                RSelectClusterDropdown: "#r_SelectClusterDropdown"
+            },
+
             /** ui events hash */
             events: function() {
                 var events = {};
@@ -60,7 +71,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker', 'showUnit','futureDate'));
+                _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker', 'showUnit','futureDate', 'showSelectClustersDropdown', 'loadClustersUrl'));
                 /* if (this.showDatePicker) {
                      this.graphVent = new Backbone.Wreqr.EventAggregator();
                  }*/
@@ -68,8 +79,7 @@ define(['require',
                 this.collection = new VLogList([], {
                     state: {
                         firstPage: 0,
-                        pageSize: 999999999,
-
+                        pageSize: 999999999
                     }
                 });
                 this.dateUtil = Utils.dateUtil;
@@ -173,6 +183,9 @@ define(['require',
                     that.addRegions(region);
                     this.renderDatePicker(regionName);
                 }
+                if (this.showSelectClustersDropdown) {
+                    this.renderSelectClusterDropdown();
+                }
                 if (this.histogramView) {
                     this.ui.graphHeader.html('<i class="fa fa-signal"></i><span >Histogram</span>');
                 } else {
@@ -205,8 +218,17 @@ define(['require',
                         parentEl: that.$el,
                         fetch: true,
                         rangeLabel: true,
-                        datePickerPosition : "left",
-                        width: '65%'
+                        datePickerPosition : "left"
+                    }));
+                });
+            },
+            renderSelectClusterDropdown: function() {
+                var that = this;
+                require(['views/common/SelectClusterDropdown'], function (SelectClusterDropdownView) {
+                    that.RSelectClusterDropdown.show(new SelectClusterDropdownView({
+                        vent: that.vent,
+                        globalVent: that.globalVent,
+                        clustersUrl: that.loadClustersUrl
                     }));
                 });
             },

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js

@@ -17,6 +17,7 @@
  */
 define(['require',
   'backbone',
+  'App',
   'utils/Globals',
   'utils/Utils',
   'moment',
@@ -24,7 +25,7 @@ define(['require',
   'collections/VLogList',
   'collections/VGroupList',
   'hbs!tmpl/tabs/HierarchyTabLayoutView_tmpl'
-], function (require, Backbone, Globals, Utils, moment, ViewUtils, VLogList, VGroupList, HierarchyTabLayoutViewTmpl) {
+], function (require, Backbone, App, Globals, Utils, moment, ViewUtils, VLogList, VGroupList, HierarchyTabLayoutViewTmpl) {
   'use strict';
 
   return Backbone.Marionette.Layout.extend(
@@ -46,7 +47,8 @@ define(['require',
         RVisualSearchExCol: "#r_vsSearchExCol",
         RDatePicker: "#r_DatePicker",
         RLogSnapShot: "#r_LogSnapShot",
-        RAdvanceSearch: "#r_AdvanceSearch"
+        RAdvanceSearch: "#r_AdvanceSearch",
+        RSelectClusterDropdown: "#r_SelectClusterDropdown"
       },
 
       /** ui selector cache */
@@ -142,6 +144,7 @@ define(['require',
         this.renderHistogram();
         this.renderDatePicker();
         this.renderLogSnapShot();
+        this.renderSelectClusterDropdown();
         this.componentsList.fetch({reset: true});
       },
       onShow: function () {
@@ -318,6 +321,16 @@ define(['require',
           }));
         });
       },
+      renderSelectClusterDropdown: function () {
+        var that = this;
+        require(['views/common/SelectClusterDropdown'], function (SelectClusterDropdownView) {
+          that.RSelectClusterDropdown.show(new SelectClusterDropdownView({
+            vent: that.vent,
+            globalVent: that.globalVent,
+            clustersUrl: App.baseUrl + 'service/logs/clusters'
+          }));
+        });
+      },
       fetchCollection: function (params) {
         $.extend(this.collection.queryParams, params);
         this.collection.fetch({reset: true});

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css

@@ -849,7 +849,7 @@ div.columnmanager-visibilitycontrol {
 }
 
 .selectDateRange input {
-  width: 99%;
+  width: 97%;
   position: relative;
   padding-left: 36px;
   height: 35px;
@@ -1057,7 +1057,6 @@ svg.nvd3-svg {
   margin-top: 7px;
   /*margin-left: 20px;*/
   font-size: 9px;
-  float: left;
   font-weight: 300;
   border-radius: 3px;
   color: #000;
@@ -2961,4 +2960,19 @@ button.defaultCancelBtn{
 }
 .levelBox:last-of-type{
   clear : right;
-}
+}
+
+/*------------Select Cluster dropdown CSS--------------*/
+.select-cluster-dropdown ul.dropdown-menu {
+  margin-top: 0;
+}
+
+.select-cluster-dropdown .dropdown-toggle {
+  width: 100%;
+}
+.select-cluster-dropdown label {
+  font-weight: normal;
+}
+.select-cluster-dropdown .divider {
+  margin: 0;
+}

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/DatePickerLayout_tmpl.html

@@ -14,16 +14,14 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
-<div class="selectDateRange  col-md-10 col-sm-10">
-    <div class="col-md-11 col-sm-11 leftPad_0">
+<div class="selectDateRange col-md-12">
+    <div class="col-md-7 col-sm-8 leftPad_0">
         <i class="glyphicon glyphicon-calendar fa fa-calendar iStyle"></i>&nbsp;
         <input id="dateRange" class="col-md-4 form-control pull-left" readonly style="cursor:pointer;" />
     </div>
-    <div class="col-md-1 col-sm-1">
+    <div class="col-md-5 col-sm-4">
         <button class="goBtn btn btn-success" type="button">Go</button>
         <!-- <button class="cancelBtn btn btn-xs btn-default" type="button">Cancel</button> -->
+        <span data-id="dateRangeTitle" class="dateRangeTitle"></span>
     </div>
 </div>
-<div class="col-md-2 col-sm-2">
-    <span data-id="dateRangeTitle" class="dateRangeTitle"></span>
-</div>

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/SelectClusterDropdown_tmpl.html

@@ -0,0 +1,32 @@
+<!-- 
+  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 class="button-group col-md-9 col-sm-9">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Cluster <span
+      class="caret"></span></button>
+  <ul class="dropdown-menu">
+    <li><a href="#" tabIndex="-1"><label><input type="checkbox" checked/> All Clusters</label></a></li>
+    <li class="divider"></li>
+    {{#each clusterNames}}
+      <li>
+        <a href="#" tabIndex="-1">
+          <label><input class="cluster-checkbox" type="checkbox" checked/> {{./this}}</label>
+        </a>
+      </li>
+    {{/each}}
+  </ul>
+</div>
+<button class="btn btn-success apply-button col-md-3 col-sm-3" type="button">Apply</button>

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html

@@ -40,7 +40,12 @@
         <div class="loader" style="display: none;">
         </div>
         <div>
-            <div class="col-md-12 addDatePicker"></div>
+            {{#if showSelectClustersDropdown}}
+                <div class="col-lg-10 col-md-9 col-sm-9 addDatePicker"></div>
+                <div class="col-lg-2 col-md-3 col-sm-3" id="r_SelectClusterDropdown"></div>
+            {{else}}
+                <div class="col-md-12 addDatePicker"></div>
+            {{/if}}
             <div class="myHistogram" data-id="rHistogramGraph">
                 <span class="unitposition" data-id ="showUnit"></span>
                 <svg></svg>

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html

@@ -20,9 +20,10 @@
     </div> -->
     <div class="col-md-12">
         <div class="row topLevelFilter">
-            <div id="r_LogLevel" class="col-md-5"></div>
-            <div id="r_DatePicker" class="col-md-6 col-sm-10" style="margin-top: 13px;"></div>
-            <div id="r_LogSnapShot" class="col-md-1 col-sm-2"></div>
+            <div id="r_LogLevel" class="col-md-5 col-sm-12"></div>
+            <div id="r_DatePicker" class="col-md-4 col-sm-12" style="margin-top: 13px;"></div>
+            <div id="r_SelectClusterDropdown" class="col-md-2 col-sm-6" style="margin-top: 13px;"></div>
+            <div id="r_LogSnapShot" class="col-md-1 col-sm-6"></div>
             <div class="col-md-12 hiddeBox fixedSearchBox">
                 <!--  <div class="row row-margin-bottom">
                     <div class="col-md-12" id="r_vsSearch"></div>