[pmg-gui.git] / js / Dashboard.js

/*global Proxmox*/
Ext.define('PMG.Dashboard', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmgDashboard',

    controller: {
	xclass: 'Ext.app.ViewController',

	openDashboardOptions: function() {
	    var me = this;
	    var viewModel = me.getViewModel();
	    Ext.create('Ext.window.Window', {
		modal: true,
		width: 300,
		title: gettext('Dashboard Options'),
		layout: {
		    type: 'auto'
		},
		items: [{
		    xtype: 'form',
		    bodyPadding: 10,
		    defaultButton: 'savebutton',
		    items: [{
			xtype: 'proxmoxintegerfield',
			itemId: 'hours',
			labelWidth: 100,
			anchor: '100%',
			allowBlank: false,
			minValue: 1,
			maxValue: 24,
			value: viewModel.get('hours'),
			fieldLabel: gettext('Hours to show')
		    }],
		    buttons: [{
			text: gettext('Save'),
			reference: 'loginButton',
			formBind: true,
			handler: function() {
			    var win = this.up('window');
			    var hours = win.down('#hours').getValue();
			    me.setHours(hours, true);
			    win.close();
			}
		    }]
		}]
	    }).show();
	},

	setHours: function(hours, setState) {
	    var me = this;
	    var viewModel = me.getViewModel();
	    viewModel.set('hours', hours);
	    viewModel.notify();

	    Ext.Array.forEach(['recentmails', 'receivers'], function(item) {
		viewModel.get(item).load();
	    });

	    if (setState) {
		var sp = Ext.state.Manager.getProvider();
		sp.set('dashboard-hours', hours);
	    }
	},

	updateMailStats: function(store, records, success) {
	    if (!success) {
		return;
	    }
	    var me = this;
	    var viewModel = me.getViewModel();

	    var count = 0;
	    var bytes_in = 0;
	    var bytes_out = 0;
	    var ptime = 0;
	    var avg_ptime = 0;

	    records.forEach(function(item) {
		bytes_in += item.data.bytes_in;
		bytes_out += item.data.bytes_out;
		// unnormalize
		count += (item.data.count*item.data.timespan)/60;
		ptime += item.data.ptimesum;
	    });

	    if (count) {
		avg_ptime = (ptime/count).toFixed(2);
	    }

	    viewModel.set('bytes_in', Proxmox.Utils.format_size(bytes_in));
	    viewModel.set('bytes_out', Proxmox.Utils.format_size(bytes_out));
	    viewModel.set('avg_ptime', avg_ptime + " s");
	},

	updateClusterStats: function(store, records, success) {
	    if (!success) {
		return;
	    }
	    var me = this;
	    var viewmodel = me.getViewModel();

	    var subStatus = 2; // 2 = all good, 1 = different leves, 0 = none
	    var subLevel = "";

	    var cpu = 0;
	    var mem = 0;
	    var hd = 0;
	    var count = records.length;

	    records.forEach(function(item) {
		// subscription level check
		if (subStatus && item.data.level) {
		    if (subLevel !== "" && subLevel !== item.data.level) {
			subStatus = 1;
		    } else if (subLevel === "") {
			subLevel = item.data.level;
		    }
		} else {
		    subStatus = 0;
		}

		// resources count
		cpu += item.data.cpu;
		mem += (item.data.memory.used/item.data.memory.total);
		hd += (item.data.rootfs.used/item.data.rootfs.total);
	    });

	    var subscriptionPanel = me.lookup('subscription');
	    subscriptionPanel.setSubStatus(subStatus);

	    cpu = cpu/count;
	    mem = mem/count;
	    hd = hd/count;

	    var cpuPanel = me.lookup('cpu');
	    cpuPanel.updateValue(cpu);

	    var memPanel = me.lookup('mem')
	    memPanel.updateValue(mem);

	    var hdPanel = me.lookup('hd')
	    hdPanel.updateValue(hd);
	},

	init: function(view) {
	    var me = this;
	    var sp = Ext.state.Manager.getProvider();
	    var hours = sp.get('dashboard-hours') || 12;
	    me.setHours(hours, false);
	}
    },

    viewModel: {
	data: {
	    timespan: 300, // in seconds
	    hours: 12, // in hours
	    'bytes_in': 0,
	    'bytes_out': 0,
	    'avg_ptime': 0.0
	},

	stores: {
	    cluster: {
		storeid: 'dash-cluster',
		type: 'update',
		interval: 5000,
		autoStart: true,
		autoLoad: true,
		autoDestroy: true,
		proxy: {
		    type: 'proxmox',
		    url: '/api2/json/config/cluster/status'
		},
		listeners: {
		    load: 'updateClusterStats'
		}
	    },
	    recentmails: {
		storeid: 'dash-recent',
		interval: 5000,
		type: 'update',
		autoStart: true,
		autoLoad: true,
		autoDestroy: true,
		proxy: {
		    type: 'proxmox',
		    url: '/api2/json/statistics/recent',
		    extraParams: {
			hours: '{hours}',
			timespan: '{timespan}'
		    }
		},
		fields: [
		    {
			type: 'number', name: 'count',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'count_in',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'count_out',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'spam',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'spam_in',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'spam_out',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'virus',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    {
			type: 'number', name: 'virus_in',
			convert: PMG.Utils.convert_field_to_per_min
		    },
		    { type: 'integer', name: 'virus_out' },
		    { type: 'integer', name: 'bytes_in' },
		    { type: 'integer', name: 'bytes_out' },
		    { type: 'number', name: 'ptimesum' },
		    { type: 'date', dateFormat: 'timestamp', name: 'time' }
		],
		listeners: {
		    load: 'updateMailStats'
		}
	    },
	    receivers: {
		storeid: 'dash-receivers',
		interval: 10000,
		type: 'update',
		autoStart: true,
		autoLoad: true,
		autoDestroy: true,
		proxy: {
		    type: 'proxmox',
		    url: '/api2/json/statistics/recentreceivers',
		    extraParams: {
			hours: '{hours}'
		    }
		},
		fields: [
		    { type: 'integer', name: 'count' },
		    { type: 'string', name: 'receiver' }
		]
	    }
	}
    },

    bind: {
	title: gettext('Dashboard') + ' (' +
	    Ext.String.format(gettext('{0} hours'), '{hours}') + ')'
    },

    layout: 'column',
    border: false,

    bodyPadding: '20 0 0 20',

    defaults: {
	columnWidth: 0.5,
	xtype: 'panel',
	margin: '0 20 20 0'
    },

    tools: [
	{
	    type: 'gear',
	    handler: 'openDashboardOptions'
	}
    ],

    scrollable: true,

    items: [
	{
	    height: 300,
	    flex: 1,
	    iconCls: 'fa fa-tachometer',
	    title: gettext('E-Mail Volume'),
	    layout: {
		type: 'vbox',
		align: 'stretch'
	    },
	    defaults: {
		xtype: 'pmgMiniGraph',
		bind: {
		    store: '{recentmails}'
		}
	    },
	    items: [
		{
		    fields: ['count'],
		    fieldTitles: [ gettext('Mails / min') ],
		    seriesConfig: {
			colors: [ '#00617F' ],
			style: {
			    opacity: 0.60,
			    lineWidth: 1
			},
			highlightCfg: {
			    opacity: 1,
			    scaling: 1
			}
		    }
		},
		{
		    fields: ['spam'],
		    fieldTitles: [ gettext('Spam / min') ],
		    seriesConfig: {
			colors: [ '#E67300' ],
			style: {
			    opacity: 0.60,
			    lineWidth: 1
			},
			highlightCfg: {
			    opacity: 1,
			    scaling: 1
			}
		    }
		}
	    ]
	},
	{
	    xtype: 'container',
	    height: 300,
	    layout: {
		type: 'vbox',
		align: 'stretch'
	    },
	    items: [
		{
		    xtype: 'pmgMailProcessing',
		    title: gettext('E-Mail Processing'),
		    iconCls: 'fa fa-hourglass-half',
		    height: 180,
		    bind: {
			data: {
			    'in': '{bytes_in}',
			    'out': '{bytes_out}',
			    'ptime': '{avg_ptime}'
			}
		    }
		},
		{
		    iconCls: 'fa fa-ticket',
		    title: 'Subscription',
		    reference: 'subscription',
		    xtype: 'pmgSubscriptionInfo',
		    margin: '10 0 0 0',
		    height: 110
		}
	    ]
	},
	{
	    height: 250,
	    iconCls: 'fa fa-tasks',
	    title: 'Node Resources',
	    bodyPadding: '0 20 0 20',
	    layout: {
		type: 'hbox',
		align: 'center'
	    },
	    defaults: {
		xtype: 'proxmoxGauge',
		spriteFontSize: '20px',
		flex: 1
	    },
	    items: [
		{
		    title: gettext('CPU'),
		    reference: 'cpu'
		},
		{
		    title: gettext('Memory'),
		    reference: 'mem'
		},
		{
		    title: gettext('Storage'),
		    reference: 'hd'
		}
	    ]
	},
	{
	    height: 250,
	    iconCls: 'fa fa-list',
	    title: gettext('Top Receivers'),

	    bodyPadding: 20,
	    layout: {
		type: 'vbox',
		pack: 'center',
		align: 'stretch'
	    },
	    items: [{
		xtype: 'grid',
		bind: {
		    store: '{receivers}'
		},

		emptyText: gettext('No data in database'),

		// remove all borders/lines/headers
		border: false,
		bodyBorder: false,
		hideHeaders: true,
		header: false,
		columnLines: false,
		rowLines: false,
		viewConfig: {
		    stripeRows: false
		},

		columns: [
		    {
			dataIndex: 'receiver',
			flex: 1,
			text: gettext('Receiver')
		    },
		    {
			dataIndex: 'count',
			align: 'right',
			text: gettext('Count')
		    }
		]
	    }]
	}
    ]
});
Commit	Line	Data
ff735274	1	/global Proxmox/
5936e3ef DC	2	Ext.define('PMG.Dashboard', {
	3	extend: 'Ext.panel.Panel',
	4	xtype: 'pmgDashboard',
	5
b047eec0 DC	6	controller: {
b047eec0 DC	7	xclass: 'Ext.app.ViewController',
5936e3ef	8
b047eec0 DC	9	openDashboardOptions: function() {
	10	var me = this;
	11	var viewModel = me.getViewModel();
	12	Ext.create('Ext.window.Window', {
	13	modal: true,
	14	width: 300,
	15	title: gettext('Dashboard Options'),
	16	layout: {
	17	type: 'auto'
	18	},
	19	items: [{
	20	xtype: 'form',
	21	bodyPadding: 10,
	22	defaultButton: 'savebutton',
	23	items: [{
	24	xtype: 'proxmoxintegerfield',
	25	itemId: 'hours',
	26	labelWidth: 100,
	27	anchor: '100%',
	28	allowBlank: false,
	29	minValue: 1,
	30	maxValue: 24,
	31	value: viewModel.get('hours'),
	32	fieldLabel: gettext('Hours to show')
	33	}],
	34	buttons: [{
	35	text: gettext('Save'),
	36	reference: 'loginButton',
	37	formBind: true,
	38	handler: function() {
	39	var win = this.up('window');
	40	var hours = win.down('#hours').getValue();
	41	me.setHours(hours, true);
	42	win.close();
	43	}
	44	}]
771bd0b9	45	}]
b047eec0 DC	46	}).show();
b047eec0 DC	47	},
5936e3ef	48
b047eec0 DC	49	setHours: function(hours, setState) {
	50	var me = this;
	51	var viewModel = me.getViewModel();
	52	viewModel.set('hours', hours);
	53	viewModel.notify();
	54
	55	Ext.Array.forEach(['recentmails', 'receivers'], function(item) {
	56	viewModel.get(item).load();
	57	});
	58
	59	if (setState) {
	60	var sp = Ext.state.Manager.getProvider();
	61	sp.set('dashboard-hours', hours);
	62	}
	63	},
	64
	65	updateMailStats: function(store, records, success) {
	66	if (!success) {
	67	return;
	68	}
	69	var me = this;
	70	var viewModel = me.getViewModel();
	71
	72	var count = 0;
	73	var bytes_in = 0;
	74	var bytes_out = 0;
	75	var ptime = 0;
	76	var avg_ptime = 0;
	77
	78	records.forEach(function(item) {
	79	bytes_in += item.data.bytes_in;
	80	bytes_out += item.data.bytes_out;
b79fbba8 DC	81	// unnormalize
b79fbba8 DC	82	count += (item.data.count*item.data.timespan)/60;
b047eec0 DC	83	ptime += item.data.ptimesum;
	84	});
	85
	86	if (count) {
	87	avg_ptime = (ptime/count).toFixed(2);
	88	}
	89
	90	viewModel.set('bytes_in', Proxmox.Utils.format_size(bytes_in));
	91	viewModel.set('bytes_out', Proxmox.Utils.format_size(bytes_out));
	92	viewModel.set('avg_ptime', avg_ptime + " s");
	93	},
	94
	95	updateClusterStats: function(store, records, success) {
	96	if (!success) {
	97	return;
	98	}
	99	var me = this;
	100	var viewmodel = me.getViewModel();
	101
	102	var subStatus = 2; // 2 = all good, 1 = different leves, 0 = none
	103	var subLevel = "";
	104
	105	var cpu = 0;
	106	var mem = 0;
	107	var hd = 0;
	108	var count = records.length;
	109
	110	records.forEach(function(item) {
	111	// subscription level check
	112	if (subStatus && item.data.level) {
	113	if (subLevel !== "" && subLevel !== item.data.level) {
	114	subStatus = 1;
	115	} else if (subLevel === "") {
	116	subLevel = item.data.level;
	117	}
	118	} else {
	119	subStatus = 0;
	120	}
	121
	122	// resources count
	123	cpu += item.data.cpu;
	124	mem += (item.data.memory.used/item.data.memory.total);
	125	hd += (item.data.rootfs.used/item.data.rootfs.total);
	126	});
	127
	128	var subscriptionPanel = me.lookup('subscription');
	129	subscriptionPanel.setSubStatus(subStatus);
	130
	131	cpu = cpu/count;
	132	mem = mem/count;
	133	hd = hd/count;
	134
	135	var cpuPanel = me.lookup('cpu');
	136	cpuPanel.updateValue(cpu);
	137
	138	var memPanel = me.lookup('mem')
	139	memPanel.updateValue(mem);
	140
	141	var hdPanel = me.lookup('hd')
	142	hdPanel.updateValue(hd);
	143	},
	144
	145	init: function(view) {
	146	var me = this;
147	var sp = Ext.state.Manager.getProvider();
148	var hours = sp.get('dashboard-hours') \|\| 12;
149	me.setHours(hours, false);
150	}
151	},
152
153	viewModel: {
154	data: {
155	timespan: 300, // in seconds
156	hours: 12, // in hours
157	'bytes_in': 0,
158	'bytes_out': 0,
771bd0b9	159	'avg_ptime': 0.0
b047eec0 DC	160	},
	161
	162	stores: {
	163	cluster: {
	164	storeid: 'dash-cluster',
	165	type: 'update',
	166	interval: 5000,
	167	autoStart: true,
	168	autoLoad: true,
	169	autoDestroy: true,
	170	proxy: {
	171	type: 'proxmox',
	172	url: '/api2/json/config/cluster/status'
	173	},
	174	listeners: {
	175	load: 'updateClusterStats'
	176	}
	177	},
	178	recentmails: {
	179	storeid: 'dash-recent',
	180	interval: 5000,
	181	type: 'update',
	182	autoStart: true,
	183	autoLoad: true,
	184	autoDestroy: true,
	185	proxy: {
	186	type: 'proxmox',
	187	url: '/api2/json/statistics/recent',
	188	extraParams: {
	189	hours: '{hours}',
	190	timespan: '{timespan}'
	191	}
	192	},
	193	fields: [
b79fbba8 DC	194	{
	195	type: 'number', name: 'count',
	196	convert: PMG.Utils.convert_field_to_per_min
	197	},
	198	{
	199	type: 'number', name: 'count_in',
	200	convert: PMG.Utils.convert_field_to_per_min
	201	},
	202	{
	203	type: 'number', name: 'count_out',
	204	convert: PMG.Utils.convert_field_to_per_min
	205	},
	206	{
	207	type: 'number', name: 'spam',
	208	convert: PMG.Utils.convert_field_to_per_min
	209	},
	210	{
	211	type: 'number', name: 'spam_in',
	212	convert: PMG.Utils.convert_field_to_per_min
	213	},
	214	{
	215	type: 'number', name: 'spam_out',
	216	convert: PMG.Utils.convert_field_to_per_min
	217	},
	218	{
	219	type: 'number', name: 'virus',
	220	convert: PMG.Utils.convert_field_to_per_min
	221	},
	222	{
	223	type: 'number', name: 'virus_in',
	224	convert: PMG.Utils.convert_field_to_per_min
	225	},
b047eec0 DC	226	{ type: 'integer', name: 'virus_out' },
	227	{ type: 'integer', name: 'bytes_in' },
	228	{ type: 'integer', name: 'bytes_out' },
	229	{ type: 'number', name: 'ptimesum' },
	230	{ type: 'date', dateFormat: 'timestamp', name: 'time' }
	231	],
	232	listeners: {
	233	load: 'updateMailStats'
	234	}
	235	},
	236	receivers: {
	237	storeid: 'dash-receivers',
	238	interval: 10000,
	239	type: 'update',
	240	autoStart: true,
	241	autoLoad: true,
	242	autoDestroy: true,
	243	proxy: {
	244	type: 'proxmox',
	245	url: '/api2/json/statistics/recentreceivers',
	246	extraParams: {
771bd0b9	247	hours: '{hours}'
b047eec0 DC	248	}
	249	},
	250	fields: [
	251	{ type: 'integer', name: 'count' },
	252	{ type: 'string', name: 'receiver' }
	253	]
	254	}
	255	}
	256	},
	257
	258	bind: {
	259	title: gettext('Dashboard') + ' (' +
	260	Ext.String.format(gettext('{0} hours'), '{hours}') + ')'
	261	},
	262
	263	layout: 'column',
	264	border: false,
	265
	266	bodyPadding: '20 0 0 20',
	267
	268	defaults: {
	269	columnWidth: 0.5,
	270	xtype: 'panel',
	271	margin: '0 20 20 0'
	272	},
	273
	274	tools: [
	275	{
	276	type: 'gear',
	277	handler: 'openDashboardOptions'
	278	}
	279	],
	280
	281	scrollable: true,
	282
	283	items: [
	284	{
	285	height: 300,
	286	flex: 1,
	287	iconCls: 'fa fa-tachometer',
	288	title: gettext('E-Mail Volume'),
	289	layout: {
	290	type: 'vbox',
771bd0b9	291	align: 'stretch'
b047eec0 DC	292	},
	293	defaults: {
	294	xtype: 'pmgMiniGraph',
	295	bind: {
	296	store: '{recentmails}'
	297	}
	298	},
	299	items: [
	300	{
	301	fields: ['count'],
b79fbba8	302	fieldTitles: [ gettext('Mails / min') ],
b047eec0 DC	303	seriesConfig: {
	304	colors: [ '#00617F' ],
	305	style: {
	306	opacity: 0.60,
	307	lineWidth: 1
	308	},
	309	highlightCfg: {
	310	opacity: 1,
	311	scaling: 1
771bd0b9 DC	312	}
771bd0b9 DC	313	}
b047eec0 DC	314	},
	315	{
	316	fields: ['spam'],
b79fbba8	317	fieldTitles: [ gettext('Spam / min') ],
b047eec0 DC	318	seriesConfig: {
	319	colors: [ '#E67300' ],
	320	style: {
	321	opacity: 0.60,
	322	lineWidth: 1
	323	},
	324	highlightCfg: {
	325	opacity: 1,
	326	scaling: 1
771bd0b9 DC	327	}
	328	}
	329	}
b047eec0 DC	330	]
	331	},
	332	{
	333	xtype: 'container',
	334	height: 300,
	335	layout: {
	336	type: 'vbox',
771bd0b9	337	align: 'stretch'
b047eec0 DC	338	},
	339	items: [
	340	{
	341	xtype: 'pmgMailProcessing',
	342	title: gettext('E-Mail Processing'),
	343	iconCls: 'fa fa-hourglass-half',
	344	height: 180,
	345	bind: {
	346	data: {
	347	'in': '{bytes_in}',
	348	'out': '{bytes_out}',
	349	'ptime': '{avg_ptime}'
	350	}
771bd0b9	351	}
b047eec0 DC	352	},
	353	{
	354	iconCls: 'fa fa-ticket',
	355	title: 'Subscription',
	356	reference: 'subscription',
	357	xtype: 'pmgSubscriptionInfo',
	358	margin: '10 0 0 0',
771bd0b9	359	height: 110
b047eec0 DC	360	}
	361	]
	362	},
	363	{
	364	height: 250,
	365	iconCls: 'fa fa-tasks',
	366	title: 'Node Resources',
	367	bodyPadding: '0 20 0 20',
	368	layout: {
	369	type: 'hbox',
	370	align: 'center'
	371	},
	372	defaults: {
	373	xtype: 'proxmoxGauge',
	374	spriteFontSize: '20px',
	375	flex: 1
	376	},
	377	items: [
	378	{
	379	title: gettext('CPU'),
	380	reference: 'cpu'
	381	},
	382	{
	383	title: gettext('Memory'),
	384	reference: 'mem'
	385	},
	386	{
	387	title: gettext('Storage'),
	388	reference: 'hd'
	389	}
	390	]
	391	},
	392	{
	393	height: 250,
	394	iconCls: 'fa fa-list',
	395	title: gettext('Top Receivers'),
	396
	397	bodyPadding: 20,
	398	layout: {
	399	type: 'vbox',
	400	pack: 'center',
	401	align: 'stretch'
	402	},
	403	items: [{
	404	xtype: 'grid',
	405	bind: {
	406	store: '{receivers}'
	407	},
	408
	409	emptyText: gettext('No data in database'),
	410
	411	// remove all borders/lines/headers
	412	border: false,
	413	bodyBorder: false,
	414	hideHeaders: true,
	415	header: false,
	416	columnLines: false,
	417	rowLines: false,
	418	viewConfig: {
771bd0b9	419	stripeRows: false
b047eec0 DC	420	},
	421
	422	columns: [
	423	{
	424	dataIndex: 'receiver',
	425	flex: 1,
	426	text: gettext('Receiver')
	427	},
	428	{
	429	dataIndex: 'count',
	430	align: 'right',
	431	text: gettext('Count')
	432	}
	433	]
	434	}]
	435	}
	436	]
5936e3ef	437	});