Merge pull request #1131 from marshmalien/fix/small_ui_improvements

UI Fix inventory list action buttons, upgrade screen, custom venv fields
This commit is contained in:
Marliana Lara 2018-03-28 11:26:21 -04:00 committed by GitHub
commit d5d80860e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 79 additions and 72 deletions

View File

@ -113,7 +113,7 @@ export default ['i18n', function(i18n) {
"class": 'btn-danger btn-xs',
awToolTip: i18n._('Copy inventory'),
dataPlacement: 'top',
ngShow: 'inventory.summary_fields.user_capabilities.edit'
ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
},
view: {
label: i18n._('View'),

View File

@ -52,7 +52,8 @@ export default ['NotificationsList', 'i18n',
dataTitle: i18n._('Ansible Environment'),
dataContainer: 'body',
dataPlacement: 'right',
ngDisabled: '!(organization_obj.summary_fields.user_capabilities.edit || canAdd)'
ngDisabled: '!(organization_obj.summary_fields.user_capabilities.edit || canAdd)',
ngShow: 'custom_virtualenvs_options.length > 0'
}
},

View File

@ -52,17 +52,6 @@ export default ['i18n', 'NotificationsList', 'TemplateList',
ngDisabled: '!(project_obj.summary_fields.user_capabilities.edit || canAdd) || !canEditOrg',
awLookupWhen: '(project_obj.summary_fields.user_capabilities.edit || canAdd) && canEditOrg'
},
custom_virtualenv: {
label: i18n._('Ansible Environment'),
type: 'select',
defaultText: i18n._('Select Ansible Environment'),
ngOptions: 'venv for venv in custom_virtualenvs_options track by venv',
awPopOver: "<p>" + i18n._("Select the custom Python virtual environment for this project to run on.") + "</p>",
dataTitle: i18n._('Ansible Environment'),
dataContainer: 'body',
dataPlacement: 'right',
ngDisabled: '!(project_obj.summary_fields.user_capabilities.edit || canAdd)'
},
scm_type: {
label: i18n._('SCM Type'),
type: 'select',
@ -211,8 +200,21 @@ export default ['i18n', 'NotificationsList', 'TemplateList',
dataTitle: i18n._('Cache Timeout'),
dataPlacement: 'right',
dataContainer: "body",
ngDisabled: '!(project_obj.summary_fields.user_capabilities.edit || canAdd)'
}
ngDisabled: '!(project_obj.summary_fields.user_capabilities.edit || canAdd)',
subForm: 'sourceSubForm'
},
custom_virtualenv: {
label: i18n._('Ansible Environment'),
type: 'select',
defaultText: i18n._('Select Ansible Environment'),
ngOptions: 'venv for venv in custom_virtualenvs_options track by venv',
awPopOver: "<p>" + i18n._("Select the custom Python virtual environment for this project to run on.") + "</p>",
dataTitle: i18n._('Ansible Environment'),
dataContainer: 'body',
dataPlacement: 'right',
ngDisabled: '!(project_obj.summary_fields.user_capabilities.edit || canAdd)',
ngShow: 'custom_virtualenvs_options.length > 0'
},
},
buttons: {

View File

@ -395,63 +395,64 @@ export default ['$compile', 'Attr', 'Icon',
}
if (field_action === 'pending_deletion') {
innerTable += `<a ng-if='${list.iterator}.pending_deletion'>Pending Delete</a>`;
}
// Plug in Dropdown Component
if (field_action === 'submit' && list.fieldActions[field_action].relaunch === true) {
innerTable += `<at-relaunch job="${list.iterator}"></at-relaunch>`;
} else if (field_action === 'submit' && list.fieldActions[field_action].launch === true) {
innerTable += `<at-launch-template template="${list.iterator}" ng-if="${list.iterator}.summary_fields.user_capabilities.start"></at-launch-template>`;
} else {
fAction = list.fieldActions[field_action];
innerTable += "<button id=\"";
innerTable += (fAction.id) ? fAction.id : field_action + "-action";
innerTable += "\" ";
innerTable += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
innerTable += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
innerTable += "class=\"List-actionButton ";
innerTable += (field_action === 'delete' || field_action === 'cancel') ? "List-actionButton--delete" : "";
innerTable += "\" ";
if(field_action === 'edit') {
// editStateParams allows us to handle cases where a list might have different types of resources in it. As a result the edit
// icon might now always point to the same state and differing states may have differing stateParams. Specifically this occurs
// on the Templates list where editing a workflow job template takes you to a state where the param is workflow_job_template_id.
// You can also edit a Job Template from this list so the stateParam there would be job_template_id.
if(list.fieldActions[field_action].editStateParams) {
let matchingConditions = handleEditStateParams(list.fieldActions[field_action].editStateParams);
innerTable += `ng-class="{'List-editButton--selected' : ${matchingConditions.join(' || ')}}"`;
}
else if (list.iterator === 'inventory') {
innerTable += `ng-class="{'List-editButton--selected': ($stateParams['${list.iterator}_id'] == ${list.iterator}.id) || ($stateParams['smartinventory_id'] == ${list.iterator}.id)}"`;
}
else if (list.iterator === 'host') {
innerTable += `ng-class="{'List-editButton--selected': $stateParams['${list.iterator}_id'] == ${list.iterator}.id && $state.is('inventories.edit.hosts.edit') }"`;
}
else {
innerTable += `ng-class="{'List-editButton--selected' : $stateParams['${list.iterator}_id'] == ${list.iterator}.id}"`;
}
}
innerTable += (fAction.ngDisabled) ? "ng-disabled=\"" + fAction.ngDisabled + "\"" : "";
innerTable += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
innerTable += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
innerTable += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
for (itm in fAction) {
if (itm !== 'ngHref' && itm !== 'href' && itm !== 'label' && itm !== 'icon' && itm !== 'class' &&
itm !== 'iconClass' && itm !== "dataPlacement" && itm !== "awPopOver" &&
itm !== "dataTitle") {
innerTable += Attr(fAction, itm);
}
}
innerTable += ">";
if (fAction.iconClass) {
innerTable += "<i class=\"" + fAction.iconClass + "\"></i>";
// Plug in Dropdown Component
if (field_action === 'submit' && list.fieldActions[field_action].relaunch === true) {
innerTable += `<at-relaunch job="${list.iterator}"></at-relaunch>`;
} else if (field_action === 'submit' && list.fieldActions[field_action].launch === true) {
innerTable += `<at-launch-template template="${list.iterator}" ng-if="${list.iterator}.summary_fields.user_capabilities.start"></at-launch-template>`;
} else {
innerTable += SelectIcon({
action: field_action
});
fAction = list.fieldActions[field_action];
innerTable += "<button id=\"";
innerTable += (fAction.id) ? fAction.id : field_action + "-action";
innerTable += "\" ";
innerTable += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
innerTable += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
innerTable += "class=\"List-actionButton ";
innerTable += (field_action === 'delete' || field_action === 'cancel') ? "List-actionButton--delete" : "";
innerTable += "\" ";
if(field_action === 'edit') {
// editStateParams allows us to handle cases where a list might have different types of resources in it. As a result the edit
// icon might now always point to the same state and differing states may have differing stateParams. Specifically this occurs
// on the Templates list where editing a workflow job template takes you to a state where the param is workflow_job_template_id.
// You can also edit a Job Template from this list so the stateParam there would be job_template_id.
if(list.fieldActions[field_action].editStateParams) {
let matchingConditions = handleEditStateParams(list.fieldActions[field_action].editStateParams);
innerTable += `ng-class="{'List-editButton--selected' : ${matchingConditions.join(' || ')}}"`;
}
else if (list.iterator === 'inventory') {
innerTable += `ng-class="{'List-editButton--selected': ($stateParams['${list.iterator}_id'] == ${list.iterator}.id) || ($stateParams['smartinventory_id'] == ${list.iterator}.id)}"`;
}
else if (list.iterator === 'host') {
innerTable += `ng-class="{'List-editButton--selected': $stateParams['${list.iterator}_id'] == ${list.iterator}.id && $state.is('inventories.edit.hosts.edit') }"`;
}
else {
innerTable += `ng-class="{'List-editButton--selected' : $stateParams['${list.iterator}_id'] == ${list.iterator}.id}"`;
}
}
innerTable += (fAction.ngDisabled) ? "ng-disabled=\"" + fAction.ngDisabled + "\"" : "";
innerTable += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
innerTable += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
innerTable += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
for (itm in fAction) {
if (itm !== 'ngHref' && itm !== 'href' && itm !== 'label' && itm !== 'icon' && itm !== 'class' &&
itm !== 'iconClass' && itm !== "dataPlacement" && itm !== "awPopOver" &&
itm !== "dataTitle") {
innerTable += Attr(fAction, itm);
}
}
innerTable += ">";
if (fAction.iconClass) {
innerTable += "<i class=\"" + fAction.iconClass + "\"></i>";
} else {
innerTable += SelectIcon({
action: field_action
});
}
//html += (fAction.label) ? "<span class=\"list-action-label\"> " + list.fieldActions[field_action].label +
// "</span>" : "";
innerTable += "</button>";
}
//html += (fAction.label) ? "<span class=\"list-action-label\"> " + list.fieldActions[field_action].label +
// "</span>" : "";
innerTable += "</button>";
}
}
}

View File

@ -1,15 +1,17 @@
.at-Upgrade--panel {
align-items: center;
background-color: @at-color-body-background-light;
border-radius: 10px;
color: @at-color-body-text;
display: flex;
flex-direction: column;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @at-font-size-jumbotron-text;
height: ~"calc(100vh - 40px)";
justify-content: center;
margin-top: @at-space-10x;
margin: @at-space-4x;
padding: @at-space-10x;
}
}
.at-Upgrade--header {
display: flex;

View File

@ -240,7 +240,8 @@ function(NotificationsList, i18n) {
dataTitle: i18n._('Ansible Environment'),
dataContainer: 'body',
dataPlacement: 'right',
ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAdd)',
ngShow: 'custom_virtualenvs_options.length > 0'
},
instance_groups: {
label: i18n._('Instance Groups'),