mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 16:51:11 +03:00
fixed the media checking for alignment of hte graph widgets. And added drop down for job status widget
This commit is contained in:
Jared Tabor
parent
cebc1d6030
commit
589e5412d6
@ -19,169 +19,107 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
|
||||
dashboard = params.dashboard,
|
||||
html, element;
|
||||
|
||||
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=\"count-container\" class=\"count-container\">\n";
|
||||
html += "<table>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
|
||||
html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
|
||||
html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
|
||||
html += "<td class=\" h2 text-center\" id=\"sync-failure\" style=\"border:none\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
|
||||
html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
|
||||
html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
|
||||
html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
|
||||
html += "</tr>\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" ;
|
||||
// <!-- Controls -->
|
||||
// <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
// <span class="glyphicon glyphicon-chevron-left"></span>
|
||||
// </a>
|
||||
// <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
// <span class="glyphicon glyphicon-chevron-right"></span>
|
||||
// </a>
|
||||
// </div>
|
||||
// $('.carousel').carousel({
|
||||
// interval: 2000
|
||||
// })
|
||||
html += "<tr>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Hosts</td>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Failed Hosts</td>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Inventories</td>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Inventory Sync Failures</td>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Projects</td>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Project Sync Failures</td>\n";
|
||||
html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Users</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
|
||||
}
|
||||
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 = "<div class=\"container\" >\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;
|
||||
}
|
||||
// html = "<div class=\"row\"> \n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></div>\n";
|
||||
// html += "</div>\n";
|
||||
|
||||
// html = "<div class=\"row\"> \n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Hosts</div>\n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Failed Hosts</div>\n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Inventories</div>\n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Inventory Sync Failures</div>\n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Projects</div>\n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Project Sync Failures</div>\n";
|
||||
// html += "<div class=\"h6 col-xs-1 text-center\">Users</div>\n";
|
||||
// html += "</div>\n";
|
||||
// html += "</div>\n";
|
||||
|
||||
|
||||
// html = "<div id=\"count-container\" class=\"row\">\n";
|
||||
// // html+= "<div class=\"col-lg-6\">\n";
|
||||
// html = "<table class=\"col-sm-6\">\n";
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h2 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
|
||||
// html += "<td class=\"h2 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
|
||||
// html += "<td class=\"h2 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
|
||||
|
||||
// html += "</tr>\n";
|
||||
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h6 text-center\">Hosts</td>\n";
|
||||
// html += "<td class=\"h6 text-center\">Failed Hosts</td>\n";
|
||||
// html += "<td class=\"h6 text-center\">Inventories</td>\n";
|
||||
|
||||
// html += "</tr>\n";
|
||||
// html += "</table>\n";
|
||||
// // html += "</div>\n";
|
||||
|
||||
// // html+= "<div >\n";
|
||||
// html += "<table class=\"col-sm-6\">\n";
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h2 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
|
||||
// html += "<td class=\"h2 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
|
||||
// html += "<td class=\"h2 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
|
||||
// html += "<td class=\"h2 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
|
||||
|
||||
// html += "</tr>\n";
|
||||
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h6 text-center\">Inventory Sync Failures</td>\n";
|
||||
// html += "<td class=\"h6 text-center\">Projects</td>\n";
|
||||
// html += "<td class=\"h6 text-center\">Project Sync Failures</td>\n";
|
||||
// html += "<td class=\"h6 text-center\">Users</td>\n";
|
||||
|
||||
// html += "</tr>\n";
|
||||
// html += "</table>\n";
|
||||
// // html += "</div>\n";
|
||||
// html += "</div>\n";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// html = "<div id=\"count-container\" class=\"panel-body visible-xs-block\" style=\"border:none\">\n";
|
||||
// html += "<table>table1\n";
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
|
||||
// html += "<td class=\"h1 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=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
|
||||
// html += "</tr>\n";
|
||||
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Hosts</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Failed Hosts</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Inventories</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Projects</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Project Sync Failures</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
|
||||
// html += "</tr>\n";
|
||||
// html += "</table>\n";
|
||||
// html += "</div>\n";
|
||||
// html += "<hr>\n";
|
||||
|
||||
//--------------------------------------------------------------------------------------------------------------------
|
||||
// html = "<div id=\"count-container\" class=\"panel-body visible-md-block\" style=\"border:none\">\n";
|
||||
// html += "<table>table2\n";
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
|
||||
// html += "<td class=\"h1 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=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
|
||||
// html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
|
||||
// html += "</tr>\n";
|
||||
|
||||
// html += "<tr>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Hosts</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Failed Hosts</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Inventories</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Projects</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Project Sync Failures</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
|
||||
// html += "</tr>\n";
|
||||
// html += "</table>\n";
|
||||
// html += "</div>\n";
|
||||
// html += "<hr>\n";
|
||||
//--------------------------------------------------------------------------------------------------------------------
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(createHTML(html));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
|
||||
//window.onresize = scaleForSmallDevices;
|
||||
|
||||
/*function scaleForSmallDevices(){
|
||||
var docw = $(window).width();
|
||||
if(docw<600){
|
||||
alert('success');
|
||||
}
|
||||
|
||||
};*/
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-lg-12 text-center\">Hosts vs License Agreement</div>\n";
|
||||
html += "<div class=\"h6 col-lg-12 text-center\"><b>Hosts vs License Agreement</b></div>\n";
|
||||
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
@ -21,10 +21,49 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
html, element;
|
||||
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-xs-8 text-center\"><b>Job Status</b></div>\n";
|
||||
|
||||
html += "<div class=\"h6 col-xs-2 \">\n";
|
||||
html += "<div class=\"dropdown\">\n";
|
||||
html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
|
||||
html += "Job Type<span class=\"caret\"></span>\n";
|
||||
html += " </a>\n";
|
||||
|
||||
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
|
||||
html += "<li><a href=\"#\">All</a></li>\n";
|
||||
html += "<li><a href=\"#\">Inventory Sync</a></li>\n";
|
||||
html += "<li><a href=\"#\">SCM Update</a></li>\n";
|
||||
html += "<li><a href=\"#\">Playbook Runs</a></li>\n";
|
||||
html += "</ul>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
html += "</div>\n"; //end of filter div
|
||||
|
||||
html += "<div class=\"h6 col-xs-2 \">\n";
|
||||
html += "<div class=\"dropdown\">\n";
|
||||
html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
|
||||
html += "Period<span class=\"caret\"></span>\n";
|
||||
html += " </a>\n";
|
||||
|
||||
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
|
||||
html += "<li><a href=\"#\">Past Day</a></li>\n";
|
||||
html += "<li><a href=\"#\">Past Week</a></li>\n";
|
||||
html += "<li><a href=\"#\">Past Month</a></li>\n";
|
||||
html += "</ul>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n"; //end of filter div
|
||||
|
||||
html += "</div>\n"; // end of row
|
||||
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-lg-12 text-center\">Job Status</div>\n";
|
||||
html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
//
|
||||
// html += "</div>\n";
|
||||
|
||||
html += "</div>\n";
|
||||
|
||||
|
||||
@ -53,7 +92,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
;
|
||||
|
||||
chart.xAxis
|
||||
.axisLabel("Tme").showMaxMin(true)
|
||||
.axisLabel("Time").showMaxMin(true)
|
||||
.tickFormat(function(d) {
|
||||
var dx = data[0].values[d] && data[0].values[d].x || 0;
|
||||
return dx ? d3.time.format('%m/%d')(new Date(dx)) : '';
|
||||
|
||||
@ -40,19 +40,25 @@
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.count-container{
|
||||
border: 1px solid @grey;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.carousel-control.left, .carousel-control.right {
|
||||
background-image: none
|
||||
}
|
||||
|
||||
.left-side {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
padding-left: 7px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.left-side {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
padding-left: 7px;
|
||||
}
|
||||
}
|
||||
.custon-carousel{
|
||||
width:150px;
|
||||
height:200px;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
-->
|
||||
|
||||
<div class="row">
|
||||
<div id="container1" class="col-lg-12"></div>
|
||||
<div id="container1" class="col-sm-12"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container2" class="left-side col-sm-6 col-xs-12"></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user