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

Merge pull request #1123 from mabashian/stdout-responsive

Browse Source 
Styling tweaks to standard out and license views/dynamic details reload
This commit is contained in:
Michael Abashian
2016-03-07 14:58:40 -05:00
parent 51cb262a84 ccaae088d6
commit 6cba39733b
9 changed files with 206 additions and 203 deletions
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{ .License-field{
.OnePlusTwo-left--detailsRow; .OnePlusTwo-left--detailsRow;
} }
.License-field + .License-field {
margin-top: 20px;
}
.License-greenText{ .License-greenText{
color: @submit-button-bg; color: @submit-button-bg;
} }
@@ -40,16 +43,16 @@
color: #d9534f; color: #d9534f;
} }
.License-fields{ .License-fields{
.OnePlusTwo-left--details; .OnePlusTwo-left--details;
} }
.License-details { .License-details {
.OnePlusTwo-left--panel(600px); .OnePlusTwo-left--panel(650px);
} }
.License-titleText { .License-titleText {
.OnePlusTwo-panelHeader; .OnePlusTwo-panelHeader;
} }
.License-management{ .License-management{
.OnePlusTwo-right--panel(600px); .OnePlusTwo-right--panel(650px);
} }
.License-submit--container{ .License-submit--container{
height: 33px; height: 33px;
@@ -59,8 +62,21 @@
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
.License-file--container { .License-file--container {
margin: 20px 0 20px 0;
input[type=file] { input[type=file] {
display: none; 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-fields">
<div class="License-field"> <div class="License-field">
<div class="License-field--label">License</div> <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='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> <span ng-show='invalid'><i class="fa fa-circle License-redText"></i> Invalid</span>
</div> </div>
</div> </div>
<div class="License-field"> <div class="License-field">
<div class="License-field--label">Version</div> <div class="License-field--label">Version</div>
<div class="License-field--content"> <div class="License-field--content">
{{license.version}} {{license.version}}
</div> </div>
</div> </div>
<div class="License-field"> <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"> <div class="License-field--content">
{{license.license_info.license_type}} {{license.license_info.license_type}}
</div> </div>
</div> </div>
<div class="License-field"> <div class="License-field">
<div class="License-field--label">Subscription</div> <div class="License-field--label">Subscription</div>
<div class="License-field--content"> <div class="License-field--content">
{{license.license_info.subscription_name}} {{license.license_info.subscription_name}}
</div> </div>
</div> </div>
<div class="License-field"> <div class="License-field">
<div class="License-field--label">License Key</div> <div class="License-field--label">License Key</div>
<div class="License-field--content"> <div class="License-field--content">
{{license.license_info.license_key}} {{license.license_info.license_key}}
</div> </div>
</div> </div>
<div class="License-field"> <div class="License-field">
<div class="License-field--label">Expires On</div> <div class="License-field--label">Expires On</div>
<div class="License-field--content"> <div class="License-field--content">
{{time.expiresOn}} {{time.expiresOn}}
</div> </div>
</div> </div>
<div class="License-field"> <div class="License-field">
<div class="License-field--label">Time Remaining</div> <div class="License-field--label">Time Remaining</div>
<div class="License-field--content"> <div class="License-field--content">
{{time.remaining}} Day {{time.remaining}} Day
</div> </div>
</div> </div>
<div class="License-field"> <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"> <div class="License-field--content">
{{license.license_info.available_instances}} {{license.license_info.available_instances}}
</div> </div>
</div> </div>
<div class="License-field"> <div class="License-field">
<div class="License-field--label">Hosts Used</div> <div class="License-field--label">Hosts Used</div>
<div class="License-field--content"> <div class="License-field--content">
{{license.license_info.current_instances}} {{license.license_info.current_instances}}
</div> </div>
</div> </div>
<div class="License-field License-greenText"> <div class="License-field License-greenText">
<div class="License-field--label">Hosts Remaining</div> <div class="License-field--label">Hosts Remaining</div>
<div class="License-field--content"> <div class="License-field--content">
{{license.license_info.free_instances}} {{license.license_info.free_instances}}
</div> </div>
</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> <a href="https://www.ansible.com/renew" target="_blank"><button class="btn btn-default">Upgrade</button></a>
</div> </div>
</div> </div>
<div class="License-management"> <div class="License-management">
<div class="Panel"> <div class="Panel">
<div class="License-titleText">License Management</div> <div class="License-titleText">License Management</div>
<p>Choose your license file, agree to the End User License Agreement, and click submit.</p> <div class="License-body">
<form id="License-form" name="license"> <p class="License-helperText">Choose your license file, agree to the End User License Agreement, and click submit.</p>
<div class="input-group License-file--container"> <form id="License-form" name="license">
<span class="btn btn-default input-group-addon" ng-click="fakeClick()">Browse...</span> <div class="License-subTitleText prepend-asterisk"> License File</div>
<input class="form-control" ng-disabled="true" placeholder="{{fileName}}" /> <div class="input-group License-file--container">
<input id="License-file" class="form-control" type="file" file-on-change="getKey"/> <span class="btn btn-default input-group-addon" ng-click="fakeClick()">Browse...</span>
</div> <input class="form-control" ng-disabled="true" placeholder="{{fileName}}" />
<div class="License-titleText prepend-asterisk"> End User License Agreement</div> <input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
<div class="form-group License-eula"> </div>
<textarea class="form-control">{{license.eula}} <div class="License-subTitleText prepend-asterisk"> End User License Agreement</div>
</textarea> <div class="form-group License-eula">
</div> <textarea class="form-control">{{license.eula}}
<div class="form-group"> </textarea>
<div class="checkbox"> </div>
<div class="License-details--label"><input type="checkbox" ng-model="newLicense.eula" required> I agree to the End User License Agreement</div> <div class="form-group">
<div class="License-submit--container pull-right"> <div class="checkbox">
<span ng-hide="success == null || false" class="License-greenText License-submit--success pull-left">Save successful!</span> <div class="License-details--label"><input type="checkbox" ng-model="newLicense.eula" required> I agree to the End User License Agreement</div>
<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-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> </div>
</div> </form>
</form> </div>
</div> </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; flex: 0 0;
height: @height; height: @height;
width: 100%; width: 100%;
margin-right: 20px;
.Panel{ .Panel{
height: 100%; height: 100%;
} }
@media screen and (min-width: @breakpoint){ @media screen and (max-width: @breakpoint){
max-width: 400px; margin-right: 0px;
} height: inherit;
}
} }
.OnePlusTwo-right--panel(@height: 100%; @breakpoint: 900px) { .OnePlusTwo-right--panel(@height: 100%; @breakpoint: 900px) {
height: @height; height: @height;
flex: 1 0; flex: 1 0;
margin-left: 20px;
.Panel{ .Panel{
height: 100%; height: 100%;
} }
@media screen and (max-width: @breakpoint){ @media screen and (max-width: @breakpoint){
flex-direction: column; flex-direction: column;
margin-left: 0px;
margin-top: 25px;
} }
} }
@@ -50,6 +49,7 @@
font-weight: bold; font-weight: bold;
margin-right: 10px; margin-right: 10px;
text-transform: uppercase; text-transform: uppercase;
display: flex;
} }
.OnePlusTwo-left--details { .OnePlusTwo-left--details {
@@ -58,9 +58,6 @@
.OnePlusTwo-left--detailsRow { .OnePlusTwo-left--detailsRow {
display: flex; display: flex;
:not(:last-child){
margin-bottom: 20px;
}
} }
.OnePlusTwo-left--detailsLabel { .OnePlusTwo-left--detailsLabel {
@@ -73,7 +70,6 @@
.OnePlusTwo-left--detailsContent { .OnePlusTwo-left--detailsContent {
display: inline-block; display: inline-block;
max-width: 220px; width: 220px;
word-wrap: break-word; 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 class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate"> <div ng-cloak id="htmlTemplate">
<div class="StandardOut"> <div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen"> <div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel"> <div class="Panel">
<div class="StandardOut-panelHeader"> <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 class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate"> <div ng-cloak id="htmlTemplate">
<div class="StandardOut"> <div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen"> <div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel"> <div class="Panel">
<div class="StandardOut-panelHeader"> <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 class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate"> <div ng-cloak id="htmlTemplate">
<div class="StandardOut"> <div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen"> <div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel"> <div class="Panel">
<div class="StandardOut-panelHeader"> <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 class="tab-pane" id="jobs-stdout">
<div ng-cloak id="htmlTemplate"> <div ng-cloak id="htmlTemplate">
<div class="StandardOut"> <div class="StandardOut-container">
<div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen"> <div class="StandardOut-leftPanel" ng-show="!stdoutFullScreen">
<div class="Panel"> <div class="Panel">
<div class="StandardOut-panelHeader"> <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 "../shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/layouts/one-plus-two.less";
/** @define StandardOut */ /** @define StandardOut */
.StandardOut { .StandardOut-container {
height: 100%; .OnePlusTwo-container;
display: flex;
flex-direction: row;
} }
.StandardOut-leftPanel { .StandardOut-leftPanel {
flex: 0 0 400px; .OnePlusTwo-left--panel(590px);
margin-right: 20px;
} }
.StandardOut-rightPanel { .StandardOut-rightPanel {
flex: 1 0; .OnePlusTwo-right--panel(590px);
} }
.StandardOut-panelHeader { .StandardOut-panelHeader {
color: @default-interface-txt; .OnePlusTwo-panelHeader
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
display: flex;
} }
.StandardOut-consoleOutput { .StandardOut-consoleOutput {
@@ -30,31 +24,28 @@
min-height: 200px; min-height: 200px;
background-color: @default-secondary-bg; background-color: @default-secondary-bg;
border-radius: 5px; border-radius: 5px;
height: 300px; height: ~"calc(100% - 74px)";
overflow: scroll; overflow: scroll;
} }
.StandardOut-details { .StandardOut-details {
margin-top: 25px; .OnePlusTwo-left--details;
} }
.StandardOut-detailsRow { .StandardOut-detailsRow {
display: flex; .OnePlusTwo-left--detailsRow;
} }
.StandardOut-detailsRow:not(:last-child) { .StandardOut-detailsRow + .StandardOut-detailsRow {
margin-bottom: 20px; margin-top: 20px;
} }
.StandardOut-detailsLabel { .StandardOut-detailsLabel {
width: 130px; .OnePlusTwo-left--detailsLabel;
flex: 0 0 130px;
color: @default-interface-txt;
text-transform: uppercase;
} }
.StandardOut-detailsContent { .StandardOut-detailsContent {
flex: 1 0; .OnePlusTwo-left--detailsContent;
} }
.StandardOut-statusText { .StandardOut-statusText {
@@ -66,7 +57,7 @@
} }
.StandardOut-preContainer { .StandardOut-preContainer {
height: 300px; height: 100%;
} }
.StandardOut-panelHeaderText { .StandardOut-panelHeaderText {
@@ -105,14 +96,3 @@
.StandardOut-actionButton + a { .StandardOut-actionButton + a {
margin-left: 15px; 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; $scope.job.status = data.status;
} }
// TODO: when the job completes we should refresh the job data so that we pull in the finish if (data.status === 'failed' || data.status === 'canceled' || data.status === 'error' || data.status === 'successful') {
// timestamp as well as the run time. // Go out and refresh the job details
getJobDetails();
}
}); });
// Go out and get the job details based on the job type. jobType gets defined function getJobDetails() {
// 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 // Go out and get the job details based on the job type. jobType gets defined
if (!Empty(data.source)) { // in the data block of the route declaration for each of the different types
if ($scope.removeChoicesReady) { // of stdout jobs.
$scope.removeChoicesReady(); Rest.setUrl(GetBasePath('base') + jobType + '/' + job_id + '/');
} Rest.get()
$scope.removeChoicesReady = $scope.$on('ChoicesReady', function() { .success(function(data) {
$scope.source_choices.every(function(e) { $scope.job = data;
if (e.value === data.source) { $scope.job_template_name = data.name;
$scope.source = e.label; $scope.created_by = data.summary_fields.created_by;
return false; $scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
} $scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
return true; $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: Utilities.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);
} }
}
}) // LookUpName can be found in the lookup-name.factory
.error(function(data, status) { // It attaches the name that it gets (based on the url)
ProcessErrors($scope, data, status, null, { hdr: 'Error!', // to the $scope variable defined by the attribute scope_var.
msg: 'Failed to retrieve job: ' + job_id + '. GET returned: ' + status }); 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 // TODO: this is currently not used but is necessary for cases where sockets
// are not available and a manual refresh trigger is needed. // 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; $scope.stdoutFullScreen = !$scope.stdoutFullScreen;
} }
getJobDetails();
} }
JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName']; JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName'];