[pve-devel] [PATCH manager 3/7] refactor health status widget and ceph status data
Dominik Csapak
d.csapak at proxmox.com
Tue Nov 22 12:32:11 CET 2016
this adds a new component health widget, used for cluster and ceph
status
also refactor ceph error levels and ceph status data into PVE.Utils
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
www/manager6/Makefile | 1 +
www/manager6/Utils.js | 24 +++++++++++++++++++
www/manager6/dc/Health.js | 48 ++++++--------------------------------
www/manager6/panel/HealthWidget.js | 37 +++++++++++++++++++++++++++++
4 files changed, 69 insertions(+), 41 deletions(-)
create mode 100644 www/manager6/panel/HealthWidget.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index d35ac35..da96b7c 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -79,6 +79,7 @@ JSSRC= \
panel/TemplateStatusView.js \
panel/InputPanel.js \
panel/GaugeWidget.js \
+ panel/HealthWidget.js \
window/Edit.js \
window/LoginWindow.js \
window/TaskViewer.js \
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index f86eea8..a32697a 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -99,6 +99,30 @@ Ext.define('PVE.Utils', { utilities: {
return icon;
},
+ map_ceph_health: {
+ 'HEALTH_OK':'good',
+ 'HEALTH_WARN':'warning',
+ 'HEALTH_ERR':'critical'
+ },
+
+ render_ceph_health: function(record) {
+ var state = {
+ iconCls: PVE.Utils.get_health_icon(),
+ text: ''
+ };
+
+ if (!record || !record.data) {
+ return state;
+ }
+
+ var health = PVE.Utils.map_ceph_health[record.data.health.overall_status];
+
+ state.iconCls = PVE.Utils.get_health_icon(health, true);
+ state.text = record.data.health.overall_status;
+
+ return state;
+ },
+
render_kvm_ostype: function (value) {
if (!value) {
return gettext('Other OS types');
diff --git a/www/manager6/dc/Health.js b/www/manager6/dc/Health.js
index f4e78e3..428f95c 100644
--- a/www/manager6/dc/Health.js
+++ b/www/manager6/dc/Health.js
@@ -59,7 +59,7 @@ Ext.define('PVE.dc.Health', {
nodes.offline = numNodes - nodes.online;
}
- me.getComponent('clusterstatus').update(cluster);
+ me.getComponent('clusterstatus').updateHealth(cluster);
me.getComponent('nodestatus').update(nodes);
},
@@ -81,27 +81,8 @@ Ext.define('PVE.dc.Health', {
me.cepherrors = 0;
- var cephstate = {
- iconCls: 'faded fa-question-circle',
- text: ''
- };
-
- switch (records[0].data.health.overall_status) {
- case 'HEALTH_OK':
- cephstate.iconCls = 'good fa-check-circle';
- break;
- case 'HEALTH_WARN':
- cephstate.iconCls = 'warning fa-info-circle';
- break;
- case 'HEALTH_ERR':
- cephstate.iconCls = 'critical fa-times-circle';
- break;
- default:
- cephstate.iconCls = 'faded fa-question-circle';
- break;
- }
- cephstate.text = records[0].data.health.overall_status;
- cephstatus.update(cephstate);
+ var state = PVE.Utils.render_ceph_health(records[0]);
+ cephstatus.updateHealth(state);
cephstatus.setVisible(true);
},
@@ -115,16 +96,8 @@ Ext.define('PVE.dc.Health', {
items: [
{
itemId: 'clusterstatus',
- data: {
- iconCls: 'faded fa-question-circle',
- text: ''
- },
- tpl: [
- '<h3>' + gettext('Status') + '</h3>',
- '<i class="fa fa-5x {iconCls}"></i>',
- '<br /><br/>',
- '{text}'
- ]
+ xtype: 'pveHealthWidget',
+ title: gettext('Status')
},
{
itemId: 'nodestatus',
@@ -153,15 +126,8 @@ Ext.define('PVE.dc.Health', {
itemId: 'ceph',
width: 250,
columnWidth: undefined,
- data: {
- text: '',
- iconCls: 'faded fa-question-circle'
- },
- tpl: [
- '<h3>Ceph</h3>',
- '<i class="fa fa-5x {iconCls}"></i><br /><br />',
- gettext("Health") + ': {text}'
- ],
+ title: gettext('Ceph'),
+ xtype: 'pveHealthWidget',
hidden: true
}
],
diff --git a/www/manager6/panel/HealthWidget.js b/www/manager6/panel/HealthWidget.js
new file mode 100644
index 0000000..56990bf
--- /dev/null
+++ b/www/manager6/panel/HealthWidget.js
@@ -0,0 +1,37 @@
+Ext.define('PVE.widget.HealthWidget', {
+ extend: 'Ext.Component',
+ alias: 'widget.pveHealthWidget',
+
+ data: {
+ iconCls: PVE.Utils.get_health_icon(undefined, true),
+ text: '',
+ title: ''
+ },
+
+ style: {
+ 'text-align':'center'
+ },
+
+ tpl: [
+ '<h3>{title}</h3>',
+ '<i class="fa fa-5x {iconCls}"></i>',
+ '<br /><br/>',
+ '{text}'
+ ],
+
+ updateHealth: function(data) {
+ var me = this;
+ me.update(Ext.apply(me.data, data));
+ },
+
+ initComponent: function(){
+ var me = this;
+
+ if (me.title) {
+ me.config.data.title = me.title;
+ }
+
+ me.callParent();
+ }
+
+});
--
2.1.4
More information about the pve-devel
mailing list