Add toast to Firmware page

Replace error and success messages with toast notifications.

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

6 files changed, 25 insertions, 117 deletions

diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index dd32703..3c5754e 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -12,5 +12,4 @@
 @import "modals";
 @import "quicklinks";
 @import "errors";
-@import "success";
 @import "toast";
diff --git a/app/common/styles/elements/success.scss b/app/common/styles/elements/success.scss
deleted file mode 100644
index defdb16..0000000
--- a/app/common/styles/elements/success.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.success-msg  {
-  color: $primebtn__bg;
-  padding: 1em;
-  font-size: 1em;
-  font-family: "Courier New", Helvetica, Arial, sans-serif;
-  font-weight: 500;
-}
diff --git a/app/configuration/controllers/firmware-controller.html b/app/configuration/controllers/firmware-controller.html
index 5c81140..9c0905b 100644
--- a/app/configuration/controllers/firmware-controller.html
+++ b/app/configuration/controllers/firmware-controller.html
@@ -27,7 +27,6 @@
       </label>
       <input type="button" value="Upload firmware" class="inline button btn-primary float-right" ng-click="upload()"/>
       <div class="inline uploading" ng-show="uploading">Upload in progress...</div>
-      <p class="download_success" ng-show="upload_success" role="alert">{{file ? '' : 'Upload complete. Check image tables above.'}}</p>
     </div>
     <div class=" column firmware__upload-tftp">
       <h3 class="h4 bold">Download image file from TFTP server</h3>
@@ -47,29 +46,12 @@
           </div>
         </div>
         <div class="inline uploading" ng-show="downloading">Downloading in progress...</div>
-        <p class="download_error error-msg" ng-show="download_error_msg" role="alert">{{download_error_msg}}</p>
-        <p class="download_success" ng-show="download_success" role="alert">Download complete. Check image tables above.</p>
       </fieldset>
     </div>
   </form>
 </div>
 
 <!-- Firmware modals -->
-<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': display_error}">
-  <div class="modal__upload-fail" role="document">
-    <div class="screen-reader-offscreen modal-description">{{error.modal_title}}</div><!-- accessibility only; used for screen readers -->
-    <div class="page-header ">
-      <span class="icon icon__warning inline"><span class="accessible-text" role="alert">{{error.type}}</span></span>
-      <h1 class="modal-title h4 inline">{{error.title}}</h1>
-    </div>
-    <div class="modal__content">
-      <p>{{error.desc}}</p>
-    </div>
-    <div class="modal__button-wrapper">
-      <button class="inline btn-primary" ng-click="display_error = false;">Close</button>
-    </div>
-  </div>
-</section>
 
 <section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirm_priority}">
   <div class="modal__tftp-unreachable" role="document">
@@ -161,4 +143,4 @@
     </div>
   </div>
 </section>
-<div class="modal-overlay" tabindex="-1" ng-class="{'active': (display_error || activate_confirm)}"></div>
+<div class="modal-overlay" tabindex="-1" ng-class="{'active': (confirm_priority || activate_confirm || confirm_delete)}"></div>
diff --git a/app/configuration/controllers/firmware-controller.js b/app/configuration/controllers/firmware-controller.js
index 04a7c78..8d4926d 100644
--- a/app/configuration/controllers/firmware-controller.js
+++ b/app/configuration/controllers/firmware-controller.js
@@ -12,9 +12,10 @@ window.angular && (function(angular) {
   angular.module('app.configuration').controller('firmwareController', [
     '$scope', '$window', 'APIUtils', 'dataService', '$location',
     '$anchorScroll', 'Constants', '$interval', '$q', '$timeout', '$interpolate',
+    'ngToast',
     function(
         $scope, $window, APIUtils, dataService, $location, $anchorScroll,
-        Constants, $interval, $q, $timeout, $interpolate) {
+        Constants, $interval, $q, $timeout, $interpolate, ngToast) {
       $scope.dataService = dataService;
 
       // Scroll to target anchor
@@ -26,7 +27,6 @@ window.angular && (function(angular) {
       $scope.firmwares = [];
       $scope.bmcActiveVersion = '';
       $scope.hostActiveVersion = '';
-      $scope.display_error = false;
       $scope.activate_confirm = false;
       $scope.delete_image_id = '';
       $scope.delete_image_version = '';
@@ -40,10 +40,7 @@ window.angular && (function(angular) {
       $scope.confirm_priority = false;
       $scope.file_empty = true;
       $scope.uploading = false;
-      $scope.upload_success = false;
       $scope.activate = {reboot: true};
-      $scope.download_error_msg = '';
-      $scope.download_success = false;
 
       var pollActivationTimer = undefined;
       var pollDownloadTimer = undefined;
@@ -57,11 +54,6 @@ window.angular && (function(angular) {
         $scope.activate_confirm = true;
       };
 
-      $scope.displayError = function(data) {
-        $scope.error = data;
-        $scope.display_error = true;
-      };
-
       function waitForActive(imageId) {
         var deferred = $q.defer();
         var startTime = new Date();
@@ -103,12 +95,8 @@ window.angular && (function(angular) {
                   return state;
                 },
                 function(error) {
-                  $scope.displayError({
-                    modal_title: 'Error during activation call',
-                    title: 'Error during activation call',
-                    desc: JSON.stringify(error.data),
-                    type: 'Error'
-                  });
+                  console.log(JSON.stringify(error));
+                  ngToast.danger('Unable to activate image');
                 })
             .then(function(activationState) {
               waitForActive($scope.activate_image_id)
@@ -117,12 +105,8 @@ window.angular && (function(angular) {
                         $scope.loadFirmwares();
                       },
                       function(error) {
-                        $scope.displayError({
-                          modal_title: 'Error during image activation',
-                          title: 'Error during image activation',
-                          desc: JSON.stringify(error.data),
-                          type: 'Error'
-                        });
+                        console.log(JSON.stringify(error));
+                        ngToast.danger('Unable to activate image');
                       })
                   .then(function(state) {
                     if ($scope.activate.reboot &&
@@ -141,12 +125,8 @@ window.angular && (function(angular) {
                         APIUtils.bmcReboot(
                             function(response) {},
                             function(error) {
-                              $scope.displayError({
-                                modal_title: 'Error during BMC reboot',
-                                title: 'Error during BMC reboot',
-                                desc: JSON.stringify(error.data),
-                                type: 'Error'
-                              });
+                              console.log(JSON.stringify(error));
+                              ngToast.danger('Unable to reboot BMC');
                             });
                       }, 10000);
                     }
@@ -175,14 +155,8 @@ window.angular && (function(angular) {
               return APIUtils.pollHostStatusTillOn();
             })
             .catch(function(error) {
-              dataService.activateErrorModal({
-                title: Constants.MESSAGES.POWER_OP.POWER_ON_FAILED,
-                description: error.statusText ?
-                    $interpolate(
-                        Constants.MESSAGES.ERROR_MESSAGE_DESC_TEMPLATE)(
-                        {status: error.status, description: error.statusText}) :
-                    error
-              });
+              console.log(JSON.stringify(error));
+              ngToast.danger(Constants.MESSAGES.POWER_OP.POWER_ON_FAILED);
             });
       };
       function warmReboot() {
@@ -196,14 +170,8 @@ window.angular && (function(angular) {
               return APIUtils.pollHostStatusTilReboot();
             })
             .catch(function(error) {
-              dataService.activateErrorModal({
-                title: Constants.MESSAGES.POWER_OP.WARM_REBOOT_FAILED,
-                description: error.statusText ?
-                    $interpolate(
-                        Constants.MESSAGES.ERROR_MESSAGE_DESC_TEMPLATE)(
-                        {status: error.status, description: error.statusText}) :
-                    error
-              });
+              console.log(JSON.stringify(error));
+              ngToast.danger(Constants.MESSAGES.POWER_OP.WARM_REBOOT_FAILED);
             });
       };
       $scope.isServerOff = function() {
@@ -213,24 +181,20 @@ window.angular && (function(angular) {
       $scope.upload = function() {
         if ($scope.file) {
           $scope.uploading = true;
-          $scope.upload_success = false;
           APIUtils.uploadImage($scope.file)
               .then(
                   function(response) {
-                    $scope.file = '';
                     $scope.uploading = false;
-                    $scope.upload_success = true;
+                    ngToast.success(
+                        'Image file "' + $scope.file.name +
+                        '" has been uploaded');
+                    $scope.file = '';
                     $scope.loadFirmwares();
                   },
                   function(error) {
                     $scope.uploading = false;
                     console.log(error);
-                    $scope.displayError({
-                      modal_title: 'Error during image upload',
-                      title: 'Error during image upload',
-                      desc: error,
-                      type: 'Error'
-                    });
+                    ngToast.danger('Unable to upload image file');
                   });
         }
       };
@@ -271,10 +235,8 @@ window.angular && (function(angular) {
       }
 
       $scope.download = function() {
-        $scope.download_success = false;
-        $scope.download_error_msg = '';
         if (!$scope.download_host || !$scope.download_filename) {
-          $scope.download_error_msg = 'Field is required!';
+          ngToast.danger('TFTP server IP address and file name are required!');
           return false;
         }
 
@@ -298,17 +260,14 @@ window.angular && (function(angular) {
                   $scope.download_host = '';
                   $scope.download_filename = '';
                   $scope.downloading = false;
-                  $scope.download_success = true;
+                  ngToast.success('Download complete');
                   $scope.loadFirmwares();
                 },
                 function(error) {
                   console.log(error);
-                  $scope.displayError({
-                    modal_title: 'Error during downloading Image',
-                    title: 'Error during downloading Image',
-                    desc: error,
-                    type: 'Error'
-                  });
+                  ngToast.danger(
+                      'Image file from TFTP server "' + $scope.download_host +
+                      '" could not be downloaded');
                   $scope.downloading = false;
                 });
       };
@@ -327,12 +286,7 @@ window.angular && (function(angular) {
             .then(function(response) {
               $scope.loading = false;
               if (response.status == 'error') {
-                $scope.displayError({
-                  modal_title: response.data.description,
-                  title: response.data.description,
-                  desc: response.data.exception,
-                  type: 'Error'
-                });
+                ngToast.danger('Unable to update boot priority');
               } else {
                 $scope.loadFirmwares();
               }
@@ -349,12 +303,7 @@ window.angular && (function(angular) {
         APIUtils.deleteImage($scope.delete_image_id).then(function(response) {
           $scope.loading = false;
           if (response.status == 'error') {
-            $scope.displayError({
-              modal_title: response.data.description,
-              title: response.data.description,
-              desc: response.data.exception,
-              type: 'Error'
-            });
+            ngToast.danger('Unable to delete image');
           } else {
             $scope.loadFirmwares();
           }
diff --git a/app/configuration/styles/firmware.scss b/app/configuration/styles/firmware.scss
index 4902dd0..f3dc865 100644
--- a/app/configuration/styles/firmware.scss
+++ b/app/configuration/styles/firmware.scss
@@ -147,15 +147,4 @@
   padding-bottom: 50px;
 }
 
-.download_error
-{
-  @include mediaQuery(medium) {
-    max-width: 35%;
-  }
-}
 
-.download_success
-{
-  color: $primebtn__bg;
-  padding: 1em;
-}
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index b194d0d..0a822bd 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -44,10 +44,6 @@
       margin: .5em;
     }
   }
-  .set_network_error
-  {
-    margin-left: 3em;
-  }
   .network-config__ipv4-wrap {
     padding-bottom: 1.8em;
   }