mirror of
https://github.com/ansible/awx.git
synced 2024-10-31 15:21:13 +03:00
Merge pull request #1601 from kensible/1585-dashboardUpdate
Removed host status, changed failed/successful toggles to dropdown.
This commit is contained in:
commit
30c73b5d14
@ -14,62 +14,22 @@
|
|||||||
|
|
||||||
.DashboardGraphs-headerSection{
|
.DashboardGraphs-headerSection{
|
||||||
display: flex;
|
display: flex;
|
||||||
// align-items: baseline;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: 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;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
|
|
||||||
.DashboardGraphs-tab--firstTab {
|
|
||||||
width: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DashboardGraphs-tab--lastTab {
|
|
||||||
width:100px;
|
|
||||||
margin-right: auto;
|
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 {
|
.DashboardGraphs-graphSection {
|
||||||
display: block;
|
display: block;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -218,11 +178,3 @@
|
|||||||
.DashboardGraphs-statusFilterIcon{
|
.DashboardGraphs-statusFilterIcon{
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DashboardGraphs-hostStatusLabel--successful{
|
|
||||||
text-anchor: start !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DashboardGraphs-hostStatusLabel--failed{
|
|
||||||
text-anchor: end !important;
|
|
||||||
}
|
|
||||||
|
@ -1,67 +1,22 @@
|
|||||||
/* jshint unused: vars */
|
/* 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");
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
];
|
||||||
|
@ -1,15 +1,8 @@
|
|||||||
<div class="DashboardGraphs">
|
<div class="DashboardGraphs">
|
||||||
<div class="DashboardGraphs-headerSection">
|
<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-graphToolbar" ng-show="!hostStatusSelected">
|
||||||
<div class="DashboardGraphs-filterLabel">Period</div>
|
<div class="DashboardGraphs-filterLabel">Period</div>
|
||||||
<div class="DashboardGraphs-periodDropdown">
|
<div class="DashboardGraphs-periodDropdown">
|
||||||
@ -20,7 +13,6 @@
|
|||||||
class="DashboardGraphs-filterDropdownText">
|
class="DashboardGraphs-filterDropdownText">
|
||||||
Past Month <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
|
Past Month <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems
|
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems
|
||||||
DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
|
DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
|
||||||
<li>
|
<li>
|
||||||
@ -58,19 +50,28 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -83,13 +84,5 @@
|
|||||||
data="graphData.jobStatus" period="month" job-type="all">
|
data="graphData.jobStatus" period="month" job-type="all">
|
||||||
</job-status-graph>
|
</job-status-graph>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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 +0,0 @@
|
|||||||
<svg width="100%" height="100%" ></svg>
|
|
Before Width: | Height: | Size: 40 B |
@ -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);
|
|
@ -140,6 +140,14 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG
|
|||||||
scope.$parent.isSuccessful = true;
|
scope.$parent.isSuccessful = true;
|
||||||
recreateGraph(period, job_type);
|
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);
|
adjustGraphSize(job_status_chart, element);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import hostStatus from './host-status/main';
|
|
||||||
import jobStatus from './job-status/main';
|
import jobStatus from './job-status/main';
|
||||||
import dashboardGraphsDirective from './dashboard-graphs.directive';
|
import dashboardGraphsDirective from './dashboard-graphs.directive';
|
||||||
|
|
||||||
export default
|
export default
|
||||||
angular.module('DashboardGraphModules', [hostStatus.name, jobStatus.name])
|
angular.module('DashboardGraphModules', [jobStatus.name])
|
||||||
.directive('dashboardGraphs', dashboardGraphsDirective);
|
.directive('dashboardGraphs', dashboardGraphsDirective);
|
||||||
|
Loading…
Reference in New Issue
Block a user