diff options
Diffstat (limited to 'client/js/controllers/home/home.js')
| -rw-r--r-- | client/js/controllers/home/home.js | 208 |
1 files changed, 207 insertions, 1 deletions
diff --git a/client/js/controllers/home/home.js b/client/js/controllers/home/home.js index d20779b..f2073e1 100644 --- a/client/js/controllers/home/home.js +++ b/client/js/controllers/home/home.js @@ -5,7 +5,7 @@ */ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image) { - + console.log("homeCTRl"); var callMeAfterPullData=function(data){ $scope.machines=Compute.getData().machines; Loading.stop(); @@ -38,5 +38,211 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I Compute.pullMachines(callback); } + //adjacencyList, hard-encoded now but will be the result of a request to the server, format may change + var vmList = { + 'vms': [ + 'VM 1', + 'VM 2', + 'VM 3', + 'VM 4', + 'VM 5', + 'VM 6', + 'VM 7', + 'VM 8', + 'VM 9', + 'VM 10' + ], + 'links': [ + ['VM 1', 'VM 2', '', ''], + ['VM 2', 'VM 3', 'I3', 'I4'], + ['VM 1', 'VM 3', 'I5', 'I6'], + ['VM 2', 'VM 4', 'I5', 'I6'], + ['VM 4', 'VM 5', 'I5', 'I6'], + ['VM 4', 'VM 6', 'I5', 'I6'], + ['VM 4', 'VM 1', 'I5', 'I6'], + ['VM 7', 'VM 4', 'I5', 'I6'], + ['VM 7', 'VM 3', 'I5', 'I6'], + ['VM 6', 'VM 8', 'I5', 'I6'], + ['VM 3', 'VM 9', 'I5', 'I6'], + ['VM 3', 'VM 10', 'I5', 'I6'] + ] + }; + + + //Custom element for inserting html + joint.shapes.html = {}; + joint.shapes.html.Element = joint.shapes.basic.Rect.extend({ + defaults: joint.util.deepSupplement({ + type: 'html.Element', + attrs: { + rect: { stroke: 'none', 'fill-opacity': 0 } + } + }, joint.shapes.basic.Rect.prototype.defaults) + }); + + //Custom view for this element + joint.shapes.basic.Rect.ElementView = joint.dia.ElementView.extend({ + + initialize: function() { + _.bindAll(this, 'updateBox'); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); + + this.$box = $(_.template(this.model.get('html'))()); + // Prevent paper from handling pointerdown. + this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); }); + // This is an example of reacting on the input change and storing the input data in the cell model. + this.$box.find('input').on('change', _.bind(function(evt) { + this.model.set('input', $(evt.target).val()); + }, this)); + this.$box.find('select').on('change', _.bind(function(evt) { + this.model.set('select', $(evt.target).val()); + }, this)); + this.$box.find('select').val(this.model.get('select')); + this.$box.find('.config').on('click', function(){ + $scope.raiseShowMachineDetailsEvent(); + }); + // Update the box position whenever the underlying model changes. + this.model.on('change', this.updateBox, this); + // Remove the box when the model gets removed from the graph. + this.model.on('remove', this.removeBox, this); + + this.updateBox(); + }, + render: function() { + joint.dia.ElementView.prototype.render.apply(this, arguments); + this.paper.$el.prepend(this.$box); + this.updateBox(); + return this; + }, + updateBox: function() { + // Set the position and dimension of the box so that it covers the JointJS element. + var bbox = this.model.getBBox(); + // Example of updating the HTML with a data stored in the cell model. + this.$box.find('label').text(this.model.get('name')); + this.$box.find('span').text(this.model.get('select')); + this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' }); + }, + removeBox: function(evt) { + this.$box.remove(); + } + }); + + + //Read the adjacencyList and build the elements and the links according to it + function buildGraphFromAdjacencyList(adjacencyList) { + + var elements = []; + var links = []; + + _.each(adjacencyList['vms'], function(vm) { + elements.push(makeElement(vm)); + }); + console.log(elements); + _.each(adjacencyList['links'], function(link) { + links.push(makeLink(link[0], link[1] , link[2], link[3])); + }); + console.log(links); + // Links must be added after all the elements. This is because when the links + // are added to the graph, link source/target + // elements must be in the graph already. + return elements.concat(links); + } + + //Return a new link linking the parent and child elements with the interfaces names given in parameters + function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) { + + return new joint.dia.Link({ + source: { id: parentElementLabel }, + target: { id: childElementLabel }, + labels: [ + { position: 20, attrs: { text: { text: Iparent } }}, + { position: -20, attrs: { text: { text: Ichild } }} + ] + }); + } + + //Return a new element + function makeElement(label) { + + var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length; + + // Compute width/height of the rectangle based on the number + // of lines in the label and the letter size. 0.6 * letterSize is + // an approximation of the monospace font letter width. + var width = 130; + var height = 80; + + /*return new joint.shapes.html.Element({ + id: label, + name: label, + size: { width: width, height: height }, + + html: [ + '<div class="html-element">', + '<img src="./images/ON.png">', + '<label></label>', + '<input type="image" src="./images/gear.png" class="config"></button>', + '</div>' + ].join(''), + + attrs: { + rect: { + fill: '#FE854F', + width: width, + height: height, + rx: 5, + ry: 5, + stroke: 'none' + } + } + });*/ + return new joint.shapes.org.Member({ + id: label, + position: { x: 0, y: 0 }, + attrs: { + '.card': { fill: 'blue', stroke: 'none'}, + 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 } + } + }); + } + + var graph = new joint.dia.Graph; + var paper = new joint.dia.Paper({ + el: $('#graphHolder'), + width: $('#graphHolder').width(), + //height: test.height, + model: graph, + gridSize: 1 + }); + + var cells = buildGraphFromAdjacencyList(vmList); + console.log(cells); + /*graph.resetCells(cells); + joint.layout.DirectedGraph.layout(graph, { + setLinkVertices: false, + //Top to bottom generation + rankDir: "TB", + nodeSep: 150, + edgeSep: 150, + rankSep: 150 + });*/ + graph.addCells(cells); + var test = joint.layout.DirectedGraph.layout(graph, { + setLinkVertices: false, + //Top to bottom generation + rankDir: "TB", + nodeSep: 150, + edgeSep: 150, + rankSep: 50 + }); + console.log(test); + + paper.setDimensions(test.width, test.height); + + + paper.$el.css('pointer-events', 'none'); + }]); |