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',
dashboard: data
});
HostGraph({
HostGraph({
scope: $scope,
target: 'container3',
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,
target = params.target,
dashboard = params.dashboard,
html, element;
function createHTML(html){
var docw = $(window).width();
if(docw<768){
function createHTML(html){
var docw = $(window).width();
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" ;
// 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";
//<!-- Wrapper for slides -->
//html += "<div class=\"carousel-inner\">\n" ;
html += "<div class=\"carousel-inner\">\n" ;
html += "<div class=\"item active\">\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 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 += "<div class=\"carousel-inner\">\n" ;
html += "<div class=\"carousel-inner\">\n" ;
html += "<div class=\"item active\">\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 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" ;
// 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 -->
// <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
// <span class="glyphicon glyphicon-chevron-left"></span>
@ -77,43 +75,40 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
// <span class="glyphicon glyphicon-chevron-right"></span>
// </a>
// </div>
// $('.carousel').carousel({
// interval: 2000
// })
// $('.carousel').carousel({
// 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;
function scaleForSmallDevices(){
/*function scaleForSmallDevices(){
var docw = $(window).width();
if(docw<600){
alert('success');
}
};
};*/
};
}

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

@ -23,6 +23,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
html, e;
html = '';
html += "<div class=\"dashboard-jobs-list-container\">\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 += " 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"; //active-jobs-tab
html += "<div class=\"tab-pane\" id=\"scheduled-jobs-tab\"></div>\n";
html += "</div>\n"; // jobs-list-container
html += "</div>\n";
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
.axisLabel('Hosts')
.tickFormat(d3.format('.f'));
.axisLabel('Hosts')
.tickFormat(d3.format('.f'));
d3.select('.host-count-graph svg')
.datum(data).transition()
.datum(data).transition()
.attr('width', width)
.attr('height', height)
.duration(500)
@ -86,9 +86,9 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
});
d3.selectAll(".nv-line").on("click", function () {
alert("clicked");
});
d3.selectAll(".nv-line").on("click", function () {
alert("clicked");
});
nv.utils.windowResize(chart.update);
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) {
data.map(function(series) {
@ -149,9 +149,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
});
d3.selectAll(".nv-line").on("click", function () {
alert("clicked");
});
d3.selectAll(".nv-line").on("click", function () {
alert("clicked");
});
nv.utils.windowResize(chart.update);
return chart;
@ -160,6 +160,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
});
});
}
*/
element = angular.element(document.getElementById(target));
element.html(html);

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

@ -27,11 +27,12 @@
stroke: steelblue;
stroke-width: 1.5px;
}
.jobs-list-container {
border: 1px solid @grey;
border-radius: 4px;
padding: 5px;
}
.dashboard-jobs-list-container {
border: 1px solid @grey;
border-radius: 4px;
padding: 5px;
}
.carousel-control.left, .carousel-control.right {
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>
</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 class="navbar-collapse collapse" id="main-navbar-collapse">
<ul class="nav navbar-nav" id="ansible-main-menu">