From 25e79fc3f8b47438731507202419916f28762e2e Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Fri, 27 Jun 2014 12:09:21 -0400 Subject: [PATCH] refactored code so dashboard widgets are independent of each other --- .jshintrc | 4 +- awx/ui/static/js/app.js | 3 + awx/ui/static/js/controllers/Home.js | 23 +- awx/ui/static/js/hostcount.json | 37 +- awx/ui/static/js/jobstatusdata.json | 66 ++-- awx/ui/static/js/widgets/DashboardCharts.js | 226 ++++++++++++ awx/ui/static/js/widgets/DashboardCounts.js | 61 +++ awx/ui/static/js/widgets/DashboardJobs.js | 65 ++++ awx/ui/static/js/widgets/NewDash.js | 390 -------------------- awx/ui/static/partials/home.html | 22 +- awx/ui/templates/ui/index.html | 3 + 11 files changed, 429 insertions(+), 471 deletions(-) create mode 100644 awx/ui/static/js/widgets/DashboardCharts.js create mode 100644 awx/ui/static/js/widgets/DashboardCounts.js create mode 100644 awx/ui/static/js/widgets/DashboardJobs.js delete mode 100644 awx/ui/static/js/widgets/NewDash.js diff --git a/.jshintrc b/.jshintrc index 85f82b51c7..81365330d8 100644 --- a/.jshintrc +++ b/.jshintrc @@ -2,12 +2,12 @@ // Details: https://github.com/victorporof/Sublime-JSHint#using-your-own-jshintrc-options // Example: https://github.com/jshint/jshint/blob/master/examples/.jshintrc // Documentation: http://www.jshint.com/docs/ - + "browser": true, "jquery": true, "esnext": true, "globalstrict": true, - "globals": { "angular":false, "alert":false, "$AnsibleConfig":true, "$basePath":true, "jsyaml":false, "_":false, "d3":false, "Donut3D":false }, + "globals": { "angular":false, "alert":false, "$AnsibleConfig":true, "$basePath":true, "jsyaml":false, "_":false, "d3":false, "Donut3D":false, "nv":false }, "strict": false, "quotmark": false, "smarttabs": true, diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index 7f7a0d0705..ce3ed05116 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -75,6 +75,9 @@ angular.module('Tower', [ 'License', 'HostGroupsFormDefinition', 'NewDashWidget', + 'DashboardCountsWidget', + 'DashboardChartsWidget', + 'DashboardJobsWidget', 'JobStatusWidget', 'InventorySyncStatusWidget', 'SCMSyncStatusWidget', diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index a18e9a1692..2cc8e84e55 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -10,7 +10,7 @@ 'use strict'; -function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDash, ObjectCount, JobStatus, InventorySyncStatus, SCMSyncStatus, +function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDash, DashboardCounts, DashboardCharts, DashboardJobs, ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button){ ClearScope('home'); @@ -48,7 +48,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDa e.html(html); $compile(e)($scope); - waitCount = 4; + waitCount = 3; loadedCount = 0; if (!$routeParams.login) { @@ -71,31 +71,21 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDa $scope.removeDashboardReady(); } $scope.removeDashboardReady = $scope.$on('dashboardReady', function (e, data) { - JobStatus({ + DashboardCounts({ scope: $scope, target: 'container1', dashboard: data }); - InventorySyncStatus({ + DashboardCharts({ scope: $scope, target: 'container2', dashboard: data }); - SCMSyncStatus({ - scope: $scope, - target: 'container4', - dashboard: data - }); - ObjectCount({ + DashboardJobs({ scope: $scope, target: 'container3', dashboard: data }); - NewDash({ - scope: $scope, - target: 'container5', - dashboard: data - }); }); $scope.showActivity = function () { @@ -122,8 +112,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDa } -Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'NewDash', 'ObjectCount', 'JobStatus', 'InventorySyncStatus', - 'SCMSyncStatus', 'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button' +Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'NewDash', 'DashboardCounts', 'DashboardCharts', 'DashboardJobs', 'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button' ]; diff --git a/awx/ui/static/js/hostcount.json b/awx/ui/static/js/hostcount.json index 3fded25386..b22981e51f 100644 --- a/awx/ui/static/js/hostcount.json +++ b/awx/ui/static/js/hostcount.json @@ -1,11 +1,28 @@ [ - {"date":"20130125","License":100, "In Use":3}, - {"date":"20130126","License":100, "In Use":6}, - {"date":"20130127","License":100, "In Use":12}, - {"date":"20130128","License":100, "In Use":24}, - {"date":"20130129","License":100, "In Use":48}, - {"date":"20130130","License":100, "In Use":72}, - {"date":"20130131","License":100, "In Use":81}, - {"date":"20130201","License":100, "In Use":90}, - {"date":"20130202","License":100, "In Use":95} -] + { + "key" : "Hosts" , + "color" : "#00aa00", + "values" : [ + [1340755200000 , 2] , [1340762400000 , 4] , + [1340769600000 , 8] , [1340776800000 , 16] , + [1340784000000 , 32] , [1340791200000 , 64] , + [1340798400000 , 128] , [1340805600000 , 150] , + [1340812800000 , 175] , [1340820000000 , 180] , + [1340827200000 , 190] , [1340834400000 , 195] , + [1343347200000 , 195] + ] + }, + { + "key" : "License" , + "color" : "#171717", + "values" : [ + [1340755200000 , 500] , [1340762400000 , 500] , + [1340769600000 , 500] , [1340776800000 , 500] , + [1340784000000 , 500] , [1340791200000 , 500] , + [1340798400000 , 500] , [1340805600000 , 500] , + [1340812800000 , 500] , [1340820000000 , 500] , + [1340827200000 , 500] , [1340834400000 , 500] , + [1343347200000 , 500] + ] + } +] \ No newline at end of file diff --git a/awx/ui/static/js/jobstatusdata.json b/awx/ui/static/js/jobstatusdata.json index a874a2eae0..4cae136a29 100644 --- a/awx/ui/static/js/jobstatusdata.json +++ b/awx/ui/static/js/jobstatusdata.json @@ -1,55 +1,43 @@ [ { - "key" : "Failed" , - "color": "#ccf", + "key" : "OK" , + "color" : "#00aa00", "values" : [ - [ 0 , 20.0] , - [ 1 , 22.0] , - [ 2 , 40] , - [ 3 , 50] , - [ 4 , 60] , - [ 5 , 70] , - [ 6 , 80] , - [ 7 , 90] , - [ 8 , 100] , - [ 9 , 110.0] , - [ 10 , 222.0] + [1340755200000 , 100] , [1340762400000 , 101] , + [1340769600000 , 102] , [1340776800000 , 103] , + [1340784000000 , 103] , [1340791200000 , 103] , + [1340798400000 , 103] , [1340805600000 , 103] , + [1340812800000 , 103] , [1340820000000 , 103] , + [1340827200000 , 103] , [1340834400000 , 103] , + [1343347200000 , 103] ] }, { "key" : "Changed" , - "color" : "#333", + "color" : "#FF9900", "values" : [ - [ 0 , 20.0] , - [ 1 , 22.0] , - [ 2 , 40] , - [ 3 , 50] , - [ 4 , 60] , - [ 5 , 70] , - [ 6 , 80] , - [ 7 , 90] , - [ 8 , 100] , - [ 9 , 110.0] , - [ 10 , 222.0] + [1340755200000 , 50] , [1340762400000 , 50] , + [1340769600000 , 50] , [1340776800000 , 50] , + [1340784000000 , 50] , [1340791200000 , 50] , + [1340798400000 , 50] , [1340805600000 , 50] , + [1340812800000 , 50] , [1340820000000 , 50] , + [1340827200000 , 50] , [1340834400000 , 50] , + [1343347200000 , 50] ] }, { - "key" : "OK" , - "color" : "#333", + "key" : "Failed" , + "color" : "#aa0000", "values" : [ - [ 0 , 20.0] , - [ 1 , 22.0] , - [ 2 , 40] , - [ 3 , 50] , - [ 4 , 60] , - [ 5 , 70] , - [ 6 , 80] , - [ 7 , 90] , - [ 8 , 100] , - [ 9 , 110.0] , - [ 10 , 222.0] + [1340755200000 , 15] , [1340762400000 , 15] , + [1340769600000 , 15] , [1340776800000 , 15] , + [1340784000000 , 15] , [1340791200000 , 15] , + [1340798400000 , 15] , [1340805600000 , 15] , + [1340812800000 , 15] , [1340820000000 , 15] , + [1340827200000 , 15] , [1340834400000 , 15] , + [1343347200000 , 15] ] } - ] +] diff --git a/awx/ui/static/js/widgets/DashboardCharts.js b/awx/ui/static/js/widgets/DashboardCharts.js new file mode 100644 index 0000000000..733bad0c52 --- /dev/null +++ b/awx/ui/static/js/widgets/DashboardCharts.js @@ -0,0 +1,226 @@ +/********************************************* + * Copyright (c) 2014 AnsibleWorks, Inc. + * + * Dashboard.js + * + * The new dashboard + * + */ + +'use strict'; + +angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) + .factory('DashboardCharts', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', + function ($rootScope, $compile) { + return function (params) { + + var scope = params.scope, + target = params.target, + //dashboard = params.dashboard, + + html, element; + + html = "
\n"; + html += "
\n"; + + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "
Job Status GraphHosts
\n"; + + + function makeJobStatusGraph(){ + d3.json("static/js/jobstatusdata.json",function(error,data) { + + data.map(function(series) { + series.values = series.values.map(function(d) { return {x: d[0], y: d[1] }; }); + return series; + }); + + nv.addGraph({ + generate: function() { + var width = nv.utils.windowSize().width - 40, + height = nv.utils.windowSize().height - 40, + chart = nv.models.lineChart() + // .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. + .x(function(d,i) { return i; }) + .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! + .transitionDuration(350) //how fast do you want the lines to transition? + .showLegend(true) //Show the legend, allowing users to turn on/off line series. + .showYAxis(true) //Show the y-axis + .showXAxis(true) //Show the x-axis + ; + + chart.xAxis + .axisLabel("time") + .tickFormat(function(d) { + var dx = data[0].values[d] && data[0].values[d].x || 0; + return dx ? d3.time.format('%x')(new Date(dx)) : ''; + }); + + chart.yAxis //Chart y-axis settings + .axisLabel('Jobs') + .tickFormat(d3.format('.f')); + + d3.select('.job-status-graph svg') + .attr('width', width) + .attr('height', height) + .datum(data) + .call(chart); + + return chart; + }, + // callback: function(graph) { + // window.onresize = function() { + // var width = nv.utils.windowSize().width - 40, + // height = nv.utils.windowSize().height - 40, + // margin = graph.margin(); + + + // if (width < margin.left + margin.right + 20) + // width = margin.left + margin.right + 20; + + // if (height < margin.top + margin.bottom + 20) + // height = margin.top + margin.bottom + 20; + + + // graph + // .width(width) + // .height(height); + + // d3.select('.job-status-graph svg') + // .attr('width', width) + // .attr('height', height) + // .call(graph); + // }; + // } + }); + }); + } + + function makeHostCountGraph(){ + d3.json("static/js/hostcount.json",function(error,data) { + + data.map(function(series) { + series.values = series.values.map(function(d) { return {x: d[0], y: d[1] }; }); + return series; + }); + + nv.addGraph({ + generate: function() { + var width = nv.utils.windowSize().width - 40, + height = nv.utils.windowSize().height - 40, + chart = nv.models.lineChart() + // .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. + .x(function(d,i) { return i ;}) + .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! + .transitionDuration(350) //how fast do you want the lines to transition? + .showLegend(true) //Show the legend, allowing users to turn on/off line series. + .showYAxis(true) //Show the y-axis + .showXAxis(true) //Show the x-axis + ; + + chart.xAxis + .axisLabel("time") + .tickFormat(function(d) { + var dx = data[0].values[d] && data[0].values[d].x || 0; + return dx ? d3.time.format('%x')(new Date(dx)) : ''; + }); + + chart.yAxis //Chart y-axis settings + .axisLabel('Jobs') + .tickFormat(d3.format('.f')); + + d3.select('.host-count-graph svg') + .attr('width', width) + .attr('height', height) + .datum(data) + .call(chart); + + return chart; + }, + // callback: function(graph) { + // window.onresize = function() { + // var width = nv.utils.windowSize().width - 40, + // height = nv.utils.windowSize().height - 40, + // margin = graph.margin(); + + + // if (width < margin.left + margin.right + 20) + // width = margin.left + margin.right + 20; + + // if (height < margin.top + margin.bottom + 20) + // height = margin.top + margin.bottom + 20; + + + // graph + // .width(width) + // .height(height); + + // d3.select('.job-status-graph svg') + // .attr('width', width) + // .attr('height', height) + // .call(graph); + // }; + // } + }); + }); + } + // var chart = nv.models.lineChart() + // // .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. + // .x(function(d,i) { return i }) + // .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! + // .transitionDuration(350) //how fast do you want the lines to transition? + // .showLegend(true) //Show the legend, allowing users to turn on/off line series. + // .showYAxis(true) //Show the y-axis + // .showXAxis(true) //Show the x-axis + // ; + + // chart.width(($(window).width())/3); + // chart.height(($(window).height())/3); + // chart.xAxis + // .axisLabel("time") + // .tickFormat(function(d) { + // var dx = data[0].values[d] && data[0].values[d].x || 0; + // return dx ? d3.time.format('%x')(new Date(dx)) : ''; + // }); + + // chart.yAxis //Chart y-axis settings + // .axisLabel('Jobs') + // .tickFormat(d3.format('.f')); + + // /* Done setting the chart up? Time to render it!*/ + // //var myData = sinAndCos(); //You need data... + + // d3.select('.job-status-graph svg') //Select the element you want to render the chart in. + // .datum(data) //Populate the element with chart data... + // .call(chart); //Finally, render the chart! + + // //Update the chart when window resizes. + // nv.utils.windowResize(function() { chart.update() }); + // return chart; + // }); + + // }); + + // }; + + + + + element = angular.element(document.getElementById(target)); + element.html(html); + $compile(element)(scope); + makeJobStatusGraph(); + makeHostCountGraph(); + scope.$emit('WidgetLoaded'); + + }; + } + ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/DashboardCounts.js b/awx/ui/static/js/widgets/DashboardCounts.js new file mode 100644 index 0000000000..9ba76fdf94 --- /dev/null +++ b/awx/ui/static/js/widgets/DashboardCounts.js @@ -0,0 +1,61 @@ +/********************************************* + * Copyright (c) 2014 AnsibleWorks, Inc. + * + * Dashboard.js + * + * The new dashboard + * + */ + +'use strict'; + +angular.module('DashboardCountsWidget', ['RestServices', 'Utilities']) + .factory('DashboardCounts', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', + function ($rootScope, $compile) { + return function (params) { + + var scope = params.scope, + target = params.target, + dashboard = params.dashboard, + + html, element; + + html = "
\n"; + //html += "
New Dashboard
\n"; + html += "
\n"; + html += "\n"; + + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; + + + + + + element = angular.element(document.getElementById(target)); + element.html(html); + $compile(element)(scope); + + scope.$emit('WidgetLoaded'); + + }; + } + ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js new file mode 100644 index 0000000000..56b8b711d5 --- /dev/null +++ b/awx/ui/static/js/widgets/DashboardJobs.js @@ -0,0 +1,65 @@ +/********************************************* + * Copyright (c) 2014 AnsibleWorks, Inc. + * + * Dashboard.js + * + * The new dashboard + * + */ + +'use strict'; + +angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) + .factory('DashboardJobs', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', + function ($rootScope, $compile) { + return function (params) { + + var scope = params.scope, + target = params.target, + //dashboard = params.dashboard, + + html, element; + + html = "
\n"; + html += "
\n"; + + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "
Active Jobs
\n"; + +//--------------------------------------------------------------------------------------------------------- +//html code from Jobs page's partial: + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += "
Active
\n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; +//--------------------------------------------------------------------------------------------------------- + + html += "
\n"; + + html += "
\n"; + html += "
\n"; + + + + + element = angular.element(document.getElementById(target)); + element.html(html); + $compile(element)(scope); + scope.$emit('WidgetLoaded'); + + }; + } + ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/NewDash.js b/awx/ui/static/js/widgets/NewDash.js deleted file mode 100644 index dfec149235..0000000000 --- a/awx/ui/static/js/widgets/NewDash.js +++ /dev/null @@ -1,390 +0,0 @@ -/********************************************* - * Copyright (c) 2014 AnsibleWorks, Inc. - * - * Dashboard.js - * - * The new dashboard - * - */ - -'use strict'; - -angular.module('NewDashWidget', ['RestServices', 'Utilities']) - .factory('NewDash', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', - function ($rootScope, $compile) { - return function (params) { - - var scope = params.scope, - target = params.target, - dashboard = params.dashboard, - - html, element; - - html = "
\n"; - html += "
New Dashboard
\n"; - html += "
\n"; - html += "\n"; - - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; - - html += "
\n"; - html += "
\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - //html += "\n"; - // //class=\"job-status-graph col-lg-6\" style=\"border:none\">\n"; - // html += "\n"; - html += "\n"; - //\n"; - // html += "\n"; - html += "\n"; - html += "
Job Status GraphHosts
\n"; - html += "
\n"; - - // html += "
\n"; - // html += "
\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "
Active JobsRemaining licenses
\n"; - -//--------------------------------------------------------------------------------------------------------- - - html += "
\n"; - html += "
\n"; - html += "
\n"; - html += "
Active
\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; -//--------------------------------------------------------------------------------------------------------- - - html += "		Your license will out in
365 days
\n"; - - html += "
\n"; - html += "
\n"; - html += "
\n"; - - // var graphWidth = ($(window).width())/3; - // var graphHeight = ($(window).height())/3; - - //function makeGraph(){ - // d3.json("static/js/jobstatusdata.json",function(error,data) { - // nv.addGraph(function() { - // var chart = nv.models.lineChart() - // .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room. - // .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! - // .transitionDuration(350) //how fast do you want the lines to transition? - // .showLegend(true) //Show the legend, allowing users to turn on/off line series. - // .showYAxis(true) //Show the y-axis - // .showXAxis(true) //Show the x-axis - - // chart.xAxis.tickFormat(function(d) { - // var dx = data[0].values[d] && data[0].values[d][0] || 0; - // return d3.time.format('%x')(new Date(dx)) - // }); - - // chart.y1Axis - // .tickFormat(d3.format(',f')); - - // chart.y2Axis - // .tickFormat(function(d) { return '$' + d3.format(',f')(d) }); - - // chart.bars.forceY([0]); - - // d3.select('.job-status-graph svg') - // .datum(data) - // .transition() - // .duration(0) - // .call(chart); - - // nv.utils.windowResize(chart.update); - - // return chart; - // }); - // var chart = nv.models.lineChart() - // .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room. - // .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! - // .transitionDuration(350) //how fast do you want the lines to transition? - // .showLegend(true) //Show the legend, allowing users to turn on/off line series. - // .showYAxis(true) //Show the y-axis - // .showXAxis(true) //Show the x-axis - // ; - - // chart.xAxis //Chart x-axis settings - // .axisLabel('Time (ms)') - // .tickFormat(d3.format(',r')); - - // chart.yAxis //Chart y-axis settings - // .axisLabel('Voltage (v)') - // .tickFormat(d3.format('.02f')); - - // /* Done setting the chart up? Time to render it!*/ - // //var myData = sinAndCos(); //You need data... - - // d3.select('.job-status-graph svg') //Select the element you want to render the chart in. - // .datum(data) //Populate the element with chart data... - // .call(chart); //Finally, render the chart! - - // //Update the chart when window resizes. - // nv.utils.windowResize(function() { chart.update() }); - // return chart; - // }); - - // }); - - // }; - - - // function makeJobStatusGraph(){ - // Adjust the size - // width = $('#job-summary-container .job_well').width(); - // height = $('#job-summary-container .job_well').height() - $('#summary-well-top-section').height() - $('#graph-section .header').outerHeight() - 15; - // svg_radius = Math.min(width, height); - // svg_width = width; - // svg_height = height; - // if (svg_height > 0 && svg_width > 0) { - // if (!resize && $('#graph-section svg').length > 0) { - // Donut3D.transition("completedHostsDonut", graph_data, Math.floor(svg_radius * 0.50), Math.floor(svg_radius * 0.25), 18, 0.4); - // } - // else { - // if ($('#graph-section svg').length > 0) { - // $('#graph-section svg').remove(); - // } - // svg = d3.select("#graph-section").append("svg").attr("width", svg_width).attr("height", svg_height); - // svg.append("g").attr("id","completedHostsDonut"); - // Donut3D.draw("completedHostsDonut", graph_data, Math.floor(svg_width / 2), Math.floor(svg_height / 2), Math.floor(svg_radius * 0.50), Math.floor(svg_radius * 0.25), 18, 0.4); - // $('#graph-section .header .legend').show(); - // } - // } - - - // var margin = {top: 20, right: 80, bottom: 30, left: 50}, - // width = graphWidth - margin.left - margin.right, - // height = graphHeight - margin.top - margin.bottom; - - // var parseDate = d3.time.format("%Y%m%d").parse; - - // var x = d3.time.scale() - // .range([0, width]); - - // var y = d3.scale.linear() - // .range([height, 0]); - - // var color = d3.scale.category10(); - - // var xAxis = d3.svg.axis() - // .scale(x) - // .orient("bottom"); - - // var yAxis = d3.svg.axis() - // .scale(y) - // .orient("left"); - - // var line = d3.svg.line() - // .interpolate("basis") - // .x(function(d) { return x(d.date); }) - // .y(function(d) { return y(d.hostCount); }); - - // var svg = d3.select(".job-status-graph").append("svg") - // .attr("width", width + margin.left + margin.right) - // .attr("height", height + margin.top + margin.bottom) - // .append("g") - // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - - // d3.json("static/js/jobstatusdata.json", function(error, data) { - // color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); - - // data.forEach(function(d) { - // d.date = parseDate(d.date); - // }); - - // var status = color.domain().map(function(name) { - // return { - // name: name, - // values: data.map(function(d) { - // return {date: d.date, hostCount: +d[name]}; - // }) - // }; - // }); - - // x.domain(d3.extent(data, function(d) { return d.date; })); - - // y.domain([ - // d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.hostCount; }); }), - // d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.hostCount; }); }) - // ]); - - // svg.append("g") - // .attr("class", "x axis") - // .attr("transform", "translate(0," + height + ")") - // .call(xAxis); - - // svg.append("g") - // .attr("class", "y axis") - // .call(yAxis) - // .append("text") - // .attr("transform", "rotate(-90)") - // .attr("y", 6) - // .attr("dy", ".71em") - // .style("text-anchor", "end") - // .text("Number of hosts"); - - // var series = svg.selectAll(".series") - // .data(status) - // .enter().append("g") - // .attr("class", "series"); - - // series.append("path") - // .attr("class", "line") - // .attr("d", function(d) { return line(d.values); }) - // .style("stroke", function(d) { return color(d.name); }); - - // series.append("text") - // .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) - // .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.hostCount) + ")"; }) - // .attr("x", 3) - // .attr("dy", ".35em") - // .text(function(d) { return d.name; }); - // }); - - // }; - - // function makeHostCountGraph(){ - // var margin = {top: 20, right: 80, bottom: 30, left: 50}, - // width = graphWidth - margin.left - margin.right, - // height = graphHeight - margin.top - margin.bottom; - - // var parseDate = d3.time.format("%Y%m%d").parse; - - // var x = d3.time.scale() - // .range([0, width]); - - // var y = d3.scale.linear() - // .range([height, 0]); - - // var color = d3.scale.category10(); - - // var xAxis = d3.svg.axis() - // .scale(x) - // .orient("bottom"); - - // var yAxis = d3.svg.axis() - // .scale(y) - // .orient("left"); - - // var line = d3.svg.line() - // .interpolate("basis") - // .x(function(d) { return x(d.date); }) - // .y(function(d) { return y(d.hostCount); }); - - // var svg = d3.select(".host-count-graph").append("svg") - // .attr("width", width + margin.left + margin.right) - // .attr("height", height + margin.top + margin.bottom) - // .append("g") - // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - - // d3.json("static/js/hostcount.json", function(error, data) { - // color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); - - // data.forEach(function(d) { - // d.date = parseDate(d.date); - // }); - - // var status = color.domain().map(function(name) { - // return { - // name: name, - // values: data.map(function(d) { - // return {date: d.date, hostCount: +d[name]}; - // }) - // }; - // }); - - // x.domain(d3.extent(data, function(d) { return d.date; })); - - // y.domain([ - // d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.hostCount; }); }), - // d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.hostCount; }); }) - // ]); - - // svg.append("g") - // .attr("class", "x axis") - // .attr("transform", "translate(0," + height + ")") - // .call(xAxis); - - // svg.append("g") - // .attr("class", "y axis") - // .call(yAxis) - // .append("text") - // .attr("transform", "rotate(-90)") - // .attr("y", 6) - // .attr("dy", ".71em") - // .style("text-anchor", "end") - // .text("Number of hosts"); - - // var series = svg.selectAll(".series") - // .data(status) - // .enter().append("g") - // .attr("class", "series"); - - // series.append("path") - // .attr("class", "line") - // .attr("d", function(d) { return line(d.values); }) - // .style("stroke", function(d) { return color(d.name); }); - - // series.append("text") - // .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) - // .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.hostCount) + ")"; }) - // .attr("x", 3) - // .attr("dy", ".35em") - // .text(function(d) { return d.name; }); - // }); - - // }; - - - - element = angular.element(document.getElementById(target)); - element.html(html); - $compile(element)(scope); - // makeGraph(); - // makeJobStatusGraph(); - // makeHostCountGraph(); - scope.$emit('WidgetLoaded'); - - }; - } - ]); \ No newline at end of file diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html index b5539a42e3..77a25df4fd 100644 --- a/awx/ui/static/partials/home.html +++ b/awx/ui/static/partials/home.html @@ -5,21 +5,17 @@
- +
-
+
+
+
+
+
+
+
- +
\ No newline at end of file diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 12314c16fc..e26137bb9e 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -162,6 +162,9 @@ + + +