Alter UI to work with server data validation

src/app/beer_garden/db/schemas/garden_schema.py

@@ -19,17 +19,13 @@ class GardenBaseSchema(Schema):
     def validate_all_keys(self, post_load_data, original_data, **kwargs):
         # do not allow extraneous keys when operating on a dictionary
         if isinstance(original_data, dict):
-            extra_args = original_data.keys() - post_load_data.keys()
-
+            extra_args = post_load_data.keys() - original_data.keys()
             if len(extra_args) > 0:
-                formatted_good_keys = ", ".join(
-                    map(lambda x: "'" + str(x) + "'", self.fields.keys())
-                )
-                formatted_bad_keys = ", ".join(
-                    map(lambda x: "'" + str(x) + "'", extra_args)
-                )
+                formatted_good_keys = ", ".join(self.fields.keys())
+                formatted_bad_keys = ", ".join(extra_args)
+
                 raise ValidationError(
-                    f"Only {formatted_good_keys} allowed as keys; "
+                    f"Only {formatted_good_keys} allowed as keys - "
                     f"these are not allowed: {formatted_bad_keys}"
                 )
 

src/ui/.eslintrc.json

@@ -9,7 +9,7 @@
       "es6": true
     },
     "parserOptions": {
-      "ecmaVersion": 6,
+      "ecmaVersion": 2018,
       "sourceType": "module"
     }
 }

src/ui/src/js/configs/routes.js

@@ -18,7 +18,7 @@ export default function routeConfig(
     $stateProvider,
     $urlRouterProvider,
     $urlMatcherFactoryProvider,
-    $locationProvider
+    $locationProvider,
 ) {
   $urlRouterProvider.otherwise('/');
   $urlMatcherFactoryProvider.strictMode(false);
@@ -60,7 +60,7 @@ export default function routeConfig(
                   (response) => {
                     $rootScope.sysResponse = response;
                     $rootScope.systems = [];
-                  }
+                  },
               );
             },
           ],
@@ -93,7 +93,7 @@ export default function routeConfig(
                 SystemService.findSystem(
                     $stateParams.namespace,
                     $stateParams.systemName,
-                    $stateParams.systemVersion
+                    $stateParams.systemVersion,
                 ) || {}
               );
             },
@@ -126,7 +126,7 @@ export default function routeConfig(
               return (
                 SystemService.findSystem(
                     $stateParams.namespace,
-                    $stateParams.systemName
+                    $stateParams.systemName,
                 ) || {}
               );
             },
@@ -157,7 +157,7 @@ export default function routeConfig(
               return SystemService.findSystem(
                   $stateParams.namespace,
                   $stateParams.systemName,
-                  $stateParams.systemVersion
+                  $stateParams.systemVersion,
               );
             },
           ],

src/ui/src/js/controllers/admin_garden.js

@@ -19,7 +19,7 @@ export default function adminGardenController(
     $scope,
     $state,
     GardenService,
-    EventService
+    EventService,
 ) {
   $scope.setWindowTitle('gardens');
   $scope.gardenCreateSchema = GardenService.CreateSCHEMA;
@@ -43,7 +43,7 @@ export default function adminGardenController(
   const loadGardens = function() {
     GardenService.getGardens().then(
         $scope.successCallback,
-        $scope.failureCallback
+        $scope.failureCallback,
     );
   };
 

src/ui/src/js/controllers/admin_garden_view.js

@@ -1,3 +1,5 @@
+// eslint-disable-next-line no-unused-vars
+import angular from 'angular';
 import _ from 'lodash';
 
 adminGardenViewController.$inject = [
@@ -9,19 +11,20 @@ adminGardenViewController.$inject = [
 
 /**
  * adminGardenController - Garden management controller.
- * @param  {Object} $scope          Angular's $scope object.
- * @param  {Object} GardenService    Beer-Garden's garden service object.
- * @param   {Object} EventService    Beer-Garden's event service object.
- * @param   {$stateParams} $stateParams State params
+ * @param  {Object} $scope              Angular's $scope object.
+ * @param  {Object} GardenService       Beer-Garden's garden service object.
+ * @param  {Object} EventService        Beer-Garden's event service object.
+ * @param  {$stateParams} $stateParams  Router state params
  */
 export default function adminGardenViewController(
     $scope,
     GardenService,
     EventService,
-    $stateParams
+    $stateParams,
 ) {
   $scope.setWindowTitle('Configure Garden');
   $scope.alerts = [];
+  $scope.formErrors = [];
 
   $scope.isLocal = false;
   $scope.gardenSchema = null;
@@ -41,14 +44,16 @@ export default function adminGardenViewController(
   };
 
   $scope.successCallback = function(response) {
+    console.log('response', response);
     $scope.response = response;
     $scope.data = response.data;
 
     if ($scope.data.id == null || $scope.data.connection_type == 'LOCAL') {
       $scope.isLocal = true;
       $scope.alerts.push({
         type: 'info',
-        msg: 'Since this is the local Garden it\'s not possible to modify connection information',
+        msg: 'Since this is the local Garden it\'s not possible to modify ' +
+        'connection information',
       });
     }
 
@@ -63,7 +68,7 @@ export default function adminGardenViewController(
   const loadGarden = function() {
     GardenService.getGarden($stateParams.name).then(
         $scope.successCallback,
-        $scope.failureCallback
+        $scope.failureCallback,
     );
   };
 
@@ -74,28 +79,125 @@ export default function adminGardenViewController(
     loadGarden();
   };
 
+  const errorPlaceholder = 'errorPlaceholder';
+
+  const resetAllValidationErrors = () => {
+    const updater = (field) => {
+      $scope.$broadcast(
+          `schemaForm.error.${field}`,
+          errorPlaceholder,
+          true,
+      );
+    };
+
+    // this is brittle because it's a copy/paste from the form code,
+    // but will suffice for now because we expect the form won't
+    // ever be updated in this version of the UI
+    const httpFlds = [
+      'http.host',
+      'http.port',
+      'http.url_prefix',
+      'http.ssl',
+      'http.ca_cert',
+      'http.ca_verify',
+      'http.client_cert',
+    ];
+    const stompFlds = [
+      'stomp.host',
+      'stomp.port',
+      'stomp.send_destination',
+      'stomp.subscribe_destination',
+      'stomp.username',
+      'stomp.password',
+      'stomp.ssl',
+      'stomp.headers',
+    ];
+
+    httpFlds.map(updater);
+    stompFlds.map(updater);
+  };
+
+  const fieldErrorName =
+    (entryPoint, fieldName) => `schemaForm.error.${entryPoint}.${fieldName}`;
+
+  const fieldErrorMessage =
+    (errorObject) =>
+      typeof errorObject === 'string' ? Array(errorObject) : errorObject;
+
+  const updateValidationMessages = (entryPoint, errorsObject) => {
+    for (const fieldName in errorsObject) {
+      if (errorsObject.hasOwnProperty(fieldName)) {
+        $scope.$broadcast(
+            fieldErrorName(entryPoint, fieldName),
+            errorPlaceholder,
+            fieldErrorMessage(errorsObject[fieldName]),
+        );
+      }
+    }
+  };
+
   $scope.addErrorAlert = function(response) {
-    $scope.alerts.push({
-      type: 'danger',
-      msg:
-        'Something went wrong on the backend: ' +
-        _.get(response, 'data.message', 'Please check the server logs'),
-    });
+    /* If we have an error response that indicates that the connection
+     * parameters are incorrect, display a warning alert specifying which of the
+     * entry points are wrong. Then update the validation of the individual
+     * schema fields.
+     */
+    if (response['data'] && response['data']['message']) {
+      const messageData = String(response['data']['message']);
+      console.log('MESSG', messageData, 'TYPE', typeof messageData);
+      const cleanedMessages = messageData.replace(/'/g, '"');
+      const messages = JSON.parse(cleanedMessages);
+
+      if ('connection_params' in messages) {
+        const connParamErrors = messages['connection_params'];
+
+        for (const entryPoint in connParamErrors) {
+          if (connParamErrors.hasOwnProperty(entryPoint)) {
+            updateValidationMessages(entryPoint, connParamErrors[entryPoint]);
+
+            $scope.alerts.push({
+              type: 'warning',
+              msg: `Errors found in ${entryPoint} connection`,
+            });
+          }
+        }
+      }
+    } else {
+      $scope.alerts.push({
+        type: 'danger',
+        msg: 'Something went wrong on the backend: ' +
+          _.get(response, 'data.message', 'Please check the server logs'),
+      });
+    }
   };
 
   $scope.submitGardenForm = function(form, model) {
+    $scope.alerts = [];
+    resetAllValidationErrors();
     $scope.$broadcast('schemaFormValidate');
 
     if (form.$valid) {
-      const updatedGarden = GardenService.formToServerModel($scope.data, model);
-
-      GardenService.updateGardenConfig(updatedGarden).then(
-          _.noop,
-          $scope.addErrorAlert
-      );
+      let updatedGarden = undefined;
+
+      try {
+        updatedGarden =
+          GardenService.formToServerModel($scope.data, model);
+      } catch (e) {
+        $scope.alerts.push({
+          type: 'warning',
+          msg: e,
+        });
+      }
+
+      if (updatedGarden) {
+        GardenService.updateGardenConfig(updatedGarden).then(
+            _.noop,
+            $scope.addErrorAlert,
+        );
+      }
     } else {
       $scope.alerts.push(
-          'Looks like there was an error validating the Garden.'
+          'There was an error validating the Garden.',
       );
     }
   };