Add classname validation to edit configuration context

Gruntfile.js

@@ -59,9 +59,18 @@ module.exports = function (grunt) {
 
     concat: {
       dist: {
-        src: ['src/supported-connectors.js', 'src/factories/dirPagination.js', 'src/app.js', 
-        'src/**/*-factory.js','src/**/*.factory.js', 'src/**/*.controller.js', 'src/**/**/*.controller.js', 
-        'src/**/**/**/*.controller.js','src/**/**/**/*.component.js', 'src/**/**/**/*.filter.js','src/**/**/**/*.service.js'],
+        src: [
+          'src/supported-connectors.js',
+          'src/factories/dirPagination.js',
+          'src/app.js',
+          'src/**/*-factory.js',
+          'src/**/*.factory.js',
+          'src/**/*.controller.js',
+          'src/**/*.component.js',
+          'src/**/*.directive.js',
+          'src/**/*.filter.js',
+          'src/**/*.service.js',
+        ],
         dest: 'dist/src/combined.js'
       }
     },

index.html

@@ -135,6 +135,8 @@ <h3 style="font-weight:300; color:red"><i class="fa fa-exclamation-triangle" ari
 <script src="src/kafka-connect/configuration/editor/configuration-editor.component.js"></script>
 <script src="src/kafka-connect/configuration/extraction/configuration-topics.filter.js"></script>
 <script src="src/kafka-connect/configuration/extraction/configuration-type.filter.js"></script>
+<script src="src/kafka-connect/configuration/validation/configuration-validation-messages.component.js"></script>
+<script src="src/kafka-connect/configuration/validation/validate-configuration-classname.directive.js"></script>
 
 <!-- endbuild -->
 </body>

src/kafka-connect/configuration/editor/configuration-editor-curl.component.js

@@ -3,12 +3,12 @@
 
   /**
    * Renders configuration cURL command
-   * @param {String} [name] Connector name; denotes edit mode
+   * @param {String} [connectorName] Connector name; denotes edit mode
    * @requires ngModel
    */
   angularAPP.component('configurationEditorCurl', {
     bindings: {
-      name: '<?',
+      connectorName: '<?',
     },
     controller: ConfigurationEditorCurlController,
     require: {
@@ -42,7 +42,7 @@
      */
     function $onInit() {
       self.ngModelController.$render = function () {
-        var isCreating = !self.name;
+        var isCreating = !self.connectorName;
         var requestBody = self.ngModelController.$modelValue;
 
         if (!requestBody) {
@@ -55,7 +55,7 @@
 
         self.model = [
           'curl -X ' + (isCreating ? 'POST' : 'PUT'),
-          env.KAFKA_CONNECT() + '/connectors' + (isCreating ? '' : '/' + self.name + '/config'),
+          env.KAFKA_CONNECT() + '/connectors' + (isCreating ? '' : '/' + self.connectorName + '/config'),
           "-H 'Content-Type: application/json'",
           "-H 'Accept: application/json'",
           "-d '" + angular.toJson(requestBody, true) + "'",

src/kafka-connect/configuration/editor/configuration-editor.component.js

@@ -3,13 +3,13 @@
 
   /**
    * Configuration editor
-   * @param {String} [name] Connector name; denotes edit mode
+   * @param {String} [connectorName] Connector name; denotes edit mode
    * @param {Boolean} [ngReadonly]
    * @requires ngModel
    */
   angularAPP.component('configurationEditor', {
     bindings: {
-      name: '<?',
+      connectorName: '<?',
       ngReadonly: '<?',
     },
     controller: ConfigurationEditorController,
@@ -35,7 +35,7 @@
      * @param {Object} changes
      */
     function $onChanges(changes) {
-      if (angular.isObject(changes.name)) {
+      if (angular.isObject(changes.connectorName)) {
         renderModel(angular.copy(self.ngModelController.$modelValue)); // ensure model re-renders
       }
     }
@@ -63,7 +63,7 @@
         model = self.ngModelController.$modelValue;
       }
 
-      if (self.name) {
+      if (self.connectorName) {
         delete model.name;
       }
 

src/kafka-connect/configuration/editor/configuration-editor.html

@@ -17,7 +17,7 @@
   </md-tab>
   <md-tab label="cURL">
     <configuration-editor-curl
-      name="$ctrl.name"
+      connector-name="$ctrl.connectorName"
       ng-model="$ctrl.model">
     </configuration-editor-curl>
   </md-tab>

src/kafka-connect/configuration/validation/configuration-validation-messages.component.js

@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  /**
+   * Configuration validation messages component
+   * @param {String} connectorClass Connector classname
+   * @param {Object} form Configuration form
+   * @param {String} modelName Name of configuration model
+   */
+  angularAPP.component('configurationValidationMessages', {
+    bindings: {
+      connectorClass: '<',
+      form: '<',
+      modelName: '@',
+    },
+    templateUrl: 'src/kafka-connect/configuration/validation/configuration-validation-messages.html',
+  });
+
+})();

src/kafka-connect/configuration/validation/configuration-validation-messages.html

@@ -0,0 +1,8 @@
+<div class="red">
+  <div ng-messages="$ctrl.form.$error">
+    <div ng-message="parse">Invalid syntax</div>
+  </div>
+  <div ng-messages="$ctrl.form[$ctrl.modelName].$error">
+    <div ng-bind-template="Classname '{{:: $ctrl.connectorClass }}' is not defined" ng-message="classname"></div>
+  </div>
+</div>

src/kafka-connect/configuration/validation/validate-configuration-classname.directive.js

@@ -0,0 +1,48 @@
+(function() {
+  'use strict';
+
+  /**
+   * Configuration classname validation directive
+   * @requires ngModel
+   */
+  angularAPP.directive('validateConfigurationClassname', function () {
+    return {
+      bindToController: true,
+      controller: ValidateConfigurationClassnameDirectiveController,
+      require: {
+        ngModelController: 'ngModel',
+      },
+      restrict: 'A',
+    };
+  });
+
+  /**
+   * Controller for `validateConfigurationClassname` component
+   * @requires $attrs
+   * @requires $parse
+   * @requires $scope
+   */
+  function ValidateConfigurationClassnameDirectiveController($attrs, $parse, $scope) {
+    var self = this;
+
+    // Methods
+    self.$onInit = $onInit;
+
+    /**
+     * Initializes the configuration classname validation directive
+     */
+    function $onInit() {
+      var classname;
+
+      $scope.$watch($attrs.validateConfigurationClassname, function (clazz) {
+        classname = clazz;
+      });
+
+      self.ngModelController.$validators.classname = function (model) {
+        return angular.isUndefined(model) ||
+          (classname && angular.isObject(model) && classname === model['connector.class']);
+      };
+    }
+  }
+
+})();

src/kafka-connect/create-connector/create-connector.controller.js

@@ -47,21 +47,8 @@ angularAPP.controller('CreateConnectorCtrl', function ($scope, $rootScope, $http
               model = $scope.model;
             }
 
-            // Make sure the 'classname' is a valid one - as it can crash the connect services
-            var classname = model['connector.class'];
-            if (classname != $scope.connector.class) {
-                console.log("error in classname -> " + classname);
-                var errors = { errors : [ 'Classname "' + $scope.connector.class + '" is not defined' ] };
-                errorConfigs.push(errors);
-
-                if(errorConfigs == 0) {
-                    $scope.validConfig = constants.VIEW_MESSAGE_CONNECTOR_VALID;
-                }
-                $scope.errorConfigs = errorConfigs;
-            }
-
             //STEP 1: Validate
-            KafkaConnectFactory.validateConnectorConfig(classname, model).then(
+            KafkaConnectFactory.validateConnectorConfig($scope.connector.class, model).then(
                 function success(data) {
                   $log.info('Total validation errors from API => ' + data.error_count);
                   //STEP 2: Get errors if any

src/kafka-connect/create-connector/create-connector.html

@@ -39,8 +39,10 @@ <h3 ng-show="connector.type=='Sink'" style="font-size:12px;padding:0px; margin:0
             <md-card-content style="padding-top: 0">
               <form name="form">
                 <configuration-editor
+                  name="configuration"
                   ng-model="model"
-                  ng-model-options="{ debounce: 500 }">
+                  ng-model-options="{ debounce: 500 }"
+                  validate-configuration-classname="::connector.class">
                 </configuration-editor>
                 <md-toolbar class="md-hue-2" style="background-color: transparent;color:#333;height: 20px;">
                   <div class="md-toolbar-tools">
@@ -70,9 +72,11 @@ <h3 ng-show="connector.type=='Sink'" style="font-size:12px;padding:0px; margin:0
               <div class="green" ng-show="noextraconfig">There is no extra config</div>
 
               <!--Validation not OK-->
-              <div class="red" ng-messages="form.$error">
-                <div ng-message="parse">Invalid syntax</div>
-              </div>
+              <configuration-validation-messages
+                connector-class="::connector.class"
+                form="form"
+                model-name="configuration">
+              </configuration-validation-messages>
               <div class="red" ng-repeat="errorConfig in errorConfigs">
                 <div ng-bind="error" ng-repeat="error in errorConfig.errors"></div>
               </div>

src/kafka-connect/view/connector-view.html

@@ -159,17 +159,21 @@ <h4 style="font-size:14px"> <span><i class="fa fa-file-text-o" aria-hidden="true
   <md-card-content style="padding-top: 0">
       <form class="form" name="form">
         <configuration-editor
-          name="connectorDetails.name"
+          connector-name="connectorDetails.name"
+          name="configuration"
           ng-model="model"
-          ng-readonly="!isEditing">
+          ng-readonly="!isEditing"
+          validate-configuration-classname="::connectorDetails.config['connector.class']">
         </configuration-editor>
 
         <br>
 
         <!--Validation Errors-->
-        <div class="red" ng-messages="form.$error">
-          <div ng-message="parse">Invalid syntax</div>
-        </div>
+        <configuration-validation-messages
+          connector-class="::connectorDetails.config['connector.class']"
+          form="form"
+          model-name="configuration">
+        </configuration-validation-messages>
         <div class="red" ng-repeat="errorConfig in errorConfigs">
           <div ng-repeat="error in errorConfig.errors">
             - "{{errorConfig.name}}" : {{error}}

src/kafka-connect/view/view.controller.js

@@ -107,7 +107,7 @@ angularAPP.controller('ConnectorDetailCtrl', function ($rootScope, $scope, $rout
     validationRequest.name = name;
 
     KafkaConnectFactory
-      .validateConnectorConfig(connectorDetails.config["connector.class"], validationRequest)
+      .validateConnectorConfig(connectorDetails.config['connector.class'], validationRequest)
       .then(function (data) {
         var errorConfigs = parseValidationErrors(data);