node/net: add onlineHelp reference to interface add windows

[proxmox-widget-toolkit.git] / node / NetworkView.js

diff --git a/node/NetworkView.js b/node/NetworkView.js
index 90be36fca9a4462479a4468e208f1e521d58d1de..ec18340e33c1b7de1ac37ed902c3505ee603dc59 100644 (file)
--- a/node/NetworkView.js
+++ b/node/NetworkView.js
@@ -5,6 +5,7 @@ Ext.define('proxmox-networks', {
        'bridge_ports', 'slaves',
        'address', 'netmask', 'gateway',
        'address6', 'netmask6', 'gateway6',
+       'cidr', 'cidr6',
        'comments'
     ],
     idProperty: 'iface'
@@ -17,7 +18,9 @@ Ext.define('Proxmox.node.NetworkView', {
 
     // defines what types of network devices we want to create
     // order is always the same
-    types: ['bridge', 'bond', 'ovs'],
+    types: ['bridge', 'bond', 'vlan', 'ovs'],
+
+    showApplyBtn: false,
 
     initComponent : function() {
        var me = this;
@@ -44,6 +47,8 @@ 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) {
@@ -59,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);
                    }
                }
            });
@@ -117,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();
@@ -157,7 +193,8 @@ Ext.define('Proxmox.node.NetworkView', {
                    var win = Ext.create('Proxmox.node.NetworkEdit', {
                        nodename: me.nodename,
                        iftype: 'bridge',
-                       iface_default: find_next_iface_id('vmbr')
+                       iface_default: find_next_iface_id('vmbr'),
+                       onlineHelp: 'sysadmin_network_configuration',
                    });
                    win.on('destroy', reload);
                    win.show();
@@ -172,7 +209,24 @@ Ext.define('Proxmox.node.NetworkView', {
                    var win = Ext.create('Proxmox.node.NetworkEdit', {
                        nodename: me.nodename,
                        iftype: 'bond',
-                       iface_default: find_next_iface_id('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();
@@ -224,6 +278,19 @@ Ext.define('Proxmox.node.NetworkView', {
            );
        }
 
+       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: [
@@ -233,9 +300,10 @@ Ext.define('Proxmox.node.NetworkView', {
                        plain: true,
                        items: menu_items
                    }
-               }, ' ',
+               }, '-',
                {
                    text: gettext('Revert'),
+                   itemId: 'revert',
                    handler: function() {
                        Proxmox.Utils.API2Request({
                            url: baseUrl,
@@ -251,7 +319,9 @@ Ext.define('Proxmox.node.NetworkView', {
                    }
                },
                edit_btn,
-               del_btn
+               del_btn,
+               '-',
+               apply_btn
            ],
            items: [
                {
@@ -280,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',
@@ -290,9 +360,9 @@ 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',
@@ -309,42 +379,45 @@ Ext.define('Proxmox.node.NetworkView', {
                            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'),
@@ -366,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,