[EAGLE-603] Enable/Disable Policy in UI

Enable/Disable Policy in UI

Author: zombieJ <smith3...@gmail.com>

Closes #487 from zombieJ/EAGLE-603.


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

Branch: refs/heads/master
Commit: 36df3ee7a556b9e430df2d54ccbf6c483344b6e2
Parents: 7d50253
Author: zombieJ <smith3...@gmail.com>
Authored: Mon Oct 10 21:12:20 2016 +0800
Committer: Hao Chen <h...@apache.org>
Committed: Mon Oct 10 21:12:20 2016 +0800

----------------------------------------------------------------------
 .../app/dev/partials/alert/policyList.html      |  15 ++-
 .../app/dev/partials/integration/site.html      |  52 +++++++++-
 .../src/main/webapp/app/dev/public/css/main.css |   4 +
 .../webapp/app/dev/public/js/ctrls/alertCtrl.js |  22 +++-
 .../app/dev/public/js/ctrls/alertEditCtrl.js    |   7 +-
 .../app/dev/public/js/ctrls/integrationCtrl.js  | 101 ++++++++++++++-----
 .../app/dev/public/js/services/entitySrv.js     |  12 +++
 7 files changed, 180 insertions(+), 33 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/eagle-server/src/main/webapp/app/dev/partials/alert/policyList.html
----------------------------------------------------------------------
diff --git 
a/eagle-server/src/main/webapp/app/dev/partials/alert/policyList.html 
b/eagle-server/src/main/webapp/app/dev/partials/alert/policyList.html
index 49d8ab8..35d9696 100644
--- a/eagle-server/src/main/webapp/app/dev/partials/alert/policyList.html
+++ b/eagle-server/src/main/webapp/app/dev/partials/alert/policyList.html
@@ -22,6 +22,7 @@
                        <table class="table table-bordered">
                                <thead>
                                        <tr>
+                                               <th sortpath="policyStatus" 
width="10"></th>
                                                <th sortpath="name" 
width="20%">Name</th>
                                                <th sortpath="definition.type" 
width="70">Type</th>
                                                <th>Description</th>
@@ -31,15 +32,23 @@
                                <tbody>
                                        <tr>
                                                <td>
+                                                       <span class="fa 
fa-square" ng-class="item.policyStatus === 'ENABLED' ? 'text-green' : 
'text-muted'"></span>
+                                               </td>
+                                               <td>
                                                        <a 
ui-sref="policyDetail({name: item.name})" target="_blank">{{item.name}}</a>
                                                </td>
                                                <td class="text-center"><span 
class="label label-primary">{{item.definition.type}}</span></td>
                                                <td>{{item.description}}</td>
                                                <td class="text-center">
                                                        <div class="btn-group 
btn-group-xs">
-                                                               <button 
class="btn btn-default"><span class="fa fa-play"></span></button>
-                                                               <a 
ui-sref="alert.policyEdit({name: item.name})" target="_blank" class="btn 
btn-default"><span class="fa fa-pencil"></span></a>
-                                                               <button 
class="btn btn-danger" ng-click="deletePolicy(item)"><span class="fa 
fa-trash"></span></button>
+                                                               <button 
class="btn btn-default opt" ng-if="item.policyStatus !== 'ENABLED'" 
ng-click="startPolicy(item)">
+                                                                       <span 
class="fa fa-play"></span>
+                                                               </button>
+                                                               <button 
class="btn btn-default opt" ng-if="item.policyStatus === 'ENABLED'" 
ng-click="stopPolicy(item)">
+                                                                       <span 
class="fa fa-stop"></span>
+                                                               </button>
+                                                               <a 
ui-sref="alert.policyEdit({name: item.name})" target="_blank" class="btn 
btn-default opt"><span class="fa fa-pencil"></span></a>
+                                                               <button 
class="btn btn-danger opt" ng-click="deletePolicy(item)"><span class="fa 
fa-trash"></span></button>
                                                        </div>
                                                </td>
                                        </tr>

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/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 b391b49..4c118dc 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
@@ -71,7 +71,7 @@
                                <button type="button" class="close" 
data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                </button>
-                               <h4 class="modal-title" 
id="myModalLabel">{{application.name}}</h4>
+                               <h4 
class="modal-title">{{application.name}}</h4>
                        </div>
                        <div class="modal-body">
                                <ul class="nav nav-tabs">
@@ -93,3 +93,53 @@
                </div>
        </div>
 </div>
+
+<!-- Modal: Application information -->
+<div class="modal fade" role="dialog" id="installMDL">
+       <div class="modal-dialog modal-lg">
+               <div class="modal-content">
+                       <div class="modal-header">
+                               <button type="button" class="close" 
data-dismiss="modal" aria-label="Close">
+                                       <span aria-hidden="true">×</span>
+                               </button>
+                               <h4 class="modal-title">Install 
'{{application.name}}'</h4>
+                       </div>
+                       <div class="modal-body">
+                               <ul class="nav nav-tabs">
+                                       <li class="active"><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>
+                               </ul>
+                               <div class="tab-content">
+                                       <div class="tab-pane active" 
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>
+                                               <div class="form-group">
+                                                       <label>jar Path</label>
+                                                       <input type="text" 
class="form-control" ng-model="tmpApp.jarPath" />
+                                               </div>
+                                       </div>
+                                       <div class="tab-pane" 
data-id="configuration">
+                                               <div class="form-group" 
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}}
+                                                               <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]" />
+                                               </div>
+                                               <a ng-click="newField()">+ New 
Field</a>
+                                       </div>
+                               </div>
+                       </div>
+                       <div class="modal-footer">
+                               <button type="button" class="btn btn-default" 
ng-disabled="installLock" data-dismiss="modal">Close</button>
+                               <button type="button" class="btn btn-primary" 
ng-disabled="installLock || !checkFields()" 
ng-click="installAppConfirm()">Install</button>
+                       </div>
+               </div>
+       </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/eagle-server/src/main/webapp/app/dev/public/css/main.css
----------------------------------------------------------------------
diff --git a/eagle-server/src/main/webapp/app/dev/public/css/main.css 
b/eagle-server/src/main/webapp/app/dev/public/css/main.css
index 07482e1..ac22f89 100644
--- a/eagle-server/src/main/webapp/app/dev/public/css/main.css
+++ b/eagle-server/src/main/webapp/app/dev/public/css/main.css
@@ -130,6 +130,10 @@ table.table pre.inline {
        font-size: 14px;
 }
 
+table.table .btn-group .btn.opt {
+       width: 22px;
+}
+
 table.table.table-sm th,
 table.table.table-sm td {
        padding: 3px 5px;

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js
----------------------------------------------------------------------
diff --git a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js 
b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js
index ae5194c..f2f8f96 100644
--- a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js
+++ b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js
@@ -63,7 +63,15 @@
        eagleControllers.controller('policyListCtrl', function ($scope, 
$wrapState, PageConfig, Entity, UI) {
                PageConfig.subTitle = "Manage Policies";
 
-               $scope.policyList = Entity.queryMetadata("policies");
+               $scope.policyList = [];
+
+               function updateList() {
+                       var list = Entity.queryMetadata("policies");
+                       list._then(function () {
+                               $scope.policyList = list;
+                       });
+               }
+               updateList();
 
                $scope.deletePolicy = function (item) {
                        UI.deleteConfirm(item.name)(function (entity, 
closeFunc) {
@@ -73,6 +81,18 @@
                                });
                        });
                };
+
+               $scope.startPolicy = function (policy) {
+                       Entity
+                               .put("metadata/policies/" + 
encodeURIComponent(policy.name) + "/status/ENABLED", {})
+                               ._then(updateList);
+               };
+
+               $scope.stopPolicy = function (policy) {
+                       Entity
+                               .put("metadata/policies/" + 
encodeURIComponent(policy.name) + "/status/DISABLED", {})
+                               ._then(updateList);
+               };
        });
 
        eagleControllers.controller('policyDetailCtrl', function ($scope, 
$wrapState, PageConfig, Entity, UI) {

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertEditCtrl.js
----------------------------------------------------------------------
diff --git 
a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertEditCtrl.js 
b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertEditCtrl.js
index 05a47d4..3e9d13e 100644
--- a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertEditCtrl.js
+++ b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertEditCtrl.js
@@ -280,12 +280,13 @@
                        });
                        
common.deferred.all(publisherPromiseList.concat(policyPromise)).then(function 
() {
                                $.dialog({
-                                       title: "Create Success",
-                                       content: "Create Success. Click confirm 
to go to the policy detail page."
+                                       title: "Done",
+                                       content: "Click confirm to go to the 
policy detail page."
                                });
+                               $wrapState.go("policyDetail", {name: 
$scope.policy.name});
                        }, function (failedList) {
                                $.dialog({
-                                       title: "Create Failed",
+                                       title: "OPS",
                                        content: 
$("<pre>").text(JSON.stringify(failedList, null, "\t"))
                                });
                                $scope.policyLock = false;

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/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 eb463ba..8674df3 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
@@ -132,41 +132,92 @@
                        $("#appMDL").modal();
                };
 
-               // Install application
-               $scope.installApp = function (application) {
-                       application = application.origin;
-                       var fields = common.getValueByPath(application, 
"configuration.properties", []);
-                       fields = $.map(fields, function (prop) {
-                               return {
-                                       field: prop.name,
-                                       name: prop.displayName,
-                                       description: prop.description,
-                                       defaultValue: prop.value,
-                                       optional: prop.required === false
-                               };
-                       });
+               // 
================================================================
+               // =                         Installation                       
  =
+               // 
================================================================
+               $scope.tmpApp = {};
+               $scope.tmpAppConfigFields = [];
+               $scope.installLock = false;
 
+               $scope.newField = function () {
                        UI.fieldConfirm({
-                               title: "Install '" + application.type + "'",
-                               addable: true
-                       }, null, fields)(function (entity, closeFunc, unlock) {
-                               Entity.create("apps/install", {
-                                       siteId: $scope.site.siteId,
-                                       appType: application.type,
-                                       configuration: entity
-                               })._then(function (res) {
-                                       refreshApplications();
-                                       closeFunc();
-                               }, function (res) {
+                               title: "New Field"
+                       }, null, [{
+                               field: "name",
+                               name: "Field Name"
+                       }])(function (entity, closeFunc, unlock) {
+                               if(common.array.find(entity.name, 
$scope.tmpAppConfigFields, "field")) {
                                        $.dialog({
                                                title: "OPS",
-                                               content: res.data.message
+                                               content: "Field already exist!"
                                        });
+
                                        unlock();
+                               } else {
+                                       $scope.tmpAppConfigFields.push({
+                                               name: entity.name,
+                                               _customize: true,
+                                               required: true
+                                       });
+
+                                       closeFunc();
+                               }
+                       });
+               };
+
+               $scope.removeField = function (field) {
+                       $scope.tmpAppConfigFields = common.array.remove(field, 
$scope.tmpAppConfigFields);
+               };
+
+               $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]) {
+                                       pass = false;
+                                       return false;
+                               }
+                       });
+                       return pass;
+               };
+
+               $scope.installAppConfirm = function () {
+                       $scope.installLock = true;
+
+                       Entity.create("apps/install", 
$scope.tmpApp)._then(function () {
+                               refreshApplications();
+                               $("#installMDL").modal("hide");
+                       }, function (res) {
+                               $.dialog({
+                                       title: "OPS",
+                                       content: res.data.message
                                });
+                               $scope.installLock = false;
                        });
                };
 
+               // Install application
+               $scope.installApp = function (application) {
+                       application = application.origin;
+                       $scope.installLock = false;
+                       $scope.application = application;
+                       $scope.tmpApp = {
+                               siteId: $scope.site.siteId,
+                               appType: application.type,
+                               mode: "CLUSTER",
+                               jarPath: application.jarPath,
+                               configuration: {}
+                       };
+
+                       $scope.tmpAppConfigFields = 
common.getValueByPath(application, "configuration.properties", []);
+                       $.each($scope.tmpAppConfigFields, function (i, field) {
+                               $scope.tmpApp.configuration[field.name] = 
field.value;
+                       });
+
+                       $("#installMDL").modal();
+                       $("a[data-id='configTab']").click();
+               };
+
                // Uninstall application
                $scope.uninstallApp = function (application) {
                        UI.deleteConfirm(application.descriptor.name + " - " + 
application.site.siteId)

http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/36df3ee7/eagle-server/src/main/webapp/app/dev/public/js/services/entitySrv.js
----------------------------------------------------------------------
diff --git 
a/eagle-server/src/main/webapp/app/dev/public/js/services/entitySrv.js 
b/eagle-server/src/main/webapp/app/dev/public/js/services/entitySrv.js
index 8700f27..029b05d 100644
--- a/eagle-server/src/main/webapp/app/dev/public/js/services/entitySrv.js
+++ b/eagle-server/src/main/webapp/app/dev/public/js/services/entitySrv.js
@@ -80,6 +80,18 @@
                        }));
                };
 
+               Entity.put = function (url, entity) {
+                       var list = [];
+                       return wrapList(list, $http({
+                               method: 'PUT',
+                               url: _host + "/rest/" + url,
+                               headers: {
+                                       "Content-Type": "application/json"
+                               },
+                               data: entity
+                       }));
+               };
+
                Entity.delete = function (url, uuid) {
                        var list = [];
                        return wrapList(list, $http({

Reply via email to