You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ol...@apache.org on 2017/09/05 19:37:23 UTC
[07/51] [partial] ambari git commit: AMBARI-21870. Integrate
LogSearch new UI with the server and get rid of the old one (oleewere)
http://git-wip-us.apache.org/repos/asf/ambari/blob/02360dd5/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js b/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js
deleted file mode 100644
index 900c232..0000000
--- a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/dialog/TimeZoneChangeView.js
+++ /dev/null
@@ -1,101 +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',
- 'backbone',
- 'utils/Utils',
- 'hbs!tmpl/dialog/TimeZoneChangeView_tmpl'
-],function(require,Backbone,Utils,TimeZoneChangeViewTmpl) {
- 'use strict';
-
- return Backbone.Marionette.Layout.extend(
- /** @lends TimeZoneChangeView */
- {
- _viewName: 'TimeZoneChangeView',
-
- template: TimeZoneChangeViewTmpl,
-
-
- /** ui selector cache */
- ui: {
- map: "#timezone-picker"
- },
-
- /** ui events hash */
- events: function() {
- var events = {};
- return events;
- },
-
- /**
- * intialize a new TimeZoneChangeView Layout
- * @constructs
- */
- initialize: function(options) {
- _.extend(this, _.pick(options, 'currentTime'));
- this.dateUtil = Utils.dateUtil;
- this.changedTimeZone = false;
- var storeTimezone = '';
- if(!_.isUndefined(this.currentTime)){
- storeTimezone = this.currentTime;
- }
- if (storeTimezone && storeTimezone != "undefined") {
- this.selectedtimeZone = storeTimezone.value
- }
- },
- bindEvents: function() {
- var that = this;
- this.ui.map.on('map:clicked', function(e) {
- var valueArray = $(this).data('WorldMapGenerator').getValue();
- if (valueArray.length) {
- if (that.selectedtimeZone != valueArray[0].zonename) {
- that.selectedtimeZone = valueArray[0].timezone + "," + valueArray[0].zonename + "," + valueArray.length
- that.changedTimeZone = true;
- }
- }
-
- that.enabledButton()
- })
- this.ui.map.on('map:loaded', function(e) {
- var selectedtimeZone = that.selectedtimeZone.split(',');
- if (selectedtimeZone.length <= 1) {
- $(this).data('WorldMapGenerator').setValue(that.selectedtimeZone.split(',')[0], 'timezone');
- } else {
- if (selectedtimeZone[2] && parseInt(selectedtimeZone[2]) <= 1 ) {
- $(this).data('WorldMapGenerator').setValue(that.selectedtimeZone.split(',')[0], 'timezone');
- } else {
- $(this).data('WorldMapGenerator').setValue(that.selectedtimeZone.split(',')[1], 'zonename');
- }
- }
-
- that.trigger('toggle:btn', false, 'reloadBtn');
- that.trigger('toggle:btn', false, 'reloadNewBtn');
- })
- },
- onRender: function() {
- this.bindEvents();
- },
- enabledButton: function() {
- this.trigger('toggle:btn', true, 'reloadBtn');
- this.trigger('toggle:btn', true, 'reloadNewBtn');
- }
-
- });
-
-
-});
http://git-wip-us.apache.org/repos/asf/ambari/blob/02360dd5/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/filter/CreateLogfeederFilterView.js
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/filter/CreateLogfeederFilterView.js b/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/filter/CreateLogfeederFilterView.js
deleted file mode 100644
index bcab975..0000000
--- a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/filter/CreateLogfeederFilterView.js
+++ /dev/null
@@ -1,383 +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',
- 'backbone',
- 'utils/Utils',
- 'hbs!tmpl/filter/CreateLogfeederFilter_tmpl',
- 'models/VUserFilter',
- 'utils/Globals',
- 'collections/VGroupList',
- 'moment',
- 'select2',
-], function(require, Backbone, Utils, CreateLogfeederFilter_tmpl, VUserFilter, Globals, VGroupList, moment) {
- 'use strict';
-
- return Backbone.Marionette.Layout.extend(
- /** @lends TimeZoneChangeView */
- {
- _viewName: 'FilterView',
-
- template: CreateLogfeederFilter_tmpl,
-
- /** ui selector cache */
- ui: {
- 'componentSelect2': "#components",
- 'hostSelect2': "#hosts",
- // 'levelSelect2': "#levels",
- 'filterInput': '#filter[input]',
- 'loader' : "[data-id='loader']",
- 'filterContent' : '#filterContent',
- },
-
- /** ui events hash */
- events: function() {
- var events = {};
- events["click [data-override]"] = 'onDataOverrideClick';
- events["click [data-value]"] = 'onLogLevelHeaderClick';
- events["click #filterContent input[type='checkbox']"] = 'onAnyCheckboxClick';
- events["click .overrideRow a"] = 'onEditHost';
-
- return events;
- },
-
- /**
- * intialize a new Filter Layout
- * @constructs
- */
- initialize: function(options) {
- _.extend(this, _.pick(options, ''));
- this.componentsList = new VGroupList([], {
- state: {
- firstPage: 0,
- pageSize: 99999
- }
- });
-
- this.hostList = new VGroupList([], {
- state: {
- firstPage: 0,
- pageSize: 99999
- }
- });
-
- this.componentsList.url = Globals.baseURL + "service/logs/components";
- this.hostList.url = Globals.baseURL + "service/logs/hosts";
- this.model = new VUserFilter();
-
- this.levelCollection = new Backbone.Collection();
- var levelArr = ["FATAL", "ERROR", "WARN", "INFO", "DEBUG", "TRACE", "UNKNOWN"];
-
- for (var i in levelArr) {
- this.levelCollection.add(new Backbone.Model({ type: levelArr[i] }));
- }
- this.bindEvents();
- },
- bindEvents: function() {
- // this.listenTo(this.componentsList, "reset", function(col, abc) {
- // this.setupSelect2Fields(col, "type", 'type', 'componentSelect2', 'Select Component');
- // }, this);
-
- this.listenTo(this.hostList, "reset", function(col, abc) {
- //this.setupSelect2Fields(col, "host", 'host', 'hostSelect2', 'Select Host', 'hostBoolean');
- }, this);
- },
- onRender: function() {
- var that = this;
- // this.setupSelect2Fields(this.levelCollection, "type", "type", "levelSelect2", 'Select Level');
-
- $.when(this.hostList.fetch({ reset: true }), this.componentsList.fetch({ reset: true }), this.model.fetch({})).then(function(c1, c2, m1) {
- // if (!_.isUndefined(that.model.get('components'))) {
- // that.ui.componentSelect2.select2('val', that.model.get('components'));
- // }
- //if (!_.isUndefined(that.model.get('hosts'))) {
- // that.ui.hostSelect2.select2('val', that.model.get('hosts'));
- //}
- // if (!_.isUndefined(that.model.get('levels'))) {
- // that.ui.levelSelect2.select2('val', that.model.get('levels'));
- // }
- that.hideLoading();
- that.trigger("toggle:okBtn",true);
-
- //that.dataLevels = [];
- //that.dataLevels = _.pluck(that.levelCollection.models, 'attributes');
-
- //that.dataList = [];
- //that.dataList = _.pluck(that.componentsList.models, 'attributes');
- that.renderComponents();
- that.populateValues();
- },function(error){
- that.hideLoading();
- Utils.notifyError({
- content: "There is some issues on server, Please try again later."
- });
- that.trigger("closeDialog");
- });
- },
- hideLoading : function(){
- this.ui.loader.hide();
- },
- renderComponents : function(){
- var that = this;
- var set = new Set();
- _.each(that.componentsList.models, function(model){
- that.createRow(model.get("type"), that);
- set.add(model.get("type"));
- });
-
- if (set.size > 0) {
- that.ui.filterContent.append('<tr class="overrideSpacer"></tr><tr class="overrideSpacer"></tr><tr class="overrideSpacer"></tr>');
- }
-
- var components = this.model.get("filter");
- _.each(components,function(value,key){
- if (!set.has(key)) {
- that.createRow(key, that);
- }
- });
- },
- createRow : function(type, that) {
- var levels = '<td align="left">'+type+'</td>';
- var override = '<td class="text-left"><span class="pull-left"><!--small><i>Override</i></small--> <input data-override type="checkbox" data-name='+type+'></span></td>';
- levels += override + that.getLevelForComponent(type,false);
- var html = '<tr class="overrideSpacer"></tr><tr class="componentRow borderShow" data-component="'+type+'">'+levels+'</tr><tr></tr>';
- that.ui.filterContent.append(html);
- },
- populateValues : function(){
- var that =this;
- if(this.model.get("filter")){
- var components = this.model.get("filter");
- _.each(components,function(value,key){
- var obj = components[key];
-
- if((_.isArray(obj.overrideLevels) && obj.overrideLevels.length) ||
- (_.isArray(obj.hosts) && obj.hosts.length) || obj.expiryTime){
- var $el = that.$("input[data-name='"+key+"']").filter("[data-override]");
- $el.click();
- }
-
- //setting override data
- if(_.isArray(obj.overrideLevels)){
- if(obj.overrideLevels.length){
- var $override = that.$("tr.overrideRow."+key);
- if($override.length){
- for(var z=0; z<obj.overrideLevels.length; z++){
- var $checkbox = $override.find("input[data-id='"+obj.overrideLevels[z]+"']");
- if(! $checkbox.is(":checked")){
- $checkbox.prop("checked",true);
- // that.showHostSelect2(key);
- }
- }
- }
- }
- }
- //setting expiry
- if(obj.expiryTime && that.$("[data-date='"+key+"']").data('daterangepicker')){
- var dateObj = Utils.dateUtil.getMomentObject(obj.expiryTime);
- that.$("[data-date='"+key+"']").data('daterangepicker').setStartDate(dateObj);
- that.$("[data-date='"+key+"']").val(dateObj.format("MM/DD/YYYY HH:mm"));
- that.showExpiry(key)
- }
- //setting hosts
- if(_.isArray(obj.hosts)){
- if(obj.hosts.length){
- that.$("[data-host='"+key+"']").select2("val",obj.hosts);
- that.showHostSelect2(key);
- }
- }
- //setting default values
- if(obj.defaultLevels && _.isArray(obj.defaultLevels) && obj.defaultLevels.length){
- var $default = that.$("tr[data-component='"+key+"']");
- if($default.length){
- for(var z=0; z<obj.defaultLevels.length; z++){
- var $checkbox = $default.find("input[data-id='"+obj.defaultLevels[z]+"']");
- if(! $checkbox.is(":checked")){
- $checkbox.prop("checked",true);
- }
- }
- }
- }
- });
- }
- //set check all value
- _.each(this.levelCollection.models,function(model){
- that.setCheckAllValue(model.get("type"));
- });
-
- },
- onAnyCheckboxClick : function(e){
- var $el = $(e.currentTarget);
- this.setCheckAllValue($el.data("id"));
- },
- onEditHost : function(e){
- var $el = $(e.currentTarget);
- $el.hide();
- if($el.data("type") == "host"){
- this.showHostSelect2($el.data("component"));
- }else{
- this.showExpiry($el.data("component"));
- }
- },
- hideHostSelect2 : function(forComponent){
- this.ui[forComponent].siblings(".select2-container").hide();
- this.$("a[data-component='"+forComponent+"'][data-type='host']").show();
- this.$('i.hostDown[data-component="'+forComponent+'"]').show();
- },
- showHostSelect2 : function(forComponent){
- this.ui[forComponent].siblings(".select2-container").show();
- this.$("a[data-component='"+forComponent+"'][data-type='host']").hide();
- this.$('i.hostDown[data-component="'+forComponent+'"]').hide();
- },
- showExpiry : function(forComponent){
- this.$("[data-date='"+forComponent+"']").show();
- this.$("a[data-component='"+forComponent+"'][data-type='expiry']").hide();
- },
- hideExpiry : function(forComponent){
- this.$("[data-date='"+forComponent+"']").hide();
- this.$("a[data-component='"+forComponent+"'][data-type='expiry']").show();
- },
- setCheckAllValue : function(type){
- var that = this;
- if(! type)
- return
- if(that.$("[data-id='"+type+"']:checked").length == that.$("[data-id='"+type+"']").length){
- that.$("[data-value='"+type+"']").prop("checked",true);
- }else{
- that.$("[data-value='"+type+"']").prop("checked",false);
- }
- },
- getLevelForComponent : function(type,checked){
- var html="";
- for(var z=0;z<this.levelCollection.length;z++){
- html += '<td><input '+((checked) ? "checked":"") +' type="checkbox" data-id='+this.levelCollection.models[z].get("type")+' data-name='+type+'></td>';
- }
- return html;
- },
- onDataOverrideClick : function(e){
- var $el = $(e.currentTarget);
- if(e.currentTarget.checked){
- this.addOverrideRow($el.data("name"));
- this.$('tr[data-component="'+$el.data("name")+'"]').removeClass('borderShow ');
- this.$('tr[data-component="'+$el.data("name")+'"]').addClass('bgHighlight ');
- }else{
- this.removeOverrideRow($el.data("name"));
- this.$('tr[data-component="'+$el.data("name")+'"]').addClass('bgHighlight borderShow ');
- this.$('tr[data-component="'+$el.data("name")+'"]').removeClass('bgHighlight ');
- }
- },
- onLogLevelHeaderClick : function(e){
- var $el = $(e.currentTarget);
- if(e.currentTarget.checked){
- this.$("[data-id='"+$el.data("value")+"']").prop("checked",true);
- }else{
- this.$("[data-id='"+$el.data("value")+"']").prop("checked",false);
- }
- },
- addOverrideRow : function(forComponent){
- var $el = this.ui.filterContent.find("tr[data-component='"+forComponent+"']"),textForHost = "Click here to apply on specific host",
- textForExpiry="Select Expiry Date";
- if($el.length){
- var html = "<tr class='overrideRow bgHighlight "+forComponent+"'><td class='text-left'><i data-component='"+forComponent+"' class='fa fa-level-down hostDown' aria-hidden='true'></i><a href='javascript:void(0);' data-type='host' data-component='"+forComponent+"'>"+textForHost+"</a><input data-host='"+forComponent+"' type='hidden' /></td>" +
- "<td class='text-left'><a href='javascript:void(0);' data-type='expiry' data-component='"+forComponent+"'>"+textForExpiry+"</a>" +
- "<input class='datepickerFilter' data-date='"+forComponent+"'></td>"+this.getLevelForComponent($el.data("component"),false)+"</tr>";
- //html += "<tr class='overrideRow "+forComponent+"'><td> </td><td> </td><td colspan='3'><input class='datepickerFilter' data-date='"+forComponent+"'></td>" +
- // "<td colspan='3'><div ><input data-host='"+forComponent+"' type='hidden' /></div></td></tr>"
- $el.after(html);
- this.ui[forComponent] = this.$("[data-host='"+forComponent+"']");
- this.setupSelect2Fields(this.hostList, "host", 'host', forComponent, 'Select Host', 'hostBoolean');
- this.hideHostSelect2(forComponent);
- this.$("[data-date='"+forComponent+"']").daterangepicker({
- singleDatePicker: true,
- showDropdowns: true,
- parentEl : this.$el,
- 'startDate':moment().add(1,'hours').format('MM/DD/YYYY HH:mm'),
- //timeZone: 0,
- locale: {
- format: 'MM/DD/YYYY HH:mm'
- },
- //timePickerSeconds: true,
- "timePicker": true,
- "timePicker24Hour": true,
- });
- this.$("[data-date='"+forComponent+"']").val(moment().add(1,'hours').format("MM/DD/YYYY HH:mm"));
- this.hideExpiry(forComponent);
- }
- },
- removeOverrideRow : function(foComponent){
- this.ui.filterContent.find("tr.overrideRow."+foComponent).remove();
- },
- setupSelect2Fields: function(col, idKey, textKey, selectTagId, placeHolder) {
- var that = this,
- data = [];
- data = _.pluck(col.models, 'attributes');
-
- for (var i = 0; i < data.length; i++) {
- data[i].id = data[i][idKey];
- }
-
- this.ui[selectTagId].select2({
- dropdownParent: that.$el,
- placeholder: (placeHolder) ? placeHolder : 'Select',
- tags: true,
- allowClear: true,
- width: '100%',
- data: { results: data, text: textKey },
- formatSelection: function(item) {
- return item[textKey];
- },
- formatResult: function(item) {
- return item[textKey];
- }
-
- });
-
- },
- setValues : function(){
- var obj = {filter: {}},that = this;
- var components = this.model.get("filter");
- _.each(components,function(value,key){
- var date = that.$("[data-date='"+key+"']").data("daterangepicker");
- var host = (that.$("[data-host='"+key+"']").length) ? that.$("[data-host='"+key+"']").select2('val') : [];
- obj.filter[key] = {
- label : key,
- hosts: host,
- defaultLevels : that.getDefaultValues(key),
- overrideLevels : that.getOverideValues(key),
- expiryTime : (date && date.startDate) ? date.startDate.toJSON() : ""
- };
- });
- return (obj);
- },
- getOverideValues : function(ofComponent){
- var $els = this.$("tr.overrideRow."+ofComponent).find("input:checked"),values=[];
- for(var i=0; i<$els.length; i++){
- values.push($($els[i]).data("id"));
- }
- return values;
- },
- getDefaultValues : function(ofComponent){
- var $els = this.$("tr[data-component='"+ofComponent+"']").find("input:checked"),values=[];
- for(var i=0; i<$els.length; i++){
- if($($els[i]).data("id"))
- values.push($($els[i]).data("id"));
- }
- return values;
- }
- });
-
-});
http://git-wip-us.apache.org/repos/asf/ambari/blob/02360dd5/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GraphLayoutView.js
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GraphLayoutView.js b/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GraphLayoutView.js
deleted file mode 100644
index 728d721..0000000
--- a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GraphLayoutView.js
+++ /dev/null
@@ -1,559 +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',
- 'backbone',
- 'moment',
- 'd3.tip',
- 'utils/Globals',
- 'utils/Utils',
- 'collections/VLogList',
- 'hbs!tmpl/graphs/GraphLayoutView_tmpl',
- 'bootstrap-daterangepicker',
- 'nv'
-], function(require, backbone, moment, tip, Globals, Utils, VLogList, GraphLayoutViewTmpl, daterangepicker, nv) {
- 'use strict';
-
- return Backbone.Marionette.Layout.extend(
- /** @lends GraphLayoutViewTmpl */
- {
- _viewName: 'GraphLayoutView',
-
- template: GraphLayoutViewTmpl,
-
- /** ui selector cache */
- ui: {
- histoGraph: "div[data-id='rHistogramGraph']",
- dateRange: "#dateRange",
- selectDateRange: ".selectDateRange",
- dateRangeTitle: "span[data-id='dateRangeTitle']",
- graphHeader: "div[data-id='graphHeader']",
- showUnit : "span[data-id='showUnit']"
-
- },
-
- /** ui events hash */
- events: function() {
- var events = {};
- events['change ' + this.ui.viewType] = 'onViewTypeChange';
- events['click [data-id="refresh-tab-graph"]'] = 'onTabRefresh';
- return events;
- },
-
- /**
- * intialize a new GraphLayoutView Layout
- * @constructs
- */
- initialize: function(options) {
- _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker', 'showUnit','futureDate'));
- /* if (this.showDatePicker) {
- this.graphVent = new Backbone.Wreqr.EventAggregator();
- }*/
- this.boxOpen = true;
- this.collection = new VLogList([], {
- state: {
- firstPage: 0,
- pageSize: 999999999,
-
- }
- });
- this.dateUtil = Utils.dateUtil;
- this.dateRangeLabel = new String();
-
- this.bindEvents();
- this.graphParams = {};
- this.unit = this.params.unit ? this.params.unit : "+1HOUR";
- this.firstRender = true;
- if (!this.viewType || this.viewType == Globals.graphType.HISTOGRAM.value) {
- this.histogramView = true;
- this.collection.url = Globals.baseURL + "service/logs/histogram";
- this.collection.modelAttrName = "graphData";
- } else {
- this.collection.url = Globals.baseURL + "audit/logs/bargraph";
- this.collection.modelAttrName = "graphData";
- this.lineView = true;
- }
-
- },
- bindEvents: function() {
- this.listenTo(this.collection, "reset", function(collection) {
- 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();
- this.$("#loaderGraph").show();
- }, this);
- this.listenTo(this.collection, 'sync error', function() {
- this.$(".loader").hide();
- this.$("#loaderGraph").hide();
- }, this);
- /* if (this.showDatePicker) {
- this.listenTo(this.graphVent, "logtime:filter ", function(value) {
- this.vent.trigger("logtime:filter", value);
- this.fetchGraphData(value);
- }, this);
- this.listenTo(this.vent, "main:search tree:search type:mustNot type:mustBe level:filter search:include:exclude logtime:filter " +
- Globals.eventName.serviceLogsIncludeColumns + " " + Globals.eventName.serviceLogsExcludeColumns,
- function(value) {
- if (value.unit) {
- this.unit = value.unit;
- }
- this.fetchGraphData(value);
- }, this);
- } else {
- this.listenTo(this.vent, "main:search tree:search type:mustNot type:mustBe level:filter search:include:exclude logtime:filter " +
- Globals.eventName.serviceLogsIncludeColumns + " " + Globals.eventName.serviceLogsExcludeColumns,
- function(value) {
- if (value.unit) {
- this.unit = value.unit;
- }
- this.fetchGraphData(value);
- }, this);
- }*/
- this.listenTo(this.vent, "main:search tree:search type:mustNot type:mustBe level:filter search:include:exclude logtime:filter " +
- Globals.eventName.serviceLogsIncludeColumns + " " + Globals.eventName.serviceLogsExcludeColumns,
- function(value) {
- if (value.unit) {
- this.unit = value.unit;
- }
- this.fetchGraphData(value);
- }, this);
- this.listenTo(this.vent, "reinitialize:filter:logtime", function(value) {
- if (value.unit) {
- this.unit = value.unit;
- }
- this.reinitializeFilter(value);
- }, this);
- this.listenTo(this.globalVent, "globalExclusion:component:message", function(value) {
- this.fetchGraphData(value);
- }, this);
- this.listenTo(this.vent, "tab:refresh", function(params) {
- this.reRenderView(params);
- }, this);
- /*
- * Audit events
- */
- this.listenTo(this.vent, "search:audit:query auditComponents:include auditComponents:exclude search:audit:include search:audit:exclude", function(value) {
- this.fetchGraphData(value);
- }, this);
-
- },
- onRender: function() {
- var that = this;
- if (this.showDatePicker) {
- var region = {};
- var regionName = "R_DatePicker";
- region[regionName] = '#DatePicker';
- $('<div/>', {
- 'id': 'DatePicker',
- 'class': "col-md-12",
- }).appendTo(that.$('.addDatePicker'));
- that.addRegions(region);
- this.renderDatePicker(regionName);
- }
- if (this.histogramView) {
- this.ui.graphHeader.html('<i class="fa fa-signal"></i><span >Histogram</span>');
- } else {
- this.ui.graphHeader.html('<i class="fa fa-line-chart"></i><span >Line</span>');
- }
- if (this.lineView) {
- this.ui.histoGraph.addClass('myLineChart');
- }
- if (this.params) {
- this.fetchGraphData(this.params);
- }
- this.$("svg").on("mouseover", function() {
- if ($(this).find(".nv-noData").length) {
- that.$(".nvtooltip.xy-tooltip").hide();
- } else
- 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) {
- var region = that.getRegion(regionName);
- region.show(new DatePickerLayout({
- vent: /*(that.showDatePicker) ? (that.vent) : */ (that.vent),
- globalVent: that.globalVent,
- params: that.params,
- parentEl: that.$el,
- fetch: true,
- rangeLabel: true,
- datePickerPosition : "left",
- width: '65%'
- }));
- });
- },
- fetchGraphData: function(params) {
- var that = this;
- that.$("#loaderGraph").show();
- that.$(".loader").show();
- _.extend(this.collection.queryParams, params);
- this.collection.fetch({
- reset: true
- });
- },
- createDataForGraph: function() {
- var data = [],
- that = this,
- dataL = [],
- color = d3.scale.category20().range();
- _.each(this.collection.models, function(model, i) {
- var Obj = {
- key: model.get('name'),
- values: model.get('dataCount').map(function(object) {
- return {
- x: that.dateUtil.getMomentObject(object.name), //(new Date(object.name)).toUTCString(),
- y: parseFloat(object.value)
- }
- })
- };
-
- if(!that.futureDate){
- var date = moment().add(1,"hours").format("YYYY-MM-DDTHH:mm:ss.SSSSZ");
- var newObj =[];
- for(var k = 0 ;k < Obj.values.length ;k++){
- if(moment(date).isAfter(that.dateUtil.getMomentObject(Obj.values[k].x))){
- newObj[k] = {
- x : that.dateUtil.getMomentObject(Obj.values[k].x),
- y : Obj.values[k].y
- }
- }
- }
- Obj.values = newObj;
- }
-
- if (that.histogramView) {
- Obj['color'] = ((model.get('name') === 'ERROR') ? ("#E81D1D") :
- (model.get('name') === 'INFO') ? ("#2577B5") :
- (model.get('name') === 'WARN') ? ("#FF8916") :
- (model.get('name') === 'FATAL') ? ("#830A0A") :
- (model.get('name') === 'DEBUG') ? ("#65E8FF") :
- (model.get('name') === 'TRACE') ? ("#888888") :
- (model.get('name') === 'UNKNOWN') ? ("#bdbdbd") : ("white"));
- } else {
- Obj['color'] = color[i];
- }
- data.push(Obj);
- });
-
- if (that.histogramView) {
- for (var i = data.length - 1; i >= 0; i--) {
- dataL.push(data[i])
-
- }
- }
-
- this.$('svg').find('g.nv-x g.tick').hide();
- (!this.firstRender) ? this.updateGraph(data, dataL): this.renderGraph(data, dataL);
-
- },
- //Using NVD3
- renderGraph: function(data, dataL) {
- var that = this,
- formatValue = d3.format(".2s");
- // that.ui.histoGraph.find('svg').empty();
- nv.addGraph({
- generate: function() {
- /* var parentWidth = (that.ui.histoGraph.find('svg').parent().width()),
- parentHeight = (that.ui.histoGraph.find('svg').parent().height())
- width = ((parentWidth === 0) ? (891) : (parentWidth)), // -15 because parent has 15 padding
- height = ((parentHeight === 0) ? (640) : (parentHeight)) // -15 because parent has 15 padding */
- if (that.histogramView) {
- that.chart = nv.models.multiBarChart()
- /* .width(width)
- .height(height)*/
- .stacked(true)
- .showControls(false);
- that.chart.groupSpacing(0.6) // for bar width and aspace
- } else {
- that.chart = nv.models.lineChart().options({
- transitionDuration: 300,
- useInteractiveGuideline: true
- });
- //We want nice looking tooltips and a guideline!
-
- that.chart.showLegend(true); //Show the legend, allowing users to turn on/off line series.
- that.chart.showYAxis(true); //Show the y-axis
- that.chart.showXAxis(true);
-
- }
- that.ExtentValue = that.chart.xAxis
- .tickFormat(function(d) {
- var date = that.dateUtil.getTimeZoneFromMomentObject(((that.histogramView) ? (d) : (that.dateUtil.getMomentObject(d))));
- return (((that.unit.search('HOUR') + 1) || (that.unit.search('MINUTE') + 1)) ?
- (d3.time.format('%H:%M - %m/%d/%y')(date)) :
- (((that.unit.search('MILLI') + 1)) ? (d3.time.format('%H:%M:%S.%L - %m/%d/%y')(date)) :
- (((that.unit.search('MONTH') + 1)) ? ((d3.time.format('%b %d')(date))) :
- (((that.unit.search('SECOND') + 1)) ? (d3.time.format('%H:%M:%S - %m/%d/%y')(date)) : (d3.time.format('%m/%d/%y')(date))))))
- });
- that.chart.yAxis
- .tickFormat(function(d) {
- return formatValue(d).replace('G', 'B');
- });
- // For legend and control margin
- that.chart.legend.margin({
- top: 5,
- right: 50,
- left: 90,
- bottom: 10
- });
- that.chart.margin({
- right: 30,
- left: 30,
- });
- that.chart.dispatch.on('renderEnd', function() {
- if (that.firstRender) {
- that.firstRender = false
- var svgElem = that.$('svg');
- if (that.histogramView) {
- var elem = svgElem.find('g.nv-barsWrap.nvd3-svg .nv-groups');
- } else {
- var elem = svgElem.find('g.nv-linesWrap.nvd3-svg .nv-groups');
- }
-
- }
- that.graphXAxisBreak();
- if (that.boxOpen) {
- that.createBrush(); // if box is open then only it will plot brush
- }
-
-
-
- });
-
- that.chart.tooltip.contentGenerator(
- function(data) {
- if (data.data.size <= 0)
- return "<div></div>";
- var tootTipTemplate = '<div>' +
- '<table>' +
- '<thead>' +
- '<tr>' +
- '<td colspan="3"><strong class="x-value">' + data[((that.histogramView) ? ('data') : ('point'))].x.format('MM/DD/YYYY') + '</strong></td>' +
- '</tr>' +
- '<tr>' +
- '<td colspan="3"><strong class="x-value">' + data[((that.histogramView) ? ('data') : ('point'))].x.format('H:mm:ss,SSS') + '</strong></td>' +
- '</tr>' +
- '</thead>' +
- '<tbody>' +
- '<tr>' +
- '<td class="legend-color-guide">' +
- '<div style="background-color: ' + ((that.histogramView) ? (data.color) : (data.series[0].color)) + '"></div>' +
- '</td>' +
- '<td class="key">' + ((that.histogramView) ? (data.data.key) : (data.series[0].key)) + '</td>' +
- '<td class="value">' + ((that.histogramView) ? (data.data.size) : (data.series[0].value)) + '</td>' +
- '</tr>' +
- '</tbody>' +
- '</table>' +
- '</div>'
-
- return tootTipTemplate
- });
-
-
- that.chart.legend.dispatch.legendClick = function(d, i) {
- that.$('svg').find('g.nv-x g.tick').hide();
- };
- var elem = that.$('svg');
- that.svg = d3.select(elem[0]).datum(data);
- that.svg.transition().duration(0).call(that.chart);
- if (dataL.length > 0) {
- that.svg.datum(dataL).call(that.chart.legend);
- var legendObject = (that.$('svg').children()[0]);
- if (that.$(legendObject).is('g[class="nvd3 nv-legend"]')) {
- that.$(legendObject).remove();
- } else if (that.$(legendObject).is('text[class="nvd3 nv-noData"]')) {
- that.$(that.$('svg').children()[1]).remove();
- }
-
- }
-
-
-
- return that.chart;
- },
- callback: function(graph) {
- that.$(".box").resize(function() {
- if ($(this).find('.collapse-link i').hasClass('fa-chevron-up')) {
- that.boxOpen = true;
- var elem = that.$('[data-id=rHistogramGraph] svg');
- d3.select(elem[0])
- .transition().duration(0)
- .call(graph);
- } else {
- that.boxOpen = false;
- }
- });
- }
- });
-
- },
- updateGraph: function(data, dataL) {
-
- // Update the SVG with the new data and call chart
- this.svg.datum(data).transition().duration(0).call(this.chart);
- if (dataL.length > 0) {
- this.svg.datum(dataL).transition().duration(0).call(this.chart.legend);
- if (d3.select(this.$('svg').children().first()[0]).classed('nvd3 nv-legend')) {
- d3.select(this.$('svg').children().first()[0]).remove();
- }
- var legendObject = (this.$('svg').children()[0]);
- if (this.$(legendObject).is('g[class="nvd3 nv-legend"]')) {
- this.$(legendObject).remove();
- } else if (this.$(legendObject).is('text[class="nvd3 nv-noData"]')) {
- this.$(this.$('svg').children()[1]).remove();
- }
- }
-
- },
- createBrush: function() {
- var that = this,
- svgElem = this.$('svg'),
- //var elem = svgElem.find('g.nv-barsWrap.nvd3-svg .nv-groups');
- elem = svgElem.find('g.nv-axis.nvd3-svg .nv-axis');
- if (elem.length == 0 || elem.length == undefined) {
- return;
- }
-
- var height = (elem.get(0).getBBox().height === 0) ? that.svgHeight : elem.get(0).getBBox().height + 2,
- width = (elem.get(0).getBBox().width === 0) ? that.svgWidth : elem.get(0).getBBox().width
-
- /*var x = d3.time.scale().range([0, width]).domain(d3.extent(that.ExtentValue.domain().map(function(d) {
- return that.dateUtil.getMomentObject(d);
- })));*/
-
- var x = d3.time.scale().range([0, width]).domain([new Date(this.params.from), new Date(this.params.to)])
- var brush = d3.svg.brush()
- .x(x)
- .on("brush", brushed)
- .on('brushend', brushend);
-
- if (that.histogramView) {
- var brushElem = svgElem.find('g.nv-barsWrap.nvd3-svg .nv-groups');
- } else {
- var brushElem = svgElem.find('g.nv-linesWrap.nvd3-svg .nv-groups');
- }
- brushElem.find('.x-brush').parent().remove();
- var svg = d3.select(brushElem[0])
- .insert("g", ":first-child")
- .attr("transform", "translate(" + elem.get(0).getBBox().x + ",-9)");
-
-
- svg.append("g")
- .attr("class", "x-brush brush")
- .call(brush)
- .selectAll("rect")
- .attr("y", 6)
- .attr("height", height);
-
- function brushed() {
- that.brushValue = brush.extent();
- /* if (that.showDatePicker) {
- that.graphVent.trigger("date:setDate", {
- 'from': that.dateUtil.getMomentObject(that.brushValue[0]),
- 'to': that.dateUtil.getMomentObject(that.brushValue[1])
- });
- } else {*/
- if (!moment(that.brushValue[0]).isSame(that.brushValue[1])){
- that.vent.trigger("date:setDate", {
- 'from': that.dateUtil.getMomentObject(that.brushValue[0]),
- 'to': that.dateUtil.getMomentObject(that.brushValue[1])
- });
- }
- /*}*/
-
- }
-
- function brushend() {
-
- if (moment(brush.extent()[0]).isSame(brush.extent()[1])) {
- that.createBrush();
- return;
- }
- $('.nvtooltip').css('opacity', '0');
- that.$('g.x-brush').parent().remove();
- /* if (that.showDatePicker) {
- that.graphVent.trigger("date:click", {
- dateRangeLabel: "Custom Range",
- });
- } else {*/
- that.vent.trigger("date:click", {
- dateRangeLabel: "Custom Range",
- });
- /* }*/
-
-
- }
-
- },
- graphXAxisBreak: function() {
- var insertLinebreaks = function() {
- var el = d3.select(this);
- var words = $(this).text().split('-');
- $(this).text('');
- for (var i = 0; i < words.length; i++) {
- var tspan = el.append('tspan').text(words[i]);
- if (i > 0)
- tspan.attr('x', 0).attr('dy', '19');
- }
- };
- if (this.$('svg').find('g.nv-x g.tick text').first().text().split('-').length > 1) {
- this.$('svg').find('g.nv-x g.tick text').each(insertLinebreaks);
- this.$('svg').find('g.nv-x g.nv-axisMaxMin text').each(insertLinebreaks);
- this.$('svg').find('g.nv-x g.tick').show();
- } else {
- this.$('svg').find('g.nv-x g.tick').show();
- }
- },
- reinitializeFilter: function(value) {
- this.fetchGraphData(value);
- /* if (this.showDatePicker) {
- this.graphVent.trigger("date:setDate", value);
- } else {*/
- this.vent.trigger("date:setDate", value);
- /* }*/
-
- },
- onTabRefresh: function(e) {
- this.fetchGraphData({});
- },
- reRenderView: function(params) {
- this.fetchGraphData(params);
- /* if (this.showDatePicker) {
- this.graphVent.trigger("date:setDate", _.extend(this.params, params));
- } else {*/
- this.vent.trigger("date:setDate", _.extend(this.params, params));
- /*}*/
-
- }
- });
-
-
-});
http://git-wip-us.apache.org/repos/asf/ambari/blob/02360dd5/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GridGraphLayoutView.js
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GridGraphLayoutView.js b/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GridGraphLayoutView.js
deleted file mode 100644
index ae76ba8..0000000
--- a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/graphs/GridGraphLayoutView.js
+++ /dev/null
@@ -1,594 +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',
- 'backbone',
- 'moment',
- 'd3.tip',
- 'utils/Globals',
- 'utils/Utils',
- 'collections/VLogList',
- 'hbs!tmpl/graphs/GridGraphLayoutView_tmpl',
- 'bootstrap-daterangepicker',
- 'nv'
-], function(require, Backbone, moment, tip, Globals, Utils, VLogList, GridGraphLayoutViewTmpl, daterangepicker, nv) {
- 'use strict';
-
- return Backbone.Marionette.Layout.extend(
- /** @lends GridGraphLayoutView */
- {
- _viewName: 'GridGraphLayoutView',
-
- template: GridGraphLayoutViewTmpl,
-
-
- /** ui selector cache */
- ui: {
- histoGraph: "div[data-id='rHistogramGraph']",
- dateRange: "#dateRange",
- selectDateRange: ".selectDateRange",
- dateRangeTitle: "span[data-id='dateRangeTitle']",
- gridSettingPopup: "[data-id='gridSettingPopup']",
- gridHeader: ".gridHeader"
-
- },
-
- /** ui events hash */
- events: function() {
- var events = {};
- events['change ' + this.ui.viewType] = 'onViewTypeChange';
- events['click [data-id="refresh-tab-graph"]'] = 'onTabRefresh';
- events['click ' + this.ui.gridSettingPopup] = 'onGridSettingPopupClick';
- return events;
- },
-
- /**
- * intialize a new GridGraphLayoutView Layout
- * @constructs
- */
- initialize: function(options) {
- _.extend(this, _.pick(options, 'globalVent', 'params', 'viewType', 'dashboard', 'model', 'gridHelp', 'collection', 'showHeader'));
- this.vent = new Backbone.Wreqr.EventAggregator();
- if(! this.collection){
- this.collection = new VLogList([], {
- state: {
- firstPage: 0,
- pageSize: 999999999,
-
- }
- });
- this.collection.url = Globals.baseURL + "audit/logs/anygraph";
- this.collection.modelAttrName = "graphData";
- }
- this.dateUtil = Utils.dateUtil;
- this.dateRangeLabel = new String();
-
- this.bindEvents();
- this.graphParams = {};
- this.unit = "+1HOUR";
- var modalParams = this.model.get('params');
- if (modalParams && modalParams.unit) {
- this.unit = modalParams.unit
- }
-
- this.firstRender = true;
-
- if (!this.viewType || this.viewType == Globals.graphType.HISTOGRAM.value) {
- this.histogramView = true;
- } else if (this.viewType == Globals.graphType.MULTILINE.value) {
- this.lineView = true;
- } else if (this.viewType == Globals.graphType.PIE.value) {
- this.pieView = true;
- }
-
- },
- bindEvents: function() {
- this.listenTo(this.collection, "reset", function(collection) {
- this.$(".loader").hide();
- this.$("#loaderGraph").hide();
- }, this);
- this.listenTo(this.collection, 'request', function() {
- this.$(".loader").show();
- this.$("#loaderGraph").show();
- }, this);
- this.listenTo(this.collection, 'sync error', function() {
- this.$(".loader").hide();
- this.$("#loaderGraph").hide();
- }, this);
- this.listenTo(this.vent, "graph:update", function(options) {
-
- options['params'] = this.params
- if (this.model) {
- options['id'] = this.model.get('id')
- this.model.clear().set(options)
- }
- this.configureChart(options);
- }, this);
- this.listenTo(this.vent, "graph:data:update", function(params, options) {
- this.params = params
- options['params'] = this.params
- if (this.model) {
- options['id'] = this.model.get('id')
- this.model.clear().set(options)
- }
- this.fetchGraphData(params, options);
- }, this);
- this.listenTo(this.vent, "graph:grid:update", function(options) {
- options['params'] = this.params
- if (this.model) {
- options['id'] = this.model.get('id')
- this.model.clear().set(options)
- }
- this.updateGrid(options)
- }, this);
-
- },
- onRender: function() {
- var that = this;
- if (this.model) {
- var mObject = this.model.toJSON();
- if (mObject.params) {
- this.params = mObject.params;
- this.fetchGraphData(mObject.params, mObject);
- }
- this.updateGrid(mObject);
- }
- if (this.gridHelp) {
- setTimeout(function() {
- this.$('.gridSettinghand').hide();
- }, 3000);
- } else {
- this.$('.gridSettinghand').hide();
- }
- if(! _.isUndefined(this.showHeader)){
- if(! this.showHeader)
- this.$(".gridHeader").hide();
- }
- },
-
- fetchGraphData: function(params, options) {
- var that = this;
- that.$("#loaderGraph").show();
- that.$(".loader").show();
- _.extend(this.collection.queryParams, params);
- this.collection.fetch({
- reset: true,
- success: function() {
- that.createDataForGraph(options)
- }
- });
- },
- updateGrid: function(options) {
- if (options.title) {
- this.ui.gridHeader.find('.gridTitle').text(options.title);
- }
- /*if (options.gridSizeX && options.gridSizeY) {
- this.dashboard.resize_widget(this.$el.parents('li'), parseInt(options.gridSizeX), parseInt(options.gridSizeY))
- }*/
- },
- createDataForGraph: function(options) {
- var that = this,
- color = d3.scale.category20().range();
- this.data = [];
- this.dataL = [];
- if (this.lineView || this.histogramView) {
- _.each(this.collection.models, function(model, i) {
- var Obj = {
- key: model.get('name'),
- values: model.get('dataCount').map(function(object) {
- return {
- x: (options && options.xAxis == "evtTime") ? (that.dateUtil.getMomentObject(object.name)) : (object.name), //(new Date(object.name)).toUTCString(),
- y: parseFloat(object.value)
- }
- })
- };
- if (that.histogramView) {
- Obj['color'] = (((""+model.get('name')).toUpperCase() === 'ERROR') ? ("#E81D1D") :
- ( (""+model.get('name')).toUpperCase() === 'INFO') ? ("#2577B5") :
- ( (""+model.get('name')).toUpperCase() === 'WARN') ? ("#FF8916") :
- ( (""+model.get('name')).toUpperCase() === 'FATAL') ? ("#830A0A") :
- ( (""+model.get('name')).toUpperCase() === 'DEBUG') ? ("#65E8FF") :
- ( (""+model.get('name')).toUpperCase() === 'TRACE') ? ("#888888") :
- ( (""+model.get('name')).toUpperCase() === 'UNKNOWN') ? ("#bdbdbd") : color[i]);
- } else {
- Obj['color'] = color[i];
- }
- that.data.push(Obj);
- });
- }
- if (this.pieView) {
- _.each(this.collection.models, function(model, i) {
- that.data = model.get('dataCount').map(function(object) {
- return {
- x: (object.name),
- y: parseFloat(object.value)
- }
- });
- });
- }
- if (that.histogramView) {
- for (var i = this.data.length - 1; i >= 0; i--) {
- this.dataL.push(this.data[i])
- }
- }
- this.configureChart(options)
- //(!this.firstRender) ? this.updateGraph(this.data, this.dataL): this.renderGraph(this.data, this.dataL);
-
- },
- //Using NVD3
- configureChart: function(options) {
- var that = this,
- formatValue = d3.format(".2s");
-
- if (this.firstRender) {
- if (that.histogramView) {
- that.chart = nv.models.multiBarChart()
- .showControls(false)
- .showXAxis(true)
- .showLegend(true);
- that.chart.groupSpacing(0.6) // for bar width and aspace
- this.showLegend = true
- } else if (this.lineView) {
- that.chart = nv.models.lineChart().options({
- transitionDuration: 300,
- useInteractiveGuideline: true
- });
- //We want nice looking tooltips and a guideline!
-
- that.chart.showLegend(true); //Show the legend, allowing users to turn on/off line series.
- that.chart.showYAxis(true); //Show the y-axis
- that.chart.showXAxis(true);
-
- } else if (this.pieView) {
-
- var height = this.$el.find('.gridGraph').height() || 260;
- var width = this.$el.find('.gridGraph').width() - 20 || 420;
- that.chart = nv.models.pieChart()
- .x(function(d) {
- return d.x
- })
- .y(function(d) {
- return d.y
- })
- .width(width)
- .height(height);
- }
- that.chart.legend.margin({
- top: 5,
- right: 50,
- left: 90,
- bottom: 10
- });
- that.chart.margin({
- right: 30,
- left: 30
- });
-
- that.chart.dispatch.on('renderEnd', function() {
- if (that.firstRender) {
- that.firstRender = false
- var svgElem = that.$('svg');
- if (that.histogramView) {
- var elem = svgElem.find('g.nv-barsWrap.nvd3-svg .nv-groups');
- } else {
- var elem = svgElem.find('g.nv-linesWrap.nvd3-svg .nv-groups');
- }
- if (elem.get(0)) {
- that.svgHeight = elem.get(0).getBBox().height;
- that.svgWidth = elem.get(0).getBBox().width;
- }
- }
- that.graphXAxisBreak();
- });
- /* that.chart.xAxis
- .tickFormat(function(d) {
- var date = that.dateUtil.getTimeZoneFromMomentObject(((that.histogramView) ? (d) : (that.dateUtil.getMomentObject(d))));
- return (d3.time.format('%H:%M:%S - %m/%d/%y')(date))
- });
- that.chart.yAxis
- .tickFormat(function(d) {
- return formatValue(d).replace('G', 'B');
- });*/
- /* that.chart.tooltip.contentGenerator(
- function(data) {
- var tootTipTemplate = '<div>' +
- '<table>' +
- '<thead>' +
- '<tr>' +
- '<td colspan="3"><strong class="x-value">' + data[((that.histogramView) ? ('data') : ('point'))].x.format('MM/DD/YYYY') + '</strong></td>' +
- '</tr>' +
- '<tr>' +
- '<td colspan="3"><strong class="x-value">' + data[((that.histogramView) ? ('data') : ('point'))].x.format('H:mm:ss') + '</strong></td>' +
- '</tr>' +
- '</thead>' +
- '<tbody>' +
- '<tr>' +
- '<td class="legend-color-guide">' +
- '<div style="background-color: ' + ((that.histogramView) ? (data.color) : (data.series[0].color)) + '"></div>' +
- '</td>' +
- '<td class="key">' + ((that.histogramView) ? (data.data.key) : (data.series[0].key)) + '</td>' +
- '<td class="value">' + ((that.histogramView) ? (data.data.size) : (data.series[0].value)) + '</td>' +
- '</tr>' +
- '</tbody>' +
- '</table>' +
- '</div>'
-
- return tootTipTemplate
- });*/
- that.chart.legend.dispatch.legendClick = function(d, i) {
- that.$('svg').find('g.nv-x g.tick').hide();
- };
- that.$el.parents('.gs-w').resize(function() {
- if (that.svg) {
- if (that.pieView) {
- that.chart.height(that.$el.find('.gridGraph').height());
- that.chart.width(that.$el.find('.gridGraph').width() - 20);
- }
- that.svg.transition().duration(0).call(that.chart);
- } else {
- var elem = that.$('[data-id=rHistogramGraph] svg');
- d3.select(elem[0])
- .attr('width', that.$el.parents('.brick').width())
- .attr('height', that.$el.parents('.brick').height())
- .transition().duration(0)
- .call(that.chart);
- }
- });
- }
-
-
- // For legend and control margin
- if (options) {
- if(options.rotateXaxis){
- this.chart.xAxis.rotateLabels(options.rotateXaxis);
- }
- if (this.histogramView) {
- if (options.stackOrGroup && options.stackOrGroup == "Group") {
- this.chart.stacked(false);
- } else {
- this.chart.stacked(true);
- }
- }
-
- if (this.histogramView || this.lineView) {
- if (options.showX) {
- that.chart.showXAxis(true);
- if (options.xAxis) {
-
- if (options.xAxis == "evtTime") {
- var xTimeFormat = ""
- if (options.xTimeFormat) {
- xTimeFormat = options.xTimeFormat;
- } else {
- xTimeFormat = "%H:%M:%S.%L - %m/%d/%y"
- }
- this.chart.x(function(d) {
- return d.x
- });
- this.chart.xAxis
- .tickFormat(function(d) {
- var xAxisFormat = xTimeFormat;
- var date = that.dateUtil.getTimeZoneFromMomentObject(((that.histogramView) ? (d) : (that.dateUtil.getMomentObject(d))));
- return (d3.time.format(xAxisFormat)(date))
- });
- if (options.startDate && options.endDate) {}
- if (options.unit) {}
- } else {
-
- if (!this.histogramView) {
- this.chart.xAxis
- .tickFormat(function(d) {
- return that.data[0].values[d].x // x will be same for stack and group only y is different so we take name of x from first value array
- });
- this.chart.x(function(d, i) {
- return i
- });
- this.chart.interpolate('basis')
- } else {
- this.chart.xAxis
- .tickFormat(function(d) {
- return d
- });
- this.chart.x(function(d) {
- return d.x
- });
- }
- }
- }
- } else {
- this.chart.showXAxis(false);
- }
-
- // Y axis Setting
- if (options.showY) {
- that.chart.showYAxis(true);
- var yFormat = ""
- if (options.yAxisFormat && options.yAxisFormat.length) {
- yFormat = options.yAxisFormat;
- } else {
- yFormat = ".2s"
- }
- var yformatValue = d3.format(yFormat);
- this.chart.y(function(d) {
- return parseInt(d.y)
- })
- this.chart.yAxis
- .tickFormat(function(d) {
- return yformatValue(d) //.replace('G', 'B');
- });
-
- } else {
- this.chart.showYAxis(false);
- }
- }
- if (this.pieView) {
- if (options.pieOrDonut == "donut") {
- that.chart.donut(true);
- that.chart.donutRatio(0.35);
- } else {
- that.chart.donut(false);
- }
- }
-
-
-
- // Legend Setting
- if (options.showLegend) {
- this.chart.showLegend(true);
- this.showLegend = true;
- } else {
- this.chart.showLegend(false);
- this.showLegend = false;
- }
- // refreshInterval
-
- if (options.refreshInterval && options.refreshInterval.length) {
- this.setRefereshInterval(options);
- } else {
- if (this.refereshInterval) {
- this.clearRefereshInterval();
- }
- }
- this.updateGraph(options)
-
- } else {
- this.updateGraph()
- }
-
- },
- setRefereshInterval: function(options) {
- var that = this;
- clearInterval(this.refereshInterval);
- this.refereshInterval = setInterval(function() {
- that.fetchGraphData({}, options);
- }, options.refreshInterval);
- },
- clearRefereshInterval: function() {
- clearInterval(this.refereshInterval);
- },
- updateGraph: function(options) {
- if (options) {
- var elem = this.$('svg').empty();
- } else {
- var elem = this.$('svg');
- }
- // Update the SVG with the new this.data and call chart
- if (this.data) {
- this.svg = d3.select(elem[0]).datum(this.data);
- if (this.pieView) {
- this.chart.height(this.$el.find('.gridGraph').height());
- this.chart.width(this.$el.find('.gridGraph').width() - 20);
- }
- this.svg.transition().duration(0).call(this.chart);
- //this.svg.datum(this.data).transition().duration(0).call(this.chart);
- if (this.dataL.length > 0 && this.showLegend) {
- this.svg.datum(this.dataL).transition().duration(0).call(this.chart.legend);
- if (d3.select(this.$('svg').children().first()[0]).classed('nvd3 nv-legend')) {
- d3.select(this.$('svg').children().first()[0]).remove();
- }
- var legendObject = (this.$('svg').children()[0]);
- if (this.$(legendObject).is('g[class="nvd3 nv-legend"]')) {
- this.$(legendObject).remove();
- } else if (this.$(legendObject).is('text[class="nvd3 nv-nodata"]')) {
- this.$(this.$('svg').children()[1]).remove();
- }
-
- }
- }
-
-
- },
- graphXAxisBreak: function() {
- var insertLinebreaks = function() {
- var el = d3.select(this);
- var words = $(this).text().split('-');
- $(this).text('');
- for (var i = 0; i < words.length; i++) {
- var tspan = el.append('tspan').text(words[i]);
- if (i > 0)
- tspan.attr('x', 0).attr('dy', '19');
- }
- };
- if (this.$('svg').find('g.nv-x g.tick text').first().text().split('-').length > 1) {
- this.$('svg').find('g.nv-x g.tick text').each(insertLinebreaks);
- this.$('svg').find('g.nv-x g.nv-axisMaxMin text').each(insertLinebreaks);
- this.$('svg').find('g.nv-x g.tick').show();
- } else {
- this.$('svg').find('g.nv-x g.tick').show();
- }
- },
- setupDialog: function(options) {
- var that = this;
- require(['views/common/JBDialog'], function(JBDialog) {
- var opts = _.extend({
- appendTo: that.$el,
- modal: true,
- resizable: false,
- beforeClose: function(event, ui) {
- that.onDialogClosed();
- }
- }, options);
- var dialog = that.dialog = new JBDialog(opts).render().open();
- })
-
- },
- onGridSettingPopupClick: function() {
- this.$('.gridSettinghand').hide();
- this.dashboard.disable();
- var that = this;
- var overlay = document.createElement('div');
- overlay.setAttribute('class', 'overlayDashboard');
- this.$el.append(overlay);
- require(['views/dialog/GridGraphSettingView'], function(GridGraphSettingView) {
- var view = new GridGraphSettingView({
- vent: that.vent,
- params: (that.model) ? (that.params) : ({}),
- model: that.model,
- viewType: that.viewType
- });
-
- that.setupDialog({
- title: "Setting",
- content: view,
- viewType: 'Save',
- width: 560,
- height: 500,
- buttons: [{
- id: "cancelBtn",
- text: "Close",
- "class": "btn btn-default",
- click: function() {
- that.onDialogClosed();
- }
- }]
- });
- });
- },
- onDialogClosed: function() {
- this.$el.find('.overlayDashboard').remove();
- this.dashboard.enable();
- if (this.dialog) {
- this.dialog.close && this.dialog.close();
- this.dialog.remove && this.dialog.remove();
- this.dialog = null;
- }
- }
- });
-
-
-});
http://git-wip-us.apache.org/repos/asf/ambari/blob/02360dd5/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/tabs/ComparisonLayoutView.js
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/tabs/ComparisonLayoutView.js b/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/tabs/ComparisonLayoutView.js
deleted file mode 100644
index 73cca56..0000000
--- a/ambari-logsearch/ambari-logsearch-web/src/main/webapp/scripts/views/tabs/ComparisonLayoutView.js
+++ /dev/null
@@ -1,93 +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',
- 'backbone',
- 'utils/Utils',
- 'hbs!tmpl/tabs/ComparisonLayoutView_tmpl'
-],function(require,Backbone,Utils,ComparisonLayoutViewTmpl) {
- 'use strict';
-
- return Backbone.Marionette.Layout.extend(
- /** @lends ComparisonLayoutView */
- {
- _viewName: 'ComparisonLayoutView',
-
- template: ComparisonLayoutViewTmpl,
-
-
- /** ui selector cache */
- ui: {
- comparisonTab: '.comparisonTab'
- },
-
- /** ui events hash */
- events: function() {
- var events = {};
- return events;
- },
- regions: { },
-
- /**
- * intialize a new ComparisonLayoutView Layout
- * @constructs
- */
- initialize: function(options) {
- _.extend(this, _.pick(options, 'globalVent', 'params', 'componetList'));
- },
- bindEvents: function() {},
- onRender: function() {
- this.createRegion()
- },
- createRegion: function() {
- var that = this;
- require(['views/tabs/ComparisonView'],function(ComparisonView){
-
- if (that.componetList) {
- var $parent = that.ui.comparisonTab;
- _.each(that.componetList, function(object,i) {
- var id = (object.host_name + '_' + object.component_name).replace(/\./g, "_");
- if(i % 2 == 0 && i > 0){
- var $div = $("<div class='row comparisonTab'></div>");
- that.ui.comparisonTab.parent().append($div);
- $parent = $div;
- }
- $parent.append('<div id="' + id + '" style="position: relative;"></div>');
-
- var region = {};
- region[id] = '#' + id;
- that.addRegions(region);
- var region = that.getRegion(id);
- region.show(new ComparisonView({
- globalVent: that.globalVent,
- params: _.extend({},that.params, {
- 'host_name': object.host_name,
- 'component_name': object.component_name
- }),
- datePickerPosition:(((i+1) % 2 == 0)?("left"):("right"))
- }));
- })
- }
- })
- }
-
-
- });
-
-
-});