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

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

pull/1686/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/docker/views/swarm/visualizer/swarmVisualizerController.js
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;

2
app/docker/views/swarm/visualizer/swarmvisualizer.html
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>

4
assets/css/app.css
View File

@ -661,28 +661,24 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
}
.visualizer_container .node .tasks .task_running {
border: 2px solid #23ae89;
border-radius: 4px;
background-color: rgb(35, 174, 137);
background-color: rgba(35, 174, 137, 0.2);
}
.visualizer_container .node .tasks .task_stopped {
border: 2px solid #ae2323;
border-radius: 4px;
background-color: rgb(174, 35, 35);
background-color: rgba(174, 35, 35, 0.2);
}
.visualizer_container .node .tasks .task_warning {
border: 2px solid #f0ad4e;
border-radius: 4px;
background-color: rgb(240, 173, 78);
background-color: rgba(240, 173, 78, 0.2);
}
.visualizer_container .node .tasks .task_info {
border: 2px solid #46b8da;
border-radius: 4px;
background-color: rgb(70, 184, 218);
background-color: rgba(70, 184, 218, 0.2);