Repository: ambari Updated Branches: refs/heads/branch-2.5 9583ede2a -> 2bd95deb0
AMBARI-20834. LogSearch: LogSearch UI support for viewing data from multiple clusters (akovalenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2bd95deb Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2bd95deb Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2bd95deb Branch: refs/heads/branch-2.5 Commit: 2bd95deb0e4f3d433d8ba703f31ea288b842be32 Parents: 9583ede Author: Aleksandr Kovalenko <akovale...@hortonworks.com> Authored: Mon Apr 24 18:59:27 2017 +0300 Committer: Aleksandr Kovalenko <akovale...@hortonworks.com> Committed: Tue Apr 25 15:29:19 2017 +0300 ---------------------------------------------------------------------- .../scripts/views/audit/AuditTabLayoutView.js | 7 +- .../views/common/SelectClusterDropdown.js | 102 +++++++++++++++++++ .../scripts/views/graphs/GraphLayoutView.js | 32 +++++- .../views/tabs/HierarchyTabLayoutView.js | 17 +++- .../src/main/webapp/styles/style.css | 20 +++- .../templates/common/DatePickerLayout_tmpl.html | 10 +- .../common/SelectClusterDropdown_tmpl.html | 32 ++++++ .../templates/graphs/GraphLayoutView_tmpl.html | 7 +- .../tabs/HierarchyTabLayoutView_tmpl.html | 7 +- 9 files changed, 212 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/audit/AuditTabLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/audit/AuditTabLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/audit/AuditTabLayoutView.js index 7710156..e8f38ae 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/audit/AuditTabLayoutView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/audit/AuditTabLayoutView.js @@ -18,6 +18,7 @@ define(['require', 'backbone', + 'App', 'utils/Globals', 'utils/Utils', 'utils/ViewUtils', @@ -26,7 +27,7 @@ define(['require', 'models/VAuditLog', 'hbs!tmpl/audit/AuditTabLayoutView_tmpl', 'moment' -], function (require, Backbone, Globals, Utils, ViewUtils, VGroupList, VAuditLogList, VAuditLog, AuditTabLayoutViewTmpl, moment) { +], function (require, Backbone, App, Globals, Utils, ViewUtils, VGroupList, VAuditLogList, VAuditLog, AuditTabLayoutViewTmpl, moment) { 'use strict'; @@ -133,7 +134,9 @@ define(['require', params: that.defaultParams, viewType: Globals.graphType.MULTILINE.value, showDatePicker: true, - futureDate: false + futureDate: false, + showSelectClustersDropdown: true, + loadClustersUrl: App.baseUrl + 'audit/logs/clusters' })); }) }, http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/SelectClusterDropdown.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/SelectClusterDropdown.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/SelectClusterDropdown.js new file mode 100644 index 0000000..9bd78ef --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/SelectClusterDropdown.js @@ -0,0 +1,102 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + + +define(['require', 'backbone', 'hbs!tmpl/common/SelectClusterDropdown_tmpl'], function (require, Backbone, SelectClusterDropdownTmpl) { + 'use strict'; + + var SelectClusterDropdown = Backbone.Marionette.ItemView.extend( + { + _viewName: "SelectClusterDropdown", + + template: SelectClusterDropdownTmpl, + templateHelpers : function(){ + return { + clusterNames: this.clusterNames + }; + }, + /** ui selector cache */ + ui: { + menuItem: ".dropdown-menu a", + applyButton: ".apply-button" + }, + className: "select-cluster-dropdown", + + events: function () { + var events = {}; + events['click ' + this.ui.menuItem] = 'onClusterSelectChange'; + events['click ' + this.ui.applyButton] = 'applyClusterSelection'; + return events; + }, + + clusterNames: [], + + initialize: function(options) { + _.extend(this, _.pick(options, 'clustersUrl', 'vent')); + this.loadClusters(); + }, + + loadClusters: function () { + var self = this; + $.ajax(this.clustersUrl).then(function (data) { + self.clusterNames = data; + self.render(); + }); + }, + + onClusterSelectChange: function (e) { + var self = this; + var item = e.currentTarget; + setTimeout(function () { + self.selectCluster(item); + }, 0); + return false; + }, + + selectCluster: function (item) { + var cluster = item.innerText.trim(); + var dropdown = $(item.parentElement.parentElement); + var checkbox = $(item).find('input'); + var newValue = !checkbox.prop('checked'); + checkbox.prop('checked', newValue); + if (cluster === 'All Clusters') { + dropdown.find('input').prop('checked', newValue); + } else { + dropdown.find('input:first').prop('checked', !dropdown.find('input.cluster-checkbox:not(:checked)').length); + } + }, + + applyClusterSelection: function (event) { + var clusterNames = []; + var clustersParam = ''; + $(event.target).parent().find('.cluster-checkbox:checked').each(function(i, element){ + clusterNames.push($(element).parent().text().trim()); + }); + + clustersParam = clusterNames.length ? clusterNames.join(',') : 'NONE'; + + this.vent.trigger("logtime:filter", { + clusters: clustersParam + }); + } + + }); + + return SelectClusterDropdown; +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js index 728d721..6eb4020 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js @@ -36,6 +36,12 @@ define(['require', template: GraphLayoutViewTmpl, + templateHelpers: function () { + return { + showSelectClustersDropdown: this.showSelectClustersDropdown + } + }, + /** ui selector cache */ ui: { histoGraph: "div[data-id='rHistogramGraph']", @@ -47,6 +53,11 @@ define(['require', }, + /** Layout sub regions */ + regions: { + RSelectClusterDropdown: "#r_SelectClusterDropdown" + }, + /** ui events hash */ events: function() { var events = {}; @@ -60,7 +71,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker', 'showUnit','futureDate')); + _.extend(this, _.pick(options, 'vent', 'globalVent', 'params', 'viewType', 'showDatePicker', 'showUnit','futureDate', 'showSelectClustersDropdown', 'loadClustersUrl')); /* if (this.showDatePicker) { this.graphVent = new Backbone.Wreqr.EventAggregator(); }*/ @@ -68,8 +79,7 @@ define(['require', this.collection = new VLogList([], { state: { firstPage: 0, - pageSize: 999999999, - + pageSize: 999999999 } }); this.dateUtil = Utils.dateUtil; @@ -173,6 +183,9 @@ define(['require', that.addRegions(region); this.renderDatePicker(regionName); } + if (this.showSelectClustersDropdown) { + this.renderSelectClusterDropdown(); + } if (this.histogramView) { this.ui.graphHeader.html('<i class="fa fa-signal"></i><span >Histogram</span>'); } else { @@ -205,8 +218,17 @@ define(['require', parentEl: that.$el, fetch: true, rangeLabel: true, - datePickerPosition : "left", - width: '65%' + datePickerPosition : "left" + })); + }); + }, + renderSelectClusterDropdown: function() { + var that = this; + require(['views/common/SelectClusterDropdown'], function (SelectClusterDropdownView) { + that.RSelectClusterDropdown.show(new SelectClusterDropdownView({ + vent: that.vent, + globalVent: that.globalVent, + clustersUrl: that.loadClustersUrl })); }); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js index 43ee5db..bc9b16c 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/tabs/HierarchyTabLayoutView.js @@ -17,6 +17,7 @@ */ define(['require', 'backbone', + 'App', 'utils/Globals', 'utils/Utils', 'moment', @@ -24,7 +25,7 @@ define(['require', 'collections/VLogList', 'collections/VGroupList', 'hbs!tmpl/tabs/HierarchyTabLayoutView_tmpl' -], function (require, Backbone, Globals, Utils, moment, ViewUtils, VLogList, VGroupList, HierarchyTabLayoutViewTmpl) { +], function (require, Backbone, App, Globals, Utils, moment, ViewUtils, VLogList, VGroupList, HierarchyTabLayoutViewTmpl) { 'use strict'; return Backbone.Marionette.Layout.extend( @@ -46,7 +47,8 @@ define(['require', RVisualSearchExCol: "#r_vsSearchExCol", RDatePicker: "#r_DatePicker", RLogSnapShot: "#r_LogSnapShot", - RAdvanceSearch: "#r_AdvanceSearch" + RAdvanceSearch: "#r_AdvanceSearch", + RSelectClusterDropdown: "#r_SelectClusterDropdown" }, /** ui selector cache */ @@ -142,6 +144,7 @@ define(['require', this.renderHistogram(); this.renderDatePicker(); this.renderLogSnapShot(); + this.renderSelectClusterDropdown(); this.componentsList.fetch({reset: true}); }, onShow: function () { @@ -318,6 +321,16 @@ define(['require', })); }); }, + renderSelectClusterDropdown: function () { + var that = this; + require(['views/common/SelectClusterDropdown'], function (SelectClusterDropdownView) { + that.RSelectClusterDropdown.show(new SelectClusterDropdownView({ + vent: that.vent, + globalVent: that.globalVent, + clustersUrl: App.baseUrl + 'service/logs/clusters' + })); + }); + }, fetchCollection: function (params) { $.extend(this.collection.queryParams, params); this.collection.fetch({reset: true}); http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/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 543533b..de9039e 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 @@ -849,7 +849,7 @@ div.columnmanager-visibilitycontrol { } .selectDateRange input { - width: 99%; + width: 97%; position: relative; padding-left: 36px; height: 35px; @@ -1057,7 +1057,6 @@ svg.nvd3-svg { margin-top: 7px; /*margin-left: 20px;*/ font-size: 9px; - float: left; font-weight: 300; border-radius: 3px; color: #000; @@ -2961,4 +2960,19 @@ button.defaultCancelBtn{ } .levelBox:last-of-type{ clear : right; -} \ No newline at end of file +} + +/*------------Select Cluster dropdown CSS--------------*/ +.select-cluster-dropdown ul.dropdown-menu { + margin-top: 0; +} + +.select-cluster-dropdown .dropdown-toggle { + width: 100%; +} +.select-cluster-dropdown label { + font-weight: normal; +} +.select-cluster-dropdown .divider { + margin: 0; +} http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/DatePickerLayout_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/DatePickerLayout_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/DatePickerLayout_tmpl.html index ed1df61..bdd8291 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/DatePickerLayout_tmpl.html +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/DatePickerLayout_tmpl.html @@ -14,16 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. --> -<div class="selectDateRange col-md-10 col-sm-10"> - <div class="col-md-11 col-sm-11 leftPad_0"> +<div class="selectDateRange col-md-12"> + <div class="col-md-7 col-sm-8 leftPad_0"> <i class="glyphicon glyphicon-calendar fa fa-calendar iStyle"></i> <input id="dateRange" class="col-md-4 form-control pull-left" readonly style="cursor:pointer;" /> </div> - <div class="col-md-1 col-sm-1"> + <div class="col-md-5 col-sm-4"> <button class="goBtn btn btn-success" type="button">Go</button> <!-- <button class="cancelBtn btn btn-xs btn-default" type="button">Cancel</button> --> + <span data-id="dateRangeTitle" class="dateRangeTitle"></span> </div> </div> -<div class="col-md-2 col-sm-2"> - <span data-id="dateRangeTitle" class="dateRangeTitle"></span> -</div> http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/SelectClusterDropdown_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/SelectClusterDropdown_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/SelectClusterDropdown_tmpl.html new file mode 100644 index 0000000..49ab11f --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/common/SelectClusterDropdown_tmpl.html @@ -0,0 +1,32 @@ +<!-- + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="button-group col-md-9 col-sm-9"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Cluster <span + class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#" tabIndex="-1"><label><input type="checkbox" checked/> All Clusters</label></a></li> + <li class="divider"></li> + {{#each clusterNames}} + <li> + <a href="#" tabIndex="-1"> + <label><input class="cluster-checkbox" type="checkbox" checked/> {{./this}}</label> + </a> + </li> + {{/each}} + </ul> +</div> +<button class="btn btn-success apply-button col-md-3 col-sm-3" type="button">Apply</button> http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html index 02b384c..7cfdabe 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/graphs/GraphLayoutView_tmpl.html @@ -40,7 +40,12 @@ <div class="loader" style="display: none;"> </div> <div> - <div class="col-md-12 addDatePicker"></div> + {{#if showSelectClustersDropdown}} + <div class="col-lg-10 col-md-9 col-sm-9 addDatePicker"></div> + <div class="col-lg-2 col-md-3 col-sm-3" id="r_SelectClusterDropdown"></div> + {{else}} + <div class="col-md-12 addDatePicker"></div> + {{/if}} <div class="myHistogram" data-id="rHistogramGraph"> <span class="unitposition" data-id ="showUnit"></span> <svg></svg> http://git-wip-us.apache.org/repos/asf/ambari/blob/2bd95deb/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html index d0d57ac..5af397c 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/templates/tabs/HierarchyTabLayoutView_tmpl.html @@ -20,9 +20,10 @@ </div> --> <div class="col-md-12"> <div class="row topLevelFilter"> - <div id="r_LogLevel" class="col-md-5"></div> - <div id="r_DatePicker" class="col-md-6 col-sm-10" style="margin-top: 13px;"></div> - <div id="r_LogSnapShot" class="col-md-1 col-sm-2"></div> + <div id="r_LogLevel" class="col-md-5 col-sm-12"></div> + <div id="r_DatePicker" class="col-md-4 col-sm-12" style="margin-top: 13px;"></div> + <div id="r_SelectClusterDropdown" class="col-md-2 col-sm-6" style="margin-top: 13px;"></div> + <div id="r_LogSnapShot" class="col-md-1 col-sm-6"></div> <div class="col-md-12 hiddeBox fixedSearchBox"> <!-- <div class="row row-margin-bottom"> <div class="col-md-12" id="r_vsSearch"></div>
