nutella_framework 0.4.23 → 0.4.24

data/framework_components/monitoring-interface/js/d3/layout/radial-layout.js

@@ -0,0 +1,184 @@
+(function() {
+    d3.layout.radial = function() {
+
+        // Private variables
+        this._numChannels = undefined;
+        this._numComponents = undefined;
+
+        this._margin = 0;            // Margin between components in %
+        this._radius = undefined;
+        this._linkRadius = undefined;
+
+        // Public variables
+        this.components = undefined;
+        this.channels = undefined;
+        this.links = undefined;
+
+        this.publishChannels = undefined;
+        this.subscribeChannels = undefined;
+        this.requestChannels = undefined;
+        this.handleRequestChannels = undefined;
+
+
+        this.data = function(components) {
+            var self = this;
+
+            this.components = [];
+            this.channels = [];
+            this.links = [];
+
+            this.publishChannels = [];
+            this.subscribeChannels = [];
+            this.requestChannels = [];
+            this.handleRequestChannels = [];
+
+            this._numComponents = components.length;
+            var numChannels = 0;
+
+            // Clone components and calculate number of channels
+            components.forEach(function(component) {
+                numChannels += component.publish.length;
+                numChannels += component.subscribe.length;
+                numChannels += component.request.length;
+                numChannels += component.handle_request.length;
+
+                self.components.push(component);
+            });
+
+            this._numChannels = numChannels;
+
+            // Calculate angle of components
+            var angle = 0;
+            this.components.forEach(function(component) {
+                var numChannels = 0;
+                numChannels += component.publish.length;
+                numChannels += component.subscribe.length;
+                numChannels += component.request.length;
+                numChannels += component.handle_request.length;
+
+                var angleMargin = 2 * Math.PI * self._margin / self._numComponents;
+
+                component.startAngle = angle;
+                component.endAngle = angle + numChannels * 2 * Math.PI * (1.0 - self._margin) / self._numChannels;
+
+                angle = component.endAngle + angleMargin;
+
+                // Calculate angle for every channel
+                var deltaAngle = (component.endAngle - component.startAngle) / numChannels;
+                var channelAngle = component.startAngle + deltaAngle / 2.0;
+                component.publish.forEach(function(publish) {
+                    publish.angle = channelAngle;
+                    publish.radius = self._radius;
+                    channelAngle += deltaAngle;
+
+                    self.channels.push(publish);
+                    self.publishChannels.push(publish);
+                });
+                component.subscribe.forEach(function(subscribe) {
+                    subscribe.angle = channelAngle;
+                    subscribe.radius = self._radius;
+                    channelAngle += deltaAngle;
+
+                    self.channels.push(subscribe);
+                    self.subscribeChannels.push(subscribe);
+                });
+                component.request.forEach(function(request) {
+                    request.angle = channelAngle;
+                    request.radius = self._radius;
+                    channelAngle += deltaAngle;
+
+                    self.channels.push(request);
+                    self.requestChannels.push(request);
+                });
+                component.handle_request.forEach(function(handleRequest) {
+                    handleRequest.angle = channelAngle;
+                    handleRequest.radius = self._radius;
+                    channelAngle += deltaAngle;
+
+                    self.channels.push(handleRequest);
+                    self.handleRequestChannels.push(handleRequest);
+                });
+            });
+
+            // Calculate links
+            self.components.forEach(function(component1) {
+
+                // Publish - Subscribe
+                component1.publish.forEach(function(publish) {
+                    self.components.forEach(function(component2) {
+                        component2.subscribe.forEach(function(subscribe) {
+                            if(publish.channel == subscribe.channel) {
+                                publish.component = component1.name;
+                                subscribe.component = component2.name;
+                                var link = {
+                                    type: "publish",
+                                    channel: publish.channel,
+                                    source: publish,
+                                    destination: subscribe,
+                                    coordinates: [
+                                        {angle: publish.angle, radius: self._linkRadius},
+                                        {angle: (publish.angle + subscribe.angle) / 2.0, radius: 0},
+                                        {angle: subscribe.angle, radius: self._linkRadius}
+                                    ]
+                                };
+                                self.links.push(link);
+                            }
+                        });
+                    });
+                });
+
+                // Request - Response
+                component1.request.forEach(function(request) {
+                    self.components.forEach(function(component2) {
+                        component2.handle_request.forEach(function(handle_request) {
+                            if(request.channel == handle_request.channel) {
+                                request.component = component1.name;
+                                handle_request.component = component2.name;
+                                var link = {
+                                    type: "request",
+                                    channel: request.channel,
+                                    source: request,
+                                    destination: handle_request,
+                                    coordinates: [
+                                        {angle: request.angle, radius: self._linkRadius},
+                                        {angle: (request.angle + handle_request.angle) / 2.0, radius: 0},
+                                        {angle: handle_request.angle, radius: self._linkRadius}
+                                    ]
+                                };
+                                self.links.push(link);
+                            }
+                        });
+                    });
+                });
+            });
+
+            return this;
+        };
+
+        this.margin = function(margin) {
+            if(margin == undefined)
+                return this._margin;
+
+            this._margin = margin;
+            return this;
+        };
+
+        this.radius = function(radius) {
+            if(radius == undefined)
+                return this._radius;
+
+            this._radius = radius;
+            return this;
+        };
+
+        this.linkRadius = function(radius) {
+            if(radius == undefined)
+                return this._linkRadius;
+
+            this._linkRadius = radius;
+            return this;
+        };
+
+        return this;
+    };
+})();

data/framework_components/monitoring-interface/js/d3/plugin/graphics.js

@@ -0,0 +1,156 @@
+(function() {
+    d3.selection.prototype.translate = d3.selection.enter.prototype.translate = d3.transition.prototype.translate = function(x, y) {
+        var self = this;
+        var marginX = self.margin.x || 0;
+        var marginY = self.margin.y || 0;
+        return this.attr("transform", function(d) { return "translate(" + (x + marginX) + "," + (y + marginY) + ")"});
+    };
+
+    d3.selection.prototype.rotate = d3.selection.enter.prototype.rotate = function(degree, x, y) {
+        var self = this;
+        if(x != undefined && y != undefined)
+            this.attr("transform", function(d) { return "rotate(" + degree + ")"});
+        else
+            this.attr("transform", function(d) { return "rotate(" + degree + " " + x + "," + y + ")"});
+
+        return this;
+    };
+
+    d3.selection.prototype.rotateText = d3.selection.enter.prototype.rotateText = d3.transition.prototype.rotateText = function() {
+
+        function toDegrees (radians) {
+            return radians * (180 / Math.PI);
+        }
+
+        var self = this;
+
+        this.attr("transform", function(d) { return "translate(" + d.radius*Math.sin(d.angle) + ", " + (-d.radius*Math.cos(d.angle)) + ")" +
+                                                    "rotate(" + toDegrees(-Math.PI/2+d.angle) + ")" +
+                                                    (d.angle > Math.PI ? "rotate(180)" : "") +
+                                                    (d.angle > Math.PI ? "translate(0, 4)" : "translate(0, 2)")})   // Text alignment
+            .attr("text-anchor", function(d) { return d.angle < Math.PI ? "start" : "end"; });
+
+        /*
+        this.attr("transform", function(d) { return "translate(" + d.radius + ", 0)"})
+            .attr("text-anchor", function(d) { return d.angle < 180 ? "start" : "end"; })
+            .attr("transform", function(d) { return d.angle < 180 ? null : "rotate(180)"; });
+        */
+
+        return this;
+    };
+
+    d3.selection.prototype.width = d3.selection.enter.prototype.width = d3.transition.prototype.width = function(width) {
+        var self = this;
+        var margin = this.margin.x || 0;
+        return this.attr("width", width - margin * 2);
+    };
+
+    d3.selection.prototype.height = d3.selection.enter.prototype.height = d3.transition.prototype.height = function(height) {
+        var self = this;
+        var margin = this.margin.y || 0;
+        return this.attr("height", height - margin * 2);
+    };
+
+    d3.selection.prototype.x = d3.selection.enter.prototype.x = d3.transition.prototype.x = function(x) {
+        var self = this;
+        return this.attr("x", x);
+    };
+
+    d3.selection.prototype.y = d3.selection.enter.prototype.y = d3.transition.prototype.y = function(y) {
+        var self = this;
+        return this.attr("y", y);
+    };
+
+    d3.selection.prototype.cx = d3.selection.enter.prototype.cx = d3.transition.prototype.cx = function(x) {
+        var self = this;
+        return this.attr("cx", x);
+    };
+
+    d3.selection.prototype.cy = d3.selection.enter.prototype.cy = d3.transition.prototype.cy = function(y) {
+        var self = this;
+        return this.attr("cy", y);
+    };
+
+    d3.selection.prototype.fill = d3.selection.enter.prototype.fill = d3.transition.prototype.fill = function(fill) {
+        var self = this;
+        return this.attr("fill", fill);
+    };
+
+
+    d3.selection.prototype.margin = d3.selection.enter.prototype.margin = d3.transition.prototype.margin = function(margin) {
+        this.margin.x = margin;
+        this.margin.y = margin;
+        return this;
+    };
+
+    d3.selection.prototype.newView = d3.selection.enter.prototype.newView = d3.transition.prototype.newView = function() {
+        return this.append("g");
+    };
+
+    d3.selection.prototype.class = d3.selection.enter.prototype.class = d3.transition.prototype.class = function(className) {
+        var cn = {};
+        cn[className] = true;
+        this.classed(cn);
+        return this;
+    };
+
+    d3.selection.prototype.classRemove = d3.selection.enter.prototype.classRemove = d3.transition.prototype.classRemove = function(className) {
+        var cn = {};
+        cn[className] = false;
+        this.classed(cn);
+        return this;
+    };
+
+    d3.selection.prototype.opacity = d3.selection.enter.prototype.opacity = d3.transition.prototype.opacity = function(opacity) {
+        this.style("opacity", opacity);
+        return this;
+    };
+
+    d3.selection.prototype.layerWithName = function(className) {
+        this.selectAll("."+className)
+            .data([{}])
+            .enter()
+            .append("g")
+            .class(className);
+
+        return this.selectAll("."+className);
+    };
+
+    d3.selection.prototype.rotateTextZeroAngle = d3.selection.enter.prototype.rotateTextZeroAngle = d3.transition.prototype.rotateTextZeroAngle = function() {
+
+        function toDegrees (radians) {
+            return radians * (180 / Math.PI);
+        }
+
+        var self = this;
+
+        this.attr("transform", function(d) { return "rotate(" + toDegrees(-Math.PI/2+d.angle) + ")" +
+            (d.angle > Math.PI ? "rotate(180)" : ""); })
+            .attr("text-anchor", function(d) { return d.angle < Math.PI ? "start" : "end"; });
+
+
+        return this;
+    };
+
+    d3.selection.prototype.rotateLayer = d3.selection.enter.prototype.rotateLayer = d3.transition.prototype.rotateLayer = function() {
+
+        function toDegrees (radians) {
+            return radians * (180 / Math.PI);
+        }
+
+        var self = this;
+
+        this.attr("transform", function(d) { return "translate(" + d.radius*Math.sin(d.angle) + ", " + (-d.radius*Math.cos(d.angle)) + ")" +
+            "rotate(" + toDegrees(d.angle) + ")"});
+
+        return this;
+    };
+
+    d3.selection.prototype.r = d3.selection.enter.prototype.r = d3.transition.prototype.r = function(radius) {
+
+        this.attr("r", radius);
+
+        return this;
+    };
+
+})();

data/framework_components/monitoring-interface/js/d3/plugin/tab-table.js

@@ -0,0 +1,8 @@
+(function() {
+    d3.selection.prototype.tabTable = d3.selection.enter.prototype.tabTable = d3.transition.prototype.tabTable = function() {
+
+
+
+        return this;
+    };
+})();

data/framework_components/monitoring-interface/js/d3/ui/animations.js

@@ -0,0 +1,27 @@
+var Animations = Animations || {};
+
+Animations.connectionView = {
+    LINK_FADE_IN: {delay: 500, duration: 1000},
+    CIRCLE_EXPANSION: {delay: 100, duration: 500},
+    ARROW_EXPANSION: {delay: 0, duration: 500}
+};
+
+Animations.application = {
+    GRID_LAYOUT_REPOSITION : {delay: 0, duration: 500},
+    APPLICATION_EXPANSION: {delay: 0, duration: 500},
+    APPLICATION_REDUCTION: {delay: 0, duration: 500}
+};
+
+Animations.instance = {
+    INSTANCE_ENTER : {delay: 0, duration: 500},
+    INSTANCE_EXIT: {delay: 0, duration: 500}
+};
+
+Animations.optionRect = {
+    INSTANCE_ENTER : {delay: 500, duration: 500}
+};
+
+Animations.notification = {
+    NOTIFICATION_FADE_IN: {delay: 400, duration: 500},
+    NOTIFICATION_FADE_OUT: {delay: 0, duration: 100}
+};