mirror of https://github.com/portainer/portainer
merge branch feat54-revamp-internal into internal
Anthony Lapenna
commit
a4a82b4502
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,76 +1,131 @@
|
|||
<rd-header>
|
||||
<rd-header-title title="Home"></rd-header-title>
|
||||
<rd-header-title title="Home">
|
||||
<i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Dashboard</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12" ng-if="!swarm">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon blue pull-left">
|
||||
<i class="fa fa-tasks"></i>
|
||||
</div>
|
||||
<div class="title">{{ containerData.total }}</div>
|
||||
<div class="comment">Containers</div>
|
||||
<rd-widget-header icon="fa-cogs" title="Node info"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>{{ infoData.Name }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Docker version</td>
|
||||
<td>{{ infoData.ServerVersion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CPU</td>
|
||||
<td>{{ infoData.NCPU }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Memory</td>
|
||||
<td>{{ infoData.MemTotal|humansize }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon green pull-left">
|
||||
<i class="fa fa-tasks"></i>
|
||||
</div>
|
||||
<div class="title">{{ containerData.running }}</div>
|
||||
<div class="comment">Running</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon red pull-left">
|
||||
<i class="fa fa-tasks"></i>
|
||||
</div>
|
||||
<div class="title">{{ containerData.stopped }}</div>
|
||||
<div class="comment">Stopped</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon gray pull-left">
|
||||
<i class="fa fa-tasks"></i>
|
||||
</div>
|
||||
<div class="title">{{ containerData.ghost }}</div>
|
||||
<div class="comment">Ghost</div>
|
||||
<rd-widget-header icon="fa-cogs" title="Cluster info"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Nodes</td>
|
||||
<td>{{ infoData.SystemStatus[3][1] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Swarm version</td>
|
||||
<td>{{ infoData.ServerVersion|swarmversion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total CPU</td>
|
||||
<td>{{ infoData.NCPU }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total memory</td>
|
||||
<td>{{ infoData.MemTotal|humansize }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-tasks" title="Containers created"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<canvas id="containers-started-chart" width="770" height="230">
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
|
||||
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
</canvas>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
||||
<a ui-sref="containers">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon blue pull-left">
|
||||
<i class="fa fa-tasks"></i>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<div><i class="fa fa-heartbeat text-icon green-icon"></i>{{ containerData.running }} running</div>
|
||||
<div><i class="fa fa-heartbeat text-icon red-icon"></i>{{ containerData.stopped }} stopped</div>
|
||||
</div>
|
||||
<div class="title">{{ containerData.total }}</div>
|
||||
<div class="comment">Containers</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-clone" title="Images created"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<canvas id="images-created-chart" width="770" height="230">
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
|
||||
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
</canvas>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
||||
<a ui-sref="images">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon blue pull-left">
|
||||
<i class="fa fa-clone"></i>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<div><i class="fa fa-pie-chart text-icon"></i>{{ imageData.size|humansize }}</div>
|
||||
</div>
|
||||
<div class="title">{{ imageData.total }}</div>
|
||||
<div class="comment">Images</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
||||
<a ui-sref="volumes">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon blue pull-left">
|
||||
<i class="fa fa-cubes"></i>
|
||||
</div>
|
||||
<div class="pull-right" ng-if="infoData.Driver">
|
||||
<div><i class="fa fa-hdd-o text-icon"></i>{{ infoData.Driver }} driver</div>
|
||||
</div>
|
||||
<div class="title">{{ volumeData.total }}</div>
|
||||
<div class="comment">Volumes</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
||||
<a ui-sref="networks">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon blue pull-left">
|
||||
<i class="fa fa-sitemap"></i>
|
||||
</div>
|
||||
<div class="title">{{ networkData.total }}</div>
|
||||
<div class="comment">Networks</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -165,3 +165,15 @@ input[type="radio"] {
|
|||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.green-icon {
|
||||
color: #23ae89;
|
||||
}
|
||||
|
||||
.red-icon {
|
||||
color: #ae2323;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue