mirror of
https://github.com/mmumshad/ansible-playable.git
synced 2025-03-09 23:38:54 +00:00
Change $scope to use project controller object.
Use ansible projects folder location from config file
This commit is contained in:
Mumshad Mannambeth
parent
95cd7370af
commit
7c19035cc1
2 changed files with 93 additions and 75 deletions
|
|
@ -7,11 +7,14 @@ import routes from './project.routes';
|
|||
|
||||
export class ProjectComponent {
|
||||
/*@ngInject*/
|
||||
constructor($scope, Projects, Auth) {
|
||||
constructor($scope, Projects, Auth, appConfig) {
|
||||
'ngInject';
|
||||
var default_project_folder = '/opt/ehc-ansible-projects/';
|
||||
|
||||
$scope.blankProject = {
|
||||
var projectCtrl = this;
|
||||
|
||||
// Define a blank project object
|
||||
projectCtrl.blankProject = {
|
||||
name: '',
|
||||
ansibleEngine: {
|
||||
ansibleHost: '',
|
||||
|
|
@ -23,94 +26,109 @@ export class ProjectComponent {
|
|||
}
|
||||
};
|
||||
|
||||
$scope.msg = "";
|
||||
$scope.msg_status = "";
|
||||
projectCtrl.msg = "";
|
||||
projectCtrl.msg_status = "";
|
||||
|
||||
$scope.newProject = $scope.blankProject;
|
||||
projectCtrl.newProject = projectCtrl.blankProject;
|
||||
|
||||
$scope.editProjectFlag = false;
|
||||
projectCtrl.editProjectFlag = false;
|
||||
|
||||
$scope.saveButtonIcon = "fa-save";
|
||||
projectCtrl.saveButtonIcon = "fa-save";
|
||||
|
||||
$scope.showProjectForm = function(){
|
||||
$scope.showCreateProject = true;
|
||||
$scope.editProjectFlag = false;
|
||||
$scope.newProject = $scope.blankProject;
|
||||
$scope.msg = "";
|
||||
$scope.msg_status = "";
|
||||
/**
|
||||
* Show Project Form when the create button is clicked
|
||||
*/
|
||||
projectCtrl.showProjectForm = function(){
|
||||
projectCtrl.showCreateProject = true;
|
||||
projectCtrl.editProjectFlag = false;
|
||||
projectCtrl.newProject = projectCtrl.blankProject;
|
||||
projectCtrl.msg = "";
|
||||
projectCtrl.msg_status = "";
|
||||
};
|
||||
|
||||
|
||||
$scope.hideProjectForm = function(){
|
||||
$scope.showCreateProject = false;
|
||||
$scope.editProjectFlag = false;
|
||||
$scope.newProject = $scope.blankProject;
|
||||
$scope.msg = "";
|
||||
$scope.msg_status = "";
|
||||
/**
|
||||
* Hide Project form when cancel button is clicked
|
||||
*/
|
||||
projectCtrl.hideProjectForm = function(){
|
||||
projectCtrl.showCreateProject = false;
|
||||
projectCtrl.editProjectFlag = false;
|
||||
projectCtrl.newProject = projectCtrl.blankProject;
|
||||
projectCtrl.msg = "";
|
||||
projectCtrl.msg_status = "";
|
||||
};
|
||||
|
||||
$scope.getProjects = function(){
|
||||
console.log("Getting Projects");
|
||||
$scope.projects = Projects.resource.query(function(){
|
||||
console.log($scope.projects);
|
||||
/**
|
||||
* Get list of all projects
|
||||
*/
|
||||
projectCtrl.getProjects = function(){
|
||||
projectCtrl.projects = Projects.resource.query(function(){
|
||||
console.log(projectCtrl.projects);
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
$scope.getProjects();
|
||||
|
||||
$scope.deleteProject = function(project){
|
||||
/**
|
||||
* Delete Project
|
||||
* @param project
|
||||
*/
|
||||
projectCtrl.deleteProject = function(project){
|
||||
project.$remove(function(){
|
||||
$scope.getProjects();
|
||||
projectCtrl.getProjects();
|
||||
})
|
||||
};
|
||||
|
||||
$scope.editProject = function(project){
|
||||
$scope.showCreateProject = true;
|
||||
$scope.editProjectFlag = true;
|
||||
$scope.newProject = project;
|
||||
/**
|
||||
* Edit Project
|
||||
* @param project
|
||||
*/
|
||||
projectCtrl.editProject = function(project){
|
||||
projectCtrl.showCreateProject = true;
|
||||
projectCtrl.editProjectFlag = true;
|
||||
projectCtrl.newProject = project;
|
||||
};
|
||||
|
||||
$scope.createProject = function(){
|
||||
$scope.newProject.creationTime = new Date();
|
||||
//$scope.newProject.ansibleEngine.projectFolder = default_project_folder + '/' + $scope.newProject.name
|
||||
//$scope.newProject.ansibleEngine.customModules = $scope.newProject.ansibleEngine.projectFolder + '/library'
|
||||
/**
|
||||
* Create a new Project
|
||||
*/
|
||||
projectCtrl.createProject = function(){
|
||||
projectCtrl.newProject.creationTime = new Date();
|
||||
|
||||
var projectSavedCallback = function(){
|
||||
$scope.showCreateProject = false;
|
||||
$scope.msg = "Project Saved Successfully";
|
||||
$scope.msg_status = "success";
|
||||
$scope.getProjects();
|
||||
$scope.saveButtonIcon = 'fa-save';
|
||||
projectCtrl.showCreateProject = false;
|
||||
projectCtrl.msg = "Project Saved Successfully";
|
||||
projectCtrl.msg_status = "success";
|
||||
projectCtrl.getProjects();
|
||||
projectCtrl.saveButtonIcon = 'fa-save';
|
||||
};
|
||||
|
||||
var projectSaveFailedCallback = function(errResponse){
|
||||
$scope.msg = errResponse.data;
|
||||
$scope.msg_status = "danger";
|
||||
$scope.saveButtonIcon = 'fa-save';
|
||||
projectCtrl.msg = errResponse.data;
|
||||
projectCtrl.msg_status = "danger";
|
||||
projectCtrl.saveButtonIcon = 'fa-save';
|
||||
};
|
||||
|
||||
$scope.saveButtonIcon = 'fa-spinner fa-spin';
|
||||
projectCtrl.saveButtonIcon = 'fa-spinner fa-spin';
|
||||
|
||||
if($scope.editProjectFlag){
|
||||
$scope.editProjectFlag = false;
|
||||
$scope.newProject.$update(projectSavedCallback,projectSaveFailedCallback);
|
||||
if(projectCtrl.editProjectFlag){
|
||||
projectCtrl.editProjectFlag = false;
|
||||
projectCtrl.newProject.$update(projectSavedCallback,projectSaveFailedCallback);
|
||||
}else{
|
||||
Projects.resource.save($scope.newProject,projectSavedCallback,projectSaveFailedCallback);
|
||||
Projects.resource.save(projectCtrl.newProject,projectSavedCallback,projectSaveFailedCallback);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
$scope.$watch('newProject.name', function(newValue, oldValue){
|
||||
console.log("Changed");
|
||||
// Watch for project name change in create mode and update project and custom modules folder dynamically
|
||||
$scope.$watch('projectCtrl.newProject.name', function(newValue, oldValue){
|
||||
// Project folders cannot be edited once created
|
||||
var user_id = Auth.getCurrentUserSync()._id;
|
||||
if($scope.editProjectFlag)return;
|
||||
$scope.newProject.ansibleEngine.projectFolder = '/opt/ansible-projects/' + user_id + '_' + newValue;
|
||||
$scope.newProject.ansibleEngine.customModules = '/opt/ansible-projects/' + user_id + '_' + newValue + '/library';
|
||||
if(projectCtrl.editProjectFlag)return;
|
||||
projectCtrl.newProject.ansibleEngine.projectFolder = appConfig.paths.ansible_projects + '/' + user_id + '_' + newValue;
|
||||
projectCtrl.newProject.ansibleEngine.customModules = appConfig.paths.ansible_projects + '/' + user_id + '_' + newValue + '/library';
|
||||
});
|
||||
|
||||
projectCtrl.getProjects();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,48 +2,48 @@
|
|||
<div class="row" style="margin-top:50px;">
|
||||
<div class="col-md-6">
|
||||
|
||||
<button class="btn btn-default" ng-click="showProjectForm()">Create <span class="fa fa-plus"></span></button>
|
||||
<button class="btn btn-default" ng-click="projectCtrl.showProjectForm()">Create <span class="fa fa-plus"></span></button>
|
||||
|
||||
<form ng-show="showCreateProject">
|
||||
<form ng-show="projectCtrl.showCreateProject">
|
||||
<p class="form-group">
|
||||
<label>Project Name</label>
|
||||
<input type="text" ng-model="newProject.name" class="form-control" ng-required="true">
|
||||
<input type="text" ng-model="projectCtrl.newProject.name" class="form-control" ng-required="true">
|
||||
</p>
|
||||
|
||||
<p class="form-group">
|
||||
<label>Ansible Host</label>
|
||||
<input type="text" ng-model="newProject.ansibleEngine.ansibleHost" class="form-control">
|
||||
<input type="text" ng-model="projectCtrl.newProject.ansibleEngine.ansibleHost" class="form-control">
|
||||
<div class="hint">Ansible Controller system - A linux system with Ansible Installed on it. Required if you want to execute Ansible playbooks. You could skip this and still generate playbooks but not test them.</div>
|
||||
</p>
|
||||
|
||||
<p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
|
||||
<p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
|
||||
<label>User</label>
|
||||
<input type="text" ng-model="newProject.ansibleEngine.ansibleHostUser" class="form-control">
|
||||
<input type="text" ng-model="projectCtrl.newProject.ansibleEngine.ansibleHostUser" class="form-control">
|
||||
</p>
|
||||
|
||||
<p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
|
||||
<p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
|
||||
<label>Host Password</label>
|
||||
<input type="password" ng-model="newProject.ansibleEngine.ansibleHostPassword" class="form-control">
|
||||
<input type="password" ng-model="projectCtrl.newProject.ansibleEngine.ansibleHostPassword" class="form-control">
|
||||
</p>
|
||||
|
||||
<p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
|
||||
<p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
|
||||
<label>Project Folder</label>
|
||||
<input ng-readonly="editProjectFlag" ng-model="newProject.ansibleEngine.projectFolder" class="form-control">
|
||||
<div ng-if="newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store files of this project </div>
|
||||
<input ng-readonly="projectCtrl.editProjectFlag" ng-model="projectCtrl.newProject.ansibleEngine.projectFolder" class="form-control">
|
||||
<div ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store files of this project </div>
|
||||
</p>
|
||||
|
||||
<p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
|
||||
<p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
|
||||
<label>Custom Modules Location</label>
|
||||
<input ng-readonly="editProjectFlag" ng-model="newProject.ansibleEngine.customModules" class="form-control">
|
||||
<div ng-if="newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store custom modules for this project </div>
|
||||
<input ng-readonly="projectCtrl.editProjectFlag" ng-model="projectCtrl.newProject.ansibleEngine.customModules" class="form-control">
|
||||
<div ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store custom modules for this project </div>
|
||||
</p>
|
||||
|
||||
<button class="btn btn-success" ng-disabled="!newProject.name" ng-click="createProject()"> Save <span class="fa {{saveButtonIcon}}"></span></button>
|
||||
<button class="btn btn-warning" ng-click="hideProjectForm()"> Cancel <span class="fa fa-times"></span></button>
|
||||
<button class="btn btn-success" ng-disabled="!projectCtrl.newProject.name" ng-click="projectCtrl.createProject()"> Save <span class="fa {{projectCtrl.saveButtonIcon}}"></span></button>
|
||||
<button class="btn btn-warning" ng-click="projectCtrl.hideProjectForm()"> Cancel <span class="fa fa-times"></span></button>
|
||||
|
||||
</form>
|
||||
|
||||
<div ng-if="msg" class="alert alert-{{msg_status}}">{{msg}}</div>
|
||||
<div ng-if="msg" class="alert alert-{{ projectCtrl.msg_status }}">{{ projectCtrl.msg }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="project in projects | orderBy : 'executionTime'">
|
||||
<tr ng-repeat="project in projectCtrl.projects | orderBy : 'executionTime'">
|
||||
<td>{{project.name}}</td>
|
||||
<td>{{project.ansibleEngine.ansibleHost}}</td>
|
||||
<td>{{project.ansibleVersion}}</td>
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
<td>{{project.creationTime | date : 'medium'}}</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<label class="btn btn-default" ng-click="editProject(project)" ><span class="fa fa-edit"></span></label>
|
||||
<label class="btn btn-danger" ng-click="deleteProject(project)" confirm="Are you sure you want to delete?" ><span class="fa fa-trash"></span></label>
|
||||
<label class="btn btn-default" ng-click="projectCtrl.editProject(project)" ><span class="fa fa-edit"></span></label>
|
||||
<label class="btn btn-danger" ng-click="projectCtrl.deleteProject(project)" confirm="Are you sure you want to delete?" ><span class="fa fa-trash"></span></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue