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
  54             // in non-template mode put the two panels always together
  55             items = [
  56                 {
  57                     xtype: 'container',
  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                     store: rrdstore
  79                 },
  80                 {
  81                     xtype: 'proxmoxRRDChart',
  82                     title: gettext('Memory usage'),
  83                     pveSelNode: me.pveSelNode,
  84                     fields: ['maxmem', 'mem'],
  85                     fieldTitles: [gettext('Total'), gettext('RAM usage')],
  86                     store: rrdstore
  87                 },
  88                 {
  89                     xtype: 'proxmoxRRDChart',
  90                     title: gettext('Network traffic'),
  91                     pveSelNode: me.pveSelNode,
  92                     fields: ['netin','netout'],
  93                     store: rrdstore
  94                 },
  95                 {
  96                     xtype: 'proxmoxRRDChart',
  97                     title: gettext('Disk IO'),
  98                     pveSelNode: me.pveSelNode,
  99                     fields: ['diskread','diskwrite'],
 100                     store: rrdstore
 101                 }
 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                     defaults: {
 116                         minHeight: 330,
 117                         padding: 5,
 118                     },
 119                     items: items,
 120                     listeners: {
 121                         resize: function(container) {
 122                             PVE.Utils.updateColumns(container);
 123                         }
 124                     }
 125                 }
 126             ]
 127         });
 128
 129         me.callParent();
 130         if (!template) {
 131             rrdstore.startUpdate();
 132             me.on('destroy', rrdstore.stopUpdate);
 133         }
 134         let sp = Ext.state.Manager.getProvider();
 135         me.mon(sp, 'statechange', function(provider, key, value) {
 136             if (key !== 'summarycolumns') {
 137                 return;
 138             }
 139             PVE.Utils.updateColumns(me.getComponent('itemcontainer'));
 140         });
 141     }
 142 });