External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-24 16:01:20 -03:30
Code Issues Packages Projects Releases Wiki Activity

Latest UI changes for AC-503

Browse Source
This commit is contained in:
chouseknecht 2013-09-30 20:06:36 +00:00
parent 246503440a
commit 8fa1c66caf
6 changed files with 134 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
awx/ui/static/js/controllers/Groups.js
View File

@ -23,6 +23,7 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
var base = $location.path().replace(/^\//,'').split('/')[0];
var id = $routeParams.inventory_id;
scope.grpBtnDisable = false;
scope['inventory_id'] = id;
// Retrieve each related sets and any lookups
@ -128,6 +129,7 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
scope['selectedNode'] = node;
scope['selectedNodeName'] = node.attr('name');
scope['grpBtnDisable'] = false;
$('#tree-view').jstree('open_node',node);
@ -140,6 +142,9 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
scope.groupDeleteHide = false;
scope.createButtonShow = true;
scope.group_id = node.attr('group_id');
// Load the form
GroupsEdit({ "inventory_id": id, group_id: scope.group_id });
//scope.groupName = n.data;
//scope.groupTitle = '<h4>' + n.data + '</h4>';
//scope.groupTitle += (node.attr('description')) ? '<p>' + node.attr('description') + '</p>' : '';
@ -171,7 +176,24 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
}
scope.editGroup = function() {
GroupsEdit({ "inventory_id": id, group_id: scope.group_id });
// Slide in the group properties form
$('#tree-form').show('slide', {direction: 'up'}, 500);
// Set the focust to the first form field
$('input:first').focus();
// Disable all the group related buttons
scope.grpBtnDisable = true;
setTimeout(function() {
// Remove any tooltips that might be lingering
$('.tooltip').each( function(index) {
$(this).remove();
});
$('.popover').each(function(index) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
}, 1000);
}
scope.editInventory = function() {

8
awx/ui/static/js/forms/Groups.js
View File

@ -14,8 +14,8 @@ angular.module('GroupFormDefinition', [])
editTitle: '{{ name }}', //Legend in edit mode
name: 'group', //Form name attribute
well: false, //Wrap the form with TB well
formLabelSize: 'col-lg-3',
formFieldSize: 'col-lg-9',
//formLabelSize: 'col-lg-3',
//formFieldSize: 'col-lg-9',
fields: {
/*has_active_failures: {
@ -47,7 +47,7 @@ angular.module('GroupFormDefinition', [])
"class": 'modal-input-xlarge',
"default": "---",
dataTitle: 'Group Variables',
dataPlacement: 'right',
dataPlacement: 'left',
awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
"JSON:<br />\n" +
"<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
@ -55,7 +55,7 @@ angular.module('GroupFormDefinition', [])
"<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
'<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
'<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
dataContainer: '#form-modal .modal-content'
dataContainer: 'body'
}
},

18
awx/ui/static/js/helpers/Groups.js
View File

@ -228,19 +228,27 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
var generator = GenerateForm;
var form = GroupForm;
var defaultUrl = GetBasePath('groups') + group_id + '/';
$('#tree-form').hide('slide',{ direction: 'right' }, 500);
$('#tree-form').empty();
var scope = generator.inject(form, { mode: 'edit', modal: false, related: false, id: 'tree-form', breadCrumbs: false });
//$('#tree-form').show('slide',{ direction: 'up' }, 500);
/*
var scope = generator.inject(form, { mode: 'edit', modal: true, related: false});
*/
generator.reset();
var master = {};
var relatedSets = {};
scope.formModalActionLabel = 'Save';
scope.formModalHeader = 'Edit Group';
scope.formModalCancelShow = true;
//scope.formModalActionLabel = 'Save';
//scope.formModalHeader = 'Edit Group';
//scope.formModalCancelShow = true;
scope.parseType = 'yaml';
ParseTypeChange(scope);
$('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
//$('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
// After the group record is loaded, retrieve any group variables
if (scope.groupLoadedRemove) {
scope.groupLoadedRemove();

76
awx/ui/static/less/ansible-ui.less
View File

@ -738,16 +738,44 @@ select.field-mini-height {
border-radius: 6px;
}
.tree-view-container {
padding: 0;
}
.tree-form-container {
min-height: 800px;
padding-left: 0;
padding-right: 25px;
}
#tree-view {
border: 1px solid #e3e3e3;
border-radius: 6px;
background-color: #e3e3e3;
padding-top: 10px;
}
#tree-form {
display: none;
margin-top: 15px;
border: 1px solid #e3e3e3;
background-color: #e3e3e3;
border-radius: 6px;
padding-top: 15px;
}
.tree-controls {
padding: 10px;
border-bottom: 1px solid #e3e3e3;
.title {
display: inline-block;
width: 263px;
padding-top: 7px;
color: #555;
color: @grey;
font-size: 14px;
font-weight: normal;
font-weight: bold;
padding-right: 5px;
}
}
@ -769,7 +797,6 @@ select.field-mini-height {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
padding-left: 5px;
}
}
@ -801,8 +828,6 @@ select.field-mini-height {
}
.search-tree {
margin-top: 10px;
padding: 10px 3px 10px 3px;
.title {
@ -1024,16 +1049,48 @@ tr td button i {
.delete-btn {
/* Used on job page to make cancel and delete buttons have an equal width */
width: 60px;
}
}
#tree-form:before {
content:" ";
border-color: transparent transparent #e3e3e3 transparent;
border-style: solid;
border-width: 15px;
width: 0;
height: 0;
position: relative;
top: -46px;
left: 28px;
}
#tree-view {
margin-left: 10px;
margin-top: 16px;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
@media (min-width: 768px) and (max-width: 1199px) {
.list-actions button, .list-actions .checkbox-inline {
margin-top: 10px;
}
.tree-form-container {
padding-left: 15px;
padding-right: 15px;
}
#tree-view {
margin-left: 0;
margin-top: 10px;
}
#tree-form {
margin-top: 10px;
}
}
@ -1069,4 +1126,9 @@ tr td button i {
margin-top: 10px;
}
.tree-form-container {
padding-left: 15px;
padding-right: 15px;
}
}

34
awx/ui/static/lib/ansible/form-generator.js
View File

@ -45,7 +45,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
}
}
else {
element = angular.element(document.getElementById('htmlTemplate'));
if (options.id) {
element = angular.element(document.getElementById(options.id));
}
else {
element = angular.element(document.getElementById('htmlTemplate'));
}
}
this.mode = options.mode;
@ -908,7 +913,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
//
var html = '';
if (!this.modal) {
if (!this.modal && (options.breadCrumbs == undefined || options.breadCrumbs == true)) {
if (this.form.navigationLinks) {
html += this.breadCrumbs(options, this.form.navigationLinks);
}
@ -1171,22 +1176,31 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
"use the <a href=\"/#/inventories/\{\{ inventory_id \}\}/hosts\"><em>Inventories->Hosts</em></a> page to " +
"add hosts to the group.</p>";
html += "</div>\n";
html += "<div class=\"tree-container\">\n";
html += "<div class=\"row\">\n";
html += "<div class=\"col-lg-12\">\n";
html += "<div class=\"tree-view-container well\">\n";
html += "<div class=\"tree-controls\">\n";
html += "<div class=\"title col-lg-2\" ng-bind=\"selectedNodeName\"></div>\n";
html += "<div class=\"title\" ng-bind=\"selectedNodeName\"></div>\n";
html += "<button type=\"button\" id=\"edit_group_btn\" class=\"btn btn-default btn-sm\" ng-click=\"editGroup()\" ng-hide=\"groupEditHide\" " +
"aw-tool-tip=\"Edit the selected group's properties\" data-placement=\"bottom\"><i class=\"icon-edit\"></i> " +
"aw-tool-tip=\"Edit the selected group's properties\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-edit\"></i> " +
"properties</button>\n";
html += "<button type=\"button\" id=\"copy_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"addGroup()\" ng-hide=\"groupAddHide\" " +
"aw-tool-tip=\"Copy existing groups to the selected group\" data-placement=\"bottom\"><i class=\"icon-check\"></i> Copy</button>\n";
"aw-tool-tip=\"Copy existing groups to the selected group\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-check\"></i> Copy</button>\n";
html += "<button type=\"button\" id=\"create_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
"aw-tool-tip=\"Create a brand new group and add it to the selected group\" data-placement=\"bottom\"><i class=\"icon-plus\"></i> Create New</button>\n";
"aw-tool-tip=\"Create a brand new group and add it to the selected group\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-plus\"></i> Create New</button>\n";
html += "<button type=\"button\" id=\"delete_group_btn\" class=\"btn btn-danger btn-sm\" ng-click=\"deleteGroup()\" ng-hide=\"groupDeleteHide\" " +
"aw-tool-tip=\"Permanently delete the selected group. Any hosts in the group will still be available in All Hosts.\" " +
"data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete</button>\n";
"data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-trash\"></i> Delete</button>\n";
html += "</div><!-- tree controls -->\n";
html += "<div id=\"tree-view\"></div>\n";
html += "</div><!-- tree-container -->\n";
html += "<div class=\"row\">\n";
html += "<div class=\"col-lg-3\"><div id=\"tree-view\"></div></div>\n";
html += "<div class=\"col-lg-9 tree-form-container\">\n<div id=\"tree-form\">\n</div>\n</div>\n";
html += "</div>\n";
html += "</div><!-- well -->\n";
html += "</div><!-- col-lg-12 -->\n";
html += "</div><!-- row -->\n";
}
else {
// build the hosts page

7
awx/ui/static/lib/jstree/themes/ansible/style.css
View File

@ -3,12 +3,7 @@
* Supported features: dots/no-dots, icons/no-icons, focused, loading
* Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
*/
#tree-view {
margin: 0;
padding: 15px;
}
.jstree-ansible li,
.jstree-ansible ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
.jstree-ansible li { background-position:-90px 0; background-repeat:repeat-y; }