From 0e41aec7f95a1246752c4f13b33d76665f53f62b Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 2 Sep 2013 14:51:35 -0700 Subject: [PATCH 1/2] Add chart to dashboard --- css/app.css | 11 ++++++++++ index.html | 2 ++ js/controllers.js | 45 +++++++++++++++++++++++++++++++++++++++++ partials/dashboard.html | 17 ++++++++++++++++ 4 files changed, 75 insertions(+) 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 @@ +
+
+

Running Containers

+ +
+
+ + Get a better broswer... Your holding everyone back. + +
+
+

DockerUI

From 7ae0b175732b607ffddc68ce58c185053fc334ce Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 2 Sep 2013 15:00:22 -0700 Subject: [PATCH 2/2] Improve messages --- index.html | 1 - js/controllers.js | 35 +++++++++-------------------------- partials/dashboard.html | 17 +++++++++-------- partials/messages.html | 4 ---- 4 files changed, 18 insertions(+), 39 deletions(-) delete mode 100644 partials/messages.html diff --git a/index.html b/index.html index aa94a20e7..9a5efea8e 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,6 @@
-
diff --git a/js/controllers.js b/js/controllers.js index b5bdb938c..606ada8d1 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -51,23 +51,6 @@ function DashboardController($scope, Container) { }); } -function MessageController($scope, Messages) { - $scope.template = 'partials/messages.html'; - $scope.messages = []; - $scope.$watch('messages.length', function(o, n) { - $('#message-display').show(); - }); - - $scope.$on(Messages.event, function(e, msg) { - $scope.messages.push(msg); - var s = $scope; - setTimeout(function() { - $('#message-display').hide('slow'); - s.messages = []; - }, 20000); - }); -} - function StatusBarController($scope, Settings) { $scope.template = 'partials/statusbar.html'; @@ -109,7 +92,7 @@ function ContainerController($scope, $routeParams, $location, Container, Message $scope.stop = function() { Container.stop({id: $routeParams.id}, function(d) { - Messages.success("Container stopped", $routeParams.id); + Messages.send("Container stopped", $routeParams.id); }, function(e) { Messages.error("Failure", "Container failed to stop." + e.data); }); @@ -117,7 +100,7 @@ function ContainerController($scope, $routeParams, $location, Container, Message $scope.kill = function() { Container.kill({id: $routeParams.id}, function(d) { - Messages.success("Container killed", $routeParams.id); + Messages.send("Container killed", $routeParams.id); }, function(e) { Messages.error("Failure", "Container failed to die." + e.data); }); @@ -125,7 +108,7 @@ function ContainerController($scope, $routeParams, $location, Container, Message $scope.remove = function() { Container.remove({id: $routeParams.id}, function(d) { - Messages.success("Container removed", $routeParams.id); + Messages.send("Container removed", $routeParams.id); }, function(e){ Messages.error("Failure", "Container failed to remove." + e.data); }); @@ -169,7 +152,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner }); }; - var batch = function(items, action) { + var batch = function(items, action, msg) { ViewSpinner.spin(); var counter = 0; var complete = function() { @@ -182,7 +165,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner if (c.Checked) { counter = counter + 1; action({id: c.Id}, function(d) { - Messages.error("Container Removed", c.Id); + Messages.send("Container " + msg, c.Id); var index = $scope.containers.indexOf(c); $scope.containers.splice(index, 1); complete(); @@ -211,19 +194,19 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner }; $scope.startAction = function() { - batch($scope.containers, Container.start); + batch($scope.containers, Container.start, "Started"); }; $scope.stopAction = function() { - batch($scope.containers, Container.stop); + batch($scope.containers, Container.stop, "Stopped"); }; $scope.killAction = function() { - batch($scope.containers, Container.kill); + batch($scope.containers, Container.kill, "Killed"); }; $scope.removeAction = function() { - batch($scope.containers, Container.remove); + batch($scope.containers, Container.remove, "Removed"); }; update({all: $scope.displayAll ? 1 : 0}); diff --git a/partials/dashboard.html b/partials/dashboard.html index 2fd8fbbc7..20c97f2a8 100644 --- a/partials/dashboard.html +++ b/partials/dashboard.html @@ -1,8 +1,16 @@ -
+
+
+
+

DockerUI

+

The Linux container engine

+ Learn more. +
+
+

Running Containers

@@ -20,11 +28,4 @@
-
-
-

DockerUI

-

The Linux container engine

- Learn more. -
-
diff --git a/partials/messages.html b/partials/messages.html deleted file mode 100644 index 90527bb6f..000000000 --- a/partials/messages.html +++ /dev/null @@ -1,4 +0,0 @@ - -