external/ansible-playable
1
0
Fork 0
mirror of https://github.com/mmumshad/ansible-playable.git synced 2025-03-09 23:38:54 +00:00
Code Issues Releases Wiki Activity

Improve Ansible Style - Change $scope to use project controller object.

Browse source
This commit is contained in:
Mumshad Mannambeth 2017-07-08 18:13:03 -04:00
parent 7c19035cc1
commit 5f2ab60791
4 changed files with 231 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

182
client/app/custom_modules/custom_modules.component.js
View file

@ -10,47 +10,58 @@ export class CustomModulesComponent {
constructor($scope,customModules,$sce,ansi2html,Projects,$uibModal,YAML) { constructor($scope,customModules,$sce,ansi2html,Projects,$uibModal,YAML) {
'ngInject'; 'ngInject';
$scope.custom_modules = []; var customModulesCtrl = this;
$scope.selectedModule = {module:{},module_code:"",module_unchanged_code:""};
$scope.selected_module_code = "something";
$scope.showNewModuleForm = {value:false}; customModulesCtrl.custom_modules = [];
customModulesCtrl.selectedModule = {module:{},module_code:"",module_unchanged_code:""};
customModulesCtrl.selected_module_code = "something";
$scope.getProjects = function(){ customModulesCtrl.showNewModuleForm = {value:false};
$scope.projects = Projects.resource.query(function(){
if($scope.projects.length){ /**
$scope.selectedProjectID = localStorage.selectedProjectID || $scope.projects[0]._id; * Get List of Projects
$scope.projectSelected($scope.selectedProjectID) */
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; localStorage.selectedProjectID = projectID;
$scope.selectedProject = Projects.resource.get({id: projectID},function(){ customModulesCtrl.selectedProject = Projects.resource.get({id: projectID},function(){
Projects.selectedProject = $scope.selectedProject; Projects.selectedProject = customModulesCtrl.selectedProject;
$scope.getCustomModules(); customModulesCtrl.getCustomModules();
}) })
}; };
$scope.getProjects();
$scope.getCustomModules = function(){ /**
* Get a list of Custom modules in the selected project
*/
customModulesCtrl.getCustomModules = function(){
customModules.get(function(response){ customModules.get(function(response){
console.log(response.data);
var lines = response.data.split("\n"); var lines = response.data.split("\n");
if(lines.length) if(lines.length)
lines = lines lines = lines
.filter(function(line){return line.indexOf(".py") > -1}) .filter(function(line){return line.indexOf(".py") > -1})
.map(function(item){return {name:item}}); .map(function(item){return {name:item}});
$scope.custom_modules = lines; customModulesCtrl.custom_modules = lines;
if($scope.selectedModule.module.name){ if(customModulesCtrl.selectedModule.module.name){
$scope.selectedModule.module = $scope.custom_modules.filter(function(item){ customModulesCtrl.selectedModule.module = customModulesCtrl.custom_modules.filter(function(item){
return (item.name == $scope.selectedModule.module.name) return (item.name == customModulesCtrl.selectedModule.module.name)
})[0] })[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){ if(!module_name){
$scope.selectedModule.module_code = "Select a module"; customModulesCtrl.selectedModule.module_code = "Select a module";
return; return;
} }
customModules.show(module_name,function(response) { customModules.show(module_name,function(response) {
$scope.loadingModuleCode = false; customModulesCtrl.loadingModuleCode = false;
$scope.selectedModule.module_code = response.data.split("Stream :: close")[0]; customModulesCtrl.selectedModule.module_code = response.data.split("Stream :: close")[0];
$scope.selectedModule.module_unchanged_code = angular.copy($scope.selectedModule.module_code); 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){ if(newValue.name && newValue.name !== oldValue.name){
$scope.selectedModule.module_code = "Loading Module Code..."; customModulesCtrl.selectedModule.module_code = "Loading Module Code...";
$scope.showModuleCode(newValue.name) customModulesCtrl.showModuleCode(newValue.name)
} }
}); });
$scope.code_has_changed = false;
$scope.codeChanged = function(){ /**
console.log("Code Changed"); * On Code Change
if($scope.selectedModule.module_unchanged_code !== $scope.selectedModule.module_code){ *
$scope.code_has_changed = true */
customModulesCtrl.code_has_changed = false;
customModulesCtrl.codeChanged = function(){
if(customModulesCtrl.selectedModule.module_unchanged_code !== customModulesCtrl.selectedModule.module_code){
customModulesCtrl.code_has_changed = true
}else{ }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; * Save Module
customModules.save($scope.selectedModule.module.name,$scope.selectedModule.module_code,function(response){ */
$scope.saving = false; customModulesCtrl.saveModule = function(){
$scope.code_has_changed = false; customModulesCtrl.saving = true;
$scope.selectedModule.module_unchanged_code = angular.copy($scope.selectedModule.module_code); customModules.save(customModulesCtrl.selectedModule.module.name,customModulesCtrl.selectedModule.module_code,function(response){
console.log("Success") customModulesCtrl.saving = false;
customModulesCtrl.code_has_changed = false;
customModulesCtrl.selectedModule.module_unchanged_code = angular.copy(customModulesCtrl.selectedModule.module_code);
},function(response){ },function(response){
$scope.saving = false; customModulesCtrl.saving = false;
console.error(response.data) console.error(response.data)
}) })
}; };
$scope.testModule = function(){
/**
* Test Module
*/
customModulesCtrl.testModule = function(){
var re = /([^]+DOCUMENTATION = '''\s+)([^]+?)(\s+'''[^]+)/; 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 = {}; var options_copy = {};
/*options_copy = options_copy.map(function(item){ /*options_copy = options_copy.map(function(item){
var temp_obj = {}; var temp_obj = {};
@ -123,7 +158,7 @@ export class CustomModulesComponent {
return temp_obj return temp_obj
});*/ });*/
var module_name = $scope.selectedModule.module.name; var module_name = customModulesCtrl.selectedModule.module.name;
var module_cached_args = null; var module_cached_args = null;
try{ try{
@ -133,7 +168,7 @@ export class CustomModulesComponent {
module_cached_args = null; module_cached_args = null;
} }
angular.forEach($scope.selectedModuleObject.options,function(value,key){ angular.forEach(customModulesCtrl.selectedModuleObject.options,function(value,key){
//var temp_obj = {}; //var temp_obj = {};
//temp_obj[key] = ""; //temp_obj[key] = "";
options_copy[key] = ""; options_copy[key] = "";
@ -146,24 +181,33 @@ export class CustomModulesComponent {
var variable = {name:'',complexValue:options_copy}; 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.$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.$broadcast ('editModule');
}; };
/**
$scope.showComplexVariable = function(variable){ * Show Complex Variable modal for getting input parameters for testing module
$scope.result = ""; * @param variable
*/
customModulesCtrl.showComplexVariable = function(variable){
customModulesCtrl.result = "";
var modalInstance = $uibModal.open({ var modalInstance = $uibModal.open({
animation: true, animation: true,
template: require('../../app/modals/complex_var_modal/complexVariable.html'), template: require('../../app/modals/complex_var_modal/complexVariable.html'),
@ -188,7 +232,7 @@ export class CustomModulesComponent {
modalInstance.result.then(function (module_args) { modalInstance.result.then(function (module_args) {
var module_name = $scope.selectedModule.module.name; var module_name = customModulesCtrl.selectedModule.module.name;
/*var args = ""; /*var args = "";
angular.forEach(selectedItem,function(value,key){ angular.forEach(selectedItem,function(value,key){
@ -205,22 +249,26 @@ export class CustomModulesComponent {
localStorage['test_args_'+module_name] = JSON.stringify(module_args); localStorage['test_args_'+module_name] = JSON.stringify(module_args);
$scope.testing = true; customModulesCtrl.testing = true;
customModules.test(module_name,module_args,function(response) { customModules.test(module_name,module_args,function(response) {
$scope.testing = false; customModulesCtrl.testing = false;
$scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "<br>")); customModulesCtrl.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "<br>"));
}, },
function(response) { function(response) {
$scope.testing = false; customModulesCtrl.testing = false;
$scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "<br>")); customModulesCtrl.result = $sce.trustAsHtml(ansi2html.toHtml(response.data.split("Stream :: close")[0]).replace(/\n/g, "<br>"));
}); });
}, function () { }, function () {
}); });
} };
// List projects
customModulesCtrl.getProjects();
} }
} }

35
client/app/custom_modules/custom_modules.html
View file

@ -1,10 +1,10 @@
<div class="row" style="margin:20px;"> <div class="row" style="margin:20px;">
<div class="col-md-7"> <div class="col-md-7">
<div ng-show="!showNewModuleForm.value"> <div ng-show="!customModulesCtrl.showNewModuleForm.value">
<div style="display: inline-block"><select class="form-control" ng-model="selectedProjectID" ng-change="projectSelected(selectedProjectID)" ng-options="project._id as project.name for project in projects"> <div style="display: inline-block"><select class="form-control" ng-model="customModulesCtrl.selectedProjectID" ng-change="customModulesCtrl.projectSelected(customModulesCtrl.selectedProjectID)" ng-options="project._id as project.name for project in customModulesCtrl.projects">
</select></div> </select></div>
<button class="btn btn-default" ng-click="newModule()"> New Module <span class="fa fa-plus"></span> </button> <button class="btn btn-default" ng-click="customModulesCtrl.newModule()"> New Module <span class="fa fa-plus"></span> </button>
<button class="btn btn-default" ng-disabled="!selectedModule.module.name || loadingModuleCode" ng-click="editModule()"> Edit Module <span class="fa fa-edit"></span> </button> <button class="btn btn-default" ng-disabled="!customModulesCtrl.selectedModule.module.name || customModulesCtrl.loadingModuleCode" ng-click="customModulesCtrl.editModule()"> Edit Module <span class="fa fa-edit"></span> </button>
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">
@ -12,22 +12,14 @@
<tr> <tr>
<th>Select</th> <th>Select</th>
<th>Name</th> <th>Name</th>
<!--<th>Actions</th>-->
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="module in custom_modules"> <tr ng-repeat="module in customModulesCtrl.custom_modules">
<td><input name="moduleGroup" type="radio" ng-model="selectedModule.module" ng-value="module"> <td><input name="moduleGroup" type="radio" ng-model="customModulesCtrl.selectedModule.module" ng-value="module">
</td> </td>
</td> </td>
<td>{{module.name}}</td> <td>{{module.name}}</td>
<!--<td><div class="btn-group">
<label class="btn btn-default" ng-click="showTaskModal($index)" ><span class="fa fa-edit"></span></label>
<label class="btn btn-danger" ng-click="deleteTask($index)" confirm="Are you sure you want to delete?"><span class="fa fa-trash"></span></label>
<div style="display: inline-block" tooltip-enable="!task.tags" uib-tooltip="Tag must be assigned to play individually"><label class="btn btn-success" ng-disabled="!task.tags" ng-click="executeAnsiblePlayBook(task.tags,'Task',task.name, selectedPlay)" ><span class="fa fa-play"></span></label></div>
<label class="btn btn-primary" ng-disabled="$first" ng-click="moveUp(selectedPlay.play.tasks,$index,'saveTaskListLoading')" ><span class="fa fa-arrow-up"></span></label>
<label class="btn btn-primary" ng-disabled="$last" ng-click="moveDown(selectedPlay.play.tasks,$index,'saveTaskListLoading')" ><span class="fa fa-arrow-down"></span></label>
</div></td>-->
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -35,18 +27,23 @@
<!--<button class="btn btn-primary" ng-disabled="!selectedModule.module.name || !code_has_changed" ng-click="saveModule()"> Save <span ng-if="!saving" class="fa fa-save"></span> <span ng-if="saving" class="fa fa-spin fa-spinner"></span> </button> <!--<button class="btn btn-primary" ng-disabled="!selectedModule.module.name || !code_has_changed" ng-click="saveModule()"> Save <span ng-if="!saving" class="fa fa-save"></span> <span ng-if="saving" class="fa fa-spin fa-spinner"></span> </button>
<button class="btn btn-warning" ng-disabled="!selectedModule.module.name || !code_has_changed" confirm="Are you sure you want to discard code changes?" ng-click="discardCodeChanges()"> Discard <span class="fa fa-rotate-left"></span> </button>--> <button class="btn btn-warning" ng-disabled="!selectedModule.module.name || !code_has_changed" confirm="Are you sure you want to discard code changes?" ng-click="discardCodeChanges()"> Discard <span class="fa fa-rotate-left"></span> </button>-->
<button class="btn btn-default" ng-disabled="!selectedModule.module.name || loadingModuleCode" ng-click="testModule()"> Test <span ng-if="!testing" class="fa fa-check-circle-o"></span> <span ng-if="testing" class="fa fa-spin fa-spinner"></span> </button> <button class="btn btn-default" ng-disabled="!customModulesCtrl.selectedModule.module.name || customModulesCtrl.loadingModuleCode" ng-click="customModulesCtrl.testModule()"> Test <span ng-if="!testing" class="fa fa-check-circle-o"></span> <span ng-if="testing" class="fa fa-spin fa-spinner"></span> </button>
<div style="background:black;color:lightgrey;width:100%;padding:20px;word-wrap: break-word;" ng-if="result"> <div style="background:black;color:lightgrey;width:100%;padding:20px;word-wrap: break-word;" ng-if="customModulesCtrl.result">
<p class="logconsole" ng-bind-html="result"></p> <p class="logconsole" ng-bind-html="customModulesCtrl.result"></p>
</div> </div>
</div> </div>
<div class="slide-animate" ng-show="showNewModuleForm.value" ng-include="'app/custom_modules/new_module/new_module.html'"></div> <div ng-show="customModulesCtrl.showNewModuleForm.value" ng-include="'/app/custom_modules/new_module/new_module.html'"></div>
<div ng-show="customModulesCtrl.showNewModuleForm.value" >
<new-module>
</new-module>
</div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div ng-readonly="!showNewModuleForm.value" ui-ace="{theme:'twilight',document:'Python',mode:'python',onChange:codeChanged}" ng-model="selectedModule.module_code"> <div ng-readonly="!customModulesCtrl.showNewModuleForm.value" ui-ace="{theme:'twilight',document:'Python',mode:'python',onChange:customModulesCtrl.codeChanged}" ng-model="customModulesCtrl.selectedModule.module_code">
</div> </div>

125
client/app/custom_modules/new_module/new_module.controller.js
View file

@ -4,8 +4,13 @@ const angular = require('angular');
/*@ngInject*/ /*@ngInject*/
export function newModuleController($scope,$filter,customModules,ansible,YAML) { 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 = { var defaultModule = {
module:null, module:null,
short_description:"", short_description:"",
@ -28,28 +33,35 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
}; };
$scope.loadDefaultTemplate = function(){ // Load Default Template
$scope.newModule = angular.copy(defaultModule); newModuleCtrl.loadDefaultTemplate = function(){
$scope.selectedModule.module_code = "Loading Template.."; newModuleCtrl.newModule = angular.copy(defaultModule);
parentCtrl.selectedModule.module_code = "Loading Template..";
customModules.show('template.py',function(response) { 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); updateDocumentation(newValue);
updateParameters(newValue); updateParameters(newValue);
updateExamples(newValue); updateExamples(newValue);
},true); },true);
/**
* Update parameters
* Use regex to identify patterns in code and update parameter section dynamically
* */
var updateParameters = function(newValue){ var updateParameters = function(newValue){
newValue = angular.copy(newValue); newValue = angular.copy(newValue);
var parameters_definition_lines = []; var parameters_definition_lines = [];
var parameters_retreive_lines = []; var parameters_retreive_lines = [];
angular.forEach(newValue.options,function(option){ angular.forEach(newValue.options,function(option){
if(option.name) { if(option.name) {
var line = option.name + "=dict("; 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 parameters_retreive_string = parameters_retreive_lines.join("\n ");
var re = /(# <--Begin Parameter Definition -->\s+ )([^]+)(\s+ # <--END Parameter Definition -->)/; 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'; var supports_check_mode_string = '\n';
if(newValue.supports_check_mode){ 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 -->)/; 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 -->)/; 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){ var updateDocumentation = function(newValue){
newValue = angular.copy(newValue); newValue = angular.copy(newValue);
newValue.options = convertOptionsToObject(newValue.options); newValue.options = convertOptionsToObject(newValue.options);
@ -103,11 +120,11 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
if(newValue.requirements) if(newValue.requirements)
newValue.requirements = newValue.requirements.split(";"); 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 = '''\n)([^]+?)(\n'''.*)/;
var re = /([^]+DOCUMENTATION = '''\s+)([^]+?)(\s+'''[^]+)/; 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){ var updateExamples = function(newValue){
@ -119,13 +136,17 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
moduleCopy[newValue.module] = convertOptionsToExampleObject(newValue.options); 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 = /(.*DOCUMENTATION = '''\n)([^]+?)(\n'''.*)/;
var re = /([^]+EXAMPLES = '''[^]+# <-- -->\s+)([^]+?)(\s+# <-- \/ -->\s+'''[^]+)/; 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 convertOptionsToObject = function(options){
var result = {}; var result = {};
@ -159,6 +180,10 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
}; };
/**
* Convert Options to Example Object
* */
var convertOptionsToExampleObject = function(options){ var convertOptionsToExampleObject = function(options){
var result = {}; var result = {};
@ -173,6 +198,10 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
}; };
/**
* Convert Options to Array
* */
var convertOptionsToArrays = function(options){ var convertOptionsToArrays = function(options){
var result = []; var result = [];
@ -186,10 +215,10 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
}; };
if(value.choices && value.choices.length) 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) 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) result.push(option)
}); });
@ -198,50 +227,66 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
}; };
$scope.saveNewModule = function(){ /**
$scope.saving = true; * Save New Module
customModules.save($scope.newModule.module + '.py',$scope.selectedModule.module_code,function(response){ *
$scope.saving = false; * */
$scope.getCustomModules(); 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){ ansible.getAnsibleModules(function(response){
}, function(response){ }, function(response){
},null,true); },null,true);
$scope.cancelNewModule(); newModuleCtrl.cancelNewModule();
},function(response){ },function(response){
$scope.saving = false; newModuleCtrl.saving = false;
console.error(response.data) 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 getPropertiesFromCode = function(module_code){
//var re = /([^]+DOCUMENTATION = '''\n)([^]+?)(\n'''[^]+)/; //var re = /([^]+DOCUMENTATION = '''\n)([^]+?)(\n'''[^]+)/;
var re = /([^]+DOCUMENTATION = '''\s+)([^]+?)(\s+'''[^]+)/; 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); newModuleCtrl.newModule = YAML.parse(module_string);
$scope.newModule.options = convertOptionsToArrays($scope.newModule.options); newModuleCtrl.newModule.options = convertOptionsToArrays(newModuleCtrl.newModule.options);
if($scope.newModule.description && $scope.newModule.description.length) if(newModuleCtrl.newModule.description && newModuleCtrl.newModule.description.length)
$scope.newModule.description = $scope.newModule.description.join(";"); newModuleCtrl.newModule.description = newModuleCtrl.newModule.description.join(";");
if($scope.newModule.notes && $scope.newModule.notes.length) if(newModuleCtrl.newModule.notes && newModuleCtrl.newModule.notes.length)
$scope.newModule.notes = $scope.newModule.notes.join(";"); newModuleCtrl.newModule.notes = newModuleCtrl.newModule.notes.join(";");
if($scope.newModule.requirements && $scope.newModule.requirements.length) if(newModuleCtrl.newModule.requirements && newModuleCtrl.newModule.requirements.length)
$scope.newModule.requirements = $scope.newModule.requirements.join(";"); newModuleCtrl.newModule.requirements = newModuleCtrl.newModule.requirements.join(";");
re = /([^]+# <--Begin Parameter Definition -->\s+ )([^]+)(\s+ # <--END Parameter Definition -->[^]+)/; 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 // Read property type form parameter definition
re = /\s+(.*?)=.*type=(.*?)[,\)].*/g; re = /\s+(.*?)=.*type=(.*?)[,\)].*/g;
@ -254,7 +299,7 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
// View your result using the m-variable. // View your result using the m-variable.
// eg m[0] etc. // eg m[0] etc.
if(m[1]){ if(m[1]){
angular.forEach($scope.newModule.options,function(option){ angular.forEach(newModuleCtrl.newModule.options,function(option){
if(option.name === m[1]){ if(option.name === m[1]){
option.type = m[2].replace(/'/g,'') option.type = m[2].replace(/'/g,'')
} }
@ -267,11 +312,11 @@ export function newModuleController($scope,$filter,customModules,ansible,YAML) {
}; };
$scope.$on('editModule', function(e) { $scope.$on('editModule', function(e) {
getPropertiesFromCode($scope.selected_module_code) getPropertiesFromCode(newModuleCtrl.selected_module_code)
}); });
$scope.$on('newModule', function(e) { $scope.$on('newModule', function(e) {
$scope.loadDefaultTemplate(); newModuleCtrl.loadDefaultTemplate();
}); });
} }

30
client/app/custom_modules/new_module/new_module.html
View file

@ -1,4 +1,4 @@
<div class="row" ng-controller="NewModuleController"> <div class="row" ng-controller="NewModuleController as newModuleCtrl">
<div class="panel"> <div class="panel">
<div class="panel panel-primary"> <div class="panel panel-primary">
@ -8,25 +8,25 @@
<div class="col-md-4"> <div class="col-md-4">
<p class="form-group"> <p class="form-group">
<label>Module Name</label> <label>Module Name</label>
<input type="text" ng-model="newModule.module" class="form-control" ng-required="true" placeholder="modulename"> <input type="text" ng-model="newModuleCtrl.newModule.module" class="form-control" ng-required="true" placeholder="modulename">
</p> </p>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<p class="form-group"> <p class="form-group">
<label>Version Added</label> <label>Version Added</label>
<input type="text" ng-model="newModule.version_added" class="form-control" ng-required="true" placeholder="X.Y"> <input type="text" ng-model="newModuleCtrl.newModule.version_added" class="form-control" ng-required="true" placeholder="X.Y">
</p> </p>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<p class="form-group"> <p class="form-group">
<label>Check Mode</label> <label>Check Mode</label>
<label class="checkbox-inline"><input ng-model="newModule.supports_check_mode" type="checkbox"></label> <label class="checkbox-inline"><input ng-model="newModuleCtrl.newModule.supports_check_mode" type="checkbox"></label>
</p> </p>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<p class="form-group"> <p class="form-group">
<label>Author</label> <label>Author</label>
<input type="text" ng-model="newModule.author" class="form-control" ng-required="true" placeholder="Your AWESOME name, @awesome-github-id"> <input type="text" ng-model="newModuleCtrl.newModule.author" class="form-control" ng-required="true" placeholder="Your AWESOME name, @awesome-github-id">
</p> </p>
</div> </div>
</div> </div>
@ -35,13 +35,13 @@
<div class="col-md-4"> <div class="col-md-4">
<p class="form-group"> <p class="form-group">
<label>Short Description</label> <label>Short Description</label>
<input type="text" ng-model="newModule.short_description" class="form-control" ng-required="true" placeholder="This is a sentence describing the module"> <input type="text" ng-model="newModuleCtrl.newModule.short_description" class="form-control" ng-required="true" placeholder="This is a sentence describing the module">
</p> </p>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<p class="form-group"> <p class="form-group">
<label>Description</label> <label>Description</label>
<input type="text" ng-model="newModule.description" class="form-control" ng-required="true" placeholder="Longer description of the module; You might include instructions"> <input type="text" ng-model="newModuleCtrl.newModule.description" class="form-control" ng-required="true" placeholder="Longer description of the module; You might include instructions">
</p> </p>
</div> </div>
</div> </div>
@ -49,12 +49,12 @@
<p class="form-group"> <p class="form-group">
<label>Notes</label> <label>Notes</label>
<input type="text" ng-model="newModule.notes" class="form-control" ng-required="true" placeholder="Other things consumers of your module should know"> <input type="text" ng-model="newModuleCtrl.newModule.notes" class="form-control" ng-required="true" placeholder="Other things consumers of your module should know">
</p> </p>
<p class="form-group"> <p class="form-group">
<label>Requirements</label> <label>Requirements</label>
<input type="text" ng-model="newModule.requirements" class="form-control" ng-required="true" placeholder="List of required things separated by semicolon; like the factor package; or a specific platform"> <input type="text" ng-model="newModuleCtrl.newModule.requirements" class="form-control" ng-required="true" placeholder="List of required things separated by semicolon; like the factor package; or a specific platform">
</p> </p>
<div class="panel"> <div class="panel">
@ -88,7 +88,7 @@
</div> </div>
</div> </div>
<div ng-repeat="option in newModule.options"> <div ng-repeat="option in newModuleCtrl.newModule.options">
<div class="row"> <div class="row">
<div class="col-md-2" style="padding:2px;"> <div class="col-md-2" style="padding:2px;">
@ -100,7 +100,7 @@
</div> </div>
<div class="col-md-1" style="padding:2px;"> <div class="col-md-1" style="padding:2px;">
<select class="form-control" ng-model="option.type" ng-options="optionType for optionType in optionTypes"> <select class="form-control" ng-model="option.type" ng-options="optionType for optionType in newModuleCtrl.optionTypes">
</select> </select>
</div> </div>
@ -118,8 +118,8 @@
</div> </div>
<div class="col-md-1" style="padding:2px;text-align: center;"> <div class="col-md-1" style="padding:2px;text-align: center;">
<div class="btn-group"> <div class="btn-group">
<label class="btn btn-default" uib-tooltip="Insert new row after" ng-click="newModule.options.splice($index+1,0,{})" style="padding-top: 3px;padding-bottom: 3px;padding-left:5px;padding-right:5px;"><span class="fa fa-plus"></span></label> <label class="btn btn-default" uib-tooltip="Insert new row after" ng-click="newModuleCtrl.newModule.options.splice($index+1,0,{})" style="padding-top: 3px;padding-bottom: 3px;padding-left:5px;padding-right:5px;"><span class="fa fa-plus"></span></label>
<label class="btn btn-danger" uib-tooltip="Delete row" ng-click="newModule.options.splice($index,1)" style="padding-top: 3px;padding-bottom: 3px; padding-left:5px; padding-right:5px;"><span class="fa fa-minus"></span></label> <label class="btn btn-danger" uib-tooltip="Delete row" ng-click="newModuleCtrl.newModule.options.splice($index,1)" style="padding-top: 3px;padding-bottom: 3px; padding-left:5px; padding-right:5px;"><span class="fa fa-minus"></span></label>
</div> </div>
</div> </div>
</div> </div>
@ -135,8 +135,8 @@
</div> </div>
<button class="btn btn-primary" ng-disabled="!newModule.module" ng-click="saveNewModule()"> Save <span ng-if="!saving" class="fa fa-save"></span> <span ng-if="saving" class="fa fa-spin fa-spinner"></span> </button> <button class="btn btn-primary" ng-disabled="!newModuleCtrl.newModule.module" ng-click="newModuleCtrl.saveNewModule()"> Save <span ng-if="!newModuleCtrl.saving" class="fa fa-save"></span> <span ng-if="saving" class="fa fa-spin fa-spinner"></span> </button>
<button class="btn btn-default" confirm="Are you sure you want to discard the changes?" ng-click="cancelNewModule()"> Cancel <span class="fa fa-times"></span> </button> <button class="btn btn-default" confirm="Are you sure you want to discard the changes?" ng-click="newModuleCtrl.cancelNewModule()"> Cancel <span class="fa fa-times"></span> </button>
</div> </div>