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                     store: rrdstore,
  86                 },
  87                 {
  88                     xtype: 'proxmoxRRDChart',
  89                     title: gettext('Network traffic'),
  90                     pveSelNode: me.pveSelNode,
  91                     fields: ['netin', 'netout'],
  92                     store: rrdstore,
  93                 },
  94                 {
  95                     xtype: 'proxmoxRRDChart',
  96                     title: gettext('Disk IO'),
  97                     pveSelNode: me.pveSelNode,
  98                     fields: ['diskread', 'diskwrite'],
  99                     store: rrdstore,
 100                 },
 101             );
 102         }
 103
 104         Ext.apply(me, {
 105             tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
 106             items: [
 107                 {
 108                     xtype: 'container',
 109                     itemId: 'itemcontainer',
 110                     layout: {
 111                         type: 'column',
 112                     },
 113                     minWidth: 700,
 114                     defaults: {
 115                         minHeight: 330,
 116                         padding: 5,
 117                     },
 118                     items: items,
 119                     listeners: {
 120                         resize: function(container) {
 121                             PVE.Utils.updateColumns(container);
 122                         },
 123                     },
 124                 },
 125             ],
 126         });
 127
 128         me.callParent();
 129         if (!template) {
 130             rrdstore.startUpdate();
 131             me.on('destroy', rrdstore.stopUpdate);
 132         }
 133         let sp = Ext.state.Manager.getProvider();
 134         me.mon(sp, 'statechange', function(provider, key, value) {
 135             if (key !== 'summarycolumns') {
 136                 return;
 137             }
 138             PVE.Utils.updateColumns(me.getComponent('itemcontainer'));
 139         });
 140     },
 141 });