diff --git a/README.md b/README.md index 73502f72e..7c01f691a 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,12 @@ UI For Docker is a web interface for the Docker Remote API. The goal is to prov * Minimal dependencies - I really want to keep this project a pure html/js app. * Consistency - The web UI should be consistent with the commands found on the docker CLI. +## Supported Docker versions + +The current Docker version support policy is the following: `N` to `N-2` included where `N` is the latest version. + +At the moment, the following versions are supported: 1.9, 1.10 & 1.11. + ## Run ### Quickstart diff --git a/app/components/dashboard/dashboard.html b/app/components/dashboard/dashboard.html index b1b80222c..61ba5f16e 100644 --- a/app/components/dashboard/dashboard.html +++ b/app/components/dashboard/dashboard.html @@ -1,76 +1,131 @@ - + + + Dashboard
-
+
- -
- -
-
{{ containerData.total }}
-
Containers
+ + + + + + + + + + + + + + + + + + + + + +
Name{{ infoData.Name }}
Docker version{{ infoData.ServerVersion }}
CPU{{ infoData.NCPU }}
Memory{{ infoData.MemTotal|humansize }}
-
+
- -
- -
-
{{ containerData.running }}
-
Running
-
-
-
-
- - -
- -
-
{{ containerData.stopped }}
-
Stopped
-
-
-
-
- - -
- -
-
{{ containerData.ghost }}
-
Ghost
+ + + + + + + + + + + + + + + + + + + + + +
Nodes{{ infoData.SystemStatus[3][1] }}
Swarm version{{ infoData.ServerVersion|swarmversion }}
Total CPU{{ infoData.NCPU }}
Total memory{{ infoData.MemTotal|humansize }}
-
- - - - -

You are using an outdated browser. Please upgrade your browser to improve your experience.

-
-
-
+ - + +
+
diff --git a/app/components/dashboard/dashboardController.js b/app/components/dashboard/dashboardController.js index 5c348d8fb..404f78955 100644 --- a/app/components/dashboard/dashboardController.js +++ b/app/components/dashboard/dashboardController.js @@ -1,49 +1,83 @@ angular.module('dashboard', []) -.controller('DashboardController', ['$scope', 'Config', 'Container', 'Image', 'Settings', 'LineChart', -function ($scope, Config, Container, Image, Settings, LineChart) { +.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'Image', 'Network', 'Volume', 'Info', +function ($scope, $q, Config, Container, Image, Network, Volume, Info) { - $scope.containerData = {}; - - var buildCharts = function (data) { - $scope.containerData.total = data.length; - LineChart.build('#containers-started-chart', data, function (c) { - return new Date(c.Created * 1000).toLocaleDateString(); - }); - var s = $scope; - Image.query({}, function (d) { - s.totalImages = d.length; - LineChart.build('#images-created-chart', d, function (c) { - return new Date(c.Created * 1000).toLocaleDateString(); - }); - }); + $scope.containerData = { + total: 0 + }; + $scope.imageData = { + total: 0 + }; + $scope.networkData = { + total: 0 + }; + $scope.volumeData = { + total: 0 }; + function prepareContainerData(d) { + var running = 0; + var stopped = 0; + + var containers = d; + if (hiddenLabels) { + containers = hideContainers(d); + } + + for (var i = 0; i < containers.length; i++) { + var item = containers[i]; + if (item.Status.indexOf('Up') !== -1) { + running += 1; + } else if (item.Status.indexOf('Exit') !== -1) { + stopped += 1; + } + } + $scope.containerData.running = running; + $scope.containerData.stopped = stopped; + $scope.containerData.total = containers.length; + } + + function prepareImageData(d) { + var images = d; + var totalImageSize = 0; + for (var i = 0; i < images.length; i++) { + var item = images[i]; + totalImageSize += item.VirtualSize; + } + $scope.imageData.total = images.length; + $scope.imageData.size = totalImageSize; + } + + function prepareVolumeData(d) { + var volumes = d.Volumes; + $scope.volumeData.total = volumes.length; + } + + function prepareNetworkData(d) { + var networks = d; + $scope.networkData.total = networks.length; + } + + function prepareInfoData(d) { + var info = d; + $scope.infoData = info; + } + function fetchDashboardData() { - Container.query({all: 1}, function (d) { - var running = 0; - var ghost = 0; - var stopped = 0; - - var containers = d; - if (hiddenLabels) { - containers = hideContainers(d); - } - - for (var i = 0; i < containers.length; i++) { - var item = containers[i]; - if (item.Status === "Ghost") { - ghost += 1; - } else if (item.Status.indexOf('Exit') !== -1) { - stopped += 1; - } else { - running += 1; - } - } - $scope.containerData.running = running; - $scope.containerData.stopped = stopped; - $scope.containerData.ghost = ghost; - - buildCharts(containers); + $('#loadingViewSpinner').show(); + $q.all([ + Container.query({all: 1}).$promise, + Image.query({}).$promise, + Volume.query({}).$promise, + Network.query({}).$promise, + Info.get({}).$promise, + ]).then(function (d) { + prepareContainerData(d[0]); + prepareImageData(d[1]); + prepareVolumeData(d[2]); + prepareNetworkData(d[3]); + prepareInfoData(d[4]); + $('#loadingViewSpinner').hide(); }); } @@ -63,6 +97,7 @@ function ($scope, Config, Container, Image, Settings, LineChart) { }; Config.$promise.then(function (c) { + $scope.swarm = c.swarm; hiddenLabels = c.hiddenLabels; fetchDashboardData(); }); diff --git a/app/shared/filters.js b/app/shared/filters.js index f1b40abfb..f1e69027c 100644 --- a/app/shared/filters.js +++ b/app/shared/filters.js @@ -130,6 +130,12 @@ angular.module('dockerui.filters', []) return _.split(container.Names[0], '/')[2]; }; }) +.filter('swarmversion', function () { + 'use strict'; + return function (text) { + return _.split(text, '/')[1]; + }; +}) .filter('swarmhostname', function () { 'use strict'; return function (container) { diff --git a/assets/css/app.css b/assets/css/app.css index 5d99a5c85..300c7a496 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -165,3 +165,15 @@ input[type="radio"] { .clickable { cursor: pointer; } + +.text-icon { + margin-right: 5px; +} + +.green-icon { + color: #23ae89; +} + +.red-icon { + color: #ae2323; +}