eagle-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ji...@apache.org
Subject incubator-eagle git commit: EAGLE-208 UI metric dashboard should support order & rename update tab directive & sortable directive to support tabs pane drag function.
Date Fri, 25 Mar 2016 08:53:13 GMT
Repository: incubator-eagle
Updated Branches:
  refs/heads/master 46ad97843 -> 57aa3d3ac


EAGLE-208 UI metric dashboard should support order & rename
update tab directive & sortable directive to support tabs pane drag function.

Author: @zombieJ
Reviewer: @qingwen220

Close #132


Project: http://git-wip-us.apache.org/repos/asf/incubator-eagle/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-eagle/commit/57aa3d3a
Tree: http://git-wip-us.apache.org/repos/asf/incubator-eagle/tree/57aa3d3a
Diff: http://git-wip-us.apache.org/repos/asf/incubator-eagle/diff/57aa3d3a

Branch: refs/heads/master
Commit: 57aa3d3acc25fb0d5d75757268c3fed2ca3eb9b0
Parents: 46ad978
Author: jiljiang <jiljiang@ebay.com>
Authored: Fri Mar 25 16:49:41 2016 +0800
Committer: jiljiang <jiljiang@ebay.com>
Committed: Fri Mar 25 16:49:41 2016 +0800

----------------------------------------------------------------------
 .../webapp/app/partials/config/application.html |  2 +-
 .../app/public/feature/metrics/controller.js    | 21 ++++++++---
 .../public/feature/metrics/page/dashboard.html  |  4 +--
 .../webapp/app/public/js/components/nvd3.js     |  2 +-
 .../webapp/app/public/js/components/sortable.js | 38 +++++++++++++-------
 .../webapp/app/public/js/components/tabs.js     | 13 ++++++-
 .../webapp/app/public/js/srv/applicationSrv.js  |  4 +--
 .../main/webapp/app/public/js/srv/siteSrv.js    |  2 +-
 .../src/main/webapp/app/public/js/srv/uiSrv.js  | 12 ++++++-
 9 files changed, 72 insertions(+), 26 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/partials/config/application.html
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/partials/config/application.html b/eagle-webservice/src/main/webapp/app/partials/config/application.html
index 0bf194c..95add15 100644
--- a/eagle-webservice/src/main/webapp/app/partials/config/application.html
+++ b/eagle-webservice/src/main/webapp/app/partials/config/application.html
@@ -69,7 +69,7 @@
 				</div>
 				<div class="form-group">
 					<label for="applicationGroup">Group</label>
-					<input type="text" class="form-control" id="applicationGroup" placeholder="(Optional)
Group name" ng-model="applications[application.tags.application].groupName">
+					<input type="text" class="form-control" id="applicationGroup" placeholder="(Optional)
Group name" ng-model="applications[application.tags.application].group">
 				</div>
 				<div class="form-group">
 					<label for="applicationDescription">Description</label>

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/feature/metrics/controller.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/feature/metrics/controller.js b/eagle-webservice/src/main/webapp/app/public/feature/metrics/controller.js
index 043cdfb..a2ac640 100644
--- a/eagle-webservice/src/main/webapp/app/public/feature/metrics/controller.js
+++ b/eagle-webservice/src/main/webapp/app/public/feature/metrics/controller.js
@@ -215,14 +215,16 @@
 		};
 
 		// ======================== Menu ========================
+		function _checkGroupName(entity) {
+			if(common.array.find(entity.name, $scope.dashboard.groups, "name")) {
+				return "Group name conflict";
+			}
+		}
+
 		$scope.newGroup = function() {
 			if($scope.lock) return;
 
-			UI.createConfirm("Group", {}, [{field: "name"}], function(entity) {
-				if(common.array.find(entity.name, $scope.dashboard.groups, "name")) {
-					return "Group name conflict";
-				}
-			}).then(null, null, function(holder) {
+			UI.createConfirm("Group", {}, [{field: "name"}], _checkGroupName).then(null, null, function(holder)
{
 				$scope.dashboard.groups.push({
 					name: holder.entity.name,
 					charts: []
@@ -235,6 +237,14 @@
 			});
 		};
 
+		function renameGroup() {
+			var group = $scope.tabHolder.selectedPane.data;
+			UI.updateConfirm("Group", {}, [{field: "name", name: "New Name"}], _checkGroupName).then(null,
null, function(holder) {
+				group.name = holder.entity.name;
+				holder.closeFunc();
+			});
+		}
+
 		function deleteGroup() {
 			var group = $scope.tabHolder.selectedPane.data;
 			UI.deleteConfirm(group.name).then(null, null, function(holder) {
@@ -256,6 +266,7 @@
 		$scope.menu = Authorization.isRole('ROLE_ADMIN') ? [
 			{icon: "cog", title: "Configuration", list: [
 				_menu_newChart,
+				{icon: "pencil", title: "Rename Group", func: renameGroup},
 				{icon: "trash", title: "Delete Group", danger: true, func: deleteGroup}
 			]},
 			{icon: "plus", title: "New Group", func: $scope.newGroup}

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/feature/metrics/page/dashboard.html
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/feature/metrics/page/dashboard.html
b/eagle-webservice/src/main/webapp/app/public/feature/metrics/page/dashboard.html
index 4e4f3a9..2acb954 100644
--- a/eagle-webservice/src/main/webapp/app/public/feature/metrics/page/dashboard.html
+++ b/eagle-webservice/src/main/webapp/app/public/feature/metrics/page/dashboard.html
@@ -55,9 +55,9 @@
 	</div>
 </div>
 
-<div tabs menu="menu" holder="tabHolder" ng-show="dashboard.groups.length">
+<div tabs menu="menu" holder="tabHolder" ng-show="dashboard.groups.length" data-sortable-model="Auth.isRole('ROLE_ADMIN')
? dashboard.groups : null">
 	<pane ng-repeat="group in dashboard.groups" data-data="group" data-title="{{group.name}}">
-		<div sortable class="row narrow" ng-model="group.charts" update-func="chartSwitchRefresh"
ng-show="group.charts.length">
+		<div uie-sortable ng-model="group.charts" class="row narrow" sortable-update-func="chartSwitchRefresh"
ng-show="group.charts.length">
 			<div ng-repeat="chart in group.charts track by $index" class="col-md-{{chart.size ||
6}}">
 				<div class="nvd3-chart-wrapper">
 					<div nvd3="chart._data" data-holder="chart._holder" data-title="{{chart.title ||
chart.metrics[0].metric}}" data-watching="false"

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/js/components/nvd3.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/js/components/nvd3.js b/eagle-webservice/src/main/webapp/app/public/js/components/nvd3.js
index 1f3c13a..8687c78 100644
--- a/eagle-webservice/src/main/webapp/app/public/js/components/nvd3.js
+++ b/eagle-webservice/src/main/webapp/app/public/js/components/nvd3.js
@@ -411,7 +411,7 @@ eagleComponents.directive('nvd3', function(nvd3) {
 		},
 		template :
 		'<div>' +
-			'<h3>{{title || config.title}}</h3>' +
+			'<h3 title="{{title || config.title}}">{{title || config.title}}</h3>' +
 		'</div>',
 		replace: true
 	};

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/js/components/sortable.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/js/components/sortable.js b/eagle-webservice/src/main/webapp/app/public/js/components/sortable.js
index be2fb16..c98c732 100644
--- a/eagle-webservice/src/main/webapp/app/public/js/components/sortable.js
+++ b/eagle-webservice/src/main/webapp/app/public/js/components/sortable.js
@@ -16,9 +16,11 @@
  * limitations under the License.
  */
 
-eagleComponents.directive('sortable', function($rootScope) {
+eagleComponents.directive('uieSortable', function($rootScope) {
 	'use strict';
 
+	var COLLECTION_MATCH = /^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/;
+
 	var _move = false;
 	var _selectElement;
 	var _overElement;
@@ -73,17 +75,26 @@ eagleComponents.directive('sortable', function($rootScope) {
 
 			if(_overElement[0] !== _selectElement[0]) {
 				// Process switch
-				var _oriIndex = angular.element(_selectElement).scope().$index;
-				var _tgtIndex = angular.element(_overElement).scope().$index;
 				var _oriHolder = _selectElement.holder;
 				var _tgtHolder = _overElement.holder;
-				var _oriScope = _oriHolder.scope;
-				var _tgtScope = _tgtHolder.scope;
-
-				var _oriUnit = _oriScope.ngModel[_oriIndex];
-				var _tgtUnit = _tgtScope.ngModel[_tgtIndex];
-				_oriScope.ngModel[_oriIndex] = _tgtUnit;
-				_tgtScope.ngModel[_tgtIndex] = _oriUnit;
+				var _oriSortableScope = _oriHolder.scope;
+				var _tgtSortableScope = _tgtHolder.scope;
+				var _oriScope = angular.element(_selectElement).scope();
+				var _tgtScope = angular.element(_overElement).scope();
+
+				var _oriRepeat = _selectElement.closest("[ng-repeat]").attr("ng-repeat");
+				var _tgtRepeat = _overElement.closest("[ng-repeat]").attr("ng-repeat");
+				var _oriMatch = _oriRepeat.match(COLLECTION_MATCH)[2];
+				var _tgtMatch = _tgtRepeat.match(COLLECTION_MATCH)[2];
+				var _oriCollection = _oriScope.$parent.$eval(_oriMatch);
+				var _tgtCollection = _tgtScope.$parent.$eval(_tgtMatch);
+				var _oriIndex = $.inArray(_oriCollection[_oriScope.$index], _oriSortableScope.ngModel);
+				var _tgtIndex = $.inArray(_tgtCollection[_tgtScope.$index], _tgtSortableScope.ngModel);
+
+				var _oriUnit = _oriSortableScope.ngModel[_oriIndex];
+				var _tgtUnit = _tgtSortableScope.ngModel[_tgtIndex];
+				_oriSortableScope.ngModel[_oriIndex] = _tgtUnit;
+				_tgtSortableScope.ngModel[_tgtIndex] = _oriUnit;
 
 				// Trigger event
 				_oriHolder.change(_oriUnit, _tgtUnit);
@@ -105,17 +116,20 @@ eagleComponents.directive('sortable', function($rootScope) {
 		restrict : 'AE',
 		scope: {
 			ngModel: "=",
-			updateFunc: "=?updateFunc"
+			sortableEnabled: "=?sortableEnabled",
+			sortableUpdateFunc: "=?sortableUpdateFunc"
 		},
 		link: function($scope, $element, $attrs, $ctrl) {
 			var _holder = {
 				scope: $scope,
 				change: function(source, target) {
-					if($scope.updateFunc) $scope.updateFunc(source, target);
+					if($scope.sortableUpdateFunc) $scope.sortableUpdateFunc(source, target);
 				}
 			};
 
 			$element.on("mousedown", ">", function(event) {
+				if($scope.sortableEnabled === false) return;
+
 				_selectElement = $(this);
 				_selectElement.holder = _holder;
 

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/js/components/tabs.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/js/components/tabs.js b/eagle-webservice/src/main/webapp/app/public/js/components/tabs.js
index 2a74a30..57bc8e4 100644
--- a/eagle-webservice/src/main/webapp/app/public/js/components/tabs.js
+++ b/eagle-webservice/src/main/webapp/app/public/js/components/tabs.js
@@ -31,6 +31,7 @@ eagleComponents.directive('tabs', function() {
 			icon: "@",
 			selected: "@?selected",
 			holder: "=?holder",
+			sortableModel: "=?sortableModel",
 
 			menuList: "=?menu"
 		},
@@ -75,6 +76,16 @@ eagleComponents.directive('tabs', function() {
 				return $scope.menuList;
 			};
 
+			$scope.tabSwitchUpdate = function (src, tgt) {
+				var _srcIndex = $.inArray(src.data, $scope.sortableModel);
+				var _tgtIndex = $.inArray(tgt.data, $scope.sortableModel);
+
+				if(_srcIndex !== -1 && _tgtIndex !== -1) {
+					$scope.sortableModel[_srcIndex] = tgt.data;
+					$scope.sortableModel[_tgtIndex] = src.data;
+				}
+			};
+
 			// =================== Linker ===================
 			function _linkerProperties(pane) {
 				Object.defineProperties(pane, {
@@ -179,7 +190,7 @@ eagleComponents.directive('tabs', function() {
 					'</div>' +
 				'</div>' +
 
-				'<ul class="nav nav-tabs" ng-class="{\'pull-right\': title}">' +
+				'<ul uie-sortable sortable-enabled="!!sortableModel" sortable-update-func="tabSwitchUpdate"
ng-model="paneList" class="nav nav-tabs" ng-class="{\'pull-right\': title}">' +
 					// Tabs
 					'<li ng-repeat="pane in getPaneList() track by $index" ng-class="{active: selectedPane
=== pane}">' +
 						'<a ng-click="setSelect(pane);">{{pane.title}}</a>' +

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/js/srv/applicationSrv.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/js/srv/applicationSrv.js b/eagle-webservice/src/main/webapp/app/public/js/srv/applicationSrv.js
index d911194..2c9e0b6 100644
--- a/eagle-webservice/src/main/webapp/app/public/js/srv/applicationSrv.js
+++ b/eagle-webservice/src/main/webapp/app/public/js/srv/applicationSrv.js
@@ -123,9 +123,9 @@
 								}
 							},
 							// Get format group name. Will mark as 'Others' if no group defined
-							group: {
+							groupName: {
 								get: function () {
-									return this.groupName || "Others";
+									return this.group || "Others";
 								}
 							},
 							configObj: {

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/js/srv/siteSrv.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/js/srv/siteSrv.js b/eagle-webservice/src/main/webapp/app/public/js/srv/siteSrv.js
index c97e9a1..907915d 100644
--- a/eagle-webservice/src/main/webapp/app/public/js/srv/siteSrv.js
+++ b/eagle-webservice/src/main/webapp/app/public/js/srv/siteSrv.js
@@ -142,7 +142,7 @@
 						_site.applicationList.push(siteApplication);
 						_site.applicationList.set[siteApplication.tags.application] = siteApplication;
 
-						_appGroup = _site.applicationGroup[_application.group] = _site.applicationGroup[_application.group]
|| [];
+						_appGroup = _site.applicationGroup[_application.groupName] = _site.applicationGroup[_application.groupName]
|| [];
 						_appGroup.push(_application);
 					}
 				});

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/57aa3d3a/eagle-webservice/src/main/webapp/app/public/js/srv/uiSrv.js
----------------------------------------------------------------------
diff --git a/eagle-webservice/src/main/webapp/app/public/js/srv/uiSrv.js b/eagle-webservice/src/main/webapp/app/public/js/srv/uiSrv.js
index f82c838..9d4874b 100644
--- a/eagle-webservice/src/main/webapp/app/public/js/srv/uiSrv.js
+++ b/eagle-webservice/src/main/webapp/app/public/js/srv/uiSrv.js
@@ -28,6 +28,14 @@
 	serviceModule.service('UI', function($rootScope, $q, $compile) {
 		var UI = {};
 
+		function _bindShortcut($dialog) {
+			$dialog.on("keydown", function (event) {
+				if(event.which === 13) {
+					$dialog.find(".confirmBtn").click();
+				}
+			});
+		}
+
 		function _fieldDialog(create, name, entity, fieldList, checkFunc) {
 			var _deferred, $mdl, $scope;
 
@@ -79,6 +87,8 @@
 				});
 			};
 
+			_bindShortcut($mdl);
+
 			return _deferred.promise;
 		}
 
@@ -188,7 +198,7 @@
 					'<div class="modal-footer">' +
 						'<p class="pull-left text-danger">{{checkFunc(entity)}}</p>' +
 						'<button type="button" class="btn btn-default" data-dismiss="modal" ng-disabled="lock">Close</button>'
+
-						'<button type="button" class="btn btn-primary" ng-click="confirm()" ng-disabled="checkFunc(entity)
|| emptyFieldList().length || lock" ng-if="config.confirm !== false">' +
+						'<button type="button" class="btn btn-primary confirmBtn" ng-click="confirm()" ng-disabled="checkFunc(entity)
|| emptyFieldList().length || lock" ng-if="config.confirm !== false">' +
 							'{{config.confirmDesc || (create ? "Create" : "Update")}}' +
 						'</button>' +
 					'</div>' +


Mime
View raw message