mirror of
https://github.com/ansible/awx.git
synced 2026-01-14 11:20:39 -03:30
Add relaunchButton component and styles
This commit is contained in:
Marliana Lara
parent
799feac0e1
commit
ee6beae50a
@ -1047,6 +1047,8 @@ input[type="checkbox"].checkbox-no-label {
|
||||
color: @green;
|
||||
}
|
||||
|
||||
.icon-host-all:before,
|
||||
.icon-host-failed:before,
|
||||
.icon-job-active:before,
|
||||
.icon-job-running:before,
|
||||
.icon-job-success:before,
|
||||
@ -1098,6 +1100,7 @@ input[type="checkbox"].checkbox-no-label {
|
||||
color: @changed;
|
||||
}
|
||||
|
||||
.icon-host-failed,
|
||||
.icon-job-stopped,
|
||||
.icon-job-error,
|
||||
.icon-job-failed,
|
||||
@ -1106,6 +1109,10 @@ input[type="checkbox"].checkbox-no-label {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.icon-host-all {
|
||||
color: @at-blue;
|
||||
}
|
||||
|
||||
.icon-job-unreachable {
|
||||
color: @unreachable;
|
||||
}
|
||||
|
||||
@ -19,7 +19,6 @@ table, tbody {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
table-layout: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.List-tableHeader{
|
||||
@ -70,7 +69,7 @@ table, tbody {
|
||||
}
|
||||
|
||||
.List-tableRow--selected {
|
||||
border-left: 10px solid @list-row-select-bord;
|
||||
border-left: 5px solid @list-row-select-bord;
|
||||
}
|
||||
|
||||
.List-tableRow--selected > :first-child {
|
||||
@ -124,7 +123,8 @@ table, tbody {
|
||||
color: @list-action-icon;
|
||||
background-color: @list-actn-bg;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
border-radius: 4px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.List-actionButton:hover {
|
||||
@ -136,10 +136,6 @@ table, tbody {
|
||||
background-color: @list-actn-del-bg-hov !important;
|
||||
}
|
||||
|
||||
.List-actionButton + .List-actionButton {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.List-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -7,3 +7,4 @@
|
||||
@import 'tabs/_index';
|
||||
@import 'utility/_index';
|
||||
@import 'truncate/_index';
|
||||
@import 'relaunchButton/_index';
|
||||
@ -76,6 +76,11 @@ function ComponentsStrings (BaseString) {
|
||||
ns.capacityBar = {
|
||||
IS_OFFLINE: t.s('Unavailable to run jobs.')
|
||||
};
|
||||
|
||||
ns.relaunch = {
|
||||
DEFAULT: t.s('Relaunch using the same parameters'),
|
||||
HOSTS: t.s('Relaunch using host parameters')
|
||||
};
|
||||
}
|
||||
|
||||
ComponentsStrings.$inject = ['BaseStringService'];
|
||||
|
||||
@ -26,6 +26,7 @@ import tab from '~components/tabs/tab.directive';
|
||||
import tabGroup from '~components/tabs/group.directive';
|
||||
import topNavItem from '~components/layout/top-nav-item.directive';
|
||||
import truncate from '~components/truncate/truncate.directive';
|
||||
import relaunch from '~components/relaunchButton/relaunchButton.directive';
|
||||
|
||||
import BaseInputController from '~components/input/base.controller';
|
||||
import ComponentsStrings from '~components/components.strings';
|
||||
@ -62,6 +63,7 @@ angular
|
||||
.directive('atTabGroup', tabGroup)
|
||||
.directive('atTopNavItem', topNavItem)
|
||||
.directive('atTruncate', truncate)
|
||||
.component('atRelaunch', relaunch)
|
||||
.service('BaseInputController', BaseInputController)
|
||||
.service('ComponentsStrings', ComponentsStrings);
|
||||
|
||||
|
||||
39
awx/ui/client/lib/components/relaunchButton/_index.less
Normal file
39
awx/ui/client/lib/components/relaunchButton/_index.less
Normal file
@ -0,0 +1,39 @@
|
||||
.at-Relaunch {
|
||||
margin-left: 15px;
|
||||
|
||||
&--button {
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
color: #848992;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&--button:hover {
|
||||
background-color: @at-blue;
|
||||
color: white;
|
||||
}
|
||||
&--dropdownTitle {
|
||||
color: #707070;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
&--dropdownOptions {
|
||||
i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.at-Relaunch--button {
|
||||
background-color: @at-blue;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import templateUrl from './relaunchButton.partial.html';
|
||||
|
||||
const atRelaunch = {
|
||||
templateUrl,
|
||||
bindings: {
|
||||
state: '<'
|
||||
},
|
||||
controller: ['RelaunchJob', 'InitiatePlaybookRun', 'ComponentsStrings', '$scope', atRelaunchCtrl],
|
||||
controllerAs: 'vm',
|
||||
replace: true
|
||||
};
|
||||
|
||||
function atRelaunchCtrl (RelaunchJob, InitiatePlaybookRun, strings, $scope) {
|
||||
const vm = this;
|
||||
const scope = $scope.$parent;
|
||||
const { job } = $scope.$parent;
|
||||
|
||||
vm.$onInit = () => {
|
||||
vm.showRelaunch = !(job.type === 'system_job') && job.summary_fields.user_capabilities.start;
|
||||
vm.showDropdown = job.type === 'job' && job.failed === true;
|
||||
|
||||
if (vm.showDropdown) {
|
||||
vm.tooltip = strings.get('relaunch.HOSTS');
|
||||
} else {
|
||||
vm.tooltip = strings.get('relaunch.DEFAULT');
|
||||
}
|
||||
};
|
||||
|
||||
vm.relaunchJob = () => {
|
||||
let typeId;
|
||||
|
||||
if (job.type === 'inventory_update') {
|
||||
typeId = job.inventory_source;
|
||||
} else if (job.type === 'project_update') {
|
||||
typeId = job.project;
|
||||
} else if (job.type === 'job' || job.type === 'system_job'
|
||||
|| job.type === 'ad_hoc_command' || job.type === 'workflow_job') {
|
||||
typeId = job.id;
|
||||
}
|
||||
|
||||
RelaunchJob({ scope, id: typeId, type: job.type, name: job.name });
|
||||
};
|
||||
|
||||
vm.relaunchOn = (option) => {
|
||||
InitiatePlaybookRun({
|
||||
scope,
|
||||
id: job.id,
|
||||
relaunch: true,
|
||||
job_type: job.type,
|
||||
host_type: (option.name).toLowerCase()
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default atRelaunch;
|
||||
@ -0,0 +1,33 @@
|
||||
<div ng-if="vm.showRelaunch"
|
||||
class="at-Relaunch"
|
||||
aw-tool-tip="{{ vm.tooltip }}"
|
||||
data-placement="top">
|
||||
|
||||
<div class="btn-group" role="group" ng-if="vm.showDropdown">
|
||||
<button class="at-Relaunch--button"
|
||||
data-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
id="relaunchDropdown">
|
||||
<i class="{{ vm.state.icon }}"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu pull-right" aria-labelledby="relaunchDropdown">
|
||||
<li class="at-Relaunch--dropdownTitle">
|
||||
<span>{{ vm.state.dropdownTitle }}</span>
|
||||
</li>
|
||||
<li ng-repeat="option in vm.state.dropdownOptions"
|
||||
class="at-Relaunch--dropdownOptions">
|
||||
<a ng-click="vm.relaunchOn(option)">
|
||||
<i class="fa {{ option.icon }}"></i>
|
||||
{{ option.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="at-Relaunch--button"
|
||||
ng-click="vm.relaunchJob()"
|
||||
ng-if="!vm.showDropdown">
|
||||
<i class="{{ vm.state.icon }}"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -10,10 +10,13 @@ export default
|
||||
var scope = params.scope.$new(),
|
||||
id = params.id,
|
||||
relaunch = params.relaunch || false,
|
||||
job_type = params.job_type;
|
||||
job_type = params.job_type,
|
||||
host_type = params.host_type || "";
|
||||
scope.job_template_id = id;
|
||||
|
||||
var el = $compile( "<submit-job data-submit-job-id=" + id + " submit-job-type=" + job_type + " data-submit-job-relaunch=" + relaunch + "></submit-job>" )( scope );
|
||||
var el = $compile( "<submit-job data-submit-job-id=" + id + " submit-job-type=" + job_type + " data-submit-job-relaunch=" + relaunch +
|
||||
" relaunch-host-type=" + host_type +
|
||||
"></submit-job>" )( scope );
|
||||
$('#content-container').remove('submit-job').append( el );
|
||||
};
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ export default
|
||||
job_launch_data = {},
|
||||
url = params.url,
|
||||
submitJobType = params.submitJobType,
|
||||
relaunchHostType = params.relaunchHostType,
|
||||
vars_url = GetBasePath('job_templates')+scope.job_template_id + '/',
|
||||
base = $location.path().replace(/^\//, '').split('/')[0],
|
||||
extra_vars;
|
||||
@ -132,6 +133,14 @@ export default
|
||||
job_launch_data.diff_mode = scope.other_prompt_data.diff_mode;
|
||||
}
|
||||
|
||||
if(scope.relaunchHostType) {
|
||||
job_launch_data.hosts = scope.relaunchHostType;
|
||||
}
|
||||
console.log(job_launch_data);
|
||||
// if(_.get(scope, 'retry_counts.failed') === true) {
|
||||
// job_launch_data.hosts = "failed";
|
||||
// }
|
||||
|
||||
// If the extra_vars dict is empty, we don't want to include it if we didn't prompt for anything.
|
||||
if(jQuery.isEmptyObject(job_launch_data.extra_vars)===true && scope.prompt_for_vars===false){
|
||||
delete job_launch_data.extra_vars;
|
||||
|
||||
@ -83,7 +83,8 @@ export default
|
||||
LaunchJob({
|
||||
scope: $scope,
|
||||
url: launch_url,
|
||||
submitJobType: $scope.submitJobType
|
||||
submitJobType: $scope.submitJobType,
|
||||
relaunchHostType: $scope.relaunchHostType
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -12,7 +12,8 @@ export default [ 'templateUrl', 'CreateDialog', 'Wait', 'CreateSelect2', 'ParseT
|
||||
scope: {
|
||||
submitJobId: '=',
|
||||
submitJobType: '@',
|
||||
submitJobRelaunch: '='
|
||||
submitJobRelaunch: '=',
|
||||
relaunchHostType: '@'
|
||||
},
|
||||
templateUrl: templateUrl('job-submission/job-submission'),
|
||||
controller: jobSubmissionController,
|
||||
|
||||
@ -92,12 +92,24 @@ export default ['i18n', function(i18n) {
|
||||
dataPlacement: "top"
|
||||
},
|
||||
submit: {
|
||||
icon: 'icon-rocket',
|
||||
icon: 'icon-launch',
|
||||
mode: 'all',
|
||||
ngClick: 'relaunchJob($event, job.id)',
|
||||
awToolTip: i18n._('Relaunch using the same parameters'),
|
||||
dataPlacement: 'top',
|
||||
ngShow: "!(job.type == 'system_job') && job.summary_fields.user_capabilities.start"
|
||||
ngShow: "!(job.type == 'system_job') && job.summary_fields.user_capabilities.start",
|
||||
relaunch: true,
|
||||
dropdownTitle: 'Relaunch On',
|
||||
dropdownOptions: [
|
||||
{
|
||||
name: 'All',
|
||||
icon: 'icon-host-all'
|
||||
},
|
||||
{
|
||||
name: 'Failed',
|
||||
icon: 'icon-host-failed'
|
||||
}
|
||||
],
|
||||
},
|
||||
cancel: {
|
||||
mode: 'all',
|
||||
|
||||
@ -396,7 +396,10 @@ export default ['$compile', 'Attr', 'Icon',
|
||||
if (field_action === 'pending_deletion') {
|
||||
innerTable += `<a ng-if='${list.iterator}.pending_deletion'>Pending Delete</a>`;
|
||||
}
|
||||
else {
|
||||
// Plug in Dropdown Component
|
||||
if (field_action === 'submit' && list.fieldActions[field_action].relaunch === true) {
|
||||
innerTable += `<at-relaunch scope='$scope' state='list.fieldActions.submit'></at-relaunch>`
|
||||
} else {
|
||||
fAction = list.fieldActions[field_action];
|
||||
innerTable += "<button id=\"";
|
||||
innerTable += (fAction.id) ? fAction.id : field_action + "-action";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user