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                             data.noDetails = data.detail.length === 0;
 109                             data.detailsCls = data.detail.length === 0 ? 'pmx-faded' : '';
 110                             if (data.detail.length === 0) {
 111                                 data.detail = "no additional data";
 112                             }
 113                             return data;
 114                         });
 115
 116                         let rstore = this.getStore().rstore;
 117                         rstore.loadData(checkRecords, false);
 118                         rstore.fireEvent('load', rstore, checkRecords, true);
 119                     },
 120                     emptyText: gettext('No Warnings/Errors'),
 121                     columns: [
 122                         {
 123                             dataIndex: 'severity',
 124                             tooltip: gettext('Severity'),
 125                             align: 'center',
 126                             width: 38,
 127                             renderer: function(value) {
 128                                 let health = PVE.Utils.map_ceph_health[value];
 129                                 let icon = PVE.Utils.get_health_icon(health);
 130                                 return `<i class="fa fa-fw ${icon}"></i>`;
 131                             },
 132                             sorter: {
 133                                 sorterFn: function(a, b) {
 134                                     let health = ['HEALTH_ERR', 'HEALTH_WARN', 'HEALTH_OK'];
 135                                     return health.indexOf(b.data.severity) - health.indexOf(a.data.severity);
 136                                 },
 137                             },
 138                         },
 139                         {
 140                             dataIndex: 'summary',
 141                             header: gettext('Summary'),
 142                             flex: 1,
 143                         },
 144                         {
 145                             xtype: 'actioncolumn',
 146                             width: 50,
 147                             align: 'center',
 148                             tooltip: gettext('Actions'),
 149                             items: [
 150                                 {
 151                                     iconCls: 'x-fa fa-files-o',
 152                                     tooltip: gettext('Copy Summary'),
 153                                     handler: function(grid, rowindex, colindex, item, e, record) {
 154                                         navigator.clipboard
 155                                             .writeText(record.data.summary)
 156                                             .catch(err => Ext.Msg.alert(gettext('Error'), err));
 157                                     },
 158                                 },
 159                                 {
 160                                     iconCls: 'x-fa fa-clipboard',
 161                                     tooltip: gettext('Copy All'),
 162                                     isActionDisabled: (v, r, c, i, { data }) => !!data.noDetails,
 163                                     handler: function(grid, rowindex, colindex, item, e, { data }) {
 164                                         navigator.clipboard
 165                                             .writeText(`${data.severity}: ${data.summary}\n${data.detail}`)
 166                                             .catch(err => Ext.Msg.alert(gettext('Error'), err));
 167                                     },
 168                                 },
 169                             ],
 170                         },
 171                     ],
 172                     listeners: {
 173                         itemdblclick: function(view, record, row, rowIdx, e) {
 174                             // inspired by Ext.grid.plugin.RowExpander, but for double click
 175                             let rowNode = view.getNode(rowIdx);
 176                             let normalRow = Ext.fly(rowNode);
 177
 178                             let collapsedCls = view.rowBodyFeature.rowCollapsedCls;
 179
 180                             if (normalRow.hasCls(collapsedCls)) {
 181                                 view.rowBodyFeature.rowExpander.toggleRow(rowIdx, record);
 182                             }
 183                         },
 184                     },
 185                     plugins: [
 186                         {
 187                             ptype: 'rowexpander',
 188                             expandOnDblClick: false,
 189                             rowBodyTpl: '<pre class="pve-ceph-warning-detail {detailsCls}">{detail}</pre>',
 190                         },
 191                     ],
 192                 },
 193             ],
 194         },
 195         {
 196             xtype: 'pveCephStatusDetail',
 197             itemId: 'statusdetail',
 198             plugins: 'responsive',
 199             responsiveConfig: {
 200                 'width < 1600': {
 201                     columnWidth: 1,
 202                     minHeight: 250,
 203                 },
 204                 'width >= 1600': {
 205                     columnWidth: 0.5,
 206                     minHeight: 300,
 207                 },
 208             },
 209             title: gettext('Status'),
 210         },
 211         {
 212             xtype: 'pveCephServices',
 213             title: gettext('Services'),
 214             itemId: 'services',
 215             plugins: 'responsive',
 216             layout: {
 217                 type: 'hbox',
 218                 align: 'stretch',
 219             },
 220             responsiveConfig: {
 221                 'width < 1600': {
 222                     columnWidth: 1,
 223                     minHeight: 200,
 224                 },
 225                 'width >= 1600': {
 226                     columnWidth: 0.5,
 227                     minHeight: 200,
 228                 },
 229             },
 230         },
 231         {
 232             xtype: 'panel',
 233             title: gettext('Performance'),
 234             columnWidth: 1,
 235             bodyPadding: 5,
 236             layout: {
 237                 type: 'hbox',
 238                 align: 'center',
 239             },
 240             items: [
 241                 {
 242                     xtype: 'container',
 243                     flex: 1,
 244                     items: [
 245                         {
 246                             xtype: 'proxmoxGauge',
 247                             itemId: 'space',
 248                             title: gettext('Usage'),
 249                         },
 250                         {
 251                             flex: 1,
 252                             border: false,
 253                         },
 254                         {
 255                             xtype: 'container',
 256                             itemId: 'recovery',
 257                             hidden: true,
 258                             padding: 25,
 259                             items: [
 260                                 {
 261                                     xtype: 'pveRunningChart',
 262                                     itemId: 'recoverychart',
 263                                     title: gettext('Recovery') +'/ '+ gettext('Rebalance'),
 264                                     renderer: PVE.Utils.render_bandwidth,
 265                                     height: 100,
 266                                 },
 267                                 {
 268                                     xtype: 'progressbar',
 269                                     itemId: 'recoveryprogress',
 270                                 },
 271                             ],
 272                         },
 273                     ],
 274                 },
 275                 {
 276                     xtype: 'container',
 277                     flex: 2,
 278                     defaults: {
 279                         padding: 0,
 280                         height: 100,
 281                     },
 282                     items: [
 283                         {
 284                             xtype: 'pveRunningChart',
 285                             itemId: 'reads',
 286                             title: gettext('Reads'),
 287                             renderer: PVE.Utils.render_bandwidth,
 288                         },
 289                         {
 290                             xtype: 'pveRunningChart',
 291                             itemId: 'writes',
 292                             title: gettext('Writes'),
 293                             renderer: PVE.Utils.render_bandwidth,
 294                         },
 295                         {
 296                             xtype: 'pveRunningChart',
 297                             itemId: 'readiops',
 298                             title: 'IOPS: ' + gettext('Reads'),
 299                             renderer: Ext.util.Format.numberRenderer('0,000'),
 300                         },
 301                         {
 302                             xtype: 'pveRunningChart',
 303                             itemId: 'writeiops',
 304                             title: 'IOPS: ' + gettext('Writes'),
 305                             renderer: Ext.util.Format.numberRenderer('0,000'),
 306                         },
 307                     ],
 308                 },
 309             ],
 310         },
 311     ],
 312
 313     updateAll: function(store, records, success) {
 314         if (!success || records.length === 0) {
 315             return;
 316         }
 317
 318         var me = this;
 319         var rec = records[0];
 320         me.status = rec.data;
 321
 322         // add health panel
 323         me.down('#overallhealth').updateHealth(PVE.Utils.render_ceph_health(rec.data.health || {}));
 324         me.down('#warnings').updateHealth(rec.data.health || {}); // add errors to gridstore
 325
 326         me.getComponent('services').updateAll(me.metadata || {}, rec.data);
 327
 328         me.getComponent('statusdetail').updateAll(me.metadata || {}, rec.data);
 329
 330         // add performance data
 331         let pgmap = rec.data.pgmap;
 332         let used = pgmap.bytes_used;
 333         let total = pgmap.bytes_total;
 334
 335         var text = Ext.String.format(gettext('{0} of {1}'),
 336             Proxmox.Utils.render_size(used),
 337             Proxmox.Utils.render_size(total),
 338         );
 339
 340         // update the usage widget
 341         me.down('#space').updateValue(used/total, text);
 342
 343         let readiops = pgmap.read_op_per_sec;
 344         let writeiops = pgmap.write_op_per_sec;
 345         let reads = pgmap.read_bytes_sec || 0;
 346         let writes = pgmap.write_bytes_sec || 0;
 347
 348         // update the graphs
 349         me.reads.addDataPoint(reads);
 350         me.writes.addDataPoint(writes);
 351         me.readiops.addDataPoint(readiops);
 352         me.writeiops.addDataPoint(writeiops);
 353
 354         let degraded = pgmap.degraded_objects || 0;
 355         let misplaced = pgmap.misplaced_objects || 0;
 356         let unfound = pgmap.unfound_objects || 0;
 357         let unhealthy = degraded + unfound + misplaced;
 358         // update recovery
 359         if (pgmap.recovering_objects_per_sec !== undefined || unhealthy > 0) {
 360             let toRecoverObjects = pgmap.misplaced_total || pgmap.unfound_total || pgmap.degraded_total || 0;
 361             if (toRecoverObjects === 0) {
 362                 return; // FIXME: unexpected return and leaves things possible visible when it shouldn't?
 363             }
 364             let recovered = toRecoverObjects - unhealthy || 0;
 365             let speed = pgmap.recovering_bytes_per_sec || 0;
 366
 367             let recoveryRatio = recovered / toRecoverObjects;
 368             let txt = `${(recoveryRatio * 100).toFixed(2)}%`;
 369             if (speed > 0) {
 370                 let obj_per_sec = speed / (4 * 1024 * 1024); // 4 MiB per Object
 371                 let duration = Proxmox.Utils.format_duration_human(unhealthy/obj_per_sec);
 372                 let speedTxt = PVE.Utils.render_bandwidth(speed);
 373                 txt += ` (${speedTxt} - ${duration} left)`;
 374             }
 375
 376             me.down('#recovery').setVisible(true);
 377             me.down('#recoveryprogress').updateValue(recoveryRatio);
 378             me.down('#recoveryprogress').updateText(txt);
 379             me.down('#recoverychart').addDataPoint(speed);
 380         } else {
 381             me.down('#recovery').setVisible(false);
 382             me.down('#recoverychart').addDataPoint(0);
 383         }
 384     },
 385
 386     initComponent: function() {
 387         var me = this;
 388
 389         var nodename = me.pveSelNode.data.node;
 390
 391         me.callParent();
 392         var baseurl = '/api2/json' + (nodename ? '/nodes/' + nodename : '/cluster') + '/ceph';
 393         me.store = Ext.create('Proxmox.data.UpdateStore', {
 394             storeid: 'ceph-status-' + (nodename || 'cluster'),
 395             interval: 5000,
 396             proxy: {
 397                 type: 'proxmox',
 398                 url: baseurl + '/status',
 399             },
 400         });
 401
 402         me.metadatastore = Ext.create('Proxmox.data.UpdateStore', {
 403             storeid: 'ceph-metadata-' + (nodename || 'cluster'),
 404             interval: 15*1000,
 405             proxy: {
 406                 type: 'proxmox',
 407                 url: '/api2/json/cluster/ceph/metadata',
 408             },
 409         });
 410
 411         // save references for the updatefunction
 412         me.iops = me.down('#iops');
 413         me.readiops = me.down('#readiops');
 414         me.writeiops = me.down('#writeiops');
 415         me.reads = me.down('#reads');
 416         me.writes = me.down('#writes');
 417
 418         // manages the "install ceph?" overlay
 419         PVE.Utils.monitor_ceph_installed(me, me.store, nodename);
 420
 421         me.mon(me.store, 'load', me.updateAll, me);
 422         me.mon(me.metadatastore, 'load', function(store, records, success) {
 423             if (!success || records.length < 1) {
 424                 return;
 425             }
 426             me.metadata = records[0].data;
 427
 428             // update services
 429             me.getComponent('services').updateAll(me.metadata, me.status || {});
 430
 431             // update detailstatus panel
 432             me.getComponent('statusdetail').updateAll(me.metadata, me.status || {});
 433
 434             let maxversion = [];
 435             let maxversiontext = "";
 436             for (const [_nodename, data] of Object.entries(me.metadata.node)) {
 437                 let version = data.version.parts;
 438                 if (PVE.Utils.compare_ceph_versions(version, maxversion) > 0) {
 439                     maxversion = version;
 440                     maxversiontext = data.version.str;
 441                 }
 442             }
 443             me.down('#versioninfo').setValue(maxversiontext);
 444         }, me);
 445
 446         me.on('destroy', me.store.stopUpdate);
 447         me.on('destroy', me.metadatastore.stopUpdate);
 448         me.store.startUpdate();
 449         me.metadatastore.startUpdate();
 450     },
 451
 452 });