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

integration refactor

Browse Source
This commit is contained in:
John Mitchell
2016-09-28 14:30:36 -04:00
committed by jaredevantabor
parent 43e4786c7f
commit 29c8ef72e0
6 changed files with 439 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
awx/ui/client/src/job-results/job-results.block.less
View File

@@ -1,19 +1,110 @@
@import '../shared/branding/colors.less'; @import '../shared/branding/colors.less';
@import '../shared/branding/colors.default.less'; @import '../shared/branding/colors.default.less';
@import '../shared/layouts/one-plus-two.less';
@breakpoint-md: 1200px;
@breakpoint-sm: 623px;
.JobResults {
.OnePlusTwo-container(100%, @breakpoint-md);
&.fullscreen {
.JobResults-rightSide {
max-width: 100%;
}
}
}
.JobResults-leftSide {
.OnePlusTwo-left--panel(100%, @breakpoint-md);
}
.JobResults-rightSide {
.OnePlusTwo-right--panel(100%, @breakpoint-md);
@media (max-width: @breakpoint-md - 1px) {
padding-right: 15px;
}
}
.JobResults-stdoutActionButton--active {
display: none;
visibility: hidden;
flex:none;
width:0px;
padding-right: 0px;
}
.JobResults-panelHeader {
display: flex;
height: 30px;
}
.JobResults-panelHeaderText {
color: @default-interface-txt;
flex: 1 0 auto;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
text-transform: uppercase;
}
.JobResults-resultRow {
width: 100%;
display: flex;
padding-bottom: 10px;
flex-wrap: wrap;
}
.JobResults-resultRow--variables {
flex-direction: column;
}
.JobResults-resultRowLabel {
text-transform: uppercase;
color: @default-interface-txt;
font-size: 14px;
font-weight: normal!important;
width: 30%;
margin-right: 20px;
@media screen and (max-width: @breakpoint-md) {
flex: 2.5 0 auto;
}
}
.JobResults-resultRowLabel--fullWidth {
width: 100%;
margin-right: 0px;
}
.JobResults-resultRowText {
width: ~"calc(70% - 20px)";
flex: 1 0 auto;
text-transform: none;
word-wrap: break-word;
}
.JobResults-resultRowText--fullWidth {
width: 100%;
}
.JobResults-statusResultIcon {
padding-left: 0px;
padding-right: 10px;
}
.JobResults-badgeRow {
display: flex;
align-items: center;
margin-right: 5px;
}
.JobResults-badgeTitle{ .JobResults-badgeTitle{
color: #707070; color: @default-interface-txt;
font-size: 14px; font-size: 14px;
margin-right: 10px; margin-right: 10px;
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
margin-left: 20px; margin-left: 20px;
} }
.JobResults-badgeRow{
display:flex;
align-items: center;
margin-right: 5px;
}

74
awx/ui/client/src/job-results/job-results.controller.js Normal file
View File

@@ -0,0 +1,74 @@
export default ['jobData', 'jobDataOptions', 'jobLabels', '$scope', 'ParseTypeChange', 'ParseVariableString', 'jobResultsService', function(jobData, jobDataOptions, jobLabels, $scope, ParseTypeChange, ParseVariableString, jobResultsService) {
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 });
// Click binding for the expand/collapse button on the standard out log
$scope.stdoutFullScreen = false;
$scope.toggleStdoutFullscreen = function() {
$scope.stdoutFullScreen = !$scope.stdoutFullScreen;
};
$scope.deleteJob = function() {
jobResultsService.deleteJob($scope.job);
};
$scope.cancelJob = function() {
jobResultsService.cancelJob($scope.job);
};
// Set the job status
// TODO: pull from websockets
$scope.job_status = {"status": ""};
$scope.job_status.status = (jobData.status === 'waiting' ||
jobData.status === 'new') ? 'pending' : jobData.status;
}];

266
awx/ui/client/src/job-results/job-results.partial.html
View File

@@ -1,27 +1,28 @@
<div class="tab-pane" id="job-results"> <div class="tab-pane" id="job-results">
<div ng-cloak <div ng-cloak
id="htmlTemplate" id="htmlTemplate"
class="JobDetail" class="JobResults"
ng-class="{'fullscreen': stdoutFullScreen}"> ng-class="{'fullscreen': stdoutFullScreen}">
<div ui-view></div> <div ui-view></div>
<!-- LEFT PANE --> <!-- LEFT PANE -->
<div class="JobDetail-leftSide" <div class="JobResults-leftSide"
ng-class="{'JobDetail-stdoutActionButton--active': stdoutFullScreen}"> ng-class="{'JobResults-stdoutActionButton--active': stdoutFullScreen}">
<div id="job-results-panel" <div class="Panel"
class="JobDetail-resultsContainer Panel"
ng-show="!stdoutFullScreen"> ng-show="!stdoutFullScreen">
<!-- LEFT PANE HEADER --> <!-- LEFT PANE HEADER -->
<div class="JobDetail-panelHeader"> <div class="JobResults-panelHeader">
<div <div
class="JobDetail-panelHeaderText"> class="JobResults-panelHeaderText">
RESULTS RESULTS
</div> </div>
<div class="JobDetail-actions">
<button id="relaunch-job-button" <!-- LEFT PANE HEADER ACTIONS -->
class="List-actionButton <div>
JobDetail-launchButton"
<!-- RELAUNCH ACTION -->
<button class="List-actionButton"
data-placement="top" data-placement="top"
mode="all" mode="all"
ng-click="relaunchJob()" ng-click="relaunchJob()"
@@ -30,10 +31,10 @@
title=""> title="">
<i class="icon-launch"></i> <i class="icon-launch"></i>
</button> </button>
<button id="cancel-job-button"
class="List-actionButton <!-- CANCEL ACTION -->
List-actionButton--delete <button class="List-actionButton
JobDetail-launchButton" List-actionButton--delete"
data-placement="top" data-placement="top"
ng-click="deleteJob()" ng-click="deleteJob()"
ng-show="job_status.status == 'running' || ng-show="job_status.status == 'running' ||
@@ -42,10 +43,10 @@
data-original-title="" title=""> data-original-title="" title="">
<i class="fa fa-minus-circle"></i> <i class="fa fa-minus-circle"></i>
</button> </button>
<button id="delete-job-button"
class="List-actionButton <!-- DELETE ACTION -->
List-actionButton--delete <button class="List-actionButton
JobDetail-launchButton" List-actionButton--delete"
data-placement="top" data-placement="top"
ng-click="deleteJob()" ng-click="deleteJob()"
ng-hide="job_status.status == 'running' || ng-hide="job_status.status == 'running' ||
@@ -59,38 +60,38 @@
</div> </div>
<!-- LEFT PANE DETAILS GROUP --> <!-- LEFT PANE DETAILS GROUP -->
<div class="JobDetail-resultsDetails"> <div>
<!-- START TIME DETAIL --> <!-- START TIME DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.started"> ng-show="job.started">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Started Started
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job.started | longDate }} {{ job.started | longDate }}
</div> </div>
</div> </div>
<!-- FINISHED TIME DETAIL --> <!-- FINISHED TIME DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.started"> ng-show="job.started">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Finished Finished
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ (job.finished | {{ (job.finished |
longDate) || "Not Finished" }} longDate) || "Not Finished" }}
</div> </div>
</div> </div>
<!-- TEMPLATE DETAIL --> <!-- TEMPLATE DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.job_template.name"> ng-show="job.summary_fields.job_template.name">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Template Template
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ job_template_link }}" <a href="{{ job_template_link }}"
aw-tool-tip="Edit the job template" aw-tool-tip="Edit the job template"
data-placement="top"> data-placement="top">
@@ -100,23 +101,23 @@
</div> </div>
<!-- JOB TYPE DETAIL --> <!-- JOB TYPE DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.job_type"> ng-show="job.job_type">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Job Type Job Type
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ type_label }} {{ type_label }}
</div> </div>
</div> </div>
<!-- CREATED BY DETAIL --> <!-- CREATED BY DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.created_by.username"> ng-show="job.summary_fields.created_by.username">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Launched By Launched By
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ created_by_link }}" <a href="{{ created_by_link }}"
aw-tool-tip="Edit the User" aw-tool-tip="Edit the User"
data-placement="top"> data-placement="top">
@@ -126,12 +127,12 @@
</div> </div>
<!-- INVENTORY DETAIL --> <!-- INVENTORY DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.inventory.name"> ng-show="job.summary_fields.inventory.name">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Inventory Inventory
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ inventory_link }}" <a href="{{ inventory_link }}"
aw-tool-tip="Edit the inventory" aw-tool-tip="Edit the inventory"
data-placement="top"> data-placement="top">
@@ -141,12 +142,12 @@
</div> </div>
<!-- PROJECT DETAIL --> <!-- PROJECT DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.project.name"> ng-show="job.summary_fields.project.name">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Project Project
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ project_link }}" <a href="{{ project_link }}"
aw-tool-tip="Edit the project" aw-tool-tip="Edit the project"
data-placement="top"> data-placement="top">
@@ -156,23 +157,23 @@
</div> </div>
<!-- PLAYBOOK DETAIL --> <!-- PLAYBOOK DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.playbook"> ng-show="job.playbook">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Playbook Playbook
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job.playbook }} {{ job.playbook }}
</div> </div>
</div> </div>
<!-- MACHINE CREDENTIAL DETAIL --> <!-- MACHINE CREDENTIAL DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.credential.name"> ng-show="job.summary_fields.credential.name">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Machine Credential Machine Credential
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ machine_credential_link }}" <a href="{{ machine_credential_link }}"
aw-tool-tip="Edit the credential" aw-tool-tip="Edit the credential"
data-placement="top"> data-placement="top">
@@ -182,12 +183,12 @@
</div> </div>
<!-- CLOUD CREDENTIAL DETAIL --> <!-- CLOUD CREDENTIAL DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.cloud_credential.name"> ng-show="job.summary_fields.cloud_credential.name">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Cloud Credential Cloud Credential
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ cloud_credential_link }}" <a href="{{ cloud_credential_link }}"
aw-tool-tip="Edit the credential" aw-tool-tip="Edit the credential"
data-placement="top"> data-placement="top">
@@ -197,12 +198,12 @@
</div> </div>
<!-- NETWORK CREDENTAIL DETAIL --> <!-- NETWORK CREDENTAIL DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.summary_fields.network_credential.name"> ng-show="job.summary_fields.network_credential.name">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Network Credential Network Credential
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ network_credential_link }}" <a href="{{ network_credential_link }}"
aw-tool-tip="Edit the credential" aw-tool-tip="Edit the credential"
data-placement="top"> data-placement="top">
@@ -212,87 +213,87 @@
</div> </div>
<!-- FORKS DETAIL --> <!-- FORKS DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.forks !== undefined"> ng-show="job.forks !== undefined">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Forks Forks
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job.forks }} {{ job.forks }}
</div> </div>
</div> </div>
<!-- LIMIT DETAIL --> <!-- LIMIT DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.limit"> ng-show="job.limit">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Limit Limit
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job.limit }} {{ job.limit }}
</div> </div>
</div> </div>
<!-- VERBOSITY DETAIL --> <!-- VERBOSITY DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.verbosity !== undefined"> ng-show="job.verbosity !== undefined">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Verbosity Verbosity
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ verbosity_label }} {{ verbosity_label }}
</div> </div>
</div> </div>
<!-- TAGS DETAIL --> <!-- TAGS DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.job_tags"> ng-show="job.job_tags">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Job Tags Job Tags
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job.job_tags }} {{ job.job_tags }}
</div> </div>
</div> </div>
<!-- SKIP TAGS DETAIL --> <!-- SKIP TAGS DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="job.skip_tags"> ng-show="job.skip_tags">
<label class="JobDetail-resultRowLabel"> <label class="JobResults-resultRowLabel">
Skip Tags Skip Tags
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job.skip_tags }} {{ job.skip_tags }}
</div> </div>
</div> </div>
<!-- EXTRA VARIABLES DETAIL --> <!-- EXTRA VARIABLES DETAIL -->
<div class="JobDetail-resultRow <div class="JobResults-resultRow
JobDetail-resultRow--variables" JobResults-resultRow--variables"
ng-show="variables"> ng-show="variables">
<label class="JobDetail-resultRowLabel <label class="JobResults-resultRowLabel
JobDetail-resultRowLabel--fullWidth"> JobResults-resultRowLabel--fullWidth">
Extra Variables Extra Variables
</label> </label>
<textarea <textarea
rows="6" rows="6"
ng-model="variables" ng-model="variables"
name="variables" name="variables"
class="JobDetail-extraVars" class="JobResults-extraVars"
id="pre-formatted-variables"> id="pre-formatted-variables">
</textarea> </textarea>
</div> </div>
<!-- LABELS DETAIL --> <!-- LABELS DETAIL -->
<div class="JobDetail-resultRow" <div class="JobResults-resultRow"
ng-show="labels && labels.length > 0"> ng-show="labels && labels.length > 0">
<label class="JobDetail-resultRowLabel <label class="JobResults-resultRowLabel
JobDetail-resultRowLabel--fullWidth"> JobResults-resultRowLabel--fullWidth">
Labels Labels
</label> </label>
<div class="LabelList <div class="LabelList
JobDetail-resultRowText JobResults-resultRowText
JobDetail-resultRowText--fullWidth"> JobResults-resultRowText--fullWidth">
<div ng-repeat="label in labels" <div ng-repeat="label in labels"
class="LabelList-tagContainer"> class="LabelList-tagContainer">
<div class="LabelList-tag"> <div class="LabelList-tag">
@@ -307,19 +308,19 @@
<!-- STATUS DETAIL --> <!-- STATUS DETAIL -->
<!-- <div <!-- <div
class="form-group class="form-group
JobDetail-resultRow JobResults-resultRow
toggle-show"> toggle-show">
<label <label
class="JobDetail-resultRowLabel class="JobResults-resultRowLabel
col-lg-2 col-md-2 col-lg-2 col-md-2
col-sm-2 col-xs-3 col-sm-2 col-xs-3
control-label"> control-label">
Status Status
</label> </label>
<div class="JobDetail-resultRowText <div class="JobResults-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9"> col-lg-10 col-md-10 col-sm-10 col-xs-9">
<i <i
class="JobDetail-statusIcon--results class="JobResults-statusIcon--results
fa fa
icon-job-{{ job.status }}"> icon-job-{{ job.status }}">
</i> {{ status_label }} </i> {{ status_label }}
@@ -329,16 +330,16 @@
<!-- SCHEDULED BY DETAIL --> <!-- SCHEDULED BY DETAIL -->
<!-- <div <!-- <div
class="form-group class="form-group
JobDetail-resultRow toggle-show" JobResults-resultRow toggle-show"
ng-show="job.summary_fields.schedule_by.username"> ng-show="job.summary_fields.schedule_by.username">
<label <label
class="JobDetail-resultRowLabel class="JobResults-resultRowLabel
col-lg-2 col-md-2 col-lg-2 col-md-2
col-sm-2 col-xs-3 col-sm-2 col-xs-3
control-label"> control-label">
Launched By Launched By
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ scheduled_by_link }}" <a href="{{ scheduled_by_link }}"
aw-tool-tip="Edit the Schedule" aw-tool-tip="Edit the Schedule"
data-placement="top"> data-placement="top">
@@ -350,16 +351,16 @@
<!-- ELAPSED TIME DETAIL --> <!-- ELAPSED TIME DETAIL -->
<!-- <div <!-- <div
class="form-group class="form-group
JobDetail-resultRow toggle-show" JobResults-resultRow toggle-show"
ng-show="job_status.started"> ng-show="job_status.started">
<label <label
class="JobDetail-resultRowLabel class="JobResults-resultRowLabel
col-lg-2 col-md-2 col-lg-2 col-md-2
col-sm-2 col-xs-3 col-sm-2 col-xs-3
control-label"> control-label">
Elapsed Elapsed
</label> </label>
<div class="JobDetail-resultRowText"> <div class="JobResults-resultRowText">
{{ job_status.elapsed }} {{ job_status.elapsed }}
</div> </div>
</div> --> </div> -->
@@ -367,11 +368,11 @@
<!-- EXPLANATION DETAIL --> <!-- EXPLANATION DETAIL -->
<!-- <div <!-- <div
class="form-group class="form-group
JobDetail-resultRow JobResults-resultRow
toggle-show" toggle-show"
ng-show="job_status.explanation"> ng-show="job_status.explanation">
<label <label
class="JobDetail-resultRowLabel class="JobResults-resultRowLabel
col-lg-2 col-md-2 col-lg-2 col-md-2
col-sm-2 col-xs-3 col-sm-2 col-xs-3
control-label"> control-label">
@@ -379,20 +380,20 @@
</label> --> </label> -->
<!-- PREVIOUS TASK SUCCEEDED --> <!-- PREVIOUS TASK SUCCEEDED -->
<!-- <div class="JobDetail-resultRowText <!-- <div class="JobResults-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9 col-lg-10 col-md-10 col-sm-10 col-xs-9
job_status_explanation" job_status_explanation"
ng-show="!previousTaskFailed" ng-show="!previousTaskFailed"
ng-bind-html="job_status.explanation"> ng-bind-html="job_status.explanation">
<i <i
class="JobDetail-statusIcon--results class="JobResults-statusIcon--results
fa fa
icon-job-{{ job_status.status }}"> icon-job-{{ job_status.status }}">
</i> {{ job_status.status_label }} </i> {{ job_status.status_label }}
</div> --> </div> -->
<!-- PREVIOUS TASK FAILED --> <!-- PREVIOUS TASK FAILED -->
<!-- <div class="JobDetail-resultRowText <!-- <div class="JobResults-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9 col-lg-10 col-md-10 col-sm-10 col-xs-9
job_status_explanation" job_status_explanation"
ng-show="previousTaskFailed"> ng-show="previousTaskFailed">
@@ -418,15 +419,15 @@
<!-- RESULTS TRACEBACK DETAIL --> <!-- RESULTS TRACEBACK DETAIL -->
<!-- <div <!-- <div
class="form-group class="form-group
JobDetail-resultRow JobResults-resultRow
toggle-show" ng-show="job.result_traceback"> toggle-show" ng-show="job.result_traceback">
<label <label
class="JobDetail-resultRowLabel class="JobResults-resultRowLabel
col-lg-2 col-md-12 col-lg-2 col-md-12
col-sm-12 col-xs-12"> col-sm-12 col-xs-12">
Results Traceback Results Traceback
</label> </label>
<div class="JobDetail-resultRowText <div class="JobResults-resultRowText
col-lg-10 col-md-12 col-sm-12 col-xs-12 col-lg-10 col-md-12 col-sm-12 col-xs-12
job_status_traceback" job_status_traceback"
ng-bind-html="job.result_traceback"> ng-bind-html="job.result_traceback">
@@ -439,33 +440,80 @@
</div> </div>
<!-- RIGHT PANE --> <!-- RIGHT PANE -->
<div class="JobDetail-rightSide"> <div class="JobResults-rightSide">
<div class="JobDetail-stdoutPanel Panel"> <div class="Panel">
<!-- RIGHT PANE HEADER -->
<div class="StandardOut-panelHeader"> <div class="StandardOut-panelHeader">
<div class="StandardOut-panelHeaderText"> <div class="StandardOut-panelHeaderText">
<i class="JobDetail-statusIcon--results fa icon-job-{{ job_status.status }}"></i> <i class="JobResults-statusResultIcon
{{job.name}} fa icon-job-{{ job_status.status }}">
</i>
{{ job.name }}
</div> </div>
<!-- HEADER COUNTS -->
<div class="JobResults-badgeRow"> <div class="JobResults-badgeRow">
<div class="JobResults-badgeTitle">Plays</div><span class="badge List-titleBadge ng-binding">{{jobData.playCount || 0}}</span> <!-- PLAYS COUNT -->
<div class="JobResults-badgeTitle">Tasks</div><span class="badge List-titleBadge ng-binding">{{jobData.taskCount || 0}}</span> <div class="JobResults-badgeTitle">
<div class="JobResults-badgeTitle">Hosts</div><span class="badge List-titleBadge ng-binding">{{jobData.hostCount || 0}}</span> Plays
<div class="JobResults-badgeTitle">Elapsed</div><span class="badge List-titleBadge ng-binding">{{ job_status.elapsed || "00:00:01"}}</span> </div>
<span class="badge List-titleBadge">
{{jobData.playCount || 0}}
</span>
<!-- TASKS COUNT -->
<div class="JobResults-badgeTitle">
Tasks
</div>
<span class="badge List-titleBadge">
{{jobData.taskCount || 0}}
</span>
<!-- HOSTS COUNT -->
<div class="JobResults-badgeTitle">
Hosts
</div>
<span class="badge List-titleBadge">
{{jobData.hostCount || 0}}
</span>
<!-- ELAPSED TIME -->
<div class="JobResults-badgeTitle">
Elapsed
</div>
<span class="badge List-titleBadge">
{{ job_status.elapsed || "00:00:01"}}
</span>
</div> </div>
<!-- HEADER ACTIONS -->
<div class="StandardOut-panelHeaderActions"> <div class="StandardOut-panelHeaderActions">
<button class="StandardOut-actionButton" aw-tool-tip="Toggle Output" data-placement="top" ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}" ng-click="toggleStdoutFullscreen()">
<!-- FULL-SCREEN TOGGLE ACTION -->
<button class="StandardOut-actionButton"
aw-tool-tip="Toggle Output"
data-placement="top"
ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
ng-click="toggleStdoutFullscreen()">
<i class="fa fa-arrows-alt"></i> <i class="fa fa-arrows-alt"></i>
</button> </button>
<a ng-show="job_status.status === 'failed' || job_status.status === 'successful' || job_status.status === 'canceled'" href="/api/v1/jobs/{{ job.id }}/stdout?format=txt_download&token={{ token }}">
<button class="StandardOut-actionButton" aw-tool-tip="Download Output" data-placement="top"> <!-- DOWNLOAD ACTION -->
<a ng-show="job_status.status === 'failed' ||
job_status.status === 'successful' ||
job_status.status === 'canceled'"
href="/api/v1/jobs/{{ job.id }}/stdout?format=txt_download&token={{ token }}">
<button class="StandardOut-actionButton"
aw-tool-tip="Download Output"
data-placement="top">
<i class="fa fa-download"></i> <i class="fa fa-download"></i>
</button> </button>
</a> </a>
</div> </div>
</div> </div>
<!-- <standard-out-log stdout-endpoint="job.related.stdout"></standard-out-log> -->
</div> </div>
</div> </div>
<!--END OF RIGHT PANE-->
</div> </div>
</div> </div>

67
awx/ui/client/src/job-results/job-results.route.js
View File

@@ -6,6 +6,8 @@
import {templateUrl} from '../shared/template-url/template-url.factory'; import {templateUrl} from '../shared/template-url/template-url.factory';
import jobResultsController from './job-results.controller';
export default { export default {
name: 'jobDetail', name: 'jobDetail',
url: '/jobs/:id', url: '/jobs/:id',
@@ -75,68 +77,5 @@ export default {
}] }]
}, },
templateUrl: templateUrl('job-results/job-results'), templateUrl: templateUrl('job-results/job-results'),
controller: ['jobData', 'jobDataOptions', 'jobLabels', '$scope', 'ParseTypeChange', 'ParseVariableString', function(jobData, jobDataOptions, jobLabels, $scope, ParseTypeChange, ParseVariableString) { controller: jobResultsController
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;
$scope.stdoutFullScreen = false;
$scope.job_status = {"status": ""};
$scope.job_status.status = (jobData.status === 'waiting' || jobData.status === 'new') ? 'pending' : jobData.status;
// 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 });
// Click binding for the expand/collapse button on the standard out log
$scope.toggleStdoutFullscreen = function() {
$scope.stdoutFullScreen = !$scope.stdoutFullScreen;
};
}]
}; };

103
awx/ui/client/src/job-results/job-results.service.js Normal file
View File

@@ -0,0 +1,103 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
export default ['Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErrors', function (Prompt, $filter, Wait, Rest, $state, ProcessErrors) {
return {
deleteJob: function(job) {
Prompt({
hdr: 'Delete Job',
body: `<div class='Prompt-bodyQuery'>
Are you sure you want to delete the job below?
</div>
<div class='Prompt-bodyTarget'>
#${job.id} ${$filter('sanitize')(job.name)}
</div>`,
action: function() {
Wait('start');
Rest.setUrl(job.url);
Rest.destroy()
.success(function() {
Wait('stop');
$('#prompt-modal').modal('hide');
$state.go('jobs');
})
.error(function(obj, status) {
Wait('stop');
$('#prompt-modal').modal('hide');
ProcessErrors(null, obj, status, null, {
hdr: 'Error!',
msg: `Could not delete job.
Returned status: ${status}`
});
});
},
actionText: 'DELETE'
});
},
cancelJob: function(job) {
var doCancel = function() {
Rest.setUrl(job.url + 'cancel');
Rest.post({})
.success(function() {
Wait('stop');
$('#prompt-modal').modal('hide');
})
.error(function(obj, status) {
Wait('stop');
$('#prompt-modal').modal('hide');
ProcessErrors(null, obj, status, null, {
hdr: 'Error!',
msg: `Could not cancel job.
Returned status: ${status}`
});
});
};
Prompt({
hdr: 'Cancel Job',
body: `<div class='Prompt-bodyQuery'>
Are you sure you want to cancel the job below?
</div>
<div class='Prompt-bodyTarget'>
#${job.id} ${$filter('sanitize')(job.name)}
</div>`,
action: function() {
Wait('start');
Rest.setUrl(job.url + 'cancel');
Rest.get()
.success(function(data) {
if (data.can_cancel === true) {
doCancel();
} else {
$('#prompt-modal').modal('hide');
ProcessErrors(null, data, null, null, {
hdr: 'Error!',
msg: `Job has completed,
unabled to be canceled.`
});
}
});
Rest.destroy()
.success(function() {
Wait('stop');
$('#prompt-modal').modal('hide');
})
.error(function(obj, status) {
Wait('stop');
$('#prompt-modal').modal('hide');
ProcessErrors(null, obj, status, null, {
hdr: 'Error!',
msg: `Could not cancel job.
Returned status: ${status}`
});
});
},
actionText: 'CANCEL'
});
}
};
}];

4
awx/ui/client/src/job-results/main.js
View File

@@ -5,9 +5,11 @@
*************************************************/ *************************************************/
import route from './job-results.route.js'; import route from './job-results.route.js';
import jobResultsService from './job-results.service';
export default export default
angular.module('jobResults', []) angular.module('jobResults', [])
.run(['$stateExtender', function($stateExtender) { .run(['$stateExtender', function($stateExtender) {
$stateExtender.addState(route); $stateExtender.addState(route);
}]); }])
.service('jobResultsService', jobResultsService);