mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 11:50:42 -03:30
AC-503 Latest dashboard progress.
This commit is contained in:
chouseknecht
parent
f2ac4b2749
commit
5ccdcb3b15
@ -71,6 +71,8 @@ angular.module('ansible', [
|
||||
'License',
|
||||
'HostGroupsFormDefinition',
|
||||
'JobStatusWidget',
|
||||
'InventorySyncStatusWidget',
|
||||
'SCMSyncStatusWidget',
|
||||
'JobsHelper',
|
||||
'InventoryStatusDefinition'
|
||||
])
|
||||
|
||||
@ -10,20 +10,22 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, ClearScope)
|
||||
function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, InventorySyncStatus, SCMSyncStatus, ClearScope)
|
||||
{
|
||||
ClearScope('home'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
|
||||
//scope.
|
||||
|
||||
var waitCount = 1;
|
||||
var waitCount = 3;
|
||||
var loadedCount = 0;
|
||||
|
||||
if (!$routeParams['login']) {
|
||||
// If we're not logging in, start the Wait widget. Otherwise, it's already running.
|
||||
Wait('start');
|
||||
}
|
||||
|
||||
|
||||
JobStatus({ target: 'container1' });
|
||||
InventorySyncStatus({ target: 'container2' });
|
||||
SCMSyncStatus({ target: 'container3' });
|
||||
|
||||
$rootScope.$on('WidgetLoaded', function() {
|
||||
// Once all the widgets report back 'loaded', turn off Wait widget
|
||||
@ -34,4 +36,5 @@ function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, Cle
|
||||
});
|
||||
}
|
||||
|
||||
Home.$inject=[ '$routeParams', '$scope', '$rootScope', '$location', 'Wait', 'JobStatus', 'ClearScope'];
|
||||
Home.$inject=[ '$routeParams', '$scope', '$rootScope', '$location', 'Wait', 'JobStatus', 'InventorySyncStatus',
|
||||
'SCMSyncStatus', 'ClearScope'];
|
||||
141
awx/ui/static/js/widgets/InventorySyncStatus.js
Normal file
141
awx/ui/static/js/widgets/InventorySyncStatus.js
Normal file
@ -0,0 +1,141 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2013 AnsibleWorks, Inc.
|
||||
*
|
||||
* InventorySyncStatus.js
|
||||
*
|
||||
* Dashboard widget showing object counts and license availability.
|
||||
*
|
||||
*/
|
||||
|
||||
angular.module('InventorySyncStatusWidget', ['RestServices', 'Utilities'])
|
||||
.factory('InventorySyncStatus', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
|
||||
function($rootScope, $compile, Rest, GetBasePath, ProcessErrors, Wait) {
|
||||
return function(params) {
|
||||
|
||||
var scope = $rootScope.$new();
|
||||
var inventoryCount, inventoryFails, groupCount, groupFails, hostCount;
|
||||
var hostFails = 0;
|
||||
var counts = 0;
|
||||
var expectedCounts = 4;
|
||||
var target = params.target;
|
||||
|
||||
if (scope.removeCountReceived) {
|
||||
scope.removeCountReceived();
|
||||
}
|
||||
scope.removeCountReceived = scope.$on('CountReceived', function() {
|
||||
|
||||
var rowcount = 0;
|
||||
|
||||
function makeRow(label, count, fail) {
|
||||
var html = "<tr>\n";
|
||||
html += "<td><a href=\"/#/" + label.toLowerCase() + "\">" + label + "</a></td>\n";
|
||||
html += "<td class=\"failed-column text-right\">";
|
||||
html += (fail > 0) ? "<a href=\"/blah/blah\">" + fail + "</a>" : "";
|
||||
html += "</td>\n";
|
||||
html += "<td class=\"text-right\">";
|
||||
html += (count > 0) ? "<a href=\"/blah/blah\">" + count + "</a>" : "";
|
||||
html += "</td></tr>\n";
|
||||
return html;
|
||||
}
|
||||
|
||||
counts++;
|
||||
if (counts == expectedCounts) {
|
||||
// all the counts came back, now generate the HTML
|
||||
var html = "<div class=\"panel panel-default\">\n";
|
||||
html += "<div class=\"panel-heading\">Inventory Sync Status</div>\n";
|
||||
html += "<div class=\"panel-body\">\n";
|
||||
html += "<table class=\"table table-condensed table-hover\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<th class=\"col-md-4 col-lg-3\"></th>\n";
|
||||
html += "<th class=\"col-md-2 col-lg-1 text-right\">Failed</th>\n";
|
||||
html += "<th class=\"col-md-2 col-lg-1 text-right\">Total</th>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</thead>\n";
|
||||
html += "<tbody>\n";
|
||||
|
||||
console.log('inventory count:' + inventoryCount);
|
||||
console.log('group count:' + groupCount);
|
||||
console.log('host count:' + hostCount);
|
||||
|
||||
if (inventoryCount > 0) {
|
||||
html += makeRow('Inventories', inventoryCount, inventoryFails);
|
||||
rowcount++;
|
||||
}
|
||||
if (groupCount > 0) {
|
||||
html += makeRow('Groups', groupCount, groupFails);
|
||||
rowcount++;
|
||||
}
|
||||
if (hostCount > 0) {
|
||||
html += makeRow('Hosts', hostCount, hostFails);
|
||||
rowcount++;
|
||||
}
|
||||
|
||||
if (rowcount == 0) {
|
||||
html += "<tr><td colspan=\"3\">No inventories configured for external sync</td></tr>\n";
|
||||
}
|
||||
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
var element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
$rootScope.$emit('WidgetLoaded');
|
||||
}
|
||||
});
|
||||
|
||||
var url = GetBasePath('inventory') + '?has_inventory_sources=true&page=1';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data, status, headers, config) {
|
||||
inventoryCount=data.count;
|
||||
scope.$emit('CountReceived');
|
||||
})
|
||||
.error( function(data, status, headers, config) {
|
||||
ProcessErrors(scope, data, status, null,
|
||||
{ hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
|
||||
});
|
||||
|
||||
inventoryFails = 0;
|
||||
|
||||
url = GetBasePath('groups') + '?has_inventory_sources=true&page=1';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data, status, headers, config) {
|
||||
groupCount=data.count;
|
||||
scope.$emit('CountReceived');
|
||||
})
|
||||
.error( function(data, status, headers, config) {
|
||||
ProcessErrors(scope, data, status, null,
|
||||
{ hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
|
||||
});
|
||||
|
||||
url = GetBasePath('groups') + '?has_inventory_sources=true&inventory_source__status=failed&page=1';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data, status, headers, config) {
|
||||
groupFails=data.count;
|
||||
scope.$emit('CountReceived');
|
||||
})
|
||||
.error( function(data, status, headers, config) {
|
||||
ProcessErrors(scope, data, status, null,
|
||||
{ hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
|
||||
});
|
||||
|
||||
url = GetBasePath('hosts') + '?has_inventory_sources=true&page=1';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data, status, headers, config) {
|
||||
hostCount=data.count;
|
||||
scope.$emit('CountReceived');
|
||||
})
|
||||
.error( function(data, status, headers, config) {
|
||||
ProcessErrors(scope, data, status, null,
|
||||
{ hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
|
||||
});
|
||||
|
||||
}
|
||||
}]);
|
||||
@ -18,13 +18,24 @@ angular.module('JobStatusWidget', ['RestServices', 'Utilities'])
|
||||
var expectedCounts = 8;
|
||||
var target = params.target;
|
||||
|
||||
scope.$on('CountReceived', function() {
|
||||
if (scope.removeCountReceived) {
|
||||
scope.removeCountReceived();
|
||||
}
|
||||
scope.removeCountReceived = scope.$on('CountReceived', function() {
|
||||
|
||||
var rowcount = 0;
|
||||
|
||||
function makeRow(label, count, fail) {
|
||||
return "<tr><td><a href=\"/#/" + label.toLowerCase() + "\">" + label +
|
||||
"</a></td><td class=\"failed-column text-right\"><a href=\"/blah/blah\">" +
|
||||
fail + "</a></td><td class=\"text-right\"><a href=\"/blah/blah\">" +
|
||||
count + "</a></td></tr>";
|
||||
var html = '';
|
||||
html += "<tr>\n";
|
||||
html += "<td><a href=\"/#/" + label.toLowerCase() + "\">" + label + "</a></td>\n";
|
||||
html += "<td class=\"failed-column text-right\">";
|
||||
html += (fail > 0) ? "<a href=\"/blah/blah\">" + fail + "</a>" : "";
|
||||
html += "</td>\n";
|
||||
html += "<td class=\"text-right\">"
|
||||
html += (count > 0) ? "<a href=\"/blah/blah\">" + count + "</a>" : "";
|
||||
html += "</td></tr>\n";
|
||||
return html;
|
||||
}
|
||||
|
||||
counts++;
|
||||
@ -36,27 +47,45 @@ angular.module('JobStatusWidget', ['RestServices', 'Utilities'])
|
||||
html += "<table class=\"table table-condensed table-hover\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<th></th>\n";
|
||||
html += "<th class=\"text-right\">Failed</th>\n";
|
||||
html += "<th class=\"text-right\">Total</th>\n";
|
||||
html += "<th class=\"col-md-4 col-lg-3\"></th>\n";
|
||||
html += "<th class=\"col-md-2 col-lg-1 text-right\">Failed</th>\n";
|
||||
html += "<th class=\"col-md-2 col-lg-1 text-right\">Total</th>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</thead>\n";
|
||||
html += "<tbody>\n";
|
||||
html += makeRow('Jobs', jobCount, jobFails);
|
||||
html += makeRow('Inventories', inventoryCount, inventoryFails);
|
||||
html += makeRow('Groups', groupCount, groupFails);
|
||||
html += makeRow('Hosts', hostCount, hostFails);
|
||||
|
||||
if (jobCount > 0) {
|
||||
html += makeRow('Jobs', jobCount, jobFails);
|
||||
rowcount++;
|
||||
}
|
||||
if (inventoryCount > 0) {
|
||||
html += makeRow('Inventories', inventoryCount, inventoryFails);
|
||||
rowcount++;
|
||||
}
|
||||
if (groupCount > 0) {
|
||||
html += makeRow('Groups', groupCount, groupFails);
|
||||
rowcount++;
|
||||
}
|
||||
if (hostCount > 0) {
|
||||
html += makeRow('Hosts', hostCount, hostFails);
|
||||
rowcount++;
|
||||
}
|
||||
|
||||
if (rowcount == 0) {
|
||||
html += "<tr><td colspan=\"3\">No job data found</td></tr>\n";
|
||||
}
|
||||
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
}
|
||||
|
||||
var element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
$rootScope.$emit('WidgetLoaded');
|
||||
var element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
$rootScope.$emit('WidgetLoaded');
|
||||
}
|
||||
});
|
||||
|
||||
var url = GetBasePath('jobs') + '?page=1';
|
||||
|
||||
152
awx/ui/static/js/widgets/SCMSyncStatus.js
Normal file
152
awx/ui/static/js/widgets/SCMSyncStatus.js
Normal file
@ -0,0 +1,152 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2013 AnsibleWorks, Inc.
|
||||
*
|
||||
* SCMSyncStatus.js
|
||||
*
|
||||
* Dashboard widget showing object counts and license availability.
|
||||
*
|
||||
*/
|
||||
|
||||
angular.module('SCMSyncStatusWidget', ['RestServices', 'Utilities'])
|
||||
.factory('SCMSyncStatus', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', 'GetChoices',
|
||||
function($rootScope, $compile, Rest, GetBasePath, ProcessErrors, Wait, GetChoices) {
|
||||
return function(params) {
|
||||
|
||||
var scope = $rootScope.$new();
|
||||
var target = params.target;
|
||||
var expected = 0;
|
||||
var results = [];
|
||||
var scm_choices;
|
||||
|
||||
if (scope.removeCountReceived) {
|
||||
scope.removeCountReceived();
|
||||
}
|
||||
scope.removeCountReceived = scope.$on('CountReceived', function(e, label, count, fail) {
|
||||
|
||||
var rowcount = 0;
|
||||
|
||||
function makeRow(label, count, fail) {
|
||||
var value;
|
||||
for (var i=0; i < scm_choices.length; i++) {
|
||||
if (scm_choices[i][1] == label) {
|
||||
value = scm_choices[i][0];
|
||||
break;
|
||||
}
|
||||
}
|
||||
var html = ''
|
||||
html += "<tr><td><a href=\"/#/projects/?source_type=" + value + "\">" + label + "</a></td>\n";
|
||||
html += "<td class=\"failed-column text-right\">";
|
||||
html += (fail > 0) ? "<a href=\"/blah/blah\">" + fail + "</a>" : "";
|
||||
html += "</td>\n";
|
||||
html += "<td class=\"text-right\">";
|
||||
html += (count > 0) ? "<a href=\"/blah/blah\">" + count + "</a>" : "";
|
||||
html += "</td>\n";
|
||||
html += "</tr>\n";
|
||||
return html;
|
||||
}
|
||||
|
||||
results.push({ label: label, count: count, fail: fail });
|
||||
|
||||
if (results.length == expected) {
|
||||
// all the counts came back, now generate the HTML
|
||||
|
||||
var html = "<div class=\"panel panel-default\">\n";
|
||||
html += "<div class=\"panel-heading\">Project SCM Status</div>\n";
|
||||
html += "<div class=\"panel-body\">\n";
|
||||
html += "<table class=\"table table-condensed table-hover\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<th class=\"col-md-4 col-lg-3\"></th>\n";
|
||||
html += "<th class=\"col-md-2 col-lg-1 text-right\">Failed</th>\n";
|
||||
html += "<th class=\"col-md-2 col-lg-1 text-right\">Total</th>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</thead>\n";
|
||||
html += "<tbody>\n";
|
||||
|
||||
for (var i=0; i < results.length; i++) {
|
||||
if (results[i].count > 0) {
|
||||
html += makeRow(results[i].label, results[i].count, results[i].fail);
|
||||
rowcount++;
|
||||
}
|
||||
}
|
||||
if (rowcount == 0) {
|
||||
html += "<tr><td colspan=\"3\">No projects conigured for SCM sync</td></tr>\n";
|
||||
}
|
||||
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
var element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
$rootScope.$emit('WidgetLoaded');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
scope.removeCountProjects = scope.$on('CountProjects', function(e, choices) {
|
||||
|
||||
scm_choices = choices;
|
||||
|
||||
function getScmLabel(config) {
|
||||
var url = config.url;
|
||||
var scm_type = url.match(/scm_type=.*\&/)[0].replace(/scm_type=/,'').replace(/\&/,'');
|
||||
var label;
|
||||
for (var i=0; i < choices.length; i++) {
|
||||
if (choices[i][0] == scm_type) {
|
||||
label = choices[i][1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
return label;
|
||||
}
|
||||
|
||||
// Remove ---- option from list of choices
|
||||
for (var i=0; i < choices.length; i++) {
|
||||
if (choices[i][1].match(/^---/)) {
|
||||
choices.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Remove Manual option from list of choices
|
||||
for (var i=0; i < choices.length; i++) {
|
||||
if (choices[i][1].match(/Manual/)) {
|
||||
choices.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
expected = choices.length;
|
||||
|
||||
for (var i=0; i < choices.length; i++) {
|
||||
if (!choices[i][1].match(/^---/)) {
|
||||
var url = GetBasePath('projects') + '?scm_type=' + choices[i][0] + '&page=1';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data, status, headers, config) {
|
||||
// figure out the scm_type we're looking at and its label
|
||||
var label = getScmLabel(config);
|
||||
var count = data.count;
|
||||
var fail = 0;
|
||||
for (var i=0; i < data.results.length; i++) {
|
||||
if (data.results[i].status == 'failed') {
|
||||
fail++;
|
||||
}
|
||||
}
|
||||
scope.$emit('CountReceived', label, count, fail);
|
||||
})
|
||||
.error( function(data, status, headers, config) {
|
||||
ProcessErrors(scope, data, status, null,
|
||||
{ hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
GetChoices({ scope: scope, url: GetBasePath('projects'), field: 'scm_type', emit: 'CountProjects'});
|
||||
|
||||
}
|
||||
}]);
|
||||
@ -5,7 +5,7 @@
|
||||
* Utility functions
|
||||
*
|
||||
*/
|
||||
angular.module('Utilities',[])
|
||||
angular.module('Utilities',['RestServices'])
|
||||
|
||||
.factory('ClearScope', function() {
|
||||
return function(id) {
|
||||
@ -314,6 +314,27 @@ angular.module('Utilities',[])
|
||||
}
|
||||
}])
|
||||
|
||||
.factory('GetChoices', [ 'Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
|
||||
return function(params) {
|
||||
// Get dropdown options
|
||||
|
||||
var scope = params.scope;
|
||||
var url = params.url;
|
||||
var field = params.field;
|
||||
var emit_callback = params.emit;
|
||||
|
||||
Rest.setUrl(url);
|
||||
Rest.options()
|
||||
.success( function(data, status, headers, config) {
|
||||
scope.$emit(emit_callback, data.actions['GET'][field].choices);
|
||||
})
|
||||
.error( function(data, status, headers, config) {
|
||||
ProcessErrors(scope, data, status, null,
|
||||
{ hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
|
||||
});
|
||||
}
|
||||
}])
|
||||
|
||||
/* DeugForm(form_name)
|
||||
*
|
||||
* Use to log the $pristine and $invalid properties of each form element. Helpful when form
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="tab-pane" id="home">
|
||||
<div class="row">
|
||||
<div id="container1" class="col-lg-6"></div>
|
||||
<div id="conatiner2" class="col-lg-6"></div>
|
||||
<div id="container2" class="col-lg-6"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container3" class="col-lg-6"></div>
|
||||
<div id="conatiner4" class="col-lg-6"></div>
|
||||
<div id="container4" class="col-lg-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,7 +109,8 @@
|
||||
<script src="{{ STATIC_URL }}js/helpers/Users.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/helpers/Jobs.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/widgets/JobStatus.js"></script>
|
||||
|
||||
<script src="{{ STATIC_URL }}js/widgets/InventorySyncStatus.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/widgets/SCMSyncStatus.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/less/less-1.4.1.min.js"></script>
|
||||
|
||||
{% endif %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user