diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index 08bec05b44..73675b9be2 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -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; }) }); } diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index b753e9d442..5a248c0a86 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -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' ]; diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/directives/job-status-graph.js similarity index 80% rename from awx/ui/static/js/widgets/JobStatusGraph.js rename to awx/ui/static/js/directives/job-status-graph.js index f5bbbbddd6..a24df54c9b 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/directives/job-status-graph.js @@ -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 = "
\n"; + var cleanup = angular.noop; + + var data; + scope.$watch(attr.data, function(value) { + if (value) { + scope.$emit('graphDataReady', value); + } + }); + + scope.$on('$destroy', cleanup); html = "
\n"; html += "
Job Status
\n"; // for All Jobs, Past Month @@ -65,41 +59,41 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) // html += "
\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); }; - } - ]); + }]); diff --git a/awx/ui/static/js/services/job-status-graph-data.js b/awx/ui/static/js/services/job-status-graph-data.js index 9bcdd33a25..4bf681102a 100644 --- a/awx/ui/static/js/services/job-status-graph-data.js +++ b/awx/ui/static/js/services/job-status-graph-data.js @@ -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); diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html index 844d6b15fd..5ea2cc5fe4 100644 --- a/awx/ui/static/partials/home.html +++ b/awx/ui/static/partials/home.html @@ -12,7 +12,7 @@
-
+
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 0a4310d75f..d9314e9e48 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -82,6 +82,7 @@ + diff --git a/awx/ui/tests/unit/services/job-status-graph-data-test.js b/awx/ui/tests/unit/services/job-status-graph-data-test.js index 56dec232ba..e80102af97 100644 --- a/awx/ui/tests/unit/services/job-status-graph-data-test.js +++ b/awx/ui/tests/unit/services/job-status-graph-data-test.js @@ -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(); });