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         control: {
  95             'grid[reference=rulegrid]': {
  96                 itemdblclick: 'showEditWindow',
  97                 selectionchange: 'selectedRuleChange'
  98             },
  99             'button[reference=addButton]': {
 100                 click: 'addRule'
 101             }
 102         }
 103     },
 104
 105     viewModel: {
 106         data: {
 107             selectedRule: undefined,
 108             baseUrl: '/config/ruledb/rules'
 109         },
 110     },
 111
 112     items: [
 113         {
 114             xtype: 'grid',
 115             layout: 'fit',
 116             title: 'Rules',
 117             reference: 'rulegrid',
 118             region: 'center',
 119
 120             bind: {
 121                 selection: '{selectedRule}'
 122             },
 123
 124             dockedItems:{
 125                 xtype: 'toolbar',
 126                 reference: 'mytb',
 127                 items: [
 128                     {
 129                         xtype: 'button',
 130                         text: gettext('Add'),
 131                         iconCls: 'fa fa-plus-circle',
 132                         reference: 'addButton',
 133                     },
 134                     {
 135                         xtype: 'proxmoxStdRemoveButton',
 136                         text: gettext('Remove'),
 137                         iconCls: 'fa fa-minus-circle',
 138                         reference: 'removeButton',
 139                         callback: 'reload',
 140                         getRecordName: function(rec) { return rec.data.name },
 141                         bind: {
 142                             baseurl: '{baseUrl}'
 143                         }
 144                     }
 145                 ]
 146             },
 147
 148             viewConfig: {
 149                 getRowClass: function(record, rowIndex) {
 150                     return record.get('active') ? 'enabled' : 'disabled';
 151                 }
 152             },
 153
 154             store: {
 155                 autoLoad: true,
 156                 model: 'pmg-rule-list',
 157                 reference: 'rulesStore',
 158                 proxy: {
 159                     type: 'proxmox',
 160                     url: '/api2/json/config/ruledb/rules'
 161                 },
 162                 sorters: [
 163                     {
 164                         property: 'priority',
 165                         direction: 'DESC'
 166                     },
 167                     {
 168                         property: 'name',
 169                     }
 170                 ]
 171             },
 172
 173             sortableColumns: false,
 174             columns: [
 175                 {
 176                     text: 'Active',
 177                     dataIndex: 'active',
 178                     hidden : true,
 179                 },
 180                 {
 181                     text: 'Name',
 182                     dataIndex: 'name',
 183                     flex: 1,
 184                 },
 185                 {
 186                     text: 'Priority',
 187                     dataIndex: 'priority',
 188                 },
 189                 {
 190                     text: 'Direction',
 191                     dataIndex: 'direction',
 192                     renderer: PMG.Utils.format_rule_direction
 193                 },
 194                 {
 195                     text: 'Actions',
 196                     xtype: 'actioncolumn',
 197                     items: [
 198                         {
 199                             iconCls: 'fa fa-fw fa-pencil',
 200                             tooltip: 'Edit',
 201                             handler: 'editIconClick'
 202                         },
 203                         {
 204                             getClass: function(val, meta, rec) {
 205                                 return 'fa fa-fw fa-' + (rec.get('active') ? 'toggle-on' : 'toggle-off');
 206                             },
 207                             getTip: function(val, meta, rec) {
 208                                 return (rec.get('active') ? 'Deactivate' : 'Activate');
 209                             },
 210                             handler: 'toggleIconClick'
 211                         },
 212                     ]
 213                 }
 214             ],
 215         },
 216         {
 217             region: 'east',
 218             reference: 'infopanel',
 219             xtype: 'pmgRuleInfo',
 220             split: true,
 221             width: 440,
 222         }
 223     ]
 224 });