diff --git a/client/app/custom_modules/custom_modules.component.js b/client/app/custom_modules/custom_modules.component.js index 2847c0c..991510f 100644 --- a/client/app/custom_modules/custom_modules.component.js +++ b/client/app/custom_modules/custom_modules.component.js @@ -10,47 +10,58 @@ export class CustomModulesComponent { constructor($scope,customModules,$sce,ansi2html,Projects,$uibModal,YAML) { 'ngInject'; - $scope.custom_modules = []; - $scope.selectedModule = {module:{},module_code:"",module_unchanged_code:""}; - $scope.selected_module_code = "something"; + var customModulesCtrl = this; - $scope.showNewModuleForm = {value:false}; + customModulesCtrl.custom_modules = []; + customModulesCtrl.selectedModule = {module:{},module_code:"",module_unchanged_code:""}; + customModulesCtrl.selected_module_code = "something"; - $scope.getProjects = function(){ - $scope.projects = Projects.resource.query(function(){ - if($scope.projects.length){ - $scope.selectedProjectID = localStorage.selectedProjectID || $scope.projects[0]._id; - $scope.projectSelected($scope.selectedProjectID) + customModulesCtrl.showNewModuleForm = {value:false}; + + /** + * Get List of Projects + */ + customModulesCtrl.getProjects = function(){ + customModulesCtrl.projects = Projects.resource.query(function(){ + if(customModulesCtrl.projects.length){ + customModulesCtrl.selectedProjectID = localStorage.selectedProjectID || customModulesCtrl.projects[0]._id; + customModulesCtrl.projectSelected(customModulesCtrl.selectedProjectID) } }) }; - $scope.projectSelected = function(projectID){ + /** + * On project selection + * - List all custom modules in that project + * @param projectID + */ + customModulesCtrl.projectSelected = function(projectID){ localStorage.selectedProjectID = projectID; - $scope.selectedProject = Projects.resource.get({id: projectID},function(){ - Projects.selectedProject = $scope.selectedProject; - $scope.getCustomModules(); + customModulesCtrl.selectedProject = Projects.resource.get({id: projectID},function(){ + Projects.selectedProject = customModulesCtrl.selectedProject; + customModulesCtrl.getCustomModules(); }) }; - $scope.getProjects(); - $scope.getCustomModules = function(){ + /** + * Get a list of Custom modules in the selected project + */ + customModulesCtrl.getCustomModules = function(){ customModules.get(function(response){ - console.log(response.data); var lines = response.data.split("\n"); if(lines.length) lines = lines .filter(function(line){return line.indexOf(".py") > -1}) .map(function(item){return {name:item}}); - $scope.custom_modules = lines; + customModulesCtrl.custom_modules = lines; - if($scope.selectedModule.module.name){ - $scope.selectedModule.module = $scope.custom_modules.filter(function(item){ - return (item.name == $scope.selectedModule.module.name) + if(customModulesCtrl.selectedModule.module.name){ + customModulesCtrl.selectedModule.module = customModulesCtrl.custom_modules.filter(function(item){ + return (item.name == customModulesCtrl.selectedModule.module.name) })[0] } @@ -58,64 +69,88 @@ export class CustomModulesComponent { }); }; - $scope.loadingModuleCode = false - $scope.showModuleCode = function(module_name){ - $scope.loadingModuleCode = true; + + /** + * Show Module Code. Read the module file contents and display in UI + * @param module_name + */ + customModulesCtrl.loadingModuleCode = false; + + customModulesCtrl.showModuleCode = function(module_name){ + customModulesCtrl.loadingModuleCode = true; if(!module_name){ - $scope.selectedModule.module_code = "Select a module"; + customModulesCtrl.selectedModule.module_code = "Select a module"; return; } customModules.show(module_name,function(response) { - $scope.loadingModuleCode = false; - $scope.selectedModule.module_code = response.data.split("Stream :: close")[0]; - $scope.selectedModule.module_unchanged_code = angular.copy($scope.selectedModule.module_code); + customModulesCtrl.loadingModuleCode = false; + customModulesCtrl.selectedModule.module_code = response.data.split("Stream :: close")[0]; + customModulesCtrl.selectedModule.module_unchanged_code = angular.copy(customModulesCtrl.selectedModule.module_code); }); }; - $scope.$watch('selectedModule.module',function(newValue,oldValue){ + + /** + * On selected module change display code in UI + */ + $scope.$watch('customModulesCtrl.selectedModule.module',function(newValue,oldValue){ if(newValue.name && newValue.name !== oldValue.name){ - $scope.selectedModule.module_code = "Loading Module Code..."; - $scope.showModuleCode(newValue.name) + customModulesCtrl.selectedModule.module_code = "Loading Module Code..."; + customModulesCtrl.showModuleCode(newValue.name) } }); - $scope.code_has_changed = false; - $scope.codeChanged = function(){ - console.log("Code Changed"); - if($scope.selectedModule.module_unchanged_code !== $scope.selectedModule.module_code){ - $scope.code_has_changed = true + /** + * On Code Change + * + */ + customModulesCtrl.code_has_changed = false; + + customModulesCtrl.codeChanged = function(){ + if(customModulesCtrl.selectedModule.module_unchanged_code !== customModulesCtrl.selectedModule.module_code){ + customModulesCtrl.code_has_changed = true }else{ - $scope.code_has_changed = false + customModulesCtrl.code_has_changed = false } }; - $scope.discardCodeChanges = function(){ - $scope.selectedModule.module_code = angular.copy($scope.selectedModule.module_unchanged_code); + /** + * Discard code changes + */ + customModulesCtrl.discardCodeChanges = function(){ + customModulesCtrl.selectedModule.module_code = angular.copy(customModulesCtrl.selectedModule.module_unchanged_code); }; - $scope.saveModule = function(){ - $scope.saving = true; - customModules.save($scope.selectedModule.module.name,$scope.selectedModule.module_code,function(response){ - $scope.saving = false; - $scope.code_has_changed = false; - $scope.selectedModule.module_unchanged_code = angular.copy($scope.selectedModule.module_code); - console.log("Success") + /** + * Save Module + */ + customModulesCtrl.saveModule = function(){ + customModulesCtrl.saving = true; + customModules.save(customModulesCtrl.selectedModule.module.name,customModulesCtrl.selectedModule.module_code,function(response){ + customModulesCtrl.saving = false; + customModulesCtrl.code_has_changed = false; + customModulesCtrl.selectedModule.module_unchanged_code = angular.copy(customModulesCtrl.selectedModule.module_code); + },function(response){ - $scope.saving = false; + customModulesCtrl.saving = false; console.error(response.data) }) }; - $scope.testModule = function(){ + + /** + * Test Module + */ + customModulesCtrl.testModule = function(){ var re = /([^]+DOCUMENTATION = '''\s+)([^]+?)(\s+'''[^]+)/; - var module_string = $scope.selectedModule.module_code.replace(re,'$2'); + var module_string = customModulesCtrl.selectedModule.module_code.replace(re,'$2'); - $scope.selectedModuleObject = YAML.parse(module_string); + customModulesCtrl.selectedModuleObject = YAML.parse(module_string); - //var options_copy = angular.copy($scope.selectedModuleObject.options); + //var options_copy = angular.copy(customModulesCtrl.selectedModuleObject.options); var options_copy = {}; /*options_copy = options_copy.map(function(item){ var temp_obj = {}; @@ -123,7 +158,7 @@ export class CustomModulesComponent { return temp_obj });*/ - var module_name = $scope.selectedModule.module.name; + var module_name = customModulesCtrl.selectedModule.module.name; var module_cached_args = null; try{ @@ -133,7 +168,7 @@ export class CustomModulesComponent { module_cached_args = null; } - angular.forEach($scope.selectedModuleObject.options,function(value,key){ + angular.forEach(customModulesCtrl.selectedModuleObject.options,function(value,key){ //var temp_obj = {}; //temp_obj[key] = ""; options_copy[key] = ""; @@ -146,24 +181,33 @@ export class CustomModulesComponent { var variable = {name:'',complexValue:options_copy}; - $scope.showComplexVariable(variable); + customModulesCtrl.showComplexVariable(variable); }; - $scope.newModule = function(){ - $scope.showNewModuleForm.value = true; + /** + * New Module - On pressing New Module button + */ + customModulesCtrl.newModule = function(){ + customModulesCtrl.showNewModuleForm.value = true; $scope.$broadcast ('newModule'); }; - $scope.editModule = function(){ - $scope.showNewModuleForm.value = true; + /** + * Edit Module - On pressing Edit Module button + */ + customModulesCtrl.editModule = function(){ + customModulesCtrl.showNewModuleForm.value = true; $scope.$broadcast ('editModule'); }; - - $scope.showComplexVariable = function(variable){ - $scope.result = ""; + /** + * Show Complex Variable modal for getting input parameters for testing module + * @param variable + */ + customModulesCtrl.showComplexVariable = function(variable){ + customModulesCtrl.result = ""; var modalInstance = $uibModal.open({ animation: true, template: require('../../app/modals/complex_var_modal/complexVariable.html'), @@ -188,7 +232,7 @@ export class CustomModulesComponent { modalInstance.result.then(function (module_args) { - var module_name = $scope.selectedModule.module.name; + var module_name = customModulesCtrl.selectedModule.module.name; /*var args = ""; angular.forEach(selectedItem,function(value,key){ @@ -205,22 +249,26 @@ export class CustomModulesComponent { localStorage['test_args_'+module_name] = JSON.stringify(module_args); - $scope.testing = true; + customModulesCtrl.testing = true; customModules.test(module_name,module_args,function(response) { - $scope.testing = false; - $scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "
")); + customModulesCtrl.testing = false; + customModulesCtrl.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "
")); }, function(response) { - $scope.testing = false; - $scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "
")); + customModulesCtrl.testing = false; + customModulesCtrl.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "
")); }); }, function () { }); - } + }; + + // List projects + customModulesCtrl.getProjects(); + } } diff --git a/client/app/custom_modules/custom_modules.html b/client/app/custom_modules/custom_modules.html index 7231f0c..11ac38d 100644 --- a/client/app/custom_modules/custom_modules.html +++ b/client/app/custom_modules/custom_modules.html @@ -1,10 +1,10 @@
-
-
- - + +
@@ -12,22 +12,14 @@ - - - + -
Select Name
+
{{module.name}}
@@ -35,18 +27,23 @@ - + -
-

+
+

-
+
+
+ + +
+
-
+
diff --git a/client/app/custom_modules/new_module/new_module.controller.js b/client/app/custom_modules/new_module/new_module.controller.js index c896d17..47ab65a 100644 --- a/client/app/custom_modules/new_module/new_module.controller.js +++ b/client/app/custom_modules/new_module/new_module.controller.js @@ -4,8 +4,13 @@ const angular = require('angular'); /*@ngInject*/ export function newModuleController($scope,$filter,customModules,ansible,YAML) { - $scope.optionTypes = ['str','list','dict','bool','int','float','path','raw','jsonarg','json','bytes','bits']; + var newModuleCtrl = this; + // List of options types for module parameters to be displayed in UI + newModuleCtrl.optionTypes = ['str','list','dict','bool','int','float','path','raw','jsonarg','json','bytes','bits']; + var parentCtrl = $scope.$parent.customModulesCtrl; + + // Define the default module object var defaultModule = { module:null, short_description:"", @@ -28,28 +33,35 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { }; - $scope.loadDefaultTemplate = function(){ - $scope.newModule = angular.copy(defaultModule); - $scope.selectedModule.module_code = "Loading Template.."; + // Load Default Template + newModuleCtrl.loadDefaultTemplate = function(){ + newModuleCtrl.newModule = angular.copy(defaultModule); + parentCtrl.selectedModule.module_code = "Loading Template.."; customModules.show('template.py',function(response) { - $scope.selectedModule.module_code = response.data.split("Stream :: close")[0]; + parentCtrl.selectedModule.module_code = response.data.split("Stream :: close")[0]; }); }; - $scope.$watch('newModule',function(newValue,oldValue){ - + // Watch for change in new module and update Documentation, parameters and examples dynamically + $scope.$watch('newModuleCtrl.newModule',function(newValue,oldValue){ + if(!newValue)return; updateDocumentation(newValue); updateParameters(newValue); updateExamples(newValue); },true); + /** + * Update parameters + * Use regex to identify patterns in code and update parameter section dynamically + * */ var updateParameters = function(newValue){ newValue = angular.copy(newValue); var parameters_definition_lines = []; var parameters_retreive_lines = []; + angular.forEach(newValue.options,function(option){ if(option.name) { var line = option.name + "=dict("; @@ -73,21 +85,26 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { var parameters_retreive_string = parameters_retreive_lines.join("\n "); var re = /(# <--Begin Parameter Definition -->\s+ )([^]+)(\s+ # <--END Parameter Definition -->)/; - $scope.selectedModule.module_code = $scope.selectedModule.module_code.replace(re,"$1" + parameters_definition_string + "$3"); + parentCtrl.selectedModule.module_code = parentCtrl.selectedModule.module_code.replace(re,"$1" + parameters_definition_string + "$3"); var supports_check_mode_string = '\n'; if(newValue.supports_check_mode){ - supports_check_mode_string = '\n supports_check_mode=True\n' + supports_check_mode_string = '\n , supports_check_mode=True\n' } var re2 = /(# <--Begin Supports Check Mode -->)([^]+)( # <--End Supports Check Mode -->)/; - $scope.selectedModule.module_code = $scope.selectedModule.module_code.replace(re2,"$1" + supports_check_mode_string + "$3"); + parentCtrl.selectedModule.module_code = parentCtrl.selectedModule.module_code.replace(re2,"$1" + supports_check_mode_string + "$3"); var re3 = /(# <--Begin Retreiving Parameters -->\s+ )([^]+)(\s+ # <--End Retreiving Parameters -->)/; - $scope.selectedModule.module_code = $scope.selectedModule.module_code.replace(re3,"$1" + parameters_retreive_string + "$3"); + parentCtrl.selectedModule.module_code = parentCtrl.selectedModule.module_code.replace(re3,"$1" + parameters_retreive_string + "$3"); }; + /** + * Update Documentation + * Update documentation section dynamically based on user input + * + * */ var updateDocumentation = function(newValue){ newValue = angular.copy(newValue); newValue.options = convertOptionsToObject(newValue.options); @@ -103,11 +120,11 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { if(newValue.requirements) newValue.requirements = newValue.requirements.split(";"); - $scope.documentation_yaml = '---\n' + $filter('json2yaml')(angular.toJson(newValue)).toString().replace(/__dot__/g,"."); + newModuleCtrl.documentation_yaml = '---\n' + $filter('json2yaml')(angular.toJson(newValue)).toString().replace(/__dot__/g,"."); //var re = /(.*DOCUMENTATION = '''\n)([^]+?)(\n'''.*)/; var re = /([^]+DOCUMENTATION = '''\s+)([^]+?)(\s+'''[^]+)/; - $scope.selectedModule.module_code = $scope.selectedModule.module_code.replace(re,'$1' + $scope.documentation_yaml + '$3'); + parentCtrl.selectedModule.module_code = parentCtrl.selectedModule.module_code.replace(re,'$1' + newModuleCtrl.documentation_yaml + '$3'); }; var updateExamples = function(newValue){ @@ -119,13 +136,17 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { moduleCopy[newValue.module] = convertOptionsToExampleObject(newValue.options); - $scope.example_yaml = YAML.stringify(moduleCopy,4); + newModuleCtrl.example_yaml = YAML.stringify(moduleCopy,4); //var re = /(.*DOCUMENTATION = '''\n)([^]+?)(\n'''.*)/; var re = /([^]+EXAMPLES = '''[^]+# <-- -->\s+)([^]+?)(\s+# <-- \/ -->\s+'''[^]+)/; - $scope.selectedModule.module_code = $scope.selectedModule.module_code.replace(re,'$1' + $scope.example_yaml + '$3'); + parentCtrl.selectedModule.module_code = parentCtrl.selectedModule.module_code.replace(re,'$1' + newModuleCtrl.example_yaml + '$3'); }; + + /** + * Convert Options to Object + * */ var convertOptionsToObject = function(options){ var result = {}; @@ -159,6 +180,10 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { }; + + /** + * Convert Options to Example Object + * */ var convertOptionsToExampleObject = function(options){ var result = {}; @@ -173,6 +198,10 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { }; + + /** + * Convert Options to Array + * */ var convertOptionsToArrays = function(options){ var result = []; @@ -186,10 +215,10 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { }; if(value.choices && value.choices.length) - option['choices'] = value.choices.map(function(item){return ('"' + item + '"')}).join(",") + option['choices'] = value.choices.map(function(item){return ('"' + item + '"')}).join(","); if(value.aliases && value.aliases.length) - option['aliases'] = value.aliases.map(function(item){return ('"' + item + '"')}).join(",") + option['aliases'] = value.aliases.map(function(item){return ('"' + item + '"')}).join(","); result.push(option) }); @@ -198,50 +227,66 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { }; - $scope.saveNewModule = function(){ - $scope.saving = true; - customModules.save($scope.newModule.module + '.py',$scope.selectedModule.module_code,function(response){ - $scope.saving = false; - $scope.getCustomModules(); + /** + * Save New Module + * + * */ + newModuleCtrl.saveNewModule = function(){ + newModuleCtrl.saving = true; + + customModules.save(newModuleCtrl.newModule.module + '.py',parentCtrl.selectedModule.module_code,function(response){ + newModuleCtrl.saving = false; + parentCtrl.getCustomModules(); ansible.getAnsibleModules(function(response){ }, function(response){ },null,true); - $scope.cancelNewModule(); + newModuleCtrl.cancelNewModule(); },function(response){ - $scope.saving = false; + newModuleCtrl.saving = false; console.error(response.data) }) }; - $scope.cancelNewModule = function(){ - $scope.showNewModuleForm.value = false; - $scope.$parent.showModuleCode($scope.selectedModule.module.name) + + /** + * Cancel New Module + * + * */ + newModuleCtrl.cancelNewModule = function(){ + parentCtrl.showNewModuleForm.value = false; + parentCtrl.showModuleCode(parentCtrl.selectedModule.module.name) }; + + + /** + * Get properties from code to display in UI + * + * */ var getPropertiesFromCode = function(module_code){ //var re = /([^]+DOCUMENTATION = '''\n)([^]+?)(\n'''[^]+)/; var re = /([^]+DOCUMENTATION = '''\s+)([^]+?)(\s+'''[^]+)/; - var module_string = $scope.selectedModule.module_code.replace(re,'$2'); + var module_string = parentCtrl.selectedModule.module_code.replace(re,'$2'); - $scope.newModule = YAML.parse(module_string); - $scope.newModule.options = convertOptionsToArrays($scope.newModule.options); + newModuleCtrl.newModule = YAML.parse(module_string); + newModuleCtrl.newModule.options = convertOptionsToArrays(newModuleCtrl.newModule.options); - if($scope.newModule.description && $scope.newModule.description.length) - $scope.newModule.description = $scope.newModule.description.join(";"); + if(newModuleCtrl.newModule.description && newModuleCtrl.newModule.description.length) + newModuleCtrl.newModule.description = newModuleCtrl.newModule.description.join(";"); - if($scope.newModule.notes && $scope.newModule.notes.length) - $scope.newModule.notes = $scope.newModule.notes.join(";"); + if(newModuleCtrl.newModule.notes && newModuleCtrl.newModule.notes.length) + newModuleCtrl.newModule.notes = newModuleCtrl.newModule.notes.join(";"); - if($scope.newModule.requirements && $scope.newModule.requirements.length) - $scope.newModule.requirements = $scope.newModule.requirements.join(";"); + if(newModuleCtrl.newModule.requirements && newModuleCtrl.newModule.requirements.length) + newModuleCtrl.newModule.requirements = newModuleCtrl.newModule.requirements.join(";"); re = /([^]+# <--Begin Parameter Definition -->\s+ )([^]+)(\s+ # <--END Parameter Definition -->[^]+)/; - var parameter_string = $scope.selectedModule.module_code.replace(re,"$2"); + var parameter_string = parentCtrl.selectedModule.module_code.replace(re,"$2"); // Read property type form parameter definition re = /\s+(.*?)=.*type=(.*?)[,\)].*/g; @@ -254,7 +299,7 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { // View your result using the m-variable. // eg m[0] etc. if(m[1]){ - angular.forEach($scope.newModule.options,function(option){ + angular.forEach(newModuleCtrl.newModule.options,function(option){ if(option.name === m[1]){ option.type = m[2].replace(/'/g,'') } @@ -267,11 +312,11 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) { }; $scope.$on('editModule', function(e) { - getPropertiesFromCode($scope.selected_module_code) + getPropertiesFromCode(newModuleCtrl.selected_module_code) }); $scope.$on('newModule', function(e) { - $scope.loadDefaultTemplate(); + newModuleCtrl.loadDefaultTemplate(); }); } diff --git a/client/app/custom_modules/new_module/new_module.html b/client/app/custom_modules/new_module/new_module.html index aa0dcf6..524a299 100644 --- a/client/app/custom_modules/new_module/new_module.html +++ b/client/app/custom_modules/new_module/new_module.html @@ -1,4 +1,4 @@ -
+
@@ -8,25 +8,25 @@

- +

- +

- +

- +

@@ -35,13 +35,13 @@

- +

- +

@@ -49,12 +49,12 @@

- +

- +

@@ -88,7 +88,7 @@
-
+
@@ -100,7 +100,7 @@
-
@@ -118,8 +118,8 @@
- - + +
@@ -135,8 +135,8 @@
- - + +