implement GUI to manage ha groups

www/manager/Makefile

@@ -167,6 +167,7 @@ JSSRC= 				                 	\
 	storage/ZFSPoolEdit.js				\
 	ha/StatusView.js				\
 	ha/Resources.js					\
+	ha/GroupEdit.js					\
 	ha/Groups.js					\
 	ha/Fencing.js					\
 	ha/Config.js					\

www/manager/ha/GroupEdit.js

@@ -0,0 +1,110 @@
+Ext.define('PVE.ha.GroupInputPanel', {
+    extend: 'PVE.panel.InputPanel',
+
+    groupId: undefined,
+    
+    onGetValues: function(values) {
+	var me = this;
+
+	if (me.create) {
+	    values.type = 'group';
+	}
+
+	return values;
+    },
+
+    initComponent : function() {
+	var me = this;
+
+	me.column1 = [
+	    {
+		xtype: me.create ? 'textfield' : 'displayfield',
+		name: 'group',
+		height: 22, // hack: set same height as text fields
+		value: me.groupId || '',
+		fieldLabel: 'ID',
+		vtype: 'StorageId',
+		allowBlank: false
+	    },
+	    {
+		xtype: 'PVE.form.NodeSelector',
+		name: 'nodes',
+		fieldLabel: gettext('Nodes'),
+		allowBlank: false,
+		multiSelect: true,
+		autoSelect: false
+	    }
+	];
+
+	me.column2 = [
+	    {
+		xtype: 'pvecheckbox',
+		name: 'restricted',
+		uncheckedValue: 0,
+		fieldLabel: gettext('restricted')
+	    },
+	    {
+		xtype: 'pvecheckbox',
+		name: 'nofailback',
+		uncheckedValue: 0,
+		fieldLabel: gettext('nofailback')
+	    },
+	];
+
+	me.columnB = [
+	    {
+		xtype: 'textfield',
+		name: 'comment',
+		fieldLabel: gettext('Comment')
+	    }
+	];
+	
+	me.callParent();
+    }
+});
+
+Ext.define('PVE.ha.GroupEdit', {
+    extend: 'PVE.window.Edit',
+
+    groupId: undefined,
+
+    initComponent : function() {
+	var me = this;
+ 
+	me.create = !me.groupId;
+
+	if (me.create) {
+            me.url = '/api2/extjs/cluster/ha/groups';
+            me.method = 'POST';
+        } else {
+            me.url = '/api2/extjs/cluster/ha/groups/' + me.groupId;
+            me.method = 'PUT';
+        }
+
+	var ipanel = Ext.create('PVE.ha.GroupInputPanel', {
+	    create: me.create,
+	    groupId: me.groupId
+	});
+
+	Ext.apply(me, {
+            subject: gettext('HA Groups'),
+	    items: [ ipanel ]
+	});
+	
+	me.callParent();
+
+	if (!me.create) {
+	    me.load({
+		success:  function(response, options) {
+		    var values = response.result.data;
+
+		    if (values.nodes) {
+			values.nodes = values.nodes.split(',');
+		    }
+
+		    ipanel.setValues(values);
+		}
+	    });
+	}
+    }
+});

www/manager/ha/Groups.js

@@ -23,6 +23,44 @@ Ext.define('PVE.ha.GroupsView', {
 
 	var sm = Ext.create('Ext.selection.RowModel', {});
 
+	var run_editor = function() {
+	    var rec = sm.getSelection()[0];
+
+            var win = Ext.create('PVE.ha.GroupEdit',{
+                groupId: rec.data.group
+            });
+            win.on('destroy', reload);
+            win.show();
+	};
+
+	var remove_btn = new PVE.button.Button({
+	    text: gettext('Remove'),
+	    disabled: true,
+	    selModel: sm,
+	    handler: function(btn, event, rec) {
+		var group = rec.data.group;
+
+		PVE.Utils.API2Request({
+		    url: '/cluster/ha/groups/' + group,
+		    method: 'DELETE',
+		    waitMsgTarget: me,
+		    callback: function() {
+			reload();
+		    },
+		    failure: function (response, opts) {
+			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		    }
+		});
+	    }
+	});
+	
+	var edit_btn = new PVE.button.Button({
+	    text: gettext('Edit'),
+	    disabled: true,
+	    selModel: sm,
+	    handler: run_editor
+	});
+
 	Ext.apply(me, {
 	    store: store,
 	    selModel: sm,
@@ -30,6 +68,17 @@ Ext.define('PVE.ha.GroupsView', {
 	    viewConfig: {
 		trackOver: false
 	    },
+	    tbar: [
+		{
+		    text: gettext('Create'),
+		    handler: function() {
+			var win = Ext.create('PVE.ha.GroupEdit',{});
+			win.on('destroy', reload);
+			win.show();
+		    }
+		},
+		edit_btn, remove_btn
+	    ],
 	    columns: [
 		{
 		    header: gettext('Group'),
@@ -53,12 +102,12 @@ Ext.define('PVE.ha.GroupsView', {
 		},
 		{
 		    header: gettext('Nodes'),
-		    width: 500,
+		    flex: 1,
 		    sortable: false,
 		    dataIndex: 'nodes'
 		},
 		{
-		    header: gettext('Description'),
+		    header: gettext('Comment'),
 		    flex: 1,
 		    dataIndex: 'comment'
 		}