SNMP page visual redesign
Adds form validation to SNMP page. Also adds new icons to
page for edit and delete. Validation messages for inputs
appear after input has been touched or if the user attempts
to submit the form with validation errors.
Tested: Add, remove, and update SNMP was successful and
functionality unchanged. Form did not allow invalid or
empty values to submitted. Used Chrome, Safari, and Firefox
to verify that visual design looked as expected.
Resolves openbmc/phosphor-webui#37
Change-Id: I7a97d80724e56d2f22c74ac1251041270bbc35ad
Signed-off-by: beccabroek <beccabroek@gmail.com>
diff --git a/app/configuration/controllers/snmp-controller.js b/app/configuration/controllers/snmp-controller.js
index 9d71765..67e210f 100644
--- a/app/configuration/controllers/snmp-controller.js
+++ b/app/configuration/controllers/snmp-controller.js
@@ -60,24 +60,19 @@
$scope.loading = true;
var promises = [];
- // Interate in reverse so can splice
+ // Validate that no field are empty and port is valid. Port value is
+ // undefined if it is an invalid number.
+ for (var i in $scope.managers) {
+ if (!$scope.managers[i].address || !$scope.managers[i].port) {
+ $scope.loading = false;
+ toastService.error('Cannot save. Please resolve errors on page.');
+ return;
+ }
+ }
+ // Iterate in reverse so can splice
// https://stackoverflow.com/questions/9882284/looping-through-array-and-removing-items-without-breaking-for-loop
var i = $scope.managers.length;
while (i--) {
- // Remove any SNMP Manager with an empty address and port
- if (!$scope.managers[i].address && !$scope.managers[i].port) {
- $scope.removeSNMPManager(i);
- continue;
- }
-
- // Throw an error if only 1 of the fields is filled out
- if (!$scope.managers[i].address || !$scope.managers[i].port) {
- // TODO: Highlight the field that is empty
- $scope.loading = false;
- toastService.error('All fields are required.');
- return;
- }
-
// If the manager does not have a 'path', it is a new manager
// and needs to be created
if (!$scope.managers[i].path) {
@@ -104,7 +99,7 @@
$q.all(promises)
.then(
function() {
- toastService.success('SNMP Managers set.');
+ toastService.success('SNMP settings have been saved.');
},
function(errors) {
toastService.error('Unable to set SNMP Managers.');