1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00

feat(swarm-visualizer): swarm visualizer color by service (#1683)

This commit is contained in:
Mauro Cortellazzi 2018-03-01 23:10:14 +01:00 committed by Anthony Lapenna
parent 76aeee7237
commit 1b8d5e89d1
3 changed files with 26 additions and 7 deletions

View file

@ -19,6 +19,28 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
$('#refreshRateChange').fadeOut(1500);
};
function strToHash(str) {
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function hashToHexColor(hash) {
var color = '#';
for (var i = 0; i < 3;) {
color += ('00' + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2);
}
return color;
}
function stringToColor(str) {
var hash = strToHash(str);
var color = hashToHexColor(hash);
return color;
}
function stopRepeater() {
var repeater = $scope.repeater;
if (angular.isDefined(repeater)) {
@ -52,7 +74,7 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
}
function assignServiceName(services, tasks) {
function assignServiceInfo(services, tasks) {
for (var i = 0; i < services.length; i++) {
var service = services[i];
@ -61,6 +83,7 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
if (task.ServiceId === service.Id) {
task.ServiceName = service.Name;
task.ServiceColor = stringToColor(task.ServiceId);
}
}
}
@ -84,7 +107,7 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
function prepareVisualizerData(nodes, services, tasks) {
var visualizerData = {};
assignServiceName(services, tasks);
assignServiceInfo(services, tasks);
assignTasksToNode(nodes, tasks);
visualizerData.nodes = nodes;

View file

@ -97,7 +97,7 @@
<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="task task_{{ task.Status.State | visualizerTask }}" style="border: 2px solid {{task.ServiceColor}}" 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>