Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-23 07:19:41 +02:00
Code Issues Releases Activity

Add a containers network tab to be able to easily visualize links and volumesFrom relations between containers.

Browse source
This commit is contained in:
Roger Abelenda 2015-04-25 14:02:24 -03:00
parent 964eac6d53
commit 7cda9a0c7b
17 changed files with 389 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

230
assets/js/angular-vis.js vendored Executable file
View file

@ -0,0 +1,230 @@
angular.module('ngVis', [])
.factory('VisDataSet', function () {
'use strict';
return function (data, options) {
// Create the new dataSets
return new vis.DataSet(data, options);
};
})
/**
* TimeLine directive
*/
.directive('visTimeline', function () {
'use strict';
return {
restrict: 'EA',
transclude: false,
scope: {
data: '=',
options: '=',
events: '='
},
link: function (scope, element, attr) {
var timelineEvents = [
'rangechange',
'rangechanged',
'timechange',
'timechanged'
];
// Declare the timeline
var timeline = null;
scope.$watch('data', function () {
// Sanity check
if (scope.data == null) {
return;
}
// If we've actually changed the data set, then recreate the graph
// We can always update the data by adding more data to the existing data set
if (timeline != null) {
timeline.destroy();
}
// Create the timeline object
timeline = new vis.Timeline(element[0]);
// Attach an event handler if defined
angular.forEach(scope.events, function (callback, event) {
if (timelineEvents.indexOf(String(event)) >= 0) {
timeline.on(event, callback);
}
});
// Set the options first
timeline.setOptions(scope.options);
// Add groups and items
if (scope.data.groups != null) {
timeline.setGroups(scope.data.groups);
}
if (scope.data.items != null) {
timeline.setItems(scope.data.items);
}
// onLoad callback
if (scope.events != null && scope.events.onload != null && angular.isFunction(scope.events.onload)) {
scope.events.onload(timeline);
}
});
scope.$watchCollection('options', function (options) {
if(timeline == null) {
return;
}
timeline.setOptions(options);
});
}
};
})
/**
* Directive for network chart.
*/
.directive('visNetwork', function () {
return {
restrict: 'EA',
transclude: false,
scope: {
data: '=',
options: '=',
events: '='
},
link: function (scope, element, attr) {
var networkEvents = [
'rangechange',
'rangechanged',
'timechange',
'timechanged'
];
var network = new vis.Network(element[0], scope.data, scope.options);
scope.$watch('data', function () {
// Sanity check
if (scope.data == null) {
return;
}
// If we've actually changed the data set, then recreate the graph
// We can always update the data by adding more data to the existing data set
// if (network !== undefined) {
// network.destroy();
// }
// Create the graph2d object
network = new vis.Network(element[0]);
// Attach an event handler if defined
angular.forEach(scope.events, function (callback, event) {
if (networkEvents.indexOf(String(event)) >= 0) {
network.on(event, callback);
}
});
// Set the options first
network.setOptions(scope.options);
network.setData(scope.data);
// onLoad callback
// if (scope.events != null && scope.events.onload != null && angular.isFunction(scope.events.onload)) {
// scope.events.onload(graph);
// }
});
scope.$watchCollection('options', function (options) {
if(network == null) {
return;
}
network.setOptions(options);
});
scope.$watch('events', function (events) {
angular.forEach(events, function (callback, event) {
if (['select', 'click', 'hoverNode', 'doubleClick'].indexOf(String(event)) >= 0) {
network.on(event, callback);
}
});
});
}
};
})
/**
* Directive for graph2d.
*/
.directive('visGraph2d', function () {
'use strict';
return {
restrict: 'EA',
transclude: false,
scope: {
data: '=',
options: '=',
events: '='
},
link: function (scope, element, attr) {
var graphEvents = [
'rangechange',
'rangechanged',
'timechange',
'timechanged'
];
// Create the chart
var graph = new vis.Graph2d(element[0]);
scope.$watch('data', function () {
// Sanity check
if (scope.data == null) {
return;
}
// If we've actually changed the data set, then recreate the graph
// We can always update the data by adding more data to the existing data set
if (graph != null) {
graph.destroy();
}
// Create the graph2d object
graph = new vis.Graph2d(element[0]);
// Attach an event handler if defined
angular.forEach(scope.events, function (callback, event) {
if (graphEvents.indexOf(String(event)) >= 0) {
graph.on(event, callback);
}
});
// Set the options first
graph.setOptions(scope.options);
// Add groups and items
if (scope.data.groups != null) {
graph.setGroups(scope.data.groups);
}
if (scope.data.items != null) {
graph.setItems(scope.data.items);
}
// onLoad callback
if (scope.events != null && scope.events.onload != null && angular.isFunction(scope.events.onload)) {
scope.events.onload(graph);
}
});
scope.$watchCollection('options', function (options) {
if(graph == null) {
return;
}
graph.setOptions(options);
});
}
};
})
;