ext6migrate: fix most ceph subtabs

this fixed the ceph subtabs: Status,Config,Crush,Disks,Monitor
with the usual fixes:
 * moving static configuration to class definition
 * change deprecated fields
 * make xtypes consistent
 * change "show" event to "activated"

 special note: i moved the subtabs to the left (like the firewall),
 because the alternatives are really bad (top looks not good, bottom
 is not obvious)

 i also changed the width of some headers in gridpanels when the
 title was too long

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/manager6/ceph/Config.js

@@ -2,6 +2,9 @@ Ext.define('PVE.node.CephConfig', {
     extend: 'Ext.panel.Panel',
     alias: ['widget.pveNodeCephConfig'],
 
+    bodyStyle: 'white-space:pre',
+    bodyPadding: 5,
+    scrollable: true,
     load: function() {
 	var me = this;
 	
@@ -28,9 +31,6 @@ Ext.define('PVE.node.CephConfig', {
 
 	Ext.apply(me, {
 	    url: '/nodes/' + nodename + '/ceph/config',
-	    bodyStyle: 'white-space:pre',
-	    bodyPadding: 5,
-	    autoScroll: true,
 	    listeners: {
 		show: function() {
 		    me.load();
@@ -48,6 +48,10 @@ Ext.define('PVE.node.Ceph', {
     extend: 'Ext.tab.Panel',
     alias: ['widget.pveNodeCeph'],
 
+    tabPosition: 'left',
+    tabRotation: 0,
+    minTabWidth: 80,
+
     getHState: function(itemId) {
 	 /*jslint confusion: true */
         var me = this;
@@ -93,8 +97,6 @@ Ext.define('PVE.node.Ceph', {
 	}
 
 	Ext.apply(me, {
-	    plain: true,
-	    tabPosition: 'bottom',
 	    defaults: {
 		border: false,
 		pveSelNode: me.pveSelNode

www/manager6/ceph/Crush.js

@@ -1,7 +1,9 @@
 Ext.define('PVE.node.CephCrushMap', {
     extend: 'Ext.panel.Panel',
     alias: ['widget.pveNodeCephCrushMap'],
-
+    bodyStyle: 'white-space:pre',
+    bodyPadding: 5,
+    scrollable: true,
     load: function() {
 	var me = this;
 	
@@ -28,11 +30,9 @@ Ext.define('PVE.node.CephCrushMap', {
 
 	Ext.apply(me, {
 	    url: '/nodes/' + nodename + '/ceph/crush',
-	    bodyStyle: 'white-space:pre',
+
-	    bodyPadding: 5,
-	    autoScroll: true,
 	    listeners: {
-		show: function() {
+		activate: function() {
 		    me.load();
 		}
 	    }

www/manager6/ceph/Disks.js

@@ -2,7 +2,52 @@
 Ext.define('PVE.node.CephDiskList', {
     extend: 'Ext.grid.GridPanel',
     alias: ['widget.pveNodeCephDiskList'],
-
+    columns: [
+	{
+	    header: gettext('Device'),
+	    width: 100,
+	    sortable: true,
+	    dataIndex: 'dev'
+	},
+	{
+	    header: gettext('Usage'),
+	    width: 80,
+	    sortable: false,
+	    renderer: function(v, metaData, rec) {
+		if (rec && (rec.data.osdid >= 0)) {
+		    return "osd." + rec.data.osdid;
+		}
+		return v || PVE.Utils.noText;
+	    },
+	    dataIndex: 'used'
+	},
+	{
+	    header: gettext('Size'),
+	    width: 100,
+	    align: 'right',
+	    sortable: false,
+	    renderer: PVE.Utils.format_size,
+	    dataIndex: 'size'
+	},
+	{
+	    header: gettext('Vendor'),
+	    width: 100,
+	    sortable: true,
+	    dataIndex: 'vendor'
+	},
+	{
+	    header: gettext('Model'),
+	    width: 200,
+	    sortable: true,
+	    dataIndex: 'model'
+	},
+	{
+	    header: gettext('Serial'),
+	    flex: 1,
+	    sortable: true,
+	    dataIndex: 'serial'
+	}
+    ],
     initComponent: function() {
 	 /*jslint confusion: true */
         var me = this;
@@ -57,54 +102,9 @@ Ext.define('PVE.node.CephDiskList', {
 	    selModel: sm,
 	    stateful: false,
 	    tbar: [ create_btn ],
-	    columns: [
+
-		{
-		    header: gettext('Device'),
-		    width: 100,
-		    sortable: true,
-		    dataIndex: 'dev'
-		},
-		{
-		    header: gettext('Usage'),
-		    width: 80,
-		    sortable: false,
-		    renderer: function(v, metaData, rec) {
-			if (rec && (rec.data.osdid >= 0)) {
-			    return "osd." + rec.data.osdid;
-			}
-			return v || PVE.Utils.noText;
-		    },
-		    dataIndex: 'used'
-		},
-		{
-		    header: gettext('Size'),
-		    width: 100,
-		    align: 'right',
-		    sortable: false,
-		    renderer: PVE.Utils.format_size,
-		    dataIndex: 'size'
-		},
-		{
-		    header: gettext('Vendor'),
-		    width: 100,
-		    sortable: true,
-		    dataIndex: 'vendor'
-		},
-		{
-		    header: gettext('Model'),
-		    width: 200,
-		    sortable: true,
-		    dataIndex: 'model'
-		},
-		{
-		    header: gettext('Serial'),
-		    flex: 1,
-		    sortable: true,
-		    dataIndex: 'serial'
-		}
-	    ],
 	    listeners: {
-		show: rstore.startUpdate,
+		activate: rstore.startUpdate,
 		hide: rstore.stopUpdate,
 		destroy: rstore.stopUpdate
 	    }
@@ -129,6 +129,31 @@ Ext.define('PVE.form.CephDiskSelector', {
 
     diskType: 'journal_disks',
 
+    valueField: 'dev',
+    displayField: 'dev',
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('Device'),
+		width: 80,
+		sortable: true,
+		dataIndex: 'dev'
+	    },
+	    {
+		header: gettext('Size'),
+		width: 60,
+		sortable: false,
+		renderer: PVE.Utils.format_size,
+		dataIndex: 'size'
+	    },
+	    {
+		header: gettext('Serial'),
+		flex: 1,
+		sortable: true,
+		dataIndex: 'serial'
+	    }
+	]
+    },
     initComponent: function() {
 	var me = this;
 
@@ -155,31 +180,6 @@ Ext.define('PVE.form.CephDiskSelector', {
 
 	Ext.apply(me, {
 	    store: store,
-	    valueField: 'dev',
-	    displayField: 'dev',
-            listConfig: {
-		columns: [
-		    {
-			header: gettext('Device'),
-			width: 80,
-			sortable: true,
-			dataIndex: 'dev'
-		    },
-		    {
-			header: gettext('Size'),
-			width: 60,
-			sortable: false,
-			renderer: PVE.Utils.format_size,
-			dataIndex: 'size'
-		    },
-		    {
-			header: gettext('Serial'),
-			flex: 1,
-			sortable: true,
-			dataIndex: 'serial'
-		    }
-		]
-	    }
 	});
 
         me.callParent();

www/manager6/ceph/Monitor.js

@@ -29,7 +29,7 @@ Ext.define('PVE.CephCreateMon', {
             method: 'POST',
             items: [
                {
-		   xtype: 'PVE.form.NodeSelector',
+		   xtype: 'pveNodeSelector',
 		   submitValue: false,
 		   fieldLabel: gettext('Host'),
 		   selectCurNode: true,
@@ -176,7 +176,7 @@ Ext.define('PVE.node.CephMonList', {
 		},
 		{
 		    header: gettext('Quorum'),
-		    width: 50,
+		    width: 70,
 		    sortable: false,
 		    renderer: PVE.Utils.format_boolean,
 		    dataIndex: 'quorum'
@@ -189,7 +189,7 @@ Ext.define('PVE.node.CephMonList', {
 		}
 	    ],
 	    listeners: {
-		show: rstore.startUpdate,
+		activate: rstore.startUpdate,
 		hide: rstore.stopUpdate,
 		destroy: rstore.stopUpdate
 	    }

www/manager6/ceph/Status.js

@@ -1,7 +1,8 @@
 Ext.define('PVE.node.CephStatus', {
     extend: 'PVE.grid.ObjectGrid',
     alias: ['widget.pveNodeCephStatus'],
-
+    cwidth1: 150,
+    interval: 3000,
     initComponent: function() {
 	 /*jslint confusion: true */
         var me = this;
@@ -85,8 +86,6 @@ Ext.define('PVE.node.CephStatus', {
 
 	Ext.applyIf(me, {
 	    url: "/api2/json/nodes/" + nodename + "/ceph/status",
-	    cwidth1: 150,
-	    interval: 3000,
 	    rows: {
 		health: { 
 		    header: 'health',