use Checkbox from widget toolkit

[pve-manager.git] / www / manager6 / ha / GroupEdit.js

diff --git a/www/manager6/ha/GroupEdit.js b/www/manager6/ha/GroupEdit.js
index 0d9c3c594b1b03fdef73bc0b416ff5330f5c6399..623b1dc75c5db6292d4e6dee58ab97ceaee8126b 100644 (file)
--- a/www/manager6/ha/GroupEdit.js
+++ b/www/manager6/ha/GroupEdit.js
@@ -1,12 +1,13 @@
 Ext.define('PVE.ha.GroupInputPanel', {
     extend: 'PVE.panel.InputPanel',
+    onlineHelp: 'ha_manager_groups',
 
     groupId: undefined,
-    
+
     onGetValues: function(values) {
        var me = this;
 
-       if (me.create) {
+       if (me.isCreate) {
            values.type = 'group';
        }
 
@@ -16,34 +17,160 @@ Ext.define('PVE.ha.GroupInputPanel', {
     initComponent : function() {
        var me = this;
 
+       var update_nodefield, update_node_selection;
+
+       var sm = Ext.create('Ext.selection.CheckboxModel', {
+           mode: 'SIMPLE',
+           listeners: {
+               selectionchange: function(model, selected) {
+                   update_nodefield(selected);
+               }
+           }
+       });
+
+       // use already cached data to avoid an API call
+       var data = PVE.data.ResourceStore.getNodes();
+
+       var store = Ext.create('Ext.data.Store', {
+           fields: [ 'node', 'mem', 'cpu', 'priority' ],
+           data: data,
+           proxy: {
+               type: 'memory',
+               reader: {type: 'json'}
+           },
+           sorters: [
+               {
+                   property : 'node',
+                   direction: 'ASC'
+               }
+           ]
+       });
+
+       var nodegrid = Ext.createWidget('grid', {
+           store: store,
+           border: true,
+           height: 300,
+           selModel: sm,
+           columns: [
+               {
+                   header: gettext('Node'),
+                   flex: 1,
+                   dataIndex: 'node'
+               },
+               {
+                   header: gettext('Memory usage') + " %",
+                   renderer: PVE.Utils.render_mem_usage_percent,
+                   sortable: true,
+                   width: 150,
+                   dataIndex: 'mem'
+               },
+               {
+                   header: gettext('CPU usage'),
+                   renderer: PVE.Utils.render_cpu,
+                   sortable: true,
+                   width: 150,
+                   dataIndex: 'cpu'
+               },
+               {
+                   header: 'Priority',
+                   xtype: 'widgetcolumn',
+                   dataIndex: 'priority',
+                   sortable: true,
+                   stopSelection: true,
+                   widget: {
+                       xtype: 'proxmoxintegerfield',
+                       minValue: 0,
+                       maxValue: 1000,
+                       isFormField: false,
+                       listeners: {
+                           change: function(numberfield, value, old_value) {
+                               var record = numberfield.getWidgetRecord();
+                               record.set('priority', value);
+                               update_nodefield(sm.getSelection());
+                           }
+                       }
+                   }
+               }
+           ]
+       });
+
+       var nodefield = Ext.create('Ext.form.field.Hidden', {
+           name: 'nodes',
+           value: '',
+           listeners: {
+               change: function (nodefield, value) {
+                   update_node_selection(value);
+               }
+           },
+           isValid: function () {
+               var value = nodefield.getValue();
+               return (value && 0 !== value.length);
+           }
+       });
+
+       update_node_selection = function(string) {
+           sm.deselectAll(true);
+
+           string.split(',').forEach(function (e, idx, array) {
+               var res = e.split(':');
+
+               store.each(function(record) {
+                   var node = record.get('node');
+
+                   if (node == res[0]) {
+                       sm.select(record, true);
+                       record.set('priority', res[1]);
+                       record.commit();
+                   }
+               });
+           });
+           nodegrid.reconfigure(store);
+
+       };
+
+       update_nodefield = function(selected) {
+           var nodes = '';
+           var first_iteration = true;
+           Ext.Array.each(selected, function(record) {
+               if (!first_iteration) {
+                   nodes += ',';
+               }
+               first_iteration = false;
+
+               nodes += record.data.node;
+               if (record.data.priority) {
+                   nodes += ':' + record.data.priority;
+               }
+           });
+
+           // nodefield change listener calls us again, which results in a
+           // endless recursion, suspend the event temporary to avoid this
+           nodefield.suspendEvent('change');
+           nodefield.setValue(nodes);
+           nodefield.resumeEvent('change');
+       };
+
        me.column1 = [
            {
-               xtype: me.create ? 'textfield' : 'displayfield',
+               xtype: me.isCreate ? 'textfield' : 'displayfield',
                name: 'group',
                value: me.groupId || '',
                fieldLabel: 'ID',
                vtype: 'StorageId',
                allowBlank: false
            },
-           {
-               xtype: 'pveNodeSelector',
-               name: 'nodes',
-               fieldLabel: gettext('Nodes'),
-               allowBlank: false,
-               multiSelect: true,
-               autoSelect: false
-           }
+           nodefield
        ];
 
        me.column2 = [
            {
-               xtype: 'pvecheckbox',
+               xtype: 'proxmoxcheckbox',
                name: 'restricted',
                uncheckedValue: 0,
                fieldLabel: 'restricted'
            },
            {
-               xtype: 'pvecheckbox',
+               xtype: 'proxmoxcheckbox',
                name: 'nofailback',
                uncheckedValue: 0,
                fieldLabel: 'nofailback'
@@ -55,7 +182,8 @@ Ext.define('PVE.ha.GroupInputPanel', {
                xtype: 'textfield',
                name: 'comment',
                fieldLabel: gettext('Comment')
-           }
+           },
+           nodegrid
        ];
        
        me.callParent();
@@ -70,9 +198,9 @@ Ext.define('PVE.ha.GroupEdit', {
     initComponent : function() {
        var me = this;
  
-       me.create = !me.groupId;
+       me.isCreate = !me.groupId;
 
-       if (me.create) {
+       if (me.isCreate) {
             me.url = '/api2/extjs/cluster/ha/groups';
             me.method = 'POST';
         } else {
@@ -81,7 +209,7 @@ Ext.define('PVE.ha.GroupEdit', {
         }
 
        var ipanel = Ext.create('PVE.ha.GroupInputPanel', {
-           create: me.create,
+           isCreate: me.isCreate,
            groupId: me.groupId
        });
 
@@ -92,15 +220,11 @@ Ext.define('PVE.ha.GroupEdit', {
        
        me.callParent();
 
-       if (!me.create) {
+       if (!me.isCreate) {
            me.load({
                success:  function(response, options) {
                    var values = response.result.data;
 
-                   if (values.nodes) {
-                       values.nodes = values.nodes.split(',');
-                   }
-
                    ipanel.setValues(values);
                }
            });