shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 16:51:11 +03:00
Code Releases Activity

Dashboard

Browse Source 
Fixed boarder around job widget. Cleaned up JS lint issues.
This commit is contained in:
Chris Houseknecht 2014-07-02 10:04:14 -04:00
parent 2e075d56f5
commit 0b1308f411
7 changed files with 100 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/static/js/controllers/Home.js
View File

@ -81,7 +81,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
target: 'container2', target: 'container2',
dashboard: data dashboard: data
}); });
HostGraph({ HostGraph({
scope: $scope, scope: $scope,
target: 'container3', target: 'container3',
dashboard: data dashboard: data

163
awx/ui/static/js/widgets/DashboardCounts.js
View File

@ -17,58 +17,56 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
var scope = params.scope, var scope = params.scope,
target = params.target, target = params.target,
dashboard = params.dashboard, dashboard = params.dashboard,
html, element; html, element;
function createHTML(html){ function createHTML(html){
var docw = $(window).width(); var docw = $(window).width();
if(docw<768){ if (docw<768){
html = "<div id=\"dash-count-carousel\" class=\"carousel slide\" data-interval=\"1000\" data-ride=\"carousel\">\n" ;
// html += " <!-- Indicators -->\n";
html += "<ol class=\"carousel-indicators\">\n";
html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"0\" class=\"active\"></li>\n";
html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"1\"></li>\n";
html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"2\"></li>\n";
html += "</ol>\n";
html = "<div id=\"dash-count-carousel\" class=\"carousel slide\" data-interval=\"1000\" data-ride=\"carousel\">\n" ; //<!-- Wrapper for slides -->
// html += " <!-- Indicators -->\n"; //html += "<div class=\"carousel-inner\">\n" ;
html += "<ol class=\"carousel-indicators\">\n"; html += "<div class=\"carousel-inner\">\n" ;
html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"0\" class=\"active\"></li>\n"; html += "<div class=\"item active\">\n" ;
html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"1\"></li>\n"; html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"2\"></li>\n"; html += "<div class=\"carousel-caption\">\n" ;
html += "</ol>\n"; html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "<div class=\"item\">\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<div class=\"carousel-caption\">\n" ;
html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "<div class=\"item\">\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<div class=\"carousel-caption\">\n" ;
html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "<div class=\"item\">\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<div class=\"carousel-caption\">\n" ;
html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
//<!-- Wrapper for slides --> // html += \"<!-- Controls -->\n" ;
//html += "<div class=\"carousel-inner\">\n" ; html += "<a class=\" carousel-control left\" href=\"#dash-count-carousel\" role=\"button\" data-slide=\"prev\">\n" ;
html += "<div class=\"carousel-inner\">\n" ; html += "<span class=\"icon-prev\" onclick=\"javascript:$(\'.carousel\'').carousel(\'prev\'')\"></span>\n" ;
html += "<div class=\"item active\">\n" ; html += "</a>\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ; html += "<a class=\"carousel-control right\" href=\"#dash-count-carousel\" role=\"button\" data-slide=\"next\">\n" ;
html += "<div class=\"carousel-caption\">\n" ; html += "<span class=\"icon-next\"></span>\n" ;
html += "<p>Caption text here</p>\n" ; html += "</a>\n" ;
html += "</div>\n" ; html += "</div>\n" ;
html += "</div>\n" ;
html += "<div class=\"item\">\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<div class=\"carousel-caption\">\n" ;
html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "<div class=\"item\">\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<div class=\"carousel-caption\">\n" ;
html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "<div class=\"item\">\n" ;
html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
html += "<div class=\"carousel-caption\">\n" ;
html += "<p>Caption text here</p>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
html += "</div>\n" ;
// html += \"<!-- Controls -->\n" ;
html += "<a class=\" carousel-control left\" href=\"#dash-count-carousel\" role=\"button\" data-slide=\"prev\">\n" ;
html += "<span class=\"icon-prev\" onclick=\"javascript:$(\'.carousel\'').carousel(\'prev\'')\"></span>\n" ;
html += "</a>\n" ;
html += "<a class=\"carousel-control right\" href=\"#dash-count-carousel\" role=\"button\" data-slide=\"next\">\n" ;
html += "<span class=\"icon-next\"></span>\n" ;
html += "</a>\n" ;
html += "</div>\n" ;
// <!-- Controls --> // <!-- Controls -->
// <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> // <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
// <span class="glyphicon glyphicon-chevron-left"></span> // <span class="glyphicon glyphicon-chevron-left"></span>
@ -77,43 +75,40 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
// <span class="glyphicon glyphicon-chevron-right"></span> // <span class="glyphicon glyphicon-chevron-right"></span>
// </a> // </a>
// </div> // </div>
// $('.carousel').carousel({ // $('.carousel').carousel({
// interval: 2000 // interval: 2000
// }) // })
}
else{
html = "<div id=\"count-container\" class=\"panel-body\" style=\"borderBottom:thick solid #0000FF\">\n";
html += "<table class=\"table-bordered\">\n";
html += "<tr>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
html += "<td class=\"h2 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
html += "<td class=\"h2 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
html += "</tr>\n";
html += "<tr>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Hosts</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Failed Hosts</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Inventories</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Projects</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Project Sync Failures</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Users</td>\n";
html += "</tr>\n";
html += "</table>\n";
html += "</div>\n";
// html += "<hr>\n";
}
return html;
} }
else{
html = "<div id=\"count-container\" class=\"panel-body\" style=\"borderBottom:thick solid #0000FF\">\n";
html += "<table class=\"table-bordered\">\n";
html += "<tr>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
html += "<td class=\"h2 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
html += "<td class=\"h2 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
html += "</tr>\n";
html += "<tr>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Hosts</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Failed Hosts</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Inventories</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Projects</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Project Sync Failures</td>\n";
html += "<td class=\"h6 col-lg-1 text-center\">Users</td>\n";
html += "</tr>\n";
html += "</table>\n";
html += "</div>\n";
// html += "<hr>\n";
}
return html;
}
@ -180,13 +175,13 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
//window.onresize = scaleForSmallDevices; //window.onresize = scaleForSmallDevices;
function scaleForSmallDevices(){ /*function scaleForSmallDevices(){
var docw = $(window).width(); var docw = $(window).width();
if(docw<600){ if(docw<600){
alert('success'); alert('success');
} }
}; };*/
}; };
} }

2
awx/ui/static/js/widgets/DashboardJobs.js
View File

@ -23,6 +23,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
html, e; html, e;
html = ''; html = '';
html += "<div class=\"dashboard-jobs-list-container\">\n";
html += "<ul id=\"job_status_tabs\" class=\"nav nav-tabs\">\n"; html += "<ul id=\"job_status_tabs\" class=\"nav nav-tabs\">\n";
html += "<li class=\"active\"><a id=\"active_jobs_link\" ng-click=\"toggleTab($event, 'active_jobs_link', 'job_status_tabs')\"\n"; html += "<li class=\"active\"><a id=\"active_jobs_link\" ng-click=\"toggleTab($event, 'active_jobs_link', 'job_status_tabs')\"\n";
html += " href=\"#active-jobs-tab\" data-toggle=\"tab\">Jobs</a></li>\n"; html += " href=\"#active-jobs-tab\" data-toggle=\"tab\">Jobs</a></li>\n";
@ -39,6 +40,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
html += "</div>\n"; //list html += "</div>\n"; //list
html += "</div>\n"; //active-jobs-tab html += "</div>\n"; //active-jobs-tab
html += "<div class=\"tab-pane\" id=\"scheduled-jobs-tab\"></div>\n"; html += "<div class=\"tab-pane\" id=\"scheduled-jobs-tab\"></div>\n";
html += "</div>\n"; // jobs-list-container
html += "</div>\n"; html += "</div>\n";
e = angular.element(document.getElementById(target)); e = angular.element(document.getElementById(target));

12
awx/ui/static/js/widgets/HostGraph.js
View File

@ -68,11 +68,11 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
}); });
chart.yAxis //Chart y-axis settings chart.yAxis //Chart y-axis settings
.axisLabel('Hosts') .axisLabel('Hosts')
.tickFormat(d3.format('.f')); .tickFormat(d3.format('.f'));
d3.select('.host-count-graph svg') d3.select('.host-count-graph svg')
.datum(data).transition() .datum(data).transition()
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.duration(500) .duration(500)
@ -86,9 +86,9 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "src": "url(/static/fonts/OpenSans-Regular.ttf)"
}); });
d3.selectAll(".nv-line").on("click", function () { d3.selectAll(".nv-line").on("click", function () {
alert("clicked"); alert("clicked");
}); });
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
return chart; return chart;

9
awx/ui/static/js/widgets/JobStatusGraph.js
View File

@ -101,7 +101,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
}); });
} }
function makeHostCountGraph(){ /*function makeHostCountGraph(){
d3.json("static/js/hostcount.json",function(error,data) { d3.json("static/js/hostcount.json",function(error,data) {
data.map(function(series) { data.map(function(series) {
@ -149,9 +149,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "src": "url(/static/fonts/OpenSans-Regular.ttf)"
}); });
d3.selectAll(".nv-line").on("click", function () { d3.selectAll(".nv-line").on("click", function () {
alert("clicked"); alert("clicked");
}); });
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
return chart; return chart;
@ -160,6 +160,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
}); });
}); });
} }
*/
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
element.html(html); element.html(html);

11
awx/ui/static/less/new-dashboard.less
View File

@ -27,11 +27,12 @@
stroke: steelblue; stroke: steelblue;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.jobs-list-container {
border: 1px solid @grey; .dashboard-jobs-list-container {
border-radius: 4px; border: 1px solid @grey;
padding: 5px; border-radius: 4px;
} padding: 5px;
}
.carousel-control.left, .carousel-control.right { .carousel-control.left, .carousel-control.right {
background-image: none background-image: none

2
awx/ui/templates/ui/index.html
View File

@ -201,7 +201,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="http://www.ansible.com" target="_blank"><img id="ansible-brand-logo" src="{{ STATIC_URL }}img/tower_console_bug_black.png" /></a> <a class="navbar-brand" href="#home"><img id="ansible-brand-logo" src="{{ STATIC_URL }}img/tower_console_bug_black.png" /></a>
</div> </div>
<div class="navbar-collapse collapse" id="main-navbar-collapse"> <div class="navbar-collapse collapse" id="main-navbar-collapse">
<ul class="nav navbar-nav" id="ansible-main-menu"> <ul class="nav navbar-nav" id="ansible-main-menu">