www/manager6/panel/GuestSummary.js

   1 Ext.define('PVE.qemu.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: 'pveNotesView',
  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                     layout: {
  58                         type: 'hbox',
  59                         align: 'stretch',
  60                     },
  61                     items: items,
  62                 },
  63             ];
  64
  65             rrdstore = Ext.create('Proxmox.data.RRDStore', {
  66                 rrdurl: `/api2/json/nodes/${nodename}/${type}/${vmid}/rrddata`,
  67                 model: 'pve-rrd-guest',
  68             });
  69
  70             items.push(
  71                 {
  72                     xtype: 'proxmoxRRDChart',
  73                     title: gettext('CPU usage'),
  74                     pveSelNode: me.pveSelNode,
  75                     fields: ['cpu'],
  76                     fieldTitles: [gettext('CPU usage')],
  77                     store: rrdstore,
  78                 },
  79                 {
  80                     xtype: 'proxmoxRRDChart',
  81                     title: gettext('Memory usage'),
  82                     pveSelNode: me.pveSelNode,
  83                     fields: ['maxmem', 'mem'],
  84                     fieldTitles: [gettext('Total'), gettext('RAM usage')],
  85                     unit: 'bytes',
  86                     powerOfTwo: true,
  87                     store: rrdstore,
  88                 },
  89                 {
  90                     xtype: 'proxmoxRRDChart',
  91                     title: gettext('Network traffic'),
  92                     pveSelNode: me.pveSelNode,
  93                     fields: ['netin', 'netout'],
  94                     store: rrdstore,
  95                 },
  96                 {
  97                     xtype: 'proxmoxRRDChart',
  98                     title: gettext('Disk IO'),
  99                     pveSelNode: me.pveSelNode,
 100                     fields: ['diskread', 'diskwrite'],
 101                     store: rrdstore,
 102                 },
 103             );
 104         }
 105
 106         Ext.apply(me, {
 107             tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
 108             items: [
 109                 {
 110                     xtype: 'container',
 111                     itemId: 'itemcontainer',
 112                     layout: {
 113                         type: 'column',
 114                     },
 115                     minWidth: 700,
 116                     defaults: {
 117                         minHeight: 330,
 118                         padding: 5,
 119                     },
 120                     items: items,
 121                     listeners: {
 122                         resize: function(container) {
 123                             Proxmox.Utils.updateColumns(container);
 124                         },
 125                     },
 126                 },
 127             ],
 128         });
 129
 130         me.callParent();
 131         if (!template) {
 132             rrdstore.startUpdate();
 133             me.on('destroy', rrdstore.stopUpdate);
 134         }
 135         let sp = Ext.state.Manager.getProvider();
 136         me.mon(sp, 'statechange', function(provider, key, value) {
 137             if (key !== 'summarycolumns') {
 138                 return;
 139             }
 140             Proxmox.Utils.updateColumns(me.getComponent('itemcontainer'));
 141         });
 142     },
 143 });