ui: use some icons from widget-toolkit

[pve-manager.git] / www / manager6 / panel / GuestSummary.js

diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index 9706734a9f32981318cc868890124b98c903e25d..9dc699135fd7ffa36b946489d36dc175d838c13b 100644 (file)
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -37,7 +37,7 @@ Ext.define('PVE.qemu.Summary', {
                padding: template ? '5' : '0 5 0 0',
                itemId: 'gueststatus',
                pveSelNode: me.pveSelNode,
-               rstore: rstore
+               rstore: rstore,
            },
            {
                xtype: 'pveNotesView',
@@ -50,7 +50,6 @@ Ext.define('PVE.qemu.Summary', {
 
        var rrdstore;
        if (!template) {
-
            // in non-template mode put the two panels always together
            items = [
                {
@@ -59,13 +58,13 @@ Ext.define('PVE.qemu.Summary', {
                        type: 'hbox',
                        align: 'stretch',
                    },
-                   items: items
-               }
+                   items: items,
+               },
            ];
 
            rrdstore = Ext.create('Proxmox.data.RRDStore', {
                rrdurl: `/api2/json/nodes/${nodename}/${type}/${vmid}/rrddata`,
-               model: 'pve-rrd-guest'
+               model: 'pve-rrd-guest',
            });
 
            items.push(
@@ -75,7 +74,7 @@ Ext.define('PVE.qemu.Summary', {
                    pveSelNode: me.pveSelNode,
                    fields: ['cpu'],
                    fieldTitles: [gettext('CPU usage')],
-                   store: rrdstore
+                   store: rrdstore,
                },
                {
                    xtype: 'proxmoxRRDChart',
@@ -83,35 +82,37 @@ Ext.define('PVE.qemu.Summary', {
                    pveSelNode: me.pveSelNode,
                    fields: ['maxmem', 'mem'],
                    fieldTitles: [gettext('Total'), gettext('RAM usage')],
-                   store: rrdstore
+                   unit: 'bytes',
+                   powerOfTwo: true,
+                   store: rrdstore,
                },
                {
                    xtype: 'proxmoxRRDChart',
                    title: gettext('Network traffic'),
                    pveSelNode: me.pveSelNode,
-                   fields: ['netin','netout'],
-                   store: rrdstore
+                   fields: ['netin', 'netout'],
+                   store: rrdstore,
                },
                {
                    xtype: 'proxmoxRRDChart',
                    title: gettext('Disk IO'),
                    pveSelNode: me.pveSelNode,
-                   fields: ['diskread','diskwrite'],
-                   store: rrdstore
-               }
+                   fields: ['diskread', 'diskwrite'],
+                   store: rrdstore,
+               },
            );
-
        }
 
        Ext.apply(me, {
-           tbar: [ '->', { xtype: 'proxmoxRRDTypeSelector' } ],
+           tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
            items: [
                {
                    xtype: 'container',
                    itemId: 'itemcontainer',
                    layout: {
-                       type: 'column'
+                       type: 'column',
                    },
+                   minWidth: 700,
                    defaults: {
                        minHeight: 330,
                        padding: 5,
@@ -120,10 +121,10 @@ Ext.define('PVE.qemu.Summary', {
                    listeners: {
                        resize: function(container) {
                            PVE.Utils.updateColumns(container);
-                       }
-                   }
-               }
-           ]
+                       },
+                   },
+               },
+           ],
        });
 
        me.callParent();
@@ -131,5 +132,12 @@ Ext.define('PVE.qemu.Summary', {
            rrdstore.startUpdate();
            me.on('destroy', rrdstore.stopUpdate);
        }
-    }
+       let sp = Ext.state.Manager.getProvider();
+       me.mon(sp, 'statechange', function(provider, key, value) {
+           if (key !== 'summarycolumns') {
+               return;
+           }
+           PVE.Utils.updateColumns(me.getComponent('itemcontainer'));
+       });
+    },
 });