refactor health status widget and ceph status data

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@proxmox.com>

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				\

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');

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
 	}
     ],

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();
+    }
+
+});