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                         iface_default: 'interfaceX.1',
 239                         onlineHelp: 'sysadmin_network_configuration',
 240                     });
 241                     win.on('destroy', reload);
 242                     win.show();
 243                 },
 244             });
 245         }
 246
 247         if (me.types.indexOf('ovs') !== -1) {
 248             if (menu_items.length > 0) {
 249                 menu_items.push({ xtype: 'menuseparator' });
 250             }
 251
 252             menu_items.push(
 253                 {
 254                     text: Proxmox.Utils.render_network_iface_type('OVSBridge'),
 255                     handler: function() {
 256                         let win = Ext.create('Proxmox.node.NetworkEdit', {
 257                             nodename: me.nodename,
 258                             iftype: 'OVSBridge',
 259                             iface_default: find_next_iface_id('vmbr'),
 260                         });
 261                         win.on('destroy', reload);
 262                         win.show();
 263                     },
 264                 },
 265                 {
 266                     text: Proxmox.Utils.render_network_iface_type('OVSBond'),
 267                     handler: function() {
 268                         let win = Ext.create('Proxmox.node.NetworkEdit', {
 269                             nodename: me.nodename,
 270                             iftype: 'OVSBond',
 271                             iface_default: find_next_iface_id('bond'),
 272                         });
 273                         win.on('destroy', reload);
 274                         win.show();
 275                     },
 276                 },
 277                 {
 278                     text: Proxmox.Utils.render_network_iface_type('OVSIntPort'),
 279                     handler: function() {
 280                         let win = Ext.create('Proxmox.node.NetworkEdit', {
 281                             nodename: me.nodename,
 282                             iftype: 'OVSIntPort',
 283                         });
 284                         win.on('destroy', reload);
 285                         win.show();
 286                     },
 287                 },
 288             );
 289         }
 290
 291         let renderer_generator = function(fieldname) {
 292             return function(val, metaData, rec) {
 293                 let tmp = [];
 294                 if (rec.data[fieldname]) {
 295                     tmp.push(rec.data[fieldname]);
 296                 }
 297                 if (rec.data[fieldname + '6']) {
 298                     tmp.push(rec.data[fieldname + '6']);
 299                 }
 300                 return tmp.join('<br>') || '';
 301             };
 302         };
 303
 304         Ext.apply(me, {
 305             layout: 'border',
 306             tbar: [
 307                 {
 308                     text: gettext('Create'),
 309                     menu: {
 310                         plain: true,
 311                         items: menu_items,
 312                     },
 313                 }, '-',
 314                 {
 315                     text: gettext('Revert'),
 316                     itemId: 'revert',
 317                     handler: function() {
 318                         Proxmox.Utils.API2Request({
 319                             url: baseUrl,
 320                             method: 'DELETE',
 321                             waitMsgTarget: me,
 322                             callback: function() {
 323                                 reload();
 324                             },
 325                             failure: function(response, opts) {
 326                                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 327                             },
 328                         });
 329                     },
 330                 },
 331                 edit_btn,
 332                 del_btn,
 333                 '-',
 334                 apply_btn,
 335             ],
 336             items: [
 337                 {
 338                     xtype: 'gridpanel',
 339                     stateful: true,
 340                     stateId: 'grid-node-network',
 341                     store: store,
 342                     region: 'center',
 343                     border: false,
 344                     columns: [
 345                         {
 346                             header: gettext('Name'),
 347                             sortable: true,
 348                             dataIndex: 'iface',
 349                         },
 350                         {
 351                             header: gettext('Type'),
 352                             sortable: true,
 353                             width: 120,
 354                             renderer: Proxmox.Utils.render_network_iface_type,
 355                             dataIndex: 'type',
 356                         },
 357                         {
 358                             xtype: 'booleancolumn',
 359                             header: gettext('Active'),
 360                             width: 80,
 361                             sortable: true,
 362                             dataIndex: 'active',
 363                             trueText: Proxmox.Utils.yesText,
 364                             falseText: Proxmox.Utils.noText,
 365                             undefinedText: Proxmox.Utils.noText,
 366                         },
 367                         {
 368                             xtype: 'booleancolumn',
 369                             header: gettext('Autostart'),
 370                             width: 80,
 371                             sortable: true,
 372                             dataIndex: 'autostart',
 373                             trueText: Proxmox.Utils.yesText,
 374                             falseText: Proxmox.Utils.noText,
 375                             undefinedText: Proxmox.Utils.noText,
 376                         },
 377                         {
 378                             xtype: 'booleancolumn',
 379                             header: gettext('VLAN aware'),
 380                             width: 80,
 381                             sortable: true,
 382                             dataIndex: 'bridge_vlan_aware',
 383                             trueText: Proxmox.Utils.yesText,
 384                             falseText: Proxmox.Utils.noText,
 385                             undefinedText: Proxmox.Utils.noText,
 386                         },
 387                         {
 388                             header: gettext('Ports/Slaves'),
 389                             dataIndex: 'type',
 390                             renderer: render_ports,
 391                         },
 392                         {
 393                             header: gettext('Bond Mode'),
 394                             dataIndex: 'bond_mode',
 395                             renderer: Proxmox.Utils.render_bond_mode,
 396                         },
 397                         {
 398                             header: gettext('Hash Policy'),
 399                             hidden: true,
 400                             dataIndex: 'bond_xmit_hash_policy',
 401                         },
 402                         {
 403                             header: gettext('IP address'),
 404                             sortable: true,
 405                             width: 120,
 406                             hidden: true,
 407                             dataIndex: 'address',
 408                             renderer: renderer_generator('address'),
 409                         },
 410                         {
 411                             header: gettext('Subnet mask'),
 412                             width: 120,
 413                             sortable: true,
 414                             hidden: true,
 415                             dataIndex: 'netmask',
 416                             renderer: renderer_generator('netmask'),
 417                         },
 418                         {
 419                             header: gettext('CIDR'),
 420                             width: 150,
 421                             sortable: true,
 422                             dataIndex: 'cidr',
 423                             renderer: renderer_generator('cidr'),
 424                         },
 425                         {
 426                             header: gettext('Gateway'),
 427                             width: 150,
 428                             sortable: true,
 429                             dataIndex: 'gateway',
 430                             renderer: renderer_generator('gateway'),
 431                         },
 432                         {
 433                             header: gettext('Comment'),
 434                             dataIndex: 'comments',
 435                             flex: 1,
 436                             renderer: Ext.String.htmlEncode,
 437                         },
 438                     ],
 439                     listeners: {
 440                         selectionchange: set_button_status,
 441                         itemdblclick: run_editor,
 442                     },
 443                 },
 444                 {
 445                     border: false,
 446                     region: 'south',
 447                     autoScroll: true,
 448                     hidden: true,
 449                     itemId: 'changes',
 450                     tbar: [
 451                         gettext('Pending changes') + ' (' +
 452                             gettext("Either reboot or use 'Apply Configuration' (needs ifupdown2) to activate") + ')',
 453                     ],
 454                     split: true,
 455                     bodyPadding: 5,
 456                     flex: 0.6,
 457                     html: gettext("No changes"),
 458                 },
 459             ],
 460         });
 461
 462         me.callParent();
 463         reload();
 464     },
 465 });