[EAGLE-599] improve application config * Support JSON import * UI adjust - separate the general fields & merge env and config tab
Author: zombieJ <smith3...@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 <smith3...@gmail.com> Authored: Mon Oct 17 15:41:24 2016 +0800 Committer: zombieJ <smith3...@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;
