js/RuleConfiguration.js

   1 /*global Proxmox*/
   2 /*jslint confusion: true*/
   3 /* create is a function and boolean,
   4  * bind is a function and object,
   5  * callback is a function and string
   6  */
   7 Ext.define('pmg-rule-list', {
   8     extend: 'Ext.data.Model',
   9     fields: [
  10         'id', 'name',
  11         { name: 'active', type: 'boolean' },
  12         { name: 'direction', type: 'integer' },
  13         { name: 'priority', type: 'integer' }
  14     ],
  15     idProperty: 'id'
  16 });
  17
  18 Ext.define('PMG.RulesConfiguration', {
  19     extend: 'Ext.container.Container',
  20     xtype: 'pmgRuleConfiguration',
  21
  22     layout: 'border',
  23     border: false,
  24     defaults: {
  25         border: false
  26     },
  27
  28     controller: {
  29         xclass: 'Ext.app.ViewController',
  30
  31         selectedRuleChange: function(grid, selected, eOpts) {
  32             var me = this;
  33             var infoPanel = me.lookupReference('infopanel');
  34             var baseurl;
  35
  36             if (selected.length > 0) {
  37                 baseurl = '/config/ruledb/rules/' + selected[0].data.id;
  38             }
  39
  40             infoPanel.getController().setBaseUrl(baseurl);
  41         },
  42
  43         editIconClick: function(gridView, rowindex, colindex, column, e, record) {
  44             var me = this;
  45             me.showEditWindow(gridView, record);
  46         },
  47
  48         showEditWindow: function(gridView, record) {
  49             var me = this;
  50             var win = Ext.create('PMG.RuleEditor', {
  51                 url: '/api2/extjs/config/ruledb/rules/' + record.data.id + '/config',
  52                 listeners: {
  53                     destroy: function() {
  54                         gridView.getStore().load();
  55                     }
  56                 }
  57             });
  58             win.load();
  59             win.show();
  60         },
  61
  62         toggleIconClick: function(gridView, rowindex, colindex, column, e, record) {
  63             var me = this;
  64             Proxmox.Utils.API2Request({
  65                 url: '/config/ruledb/rules/' + record.data.id + '/config',
  66                 params: {
  67                     active: record.data.active ? 0 : 1
  68                 },
  69                 method: 'PUT',
  70                 callback: function() {
  71                     gridView.getStore().load();
  72                 },
  73                 failure: function(response, opts) {
  74                     Ext.Msg.alert(gettext('Error'), response.htmlStatus);
  75                 }
  76             });
  77         },
  78
  79         reload: function(){
  80             var me = this;
  81             me.lookupReference('rulegrid').getStore().load();
  82         },
  83
  84         addRule: function() {
  85             var me = this;
  86             var win = Ext.create('PMG.RuleEditor', {
  87                 url: '/api2/extjs/config/ruledb/rules/',
  88                 method: 'POST',
  89                 create: true,
  90                 listeners: {
  91                     destroy: function() {
  92                         me.lookupReference('rulegrid').getStore().load();
  93                     }
  94                 }
  95             });
  96             win.load();
  97             win.show();
  98         },
  99
 100         init: function(view) {
 101             var grid = this.lookupReference('rulegrid');
 102             Proxmox.Utils.monStoreErrors(grid, grid.getStore(), true);
 103         },
 104
 105         control: {
 106             'grid[reference=rulegrid]': {
 107                 itemdblclick: 'showEditWindow',
 108                 selectionchange: 'selectedRuleChange'
 109             },
 110             'button[reference=addButton]': {
 111                 click: 'addRule'
 112             }
 113         }
 114     },
 115
 116     viewModel: {
 117         data: {
 118             selectedRule: undefined,
 119             baseUrl: '/config/ruledb/rules'
 120         }
 121     },
 122
 123     items: [
 124         {
 125             xtype: 'grid',
 126             layout: 'fit',
 127             title: 'Rules',
 128             reference: 'rulegrid',
 129             region: 'center',
 130
 131             bind: {
 132                 selection: '{selectedRule}'
 133             },
 134
 135             dockedItems:{
 136                 xtype: 'toolbar',
 137                 reference: 'mytb',
 138                 items: [
 139                     {
 140                         xtype: 'button',
 141                         text: gettext('Add'),
 142                         iconCls: 'fa fa-plus-circle',
 143                         reference: 'addButton'
 144                     },
 145                     {
 146                         xtype: 'proxmoxStdRemoveButton',
 147                         text: gettext('Remove'),
 148                         iconCls: 'fa fa-minus-circle',
 149                         reference: 'removeButton',
 150                         callback: 'reload',
 151                         getRecordName: function(rec) { return rec.data.name; },
 152                         bind: {
 153                             baseurl: '{baseUrl}'
 154                         }
 155                     }
 156                 ]
 157             },
 158
 159             viewConfig: {
 160                 getRowClass: function(record, rowIndex) {
 161                     return record.get('active') ? 'enabled' : 'disabled';
 162                 }
 163             },
 164
 165             store: {
 166                 autoLoad: true,
 167                 model: 'pmg-rule-list',
 168                 reference: 'rulesStore',
 169                 proxy: {
 170                     type: 'proxmox',
 171                     url: '/api2/json/config/ruledb/rules'
 172                 },
 173                 sorters: [
 174                     {
 175                         property: 'priority',
 176                         direction: 'DESC'
 177                     },
 178                     {
 179                         property: 'name'
 180                     }
 181                 ]
 182             },
 183
 184             sortableColumns: false,
 185             columns: [
 186                 {
 187                     text: 'Active',
 188                     dataIndex: 'active',
 189                     hidden : true
 190                 },
 191                 {
 192                     text: 'Name',
 193                     dataIndex: 'name',
 194                     flex: 1
 195                 },
 196                 {
 197                     text: 'Priority',
 198                     dataIndex: 'priority'
 199                 },
 200                 {
 201                     text: 'Direction',
 202                     dataIndex: 'direction',
 203                     renderer: PMG.Utils.format_rule_direction
 204                 },
 205                 {
 206                     text: '',
 207                     xtype: 'actioncolumn',
 208                     align: 'center',
 209                     width: 70,
 210                     items: [
 211                         {
 212                             iconCls: 'fa fa-fw fa-pencil',
 213                             tooltip: 'Edit',
 214                             handler: 'editIconClick'
 215                         },
 216                         {
 217                             getClass: function(val, meta, rec) {
 218                                 return 'fa fa-fw fa-' + (rec.get('active') ? 'toggle-on' : 'toggle-off');
 219                             },
 220                             getTip: function(val, meta, rec) {
 221                                 return (rec.get('active') ? 'Deactivate' : 'Activate');
 222                             },
 223                             handler: 'toggleIconClick'
 224                         }
 225                     ]
 226                 }
 227             ]
 228         },
 229         {
 230             region: 'east',
 231             reference: 'infopanel',
 232             xtype: 'pmgRuleInfo',
 233             split: true,
 234             width: 440
 235         }
 236     ]
 237 });