js/Dashboard.js

   1 Ext.define('PMG.Dashboard', {
   2     extend: 'Ext.panel.Panel',
   3     xtype: 'pmgDashboard',
   4
   5     controller: {
   6         xclass: 'Ext.app.ViewController',
   7
   8         openDashboardOptions: function() {
   9             var me = this;
  10             var viewModel = me.getViewModel();
  11             Ext.create('Ext.window.Window', {
  12                 modal: true,
  13                 width: 300,
  14                 title: gettext('Dashboard Options'),
  15                 layout: {
  16                     type: 'auto',
  17                 },
  18                 items: [{
  19                     xtype: 'form',
  20                     bodyPadding: '10 10 10 10',
  21                     defaultButton: 'savebutton',
  22                     items: [{
  23                         xtype: 'proxmoxintegerfield',
  24                         itemId: 'hours',
  25                         labelWidth: 100,
  26                         anchor: '100%',
  27                         allowBlank: false,
  28                         minValue: 1,
  29                         maxValue: 24,
  30                         value: viewModel.get('hours'),
  31                         fieldLabel: gettext('Hours to show'),
  32                     }],
  33                     buttons: [{
  34                         text: gettext('Save'),
  35                         reference: 'loginButton',
  36                         formBind: true,
  37                         handler: function() {
  38                             var win = this.up('window');
  39                             var hours = win.down('#hours').getValue();
  40                             me.setHours(hours, true);
  41                             win.close();
  42                         },
  43                     }],
  44                 }],
  45             }).show();
  46         },
  47
  48         setHours: function(hours, setState) {
  49             var me = this;
  50             var viewModel = me.getViewModel();
  51             viewModel.set('hours', hours);
  52             viewModel.notify();
  53
  54             Ext.Array.forEach(['recentmails', 'receivers'], function(item) {
  55                 viewModel.getStore(item).reload();
  56             });
  57
  58             if (setState) {
  59                 var sp = Ext.state.Manager.getProvider();
  60                 sp.set('dashboard-hours', hours);
  61             }
  62         },
  63
  64         updateMailStats: function(store, records, success) {
  65             if (!success) {
  66                 return;
  67             }
  68             var me = this;
  69             var viewModel = me.getViewModel();
  70
  71             var count = 0;
  72             var bytes_in = 0;
  73             var bytes_out = 0;
  74             var ptime = 0;
  75             var avg_ptime = 'N/A';
  76
  77             records.forEach(function(item) {
  78                 bytes_in += item.data.bytes_in;
  79                 bytes_out += item.data.bytes_out;
  80                 // unnormalize
  81                 count += (item.data.count*item.data.timespan)/60;
  82                 ptime += item.data.ptimesum;
  83             });
  84
  85             if (count) {
  86                 avg_ptime = (ptime/count).toFixed(2) + " s";
  87             }
  88
  89             viewModel.set('bytes_in', Proxmox.Utils.format_size(bytes_in));
  90             viewModel.set('bytes_out', Proxmox.Utils.format_size(bytes_out));
  91             viewModel.set('avg_ptime', avg_ptime);
  92         },
  93
  94         updateClusterStats: function(store, records, success) {
  95             if (!success) {
  96                 return;
  97             }
  98             var me = this;
  99             var viewmodel = me.getViewModel();
 100
 101             var subStatus = 2; // 2 = all good, 1 = different leves, 0 = none
 102             var subLevel = "";
 103
 104             var cpu = 0;
 105             var mem = 0;
 106             var hd = 0;
 107             var count = records.length;
 108             var errors = [];
 109
 110             records.forEach(function(item) {
 111                 // subscription level check
 112                 if (subStatus && item.data.level) {
 113                     if (subLevel !== "" && subLevel !== item.data.level) {
 114                         subStatus = 1;
 115                     } else if (subLevel === "") {
 116                         subLevel = item.data.level;
 117                     }
 118                 } else {
 119                     subStatus = 0;
 120                 }
 121
 122                 if (item.data.name === Proxmox.NodeName) {
 123                     let repoStatus = me.lookup('nodeInfo').down('#repositoryStatus');
 124                     repoStatus.setSubscriptionStatus(!!item.data.level);
 125                 }
 126
 127                 // resources count
 128                 cpu += item.data.cpu || 0;
 129
 130                 var memory = item.data.memory || { used: 0, total: 1 };
 131                 mem += memory.used/memory.total;
 132
 133                 var rootfs = item.data.rootfs || { used: 0, total: 1 };
 134                 hd += rootfs.used/rootfs.total;
 135
 136                 if (item.data.conn_error && count > 1) {
 137                     count--;
 138                     errors.push({
 139                         name: item.data.name,
 140                         msg: item.data.conn_error,
 141                     });
 142                 }
 143             });
 144
 145             var subscriptionPanel = me.lookup('subscription');
 146             subscriptionPanel.setSubStatus(subStatus);
 147
 148             // the node info already displays this information in case there is no cluster
 149             me.lookup('clusterResources').setHidden(records.length === 1);
 150
 151             cpu = cpu/count;
 152             mem = mem/count;
 153             hd = hd/count;
 154
 155             var cpuPanel = me.lookup('cpu');
 156             cpuPanel.updateValue(cpu);
 157
 158             var memPanel = me.lookup('mem');
 159             memPanel.updateValue(mem);
 160
 161             var hdPanel = me.lookup('hd');
 162             hdPanel.updateValue(hd);
 163
 164             if (errors.length && !viewmodel.get('error_shown')) {
 165                 var text = "";
 166                 errors.forEach(function(error) {
 167                     text += error.name + ':<br>' + error.msg + '<br>';
 168                 });
 169                 Ext.Msg.alert(gettext('Error'), text);
 170                 viewmodel.set('error_shown', true);
 171             }
 172         },
 173
 174         updateRepositoryStatus: function(store, records, success) {
 175             if (!success) {
 176                 return;
 177             }
 178
 179             let me = this;
 180             let repoStatus = me.lookup('nodeInfo').down('#repositoryStatus');
 181             repoStatus.setRepositoryInfo(records[0].data['standard-repos']);
 182         },
 183
 184         init: function(view) {
 185             var me = this;
 186             var sp = Ext.state.Manager.getProvider();
 187             var hours = sp.get('dashboard-hours') || 12;
 188             me.setHours(hours, false);
 189         },
 190     },
 191
 192     viewModel: {
 193         data: {
 194             timespan: 300, // in seconds
 195             hours: 12, // in hours
 196             error_shown: false,
 197             'bytes_in': 0,
 198             'bytes_out': 0,
 199             'avg_ptime': 0.0,
 200         },
 201
 202         stores: {
 203             cluster: {
 204                 storeid: 'dash-cluster',
 205                 type: 'update',
 206                 interval: 5000,
 207                 autoStart: true,
 208                 autoDestroy: true,
 209                 proxy: {
 210                     extraParams: { list_single_node: 1 },
 211                     type: 'proxmox',
 212                     url: '/api2/json/config/cluster/status',
 213                 },
 214                 listeners: {
 215                     load: 'updateClusterStats',
 216                 },
 217             },
 218             recentmails: {
 219                 storeid: 'dash-recent',
 220                 interval: 5000,
 221                 type: 'update',
 222                 autoStart: true,
 223                 autoDestroy: true,
 224                 proxy: {
 225                     type: 'proxmox',
 226                     url: '/api2/json/statistics/recent',
 227                     extraParams: {
 228                         hours: '{hours}',
 229                         timespan: '{timespan}',
 230                     },
 231                 },
 232                 fields: [
 233                     {
 234                         type: 'number', name: 'count',
 235                         convert: PMG.Utils.convert_field_to_per_min,
 236                     },
 237                     {
 238                         type: 'number', name: 'count_in',
 239                         convert: PMG.Utils.convert_field_to_per_min,
 240                     },
 241                     {
 242                         type: 'number', name: 'count_out',
 243                         convert: PMG.Utils.convert_field_to_per_min,
 244                     },
 245                     {
 246                         type: 'number', name: 'spam',
 247                         convert: PMG.Utils.convert_field_to_per_min,
 248                     },
 249                     {
 250                         type: 'number', name: 'spam_in',
 251                         convert: PMG.Utils.convert_field_to_per_min,
 252                     },
 253                     {
 254                         type: 'number', name: 'spam_out',
 255                         convert: PMG.Utils.convert_field_to_per_min,
 256                     },
 257                     {
 258                         type: 'number', name: 'virus',
 259                         convert: PMG.Utils.convert_field_to_per_min,
 260                     },
 261                     {
 262                         type: 'number', name: 'virus_in',
 263                         convert: PMG.Utils.convert_field_to_per_min,
 264                     },
 265                     { type: 'integer', name: 'virus_out' },
 266                     { type: 'integer', name: 'bytes_in' },
 267                     { type: 'integer', name: 'bytes_out' },
 268                     { type: 'number', name: 'ptimesum' },
 269                     { type: 'date', dateFormat: 'timestamp', name: 'time' },
 270                 ],
 271                 listeners: {
 272                     load: 'updateMailStats',
 273                 },
 274             },
 275             receivers: {
 276                 storeid: 'dash-receivers',
 277                 interval: 10000,
 278                 type: 'update',
 279                 autoStart: true,
 280                 autoDestroy: true,
 281                 proxy: {
 282                     type: 'proxmox',
 283                     url: '/api2/json/statistics/recentreceivers',
 284                     extraParams: {
 285                         hours: '{hours}',
 286                     },
 287                 },
 288                 fields: [
 289                     { type: 'integer', name: 'count' },
 290                     { type: 'string', name: 'receiver' },
 291                 ],
 292             },
 293             repositories: {
 294                 storeid: 'dash-repositories',
 295                 type: 'update',
 296                 interval: 15000,
 297                 autoStart: true,
 298                 autoLoad: true,
 299                 autoDestroy: true,
 300                 proxy: {
 301                     type: 'proxmox',
 302                     url: '/api2/json/nodes/localhost/apt/repositories',
 303                 },
 304                 listeners: {
 305                     load: 'updateRepositoryStatus',
 306                 },
 307             },
 308         },
 309     },
 310
 311     bind: {
 312         title: gettext('Dashboard') + ' (' +
 313             Ext.String.format(gettext('{0} hours'), '{hours}') + ')',
 314     },
 315
 316     layout: {
 317         type: 'column',
 318     },
 319     border: false,
 320
 321     bodyPadding: '20 0 0 20',
 322
 323     defaults: {
 324         columnWidth: 0.5,
 325         xtype: 'panel',
 326         margin: '0 20 20 0',
 327     },
 328
 329     tools: [
 330         {
 331             type: 'gear',
 332             handler: 'openDashboardOptions',
 333         },
 334     ],
 335
 336     scrollable: true,
 337
 338     items: [
 339         {
 340             height: 300,
 341             flex: 1,
 342             iconCls: 'fa fa-tachometer',
 343             title: gettext('E-Mail Volume'),
 344             layout: {
 345                 type: 'vbox',
 346                 align: 'stretch',
 347             },
 348             defaults: {
 349                 xtype: 'pmgMiniGraph',
 350                 bind: {
 351                     store: '{recentmails}',
 352                 },
 353             },
 354             items: [
 355                 {
 356                     fields: ['count'],
 357                     fieldTitles: [gettext('Mails / min')],
 358                     seriesConfig: {
 359                         colors: ['#00617F'],
 360                         style: {
 361                             opacity: 0.60,
 362                             lineWidth: 1,
 363                         },
 364                         highlightCfg: {
 365                             opacity: 1,
 366                             scaling: 1,
 367                         },
 368                     },
 369                 },
 370                 {
 371                     fields: ['spam'],
 372                     fieldTitles: [gettext('Spam / min')],
 373                     seriesConfig: {
 374                         colors: ['#E67300'],
 375                         style: {
 376                             opacity: 0.60,
 377                             lineWidth: 1,
 378                         },
 379                         highlightCfg: {
 380                             opacity: 1,
 381                             scaling: 1,
 382                         },
 383                     },
 384                 },
 385             ],
 386         },
 387         {
 388             xtype: 'container',
 389             height: 300,
 390             layout: {
 391                 type: 'vbox',
 392                 align: 'stretch',
 393             },
 394             items: [
 395                 {
 396                     xtype: 'pmgMailProcessing',
 397                     title: gettext('E-Mail Processing'),
 398                     iconCls: 'fa fa-hourglass-half',
 399                     height: 180,
 400                     bind: {
 401                         data: {
 402                             'bytes_in': '{bytes_in}',
 403                             'bytes_out': '{bytes_out}',
 404                             'avg_ptime': '{avg_ptime}',
 405                         },
 406                     },
 407                 },
 408                 {
 409                     iconCls: 'fa fa-ticket',
 410                     title: gettext('Subscription'),
 411                     reference: 'subscription',
 412                     xtype: 'pmgSubscriptionInfo',
 413                     margin: '10 0 0 0',
 414                     height: 110,
 415                 },
 416             ],
 417         },
 418         {
 419             xtype: 'pmgNodeInfoPanel',
 420             reference: 'nodeInfo',
 421             height: 275,
 422             bodyPadding: '15 5 15 5',
 423             iconCls: 'fa fa-tasks',
 424         },
 425         {
 426             height: 275,
 427             iconCls: 'fa fa-list',
 428             title: gettext('Top Receivers'),
 429
 430             bodyPadding: '20 20 20 20',
 431             layout: {
 432                 type: 'vbox',
 433                 pack: 'center',
 434                 align: 'stretch',
 435             },
 436             items: [{
 437                 xtype: 'grid',
 438                 bind: {
 439                     store: '{receivers}',
 440                 },
 441                 emptyText: gettext('No data in database'),
 442                 // remove all borders/lines/headers
 443                 border: false,
 444                 bodyBorder: false,
 445                 hideHeaders: true,
 446                 header: false,
 447                 columnLines: false,
 448                 rowLines: false,
 449                 viewConfig: {
 450                     stripeRows: false,
 451                 },
 452                 columns: [
 453                     {
 454                         dataIndex: 'receiver',
 455                         flex: 1,
 456                         text: gettext('Receiver'),
 457                     },
 458                     {
 459                         dataIndex: 'count',
 460                         align: 'right',
 461                         text: gettext('Count'),
 462                     },
 463                 ],
 464             }],
 465         },
 466         {
 467             height: 250,
 468             iconCls: 'fa fa-tasks',
 469             title: gettext('Cluster Resources (average)'),
 470             reference: 'clusterResources',
 471             hidden: true,
 472             bodyPadding: '0 20 0 20',
 473             layout: {
 474                 type: 'hbox',
 475                 align: 'center',
 476             },
 477             defaults: {
 478                 xtype: 'proxmoxGauge',
 479                 spriteFontSize: '20px',
 480                 flex: 1,
 481             },
 482             items: [
 483                 {
 484                     title: gettext('CPU'),
 485                     reference: 'cpu',
 486                 },
 487                 {
 488                     title: gettext('Memory'),
 489                     reference: 'mem',
 490                 },
 491                 {
 492                     title: gettext('Storage'),
 493                     reference: 'hd',
 494                 },
 495             ],
 496         },
 497     ],
 498 });