[pve-devel] [PATCH 1/3] pending grid demo

Alexandre Derumier aderumier at odiso.com
Fri Dec 19 11:57:29 CET 2014


fixme:

- add missing options from config file in store
- remove ObjectStore2.js

Signed-off-by: Alexandre Derumier <aderumier at odiso.com>
---
 www/manager/Makefile             |    2 +
 www/manager/data/ObjectStore2.js |   28 ++++++++
 www/manager/data/PVEProxy.js     |    6 ++
 www/manager/grid/ObjectGrid2.js  |  132 ++++++++++++++++++++++++++++++++++++++
 www/manager/qemu/HardwareView.js |    4 +-
 www/manager/qemu/Options.js      |    4 +-
 6 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 www/manager/data/ObjectStore2.js
 create mode 100644 www/manager/grid/ObjectGrid2.js

diff --git a/www/manager/Makefile b/www/manager/Makefile
index 704895d..b5f6ba6 100644
--- a/www/manager/Makefile
+++ b/www/manager/Makefile
@@ -19,6 +19,7 @@ JSSRC= 				                 	\
 	data/UpdateStore.js				\
 	data/DiffStore.js				\
 	data/ObjectStore.js				\
+	data/ObjectStore2.js				\
 	data/ResourceStore.js				\
 	form/VLanField.js				\
 	form/Checkbox.js				\
@@ -76,6 +77,7 @@ JSSRC= 				                 	\
 	grid/CheckColumn.js				\
 	grid/SelectFeature.js				\
 	grid/ObjectGrid.js				\
+	grid/ObjectGrid2.js				\
 	grid/ResourceGrid.js				\
 	grid/PoolMembers.js				\
 	grid/FirewallRules.js				\
diff --git a/www/manager/data/ObjectStore2.js b/www/manager/data/ObjectStore2.js
new file mode 100644
index 0000000..0946f03
--- /dev/null
+++ b/www/manager/data/ObjectStore2.js
@@ -0,0 +1,28 @@
+Ext.define('PVE.data.ObjectStore2',  {
+    extend: 'PVE.data.UpdateStore',
+
+    constructor: function(config) {
+	var me = this;
+
+        config = config || {};
+
+	if (!config.storeid) {
+	    config.storeid =  'pve-store-' + (++Ext.idSeed);
+	}
+
+        Ext.applyIf(config, {
+	    model: 'KeyValuePendingDelete',
+            proxy: {
+                type: 'pve',
+		url: config.url,
+		extraParams: config.extraParams,
+//                reader: {
+//		    type: 'jsonobject',
+//		    rows: config.rows
+//		}
+            }
+        });
+
+        me.callParent([config]);
+    }
+});
diff --git a/www/manager/data/PVEProxy.js b/www/manager/data/PVEProxy.js
index 46cecf6..219a620 100644
--- a/www/manager/data/PVEProxy.js
+++ b/www/manager/data/PVEProxy.js
@@ -67,6 +67,12 @@ Ext.define('PVE.RestProxy', {
 	idProperty: 'key'
     });
 
+    Ext.define('KeyValuePendingDelete', {
+	extend: "Ext.data.Model",
+	fields: [ 'key', 'value', 'pending', 'delete' ],
+	idProperty: 'key'
+    });
+
     Ext.define('pve-string-list', {
 	extend: 'Ext.data.Model',
 	fields:  [ 'n', 't' ],
diff --git a/www/manager/grid/ObjectGrid2.js b/www/manager/grid/ObjectGrid2.js
new file mode 100644
index 0000000..76589da
--- /dev/null
+++ b/www/manager/grid/ObjectGrid2.js
@@ -0,0 +1,132 @@
+Ext.define('PVE.grid.ObjectGrid2', {
+    extend: 'Ext.grid.GridPanel',
+    alias: ['widget.pveObjectGrid2'],
+
+    getObjectValue: function(key, defaultValue) {
+	var me = this;
+	var rec = me.store.getById(key);
+	if (rec) {
+	    return rec.data.value;
+	}
+	return defaultValue;
+    },
+
+    renderKey: function(key, metaData, record, rowIndex, colIndex, store) {
+	var me = this;
+	var rows = me.rows;
+	var rowdef = (rows && rows[key]) ?  rows[key] : {};
+	return rowdef.header || key;
+    },
+
+    renderValue: function(value, metaData, record, rowIndex, colIndex, store) {
+	var me = this;
+	var rows = me.rows;
+	var key = record.data.key;
+	var rowdef = (rows && rows[key]) ?  rows[key] : {};
+	var renderer = rowdef.renderer;
+	var current = '';
+	var pendingdelete = '';
+	var pending = '';
+
+	if (renderer) {
+	    current = renderer(value, metaData, record, rowIndex, colIndex, store);
+	    if(record.data['pending']){
+		pending = renderer(record.data['pending'], metaData, record, rowIndex, colIndex, store);
+	    }
+	}else{
+	    current = value;
+	    pending = record.data['pending'];
+	}
+	if(record.data['delete']){
+	    pendingdelete = '<div style="text-decoration: line-through;">'+ current +'</div>';
+	}
+
+	value = current;
+	if(pending || pendingdelete){
+	    value += '<div style="color:red">' + pending + pendingdelete + '</div>';
+	}
+	return value;
+    },
+
+    initComponent : function() {
+	var me = this;
+
+	var rows = me.rows;
+
+	if (!me.rstore) {
+	    if (!me.url) {
+		throw "no url specified";
+	    }
+
+//fixme : use updatestore directly
+
+	    me.rstore = Ext.create('PVE.data.ObjectStore2', {
+//	    me.rstore = Ext.create('PVE.data.UpdateStore', {
+		url: me.url,
+		interval: me.interval,
+		extraParams: me.extraParams,
+		rows: me.rows,
+//                model: 'KeyValuePendingDelete',
+//		storeid:  'pve-store-' + (++Ext.idSeed)
+	    });
+	}
+
+	var rstore = me.rstore;
+
+	var store = Ext.create('PVE.data.DiffStore', { rstore: rstore });
+
+	if (rows) {
+	    Ext.Object.each(rows, function(key, rowdef) {
+		//fixme : add missing options from config file ?
+		if (Ext.isDefined(rowdef.defaultValue)) {
+		    store.add({ key: key, value: rowdef.defaultValue, pending: undefined });
+		} else if (rowdef.required) {
+		    store.add({ key: key, value: undefined, pending: undefined });
+		}
+	    });
+	}
+
+	if (me.sorterFn) {
+	    store.sorters.add(new Ext.util.Sorter({
+		sorterFn: me.sorterFn
+	    }));
+	}
+
+	store.filters.add(new Ext.util.Filter({
+	    filterFn: function(item) {
+		if (rows) {
+		    var rowdef = rows[item.data.key];
+		    if (!rowdef || (rowdef.visible === false)) {
+			return false;
+		    }
+		}
+		return true;
+	    }
+	}));
+
+	PVE.Utils.monStoreErrors(me, rstore);
+
+
+	Ext.applyIf(me, {
+	    store: store,
+	    hideHeaders: true,
+	    stateful: false,
+	    columns: [
+		{
+		    header: gettext('Name'),
+		    width: me.cwidth1 || 100,
+		    dataIndex: 'key',
+		    renderer: me.renderKey
+		},
+		{
+		    flex: 1,
+		    header: gettext('Value'),
+		    dataIndex: 'value',
+		    renderer: me.renderValue
+		}
+	    ]
+	});
+
+	me.callParent();
+   }
+});
diff --git a/www/manager/qemu/HardwareView.js b/www/manager/qemu/HardwareView.js
index f1055e5..31c8be0 100644
--- a/www/manager/qemu/HardwareView.js
+++ b/www/manager/qemu/HardwareView.js
@@ -1,7 +1,7 @@
 // fixme: howto avoid jslint type confusion?
 /*jslint confusion: true */
 Ext.define('PVE.qemu.HardwareView', {
-    extend: 'PVE.grid.ObjectGrid',
+    extend: 'PVE.grid.ObjectGrid2',
     alias: ['widget.PVE.qemu.HardwareView'],
 
     renderKey: function(key, metaData, record, rowIndex, colIndex, store) {
@@ -359,7 +359,7 @@ Ext.define('PVE.qemu.HardwareView', {
 	});
 
 	Ext.applyIf(me, {
-	    url: '/api2/json/' + baseurl,
+	    url: '/api2/json/' + 'nodes/' + nodename + '/qemu/' + vmid + '/pending',
 	    selModel: sm,
 	    cwidth1: 170,
 	    tbar: [ 
diff --git a/www/manager/qemu/Options.js b/www/manager/qemu/Options.js
index 490c475..7cd302f 100644
--- a/www/manager/qemu/Options.js
+++ b/www/manager/qemu/Options.js
@@ -1,6 +1,6 @@
 /*jslint confusion: true */
 Ext.define('PVE.qemu.Options', {
-    extend: 'PVE.grid.ObjectGrid',
+    extend: 'PVE.grid.ObjectGrid2',
     alias: ['widget.PVE.qemu.Options'],
 
     initComponent : function() {
@@ -315,7 +315,7 @@ Ext.define('PVE.qemu.Options', {
 	};
 
 	Ext.applyIf(me, {
-	    url: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/config",
+	    url: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/pending",
 	    cwidth1: 170,
 	    tbar: [ edit_btn ],
 	    rows: rows,
-- 
1.7.10.4




More information about the pve-devel mailing list