Merge pull request #1123 from mabashian/stdout-responsive

Styling tweaks to standard out and license views/dynamic details reload

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;
+}

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>

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){
+	@media screen and (max-width: @breakpoint){
-        max-width: 400px;
+		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;
 }
-

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">

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">

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">

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">

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 {
+.StandardOut-container {
-    height: 100%;
+    .OnePlusTwo-container;
-    display: flex;
-    flex-direction: row;
 }
 
 .StandardOut-leftPanel {
-    flex: 0 0 400px;
+    .OnePlusTwo-left--panel(590px);
-    margin-right: 20px;
 }
 
 .StandardOut-rightPanel {
-    flex: 1 0;
+    .OnePlusTwo-right--panel(590px);
 }
 
 .StandardOut-panelHeader {
-    color: @default-interface-txt;
+    .OnePlusTwo-panelHeader
-    font-size: 14px;
-    font-weight: bold;
-    text-transform: uppercase;
-    display: flex;
 }
 
 .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) {
+.StandardOut-detailsRow + .StandardOut-detailsRow {
-    margin-bottom: 20px;
+    margin-top: 20px;
 }
 
 .StandardOut-detailsLabel {
-    width: 130px;
+    .OnePlusTwo-left--detailsLabel;
-    flex: 0 0 130px;
-    color: @default-interface-txt;
-    text-transform: uppercase;
 }
 
 .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;
-    }
-}

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
+        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();
+        }
     });
 
+    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'];