diff --git a/css/app.css b/css/app.css index f967526d2..1dc27fbf8 100644 --- a/css/app.css +++ b/css/app.css @@ -109,3 +109,14 @@ overflow-y: scroll; overflow-x: hidden; } + +.legend { + width: 7em; +} + +.legend .title { + margin: 0.5em; + border-style: solid; + border-width: 0 0 0 1em; + padding: 0 0.3em; +} diff --git a/index.html b/index.html index ec17c1263..aa94a20e7 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,8 @@ + + diff --git a/js/controllers.js b/js/controllers.js index 9ccfa4f97..b5bdb938c 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -4,6 +4,51 @@ function MastheadController($scope) { } function DashboardController($scope, Container) { + $scope.predicate = '-Created'; + $scope.containers = []; + + Container.query({all: 1}, function(d) { + var running = 0 + var ghost = 0; + var stopped = 0; + + for (var i = 0; i < d.length; i++) { + var item = d[i]; + + if (item.Status === "Ghost") { + ghost += 1; + } else if (item.Status.indexOf('Exit') !== -1) { + stopped += 1; + } else { + running += 1; + $scope.containers.push(new ContainerViewModel(item)); + } + } + + var ctx = $("#containers-chart").get(0).getContext("2d"); + var c = new Chart(ctx); + var data = [ + { + value: running, + color: '#5bb75b', + title: 'Running' + }, // running + { + value: stopped, + color: '#C7604C', + title: 'Stopped' + }, // stopped + { + value: ghost, + color: '#E2EAE9', + title: 'Ghost' + } // ghost + ]; + + c.Doughnut(data, {}); + var lgd = $('#chart-legend').get(0); + legend(lgd, data); + }); } function MessageController($scope, Messages) { diff --git a/partials/dashboard.html b/partials/dashboard.html index 637460e30..2fd8fbbc7 100644 --- a/partials/dashboard.html +++ b/partials/dashboard.html @@ -3,6 +3,23 @@ +