pve-manager/www/manager6/panel/GuestSummary.js

Ext.define('PVE.qemu.Summary', {
    extend: 'Ext.panel.Panel',
    xtype: 'pveGuestSummary',

    scrollable: true,
    bodyPadding: 5,

    initComponent: function() {
        var me = this;

	var nodename = me.pveSelNode.data.node;
	if (!nodename) {
	    throw "no node name specified";
	}

	var vmid = me.pveSelNode.data.vmid;
	if (!vmid) {
	    throw "no VM ID specified";
	}

	if (!me.workspace) {
	    throw "no workspace specified";
	}

	if (!me.statusStore) {
	    throw "no status storage specified";
	}

	var type = me.pveSelNode.data.type;
	var template = !!me.pveSelNode.data.template;
	var rstore = me.statusStore;

	var width = template ? 1 : 0.5;
	var items = [
	    {
		xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
		responsiveConfig: {
		    'width < 1900': {
			columnWidth: width
		    },
		    'width >= 1900': {
			columnWidth: width / 2
		    }
		},
		itemId: 'gueststatus',
		pveSelNode: me.pveSelNode,
		rstore: rstore
	    },
	    {
		xtype: 'pveNotesView',
		maxHeight: 330,
		itemId: 'notesview',
		pveSelNode: me.pveSelNode,
		responsiveConfig: {
		    'width < 1900': {
			columnWidth: width
		    },
		    'width >= 1900': {
			columnWidth: width / 2
		    }
		}
	    }
	];

	var rrdstore;
	if (!template) {

	    rrdstore = Ext.create('Proxmox.data.RRDStore', {
		rrdurl: `/api2/json/nodes/${nodename}/${type}/${vmid}/rrddata`,
		model: 'pve-rrd-guest'
	    });

	    items.push(
		{
		    xtype: 'proxmoxRRDChart',
		    title: gettext('CPU usage'),
		    pveSelNode: me.pveSelNode,
		    fields: ['cpu'],
		    fieldTitles: [gettext('CPU usage')],
		    store: rrdstore
		},
		{
		    xtype: 'proxmoxRRDChart',
		    title: gettext('Memory usage'),
		    pveSelNode: me.pveSelNode,
		    fields: ['maxmem', 'mem'],
		    fieldTitles: [gettext('Total'), gettext('RAM usage')],
		    store: rrdstore
		},
		{
		    xtype: 'proxmoxRRDChart',
		    title: gettext('Network traffic'),
		    pveSelNode: me.pveSelNode,
		    fields: ['netin','netout'],
		    store: rrdstore
		},
		{
		    xtype: 'proxmoxRRDChart',
		    title: gettext('Disk IO'),
		    pveSelNode: me.pveSelNode,
		    fields: ['diskread','diskwrite'],
		    store: rrdstore
		}
	    );

	}

	Ext.apply(me, {
	    tbar: [ '->', { xtype: 'proxmoxRRDTypeSelector' } ],
	    items: [
		{
		    xtype: 'container',
		    layout: {
			type: 'column'
		    },
		    defaults: {
			minHeight: 330,
			padding: 5,
			plugins: 'responsive',
			responsiveConfig: {
			    'width < 1900': {
				columnWidth: 1
			    },
			    'width >= 1900': {
				columnWidth: 0.5
			    }
			}
		    },
		    items: items
		}
	    ]
	});

	me.callParent();
	if (!template) {
	    rrdstore.startUpdate();
	    me.on('destroy', rrdstore.stopUpdate);
	}
    }
});