ui: factor out NodeInfoPanel
so that Dashboard.js will be less cluttered when we add more information there. No functional change, but reworked the fingerprint button disabling to use a property of the view instead of a viewmodel Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak
Thomas Lamprecht
parent
069a6e28a7
commit
e584593cb5
121
www/Dashboard.js
121
www/Dashboard.js
|
|
@ -69,72 +69,6 @@ Ext.define('PBS.Dashboard', {
|
|||
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;
|
||||
|
|
@ -182,31 +116,14 @@ Ext.define('PBS.Dashboard', {
|
|||
|
||||
viewModel: {
|
||||
data: {
|
||||
fingerprint: "",
|
||||
days: 30,
|
||||
},
|
||||
|
||||
formulas: {
|
||||
disableFPButton: (get) => get('fingerprint') === "",
|
||||
sinceEpoch: (get) => (Date.now()/1000 - get('days') * 24*3600).toFixed(0),
|
||||
},
|
||||
|
||||
stores: {
|
||||
usage: {
|
||||
storeid: 'dash-usage',
|
||||
type: 'update',
|
||||
interval: 3000,
|
||||
autoStart: true,
|
||||
autoLoad: true,
|
||||
autoDestroy: true,
|
||||
proxy: {
|
||||
type: 'proxmox',
|
||||
url: '/api2/json/nodes/localhost/status',
|
||||
},
|
||||
listeners: {
|
||||
load: 'updateUsageStats',
|
||||
},
|
||||
},
|
||||
subscription: {
|
||||
storeid: 'dash-subscription',
|
||||
type: 'update',
|
||||
|
|
@ -271,43 +188,11 @@ Ext.define('PBS.Dashboard', {
|
|||
|
||||
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',
|
||||
xtype: 'pbsNodeInfoPanel',
|
||||
bind: {
|
||||
disabled: '{disableFPButton}',
|
||||
store: '{stores.usage}',
|
||||
},
|
||||
},
|
||||
],
|
||||
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',
|
||||
},
|
||||
],
|
||||
height: 250,
|
||||
},
|
||||
{
|
||||
xtype: 'pbsDatastoresStatistics',
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ JSSRC= \
|
|||
panel/AccessControl.js \
|
||||
panel/StorageAndDisks.js \
|
||||
panel/UsageChart.js \
|
||||
panel/NodeInfo.js \
|
||||
ZFSList.js \
|
||||
DirectoryList.js \
|
||||
LoginView.js \
|
||||
|
|
|
|||
|
|
@ -0,0 +1,151 @@
|
|||
Ext.define('PBS.NodeInfoPanel', {
|
||||
extend: 'Ext.panel.Panel',
|
||||
alias: 'widget.pbsNodeInfoPanel',
|
||||
|
||||
iconCls: 'fa fa-tasks',
|
||||
title: gettext('Server Resources'),
|
||||
|
||||
controller: {
|
||||
xclass: 'Ext.app.ViewController',
|
||||
|
||||
showFingerPrint: function() {
|
||||
let me = this;
|
||||
let view = me.getView();
|
||||
let fingerprint = view.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();
|
||||
},
|
||||
|
||||
updateUsageStats: function(store, records, success) {
|
||||
if (!success) {
|
||||
return;
|
||||
}
|
||||
if (records === undefined || records.length < 1) {
|
||||
return;
|
||||
}
|
||||
let me = this;
|
||||
let view = me.getView();
|
||||
|
||||
let res = records[0].data;
|
||||
view.fingerprint = res.info.fingerprint;
|
||||
|
||||
me.lookup('fpButton').setDisabled(!view.fingerprint);
|
||||
|
||||
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);
|
||||
},
|
||||
|
||||
init: function(view) {
|
||||
let me = this;
|
||||
|
||||
view.store = Ext.create('Proxmox.data.UpdateStore', {
|
||||
interval: 3000,
|
||||
proxy: {
|
||||
type: 'proxmox',
|
||||
url: '/api2/json/nodes/localhost/status',
|
||||
},
|
||||
});
|
||||
|
||||
me.mon(view.store, 'load', me.updateUsageStats, me);
|
||||
|
||||
view.store.startUpdate();
|
||||
},
|
||||
|
||||
startStore: function() {
|
||||
let me = this;
|
||||
let view = me.getView();
|
||||
view.store.startUpdate();
|
||||
},
|
||||
|
||||
stopStore: function() {
|
||||
let me = this;
|
||||
let view = me.getView();
|
||||
view.store.stopUpdate();
|
||||
},
|
||||
},
|
||||
|
||||
listeners: {
|
||||
activate: 'startStore',
|
||||
deactivate: 'stopStore',
|
||||
destroy: 'stopStore',
|
||||
},
|
||||
|
||||
bodyPadding: '0 20 0 20',
|
||||
|
||||
tools: [
|
||||
{
|
||||
xtype: 'button',
|
||||
reference: 'fpButton',
|
||||
text: gettext('Show Fingerprint'),
|
||||
handler: 'showFingerPrint',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
|
||||
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',
|
||||
},
|
||||
],
|
||||
});
|
||||
Loading…
Reference in New Issue