Merge pull request #1601 from kensible/1585-dashboardUpdate

Removed host status, changed failed/successful toggles to dropdown.

awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less

@@ -14,62 +14,22 @@
 
 .DashboardGraphs-headerSection{
     display: flex;
-    // align-items: baseline;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: flex-start;
 }
 
-.DashboardGraphs-tab {
+.DashboardGraphs-headerText {
-    color: @btn-txt;
+    flex: 1;
-    background-color: @btn-bg;
+    margin: 0px;
-    font-size: 12px;
+    font-size: 14px;
-    border: 1px solid @btn-bord;
+    font-weight: bold;
-    height: 30px;
+    color: @default-interface-txt;
-    border-radius: 5px;
-    margin-right: 20px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
-    padding-top: 5px;
-    transition: background-color 0.2s;
-    text-transform: uppercase;
-    text-align: center;
     white-space: nowrap;
-}
-
-.DashboardGraphs-tab--firstTab {
-    width: 90px;
-}
-
-.DashboardGraphs-tab--lastTab {
-    width:100px;
     margin-right: auto;
 }
 
-.DashboardGraphs-tab:hover {
-    color: @btn-txt;
-    background-color: @btn-bg-hov;
-    cursor: pointer;
-}
-
-.DashboardGraphs-tab:active {
-    color: @btn-txt-sel;
-    background-color: @btn-bg-sel;
-    cursor: pointer;
-}
-
-.DashboardGraphs-tab:focus {
-    color: @btn-txt-sel;
-}
-
-.DashboardGraphs-tab.is-selected {
-    color: @btn-txt-sel;
-    background-color: @btn-bg-sel;
-    border-color: @btn-bord-sel;
-}
-
 .DashboardGraphs-graphSection {
     display: block;
     flex: 1;
@@ -218,11 +178,3 @@
 .DashboardGraphs-statusFilterIcon{
     padding-right: 5px;
 }
-
-.DashboardGraphs-hostStatusLabel--successful{
-    text-anchor: start !important;
-}
-
-.DashboardGraphs-hostStatusLabel--failed{
-    text-anchor: end !important;
-}

awx/ui/client/src/dashboard/graphs/dashboard-graphs.directive.js

@@ -1,67 +1,22 @@
 /* jshint unused: vars */
-export default
+export default ['templateUrl',
-    [   'templateUrl',
+    function(templateUrl) {
-        function(templateUrl) {
+        return {
-            return {
+            restrict: 'E',
-                restrict: 'E',
+            scope: true,
-                scope: true,
+            templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'),
-                templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'),
+            link: function(scope, element, attrs) {
-                link: function(scope, element, attrs) {
-                    function clearGraphs() {
-                        scope.jobStatusSelected = false;
-                        scope.hostStatusSelected = false;
-                    }
 
-                    function clearStatus() {
+                function clearStatus() {
-                        scope.isSuccessful = true;
+                    scope.isSuccessful = true;
-                        scope.isFailed = true;
+                    scope.isFailed = true;
-                    }
-
-                    scope.toggleGraphStatus = function (graphType) {
-                        clearGraphs();
-                        if (graphType === "jobStatus") {
-                            scope.jobStatusSelected = true;
-                        } else if (graphType === "hostStatus") {
-                            scope.hostStatusSelected = true;
-                        }
-                        scope.$broadcast("resizeGraphs");
-                    };
-
-                    scope.toggleJobStatusGraph = function (status) {
-                        if (status === "successful") {
-                            scope.isSuccessful = !scope.isSuccessful;
-                            if(!scope.isSuccessful && scope.isFailed){
-                                status = 'successful';  
-                            }
-                            else if(scope.isSuccessful && scope.isFailed){
-                                status = 'both';
-                            }
-                            else if(!scope.isSuccessful && !scope.isFailed){
-                                status = 'successful';
-                                scope.isFailed = true;
-                            }
-                        } else if (status === "failed") {
-                            scope.isFailed = !scope.isFailed;
-                            if(scope.isSuccessful && scope.isFailed){
-                                status = 'both';
-                            }
-                            if(scope.isSuccessful && !scope.isFailed){
-                                status = 'failed';
-                            }
-                            else if(!scope.isSuccessful && !scope.isFailed){
-                                status = 'failed';
-                                scope.isSuccessful = true;
-                            }
-
-                        }
-                        scope.$broadcast("jobStatusChange", status);
-                    };
-
-                    // initially toggle jobStatus graph
-                    clearStatus();
-                    clearGraphs();
-                    scope.toggleGraphStatus("jobStatus");
                 }
-            };
+
-        }
+                clearStatus();
-    ];
+                scope.jobStatusSelected = true;
+                scope.$broadcast("resizeGraphs");
+
+            }
+        };
+    }
+];

awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html

@@ -1,15 +1,8 @@
 <div class="DashboardGraphs">
     <div class="DashboardGraphs-headerSection">
-        <div class="DashboardGraphs-tab DashboardGraphs-tab--firstTab"
+        <h3 class="DashboardGraphs-headerText">
-            ng-click="toggleGraphStatus('jobStatus')"
+            JOB STATUS
-            ng-class="{'is-selected': jobStatusSelected }">
+        </h3>
-            Job Status
-        </div>
-        <div class="DashboardGraphs-tab DashboardGraphs-tab--lastTab"
-            ng-click="toggleGraphStatus('hostStatus')"
-            ng-class="{'is-selected': hostStatusSelected }">
-            Host Status
-        </div>
         <div class="DashboardGraphs-graphToolbar" ng-show="!hostStatusSelected">
             <div class="DashboardGraphs-filterLabel">Period</div>
             <div class="DashboardGraphs-periodDropdown">
@@ -20,7 +13,6 @@
                 class="DashboardGraphs-filterDropdownText">
                     Past Month <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
                 </a>
-
                 <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                     DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
                     <li>
@@ -58,19 +50,28 @@
                     </li>
                 </ul>
             </div>
-            <div class="DashboardGraphs-statusFilters">
+            <div class="DashboardGraphs-filterLabel">View</div>
-                <button class="DashboardGraphs-statusFilter DashboardGraphs-statusFilter--jobStatus"
+            <div class="DashboardGraphs-periodDropdown">
-                    ng-click="toggleJobStatusGraph('successful')"
+                <a id="status-dropdown" role="button"
-                    ng-class="{'is-selected': isSuccessful }">
+                data-toggle="dropdown"
-                    <i class="fa icon-job-successful DashboardGraphs-statusFilterIcon">
+                data-target="#"
-                        </i> Successful
+                href="/page.html"
-                    </button>
+                class="DashboardGraphs-filterDropdownText">
-                <button class="DashboardGraphs-statusFilter DashboardGraphs-statusFilter--jobStatus"
+                    All <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
-                    ng-click="toggleJobStatusGraph('failed')"
+                </a>
-                    ng-class="{'is-selected': isFailed }">
+
-                    <i class="fa icon-job-failed DashboardGraphs-statusFilterIcon">
+                <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
-                        </i> Failed
+                    DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="status-dropdown">
-                </button>
+                    <li>
+                        <a class="o" id="both" >All</a>
+                    </li>
+                    <li>
+                        <a class="o" id="failed">Successful</a>
+                    </li>
+                    <li>
+                        <a class="o" id="successful">Failed</a>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -83,13 +84,5 @@
                 data="graphData.jobStatus" period="month" job-type="all">
             </job-status-graph>
         </div>
-        <div class="DashboardGraphs-graphContainer" auto-size-module
-            graph-type="hostStatus"
-            ng-class="{'is-selected': hostStatusSelected }">
-            <host-status-graph class="DashboardGraphs-graph
-                DashboardGraphs-graph--hostStatusGraph"
-                data="dashboardData">
-            </host-status-graph>
-        </div>
     </div>
 </div>

awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js

@@ -1,164 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
- export default
-    [   '$compile',
-        '$window',
-        'adjustGraphSize',
-        'templateUrl',
-        HostStatusGraph,
-    ];
-
-function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) {
-        return {
-            restrict: 'E',
-            link: link,
-            templateUrl: templateUrl('dashboard/graphs/host-status/host_status_graph')
-        };
-
-        function link(scope, element, attr) {
-            var host_pie_chart;
-
-            scope.$watch(attr.data, function(data) {
-                if (data && data.hosts) {
-                    scope.data = data;
-                    createGraph();
-                }
-            });
-
-            function adjustHostGraphSize() {
-                if (angular.isUndefined(host_pie_chart)) {
-                    return;
-                }
-                var parentHeight = element.parent().parent().height();
-                var toolbarHeight = element.find('.toolbar').height();
-                var container = element.find('svg').parent();
-                var margins = host_pie_chart.margin();
-
-                var newHeight = parentHeight - toolbarHeight - margins.bottom;
-
-                $(container).height(newHeight);
-
-                host_pie_chart.update();
-            }
-
-            angular.element($window).on('resize', adjustHostGraphSize);
-            $(".DashboardGraphs-graph--hostStatusGraph").resize(adjustHostGraphSize);
-
-            element.on('$destroy', function() {
-                angular.element($window).off('resize', adjustHostGraphSize);
-                $(".DashboardGraphs-graph--hostStatusGraph").removeResize(adjustHostGraphSize);
-            });
-
-            function createGraph() {
-                var data, colors, color;
-                if(scope.data.hosts.total+scope.data.hosts.failed>0){
-                    if(scope.status === "successful"){
-                        data = [
-                        {   "label": "SUCCESSFUL",
-                            "color": "#3CB878",
-                            "value" : scope.data.hosts.total - scope.data.hosts.failed
-                        }];
-                        colors = ['#3cb878'];
-                    }
-                    else if (scope.status === "failed"){
-                        data = [{   "label": "FAILED",
-                            "color" : "#ff5850",
-                            "value" : scope.data.hosts.failed
-                        }];
-                        colors = ['#ff5850'];
-                    }
-                    else {
-                        data = [
-                            {   "label": "SUCCESSFUL",
-                                "color": "#3CB878",
-                                "value" : scope.data.hosts.total - scope.data.hosts.failed
-                            } ,
-                            {   "label": "FAILED",
-                                "color" : "#ff5850",
-                                "value" : scope.data.hosts.failed
-                            }
-                        ];
-                        colors = ['#3cb878', '#ff5850'];
-                    }
-
-                    host_pie_chart = nv.models.pieChart()
-                        .margin({bottom: 15})
-                        .x(function(d) {
-                            return d.label +': '+ Math.round((d.value/scope.data.hosts.total)*100) + "%";
-                        })
-                        .y(function(d) { return d.value; })
-                        .showLabels(true)
-                        .showLegend(false)
-                        .growOnHover(false)
-                        .labelThreshold(0.01)
-                        .tooltipContent(function(x, y) {
-                            return '<p>'+x+'</p>'+ '<p>' +  Math.floor(y.replace(',','')) + ' HOSTS ' +  '</p>';
-                        })
-                        .color(colors);
-
-                    d3.select(element.find('svg')[0])
-                        .datum(data)
-                        .transition().duration(350)
-                        .call(host_pie_chart)
-                        .style({
-                            "font-family": 'Open Sans',
-                            "font-style": "normal",
-                            "font-weight":400,
-                            "src": "url(/static/assets/OpenSans-Regular.ttf)"
-                        });
-                    if(scope.status === "failed"){
-                        color = "#ff5850";
-                    }
-                    else{
-                        color = "#3CB878";
-                    }
-
-                    d3.select(element.find(".nv-label text")[0])
-                        .attr("class", "DashboardGraphs-hostStatusLabel--successful")
-                        .style({
-                            "font-family": 'Open Sans',
-                            "text-anchor": "start",
-                            "font-size": "16px",
-                            "text-transform" : "uppercase",
-                            "fill" : color,
-                            "src": "url(/static/assets/OpenSans-Regular.ttf)"
-                        });
-                    d3.select(element.find(".nv-label text")[1])
-                        .attr("class", "DashboardGraphs-hostStatusLabel--failed")
-                        .style({
-                            "font-family": 'Open Sans',
-                            "text-anchor" : "end !imporant",
-                            "font-size": "16px",
-                            "text-transform" : "uppercase",
-                            "fill" : "#ff5850",
-                            "src": "url(/static/assets/OpenSans-Regular.ttf)"
-                        });
-
-                    adjustGraphSize();
-                    return host_pie_chart;
-                }
-                else{
-                    // This should go in a template or something
-                    // but I'm at the end of a card and need to get this done.
-                    // We definitely need to refactor this, I'm letting
-                    // good enough be good enough for right now.
-                    var notFoundContainer = $('<div></div>');
-                    notFoundContainer.css({
-                        'text-align': 'center',
-                        'width': '100%',
-                        'padding-top': '2em'
-                    });
-
-                    notFoundContainer.text('No host data');
-
-                    element.find('svg').replaceWith(notFoundContainer);
-                }
-
-
-            }
-        }
-    }

awx/ui/client/src/dashboard/graphs/host-status/host_status_graph.partial.html

@@ -1 +0,0 @@
-<svg width="100%" height="100%" ></svg>

awx/ui/client/src/dashboard/graphs/host-status/main.js

@@ -1,5 +0,0 @@
-import HostStatusGraphDirective from './host-status-graph.directive';
-import DashboardGraphHelpers from '../graph-helpers/main';
-
-export default angular.module('HostStatusGraph', [DashboardGraphHelpers.name])
-    .directive('hostStatusGraph', HostStatusGraphDirective);

awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js

@@ -140,6 +140,14 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG
                         scope.$parent.isSuccessful = true;
                         recreateGraph(period, job_type);
                     });
+
+                    $('.o').on('click', function() {
+                        var job_status = this.getAttribute('id');
+                        $('#status-dropdown').replaceWith("<a id=\"status-dropdown\" class=\"DashboardGraphs-filterDropdownText\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
+                        "<i class=\"fa fa-chevron-down DashboardGraphs-filterIcon\"></i>\n");
+                        scope.$broadcast("jobStatusChange", job_status);
+                    });
+
                     adjustGraphSize(job_status_chart, element);
                 }
 

awx/ui/client/src/dashboard/graphs/main.js

@@ -1,7 +1,6 @@
-import hostStatus from './host-status/main';
 import jobStatus from './job-status/main';
 import dashboardGraphsDirective from './dashboard-graphs.directive';
 
 export default
-    angular.module('DashboardGraphModules', [hostStatus.name, jobStatus.name])
+    angular.module('DashboardGraphModules', [jobStatus.name])
         .directive('dashboardGraphs', dashboardGraphsDirective);