diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index 05c0f12059..5c84e22e42 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -101,8 +101,21 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb target: 'container5', dashboard: data }); + setDashboardHeights(); + }); + + + function setDashboardHeights(){ + //var winWidth = $(window).width(), + var winHeight = $(window).height(), + available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93; + //console.log("available_height: " + available_height); + $('.graph-container').height(available_height/2); + // console.log("graph-container height: "+$('.graph-container').height()); + } + $scope.showActivity = function () { Stream({ scope: $scope diff --git a/awx/ui/static/js/widgets/DashboardCounts.js b/awx/ui/static/js/widgets/DashboardCounts.js index 6b070e2f5e..80476ddae7 100644 --- a/awx/ui/static/js/widgets/DashboardCounts.js +++ b/awx/ui/static/js/widgets/DashboardCounts.js @@ -116,13 +116,13 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities']) element.html(html); $compile(element)(scope); if(dashboard.hosts.failed>0 ){ - $('#failed-hosts').html(""+dashboard.hosts.failed+""); + $('#failed-hosts').html(""+dashboard.hosts.failed+""); } if(dashboard.inventories.inventory_failed>0 ){ - $('#failed-inventories').html(""+dashboard.inventories.inventory_failed+""); + $('#failed-inventories').html(""+dashboard.inventories.inventory_failed+""); } if(dashboard.projects.failed>0 ){ - $('#failed-projects').html(""+dashboard.projects.failed+""); + $('#failed-projects').html(""+dashboard.projects.failed+""); } scope.$emit('WidgetLoaded'); diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js index 49d057bbfc..9a7fefb0f2 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=10, + max_rows, html, e; html = ''; @@ -30,7 +30,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) html += "
  • Schedule
    • \n"; html += "\n"; - html += "
    \n"; + html += "
    \n"; html += "
    \n"; html += "
    \n"; html += "
    \n"; @@ -84,7 +84,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) }); $(window).resize(_.debounce(function() { - resizeContainers(); + resizeDashboardJobsWidget(); }, 500)); }); @@ -94,7 +94,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) scope.removeChoicesReady = scope.$on('choicesReady', function() { choicesCount++; if (choicesCount === 2) { - setHeight(); + setDashboardJobsHeight(); scope.$emit('buildJobsList'); } }); @@ -116,22 +116,30 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) }); + // Set the height of each container and calc max number of rows containers can hold - function setHeight() { + function setDashboardJobsHeight() { var docw = $(window).width(), - //doch = $(window).height(), + // //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)); - }); + // // customize the container height and # of rows based on available viewport height + // available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93; + + // 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)); + // }); + + available_height = 500; // $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93; + // console.log("available_height: " + available_height); + $('.dashboard-jobs-list-container').height(500); + //console.log("dashboard-jobs-list-container height: "+$('.dashboard-jobs-list-container').height()); 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 ; + height = Math.floor(available_height) - header - page_row -search_row-30 ; 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); @@ -146,8 +154,8 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) } // Set container height and return the number of allowed rows - function resizeContainers() { - setHeight(); + function resizeDashboardJobsWidget() { + setDashboardJobsHeight(); // completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows; // completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator); // running_scope[RunningJobsList.iterator + '_page_size'] = max_rows; diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js index b8b4f2bace..51b32629eb 100644 --- a/awx/ui/static/js/widgets/HostGraph.js +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -21,9 +21,11 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) html = "
    \n"; html +="
    \n"; - html += "
    Hosts Count
    \n"; - html += "
    \n"; + html += "
    Host Count
    \n"; html += "
    \n"; + html +="
    \n"; + html += "
    \n"; + html += "
    \n"; @@ -105,8 +107,8 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) nv.addGraph({ generate: function() { - var width = nv.utils.windowSize().width/3, - height = nv.utils.windowSize().height/5, + var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, + height = $('.graph-container').height()*0.8, //nv.utils.windowSize().height/5, chart = nv.models.lineChart() .margin({top: 15, right: 75, bottom: 40, left: 85}) .x(function(d,i) { return i ;}) @@ -150,6 +152,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) nv.utils.windowResize(chart.update); scope.$emit('WidgetLoaded'); return chart; + }, }); diff --git a/awx/ui/static/js/widgets/HostPieChart.js b/awx/ui/static/js/widgets/HostPieChart.js index 8fdbc96dc7..601fa0787a 100644 --- a/awx/ui/static/js/widgets/HostPieChart.js +++ b/awx/ui/static/js/widgets/HostPieChart.js @@ -24,21 +24,6 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) html +="
    \n"; html += "
    Host Status
    \n"; html += "
    \n"; - // html += "
    \n"; - // html += "
    \n"; - // html += "\n"; - // html += "Filter\n"; - // html += " \n"; - - // html += "\n"; - // html += "
    \n"; - - // html += "
    \n"; //end of filter div - - html +="
    \n"; html += "
    \n"; @@ -86,9 +71,10 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) { data = exampleData(); nv.addGraph(function() { - var width = nv.utils.windowSize().width/3, - height = nv.utils.windowSize().height/5, + var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, + height = $('.graph-container').height()*0.85, //nv.utils.windowSize().height/5, chart = nv.models.pieChart() + .margin({top: 5, right: 75, bottom: 40, left: 85}) .x(function(d) { return d.label; }) .y(function(d) { return d.value; }) .showLabels(true); diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js index 80f9a602ca..476c95e189 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -24,15 +24,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html = "
    \n"; html +="
    \n"; - html += "
    Job Status for All Jobs, Past Month
    \n"; + html += "
    Job Status
    \n"; // for All Jobs, Past Month html += "
    \n"; html += "
    \n"; - html += "\n"; + html += "\n"; html += "Job Type\n"; html += " \n"; - html += "
      \n"; + html += "
        \n"; html += "
      • All
        • \n"; html += "
      • Inventory Sync
        • \n"; html += "
      • SCM Update
        • \n"; @@ -44,11 +44,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html += "
        \n"; html += "
        \n"; - html += "\n"; + html += "\n"; html += "Period\n"; html += " \n"; - html += "
          \n"; + html += "
            \n"; html += "
          • Past 24 Hours
            • \n"; html += "
          • Past Week
            • \n"; html += "
          • Past Month
            • \n"; @@ -91,6 +91,8 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) scope.removeGraphDataReady(); } scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) { + + var timeFormat, graphData = [ { "color": "#1778c3", @@ -122,17 +124,17 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) nv.addGraph({ generate: function() { - var width = nv.utils.windowSize().width/3, - height = nv.utils.windowSize().height/5, + var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, + height = $('.graph-container').height()*0.8, //nv.utils.windowSize().height/5, chart = nv.models.lineChart() - .margin({top: 5, right: 75, bottom: 40, left: 85}) //Adjust chart margins to give the x-axis some breathing room. + .margin({top: 5, right: 75, bottom: 40, left: 85}) //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) + // .width(width) // .height(height) ; @@ -168,18 +170,27 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) "src": "url(/static/fonts/OpenSans-Regular.ttf)" }); + nv.utils.windowResize(function(){ - nv.utils.windowResize(chart.update); + // var winWidth = $(window).width(), + var winHeight = $(window).height(), + available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93; + // console.log("available_height: " + available_height); + $('.graph-container').height(available_height/2); + // console.log("graph-container height: "+$('.graph-container').height()); + chart.update(); + }); + //nv.utils.windowResize(chart.update); //On click, update with new data d3.selectAll(".n") .on("click", function() { period = this.getAttribute("id"); - // console.log(period); - var title = $('#job-status-title').text(), - str = title.slice(0,title.search(","))+", "+this.innerHTML; - $('#job-status-title').html(""+str+" "); + $('#period-dropdown').text(this.text); + // var title = $('#job-status-title').text(), + // str = title.slice(0,title.search(","))+", "+this.innerHTML; + // $('#job-status-title').html(""+str+" "); createGraph(); }); @@ -187,10 +198,10 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) d3.selectAll(".m") .on("click", function() { job_type = this.getAttribute("id"); - //console.log(job_type); - var title = $('#job-status-title').text(), - str = title.slice(title.search(",")); - $('#job-status-title').html("Job Status for "+this.innerHTML+" Jobs"+str+" "); + $('#type-dropdown').text(this.text); + // var title = $('#job-status-title').text(), + // str = title.slice(title.search(",")); + // $('#job-status-title').html("Job Status for "+this.innerHTML+" Jobs"+str+" "); createGraph(); }); @@ -199,6 +210,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) }, + }); }); diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less index b3aa9f03d0..46e9b422f8 100644 --- a/awx/ui/static/less/new-dashboard.less +++ b/awx/ui/static/less/new-dashboard.less @@ -7,9 +7,7 @@ * */ -#sync-failure { - color:red; -} + .job-status-graph, .host-count-graph{ font: 10px sans-serif; @@ -32,6 +30,7 @@ border: 1px solid @grey; border-radius: 4px; padding: 5px; + } .graph-container{ @@ -47,8 +46,20 @@ margin-right: 0px; margin-bottom: 15px; } -.carousel-control.left, .carousel-control.right { - background-image: none + + +#dashboard-tab-content{ + padding-top: 5px; +} + +#dashboard-tab-content .search-row #active-jobs-search-container{ + height: 35px; +} + + + +#dashboard-tab-content table{ + margin-bottom: 10px; } .dashboard-jobs-list-container { @@ -64,27 +75,20 @@ } } +#container4{ + padding-bottom: 15px; +} + @media (min-width: 1024px) { - .left-side { - padding-right: 7px; - } + .left-side { + padding-right: 7px; + } - .right-side { - padding-left: 7px; - } + .right-side { + padding-left: 7px; + } } - -.period-dropdown{ - height: 75px; - width: 100px; - cursor: pointer; -} -.status-dropdown{ - height: 100px; - width: 100px; - cursor:pointer; -} .m, .n{ cursor:pointer; } \ No newline at end of file