www/manager6/panel/GuestSummary.js

   1 Ext.define('PVE.guest.Summary', {
   2     extend: 'Ext.panel.Panel',
   3     xtype: 'pveGuestSummary',
   4
   5     scrollable: true,
   6     bodyPadding: 5,
   7
   8     initComponent: function() {
   9         var me = this;
  10
  11         var nodename = me.pveSelNode.data.node;
  12         if (!nodename) {
  13             throw "no node name specified";
  14         }
  15
  16         var vmid = me.pveSelNode.data.vmid;
  17         if (!vmid) {
  18             throw "no VM ID specified";
  19         }
  20
  21         if (!me.workspace) {
  22             throw "no workspace specified";
  23         }
  24
  25         if (!me.statusStore) {
  26             throw "no status storage specified";
  27         }
  28
  29         var type = me.pveSelNode.data.type;
  30         var template = !!me.pveSelNode.data.template;
  31         var rstore = me.statusStore;
  32
  33         var items = [
  34             {
  35                 xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
  36                 flex: 1,
  37                 padding: template ? '5' : '0 5 0 0',
  38                 itemId: 'gueststatus',
  39                 pveSelNode: me.pveSelNode,
  40                 rstore: rstore,
  41             },
  42             {
  43                 xtype: 'pmxNotesView',
  44                 flex: 1,
  45                 padding: template ? '5' : '0 0 0 5',
  46                 itemId: 'notesview',
  47                 pveSelNode: me.pveSelNode,
  48             },
  49         ];
  50
  51         var rrdstore;
  52         if (!template) {
  53             // in non-template mode put the two panels always together
  54             items = [
  55                 {
  56                     xtype: 'container',
  57                     height: 300,
  58                     layout: {
  59                         type: 'hbox',
  60                         align: 'stretch',
  61                     },
  62                     items: items,
  63                 },
  64             ];
  65
  66             rrdstore = Ext.create('Proxmox.data.RRDStore', {
  67                 rrdurl: `/api2/json/nodes/${nodename}/${type}/${vmid}/rrddata`,
  68                 model: 'pve-rrd-guest',
  69             });
  70
  71             items.push(
  72                 {
  73                     xtype: 'proxmoxRRDChart',
  74                     title: gettext('CPU usage'),
  75                     pveSelNode: me.pveSelNode,
  76                     fields: ['cpu'],
  77                     fieldTitles: [gettext('CPU usage')],
  78                     unit: 'percent',
  79                     store: rrdstore,
  80                 },
  81                 {
  82                     xtype: 'proxmoxRRDChart',
  83                     title: gettext('Memory usage'),
  84                     pveSelNode: me.pveSelNode,
  85                     fields: ['maxmem', 'mem'],
  86                     fieldTitles: [gettext('Total'), gettext('RAM usage')],
  87                     unit: 'bytes',
  88                     powerOfTwo: true,
  89                     store: rrdstore,
  90                 },
  91                 {
  92                     xtype: 'proxmoxRRDChart',
  93                     title: gettext('Network traffic'),
  94                     pveSelNode: me.pveSelNode,
  95                     fields: ['netin', 'netout'],
  96                     store: rrdstore,
  97                 },
  98                 {
  99                     xtype: 'proxmoxRRDChart',
 100                     title: gettext('Disk IO'),
 101                     pveSelNode: me.pveSelNode,
 102                     fields: ['diskread', 'diskwrite'],
 103                     store: rrdstore,
 104                 },
 105             );
 106         }
 107
 108         Ext.apply(me, {
 109             tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
 110             items: [
 111                 {
 112                     xtype: 'container',
 113                     itemId: 'itemcontainer',
 114                     layout: {
 115                         type: 'column',
 116                     },
 117                     minWidth: 700,
 118                     defaults: {
 119                         minHeight: 330,
 120                         padding: 5,
 121                     },
 122                     items: items,
 123                     listeners: {
 124                         resize: function(container) {
 125                             Proxmox.Utils.updateColumns(container);
 126                         },
 127                     },
 128                 },
 129             ],
 130         });
 131
 132         me.callParent();
 133         if (!template) {
 134             rrdstore.startUpdate();
 135             me.on('destroy', rrdstore.stopUpdate);
 136         }
 137         let sp = Ext.state.Manager.getProvider();
 138         me.mon(sp, 'statechange', function(provider, key, value) {
 139             if (key !== 'summarycolumns') {
 140                 return;
 141             }
 142             Proxmox.Utils.updateColumns(me.getComponent('itemcontainer'));
 143         });
 144     },
 145 });