Skip to content

Add classname validation to edit configuration context #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -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'
}
},
2 changes: 2 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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) + "'",
Original file line number Diff line number Diff line change
@@ -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;
}

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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',
});

})();
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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']);
};
}
}

})();
Original file line number Diff line number Diff line change
@@ -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
12 changes: 8 additions & 4 deletions src/kafka-connect/create-connector/create-connector.html
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 9 additions & 5 deletions src/kafka-connect/view/connector-view.html
Original file line number Diff line number Diff line change
@@ -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}}
2 changes: 1 addition & 1 deletion src/kafka-connect/view/view.controller.js
Original file line number Diff line number Diff line change
@@ -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);