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-599] improve application config
Date Mon, 17 Oct 2016 07:41:51 GMT
Repository: incubator-eagle
Updated Branches:
  refs/heads/master eda6e586b -> ecda7d5ab


[EAGLE-599] improve application config

* Support JSON import
* UI adjust - separate the general fields & merge env and config tab

Author: zombieJ <smith3816@gmail.com>

Closes #519 from zombieJ/EAGLE-599.


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

Branch: refs/heads/master
Commit: ecda7d5abfe30125f9c9b7ee3ebf8e8a49ce054e
Parents: eda6e58
Author: zombieJ <smith3816@gmail.com>
Authored: Mon Oct 17 15:41:24 2016 +0800
Committer: zombieJ <smith3816@gmail.com>
Committed: Mon Oct 17 15:41:24 2016 +0800

----------------------------------------------------------------------
 .../app/dev/partials/integration/site.html      | 105 +++++++++++++-----
 .../app/dev/public/js/ctrls/integrationCtrl.js  | 108 +++++++++++++++----
 2 files changed, 164 insertions(+), 49 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/ecda7d5a/eagle-server/src/main/webapp/app/dev/partials/integration/site.html
----------------------------------------------------------------------
diff --git a/eagle-server/src/main/webapp/app/dev/partials/integration/site.html b/eagle-server/src/main/webapp/app/dev/partials/integration/site.html
index db6b7c7..ce0cddd 100644
--- a/eagle-server/src/main/webapp/app/dev/partials/integration/site.html
+++ b/eagle-server/src/main/webapp/app/dev/partials/integration/site.html
@@ -21,7 +21,7 @@
 
 	<div class="form-group">
 		<label>Site</label>
-		<input type="text" class="form-control" readonly ng-model="site.siteName">
+		<input type="text" class="form-control" readonly ng-model="siteName">
 	</div>
 	<div class="form-group">
 		<label>Description</label>
@@ -48,7 +48,7 @@
 				<th>Version</th>
 				<th>Description</th>
 				<!--th>Quick Links</th-->
-				<th width="150">Actions</th>
+				<th width="110">Actions</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -84,7 +84,7 @@
 						</button>
 					</div>
 					<div class="btn-group btn-group-xs" ng-if="!app.installed">
-						<button class="btn btn-primary btn-sm" ng-click="installApp(app)">Install</button>
+						<button class="btn btn-primary btn-sm" ng-click="installApp(app)">Install Application</button>
 					</div>
 				</td>
 			</tr>
@@ -207,8 +207,7 @@
 			<div class="modal-body">
 				<ul class="nav nav-tabs">
 					<li><a href="[data-id='guide']" data-toggle="tab" data-id="guideTab">Installation</a></li>
-					<li><a href="[data-id='environment']" data-toggle="tab">Environment</a></li>
-					<li><a href="[data-id='configuration']" data-toggle="tab" data-id="configTab">Configuration</a></li>
+					<li><a href="[data-id='configuration']" data-toggle="tab" data-id="configTab">Setting</a></li>
 				</ul>
 
 				<div class="tab-content">
@@ -230,31 +229,85 @@
 						</div>
 					</div>
 
-					<div class="tab-pane" data-id="environment">
-						<div class="form-group">
-							<label>Mode</label>
-							<select class="form-control" ng-model="tmpApp.mode">
-								<option>CLUSTER</option>
-								<option>LOCAL</option>
-							</select>
+					<div class="tab-pane" data-id="configuration">
+						<!-- Environment -->
+						<h3>
+							<a class="text-primary" data-toggle="collapse" href="[data-id='appEnvironment']"
ng-click="collapseCheck()">
+								<span class="fa {{isCollapsed('appEnvironment') ? 'fa-chevron-circle-right' :
'fa-chevron-circle-down'}}"></span>
+								Environment
+							</a>
+						</h3>
+						<div data-id="appEnvironment" class="collapse in">
+							<div class="form-group">
+								<label>Mode</label>
+								<select class="form-control" ng-model="tmpApp.mode">
+									<option>CLUSTER</option>
+									<option>LOCAL</option>
+								</select>
+							</div>
+							<div class="form-group">
+								<label>jar Path</label>
+								<input type="text" class="form-control" ng-model="tmpApp.jarPath" ng-change="checkJarPath()"
/>
+							</div>
 						</div>
-						<div class="form-group">
-							<label>jar Path</label>
-							<input type="text" class="form-control" ng-model="tmpApp.jarPath" ng-change="checkJarPath()"
/>
+
+						<hr/>
+
+						<!-- General -->
+						<a class="pull-right" ng-click="configByJSON()">Config By JSON</a>
+						<h3>
+							<a class="text-primary" data-toggle="collapse" href="[data-id='appGeneral']" ng-click="collapseCheck()">
+								<span class="fa {{isCollapsed('appGeneral') ? 'fa-chevron-circle-right' : 'fa-chevron-circle-down'}}"></span>
+								General
+							</a>
+						</h3>
+						<div data-id="appGeneral" class="collapse in">
+							<span class="text-muted" ng-if="generalFields.length === 0">N/A</span>
+							<div class="form-group" ng-class="{'has-warning': !tmpApp.configuration[field.name]}"
ng-repeat="field in generalFields track by $index">
+								<label>
+									{{field.displayName || field.name}}
+									<span class="fa fa-question-circle" ng-if="field.description" uib-tooltip="[
{{field.name}} ] {{field.description}}"></span>
+								</label>
+								<input type="text" class="form-control" placeholder="{{field.description}}" ng-model="tmpApp.configuration[field.name]"
/>
+							</div>
 						</div>
-					</div>
 
-					<div class="tab-pane" data-id="configuration">
-						<div class="form-group" ng-class="{'has-warning': field.required && !tmpApp.configuration[field.name]}"
ng-repeat="field in tmpAppConfigFields track by $index">
-							<label>
-								<a class="fa fa-times" ng-click="removeField(field)" ng-if="field._customize"></a>
-								{{field.displayName || field.name}}
-								<span class="fa fa-question-circle" ng-if="field.description" uib-tooltip="{{field.description}}"></span>
-								<small ng-if="!field.required" class="text-muted">[optional]</small>
-							</label>
-							<input type="text" class="form-control" placeholder="{{field.description}}" ng-model="tmpApp.configuration[field.name]"
/>
+						<!-- Advanced -->
+						<h3>
+							<a class="text-primary" data-toggle="collapse" href="[data-id='appAdvanced']" ng-click="collapseCheck()">
+								<span class="fa {{isCollapsed('appAdvanced') ? 'fa-chevron-circle-right' : 'fa-chevron-circle-down'}}"></span>
+								Advanced
+							</a>
+						</h3>
+						<div data-id="appAdvanced" class="collapse in">
+							<span class="text-muted" ng-if="advancedFields.length === 0">N/A</span>
+							<div class="form-group" ng-repeat="field in advancedFields track by $index">
+								<label>
+									{{field.displayName || field.name}}
+									<span class="fa fa-question-circle" ng-if="field.description" uib-tooltip="[
{{field.name}} ] {{field.description}}"></span>
+								</label>
+								<input type="text" class="form-control" placeholder="{{field.description}}" ng-model="tmpApp.configuration[field.name]"
/>
+							</div>
 						</div>
-						<a ng-click="newField()">+ New Field</a>
+
+						<h3>
+							<a class="text-primary" data-toggle="collapse" href="[data-id='appCustomize']"
ng-click="collapseCheck()">
+								<span class="fa {{isCollapsed('appCustomize') ? 'fa-chevron-circle-right' : 'fa-chevron-circle-down'}}"></span>
+								Customize
+							</a>
+						</h3>
+						<div data-id="appCustomize" class="collapse in">
+							<div class="form-group" ng-class="{'has-warning': !tmpApp.configuration[field.name]}"
ng-repeat="field in customizeFields track by $index">
+								<label>
+									<a class="fa fa-times" ng-click="removeField(field)" ng-if="field._customize"></a>
+									{{field.displayName || field.name}}
+								</label>
+								<input type="text" class="form-control" placeholder="{{field.description}}" ng-model="tmpApp.configuration[field.name]"
/>
+							</div>
+							<a ng-click="newField()">+ New Field</a>
+						</div>
+
+
 					</div>
 				</div>
 			</div>

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/ecda7d5a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/integrationCtrl.js
----------------------------------------------------------------------
diff --git a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/integrationCtrl.js b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/integrationCtrl.js
index 9b46814..a26810c 100644
--- a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/integrationCtrl.js
+++ b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/integrationCtrl.js
@@ -142,17 +142,25 @@
 		// =                         Installation                         =
 		// ================================================================
 		$scope.tmpApp = {};
-		$scope.tmpAppConfigFields = [];
+		$scope.generalFields = [];
+		$scope.advancedFields = [];
+		$scope.customizeFields = [];
 		$scope.installLock = false;
 
+		// =================== Fields ===================
 		$scope.newField = function () {
 			UI.fieldConfirm({
 				title: "New Field"
 			}, null, [{
 				field: "name",
 				name: "Field Name"
+			}, {
+				field: "value",
+				name: "Field Value",
+				optional: true
 			}])(function (entity, closeFunc, unlock) {
-				if(common.array.find(entity.name, $scope.tmpAppConfigFields, "field")) {
+				var fullList = $scope.generalFields.concat($scope.advancedFields).concat($scope.customizeFields);
+				if(common.array.find(entity.name, fullList, "field")) {
 					$.dialog({
 						title: "OPS",
 						content: "Field already exist!"
@@ -160,11 +168,12 @@
 
 					unlock();
 				} else {
-					$scope.tmpAppConfigFields.push({
+					$scope.customizeFields.push({
 						name: entity.name,
 						_customize: true,
 						required: true
 					});
+					$scope.tmpApp.configuration[entity.name] = entity.value;
 
 					closeFunc();
 				}
@@ -172,15 +181,35 @@
 		};
 
 		$scope.removeField = function (field) {
-			$scope.tmpAppConfigFields = common.array.remove(field, $scope.tmpAppConfigFields);
+			$scope.customizeFields = common.array.remove(field, $scope.customizeFields);
 			delete $scope.tmpApp.configuration[field.name];
 		};
 
+		// =================== Check ===================
+		$scope.checkJarPath = function () {
+			var jarPath = ($scope.tmpApp || {}).jarPath;
+			if(/\.jar$/.test(jarPath)) {
+				$scope.tmpApp.mode = "CLUSTER";
+			} else if(/\.class/.test(jarPath)) {
+				$scope.tmpApp.mode = "LOCAL";
+			}
+		};
+
+		$scope.collapseCheck = function () {
+			setTimeout(function() {
+				$scope.$apply();
+			}, 400);
+		};
+
+		$scope.isCollapsed = function (dataId) {
+			return !$("[data-id='" + dataId + "']").hasClass("in");
+		};
+
 		$scope.checkFields = function () {
 			var pass = true;
 			var config = common.getValueByPath($scope, ["tmpApp", "configuration"], {});
-			$.each($scope.tmpAppConfigFields, function (i, field) {
-				if(field.required && !config[field.name]) {
+			$.each($scope.generalFields, function (i, field) {
+				if (field.required && !config[field.name]) {
 					pass = false;
 					return false;
 				}
@@ -188,15 +217,40 @@
 			return pass;
 		};
 
-		$scope.checkJarPath = function () {
-			var jarPath = ($scope.tmpApp || {}).jarPath;
-			if(/\.jar$/.test(jarPath)) {
-				$scope.tmpApp.mode = "CLUSTER";
-			} else if(/\.class/.test(jarPath)) {
-				$scope.tmpApp.mode = "LOCAL";
-			}
+		// =================== Config ===================
+		$scope.getCustomFields = function (configuration) {
+			var fields = common.getValueByPath($scope.application, "configuration.properties", []).concat();
+			return $.map(configuration || {}, function (value, key) {
+				if(!common.array.find(key, fields, ["name"])) {
+					return {
+						name: key,
+						_customize: true,
+						required: true
+					};
+				}
+			});
 		};
 
+		$scope.configByJSON = function () {
+			UI.fieldConfirm({
+				title: "Configuration"
+			}, {
+				json: JSON.stringify($scope.tmpApp.configuration, null, "\t")
+			}, [{
+				field: "json",
+				name: "JSON Configuration",
+				type: "blob"
+			}], function (entity) {
+				var json = common.parseJSON(entity.json, false);
+				if(!json) return 'Require JSON format';
+			})(function (entity, closeFunc) {
+				$scope.tmpApp.configuration = common.parseJSON(entity.json, {});
+				$scope.customizeFields = $scope.getCustomFields($scope.tmpApp.configuration);
+				closeFunc();
+			});
+		};
+
+		// =================== Install ===================
 		$scope.installAppConfirm = function () {
 			$scope.installLock = true;
 
@@ -252,23 +306,31 @@
 				$scope.checkJarPath();
 			}
 
-			var fields = $scope.tmpAppConfigFields = common.getValueByPath(application, "configuration.properties",
[]).concat();
+			var fields = common.getValueByPath(application, "configuration.properties", []).concat();
+			$scope.generalFields = [];
+			$scope.advancedFields = [];
+			$scope.customizeFields = [];
+
+			$("[data-id='appEnvironment']").attr("class","collapse in").removeAttr("style");
+			$("[data-id='appGeneral']").attr("class","collapse in").removeAttr("style");
+			$("[data-id='appAdvanced']").attr("class","collapse").removeAttr("style");
+			$("[data-id='appCustomize']").attr("class","collapse in").removeAttr("style");
 
 			$.each(fields, function (i, field) {
+				// Fill default value
 				$scope.tmpApp.configuration[field.name] = field.value;
+
+				// Reassign the fields
+				if(field.required) {
+					$scope.generalFields.push(field);
+				} else {
+					$scope.advancedFields.push(field);
+				}
 			});
 
 			// Fill miss field of entity
 			common.merge($scope.tmpApp, entity);
-			$.each(entity.configuration || {}, function (key) {
-				if(!common.array.find(key, fields, ["name"])) {
-					fields.push({
-						name: key,
-						_customize: true,
-						required: true
-					});
-				}
-			});
+			$scope.customizeFields = $scope.getCustomFields(entity.configuration);
 
 			// Dependencies check
 			var missDep = false;


Mime
View raw message