Add toast notifications to SNMP page

Design team proposed that our error and success messages be
delivered as 'toast' messages on the right side of the screen.
This brings in ngToast and implements notifications on SNMP page.
Notifications will fade after 10 seconds or can be dismissed.

https://github.com/tameraydin/ngToast

Change-Id: I1053534cd1ab189ae5c2ac07e2a922acea231c70
Signed-off-by: beccabroek <beccabroek@gmail.com>

2 files changed, 6 insertions, 11 deletions

diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
index e1f2bc9..586ee33 100644
--- a/app/configuration/controllers/snmp-controller.html
+++ b/app/configuration/controllers/snmp-controller.html
@@ -27,7 +27,5 @@
       <button type="button" class="btn-primary inline" ng-click="setSNMP()">Save settings</button>
       <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
     </div>
-    <p class="success-msg" ng-show="success" role="alert">Success! SNMP managers updated!</p>
-    <p class="error error-msg" ng-show="error" role="alert">Error setting SNMP Managers!</p>
   </form>
 </div>
diff --git a/app/configuration/controllers/snmp-controller.js b/app/configuration/controllers/snmp-controller.js
index e2c2b22..4ad0685 100644
--- a/app/configuration/controllers/snmp-controller.js
+++ b/app/configuration/controllers/snmp-controller.js
@@ -10,12 +10,10 @@ window.angular && (function(angular) {
   'use strict';
 
   angular.module('app.configuration').controller('snmpController', [
-    '$scope', '$window', 'APIUtils', '$route', '$q',
-    function($scope, $window, APIUtils, $route, $q) {
+    '$scope', '$window', 'APIUtils', '$route', '$q', 'ngToast',
+    function($scope, $window, APIUtils, $route, $q, ngToast) {
       $scope.managers = [];
       $scope.loading = true;
-      $scope.error = false;
-      $scope.success = false;
       $scope.managersToDelete = [];
 
       var getSNMPManagers = APIUtils.getSNMPManagers().then(
@@ -33,6 +31,7 @@ window.angular && (function(angular) {
             }
           },
           function(error) {
+            ngToast.danger('Unable to load SNMP settings.');
             console.log(JSON.stringify(error));
           });
 
@@ -58,8 +57,6 @@ window.angular && (function(angular) {
       };
 
       $scope.setSNMP = function() {
-        $scope.error = false;
-        $scope.success = false;
         $scope.loading = true;
         var promises = [];
 
@@ -77,7 +74,7 @@ window.angular && (function(angular) {
           if (!$scope.managers[i].address || !$scope.managers[i].port) {
             // TODO: Highlight the field that is empty
             $scope.loading = false;
-            $scope.error = true;
+            ngToast.danger('All fields are required.');
             return;
           }
 
@@ -107,11 +104,11 @@ window.angular && (function(angular) {
         $q.all(promises)
             .then(
                 function() {
-                  $scope.success = true;
+                  ngToast.success('SNMP Managers set.');
                 },
                 function(errors) {
+                  ngToast.danger('Unable to set SNMP Managers.');
                   console.log(JSON.stringify(errors));
-                  $scope.error = true;
                 })
             .finally(function() {
               $scope.loading = false;