[pve-devel] r5775 - in pve-manager/pve2/www/new: . data

svn-commits at proxmox.com svn-commits at proxmox.com
Fri Apr 1 11:33:13 CEST 2011


Author: dietmar
Date: 2011-04-01 11:33:13 +0200 (Fri, 01 Apr 2011)
New Revision: 5775

Added:
   pve-manager/pve2/www/new/data/ResourceStore.js
Removed:
   pve-manager/pve2/www/new/data/RessourceStore.js
Modified:
   pve-manager/pve2/www/new/Makefile.am
   pve-manager/pve2/www/new/PVEUtils.js
   pve-manager/pve2/www/new/ResourceTree.js
   pve-manager/pve2/www/new/data/PVEProxy.js
Log:
split out ResourceStore into singleton class


Modified: pve-manager/pve2/www/new/Makefile.am
===================================================================
--- pve-manager/pve2/www/new/Makefile.am	2011-04-01 08:45:06 UTC (rev 5774)
+++ pve-manager/pve2/www/new/Makefile.am	2011-04-01 09:33:13 UTC (rev 5775)
@@ -5,6 +5,7 @@
 	data/PVEProxy.js				\
 	data/UpdateQueue.js				\
 	data/UpdateStore.js				\
+	data/ResourceStore.js				\
 	form/RealmComboBox.js				\
 	window/LoginWindow.js				\
 	ResourceTree.js					\

Modified: pve-manager/pve2/www/new/PVEUtils.js
===================================================================
--- pve-manager/pve2/www/new/PVEUtils.js	2011-04-01 08:45:06 UTC (rev 5774)
+++ pve-manager/pve2/www/new/PVEUtils.js	2011-04-01 09:33:13 UTC (rev 5775)
@@ -23,6 +23,20 @@
 Ext.define('PVE.Utils', {
     singleton: true,
 
+    statics: {
+
+	log_severity_hash: {
+	    0: "panic",
+	    1: "alert",
+	    2: "critical",
+	    3: "error",
+	    4: "warning",
+	    5: "notice",
+	    6: "info",
+	    7: "debug"
+	}
+    },
+
     authOK: function() {
 	return Ext.util.Cookies.get('PVEAuthCookie');
     },
@@ -31,6 +45,139 @@
 	Ext.util.Cookies.clear("PVEAuthCookie");
     },
 
+    format_size: function(size) {
+
+	var kb = size / 1024;
+
+	if (kb < 1024)
+	    return kb.toFixed(0) + "KB";
+
+	var mb = size / (1024*1024);
+
+	if (mb < 1024)
+	    return mb.toFixed(0) + "MB";
+
+	var gb = mb / 1024;
+
+	if (gb < 1024)
+	    return gb.toFixed(2) + "GB";
+
+	var tb =  gb / 1024;
+	return tb.toFixed(2) + "TB";
+
+    },
+
+    format_html_bar: function(per, text) {
+
+	return "<div class='pve-bar-wrap'>" + text + "<div class='pve-bar-border'>" +
+	    "<div class='pve-bar-inner' style='width:" + per + "%;'></div>" +
+	    "</div></div>";
+	
+    },
+
+    format_cpu_bar: function(per1, per2, text) {
+
+	return "<div class='pve-bar-border'>" +
+	    "<div class='pve-bar-inner' style='width:" + per1 + "%;'></div>" +
+	    "<div class='pve-bar-inner2' style='width:" + per2 + "%;'></div>" +
+	    "<div class='pve-bar-text'>" + text + "</div>" + 
+	    "</div>";
+    },
+
+    format_large_bar: function(per, text) {
+
+	if (!text)
+	    text = per.toFixed(1) + "%";
+
+	return "<div class='pve-largebar-border'>" +
+	    "<div class='pve-largebar-inner' style='width:" + per + "%;'></div>" +
+	    "<div class='pve-largebar-text'>" + text + "</div>" + 
+	    "</div>";
+    },
+
+    format_duration_long: function(ut) {
+
+	var days = Math.floor(ut / 86400);
+	ut -= days*86400;
+	var hours = Math.floor(ut / 3600);
+	ut -= hours*3600;
+	var mins = Math.floor(ut / 60);
+	ut -= mins*60;
+
+	hours = "00" + hours;
+	hours = hours.substr(hours.length - 2);
+	mins = "00" + mins;
+	mins = mins.substr(mins.length - 2);
+	ut = "00" + ut;
+	ut = ut.substr(ut.length - 2);
+
+	if (days) {
+	    var ds = days > 1 ? 'days' : 'day';
+	    return days + ' ' + ds + ' ' + 
+		hours + ':' + mins + ':' + ut;
+	} else {
+	    return hours + ':' + mins + ':' + ut;
+	}
+    },
+
+    format_duration_short: function(ut) {
+	
+	if (ut < 60)
+	    return ut + 's';
+
+	if (ut < 3600) {
+	    var mins = ut / 60;
+	    return mins.toFixed(0) + 'm';
+	}
+
+	if (ut < 86400) {
+	    var hours = ut / 3600;
+	    return hours.toFixed(0) + 'h';
+	}
+
+	var days = ut / 86400;
+	return days.toFixed(0) + 'd';	
+    },
+
+    format_storage_type: function(value) {
+	var desc = {
+	    dir: 'Directory',
+	    nfs: 'NFS',
+	    lvm: 'LVM',
+	    iscsi: 'iSCSI'
+	};
+	return desc[value] || 'unknown';
+    },
+
+    format_boolean: function(value) {
+	return value ? 'Yes' : 'No';
+    },
+
+    format_neg_boolean: function(value) {
+	return !value ? 'Yes' : 'No';
+    },
+
+    format_content_types: function(value) {
+	var cta = [];
+
+	Ext.each(value.split(','), function(ct) {
+	    if (ct === 'images')
+		cta.push('Images');
+	    if (ct === 'backup')
+		cta.push('Backups');
+	    if (ct === 'vztmpl')
+		cta.push('Templates');
+	    if (ct === 'iso')
+		cta.push('ISO');
+	});
+
+	return cta.join(', ');
+    },
+
+    render_serverity: function (value) {
+	return PVE.Utils.log_severity_hash[value] || value;
+    },
+
     render_upid: function(value, metaData, record) { 
 	var type = record.data.type;
 	var id = record.data.id;
@@ -43,27 +190,80 @@
 	}
 
 	return value;
-    },			  
- 
-    constructor : function(){
-        var self = this;
+    },
+    
+    render_cpu: function(value, metaData, record, rowIndex, colIndex, store) {
 
-	var log_severity_hash = {
-	    0: "panic",
-	    1: "alert",
-	    2: "critical",
-	    3: "error",
-	    4: "warning",
-	    5: "notice",
-	    6: "info",
-	    7: "debug"
-	};
+	var cpu = value;
+	var maxcpu = record.data.maxcpu;
 
-	Ext.apply(self, {
-	    render_serverity: function (value) {		
-		return log_severity_hash[value] || value;
-	    }
-	});
-    }
+	if (cpu === undefined || maxcpu === undefined)
+	    return ''
+
+	var per = (cpu * 100) / maxcpu;
+
+	return PVE.Utils.format_html_bar(per, per.toFixed(0) + '% of ' + 
+				     maxcpu + (maxcpu > 1 ? 'CPUs' : 'CPU'));
+    },
+
+    render_mem: function(value, metaData, record, rowIndex, colIndex, store) {
+
+	var mem = value;
+	var maxmem = record.data.maxmem;
+	
+	if (record.data.itype == 'storage' || mem === undefined || maxmem === undefined)
+	    return ''
+
+	return PVE.Utils.format_html_bar((mem * 100) / maxmem, 
+				     PVE.Utils.format_size(mem));
+
+    },
+
+    render_disk: function(value, metaData, record, rowIndex, colIndex, store) {
+
+	var disk = value;
+	var maxdisk = record.data.maxdisk;
+
+	if (disk === undefined || maxdisk === undefined)
+	    return ''
+
+	return PVE.Utils.format_html_bar((disk * 100) / maxdisk, 
+				     PVE.Utils.format_size(disk));
+    },
+
+    render_itype: function(value, metaData, record, rowIndex, colIndex, store) {
+
+	var cls = 'pve-itype-icon-' + value;
+
+	return "<div class='" + cls + "'</div><div>" + value + "</div>";
+    },
+
+    render_uptime: function(value, metaData, record, rowIndex, colIndex, store) {
+
+	var uptime = value;
+
+	if (uptime === undefined)
+	    return '';
+	
+	if (uptime <= 0)
+	    return '-';
+
+	return PVE.PVE.Utils.format_duration_long(uptime);
+    },
+
+    render_upid: function(value, metaData, record) { 
+	var type = record.data.type;
+	var id = record.data.id;
+
+	if (type == 'vncproxy') {
+	    return "VNC connection to VM " + id;
+	}
+	if (type == 'vncshell') {
+	    return "VNC shell";
+	}
+
+	return value;
+    }			  
+
 });
 

Modified: pve-manager/pve2/www/new/ResourceTree.js
===================================================================
--- pve-manager/pve2/www/new/ResourceTree.js	2011-04-01 08:45:06 UTC (rev 5774)
+++ pve-manager/pve2/www/new/ResourceTree.js	2011-04-01 09:33:13 UTC (rev 5775)
@@ -1,25 +1,101 @@
 Ext.define('PVE.ResourceTree', {
     extend: 'Ext.tree.TreePanel',
-    requires: ['PVE.Utils', 'PVE.data.UpdateStore'],
+    requires: ['Ext.tree.*', 'PVE.Utils', 'PVE.data.ResourceStore'],
     alias: ['widget.pveResourceTree'],
+    
+    statics: {
+	updateCount: 0
+    },
 
+    // private
+    updateTree: function() {
+	var self = this;
+ 
+	var rootnode = self.store.node;
+	//rootnode.collapse();
+	//rootnode.removeAll(true);
+
+	var index = self.dataIndex;
+
+	var rstore = PVE.data.ResourceStore;
+
+	// remove vanished or changed items
+	for (var key in index) {
+	    if (!index.hasOwnProperty(key))
+		continue;
+
+	    var olditem = index[key];
+
+	    var changed = false;
+	    // getById() use find(), which is slow (ExtJS4 DP5) 
+	    //var item = rstore.getById(olditem.data.id);
+	    var item = rstore.data.get(olditem.data.id);
+
+	    if (!item || changed) {
+		console.log("REM UID: " + key);
+		delete index[key];
+		olditem.remove(true);
+	    }
+	}
+
+ 	// add new items
+        rstore.each(function(item) {
+	    var olditem = index[item.id];
+	    if (olditem)
+		return;
+
+	    var itype = item.data.type;
+	    console.log("ADD UID: " + item.id);
+	    item.data.text = item.id;
+	    item.data.leaf = true;
+	    item.data.cls = 'x-tree-icon-parent';
+
+	    var ni = Ext.apply({}, item.data);
+	    var nn = Ext.ModelMgr.create(ni,  'PVETree');
+	    rootnode.appendChild(nn);
+	    index[item.id] = nn;
+	});
+
+	if (!PVE.ResourceTree.updateCount) {
+	    rootnode.collapse();
+	    rootnode.expand();
+	}
+
+	PVE.ResourceTree.updateCount++;
+    },
+
     initComponent : function() {
 	var self = this;
 
-	var rstore = Ext.create('PVE.data.UpdateStore', {
-	    storeid: 'PVEResources',
-	    model: 'PVEResources',
-	    autoDestory: false
+	self.dataIndex = {};
+
+	var rstore = PVE.data.ResourceStore;
+	
+	rstore.on("load", self.updateTree, self);
+
+	var store = Ext.create('Ext.data.TreeStore', {
+	    model: 'PVETree',
+	    root: {
+		expanded: true,
+		id: 'root',
+		text: "Datacenter 1",
+	    }
 	});
 
-	rstore.startUpdate();
-
-	Ext.apply(this, {
+	Ext.apply(self, {
+	    store: store,
             title: 'Resource Tree',
-	    tbar: [ 'TEST' ]
+	    tbar: [ 'TEST' ],
+	    listeners: {
+		destroy: function() {
+		    rstore.un("load", self.updateTree, self)
+		}
+	    },
 	});
 
 	PVE.ResourceTree.superclass.initComponent.call(self);
+
+	rstore.startUpdate();
     }
 
 });

Modified: pve-manager/pve2/www/new/data/PVEProxy.js
===================================================================
--- pve-manager/pve2/www/new/data/PVEProxy.js	2011-04-01 08:45:06 UTC (rev 5774)
+++ pve-manager/pve2/www/new/data/PVEProxy.js	2011-04-01 09:33:13 UTC (rev 5775)
@@ -3,7 +3,9 @@
     alias : 'proxy.pve',
 
     constructor: function() {
-	Ext.apply(this, {
+	var self = this;
+
+	Ext.apply(self, {
 	    pageParam : null,
 	    startParam: null,
 	    limitParam: null,
@@ -17,27 +19,17 @@
 	    }
 	});
 
-        PVE.RestProxy.superclass.constructor.apply(this, arguments); 
+        PVE.RestProxy.superclass.constructor.apply(self, arguments); 
     }
 
 }, function() {
 
     Ext.regModel('PVERealm', {
 	fields: [ 'realm', 'comment', 'default' ],
-	idProperty: 'realm',
 	proxy: {
 	    type: 'pve',
 	    url: "/api2/json/access/domains"
 	}
     });
 
-    Ext.regModel('PVEResources', {
-	fields: ['id', 'type', 'name', 'node', 'storage', 'cpu', 'maxcpu',
-		 'mem', 'maxmem', 'disk', 'maxdisk', 'uptime'],
-	idProperty: 'id',
-	proxy: {
-	    type: 'pve',
-	    url: '/api2/json/cluster/vms',
-	}
-    });
 });

Copied: pve-manager/pve2/www/new/data/ResourceStore.js (from rev 5774, pve-manager/pve2/www/new/data/RessourceStore.js)
===================================================================
--- pve-manager/pve2/www/new/data/ResourceStore.js	                        (rev 0)
+++ pve-manager/pve2/www/new/data/ResourceStore.js	2011-04-01 09:33:13 UTC (rev 5775)
@@ -0,0 +1,109 @@
+Ext.define('PVE.data.ResourceStore', {
+    extend: 'PVE.data.UpdateStore',
+    requires: ['PVE.Utils'],
+    singleton: true,
+
+    constructor: function() {
+	var self = this;
+
+	var field_defaults = {
+	    type: {
+		header: 'Type',
+		type: 'text',
+		renderer: PVE.Utils.render_itype,
+		width: 50
+	    },
+	    id: {
+		header: 'ID',
+		hidden: true,
+		type: 'text'
+	    },
+	    vmid: {
+		header: 'VMID',
+		hidden: true,
+		type: 'integer'
+	    },
+	    name: {
+		header: 'Name',
+		type: 'text'
+	    },
+	    disk: {
+		header: 'Disk',
+		type: 'integer',
+		renderer: PVE.Utils.render_disk,
+		width: 60
+	    },
+	    maxdisk: {
+		header: 'maxdisk',
+		type: 'integer',
+		hidden: true,
+		width: 60
+	    },
+	    mem: {
+		header: 'Memory',
+		type: 'integer',
+		renderer: PVE.Utils.render_mem,
+		width: 60
+	    },
+	    maxmem: {
+		header: 'maxmem',
+		type:'integer',
+		hidden: true,
+		width: 60
+	    },
+	    cpu: {
+		header: 'CPU',
+		type: 'float',
+		renderer: PVE.Utils.render_cpu,
+		width: 85
+	    },
+	    maxcpu: {
+		header: 'maxcpu',
+		type: 'integer',
+		hidden: true,
+		width: 60
+	    },
+	    uptime: {
+		header: 'Uptime',
+		type: 'integer',
+		renderer: PVE.Utils.render_uptime,
+		width: 110
+	    }, 
+	    node: {
+		header: 'Node',
+		type: 'text',
+		hidden: true,
+		width: 110
+	    },
+	    storage: {
+		header: 'Storage',
+		type: 'text',
+		hidden: true,
+		width: 110
+	    }
+	};
+
+	var fields = Ext.Object.getKeys(field_defaults);
+
+	Ext.regModel('PVEResources', {
+	    fields: fields,
+	    proxy: {
+		type: 'pve',
+		url: '/api2/json/cluster/resources'
+	    }
+	});
+
+	Ext.regModel('PVETree', {
+	    fields: fields,
+	    proxy: { type: 'memory' }
+	});
+
+	var config = Ext.apply({}, {
+	    storeid: 'PVEResources',
+	    model: 'PVEResources',
+	    autoDestory: false
+	});
+
+	self.callParent([config]);
+    }
+});

Deleted: pve-manager/pve2/www/new/data/RessourceStore.js
===================================================================
--- pve-manager/pve2/www/new/data/RessourceStore.js	2011-04-01 08:45:06 UTC (rev 5774)
+++ pve-manager/pve2/www/new/data/RessourceStore.js	2011-04-01 09:33:13 UTC (rev 5775)
@@ -1,109 +0,0 @@
-Ext.define('PVE.data.ResourceStore', {
-    extend: 'Ext.data.UpdateStore',
-    requires: ['PVE.Utils'],
-    singleton: true,
-
-    constructor: function() {
-	var self = this;
-
-	var field_defaults = {
-	    type: {
-		header: 'Type',
-		type: 'text',
-		renderer: PVE.Utils.render_itype,
-		width: 50
-	    },
-	    id: {
-		header: 'ID',
-		hidden: true,
-		type: 'text'
-	    },
-	    vmid: {
-		header: 'VMID',
-		hidden: true,
-		type: 'integer'
-	    },
-	    name: {
-		header: 'Name',
-		type: 'text'
-	    },
-	    disk: {
-		header: 'Disk',
-		type: 'integer',
-		renderer: PVE.Utils.render_disk,
-		width: 60
-	    },
-	    maxdisk: {
-		header: 'maxdisk',
-		type: 'integer',
-		hidden: true,
-		width: 60
-	    },
-	    mem: {
-		header: 'Memory',
-		type: 'integer',
-		renderer: PVE.Utils.render_mem,
-		width: 60
-	    },
-	    maxmem: {
-		header: 'maxmem',
-		type:'integer',
-		hidden: true,
-		width: 60
-	    },
-	    cpu: {
-		header: 'CPU',
-		type: 'float',
-		renderer: PVE.Utils.render_cpu,
-		width: 85
-	    },
-	    maxcpu: {
-		header: 'maxcpu',
-		type: 'integer',
-		hidden: true,
-		width: 60
-	    },
-	    uptime: {
-		header: 'Uptime',
-		type: 'integer',
-		renderer: PVE.Utils.render_uptime,
-		width: 110
-	    }, 
-	    node: {
-		header: 'Node',
-		type: 'text',
-		hidden: true,
-		width: 110
-	    },
-	    storage: {
-		header: 'Storage',
-		type: 'text',
-		hidden: true,
-		width: 110
-	    }
-	};
-
-	var fields = field_defaults.getKeys;
-
-	Ext.regModel('PVEResources', {
-	    fields: fields,
-	    proxy: {
-		type: 'pve',
-		url: '/api2/json/cluster/resources'
-	    }
-	});
-
-	Ext.regModel('PVETree', {
-	    fields: fields,
-	    proxy: { type: 'memory' }
-	});
-
-	Ext.apply(self, {
-	    storeid: 'PVEResources',
-	    model: 'PVEResources',
-	    autoDestory: false,
-	});
-
-	self.callParent();
-    }
-});



More information about the pve-devel mailing list