]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - node/NetworkView.js
node/net: add onlineHelp reference to interface add windows
[proxmox-widget-toolkit.git] / node / NetworkView.js
index ad0ce36d360d97ee57c7d6a4df8cc89ee418d4ac..ec18340e33c1b7de1ac37ed902c3505ee603dc59 100644 (file)
@@ -5,6 +5,7 @@ Ext.define('proxmox-networks', {
        'bridge_ports', 'slaves',
        'address', 'netmask', 'gateway',
        'address6', 'netmask6', 'gateway6',
+       'cidr', 'cidr6',
        'comments'
     ],
     idProperty: 'iface'
@@ -15,6 +16,12 @@ Ext.define('Proxmox.node.NetworkView', {
 
     alias: ['widget.proxmoxNodeNetworkView'],
 
+    // defines what types of network devices we want to create
+    // order is always the same
+    types: ['bridge', 'bond', 'vlan', 'ovs'],
+
+    showApplyBtn: false,
+
     initComponent : function() {
        var me = this;
 
@@ -40,11 +47,14 @@ Ext.define('Proxmox.node.NetworkView', {
 
        var reload = function() {
            var changeitem = me.down('#changes');
+           var apply_btn = me.down('#apply');
+           var revert_btn = me.down('#revert');
            Proxmox.Utils.API2Request({
                url: baseUrl,
                failure: function(response, opts) {
-                   changeitem.update(gettext('Error') + ': ' + response.htmlStatus);
                    store.loadData({});
+                   Proxmox.Utils.setErrorMask(me, response.htmlStatus);
+                   changeitem.update('');
                    changeitem.setHidden(true);
                },
                success: function(response, opts) {
@@ -54,9 +64,13 @@ Ext.define('Proxmox.node.NetworkView', {
                    if (changes === undefined || changes === '') {
                        changes = gettext("No changes");
                        changeitem.setHidden(true);
+                       apply_btn.setDisabled(true);
+                       revert_btn.setDisabled(true);
                    } else {
                        changeitem.update("<pre>" + Ext.htmlEncode(changes) + "</pre>");
                        changeitem.setHidden(false);
+                       apply_btn.setDisabled(false);
+                       revert_btn.setDisabled(false);
                    }
                }
            });
@@ -112,6 +126,33 @@ Ext.define('Proxmox.node.NetworkView', {
            }
        });
 
+       var apply_btn = Ext.create('Proxmox.button.Button', {
+           text: gettext('Apply Configuration'),
+           itemId: 'apply',
+           disabled: true,
+           confirmMsg: 'Do you want to apply pending network changes?',
+           hidden: !me.showApplyBtn,
+           handler: function() {
+               Proxmox.Utils.API2Request({
+                   url: baseUrl,
+                   method: 'PUT',
+                   waitMsgTarget: me,
+                   success: function(response, opts) {
+                       var upid = response.result.data;
+
+                       var win = Ext.create('Proxmox.window.TaskProgress', {
+                           taskDone: reload,
+                           upid: upid
+                       });
+                       win.show();
+                   },
+                   failure: function(response, opts) {
+                       Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                   }
+               });
+           }
+       });
+
        var set_button_status = function() {
            var grid = me.down('gridpanel');
            var sm = grid.getSelectionModel();
@@ -121,8 +162,6 @@ Ext.define('Proxmox.node.NetworkView', {
            del_btn.setDisabled(!rec);
        };
 
-       Proxmox.Utils.monStoreErrors(me, store);
-
        var render_ports = function(value, metaData, record) {
            if (value === 'bridge') {
                return record.data.bridge_ports;
@@ -145,78 +184,126 @@ Ext.define('Proxmox.node.NetworkView', {
            return prefix + next.toString();
        };
 
+       var menu_items = [];
+
+       if (me.types.indexOf('bridge') !== -1) {
+           menu_items.push({
+               text: Proxmox.Utils.render_network_iface_type('bridge'),
+               handler: function() {
+                   var win = Ext.create('Proxmox.node.NetworkEdit', {
+                       nodename: me.nodename,
+                       iftype: 'bridge',
+                       iface_default: find_next_iface_id('vmbr'),
+                       onlineHelp: 'sysadmin_network_configuration',
+                   });
+                   win.on('destroy', reload);
+                   win.show();
+               }
+           });
+       }
+
+       if (me.types.indexOf('bond') !== -1) {
+           menu_items.push({
+               text: Proxmox.Utils.render_network_iface_type('bond'),
+               handler: function() {
+                   var win = Ext.create('Proxmox.node.NetworkEdit', {
+                       nodename: me.nodename,
+                       iftype: 'bond',
+                       iface_default: find_next_iface_id('bond'),
+                       onlineHelp: 'sysadmin_network_configuration',
+                   });
+                   win.on('destroy', reload);
+                   win.show();
+               }
+           });
+       }
+
+       if (me.types.indexOf('vlan') !== -1) {
+           menu_items.push({
+               text: Proxmox.Utils.render_network_iface_type('vlan'),
+               handler: function() {
+                   var win = Ext.create('Proxmox.node.NetworkEdit', {
+                       nodename: me.nodename,
+                       iftype: 'vlan',
+                       iface_default: 'interfaceX.1',
+                       onlineHelp: 'sysadmin_network_configuration',
+                   });
+                   win.on('destroy', reload);
+                   win.show();
+               }
+           });
+       }
+
+       if (me.types.indexOf('ovs') !== -1) {
+           if (menu_items.length > 0) {
+               menu_items.push({ xtype: 'menuseparator' });
+           }
+
+           menu_items.push(
+               {
+                   text: Proxmox.Utils.render_network_iface_type('OVSBridge'),
+                   handler: function() {
+                       var win = Ext.create('Proxmox.node.NetworkEdit', {
+                           nodename: me.nodename,
+                           iftype: 'OVSBridge',
+                           iface_default: find_next_iface_id('vmbr')
+                       });
+                       win.on('destroy', reload);
+                       win.show();
+                   }
+               },
+               {
+                   text: Proxmox.Utils.render_network_iface_type('OVSBond'),
+                   handler: function() {
+                       var win = Ext.create('Proxmox.node.NetworkEdit', {
+                           nodename: me.nodename,
+                           iftype: 'OVSBond',
+                           iface_default: find_next_iface_id('bond')
+                       });
+                       win.on('destroy', reload);
+                       win.show();
+                   }
+               },
+               {
+                   text: Proxmox.Utils.render_network_iface_type('OVSIntPort'),
+                   handler: function() {
+                       var win = Ext.create('Proxmox.node.NetworkEdit', {
+                           nodename: me.nodename,
+                           iftype: 'OVSIntPort'
+                       });
+                       win.on('destroy', reload);
+                       win.show();
+                   }
+               }
+           );
+       }
+
+       var renderer_generator = function(fieldname) {
+           return function(val, metaData, rec) {
+               var tmp = [];
+               if (rec.data[fieldname]) {
+                   tmp.push(rec.data[fieldname]);
+               }
+               if (rec.data[fieldname + '6']) {
+                   tmp.push(rec.data[fieldname + '6']);
+               }
+               return tmp.join('<br>') || '';
+           };
+       };
+
        Ext.apply(me, {
            layout: 'border',
            tbar: [
                {
                    text: gettext('Create'),
-                   menu: new Ext.menu.Menu({
+                   menu: {
                        plain: true,
-                       items: [
-                           {
-                               text: Proxmox.Utils.render_network_iface_type('bridge'),
-                               handler: function() {
-                                   var win = Ext.create('Proxmox.node.NetworkEdit', {
-                                       nodename: me.nodename,
-                                       iftype: 'bridge',
-                                       iface_default: find_next_iface_id('vmbr')
-                                   });
-                                   win.on('destroy', reload);
-                                   win.show();
-                               }
-                           },
-                           {
-                               text: Proxmox.Utils.render_network_iface_type('bond'),
-                               handler: function() {
-                                   var win = Ext.create('Proxmox.node.NetworkEdit', {
-                                       nodename: me.nodename,
-                                       iftype: 'bond',
-                                       iface_default: find_next_iface_id('bond')
-                                   });
-                                   win.on('destroy', reload);
-                                   win.show();
-                               }
-                           }, '-',
-                           {
-                               text: Proxmox.Utils.render_network_iface_type('OVSBridge'),
-                               handler: function() {
-                                   var win = Ext.create('Proxmox.node.NetworkEdit', {
-                                       nodename: me.nodename,
-                                       iftype: 'OVSBridge',
-                                       iface_default: find_next_iface_id('vmbr')
-                                   });
-                                   win.on('destroy', reload);
-                                   win.show();
-                               }
-                           },
-                           {
-                               text: Proxmox.Utils.render_network_iface_type('OVSBond'),
-                               handler: function() {
-                                   var win = Ext.create('Proxmox.node.NetworkEdit', {
-                                       nodename: me.nodename,
-                                       iftype: 'OVSBond',
-                                       iface_default: find_next_iface_id('bond')
-                                   });
-                                   win.on('destroy', reload);
-                                   win.show();
-                               }
-                           },
-                           {
-                               text: Proxmox.Utils.render_network_iface_type('OVSIntPort'),
-                               handler: function() {
-                                   var win = Ext.create('Proxmox.node.NetworkEdit', {
-                                       nodename: me.nodename,
-                                       iftype: 'OVSIntPort'
-                                   });
-                                   win.on('destroy', reload);
-                                   win.show();
-                               }
-                           }
-                       ]
-                   })
-               }, ' ',
+                       items: menu_items
+                   }
+               }, '-',
                {
                    text: gettext('Revert'),
+                   itemId: 'revert',
                    handler: function() {
                        Proxmox.Utils.API2Request({
                            url: baseUrl,
@@ -232,7 +319,9 @@ Ext.define('Proxmox.node.NetworkView', {
                    }
                },
                edit_btn,
-               del_btn
+               del_btn,
+               '-',
+               apply_btn
            ],
            items: [
                {
@@ -245,14 +334,13 @@ Ext.define('Proxmox.node.NetworkView', {
                    columns: [
                        {
                            header: gettext('Name'),
-                           width: 100,
                            sortable: true,
                            dataIndex: 'iface'
                        },
                        {
                            header: gettext('Type'),
-                           width: 100,
                            sortable: true,
+                           width: 120,
                            renderer: Proxmox.Utils.render_network_iface_type,
                            dataIndex: 'type'
                        },
@@ -262,9 +350,9 @@ Ext.define('Proxmox.node.NetworkView', {
                            width: 80,
                            sortable: true,
                            dataIndex: 'active',
-                           trueText: 'Yes',
-                           falseText: 'No',
-                           undefinedText: 'No'
+                           trueText: Proxmox.Utils.yesText,
+                           falseText: Proxmox.Utils.noText,
+                           undefinedText: Proxmox.Utils.noText,
                        },
                        {
                            xtype: 'booleancolumn',
@@ -272,52 +360,69 @@ Ext.define('Proxmox.node.NetworkView', {
                            width: 80,
                            sortable: true,
                            dataIndex: 'autostart',
-                           trueText: 'Yes',
-                           falseText: 'No',
-                           undefinedText: 'No'
+                           trueText: Proxmox.Utils.yesText,
+                           falseText: Proxmox.Utils.noText,
+                           undefinedText: Proxmox.Utils.noText
+                       },
+                       {
+                           xtype: 'booleancolumn',
+                           header: gettext('VLAN aware'),
+                           width: 80,
+                           sortable: true,
+                           dataIndex: 'bridge_vlan_aware',
+                           trueText: Proxmox.Utils.yesText,
+                           falseText: Proxmox.Utils.noText,
+                           undefinedText: Proxmox.Utils.noText
                        },
                        {
                            header: gettext('Ports/Slaves'),
                            dataIndex: 'type',
                            renderer: render_ports
                        },
+                       {
+                           header: gettext('Bond Mode'),
+                           dataIndex: 'bond_mode',
+                           renderer: Proxmox.Utils.render_bond_mode,
+                       },
+                       {
+                           header: gettext('Hash Policy'),
+                           hidden: true,
+                           dataIndex: 'bond_xmit_hash_policy',
+                       },
                        {
                            header: gettext('IP address'),
                            sortable: true,
+                           width: 120,
+                           hidden: true,
                            dataIndex: 'address',
-                           renderer: function(value, metaData, rec) {
-                               if (rec.data.address && rec.data.address6) {
-                                   return rec.data.address + "<br>"
-                                          + rec.data.address6 + '/' + rec.data.netmask6;
-                               } else if (rec.data.address6) {
-                                   return rec.data.address6 + '/' + rec.data.netmask6;
-                               } else {
-                                   return rec.data.address;
-                               }
-                           }
+                           renderer: renderer_generator('address'),
                        },
                        {
                            header: gettext('Subnet mask'),
+                           width: 120,
                            sortable: true,
-                           dataIndex: 'netmask'
+                           hidden: true,
+                           dataIndex: 'netmask',
+                           renderer: renderer_generator('netmask'),
+                       },
+                       {
+                           header: gettext('CIDR'),
+                           width: 120,
+                           sortable: true,
+                           dataIndex: 'cidr',
+                           renderer: renderer_generator('cidr'),
                        },
                        {
                            header: gettext('Gateway'),
+                           width: 120,
                            sortable: true,
                            dataIndex: 'gateway',
-                           renderer: function(value, metaData, rec) {
-                               if (rec.data.gateway && rec.data.gateway6) {
-                                   return rec.data.gateway + "<br>" + rec.data.gateway6;
-                               } else if (rec.data.gateway6) {
-                                   return rec.data.gateway6;
-                               } else {
-                                   return rec.data.gateway;
-                               }
-                           }
+                           renderer: renderer_generator('gateway'),
                        },
                        {
                            header: gettext('Comment'),
                            dataIndex: 'comments',
+                           flex: 1,
                            renderer: Ext.String.htmlEncode
                        }
                    ],
@@ -334,7 +439,7 @@ Ext.define('Proxmox.node.NetworkView', {
                    itemId: 'changes',
                    tbar: [
                        gettext('Pending changes') + ' (' +
-                           gettext('Please reboot to activate changes') + ')'
+                           gettext("Either reboot or use 'Apply Configuration' (needs ifupdown2) to activate") + ')'
                    ],
                    split: true,
                    bodyPadding: 5,
@@ -342,11 +447,9 @@ Ext.define('Proxmox.node.NetworkView', {
                    html: gettext("No changes")
                }
            ],
-           listeners: {
-               activate: reload
-           }
        });
 
        me.callParent();
+       reload();
     }
 });