proxmox-backup/www/Dashboard.js

389 lines
7.7 KiB
JavaScript
Raw Normal View History

Ext.define('PBS.Dashboard', {
extend: 'Ext.panel.Panel',
xtype: 'pbsDashboard',
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 10 10 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();
if (setState) {
var sp = Ext.state.Manager.getProvider();
sp.set('dashboard-hours', hours);
}
},
updateSubscription: function(store, records, success) {
if (!success) { return; }
let me = this;
let subStatus = records[0].data.status === 'Active' ? 2 : 0; // 2 = all good, 1 = different leves, 0 = none
me.lookup('subscription').setSubStatus(subStatus);
},
updateUsageStats: function(store, records, success) {
if (!success) {
return;
}
if (records === undefined || records.length < 1) {
return;
}
let me = this;
let viewmodel = me.getViewModel();
let res = records[0].data;
viewmodel.set('fingerprint', res.info.fingerprint || Proxmox.Utils.unknownText);
let cpu = res.cpu,
mem = res.memory,
root = res.root;
var cpuPanel = me.lookup('cpu');
cpuPanel.updateValue(cpu);
var memPanel = me.lookup('mem');
memPanel.updateValue(mem.used / mem.total);
var hdPanel = me.lookup('root');
hdPanel.updateValue(root.used / root.total);
},
showFingerPrint: function() {
let me = this;
let vm = me.getViewModel();
let fingerprint = vm.get('fingerprint');
Ext.create('Ext.window.Window', {
modal: true,
width: 600,
title: gettext('Fingerprint'),
layout: 'form',
bodyPadding: '10 0',
items: [
{
xtype: 'textfield',
inputId: 'fingerprintField',
value: fingerprint,
editable: false,
},
],
buttons: [
{
xtype: 'button',
iconCls: 'fa fa-clipboard',
handler: function(b) {
var el = document.getElementById('fingerprintField');
el.select();
document.execCommand("copy");
},
text: gettext('Copy')
},
{
text: gettext('Ok'),
handler: function() {
this.up('window').close();
},
},
],
}).show();
},
updateTasks: function(store, records, success) {
if (!success) return;
let me = this;
records.sort((a, b) => a.data.duration - b.data.duration);
let top10 = records.slice(-10);
me.lookup('longesttasks').updateTasks(top10);
let data = {
backup: { error: 0, warning: 0, ok: 0, },
prune: { error: 0, warning: 0, ok: 0, },
garbage_collection: { error: 0, warning: 0, ok: 0, },
sync: { error: 0, warning: 0, ok: 0, },
};
records.forEach(record => {
let type = record.data.worker_type;
if (type === 'syncjob') {
type = 'sync';
}
if (data[type] && record.data.status) {
let parsed = Proxmox.Utils.parse_task_status(record.data.status);
data[type][parsed]++;
}
});
me.lookup('tasksummary').updateTasks(data);
},
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
error_shown: false,
fingerprint: "",
'bytes_in': 0,
'bytes_out': 0,
'avg_ptime': 0.0
},
formulas: {
disableFPButton: (get) => get('fingerprint') === "",
},
stores: {
usage: {
storeid: 'dash-usage',
type: 'update',
interval: 3000,
autoStart: true,
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'proxmox',
2020-04-30 10:58:41 +00:00
url: '/api2/json/nodes/localhost/status'
},
listeners: {
load: 'updateUsageStats'
}
},
subscription: {
storeid: 'dash-subscription',
type: 'update',
interval: 10000,
autoStart: true,
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'proxmox',
url: '/api2/json/subscription'
},
listeners: {
load: 'updateSubscription'
}
},
tasks: {
storeid: 'dash-tasks',
type: 'update',
interval: 15000,
autoStart: true,
autoLoad: true,
autoDestroy: true,
model: 'proxmox-tasks',
proxy: {
type: 'proxmox',
url: '/api2/json/status/tasks'
},
listeners: {
load: 'updateTasks'
}
},
}
},
title: gettext('Dashboard') + ' - WIP',
layout: {
type: 'column'
},
bodyPadding: '20 0 0 20',
defaults: {
columnWidth: 0.49,
xtype: 'panel',
margin: '0 20 20 0'
},
scrollable: true,
items: [
{
height: 250,
iconCls: 'fa fa-tasks',
title: gettext('Server Resources'),
bodyPadding: '0 20 0 20',
tools: [
{
xtype: 'button',
text: gettext('Show Fingerprint'),
handler: 'showFingerPrint',
bind: {
disabled: '{disableFPButton}',
},
},
],
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('Root Disk'),
reference: 'root'
}
]
},
{
xtype: 'pbsDatastoresStatistics',
height: 250,
},
{
xtype: 'pbsLongestTasks',
reference: 'longesttasks',
height: 250,
},
{
xtype: 'pbsRunningTasks',
height: 250,
},
{
xtype: 'pbsTaskSummary',
reference: 'tasksummary',
},
{
iconCls: 'fa fa-ticket',
title: 'Subscription',
height: 166,
reference: 'subscription',
xtype: 'pbsSubscriptionInfo',
},
]
});
Ext.define('PBS.dashboard.SubscriptionInfo', {
extend: 'Ext.panel.Panel',
xtype: 'pbsSubscriptionInfo',
style: {
cursor: 'pointer'
},
layout: {
type: 'hbox',
align: 'middle',
},
items: [
{
xtype: 'box',
itemId: 'icon',
data: {
icon: 'question-circle',
},
width: 100,
tpl: '<center><i class="fa fa-3x fa-{icon}"></i></center>',
},
{
flex: 1,
xtype: 'box',
data: {
message: gettext('Unknown'),
},
itemId: 'message',
tpl: '<center>{message}</center>',
},
],
setSubStatus: function(status) {
var me = this;
let icon = '';
let message = '';
switch (status) {
case 2:
icon = 'check good';
message = gettext('Your subscription status is valid.');
break;
case 1:
icon = 'exclamation-triangle warning';
message = gettext('Warning: Your subscription levels are not the same.');
break;
case 0:
icon = 'times-circle critical';
message = gettext('This node does not have a subscription.');
break;
default:
throw 'invalid subscription status';
}
me.getComponent('icon').update({ icon });
me.getComponent('message').update({ message });
},
listeners: {
click: {
element: 'body',
fn: function() {
var mainview = this.component.up('mainview');
mainview.getController().redirectTo('pbsSubscription');
}
}
}
});