Merge pull request #26 from namoscato/master

Fix inconsistent connector creation behavior

Author: Antwnis

package.json

@@ -18,7 +18,8 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "postinstall": "bower install"
+    "postinstall": "bower install",
+    "build": "grunt && cd dist && tar cvzf kafka-connect-ui.tar.gz ."
   },
   "repository": {
     "type": "git",

src/app.js

@@ -52,15 +52,7 @@ angularAPP.config(function ($routeProvider) {
       templateUrl: 'src/kafka-connect/select-type/sink-or-source.html',
       controller: 'SelectNewConnectorCtrl'
     })
-    .when('/cluster/:cluster/create-connector/:type/:name', {
-      templateUrl: 'src/kafka-connect/create-connector/create-connector.html',
-      controller: 'CreateConnectorCtrl'
-    })
-    .when('/cluster/:cluster/create-connector/:name', {
-      templateUrl: 'src/kafka-connect/create-connector/create-connector.html',
-      controller: 'CreateConnectorCtrl'
-    })
-    .when('/cluster/:cluster/create-connector/:type/:name/:tab', {
+    .when('/cluster/:cluster/create-connector/:className', {
       templateUrl: 'src/kafka-connect/create-connector/create-connector.html',
       controller: 'CreateConnectorCtrl'
     })

src/factories/kafka-connect-api.factory.js

@@ -101,7 +101,7 @@ angularAPP.service('KafkaConnectFactory', function ($rootScope, $http, $location
          .error(function (responseError) {
               var msg = "Failed at method [" + method + "] with error: \n" + JSON.stringify(responseError);
               $log.error(msg);
-              if (responseError.error_code == 404) {
+              if (angular.isObject(responseError) && responseError.error_code == 404) {
                 $rootScope.notExists = true;
               }
               deferred.reject(msg);

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

@@ -3,18 +3,22 @@
     Config is created on the fly using the `template` models.
  */
 angularAPP.controller('CreateConnectorCtrl', function ($scope, $rootScope, $http, $log, $routeParams, $location, $filter, KafkaConnectFactory, supportedConnectorsFactory,  NewConnectorFactory, env, constants) {
-      $http.get(env.KAFKA_CONNECT() + '/connector-plugins').then(function(allPlugins){
-            angular.forEach(allPlugins.data, function (plugin) {
-              if (plugin.class.indexOf($routeParams.name) > 0) {
-               getClassConfig(plugin.class)
-              }
-            });
-      },
-      function (reason) {
-         $log.error('Failed: ' + reason);
-       }, function (update) {
-         $log.info('Got notification: ' + update);
-       });
+  KafkaConnectFactory.getConnectorPlugins().then(function(allPlugins) {
+    var className;
+
+    for (var i in allPlugins) {
+      className = allPlugins[i].class;
+
+      if (className === $routeParams.className) {
+        getClassConfig(className)
+        break;
+      }
+    }
+  }, function (reason) {
+    $log.error('Failed: ' + reason);
+  }, function (update) {
+    $log.info('Got notification: ' + update);
+  });
 
   $scope.prefillValues = true;
   $scope.showCurl = false;

src/kafka-connect/select-type/sink-or-source.controller.js

@@ -1,6 +1,8 @@
-angularAPP.controller('SelectNewConnectorCtrl', function ($scope, $http, $log, $rootScope, KafkaConnectFactory, supportedConnectorsFactory, env  ) {
+angularAPP.controller('SelectNewConnectorCtrl', function ($scope, $http, $log, $rootScope, KafkaConnectFactory, supportedConnectorsFactory, env) {
   $log.info("SelectNewConnector controller");
 
+  var classpathMap = {};
+
   $scope.cluster = env.getSelectedCluster().NAME;
 
   var supportedConnectors = supportedConnectorsFactory.getSupportedConnectors();
@@ -9,14 +11,15 @@ angularAPP.controller('SelectNewConnectorCtrl', function ($scope, $http, $log, $
     $scope.sinks = supportedConnectors.filter(supportedConnectorsFactory.matchesType('Sink'));
   }
 
-  $scope.classesInClasspath = [];
   $scope.unsupportedConnectors = [];
   $scope.hasUnsupportedConnectors = false;
 
+  $scope.isClassInClasspath = isClassInClasspath;
 
-  KafkaConnectFactory.getConnectorPlugins(true).then(function (allPlugins) {
+  KafkaConnectFactory.getConnectorPlugins().then(function (allPlugins) {
     angular.forEach(allPlugins, function (plugin) {
-      $scope.classesInClasspath.push(plugin.class);
+      classpathMap[plugin.class] = true;
+
       if (supportedConnectorsFactory.getAllClassFromTemplate().indexOf(plugin.class) == -1) {
         $scope.hasUnsupportedConnectors = true;
           var type="Unknown";
@@ -44,4 +47,13 @@ angularAPP.controller('SelectNewConnectorCtrl', function ($scope, $http, $log, $
   }, function (update) {
     $log.info('Got notification: ' + update);
   });
-});
+
+  /**
+   * @description Determines if the specified class name is in the classpath
+   * @param {String} className
+   * @returns {Boolean}
+   */
+  function isClassInClasspath(className) {
+    return angular.isDefined(classpathMap[className]);
+  }
+});

src/kafka-connect/select-type/sink-or-source.html

@@ -24,10 +24,10 @@ <h4>
 
                 <md-list class="dense" flex ng-if="sources.length > 0">
                     <md-subheader class="md-no-sticky">Sources</md-subheader>
-                    <md-list-item ng-repeat='source in sources | filter : search2' class="md-2-line"
-                                  ng-if="classesInClasspath.indexOf(source.class) !=-1"
-                                  ng-href="{{ classesInClasspath.indexOf(source.class) !==-1 && '#/cluster/'+cluster+'/create-connector/source/' + source.name || '' }}"
-                                  ng-class="classesInClasspath.indexOf(source.class) ==-1 && 'notavailable' || '' ">
+                    <md-list-item ng-repeat="source in sources | filter : search2"
+                                  class="md-2-line"
+                                  ng-if="isClassInClasspath(source.class)"
+                                  ng-href="#/cluster/{{ cluster }}/create-connector/{{ source.class }}">
                         <img ng-src="src/assets/icons/{{source.icon}}" class="md-avatar" style="width:40px;height:40px;" />
                         <div class="md-list-item-text" >
                             <h3><b>{{source.name}}</b></h3>
@@ -38,10 +38,10 @@ <h3><b>{{source.name}}</b></h3>
 
                 <md-list class="dense" flex ng-if="sinks.length > 0" >
                     <md-subheader class="md-no-sticky">Sinks</md-subheader>
-                    <md-list-item ng-repeat='sink in sinks  | filter : search2' class="md-2-line"
-                                  ng-if="classesInClasspath.indexOf(sink.class) !=-1"
-                                  ng-href="{{ classesInClasspath.indexOf(sink.class) !==-1 && '#/cluster/'+cluster+'/create-connector/sink/' + sink.name || '' }}"
-                                  ng-class="classesInClasspath.indexOf(sink.class) ==-1 && 'notavailable' || '' ">
+                    <md-list-item ng-repeat="sink in sinks  | filter : search2"
+                                  class="md-2-line"
+                                  ng-if="isClassInClasspath(sink.class)"
+                                  ng-href="#/cluster/{{ cluster }}/create-connector/{{ sink.class }}">
                         <img ng-src="src/assets/icons/{{sink.icon}}" class="md-avatar" style="width:40px;height:40px;" />
                         <div class="md-list-item-text">
                             <h3><b>{{sink.name}}</b></h3>