Repository: ambari Updated Branches: refs/heads/trunk 218bda793 -> 5fdbc1625
AMBARI-16632. Included few more steps in 'Take a tour' feature and few more enhancements (Dharmesh Makwana via oleewere) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/5fdbc162 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/5fdbc162 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/5fdbc162 Branch: refs/heads/trunk Commit: 5fdbc1625233546c22933320c86ac0262a751ed1 Parents: 218bda7 Author: oleewere <[email protected]> Authored: Tue May 17 11:59:53 2016 +0200 Committer: oleewere <[email protected]> Committed: Tue May 17 11:59:53 2016 +0200 ---------------------------------------------------------------------- .../src/main/webapp/scripts/utils/Intro.js | 308 ++++++++++++++++--- .../src/main/webapp/scripts/utils/Utils.js | 30 +- .../src/main/webapp/scripts/utils/ViewUtils.js | 5 +- .../scripts/views/common/DatePickerLayout.js | 4 +- .../scripts/views/dashboard/MainLayoutView.js | 16 +- .../scripts/views/graphs/GraphLayoutView.js | 14 +- .../webapp/scripts/views/tabs/ComparisonView.js | 2 +- .../views/tabs/HierarchyTabLayoutView.js | 4 +- .../webapp/scripts/views/tabs/LogFileView.js | 22 +- .../troubleshoot/TroubleShootLayoutView.js | 2 +- .../src/main/webapp/styles/style.css | 66 +++- .../audit/AuditTabLayoutView_tmpl.html | 2 +- .../templates/graphs/GraphLayoutView_tmpl.html | 1 + .../tabs/HierarchyTabLayoutView_tmpl.html | 4 +- .../TroubleShootLayoutView_tmpl.html | 4 +- 15 files changed, 420 insertions(+), 64 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Intro.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Intro.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Intro.js index 6abccf6..869a1d4 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Intro.js +++ b/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,7 +145,7 @@ define(['require','intro'],function(require,IntroJs) { var options = { 0: { css: { - 'top': '38px', + 'top': '0px', 'left': '98px' }, handDirection: 'down', @@ -100,13 +153,69 @@ define(['require','intro'],function(require,IntroJs) { }, 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' }, 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; -}); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Utils.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Utils.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Utils.js index 5d55689..354b79d 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Utils.js +++ b/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; }); http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/ViewUtils.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/ViewUtils.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/ViewUtils.js index ba21b65..91bc5f2 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/ViewUtils.js +++ b/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"; + } }) } http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js index 0849820..1d7eccf 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js +++ b/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")); http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dashboard/MainLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dashboard/MainLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dashboard/MainLayoutView.js index 09bbacc..c2e0bb3 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dashboard/MainLayoutView.js +++ b/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){ http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js index 805b507..a6a19d3 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js +++ b/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) { http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/ComparisonView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/ComparisonView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/ComparisonView.js index 8ad0c4b..2fe4d3c 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/ComparisonView.js +++ b/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; http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js index cb4228c..c0cdace 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js +++ b/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(",")); http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/LogFileView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/LogFileView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/LogFileView.js index 2d19d78..850bb6b 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/LogFileView.js +++ b/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(), + } }))); }); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js index e1bc90a..bbdb653 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js +++ b/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(); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css index 05fd491..85b2249 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css +++ b/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; +} http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/audit/AuditTabLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/audit/AuditTabLayoutView_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/audit/AuditTabLayoutView_tmpl.html index 2f0a596..ef894a2 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/audit/AuditTabLayoutView_tmpl.html +++ b/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"> http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html index fb4ee3c..e35b38c 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html +++ b/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> http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html index 4564562..1a3135f 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html +++ b/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="" /> http://git-wip-us.apache.org/repos/asf/ambari/blob/5fdbc162/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/troubleshoot/TroubleShootLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/troubleshoot/TroubleShootLayoutView_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/troubleshoot/TroubleShootLayoutView_tmpl.html index b3eeaf5..85a5364 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/troubleshoot/TroubleShootLayoutView_tmpl.html +++ b/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>
