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

Display job status graph in directive instead of widget

Browse Source
This commit is contained in:
Joe Fiorini 2015-01-21 16:08:49 -05:00
parent 95ad326c29
commit b0dcafca8c
7 changed files with 65 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui/static/js/app.js
View File

@ -25,6 +25,7 @@ angular.module('Tower', [
'ngCookies',
'RestServices',
'DataServices',
'GraphDirectives',
'AuthService',
'Utilities',
'LicenseHelper',
@ -86,7 +87,6 @@ angular.module('Tower', [
'SelectionHelper',
'HostGroupsFormDefinition',
'DashboardCountsWidget',
'JobStatusGraphWidget',
'HostPieChartWidget',
'HostGraphWidget',
'DashboardJobsWidget',
@ -405,8 +405,7 @@ angular.module('Tower', [
graphData: function($q, jobStatusGraphData) {
return $q.all({
jobStatus: jobStatusGraphData.get("month", "all").then(function(data) {
console.log('got data: ', data);
return data.data;
return data;
})
});
}

19
awx/ui/static/js/controllers/Home.js
View File

@ -25,10 +25,9 @@
* Host count graph should only be loaded if the user is a super user
*
*/
function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, HostGraph, JobStatusGraph, HostPieChart, DashboardJobs,
function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, HostGraph, HostPieChart, DashboardJobs,
ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button, graphData){
console.log('graphData:', graphData);
ClearScope('home');
var buttons, html, e, waitCount, loadedCount,borderStyles, jobs_scope, schedule_scope;
@ -118,11 +117,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
dashboard: data
});
JobStatusGraph({
scope: $scope,
target: 'dash-job-status-graph',
data: graphData.jobStatus
});
$scope.graphData = graphData;
if ($rootScope.user_is_superuser === true) {
waitCount = 5;
@ -151,11 +146,11 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
if ($rootScope.removeJobStatusChange) {
$rootScope.removeJobStatusChange();
}
$rootScope.removeJobStatusChange = $rootScope.$on('JobStatusChange', function() {
jobs_scope.refreshJobs();
$scope.$emit('ReloadJobStatusGraph');
// $rootScope.removeJobStatusChange = $rootScope.$on('JobStatusChange', function() {
// jobs_scope.refreshJobs();
// $scope.$emit('ReloadJobStatusGraph');
});
// });
if ($rootScope.removeScheduleChange) {
$rootScope.removeScheduleChange();
@ -188,7 +183,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
}
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph','JobStatusGraph', 'HostPieChart', 'DashboardJobs',
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'HostPieChart', 'DashboardJobs',
'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button', 'graphData'
];

90
awx/ui/static/js/widgets/JobStatusGraph.js → awx/ui/static/js/directives/job-status-graph.js
View File

@ -1,28 +1,22 @@
/*********************************************
* Copyright (c) 2014 AnsibleWorks, Inc.
*/
/**
* @ngdoc function
* @name widgets.function:JobStatusGraph
* @description
*/
angular.module('GraphDirectives', [])
.directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', 'jobStatusGraphData',
function ($rootScope, $compile , $location, $window, Rest, GetBasePath, ProcessErrors, Wait, jobStatusGraphData) {
return function (scope, element, attr) {
'use strict';
angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
.factory('JobStatusGraph', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', 'jobStatusGraphData',
function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors, jobStatusGraphData) {
return function (params) {
var scope = params.scope,
target = params.target,
data = params.data,
html, element, url, job_status_chart,
var html, url, job_status_chart,
period="month",
job_type="all";
// html = "<div class=\"graph-container\">\n";
var cleanup = angular.noop;
var data;
scope.$watch(attr.data, function(value) {
if (value) {
scope.$emit('graphDataReady', value);
}
});
scope.$on('$destroy', cleanup);
html = "<div class=\"row\">\n";
html += "<div id=\"job-status-title\" class=\"h6 col-xs-2 col-sm-3 col-lg-4 text-center\"><b>Job Status</b></div>\n"; // for All Jobs, Past Month
@ -65,41 +59,41 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
// html += "</div>\n";
scope.$on('DataReceived:JobStatusGraph',
function(data) {
cleanup = _.compose(
[ cleanup,
scope.$on('DataReceived:JobStatusGraph',
function(e, data) {
scope.$emit('graphDataReady', data);
});
})
]);
function createGraph(period, jobtype){
// console.log(jobStatusGraphData);
// jobStatusGraphData.get(period, jobtype);
jobStatusGraphData.get(period, jobtype).then(function(data) {
scope.$emit('graphDataReady', data);
});
}
element = angular.element(document.getElementById(target));
element.html(html);
$compile(element)(scope);
element.html($compile(html)(scope));
createGraph();
if (scope.removeResizeJobGraph) {
scope.removeResizeJobGraph();
}
scope.removeResizeJobGraph= scope.$on('ResizeJobGraph', function () {
if($(window).width()<500){
$('.graph-container').height(300);
}
else{
var winHeight = $(window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
$('.graph-container').height(available_height/2);
job_status_chart.update();
}
});
cleanup = _.compose(
[ cleanup,
angular.element($window).bind('resize', function() {
if($(window).width()<500){
$('.graph-container').height(300);
}
else{
var winHeight = $(window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
$('.graph-container').height(available_height/2);
job_status_chart.update();
}
})
]);
if (scope.removeGraphDataReady) {
scope.removeGraphDataReady();
}
scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) {
scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data, third) {
var timeFormat, graphData = [
@ -202,8 +196,6 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
});
scope.$emit('graphDataReady', data);
};
}
]);
}]);

16
awx/ui/static/js/services/job-status-graph-data.js
View File

@ -11,24 +11,30 @@ function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q) {
var callbacks = {};
var currentCallbackId = 0;
function pluck(property, promise) {
return promise.then(function(value) {
return value[property];
});
}
function getData(period, jobType) {
var url = getBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+jobType;
Rest.setUrl(url);
return Rest.get();
return pluck('data', Rest.get());
}
return {
destroyWatcher: angular.noop,
setupWatcher: function() {
setupWatcher: function(period, jobType) {
this.destroyWatcher =
$rootScope.$on('JobStatusChange', function() {
getData().then(function(result) {
getData(period, jobType).then(function(result) {
$rootScope.
$broadcast('DataReceived:JobStatusGraph',
result);
return result;
}).catch(function(response) {
var errorMessage = 'Failed to get: ' + url + ' GET returned: ' + status;
var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
ProcessErrors(null,
response.data,
@ -44,7 +50,7 @@ function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q) {
get: function(period, jobType) {
this.destroyWatcher();
this.setupWatcher();
this.setupWatcher(period, jobType);
return getData(period, jobType);

2
awx/ui/static/partials/home.html
View File

@ -12,7 +12,7 @@
<div id="dash-counts" class="col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div class="left-side col-sm-6 col-xs-12"><div id="dash-job-status-graph" class="graph-container"></div></div>
<div class="left-side col-sm-6 col-xs-12"><div id="dash-job-status-graph" class="graph-container"><div job-status-graph data="graphData.jobStatus"></div> </div></div>
<div class="right-side col-sm-6 col-xs-12"><div id="dash-host-status-graph" class="graph-container"></div></div>
</div>
<div class="row">

1
awx/ui/templates/ui/index.html
View File

@ -82,6 +82,7 @@
<script src="{{ STATIC_URL }}js/controllers/Schedules.js"></script>
<script src="{{ STATIC_URL }}js/controllers/Sockets.js"></script>
<script src="{{ STATIC_URL }}js/services/job-status-graph-data.js"></script>
<script src="{{ STATIC_URL }}js/directives/job-status-graph.js"></script>
<script src="{{ STATIC_URL }}js/forms/Users.js"></script>
<script src="{{ STATIC_URL }}js/forms/Organizations.js"></script>
<script src="{{ STATIC_URL }}js/forms/Inventories.js"></script>

4
awx/ui/tests/unit/services/job-status-graph-data-test.js
View File

@ -69,7 +69,7 @@ describe('Job Status Graph Data Service', function() {
var result = jobStatusGraphData.get('', '');
restStub.succeed(firstResult);
restStub.succeed({ data: firstResult });
flushPromises();
@ -97,7 +97,7 @@ describe('Job Status Graph Data Service', function() {
result.resolve(data);
});
$rootScope.$emit('JobStatusChange');
restStub.succeed(expected);
restStub.succeed({ data: expected });
flushPromises();
});