www/manager6/lxc/Network.js

   1 Ext.define('PVE.lxc.NetworkInputPanel', {
   2     extend: 'Proxmox.panel.InputPanel',
   3     alias: 'widget.pveLxcNetworkInputPanel',
   4
   5     insideWizard: false,
   6
   7     onlineHelp: 'pct_container_network',
   8
   9     setNodename: function(nodename) {
  10         let me = this;
  11
  12         if (!nodename || me.nodename === nodename) {
  13             return;
  14         }
  15         me.nodename = nodename;
  16
  17         let bridgeSelector = me.query("[isFormField][name=bridge]")[0];
  18         bridgeSelector.setNodename(nodename);
  19     },
  20
  21     onGetValues: function(values) {
  22         let me = this;
  23
  24         let id;
  25         if (me.isCreate) {
  26             id = values.id;
  27             delete values.id;
  28         } else {
  29             id = me.ifname;
  30         }
  31         let newdata = {};
  32         if (id) {
  33             if (values.ipv6mode !== 'static') {
  34                 values.ip6 = values.ipv6mode;
  35             }
  36             if (values.ipv4mode !== 'static') {
  37                 values.ip = values.ipv4mode;
  38             }
  39             newdata[id] = PVE.Parser.printLxcNetwork(values);
  40         }
  41         return newdata;
  42     },
  43
  44     initComponent: function() {
  45         let me = this;
  46
  47         let cdata = {};
  48         if (me.insideWizard) {
  49             me.ifname = 'net0';
  50             cdata.name = 'eth0';
  51             me.dataCache = {};
  52         }
  53         cdata.firewall = me.insideWizard || me.isCreate;
  54
  55         if (!me.dataCache) {
  56             throw "no dataCache specified";
  57         }
  58
  59         if (!me.isCreate) {
  60             if (!me.ifname) {
  61                 throw "no interface name specified";
  62             }
  63             if (!me.dataCache[me.ifname]) {
  64                 throw "no such interface '" + me.ifname + "'";
  65             }
  66             cdata = PVE.Parser.parseLxcNetwork(me.dataCache[me.ifname]);
  67         }
  68
  69         for (let i = 0; i < 32; i++) {
  70             let ifname = 'net' + i.toString();
  71             if (me.isCreate && !me.dataCache[ifname]) {
  72                 me.ifname = ifname;
  73                 break;
  74             }
  75         }
  76
  77         me.column1 = [
  78             {
  79                 xtype: 'hidden',
  80                 name: 'id',
  81                 value: me.ifname,
  82             },
  83             {
  84                 xtype: 'textfield',
  85                 name: 'name',
  86                 fieldLabel: gettext('Name'),
  87                 emptyText: '(e.g., eth0)',
  88                 allowBlank: false,
  89                 value: cdata.name,
  90                 validator: function(value) {
  91                     for (const [key, netRaw] of Object.entries(me.dataCache)) {
  92                         if (!key.match(/^net\d+/) || key === me.ifname) {
  93                             continue;
  94                         }
  95                         let net = PVE.Parser.parseLxcNetwork(netRaw);
  96                         if (net.name === value) {
  97                             return "interface name already in use";
  98                         }
  99                     }
 100                     return true;
 101                 },
 102             },
 103             {
 104                 xtype: 'textfield',
 105                 name: 'hwaddr',
 106                 fieldLabel: gettext('MAC address'),
 107                 vtype: 'MacAddress',
 108                 value: cdata.hwaddr,
 109                 allowBlank: true,
 110                 emptyText: 'auto',
 111             },
 112             {
 113                 xtype: 'PVE.form.BridgeSelector',
 114                 name: 'bridge',
 115                 nodename: me.nodename,
 116                 fieldLabel: gettext('Bridge'),
 117                 value: cdata.bridge,
 118                 allowBlank: false,
 119             },
 120             {
 121                 xtype: 'pveVlanField',
 122                 name: 'tag',
 123                 value: cdata.tag,
 124             },
 125             {
 126                 xtype: 'proxmoxcheckbox',
 127                 fieldLabel: gettext('Firewall'),
 128                 name: 'firewall',
 129                 value: cdata.firewall,
 130             },
 131         ];
 132
 133         let dhcp4 = cdata.ip === 'dhcp';
 134         if (dhcp4) {
 135             cdata.ip = '';
 136             cdata.gw = '';
 137         }
 138
 139         let auto6 = cdata.ip6 === 'auto';
 140         let dhcp6 = cdata.ip6 === 'dhcp';
 141         if (auto6 || dhcp6) {
 142             cdata.ip6 = '';
 143             cdata.gw6 = '';
 144         }
 145
 146         me.column2 = [
 147             {
 148                 layout: {
 149                     type: 'hbox',
 150                     align: 'middle',
 151                 },
 152                 border: false,
 153                 margin: '0 0 5 0',
 154                 items: [
 155                     {
 156                         xtype: 'label',
 157                         text: 'IPv4:', // do not localize
 158                     },
 159                     {
 160                         xtype: 'radiofield',
 161                         boxLabel: gettext('Static'),
 162                         name: 'ipv4mode',
 163                         inputValue: 'static',
 164                         checked: !dhcp4,
 165                         margin: '0 0 0 10',
 166                         listeners: {
 167                             change: function(cb, value) {
 168                                 me.down('field[name=ip]').setEmptyText(
 169                                     value ? Proxmox.Utils.NoneText : "",
 170                                 );
 171                                 me.down('field[name=ip]').setDisabled(!value);
 172                                 me.down('field[name=gw]').setDisabled(!value);
 173                             },
 174                         },
 175                     },
 176                     {
 177                         xtype: 'radiofield',
 178                         boxLabel: 'DHCP', // do not localize
 179                         name: 'ipv4mode',
 180                         inputValue: 'dhcp',
 181                         checked: dhcp4,
 182                         margin: '0 0 0 10',
 183                     },
 184                 ],
 185             },
 186             {
 187                 xtype: 'textfield',
 188                 name: 'ip',
 189                 vtype: 'IPCIDRAddress',
 190                 value: cdata.ip,
 191                 emptyText: dhcp4 ? '' : Proxmox.Utils.NoneText,
 192                 disabled: dhcp4,
 193                 fieldLabel: 'IPv4/CIDR', // do not localize
 194             },
 195             {
 196                 xtype: 'textfield',
 197                 name: 'gw',
 198                 value: cdata.gw,
 199                 vtype: 'IPAddress',
 200                 disabled: dhcp4,
 201                 fieldLabel: gettext('Gateway') + ' (IPv4)',
 202                 margin: '0 0 3 0', // override bottom margin to account for the menuseparator
 203             },
 204             {
 205                 xtype: 'menuseparator',
 206                 height: '3',
 207                 margin: '0',
 208             },
 209             {
 210                 layout: {
 211                     type: 'hbox',
 212                     align: 'middle',
 213                 },
 214                 border: false,
 215                 margin: '0 0 5 0',
 216                 items: [
 217                     {
 218                         xtype: 'label',
 219                         text: 'IPv6:', // do not localize
 220                     },
 221                     {
 222                         xtype: 'radiofield',
 223                         boxLabel: gettext('Static'),
 224                         name: 'ipv6mode',
 225                         inputValue: 'static',
 226                         checked: !(auto6 || dhcp6),
 227                         margin: '0 0 0 10',
 228                         listeners: {
 229                             change: function(cb, value) {
 230                                 me.down('field[name=ip6]').setEmptyText(
 231                                     value ? Proxmox.Utils.NoneText : "",
 232                                 );
 233                                 me.down('field[name=ip6]').setDisabled(!value);
 234                                 me.down('field[name=gw6]').setDisabled(!value);
 235                             },
 236                         },
 237                     },
 238                     {
 239                         xtype: 'radiofield',
 240                         boxLabel: 'DHCP', // do not localize
 241                         name: 'ipv6mode',
 242                         inputValue: 'dhcp',
 243                         checked: dhcp6,
 244                         margin: '0 0 0 10',
 245                     },
 246                     {
 247                         xtype: 'radiofield',
 248                         boxLabel: 'SLAAC', // do not localize
 249                         name: 'ipv6mode',
 250                         inputValue: 'auto',
 251                         checked: auto6,
 252                         margin: '0 0 0 10',
 253                     },
 254                 ],
 255             },
 256             {
 257                 xtype: 'textfield',
 258                 name: 'ip6',
 259                 value: cdata.ip6,
 260                 emptyText: dhcp6 || auto6 ? '' : Proxmox.Utils.NoneText,
 261                 vtype: 'IP6CIDRAddress',
 262                 disabled: dhcp6 || auto6,
 263                 fieldLabel: 'IPv6/CIDR', // do not localize
 264             },
 265             {
 266                 xtype: 'textfield',
 267                 name: 'gw6',
 268                 vtype: 'IP6Address',
 269                 value: cdata.gw6,
 270                 disabled: dhcp6 || auto6,
 271                 fieldLabel: gettext('Gateway') + ' (IPv6)',
 272             },
 273         ];
 274
 275         me.advancedColumn1 = [
 276             {
 277                 xtype: 'proxmoxcheckbox',
 278                 fieldLabel: gettext('Disconnect'),
 279                 name: 'link_down',
 280                 value: cdata.link_down,
 281             },
 282             {
 283                 xtype: 'proxmoxintegerfield',
 284                 fieldLabel: 'MTU',
 285                 emptyText: gettext('Same as bridge'),
 286                 name: 'mtu',
 287                 value: cdata.mtu,
 288                 minValue: 576,
 289                 maxValue: 65535,
 290             },
 291         ];
 292
 293         me.advancedColumn2 = [
 294             {
 295                 xtype: 'numberfield',
 296                 name: 'rate',
 297                 fieldLabel: gettext('Rate limit') + ' (MB/s)',
 298                 minValue: 0,
 299                 maxValue: 10*1024,
 300                 value: cdata.rate,
 301                 emptyText: 'unlimited',
 302                 allowBlank: true,
 303             },
 304         ];
 305
 306         me.callParent();
 307     },
 308 });
 309
 310 Ext.define('PVE.lxc.NetworkEdit', {
 311     extend: 'Proxmox.window.Edit',
 312
 313     isAdd: true,
 314
 315     initComponent: function() {
 316         let me = this;
 317
 318         if (!me.dataCache) {
 319             throw "no dataCache specified";
 320         }
 321         if (!me.nodename) {
 322             throw "no node name specified";
 323         }
 324
 325         Ext.apply(me, {
 326             subject: gettext('Network Device') + ' (veth)',
 327             digest: me.dataCache.digest,
 328             items: [
 329                 {
 330                     xtype: 'pveLxcNetworkInputPanel',
 331                     ifname: me.ifname,
 332                     nodename: me.nodename,
 333                     dataCache: me.dataCache,
 334                     isCreate: me.isCreate,
 335                 },
 336             ],
 337         });
 338
 339         me.callParent();
 340     },
 341 });
 342
 343 Ext.define('PVE.lxc.NetworkView', {
 344     extend: 'Ext.grid.GridPanel',
 345     alias: 'widget.pveLxcNetworkView',
 346
 347     onlineHelp: 'pct_container_network',
 348
 349     dataCache: {}, // used to store result of last load
 350
 351     stateful: true,
 352     stateId: 'grid-lxc-network',
 353
 354     load: function() {
 355         let me = this;
 356
 357         Proxmox.Utils.setErrorMask(me, true);
 358
 359         Proxmox.Utils.API2Request({
 360             url: me.url,
 361             failure: function(response, opts) {
 362                 Proxmox.Utils.setErrorMask(me, gettext('Error') + ': ' + response.htmlStatus);
 363             },
 364             success: function(response, opts) {
 365                 Proxmox.Utils.setErrorMask(me, false);
 366                 let result = Ext.decode(response.responseText);
 367                 me.dataCache = result.data || {};
 368                 let records = [];
 369                 for (const [key, value] of Object.entries(me.dataCache)) {
 370                     if (key.match(/^net\d+/)) {
 371                         let net = PVE.Parser.parseLxcNetwork(value);
 372                         net.id = key;
 373                         records.push(net);
 374                     }
 375                 }
 376                 me.store.loadData(records);
 377                 me.down('button[name=addButton]').setDisabled(records.length >= 32);
 378             },
 379         });
 380     },
 381
 382     initComponent: function() {
 383         let me = this;
 384
 385         let nodename = me.pveSelNode.data.node;
 386         if (!nodename) {
 387             throw "no node name specified";
 388         }
 389
 390         let vmid = me.pveSelNode.data.vmid;
 391         if (!vmid) {
 392             throw "no VM ID specified";
 393         }
 394
 395         let caps = Ext.state.Manager.get('GuiCap');
 396
 397         me.url = `/nodes/${nodename}/lxc/${vmid}/config`;
 398
 399         let store = new Ext.data.Store({
 400             model: 'pve-lxc-network',
 401             sorters: [
 402                 {
 403                     property: 'id',
 404                     direction: 'ASC',
 405                 },
 406             ],
 407         });
 408
 409         let sm = Ext.create('Ext.selection.RowModel', {});
 410
 411         let run_editor = function() {
 412             let rec = sm.getSelection()[0];
 413             if (!rec || !caps.vms['VM.Config.Network']) {
 414                 return false; // disable default-propagation when triggered by grid dblclick
 415             }
 416             Ext.create('PVE.lxc.NetworkEdit', {
 417                 url: me.url,
 418                 nodename: nodename,
 419                 dataCache: me.dataCache,
 420                 ifname: rec.data.id,
 421                 listeners: {
 422                     destroy: () => me.load(),
 423                 },
 424                 autoShow: true,
 425             });
 426             return undefined; // make eslint happier
 427         };
 428
 429         Ext.apply(me, {
 430             store: store,
 431             selModel: sm,
 432             tbar: [
 433                 {
 434                     text: gettext('Add'),
 435                     name: 'addButton',
 436                     disabled: !caps.vms['VM.Config.Network'],
 437                     handler: function() {
 438                         Ext.create('PVE.lxc.NetworkEdit', {
 439                             url: me.url,
 440                             nodename: nodename,
 441                             isCreate: true,
 442                             dataCache: me.dataCache,
 443                             listeners: {
 444                                 destroy: () => me.load(),
 445                             },
 446                             autoShow: true,
 447                         });
 448                     },
 449                 },
 450                 {
 451                     xtype: 'proxmoxButton',
 452                     text: gettext('Remove'),
 453                     disabled: true,
 454                     selModel: sm,
 455                     enableFn: function(rec) {
 456                         return !!caps.vms['VM.Config.Network'];
 457                     },
 458                     confirmMsg: ({ data }) =>
 459                         Ext.String.format(gettext('Are you sure you want to remove entry {0}'), `'${data.id}'`),
 460                     handler: function(btn, e, rec) {
 461                         Proxmox.Utils.API2Request({
 462                             url: me.url,
 463                             waitMsgTarget: me,
 464                             method: 'PUT',
 465                             params: {
 466                                 'delete': rec.data.id,
 467                                 digest: me.dataCache.digest,
 468                             },
 469                             callback: () => me.load(),
 470                             failure: (response, opts) => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
 471                         });
 472                     },
 473                 },
 474                 {
 475                     xtype: 'proxmoxButton',
 476                     text: gettext('Edit'),
 477                     selModel: sm,
 478                     disabled: true,
 479                     enableFn: rec => !!caps.vms['VM.Config.Network'],
 480                     handler: run_editor,
 481                 },
 482             ],
 483             columns: [
 484                 {
 485                     header: 'ID',
 486                     width: 50,
 487                     dataIndex: 'id',
 488                 },
 489                 {
 490                     header: gettext('Name'),
 491                     width: 80,
 492                     dataIndex: 'name',
 493                 },
 494                 {
 495                     header: gettext('Bridge'),
 496                     width: 80,
 497                     dataIndex: 'bridge',
 498                 },
 499                 {
 500                     header: gettext('Firewall'),
 501                     width: 80,
 502                     dataIndex: 'firewall',
 503                     renderer: Proxmox.Utils.format_boolean,
 504                 },
 505                 {
 506                     header: gettext('VLAN Tag'),
 507                     width: 80,
 508                     dataIndex: 'tag',
 509                 },
 510                 {
 511                     header: gettext('MAC address'),
 512                     width: 110,
 513                     dataIndex: 'hwaddr',
 514                 },
 515                 {
 516                     header: gettext('IP address'),
 517                     width: 150,
 518                     dataIndex: 'ip',
 519                     renderer: function(value, metaData, rec) {
 520                         if (rec.data.ip && rec.data.ip6) {
 521                             return rec.data.ip + "<br>" + rec.data.ip6;
 522                         } else if (rec.data.ip6) {
 523                             return rec.data.ip6;
 524                         } else {
 525                             return rec.data.ip;
 526                         }
 527                     },
 528                 },
 529                 {
 530                     header: gettext('Gateway'),
 531                     width: 150,
 532                     dataIndex: 'gw',
 533                     renderer: function(value, metaData, rec) {
 534                         if (rec.data.gw && rec.data.gw6) {
 535                             return rec.data.gw + "<br>" + rec.data.gw6;
 536                         } else if (rec.data.gw6) {
 537                             return rec.data.gw6;
 538                         } else {
 539                             return rec.data.gw;
 540                         }
 541                     },
 542                 },
 543                 {
 544                     header: gettext('MTU'),
 545                     width: 80,
 546                     dataIndex: 'mtu',
 547                 },
 548                 {
 549                     header: gettext('Disconnected'),
 550                     width: 100,
 551                     dataIndex: 'link_down',
 552                     renderer: Proxmox.Utils.format_boolean,
 553                 },
 554             ],
 555             listeners: {
 556                 activate: me.load,
 557                 itemdblclick: run_editor,
 558             },
 559         });
 560
 561         me.callParent();
 562    },
 563 }, function() {
 564     Ext.define('pve-lxc-network', {
 565         extend: "Ext.data.Model",
 566         proxy: { type: 'memory' },
 567         fields: [
 568             'id',
 569             'name',
 570             'hwaddr',
 571             'bridge',
 572             'ip',
 573             'gw',
 574             'ip6',
 575             'gw6',
 576             'tag',
 577             'firewall',
 578             'mtu',
 579             'link_down',
 580         ],
 581     });
 582 });
 583