Prevent the same kafka topic name from being used twice on the same group

webapp/ansible/roles/ember/tasks/install.yml

@@ -42,11 +42,6 @@
     tags:
       - ember-install
 
-  - name: Fix ember-cli-bootstrap-tokenfield bug
-    replace: dest={{ install_dir }}/node_modules/ember-cli-bootstrap-tokenfield/addon/components/input-tokenfield.js
-             regexp='(.*)createTokenOnBlur(.*)'
-             replace='\1createTokensOnBlur\2'
-
   - name: Create Ember config directory
     file: path={{install_dir}}/config state=directory
     tags:

webapp/frontend/app/components/kafka-topics.js

+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  topics: [],
+
+  didInsertElement: function(){
+    this._super(...arguments);
+
+    // Initialize tokenfield.
+    this.$('#tokenfield')
+      .on('tokenfield:createtoken', this.createTokenEvent)
+      .tokenfield({
+        createTokensOnBlur: true
+      });
+  },
+
+  createTokenEvent: function(event){
+    var existingTokens = Ember.$(this).tokenfield('getTokens');
+
+    Ember.$.each(existingTokens, function(index, token) {
+      if (token.value === event.attrs.value){
+        event.preventDefault();
+      }
+    });
+  },
+
+  actions: {
+    updateTopics: function(){
+      this.set('topics', this.$('#tokenfield').tokenfield('getTokensList').replace(/\s+/g, '').split(','));
+    }
+  }
+
+});

webapp/frontend/app/controllers/create-lambda-instance.js

@@ -44,6 +44,9 @@ export default Ember.Controller.extend({
   slaveRAMSelectDisabled: false,
   slaveDiskSelectDisabled: false,
 
+  kafkaInputTopics: ["input"],
+  kafkaOutputTopics: ["batch-output", "stream-output"],
+
   actions: {
     saveLambdaInstance: function(newLambdaInstance){
       newLambdaInstance.set('instanceName', this.get('instanceName'));
@@ -68,52 +71,19 @@ export default Ember.Controller.extend({
       }
       newLambdaInstance.set('publicKeyName', requestedPublicKeys);
 
-      var kafkaOutputTopics, kafkaInputTopics;
-
-      var kafkaInputTopicsString = this.get('kafkaInputTopics');
-      if (kafkaInputTopicsString) {
-        kafkaInputTopics = kafkaInputTopicsString.replace(/\s+/g, '').split(',');
-      }
-
-      var kafkaOutputTopicsString = this.get('kafkaOutputTopics');
-      if (kafkaOutputTopicsString) {
-        kafkaOutputTopics = kafkaOutputTopicsString.replace(/\s+/g, '').split(',');
-      }
+      newLambdaInstance.set('kafkaInputTopics', this.get('kafkaInputTopics'));
+      newLambdaInstance.set('kafkaOutputTopics', this.get('kafkaOutputTopics'));
 
-      var duplicateTopic = false;
-      if (kafkaInputTopics && kafkaOutputTopics) {
-        kafkaInputTopics.forEach(function (inputTopic) {
-          if (kafkaOutputTopics.indexOf(inputTopic) !== -1) {
-            duplicateTopic = true;
-          }
-        });
-      }
-
-      if (duplicateTopic) {
-        this.set('duplicate_message', 'Apache Kafka input and output topics must be different!');
-        this.set('duplicate', true);
-        document.getElementById('inputTopics').focus();
-      }
-      else {
-        newLambdaInstance.set('kafkaInputTopics', kafkaInputTopics);
-        newLambdaInstance.set('kafkaOutputTopics', kafkaOutputTopics);
-
-        var self = this;
-        newLambdaInstance.save().then(function(){
-          self.transitionToRoute('lambda-instance', newLambdaInstance.get('id')).catch(function() {
-            self.transitionToRoute('lambda-instances.index').then(function(newRoute) {
-              newRoute.controller.set('message', 'Your lambda instance creation will begin shortly.');
-              newRoute.controller.set('request', true);
-              newRoute.controller.send('start_stop');
-            });
+      var self = this;
+      newLambdaInstance.save().then(function(){
+        self.transitionToRoute('lambda-instance', newLambdaInstance.get('id')).catch(function() {
+          self.transitionToRoute('lambda-instances.index').then(function(newRoute) {
+            newRoute.controller.set('message', 'Your lambda instance creation will begin shortly.');
+            newRoute.controller.set('request', true);
+            newRoute.controller.send('start_stop');
           });
         });
-      }
-    },
-
-    close_alert: function()
-    {
-      this.set('duplicate', false);
+      });
     },
 
     selectFromDropDownList: function(variable, event){
@@ -328,6 +298,18 @@ export default Ember.Controller.extend({
       this.get('slaveRAMSelectDisabled') || this.get('slaveDiskSelectDisabled')
       )
     );
+  },
+
+  kafkaInputTopicsObserver: Ember.observer('kafkaInputTopics', function() {
+    this.parseKafkaTopics("Input");
+  }),
+
+  kafkaOutputTopicsObserver: Ember.observer('kafkaOutputTopics', function() {
+    this.parseKafkaTopics("Output");
+  }),
+
+  parseKafkaTopics: function(message){
+    console.log(message);
   }
 
 });

webapp/frontend/app/routes/create-lambda-instance.js

@@ -111,6 +111,9 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 
       controller.set('selectedMasterNodeDisk', masterNodeDiskValues[0]['value']);
       controller.set('selectedSlaveNodeDisk', slaveNodeDiskValues[0]['value']);
+
+      controller.set('kafkaInputTopics', ["input"]);
+      controller.set('kafkaOutputTopics', ["batch-output", "stream-output"]);
     }
   }
 });

webapp/frontend/app/templates/components/kafka-topics.hbs

+<input type="text" class="form-control" id="tokenfield" placeholder="e.g. topic1, topic2, topic3" onChange={{action "updateTopics"}}>
\ No newline at end of file

webapp/frontend/app/templates/create-lambda-instance.hbs

@@ -99,25 +99,17 @@
             <div class="row">
               <div class="form-group col-sm-6">
                 <label for="kafka_topics">Apache Kafka input topics:</label>
-                  {{input-tokenfield value=kafkaInputTopics createTokensOnBlur=true
-                  placeholder="e.g. topic1, topic2, topic3" id="inputTopics"}}
+                  {{kafka-topics topics=kafkaInputTopics}}
                   <span id="helpBlock" class="help-block">Names of Apache Kafka input topics<br>
                   Default input topic, if no names are given: "input"</span>
               </div>
               <div class="form-group col-sm-6 pull-right">
                 <label for="kafka_topics">Apache Kafka output topics:</label>
-                  {{input-tokenfield value=kafkaOutputTopics createTokensOnBlur=true
-                  placeholder="e.g. topic1, topic2, topic3"}}
+                  {{kafka-topics topics=kafkaOutputTopics}}
                   <span id="helpBlock" class="help-block">Names of Apache Kafka output topics<br>
                   Default output topics, if no names are given: "batch-output", "stream-output"</span>
               </div>
             </div><!--row-->
-            {{#if duplicate}}
-                <div  class="alert alert-dismissable alert-danger" id="alert">
-                    <button type="button" class="close" {{action "close_alert"}}>×</button>
-                  {{duplicate_message}}
-                </div>
-            {{/if}}
             <div class="row">
               <div class="form-group col-sm-3">
                 <label for="public_key_name">Public SSH keys (*):</label>

webapp/frontend/ember-cli-build.js

@@ -19,19 +19,22 @@ module.exports = function(defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
-  app.import(app.bowerDirectory + '/AdminLTE/plugins/jQuery/jQuery-2.2.0.min.js');
-  app.import(app.bowerDirectory + '/AdminLTE/plugins/jQueryUI/jquery-ui.min.js');
+  app.import(app.bowerDirectory + '/jquery/dist/jquery.js');
+  app.import(app.bowerDirectory + '/jquery-ui/jquery-ui.js');
+
+  app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
+  app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
+
   app.import(app.bowerDirectory + '/handlebars/handlebars.js');
-  //app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
-  //app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
-  app.import(app.bowerDirectory + '/AdminLTE/bootstrap/js/bootstrap.min.js');
   app.import(app.bowerDirectory + '/AdminLTE/dist/js/app.min.js');
-  app.import(app.bowerDirectory + '/AdminLTE/bootstrap/css/bootstrap.min.css');
   app.import(app.bowerDirectory + '/AdminLTE/dist/css/AdminLTE.min.css');
   app.import(app.bowerDirectory + '/AdminLTE/dist/css/skins/_all-skins.min.css');
   app.import(app.bowerDirectory + '/AdminLTE/build/less/header.less');
   app.import(app.bowerDirectory + '/AdminLTE/build/less/dropdown.less');
   app.import(app.bowerDirectory + '/AdminLTE/build/less/sidebar.less');
 
+  app.import(app.bowerDirectory + '/bootstrap-tokenfield/dist/bootstrap-tokenfield.js');
+  app.import(app.bowerDirectory + '/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css');
+
   return app.toTree();
 };

webapp/frontend/package.json

@@ -23,7 +23,6 @@
     "ember-cli": "1.13.8",
     "ember-cli-app-version": "0.5.0",
     "ember-cli-babel": "^5.1.3",
-    "ember-cli-bootstrap-tokenfield": "0.0.8",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-cors": "0.0.1",
     "ember-cli-dependency-checker": "^1.0.1",