diff --git a/awx/ui/static/js/helpers/Jobs.js b/awx/ui/static/js/helpers/Jobs.js index d18b88626a..70dce3ccc1 100644 --- a/awx/ui/static/js/helpers/Jobs.js +++ b/awx/ui/static/js/helpers/Jobs.js @@ -84,6 +84,10 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job list = scope.jobs; } job = Find({ list: list, key: 'id', val: id }); +<<<<<<< HEAD +======= + // console.log('job type: ' + job.type); +>>>>>>> added functionality for resizing graphs/jobs table, and changed dummy data to better reflect actual expected server response if (job.type === 'job') { $location.url('/jobs/' + job.id); } diff --git a/awx/ui/static/js/hostcount.json b/awx/ui/static/js/hostcount.json index b22981e51f..0ef475d16d 100644 --- a/awx/ui/static/js/hostcount.json +++ b/awx/ui/static/js/hostcount.json @@ -1,7 +1,7 @@ [ { "key" : "Hosts" , - "color" : "#00aa00", + "color" : "#1778c3", "values" : [ [1340755200000 , 2] , [1340762400000 , 4] , [1340769600000 , 8] , [1340776800000 , 16] , diff --git a/awx/ui/static/js/jobstatusdata.json b/awx/ui/static/js/jobstatusdata.json index 4cae136a29..5d8ff06e3a 100644 --- a/awx/ui/static/js/jobstatusdata.json +++ b/awx/ui/static/js/jobstatusdata.json @@ -1,7 +1,7 @@ [ { - "key" : "OK" , - "color" : "#00aa00", + "key" : "Successful" , + "color" : "#1778c3", "values" : [ [1340755200000 , 100] , [1340762400000 , 101] , [1340769600000 , 102] , [1340776800000 , 103] , @@ -13,8 +13,8 @@ ] }, { - "key" : "Changed" , - "color" : "#FF9900", + "key" : "Failed" , + "color" : "#aa0000", "values" : [ [1340755200000 , 50] , [1340762400000 , 50] , [1340769600000 , 50] , [1340776800000 , 50] , @@ -24,19 +24,6 @@ [1340827200000 , 50] , [1340834400000 , 50] , [1343347200000 , 50] ] - }, - { - "key" : "Failed" , - "color" : "#aa0000", - "values" : [ - [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 index 733bad0c52..d7c9ac94fc 100644 --- a/awx/ui/static/js/widgets/DashboardCharts.js +++ b/awx/ui/static/js/widgets/DashboardCharts.js @@ -20,20 +20,21 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) html, element; - html = "
\n"; - html += "
\n"; + // html = "
\n"; + html = "
\n"; - html += "\n"; - html += "\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 += "
Job StatusHosts vs License Agreement
\n"; - + html += "
\n"; + // html += "
\n"; function makeJobStatusGraph(){ d3.json("static/js/jobstatusdata.json",function(error,data) { @@ -45,61 +46,57 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) nv.addGraph({ generate: function() { - var width = nv.utils.windowSize().width - 40, - height = nv.utils.windowSize().height - 40, + var width = nv.utils.windowSize().width/3, + height = nv.utils.windowSize().height/4, chart = nv.models.lineChart() - // .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. + .margin({top: 5, right: 75, bottom: 40, left: 80}) //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 + // .width(width) + // .height(height) ; chart.xAxis - .axisLabel("time") + .axisLabel("Tme").showMaxMin(true) .tickFormat(function(d) { var dx = data[0].values[d] && data[0].values[d].x || 0; - return dx ? d3.time.format('%x')(new Date(dx)) : ''; + return dx ? d3.time.format('%m/%d')(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); + // d3.select('.job-status-graph svg') + // .attr('width', width) + // .attr('height', height) + // .datum(data) + // .call(chart); + d3.select('.job-status-graph svg') + .datum(data).transition() + .attr('width', width) + .attr('height', height) + .duration(500) + .call(chart) + .style({ + // 'width': width, + // 'height': height, + "font-family": 'Open Sans', + "font-style": "normal", + "font-weight":400, + "src": "url(/static/fonts/OpenSans-Regular.ttf)" + }); + + + nv.utils.windowResize(chart.update); 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); - // }; - // } }); }); } @@ -114,10 +111,10 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) nv.addGraph({ generate: function() { - var width = nv.utils.windowSize().width - 40, - height = nv.utils.windowSize().height - 40, + var width = nv.utils.windowSize().width/3, + height = nv.utils.windowSize().height/4, chart = nv.models.lineChart() - // .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. + .margin({top: 15, right: 75, bottom: 40, left: 80}) .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? @@ -126,93 +123,38 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) .showXAxis(true) //Show the x-axis ; - chart.xAxis - .axisLabel("time") + 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)) : ''; - }); + var dx = data[0].values[d] && data[0].values[d].x || 0; + return dx ? d3.time.format('%m/%d')(new Date(dx)) : ''; + }); - chart.yAxis //Chart y-axis settings - .axisLabel('Jobs') + chart.yAxis //Chart y-axis settings + .axisLabel('Hosts') .tickFormat(d3.format('.f')); - d3.select('.host-count-graph svg') - .attr('width', width) - .attr('height', height) - .datum(data) - .call(chart); + d3.select('.host-count-graph svg') + .datum(data).transition() + .attr('width', width) + .attr('height', height) + .duration(500) + .call(chart) + .style({ + // 'width': width, + // 'height': height, + "font-family": 'Open Sans', + "font-style": "normal", + "font-weight":400, + "src": "url(/static/fonts/OpenSans-Regular.ttf)" + }); + nv.utils.windowResize(chart.update); + return 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); diff --git a/awx/ui/static/js/widgets/DashboardCounts.js b/awx/ui/static/js/widgets/DashboardCounts.js index 9ba76fdf94..4414926c72 100644 --- a/awx/ui/static/js/widgets/DashboardCounts.js +++ b/awx/ui/static/js/widgets/DashboardCounts.js @@ -20,11 +20,8 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities']) html, element; - html = "
\n"; - //html += "
New Dashboard
\n"; - html += "
\n"; + html = "
\n"; html += "\n"; - html += "\n"; html += "\n"; html += "\n"; @@ -45,10 +42,8 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities']) html += "\n"; html += "\n"; html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+"Users
\n"; - - - - + html += "
\n"; + html += "
\n"; element = angular.element(document.getElementById(target)); element.html(html); diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js index 6096928fbc..98c4f3b9cc 100644 --- a/awx/ui/static/js/widgets/DashboardJobs.js +++ b/awx/ui/static/js/widgets/DashboardJobs.js @@ -19,7 +19,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) listCount = 0, jobs_scope = scope.$new(true), scheduled_scope = scope.$new(true), - max_rows = 15, + max_rows, html, e; html = ''; @@ -80,6 +80,10 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) url: GetBasePath('schedules') + '?next_run__isnull=false', pageSize: max_rows }); + + $(window).resize(_.debounce(function() { + resizeContainers(); + }, 500)); }); if (scope.removeChoicesReady) { @@ -88,6 +92,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) scope.removeChoicesReady = scope.$on('choicesReady', function() { choicesCount++; if (choicesCount === 2) { + setHeight(); scope.$emit('buildJobsList'); } }); @@ -107,5 +112,52 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) variable: 'type_choices', callback: 'choicesReady' }); + + + // Set the height of each container and calc max number of rows containers can hold + function setHeight() { + var docw = $(window).width(), + //doch = $(window).height(), + available_height, + search_row, page_row, height, header, row_height; + if (docw > 1000) { + // customize the container height and # of rows based on available viewport height + available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#graph-container').outerHeight() - $('#count-container').outerHeight() - 80; + $('.jobs-list-container').each(function() { + $(this).height(Math.floor(available_height / 2)); + }); + search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50); + page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33); + header = Math.max($('#completed_jobs_table thead').height(), 41); + height = Math.floor(available_height) - header - page_row - 15; + row_height = (docw < 1415) ? 47 : 27; + //$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded + max_rows = Math.floor(height / row_height); + } + else { + // when width < 1240px || height < 800px put things back to their default state + $('.jobs-list-container').each(function() { + $(this).css({ 'height': 'auto' }); + }); + max_rows = 5; + } + } + + // Set container height and return the number of allowed rows + function resizeContainers() { + setHeight(); + // completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows; + // completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator); + // running_scope[RunningJobsList.iterator + '_page_size'] = max_rows; + // running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator); + jobs_scope[JobsList.iterator + '_page_size'] = max_rows; + jobs_scope.changePageSize(JobsList.name, JobsList.iterator); + scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows; + scheduled_scope.changePageSize(ScheduledJobsList.name, ScheduledJobsList.iterator); + } + + + }; -}]); \ No newline at end of file +} +]); diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html index 2b2b79b856..41c7607255 100644 --- a/awx/ui/static/partials/home.html +++ b/awx/ui/static/partials/home.html @@ -1,12 +1,12 @@
-
+