[pve-devel] [PATCH manager 6/8] change layout of dc summary and nodeview

[Dominik Csapak]

this patch changes a few things:
 * instead of having the nodeview in full size, it is just a panel in
   the summary, similar to node/qemu/lxc summary
 * creates the store in the summary component, and not in the nodeview,
   because we need it later
 * makes most of the config options of the nodeview declarative, gets
   rid of the initcomponent
 * changes the 'online' yes/no to a check/x
 * makes the panel resizable with tools

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/dc/NodeView.js | 150 ++++++++++++++++++--------------------------
 www/manager6/dc/Summary.js  |  57 +++++++++++++----
 2 files changed, 104 insertions(+), 103 deletions(-)

diff --git a/www/manager6/dc/NodeView.js b/www/manager6/dc/NodeView.js
index eb9fb27..dea5f1d 100644
--- a/www/manager6/dc/NodeView.js
+++ b/www/manager6/dc/NodeView.js
@@ -1,103 +1,73 @@
 Ext.define('PVE.dc.NodeView', {
     extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pveDcNodeView',
 
-    alias: ['widget.pveDcNodeView'],
+    title: gettext('Nodes'),
+    disableSelection: true,
+    scrollable: true,
 
-    initComponent : function() {
-	var me = this;
-
-	var rstore = Ext.create('PVE.data.UpdateStore', {
-	    interval: 3000,
-	    storeid: 'pve-dc-nodes',
-	    model: 'pve-dc-nodes',
-	    proxy: {
-                type: 'pve',
-                url: "/api2/json/cluster/status"
-	    },
-	    filters: {
-		property: 'type',
-		value   : 'node'
-	    }
-	});
-
-	var store = Ext.create('PVE.data.DiffStore', { rstore: rstore });
-
-	var noClusterText = gettext("Standalone node - no cluster defined");
-	var status = Ext.create('Ext.Component', {
-	    padding: 2,
-	    html: ' ',
-	    dock: 'bottom'
-	});
-
-	Ext.apply(me, {
-	    store: store,
-	    stateful: false,
-	    bbar: [ status ],
-	    columns: [
-		{
-		    header: gettext('Name'),
-		    width: 200,
-		    sortable: true,
-		    dataIndex: 'name'
-		},
-		{
-		    header: 'ID',
-		    width: 50,
-		    sortable: true,
-		    dataIndex: 'nodeid'
-		},
-		{
-		    header: gettext('Online'),
-		    width: 100,
-		    sortable: true,
-		    dataIndex: 'online',
-		    renderer: PVE.Utils.format_boolean
-		},
-		{
-		    header: gettext('Support'),
-		    width: 100,
-		    sortable: true,
-		    dataIndex: 'level',
-		    renderer: PVE.Utils.render_support_level
-		},
-		{
-		    header: gettext('Server Address'),
-		    flex: 1,
-		    sortable: true,
-		    dataIndex: 'ip'
+    columns: [
+	{
+	    header: gettext('Name'),
+	    flex: 1,
+	    sortable: true,
+	    dataIndex: 'name'
+	},
+	{
+	    header: 'ID',
+	    width: 40,
+	    sortable: true,
+	    dataIndex: 'nodeid'
+	},
+	{
+	    header: gettext('Online'),
+	    width: 60,
+	    sortable: true,
+	    dataIndex: 'online',
+	    renderer: function(value) {
+		var icon = '<i class="fa good fa-check"></i>';
+		if (!value) {
+		    icon = '<i class="fa critical fa-times"></i>';
 		}
-	    ],
-	    listeners: {
-		show: rstore.startUpdate,
-		destroy: rstore.stopUpdate
-	    }
-	});
-
-	me.callParent();
 
-	me.mon(rstore, 'load', function(s, records, success) {
-	    if (!success) {
-		return;
+		return icon;
 	    }
+	},
+	{
+	    header: gettext('Support'),
+	    width: 100,
+	    sortable: true,
+	    dataIndex: 'level',
+	    renderer: PVE.Utils.render_support_level
+	},
+	{
+	    header: gettext('Server Address'),
+	    width: 115,
+	    sortable: true,
+	    dataIndex: 'ip'
+	},
+    ],
 
-	    var cluster_rec = rstore.getById('cluster');
-
-	    if (!cluster_rec) {
-		status.update(noClusterText);
-		return;
+    stateful: true,
+    stateId: 'grid-cluster-nodes',
+    tools: [
+	{
+	    type: 'up',
+	    handler: function(){
+		var me = this.up('grid');
+		var height = Math.max(me.getHeight()-50, 250);
+		me.setHeight(height);
 	    }
-
-	    var cluster_data = cluster_rec.getData();
-	    if (!cluster_data) {
-		status.update(noClusterText);
-		return;
+	},
+	{
+	    type: 'down',
+	    handler: function(){
+		var me = this.up('grid');
+		var height = me.getHeight()+50;
+		me.setHeight(height);
 	    }
-	    var text = gettext("Cluster") + ": " + cluster_data.name + ",  " +
-		gettext("Quorate") + ": " + PVE.Utils.format_boolean(cluster_data.quorate);
-	    status.update(text);
-	});
-
-    }
+	}
+    ]
 }, function() {
 
     Ext.define('pve-dc-nodes', {
diff --git a/www/manager6/dc/Summary.js b/www/manager6/dc/Summary.js
index 961f092..9426ac5 100644
--- a/www/manager6/dc/Summary.js
+++ b/www/manager6/dc/Summary.js
@@ -1,28 +1,59 @@
 Ext.define('PVE.dc.Summary', {
     extend: 'Ext.panel.Panel',
+    alias: 'widget.pveDcSummary',
 
-    alias: ['widget.pveDcSummary'],
+    scrollable: true,
+
+    bodyPadding: '10 0 0 0',
+
+    layout: 'column',
+
+    defaults: {
+	width: 762,
+	padding: '0 0 10 10'
+    },
+
+    items: [
+	{
+	    itemId: 'nodeview',
+	    xtype: 'pveDcNodeView',
+	    height: 250
+	}
+    ],
 
     initComponent: function() {
         var me = this;
 
-	var nodegrid = Ext.create('PVE.dc.NodeView', {
-	    title: gettext('Nodes'),
-	    border: false,
-	    region: 'center',
-	    flex: 3
+	var rstore = Ext.create('PVE.data.UpdateStore', {
+	    interval: 3000,
+	    storeid: 'pve-cluster-status',
+	    model: 'pve-dc-nodes',
+	    proxy: {
+                type: 'pve',
+                url: "/api2/json/cluster/status"
+	    }
 	});
 
-	Ext.apply(me, {
-	    layout: 'border',
-	    items: [ nodegrid ],
-	    listeners: {
-		activate: function() {
-		    nodegrid.fireEvent('show', nodegrid);
-		}
+	var gridstore = Ext.create('PVE.data.DiffStore', {
+	    rstore: rstore,
+	    filters: {
+		property: 'type',
+		value: 'node'
+	    },
+	    sorters: {
+		property: 'id',
+		direction: 'ASC'
 	    }
 	});
 
 	me.callParent();
+
+	me.getComponent('nodeview').setStore(gridstore);
+
+	me.on('destroy', function(){
+	    rstore.stopUpdate();
+	});
+
+	rstore.startUpdate();
     }
 });
-- 
2.1.4