src/node/NetworkView.js

   1 Ext.define('proxmox-networks', {
   2     extend: 'Ext.data.Model',
   3     fields: [
   4         'active',
   5         'address',
   6         'address6',
   7         'autostart',
   8         'bridge_ports',
   9         'cidr',
  10         'cidr6',
  11         'comments',
  12         'gateway',
  13         'gateway6',
  14         'iface',
  15         'netmask',
  16         'netmask6',
  17         'slaves',
  18         'type',
  19     ],
  20     idProperty: 'iface',
  21 });
  22
  23 Ext.define('Proxmox.node.NetworkView', {
  24     extend: 'Ext.panel.Panel',
  25
  26     alias: ['widget.proxmoxNodeNetworkView'],
  27
  28     // defines what types of network devices we want to create
  29     // order is always the same
  30     types: ['bridge', 'bond', 'vlan', 'ovs'],
  31
  32     showApplyBtn: false,
  33
  34     initComponent: function() {
  35         let me = this;
  36
  37         if (!me.nodename) {
  38             throw "no node name specified";
  39         }
  40
  41         let baseUrl = '/nodes/' + me.nodename + '/network';
  42
  43         let store = Ext.create('Ext.data.Store', {
  44             model: 'proxmox-networks',
  45             proxy: {
  46                 type: 'proxmox',
  47                 url: '/api2/json' + baseUrl,
  48             },
  49             sorters: [
  50                 {
  51                     property: 'iface',
  52                     direction: 'ASC',
  53                 },
  54             ],
  55         });
  56
  57         let reload = function() {
  58             let changeitem = me.down('#changes');
  59             let apply_btn = me.down('#apply');
  60             let revert_btn = me.down('#revert');
  61             Proxmox.Utils.API2Request({
  62                 url: baseUrl,
  63                 failure: function(response, opts) {
  64                     store.loadData({});
  65                     Proxmox.Utils.setErrorMask(me, response.htmlStatus);
  66                     changeitem.update('');
  67                     changeitem.setHidden(true);
  68                 },
  69                 success: function(response, opts) {
  70                     let result = Ext.decode(response.responseText);
  71                     store.loadData(result.data);
  72                     let changes = result.changes;
  73                     if (changes === undefined || changes === '') {
  74                         changes = gettext("No changes");
  75                         changeitem.setHidden(true);
  76                         apply_btn.setDisabled(true);
  77                         revert_btn.setDisabled(true);
  78                     } else {
  79                         changeitem.update("<pre>" + Ext.htmlEncode(changes) + "</pre>");
  80                         changeitem.setHidden(false);
  81                         apply_btn.setDisabled(false);
  82                         revert_btn.setDisabled(false);
  83                     }
  84                 },
  85             });
  86         };
  87
  88         let run_editor = function() {
  89             let grid = me.down('gridpanel');
  90             let sm = grid.getSelectionModel();
  91             let rec = sm.getSelection()[0];
  92             if (!rec) {
  93                 return;
  94             }
  95
  96             let win = Ext.create('Proxmox.node.NetworkEdit', {
  97                 nodename: me.nodename,
  98                 iface: rec.data.iface,
  99                 iftype: rec.data.type,
 100             });
 101             win.show();
 102             win.on('destroy', reload);
 103         };
 104
 105         let edit_btn = new Ext.Button({
 106             text: gettext('Edit'),
 107             disabled: true,
 108             handler: run_editor,
 109         });
 110
 111         let del_btn = new Ext.Button({
 112             text: gettext('Remove'),
 113             disabled: true,
 114             handler: function() {
 115                 let grid = me.down('gridpanel');
 116                 let sm = grid.getSelectionModel();
 117                 let rec = sm.getSelection()[0];
 118                 if (!rec) {
 119                     return;
 120                 }
 121
 122                 let iface = rec.data.iface;
 123
 124                 Proxmox.Utils.API2Request({
 125                     url: baseUrl + '/' + iface,
 126                     method: 'DELETE',
 127                     waitMsgTarget: me,
 128                     callback: function() {
 129                         reload();
 130                     },
 131                     failure: function(response, opts) {
 132                         Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 133                     },
 134                 });
 135             },
 136         });
 137
 138         let apply_btn = Ext.create('Proxmox.button.Button', {
 139             text: gettext('Apply Configuration'),
 140             itemId: 'apply',
 141             disabled: true,
 142             confirmMsg: 'Do you want to apply pending network changes?',
 143             hidden: !me.showApplyBtn,
 144             handler: function() {
 145                 Proxmox.Utils.API2Request({
 146                     url: baseUrl,
 147                     method: 'PUT',
 148                     waitMsgTarget: me,
 149                     success: function(response, opts) {
 150                         let upid = response.result.data;
 151
 152                         let win = Ext.create('Proxmox.window.TaskProgress', {
 153                             taskDone: reload,
 154                             upid: upid,
 155                         });
 156                         win.show();
 157                     },
 158                     failure: function(response, opts) {
 159                         Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 160                     },
 161                 });
 162             },
 163         });
 164
 165         let set_button_status = function() {
 166             let grid = me.down('gridpanel');
 167             let sm = grid.getSelectionModel();
 168             let rec = sm.getSelection()[0];
 169
 170             edit_btn.setDisabled(!rec);
 171             del_btn.setDisabled(!rec);
 172         };
 173
 174         let render_ports = function(value, metaData, record) {
 175             if (value === 'bridge') {
 176                 return record.data.bridge_ports;
 177             } else if (value === 'bond') {
 178                 return record.data.slaves;
 179             } else if (value === 'OVSBridge') {
 180                 return record.data.ovs_ports;
 181             } else if (value === 'OVSBond') {
 182                 return record.data.ovs_bonds;
 183             }
 184             return '';
 185         };
 186
 187         let find_next_iface_id = function(prefix) {
 188             let next;
 189             for (next = 0; next <= 9999; next++) {
 190                 if (!store.getById(prefix + next.toString())) {
 191                     break;
 192                 }
 193             }
 194             return prefix + next.toString();
 195         };
 196
 197         let menu_items = [];
 198
 199         if (me.types.indexOf('bridge') !== -1) {
 200             menu_items.push({
 201                 text: Proxmox.Utils.render_network_iface_type('bridge'),
 202                 handler: function() {
 203                     let win = Ext.create('Proxmox.node.NetworkEdit', {
 204                         nodename: me.nodename,
 205                         iftype: 'bridge',
 206                         iface_default: find_next_iface_id('vmbr'),
 207                         onlineHelp: 'sysadmin_network_configuration',
 208                     });
 209                     win.on('destroy', reload);
 210                     win.show();
 211                 },
 212             });
 213         }
 214
 215         if (me.types.indexOf('bond') !== -1) {
 216             menu_items.push({
 217                 text: Proxmox.Utils.render_network_iface_type('bond'),
 218                 handler: function() {
 219                     let win = Ext.create('Proxmox.node.NetworkEdit', {
 220                         nodename: me.nodename,
 221                         iftype: 'bond',
 222                         iface_default: find_next_iface_id('bond'),
 223                         onlineHelp: 'sysadmin_network_configuration',
 224                     });
 225                     win.on('destroy', reload);
 226                     win.show();
 227                 },
 228             });
 229         }
 230
 231         if (me.types.indexOf('vlan') !== -1) {
 232             menu_items.push({
 233                 text: Proxmox.Utils.render_network_iface_type('vlan'),
 234                 handler: function() {
 235                     let win = Ext.create('Proxmox.node.NetworkEdit', {
 236                         nodename: me.nodename,
 237                         iftype: 'vlan',
 238                         onlineHelp: 'sysadmin_network_configuration',
 239                     });
 240                     win.on('destroy', reload);
 241                     win.show();
 242                 },
 243             });
 244         }
 245
 246         if (me.types.indexOf('ovs') !== -1) {
 247             if (menu_items.length > 0) {
 248                 menu_items.push({ xtype: 'menuseparator' });
 249             }
 250
 251             menu_items.push(
 252                 {
 253                     text: Proxmox.Utils.render_network_iface_type('OVSBridge'),
 254                     handler: function() {
 255                         let win = Ext.create('Proxmox.node.NetworkEdit', {
 256                             nodename: me.nodename,
 257                             iftype: 'OVSBridge',
 258                             iface_default: find_next_iface_id('vmbr'),
 259                         });
 260                         win.on('destroy', reload);
 261                         win.show();
 262                     },
 263                 },
 264                 {
 265                     text: Proxmox.Utils.render_network_iface_type('OVSBond'),
 266                     handler: function() {
 267                         let win = Ext.create('Proxmox.node.NetworkEdit', {
 268                             nodename: me.nodename,
 269                             iftype: 'OVSBond',
 270                             iface_default: find_next_iface_id('bond'),
 271                         });
 272                         win.on('destroy', reload);
 273                         win.show();
 274                     },
 275                 },
 276                 {
 277                     text: Proxmox.Utils.render_network_iface_type('OVSIntPort'),
 278                     handler: function() {
 279                         let win = Ext.create('Proxmox.node.NetworkEdit', {
 280                             nodename: me.nodename,
 281                             iftype: 'OVSIntPort',
 282                         });
 283                         win.on('destroy', reload);
 284                         win.show();
 285                     },
 286                 },
 287             );
 288         }
 289
 290         let renderer_generator = function(fieldname) {
 291             return function(val, metaData, rec) {
 292                 let tmp = [];
 293                 if (rec.data[fieldname]) {
 294                     tmp.push(rec.data[fieldname]);
 295                 }
 296                 if (rec.data[fieldname + '6']) {
 297                     tmp.push(rec.data[fieldname + '6']);
 298                 }
 299                 return tmp.join('<br>') || '';
 300             };
 301         };
 302
 303         Ext.apply(me, {
 304             layout: 'border',
 305             tbar: [
 306                 {
 307                     text: gettext('Create'),
 308                     menu: {
 309                         plain: true,
 310                         items: menu_items,
 311                     },
 312                 }, '-',
 313                 {
 314                     text: gettext('Revert'),
 315                     itemId: 'revert',
 316                     handler: function() {
 317                         Proxmox.Utils.API2Request({
 318                             url: baseUrl,
 319                             method: 'DELETE',
 320                             waitMsgTarget: me,
 321                             callback: function() {
 322                                 reload();
 323                             },
 324                             failure: function(response, opts) {
 325                                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 326                             },
 327                         });
 328                     },
 329                 },
 330                 edit_btn,
 331                 del_btn,
 332                 '-',
 333                 apply_btn,
 334             ],
 335             items: [
 336                 {
 337                     xtype: 'gridpanel',
 338                     stateful: true,
 339                     stateId: 'grid-node-network',
 340                     store: store,
 341                     region: 'center',
 342                     border: false,
 343                     columns: [
 344                         {
 345                             header: gettext('Name'),
 346                             sortable: true,
 347                             dataIndex: 'iface',
 348                         },
 349                         {
 350                             header: gettext('Type'),
 351                             sortable: true,
 352                             width: 120,
 353                             renderer: Proxmox.Utils.render_network_iface_type,
 354                             dataIndex: 'type',
 355                         },
 356                         {
 357                             xtype: 'booleancolumn',
 358                             header: gettext('Active'),
 359                             width: 80,
 360                             sortable: true,
 361                             dataIndex: 'active',
 362                             trueText: Proxmox.Utils.yesText,
 363                             falseText: Proxmox.Utils.noText,
 364                             undefinedText: Proxmox.Utils.noText,
 365                         },
 366                         {
 367                             xtype: 'booleancolumn',
 368                             header: gettext('Autostart'),
 369                             width: 80,
 370                             sortable: true,
 371                             dataIndex: 'autostart',
 372                             trueText: Proxmox.Utils.yesText,
 373                             falseText: Proxmox.Utils.noText,
 374                             undefinedText: Proxmox.Utils.noText,
 375                         },
 376                         {
 377                             xtype: 'booleancolumn',
 378                             header: gettext('VLAN aware'),
 379                             width: 80,
 380                             sortable: true,
 381                             dataIndex: 'bridge_vlan_aware',
 382                             trueText: Proxmox.Utils.yesText,
 383                             falseText: Proxmox.Utils.noText,
 384                             undefinedText: Proxmox.Utils.noText,
 385                         },
 386                         {
 387                             header: gettext('Ports/Slaves'),
 388                             dataIndex: 'type',
 389                             renderer: render_ports,
 390                         },
 391                         {
 392                             header: gettext('Bond Mode'),
 393                             dataIndex: 'bond_mode',
 394                             renderer: Proxmox.Utils.render_bond_mode,
 395                         },
 396                         {
 397                             header: gettext('Hash Policy'),
 398                             hidden: true,
 399                             dataIndex: 'bond_xmit_hash_policy',
 400                         },
 401                         {
 402                             header: gettext('IP address'),
 403                             sortable: true,
 404                             width: 120,
 405                             hidden: true,
 406                             dataIndex: 'address',
 407                             renderer: renderer_generator('address'),
 408                         },
 409                         {
 410                             header: gettext('Subnet mask'),
 411                             width: 120,
 412                             sortable: true,
 413                             hidden: true,
 414                             dataIndex: 'netmask',
 415                             renderer: renderer_generator('netmask'),
 416                         },
 417                         {
 418                             header: gettext('CIDR'),
 419                             width: 150,
 420                             sortable: true,
 421                             dataIndex: 'cidr',
 422                             renderer: renderer_generator('cidr'),
 423                         },
 424                         {
 425                             header: gettext('Gateway'),
 426                             width: 150,
 427                             sortable: true,
 428                             dataIndex: 'gateway',
 429                             renderer: renderer_generator('gateway'),
 430                         },
 431                         {
 432                             header: gettext('Comment'),
 433                             dataIndex: 'comments',
 434                             flex: 1,
 435                             renderer: Ext.String.htmlEncode,
 436                         },
 437                     ],
 438                     listeners: {
 439                         selectionchange: set_button_status,
 440                         itemdblclick: run_editor,
 441                     },
 442                 },
 443                 {
 444                     border: false,
 445                     region: 'south',
 446                     autoScroll: true,
 447                     hidden: true,
 448                     itemId: 'changes',
 449                     tbar: [
 450                         gettext('Pending changes') + ' (' +
 451                             gettext("Either reboot or use 'Apply Configuration' (needs ifupdown2) to activate") + ')',
 452                     ],
 453                     split: true,
 454                     bodyPadding: 5,
 455                     flex: 0.6,
 456                     html: gettext("No changes"),
 457                 },
 458             ],
 459         });
 460
 461         me.callParent();
 462         reload();
 463     },
 464 });