Added CodeMirror for notification http headers field

#1752

awx/ui/client/src/notifications/add/add.controller.js

@@ -9,13 +9,13 @@ export default
         'NotificationsFormObject', 'ProcessErrors', 'GetBasePath', 'Empty',
         'GenerateForm', 'SearchInit' , 'PaginateInit', 'LookUpInit',
         'OrganizationList', '$scope', '$state', 'CreateSelect2', 'GetChoices',
-        'NotificationsTypeChange',
+        'NotificationsTypeChange', 'ParseTypeChange',
         function(
             $rootScope, pagination, $compile, SchedulerInit, Rest, Wait,
             NotificationsFormObject, ProcessErrors, GetBasePath, Empty,
             GenerateForm, SearchInit, PaginateInit, LookUpInit,
             OrganizationList, $scope, $state, CreateSelect2, GetChoices,
-            NotificationsTypeChange
+            NotificationsTypeChange, ParseTypeChange
         ) {
             var generator = GenerateForm,
                 form = NotificationsFormObject,
@@ -45,6 +45,7 @@ export default
                 });
             });
 
+
             LookUpInit({
                     url: GetBasePath('organization'),
                     scope: $scope,
@@ -62,6 +63,28 @@ export default
                 callback: 'choicesReady'
             });
 
+            $scope.$watch('headers', function validate_headers(str) {
+                try {
+                    let headers = JSON.parse(str);
+                    if (_.isObject(headers) && !_.isArray(headers)) {
+                        let valid = true;
+                        for (let k in headers) {
+                            if (_.isObject(headers[k])) {
+                                valid = false;
+                            }
+                            if (headers[k] === null) {
+                                valid = false;
+                            }
+                        }
+                        $scope.notification_template_form.headers.$setValidity('json', valid);
+                        return;
+                    }
+                } catch (err) {
+                }
+
+                $scope.notification_template_form.headers.$setValidity('json', false);
+            });
+
             $scope.typeChange = function () {
                 for(var fld in form.fields){
                     if(form.fields[fld] && form.fields[fld].subForm){
@@ -73,6 +96,18 @@ export default
                 NotificationsTypeChange.getDetailFields($scope.notification_type.value).forEach(function(field) {
                     $scope[field[0]] = field[1];
                 });
+
+
+                $scope.parse_type = 'json';
+                if (!$scope.headers) {
+                    $scope.headers = "{\n}";
+                }
+                ParseTypeChange({
+                    scope: $scope,
+                    parse_variable: 'parse_type',
+                    variable: 'headers',
+                    field_id: 'notification_template_headers'
+                });
             };
 
             // Save
@@ -91,7 +126,11 @@ export default
 
                 function processValue(value, i , field){
                     if(field.type === 'textarea'){
-                        $scope[i] = $scope[i].toString().split('\n');
+                        if (field.name == 'headers') {
+                            $scope[i] = JSON.parse($scope[i]);
+                        } else {
+                            $scope[i] = $scope[i].toString().split('\n');
+                        }
                     }
                     if(field.type === 'checkbox'){
                         $scope[i] = Boolean($scope[i]);
@@ -100,7 +139,6 @@ export default
                         $scope[i] = Number($scope[i]);
                     }
                     return $scope[i];
-
                 }
 
                 params.notification_configuration = _.object(Object.keys(form.fields)

awx/ui/client/src/notifications/edit/edit.controller.js

@@ -10,14 +10,14 @@ export default
         'GenerateForm', 'SearchInit' , 'PaginateInit',
         'LookUpInit', 'OrganizationList', 'notification_template',
         '$scope', '$state', 'GetChoices', 'CreateSelect2', 'Empty',
-        '$rootScope', 'NotificationsTypeChange',
+        '$rootScope', 'NotificationsTypeChange', 'ParseTypeChange',
         function(
             Rest, Wait,
             NotificationsFormObject, ProcessErrors, GetBasePath,
             GenerateForm, SearchInit, PaginateInit,
             LookUpInit, OrganizationList, notification_template,
             $scope, $state, GetChoices, CreateSelect2, Empty,
-            $rootScope, NotificationsTypeChange
+            $rootScope, NotificationsTypeChange, ParseTypeChange
         ) {
             var generator = GenerateForm,
                 id = notification_template.id,
@@ -59,7 +59,11 @@ export default
                                     master[fld] = data.notification_configuration[fld];
 
                                     if(form.fields[fld].type === 'textarea'){
-                                        $scope[fld] = $scope[fld].toString().replace(',' , '\n');
+                                        if (form.fields[fld].name == 'headers') {
+                                            $scope[fld] = JSON.stringify($scope[fld], null, 2);
+                                        } else {
+                                            $scope[fld] = $scope[fld].toString().replace(',' , '\n');
+                                        }
                                     }
                                 }
 
@@ -88,6 +92,17 @@ export default
                                 $scope[field[0]] = field[1];
                             });
                             $scope.notification_obj = data;
+
+                            $scope.parse_type = 'json';
+                            if (!$scope.headers) {
+                                $scope.headers = "{\n}";
+                            }
+                            ParseTypeChange({
+                                scope: $scope,
+                                parse_variable: 'parse_type',
+                                variable: 'headers',
+                                field_id: 'notification_template_headers',
+                            });
                             Wait('stop');
                         })
                         .error(function (data, status) {
@@ -112,6 +127,29 @@ export default
                 callback: 'choicesReady'
             });
 
+
+            $scope.$watch('headers', function validate_headers(str) {
+                try {
+                    let headers = JSON.parse(str);
+                    if (_.isObject(headers) && !_.isArray(headers)) {
+                        let valid = true;
+                        for (let k in headers) {
+                            if (_.isObject(headers[k])) {
+                                valid = false;
+                            }
+                            if (headers[k] === null) {
+                                valid = false;
+                            }
+                        }
+                        $scope.notification_template_form.headers.$setValidity('json', valid);
+                        return;
+                    }
+                } catch (err) {
+                }
+
+                $scope.notification_template_form.headers.$setValidity('json', false);
+            });
+
             $scope.typeChange = function () {
                 for(var fld in form.fields){
                     if(form.fields[fld] && form.fields[fld].subForm){
@@ -123,6 +161,17 @@ export default
                 NotificationsTypeChange.getDetailFields($scope.notification_type.value).forEach(function(field) {
                     $scope[field[0]] = field[1];
                 });
+
+                $scope.parse_type = 'json';
+                if (!$scope.headers) {
+                    $scope.headers = "{\n}";
+                }
+                ParseTypeChange({
+                    scope: $scope,
+                    parse_variable: 'parse_type',
+                    variable: 'headers',
+                    field_id: 'notification_template_headers',
+                });
             };
 
             $scope.formSave = function(){
@@ -140,13 +189,19 @@ export default
 
                 function processValue(value, i , field){
                     if(field.type === 'textarea'){
-                        $scope[i] = $scope[i].toString().split('\n');
+                        if (field.name == 'headers') {
+                            $scope[i] = JSON.parse($scope[i]);
+                        } else {
+                            $scope[i] = $scope[i].toString().split('\n');
+                        }
                     }
                     if(field.type === 'checkbox'){
                         $scope[i] = Boolean($scope[i]);
                     }
+                    if(field.type === 'number'){
+                        $scope[i] = Number($scope[i]);
+                    }
                     return $scope[i];
-
                 }
 
                 params.notification_configuration = _.object(Object.keys(form.fields)

awx/ui/client/src/notifications/notificationTemplates.form.js

@@ -297,11 +297,19 @@ export default function() {
             },
             headers: {
                 label: 'HTTP Headers',
-                type: 'text',
+                type: 'textarea',
+                rows: 5,
                 awRequiredWhen: {
                     reqExpression: "webhook_required",
                     init: "false"
                 },
+                awPopOver: '<p>Specify HTTP Headers in JSON format</p>'
+                         + '<p>For example:<br><pre>\n'
+                         + '{\n'
+                         + '  "X-Auth-Token": "828jf0",\n'
+                         + '  "X-Ansible": "Is great!"\n'
+                         + '}\n'
+                         + '</pre></p>',
                 ngShow: "notification_type.value == 'webhook' ",
                 subForm: 'typeSubForm'
             },