nutella_framework 0.4.23 → 0.4.24

data/framework_components/monitoring-interface/css/Monitoring Interface_files/notification-center.js

@@ -0,0 +1,63 @@
+/**
+ *  Class NotificationCenter
+ */
+
+var NotificationCenter = function() {
+    var self = {};
+
+
+    var _callbacks = [];
+
+
+    /** PUBLIC FUNCTIONS**/
+
+    /**
+
+     */
+    self.subscribe = function(notification, callback) {
+        _callbacks.push({notification : notification, callback : callback});
+    };
+
+    self.unsubscribe = function(notification, callback) {
+        var index = -1;
+        for(var i=0; i<_callbacks.length; i++) {
+            var c = _callbacks[i];
+            if(c.notification == notification &&
+                c.callback == callback) {
+                index = i;
+                break;
+            }
+        }
+        if(index >= 0) {
+            _callbacks.splice(index,1);
+            return true;
+        }
+        else {
+            return false;
+        }
+
+
+    };
+
+    self.dispatch = function(notification) {
+        console.log("Notification center > dispatch: "+notification);
+        _.filter(_callbacks,
+            function(c){return c.notification === notification})
+            .forEach(
+            function(c){c.callback();}
+        );
+    };
+
+
+
+    var init = function() {
+
+        //initialization stuff
+
+    }();
+
+    return self;
+};
+
+//global notification center
+var notificationCenter = NotificationCenter();

data/framework_components/monitoring-interface/css/Monitoring Interface_files/notifications.js

@@ -0,0 +1,14 @@
+var Notifications = Notifications || {};
+
+Notifications.data = {
+    APPLICATION_DATA_CHANGE: "data.APPLICATION_DATA_CHANGE"
+};
+
+Notifications.ui = {
+    INSTANCE_CLICKED: "ui.INSTANCE_CLICKED",
+    APPLICATION_CLICKED: "ui.APPLICATION_CLICKED",
+    APPLICATION_EXPANSION_STARTED: "ui.APPLICATION_EXPANSION_STARTED",
+    APPLICATION_REDUCTION_STARTED: "ui.APPLICATION_REDUCTION_STARTED",
+    APPLICATION_EXPANSION_FINISHED: "ui.APPLICATION_EXPANSION_FINISHED",
+    APPLICATION_REDUCTION_FINISHED: "ui.APPLICATION_REDUCTION_FINISHED",
+};

data/framework_components/monitoring-interface/css/Monitoring Interface_files/page.css

@@ -0,0 +1,33 @@
+body {
+    font-family: sans-serif;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.modal-content {
+    border-radius: 0!important;
+}
+
+.btn {
+    border-radius: 0!important;
+}
+
+.modal-messages {
+    width: 80%; /* desired relative width */
+    /* place center */
+    margin-left:auto;
+    margin-right:auto;
+}
+
+code {
+    -webkit-touch-callout: default;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}

data/framework_components/monitoring-interface/css/Monitoring Interface_files/radial-layout.js

@@ -0,0 +1,175 @@
+(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) {
+                component1.publish.forEach(function(publish) {
+                    self.components.forEach(function(component2) {
+                        component2.subscribe.forEach(function(subscribe) {
+                            if(publish.channel == subscribe.channel) {
+                                var link = {
+                                    type: "publish",
+                                    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);
+                            }
+                        });
+                    });
+                });
+
+                component1.request.forEach(function(request) {
+                    self.components.forEach(function(component2) {
+                        component2.handle_request.forEach(function(handle_request) {
+                            if(request.channel == handle_request.channel) {
+                                var link = {
+                                    type: "request",
+                                    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/css/Monitoring Interface_files/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/css/Monitoring Interface_files/ui-application.js

@@ -0,0 +1,320 @@
+var UIApplication = function(delegate) {
+    var self = UIElement(delegate);
+
+    // Static attributes
+    UIApplication.style = {
+        margin: 10,
+        titleBarHeight: 50,
+        applicationBackgroundWidthNotExpanded: 100,
+        applicationBackgroundHeightNotExpanded: 100,
+        optionRectHeight: 20,
+        headerRectHeightNotExpanded: 10,
+        headerRectHeightExpanded: 30,
+        activeStatusColor: defaultPalette.state.green,
+        disabledStatusColor: defaultPalette.state.red
+    };
+
+    // Public variables
+    self.data = undefined;
+    self.expanded = false;
+
+    self.statusColor = function() {
+      if(self.delegate.status)
+        return UIApplication.style.activeStatusColor;
+
+        return UIApplication.style.disabledStatusColor;
+    };
+
+    self.openOptionRect = function (optionGroup) {
+        optionGroup
+            .transition()
+            .attr("transform", "translate(0," + UIApplication.style.optionRectHeight + ")");
+    };
+
+    self.closeOptionRect = function (optionGroup) {
+        optionGroup
+            .transition()
+            .attr("transform", "translate(0," + (- UIApplication.style.optionRectHeight) + ")");
+    };
+
+    // Private variables
+    var applicationBackground = undefined;
+    var nameGroup = undefined;
+    var optionGroup = undefined;
+    var optionRect = undefined;
+    var headerRect = undefined;
+    var appName = undefined;
+    var mailIcon = undefined;
+    var closeIcon = undefined;
+
+    self.render = function() {
+
+        console.log("Render: application");
+
+        var layer = self.view;
+
+        // Create option group
+        // it must be created before the app bg to perform the slide
+        if(optionGroup == undefined) {
+            optionGroup = layer.append("g")
+                .class("optionGroup");
+        }
+
+        // Background rect
+        if(applicationBackground == undefined) {
+            applicationBackground = layer.append("rect")
+                .on("mouseover", function () {
+                    delegate.mouseOverEffect(applicationBackground, self.palette.accent1.bright);
+                    self.openOptionRect(optionGroup);
+                })
+                .on("mouseout", function () {
+                    delegate.mouseOutEffect(applicationBackground, self.palette.accent1.normal);
+                    self.closeOptionRect(optionGroup);
+                })
+                .fill(self.palette.primary.normal)
+                .class("applicationBackground");
+        }
+
+        if(self.delegate.expanded) {
+            applicationBackground
+                .classRemove("pointer")
+                .on("click", null)
+                .on("mouseover", null)
+                .on("mouseout", null)
+                .transition()
+                .fill(self.palette.background.dark)
+                .margin(UIApplication.style.margin)
+                .width(windowViewController.width)
+                .height(windowViewController.height)
+                .x(-windowViewController.width / 2 + UIApplication.style.margin)
+                .y(-windowViewController.height / 2 + UIApplication.style.margin);
+        }
+        else {
+            applicationBackground
+                .class("pointer")
+                .on("click", function() {
+                    delegate.clicked();
+                })
+                .on("mouseover", function() {
+                    d3.select(this).fill(self.palette.accent1.bright);
+                    self.openOptionRect(optionGroup);
+                })
+                .on("mouseout", function() {
+                    d3.select(this).fill(self.palette.accent1.normal);
+                    self.closeOptionRect(optionGroup);
+                })
+                .transition()
+                .fill(self.palette.accent1.normal)
+                .margin(undefined)
+                .width(UIApplication.style.applicationBackgroundWidthNotExpanded)
+                .height(UIApplication.style.applicationBackgroundHeightNotExpanded)
+                .x(-50)
+                .y(-50);
+        }
+
+        // Application name group
+        if(nameGroup == undefined) {
+            nameGroup = layer.append("g")
+                .class("nameGroup");
+        }
+
+        // Create the status rect
+        if(headerRect == undefined) {
+            headerRect = nameGroup.append("rect")
+                .class("no_interaction")
+                .class("headerRect");
+        }
+
+        // Update the status rect
+        headerRect
+            .fill(self.statusColor());
+
+        if(appName == undefined) {
+            appName = nameGroup.append("text")
+                .class("name")
+                .class("pointer")
+                .class("no_interaction")
+                .attr("text-anchor", "middle")
+                .fill(self.palette.text.bright);
+        }
+
+        appName.text(delegate.name);
+
+        // add close button
+        if(closeIcon == undefined) {
+            closeIcon = nameGroup.append("svg:image")
+                .attr('width', 20)
+                .attr('height', 20)
+                .attr("xlink:href", "img/cross_red_border_white.svg")
+                .class("closeApp")
+                .class("pointer")
+                .style("opacity", 0)
+                .on("click", function () {
+                    delegate.closeButtonClicked();
+                });
+        }
+
+        if(optionRect == undefined) {
+            optionRect = optionGroup.append("rect")
+                .class("optionRect")
+                .class("pointer")
+                .on("click", function() {
+                    alert("ciao simona")
+                });
+        }
+
+        // add mail icon to the option group
+        if(mailIcon == undefined) {
+            mailIcon = optionGroup.append("text")
+                .class("mailIcon")
+                .class("pointer")
+                .class("no_interaction")
+                .attr("text-anchor", "middle")
+                .fill(self.palette.text.bright)
+                .on("mouseover", function() {
+                    self.openOptionRect(optionGroup);
+                    delegate.mouseOverEffect(applicationBackground, self.palette.accent1.bright);
+                })
+                .y(UIApplication.style.applicationBackgroundHeightNotExpanded / 2 - UIApplication.style.optionRectHeight + 15)
+                .text("subscribe");
+
+            /*mailIcon = optionGroup.append("svg:image")
+                .on("mouseover", function() {
+                    self.openOptionRect(optionGroup);
+                    delegate.mouseOverEffect(applicationBackground, self.palette.accent1.bright);
+                    d3.select(this).attr("xlink:href","img/email_highlighted.svg");
+                })
+                .on("mouseout", function() {
+                    d3.select(this).attr("xlink:href","img/email.svg");
+                })
+                .on("click", function() {
+                    alert("ciao simona");
+                })
+                .attr('width', 34)
+                .attr('height', 24)
+                .x(-17)
+                .y(UIApplication.style.applicationBackgroundHeightNotExpanded / 2 - UIApplication.style.optionRectHeight +1)
+                .attr("xlink:href", "img/email.svg")
+                .class("mailIcon")
+                .class("pointer");*/
+        }
+
+        // Application name
+        if(self.delegate.expanded) {
+            self.closeOptionRect(optionGroup);
+
+            // move the name
+            appName
+                .transition()
+                .duration(Animations.application.APPLICATION_EXPANSION.duration)
+                .x(0)
+                .y(-windowViewController.height / 2 + UIApplication.style.margin + 20);
+
+            // move the rect
+            headerRect
+                .transition()
+                .x(-windowViewController.width / 2 + UIApplication.style.margin )
+                .y(-windowViewController.height / 2 + UIApplication.style.margin)
+                .attr('width', windowViewController.width - UIApplication.style.margin * 2)
+                .transition()
+                .attr('height', UIApplication.style.headerRectHeightExpanded)
+                .transition();
+
+            // move close button
+            closeIcon
+                .on("mouseover", function() {
+                    d3.select(this).attr("xlink:href","img/cross_red_border_white_mouseover.svg");
+                })
+                .on("mouseout", function() {
+                    d3.select(this).attr("xlink:href","img/cross_red_border_white.svg");
+                })
+                .transition()
+                .x(windowViewController.width / 2 - UIApplication.style.margin - 25)
+                .y(-windowViewController.height / 2 + UIApplication.style.margin + 5)
+                .width(40)
+                .height(40)
+                .attr("xlink:href","img/cross_red_border_white.svg")
+                .transition()
+                .delay(750)
+                .style("opacity", 1);
+
+
+
+        }
+        else {
+            appName
+                .transition()
+                .x(0)
+                .y(0);
+
+            headerRect
+                .transition()
+                .attr('width', UIApplication.style.applicationBackgroundWidthNotExpanded)
+                .attr('height', UIApplication.style.headerRectHeightNotExpanded)
+                .x(-UIApplication.style.applicationBackgroundWidthNotExpanded / 2)
+                .y(-UIApplication.style.applicationBackgroundWidthNotExpanded / 2);
+
+            closeIcon
+                .on("mouseover", null)
+                .on("mouseout", null)
+                .x(0)
+                .y(0)
+                .width(0)
+                .height(0)
+                .style("opacity", 0);
+
+            optionRect
+                .on("mouseover", function () {
+                    self.openOptionRect(optionGroup);
+                    delegate.mouseOverEffect(applicationBackground, self.palette.accent1.bright);
+                })
+                .on("mouseout", function () {
+                    self.closeOptionRect(optionGroup);
+                    delegate.mouseOverEffect(applicationBackground, self.palette.accent1.normal);
+                })
+                .width(UIApplication.style.applicationBackgroundWidthNotExpanded)
+                .height(UIApplication.style.optionRectHeight)
+                .x( - UIApplication.style.applicationBackgroundWidthNotExpanded / 2)
+                .y( UIApplication.style.applicationBackgroundHeightNotExpanded / 2 - UIApplication.style.optionRectHeight)
+                .fill(self.palette.accent1.normal);
+        }
+
+        appName
+            .text(delegate.name);
+
+
+
+    };
+
+    self.instanceData = function(selectedInstance) {
+        var d = self.data.instances.filter(function(d) {
+            return d.name == selectedInstance
+        });
+
+        if(d.count == 0)
+            return undefined;
+
+        return d[0];
+    };
+
+    self.getWidth = function() {
+        return width  - UIApplication.style.margin * 2;
+    };
+
+    self.getHeight = function() {
+        return height - UIApplication.style.margin * 2;
+    };
+
+    // Constructor
+    self.init = function() {
+
+    }();
+
+    // Destructor
+    self.deinit = function() {
+        // Place here the code for dealloc eventual objects
+
+    };
+
+    return self;
+};

data/framework_components/monitoring-interface/css/Monitoring Interface_files/ui-connection-view.css

@@ -0,0 +1,10 @@
+text.channel {
+    font: 10px sans-serif;
+}
+
+.link {
+    /*stroke: steelblue;*/
+    /*stroke-opacity: 1.4;*/
+    stroke-width: 5;
+    fill: none;
+}