Hi,
First of all, thanks for the nice new CEPH dashboard.
One thing i was wondering about is this, the performance gauges only show
"Client IO" stats. If the cluster is recovering and/or backfilling these
stats are not shown. Maybe it's possible to show recovery/backfilling
performance stats in a seperate gauge? (like in ceph-dash).
Hope you like the idea.
Kind regards,
Caspar Smit
2016-11-22 12:32 GMT+01:00 Dominik Csapak :
> this patch changes the ceph dashboard
>
> now we show the information in a more graphical way, namely:
>
> the overall status is displayed by a big icon (+health)
> the warnings/errors are in a list (with severity)
>
> we show more detailed information about monitors, osds, and pgs
>
> we show the usage of the cluster as a gauge graph, and
> the reads, writes and iops as running charts (the last 5 minutes)
>
> Signed-off-by: Dominik Csapak
> ---
> www/manager6/Utils.js | 8 ++
> www/manager6/ceph/Status.js | 338 +-
> --
> 2 files changed, 231 insertions(+), 115 deletions(-)
>
> diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
> index a32697a..7f261a2 100644
> --- a/www/manager6/Utils.js
> +++ b/www/manager6/Utils.js
> @@ -893,6 +893,14 @@ Ext.define('PVE.Utils', { utilities: {
> return PVE.Utils.format_size(value);
> },
>
> +render_bandwidth: function(value) {
> + if (!Ext.isNumeric(value)) {
> + return '';
> + }
> +
> + return PVE.Utils.format_size(value) + '/s';
> +},
> +
> render_timestamp: function(value, metaData, record, rowIndex,
> colIndex, store) {
> var servertime = new Date(value * 1000);
> return Ext.Date.format(servertime, 'Y-m-d H:i:s');
> diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
> index ab97a9f..f04fca0 100644
> --- a/www/manager6/ceph/Status.js
> +++ b/www/manager6/ceph/Status.js
> @@ -1,128 +1,236 @@
> Ext.define('PVE.node.CephStatus', {
> -extend: 'PVE.grid.ObjectGrid',
> -alias: ['widget.pveNodeCephStatus'],
> +extend: 'Ext.panel.Panel',
> +alias: 'widget.pveNodeCephStatus',
> +
> onlineHelp: 'chapter_pveceph',
> -cwidth1: 150,
> -interval: 3000,
> +
> +scrollable: true,
> +
> +bodyPadding: '10 0 0 0',
> +
> +defaults: {
> + width: 762,
> + userCls: 'inline-block',
> + padding: '0 0 10 10'
> +},
> +
> +items: [
> + {
> + xtype: 'panel',
> + title: gettext('Health'),
> + bodyPadding: '0 10 10 10',
> + minHeight: 210,
> + layout: {
> + type: 'hbox',
> + align: 'top'
> + },
> + items: [
> + {
> + flex: 1,
> + itemId: 'overallhealth',
> + xtype: 'pveHealthWidget',
> + title: gettext('Status')
> + },
> + {
> + flex: 2,
> + itemId: 'warnings',
> + stateful: true,
> + stateId: 'ceph-status-warnings',
> + padding: '15 0 0 0',
> + xtype: 'grid',
> + minHeight: 100,
> + // since we load the store manually,
> + // to show the emptytext, we have to
> + // specify an empty store
> + store: { data:[] },
> + emptyText: gettext('No Warnings/Errors'),
> + columns: [
> + {
> + dataIndex: 'severity',
> + header: gettext('Severity'),
> + align: 'center',
> + width: 70,
> + renderer: function(value) {
> + var health = PVE.Utils.map_ceph_health[
> value];
> + var classes = PVE.Utils.get_health_icon(
> health);
> +
> + return '';
> + },
> + sorter: {
> + sorterFn: function(a,b) {
> + var healthArr = ['HEALTH_ERR',
> 'HEALTH_WARN', 'HEALTH_OK'];
> + return healthArr.indexOf(b.data.severity)
> - healthArr.indexOf(a.data.severity);
> + }
> + }
> + },
> + {
> + dataIndex: 'summary',
> + header: gettext('Summary'),
> + flex: 1
> + }
> + ]
> + }
> + ]
> + },
> + {
> + xtype: 'pveCephStatusDetail',
> + itemId: 'statusdetail',
> + title: gettext('Status')
> + },
> + {
> + xtype: 'panel',
> + title: gettext('Performance'),
> +
