feat(swarm): display the IP address of each node when API Version >= … (#595)

pull/601/head
Anthony Lapenna 8 years ago committed by GitHub
parent 781dad3e17
commit 85a07237b1

@ -163,57 +163,65 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<a ui-sref="swarm" ng-click="order('Description.Hostname')"> <a ui-sref="swarm" ng-click="order('Hostname')">
Name Name
<span ng-show="sortType == 'Description.Hostname' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <span ng-show="sortType == 'Hostname' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Description.Hostname' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <span ng-show="sortType == 'Hostname' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ui-sref="swarm" ng-click="order('Spec.Role')"> <a ui-sref="swarm" ng-click="order('Role')">
Role Role
<span ng-show="sortType == 'Spec.Role' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <span ng-show="sortType == 'Role' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Spec.Role' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <span ng-show="sortType == 'Role' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ui-sref="swarm" ng-click="order('Description.Resources.NanoCPUs')"> <a ui-sref="swarm" ng-click="order('CPUs')">
CPU CPU
<span ng-show="sortType == 'Description.Resources.NanoCPUs' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <span ng-show="sortType == 'CPUs' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Description.Resources.NanoCPUs' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <span ng-show="sortType == 'CPUs' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ui-sref="swarm" ng-click="order('Description.Resources.MemoryBytes')"> <a ui-sref="swarm" ng-click="order('Memory')">
Memory Memory
<span ng-show="sortType == 'Description.Resources.MemoryBytes' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <span ng-show="sortType == 'Memory' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Description.Resources.MemoryBytes' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <span ng-show="sortType == 'Memory' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ui-sref="swarm" ng-click="order('Description.Engine.EngineVersion')"> <a ui-sref="swarm" ng-click="order('EngineVersion')">
Engine Engine
<span ng-show="sortType == 'Description.Engine.EngineVersion' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <span ng-show="sortType == 'EngineVersion' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Description.Engine.EngineVersion' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <span ng-show="sortType == 'EngineVersion' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a>
</th>
<th ng-if="applicationState.endpoint.apiVersion >= 1.25">
<a ui-sref="swarm" ng-click="order('Addr')">
IP Address
<span ng-show="sortType == 'Addr' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Addr' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ui-sref="swarm" ng-click="order('node.Status.State')"> <a ui-sref="swarm" ng-click="order('Status')">
Status Status
<span ng-show="sortType == 'node.Status.State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'node.Status.State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a> </a>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr dir-paginate="node in (state.filteredNodes = (nodes | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))"> <tr dir-paginate="node in (state.filteredNodes = (nodes | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
<td><a ui-sref="node({id: node.ID})">{{ node.Description.Hostname }}</a></td> <td><a ui-sref="node({id: node.ID})">{{ node.Hostname }}</a></td>
<td>{{ node.Spec.Role }}</td> <td>{{ node.Role }}</td>
<td>{{ node.Description.Resources.NanoCPUs / 1000000000 }}</td> <td>{{ node.CPUs / 1000000000 }}</td>
<td>{{ node.Description.Resources.MemoryBytes|humansize }}</td> <td>{{ node.Memory|humansize }}</td>
<td>{{ node.Description.Engine.EngineVersion }}</td> <td>{{ node.EngineVersion }}</td>
<td><span class="label label-{{ node.Status.State|nodestatusbadge }}">{{ node.Status.State }}</span></td> <td ng-if="applicationState.endpoint.apiVersion >= 1.25">{{ node.Addr }}</td>
<td><span class="label label-{{ node.Status|nodestatusbadge }}">{{ node.Status }}</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

@ -28,7 +28,9 @@ function ($scope, Info, Version, Node, Pagination) {
$scope.info = d; $scope.info = d;
if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') { if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
Node.query({}, function(d) { Node.query({}, function(d) {
$scope.nodes = d; $scope.nodes = d.map(function (node) {
return new NodeViewModel(node);
});
var CPU = 0, memory = 0; var CPU = 0, memory = 0;
angular.forEach(d, function(node) { angular.forEach(d, function(node) {
CPU += node.Description.Resources.NanoCPUs; CPU += node.Description.Resources.NanoCPUs;

@ -27,6 +27,10 @@ function NodeViewModel(data) {
this.Plugins = data.Description.Engine.Plugins; this.Plugins = data.Description.Engine.Plugins;
this.Status = data.Status.State; this.Status = data.Status.State;
if (data.Status.Addr) {
this.Addr = data.Status.Addr;
}
if (data.ManagerStatus) { if (data.ManagerStatus) {
this.Leader = data.ManagerStatus.Leader; this.Leader = data.ManagerStatus.Leader;
this.Reachability = data.ManagerStatus.Reachability; this.Reachability = data.ManagerStatus.Reachability;

Loading…
Cancel
Save