AMBARI-16632. Included few more steps in 'Take a tour' feature and few more enhancements (Dharmesh Makwana via oleewere)

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Intro.js

@@ -16,14 +16,47 @@
  * limitations under the License.
  */
 
-define(['require','intro'],function(require,IntroJs) {
+define(['require', 'intro'], function(require, IntroJs) {
     'use strict';
     var Intro = {};
     Intro.Start = function() {
 
         var intro = IntroJs();
         intro.setOptions({
+
+            skipLabel: "Close",
+
+            showBullets : false,
+
             steps: [{
+                element: $('[data-id="troubleshoot"]').get(0),
+                intro: "Welcome, This is the landing page of the LogSearch app, its displays high-level info about services and its components along with graph.",
+                position: "right"
+            }, {
+                element: $('#troubleShootHeader').get(0),
+                intro: "In this section you can choose specific service to focus the issue along with their dependency.",
+                position: "bottom"
+            }, {
+                element: $('div[data-id="dateRange"] .selectDateRange').get(0),
+                intro: "This is date time picker by clicking on it you can select time frame and also there are pre-defined time slots.",
+                position: "top"
+            }, {
+                element: $("#showServicelog").get(0),
+                intro: " After selecting the service and time frame you can navigate to the logs detail page [Service log tab].",
+                position: "top"
+            }, {
+                element: $('[data-id="hierarchy"]').get(0),
+                intro: " This tab holds the logs of all services and its components with different views and aggregation and you can also apply filters for getting into the issues in detail.",
+                position: "right"
+            }, {
+                element: $("#searchIncludeExclude").get(0),
+                intro: "This filter allows you to query the log data column wise(log_message, level, host etc). Include Search is basically \"or\" condition and Exclude Search is \"and\" condition between multiple input.",
+                position: "top"
+            }, {
+                element: $("#compInculdeExculde").get(0),
+                intro: "This filter allows you to filter the log data depending upon the component selection. Include Component is again \"or\" condition and Exclude Component is \"and\" condition between multiple selection.",
+                position: "top"
+            }, {
                 element: $('#r_EventHistory').get(0),
                 intro: "This section will track the ongoing filters applied to the query, you can navigate back and forth.",
                 position: "top"
@@ -53,8 +86,24 @@ define(['require','intro'],function(require,IntroJs) {
                 child: 'li[data-parent="true"]'
             }, {
                 element: $(document.querySelectorAll('#r_BubbleTable')[1]).find('td.logTime:first').get(0),
-                intro: "This is quick menu for every log entry with has options for getting into the detail of that log.",
+                intro: "This is quick menu for every log entry which has options for getting into the detail of that log.",
+                position: "right"
+            }, {
+                element: $('li[data-id="audit"]').get(0),
+                intro: "This tab holds the access information across services and its components with different views and aggregation and you can also apply filters for viewing access info in detail.",
                 position: "right"
+            }, {
+                element: $('#r_AuditLine').get(0),
+                intro: "This section shows the component which are accessed related to time.",
+                position: "bottom"
+            }, {
+                element: $('#AuditSearch').get(0),
+                intro: "This filter allows you to query the data column wise(Access Enforcer, Access type etc). Include Search is basically \"or\" condition and Exclude Search is \"and\" condition between multiple input.",
+                position: "top"
+            }, {
+                element: $('li[data-id="createFilters"]').get(0),
+                intro: "This is the feature to filter out the data that is handled by LogSearch. For ex if you are only interested in logs with level ERROR,FATAL etc to be tracked by LogSearch.",
+                position: "left"
             }].filter(function(obj) {
                 if (obj.child)
                     return $(obj.element).find(obj.child).length
@@ -65,10 +114,14 @@ define(['require','intro'],function(require,IntroJs) {
         Intro.bindEvent(intro)
 
         this.dataAttribute = $('div[role="tabpanel"]').find('.nav-tabs .active').attr('data-id');
-        if (this.dataAttribute != "hierarchy") {
-            $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
+        if (this.dataAttribute != "troubleshoot") {
+            $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click();
         }
         intro.start();
+
+        //Hiding Back button
+        $('.introjs-prevbutton').hide();
+
         if ($('#r_EventHistory').find(".fa-chevron-down").length > 0) {
             $('#r_EventHistory').find('a.collapse-link').click();
         }
@@ -92,13 +145,69 @@ define(['require','intro'],function(require,IntroJs) {
         var options = {
             0: {
                 css: {
-                    'top': '38px',
+                    'top': '0px',
                     'left': '98px'
                 },
                 handDirection: 'down',
                 handClass: "up-down"
             },
             1: {
+                css: {
+                    'top': '0px',
+                    'left': '98px'
+                },
+                handDirection: 'down',
+                handClass: "up-down"
+            },
+            2: {
+                css: {
+                    'top': '0',
+                    'right': '95px'
+                },
+                handDirection: 'left',
+                handClass: "left-right"
+            },
+            3: {
+                css: {
+                    'top': '0',
+                    'left': '40px'
+                },
+                handDirection: 'right',
+                handClass: "left-right"
+            },
+            4: {
+                css: {
+                    'top': '0px',
+                    'left': '98px'
+                },
+                handDirection: 'down',
+                handClass: "up-down"
+            },
+            5: {
+                css: {
+                    'top': '10px',
+                    'left': '10px'
+                },
+                handDirection: 'right',
+                handClass: "right-left"
+            },
+            6: {
+                css: {
+                    'top': '10px',
+                    'left': '10px'
+                },
+                handDirection: 'right',
+                handClass: "right-left"
+            },
+            7: {
+                css: {
+                    'top': '38px',
+                    'left': '98px'
+                },
+                handDirection: 'down',
+                handClass: "up-down"
+            },
+            8: {
                 css: {
                     'top': '38px',
                     'left': '98px'
@@ -106,7 +215,7 @@ define(['require','intro'],function(require,IntroJs) {
                 handDirection: 'up',
                 handClass: "up-down"
             },
-            2: {
+            9: {
                 css: {
                     'top': '38px',
                     'left': '98px'
@@ -115,7 +224,7 @@ define(['require','intro'],function(require,IntroJs) {
                 handDirection: 'down',
                 handClass: "up-down"
             },
-            3: {
+            10: {
                 css: {
                     'top': '14px',
                     'left': '142px'
@@ -126,7 +235,7 @@ define(['require','intro'],function(require,IntroJs) {
                 handClass: "left-right"
 
             },
-            4: {
+            11: {
                 css: {
                     'top': '45px',
                     'right': '0'
@@ -135,7 +244,7 @@ define(['require','intro'],function(require,IntroJs) {
                 handDirection: 'left',
                 handClass: "left-right"
             },
-            5: {
+            12: {
                 css: {
                     'top': '25px',
                     'left': '190px'
@@ -144,7 +253,7 @@ define(['require','intro'],function(require,IntroJs) {
                 handDirection: 'up',
                 handClass: "up-down"
             },
-            6: {
+            13: {
                 css: {
                     'top': '50%',
                     'left': '0'
@@ -152,68 +261,171 @@ define(['require','intro'],function(require,IntroJs) {
                 appendIndex: 0,
                 handDirection: 'up',
                 handClass: "up-down"
+            },
+            14: {
+                css: {
+                    'top': '0',
+                    'left': '0'
+                },
+                handDirection: 'right',
+                handClass: "left-right"
+            },
+            15: {
+                css: {
+                    'top': '0',
+                    'left': '0'
+                },
+                handDirection: 'right',
+                handClass: "left-right"
+            },
+            16: {
+                css: {
+                    'top': '0',
+                    'left': '0'
+                },
+                handDirection: 'right',
+                handClass: "left-right"
+            },
+            17: {
+                css: {
+                    'top': '0',
+                    'left': '0'
+                },
+                handDirection: 'right',
+                handClass: "left-right"
+            },
+            18: {
+                css: {
+                    'top': '0',
+                    'left': '0'
+                },
+                handDirection: 'right',
+                handClass: "left-right"
             }
         }
 
 
         //Onafter step Callback
         intro.onafterchange(function(targetElement) {
-            if (this._currentStep == 2) {
-                scroll(targetElement, 0);
-            } else if (this._currentStep == 3) {
-                scroll(targetElement, 0);
+            if (this._currentStep == 0) {
+
+            } else if (this._currentStep == 1) {
+                scroll(targetElement, -200);
+            } else if (this._currentStep == 2) {
+                // scroll(targetElement, 0);
+            }else if (this._currentStep == 3) {
+                // scroll(targetElement, 0);
             } else if (this._currentStep == 4) {
-                scroll(targetElement, 0);
+                // scroll(targetElement, 0);
             } else if (this._currentStep == 5) {
-                scroll(targetElement, -200);
+                // scroll(targetElement, 0);
             } else if (this._currentStep == 6) {
+               
+            } else if (this._currentStep == 7) {
+                
+            } else if (this._currentStep == 8) {
+                scroll(targetElement, -200);
+            } else if (this._currentStep == 9) {
+                scroll(targetElement, -150);
+            } else if (this._currentStep == 10) {
+                scroll(targetElement, 0);
+            } else if (this._currentStep == 1) {
+                scroll(targetElement, -250);
+            } else if (this._currentStep == 12) {
+                scroll(targetElement, -150);
+            } else if (this._currentStep == 13) {
                 setTimeout(function() {
                     $(targetElement).mouseover();
                 }, 100);
-                setTimeout(function(){
+                setTimeout(function() {
                     $('#rLogTable').find('.btn-quickMenu').first().click();
-                },800);
+                }, 800);
+            } else if (this._currentStep == 14) {
+
+            } else if (this._currentStep == 15) {
+
+            }else if (this._currentStep == 16) {
 
             }
 
 
         });
+
         //OnBefore step Callback
         intro.onbeforechange(function(targetElement) {
             removeFingerAndOverlayDiv();
-            if (this._currentStep == 1) {
+            if (this._currentStep == 0) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click();
+                dispatchResizeEvent();
+            } else if (this._currentStep == 1) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click();
                 dispatchResizeEvent();
-                appendFingerAndOverlayDiv(targetElement, options[this._currentStep])
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
             } else if (this._currentStep == 2) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click();
+                dispatchResizeEvent();
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 3) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click();
+                dispatchResizeEvent();
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 4) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
+                dispatchResizeEvent();
+            } else if (this._currentStep == 5) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
+                dispatchResizeEvent();
+            } else if (this._currentStep == 6) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
+                dispatchResizeEvent();
+            } else if (this._currentStep == 7) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
+                dispatchResizeEvent();
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 8) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
                 $(targetElement).find('input[value="H"]').click();
                 $(targetElement).find('li[data-parent="true"]').first().find('span[data-state="expand"]').first().click();
                 dispatchResizeEvent();
-                appendFingerAndOverlayDiv(targetElement, options[this._currentStep])
-            } else if (this._currentStep == 3) {
-                $(targetElement).find('li[data-parent="true"]').first().find('span[data-state="collapse"]').first().click();
-                if ($(targetElement).find('li[data-parent="true"]').length == 0) {
-
-                }
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 9) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();               
                 $(document.querySelectorAll('#r_BubbleTable')[1]).find('input[value="H"]').click();
-                $(targetElement).find('li[data-parent="true"]').first().find('span[data-state="collapse"]').first().click();
                 dispatchResizeEvent();
-                appendFingerAndOverlayDiv(targetElement, options[this._currentStep])
-            } else if (this._currentStep == 4) {
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 10) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
                 $(document.querySelectorAll('#r_BubbleTable')[1]).find('li[data-parent="true"]').first().find('span[data-state="collapse"]').first().click();
                 $(document.querySelectorAll('#r_BubbleTable')[1]).find('input[value="H"]').click();
                 $(targetElement).find('ul[role="group"]').find('li').first().mouseover();
                 dispatchResizeEvent();
-                appendFingerAndOverlayDiv(targetElement, options[this._currentStep])
-            } else if (this._currentStep == 5) {
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 11) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
                 $(targetElement).find('input[value="T"]').click();
-                $(targetElement).find('[data-id="r_tableList"]').css('height','200px');
+                $(targetElement).find('[data-id="r_tableList"]').css('height', '200px');
                 dispatchResizeEvent();
-                appendFingerAndOverlayDiv(targetElement, options[this._currentStep])
-            } else if (this._currentStep == 6) {
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 12) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
                 $(document.querySelectorAll('#r_BubbleTable')[1]).find('input[value="T"]').click();
-                appendFingerAndOverlayDiv(targetElement, options[this._currentStep])
+                dispatchResizeEvent();
+                appendFingerAndOverlayDiv(targetElement, options[this._currentStep]);
+            } else if (this._currentStep == 13) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click();
+            } else if (this._currentStep == 14) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="audit"] a').click();
+                dispatchResizeEvent();
+            }else if (this._currentStep == 15) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="audit"] a').click();
+                dispatchResizeEvent();
+            }else if (this._currentStep == 15) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="audit"] a').click();
+                dispatchResizeEvent();
+            }else if (this._currentStep == 16) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="audit"] a').click();
+                dispatchResizeEvent();
             }
-
         });
 
         //OnDone Callback
@@ -221,7 +433,7 @@ define(['require','intro'],function(require,IntroJs) {
             $($('#r_EventHistory').get(0)).find('a.collapse-link').click();
             $(document.querySelectorAll('#r_BubbleTable')[1]).find('input[value="H"]').click();
             $(document.querySelectorAll('#r_BubbleTable')[1]).find('li[data-parent="true"]').first().find('span[data-state="expand"]').first().click();
-            $(document.querySelectorAll('#r_BubbleTable')[1]).find('[data-id="r_tableList"]').css('height','');
+            $(document.querySelectorAll('#r_BubbleTable')[1]).find('[data-id="r_tableList"]').css('height', '');
             removeFingerAndOverlayDiv(true);
             tabClick();
         });
@@ -231,7 +443,7 @@ define(['require','intro'],function(require,IntroJs) {
             $(document.querySelectorAll('#r_BubbleTable')[1]).find('input[value="H"]').click();
             $(document.querySelectorAll('#r_BubbleTable')[1]).find('li[data-parent="true"]').first().find('span[data-state="expand"]').first().click();
             $('#r_EventHistory').find('a.collapse-link').click();
-            $(document.querySelectorAll('#r_BubbleTable')[1]).find('[data-id="r_tableList"]').css('height','');
+            $(document.querySelectorAll('#r_BubbleTable')[1]).find('[data-id="r_tableList"]').css('height', '');
             if (that.histoGram) {
                 $('#r_Histogram').find('a.collapse-link').click();
             }
@@ -244,8 +456,8 @@ define(['require','intro'],function(require,IntroJs) {
 
         //remove all animation and overlay div
         function removeFingerAndOverlayDiv(overlay) {
-            if(overlay){
-                 $('body').find('.overlayIntro').remove();
+            if (overlay) {
+                $('body').find('.overlayIntro').remove();
             }
             $('body').find('.box-content .finger').remove();
 
@@ -262,8 +474,14 @@ define(['require','intro'],function(require,IntroJs) {
                     $($(targetElementObject).find('.box-content')[options.appendIndex]).find('.finger').css(options.css);
                 }
             } else {
-                $(targetElementObject).find('.box-content').append('<div class="animated infinite finger ' + options.handClass + '"><i class="fa fa-hand-o-' + options.handDirection + ' fa-2x"></i></div>');
-                $(targetElementObject).find('.box-content').find('.finger').css(options.css);
+                var flag = $(targetElementObject).find('.box-content');
+                if (flag.length != 0) {
+                    $(targetElementObject).find('.box-content').append('<div class="animated infinite finger ' + options.handClass + '"><i class="fa fa-hand-o-' + options.handDirection + ' fa-2x"></i></div>');
+                    $(targetElementObject).find('.box-content').find('.finger').css(options.css);
+                } else {
+                    $(targetElementObject).append('<div class="animated infinite finger ' + options.handClass + '"><i class="fa fa-hand-o-' + options.handDirection + ' fa-2x"></i></div>');
+                    $(targetElementObject).find('.finger').css(options.css);
+                }
             }
 
         }
@@ -281,11 +499,13 @@ define(['require','intro'],function(require,IntroJs) {
         }
 
         function tabClick() {
-            if (that.dataAttribute != "hierarchy") {
+            if (!that.dataAttribute) {
+                $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click();
+            } else {
                 $('div[role="tabpanel"]').find('.nav-tabs [data-id=' + that.dataAttribute + '] a').click();
             }
             window.scrollTo(0, 0);
         }
     }
     return Intro;
-});
+});

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Utils.js

@@ -909,7 +909,7 @@ define(['require',
 	        } else if ((moment(startDate).isBefore(now)) || (moment(now).diff(startDate, 'days'))) {
 	            if ((moment(now).diff(startDate, 'days')) === 6) {
 	                //console.log("last 7 days");
-	                return "+1DAY";
+	                return "+8HOUR";
 	            } else if ((moment(now).diff(startDate, 'days') === 29) || (moment(now).diff(startDate, 'days') === 28) || (moment(now).diff(startDate, 'days') === 30)) {
 	                //console.log("Last 30 days");
 	                return that.getMonthDiff(startDate, endDate, dayGap, checkTime);
@@ -1164,7 +1164,33 @@ define(['require',
 				
 	    	}
         });	   
-	}
+	},
+
+	/* This Method for handling graph unit.
+		which seperate number from the string and again append to 
+		the string by formatting it
+	
+	*/
+	Utils.graphUnitParse = function(unitVal){
+		if(! unitVal){
+			return "";
+		}
+		var pattern = /(\d)\s+(?=\d)/g;
+		var number = unitVal.match(/\d+/g).map(Number);
+		var numString = number.toString().replace(pattern , '$1');
+        var str = unitVal.replace(/\d+/g, '').replace(/\+/g,'');
+        return numString +" " + Utils.getCamelCase(str) + "(s) gap";
+	},
+
+	Utils.getCamelCase = function(str){
+		if(!str){
+			return "";
+		}
+		var str = str.toLowerCase();
+		return str.replace(/(?:^|\s)\w/g, function(match) {
+        	return match.toUpperCase()
+        });
+	};
     
 	return Utils;
 });

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/ViewUtils.js

@@ -30,7 +30,7 @@ define(['require',
     var ViewUtil = {};
 
     ViewUtil.setdefaultParams = function() {
-        var fromSolr, toSolr;
+        var fromSolr, toSolr,that=this;
         var params = Utils.getQueryParams(window.location.search);
         this.defaultParams = {
             q: "*:*",
@@ -74,6 +74,9 @@ define(['require',
                         if (model.get('name') == "To") {
                             toSolr = moment(parseInt(model.get('value'))).toJSON();
                         }
+                        if(fromSolr && toSolr){
+                            that.defaultParams['dateRangeLabel'] = "Custom Range";
+                        }
                     })
 
                 }

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

@@ -87,7 +87,9 @@ define(['require',
                 if(this.buttonLabel){
                 	this.$(".goBtn").text(this.buttonLabel);
                 }
-                if (!this.params.dateRangeLabel) this.params['dateRangeLabel'] = "Today"
+                if (!this.params.dateRangeLabel) {
+                    this.params['dateRangeLabel'] = "Today";
+                }
                 this.initializeDateRangePicker();
                 this.setValues(this.params);
                 this.unit = that.checkDateRange(that.ui.dateRange.data("daterangepicker"));

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dashboard/MainLayoutView.js

@@ -19,12 +19,13 @@
 define(['require',
 	'backbone',
 	'utils/Utils',
+	'utils/ViewUtils',
 	'utils/Globals',
 	'hbs!tmpl/dashboard/MainLayoutView_tmpl',
 	'select2',
 	'sparkline',
 	'd3.tip'
-],function(require,Backbone,Utils,Globals,MainLayoutViewTmpl){
+],function(require,Backbone,Utils,ViewUtils,Globals,MainLayoutViewTmpl){
     'use strict';
 	
 	var MainLayoutView = Backbone.Marionette.Layout.extend(
@@ -126,6 +127,19 @@ define(['require',
 			this.bindTabClickListener();
 			this.tabScrollBind();
 		},
+		onShow : function(){
+			//navigating to specific component tab
+			var params = ViewUtils.getDefaultParams();
+			if(params.host_name && params.component_name){
+				this.globalVent.trigger("render:tab",{
+					params:_.extend({},{
+						host :  params.host_name,
+						component : params.component_name
+					},params),
+					globalVent : this.globalVent
+				});
+			}
+		},
 		renderLogFileTab : function(view){
 			var that = this;
 			require(['views/tabs/LogFileView'], function(LogFileView){

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

@@ -42,7 +42,8 @@ define(['require',
                 dateRange: "#dateRange",
                 selectDateRange: ".selectDateRange",
                 dateRangeTitle: "span[data-id='dateRangeTitle']",
-                graphHeader: "div[data-id='graphHeader']"
+                graphHeader: "div[data-id='graphHeader']",
+                showUnit : "span[data-id='showUnit']"
 
             },
 
@@ -59,7 +60,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker'));
+                _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker', 'showUnit'));
                 /* if (this.showDatePicker) {
                      this.graphVent = new Backbone.Wreqr.EventAggregator();
                  }*/
@@ -71,7 +72,6 @@ define(['require',
 
                     }
                 });
-
                 this.dateUtil = Utils.dateUtil;
                 this.dateRangeLabel = new String();
 
@@ -95,6 +95,11 @@ define(['require',
                     this.createDataForGraph();
                     this.$(".loader").hide();
                     this.$("#loaderGraph").hide();
+                    if(this.showUnit && this.collection.length > 0){
+                        this.showUnitCheck();
+                    }else{
+                        this.ui.showUnit.hide();
+                    }
                 }, this);
                 this.listenTo(this.collection, 'request', function() {
                     this.$(".loader").show();
@@ -186,6 +191,9 @@ define(['require',
                         that.$(".nvtooltip.xy-tooltip").show();
                 })
             },
+            showUnitCheck : function(){
+                this.ui.showUnit.show().html(Utils.graphUnitParse(this.unit));
+            },
             renderDatePicker: function(regionName) {
                 var that = this;
                 require(['views/common/DatePickerLayout'], function(DatePickerLayout) {

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

@@ -61,7 +61,7 @@ define(['require',
                 this.collection = new VLogList([], {
                     state: {
                         firstPage: 0,
-                        pageSize: 10
+                        pageSize: 25
                     }
                 });
                 this.dateUtil = Utils.dateUtil;

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

@@ -231,7 +231,8 @@ define(['require',
 	    		that.RHistogram.show(new GraphLayoutView({
 					vent : that.vent,
 					globalVent:that.globalVent,
-					params : that.defaultParams
+					params : that.defaultParams,
+					showUnit : true
 				}));
             });
 		},
@@ -436,6 +437,7 @@ define(['require',
 		reRenderComponents : function(params){
 			var iComponents = this.ui.includeComponents.val(),eComponents = this.ui.excludeComponents.val(),that=this;
 			this.componentsList.fetch({
+				reset : true,
 				complete : function(){
 					that.ui.includeComponents.select2('val',iComponents.split(","));
 					that.ui.excludeComponents.select2('val',eComponents.split(","));

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

@@ -366,11 +366,23 @@ define(['require',
                     that.RHistogram.show(new GraphLayoutView({
                         vent: that.vent,
                         globalVent: that.globalVent,
-                        params: that.params
-                            //parentView : this
+                        params: that.params,
+                        showUnit : true
                     }));
                 });
             },
+            getIdRowForTableLayout : function(){
+            	var IdRow =  Backgrid.Row.extend({
+				    render: function() {
+				        IdRow.__super__.render.apply(this, arguments);
+				        if (this.model.has("id")) {
+				            this.$el.attr("data-id", this.model.get('id'));
+				        }
+				        return this;
+				    }
+				});
+            	return IdRow;
+            },
             renderTableLikeLogFile: function() {
                 var that = this;
                 require(['views/common/TableLayout'], function(TableLayout) {
@@ -379,6 +391,7 @@ define(['require',
                         columns: cols,
                         includeColumnManager: false,
                         gridOpts: {
+                        	row: that.getIdRowForTableLayout(),
                             className: "table table-bordered table-striped table-hover table-condensed backgrid logFileFont table-quickMenu",
                         },
                     })));
@@ -389,7 +402,10 @@ define(['require',
                 require(['views/common/TableLayout'], function(TableLayout) {
                     var cols = new Backgrid.Columns(that.getColumns());
                     that.RLogFileTable.show(new TableLayout(_.extend({}, that.commonTableOptions, {
-                        columns: cols
+                        columns: cols,
+                        gridOpts: {
+                        	row: that.getIdRowForTableLayout(),
+                        }
                     })));
                 });
             },

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js

@@ -71,7 +71,7 @@ define(['backbone',
                 this.vent = new Backbone.Wreqr.EventAggregator();
                 //this.servicesData = {services:{ranger:{label:"Ranger",components:[{name:"ranger_admin"}],dealsWithServices:[{name:"hdfs"},{name:"kms"}],dealsWithComponents:[{name:"security_admin"},{name:"portal"}],},ambari:{label:"Ambari",dealsWithServices:[{name:"ranger"},{name:"hive"}]},hdfs:{label:"Hdfs",components:[{name:"hdfs_namenode"},{name:"hdfs_datanode"}],dealsWithServices:[],dealsWithComponents:[],}}};
                 var todayRange = Utils.dateUtil.getTodayRange();
-                this.params = _.pick(ViewUtils.getDefaultParamsForHierarchy(),"from","to","bundle_id","host_name","component_name","file_name");
+                this.params = _.pick(ViewUtils.getDefaultParamsForHierarchy(),"dateRangeLabel","from","to","bundle_id","host_name","component_name","file_name");
                 this.initializeCollection();
                 this.bindEvents();
             },

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

@@ -1339,7 +1339,7 @@ img.quickLinkNav{
   margin-right: 7px;
 }
 .comparisonTab div[data-id="r_tableList"]{
-  height: 300px;
+  height: 310px;
 }
 .compare .closeComponent{
   position: absolute;
@@ -2079,3 +2079,67 @@ input.filterInput{
 .nav-tabs > li{
   margin-bottom:-2px;
 }
+.unitposition{
+  font: 300 11px Arial;
+  position: absolute;
+  top:7%;
+  left: 45%;
+}
+.comparisonTab #r_VSSearch  .VS-search .VS-search-box{
+  min-height: 25px !important;
+}
+.comparisonTab #r_VSSearch .VS-search .VS-icon-search{
+  top: 6px;
+}
+
+.comparisonTab #r_VSSearch  .VS-search .VS-placeholder{
+  top: 6px;
+  font-size: 11px;
+ }
+.comparisonTab #r_VSSearch  .VS-search .VS-search-box .VS-search-inner .search_input{
+  height: 20px;
+ }
+.comparisonTab #r_VSSearch .VS-search .VS-icon-cancel{
+  top: 6px;
+ }
+.comparisonTab #r_VSSearch  .VS-search .search_facet{
+  margin: 0 -3px 3px 0;
+}
+.comparisonTab #r_DatePicker .selectDateRange .iStyle{
+  margin-top: 1px;
+  font-size: 15px
+}
+.comparisonTab #r_DatePicker  .selectDateRange input{
+    padding-left: 36px;
+    height: 20px;
+    padding-top: 0;
+    font-size: 12px;
+}
+.comparisonTab #r_DatePicker  .selectDateRange .btn{
+    padding: 2px 7px;
+    font-size: 10px;
+    margin-top: 0;
+}
+.comparisonTab #r_DatePicker .dateRangeTitle{
+    margin-top: 0;
+}
+.comparisonTab  .box-content hr{
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+.comparisonTab #rLogTable .form-control{
+  height: 18px;
+  font-size: 10px;
+}
+.comparisonTab #rLogTable .dropdown-button{
+  height:19px;
+}
+.comparisonTab #rLogTable .columnmanager-visibilitycontrol{
+  height:15px;
+}
+.comparisonTab pre{
+  font-size: 10;
+}
+[data-id=tabTitle] {
+  font-weight : bold;
+}

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/audit/AuditTabLayoutView_tmpl.html

@@ -23,7 +23,7 @@
 				<div id="r_AuditLine"></div>
 	</div>
 
-	<div class="col-md-12">
+	<div class="col-md-12" id="AuditSearch">
 		<div class="box">
 			<div class="box-header">
 				<div class="box-name">

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

@@ -42,6 +42,7 @@
         <div>
             <div class="col-md-12 addDatePicker"></div>
             <div class="myHistogram" data-id="rHistogramGraph">
+                <span class="unitposition" data-id ="showUnit"></span>
                 <svg></svg>
             </div>
         </div>

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

@@ -27,7 +27,7 @@
                 <!--  <div class="row row-margin-bottom">
                     <div class="col-md-12" id="r_vsSearch"></div>
                 </div> -->
-                <div class="row row-margin-bottom" >
+                <div class="row row-margin-bottom" id="searchIncludeExclude">
                     <div class="col-md-6" data-id="basicSearch">
                         <div id="r_vsSearchIncCol"></div>
                     </div>
@@ -52,7 +52,7 @@
                <!--  <div class="row row-margin-bottom" >
                     
                 </div> -->
-                <div class="row">
+                <div class="row" id="compInculdeExculde">
                     <div class="col-md-6">
                         <!-- <label>Exclude Components : </label> -->
                         <input type="hidden" id="includeComponents" name="Components" value="" />

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/troubleshoot/TroubleShootLayoutView_tmpl.html

@@ -18,7 +18,7 @@
 	<div class="row">
 		<div class="col-md-12">
 			<div class="row">
-				<div class="col-md-12">
+				<div class="col-md-12" id="troubleShootHeader">
 					<div class="box">
 						<div class="box-header">
 							<div class="box-name">
@@ -55,7 +55,7 @@
 										<div data-id="dateRange"></div>
 									</div>
 								</div>
-								<div class="col-md-2 text-right pull-right" style="z-index:1">
+								<div class="col-md-2 text-right pull-right" style="z-index:1" id="showServicelog">
 									<button data-id="searchServiceLogs"
 										class="btn btn-success" type="button">
 										Go to Logs</button>