External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-09 13:39:27 -02: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
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', 'ngCookies',
'RestServices', 'RestServices',
'DataServices', 'DataServices',
'GraphDirectives',
'AuthService', 'AuthService',
'Utilities', 'Utilities',
'LicenseHelper', 'LicenseHelper',
@@ -86,7 +87,6 @@ angular.module('Tower', [
'SelectionHelper', 'SelectionHelper',
'HostGroupsFormDefinition', 'HostGroupsFormDefinition',
'DashboardCountsWidget', 'DashboardCountsWidget',
'JobStatusGraphWidget',
'HostPieChartWidget', 'HostPieChartWidget',
'HostGraphWidget', 'HostGraphWidget',
'DashboardJobsWidget', 'DashboardJobsWidget',
@@ -405,8 +405,7 @@ angular.module('Tower', [
graphData: function($q, jobStatusGraphData) { graphData: function($q, jobStatusGraphData) {
return $q.all({ return $q.all({
jobStatus: jobStatusGraphData.get("month", "all").then(function(data) { jobStatus: jobStatusGraphData.get("month", "all").then(function(data) {
console.log('got data: ', data); return data;
return data.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 * 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){ ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button, graphData){
console.log('graphData:', graphData);
ClearScope('home'); ClearScope('home');
var buttons, html, e, waitCount, loadedCount,borderStyles, jobs_scope, schedule_scope; 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 dashboard: data
}); });
JobStatusGraph({ $scope.graphData = graphData;
scope: $scope,
target: 'dash-job-status-graph',
data: graphData.jobStatus
});
if ($rootScope.user_is_superuser === true) { if ($rootScope.user_is_superuser === true) {
waitCount = 5; waitCount = 5;
@@ -151,11 +146,11 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
if ($rootScope.removeJobStatusChange) { if ($rootScope.removeJobStatusChange) {
$rootScope.removeJobStatusChange(); $rootScope.removeJobStatusChange();
} }
$rootScope.removeJobStatusChange = $rootScope.$on('JobStatusChange', function() { // $rootScope.removeJobStatusChange = $rootScope.$on('JobStatusChange', function() {
jobs_scope.refreshJobs(); // jobs_scope.refreshJobs();
$scope.$emit('ReloadJobStatusGraph'); // $scope.$emit('ReloadJobStatusGraph');
}); // });
if ($rootScope.removeScheduleChange) { if ($rootScope.removeScheduleChange) {
$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' '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 @@
/********************************************* angular.module('GraphDirectives', [])
* Copyright (c) 2014 AnsibleWorks, Inc. .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) {
* @ngdoc function
* @name widgets.function:JobStatusGraph
* @description
*/
var html, url, job_status_chart,
'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,
period="month", period="month",
job_type="all"; 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 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 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"; // html += "</div>\n";
scope.$on('DataReceived:JobStatusGraph', cleanup = _.compose(
function(data) { [ cleanup,
scope.$on('DataReceived:JobStatusGraph',
function(e, data) {
scope.$emit('graphDataReady', data); scope.$emit('graphDataReady', data);
}); })
]);
function createGraph(period, jobtype){ function createGraph(period, jobtype){
// console.log(jobStatusGraphData); jobStatusGraphData.get(period, jobtype).then(function(data) {
// jobStatusGraphData.get(period, jobtype); scope.$emit('graphDataReady', data);
});
} }
element = angular.element(document.getElementById(target)); element.html($compile(html)(scope));
element.html(html);
$compile(element)(scope);
createGraph(); cleanup = _.compose(
[ cleanup,
if (scope.removeResizeJobGraph) { angular.element($window).bind('resize', function() {
scope.removeResizeJobGraph(); if($(window).width()<500){
} $('.graph-container').height(300);
scope.removeResizeJobGraph= scope.$on('ResizeJobGraph', function () { }
if($(window).width()<500){ else{
$('.graph-container').height(300); var winHeight = $(window).height(),
} available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
else{ $('.graph-container').height(available_height/2);
var winHeight = $(window).height(), job_status_chart.update();
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) { if (scope.removeGraphDataReady) {
scope.removeGraphDataReady(); scope.removeGraphDataReady();
} }
scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) { scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data, third) {
var timeFormat, graphData = [ 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 callbacks = {};
var currentCallbackId = 0; var currentCallbackId = 0;
function pluck(property, promise) {
return promise.then(function(value) {
return value[property];
});
}
function getData(period, jobType) { function getData(period, jobType) {
var url = getBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+jobType; var url = getBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+jobType;
Rest.setUrl(url); Rest.setUrl(url);
return Rest.get(); return pluck('data', Rest.get());
} }
return { return {
destroyWatcher: angular.noop, destroyWatcher: angular.noop,
setupWatcher: function() { setupWatcher: function(period, jobType) {
this.destroyWatcher = this.destroyWatcher =
$rootScope.$on('JobStatusChange', function() { $rootScope.$on('JobStatusChange', function() {
getData().then(function(result) { getData(period, jobType).then(function(result) {
$rootScope. $rootScope.
$broadcast('DataReceived:JobStatusGraph', $broadcast('DataReceived:JobStatusGraph',
result); result);
return result; return result;
}).catch(function(response) { }).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, ProcessErrors(null,
response.data, response.data,
@@ -44,7 +50,7 @@ function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q) {
get: function(period, jobType) { get: function(period, jobType) {
this.destroyWatcher(); this.destroyWatcher();
this.setupWatcher(); this.setupWatcher(period, jobType);
return getData(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 id="dash-counts" class="col-sm-12 col-xs-12"></div>
</div> </div>
<div class="row"> <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 class="right-side col-sm-6 col-xs-12"><div id="dash-host-status-graph" class="graph-container"></div></div>
</div> </div>
<div class="row"> <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/Schedules.js"></script>
<script src="{{ STATIC_URL }}js/controllers/Sockets.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/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/Users.js"></script>
<script src="{{ STATIC_URL }}js/forms/Organizations.js"></script> <script src="{{ STATIC_URL }}js/forms/Organizations.js"></script>
<script src="{{ STATIC_URL }}js/forms/Inventories.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('', ''); var result = jobStatusGraphData.get('', '');
restStub.succeed(firstResult); restStub.succeed({ data: firstResult });
flushPromises(); flushPromises();
@@ -97,7 +97,7 @@ describe('Job Status Graph Data Service', function() {
result.resolve(data); result.resolve(data);
}); });
$rootScope.$emit('JobStatusChange'); $rootScope.$emit('JobStatusChange');
restStub.succeed(expected); restStub.succeed({ data: expected });
flushPromises(); flushPromises();
}); });