adding files for workflow-results

This commit is contained in:
jaredevantabor 2016-11-08 08:40:14 -05:00
parent 161c320f05
commit abdd9f8372
6 changed files with 692 additions and 0 deletions

View File

@ -84,6 +84,9 @@ export function JobsListController($state, $rootScope, $log, $scope, $compile, $
case 'inventory_update':
goToJobDetails('inventorySyncStdout');
break;
case 'workflow_job':
goToJobDetails('workflowResults');
break;
}
};

View File

@ -0,0 +1,14 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import route from './job-results.route.js';
export default
angular.module('workflowResults', [])
.run(['$stateExtender', function($stateExtender) {
$stateExtender.addState(route);
}]);

View File

@ -0,0 +1,522 @@
<div class="tab-pane" id="job-results">
<div ng-cloak
id="htmlTemplate"
class="JobResults"
ng-class="{'fullscreen': stdoutFullScreen}">
<div ui-view></div>
<!-- LEFT PANE -->
<div class="JobResults-leftSide"
ng-class="{'JobResults-stdoutActionButton--active': stdoutFullScreen}">
<div class="Panel"
ng-show="!stdoutFullScreen">
<!-- LEFT PANE HEADER -->
<div class="JobResults-panelHeader">
<div
class="JobResults-panelHeaderText">
RESULTS
</div>
<!-- LEFT PANE HEADER ACTIONS -->
<div>
<!-- RELAUNCH ACTION -->
<button class="List-actionButton"
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>
<!-- CANCEL ACTION -->
<button class="List-actionButton
List-actionButton--delete"
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>
<!-- DELETE ACTION -->
<button class="List-actionButton
List-actionButton--delete"
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>
<!-- START TIME DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.started">
<label class="JobResults-resultRowLabel">
Started
</label>
<div class="JobResults-resultRowText">
{{ job.started | longDate }}
</div>
</div>
<!-- FINISHED TIME DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.started">
<label class="JobResults-resultRowLabel">
Finished
</label>
<div class="JobResults-resultRowText">
{{ (job.finished |
longDate) || "Not Finished" }}
</div>
</div>
<!-- TEMPLATE DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.summary_fields.job_template.name">
<label class="JobResults-resultRowLabel">
Template
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.job_type">
<label class="JobResults-resultRowLabel">
Job Type
</label>
<div class="JobResults-resultRowText">
{{ type_label }}
</div>
</div>
<!-- CREATED BY DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.summary_fields.created_by.username">
<label class="JobResults-resultRowLabel">
Launched By
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.summary_fields.inventory.name">
<label class="JobResults-resultRowLabel">
Inventory
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.summary_fields.project.name">
<label class="JobResults-resultRowLabel">
Project
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.playbook">
<label class="JobResults-resultRowLabel">
Playbook
</label>
<div class="JobResults-resultRowText">
{{ job.playbook }}
</div>
</div>
<!-- MACHINE CREDENTIAL DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.summary_fields.credential.name">
<label class="JobResults-resultRowLabel">
Machine Credential
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.summary_fields.cloud_credential.name">
<label class="JobResults-resultRowLabel">
Cloud Credential
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.summary_fields.network_credential.name">
<label class="JobResults-resultRowLabel">
Network Credential
</label>
<div class="JobResults-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="JobResults-resultRow"
ng-show="job.forks !== undefined">
<label class="JobResults-resultRowLabel">
Forks
</label>
<div class="JobResults-resultRowText">
{{ job.forks }}
</div>
</div>
<!-- LIMIT DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.limit">
<label class="JobResults-resultRowLabel">
Limit
</label>
<div class="JobResults-resultRowText">
{{ job.limit }}
</div>
</div>
<!-- VERBOSITY DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.verbosity !== undefined">
<label class="JobResults-resultRowLabel">
Verbosity
</label>
<div class="JobResults-resultRowText">
{{ verbosity_label }}
</div>
</div>
<!-- TAGS DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.job_tags">
<label class="JobResults-resultRowLabel">
Job Tags
</label>
<div class="JobResults-resultRowText">
{{ job.job_tags }}
</div>
</div>
<!-- SKIP TAGS DETAIL -->
<div class="JobResults-resultRow"
ng-show="job.skip_tags">
<label class="JobResults-resultRowLabel">
Skip Tags
</label>
<div class="JobResults-resultRowText">
{{ job.skip_tags }}
</div>
</div>
<!-- EXTRA VARIABLES DETAIL -->
<div class="JobResults-resultRow
JobResults-resultRow--variables"
ng-show="variables">
<label class="JobResults-resultRowLabel
JobResults-resultRowLabel--fullWidth">
Extra Variables
</label>
<textarea
rows="6"
ng-model="variables"
name="variables"
class="JobResults-extraVars"
id="pre-formatted-variables">
</textarea>
</div>
<!-- LABELS DETAIL -->
<div class="JobResults-resultRow"
ng-show="labels && labels.length > 0">
<label class="JobResults-resultRowLabel
JobResults-resultRowLabel--fullWidth">
Labels
</label>
<div class="LabelList
JobResults-resultRowText
JobResults-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
JobResults-resultRow
toggle-show">
<label
class="JobResults-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Status
</label>
<div class="JobResults-resultRowText
col-lg-10 col-md-10 col-sm-10 col-xs-9">
<i
class="JobResults-statusIcon--results
fa
icon-job-{{ job.status }}">
</i> {{ status_label }}
</div>
</div> -->
<!-- SCHEDULED BY DETAIL -->
<!-- <div
class="form-group
JobResults-resultRow toggle-show"
ng-show="job.summary_fields.schedule_by.username">
<label
class="JobResults-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Launched By
</label>
<div class="JobResults-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
JobResults-resultRow toggle-show"
ng-show="job_status.started">
<label
class="JobResults-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Elapsed
</label>
<div class="JobResults-resultRowText">
{{ job_status.elapsed }}
</div>
</div> -->
<!-- EXPLANATION DETAIL -->
<!-- <div
class="form-group
JobResults-resultRow
toggle-show"
ng-show="job_status.explanation">
<label
class="JobResults-resultRowLabel
col-lg-2 col-md-2
col-sm-2 col-xs-3
control-label">
Explanation
</label> -->
<!-- PREVIOUS TASK SUCCEEDED -->
<!-- <div class="JobResults-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="JobResults-statusIcon--results
fa
icon-job-{{ job_status.status }}">
</i> {{ job_status.status_label }}
</div> -->
<!-- PREVIOUS TASK FAILED -->
<!-- <div class="JobResults-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
JobResults-resultRow
toggle-show" ng-show="job.result_traceback">
<label
class="JobResults-resultRowLabel
col-lg-2 col-md-12
col-sm-12 col-xs-12">
Results Traceback
</label>
<div class="JobResults-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>
<!-- RIGHT PANE -->
<div class="JobResults-rightSide">
<div class="Panel">
<!-- RIGHT PANE HEADER -->
<div class="StandardOut-panelHeader">
<div class="StandardOut-panelHeaderText">
<i class="JobResults-statusResultIcon
fa icon-job-{{ job.status }}">
</i>
{{ job.name }}
</div>
<!-- HEADER COUNTS -->
<div class="JobResults-badgeRow">
<!-- PLAYS COUNT -->
<div class="JobResults-badgeTitle">
Plays
</div>
<span class="badge List-titleBadge">
{{ playCount || 0}}
</span>
<!-- TASKS COUNT -->
<div class="JobResults-badgeTitle">
Tasks
</div>
<span class="badge List-titleBadge">
{{ taskCount || 0}}
</span>
<!-- HOSTS COUNT -->
<div class="JobResults-badgeTitle">
Hosts
</div>
<span class="badge List-titleBadge">
{{ hostCount || 0}}
</span>
<!-- ELAPSED TIME -->
<div class="JobResults-badgeTitle">
Elapsed
</div>
<span class="badge List-titleBadge">
{{ job.elapsed * 1000 | duration: "hh:mm:ss" }}
</span>
</div>
<!-- HEADER ACTIONS -->
<div class="StandardOut-panelHeaderActions">
<!-- 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>
</button>
<!-- 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>
</button>
</a>
</div>
</div>
<host-status-bar></host-status-bar>
<!-- <job-results-standard-out></job-results-standard-out> -->
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,153 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import {templateUrl} from '../shared/template-url/template-url.factory';
import workflowResultsController from './workflow-results.controller';
export default {
name: 'workflowResults',
url: '/jobs/:id',
ncyBreadcrumb: {
parent: 'jobs',
label: '{{ job.id }} - {{ job.name }}'
},
data: {
socket: {
"groups":{
"jobs": ["status_changed", "summary"],
"job_events": []
}
}
},
templateUrl: templateUrl('workflow-results/workflow-results'),
controller: workflowResultsController
// resolve: {
// // the GET for the particular job
// jobData: ['Rest', 'GetBasePath', '$stateParams', '$q', '$state', 'Alert', function(Rest, GetBasePath, $stateParams, $q, $state, Alert) {
// Rest.setUrl(GetBasePath('jobs') + $stateParams.id);
// var val = $q.defer();
// Rest.get()
// .then(function(data) {
// val.resolve(data.data);
// }, function(data) {
// val.reject(data);
//
// if (data.status === 404) {
// Alert('Job Not Found', 'Cannot find job.', 'alert-info');
// } else if (data.status === 403) {
// Alert('Insufficient Permissions', 'You do not have permission to view this job.', 'alert-info');
// }
//
// $state.go('jobs');
// });
// return val.promise;
// }],
// // after the GET for the job, this helps us keep the status bar from
// // flashing as rest data comes in. If the job is finished and
// // there's a playbook_on_stats event, go ahead and resolve the count
// // so you don't get that flashing!
// count: ['jobData', 'jobResultsService', 'Rest', '$q', function(jobData, jobResultsService, Rest, $q) {
// var defer = $q.defer();
// if (jobData.finished) {
// // if the job is finished, grab the playbook_on_stats
// // role to get the final count
// Rest.setUrl(jobData.related.job_events +
// "?event=playbook_on_stats");
// Rest.get()
// .success(function(data) {
// if(!data.results[0]){
// defer.resolve({val: {
// ok: 0,
// skipped: 0,
// unreachable: 0,
// failures: 0,
// changed: 0
// }, countFinished: false});
// }
// else {
// defer.resolve({
// val: jobResultsService
// .getCountsFromStatsEvent(data
// .results[0].event_data),
// countFinished: true});
// }
// })
// .error(function() {
// defer.resolve({val: {
// ok: 0,
// skipped: 0,
// unreachable: 0,
// failures: 0,
// changed: 0
// }, countFinished: false});
// });
// } else {
// // job isn't finished so just send an empty count and read
// // from events
// defer.resolve({val: {
// ok: 0,
// skipped: 0,
// unreachable: 0,
// failures: 0,
// changed: 0
// }, countFinished: false});
// }
// return defer.promise;
// }],
// // GET for the particular jobs labels to be displayed in the
// // left-hand pane
// 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;
// }],
// // OPTIONS request for the job. Used to make things like the
// // verbosity data in the left-hand pane prettier than just an
// // integer
// 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;
// }],
// // This clears out the event queue, otherwise it'd be full of events
// // for previous job results the user had navigated to
// eventQueueInit: ['eventQueue', function(eventQueue) {
// eventQueue.initialize();
// }]
// },
//
};