shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Refresh the job details when the job finishes running. This pulls in details not available at the beginning of a job. One plus two styling tweaks

Browse Source
This commit is contained in:
Michael Abashian 2016-03-04 11:36:34 -05:00
parent 5759db1229
commit 08c33a8c6b
9 changed files with 206 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
awx/ui/client/src/license/license.block.less
View File

@ -33,6 +33,9 @@
.License-field{
.OnePlusTwo-left--detailsRow;
}
.License-field + .License-field {
margin-top: 20px;
}
.License-greenText{
color: @submit-button-bg;
}
@ -40,16 +43,16 @@
color: #d9534f;
}
.License-fields{
.OnePlusTwo-left--details;
.OnePlusTwo-left--details;
}
.License-details {
.OnePlusTwo-left--panel(600px);
.OnePlusTwo-left--panel(650px);
}
.License-titleText {
.OnePlusTwo-panelHeader;
}
.License-management{
.OnePlusTwo-right--panel(600px);
.OnePlusTwo-right--panel(650px);
}
.License-submit--container{
height: 33px;
@ -59,8 +62,21 @@
margin: 0 10px 0 0;
}
.License-file--container {
margin: 20px 0 20px 0;
input[type=file] {
display: none;
}
}
}
.License-upgradeText {
margin: 20px 0px;
}
.License-body {
margin-top: 25px;
}
.License-subTitleText {
text-transform: uppercase;
margin: 20px 0px 5px 0px;
color: @default-interface-txt;
}
.License-helperText {
color: @default-interface-txt;
}

87
awx/ui/client/src/license/license.partial.html
View File

@ -5,95 +5,98 @@
<div class="License-fields">
<div class="License-field">
<div class="License-field--label">License</div>
<div class="License-field--content">
<div class="License-field--content">
<span ng-show='valid'><i class="fa fa-circle License-greenText"></i> Valid</span>
<span ng-show='invalid'><i class="fa fa-circle License-redText"></i> Invalid</span>
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">Version</div>
<div class="License-field--content">
<div class="License-field--content">
{{license.version}}
</div>
</div>
<div class="License-field">
<div class="License-field--label">License Type</div>
<div class="License-field--label">License Type</div>
<div class="License-field--content">
{{license.license_info.license_type}}
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">Subscription</div>
<div class="License-field--content">
<div class="License-field--content">
{{license.license_info.subscription_name}}
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">License Key</div>
<div class="License-field--content">
<div class="License-field--label">License Key</div>
<div class="License-field--content">
{{license.license_info.license_key}}
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">Expires On</div>
<div class="License-field--content">
<div class="License-field--content">
{{time.expiresOn}}
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">Time Remaining</div>
<div class="License-field--content">
<div class="License-field--content">
{{time.remaining}} Day
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">Hosts Available</div>
<div class="License-field--label">Hosts Available</div>
<div class="License-field--content">
{{license.license_info.available_instances}}
</div>
</div>
</div>
<div class="License-field">
<div class="License-field--label">Hosts Used</div>
<div class="License-field--content">
<div class="License-field--content">
{{license.license_info.current_instances}}
</div>
</div>
</div>
<div class="License-field License-greenText">
<div class="License-field--label">Hosts Remaining</div>
<div class="License-field--content">
<div class="License-field--content">
{{license.license_info.free_instances}}
</div>
</div>
</div>
</div>
<p>If you are ready to upgrade, please contact us by clicking the button below</p>
<div class="License-upgradeText">If you are ready to upgrade, please contact us by clicking the button below</div>
<a href="https://www.ansible.com/renew" target="_blank"><button class="btn btn-default">Upgrade</button></a>
</div>
</div>
<div class="License-management">
<div class="Panel">
<div class="License-titleText">License Management</div>
<p>Choose your license file, agree to the End User License Agreement, and click submit.</p>
<form id="License-form" name="license">
<div class="input-group License-file--container">
<span class="btn btn-default input-group-addon" ng-click="fakeClick()">Browse...</span>
<input class="form-control" ng-disabled="true" placeholder="{{fileName}}" />
<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
</div>
<div class="License-titleText prepend-asterisk"> End User License Agreement</div>
<div class="form-group License-eula">
<textarea class="form-control">{{license.eula}}
</textarea>
</div>
<div class="form-group">
<div class="checkbox">
<div class="License-details--label"><input type="checkbox" ng-model="newLicense.eula" required> I agree to the End User License Agreement</div>
<div class="License-submit--container pull-right">
<span ng-hide="success == null || false" class="License-greenText License-submit--success pull-left">Save successful!</span>
<button ng-click="submit()" class="btn btn-success pull-right" ng-disabled="newLicense.file.license_key == null || newLicense.eula == null">Submit</button>
<div class="License-body">
<p class="License-helperText">Choose your license file, agree to the End User License Agreement, and click submit.</p>
<form id="License-form" name="license">
<div class="License-subTitleText prepend-asterisk"> License File</div>
<div class="input-group License-file--container">
<span class="btn btn-default input-group-addon" ng-click="fakeClick()">Browse...</span>
<input class="form-control" ng-disabled="true" placeholder="{{fileName}}" />
<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
</div>
<div class="License-subTitleText prepend-asterisk"> End User License Agreement</div>
<div class="form-group License-eula">
<textarea class="form-control">{{license.eula}}
</textarea>
</div>
<div class="form-group">
<div class="checkbox">
<div class="License-details--label"><input type="checkbox" ng-model="newLicense.eula" required> I agree to the End User License Agreement</div>
<div class="License-submit--container pull-right">
<span ng-hide="success == null || false" class="License-greenText License-submit--success pull-left">Save successful!</span>
<button ng-click="submit()" class="btn btn-success pull-right" ng-disabled="newLicense.file.license_key == null || newLicense.eula == null">Submit</button>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
</div>

18
awx/ui/client/src/shared/layouts/one-plus-two.less
View File

@ -22,25 +22,24 @@
flex: 0 0;
height: @height;
width: 100%;
margin-right: 20px;
.Panel{
height: 100%;
}
@media screen and (min-width: @breakpoint){
max-width: 400px;
}
@media screen and (max-width: @breakpoint){
margin-right: 0px;
height: inherit;
}
}
.OnePlusTwo-right--panel(@height: 100%; @breakpoint: 900px) {
height: @height;
flex: 1 0;
margin-left: 20px;
.Panel{
height: 100%;
}
@media screen and (max-width: @breakpoint){
flex-direction: column;
margin-left: 0px;
margin-top: 25px;
}
}
@ -50,6 +49,7 @@
font-weight: bold;
margin-right: 10px;
text-transform: uppercase;
display: flex;
}
.OnePlusTwo-left--details {
@ -58,9 +58,6 @@
.OnePlusTwo-left--detailsRow {
display: flex;
:not(:last-child){
margin-bottom: 20px;
}
}
.OnePlusTwo-left--detailsLabel {
@ -73,7 +70,6 @@
.OnePlusTwo-left--detailsContent {
display: inline-block;
max-width: 220px;
width: 220px;
word-wrap: break-word;
}

2
awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html
View File

@ -1,6 +1,6 @@
<div class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate">
<div class="StandardOut">
<div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel">
<div class="StandardOut-panelHeader">

2
awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html
View File

@ -1,6 +1,6 @@
<div class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate">
<div class="StandardOut">
<div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel">
<div class="StandardOut-panelHeader">

2
awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
View File

@ -1,6 +1,6 @@
<div class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate">
<div class="StandardOut">
<div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel">
<div class="StandardOut-panelHeader">

2
awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html
View File

@ -1,6 +1,6 @@
<div class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate">
<div class="StandardOut">
<div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel">
<div class="StandardOut-panelHeader">

48
awx/ui/client/src/standard-out/standard-out.block.less
View File

@ -1,28 +1,22 @@
@import "../shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/layouts/one-plus-two.less";
/** @define StandardOut */
.StandardOut {
height: 100%;
display: flex;
flex-direction: row;
.StandardOut-container {
.OnePlusTwo-container;
}
.StandardOut-leftPanel {
flex: 0 0 400px;
margin-right: 20px;
.OnePlusTwo-left--panel(590px);
}
.StandardOut-rightPanel {
flex: 1 0;
.OnePlusTwo-right--panel(590px);
}
.StandardOut-panelHeader {
color: @default-interface-txt;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
display: flex;
.OnePlusTwo-panelHeader
}
.StandardOut-consoleOutput {
@ -30,31 +24,28 @@
min-height: 200px;
background-color: @default-secondary-bg;
border-radius: 5px;
height: 300px;
height: ~"calc(100% - 74px)";
overflow: scroll;
}
.StandardOut-details {
margin-top: 25px;
.OnePlusTwo-left--details;
}
.StandardOut-detailsRow {
display: flex;
.OnePlusTwo-left--detailsRow;
}
.StandardOut-detailsRow:not(:last-child) {
margin-bottom: 20px;
.StandardOut-detailsRow + .StandardOut-detailsRow {
margin-top: 20px;
}
.StandardOut-detailsLabel {
width: 130px;
flex: 0 0 130px;
color: @default-interface-txt;
text-transform: uppercase;
.OnePlusTwo-left--detailsLabel;
}
.StandardOut-detailsContent {
flex: 1 0;
.OnePlusTwo-left--detailsContent;
}
.StandardOut-statusText {
@ -66,7 +57,7 @@
}
.StandardOut-preContainer {
height: 300px;
height: 100%;
}
.StandardOut-panelHeaderText {
@ -105,14 +96,3 @@
.StandardOut-actionButton + a {
margin-left: 15px;
}
@standardout-breakpoint: 900px;
@media screen and (max-width: @standardout-breakpoint) {
.StandardOut {
flex-direction: column;
}
.StandardOut-leftPanel {
margin-right: 0px;
}
}

222
awx/ui/client/src/standard-out/standard-out.controller.js
View File

@ -32,118 +32,124 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
$scope.job.status = data.status;
}
// TODO: when the job completes we should refresh the job data so that we pull in the finish
// timestamp as well as the run time.
if (data.status === 'failed' || data.status === 'canceled' || data.status === 'error' || data.status === 'successful') {
// Go out and refresh the job details
getJobDetails();
}
});
// Go out and get the job details based on the job type. jobType gets defined
// in the data block of the route declaration for each of the different types
// of stdout jobs.
Rest.setUrl(GetBasePath('base') + jobType + '/' + job_id + '/');
Rest.get()
.success(function(data) {
$scope.job = data;
$scope.job_template_name = data.name;
$scope.created_by = data.summary_fields.created_by;
$scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
$scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
$scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
$scope.inventory_url = ($scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
$scope.project_url = ($scope.project_name && data.project) ? '/#/projects/' + data.project : '';
$scope.credential_name = (data.summary_fields.credential) ? data.summary_fields.credential.name : '';
$scope.credential_url = (data.credential) ? '/#/credentials/' + data.credential : '';
$scope.cloud_credential_url = (data.cloud_credential) ? '/#/credentials/' + data.cloud_credential : '';
$scope.playbook = data.playbook;
$scope.credential = data.credential;
$scope.cloud_credential = data.cloud_credential;
$scope.forks = data.forks;
$scope.limit = data.limit;
$scope.verbosity = data.verbosity;
$scope.job_tags = data.job_tags;
function getJobDetails() {
// If we have a source then we have to go get the source choices from the server
if (!Empty(data.source)) {
if ($scope.removeChoicesReady) {
$scope.removeChoicesReady();
}
$scope.removeChoicesReady = $scope.$on('ChoicesReady', function() {
$scope.source_choices.every(function(e) {
if (e.value === data.source) {
$scope.source = e.label;
return false;
}
return true;
// Go out and get the job details based on the job type. jobType gets defined
// in the data block of the route declaration for each of the different types
// of stdout jobs.
Rest.setUrl(GetBasePath('base') + jobType + '/' + job_id + '/');
Rest.get()
.success(function(data) {
$scope.job = data;
$scope.job_template_name = data.name;
$scope.created_by = data.summary_fields.created_by;
$scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
$scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
$scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
$scope.inventory_url = ($scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
$scope.project_url = ($scope.project_name && data.project) ? '/#/projects/' + data.project : '';
$scope.credential_name = (data.summary_fields.credential) ? data.summary_fields.credential.name : '';
$scope.credential_url = (data.credential) ? '/#/credentials/' + data.credential : '';
$scope.cloud_credential_url = (data.cloud_credential) ? '/#/credentials/' + data.cloud_credential : '';
$scope.playbook = data.playbook;
$scope.credential = data.credential;
$scope.cloud_credential = data.cloud_credential;
$scope.forks = data.forks;
$scope.limit = data.limit;
$scope.verbosity = data.verbosity;
$scope.job_tags = data.job_tags;
// If we have a source then we have to go get the source choices from the server
if (!Empty(data.source)) {
if ($scope.removeChoicesReady) {
$scope.removeChoicesReady();
}
$scope.removeChoicesReady = $scope.$on('ChoicesReady', function() {
$scope.source_choices.every(function(e) {
if (e.value === data.source) {
$scope.source = e.label;
return false;
}
return true;
});
});
// GetChoices can be found in the helper: StandardOut.js
// It attaches the source choices to $scope.source_choices.
// Then, when the callback is fired, $scope.source is bound
// to the corresponding label.
GetChoices({
scope: $scope,
url: GetBasePath('inventory_sources'),
field: 'source',
variable: 'source_choices',
choice_name: 'choices',
callback: 'ChoicesReady'
});
});
// GetChoices can be found in the helper: StandardOut.js
// It attaches the source choices to $scope.source_choices.
// Then, when the callback is fired, $scope.source is bound
// to the corresponding label.
GetChoices({
scope: $scope,
url: GetBasePath('inventory_sources'),
field: 'source',
variable: 'source_choices',
choice_name: 'choices',
callback: 'ChoicesReady'
});
}
// LookUpName can be found in the helper: StandardOut.js
// It attaches the name that it gets (based on the url)
// to the $scope variable defined by the attribute scope_var.
if (!Empty(data.credential)) {
LookUpName({
scope: $scope,
scope_var: 'credential',
url: GetBasePath('credentials') + data.credential + '/'
});
}
if (!Empty(data.inventory)) {
LookUpName({
scope: $scope,
scope_var: 'inventory',
url: GetBasePath('inventory') + data.inventory + '/'
});
}
if (!Empty(data.project)) {
LookUpName({
scope: $scope,
scope_var: 'project',
url: GetBasePath('projects') + data.project + '/'
});
}
if (!Empty(data.cloud_credential)) {
LookUpName({
scope: $scope,
scope_var: 'cloud_credential',
url: GetBasePath('credentials') + data.cloud_credential + '/'
});
}
if (!Empty(data.inventory_source)) {
LookUpName({
scope: $scope,
scope_var: 'inventory_source',
url: GetBasePath('inventory_sources') + data.inventory_source + '/'
});
}
// If the job isn't running we want to clear out the interval that goes out and checks for stdout updates.
// This interval is defined in the standard out log directive controller.
if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
if ($rootScope.jobStdOutInterval) {
window.clearInterval($rootScope.jobStdOutInterval);
}
}
})
.error(function(data, status) {
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
msg: 'Failed to retrieve job: ' + job_id + '. GET returned: ' + status });
});
// LookUpName can be found in the helper: StandardOut.js
// It attaches the name that it gets (based on the url)
// to the $scope variable defined by the attribute scope_var.
if (!Empty(data.credential)) {
LookUpName({
scope: $scope,
scope_var: 'credential',
url: GetBasePath('credentials') + data.credential + '/'
});
}
if (!Empty(data.inventory)) {
LookUpName({
scope: $scope,
scope_var: 'inventory',
url: GetBasePath('inventory') + data.inventory + '/'
});
}
if (!Empty(data.project)) {
LookUpName({
scope: $scope,
scope_var: 'project',
url: GetBasePath('projects') + data.project + '/'
});
}
if (!Empty(data.cloud_credential)) {
LookUpName({
scope: $scope,
scope_var: 'cloud_credential',
url: GetBasePath('credentials') + data.cloud_credential + '/'
});
}
if (!Empty(data.inventory_source)) {
LookUpName({
scope: $scope,
scope_var: 'inventory_source',
url: GetBasePath('inventory_sources') + data.inventory_source + '/'
});
}
// If the job isn't running we want to clear out the interval that goes out and checks for stdout updates.
// This interval is defined in the standard out log directive controller.
if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
if ($rootScope.jobStdOutInterval) {
window.clearInterval($rootScope.jobStdOutInterval);
}
}
})
.error(function(data, status) {
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
msg: 'Failed to retrieve job: ' + job_id + '. GET returned: ' + status });
});
}
// TODO: this is currently not used but is necessary for cases where sockets
// are not available and a manual refresh trigger is needed.
@ -156,6 +162,8 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
$scope.stdoutFullScreen = !$scope.stdoutFullScreen;
}
getJobDetails();
}
JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName'];