Impl ack/resolve/delete features in the kebab (#413)

- removed the ack button because it was busy - compressed note display slightly and removed notes from details section - fixed some issues with the kebab "show" options - also, simplified some filter handling in triggers page
hawkular · Jul 27, 2017 · efaba39 · efaba39
1 parent 3f79f58
commit efaba39
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 94 deletions.
diff --git a/ui/src/main/ui/src/alerts/alerts-controller.js b/ui/src/main/ui/src/alerts/alerts-controller.js
@@ -1,5 +1,5 @@
-angular.module('hwk.alertsModule').controller( 'hwk.alertsController', ['$scope', '$rootScope', '$resource', '$window', '$interval', '$q', 'hwk.alertsService',
-  function ($scope, $rootScope, $resource, $window, $interval, $q, alertsService) {
+angular.module('hwk.alertsModule').controller( 'hwk.alertsController', ['$scope', '$rootScope', '$resource', '$window', '$interval', '$q', '$modal', 'hwk.alertsService',
+  function ($scope, $rootScope, $resource, $window, $interval, $q, $modal, alertsService) {
     'use strict';
 
     var initStart = new Date();
@@ -13,6 +13,14 @@ angular.module('hwk.alertsModule').controller( 'hwk.alertsController', ['$scope'
       statusOptions: ['All Status', 'Open', 'Acknowledged', 'Resolved'],
       tagQuery: null
     };
+    $scope.lifecycleModal = {
+      user: null,
+      notes: null,
+      title: null,
+      placeholder: null,
+      state: null,
+      readOnly: false
+    };
 
     var selectedTenant = $rootScope.selectedTenant;
 
@@ -26,20 +34,79 @@ angular.module('hwk.alertsModule').controller( 'hwk.alertsController', ['$scope'
       }
     });
 
-    $scope.ackAlert = function (id) {
-      alert("TODO ACK: " + id);
+    $scope.ackAlert = function (alertId) {
+      $scope.lifecycleModal.title = 'Acknowledge Alert';
+      $scope.lifecycleModal.user = null;
+      $scope.lifecycleModal.notes = null;
+      $scope.lifecycleModal.readOnly = false;
+      $scope.lifecycleModal.state = "Acknowledge";
+      changeState(alertId);
     };
 
-    $scope.resolveAlert = function (id) {
-      alert("TODO RESOLVE: " + id);
+    $scope.resolveAlert = function (alertId) {
+      $scope.lifecycleModal.title = 'Resolve Alert';
+      $scope.lifecycleModal.user = null;
+      $scope.lifecycleModal.notes = null;
+      $scope.lifecycleModal.readOnly = false;
+      $scope.lifecycleModal.state = "Resolve";
+      changeState(alertId);
+    };
+
+    var changeState = function(alertId) {
+      var modalInstance = $modal.open({
+        templateUrl: 'lifecycleModal.html',
+        backdrop: false, // keep modal up if someone clicks outside of the modal
+        controller: function ($scope, $modalInstance, $log, lifecycleModal) {
+          $scope.lifecycleModal = lifecycleModal;
+          $scope.save = function () {
+
+            $modalInstance.dismiss(lifecycleModal.state);
+            var promise1;
+            if ( lifecycleModal.state === 'Acknowledge') {
+              promise1 = alertsService.Ack(selectedTenant, alertId, lifecycleModal.user, lifecycleModal.notes).update();
+            } else {
+              promise1 = alertsService.Resolve(selectedTenant, alertId, lifecycleModal.user, lifecycleModal.notes).update();
+            }
+
+            $q.all([promise1.$promise]).then(function (result) {
+              console.log("Result[" + lifecycleModal.state + "]=" + result);
+              updateAlerts();
+            });
+          };
+          $scope.cancel = function () {
+            $modalInstance.dismiss('cancel');
+          };
+          $scope.isValid = function () {
+            return (
+              $scope.lifecycleModal.notes
+              && $scope.lifecycleModal.notes.length > 0
+              && $scope.lifecycleModal.user
+              && $scope.lifecycleModal.user.length > 0
+            );
+          };
+        },
+        resolve: {
+          lifecycleModal: function () {
+            return $scope.lifecycleModal;
+          }
+        }
+      });
     };
 
     $scope.reopenAlert = function (id) {
       alert("TODO REOPEN: " + id);
     };
 
-    $scope.deleteAlert = function (id) {
-      alert("TODO DELETE: " + id);
+    $scope.deleteAlert = function (alertId) {
+      var alertsCriteria = {
+        alertIds: alertId
+      };
+      var alertsPromise = alertsService.Purge($rootScope.selectedTenant, alertsCriteria).update();
+      $q.all([alertsPromise.$promise]).then(function(results) {
+        updateAlerts();
+      }, function(err) {
+        console.log("[Alerts] deleteAlert(" + alertId + ") failed: " + err);
+      });
     };
 
     var updateAlerts = function () {

diff --git a/ui/src/main/ui/src/alerts/alerts-service.js b/ui/src/main/ui/src/alerts/alerts-service.js
@@ -22,5 +22,40 @@ angular.module('hwk.alertsModule').service('hwk.alertsService', ['$resource', '$
         }
       });
     };
+
+    this.Purge = function (tenantId, alertsCriteria) {
+      return $resource($rootScope.appConfig.server.baseUrl + "/delete", alertsCriteria, {
+        update: {
+          method: 'PUT',
+          headers: {'Hawkular-Tenant': tenantId}
+        }
+      });
+    };
+
+    this.Ack = function (tenantId, alertIds, ackBy, ackNotes) {
+      return $resource($rootScope.appConfig.server.baseUrl + "/ack", {
+        alertIds: alertIds,
+        ackBy: ackBy,
+        ackNotes: ackNotes
+      }, {
+        update: {
+          method: 'PUT',
+          headers: {'Hawkular-Tenant': tenantId}
+        }
+      });
+    };
+
+    this.Resolve = function (tenantId, alertIds, resolvedBy, resolvedNotes) {
+      return $resource($rootScope.appConfig.server.baseUrl + "/resolve", {
+        alertIds: alertIds,
+        resolvedBy: resolvedBy,
+        resolvedNotes: resolvedNotes
+      }, {
+        update: {
+          method: 'PUT',
+          headers: {'Hawkular-Tenant': tenantId}
+        }
+      });
+    };
   }
 ]);
diff --git a/ui/src/main/ui/src/alerts/alerts.html b/ui/src/main/ui/src/alerts/alerts.html
@@ -58,7 +58,10 @@
                 <span class="fa fa-ellipsis-v"></span>
               </button>
               <ul class="dropdown-menu " aria-labelledby="alertsKebab">
-                <li ng-click="newXXXModal()"><a>New XXX</a></li>
+                <li ng-click="ackSelected()"><a>Ack Selected (TD?)</a></li>
+                <li ng-click="resolveSelected()"><a>Resolve Selected (TD?)</a></li>
+                <li role="separator" class="divider"></li>
+                <li ng-click="deleteSelected()"><a>Delete Selected (TD?)</a></li>
               </ul>
             </div>
           </div>
@@ -77,22 +80,16 @@
         <!-- Action column found on the right of each row -->
 
         <div class="list-view-pf-checkbox">
-          <input type="checkbox"/>
+          <input type="checkbox" />
         </div>
         <div class="list-view-pf-actions">
-          <!-- a button that can trigger the default action -->
-          <!-- for open alerts, we show a button to ack; for acked alerts, show resolve button; for resolved alerts, show re-open button -->
-          <button ng-click="ackAlert(alertItem.id)" ng-show="alertItem.status === 'OPEN'" class="btn btn-default">Acknowledge</button>
-          <button ng-click="resolveAlert(alertItem.id)" ng-show="alertItem.status === 'ACKNOWLEDGE'" class="btn btn-default">Resolve</button>
-          <button ng-click="reopenAlert(alertItem.id)" ng-show="alertItem.status === 'RESOLVED'" class="btn btn-default">Re-Open</button>
           <div class="dropdown pull-right dropdown-kebab-pf">
             <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
               <span class="fa fa-ellipsis-v"></span>
             </button>
             <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight1">
-              <li ng-show="alertItem.status === 'OPEN'"><a id="ack-alert-link" href ng-click="ackAlert(alertItem.id)">Acknowledge</a></li>
-              <li ng-show="alertItem.status === 'ACKNOWLEDGE' || alertItem.status === 'OPEN'"><a id="resolve-alert-link" href ng-click="resolveAlert(alertItem.id)">Resolve</a></li>
-              <li ng-show="alertItem.status === 'RESOLVED'"><a id="reopen-alert-link" href ng-click="reopenAlert(alertItem.id)">Re-Open</a></li>
+              <li ng-show="alertItem.status === 'OPEN' || alertItem.status === 'RESOLVED'"><a id="ack-alert-link" href ng-click="ackAlert(alertItem.id)">Acknowledge</a></li>
+              <li ng-show="alertItem.status === 'OPEN' || alertItem.status === 'ACKNOWLEDGED'"><a id="resolve-alert-link" href ng-click="resolveAlert(alertItem.id)">Resolve</a></li>
               <li role="separator" class="divider"></li>
               <li><a id="delete-alert-link" href ng-click="deleteAlert(alertItem.id)">Delete</a></li>
             </ul>
@@ -105,23 +102,18 @@
 
           <!-- Alert type icon (open/ack/resolved/event) -->
           <div class="list-view-pf-left">
-            <span class="pficon pficon-error-circle-o" ng-show="alertItem.status === 'OPEN'"></span>
-            <span class="pficon pficon-warning-triangle-o" ng-show="alertItem.status === 'ACKNOWLEDGED'"></span>
-            <span class="pficon pficon-ok" ng-show="alertItem.status === 'RESOLVED'"></span>
+            <span class="pficon pficon-error-circle-o" ng-show="alertItem.status === 'OPEN'"></span> <span class="pficon pficon-warning-triangle-o"
+              ng-show="alertItem.status === 'ACKNOWLEDGED'"></span> <span class="pficon pficon-ok" ng-show="alertItem.status === 'RESOLVED'"></span>
             <!-- <span class="pficon pficon-topology"></span> <!-- event -->
           </div>
 
           <div class="list-view-pf-body">
 
             <div class="list-view-pf-description">
               <!-- Alert severity -->
-              <div class="list-group-item-heading">
-                {{ alertItem.severity }}
-              </div>
+              <div class="list-group-item-heading">{{ alertItem.severity }}</div>
               <!-- Text description - a brief summary -->
-              <div class="list-group-item-text">
-                {{ alertItem.ctime | date:'yyyy-MM-dd HH:mm:ss Z' }}
-              </div>
+              <div class="list-group-item-text">{{ alertItem.ctime | date:'yyyy-MM-dd HH:mm:ss Z' }}</div>
             </div>
 
             <!-- Expandable sections -->
@@ -131,45 +123,37 @@
               <!-- Details -->
               <div class="list-view-pf-additional-info-item">
                 <div class="list-view-pf-expand">
-                  <span class="fa fa-angle-right"></span>
-                  <span class="pficon pficon-info"></span>
-                  Details
+                  <span class="fa fa-angle-right"></span> <span class="pficon pficon-info"></span> Details
                 </div>
               </div>
 
               <!-- Notes -->
               <div class="list-view-pf-additional-info-item">
                 <div class="list-view-pf-expand">
-                  <span class="fa fa-angle-right"></span>
-                  <span class="fa fa-list-alt"></span>
-                  <strong>{{ alertItem.notes ? alertItem.notes.length : 0 }}</strong> Notes
+                  <span class="fa fa-angle-right"></span> <span class="fa fa-list-alt"></span> <strong>{{ alertItem.notes ? alertItem.notes.length : 0 }}</strong> Notes
                 </div>
               </div>
 
               <!-- Tags -->
               <div class="list-view-pf-additional-info-item">
                 <div class="list-view-pf-expand">
-                  <span class="fa fa-angle-right"></span>
-                  <span class="pficon pficon-repository"></span>
-                  <strong>{{ alertItem.tags ? alertItem.tags.length : 0 }}</strong> Tags
+                  <span class="fa fa-angle-right"></span> <span class="pficon pficon-repository"></span> <strong>{{ alertItem.tags ? alertItem.tags.length : 0 }}</strong> Tags
                 </div>
               </div>
 
               <!-- Lifecycle -->
               <div class="list-view-pf-additional-info-item">
                 <div class="list-view-pf-expand">
-                  <span class="fa fa-angle-right"></span>
-                  <span class="pficon pficon-project"></span>
-                  <strong>{{ alertItem.lifecycle ? alertItem.lifecycle.length : 0 }}</strong> Lifecycle
+                  <span class="fa fa-angle-right"></span> <span class="pficon pficon-project"></span> <strong>{{ alertItem.lifecycle ? alertItem.lifecycle.length : 0 }}</strong>
+                  Lifecycle
                 </div>
               </div>
 
               <!-- Condition evaluations -->
               <div class="list-view-pf-additional-info-item">
                 <div class="list-view-pf-expand">
-                  <span class="fa fa-angle-right"></span>
-                  <span class="fa fa-tachometer"></span>
-                  <strong>{{ alertItem.evalSets ? alertItem.evalSets.length : 0 }}</strong> Conditions
+                  <span class="fa fa-angle-right"></span> <span class="fa fa-tachometer"></span> <strong>{{ alertItem.evalSets ? alertItem.evalSets.length : 0 }}</strong>
+                  Conditions
                 </div>
               </div>
             </div>
@@ -188,27 +172,7 @@
           <div class="row">
             <div class="col-md-12">
               <p>
-                <b>Category:</b> {{ alertItem.category }}
-                <br/>
-                <b>Data ID:</b> {{ alertItem.dataId }}
-                <br/>
-                <b>Alert Text:</b>
-                {{ alertItem.text }}
-              </p>
-            </div>
-          </div>
-
-          <!-- notes from users -->
-          <div class="row" ng-repeat="note in alertItem.notes">
-            <div class="col-md-12">
-              <p>
-                <b>User:</b> {{ note.user }}
-                <br/>
-                <b>Time:</b> {{ note.ctime | date:'yyyy-MM-dd HH:mm:ss Z' }}
-                <br/>
-                <b>Notes:</b>
-                <br/>
-                {{ note.text }}
+                <b>Category:</b> {{ alertItem.category }} <br /> <b>Data ID:</b> {{ alertItem.dataId }} <br /> <b>Alert Text:</b> {{ alertItem.text }}
               </p>
             </div>
           </div>
@@ -224,13 +188,7 @@
           <div class="row" ng-repeat="note in alertItem.notes">
             <div class="col-md-12">
               <p>
-                <b>User:</b> {{ note.user }}
-                <br/>
-                <b>Time:</b> {{ note.ctime | date:'yyyy-MM-dd HH:mm:ss Z' }}
-                <br/>
-                <b>Notes:</b>
-                <br/>
-                {{ note.text }}
+                <b>Time:</b> {{ note.ctime | date:'yyyy-MM-dd HH:mm:ss Z' }} <br /> <b>User:</b> {{ note.user }} <br /> {{ note.text }}
               </p>
             </div>
           </div>
@@ -260,11 +218,7 @@
           <div class="row" ng-repeat="lc in alertItem.lifecycle">
             <div class="col-md-12">
               <p>
-                <b>User:</b> {{ lc.user }}
-                <br/>
-                <b>Time:</b> {{ lc.stime | date:'yyyy-MM-dd HH:mm:ss Z' }}
-                <br/>
-                <b>Status:</b> {{ lc.status }}
+                <b>User:</b> {{ lc.user }} <br /> <b>Time:</b> {{ lc.stime | date:'yyyy-MM-dd HH:mm:ss Z' }} <br /> <b>Status:</b> {{ lc.status }}
               </p>
             </div>
           </div>
@@ -279,9 +233,7 @@
           <div class="row" ng-repeat="evs in alertItem.evalSets">
             <div class="col-md-12" ng-repeat="ev in evs">
               <p>
-                <b>Time:</b> {{ ev.evalTimestamp | date:'yyyy-MM-dd HH:mm:ss Z' }}
-                <br/>
-                <b>{{ ev.log }}</b>
+                <b>Time:</b> {{ ev.evalTimestamp | date:'yyyy-MM-dd HH:mm:ss Z' }} <br /> <b>{{ ev.log }}</b>
               </p>
             </div>
           </div>
@@ -306,6 +258,36 @@ <h2 class="card-pf-title">Select a Tenant</h2>
 
 </div>
 <!-- /container -->
+<div ng-controller="hwk.actionsController">
+  <script type="text/ng-template" id="lifecycleModal.html">
+    <div class="modal-content modal-lg">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" ng-click="cancel()" aria-hidden="true">
+          <span class="pficon pficon-close"></span>
+        </button>
+        <h4 class="modal-title">{{ lifecycleModal.title }}</h4>
+      </div>
+      <div class="modal-body">
+        <form class="form-horizontal">
+          <div class="form-group">
+            <div class="col-md-4">
+              <input id="user" class="form-control" ng-model="lifecycleModal.user" ng-readonly="{{ lifecycleModal.readOnly }}" placeholder="Enter username here..." />
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="col-md-12">
+              <textarea class="form-control textarea-resize" ng-model="lifecycleModal.notes" ng-readonly="{{ lifecycleModal.readOnly }}" rows="10" placeholder="Enter Note Here..." />
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
+        <button type="button" class="btn btn-primary" data-dismiss="modal" ng-show="{{ !lifecycleModal.readOnly }}" ng-disabled="!isValid()" ng-click="save()">{{ lifecycleModal.state }}</button>
+      </div>
+    </div>
+  </script>
+</div>
 <script>
   // Initialize Boostrap-datepicker
   $('#start').datepicker({
@@ -320,4 +302,4 @@ <h2 class="card-pf-title">Select a Tenant</h2>
     todayBtn: 'linked',
     todayHighlight: true
   });
-</script>
+</script>