Add created chart for images and containers
Michael Crosby
parent
847c2d570c
commit
dea7bfbc8f
|
|
@ -14,5 +14,5 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
|
|||
// You need to set this to the api endpoint without the port i.e. http://192.168.1.9
|
||||
.constant('DOCKER_ENDPOINT', '/dockerapi')
|
||||
.constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred. If you have a port, prefix it with a ':' i.e. :4243
|
||||
.constant('UI_VERSION', 'v0.2.5')
|
||||
.constant('UI_VERSION', 'v0.3')
|
||||
.constant('DOCKER_API_VERSION', 'v1.4');
|
||||
|
|
|
|||
|
|
@ -3,16 +3,74 @@ function MastheadController($scope) {
|
|||
$scope.template = 'partials/masthead.html';
|
||||
}
|
||||
|
||||
function DashboardController($scope, Container, Settings) {
|
||||
function newLineChart(id, data, getkey) {
|
||||
var chart = getChart(id);
|
||||
var map = {};
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var c = data[i];
|
||||
var key = getkey(c);
|
||||
|
||||
var count = map[key];
|
||||
if (count === undefined) {
|
||||
count = 0;
|
||||
}
|
||||
count += 1;
|
||||
map[key] = count;
|
||||
}
|
||||
|
||||
var labels = [];
|
||||
var data = [];
|
||||
var keys = Object.keys(map);
|
||||
|
||||
for (var i = keys.length - 1; i > -1; i--) {
|
||||
var k = keys[i];
|
||||
labels.push(k);
|
||||
data.push(map[k]);
|
||||
}
|
||||
var dataset = {
|
||||
fillColor : "rgba(151,187,205,0.5)",
|
||||
strokeColor : "rgba(151,187,205,1)",
|
||||
pointColor : "rgba(151,187,205,1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
};
|
||||
chart.Line({
|
||||
labels: labels,
|
||||
datasets: [dataset]
|
||||
},
|
||||
{
|
||||
scaleStepWidth: 1,
|
||||
pointDotRadius:1,
|
||||
scaleOverride: true,
|
||||
scaleSteps: labels.length
|
||||
});
|
||||
}
|
||||
|
||||
function DashboardController($scope, Container, Image, Settings) {
|
||||
$scope.predicate = '-Created';
|
||||
$scope.containers = [];
|
||||
|
||||
var getStarted = function(data) {
|
||||
$scope.totalContainers = data.length;
|
||||
newLineChart('#containers-started-chart', data, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
|
||||
var s = $scope;
|
||||
Image.query({}, function(d) {
|
||||
s.totalImages = d.length;
|
||||
newLineChart('#images-created-chart', d, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
|
||||
});
|
||||
};
|
||||
|
||||
var opts = {animation:false};
|
||||
if (Settings.firstLoad) {
|
||||
$('#stats').hide();
|
||||
opts.animation = true;
|
||||
Settings.firstLoad = false;
|
||||
$('#masthead').show();
|
||||
|
||||
setTimeout(function() {
|
||||
$('#masthead').slideUp('slow');
|
||||
$('#stats').slideDown('slow');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
|
@ -34,6 +92,8 @@ function DashboardController($scope, Container, Settings) {
|
|||
}
|
||||
}
|
||||
|
||||
getStarted(d);
|
||||
|
||||
var c = getChart('#containers-chart');
|
||||
var data = [
|
||||
{
|
||||
|
|
@ -320,49 +380,7 @@ function ImageController($scope, $q, $routeParams, $location, Image, Container,
|
|||
var promise = getContainersFromImage($q, Container, t);
|
||||
|
||||
promise.then(function(containers) {
|
||||
var map = {};
|
||||
|
||||
for (var i = 0; i < containers.length; i++) {
|
||||
var c = containers[i];
|
||||
var date = new Date(c.Created * 1000).toLocaleDateString();
|
||||
|
||||
var count = map[date];
|
||||
if (count === undefined) {
|
||||
count = 0;
|
||||
}
|
||||
console.log(map);
|
||||
count += 1;
|
||||
map[date] = count;
|
||||
}
|
||||
|
||||
var labels = [];
|
||||
var data = [];
|
||||
var keys = Object.keys(map);
|
||||
|
||||
for (var i = keys.length - 1; i > -1; i--) {
|
||||
var k = keys[i];
|
||||
labels.push(k);
|
||||
data.push(map[k]);
|
||||
};
|
||||
var dataset = {
|
||||
fillColor : "rgba(151,187,205,0.5)",
|
||||
strokeColor : "rgba(151,187,205,1)",
|
||||
pointColor : "rgba(151,187,205,1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
};
|
||||
console.log(labels, data);
|
||||
var c = getChart('#containers-started-chart');
|
||||
c.Line({
|
||||
labels: labels,
|
||||
datasets: [dataset]
|
||||
},
|
||||
{
|
||||
scaleStepWidth: 1,
|
||||
pointDotRadius:1,
|
||||
scaleOverride: true,
|
||||
scaleSteps: labels.length
|
||||
});
|
||||
newLineChart('#containers-started-chart', containers, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
|
||||
});
|
||||
}
|
||||
}, function(e) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="span12">
|
||||
<div class="span6">
|
||||
<h3>Running Containers</h3>
|
||||
|
|
@ -22,10 +22,27 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="span6 pull-right">
|
||||
<h3 style="float:right">Status</h3>
|
||||
<canvas id="containers-chart" style="float:right;">
|
||||
Get a better broswer... Your holding everyone back.
|
||||
</canvas>
|
||||
<div id="chart-legend" style="float:right;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="span12" id="stats">
|
||||
<hr />
|
||||
<h4>Containers created</h4>
|
||||
<canvas id="containers-started-chart" width="700" style="float:left">
|
||||
Get a better broswer... Your holding everyone back.
|
||||
</canvas>
|
||||
<h1 style="float:right">{{ totalContainers }}</h1>
|
||||
<hr />
|
||||
<h4>Images created</h4>
|
||||
<canvas id="images-created-chart" width="700" style="float:left">
|
||||
Get a better broswer... Your holding everyone back.
|
||||
</canvas>
|
||||
<h1 style="float:right">{{ totalImages }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue