shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 15:21:13 +03:00
Code Releases Activity

Merge pull request #1601 from kensible/1585-dashboardUpdate

Browse Source 
Removed host status, changed failed/successful toggles to dropdown.
This commit is contained in:
kensible 2016-04-20 15:43:09 -04:00
commit 30c73b5d14
8 changed files with 59 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less
View File

@ -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 {
color: @btn-txt;
background-color: @btn-bg;
font-size: 12px;
border: 1px solid @btn-bord;
height: 30px;
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;
.DashboardGraphs-headerText {
flex: 1;
margin: 0px;
font-size: 14px;
font-weight: bold;
color: @default-interface-txt;
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;
}

83
awx/ui/client/src/dashboard/graphs/dashboard-graphs.directive.js
View File

@ -1,67 +1,22 @@
/* jshint unused: vars */
export default
[ 'templateUrl',
function(templateUrl) {
return {
restrict: 'E',
scope: true,
templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'),
link: function(scope, element, attrs) {
function clearGraphs() {
scope.jobStatusSelected = false;
scope.hostStatusSelected = false;
}
export default ['templateUrl',
function(templateUrl) {
return {
restrict: 'E',
scope: true,
templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'),
link: function(scope, element, attrs) {
function clearStatus() {
scope.isSuccessful = 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");
function clearStatus() {
scope.isSuccessful = true;
scope.isFailed = true;
}
};
}
];
clearStatus();
scope.jobStatusSelected = true;
scope.$broadcast("resizeGraphs");
}
};
}
];

57
awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html
View File

@ -1,15 +1,8 @@
<div class="DashboardGraphs">
<div class="DashboardGraphs-headerSection">
<div class="DashboardGraphs-tab DashboardGraphs-tab--firstTab"
ng-click="toggleGraphStatus('jobStatus')"
ng-class="{'is-selected': jobStatusSelected }">
Job Status
</div>
<div class="DashboardGraphs-tab DashboardGraphs-tab--lastTab"
ng-click="toggleGraphStatus('hostStatus')"
ng-class="{'is-selected': hostStatusSelected }">
Host Status
</div>
<h3 class="DashboardGraphs-headerText">
JOB STATUS
</h3>
<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">
<button class="DashboardGraphs-statusFilter DashboardGraphs-statusFilter--jobStatus"
ng-click="toggleJobStatusGraph('successful')"
ng-class="{'is-selected': isSuccessful }">
<i class="fa icon-job-successful DashboardGraphs-statusFilterIcon">
</i> Successful
</button>
<button class="DashboardGraphs-statusFilter DashboardGraphs-statusFilter--jobStatus"
ng-click="toggleJobStatusGraph('failed')"
ng-class="{'is-selected': isFailed }">
<i class="fa icon-job-failed DashboardGraphs-statusFilterIcon">
</i> Failed
</button>
<div class="DashboardGraphs-filterLabel">View</div>
<div class="DashboardGraphs-periodDropdown">
<a id="status-dropdown" role="button"
data-toggle="dropdown"
data-target="#"
href="/page.html"
class="DashboardGraphs-filterDropdownText">
All <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
</a>
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems
DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="status-dropdown">
<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>

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

@ -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);
}
}
}
}

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

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

Before

Width:  |  Height:  |  Size: 40 B

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

@ -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);

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

@ -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);
}

3
awx/ui/client/src/dashboard/graphs/main.js
View File

@ -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);