updated left hand pane of job results to mostly match mockup

This commit is contained in:
John Mitchell 2016-09-21 15:21:54 -04:00 committed by jaredevantabor
parent 8435290cc4
commit c7dfcbba5f
3 changed files with 559 additions and 28 deletions

View File

@ -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;

View File

@ -0,0 +1,446 @@
<div class="tab-pane" id="job-results">
<div ng-cloak
id="htmlTemplate"
class="JobDetail"
ng-class="{'fullscreen': stdoutFullScreen}">
<div ui-view></div>
<!-- LEFT PANE -->
<div class="JobDetail-leftSide"
ng-class="{'JobDetail-stdoutActionButton--active': stdoutFullScreen}">
<div id="job-results-panel"
class="JobDetail-resultsContainer Panel"
ng-show="!stdoutFullScreen">
<!-- LEFT PANE HEADER -->
<div class="JobDetail-panelHeader">
<div
class="JobDetail-panelHeaderText">
RESULTS
</div>
<div class="JobDetail-actions">
<button id="relaunch-job-button"
class="List-actionButton
JobDetail-launchButton"
data-placement="top"
mode="all"
ng-click="relaunchJob()"
aw-tool-tip="Relaunch using the same parameters"
data-original-title=""
title="">
<i class="icon-launch"></i>
</button>
<button id="cancel-job-button"
class="List-actionButton
List-actionButton--delete
JobDetail-launchButton"
data-placement="top"
ng-click="deleteJob()"
ng-show="job_status.status == 'running' ||
job_status.status=='pending' "
aw-tool-tip="Cancel"
data-original-title="" title="">
<i class="fa fa-minus-circle"></i>
</button>
<button id="delete-job-button"
class="List-actionButton
List-actionButton--delete
JobDetail-launchButton"
data-placement="top"
ng-click="deleteJob()"
ng-hide="job_status.status == 'running' ||
job_status.status == 'pending' "
aw-tool-tip="Delete"
data-original-title=""
title="">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
<!-- LEFT PANE DETAILS GROUP -->
<div class="JobDetail-resultsDetails">
<!-- START TIME DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.started">
<label class="JobDetail-resultRowLabel">
Started
</label>
<div class="JobDetail-resultRowText">
{{ job.started | longDate }}
</div>
</div>
<!-- FINISHED TIME DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.started">
<label class="JobDetail-resultRowLabel">
Finished
</label>
<div class="JobDetail-resultRowText">
{{ (job.finished |
longDate) || "Not Finished" }}
</div>
</div>
<!-- TEMPLATE DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.job_template.name">
<label class="JobDetail-resultRowLabel">
Template
</label>
<div class="JobDetail-resultRowText">
<a href="{{ job_template_link }}"
aw-tool-tip="Edit the job template"
data-placement="top">
{{ job.summary_fields.job_template.name }}
</a>
</div>
</div>
<!-- JOB TYPE DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.job_type">
<label class="JobDetail-resultRowLabel">
Job Type
</label>
<div class="JobDetail-resultRowText">
{{ type_label }}
</div>
</div>
<!-- CREATED BY DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.created_by.username">
<label class="JobDetail-resultRowLabel">
Launched By
</label>
<div class="JobDetail-resultRowText">
<a href="{{ created_by_link }}"
aw-tool-tip="Edit the User"
data-placement="top">
{{ job.summary_fields.created_by.username }}
</a>
</div>
</div>
<!-- INVENTORY DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.inventory.name">
<label class="JobDetail-resultRowLabel">
Inventory
</label>
<div class="JobDetail-resultRowText">
<a href="{{ inventory_link }}"
aw-tool-tip="Edit the inventory"
data-placement="top">
{{ job.summary_fields.inventory.name }}
</a>
</div>
</div>
<!-- PROJECT DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.project.name">
<label class="JobDetail-resultRowLabel">
Project
</label>
<div class="JobDetail-resultRowText">
<a href="{{ project_link }}"
aw-tool-tip="Edit the project"
data-placement="top">
{{ job.summary_fields.project.name }}
</a>
</div>
</div>
<!-- PLAYBOOK DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.playbook">
<label class="JobDetail-resultRowLabel">
Playbook
</label>
<div class="JobDetail-resultRowText">
{{ job.playbook }}
</div>
</div>
<!-- MACHINE CREDENTIAL DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.credential.name">
<label class="JobDetail-resultRowLabel">
Machine Credential
</label>
<div class="JobDetail-resultRowText">
<a href="{{ machine_credential_link }}"
aw-tool-tip="Edit the credential"
data-placement="top">
{{ job.summary_fields.credential.name }}
</a>
</div>
</div>
<!-- CLOUD CREDENTIAL DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.cloud_credential.name">
<label class="JobDetail-resultRowLabel">
Cloud Credential
</label>
<div class="JobDetail-resultRowText">
<a href="{{ cloud_credential_link }}"
aw-tool-tip="Edit the credential"
data-placement="top">
{{ job.summary_fields.cloud_credential.name }}
</a>
</div>
</div>
<!-- NETWORK CREDENTAIL DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.summary_fields.network_credential.name">
<label class="JobDetail-resultRowLabel">
Network Credential
</label>
<div class="JobDetail-resultRowText">
<a href="{{ network_credential_link }}"
aw-tool-tip="Edit the credential"
data-placement="top">
{{ job.summary_fields.network_credential.name }}
</a>
</div>
</div>
<!-- FORKS DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.forks !== undefined">
<label class="JobDetail-resultRowLabel">
Forks
</label>
<div class="JobDetail-resultRowText">
{{ job.forks }}
</div>
</div>
<!-- LIMIT DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.limit">
<label class="JobDetail-resultRowLabel">
Limit
</label>
<div class="JobDetail-resultRowText">
{{ job.limit }}
</div>
</div>
<!-- VERBOSITY DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.verbosity !== undefined">
<label class="JobDetail-resultRowLabel">
Verbosity
</label>
<div class="JobDetail-resultRowText">
{{ verbosity_label }}
</div>
</div>
<!-- TAGS DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.job_tags">
<label class="JobDetail-resultRowLabel">
Job Tags
</label>
<div class="JobDetail-resultRowText">
{{ job.job_tags }}
</div>
</div>
<!-- SKIP TAGS DETAIL -->
<div class="JobDetail-resultRow"
ng-show="job.skip_tags">
<label class="JobDetail-resultRowLabel">
Skip Tags
</label>
<div class="JobDetail-resultRowText">
{{ job.skip_tags }}
</div>
</div>
<!-- EXTRA VARIABLES DETAIL -->
<div class="JobDetail-resultRow
JobDetail-resultRow--variables"
ng-show="variables">
<label class="JobDetail-resultRowLabel
JobDetail-resultRowLabel--fullWidth">
Extra Variables
</label>
<textarea
rows="6"
ng-model="variables"
name="variables"
class="JobDetail-extraVars"
id="pre-formatted-variables">
</textarea>
</div>
<!-- LABELS DETAIL -->
<div class="JobDetail-resultRow"
ng-show="labels && labels.length > 0">
<label class="JobDetail-resultRowLabel
JobDetail-resultRowLabel--fullWidth">
Labels
</label>
<div class="LabelList
JobDetail-resultRowText
JobDetail-resultRowText--fullWidth">
<div ng-repeat="label in labels"
class="LabelList-tagContainer">
<div class="LabelList-tag">
<div class="LabelList-name">
{{ label }}
</div>
</div>
</div>
</div>
</div>
<!-- STATUS DETAIL -->
<!-- <div
class="form-group
JobDetail-resultRow
toggle-show">
<label
class="JobDetail-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Status
</label>
<div class="JobDetail-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9">
<i
class="JobDetail-statusIcon--results
fa
icon-job-{{ job.status }}">
</i> {{ status_label }}
</div>
</div> -->
<!-- SCHEDULED BY DETAIL -->
<!-- <div
class="form-group
JobDetail-resultRow toggle-show"
ng-show="job.summary_fields.schedule_by.username">
<label
class="JobDetail-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Launched By
</label>
<div class="JobDetail-resultRowText">
<a href="{{ scheduled_by_link }}"
aw-tool-tip="Edit the Schedule"
data-placement="top">
{{ job.summary_fields.scheduled_by.username }}
</a>
</div>
</div> -->
<!-- ELAPSED TIME DETAIL -->
<!-- <div
class="form-group
JobDetail-resultRow toggle-show"
ng-show="job_status.started">
<label
class="JobDetail-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Elapsed
</label>
<div class="JobDetail-resultRowText">
{{ job_status.elapsed }}
</div>
</div> -->
<!-- EXPLANATION DETAIL -->
<!-- <div
class="form-group
JobDetail-resultRow
toggle-show"
ng-show="job_status.explanation">
<label
class="JobDetail-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Explanation
</label> -->
<!-- PREVIOUS TASK SUCCEEDED -->
<!-- <div class="JobDetail-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9
job_status_explanation"
ng-show="!previousTaskFailed"
ng-bind-html="job_status.explanation">
<i
class="JobDetail-statusIcon--results
fa
icon-job-{{ job_status.status }}">
</i> {{ job_status.status_label }}
</div> -->
<!-- PREVIOUS TASK FAILED -->
<!-- <div class="JobDetail-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9
job_status_explanation"
ng-show="previousTaskFailed">
Previous Task Failed
<a
href=""
id="explanation_help"
aw-pop-over="{{ task_detail }}"
aw-pop-over-watch="task_detail"
data-placement="bottom"
data-container="body"
class="help-link"
over-title="Failure Detail"
title=""
tabindex="-1">
<i class="fa fa-question-circle">
</i>
</a>
</div> -->
<!-- </div> -->
<!-- RESULTS TRACEBACK DETAIL -->
<!-- <div
class="form-group
JobDetail-resultRow
toggle-show" ng-show="job.result_traceback">
<label
class="JobDetail-resultRowLabel
col-lg-2 col-md-12
col-sm-12 col-xs-12">
Results Traceback
</label>
<div class="JobDetail-resultRowText
col-lg-10 col-md-12 col-sm-12 col-xs-12
job_status_traceback"
ng-bind-html="job.result_traceback">
</div>
</div> -->
</div>
</div>
</div>
<div class="JobDetail-rightSide">
<div class="JobDetail-stdoutPanel Panel">
</div>
</div>
</div>
</div>

View File

@ -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 });
}]
};