www/manager6/ceph/Status.js

   1 Ext.define('pve-ceph-warnings', {
   2     extend: 'Ext.data.Model',
   3     fields: ['id', 'summary', 'detail', 'severity'],
   4     idProperty: 'id',
   5 });
   6
   7
   8 Ext.define('PVE.node.CephStatus', {
   9     extend: 'Ext.panel.Panel',
  10     alias: 'widget.pveNodeCephStatus',
  11
  12     onlineHelp: 'chapter_pveceph',
  13
  14     scrollable: true,
  15     bodyPadding: 5,
  16     layout: {
  17         type: 'column',
  18     },
  19
  20     defaults: {
  21         padding: 5,
  22     },
  23
  24     items: [
  25         {
  26             xtype: 'panel',
  27             title: gettext('Health'),
  28             bodyPadding: 10,
  29             plugins: 'responsive',
  30             responsiveConfig: {
  31                 'width < 1600': {
  32                     minHeight: 230,
  33                     columnWidth: 1,
  34                 },
  35                 'width >= 1600': {
  36                     minHeight: 500,
  37                     columnWidth: 0.5,
  38                 },
  39             },
  40             layout: {
  41                 type: 'hbox',
  42                 align: 'stretch',
  43             },
  44             items: [
  45                 {
  46                     xtype: 'container',
  47                     layout: {
  48                         type: 'vbox',
  49                         align: 'stretch',
  50                     },
  51                     flex: 1,
  52                     items: [
  53                         {
  54
  55                             xtype: 'pveHealthWidget',
  56                             itemId: 'overallhealth',
  57                             flex: 1,
  58                             title: gettext('Status'),
  59                         },
  60                         {
  61                             xtype: 'displayfield',
  62                             itemId: 'versioninfo',
  63                             fieldLabel: gettext('Ceph Version'),
  64                             value: "",
  65                             autoEl: {
  66                                 tag: 'div',
  67                                 'data-qtip': gettext('The newest version installed in the Cluster.'),
  68                             },
  69                             padding: '10 0 0 0',
  70                             style: {
  71                                 'text-align': 'center',
  72                             },
  73                         },
  74                     ],
  75                 },
  76                 {
  77                     xtype: 'grid',
  78                     itemId: 'warnings',
  79                     flex: 2,
  80                     maxHeight: 430,
  81                     stateful: true,
  82                     stateId: 'ceph-status-warnings',
  83                     viewConfig: {
  84                         enableTextSelection: true,
  85                     },
  86                     // we load the store manually, to show an emptyText specify an empty intermediate store
  87                     store: {
  88                         type: 'diff',
  89                         trackRemoved: false,
  90                         data: [],
  91                         rstore: {
  92                             storeid: 'pve-ceph-warnings',
  93                             type: 'update',
  94                             model: 'pve-ceph-warnings',
  95                         },
  96                     },
  97                     updateHealth: function(health) {
  98                         let checks = health.checks || {};
  99
 100                         let checkRecords = Object.keys(checks).sort().map(key => {
 101                             let check = checks[key];
 102                             let data = {
 103                                 id: key,
 104                                 summary: check.summary.message,
 105                                 detail: check.detail.reduce((acc, v) => `${acc}\n${v.message}`, '').trimStart(),
 106                                 severity: check.severity,
 107                             };
 108                             if (data.detail.length === 0) {
 109                                 data.detail = "no additional data";
 110                             }
 111                             return data;
 112                         });
 113
 114                         let rstore = this.getStore().rstore;
 115                         rstore.loadData(checkRecords, false);
 116                         rstore.fireEvent('load', rstore, checkRecords, true);
 117                     },
 118                     emptyText: gettext('No Warnings/Errors'),
 119                     columns: [
 120                         {
 121                             dataIndex: 'severity',
 122                             tooltip: gettext('Severity'),
 123                             align: 'center',
 124                             width: 38,
 125                             renderer: function(value) {
 126                                 let health = PVE.Utils.map_ceph_health[value];
 127                                 let icon = PVE.Utils.get_health_icon(health);
 128                                 return `<i class="fa fa-fw ${icon}"></i>`;
 129                             },
 130                             sorter: {
 131                                 sorterFn: function(a, b) {
 132                                     let health = ['HEALTH_ERR', 'HEALTH_WARN', 'HEALTH_OK'];
 133                                     return health.indexOf(b.data.severity) - health.indexOf(a.data.severity);
 134                                 },
 135                             },
 136                         },
 137                         {
 138                             dataIndex: 'summary',
 139                             header: gettext('Summary'),
 140                             flex: 1,
 141                         },
 142                         {
 143                             xtype: 'actioncolumn',
 144                             width: 50,
 145                             align: 'center',
 146                             tooltip: gettext('Actions'),
 147                             items: [
 148                                 {
 149                                     iconCls: 'x-fa fa-files-o',
 150                                     tooltip: gettext('Copy summary'),
 151                                     handler: function(grid, rowindex, colindex, item, e, record) {
 152                                         navigator.clipboard
 153                                             .writeText(record.data.summary)
 154                                             .catch(err => Ext.Msg.alert(gettext('Error'), err));
 155                                     },
 156                                 },
 157                                 {
 158                                     iconCls: 'x-fa fa-clipboard',
 159                                     tooltip: gettext('Copy details'),
 160                                     handler: function(grid, rowindex, colindex, item, e, record) {
 161                                         navigator.clipboard
 162                                             .writeText(record.data.detail)
 163                                             .catch(err => Ext.Msg.alert(gettext('Error'), err));
 164                                     },
 165                                 },
 166                             ],
 167                         },
 168                     ],
 169                     listeners: {
 170                         itemdblclick: function(view, record, row, rowIdx, e) {
 171                             // inspired by Ext.grid.plugin.RowExpander, but for double click
 172                             let rowNode = view.getNode(rowIdx);
 173                             let normalRow = Ext.fly(rowNode);
 174
 175                             let collapsedCls = view.rowBodyFeature.rowCollapsedCls;
 176
 177                             if (normalRow.hasCls(collapsedCls)) {
 178                                 view.rowBodyFeature.rowExpander.toggleRow(rowIdx, record);
 179                             }
 180                         },
 181                     },
 182                     plugins: [
 183                         {
 184                             ptype: 'rowexpander',
 185                             expandOnDblClick: false,
 186                             rowBodyTpl: '<pre class="pve-ceph-warning-detail">{detail}</pre>',
 187                         },
 188                     ],
 189                 },
 190             ],
 191         },
 192         {
 193             xtype: 'pveCephStatusDetail',
 194             itemId: 'statusdetail',
 195             plugins: 'responsive',
 196             responsiveConfig: {
 197                 'width < 1600': {
 198                     columnWidth: 1,
 199                     minHeight: 250,
 200                 },
 201                 'width >= 1600': {
 202                     columnWidth: 0.5,
 203                     minHeight: 300,
 204                 },
 205             },
 206             title: gettext('Status'),
 207         },
 208         {
 209             xtype: 'pveCephServices',
 210             title: gettext('Services'),
 211             itemId: 'services',
 212             plugins: 'responsive',
 213             layout: {
 214                 type: 'hbox',
 215                 align: 'stretch',
 216             },
 217             responsiveConfig: {
 218                 'width < 1600': {
 219                     columnWidth: 1,
 220                     minHeight: 200,
 221                 },
 222                 'width >= 1600': {
 223                     columnWidth: 0.5,
 224                     minHeight: 200,
 225                 },
 226             },
 227         },
 228         {
 229             xtype: 'panel',
 230             title: gettext('Performance'),
 231             columnWidth: 1,
 232             bodyPadding: 5,
 233             layout: {
 234                 type: 'hbox',
 235                 align: 'center',
 236             },
 237             items: [
 238                 {
 239                     xtype: 'container',
 240                     flex: 1,
 241                     items: [
 242                         {
 243                             xtype: 'proxmoxGauge',
 244                             itemId: 'space',
 245                             title: gettext('Usage'),
 246                         },
 247                         {
 248                             flex: 1,
 249                             border: false,
 250                         },
 251                         {
 252                             xtype: 'container',
 253                             itemId: 'recovery',
 254                             hidden: true,
 255                             padding: 25,
 256                             items: [
 257                                 {
 258                                     xtype: 'pveRunningChart',
 259                                     itemId: 'recoverychart',
 260                                     title: gettext('Recovery') +'/ '+ gettext('Rebalance'),
 261                                     renderer: PVE.Utils.render_bandwidth,
 262                                     height: 100,
 263                                 },
 264                                 {
 265                                     xtype: 'progressbar',
 266                                     itemId: 'recoveryprogress',
 267                                 },
 268                             ],
 269                         },
 270                     ],
 271                 },
 272                 {
 273                     xtype: 'container',
 274                     flex: 2,
 275                     defaults: {
 276                         padding: 0,
 277                         height: 100,
 278                     },
 279                     items: [
 280                         {
 281                             xtype: 'pveRunningChart',
 282                             itemId: 'reads',
 283                             title: gettext('Reads'),
 284                             renderer: PVE.Utils.render_bandwidth,
 285                         },
 286                         {
 287                             xtype: 'pveRunningChart',
 288                             itemId: 'writes',
 289                             title: gettext('Writes'),
 290                             renderer: PVE.Utils.render_bandwidth,
 291                         },
 292                         {
 293                             xtype: 'pveRunningChart',
 294                             itemId: 'readiops',
 295                             title: 'IOPS: ' + gettext('Reads'),
 296                             renderer: Ext.util.Format.numberRenderer('0,000'),
 297                         },
 298                         {
 299                             xtype: 'pveRunningChart',
 300                             itemId: 'writeiops',
 301                             title: 'IOPS: ' + gettext('Writes'),
 302                             renderer: Ext.util.Format.numberRenderer('0,000'),
 303                         },
 304                     ],
 305                 },
 306             ],
 307         },
 308     ],
 309
 310     updateAll: function(store, records, success) {
 311         if (!success || records.length === 0) {
 312             return;
 313         }
 314
 315         var me = this;
 316         var rec = records[0];
 317         me.status = rec.data;
 318
 319         // add health panel
 320         me.down('#overallhealth').updateHealth(PVE.Utils.render_ceph_health(rec.data.health || {}));
 321         me.down('#warnings').updateHealth(rec.data.health || {}); // add errors to gridstore
 322
 323         me.getComponent('services').updateAll(me.metadata || {}, rec.data);
 324
 325         me.getComponent('statusdetail').updateAll(me.metadata || {}, rec.data);
 326
 327         // add performance data
 328         let pgmap = rec.data.pgmap;
 329         let used = pgmap.bytes_used;
 330         let total = pgmap.bytes_total;
 331
 332         var text = Ext.String.format(gettext('{0} of {1}'),
 333             Proxmox.Utils.render_size(used),
 334             Proxmox.Utils.render_size(total),
 335         );
 336
 337         // update the usage widget
 338         me.down('#space').updateValue(used/total, text);
 339
 340         let readiops = pgmap.read_op_per_sec;
 341         let writeiops = pgmap.write_op_per_sec;
 342         let reads = pgmap.read_bytes_sec || 0;
 343         let writes = pgmap.write_bytes_sec || 0;
 344
 345         // update the graphs
 346         me.reads.addDataPoint(reads);
 347         me.writes.addDataPoint(writes);
 348         me.readiops.addDataPoint(readiops);
 349         me.writeiops.addDataPoint(writeiops);
 350
 351         let degraded = pgmap.degraded_objects || 0;
 352         let misplaced = pgmap.misplaced_objects || 0;
 353         let unfound = pgmap.unfound_objects || 0;
 354         let unhealthy = degraded + unfound + misplaced;
 355         // update recovery
 356         if (pgmap.recovering_objects_per_sec !== undefined || unhealthy > 0) {
 357             let toRecoverObjects = pgmap.misplaced_total || pgmap.unfound_total || pgmap.degraded_total || 0;
 358             if (toRecoverObjects === 0) {
 359                 return; // FIXME: unexpected return and leaves things possible visible when it shouldn't?
 360             }
 361             let recovered = toRecoverObjects - unhealthy || 0;
 362             let speed = pgmap.recovering_bytes_per_sec || 0;
 363
 364             let recoveryRatio = recovered / toRecoverObjects;
 365             let txt = `${(recoveryRatio * 100).toFixed(2)}%`;
 366             if (speed > 0) {
 367                 let obj_per_sec = speed / (4 * 1024 * 1024); // 4 MiB per Object
 368                 let duration = Proxmox.Utils.format_duration_human(unhealthy/obj_per_sec);
 369                 let speedTxt = PVE.Utils.render_bandwidth(speed);
 370                 txt += ` (${speedTxt} - ${duration} left)`;
 371             }
 372
 373             me.down('#recovery').setVisible(true);
 374             me.down('#recoveryprogress').updateValue(recoveryRatio);
 375             me.down('#recoveryprogress').updateText(txt);
 376             me.down('#recoverychart').addDataPoint(speed);
 377         } else {
 378             me.down('#recovery').setVisible(false);
 379             me.down('#recoverychart').addDataPoint(0);
 380         }
 381     },
 382
 383     initComponent: function() {
 384         var me = this;
 385
 386         var nodename = me.pveSelNode.data.node;
 387
 388         me.callParent();
 389         var baseurl = '/api2/json' + (nodename ? '/nodes/' + nodename : '/cluster') + '/ceph';
 390         me.store = Ext.create('Proxmox.data.UpdateStore', {
 391             storeid: 'ceph-status-' + (nodename || 'cluster'),
 392             interval: 5000,
 393             proxy: {
 394                 type: 'proxmox',
 395                 url: baseurl + '/status',
 396             },
 397         });
 398
 399         me.metadatastore = Ext.create('Proxmox.data.UpdateStore', {
 400             storeid: 'ceph-metadata-' + (nodename || 'cluster'),
 401             interval: 15*1000,
 402             proxy: {
 403                 type: 'proxmox',
 404                 url: '/api2/json/cluster/ceph/metadata',
 405             },
 406         });
 407
 408         // save references for the updatefunction
 409         me.iops = me.down('#iops');
 410         me.readiops = me.down('#readiops');
 411         me.writeiops = me.down('#writeiops');
 412         me.reads = me.down('#reads');
 413         me.writes = me.down('#writes');
 414
 415         // manages the "install ceph?" overlay
 416         PVE.Utils.monitor_ceph_installed(me, me.store, nodename);
 417
 418         me.mon(me.store, 'load', me.updateAll, me);
 419         me.mon(me.metadatastore, 'load', function(store, records, success) {
 420             if (!success || records.length < 1) {
 421                 return;
 422             }
 423             me.metadata = records[0].data;
 424
 425             // update services
 426             me.getComponent('services').updateAll(me.metadata, me.status || {});
 427
 428             // update detailstatus panel
 429             me.getComponent('statusdetail').updateAll(me.metadata, me.status || {});
 430
 431             let maxversion = [];
 432             let maxversiontext = "";
 433             for (const [_nodename, data] of Object.entries(me.metadata.node)) {
 434                 let version = data.version.parts;
 435                 if (PVE.Utils.compare_ceph_versions(version, maxversion) > 0) {
 436                     maxversion = version;
 437                     maxversiontext = data.version.str;
 438                 }
 439             }
 440             me.down('#versioninfo').setValue(maxversiontext);
 441         }, me);
 442
 443         me.on('destroy', me.store.stopUpdate);
 444         me.on('destroy', me.metadatastore.stopUpdate);
 445         me.store.startUpdate();
 446         me.metadatastore.startUpdate();
 447     },
 448
 449 });