[icinga-checkins] icinga.org: icinga-web/next: HTML in customvars produces errors

git at icinga.org git at icinga.org
Mon May 6 17:15:01 CEST 2013


Module: icinga-web
Branch: next
Commit: 1ef55726a64844feba1f450375dcf49284af51a8
URL:    https://git.icinga.org/?p=icinga-web.git;a=commit;h=1ef55726a64844feba1f450375dcf49284af51a8

Author: Marius Hein <marius.hein at netways.de>
Date:   Tue Apr 30 10:14:38 2013 +0200

HTML in customvars produces errors

Change renderer to use encoded html in qtip attribute.
This sanitizes html for using fragments in customvars.

fixes #4015

---

 app/modules/AppKit/lib/js/ux/EllipsisColumn.js   |   44 +++++++++-----
 app/modules/Cronks/lib/js/Cronk/grid/GridView.js |   70 ++++++++--------------
 pub/styles/icinga-icons.css                      |    6 +-
 3 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/app/modules/AppKit/lib/js/ux/EllipsisColumn.js b/app/modules/AppKit/lib/js/ux/EllipsisColumn.js
index 7d69ccb..1ce5bd6 100644
--- a/app/modules/AppKit/lib/js/ux/EllipsisColumn.js
+++ b/app/modules/AppKit/lib/js/ux/EllipsisColumn.js
@@ -22,18 +22,32 @@
 
 Ext.namespace('Ext.ux.grid');
 
-Ext.ux.grid.EllipsisColumn = Ext.extend(Ext.grid.Column, {
-    selectableClass: 'x-icinga-grid-cell-selectable',
-    
-    constructor: function(c) {
-        Ext.ux.grid.EllipsisColumn.superclass.constructor.call(this, c);
-        var vname = '{' + this.dataIndex + '}';
-        this.tpl = new Ext.XTemplate('<span ext:qtip="' + vname + '">' + vname + '</span>');
-        this.renderer = (function(value, p, r) {
-            p.css += ' ' + this.selectableClass;
-            return this.tpl.apply(r.data);
-        }).createDelegate(this);
-    }
-});
-
-Ext.grid.Column.types.ellipsiscolumn = Ext.ux.grid.EllipsisColumn;
\ No newline at end of file
+(function() {
+
+    "use strict";
+
+    Ext.ux.grid.EllipsisColumn = Ext.extend(Ext.grid.Column, {
+        selectableClass: 'x-icinga-grid-cell-selectable',
+
+        constructor: function(c) {
+            Ext.ux.grid.EllipsisColumn.superclass.constructor.call(this, c);
+            var vname = '{' + this.dataIndex + '}';
+
+            // Removed the record wrapper and added html encoded qtip
+            // to provide HTML in customvars #4015
+            this.tpl = new Ext.XTemplate('<span ext:qtip="{__data_encoded}">{__data}</span>');
+
+            this.renderer = (function(value, p, r) {
+                p.css += ' ' + this.selectableClass;
+                var data = r.get(this.dataIndex);
+                return this.tpl.apply({
+                    __data_encoded: Ext.util.Format.htmlEncode(data),
+                    __data: data
+                });
+            }).createDelegate(this);
+        }
+    });
+
+    Ext.grid.Column.types.ellipsiscolumn = Ext.ux.grid.EllipsisColumn;
+
+})();
\ No newline at end of file
diff --git a/app/modules/Cronks/lib/js/Cronk/grid/GridView.js b/app/modules/Cronks/lib/js/Cronk/grid/GridView.js
index cca0c4f..37bf14c 100644
--- a/app/modules/Cronks/lib/js/Cronk/grid/GridView.js
+++ b/app/modules/Cronks/lib/js/Cronk/grid/GridView.js
@@ -21,56 +21,34 @@
 // {{{ICINGA_LICENSE_CODE}}}
 /*global Ext: false, Icinga: false, AppKit: false, _: false, Cronk: false */
 
-Ext.ns("Ext.grid");
+Ext.namespace('Ext.ux.grid');
 
-(function () {
+(function() {
 
     "use strict";
-    
-    Ext.override(Ext.grid.GridView, {
-        /**
-         * @private
-         * Updates the size of every column and cell in the grid
-         */
-        updateAllColumnWidths : function() {
-            var totalWidth = this.getTotalWidth(),
-                colCount   = this.cm.getColumnCount(),
-                rows       = this.getRows(),
-                rowCount   = rows.length,
-                widths     = [],
-                row, rowFirstChild, trow, i, j;
 
-            for (i = 0; i < colCount; i++) {
-                widths[i] = this.getColumnWidth(i);
-                var cell = this.getHeaderCell(i);
-                if (cell) {
-                    cell.style.width = widths[i];
-                } else {
-                    // Call later on, things not ready yet
-                    this.updateAllColumnWidths.defer(20, this);
-                }
-                
-            }
-
-            this.updateHeaderWidth();
-
-            for (i = 0; i < rowCount; i++) {
-                row = rows[i];
-                row.style.width = totalWidth;
-                rowFirstChild = row.firstChild;
-
-                if (rowFirstChild) {
-                    rowFirstChild.style.width = totalWidth;
-                    trow = rowFirstChild.rows[0];
-
-                    for (j = 0; j < colCount; j++) {
-                        trow.childNodes[j].style.width = widths[j];
-                    }
-                }
-            }
-
-            this.onAllColumnWidthsUpdated(widths, totalWidth);
+    Ext.ux.grid.EllipsisColumn = Ext.extend(Ext.grid.Column, {
+        selectableClass: 'x-icinga-grid-cell-selectable',
+
+        constructor: function(c) {
+            Ext.ux.grid.EllipsisColumn.superclass.constructor.call(this, c);
+            var vname = '{' + this.dataIndex + '}';
+
+            // Removed the record wrapper and added html encoded qtip
+            // to provide HTML in customvars #4015
+            this.tpl = new Ext.XTemplate('<span ext:qtip="{__data_encoded}">{__data}</span>');
+
+            this.renderer = (function(value, p, r) {
+                p.css += ' ' + this.selectableClass;
+                var data = r.get(this.dataIndex);
+                return this.tpl.apply({
+                    __data_encoded: Ext.util.Format.htmlEncode(data),
+                    __data: data
+                });
+            }).createDelegate(this);
         }
     });
-    
+
+    Ext.grid.Column.types.ellipsiscolumn = Ext.ux.grid.EllipsisColumn;
+
 })();
\ No newline at end of file
diff --git a/pub/styles/icinga-icons.css b/pub/styles/icinga-icons.css
index 4dd56ca..e126526 100644
--- a/pub/styles/icinga-icons.css
+++ b/pub/styles/icinga-icons.css
@@ -17,9 +17,9 @@
 
 */
 
-.icon-32 { height:32px; width:32px}
-.icon-24 { height:24px; width:24px}
-.icon-16 { height:16px; width:16px}
+.icon-32 { height:32px; width:32px; display: inline-block}
+.icon-24 { height:24px; width:24px; display: inline-block}
+.icon-16 { height:16px; width:16px; display: inline-block}
 .icon-centered { background-position: center center; }
 
 .icinga-image-link {





More information about the icinga-checkins mailing list