www/manager6/grid/FirewallRules.js

   1 Ext.define('PVE.form.FWMacroSelector', {
   2     extend: 'Proxmox.form.ComboGrid',
   3     alias: 'widget.pveFWMacroSelector',
   4     allowBlank: true,
   5     autoSelect: false,
   6     valueField: 'macro',
   7     displayField: 'macro',
   8     listConfig: {
   9         columns: [
  10             {
  11                 header: gettext('Macro'),
  12                 dataIndex: 'macro',
  13                 hideable: false,
  14                 width: 100,
  15             },
  16             {
  17                 header: gettext('Description'),
  18                 renderer: Ext.String.htmlEncode,
  19                 flex: 1,
  20                 dataIndex: 'descr',
  21             },
  22         ],
  23     },
  24     initComponent: function() {
  25         var me = this;
  26
  27         var store = Ext.create('Ext.data.Store', {
  28             autoLoad: true,
  29             fields: ['macro', 'descr'],
  30             idProperty: 'macro',
  31             proxy: {
  32                 type: 'proxmox',
  33                 url: "/api2/json/cluster/firewall/macros",
  34             },
  35             sorters: {
  36                 property: 'macro',
  37                 order: 'DESC',
  38             },
  39         });
  40
  41         Ext.apply(me, {
  42             store: store,
  43         });
  44
  45         me.callParent();
  46     },
  47 });
  48
  49 Ext.define('PVE.FirewallRulePanel', {
  50     extend: 'Proxmox.panel.InputPanel',
  51
  52     allow_iface: false,
  53
  54     list_refs_url: undefined,
  55
  56     onGetValues: function(values) {
  57         var me = this;
  58
  59         // hack: editable ComboGrid returns nothing when empty, so we need to set ''
  60         // Also, disabled text fields return nothing, so we need to set ''
  61
  62         Ext.Array.each(['source', 'dest', 'macro', 'proto', 'sport', 'dport', 'log'], function(key) {
  63             if (values[key] === undefined) {
  64                 values[key] = '';
  65             }
  66         });
  67
  68         delete values.modified_marker;
  69
  70         return values;
  71     },
  72
  73     initComponent: function() {
  74         var me = this;
  75
  76         if (!me.list_refs_url) {
  77             throw "no list_refs_url specified";
  78         }
  79
  80         me.column1 = [
  81             {
  82                 // hack: we use this field to mark the form 'dirty' when the
  83                 // record has errors- so that the user can safe the unmodified
  84                 // form again.
  85                 xtype: 'hiddenfield',
  86                 name: 'modified_marker',
  87                 value: '',
  88             },
  89             {
  90                 xtype: 'proxmoxKVComboBox',
  91                 name: 'type',
  92                 value: 'in',
  93                 comboItems: [['in', 'in'], ['out', 'out']],
  94                 fieldLabel: gettext('Direction'),
  95                 allowBlank: false,
  96             },
  97             {
  98                 xtype: 'proxmoxKVComboBox',
  99                 name: 'action',
 100                 value: 'ACCEPT',
 101                 comboItems: [['ACCEPT', 'ACCEPT'], ['DROP', 'DROP'], ['REJECT', 'REJECT']],
 102                 fieldLabel: gettext('Action'),
 103                 allowBlank: false,
 104             },
 105         ];
 106
 107         if (me.allow_iface) {
 108             me.column1.push({
 109                 xtype: 'proxmoxtextfield',
 110                 name: 'iface',
 111                 deleteEmpty: !me.isCreate,
 112                 value: '',
 113                 fieldLabel: gettext('Interface'),
 114             });
 115         } else {
 116             me.column1.push({
 117                 xtype: 'displayfield',
 118                 fieldLabel: '',
 119                 value: '',
 120             });
 121         }
 122
 123         me.column1.push(
 124             {
 125                 xtype: 'displayfield',
 126                 fieldLabel: '',
 127                 height: 7,
 128                 value: '',
 129             },
 130             {
 131                 xtype: 'pveIPRefSelector',
 132                 name: 'source',
 133                 autoSelect: false,
 134                 editable: true,
 135                 base_url: me.list_refs_url,
 136                 value: '',
 137                 fieldLabel: gettext('Source'),
 138
 139             },
 140             {
 141                 xtype: 'pveIPRefSelector',
 142                 name: 'dest',
 143                 autoSelect: false,
 144                 editable: true,
 145                 base_url: me.list_refs_url,
 146                 value: '',
 147                 fieldLabel: gettext('Destination'),
 148             },
 149         );
 150
 151
 152         me.column2 = [
 153             {
 154                 xtype: 'proxmoxcheckbox',
 155                 name: 'enable',
 156                 checked: false,
 157                 uncheckedValue: 0,
 158                 fieldLabel: gettext('Enable'),
 159             },
 160             {
 161                 xtype: 'pveFWMacroSelector',
 162                 name: 'macro',
 163                 fieldLabel: gettext('Macro'),
 164                 editable: true,
 165                 allowBlank: true,
 166                 listeners: {
 167                     change: function(f, value) {
 168                         if (value === null) {
 169                             me.down('field[name=proto]').setDisabled(false);
 170                             me.down('field[name=sport]').setDisabled(false);
 171                             me.down('field[name=dport]').setDisabled(false);
 172                         } else {
 173                             me.down('field[name=proto]').setDisabled(true);
 174                             me.down('field[name=proto]').setValue('');
 175                             me.down('field[name=sport]').setDisabled(true);
 176                             me.down('field[name=sport]').setValue('');
 177                             me.down('field[name=dport]').setDisabled(true);
 178                             me.down('field[name=dport]').setValue('');
 179                        }
 180                     },
 181                 },
 182             },
 183             {
 184                 xtype: 'pveIPProtocolSelector',
 185                 name: 'proto',
 186                 autoSelect: false,
 187                 editable: true,
 188                 value: '',
 189                 fieldLabel: gettext('Protocol'),
 190             },
 191             {
 192                 xtype: 'displayfield',
 193                 fieldLabel: '',
 194                 height: 7,
 195                 value: '',
 196             },
 197             {
 198                 xtype: 'textfield',
 199                 name: 'sport',
 200                 value: '',
 201                 fieldLabel: gettext('Source port'),
 202             },
 203             {
 204                 xtype: 'textfield',
 205                 name: 'dport',
 206                 value: '',
 207                 fieldLabel: gettext('Dest. port'),
 208             },
 209         ];
 210
 211         me.advancedColumn1 = [
 212             {
 213                 xtype: 'pveFirewallLogLevels',
 214             },
 215         ];
 216
 217         me.columnB = [
 218             {
 219                 xtype: 'textfield',
 220                 name: 'comment',
 221                 value: '',
 222                 fieldLabel: gettext('Comment'),
 223             },
 224         ];
 225
 226         me.callParent();
 227     },
 228 });
 229
 230 Ext.define('PVE.FirewallRuleEdit', {
 231     extend: 'Proxmox.window.Edit',
 232
 233     base_url: undefined,
 234     list_refs_url: undefined,
 235
 236     allow_iface: false,
 237
 238     initComponent: function() {
 239         var me = this;
 240
 241         if (!me.base_url) {
 242             throw "no base_url specified";
 243         }
 244         if (!me.list_refs_url) {
 245             throw "no list_refs_url specified";
 246         }
 247
 248         me.isCreate = me.rule_pos === undefined;
 249
 250         if (me.isCreate) {
 251             me.url = '/api2/extjs' + me.base_url;
 252             me.method = 'POST';
 253         } else {
 254             me.url = '/api2/extjs' + me.base_url + '/' + me.rule_pos.toString();
 255             me.method = 'PUT';
 256         }
 257
 258         var ipanel = Ext.create('PVE.FirewallRulePanel', {
 259             isCreate: me.isCreate,
 260             list_refs_url: me.list_refs_url,
 261             allow_iface: me.allow_iface,
 262             rule_pos: me.rule_pos,
 263         });
 264
 265         Ext.apply(me, {
 266             subject: gettext('Rule'),
 267             isAdd: true,
 268             items: [ipanel],
 269         });
 270
 271         me.callParent();
 272
 273         if (!me.isCreate) {
 274             me.load({
 275                 success: function(response, options) {
 276                     var values = response.result.data;
 277                     ipanel.setValues(values);
 278                     if (values.errors) {
 279                         var field = me.query('[isFormField][name=modified_marker]')[0];
 280                         field.setValue(1);
 281                         Ext.Function.defer(function() {
 282                             var form = ipanel.up('form').getForm();
 283                             form.markInvalid(values.errors);
 284                         }, 100);
 285                     }
 286                 },
 287             });
 288         } else if (me.rec) {
 289             ipanel.setValues(me.rec.data);
 290         }
 291     },
 292 });
 293
 294 Ext.define('PVE.FirewallGroupRuleEdit', {
 295     extend: 'Proxmox.window.Edit',
 296
 297     base_url: undefined,
 298
 299     allow_iface: false,
 300
 301     initComponent: function() {
 302         var me = this;
 303
 304         me.isCreate = me.rule_pos === undefined;
 305
 306         if (me.isCreate) {
 307             me.url = '/api2/extjs' + me.base_url;
 308             me.method = 'POST';
 309         } else {
 310             me.url = '/api2/extjs' + me.base_url + '/' + me.rule_pos.toString();
 311             me.method = 'PUT';
 312         }
 313
 314         var column1 = [
 315             {
 316                 xtype: 'hiddenfield',
 317                 name: 'type',
 318                 value: 'group',
 319             },
 320             {
 321                 xtype: 'pveSecurityGroupsSelector',
 322                 name: 'action',
 323                 value: '',
 324                 fieldLabel: gettext('Security Group'),
 325                 allowBlank: false,
 326             },
 327         ];
 328
 329         if (me.allow_iface) {
 330             column1.push({
 331                 xtype: 'proxmoxtextfield',
 332                 name: 'iface',
 333                 deleteEmpty: !me.isCreate,
 334                 value: '',
 335                 fieldLabel: gettext('Interface'),
 336             });
 337         }
 338
 339         var ipanel = Ext.create('Proxmox.panel.InputPanel', {
 340             isCreate: me.isCreate,
 341             column1: column1,
 342             column2: [
 343                 {
 344                     xtype: 'proxmoxcheckbox',
 345                     name: 'enable',
 346                     checked: false,
 347                     uncheckedValue: 0,
 348                     fieldLabel: gettext('Enable'),
 349                 },
 350             ],
 351             columnB: [
 352                 {
 353                     xtype: 'textfield',
 354                     name: 'comment',
 355                     value: '',
 356                     fieldLabel: gettext('Comment'),
 357                 },
 358             ],
 359         });
 360
 361         Ext.apply(me, {
 362             subject: gettext('Rule'),
 363             isAdd: true,
 364             items: [ipanel],
 365         });
 366
 367         me.callParent();
 368
 369         if (!me.isCreate) {
 370             me.load({
 371                 success: function(response, options) {
 372                     var values = response.result.data;
 373                     ipanel.setValues(values);
 374                 },
 375             });
 376         }
 377     },
 378 });
 379
 380 Ext.define('PVE.FirewallRules', {
 381     extend: 'Ext.grid.Panel',
 382     alias: 'widget.pveFirewallRules',
 383
 384     onlineHelp: 'chapter_pve_firewall',
 385
 386     stateful: true,
 387     stateId: 'grid-firewall-rules',
 388
 389     base_url: undefined,
 390     list_refs_url: undefined,
 391
 392     addBtn: undefined,
 393     removeBtn: undefined,
 394     editBtn: undefined,
 395     groupBtn: undefined,
 396
 397     tbar_prefix: undefined,
 398
 399     allow_groups: true,
 400     allow_iface: false,
 401
 402     setBaseUrl: function(url) {
 403         var me = this;
 404
 405         me.base_url = url;
 406
 407         if (url === undefined) {
 408             me.addBtn.setDisabled(true);
 409             if (me.groupBtn) {
 410                 me.groupBtn.setDisabled(true);
 411             }
 412             me.store.removeAll();
 413         } else {
 414             me.addBtn.setDisabled(false);
 415             me.removeBtn.baseurl = url + '/';
 416             if (me.groupBtn) {
 417                 me.groupBtn.setDisabled(false);
 418             }
 419             me.store.setProxy({
 420                 type: 'proxmox',
 421                 url: '/api2/json' + url,
 422             });
 423
 424             me.store.load();
 425         }
 426     },
 427
 428     moveRule: function(from, to) {
 429         var me = this;
 430
 431         if (!me.base_url) {
 432             return;
 433         }
 434
 435         Proxmox.Utils.API2Request({
 436             url: me.base_url + "/" + from,
 437             method: 'PUT',
 438             params: { moveto: to },
 439             waitMsgTarget: me,
 440             failure: function(response, options) {
 441                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 442             },
 443             callback: function() {
 444                 me.store.load();
 445             },
 446         });
 447     },
 448
 449     updateRule: function(rule) {
 450         var me = this;
 451
 452         if (!me.base_url) {
 453             return;
 454         }
 455
 456         rule.enable = rule.enable ? 1 : 0;
 457
 458         var pos = rule.pos;
 459         delete rule.pos;
 460         delete rule.errors;
 461
 462         Proxmox.Utils.API2Request({
 463             url: me.base_url + '/' + pos.toString(),
 464             method: 'PUT',
 465             params: rule,
 466             waitMsgTarget: me,
 467             failure: function(response, options) {
 468                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 469             },
 470             callback: function() {
 471                 me.store.load();
 472             },
 473         });
 474     },
 475
 476
 477     initComponent: function() {
 478         var me = this;
 479
 480         if (!me.list_refs_url) {
 481             throw "no list_refs_url specified";
 482         }
 483
 484         var store = Ext.create('Ext.data.Store', {
 485             model: 'pve-fw-rule',
 486         });
 487
 488         var reload = function() {
 489             store.load();
 490         };
 491
 492         var sm = Ext.create('Ext.selection.RowModel', {});
 493
 494         var run_editor = function() {
 495             var rec = sm.getSelection()[0];
 496             if (!rec) {
 497                 return;
 498             }
 499             var type = rec.data.type;
 500
 501             var editor;
 502             if (type === 'in' || type === 'out') {
 503                 editor = 'PVE.FirewallRuleEdit';
 504             } else if (type === 'group') {
 505                 editor = 'PVE.FirewallGroupRuleEdit';
 506             } else {
 507                 return;
 508             }
 509
 510             var win = Ext.create(editor, {
 511                 digest: rec.data.digest,
 512                 allow_iface: me.allow_iface,
 513                 base_url: me.base_url,
 514                 list_refs_url: me.list_refs_url,
 515                 rule_pos: rec.data.pos,
 516             });
 517
 518             win.show();
 519             win.on('destroy', reload);
 520         };
 521
 522         me.editBtn = Ext.create('Proxmox.button.Button', {
 523             text: gettext('Edit'),
 524             disabled: true,
 525             selModel: sm,
 526             handler: run_editor,
 527         });
 528
 529         me.addBtn = Ext.create('Ext.Button', {
 530             text: gettext('Add'),
 531             disabled: true,
 532             handler: function() {
 533                 var win = Ext.create('PVE.FirewallRuleEdit', {
 534                     allow_iface: me.allow_iface,
 535                     base_url: me.base_url,
 536                     list_refs_url: me.list_refs_url,
 537                 });
 538                 win.on('destroy', reload);
 539                 win.show();
 540             },
 541         });
 542
 543         var run_copy_editor = function() {
 544             var rec = sm.getSelection()[0];
 545
 546             if (!rec) {
 547                 return;
 548             }
 549             var type = rec.data.type;
 550
 551
 552             if (!(type === 'in' || type === 'out')) {
 553                 return;
 554             }
 555
 556             var win = Ext.create('PVE.FirewallRuleEdit', {
 557                 allow_iface: me.allow_iface,
 558                 base_url: me.base_url,
 559                 list_refs_url: me.list_refs_url,
 560                 rec: rec,
 561             });
 562
 563             win.show();
 564             win.on('destroy', reload);
 565         };
 566
 567         me.copyBtn = Ext.create('Proxmox.button.Button', {
 568             text: gettext('Copy'),
 569             selModel: sm,
 570             enableFn: function(rec) {
 571                 return rec.data.type === 'in' || rec.data.type === 'out';
 572             },
 573             disabled: true,
 574             handler: run_copy_editor,
 575         });
 576
 577         if (me.allow_groups) {
 578             me.groupBtn = Ext.create('Ext.Button', {
 579                 text: gettext('Insert') + ': ' +
 580                     gettext('Security Group'),
 581                 disabled: true,
 582                 handler: function() {
 583                     var win = Ext.create('PVE.FirewallGroupRuleEdit', {
 584                         allow_iface: me.allow_iface,
 585                         base_url: me.base_url,
 586                     });
 587                     win.on('destroy', reload);
 588                     win.show();
 589                 },
 590             });
 591         }
 592
 593         me.removeBtn = Ext.create('Proxmox.button.StdRemoveButton', {
 594             selModel: sm,
 595             baseurl: me.base_url + '/',
 596             confirmMsg: false,
 597             getRecordName: function(rec) {
 598                 var rule = rec.data;
 599                 return rule.pos.toString() +
 600                     '?digest=' + encodeURIComponent(rule.digest);
 601             },
 602             callback: function() {
 603                 me.store.load();
 604             },
 605         });
 606
 607         var tbar = me.tbar_prefix ? [me.tbar_prefix] : [];
 608         tbar.push(me.addBtn, me.copyBtn);
 609         if (me.groupBtn) {
 610             tbar.push(me.groupBtn);
 611         }
 612         tbar.push(me.removeBtn, me.editBtn);
 613
 614         var render_errors = function(name, value, metaData, record) {
 615             var errors = record.data.errors;
 616             if (errors && errors[name]) {
 617                 metaData.tdCls = 'proxmox-invalid-row';
 618                 var html = '<p>' + Ext.htmlEncode(errors[name]) + '</p>';
 619                 metaData.tdAttr = 'data-qwidth=600 data-qtitle="ERROR" data-qtip="' +
 620                     html.replace(/\"/g, '&quot;') + '"';
 621             }
 622             return value;
 623         };
 624
 625         var columns = [
 626             {
 627                 // similar to xtype: 'rownumberer',
 628                 dataIndex: 'pos',
 629                 resizable: false,
 630                 minWidth: 42,
 631                 flex: 1,
 632                 sortable: false,
 633                 align: 'right',
 634                 hideable: false,
 635                 menuDisabled: true,
 636                 renderer: function(value, metaData, record, rowIdx, colIdx, store) {
 637                     metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
 638                     if (value >= 0) {
 639                         return value;
 640                     }
 641                     return '';
 642                 },
 643             },
 644             {
 645                 xtype: 'checkcolumn',
 646                 header: gettext('Enable'),
 647                 dataIndex: 'enable',
 648                 listeners: {
 649                     checkchange: function(column, recordIndex, checked) {
 650                         var record = me.getStore().getData().items[recordIndex];
 651                         record.commit();
 652                         var data = {};
 653                         Ext.Array.forEach(record.getFields(), function(field) {
 654                             data[field.name] = record.get(field.name);
 655                         });
 656                         if (!me.allow_iface || !data.iface) {
 657                             delete data.iface;
 658                         }
 659                         me.updateRule(data);
 660                     },
 661                 },
 662                 minWidth: 50,
 663                 flex: 2,
 664             },
 665             {
 666                 header: gettext('Type'),
 667                 dataIndex: 'type',
 668                 renderer: function(value, metaData, record) {
 669                     return render_errors('type', value, metaData, record);
 670                 },
 671                 minWidth: 50,
 672                 flex: 2,
 673             },
 674             {
 675                 header: gettext('Action'),
 676                 dataIndex: 'action',
 677                 renderer: function(value, metaData, record) {
 678                     return render_errors('action', value, metaData, record);
 679                 },
 680                 minWidth: 80,
 681                 flex: 3,
 682             },
 683             {
 684                 header: gettext('Macro'),
 685                 dataIndex: 'macro',
 686                 renderer: function(value, metaData, record) {
 687                     return render_errors('macro', value, metaData, record);
 688                 },
 689                 minWidth: 80,
 690                 flex: 3,
 691             },
 692         ];
 693
 694         if (me.allow_iface) {
 695             columns.push({
 696                 header: gettext('Interface'),
 697                 dataIndex: 'iface',
 698                 renderer: function(value, metaData, record) {
 699                     return render_errors('iface', value, metaData, record);
 700                 },
 701                 minWidth: 80,
 702                 flex: 3,
 703             });
 704         }
 705
 706         columns.push(
 707             {
 708                 header: gettext('Source'),
 709                 dataIndex: 'source',
 710                 renderer: function(value, metaData, record) {
 711                     return render_errors('source', value, metaData, record);
 712                 },
 713                 minWidth: 100,
 714                 flex: 4,
 715             },
 716             {
 717                 header: gettext('Destination'),
 718                 dataIndex: 'dest',
 719                 renderer: function(value, metaData, record) {
 720                     return render_errors('dest', value, metaData, record);
 721                 },
 722                 minWidth: 100,
 723                 flex: 4,
 724             },
 725             {
 726                 header: gettext('Protocol'),
 727                 dataIndex: 'proto',
 728                 renderer: function(value, metaData, record) {
 729                     return render_errors('proto', value, metaData, record);
 730                 },
 731                 minWidth: 100,
 732                 flex: 3,
 733             },
 734             {
 735                 header: gettext('Dest. port'),
 736                 dataIndex: 'dport',
 737                 renderer: function(value, metaData, record) {
 738                     return render_errors('dport', value, metaData, record);
 739                 },
 740                 minWidth: 100,
 741                 flex: 4,
 742             },
 743             {
 744                 header: gettext('Source port'),
 745                 dataIndex: 'sport',
 746                 renderer: function(value, metaData, record) {
 747                     return render_errors('sport', value, metaData, record);
 748                 },
 749                 minWidth: 100,
 750                 flex: 3,
 751             },
 752             {
 753                 header: gettext('Log level'),
 754                 dataIndex: 'log',
 755                 renderer: function(value, metaData, record) {
 756                     return render_errors('log', value, metaData, record);
 757                 },
 758                 minWidth: 100,
 759                 flex: 3,
 760             },
 761             {
 762                 header: gettext('Comment'),
 763                 dataIndex: 'comment',
 764                 flex: 6,
 765                 renderer: function(value, metaData, record) {
 766                     return render_errors('comment', Ext.util.Format.htmlEncode(value), metaData, record);
 767                 },
 768             },
 769         );
 770
 771         Ext.apply(me, {
 772             store: store,
 773             selModel: sm,
 774             tbar: tbar,
 775             viewConfig: {
 776                 plugins: [
 777                     {
 778                         ptype: 'gridviewdragdrop',
 779                         dragGroup: 'FWRuleDDGroup',
 780                         dropGroup: 'FWRuleDDGroup',
 781                     },
 782                 ],
 783                 listeners: {
 784                     beforedrop: function(node, data, dropRec, dropPosition) {
 785                         if (!dropRec) {
 786                             return false; // empty view
 787                         }
 788                         var moveto = dropRec.get('pos');
 789                         if (dropPosition === 'after') {
 790                             moveto++;
 791                         }
 792                         var pos = data.records[0].get('pos');
 793                         me.moveRule(pos, moveto);
 794                         return 0;
 795                     },
 796                     itemdblclick: run_editor,
 797                 },
 798             },
 799             sortableColumns: false,
 800             columns: columns,
 801         });
 802
 803         me.callParent();
 804
 805         if (me.base_url) {
 806             me.setBaseUrl(me.base_url); // load
 807         }
 808     },
 809 }, function() {
 810     Ext.define('pve-fw-rule', {
 811         extend: 'Ext.data.Model',
 812         fields: [{ name: 'enable', type: 'boolean' },
 813                   'type', 'action', 'macro', 'source', 'dest', 'proto', 'iface',
 814                   'dport', 'sport', 'comment', 'pos', 'digest', 'errors'],
 815         idProperty: 'pos',
 816     });
 817 });