Add toast to Firmware page
Replace error and success messages with toast notifications.
Change-Id: I6c68568b7c9db4fd1f85b3de843289cf1bfba376
Signed-off-by: beccabroek <beccabroek@gmail.com>
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 @@
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 @@
$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 @@
$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 @@
$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 @@
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 @@
$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 @@
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 @@
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 @@
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 @@
$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 @@
}
$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 @@
$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 @@
.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 @@
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;
}