nutella_framework 0.4.23 → 0.4.24

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

@@ -0,0 +1,426 @@
+var UIConnectionView = function(delegate) {
+    var self = UIElement(delegate);
+
+    // Protected variables
+    self._components = undefined;
+
+    // Static attributes
+    UIConnectionView.style = {
+        margin: 100,
+        linkTension: 0.6,
+        componentThickness: 10,
+        arrow_thick: 11,
+        arrow_ratio: 1.5,
+        square_side: 10.0,
+        componentNameFontSize: 15.0,
+        linkTextSize: 10,
+        linkTextSizeHold: 13,
+
+        labelLinkLength: 80,
+        labelLinkWidth: 1,
+        labelLinkColor: defaultPalette.text.dark,
+        labelFieldSize: 120,
+        toolBoxHeight: 50
+
+
+    };
+
+    // Private variables
+    self._innerRadius = undefined;
+    self._outerRadius = undefined;
+
+    // Render the element
+    self.render = function() {
+
+        var layer = self.view;
+
+        // Take the width of the screen
+        self._innerRadius = Math.min(windowViewController.height, windowViewController.width) / 2 - UIConnectionView.style.margin
+                            - UIConnectionView.style.labelLinkLength;
+        self._outerRadius = self._innerRadius + UIConnectionView.style.componentThickness;
+
+        var links = layer.layerWithName("links");
+        var components = layer.layerWithName("components");
+        var componentNames = layer.layerWithName("componentNames");
+        var channelTexts = layer.layerWithName("channelTexts");
+        var componentLabels = layer.layerWithName("componentLabels");
+        var componentToolBoxes = layer.layerWithName("componentToolBoxes")
+
+        var componentsData = self.delegate.instanceComponentData;  // applicationModel.getInstanceData("application6","instance1").components;
+
+        if(self.delegate.expanded == false ||
+            componentsData == undefined) {
+            components.remove();
+            channelTexts.remove();
+            links.remove();
+            componentNames.remove();
+            return;
+        }
+
+        var radialLayout = d3.layout.radial()
+            .margin(0.2)
+            .radius(self._outerRadius)
+            .linkRadius(self._innerRadius)
+            .data(componentsData);
+
+        // Create component arc generator
+        var arc = d3.svg.arc()
+            .innerRadius(self._innerRadius)
+            .outerRadius(self._outerRadius)
+            .startAngle(function(d){return d.startAngle;})
+            .endAngle(function(d){return d.endAngle;});
+
+        // Create component arc generator zero radius
+        var arcZeroRadius = d3.svg.arc()
+            .innerRadius(0.1)
+            .outerRadius(0.1)
+            .startAngle(function(d){return d.startAngle;})
+            .endAngle(function(d){return d.endAngle;});
+
+        // Create new component arcs
+        components.selectAll(".componentArc")
+            .data(radialLayout.components)
+            .enter()
+            .append("path")
+            .class("componentArc")
+            .style("fill", function(d){
+                if(d.problem == true)
+                    return defaultPalette.state.red;
+                else
+                    return defaultPalette.state.green;
+            })
+            .attr("d", arcZeroRadius)
+            .each(function(component) {
+                componentToolBoxes.append("rect")
+                    .class("toolBox")
+                    .attr("id", function() {
+                        return component.name;
+                    })
+                    .margin(undefined)
+                    .width(UIConnectionView.style.labelFieldSize)
+                    .height(0)
+
+
+            });
+
+        // Update component arcs
+        components.selectAll(".componentArc")
+            .data(radialLayout.components)
+            .transition()
+            .delay(Animations.connectionView.CIRCLE_EXPANSION.delay)
+            .duration(Animations.connectionView.CIRCLE_EXPANSION.duration)
+            .attr("d", arc)
+            .style("fill", function(d){
+                if(d.problem == true)
+                    return defaultPalette.state.red;
+                else
+                    return defaultPalette.state.green;
+            })
+            .each(function(component) {
+
+                var origin = {
+                    x: Math.cos(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength),
+                    y: Math.sin(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength)
+                };
+
+                componentToolBoxes.select("#"+component.name)
+                    .x(function() {
+                        if(component.endAngle % (2*Math.PI) < Math.PI) {
+                            // 0 <= angle < 180
+                            return origin.x;
+                        }
+                        else {
+                            // 180 <= angle < 360
+                            return origin.x - UIConnectionView.style.labelFieldSize;
+                        }
+                    })
+                    .y(function() {
+                        return Math.sin(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength);
+                    })
+            });
+
+        // Remove component arcs
+        components.selectAll(".componentArc")
+            .data(radialLayout.components)
+            .exit()
+            .each(function(component) {
+                componentToolBoxes.select("#"+component.name)
+                    .remove();
+            })
+            .remove();
+
+        // Create new publish channels
+        channelTexts.selectAll(".channel")
+            .data(radialLayout.channels)
+            .enter()
+            .append("text")
+            .class("channel")
+            .fill(self.palette.text.dark)
+            .attr("font-size", UIConnectionView.style.linkTextSize)
+            .opacity(0);
+
+        // Update already present text
+        channelTexts.selectAll(".channel")
+            .data(radialLayout.channels)
+            .transition()
+            .delay(Animations.connectionView.CIRCLE_EXPANSION.delay)
+            .duration(Animations.connectionView.CIRCLE_EXPANSION.duration)
+            .rotateText()
+            .text(function(channel) {return channel.channel;})
+            .opacity(1);
+
+        // Delete old text
+        channelTexts.selectAll(".channel")
+            .data(radialLayout.channels)
+            .exit()
+            .transition()
+            .opacity(0)
+            .remove();
+
+
+        // Create arg generator utility
+        var lineGenerator = d3.svg.line.radial()
+            .interpolate("bundle")
+            .tension(UIConnectionView.style.linkTension)
+            .radius(function(d) { return d.radius; })
+            .angle(function(d) { return d.angle; });
+
+        // Create new links between channels
+        links.selectAll(".link")
+            .data(radialLayout.links.map(function(link) {
+                    return link.coordinates;
+                }))
+            .enter()
+            .append("path")
+            .class("link")
+            .class("pointer")
+            .opacity(0)
+            .attr("stroke", self.palette.accent2.bright)
+            .attr("d", lineGenerator)
+            .on("mouseover", function(link) {
+                d3.select(this).attr("stroke", "#000000");
+                //d3.select(link.source.name).attr("font-size", UIConnectionView.style.linkTextSizeHold);
+            })
+            .on("mouseout", function(link) {
+                d3.select(this).attr("stroke", "#FFFFFF");
+                //d3.select(link.source.name).attr("font-size", UIConnectionView.style.linkTextSize);
+            })
+            .on("click", function() {
+                // Display the modal view
+                $('#messageDisplay').modal({ show: true});
+            });
+
+        // Update already present links between
+        links.selectAll(".link")
+            .data(radialLayout.links.map(function(link) {
+                return link.coordinates;
+            }))
+            .transition()
+            .delay(Animations.connectionView.LINK_FADE_IN.delay)
+            .duration(Animations.connectionView.LINK_FADE_IN.duration)
+            .opacity(1)
+            .attr("d", lineGenerator);
+
+        // Remove links no more present
+        links.selectAll(".link")
+            .data(radialLayout.links.map(function(link) {
+                return link.coordinates;
+            }))
+            .exit()
+            .transition()
+            .duration(Animations.connectionView.LINK_FADE_IN.duration)
+            .opacity(0)
+            .remove();
+
+        // Create triangles for the subscribed channels
+        var arrowData = [
+            { "x":  0.0, "y": 0.0},
+            { "x":  1*UIConnectionView.style.arrow_thick/UIConnectionView.style.arrow_ratio, "y": 1*UIConnectionView.style.arrow_thick},
+            { "x": -1*UIConnectionView.style.arrow_thick/UIConnectionView.style.arrow_ratio, "y": 1*UIConnectionView.style.arrow_thick}
+        ];
+
+        var lineFunction = d3.svg.line()
+            .x(function(d) { return d.x; })
+            .y(function(d) { return d.y; })
+            .interpolate("linear");
+
+        components.selectAll(".subscribeTriangle")
+            .data(radialLayout.publishChannels)
+            .enter()
+            .append("path")
+            .class("subscribeTriangle")
+            .attr("d", lineFunction(arrowData))
+            .attr("fill", self.palette.accent1.dark)
+            .rotateLayer()
+            .opacity(0);
+
+        components.selectAll(".subscribeTriangle")
+            .data(radialLayout.publishChannels)
+            .transition()
+            .duration(Animations.connectionView.ARROW_EXPANSION.duration)
+            .rotateLayer()
+            .opacity(1);
+
+        components.selectAll(".subscribeTriangle")
+            .data(radialLayout.publishChannels)
+            .exit()
+            .transition()
+            .opacity(0)
+            .remove();
+
+        // Create circles for the handle_requests channels
+        var squareData = [
+            { "x":  -1*UIConnectionView.style.square_side/2, "y": 0.0},
+            { "x":  1*UIConnectionView.style.square_side/2, "y": 0.0},
+            { "x":  1*UIConnectionView.style.square_side/2, "y": 1*UIConnectionView.style.square_side},
+            { "x":  -1*UIConnectionView.style.square_side/2, "y": 1*UIConnectionView.style.square_side},
+        ];
+
+        components.selectAll(".handleRequestsaCircle")
+            .data(radialLayout.handleRequestChannels)
+            .enter()
+            .append("path")
+            .class("handleRequestsaCircle")
+            .attr("d", lineFunction(squareData))
+            .attr("fill", self.palette.accent1.dark)
+            .rotateLayer()
+            .opacity(0);
+
+        components.selectAll(".handleRequestsaCircle")
+            .data(radialLayout.handleRequestChannels)
+            .transition()
+            .duration(Animations.connectionView.ARROW_EXPANSION.duration)
+            .rotateLayer()
+            .opacity(1);
+
+        components.selectAll(".handleRequestsaCircle")
+            .data(radialLayout.handleRequestChannels)
+            .exit()
+            .transition()
+            .opacity(0)
+            .remove();
+
+        // Create new component name
+        componentNames.selectAll(".componentName")
+            .data(radialLayout.components)
+            .enter()
+            .append("text")
+            .class("componentName")
+            .fill(defaultPalette.text.dark)
+            .opacity(0)
+            .on("mouseover", function(d) {
+                componentToolBoxes
+                    .select("#"+d.name)
+                    .height(UIConnectionView.style.toolBoxHeight);
+
+            })
+            .on("mouseout", function(d) {
+                componentToolBoxes
+                    .select("#"+d.name)
+                    .height(0);
+            });
+
+        componentNames.selectAll(".componentName")
+            .data(radialLayout.components)
+            .transition()
+            .duration(Animations.connectionView.LINK_FADE_IN.duration)
+            .delay(Animations.connectionView.LINK_FADE_IN.delay)
+            .attr("text-anchor", function(component) {
+                if(component.endAngle % (2*Math.PI) < Math.PI) {
+                    // 0 <= angle < 180
+                    return "start";
+                }
+                else {
+                    // 180 <= angle < 360
+                    return "end";
+                }
+            })
+            .x(function(component) {
+                return Math.cos(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength + 10)
+            })
+            .y(function(component) {
+                return Math.sin(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength) - 5
+            })
+            .attr("font-size", UIConnectionView.style.componentNameFontSize)
+            .text(function(component) {return component.name; })
+            .opacity(1);
+
+        componentNames.selectAll(".componentName")
+            .data(radialLayout.components)
+            .exit()
+            .transition()
+            .opacity(0)
+            .remove();
+
+
+        // Create new component label
+        componentLabels.selectAll(".componentLabel")
+            .data(radialLayout.components)
+            .enter()
+            .append("polyline")
+            .class("componentLabel")
+            .fill("none")
+            .attr("stroke-width", UIConnectionView.style.labelLinkWidth)
+            .attr("stroke", UIConnectionView.style.labelLinkColor)
+            .opacity(0);
+
+
+        componentLabels.selectAll(".componentLabel")
+            .data(radialLayout.components)
+            .transition()
+            .duration(Animations.connectionView.LINK_FADE_IN.duration)
+            .delay(Animations.connectionView.LINK_FADE_IN.delay)
+            .attr("points", function(component) {
+
+                var point0 = {
+                    x: Math.cos(component.endAngle - Math.PI / 2) * self._innerRadius,
+                    y: Math.sin(component.endAngle - Math.PI / 2) * self._innerRadius
+                };
+
+                var point1 = {
+                    x: Math.cos(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength),
+                    y: Math.sin(component.endAngle - Math.PI / 2) * (self._innerRadius + UIConnectionView.style.labelLinkLength)
+                };
+
+
+                var direction;
+                if(Math.sin(component.endAngle) >= 0) {
+                    direction = 1;
+                }
+                else {
+                    direction = -1;
+                }
+                //Math.sign(Math.sin(component.startAngle))
+                var point2 = {
+                    x: point1.x + direction * UIConnectionView.style.labelFieldSize,
+                    y: point1.y
+                };
+
+                return[
+                    point0.x, point0.y,
+                    point1.x, point1.y,
+                    point2.x, point2.y
+
+                ];
+            })
+            .opacity(1);
+
+        componentLabels.selectAll(".componentLabel")
+            .data(radialLayout.components)
+            .exit()
+            .transition()
+            .opacity(0)
+            .remove();
+
+    };
+
+    // Constructor
+    self.init = function() {
+    }();
+
+    // Destructor
+    self.deinit = function() {
+    };
+
+    return self;
+};

data/framework_components/monitoring-interface/css/Monitoring Interface_files/ui-element.js

@@ -0,0 +1,205 @@
+/*
+// palette 1
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#19BB9B",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#000000",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#16a689",
+        normal: "#19BB9B",
+        bright: "#1dd9b4"
+    },
+    accent2: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#D2D7D3",
+        normal: "#EEEEEE"
+
+    },
+    state: {
+        red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#019875"
+    }
+};
+*/
+
+/*
+// palette 2
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#19BB9B",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#FFFFFF",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#16a689",
+        normal: "#19BB9B",
+        bright: "#1dd9b4"
+    },
+    accent2: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#534f59",
+        normal: "#39363D"
+
+    },
+    state: {
+        red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#019875"
+    }
+};
+*/
+
+// palette 3
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#425266",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#FFFFFF",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#323e4d",
+        normal: "#425266",
+        bright: "#536780"
+    },
+    accent2: {
+        dark: "#FFFFFF",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#637b99",
+        normal: "#323e4d"
+
+    },
+    state: {
+        red: "#D24D57",
+        //red: "#E74C3C",
+        //red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#26A65B"
+    }
+};
+
+var UIElement = function(delegate) {
+    var self = {};
+
+    // Public variables
+    self.delegate = undefined;
+
+    // Private variables
+    var view = undefined;
+    var x = 0;
+    var y = 0;
+    var show = true;
+
+    // Protected variables
+    self.palette = defaultPalette;
+
+    // Getter and setter
+    self.__defineGetter__("x", function() {
+        return x;
+    });
+
+    self.__defineGetter__("y", function() {
+        return y;
+    });
+
+    self.__defineGetter__("view", function() {
+        return view;
+    });
+
+    self.__defineGetter__("show", function() {
+        return show;
+    });
+
+
+    self.__defineSetter__("x", function(newX) {
+        x = newX;
+        self.updateViewPosition();
+    });
+
+    self.__defineSetter__("y", function(newY) {
+        y = newY;
+        self.updateViewPosition();
+    });
+
+    self.__defineSetter__("view", function(newView) {
+        view = newView;
+        self.updateViewPosition();
+        self.updateViewOpacity();
+    });
+
+    self.__defineSetter__("show", function(newShow) {
+        if(show != newShow) {
+            show = newShow;
+            self.updateViewOpacity();
+        }
+    });
+
+    self.updateViewPosition = function() {
+        if(view != undefined) {
+            view.attr("transform", "translate(" + x + ", " + y + ")");
+        }
+    };
+
+    self.updateViewOpacity = function() {
+        if(view != undefined) {
+            view.opacity(show?1:0);
+        }
+    };
+
+    // Constructor
+    self.init = function() {
+        self.delegate = delegate;
+        view = self.delegate.newView();
+    }();
+
+    // Destructor
+    self.deinit = function() {
+        view.remove();
+    };
+
+    return self;
+
+};