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>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 857e5b55e918420ca6a2da5d40d86d27e158eb31..84e57a188b1cdf8f36f387fced6dc5b9e1929b4f 100644 (file)
--- 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 f86eea81f0dd69d2680e4c19678e8a9e7562eaaf..a32697a3c0324e90afbd360ccf523940af9a1f40 100644 (file)
--- 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 f4e78e353faac8cfd84532cb6bdf80a87cd81abf..428f95c3dccfe465d73e603d8fd49b434e45a8e2 100644 (file)
--- 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 (file)
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();
+    }
+
+});