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

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

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

View file

@ -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();
});
}

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 panel-primary">
@ -8,25 +8,25 @@
<div class="col-md-4">
<p class="form-group">
<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>
</div>
<div class="col-md-2">
<p class="form-group">
<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>
</div>
<div class="col-md-2">
<p class="form-group">
<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>
</div>
<div class="col-md-4">
<p class="form-group">
<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>
</div>
</div>
@ -35,13 +35,13 @@
<div class="col-md-4">
<p class="form-group">
<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>
</div>
<div class="col-md-8">
<p class="form-group">
<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>
</div>
</div>
@ -49,12 +49,12 @@
<p class="form-group">
<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 class="form-group">
<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>
<div class="panel">
@ -88,7 +88,7 @@
</div>
</div>
<div ng-repeat="option in newModule.options">
<div ng-repeat="option in newModuleCtrl.newModule.options">
<div class="row">
<div class="col-md-2" style="padding:2px;">
@ -100,7 +100,7 @@
</div>
<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>
</div>
@ -118,8 +118,8 @@
</div>
<div class="col-md-1" style="padding:2px;text-align: center;">
<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-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-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="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>
@ -135,8 +135,8 @@
</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-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-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="newModuleCtrl.cancelNewModule()"> Cancel <span class="fa fa-times"></span> </button>
</div>