change layout of dc summary and nodeview

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@proxmox.com>

diff --git a/www/manager6/dc/NodeView.js b/www/manager6/dc/NodeView.js
index eb9fb277da06cb5c11593c5ebcfb37e9fe9c2d75..dea5f1da43f72afd33a9f41dba86cc5be9c278fa 100644 (file)
--- 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 961f09210b70afc1638c0a176c271699618fc70a..9426ac542649927f97b7bfebb56b8cd364070a09 100644 (file)
--- 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();
     }
 });