mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 12:25:22 +02:00
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
This commit is contained in:
Chaim Lev-Ari
Anthony Lapenna
parent
275fcf5587
commit
ca08b2fa2a
34 changed files with 737 additions and 528 deletions
|
|
@ -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
17
app/docker/components/host-overview/host-overview.html
Normal 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
12
app/docker/components/host-overview/host-overview.js
Normal 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
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
angular.module('portainer.docker').component('devicesPanel', {
|
||||
templateUrl:
|
||||
'app/docker/components/host-view-panels/devices-panel/devices-panel.html',
|
||||
bindings: {
|
||||
devices: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
angular.module('portainer.docker').component('disksPanel', {
|
||||
templateUrl:
|
||||
'app/docker/components/host-view-panels/disks-panel/disks-panel.html',
|
||||
bindings: {
|
||||
disks: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
angular
|
||||
.module('portainer.docker')
|
||||
.controller('NodeAvailabilitySelectController', [
|
||||
function NodeAvailabilitySelectController() {
|
||||
this.onChange = onChange;
|
||||
|
||||
function onChange() {
|
||||
this.onSave({ availability: this.availability });
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: '&'
|
||||
}
|
||||
});
|
||||
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: '&'
|
||||
}
|
||||
});
|
||||
|
|
@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: '<'
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue