Implement pendinggrid and pendingstore

Signed-off-by: Alexandre Derumier <aderumier@odiso.com>

www/manager/Makefile

@@ -19,6 +19,7 @@ JSSRC= 				                 	\
 	data/UpdateStore.js				\
 	data/DiffStore.js				\
 	data/ObjectStore.js				\
+	data/PendingObjectStore.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/PendingObjectGrid.js			\
 	grid/ResourceGrid.js				\
 	grid/PoolMembers.js				\
 	grid/FirewallRules.js				\

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' ],

www/manager/data/PendingObjectStore.js

+Ext.define('PVE.data.PendingObjectStore',  {
+    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,
+		    pending: 1
+		}
+            }
+        });
+
+        me.callParent([config]);
+    }
+});

www/manager/data/reader/JsonObject.js

@@ -37,21 +37,47 @@ Ext.define('PVE.data.reader.JsonObject', {
 		}
 	    }
 
-	    if (me.rows) {
-		Ext.Object.each(me.rows, function(key, rowdef) {
-		    if (Ext.isDefined(root[key])) {
-			data.push({key: key, value: root[key]});
-		    } else if (Ext.isDefined(rowdef.defaultValue)) {
-			data.push({key: key, value: rowdef.defaultValue});
-		    } else if (rowdef.required) {
-			data.push({key: key, value: undefined});
-		    }
-		});
+	    if (me.pending) {
+
+		if (me.rows) {
+		    Ext.Object.each(me.rows, function(key, rowdef) {
+			if (Ext.isDefined(root[key])) {
+			    if(Ext.isDefined(root[key]["value"])){
+				data.push({key: key, value: root[key]["value"], pending: root[key]["pending"], delete: root[key]["delete"]});
+			    }else if(Ext.isDefined(rowdef.defaultValue)){
+				data.push({key: key, value: rowdef.defaultValue, pending: root[key]["pending"], delete: root[key]["delete"]});
+			    }
+			} else if (Ext.isDefined(rowdef.defaultValue)) {
+			    data.push({key: key, value: rowdef.defaultValue, pending: undefined, delete: undefined});
+			} else if (rowdef.required) {
+			    data.push({key: key, value: undefined, pending: undefined, delete: undefined});
+			}
+		    });
+		} else {
+		    Ext.Object.each(root, function(key, value) {
+			data.push({key: key, value: root[key]["value"], pending: root[key]["pending"], delete: root[key]["delete"]});
+		    });
+	    	}
+
 	    } else {
-		Ext.Object.each(root, function(key, value) {
-		    data.push({key: key, value: value });
-		});
+
+		if (me.rows) {
+		    Ext.Object.each(me.rows, function(key, rowdef) {
+			if (Ext.isDefined(root[key])) {
+			    data.push({key: key, value: root[key]});
+			} else if (Ext.isDefined(rowdef.defaultValue)) {
+			    data.push({key: key, value: rowdef.defaultValue});
+			} else if (rowdef.required) {
+			    data.push({key: key, value: undefined});
+			}
+		    });
+		} else {
+		    Ext.Object.each(root, function(key, value) {
+			data.push({key: key, value: value });
+		    });
+	    	}
 	    }
+
 	}
         catch (ex) {
             Ext.Error.raise({

www/manager/grid/PendingObjectGrid.js

+Ext.define('PVE.grid.PendingObjectGrid', {
+    extend: 'Ext.grid.GridPanel',
+    alias: ['widget.pvePendingObjectGrid'],
+
+    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";
+	    }
+
+
+	    me.rstore = Ext.create('PVE.data.PendingObjectStore', {
+		url: me.url,
+		interval: me.interval,
+		extraParams: me.extraParams,
+		rows: me.rows,
+	    });
+	}
+
+	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, delete: undefined });
+		} else if (rowdef.required) {
+		    store.add({ key: key, value: undefined, pending: undefined, delete: 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();
+   }
+});

www/manager/qemu/HardwareView.js

 // fixme: howto avoid jslint type confusion?
 /*jslint confusion: true */
 Ext.define('PVE.qemu.HardwareView', {
-    extend: 'PVE.grid.ObjectGrid',
+    extend: 'PVE.grid.PendingObjectGrid',
     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: [ 

www/manager/qemu/Options.js

 /*jslint confusion: true */
 Ext.define('PVE.qemu.Options', {
-    extend: 'PVE.grid.ObjectGrid',
+    extend: 'PVE.grid.PendingObjectGrid',
     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,