[pve-manager.git] / www / manager6 / node / NetworkView.js

Ext.define('PVE.node.NetworkView', {
    extend: 'Ext.panel.Panel',

    alias: ['widget.pveNodeNetworkView'],

    onlineHelp: 'sysadmin_network_configuration',

    initComponent : function() {
	var me = this;

	var nodename = me.pveSelNode.data.node;
	if (!nodename) {
	    throw "no node name specified";
	}

	var store = Ext.create('Ext.data.Store', {
	    model: 'pve-networks',
	    proxy: {
                type: 'pve',
                url: "/api2/json/nodes/" + nodename + "/network"
	    },
	    sorters: [
		{
		    property : 'iface',
		    direction: 'ASC'
		}
	    ]
	});

	var reload = function() {
	    var changeitem = me.down('#changes');
	    PVE.Utils.API2Request({
		url: '/nodes/' + nodename + '/network',
		failure: function(response, opts) {
		    changeitem.update(gettext('Error') + ': ' + response.htmlStatus);
		    store.loadData({});
		},
		success: function(response, opts) {
		    var result = Ext.decode(response.responseText);
		    store.loadData(result.data);
		    var changes = result.changes;
		    if (changes === undefined || changes === '') {
			changes = gettext("No changes");
		    }
		    changeitem.update("<pre>" + Ext.htmlEncode(changes) + "</pre>");
		}
	    });
	};

	var run_editor = function() {
	    var grid = me.down('gridpanel');
	    var sm = grid.getSelectionModel();
	    var rec = sm.getSelection()[0];
	    if (!rec) {
		return;
	    }

	    var win = Ext.create('PVE.node.NetworkEdit', {
		pveSelNode: me.pveSelNode,
		iface: rec.data.iface,
		iftype: rec.data.type
	    });
	    win.show();
	    win.on('destroy', reload);
	};

	var edit_btn = new Ext.Button({
	    text: gettext('Edit'),
	    disabled: true,
	    handler: run_editor
	});

	var del_btn = new Ext.Button({
	    text: gettext('Remove'),
	    disabled: true,
	    handler: function(){
		var grid = me.down('gridpanel');
		var sm = grid.getSelectionModel();
		var rec = sm.getSelection()[0];
		if (!rec) {
		    return;
		}

		var iface = rec.data.iface;

		PVE.Utils.API2Request({
		    url: '/nodes/' + nodename + '/network/' + iface,
		    method: 'DELETE',
		    waitMsgTarget: me,
		    callback: function() {
			reload();
		    },
		    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();
	    var rec = sm.getSelection()[0];

	    edit_btn.setDisabled(!rec);
	    del_btn.setDisabled(!rec);
	};

	PVE.Utils.monStoreErrors(me, store);

	var render_ports = function(value, metaData, record) {
	    if (value === 'bridge') {
		return record.data.bridge_ports;
	    } else if (value === 'bond') {
		return record.data.slaves;
	    } else if (value === 'OVSBridge') {
		return record.data.ovs_ports;
	    } else if (value === 'OVSBond') {
		return record.data.ovs_bonds;
	    }
	};

	var find_next_iface_id = function(prefix) {
	    var next;
	    for (next = 0; next <= 9999; next++) {
		if (!store.getById(prefix + next.toString())) {
		    break;
		}
	    }
	    return prefix + next.toString();
	};

	Ext.apply(me, {
	    layout: 'border',
	    tbar: [
		{
		    text: gettext('Create'),
		    menu: new Ext.menu.Menu({
			plain: true,
			items: [
			    {
				text: PVE.Utils.render_network_iface_type('bridge'),
				handler: function() {
				    var win = Ext.create('PVE.node.NetworkEdit', {
					pveSelNode: me.pveSelNode,
					iftype: 'bridge',
					iface_default: find_next_iface_id('vmbr')
				    });
				    win.on('destroy', reload);
				    win.show();
				}
			    },
			    {
				text: PVE.Utils.render_network_iface_type('bond'),
				handler: function() {
				    var win = Ext.create('PVE.node.NetworkEdit', {
					pveSelNode: me.pveSelNode,
					iftype: 'bond',
					iface_default: find_next_iface_id('bond')
				    });
				    win.on('destroy', reload);
				    win.show();
				}
			    }, '-',
			    {
				text: PVE.Utils.render_network_iface_type('OVSBridge'),
				handler: function() {
				    var win = Ext.create('PVE.node.NetworkEdit', {
					pveSelNode: me.pveSelNode,
					iftype: 'OVSBridge',
					iface_default: find_next_iface_id('vmbr')
				    });
				    win.on('destroy', reload);
				    win.show();
				}
			    },
			    {
				text: PVE.Utils.render_network_iface_type('OVSBond'),
				handler: function() {
				    var win = Ext.create('PVE.node.NetworkEdit', {
					pveSelNode: me.pveSelNode,
					iftype: 'OVSBond',
					iface_default: find_next_iface_id('bond')
				    });
				    win.on('destroy', reload);
				    win.show();
				}
			    },
			    {
				text: PVE.Utils.render_network_iface_type('OVSIntPort'),
				handler: function() {
				    var win = Ext.create('PVE.node.NetworkEdit', {
					pveSelNode: me.pveSelNode,
					iftype: 'OVSIntPort'
				    });
				    win.on('destroy', reload);
				    win.show();
				}
			    }
			]
		    })
		}, ' ', 
		{
		    text: gettext('Revert'),
		    handler: function() {
			PVE.Utils.API2Request({
			    url: '/nodes/' + nodename + '/network',
			    method: 'DELETE',
			    waitMsgTarget: me,
			    callback: function() {
				reload();
			    },
			    failure: function(response, opts) {
				Ext.Msg.alert(gettext('Error'), response.htmlStatus);
			    }
			});
		    }
		},
		edit_btn, 
		del_btn
	    ],
	    items: [
		{
		    xtype: 'gridpanel',
		    stateful: false,
		    store: store,
		    region: 'center',
		    border: false,
		    columns: [
			{
			    header: gettext('Name'),
			    width: 100,
			    sortable: true,
			    dataIndex: 'iface'
			},
			{
			    header: gettext('Type'),
			    width: 100,
			    sortable: true,
			    renderer: PVE.Utils.render_network_iface_type,
			    dataIndex: 'type'
			},
			{
			    xtype: 'booleancolumn', 
			    header: gettext('Active'),
			    width: 80,
			    sortable: true,
			    dataIndex: 'active',
			    trueText: 'Yes',
			    falseText: 'No',
			    undefinedText: 'No'
			},
			{
			    xtype: 'booleancolumn', 
			    header: gettext('Autostart'),
			    width: 80,
			    sortable: true,
			    dataIndex: 'autostart',
			    trueText: 'Yes',
			    falseText: 'No',
			    undefinedText: 'No'
			},
			{
			    header: gettext('Ports/Slaves'),
			    dataIndex: 'type',
			    renderer: render_ports
			},
			{
			    header: gettext('IP address'),
			    sortable: 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;
				}
			    }
			},
			{
			    header: gettext('Subnet mask'),
			    sortable: true,
			    dataIndex: 'netmask'
			},
			{
			    header: gettext('Gateway'),
			    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;
				}
			    }
			},
			{
			    header: gettext('Comment'),
			    dataIndex: 'comments',
			    renderer: Ext.String.htmlEncode
			}
		    ],
		    listeners: {
			selectionchange: set_button_status,
			itemdblclick: run_editor
		    }
		},
		{
		    border: false,
		    region: 'south',
		    autoScroll: true,
		    itemId: 'changes',
		    tbar: [ 
			gettext('Pending changes') + ' (' +
			    gettext('Please reboot to activate changes') + ')'
		    ],
		    split: true, 
		    bodyPadding: 5,
		    flex: 0.6,
		    html: gettext("No changes")
		}
	    ],
	    listeners: {
		activate: reload
	    }
	});

	me.callParent();
    }
}, function() {

    Ext.define('pve-networks', {
	extend: 'Ext.data.Model',
	fields: [ 
	    'iface', 'type', 'active', 'autostart',
	    'bridge_ports', 'slaves',
	    'address', 'netmask', 'gateway',
	    'address6', 'netmask6', 'gateway6',
	    'comments'
	],
	idProperty: 'iface'
    });

});
Commit	Line	Data
7d7862e2 DM	1	Ext.define('PVE.node.NetworkView', {
	2	extend: 'Ext.panel.Panel',
	3
	4	alias: ['widget.pveNodeNetworkView'],
	5
ba93a9c6 DC	6	onlineHelp: 'sysadmin_network_configuration',
ba93a9c6 DC	7
7d7862e2 DM	8	initComponent : function() {
	9	var me = this;
	10
	11	var nodename = me.pveSelNode.data.node;
	12	if (!nodename) {
	13	throw "no node name specified";
	14	}
	15
	16	var store = Ext.create('Ext.data.Store', {
	17	model: 'pve-networks',
	18	proxy: {
	19	type: 'pve',
	20	url: "/api2/json/nodes/" + nodename + "/network"
	21	},
	22	sorters: [
	23	{
	24	property : 'iface',
	25	direction: 'ASC'
	26	}
	27	]
	28	});
	29
	30	var reload = function() {
	31	var changeitem = me.down('#changes');
	32	PVE.Utils.API2Request({
	33	url: '/nodes/' + nodename + '/network',
	34	failure: function(response, opts) {
	35	changeitem.update(gettext('Error') + ': ' + response.htmlStatus);
	36	store.loadData({});
	37	},
	38	success: function(response, opts) {
	39	var result = Ext.decode(response.responseText);
	40	store.loadData(result.data);
	41	var changes = result.changes;
	42	if (changes === undefined \|\| changes === '') {
	43	changes = gettext("No changes");
	44	}
	45	changeitem.update("<pre>" + Ext.htmlEncode(changes) + "</pre>");
	46	}
	47	});
	48	};
	49
	50	var run_editor = function() {
	51	var grid = me.down('gridpanel');
	52	var sm = grid.getSelectionModel();
	53	var rec = sm.getSelection()[0];
	54	if (!rec) {
	55	return;
	56	}
	57
	58	var win = Ext.create('PVE.node.NetworkEdit', {
	59	pveSelNode: me.pveSelNode,
	60	iface: rec.data.iface,
	61	iftype: rec.data.type
	62	});
	63	win.show();
	64	win.on('destroy', reload);
	65	};
	66
	67	var edit_btn = new Ext.Button({
	68	text: gettext('Edit'),
	69	disabled: true,
	70	handler: run_editor
	71	});
72
73	var del_btn = new Ext.Button({
74	text: gettext('Remove'),
75	disabled: true,
76	handler: function(){
77	var grid = me.down('gridpanel');
78	var sm = grid.getSelectionModel();
79	var rec = sm.getSelection()[0];
80	if (!rec) {
81	return;
82	}
83
84	var iface = rec.data.iface;
85
86	PVE.Utils.API2Request({
87	url: '/nodes/' + nodename + '/network/' + iface,
88	method: 'DELETE',
89	waitMsgTarget: me,
90	callback: function() {
91	reload();
92	},
93	failure: function(response, opts) {
94	Ext.Msg.alert(gettext('Error'), response.htmlStatus);
95	}
96	});
97	}
98	});
99
100	var set_button_status = function() {
101	var grid = me.down('gridpanel');
102	var sm = grid.getSelectionModel();
103	var rec = sm.getSelection()[0];
104
105	edit_btn.setDisabled(!rec);
106	del_btn.setDisabled(!rec);
107	};
108
109	PVE.Utils.monStoreErrors(me, store);
110
111	var render_ports = function(value, metaData, record) {
112	if (value === 'bridge') {
113	return record.data.bridge_ports;
114	} else if (value === 'bond') {
115	return record.data.slaves;
116	} else if (value === 'OVSBridge') {
117	return record.data.ovs_ports;
118	} else if (value === 'OVSBond') {
119	return record.data.ovs_bonds;
120	}
121	};
122
123	var find_next_iface_id = function(prefix) {
124	var next;
125	for (next = 0; next <= 9999; next++) {
126	if (!store.getById(prefix + next.toString())) {
127	break;
128	}
129	}
130	return prefix + next.toString();
131	};
132
133	Ext.apply(me, {
134	layout: 'border',
135	tbar: [
136	{
137	text: gettext('Create'),
138	menu: new Ext.menu.Menu({
139	plain: true,
140	items: [
141	{
142	text: PVE.Utils.render_network_iface_type('bridge'),
143	handler: function() {
144	var win = Ext.create('PVE.node.NetworkEdit', {
145	pveSelNode: me.pveSelNode,
146	iftype: 'bridge',
147	iface_default: find_next_iface_id('vmbr')
148	});
149	win.on('destroy', reload);
150	win.show();
151	}
152	},
153	{
154	text: PVE.Utils.render_network_iface_type('bond'),
155	handler: function() {
156	var win = Ext.create('PVE.node.NetworkEdit', {
157	pveSelNode: me.pveSelNode,
158	iftype: 'bond',
159	iface_default: find_next_iface_id('bond')
160	});
161	win.on('destroy', reload);
162	win.show();
163	}
164	}, '-',
165	{
166	text: PVE.Utils.render_network_iface_type('OVSBridge'),
167	handler: function() {
168	var win = Ext.create('PVE.node.NetworkEdit', {
169	pveSelNode: me.pveSelNode,
170	iftype: 'OVSBridge',
171	iface_default: find_next_iface_id('vmbr')
172	});
173	win.on('destroy', reload);
174	win.show();
175	}
176	},
177	{
178	text: PVE.Utils.render_network_iface_type('OVSBond'),
179	handler: function() {
180	var win = Ext.create('PVE.node.NetworkEdit', {
181	pveSelNode: me.pveSelNode,
182	iftype: 'OVSBond',
183	iface_default: find_next_iface_id('bond')
184	});
185	win.on('destroy', reload);
186	win.show();
187	}
188	},
189	{
190	text: PVE.Utils.render_network_iface_type('OVSIntPort'),
191	handler: function() {
192	var win = Ext.create('PVE.node.NetworkEdit', {
193	pveSelNode: me.pveSelNode,
194	iftype: 'OVSIntPort'
195	});
196	win.on('destroy', reload);
197	win.show();
198	}
199	}
200	]
201	})
202	}, ' ',
203	{
185a77e5	204	text: gettext('Revert'),
7d7862e2 DM	205	handler: function() {
	206	PVE.Utils.API2Request({
	207	url: '/nodes/' + nodename + '/network',
	208	method: 'DELETE',
	209	waitMsgTarget: me,
	210	callback: function() {
	211	reload();
	212	},
	213	failure: function(response, opts) {
	214	Ext.Msg.alert(gettext('Error'), response.htmlStatus);
	215	}
	216	});
	217	}
	218	},
	219	edit_btn,
	220	del_btn
	221	],
	222	items: [
	223	{
	224	xtype: 'gridpanel',
	225	stateful: false,
	226	store: store,
	227	region: 'center',
	228	border: false,
	229	columns: [
	230	{
	231	header: gettext('Name'),
	232	width: 100,
	233	sortable: true,
	234	dataIndex: 'iface'
	235	},
	236	{
	237	header: gettext('Type'),
	238	width: 100,
	239	sortable: true,
	240	renderer: PVE.Utils.render_network_iface_type,
	241	dataIndex: 'type'
	242	},
	243	{
	244	xtype: 'booleancolumn',
	245	header: gettext('Active'),
	246	width: 80,
	247	sortable: true,
	248	dataIndex: 'active',
	249	trueText: 'Yes',
	250	falseText: 'No',
	251	undefinedText: 'No'
	252	},
	253	{
	254	xtype: 'booleancolumn',
	255	header: gettext('Autostart'),
	256	width: 80,
	257	sortable: true,
	258	dataIndex: 'autostart',
	259	trueText: 'Yes',
	260	falseText: 'No',
	261	undefinedText: 'No'
	262	},
	263	{
	264	header: gettext('Ports/Slaves'),
	265	dataIndex: 'type',
	266	renderer: render_ports
	267	},
	268	{
269	header: gettext('IP address'),
270	sortable: true,
271	dataIndex: 'address',
272	renderer: function(value, metaData, rec) {
273	if (rec.data.address && rec.data.address6) {
274	return rec.data.address + "<br>"
275	+ rec.data.address6 + '/' + rec.data.netmask6;
276	} else if (rec.data.address6) {
277	return rec.data.address6 + '/' + rec.data.netmask6;
278	} else {
279	return rec.data.address;
280	}
281	}
282	},
283	{
284	header: gettext('Subnet mask'),
285	sortable: true,
286	dataIndex: 'netmask'
287	},
288	{
289	header: gettext('Gateway'),
290	sortable: true,
291	dataIndex: 'gateway',
292	renderer: function(value, metaData, rec) {
293	if (rec.data.gateway && rec.data.gateway6) {
294	return rec.data.gateway + "<br>" + rec.data.gateway6;
295	} else if (rec.data.gateway6) {
296	return rec.data.gateway6;
297	} else {
298	return rec.data.gateway;
299	}
300	}
1de934eb DC	301	},
	302	{
	303	header: gettext('Comment'),
	304	dataIndex: 'comments',
	305	renderer: Ext.String.htmlEncode
7d7862e2 DM	306	}
	307	],
	308	listeners: {
	309	selectionchange: set_button_status,
	310	itemdblclick: run_editor
	311	}
	312	},
	313	{
	314	border: false,
	315	region: 'south',
	316	autoScroll: true,
	317	itemId: 'changes',
	318	tbar: [
	319	gettext('Pending changes') + ' (' +
	320	gettext('Please reboot to activate changes') + ')'
	321	],
	322	split: true,
	323	bodyPadding: 5,
	324	flex: 0.6,
	325	html: gettext("No changes")
	326	}
	327	],
	328	listeners: {
55bc7923	329	activate: reload
7d7862e2 DM	330	}
	331	});
	332
	333	me.callParent();
	334	}
	335	}, function() {
	336
	337	Ext.define('pve-networks', {
	338	extend: 'Ext.data.Model',
	339	fields: [
	340	'iface', 'type', 'active', 'autostart',
	341	'bridge_ports', 'slaves',
	342	'address', 'netmask', 'gateway',
0aa52e14 DC	343	'address6', 'netmask6', 'gateway6',
0aa52e14 DC	344	'comments'
7d7862e2 DM	345	],
	346	idProperty: 'iface'
	347	});
	348
	349	});
	350