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