github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(host): replace engine view with host view (#2255) 

* feat(engine-details): remove old panels

* feat(engine-details): add basic engine-details-panel component

* feat(engine-details): pass details to the different components

* feat(engine-details): replace host-view with host-overview

* feat(engine-details): add commaseperated filter

* feat(engine-details): add host-view container component

* feat(engine-details): add host-details component

* feat(engine-details): build host details object

* feat(engine-details): format engine version

* feat(engine-details): get details for one node

* feat(engine-details): pass is-agent from view

* feat(engine-details): replace old node view with a new component

* feat(engine-details): add swarm-node-details component

* feat(engine-details): remove isSwarm binding

* feat(engine-details): remove node-details and include in parent

* feat(engine-details): add labels-table component

* feat(engine-details): add update node service

* feat(engine-details): add update label functionality

* style(engine-details): remove whitespaces

* feat(engine-details): remove old node page

* feat(engine-details): pass is agent to host details

* feat(host-details): hide missing info

* feat(host-details): update node availability

* style(host-details): remove obsolete event object

* feat(host-details): fix labels not sending

* feat(host-details): remove flags for hiding data

* feat(host-details): create mock call to server for agent host info

* style(host-details): fix spelling mistake in filter's name

* feat(host-details): get info from agent

* feat(host-details): hide engine labels when empty

* feat(node-details): move labels table and save button

* feat(host-info): add different urls for refresh

* feat(host-details): show disk/devices info for agent

* feat(host-view): add loading indicator to devices-panel

* feat(host-details): add loading indicator to disks panel

* feat(host-details): show devices/disks on standalone agent

* refactor(host-details): remove default value

* refactor(host-details): remove redundant commaSeperated filter

* refactor(host-details): remove unused functions

* style(host-details): remove whitespace
pull/2340/head
Chaim Lev-Ari 2018-10-08 01:44:08 +03:00 committed by Anthony Lapenna
parent 275fcf5587
commit ca08b2fa2a
34 changed files with 737 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/agent/rest/host.js Normal file
View File

@ -0,0 +1,15 @@
angular.module('portainer.agent').factory('Host', [
'$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
function AgentFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
'use strict';
return $resource(
API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/host/:action',
{
endpointId: EndpointProvider.endpointID
},
{
info: { method: 'GET', params: { action: 'info' } }
}
);
}
]);

50
app/agent/services/agentService.js
View File

@ -1,24 +1,34 @@
angular.module('portainer.agent')
.factory('AgentService', ['$q', 'Agent', function AgentServiceFactory($q, Agent) {
'use strict';
var service = {};
angular.module('portainer.agent').factory('AgentService', [
'$q', 'Agent','HttpRequestHelper', 'Host',
function AgentServiceFactory($q, Agent, HttpRequestHelper, Host) {
'use strict';
var service = {};
service.agents = function() {
var deferred = $q.defer();
service.agents = agents;
service.hostInfo = hostInfo;
Agent.query({}).$promise
.then(function success(data) {
var agents = data.map(function (item) {
return new AgentViewModel(item);
});
deferred.resolve(agents);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve agents', err: err });
});
function hostInfo(nodeName) {
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
return Host.info().$promise;
}
return deferred.promise;
};
function agents() {
var deferred = $q.defer();
return service;
}]);
Agent.query({})
.$promise.then(function success(data) {
var agents = data.map(function(item) {
return new AgentViewModel(item);
});
deferred.resolve(agents);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve agents', err: err });
});
return deferred.promise;
}
return service;
}
]);

14
app/docker/__module.js
View File

@ -129,13 +129,12 @@ angular.module('portainer.docker', ['portainer.app'])
}
};
var engine = {
name: 'docker.engine',
url: '/engine',
var host = {
name: 'docker.host',
url: '/host',
views: {
'content@': {
templateUrl: 'app/docker/views/engine/engine.html',
controller: 'EngineController'
component: 'hostView'
}
}
};
@ -239,8 +238,7 @@ angular.module('portainer.docker', ['portainer.app'])
url: '/:id',
views: {
'content@': {
templateUrl: 'app/docker/views/nodes/edit/node.html',
controller: 'NodeController'
component: 'nodeDetailsView'
}
}
};
@ -428,7 +426,7 @@ angular.module('portainer.docker', ['portainer.app'])
$stateRegistryProvider.register(containerStats);
$stateRegistryProvider.register(docker);
$stateRegistryProvider.register(dashboard);
$stateRegistryProvider.register(engine);
$stateRegistryProvider.register(host);
$stateRegistryProvider.register(events);
$stateRegistryProvider.register(images);
$stateRegistryProvider.register(image);

2
app/docker/components/dockerSidebarContent/dockerSidebarContent.html
View File

@ -35,5 +35,5 @@
<a ui-sref="docker.swarm" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="$ctrl.standaloneManagement">
<a ui-sref="docker.engine" ui-sref-active="active">Engine <span class="menu-icon fa fa-th fa-fw"></span></a>
<a ui-sref="docker.host" ui-sref-active="active">Host <span class="menu-icon fa fa-th fa-fw"></span></a>
</li>

17
app/docker/components/host-overview/host-overview.html Normal file
View File

@ -0,0 +1,17 @@
<rd-header>
<rd-header-title title-text="Host overview">
<a data-toggle="tooltip" title="Refresh" ui-sref="{{$ctrl.refreshUrl}}" ui-sref-opts="{reload: true}">
<i class="fa fa-sync" aria-hidden="true"></i>
</a>
</rd-header-title>
<rd-header-content>Docker</rd-header-content>
</rd-header>
<host-details-panel host="$ctrl.hostDetails" is-agent="$ctrl.isAgent"></host-details-panel>
<engine-details-panel engine="$ctrl.engineDetails"></engine-details-panel>
<devices-panel ng-if="$ctrl.isAgent" devices="$ctrl.devices"></devices-panel>
<disks-panel ng-if="$ctrl.isAgent" disks="$ctrl.disks"></disks-panel>
<ng-transclude></ng-transclude>

12
app/docker/components/host-overview/host-overview.js Normal file
View File

@ -0,0 +1,12 @@
angular.module('portainer.docker').component('hostOverview', {
templateUrl: 'app/docker/components/host-overview/host-overview.html',
bindings: {
hostDetails: '<',
engineDetails: '<',
devices: '<',
disks: '<',
isAgent: '<',
refreshUrl: '@'
},
transclude: true
});

31
app/docker/components/host-view-panels/devices-panel/devices-panel.html Normal file
View File

@ -0,0 +1,31 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-code" title-text="PCI Devices"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Vendor</th>
</tr>
</thead>
<tbody>
<tr ng-if="$ctrl.devices && $ctrl.devices.length" ng-repeat="device in $ctrl.devices">
<td>{{device.Name}}</td>
<td>{{device.Vendor}}</td>
</tr>
<tr ng-if="!$ctrl.devices">
<td colspan="2" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="$ctrl.devices.length === 0">
<td colspan="2" class="text-center text-muted">
No device available.
</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>

7
app/docker/components/host-view-panels/devices-panel/devices-panel.js Normal file
View File

@ -0,0 +1,7 @@
angular.module('portainer.docker').component('devicesPanel', {
templateUrl:
'app/docker/components/host-view-panels/devices-panel/devices-panel.html',
bindings: {
devices: '<'
}
});

31
app/docker/components/host-view-panels/disks-panel/disks-panel.html Normal file
View File

@ -0,0 +1,31 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-code" title-text="Physical Disks"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<thead>
<tr>
<th>Vendor</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr ng-if="$ctrl.disks" ng-repeat="disk in $ctrl.disks">
<td>{{disk.Vendor}}</td>
<td>{{disk.Size | humansize}}</td>
</tr>
<tr ng-if="!$ctrl.disks">
<td colspan="2" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="$ctrl.disks.length === 0">
<td colspan="2" class="text-center text-muted">
No disks available.
</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>

7
app/docker/components/host-view-panels/disks-panel/disks-panel.js Normal file
View File

@ -0,0 +1,7 @@
angular.module('portainer.docker').component('disksPanel', {
templateUrl:
'app/docker/components/host-view-panels/disks-panel/disks-panel.html',
bindings: {
disks: '<'
}
});

37
app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html Normal file
View File

@ -0,0 +1,37 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-code" title-text="Engine Details"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Version</td>
<td>{{ $ctrl.engine.releaseVersion }} <span ng-if="$ctrl.engine.apiVersion">(API: {{ $ctrl.engine.apiVersion }})</span></td>
</tr>
<tr ng-if="$ctrl.engine.rootDirectory">
<td>Root directory</td>
<td>{{ $ctrl.engine.rootDirectory }}</td>
</tr>
<tr ng-if="$ctrl.engine.storageDriver">
<td>Storage Driver</td>
<td>{{ $ctrl.engine.storageDriver }}</td>
</tr>
<tr ng-if="$ctrl.engine.loggingDriver">
<td>Logging Driver</td>
<td>{{ $ctrl.engine.loggingDriver }}</td>
</tr>
<tr>
<td>Volume Plugins</td>
<td>{{ $ctrl.engine.volumePlugins | arraytostr: ', ' }}</td>
</tr>
<tr>
<td>Network Plugins</td>
<td>{{ $ctrl.engine.networkPlugins | arraytostr: ', ' }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>

7
app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.js Normal file
View File

@ -0,0 +1,7 @@
angular.module('portainer.docker').component('engineDetailsPanel', {
templateUrl:
'app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html',
bindings: {
engine: '<'
}
});

34
app/docker/components/host-view-panels/host-details-panel/host-details-panel.html Normal file
View File

@ -0,0 +1,34 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-code" title-text="Host Details"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Hostname</td>
<td>{{ $ctrl.host.name }}</td>
</tr>
<tr ng-if="$ctrl.host.os">
<td>OS Information</td>
<td>{{ $ctrl.host.os.type }} {{$ctrl.host.os.arch}}
{{$ctrl.host.os.name}}</td>
</tr>
<tr ng-if="$ctrl.host.kernelVersion">
<td>Kernel Version</td>
<td>{{ $ctrl.host.kernelVersion }}</td>
</tr>
<tr>
<td>Total CPU</td>
<td>{{ $ctrl.host.totalCPU }}</td>
</tr>
<tr>
<td>Total memory</td>
<td>{{ $ctrl.host.totalMemory | humansize }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>

8
app/docker/components/host-view-panels/host-details-panel/host-details-panel.js Normal file
View File

@ -0,0 +1,8 @@
angular.module('portainer.docker').component('hostDetailsPanel', {
templateUrl:
'app/docker/components/host-view-panels/host-details-panel/host-details-panel.html',
bindings: {
host: '<',
isAgent: '<'
}
});

11
app/docker/components/host-view-panels/node-availability-select/node-availability-select-controller.js Normal file
View File

@ -0,0 +1,11 @@
angular
.module('portainer.docker')
.controller('NodeAvailabilitySelectController', [
function NodeAvailabilitySelectController() {
this.onChange = onChange;
function onChange() {
this.onSave({ availability: this.availability });
}
}
]);

8
app/docker/components/host-view-panels/node-availability-select/node-availability-select.html Normal file
View File

@ -0,0 +1,8 @@
<div class="input-group input-group-sm">
<select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability"
ng-change="$ctrl.onChange()">
<option value="active">Active</option>
<option value="pause">Pause</option>
<option value="drain">Drain</option>
</select>
</div>

10
app/docker/components/host-view-panels/node-availability-select/node-availability-select.js Normal file
View File

@ -0,0 +1,10 @@
angular.module('portainer.docker').component('nodeAvailabilitySelect', {
templateUrl:
'app/docker/components/host-view-panels/node-availability-select/node-availability-select.html',
controller: 'NodeAvailabilitySelectController',
bindings: {
availability: '<',
originalValue: '<',
onSave: '&'
}
});

23
app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js Normal file
View File

@ -0,0 +1,23 @@
angular.module('portainer.docker').controller('NodeLabelsTableController', [
function NodeLabelsTableController() {
var ctrl = this;
ctrl.removeLabel = removeLabel;
ctrl.updateLabel = updateLabel;
function removeLabel(index) {
var label = ctrl.labels.splice(index, 1);
if (label !== null) {
ctrl.onChangedLabels({ labels: ctrl.labels });
}
}
function updateLabel(label) {
if (
label.value !== label.originalValue ||
label.key !== label.originalKey
) {
ctrl.onChangedLabels({ labels: ctrl.labels });
}
}
}
]);

35
app/docker/components/host-view-panels/node-labels-table/node-labels-table.html Normal file
View File

@ -0,0 +1,35 @@
<div ng-if="!$ctrl.labels.length">
There are no labels for this node.
</div>
<table class="table" ng-if="$ctrl.labels.length">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="label in $ctrl.labels">
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon fit-text-size">Name</span>
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo"
ng-change="$ctrl.updateLabel(label)">
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon fit-text-size">Value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"
ng-change="$ctrl.updateLabel(label)">
<span class="input-group-btn">
<button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</span>
</div>
</td>
</tr>
</tbody>
</table>

9
app/docker/components/host-view-panels/node-labels-table/node-labels-table.js Normal file
View File

@ -0,0 +1,9 @@
angular.module('portainer.docker').component('nodeLabelsTable', {
templateUrl:
'app/docker/components/host-view-panels/node-labels-table/node-labels-table.html',
controller: 'NodeLabelsTableController',
bindings: {
labels: '<',
onChangedLabels: '&'
}
});

96
app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel-controller.js Normal file
View File

@ -0,0 +1,96 @@
angular
.module('portainer.docker')
.controller('SwarmNodeDetailsPanelController', [
'NodeService', 'LabelHelper', 'Notifications', '$state',
function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
var ctrl = this;
ctrl.state = {
managerAddress: '',
hasChanges: false
};
ctrl.$onChanges = $onChanges;
ctrl.addLabel = addLabel;
ctrl.updateNodeLabels = updateNodeLabels;
ctrl.updateNodeAvailability = updateNodeAvailability;
ctrl.saveChanges = saveChanges;
ctrl.cancelChanges = cancelChanges;
var managerRole = 'manager';
function $onChanges() {
if (!ctrl.details) {
return;
}
if (ctrl.details.role === managerRole) {
ctrl.state.managerAddress = '(' + ctrl.details.managerAddress + ')';
}
}
function addLabel() {
ctrl.details.nodeLabels.push({
key: '',
value: '',
originalValue: '',
originalKey: ''
});
}
function updateNodeLabels(labels) {
ctrl.details.nodeLabels = labels;
ctrl.state.hasChanges = true;
}
function updateNodeAvailability(availability) {
ctrl.details.availability = availability;
ctrl.state.hasChanges = true;
}
function saveChanges() {
var originalNode = ctrl.originalNode;
var config = {
Name: originalNode.Name,
Availability: ctrl.details.availability,
Role: originalNode.Role,
Labels: LabelHelper.fromKeyValueToLabelHash(ctrl.details.nodeLabels),
Id: originalNode.Id,
Version: originalNode.Version
};
NodeService.updateNode(config)
.then(onUpdateSuccess)
.catch(notifyOnError);
function onUpdateSuccess() {
Notifications.success('Node successfully updated', 'Node updated');
$state.go(
'docker.nodes.node',
{ id: originalNode.Id },
{ reload: true }
);
}
function notifyOnError(error) {
Notifications.error('Failure', error, 'Failed to update node');
}
}
function cancelChanges() {
cancelLabelChanges();
ctrl.details.availability = ctrl.originalNode.Availability;
ctrl.state.hasChanges = false;
}
function cancelLabelChanges() {
ctrl.details.nodeLabels = ctrl.details.nodeLabels
.filter(function(label) {
return label.originalValue || label.originalKey;
})
.map(function(label) {
return Object.assign(label, {
value: label.originalValue,
key: label.originalKey
});
});
}
}
]);

75
app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html Normal file
View File

@ -0,0 +1,75 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-code" title-text="Node Details"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr ng-if="$ctrl.details.name">
<td>Node name</td>
<td>{{ $ctrl.details.name }}</td>
</tr>
<tr>
<td>Role</td>
<td>{{ $ctrl.details.role }} {{ $ctrl.state.managerAddress }}</td>
</tr>
<tr>
<td>Availability</td>
<td>
<node-availability-select on-save="$ctrl.updateNodeAvailability(availability)"
availability="$ctrl.details.availability" original-value="$ctrl.details.availability">
</node-availability-select>
</td>
</tr>
<tr>
<td>Status</td>
<td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{
$ctrl.details.status }}</span></td>
</tr>
<tr ng-if=" $ctrl.details.engineLabels.length">
<td>Engine Labels</td>
<td>{{ $ctrl.details.engineLabels | arraytostr:', ' }}</td>
</tr>
<tr>
<td>
<div class="nopadding">
<a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)">
<i class="fa fa-plus-circle" aria-hidden="true"></i> label
</a>
</div>
Node Labels
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<node-labels-table labels="$ctrl.details.nodeLabels"
on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
</td>
</tr>
<tr>
<td>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm"
ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()">
Apply changes
</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="$ctrl.cancelChanges()">Reset changes</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>

9
app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.js Normal file
View File

@ -0,0 +1,9 @@
angular.module('portainer.docker').component('swarmNodeDetailsPanel', {
templateUrl:
'app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html',
controller: 'SwarmNodeDetailsPanelController',
bindings: {
details: '<',
originalNode: '<'
}
});

64
app/docker/services/nodeService.js
View File

@ -1,24 +1,48 @@
angular.module('portainer.docker')
.factory('NodeService', ['$q', 'Node', function NodeServiceFactory($q, Node) {
'use strict';
var service = {};
angular.module('portainer.docker').factory('NodeService', [
'$q', 'Node',
function NodeServiceFactory($q, Node) {
'use strict';
var service = {};
service.nodes = function() {
var deferred = $q.defer();
service.nodes = nodes;
service.node = node;
service.updateNode = updateNode;
Node.query({}).$promise
.then(function success(data) {
var nodes = data.map(function (item) {
return new NodeViewModel(item);
});
deferred.resolve(nodes);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve nodes', err: err });
});
function node(id) {
var deferred = $q.defer();
Node.get({ id: id })
.$promise.then(function onNodeLoaded(rawNode) {
var node = new NodeViewModel(rawNode);
return deferred.resolve(node);
})
.catch(function onFailed(err) {
deferred.reject({ msg: 'Unable to retrieve node', err: err });
});
return deferred.promise;
};
return deferred.promise;
}
return service;
}]);
function nodes() {
var deferred = $q.defer();
Node.query({})
.$promise.then(function success(data) {
var nodes = data.map(function(item) {
return new NodeViewModel(item);
});
deferred.resolve(nodes);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve nodes', err: err });
});
return deferred.promise;
}
function updateNode(node) {
return Node.update({ id: node.Id, version: node.Version }, node).$promise;
}
return service;
}
]);

118
app/docker/views/engine/engine.html
View File

@ -1,118 +0,0 @@
<rd-header>
<rd-header-title title-text="Engine overview">
<a data-toggle="tooltip" title="Refresh" ui-sref="docker.engine" ui-sref-opts="{reload: true}">
<i class="fa fa-sync" aria-hidden="true"></i>
</a>
</rd-header-title>
<rd-header-content>Docker</rd-header-content>
</rd-header>
<div class="row" ng-if="info && version">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-code" title-text="Engine version"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Version</td>
<td>{{ version.Version }}</td>
</tr>
<tr>
<td>API version</td>
<td>{{ version.ApiVersion }}</td>
</tr>
<tr>
<td>Go version</td>
<td>{{ version.GoVersion }}</td>
</tr>
<tr>
<td>OS type</td>
<td>{{ version.Os }}</td>
</tr>
<tr>
<td>OS</td>
<td>{{ info.OperatingSystem }}</td>
</tr>
<tr>
<td>Architecture</td>
<td>{{ version.Arch }}</td>
</tr>
<tr>
<td>Kernel version</td>
<td>{{ version.KernelVersion }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="info && version">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-th" title-text="Engine status"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Total CPU</td>
<td>{{ info.NCPU }}</td>
</tr>
<tr>
<td>Total memory</td>
<td>{{ info.MemTotal|humansize }}</td>
</tr>
<tr>
<td>Docker root directory</td>
<td>{{ info.DockerRootDir }}</td>
</tr>
<tr>
<td>Storage driver</td>
<td>{{ info.Driver }}</td>
</tr>
<tr>
<td>Logging driver</td>
<td>{{ info.LoggingDriver }}</td>
</tr>
<tr ng-if="info.CgroupDriver">
<td>Cgroup driver</td>
<td>{{ info.CgroupDriver }}</td>
</tr>
<tr ng-if="info.ExecutionDriver">
<td>Execution driver</td>
<td>{{ info.ExecutionDriver }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="info && info.Plugins">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-plug" title-text="Engine plugins"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr ng-if="info.Plugins.Volume">
<td>Volume</td>
<td>{{ info.Plugins.Volume|arraytostr: ', '}}</td>
</tr>
<tr ng-if="info.Plugins.Network">
<td>Network</td>
<td>{{ info.Plugins.Network|arraytostr: ', '}}</td>
</tr>
<tr ng-if="info.Plugins.Authorization">
<td>Authorization</td>
<td>{{ info.Plugins.Authorization|arraytostr: ', '}}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>

22
app/docker/views/engine/engineController.js
View File

@ -1,22 +0,0 @@
angular.module('portainer.docker')
.controller('EngineController', ['$q', '$scope', 'SystemService', 'Notifications',
function ($q, $scope, SystemService, Notifications) {
function initView() {
$q.all({
version: SystemService.version(),
info: SystemService.info()
})
.then(function success(data) {
$scope.version = data.version;
$scope.info = data.info;
})
.catch(function error(err) {
$scope.info = {};
$scope.version = {};
Notifications.error('Failure', err, 'Unable to retrieve engine details');
});
}
initView();
}]);

70
app/docker/views/host/host-view-controller.js Normal file
View File

@ -0,0 +1,70 @@
angular.module('portainer.docker').controller('HostViewController', [
'$q', 'SystemService', 'Notifications', 'StateManager', 'AgentService',
function HostViewController($q, SystemService, Notifications, StateManager, AgentService) {
var ctrl = this;
this.$onInit = initView;
ctrl.state = {
isAgent: false
};
this.engineDetails = {};
this.hostDetails = {};
function initView() {
var applicationState = StateManager.getState();
ctrl.state.isAgent = applicationState.endpoint.mode.agentProxy;
$q.all({
version: SystemService.version(),
info: SystemService.info()
})
.then(function success(data) {
ctrl.engineDetails = buildEngineDetails(data);
ctrl.hostDetails = buildHostDetails(data.info);
if (ctrl.state.isAgent) {
return AgentService.hostInfo(data.info.Hostname).then(function onHostInfoLoad(agentHostInfo) {
ctrl.devices = agentHostInfo.PCIDevices;
ctrl.disks = agentHostInfo.PhysicalDisks;
});
}
})
.catch(function error(err) {
Notifications.error(
'Failure',
err,
'Unable to retrieve engine details'
);
});
}
function buildEngineDetails(data) {
var versionDetails = data.version;
var info = data.info;
return {
releaseVersion: versionDetails.Version,
apiVersion: versionDetails.ApiVersion,
rootDirectory: info.DockerRootDir,
storageDriver: info.Driver,
loggingDriver: info.LoggingDriver,
volumePlugins: info.Plugins.Volume,
networkPlugins: info.Plugins.Network
};
}
function buildHostDetails(info) {
return {
os: {
arch: info.Architecture,
type: info.OSType,
name: info.OperatingSystem
},
name: info.Name,
kernelVersion: info.KernelVersion,
totalCPU: info.NCPU,
totalMemory: info.MemTotal
};
}
}
]);

8
app/docker/views/host/host-view.html Normal file
View File

@ -0,0 +1,8 @@
<host-overview
engine-details="$ctrl.engineDetails"
host-details="$ctrl.hostDetails"
refresh-url="docker.host"
is-agent="$ctrl.state.isAgent"
disks="$ctrl.disks"
devices="$ctrl.devices"
></host-overview>

4
app/docker/views/host/host-view.js Normal file
View File

@ -0,0 +1,4 @@
angular.module('portainer.docker').component('hostView', {
templateUrl: 'app/docker/views/host/host-view.html',
controller: 'HostViewController'
});

243
app/docker/views/nodes/edit/node.html
View File

@ -1,243 +0,0 @@
<rd-header>
<rd-header-title title-text="Node details">
<a data-toggle="tooltip" title="Refresh" ui-sref="docker.nodes.node({id: node.Id})" ui-sref-opts="{reload: true}">
<i class="fa fa-sync" aria-hidden="true"></i>
</a>
</rd-header-title>
<rd-header-content>
<a ui-sref="docker.swarm">Swarm nodes</a> &gt; <a ui-sref="docker.nodes.node({id: node.Id})">{{ node.Hostname }}</a>
</rd-header-content>
</rd-header>
<div class="row" ng-if="!node">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-if="loading">
<i class="fa fa-cog fa-spin"></i> Loading...
</div>
<rd-widget ng-if="!loading">
<rd-widget-header icon="fa-object-group" title-text="Node does not exist"></rd-widget-header>
<rd-widget-body>
<p>It looks like the node you wish to inspect does not exist.</p>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="node">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-object-group" title-text="Node specification"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text" class="input-sm" ng-model="node.Name" placeholder="e.g. my-manager" ng-change="updateNodeAttribute(node, 'Name')">
</td>
</tr>
<tr>
<td>Host name</td>
<td>{{ node.Hostname }}</td>
</tr>
<tr>
<td>Role</td>
<td>{{ node.Role }}</td>
</tr>
<tr>
<td>Availability</td>
<td>
<div class="input-group input-group-sm">
<select name="nodeAvailability" class="selectpicker form-control" ng-model="node.Availability" ng-change="updateNodeAttribute(node, 'Availability')">
<option value="active">Active</option>
<option value="pause">Pause</option>
<option value="drain">Drain</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Status</td>
<td><span class="label label-{{ node.Status|nodestatusbadge }}">{{ node.Status }}</span></td>
</tr>
</tbody>
</table>
</rd-widget-body>
<rd-widget-footer>
<p class="small text-muted">
View the Docker Swarm mode Node documentation <a href="https://docs.docker.com/engine/swarm/manage-nodes/" target="self">here</a>.
</p>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" ng-disabled="!hasChanges(node, ['Name', 'Availability'])" ng-click="updateNode(node)">Apply changes</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="cancelChanges(node)">Reset changes</a></li>
</ul>
</div>
</div>
</rd-widget-footer>
</rd-widget>
</div>
</div>
<div class="row" ng-if="node && node.Role === 'manager'">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-object-group" title-text="Manager status"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Leader</td>
<td>
<span ng-if="node.Leader"><i class="fa fa-check green-icon" aria-hidden="true"></i> Yes</span>
<span ng-if="!node.Leader"><i class="fa fa-times red-icon" aria-hidden="true"></i> No</span>
</td>
</tr>
<tr>
<td>Reachability</td>
<td>{{ node.Reachability }}</td>
</tr>
<tr>
<td>Manager address</td>
<td>{{ node.ManagerAddr }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="node">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-object-group" title-text="Node description"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>CPU</td>
<td>{{ node.CPUs / 1000000000 }}</td>
</tr>
<tr>
<td>Memory</td>
<td>{{ node.Memory|humansize: 2 }}</td>
</tr>
<tr>
<td>Platform</td>
<td>{{ node.PlatformOS }} {{ node.PlatformArchitecture }} </td>
</tr>
<tr>
<td>Docker Engine version</td>
<td>{{ node.EngineVersion }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="node">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-object-group" title-text="Engine labels"></rd-widget-header>
<rd-widget-body ng-if="!node.EngineLabels || node.EngineLabels.length === 0">
<p>There are no engine labels for this node.</p>
</rd-widget-body>
<rd-widget-body classes="no-padding" ng-if="node.EngineLabels && node.EngineLabels.length > 0">
<table class="table">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="engineLabel in node.EngineLabels">
<td>{{ engineLabel.key }}</td>
<td>{{ engineLabel.value }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="node">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-tasks" title-text="Node labels">
<div class="nopadding">
<a class="btn btn-default btn-sm pull-right" ng-click="addLabel(node)">
<i class="fa fa-plus-circle" aria-hidden="true"></i> label
</a>
</div>
</rd-widget-header>
<rd-widget-body ng-if="!node.Labels || node.Labels.length === 0">
<p>There are no labels for this node.</p>
</rd-widget-body>
<rd-widget-body classes="no-padding" ng-if="node.Labels && node.Labels.length > 0">
<table class="table">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="label in node.Labels">
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon fit-text-size">name</span>
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(node, label)">
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon fit-text-size">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(node, label)">
<span class="input-group-btn">
<button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel(node, $index)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</rd-widget-body>
<rd-widget-footer>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(node, ['Labels'])" ng-click="updateNode(node)">Apply changes</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="cancelChanges(node)">Reset changes</a></li>
</ul>
</div>
</div>
</rd-widget-footer>
</rd-widget>
</div>
</div>
<div class="row" ng-if="node && tasks.length > 0">
<div class="col-sm-12">
<node-tasks-datatable
title-text="Tasks" title-icon="fa-tasks"
dataset="tasks" table-key="node-tasks"
order-by="Updated" reverse-order="true"
></node-tasks-datatable>
</div>
</div>

96
app/docker/views/nodes/edit/nodeController.js
View File

@ -1,96 +0,0 @@
angular.module('portainer.docker')
.controller('NodeController', ['$scope', '$state', '$transition$', 'LabelHelper', 'Node', 'NodeHelper', 'Task', 'Notifications',
function ($scope, $state, $transition$, LabelHelper, Node, NodeHelper, Task, Notifications) {
$scope.loading = true;
$scope.tasks = [];
var originalNode = {};
var editedKeys = [];
$scope.updateNodeAttribute = function updateNodeAttribute(node, key) {
editedKeys.push(key);
};
$scope.addLabel = function addLabel(node) {
node.Labels.push({ key: '', value: '', originalValue: '', originalKey: '' });
$scope.updateNodeAttribute(node, 'Labels');
};
$scope.removeLabel = function removeLabel(node, index) {
var removedElement = node.Labels.splice(index, 1);
if (removedElement !== null) {
$scope.updateNodeAttribute(node, 'Labels');
}
};
$scope.updateLabel = function updateLabel(node, label) {
if (label.value !== label.originalValue || label.key !== label.originalKey) {
$scope.updateNodeAttribute(node, 'Labels');
}
};
$scope.hasChanges = function(node, elements) {
if (!elements) {
elements = Object.keys(originalNode);
}
var hasChanges = false;
elements.forEach(function(key) {
hasChanges = hasChanges || ((editedKeys.indexOf(key) >= 0) && node[key] !== originalNode[key]);
});
return hasChanges;
};
$scope.cancelChanges = function(node) {
editedKeys.forEach(function(key) {
node[key] = originalNode[key];
});
editedKeys = [];
};
$scope.updateNode = function updateNode(node) {
var config = NodeHelper.nodeToConfig(node.Model);
config.Name = node.Name;
config.Availability = node.Availability;
config.Role = node.Role;
config.Labels = LabelHelper.fromKeyValueToLabelHash(node.Labels);
Node.update({ id: node.Id, version: node.Version }, config, function () {
Notifications.success('Node successfully updated', 'Node updated');
$state.go('docker.nodes.node', {id: node.Id}, {reload: true});
}, function (e) {
Notifications.error('Failure', e, 'Failed to update node');
});
};
function loadNodeAndTasks() {
$scope.loading = true;
if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
Node.get({ id: $transition$.params().id}, function(d) {
if (d.message) {
Notifications.error('Failure', e, 'Unable to inspect the node');
} else {
var node = new NodeViewModel(d);
originalNode = angular.copy(node);
$scope.node = node;
getTasks(d);
}
$scope.loading = false;
});
} else {
$scope.loading = false;
}
}
function getTasks(node) {
if (node) {
Task.query({filters: {node: [node.ID]}}, function (tasks) {
$scope.tasks = tasks.map(function (task) {
return new TaskViewModel(task);
});
}, function (e) {
Notifications.error('Failure', e, 'Unable to retrieve tasks associated to the node');
});
}
}
loadNodeAndTasks();
}]);

75
app/docker/views/nodes/node-details/node-details-view-controller.js Normal file
View File

@ -0,0 +1,75 @@
angular.module('portainer.docker').controller('NodeDetailsViewController', [
'$stateParams', 'NodeService', 'StateManager', 'AgentService',
function NodeDetailsViewController($stateParams, NodeService, StateManager, AgentService) {
var ctrl = this;
ctrl.$onInit = initView;
ctrl.state = {
isAgent: false
};
function initView() {
var applicationState = StateManager.getState();
ctrl.state.isAgent = applicationState.endpoint.mode.agentProxy;
var nodeId = $stateParams.id;
NodeService.node(nodeId).then(function(node) {
ctrl.originalNode = node;
ctrl.hostDetails = buildHostDetails(node);
ctrl.engineDetails = buildEngineDetails(node);
ctrl.nodeDetails = buildNodeDetails(node);
if (ctrl.state.isAgent) {
AgentService.hostInfo(node.Hostname).then(function onHostInfoLoad(
agentHostInfo
) {
ctrl.devices = agentHostInfo.PCIDevices;
ctrl.disks = agentHostInfo.PhysicalDisks;
});
}
});
}
function buildHostDetails(node) {
return {
os: {
arch: node.PlatformArchitecture,
type: node.PlatformOS
},
name: node.Hostname,
totalCPU: node.CPUs / 1e9,
totalMemory: node.Memory
};
}
function buildEngineDetails(node) {
return {
releaseVersion: node.EngineVersion,
volumePlugins: transformPlugins(node.Plugins, 'Volume'),
networkPlugins: transformPlugins(node.Plugins, 'Network')
};
}
function buildNodeDetails(node) {
return {
name: node.Name,
role: node.Role,
managerAddress: node.ManagerAddr,
availability: node.Availability,
status: node.Status,
engineLabels: node.EngineLabels,
nodeLabels: node.Labels
};
}
function transformPlugins(pluginsList, type) {
return pluginsList
.filter(function(plugin) {
return plugin.Type === type;
})
.map(function(plugin) {
return plugin.Name;
});
}
}
]);

13
app/docker/views/nodes/node-details/node-details-view.html Normal file
View File

@ -0,0 +1,13 @@
<host-overview
is-agent="$ctrl.state.isAgent"
host-details="$ctrl.hostDetails"
engine-details="$ctrl.engineDetails"
refresh-url="docker.nodes.node"
disks="$ctrl.disks"
devices="$ctrl.devices"
>
<swarm-node-details-panel
details="$ctrl.nodeDetails"
original-node="$ctrl.originalNode"
></swarm-node-details-panel>
</host-overview>

4
app/docker/views/nodes/node-details/node-details-view.js Normal file
View File

@ -0,0 +1,4 @@
angular.module('portainer.docker').component('nodeDetailsView', {
templateUrl: 'app/docker/views/nodes/node-details/node-details-view.html',
controller: 'NodeDetailsViewController'
});