Refresh Graph
This commit is contained in:
Eole
parent
b0d79adc8e
commit
8b7ee2ca95
1 changed files with 195 additions and 193 deletions
|
|
@ -4,196 +4,198 @@
|
||||||
* @param {$scope} $scope The $scope service from angular
|
* @param {$scope} $scope The $scope service from angular
|
||||||
*/
|
*/
|
||||||
mainApp.controller('homeCtrl', ['$scope', 'Compute', '$rootScope', 'Loading', 'Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
|
mainApp.controller('homeCtrl', ['$scope', 'Compute', '$rootScope', 'Loading', 'Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
|
||||||
{
|
{
|
||||||
$scope.raiseShowMachineCreationEvent = function () {
|
|
||||||
$rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms);
|
graph = new joint.dia.Graph;
|
||||||
};
|
paper = new joint.dia.Paper({
|
||||||
var displayMachine = function () {
|
el: $('#graphHolder'),
|
||||||
|
width: $('#graphHolder').width(),
|
||||||
|
//height: test.height,
|
||||||
|
model: graph,
|
||||||
|
gridSize: 1,
|
||||||
var machineNames = [];
|
eractive: false
|
||||||
var i = 0;
|
});
|
||||||
$.each(Compute.getData().machines, function () {
|
|
||||||
machineNames[i] = [this.name, this.id];
|
$scope.raiseShowMachineCreationEvent = function () {
|
||||||
i++;
|
$rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms);
|
||||||
})
|
};
|
||||||
var vmList = {
|
|
||||||
'vms': machineNames
|
var displayMachine = function () {
|
||||||
/*'links': [
|
|
||||||
['VM 1', 'VM 2', '', ''],
|
var machineNames = [];
|
||||||
['VM 2', 'VM 3', 'I3', 'I4'],
|
var i = 0;
|
||||||
['VM 1', 'VM 3', 'I5', 'I6'],
|
$.each(Compute.getData().machines, function () {
|
||||||
['VM 2', 'VM 4', 'I5', 'I6'],
|
machineNames[i] = [this.name, this.id];
|
||||||
['VM 4', 'VM 5', 'I5', 'I6'],
|
i++;
|
||||||
['VM 4', 'VM 6', 'I5', 'I6'],
|
})
|
||||||
['VM 4', 'VM 1', 'I5', 'I6'],
|
var vmList = {
|
||||||
['VM 7', 'VM 4', 'I5', 'I6'],
|
'vms': machineNames
|
||||||
['VM 7', 'VM 3', 'I5', 'I6'],
|
/*'links': [
|
||||||
['VM 6', 'VM 8', 'I5', 'I6'],
|
['VM 1', 'VM 2', '', ''],
|
||||||
['VM 3', 'VM 9', 'I5', 'I6'],
|
['VM 2', 'VM 3', 'I3', 'I4'],
|
||||||
['VM 3', 'VM 10', 'I5', 'I6']
|
['VM 1', 'VM 3', 'I5', 'I6'],
|
||||||
]*/
|
['VM 2', 'VM 4', 'I5', 'I6'],
|
||||||
};
|
['VM 4', 'VM 5', 'I5', 'I6'],
|
||||||
//Custom element for inserting html
|
['VM 4', 'VM 6', 'I5', 'I6'],
|
||||||
joint.shapes.html = {};
|
['VM 4', 'VM 1', 'I5', 'I6'],
|
||||||
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
|
['VM 7', 'VM 4', 'I5', 'I6'],
|
||||||
defaults: joint.util.deepSupplement({
|
['VM 7', 'VM 3', 'I5', 'I6'],
|
||||||
type: 'html.Element',
|
['VM 6', 'VM 8', 'I5', 'I6'],
|
||||||
attrs: {
|
['VM 3', 'VM 9', 'I5', 'I6'],
|
||||||
rect: {stroke: 'none', 'fill-opacity': 0}
|
['VM 3', 'VM 10', 'I5', 'I6']
|
||||||
}
|
]*/
|
||||||
}, joint.shapes.basic.Rect.prototype.defaults)
|
};
|
||||||
});
|
//Custom element for inserting html
|
||||||
|
joint.shapes.html = {};
|
||||||
var graph = new joint.dia.Graph;
|
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
|
||||||
var paper = new joint.dia.Paper({
|
defaults: joint.util.deepSupplement({
|
||||||
el: $('#graphHolder'),
|
type: 'html.Element',
|
||||||
width: $('#graphHolder').width(),
|
attrs: {
|
||||||
//height: test.height,
|
rect: {stroke: 'none', 'fill-opacity': 0}
|
||||||
model: graph,
|
}
|
||||||
gridSize: 1,
|
}, joint.shapes.basic.Rect.prototype.defaults)
|
||||||
eractive: false
|
});
|
||||||
});
|
|
||||||
paper.$el.css('pointer-events', 'none');
|
|
||||||
var cells = buildGraphFromAdjacencyList(vmList);
|
this.paper.$el.css('pointer-events', 'none');
|
||||||
|
var cells = buildGraphFromAdjacencyList(vmList);
|
||||||
graph.addCells(cells);
|
|
||||||
var test = joint.layout.DirectedGraph.layout(graph, {
|
this.graph.addCells(cells);
|
||||||
etLinkVertices: false,
|
console.log(this.graph);
|
||||||
//Top to bottom generation
|
var test = joint.layout.DirectedGraph.layout(this.graph, {
|
||||||
ankDir: "TB",
|
etLinkVertices: false,
|
||||||
odeSep: 150,
|
//Top to bottom generation
|
||||||
dgeSep: 150,
|
ankDir: "TB",
|
||||||
ankSep: 50
|
odeSep: 150,
|
||||||
});
|
dgeSep: 150,
|
||||||
|
ankSep: 50
|
||||||
paper.setDimensions(test.width, test.height);
|
});
|
||||||
|
|
||||||
$(".Member").bind('click', function () {
|
this.paper.setDimensions(test.width, test.height);
|
||||||
$scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
|
|
||||||
});
|
$(".Member").bind('click', function () {
|
||||||
}
|
$scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
|
||||||
|
});
|
||||||
// Function to call after pull all data about machines
|
}
|
||||||
var callMeAfterPullData = function (data) {
|
|
||||||
//$scope.machines=Compute.getData().machines;
|
// Function to call after pull all data about machines
|
||||||
Loading.stop();
|
var callMeAfterPullData = function (data) {
|
||||||
displayMachine();
|
//$scope.machines=Compute.getData().machines;
|
||||||
};
|
Loading.stop();
|
||||||
|
displayMachine();
|
||||||
var tryToRetrieveData = function () {
|
};
|
||||||
// If no data retrieve about machine and user is logged
|
|
||||||
if (Compute.getData().machines == null && Identity.isAlreadyLogin()) {
|
var tryToRetrieveData = function () {
|
||||||
Loading.start(); // Show loading gif
|
// If no data retrieve about machine and user is logged
|
||||||
Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback
|
if (Compute.getData().machines == null && Identity.isAlreadyLogin()) {
|
||||||
} else {
|
Loading.start(); // Show loading gif
|
||||||
// Else if user is logged and data is already retrieve
|
Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback
|
||||||
// simply display data
|
} else {
|
||||||
if (Identity.isAlreadyLogin()) {
|
// Else if user is logged and data is already retrieve
|
||||||
callMeAfterPullData(); // Display data
|
// simply display data
|
||||||
}
|
if (Identity.isAlreadyLogin()) {
|
||||||
}
|
callMeAfterPullData(); // Display data
|
||||||
};
|
}
|
||||||
|
}
|
||||||
// On user login
|
};
|
||||||
$scope.$on('loginEvent', function () {
|
|
||||||
tryToRetrieveData();
|
// On user login
|
||||||
});
|
$scope.$on('loginEvent', function () {
|
||||||
|
tryToRetrieveData();
|
||||||
// Function to call from view to display the details of a machine
|
});
|
||||||
$scope.raiseShowMachineDetailsEvent = function (id) {
|
|
||||||
|
// Function to call from view to display the details of a machine
|
||||||
// Stop loading gif and display overlay
|
$scope.raiseShowMachineDetailsEvent = function (id) {
|
||||||
var callback = function () {
|
|
||||||
Loading.stop();
|
// Stop loading gif and display overlay
|
||||||
var data = Compute.getData();
|
var callback = function () {
|
||||||
|
Loading.stop();
|
||||||
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
|
var data = Compute.getData();
|
||||||
|
|
||||||
};
|
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
|
||||||
Loading.start(); // Show loading gif
|
|
||||||
Compute.pullMachines(callback); // Retrieve machine info and display overlay
|
};
|
||||||
};
|
Loading.start(); // Show loading gif
|
||||||
|
Compute.pullMachines(callback); // Retrieve machine info and display overlay
|
||||||
// Try to retrieve data for the first time
|
};
|
||||||
tryToRetrieveData();
|
|
||||||
|
// Try to retrieve data for the first time
|
||||||
|
tryToRetrieveData();
|
||||||
|
|
||||||
//Read the adjacencyList and build the elements and the links according to it
|
|
||||||
function buildGraphFromAdjacencyList(adjacencyList) {
|
|
||||||
|
//Read the adjacencyList and build the elements and the links according to it
|
||||||
var elements = [];
|
function buildGraphFromAdjacencyList(adjacencyList) {
|
||||||
var links = [];
|
|
||||||
|
var elements = [];
|
||||||
_.each(adjacencyList['vms'], function (vm) {
|
var links = [];
|
||||||
elements.push(makeElement(vm));
|
|
||||||
});
|
_.each(adjacencyList['vms'], function (vm) {
|
||||||
_.each(adjacencyList['links'], function (link) {
|
elements.push(makeElement(vm));
|
||||||
links.push(makeLink(link[0], link[1], link[2], link[3]));
|
});
|
||||||
});
|
_.each(adjacencyList['links'], function (link) {
|
||||||
// Links must be added after all the elements. This is because when the links
|
links.push(makeLink(link[0], link[1], link[2], link[3]));
|
||||||
// are added to the graph, link source/target
|
});
|
||||||
// elements must be in the graph already.
|
// Links must be added after all the elements. This is because when the links
|
||||||
return elements.concat(links);
|
// are added to the graph, link source/target
|
||||||
}
|
// elements must be in the graph already.
|
||||||
|
return elements.concat(links);
|
||||||
// On user login
|
}
|
||||||
$scope.$on('updateGraphEvent', function () {
|
|
||||||
displayMachine()
|
// On user login
|
||||||
});
|
$scope.$on('updateGraphEvent', function () {
|
||||||
//Return a new link linking the parent and child elements with the interfaces names given in parameters
|
displayMachine()
|
||||||
function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
|
});
|
||||||
|
//Return a new link linking the parent and child elements with the interfaces names given in parameters
|
||||||
return new joint.dia.Link({
|
function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
|
||||||
source: {id: parentElementLabel},
|
|
||||||
target: {id: childElementLabel},
|
return new joint.dia.Link({
|
||||||
labels: [
|
source: {id: parentElementLabel},
|
||||||
{position: 20, attrs: {text: {text: Iparent}}},
|
target: {id: childElementLabel},
|
||||||
{position: -20, attrs: {text: {text: Ichild}}}
|
labels: [
|
||||||
]
|
{position: 20, attrs: {text: {text: Iparent}}},
|
||||||
});
|
{position: -20, attrs: {text: {text: Ichild}}}
|
||||||
}
|
]
|
||||||
|
});
|
||||||
//Return a new element
|
}
|
||||||
function makeElement(vm) {
|
|
||||||
var label = vm[0];
|
//Return a new element
|
||||||
|
function makeElement(vm) {
|
||||||
var maxLineLength = _.max(label.split('\n'), function (l) {
|
var label = vm[0];
|
||||||
return l.length;
|
|
||||||
}).length;
|
var maxLineLength = _.max(label.split('\n'), function (l) {
|
||||||
|
return l.length;
|
||||||
// Compute width/height of the rectangle based on the number
|
}).length;
|
||||||
// of lines in the label and the letter size. 0.6 * letterSize is
|
|
||||||
// an approximation of the monospace font letter width.
|
// Compute width/height of the rectangle based on the number
|
||||||
var width = 130;
|
// of lines in the label and the letter size. 0.6 * letterSize is
|
||||||
var height = 80;
|
// an approximation of the monospace font letter width.
|
||||||
var data = Compute.getData();
|
var width = 130;
|
||||||
|
var height = 80;
|
||||||
if (data.machines[vm[1]].status == "ACTIVE") {
|
var data = Compute.getData();
|
||||||
return new joint.shapes.org.Member({
|
|
||||||
id: vm[1],
|
if (data.machines[vm[1]].status == "ACTIVE") {
|
||||||
position: {x: 0, y: 0},
|
return new joint.shapes.org.Member({
|
||||||
attrs: {
|
id: vm[1],
|
||||||
'.card': {fill: 'blue', stroke: 'none'},
|
position: {x: 0, y: 0},
|
||||||
image: {'xlink:href': './images/ON.png', opacity: 0.7},
|
attrs: {
|
||||||
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
|
'.card': {fill: 'blue', stroke: 'none'},
|
||||||
'.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
|
image: {'xlink:href': './images/ON.png', opacity: 0.7},
|
||||||
}
|
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
|
||||||
});
|
'.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
|
||||||
} else {
|
}
|
||||||
return new joint.shapes.org.Member({
|
});
|
||||||
id: vm[1],
|
} else {
|
||||||
position: {x: 0, y: 0},
|
return new joint.shapes.org.Member({
|
||||||
attrs: {
|
id: vm[1],
|
||||||
'.card': {fill: 'blue', stroke: 'none'},
|
position: {x: 0, y: 0},
|
||||||
image: {'xlink:href': './images/OFF.png', opacity: 0.7},
|
attrs: {
|
||||||
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
|
'.card': {fill: 'blue', stroke: 'none'},
|
||||||
'.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
|
image: {'xlink:href': './images/OFF.png', opacity: 0.7},
|
||||||
}
|
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
|
||||||
});
|
'.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
}]);
|
}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
Loading…
Add table
Reference in a new issue