mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 13:55:21 +02:00
refactor(app): introduce new project structure for the frontend (#1623)
This commit is contained in:
Anthony Lapenna
GitHub
parent
e6422a6d75
commit
27dceadba1
354 changed files with 1518 additions and 1755 deletions
91
app/docker/views/swarm/swarm.html
Normal file
91
app/docker/views/swarm/swarm.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<rd-header>
|
||||
<rd-header-title title="Cluster overview">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="docker.swarm" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Swarm</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-object-group" title="Cluster status"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Nodes</td>
|
||||
<td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">{{ swarm.Nodes }}</td>
|
||||
<td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">{{ info.Swarm.Nodes }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<td>Images</td>
|
||||
<td>{{ info.Images }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<td>Swarm version</td>
|
||||
<td>{{ docker.Version|swarmversion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Docker API version</td>
|
||||
<td>{{ docker.ApiVersion }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<td>Strategy</td>
|
||||
<td>{{ swarm.Strategy }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total CPU</td>
|
||||
<td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">{{ info.NCPU }}</td>
|
||||
<td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">{{ totalCPU }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total memory</td>
|
||||
<td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">{{ info.MemTotal|humansize: 2 }}</td>
|
||||
<td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">{{ totalMemory|humansize: 2 }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<td>Operating system</td>
|
||||
<td>{{ info.OperatingSystem }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<td>Kernel version</td>
|
||||
<td>{{ info.KernelVersion }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<td>Go version</td>
|
||||
<td>{{ docker.GoVersion }}</td>
|
||||
</tr>
|
||||
<tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
|
||||
<td colspan="2">
|
||||
<div class="btn-group" role="group" aria-label="...">
|
||||
<a ui-sref="docker.swarm.visualizer"><i class="fa fa-object-group space-right" aria-hidden="true"></i>Go to cluster visualizer</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
|
||||
<nodes-ss-datatable
|
||||
title="Nodes" title-icon="fa-hdd-o"
|
||||
dataset="swarm.Status" table-key="nodes"
|
||||
order-by="name" show-text-filter="true"
|
||||
></nodes-ss-datatable>
|
||||
</div>
|
||||
<div class="col-sm-12" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
|
||||
<nodes-datatable
|
||||
title="Nodes" title-icon="fa-hdd-o"
|
||||
dataset="nodes" table-key="nodes"
|
||||
order-by="Hostname" show-text-filter="true"
|
||||
show-ip-address-column="applicationState.endpoint.apiVersion >= 1.25"
|
||||
access-to-node-details="!applicationState.application.authentication || isAdmin"
|
||||
></nodes-datatable>
|
||||
</div>
|
||||
</div>
|
||||
91
app/docker/views/swarm/swarmController.js
Normal file
91
app/docker/views/swarm/swarmController.js
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('SwarmController', ['$q', '$scope', 'SystemService', 'NodeService', 'Notifications', 'StateManager', 'Authentication',
|
||||
function ($q, $scope, SystemService, NodeService, Notifications, StateManager, Authentication) {
|
||||
$scope.info = {};
|
||||
$scope.docker = {};
|
||||
$scope.swarm = {};
|
||||
$scope.totalCPU = 0;
|
||||
$scope.totalMemory = 0;
|
||||
|
||||
function extractSwarmInfo(info) {
|
||||
// Swarm info is available in SystemStatus object
|
||||
var systemStatus = info.SystemStatus;
|
||||
// Swarm strategy
|
||||
$scope.swarm[systemStatus[1][0]] = systemStatus[1][1];
|
||||
// Swarm filters
|
||||
$scope.swarm[systemStatus[2][0]] = systemStatus[2][1];
|
||||
// Swarm node count
|
||||
var nodes = systemStatus[0][1] === 'primary' ? systemStatus[3][1] : systemStatus[4][1];
|
||||
var node_count = parseInt(nodes, 10);
|
||||
$scope.swarm[systemStatus[3][0]] = node_count;
|
||||
|
||||
$scope.swarm.Status = [];
|
||||
extractNodesInfo(systemStatus, node_count);
|
||||
}
|
||||
|
||||
function extractNodesInfo(info, node_count) {
|
||||
// First information for node1 available at element #4 of SystemStatus if connected to a primary
|
||||
// If connected to a replica, information for node1 is available at element #5
|
||||
// The next 10 elements are information related to the node
|
||||
var node_offset = info[0][1] === 'primary' ? 4 : 5;
|
||||
for (i = 0; i < node_count; i++) {
|
||||
extractNodeInfo(info, node_offset);
|
||||
node_offset += 9;
|
||||
}
|
||||
}
|
||||
|
||||
function extractNodeInfo(info, offset) {
|
||||
var node = {};
|
||||
node.name = info[offset][0];
|
||||
node.ip = info[offset][1];
|
||||
node.Id = info[offset + 1][1];
|
||||
node.status = info[offset + 2][1];
|
||||
node.containers = info[offset + 3][1];
|
||||
node.cpu = info[offset + 4][1].split('/')[1];
|
||||
node.memory = info[offset + 5][1].split('/')[1];
|
||||
node.labels = info[offset + 6][1];
|
||||
node.version = info[offset + 8][1];
|
||||
$scope.swarm.Status.push(node);
|
||||
}
|
||||
|
||||
function processTotalCPUAndMemory(nodes) {
|
||||
var CPU = 0, memory = 0;
|
||||
angular.forEach(nodes, function(node) {
|
||||
CPU += node.CPUs;
|
||||
memory += node.Memory;
|
||||
});
|
||||
$scope.totalCPU = CPU / 1000000000;
|
||||
$scope.totalMemory = memory;
|
||||
}
|
||||
|
||||
function initView() {
|
||||
if (StateManager.getState().application.authentication) {
|
||||
var userDetails = Authentication.getUserDetails();
|
||||
var isAdmin = userDetails.role === 1 ? true: false;
|
||||
$scope.isAdmin = isAdmin;
|
||||
}
|
||||
|
||||
var provider = $scope.applicationState.endpoint.mode.provider;
|
||||
$q.all({
|
||||
version: SystemService.version(),
|
||||
info: SystemService.info(),
|
||||
nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes()
|
||||
})
|
||||
.then(function success(data) {
|
||||
$scope.docker = data.version;
|
||||
$scope.info = data.info;
|
||||
if (provider === 'DOCKER_SWARM_MODE') {
|
||||
var nodes = data.nodes;
|
||||
processTotalCPUAndMemory(nodes);
|
||||
$scope.nodes = nodes;
|
||||
} else {
|
||||
extractSwarmInfo(data.info);
|
||||
}
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve cluster details');
|
||||
});
|
||||
}
|
||||
|
||||
initView();
|
||||
}]);
|
||||
116
app/docker/views/swarm/visualizer/swarmVisualizerController.js
Normal file
116
app/docker/views/swarm/visualizer/swarmVisualizerController.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('SwarmVisualizerController', ['$q', '$scope', '$document', '$interval', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
|
||||
function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskService, Notifications) {
|
||||
|
||||
$scope.state = {
|
||||
ShowInformationPanel: true,
|
||||
DisplayOnlyRunningTasks: false,
|
||||
refreshRate: '5'
|
||||
};
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
stopRepeater();
|
||||
});
|
||||
|
||||
$scope.changeUpdateRepeater = function() {
|
||||
stopRepeater();
|
||||
setUpdateRepeater();
|
||||
$('#refreshRateChange').show();
|
||||
$('#refreshRateChange').fadeOut(1500);
|
||||
};
|
||||
|
||||
function stopRepeater() {
|
||||
var repeater = $scope.repeater;
|
||||
if (angular.isDefined(repeater)) {
|
||||
$interval.cancel(repeater);
|
||||
repeater = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setUpdateRepeater() {
|
||||
var refreshRate = $scope.state.refreshRate;
|
||||
$scope.repeater = $interval(function() {
|
||||
$q.all({
|
||||
nodes: NodeService.nodes(),
|
||||
services: ServiceService.services(),
|
||||
tasks: TaskService.tasks()
|
||||
})
|
||||
.then(function success(data) {
|
||||
var nodes = data.nodes;
|
||||
$scope.nodes = nodes;
|
||||
var services = data.services;
|
||||
$scope.services = services;
|
||||
var tasks = data.tasks;
|
||||
$scope.tasks = tasks;
|
||||
prepareVisualizerData(nodes, services, tasks);
|
||||
})
|
||||
.catch(function error(err) {
|
||||
stopRepeater();
|
||||
Notifications.error('Failure', err, 'Unable to retrieve cluster information');
|
||||
});
|
||||
}, refreshRate * 1000);
|
||||
}
|
||||
|
||||
|
||||
function assignServiceName(services, tasks) {
|
||||
for (var i = 0; i < services.length; i++) {
|
||||
var service = services[i];
|
||||
|
||||
for (var j = 0; j < tasks.length; j++) {
|
||||
var task = tasks[j];
|
||||
|
||||
if (task.ServiceId === service.Id) {
|
||||
task.ServiceName = service.Name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function assignTasksToNode(nodes, tasks) {
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
var node = nodes[i];
|
||||
node.Tasks = [];
|
||||
|
||||
for (var j = 0; j < tasks.length; j++) {
|
||||
var task = tasks[j];
|
||||
|
||||
if (task.NodeId === node.Id) {
|
||||
node.Tasks.push(task);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function prepareVisualizerData(nodes, services, tasks) {
|
||||
var visualizerData = {};
|
||||
|
||||
assignServiceName(services, tasks);
|
||||
assignTasksToNode(nodes, tasks);
|
||||
|
||||
visualizerData.nodes = nodes;
|
||||
$scope.visualizerData = visualizerData;
|
||||
}
|
||||
|
||||
function initView() {
|
||||
$q.all({
|
||||
nodes: NodeService.nodes(),
|
||||
services: ServiceService.services(),
|
||||
tasks: TaskService.tasks()
|
||||
})
|
||||
.then(function success(data) {
|
||||
var nodes = data.nodes;
|
||||
$scope.nodes = nodes;
|
||||
var services = data.services;
|
||||
$scope.services = services;
|
||||
var tasks = data.tasks;
|
||||
$scope.tasks = tasks;
|
||||
prepareVisualizerData(nodes, services, tasks);
|
||||
setUpdateRepeater();
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to initialize cluster visualizer');
|
||||
});
|
||||
}
|
||||
|
||||
initView();
|
||||
}]);
|
||||
114
app/docker/views/swarm/visualizer/swarmvisualizer.html
Normal file
114
app/docker/views/swarm/visualizer/swarmvisualizer.html
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<rd-header>
|
||||
<rd-header-title title="Swarm visualizer">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="docker.swarm.visualizer" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>
|
||||
<a ui-sref="docker.swarm">Swarm</a> > <a ui-sref="docker.swarm.visualizer">Cluster visualizer</a>
|
||||
</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-object-group" title="Cluster information">
|
||||
<div class="pull-right">
|
||||
<button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = true;" ng-if="!state.ShowInformationPanel">Show</button>
|
||||
<button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = false;" ng-if="state.ShowInformationPanel">Hide</button>
|
||||
</div>
|
||||
</rd-widget-header>
|
||||
<rd-widget-body ng-if="state.ShowInformationPanel">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Nodes</td>
|
||||
<td>{{ nodes.length }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Services</td>
|
||||
<td>{{ services.length }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tasks</td>
|
||||
<td>{{ tasks.length }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<form class="form-horizontal">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Filters
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label text-left">
|
||||
Only display running tasks
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" ng-model="state.DisplayOnlyRunningTasks"><i></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form class="form-horizontal">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Refresh
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="refreshRate" class="col-sm-1 margin-sm-top control-label text-left">
|
||||
Rate
|
||||
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="display: none;"></i>
|
||||
</label>
|
||||
<div class="col-sm-2">
|
||||
<select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
|
||||
<option value="5">5s</option>
|
||||
<option value="10">10s</option>
|
||||
<option value="30">30s</option>
|
||||
<option value="60">60s</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="visualizerData">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-object-group" title="Cluster visualizer"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<div class="visualizer_container">
|
||||
<div class="node" ng-repeat="node in visualizerData.nodes track by $index">
|
||||
<div class="node_info">
|
||||
<div>
|
||||
<div>
|
||||
<b>{{ node.Hostname }}</b>
|
||||
<span class="node_platform">
|
||||
<i class="fa fa-linux" aria-hidden="true" ng-if="node.PlatformOS === 'linux'"></i>
|
||||
<i class="fa fa-windows" aria-hidden="true" ng-if="node.PlatformOS === 'windows'"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ node.Role }}</div>
|
||||
<div>CPU: {{ node.CPUs / 1000000000 }}</div>
|
||||
<div>Memory: {{ node.Memory|humansize: 2 }}</div>
|
||||
<div><span class="label label-{{ node.Status | nodestatusbadge }}">{{ node.Status }}</span></div>
|
||||
</div>
|
||||
<div class="tasks">
|
||||
<div class="task task_{{ task.Status.State | visualizerTask }}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
|
||||
<div class="service_name">{{ task.ServiceName }}</div>
|
||||
<div>Image: {{ task.Spec.ContainerSpec.Image | hideshasum }}</div>
|
||||
<div>Status: {{ task.Status.State }}</div>
|
||||
<div>Update: {{ task.Updated | getisodate }}</div>
|
||||
<div ng-if="task.Spec.Resources.Limits.MemoryBytes">Memory limit: {{ task.Spec.Resources.Limits.MemoryBytes | humansize: 2:2 }}</div>
|
||||
<div ng-if="task.Spec.Resources.Limits.NanoCPUs">CPU limit: {{ task.Spec.Resources.Limits.NanoCPUs / 1000000000 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue