diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less index a22cf4a8c2..c23b8d321d 100644 --- a/awx/ui/client/src/job-detail/job-detail.block.less +++ b/awx/ui/client/src/job-detail/job-detail.block.less @@ -2,7 +2,7 @@ @import '../shared/branding/colors.less'; @import '../shared/branding/colors.default.less'; -@import '../shared/layouts/one-plus-one.less'; +@import '../shared/layouts/one-plus-two.less'; @breakpoint-md: 1200px; @breakpoint-sm: 623px; @@ -21,7 +21,7 @@ } } .JobDetail{ - .OnePlusOne-container(100%, @breakpoint-md); + .OnePlusTwo-container(100%, @breakpoint-md); &.fullscreen { .JobDetail-rightSide { @@ -31,11 +31,11 @@ } .JobDetail-leftSide{ - .OnePlusOne-panel--left(100%, @breakpoint-md); + .OnePlusTwo-left--panel(100%, @breakpoint-md); } .JobDetail-rightSide{ - .OnePlusOne-panel--right(100%, @breakpoint-md); + .OnePlusTwo-right--panel(100%, @breakpoint-md); @media (max-width: @breakpoint-md - 1px) { padding-right: 15px; } @@ -88,51 +88,44 @@ } .JobDetail-resultRow{ - width: 50%; + width: 100%; display: flex; - @media screen and(max-width: @breakpoint-sm){ - width: 100%; - } + padding-bottom: 10px; + flex-wrap: wrap; +} + +.JobDetail-resultRow--variables { + flex-direction: column; } .JobDetail-resultRowLabel{ text-transform: uppercase; -} - -.JobDetail-resultRow label{ color: @default-interface-txt; font-size: 14px; font-weight: normal!important; - flex: 1 0 auto; + width: 30%; + margin-right: 20px; @media screen and(max-width: @breakpoint-md){ flex: 2.5 0 auto; } } -.JobDetail-resultRow--variables{ +.JobDetail-resultRowLabel--fullWidth { width: 100%; - display: flex; - flex-direction: column; - padding-left:15px; -} - -.JobDetail-extraVars{ - text-transform: none; -} - -.JobDetail-extraVarsLabel{ - margin-left:-15px; - padding-bottom: 15px; + margin-right: 0px; } .JobDetail-resultRowText{ - width: 40%; + width: ~"calc(70% - 20px)"; flex: 1 0 auto; - padding:0px 29px; text-transform: none; word-wrap: break-word; } +.JobDetail-resultRowText--fullWidth { + width: 100%; +} + .JobDetail-searchHeaderRow{ display: flex; flex-wrap: wrap; diff --git a/awx/ui/client/src/job-results/job-results.partial.html b/awx/ui/client/src/job-results/job-results.partial.html new file mode 100644 index 0000000000..24f4c60dc4 --- /dev/null +++ b/awx/ui/client/src/job-results/job-results.partial.html @@ -0,0 +1,446 @@ +
+
+
+ + +
+
+ + +
+
+ RESULTS +
+
+ + + +
+
+ + +
+ + +
+ +
+ {{ job.started | longDate }} +
+
+ + +
+ +
+ {{ (job.finished | + longDate) || "Not Finished" }} +
+
+ + +
+ +
+ + {{ job.summary_fields.job_template.name }} + +
+
+ + +
+ +
+ {{ type_label }} +
+
+ + +
+ +
+ + {{ job.summary_fields.created_by.username }} + +
+
+ + +
+ +
+ + {{ job.summary_fields.inventory.name }} + +
+
+ + +
+ +
+ + {{ job.summary_fields.project.name }} + +
+
+ + +
+ +
+ {{ job.playbook }} +
+
+ + +
+ +
+ + {{ job.summary_fields.credential.name }} + +
+
+ + +
+ +
+ + {{ job.summary_fields.cloud_credential.name }} + +
+
+ + +
+ +
+ + {{ job.summary_fields.network_credential.name }} + +
+
+ + +
+ +
+ {{ job.forks }} +
+
+ + +
+ +
+ {{ job.limit }} +
+
+ + +
+ +
+ {{ verbosity_label }} +
+
+ + +
+ +
+ {{ job.job_tags }} +
+
+ + +
+ +
+ {{ job.skip_tags }} +
+
+ + +
+ + +
+ + +
+ +
+
+
+
+ {{ label }} +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+
+
+
+
diff --git a/awx/ui/client/src/job-results/job-results.route.js b/awx/ui/client/src/job-results/job-results.route.js index aac4d48f1d..d478146b4a 100644 --- a/awx/ui/client/src/job-results/job-results.route.js +++ b/awx/ui/client/src/job-results/job-results.route.js @@ -32,10 +32,102 @@ export default { $state.go('jobs'); }); return val.promise; + }], + jobLabels: ['Rest', 'GetBasePath', '$stateParams', '$q', function(Rest, GetBasePath, $stateParams, $q) { + var getNext = function(data, arr, resolve) { + Rest.setUrl(data.next); + Rest.get() + .success(function (data) { + if (data.next) { + getNext(data, arr.concat(data.results), resolve); + } else { + resolve.resolve(arr.concat(data.results) + .map(val => val.name)); + } + }); + }; + + var seeMoreResolve = $q.defer(); + + Rest.setUrl(GetBasePath('jobs') + $stateParams.id + '/labels/'); + Rest.get() + .success(function(data) { + if (data.next) { + getNext(data, data.results, seeMoreResolve); + } else { + seeMoreResolve.resolve(data.results + .map(val => val.name)); + } + }); + + return seeMoreResolve.promise; + }], + jobDataOptions: ['Rest', 'GetBasePath', '$stateParams', '$q', function(Rest, GetBasePath, $stateParams, $q) { + Rest.setUrl(GetBasePath('jobs') + $stateParams.id); + var val = $q.defer(); + Rest.options() + .then(function(data) { + val.resolve(data.data); + }, function(data) { + val.reject(data); + }); + return val.promise; }] }, templateUrl: templateUrl('job-results/job-results'), - controller: ['jobData', '$scope', function(jobData, $scope) { + controller: ['jobData', 'jobDataOptions', 'jobLabels', '$scope', 'ParseTypeChange', 'ParseVariableString', function(jobData, jobDataOptions, jobLabels, $scope, ParseTypeChange, ParseVariableString) { + + var getTowerLinks = function() { + var getTowerLink = function(key) { + if ($scope.job.related[key]) { + return '/#/' + $scope.job.related[key] + .split('api/v1/')[1]; + } else { + return null; + } + }; + + $scope.job_template_link = getTowerLink('job_template'); + $scope.created_by_link = getTowerLink('created_by'); + $scope.inventory_link = getTowerLink('inventory'); + $scope.project_link = getTowerLink('project'); + $scope.machine_credential_link = getTowerLink('credential'); + $scope.cloud_credential_link = getTowerLink('cloud_credential'); + $scope.network_credential_link = getTowerLink('network_credential'); + }; + + var getTowerLabels = function() { + var getTowerLabel = function(key) { + if ($scope.jobOptions && $scope.jobOptions[key]) { + return $scope.jobOptions[key].choices + .filter(val => val[0] === $scope.job[key]) + .map(val => val[1])[0]; + } else { + return null; + } + }; + + $scope.status_label = getTowerLabel('status'); + $scope.type_label = getTowerLabel('job_type'); + $scope.verbosity_label = getTowerLabel('verbosity'); + }; + + // put initially resolved request data on scope $scope.job = jobData; + $scope.jobOptions = jobDataOptions.actions.GET; + $scope.labels = jobLabels; + + // turn related api browser routes into tower routes + getTowerLinks(); + + // use options labels to manipulate display of details + getTowerLabels(); + + // set up a read only code mirror for extra vars + $scope.variables = ParseVariableString($scope.job.extra_vars); + $scope.parseType = 'yaml'; + ParseTypeChange({ scope: $scope, + field_id: 'pre-formatted-variables', + readOnly: true }); }] };