You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@eagle.apache.org by ji...@apache.org on 2016/10/17 07:41:51 UTC
incubator-eagle git commit: [EAGLE-599] improve application config
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 <sm...@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 <sm...@gmail.com>
Authored: Mon Oct 17 15:41:24 2016 +0800
Committer: zombieJ <sm...@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;