From 38b7a6d41302c077790ea6192f8ccdeacef85604 Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Mon, 7 Jul 2014 14:01:26 -0400 Subject: [PATCH] added filter for job status graph widget --- awx/ui/static/js/controllers/Home.js | 4 + awx/ui/static/js/widgets/HostGraph.js | 67 +++--- awx/ui/static/js/widgets/JobStatusGraph.js | 261 ++++++++++++--------- awx/ui/static/less/new-dashboard.less | 19 +- 4 files changed, 194 insertions(+), 157 deletions(-) diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index a6e553fab9..9481abc541 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -44,6 +44,10 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb toolbar: true }); + String.prototype.capitalize = function() { + return this.charAt(0).toUpperCase() + this.slice(1); + }; + e = angular.element(document.getElementById('home-list-actions')); e.html(html); $compile(e)($scope); diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js index 3f249d9d8b..ac5a2b492f 100644 --- a/awx/ui/static/js/widgets/HostGraph.js +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -29,51 +29,48 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) html += "\n"; - function getLicenseNumber(){ - Rest.setUrl(GetBasePath('config')); - Rest.get() - .success(function (data) { - //$scope.$emit('dashboardReady', data); - // console.log(data); - license = data.license_info.available_instances; - createGraph(license); - }) - .error(function (data, status) { - //Wait('stWaitop'); - ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status }); - }); + element = angular.element(document.getElementById(target)); + element.html(html); + $compile(element)(scope); - //return license; + Rest.setUrl(GetBasePath('config')); + Rest.get() + .success(function (data){ + license = data.license_info.available_instances; + scope.$emit('licenseCountReady', license); + + }) + .error(function (data, status) { + //Wait('stWaitop'); + ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status }); + }); + + + if (scope.removeLicenseCountReady) { + scope.removeLicenseCountReady(); } - - function createGraph(license){ + scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) { Rest.setUrl(GetBasePath('dashboard')+'graphs/'); Rest.get() .success(function (data) { - //$scope.$emit('dashboardReady', data); - // console.log(data); - //license = data.license_info.available_instances; - - makeHostCountGraph(license, data); + scope.$emit('hostDataReady', data, license); }) .error(function (data, status) { //Wait('stWaitop'); - ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status }); + ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get license info ' + status }); }); - //return license; + }); + + if (scope.removeHostDataReady) { + scope.removeHostDataReady(); } + scope.removeHostDataReady = scope.$on('hostDataReady', function (e, data, license) { - function makeHostCountGraph(license, data){ url = GetBasePath('dashboard')+'graphs/'; - var graphData = []; - - //d3.json("static/js/jobstatusdata.json",function(error,data) { - //d3.json(url, function(error,data) { - - graphData = [ + var graphData = [ { "key" : "Hosts" , "color" : "#1778c3", @@ -153,19 +150,15 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) }); nv.utils.windowResize(chart.update); + scope.$emit('WidgetLoaded'); return chart; }, }); //}); - } + }); + - element = angular.element(document.getElementById(target)); - element.html(html); - $compile(element)(scope); - getLicenseNumber(); - // makeHostCountGraph(license); - scope.$emit('WidgetLoaded'); }; } diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js index d70b467509..e2db2ccbd5 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -17,12 +17,14 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) var scope = params.scope, target = params.target, // dashboard = params.dashboard, - html, element, url; + html, element, url, + period="month", + job_type="all"; html = "
\n"; html +="
\n"; - html += "
Job Status
\n"; + html += "
Job Status for All Jobs, Past Month
\n"; html += "
\n"; html += "
\n"; @@ -30,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html += "Job Type\n"; html += " \n"; - html += "
    \n"; - html += "
  • All
    • \n"; - html += "
  • Inventory Sync
    • \n"; - html += "
  • SCM Update
    • \n"; - html += "
  • Playbook Runs
    • \n"; + html += "
      \n"; + html += "
    • All
      • \n"; + html += "
    • Inventory Sync
      • \n"; + html += "
    • SCM Update
      • \n"; + html += "
    • Playbook Run
      • \n"; html += "
    \n"; html += "
\n"; @@ -47,9 +49,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html += " \n"; html += "
    \n"; - html += "
  • Past 24 Hours
    • \n"; - html += "
  • Past Week
    • \n"; - html += "
  • Past Month
    • \n"; + html += "
  • Past 24 Hours
    • \n"; + html += "
  • Past Week
    • \n"; + html += "
  • Past Month
    • \n"; html += "
\n"; html += "
\n"; html += "
\n"; //end of filter div @@ -66,121 +68,146 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html += "
\n"; function createGraph(){ - url = GetBasePath('dashboard')+'graphs/'; - Rest.setUrl(url); - Rest.get() - .success(function (data) { - //$scope.$emit('dashboardReady', data); - // console.log(data); - // license = data.license_info.available_instances; - makeJobStatusGraph(data); - }) - .error(function (data, status) { - //Wait('stWaitop'); - ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status }); - }); + url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type; + Rest.setUrl(url); + Rest.get() + .success(function (data){ + scope.$emit('graphDataReady', data); + return job_type, period; - //return license; - } - - - //function makeHostCountGraph(license){ - - function makeJobStatusGraph(data){ - - var graphData = []; - - //d3.json("static/js/jobstatusdata.json",function(error,data) { - // d3.json(url, function(error,data) { - //console.log(data); - graphData = [ - { - "color": "#1778c3", - "key": "Successful", - "values": data.jobs.successful - }, - { - "key" : "Failed" , - "color" : "#aa0000", - "values": data.jobs.failed - } - ]; - - graphData.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/3, - height = 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. - .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").showMaxMin(true) - .tickFormat(function(d) { - var dx = graphData[0].values[d] && graphData[0].values[d].x || 0; - return dx ? d3.time.format('%m/%d')(new Date(Number(dx+'000'))) : ''; - }); - - 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') - .datum(graphData).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; - }, - - }); - // }); + }) + .error(function (data, status) { + //Wait('stWaitop'); + ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status }); + }); } - element = angular.element(document.getElementById(target)); element.html(html); $compile(element)(scope); + createGraph(); - //makeJobStatusGraph(); - scope.$emit('WidgetLoaded'); + + + + + + if (scope.removeGraphDataReady) { + scope.removeGraphDataReady(); + } + scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) { + var timeFormat, graphData = [ + { + "color": "#1778c3", + "key": "Successful", + "values": data.jobs.successful + }, + { + "key" : "Failed" , + "color" : "#aa0000", + "values": data.jobs.failed + } + ]; + + if(period==="day"){ + timeFormat="%H:%M"; + } + else { + timeFormat = '%m/%d'; + } + graphData.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/3, + height = 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. + .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").showMaxMin(true) + .tickFormat(function(d) { + var dx = graphData[0].values[d] && graphData[0].values[d].x || 0; + return dx ? d3.time.format(timeFormat)(new Date(Number(dx+'000'))) : ''; + }); + + 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') + .datum(graphData).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); + + + //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+" "); + createGraph(); + }); + + //On click, update with new data + 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+" "); + createGraph(); + }); + + scope.$emit('WidgetLoaded'); + return chart; + + }, + + }); + + }); }; } diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less index aa0421ce9a..91f6e2cbcf 100644 --- a/awx/ui/static/less/new-dashboard.less +++ b/awx/ui/static/less/new-dashboard.less @@ -73,8 +73,8 @@ padding-left: 7px; } } - .custon-carousel{ - width:150px; +.custon-carousel{ + width:150px; height:200px; min-width:150px; min-height:100px; @@ -84,4 +84,17 @@ display:block; border:1px solid black; background-color: #A9A9A9; - } \ No newline at end of file +} + +.dropdown-menu { + cursor: pointer; + padding-left: 7px; + height: 75px; + width: 100px; +} +.status-dropdown{ + height: 100px; +} +.m, .n{ + padding-bottom: 5px; +} \ No newline at end of file