js/RuleConfiguration.js

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