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,
  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.get(item).load();
  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 = 0;
  76
  77             records.forEach(function(item) {
  78                 bytes_in += item.data.bytes_in;
  79                 bytes_out += item.data.bytes_out;
  80                 count += item.data.count;
  81                 ptime += item.data.ptimesum;
  82             });
  83
  84             if (count) {
  85                 avg_ptime = (ptime/count).toFixed(2);
  86             }
  87
  88             viewModel.set('bytes_in', Proxmox.Utils.format_size(bytes_in));
  89             viewModel.set('bytes_out', Proxmox.Utils.format_size(bytes_out));
  90             viewModel.set('avg_ptime', avg_ptime + " s");
  91         },
  92
  93         updateClusterStats: function(store, records, success) {
  94             if (!success) {
  95                 return;
  96             }
  97             var me = this;
  98             var viewmodel = me.getViewModel();
  99
 100             var subStatus = 2; // 2 = all good, 1 = different leves, 0 = none
 101             var subLevel = "";
 102
 103             var cpu = 0;
 104             var mem = 0;
 105             var hd = 0;
 106             var count = records.length;
 107
 108             records.forEach(function(item) {
 109                 // subscription level check
 110                 if (subStatus && item.data.level) {
 111                     if (subLevel !== "" && subLevel !== item.data.level) {
 112                         subStatus = 1;
 113                     } else if (subLevel === "") {
 114                         subLevel = item.data.level;
 115                     }
 116                 } else {
 117                     subStatus = 0;
 118                 }
 119
 120                 // resources count
 121                 cpu += item.data.cpu;
 122                 mem += (item.data.memory.used/item.data.memory.total);
 123                 hd += (item.data.rootfs.used/item.data.rootfs.total);
 124             });
 125
 126             var subscriptionPanel = me.lookup('subscription');
 127             subscriptionPanel.setSubStatus(subStatus);
 128
 129             cpu = cpu/count;
 130             mem = mem/count;
 131             hd = hd/count;
 132
 133             var cpuPanel = me.lookup('cpu');
 134             cpuPanel.updateValue(cpu);
 135
 136             var memPanel = me.lookup('mem')
 137             memPanel.updateValue(mem);
 138
 139             var hdPanel = me.lookup('hd')
 140             hdPanel.updateValue(hd);
 141         },
 142
 143         init: function(view) {
 144             var me = this;
 145             var sp = Ext.state.Manager.getProvider();
 146             var hours = sp.get('dashboard-hours') || 12;
 147             me.setHours(hours, false);
 148         }
 149     },
 150
 151     viewModel: {
 152         data: {
 153             timespan: 300, // in seconds
 154             hours: 12, // in hours
 155             'bytes_in': 0,
 156             'bytes_out': 0,
 157             'avg_ptime': 0.0,
 158         },
 159
 160         stores: {
 161             cluster: {
 162                 storeid: 'dash-cluster',
 163                 type: 'update',
 164                 interval: 5000,
 165                 autoStart: true,
 166                 autoLoad: true,
 167                 autoDestroy: true,
 168                 proxy: {
 169                     type: 'proxmox',
 170                     url: '/api2/json/config/cluster/status'
 171                 },
 172                 listeners: {
 173                     load: 'updateClusterStats'
 174                 }
 175             },
 176             recentmails: {
 177                 storeid: 'dash-recent',
 178                 interval: 5000,
 179                 type: 'update',
 180                 autoStart: true,
 181                 autoLoad: true,
 182                 autoDestroy: true,
 183                 proxy: {
 184                     type: 'proxmox',
 185                     url: '/api2/json/statistics/recent',
 186                     extraParams: {
 187                         hours: '{hours}',
 188                         timespan: '{timespan}'
 189                     }
 190                 },
 191                 fields: [
 192                     { type: 'integer', name: 'count' },
 193                     { type: 'integer', name: 'count_in' },
 194                     { type: 'integer', name: 'count_out' },
 195                     { type: 'integer', name: 'spam' },
 196                     { type: 'integer', name: 'spam_in' },
 197                     { type: 'integer', name: 'spam_out' },
 198                     { type: 'integer', name: 'virus' },
 199                     { type: 'integer', name: 'virus_in' },
 200                     { type: 'integer', name: 'virus_out' },
 201                     { type: 'integer', name: 'bytes_in' },
 202                     { type: 'integer', name: 'bytes_out' },
 203                     { type: 'number', name: 'ptimesum' },
 204                     { type: 'date', dateFormat: 'timestamp', name: 'time' }
 205                 ],
 206                 listeners: {
 207                     load: 'updateMailStats'
 208                 }
 209             },
 210             receivers: {
 211                 storeid: 'dash-receivers',
 212                 interval: 10000,
 213                 type: 'update',
 214                 autoStart: true,
 215                 autoLoad: true,
 216                 autoDestroy: true,
 217                 proxy: {
 218                     type: 'proxmox',
 219                     url: '/api2/json/statistics/recentreceivers',
 220                     extraParams: {
 221                         hours: '{hours}',
 222                     }
 223                 },
 224                 fields: [
 225                     { type: 'integer', name: 'count' },
 226                     { type: 'string', name: 'receiver' }
 227                 ]
 228             }
 229         }
 230     },
 231
 232     bind: {
 233         title: gettext('Dashboard') + ' (' +
 234             Ext.String.format(gettext('{0} hours'), '{hours}') + ')'
 235     },
 236
 237     layout: 'column',
 238     border: false,
 239
 240     bodyPadding: '20 0 0 20',
 241
 242     defaults: {
 243         columnWidth: 0.5,
 244         xtype: 'panel',
 245         margin: '0 20 20 0'
 246     },
 247
 248     tools: [
 249         {
 250             type: 'gear',
 251             handler: 'openDashboardOptions'
 252         }
 253     ],
 254
 255     scrollable: true,
 256
 257     items: [
 258         {
 259             height: 300,
 260             flex: 1,
 261             iconCls: 'fa fa-tachometer',
 262             title: gettext('E-Mail Volume'),
 263             layout: {
 264                 type: 'vbox',
 265                 align: 'stretch',
 266             },
 267             defaults: {
 268                 xtype: 'pmgMiniGraph',
 269                 bind: {
 270                     store: '{recentmails}'
 271                 }
 272             },
 273             items: [
 274                 {
 275                     fields: ['count'],
 276                     fieldTitles: [ gettext('Mails') ],
 277                     seriesConfig: {
 278                         colors: [ '#00617F' ],
 279                         style: {
 280                             opacity: 0.60,
 281                             lineWidth: 1
 282                         },
 283                         highlightCfg: {
 284                             opacity: 1,
 285                             scaling: 1
 286                         },
 287                     },
 288                 },
 289                 {
 290                     fields: ['spam'],
 291                     fieldTitles: [ gettext('Spam') ],
 292                     seriesConfig: {
 293                         colors: [ '#E67300' ],
 294                         style: {
 295                             opacity: 0.60,
 296                             lineWidth: 1
 297                         },
 298                         highlightCfg: {
 299                             opacity: 1,
 300                             scaling: 1
 301                         },
 302                     },
 303                 },
 304             ]
 305         },
 306         {
 307             xtype: 'container',
 308             height: 300,
 309             layout: {
 310                 type: 'vbox',
 311                 align: 'stretch',
 312             },
 313             items: [
 314                 {
 315                     xtype: 'pmgMailProcessing',
 316                     title: gettext('E-Mail Processing'),
 317                     iconCls: 'fa fa-hourglass-half',
 318                     height: 180,
 319                     bind: {
 320                         data: {
 321                             'in': '{bytes_in}',
 322                             'out': '{bytes_out}',
 323                             'ptime': '{avg_ptime}'
 324                         }
 325                     },
 326                 },
 327                 {
 328                     iconCls: 'fa fa-ticket',
 329                     title: 'Subscription',
 330                     reference: 'subscription',
 331                     xtype: 'pmgSubscriptionInfo',
 332                     margin: '10 0 0 0',
 333                     height: 110,
 334                 }
 335             ]
 336         },
 337         {
 338             height: 250,
 339             iconCls: 'fa fa-tasks',
 340             title: 'Node Resources',
 341             bodyPadding: '0 20 0 20',
 342             layout: {
 343                 type: 'hbox',
 344                 align: 'center'
 345             },
 346             defaults: {
 347                 xtype: 'proxmoxGauge',
 348                 spriteFontSize: '20px',
 349                 flex: 1
 350             },
 351             items: [
 352                 {
 353                     title: gettext('CPU'),
 354                     reference: 'cpu'
 355                 },
 356                 {
 357                     title: gettext('Memory'),
 358                     reference: 'mem'
 359                 },
 360                 {
 361                     title: gettext('Storage'),
 362                     reference: 'hd'
 363                 }
 364             ]
 365         },
 366         {
 367             height: 250,
 368             iconCls: 'fa fa-list',
 369             title: gettext('Top Receivers'),
 370
 371             bodyPadding: 20,
 372             layout: {
 373                 type: 'vbox',
 374                 pack: 'center',
 375                 align: 'stretch'
 376             },
 377             items: [{
 378                 xtype: 'grid',
 379                 bind: {
 380                     store: '{receivers}'
 381                 },
 382
 383                 emptyText: gettext('No data in database'),
 384
 385                 // remove all borders/lines/headers
 386                 border: false,
 387                 bodyBorder: false,
 388                 hideHeaders: true,
 389                 header: false,
 390                 columnLines: false,
 391                 rowLines: false,
 392                 viewConfig: {
 393                     stripeRows: false,
 394                 },
 395
 396                 columns: [
 397                     {
 398                         dataIndex: 'receiver',
 399                         flex: 1,
 400                         text: gettext('Receiver')
 401                     },
 402                     {
 403                         dataIndex: 'count',
 404                         align: 'right',
 405                         text: gettext('Count')
 406                     }
 407                 ]
 408             }]
 409         }
 410     ]
 411 });