From 589e5412d625b8cfac866ba045a6beb0be966f12 Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Wed, 2 Jul 2014 16:08:13 -0400
Subject: [PATCH] fixed the media checking for alignment of hte graph widgets.
 And added drop down for job status widget

---
 awx/ui/static/js/widgets/DashboardCounts.js | 232 +++++++-------------
 awx/ui/static/js/widgets/HostGraph.js       |   2 +-
 awx/ui/static/js/widgets/JobStatusGraph.js  |  43 +++-
 awx/ui/static/less/new-dashboard.less       |  22 +-
 awx/ui/static/partials/home.html            |   2 +-
 5 files changed, 142 insertions(+), 159 deletions(-)

diff --git a/awx/ui/static/js/widgets/DashboardCounts.js b/awx/ui/static/js/widgets/DashboardCounts.js
index 282b0ebcfa..4cc240562c 100644
--- a/awx/ui/static/js/widgets/DashboardCounts.js
+++ b/awx/ui/static/js/widgets/DashboardCounts.js
@@ -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');
-                    }
-
-                };*/
 
             };
         }
diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js
index 06865ae83b..f46f3a296e 100644
--- a/awx/ui/static/js/widgets/HostGraph.js
+++ b/awx/ui/static/js/widgets/HostGraph.js
@@ -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";
diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js
index 6bacbae79d..313b62d0da 100644
--- a/awx/ui/static/js/widgets/JobStatusGraph.js
+++ b/awx/ui/static/js/widgets/JobStatusGraph.js
@@ -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)) : '';
diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less
index b8d668f4d3..9f26ffed9e 100644
--- a/awx/ui/static/less/new-dashboard.less
+++ b/awx/ui/static/less/new-dashboard.less
@@ -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;
diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html
index 7efe7b1b09..ef1f4a7a65 100644
--- a/awx/ui/static/partials/home.html
+++ b/awx/ui/static/partials/home.html
@@ -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>