Repository: ambari Updated Branches: refs/heads/trunk ea72aee93 -> 3783cafce
http://git-wip-us.apache.org/repos/asf/ambari/blob/3783cafc/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js index bd85adb..ee8a7dd 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js @@ -137,12 +137,6 @@ noty: { deps: ['jquery'], }, - timeline: { - deps: ['jquery'] - }, - intro: { - exports: 'introJs' - }, WorldMapGenerator: { deps: ['jquery'] }, @@ -157,6 +151,9 @@ }, dashboard: { deps: ['jquery', 'jquery-ui', 'gridster'] + }, + tour : { + exports : 'tour' } }, @@ -219,13 +216,13 @@ 'd3.tip': "../libs/other/d3/d3.tip", 'nv': "../libs/other/nvd3/js/nv.d3", 'noty': '../libs/other/noty/jquery.noty.packaged', - 'intro': '../libs/other/intro/js/intro.min', 'tmpl': '../templates', 'WorldMapGenerator': '../libs/other/timezone/WorldMapGenerator', 'jstimezonedetect': '../libs/other/timezone/jstz-1.0.4.min', 'sparkline': '../libs/other/sparkline/jquery.sparkline', 'gridster': '../libs/other/gridster/js/jquery.gridster', 'dashboard': '../libs/other/dashboard/dashboard', + 'tour' : '../libs/other/bootstrap-tour-0.10.3/js/bootstrap-tour.min' }, http://git-wip-us.apache.org/repos/asf/ambari/blob/3783cafc/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 deleted file mode 100644 index 74a232d..0000000 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Intro.js +++ /dev/null @@ -1,511 +0,0 @@ -/** - * 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', '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 to Log Search! Choose Troubleshooting to display high-level log and usage aggregates for all services and components in your cluster.", - position: "right" - }, { - element: $('#troubleShootHeader').get(0), - intro: "Choose a Service to display high-level information about that service. Optionally, filter by components and apply a specific diagnostic time frame.", - position: "bottom" - }, { - element: $('div[data-id="dateRange"] .selectDateRange').get(0), - intro: "Click the Date-Time picker and choose a pre-defined time slot or specify date and time values.", - position: "top" - }, { - element: $("#showServicelog").get(0), - intro: "Choose Go To Logs to further refine your examination of Service Logs for a selected service.", - position: "top" - }, { - element: $('[data-id="hierarchy"]').get(0), - intro: "Service Logs displays a high-level history of logs generated by a selected service and allows you to filter logs by component. You control your view of log data per component and host, Choose to view aggregate Service Logs or drill into details of each log message.", - 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: "Event History displays the current, filtered query results.", - position: "top" - }, { - element: $('#r_Histogram').get(0), - intro: "Histogram displays comparative ratios of log severity during the currently defined time filter.", - position: "top" - }, { - element: document.querySelectorAll('#r_BubbleTable')[1], - intro: "The Log Data default view displays consolidated for all hosts.", - position: "top", - child: 'li[data-parent="true"]' - }, { - element: document.querySelectorAll('#r_BubbleTable')[1], - intro: "Expand the Log Data tree view and choose components to further refine your diagnostics.", - position: "top", - child: 'li[data-parent="true"]' - }, { - element: $(document.querySelectorAll('#r_BubbleTable')[1]).find('.box-content')[1], - intro: "Choose the blue arrow icon to view logs for a specific component on a new tab.", - position: "right", - child: 'li[data-parent="true"]' - }, { - element: document.querySelectorAll('#r_BubbleTable')[1], - intro: "Choose Service Logs to show a column-separated view of actual log entries.", - position: "top", - child: 'li[data-parent="true"]' - }, { - element: $(document.querySelectorAll('#r_BubbleTable')[1]).find('td.logTime:first').get(0), - intro: "The Log Time column lists a consolidated view of filtered log entries for the selected service.", - position: "right" - }, { - element: $('li[data-id="audit"]').get(0), - intro: "The Access Logs tab displays access information across services and their components. You can create different views and aggregations and apply filters for viewing access log details.", - position: "right" - }, { - element: $('#r_AuditLine').get(0), - intro: "The Line section shows component access during a specific time frame.", - position: "bottom" - }, { - element: $('#AuditSearch').get(0), - intro: "This filter allows you to query Access log data column- wise (Access Enforcer, Access type etc). Include Search applies the \"or\" condition and Exclude Search the \"and\" condition between multiple inputs.", - position: "top" - }, { - element: $('li[data-id="createFilters"]').get(0), - intro: "The Log Feeder Filter feature supports limiting data handled by LogSearch. For example, you can limit logs tracked by LogSearch to only those logs with level ERROR or FATAL.", - position: "left" - }].filter(function(obj) { - if (obj.child) - return $(obj.element).find(obj.child).length - return $(obj.element).length; - }), - 'exitOnOverlayClick': false - }); - Intro.bindEvent(intro) - - this.dataAttribute = $('div[role="tabpanel"]').find('.nav-tabs .active').attr('data-id'); - 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(); - } - if ($('#r_Histogram').find(".fa-chevron-down").length > 0) { - $('#r_Histogram').find('a.collapse-link').click(); - this.histoGram = true; - } - if ($(document.querySelectorAll('#r_BubbleTable')[1]).find(".fa-chevron-down").length > 0) { - $(document.querySelectorAll('#r_BubbleTable')[1]).find('a.collapse-link').click(); - this.bubbleGraph = true; - } - var overlay = document.createElement('div'); - overlay.setAttribute('class', 'overlayIntro'); - $('body').append(overlay); - - }; - - Intro.bindEvent = function(intro) { - - var that = this; - var options = { - 0: { - css: { - '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' - }, - handDirection: 'up', - handClass: "up-down" - }, - 9: { - css: { - 'top': '38px', - 'left': '98px' - }, - appendIndex: 0, - handDirection: 'down', - handClass: "up-down" - }, - 10: { - css: { - 'top': '14px', - 'left': '142px' - }, - appendIndex: 1, - handDirection: 'left', - handText: "Components", - handClass: "left-right" - - }, - 11: { - css: { - 'top': '45px', - 'right': '0' - }, - appendIndex: 0, - handDirection: 'left', - handClass: "left-right" - }, - 12: { - css: { - 'top': '25px', - 'left': '190px' - }, - appendIndex: 0, - handDirection: 'up', - handClass: "up-down" - }, - 13: { - css: { - 'top': '50%', - 'left': '0' - }, - 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 == 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); - } else if (this._currentStep == 5) { - // 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() { - $('#rLogTable').find('.btn-quickMenu').first().click(); - }, 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 == 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]); - } 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 == 9) { - $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click(); - $(document.querySelectorAll('#r_BubbleTable')[1]).find('input[value="H"]').click(); - dispatchResizeEvent(); - 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 == 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'); - dispatchResizeEvent(); - 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(); - 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 - intro.oncomplete(function() { - $($('#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', ''); - removeFingerAndOverlayDiv(true); - tabClick(); - }); - - //OnSkip Callback - intro.onexit(function(targetElement) { - $(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', ''); - if (that.histoGram) { - $('#r_Histogram').find('a.collapse-link').click(); - } - if (that.bubbleGraph) { - $(document.querySelectorAll('#r_BubbleTable')[1]).find('a.collapse-link').click(); - } - removeFingerAndOverlayDiv(true); - tabClick(); - }); - - //remove all animation and overlay div - function removeFingerAndOverlayDiv(overlay) { - if (overlay) { - $('body').find('.overlayIntro').remove(); - } - $('body').find('.box-content .finger').remove(); - - } - //add all animation and overlay div - function appendFingerAndOverlayDiv(targetElementObject, options) { - - if (options.appendIndex != undefined) { - if ($(targetElementObject).find('.box-content').length == 0) { - $(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); - } else { - $($(targetElementObject).find('.box-content')[options.appendIndex]).append('<div class="animated infinite finger ' + options.handClass + '"><i class="fa fa-hand-o-' + options.handDirection + ' fa-2x"></i></div>'); - $($(targetElementObject).find('.box-content')[options.appendIndex]).find('.finger').css(options.css); - } - } else { - 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); - } - } - - } - - function scroll(targetElement, offsetPlus) { - $('html,body').animate({ - scrollTop: (($(targetElement).offset().top) + offsetPlus) - }); - } - - function dispatchResizeEvent() { - setTimeout(function() { - window.dispatchEvent(new Event('resize')); - }, 100); - } - - function tabClick() { - 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/3783cafc/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Tour.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Tour.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Tour.js new file mode 100644 index 0000000..cb28576 --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/utils/Tour.js @@ -0,0 +1,435 @@ +/** + * 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', 'tour'], function(require, TourJs) { + 'use strict'; + + var TourJs = {}; + var tour = ''; + TourJs.Start = function() { + var getTourElement = function() { + return tour._options.steps[tour._current].element; + }; + tour = new Tour({ + name: "tour", + steps: [{ + element: $('[data-id="troubleshoot"]').get(0), + content: "Welcome to Log Search! Choose Troubleshooting to display high-level log and usage aggregates for all services and components in your cluster.", + placement: "right" + }, { + element: $('#troubleShootHeader').get(0), + content: "Choose a Service to display high-level information about that service. Optionally, filter by components and apply a specific diagnostic time frame.", + placement: "bottom" + }, { + element: $('div[data-id="dateRange"] .selectDateRange').get(0), + content: "Click the Date-Time picker and choose a pre-defined time slot or specify date and time values.", + placement: "top" + }, { + element: $("#showServicelog").get(0), + content: "Choose Go To Logs to further refine your examination of Service Logs for a selected service.", + placement: "top" + }, { + element: $('[data-id="hierarchy"]').get(0), + content: "Service Logs displays a high-level history of logs generated by a selected service and allows you to filter logs by component. You control your view of log data per component and host, Choose to view aggregate Service Logs or drill into details of each log message.", + placement: "right" + }, { + element: $("#searchIncludeExclude").get(0), + content: "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.", + placement: "bottom" + }, { + element: $("#compInculdeExculde").get(0), + content: "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.", + placement: "bottom" + }, { + element: $('#r_Histogram').get(0), + content: "Histogram displays comparative ratios of log severity during the currently defined time filter.", + placement: "top" + }, { + element: document.querySelectorAll('#r_BubbleTable')[1], + content: "The Log Data default view displays consolidated for all hosts.", + placement: "top", + }, { + element: document.querySelectorAll('#r_BubbleTable')[1], + content: "Expand the Log Data tree view and choose components to further refine your diagnostics.", + placement: "top", + }, { + element: $(document.querySelectorAll('#r_BubbleTable')[1]).find('.box-content')[1], + content: "Choose the blue arrow icon to view logs for a specific component on a new tab.", + placement: "right", + }, { + element: document.querySelectorAll('#r_BubbleTable')[1], + content: "Choose Service Logs to show a column-separated view of actual log entries.", + placement: "top", + }, { + element: $(document.querySelectorAll('#r_BubbleTable')[1]).find('td.logTime:first').get(0), + content: "The Log Time column lists a consolidated view of filtered log entries for the selected service.", + placement: "right" + }, { + element: $('li[data-id="audit"]').get(0), + content: "The Access Logs tab displays access information across services and their components. You can create different views and aggregations and apply filters for viewing access log details.", + placement: "right" + }, { + element: $('#r_AuditLine').get(0), + content: "The Line section shows component access during a specific time frame.", + placement: "bottom" + }, { + element: $('#AuditSearch').get(0), + content: "This filter allows you to query Access log data column- wise (Access Enforcer, Access type etc). Include Search applies the \"or\" condition and Exclude Search the \"and\" condition between multiple inputs.", + placement: "top" + }, { + element: $('li[data-id="createFilters"]').get(0), + content: "The Log Feeder Filter feature supports limiting data handled by LogSearch. For example, you can limit logs tracked by LogSearch to only those logs with level ERROR or FATAL.", + placement: "left" + }], + container: "body", + smartPlacement: true, + keyboard: true, + storage: false, + debug: false, + backdrop: true, + backdropContainer: 'body', + backdropPadding: 0, + redirect: true, + orphan: false, + duration: false, + delay: false, + basePath: "", + template: "<div class='popover tour'>" + + "<div class='arrow'></div>" + + "<h3 class='popover-title'></h3>" + + "<div class='popover-content'></div>" + + "<div class='popover-navigation'>" + + "<button class='btn btn-default' data-role='next'>Next »</button>" + + "<button class='btn btn-default' data-role='end'>Close</button>" + + "</div>" + + "</div>", + afterGetState: function(key, value) {}, + afterSetState: function(key, value) {}, + afterRemoveState: function(key, value) {}, + onShow: function(tour) {}, + onShown: function(tour) { + var stepElement = getTourElement(tour); + $(stepElement).after($('.tour-step-background')); + $(stepElement).before($('.tour-backdrop')); + + if (tour._state.current_step == 1) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 2) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 3) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 4) {} else if (tour._state.current_step == 5) {} else if (tour._state.current_step == 6) {} else if (tour._state.current_step == 7) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 8) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 9) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 10) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 11) { + appendFingerAndOverlayDiv(tour._options.showFinger[tour._state.current_step]); + } else if (tour._state.current_step == 12) { + $('[data-id="r_tableList"]').find('table thead tr').css({ 'display': '-webkit-box' }); + $('[data-id="r_tableList"]').find('table tbody tr').css({ 'display': '-webkit-box' }); + $('[data-id="r_tableList"]').find('table thead tr').css({ 'display': '-moz-box' }); + $('[data-id="r_tableList"]').find('table tbody tr').css({ 'display': '-moz-box' }); + } else if (tour._state.current_step == 13) {} + + var count = $('body').find('.finger'); + if (count.length > 1) { + $('body').find('.finger:first').remove(); + } + } + + }), + TourJs.bindEvent(tour), + tour.start(); + + //add all animation and overlay div + function appendFingerAndOverlayDiv(options) { + $('.tour-step-backdrop:first').append('<div class="animated infinite finger ' + options.handClass + '"><i class="fa fa-hand-o-' + options.handDirection + ' fa-2x"></i></div>'); + $('.tour-step-backdrop:first').find('.finger').css(options.css); + }; + + // var overlay = document.createElement('div'); + // overlay.setAttribute('class', 'overlayIntro'); + // $('body').append(overlay); + }; + + TourJs.bindEvent = function(tour) { + var that = this; + var tourCallBack = tour._options; + + var optionSet = { + 0: { + css: { + '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': '5px', + 'left': '100px' + }, + handDirection: 'down', + handClass: "up-down" + }, + 8: { + css: { + 'top': '45px', + 'left': '122px' + }, + handDirection: 'up', + handClass: "up-down" + }, + 9: { + css: { + 'top': '45px', + 'left': '100px' + }, + appendIndex: 0, + handDirection: 'down', + handClass: "up-down" + }, + 10: { + css: { + 'top': '45px', + 'right': '10px' + }, + appendIndex: 1, + handDirection: 'left', + handText: "Components", + handClass: "left-right" + + }, + 11: { + css: { + 'top': '30px', + 'left': '309px' + }, + appendIndex: 0, + handDirection: 'left', + handClass: "left-right" + }, + 12: { + css: { + 'top': '50px', + 'left': '0px' + }, + appendIndex: 0, + handDirection: 'up', + handClass: "up-down" + }, + 13: { + css: { + 'top': '0', + 'left': '0' + }, + 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" + } + }; + + $.extend(tour._options, { "showFinger": optionSet }); + + // on tour start + tourCallBack.onStart = function(tour) { + $('.ui-dialog').fadeOut(); + $('.ui-widget-overlay').fadeOut(); + $('.compare').fadeOut(); + that.dataAttribute = $('div[role="tabpanel"]').find('.nav-tabs .active').attr('data-id'); + if (that.dataAttribute != "troubleshoot") { + $('div[role="tabpanel"]').find('.nav-tabs [data-id="troubleshoot"] a').click(); + } + }; + + // on the Next button click + tourCallBack.onNext = function(tour) { + if (tour._state.current_step == 0) {} else if (tour._state.current_step == 1) { + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 2) { + $("#showServicelog").css('z-index', ''); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 3) { + $('div[role="tabpanel"]').find('.nav-tabs [data-id="hierarchy"] a').click(); + $("#showServicelog").css('z-index', 1); + } else if (tour._state.current_step == 4) {} else if (tour._state.current_step == 5) { + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 6) { + ($('[id="r_Histogram"]').find('.collapse-link').first().find('i').hasClass('fa-chevron-down')) ? $('[id="r_Histogram"]').find('.collapse-link').first().find('i').click(): ''; + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 7) { + ($('#r_BubbleTable a.collapse-link').first().find('i').hasClass('fa-chevron-down')) ? $('#r_BubbleTable a.collapse-link').first().find('i').click(): ''; + $('#r_BubbleTable li[data-parent="true"]').first().find('span[data-state="expand"]').first().click(); + $('#r_BubbleTable input[value="H"]').click(); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 8) { + $('#r_BubbleTable li[data-parent="true"]').first().find('span[data-state="collapse"]').first().click(); + $('#r_BubbleTable li[data-parent="true"]').first().find('a[data-type="C"]').first().removeClass('hidden'); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 9) { + $('#r_BubbleTable li[data-parent="true"]').first().find('a[data-type="C"]').first().removeClass('hidden'); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 10) { + $('#r_BubbleTable input[value="T"]').click(); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 11) { + setTimeout(function() { + $('#rLogTable').find('.btn-quickMenu').first().click(); + }, 300); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 12) { + $('[data-id="r_tableList"]').find('table thead tr').css({ 'display': '' }); + $('[data-id="r_tableList"]').find('table tbody tr').css({ 'display': '' }); + $('div[role="tabpanel"]').find('.nav-tabs [data-id="audit"] a').click(); + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 13) { + ($('#r_AuditLine a.collapse-link').first().find('i').hasClass('fa-chevron-down')) ? $('#r_AuditLine a.collapse-link').first().find('i').click(): ''; + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 14) { + ($('#AuditSearch a.collapse-link').first().find('i').hasClass('fa-chevron-down')) ? $('#AuditSearch a.collapse-link').first().find('i').click(): ''; + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 15) { + removeFingerAndOverlayDiv(); + } else if (tour._state.current_step == 16) {} + + }; + + // on tour Ends + tourCallBack.onEnd = function(tour) { + tabClick(); + $('body').find('.overlayIntro').remove(); + $('.ui-dialog').fadeIn(); + $('.ui-widget-overlay').fadeIn(); + $('.compare').fadeIn(); + removeFingerAndOverlayDiv(); + $('[data-id="r_tableList"]').find('table thead tr').css({ 'display': '' }); + $('[data-id="r_tableList"]').find('table tbody tr').css({ 'display': '' }); + }; + + function tabClick() { + 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); + }; + + //remove all animation and overlay div + function removeFingerAndOverlayDiv() { + $('body').find('.finger').remove(); + }; + + } + + + return TourJs; +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/3783cafc/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/Header.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/Header.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/Header.js index ca27bba..9653bd4 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/Header.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/Header.js @@ -77,7 +77,9 @@ define(['require', /** all events binding here */ bindEvents: function() { - + this.listenTo(this.globalVent,"currentMap:load",function(obj){ + this.currentTimezone = obj; + },this); }, /** on render callback */ onRender: function() { @@ -94,6 +96,7 @@ define(['require', } this.ui.timeZoneChange.find('span').text(moment.tz(storeTimezone.value.split(',')[0]).zoneName()); } + this.currentTimezone = storeTimezone; this.checkParams(); }, onShow : function(){ @@ -146,9 +149,9 @@ define(['require', }); }, takeATour: function() { - require(['utils/Intro'], function(Intro) { - Intro.Start(); - }); + require(['utils/Tour'],function(Tour){ + Tour.Start(); + }); /*localStorage.clear(); if (typeof(Storage) !== "undefined") { @@ -354,7 +357,7 @@ define(['require', timeZoneChangeClick: function() { var that = this; require(['views/dialog/TimeZoneChangeView'], function(TimeZoneChangeView) { - var view = new TimeZoneChangeView({}); + var view = new TimeZoneChangeView({currentTime : that.currentTimezone}); var opts = { title: "Time Zone", content: view, @@ -392,8 +395,10 @@ define(['require', var content = this.dialog.options.content; this.onDialogClosed(); if (content.changedTimeZone) { + var obj = Utils.localStorage.checkLocalStorage('timezone'); Utils.localStorage.setLocalStorage('timezone', content.selectedtimeZone); //this.ui.timeZoneChange.find('span').text(moment.tz(content.selectedtimeZone).zoneName()); + this.globalVent.trigger("currentMap:load",obj); window.open(window.location.href, '_blank'); } http://git-wip-us.apache.org/repos/asf/ambari/blob/3783cafc/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/ApplySearchFilterView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/ApplySearchFilterView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/ApplySearchFilterView.js index 91f10ae..c8e8895 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/ApplySearchFilterView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/ApplySearchFilterView.js @@ -78,7 +78,7 @@ define(['require', userId: "admin", rowType:"history" }); - this.collection.fetch({ + this.collection.getFirstPage({ error: function(jqXHR, textStatus, errorThrown) { Utils.notifyError({ content: "There is some problem in Event History, Please try again later." http://git-wip-us.apache.org/repos/asf/ambari/blob/3783cafc/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js index 99fe6b2..900c232 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js @@ -47,10 +47,13 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, '')); + _.extend(this, _.pick(options, 'currentTime')); this.dateUtil = Utils.dateUtil; this.changedTimeZone = false; - var storeTimezone = Utils.localStorage.checkLocalStorage('timezone'); + var storeTimezone = ''; + if(!_.isUndefined(this.currentTime)){ + storeTimezone = this.currentTime; + } if (storeTimezone && storeTimezone != "undefined") { this.selectedtimeZone = storeTimezone.value } http://git-wip-us.apache.org/repos/asf/ambari/blob/3783cafc/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 6409d18..6fd63a9 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 @@ -1010,7 +1010,7 @@ body { left: 0; width: 100%; right: 0; - z-index: 9999999; + z-index: 2002; height: 100%; } .overlayDashboard{ @@ -1816,7 +1816,7 @@ button.depLinks{ .addOnWrap{ - min-height:30px; + height:30px; } .addOnRightBDR{ border-right:1px solid #CCC !important; @@ -2148,3 +2148,49 @@ input.filterInput{ .nvd3 rect[height="1"] { display: none !important; } +.popover { + z-index: 2002; +} +.popover[class*="tour-"] { + z-index: 2002; +} +.tour-backdrop { + z-index: 2001; + opacity: 0.6; +} +.tour-step-backdrop { + z-index: 2001; +} +.tour-step-backdrop > td { + z-index: 2001; +} +.tour-step-background { + z-index: 2002; +} +.popover.right>.arrow { + border-right-color: rgba(255, 255, 255, 1); +} +.popover.bottom>.arrow{ + border-bottom-color: rgba(255, 255, 255, 1); +} +.popover.top>.arrow { + border-top-color: rgba(255, 255, 255, 1); +} +.tour-tour-element{ + background-color: #ffffff !important; +} +.popover.left>.arrow { + border-left-color: rgba(255, 255, 255, 1); +} +.modal-backdrop{ + background-color: rgba(0,0,0,0.6); +} +a.params{ + font-size: 10px; + color: yellow; + display: none; +} +a.params:hover,a.params:visited,a.params:active,a.params:focus{ + color:#e8e80c !important; + text-decoration: none; +} \ No newline at end of file
