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