[Pkg-nagios-changes] [SCM] UNNAMED PROJECT branch, debian/master, updated. 810edbdd3feedbfe37f4a65bee50b57b2f60fa2a
nap
naparuba at gmail.com
Tue Feb 28 22:06:44 UTC 2012
The following commit has been merged in the debian/master branch:
commit fe4fe393c6024df9940925c59923c660b2b0408d
Author: nap <naparuba at gmail.com>
Date: Thu Nov 17 22:09:03 2011 +0100
Add : first attemps of a /flow page. Need to rework image management to get our divs instead like in /wall.
diff --git a/contrib/alternative-installation/shinken-install/tools/__init__.py b/shinken/webui/plugins/flow/__init__.py
similarity index 100%
copy from contrib/alternative-installation/shinken-install/tools/__init__.py
copy to shinken/webui/plugins/flow/__init__.py
diff --git a/shinken/webui/plugins/wall/wall.py b/shinken/webui/plugins/flow/flow.py
similarity index 97%
copy from shinken/webui/plugins/wall/wall.py
copy to shinken/webui/plugins/flow/flow.py
index 1f39786..eed9941 100644
--- a/shinken/webui/plugins/wall/wall.py
+++ b/shinken/webui/plugins/flow/flow.py
@@ -96,5 +96,5 @@ def get_page():
return {'app' : app, 'user' : user, 'impacts' : impacts, 'problems' : all_pbs}
-pages = {get_page : { 'routes' : ['/wall/'], 'view' : 'wall', 'static' : True}}
+pages = {get_page : { 'routes' : ['/flow/'], 'view' : 'flow', 'static' : True}}
diff --git a/shinken/webui/plugins/wall/htdocs/css/wall.css b/shinken/webui/plugins/flow/htdocs/css/wall.css
similarity index 100%
copy from shinken/webui/plugins/wall/htdocs/css/wall.css
copy to shinken/webui/plugins/flow/htdocs/css/wall.css
diff --git a/shinken/webui/plugins/flow/htdocs/css/zflow.css b/shinken/webui/plugins/flow/htdocs/css/zflow.css
new file mode 100644
index 0000000..e2de830
--- /dev/null
+++ b/shinken/webui/plugins/flow/htdocs/css/zflow.css
@@ -0,0 +1,61 @@
+/*
+ Copyright (C) 2008, 2009 Charles Ying. All Rights Reserved.
+
+ This distribution is released under the BSD license.
+
+ http://css-vfx.googlecode.com/
+
+ See the README for documentation and license.
+*/
+
+.zflow
+{
+ -webkit-touch-callout: none;
+ -webkit-text-size-adjust: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.zflow div.centering
+{
+/*
+ position: absolute;
+*/
+ -webkit-perspective: 600;
+ -webkit-transform-style: preserve-3d;
+ -webkit-transform: translate3d(0, 0, 0);
+}
+
+.zflow div.tray
+{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+
+ -webkit-transform-style: preserve-3d;
+ -webkit-transform: translate3d(0, 0, 0);
+
+ -webkit-transition-property: -webkit-transform;
+ -webkit-transition-duration: 0.4s;
+ -webkit-transition-timing-function: ease-out;
+}
+
+.zflow div.cell
+{
+ position: absolute;
+ -webkit-transform-style: preserve-3d;
+ -webkit-transform: translate3d(0, 0, 0);
+
+ -webkit-transition-property: -webkit-transform opacity;
+ -webkit-transition-duration: 0.4s;
+ -webkit-transition-timing-function: ease-out;
+}
+
+.zflow div.cell img
+{
+ position: absolute;
+}
+
+.zflow div.cell canvas
+{
+ position: absolute;
+}
\ No newline at end of file
diff --git a/shinken/webui/plugins/eltdetail/htdocs/js/graphs.js b/shinken/webui/plugins/flow/htdocs/js/init.js
similarity index 85%
copy from shinken/webui/plugins/eltdetail/htdocs/js/graphs.js
copy to shinken/webui/plugins/flow/htdocs/js/init.js
index 828eb6b..852c8c0 100644
--- a/shinken/webui/plugins/eltdetail/htdocs/js/graphs.js
+++ b/shinken/webui/plugins/flow/htdocs/js/init.js
@@ -21,8 +21,13 @@
along with Shinken. If not, see <http://www.gnu.org/licenses/>.
*/
-/* When the page load, we will look at the graph tab to show up
- all element graph */
+/* We will initialize the WALL panel with our data*/
window.addEvent('domready', function(){
+
+
+ /*options = {'autoslide' : true};
+ snowstack_init(images, options);*/
+ zflow(images, "#tray");
});
+
diff --git a/shinken/webui/plugins/flow/htdocs/js/zflow.js b/shinken/webui/plugins/flow/htdocs/js/zflow.js
new file mode 100644
index 0000000..66f3775
--- /dev/null
+++ b/shinken/webui/plugins/flow/htdocs/js/zflow.js
@@ -0,0 +1,335 @@
+/*
+ Copyright (C) 2008, 2009 Charles Ying. All Rights Reserved.
+
+ This distribution is released under the BSD license.
+
+ http://css-vfx.googlecode.com/
+
+ See the README for documentation and license.
+*/
+
+(function () { // Module pattern
+
+ var global = this;
+
+/*
+ Utilities (avoid jQuery dependencies)
+*/
+
+ function utils_extend(obj, dict)
+ {
+ for (var key in dict)
+ {
+ obj[key] = dict[key];
+ }
+ }
+
+ function utils_setsize(elem, w, h)
+ {
+ elem.style.width = w.toString() + "px";
+ elem.style.height = h.toString() + "px";
+ }
+
+ function utils_setxy(elem, x, y)
+ {
+ elem.style.left = Math.round(x).toString() + "px";
+ elem.style.top = Math.round(y).toString() + "px";
+ }
+
+/*
+ TrayController is a horizontal touch event controller that tracks cumulative offsets and passes events to a delegate.
+*/
+
+ TrayController = function ()
+ {
+ return this;
+ }
+
+ TrayController.prototype.init = function (elem)
+ {
+ this.currentX = 0;
+ this.elem = elem;
+ }
+
+ TrayController.prototype.touchstart = function (event)
+ {
+ this.startX = event.touches[0].pageX - this.currentX;
+ this.touchMoved = false;
+
+ window.addEventListener("touchmove", this, true);
+ window.addEventListener("touchend", this, true);
+
+ this.elem.style.webkitTransitionDuration = "0s";
+ }
+
+ TrayController.prototype.touchmove = function (e)
+ {
+ this.touchMoved = true;
+ this.lastX = this.currentX;
+ this.lastMoveTime = new Date();
+ this.currentX = event.touches[0].pageX - this.startX;
+ this.delegate.update(this.currentX);
+ }
+
+ TrayController.prototype.touchend = function (e)
+ {
+ window.removeEventListener("touchmove", this, true);
+ window.removeEventListener("touchend", this, true);
+
+ this.elem.style.webkitTransitionDuration = "0.4s";
+
+ if (this.touchMoved)
+ {
+ /* Approximate some inertia -- the transition function takes care of the decay over 0.4s for us, but we need to amplify the last movement */
+ var delta = this.currentX - this.lastX;
+ var dt = (new Date()) - this.lastMoveTime + 1;
+ /* dx * 400 / dt */
+
+ this.currentX = this.currentX + delta * 200 / dt;
+ this.delegate.updateTouchEnd(this);
+ }
+ else
+ {
+ this.delegate.clicked(this.currentX);
+ }
+ }
+
+ TrayController.prototype.handleEvent = function (event)
+ {
+ this[event.type](event);
+ event.preventDefault();
+ }
+
+/*
+ These variables define how the zflow presentation is made.
+*/
+
+ const CSIZE = 150;
+ const CGAP = CSIZE / 2;
+
+ const FLOW_ANGLE = 70;
+ const FLOW_THRESHOLD = CGAP / 2;
+ const FLOW_ZFOCUS = CSIZE;
+ const FLOW_XGAP = CSIZE / 3;
+
+ const T_NEG_ANGLE = "rotateY(" + (- FLOW_ANGLE) + "deg)";
+ const T_ANGLE = "rotateY(" + FLOW_ANGLE + "deg)";
+ const T_ZFOCUS = "translate3d(0, 0, " + FLOW_ZFOCUS + "px)";
+
+ FlowDelegate = function ()
+ {
+ this.cells = new Array();
+ this.transforms = new Array();
+ }
+
+ FlowDelegate.prototype.init = function (elem)
+ {
+ this.elem = elem;
+ }
+
+ FlowDelegate.prototype.updateTouchEnd = function (controller)
+ {
+ this.lastFocus = undefined;
+
+ // Snap to nearest position
+ var i = this.getFocusedCell(controller.currentX);
+
+ controller.currentX = - i * CGAP;
+ this.update(controller.currentX);
+ }
+
+ FlowDelegate.prototype.clicked = function (currentX)
+ {
+ var i = - Math.round(currentX / CGAP);
+ var cell = this.cells[i];
+
+ var transform = this.transformForCell(cell, i, currentX);
+
+ if ((this.lastFocus == undefined) || this.lastFocus != i)
+ {
+ transform += " translate3d(0, 0, 150px) rotateY(180deg)";
+ this.lastFocus = i;
+ }
+ else
+ {
+ this.lastFocus = undefined;
+ }
+
+ this.setTransformForCell(cell, i, transform);
+ }
+
+ FlowDelegate.prototype.getFocusedCell = function (currentX)
+ {
+ // Snap to nearest position
+ var i = - Math.round(currentX / CGAP);
+
+ // Clamp to cells array boundary
+ return Math.min(Math.max(i, 0), this.cells.length - 1);
+ }
+
+ FlowDelegate.prototype.transformForCell = function (cell, i, offset)
+ {
+ /*
+ This function needs to be fast, so we avoid function calls, divides, Math.round,
+ and precalculate any invariants we can.
+ */
+ var x = (i * CGAP);
+ var ix = x + offset;
+
+ if ((ix < FLOW_THRESHOLD) && (ix >= -FLOW_THRESHOLD))
+ {
+ // yangle = 0, zpos = FLOW_ZFOCUS
+ return T_ZFOCUS + " translate3d(" + x + "px, 0, 0)";
+ }
+ else if (ix > 0)
+ {
+ // yangle = -FLOW_ANGLE, x + FLOW_XGAP
+ return "translate3d(" + (x + FLOW_XGAP) + "px, 0, 0) " + T_NEG_ANGLE;
+ }
+ else
+ {
+ // yangle = FLOW_ANGLE, x - FLOW_XGAP
+ return "translate3d(" + (x - FLOW_XGAP) + "px, 0, 0) " + T_ANGLE;
+ }
+ }
+
+ FlowDelegate.prototype.setTransformForCell = function (cell, i, transform)
+ {
+ if (this.transforms[i] != transform)
+ {
+ cell.style.webkitTransform = transform;
+ this.transforms[i] = transform;
+ }
+ }
+
+ FlowDelegate.prototype.update = function (currentX)
+ {
+ this.elem.style.webkitTransform = "translate3d(" + (currentX) + "px, 0, 0)";
+
+ /*
+ It would be nice if we only updated dirty cells... for now, we use a cache
+ */
+ for (var i in this.cells)
+ {
+ var cell = this.cells[i];
+ this.setTransformForCell(cell, i, this.transformForCell(cell, i, currentX));
+ i += 1;
+ }
+ }
+
+ global.zflow = function (images, selector)
+ {
+ var controller = new TrayController();
+ var delegate = new FlowDelegate();
+ var tray = document.querySelector(selector);
+
+ controller.init(tray);
+ delegate.init(tray);
+
+ controller.delegate = delegate;
+
+ var imagesLeft = images.length;
+
+ var cellCSS = {
+ top: Math.round(-CSIZE * 0.65) + "px",
+ left: Math.round(-CSIZE / 2) + "px",
+ width: CSIZE + "px",
+ height: Math.round(CSIZE * 1.5) + "px",
+ opacity: 0,
+ }
+
+ images.forEach(function (url, i)
+ {
+ var cell = document.createElement("div");
+ var image = document.createElement("img");
+ var canvas = document.createElement("canvas");
+
+ cell.className = "cell";
+ cell.appendChild(image);
+ cell.appendChild(canvas);
+
+ image.src = url;
+
+ image.addEventListener("load", function ()
+ {
+ imagesLeft -= 1;
+
+ var iwidth = image.width;
+ var iheight = image.height;
+
+ var ratio = Math.min(CSIZE / iheight, CSIZE / iwidth);
+
+ iwidth *= ratio;
+ iheight *= ratio;
+
+ utils_setsize(image, iwidth, iheight);
+
+ utils_extend(cell.style, cellCSS);
+
+ utils_setxy(image, (CSIZE - iwidth) / 2, CSIZE - iheight);
+ utils_setxy(canvas, (CSIZE - iwidth) / 2, CSIZE);
+
+ reflect(image, iwidth, iheight, canvas);
+
+ delegate.setTransformForCell(cell, delegate.cells.length, delegate.transformForCell(cell, delegate.cells.length, controller.currentX));
+ delegate.cells.push(cell);
+
+ // Start at 0 opacity
+ tray.appendChild(cell);
+
+ // Set to 1 to fade element in.
+ cell.style.opacity = 1.0;
+
+ if (imagesLeft == 0)
+ {
+ window.setTimeout( function() { window.scrollTo(0, 0); }, 100 );
+ }
+ });
+ });
+
+ tray.addEventListener('touchstart', controller, false);
+
+ /* Limited keyboard support for now */
+ window.addEventListener('keydown', function (e)
+ {
+ if (e.keyCode == 37)
+ {
+ /* Left Arrow */
+ controller.currentX += CGAP;
+ delegate.updateTouchEnd(controller);
+ }
+ else if (e.keyCode == 39)
+ {
+ /* Right Arrow */
+ controller.currentX -= CGAP;
+ delegate.updateTouchEnd(controller);
+ }
+ });
+ }
+
+ function reflect(image, iwidth, iheight, canvas)
+ {
+ canvas.width = iwidth;
+ canvas.height = iheight / 2;
+
+ var ctx = canvas.getContext("2d");
+
+ ctx.save();
+
+ ctx.translate(0, iheight - 1);
+ ctx.scale(1, -1);
+ ctx.drawImage(image, 0, 0, iwidth, iheight);
+
+ ctx.restore();
+
+ ctx.globalCompositeOperation = "destination-out";
+
+ var gradient = ctx.createLinearGradient(0, 0, 0, iheight / 2);
+ gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+ gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, iwidth, iheight / 2);
+ }
+
+})();
\ No newline at end of file
diff --git a/shinken/webui/plugins/flow/views/flow.tpl b/shinken/webui/plugins/flow/views/flow.tpl
new file mode 100644
index 0000000..27b0ca9
--- /dev/null
+++ b/shinken/webui/plugins/flow/views/flow.tpl
@@ -0,0 +1,18 @@
+%helper = app.helper
+
+%rebase layout css=['flow/css/zflow.css', 'wall/css/wall.css'], title='Flow view', js=['flow/js/zflow.js', 'flow/js/init.js'], refresh=True, user=user, print_menu=False, print_header=True
+
+
+
+<body class="zflow">
+
+<div class="centering">
+ <div id="tray" class="tray"></div>
+</div>
+
+
+<script type="text/javascript">
+var images = {{!impacts}};
+</script>
+
+
--
UNNAMED PROJECT
More information about the Pkg-nagios-changes
mailing list