Merge pull request #1123 from mabashian/stdout-responsive

Styling tweaks to standard out and license views/dynamic details reload
2026-05-22 08:17:39 -02:30 · 2016-03-07 14:58:40 -05:00
parent 51cb262a84 ccaae088d6
commit 6cba39733b
9 changed files with 206 additions and 203 deletions
--- a/awx/ui/client/src/license/license.block.less
+++ b/awx/ui/client/src/license/license.block.less
@@ -33,6 +33,9 @@
 .License-field{
 	.OnePlusTwo-left--detailsRow;
 }
+.License-field + .License-field {
+    margin-top: 20px;
+}
 .License-greenText{
 	color: @submit-button-bg;
 }
@@ -43,13 +46,13 @@
 	.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;
+}
--- a/awx/ui/client/src/license/license.partial.html
+++ b/awx/ui/client/src/license/license.partial.html
@@ -65,21 +65,23 @@
 					</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>
+			<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-titleText prepend-asterisk"> End User License Agreement</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>
@@ -97,3 +99,4 @@
 			</div>
 		</div>
 	</div>
+</div>
--- a/awx/ui/client/src/shared/layouts/one-plus-two.less
+++ b/awx/ui/client/src/shared/layouts/one-plus-two.less
@@ -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;
 }
-
--- a/awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html
+++ b/awx/ui/client/src/standard-out/adhoc/standard-out-adhoc.partial.html
@@ -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">
--- a/awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html
+++ b/awx/ui/client/src/standard-out/inventory-sync/standard-out-inventory-sync.partial.html
@@ -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">
--- a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
+++ b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
@@ -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">
--- a/awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html
+++ b/awx/ui/client/src/standard-out/scm-update/standard-out-scm-update.partial.html
@@ -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">
--- a/awx/ui/client/src/standard-out/standard-out.block.less
+++ b/awx/ui/client/src/standard-out/standard-out.block.less
@@ -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;
-    }
-}
--- a/awx/ui/client/src/standard-out/standard-out.controller.js
+++ b/awx/ui/client/src/standard-out/standard-out.controller.js
@@ -32,10 +32,14 @@ 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();
+        }
    });

+    function 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.
@@ -75,7 +79,7 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
                            return true;
                        });
                    });
-                // GetChoices can be found in the helper: StandardOut.js
+                    // 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.
@@ -89,7 +93,7 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
                    });
                }

-            // LookUpName can be found in the helper: StandardOut.js
+                // LookUpName can be found in the lookup-name.factory
                // 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)) {
@@ -145,6 +149,8 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
                    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.
    $scope.refresh = function(){
@@ -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'];