mirror of
https://github.com/portainer/portainer.git
synced 2025-08-04 21:35:23 +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
|
|
@ -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> > <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>
|
||||
|
|
@ -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();
|
||||
|
||||
}]);
|
||||
|
|
@ -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
13
app/docker/views/nodes/node-details/node-details-view.html
Normal 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
4
app/docker/views/nodes/node-details/node-details-view.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
angular.module('portainer.docker').component('nodeDetailsView', {
|
||||
templateUrl: 'app/docker/views/nodes/node-details/node-details-view.html',
|
||||
controller: 'NodeDetailsViewController'
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue