ui: use byte unit and power-of-two base for memory rrd graphs

[pve-manager.git] / www / manager6 / node / Summary.js

diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index 121e59e0a960d9bcbd4ed7a3d1fa8a3a2e7de284..ccddd5a013fa68ebfd2950a90d06d3badffca13c 100644 (file)
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -3,7 +3,7 @@ Ext.define('PVE.node.Summary', {
     alias: 'widget.pveNodeSummary',
 
     scrollable: true,
-    bodyPadding: '10 0 0 0',
+    bodyPadding: 5,
 
     showVersions: function() {
        var me = this;
@@ -15,26 +15,46 @@ Ext.define('PVE.node.Summary', {
 
        var view = Ext.createWidget('component', {
            autoScroll: true,
+           id: 'pkgversions',
+           padding: 5,
            style: {
                'background-color': 'white',
                'white-space': 'pre',
                'font-family': 'monospace',
-               padding: '5px'
-           }
+           },
        });
 
        var win = Ext.create('Ext.window.Window', {
            title: gettext('Package versions'),
            width: 600,
-           height: 400,
+           height: 600,
            layout: 'fit',
            modal: true,
-           items: [ view ] 
+           items: [view],
+           buttons: [
+               {
+                   xtype: 'button',
+                   iconCls: 'fa fa-clipboard',
+                   handler: function(button) {
+                       window.getSelection().selectAllChildren(
+                           document.getElementById('pkgversions'),
+                       );
+                       document.execCommand("copy");
+                   },
+                   text: gettext('Copy'),
+               },
+               {
+                   text: gettext('Ok'),
+                   handler: function() {
+                       this.up('window').close();
+                   },
+               },
+           ],
        });
 
        Proxmox.Utils.API2Request({
            waitMsgTarget: me,
-           url: "/nodes/" + nodename + "/apt/versions",
+           url: `/nodes/${nodename}/apt/versions`,
            method: 'GET',
            failure: function(response, opts) {
                win.close();
@@ -42,27 +62,24 @@ Ext.define('PVE.node.Summary', {
            },
            success: function(response, opts) {
                win.show();
-               var text = '';
-
+               let text = '';
                Ext.Array.each(response.result.data, function(rec) {
-                   var version = "not correctly installed";
-                   var pkg = rec.Package;
+                   let version = "not correctly installed";
+                   let pkg = rec.Package;
                    if (rec.OldVersion && rec.CurrentState === 'Installed') {
                        version = rec.OldVersion;
                    }
                    if (rec.RunningKernel) {
-                       text += pkg + ': ' + version + ' (running kernel: ' +
-                           rec.RunningKernel + ')\n'; 
+                       text += `${pkg}: ${version} (running kernel: ${rec.RunningKernel})\n`;
                    } else if (rec.ManagerVersion) {
-                       text += pkg + ': ' + version + ' (running version: ' +
-                           rec.ManagerVersion + ')\n'; 
+                       text += `${pkg}: ${version} (running version: ${rec.ManagerVersion})\n`;
                    } else {
-                       text += pkg + ': ' + version + '\n'; 
+                       text += `${pkg}: ${version}\n`;
                    }
                });
 
                view.update(Ext.htmlEncode(text));
-           }
+           },
        });
     },
 
@@ -82,71 +99,94 @@ Ext.define('PVE.node.Summary', {
 
        var version_btn = new Ext.Button({
            text: gettext('Package versions'),
-           handler: function(){
+           handler: function() {
                Proxmox.Utils.checked_command(function() { me.showVersions(); });
-           }
+           },
        });
 
        var rrdstore = Ext.create('Proxmox.data.RRDStore', {
            rrdurl: "/api2/json/nodes/" + nodename + "/rrddata",
-           model: 'pve-rrd-node'
+           model: 'pve-rrd-node',
        });
 
        Ext.apply(me, {
-           tbar: [version_btn, '->', { xtype: 'pveRRDTypeSelector' } ],
-           plugins: {
-               ptype: 'lazyitems',
-               items: [
-                   {
-                       xtype: 'container',
-                       layout: 'column',
-                       defaults: {
-                           padding: '0 0 10 10'
+           tbar: [version_btn, '->', { xtype: 'proxmoxRRDTypeSelector' }],
+           items: [
+               {
+                   xtype: 'container',
+                   itemId: 'itemcontainer',
+                   layout: 'column',
+                   minWidth: 700,
+                   defaults: {
+                       minHeight: 320,
+                       padding: 5,
+                       columnWidth: 1,
+                   },
+                   items: [
+                       {
+                           xtype: 'pveNodeStatus',
+                           rstore: rstore,
+                           width: 770,
+                           pveSelNode: me.pveSelNode,
                        },
-                       items: [
-                           {
-                               xtype: 'pveNodeStatus',
-                               rstore: rstore,
-                               width: 770,
-                               pveSelNode: me.pveSelNode
-                           },
-                           {
-                               xtype: 'proxmoxRRDChart',
-                               title: gettext('CPU usage'),
-                               fields: ['cpu','iowait'],
-                               fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
-                               store: rrdstore
-                           },
-                           {
-                               xtype: 'proxmoxRRDChart',
-                               title: gettext('Server load'),
-                               fields: ['loadavg'],
-                               fieldTitles: [gettext('Load average')],
-                               store: rrdstore
-                           },
-                           {
-                               xtype: 'proxmoxRRDChart',
-                               title: gettext('Memory usage'),
-                               fields: ['memtotal','memused'],
-                               fieldTitles: [gettext('Total'), gettext('RAM usage')],
-                               store: rrdstore
-                           },
-                           {
-                               xtype: 'proxmoxRRDChart',
-                               title: gettext('Network traffic'),
-                               fields: ['netin','netout'],
-                               store: rrdstore
-                           }
-                       ]
-                   }
-               ]
-           },
+                       {
+                           xtype: 'proxmoxRRDChart',
+                           title: gettext('CPU usage'),
+                           fields: ['cpu', 'iowait'],
+                           fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
+                           store: rrdstore,
+                       },
+                       {
+                           xtype: 'proxmoxRRDChart',
+                           title: gettext('Server load'),
+                           fields: ['loadavg'],
+                           fieldTitles: [gettext('Load average')],
+                           store: rrdstore,
+                       },
+                       {
+                           xtype: 'proxmoxRRDChart',
+                           title: gettext('Memory usage'),
+                           fields: ['memtotal', 'memused'],
+                           fieldTitles: [gettext('Total'), gettext('RAM usage')],
+                           unit: 'bytes',
+                           powerOfTwo: true,
+                           store: rrdstore,
+                       },
+                       {
+                           xtype: 'proxmoxRRDChart',
+                           title: gettext('Network traffic'),
+                           fields: ['netin', 'netout'],
+                           store: rrdstore,
+                       },
+                   ],
+                   listeners: {
+                       resize: function(panel) {
+                           PVE.Utils.updateColumns(panel);
+                       },
+                   },
+               },
+           ],
            listeners: {
-               activate: function() { rstore.startUpdate(); rrdstore.startUpdate(); },
-               destroy: function() { rstore.stopUpdate(); rrdstore.stopUpdate(); }
-           }
+               activate: function() {
+                   rstore.setInterval(1000);
+                   rstore.startUpdate(); // just to be sure
+                   rrdstore.startUpdate();
+               },
+               destroy: function() {
+                   rstore.setInterval(5000); // don't stop it, it's not ours!
+                   rrdstore.stopUpdate();
+               },
+           },
        });
 
        me.callParent();
-    }
+
+       let sp = Ext.state.Manager.getProvider();
+       me.mon(sp, 'statechange', function(provider, key, value) {
+           if (key !== 'summarycolumns') {
+               return;
+           }
+           PVE.Utils.updateColumns(me.getComponent('itemcontainer'));
+       });
+    },
 });