]> git.proxmox.com Git - pmg-gui.git/commitdiff
improve rule GUI
authorDietmar Maurer <dietmar@proxmox.com>
Tue, 7 Mar 2017 10:16:18 +0000 (11:16 +0100)
committerDietmar Maurer <dietmar@proxmox.com>
Tue, 7 Mar 2017 10:16:18 +0000 (11:16 +0100)
js/Makefile
js/ObjectGroup.js
js/ObjectGroupConfiguration.js
js/ObjectGroupList.js
js/RuleConfiguration.js
js/RuleInfo.js [new file with mode: 0644]
js/RuleList.js
js/Utils.js

index d44ebb35d23950f5bd19cdd305107ab7f97c6acb..e2cd2910c72af75dbd68bc9410d547431be7ebf8 100644 (file)
@@ -7,6 +7,7 @@ JSSRC=                                                  \
        ObjectGroupConfiguration.js                     \
        ActionConfiguration.js                          \
        RuleList.js                                     \
+       RuleInfo.js                                     \
        RuleConfiguration.js                            \
        SystemConfiguration.js                          \
        MailProxyRelaying.js                            \
index 223a1e9c7943784fdb072bec3c646e5b4519a6ef..8e30928189c7360e1c2a64a2324c33eec7f7b7ad 100644 (file)
@@ -23,7 +23,6 @@ Ext.define('PMG.ObjectGroup', {
 
        me.store.load(function() {
            me.down('#addMenuButton').setDisabled(false);
-
        });
     },
 
index 09022285962f684854533a8f6c1ef25ae21a766c..7965681a91e49a1f1608f08b8fb74e87b4292a62 100644 (file)
@@ -41,6 +41,14 @@ Ext.define('PMG.ObjectGroupConfiguration', {
            }
        });
 
+       me.mon(left.store, "refresh", function() {
+           var rec = left.selModel.getSelection()[0];
+           if (!(rec && rec.data && rec.data.id)) {
+               return;
+           }
+           right.setObjectInfo(rec.data);
+       });
+
        me.mon(left.selModel, "selectionchange", function() {
            var rec = left.selModel.getSelection()[0];
            if (!(rec && rec.data && rec.data.id)) {
index f88ba361299072139df3b9b95309059965fc764f..52b14dc46c2887f136d78bac0029809a9b927c27 100644 (file)
@@ -1,7 +1,7 @@
 Ext.define('pmg-object-group', {
     extend: 'Ext.data.Model',
     fields: [ 'id', 'name', 'info' ],
-    idProperty: 'cidr'
+    idProperty: 'id'
 });
 
 Ext.define('pmg-object-list', {
@@ -25,6 +25,8 @@ Ext.define('PMG.ObjectGroupList', {
 
     baseurl: undefined,
 
+    enableButtons: true,
+
     inputItems: [
        {
            xtype: 'textfield',
@@ -42,14 +44,7 @@ Ext.define('PMG.ObjectGroupList', {
     reload: function() {
        var me = this;
 
-       var rec = me.selModel.getSelection()[0];
-        me.store.load(function() {
-           if (rec) {
-               // try to selectprevious selection
-               var nrec = me.store.findRecord('id', rec.data.id);
-               me.selModel.select(nrec);
-           }
-       });
+        me.store.load();
     },
 
     run_editor: function() {
@@ -153,8 +148,11 @@ Ext.define('PMG.ObjectGroupList', {
 
        Proxmox.Utils.monStoreErrors(me, me.store);
 
+       if (me.enableButtons) {
+           me.tbar = tbar;
+       }
+
        Ext.apply(me, {
-           tbar: tbar,
            columns: [
                {
                    header: gettext('Name'),
@@ -165,7 +163,11 @@ Ext.define('PMG.ObjectGroupList', {
                }
            ],
            listeners: {
-               itemdblclick: function() { me.run_editor(); },
+               itemdblclick: function() {
+                   if (me.enableButtons) {
+                       me.run_editor();
+                   }
+               },
                activate: function() { me.reload(); }
            }
        });
index f948233fab6a7ac929130c31e9237fd8344e0c21..dd08e62375cee655dcae015db1644c44d1b305c8 100644 (file)
@@ -16,15 +16,14 @@ Ext.define('PMG.RuleConfiguration', {
            border: false
        });
 
-       var right = Ext.create('Ext.panel.Panel', {
-           html: "test",
+       var right = Ext.create('PMG.RuleInfo', {
            border: false,
            flex: 1,
            listeners: {
-               dblclickOGInfo: function(w, e, t, ogdata) {
+               dblclickRuleInfo: function(w, e, t, ruledata) {
                    // test if the correct groups is selected (just to be sure)
                    var rec = left.selModel.getSelection()[0];
-                   if (rec && rec.data && rec.data.id === ogdata.id) {
+                   if (rec && rec.data && rec.data.id === ruledata.id) {
                        left.run_editor();
                        return;
                    }
@@ -32,13 +31,16 @@ Ext.define('PMG.RuleConfiguration', {
            }
        });
 
+       me.mon(left.store, "refresh", function() {
+           right.reload();
+       });
+
        me.mon(left.selModel, "selectionchange", function() {
            var rec = left.selModel.getSelection()[0];
            if (!(rec && rec.data && rec.data.id)) {
+               right.setBaseUrl(undefined);
                return;
            }
-           return; // fixme
-           right.setObjectInfo(rec.data);
            var baseurl = '/config/ruledb/rules/' + rec.data.id;
            right.setBaseUrl(baseurl);
        });
diff --git a/js/RuleInfo.js b/js/RuleInfo.js
new file mode 100644 (file)
index 0000000..355933f
--- /dev/null
@@ -0,0 +1,211 @@
+Ext.define('PMG.RuleInfo', {
+    extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pmgRuleInfo',
+
+    baseurl: undefined,
+
+    ruledata: undefined,
+
+    emptyText: gettext('Please select a rule.'),
+
+    setBaseUrl: function(baseurl) {
+       var me = this;
+
+       me.baseurl = baseurl;
+
+       me.reload();
+    },
+
+    reload: function() {
+       var me = this;
+
+       if (!me.baseurl) {
+           me.setRuleInfo(undefined);
+           return;
+       }
+
+       Proxmox.Utils.API2Request({
+           url: me.baseurl + "/config",
+           method: 'GET',
+           waitMsgTarget: me,
+           success: function(response, opts) {
+               me.setRuleInfo(response.result.data);
+               me.down('#addFromButton').setDisabled(false);
+
+           },
+           failure: function (response, opts) {
+               Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+           }
+       });
+    },
+
+    setRuleInfo: function(ruledata) {
+       var me = this;
+
+       me.ruledata = ruledata;
+
+       if (me.ruledata === undefined) {
+
+           me.store.setData([]);
+           me.down('#ruleinfo').update(me.emtpyText);
+           me.down('#ruledata').setHidden(true);
+
+       } else {
+
+           var html = '<b>' + Ext.String.htmlEncode(me.ruledata.name) + '</b>';
+           html += '<br><br>';
+           html += 'Priority: ' +  me.ruledata.priority + '<br>';
+           html += 'Direction: ' + PMG.Utils.format_rule_direction(me.ruledata.direction) + '<br>';
+           html += 'Active: ' +  Proxmox.Utils.format_boolean(me.ruledata.active) + '<br>';
+
+           var data = [];
+           Ext.Array.each(['from', 'to', 'when', 'what', 'action'], function(oc) {
+               var list = ruledata[oc];
+               if (list === undefined) { return; }
+               Ext.Array.each(list, function(og) {
+                   data.push({ oclass: oc, name: og.name, id: og.id });
+               });
+           });
+
+           me.store.setData(data);
+
+           me.down('#ruleinfo').update(html);
+           me.down('#ruledata').setHidden(false);
+       }
+    },
+
+    initComponent : function() {
+       var me = this;
+
+       me.store = new Ext.data.Store({
+           fields: [ 'oclass', 'name' ]
+       });
+
+       me.columns = [
+           {
+               header: gettext('Type'),
+               dataIndex: 'oclass',
+           },
+           {
+               header: gettext('name'),
+               dataIndex: 'name',
+               flex: 1
+           }
+       ];
+
+       me.selModel = Ext.create('Ext.selection.RowModel', {});
+
+       var remove_btn = Ext.createWidget('proxmoxButton', {
+           text: gettext('Remove'),
+           disabled: true,
+           selModel: me.selModel,
+           confirmMsg: function (rec) {
+               return Ext.String.format(
+                   gettext('Are you sure you want to remove entry {0}'),
+                   "'" + rec.data.name + "'");
+           },
+           handler: function(btn, event, rec) {
+               console.dir(rec.data);
+               Proxmox.Utils.API2Request({
+                   url: me.baseurl + '/' + rec.data.oclass + '/'+ rec.data.id,
+                   method: 'DELETE',
+                   waitMsgTarget: me,
+                   callback: function() {
+                       me.reload();
+                   },
+                   failure: function (response, opts) {
+                       Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                   }
+               });
+           }
+       });
+
+       me.dockedItems = [];
+
+       me.dockedItems.push({
+           xtype: 'toolbar',
+           dock: 'top',
+           items: [
+               {
+                   text: gettext('From'),
+                   disabled: true,
+                   itemId: 'addFromButton',
+                   handler: function() {
+                       var win = Ext.create('Ext.window.Window', {
+                           title: 'From',
+                           width: 600,
+                           layout: 'auto',
+                           modal: true,
+                           bodyPadding: 5,
+                           items: {
+                               xtype: 'pmgObjectGroupList',
+                               enableButtons: false,
+                               ogclass: 'who',
+                               listeners: {
+                                   itemdblclick: function(view, rec) {
+                                       console.log("ADD");
+                                       console.dir(rec.data.id);
+                                       win.destroy();
+                                       Proxmox.Utils.API2Request({
+                                           url: me.baseurl + '/from',
+                                           params: { ogroup: rec.data.id },
+                                           method: 'POST',
+                                           waitMsgTarget: me,
+                                           callback: function() {
+                                               me.reload();
+                                           },
+                                           failure: function (response, opts) {
+                                               Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                                           }
+                                       });
+                                   }
+                               }
+                           }
+                       });
+                       win.show();
+                   }
+               },
+               remove_btn
+           ]
+       });
+
+       me.dockedItems.push({
+           dock: 'top',
+           border: 1,
+           layout: 'anchor',
+           itemId: 'ruledata',
+           items: [
+               {
+                   xtype: 'component',
+                   anchor: '100%',
+                   itemId: 'ruleinfo',
+                   style: { 'white-space': 'pre' },
+                   padding: 10,
+                   html: me.emptyText,
+                   listeners: {
+                       dblclick: {
+                           fn: function(e, t) {
+                               if (me.ruledata === undefined) { return; }
+                               me.fireEvent('dblclickRuleInfo', me, e, t, me.ruledata);
+                           },
+                           element: 'el',
+                           scope: this,
+                       }
+                   }
+               }
+           ]
+       });
+
+       Ext.apply(me, {
+           listeners: {
+               activate: function() { me.reload() }
+           }
+       });
+
+       me.callParent();
+
+       if (me.baseurl) {
+           me.reload();
+       }
+    }
+});
index e094234685356268edd03f823d4a69d8321951a0..620ec75ac402444da6f17fe027120d18b5333545 100644 (file)
@@ -28,20 +28,39 @@ Ext.define('PMG.RuleList', {
            name: 'name',
            allowBlank: false,
            fieldLabel: gettext('Name')
+       },
+       {
+           xtype: 'proxmoxintegerfield',
+           name: 'priority',
+           allowBlank: false,
+           minValue: 0,
+           maxValue: 100,
+           fieldLabel: gettext('Priority')
+       },
+       {
+           xtype: 'proxmoxKVComboBox',
+           name: 'direction',
+           comboItems: [
+               [0, PMG.Utils.format_rule_direction(0)],
+               [1, PMG.Utils.format_rule_direction(1)],
+               [2, PMG.Utils.format_rule_direction(2)]],
+           value: 2,
+           fieldLabel: gettext('Direction')
+       },
+       {
+           xtype: 'proxmoxcheckbox',
+           name: 'active',
+           defaultValue: 0,
+           uncheckedValue: 0,
+           checked: false,
+           fieldLabel: gettext('Active')
        }
     ],
 
     reload: function() {
        var me = this;
 
-       var rec = me.selModel.getSelection()[0];
-        me.store.load(function() {
-           if (rec) {
-               // try to selectprevious selection
-               var nrec = me.store.findRecord('id', rec.data.id);
-               me.selModel.select(nrec);
-           }
-       });
+       me.store.load();
     },
 
     run_editor: function() {
@@ -88,7 +107,10 @@ Ext.define('PMG.RuleList', {
            ],
            grouper: {
                property: 'active',
-               direction: 'DESC'
+               direction: 'DESC',
+               getGroupString: function(rec) {
+                   return Proxmox.Utils.format_boolean(rec.get('active'));
+               }
            }
        });
 
index 813998d0034429c7de726a47649fc1438c3cf678..f1ec382df6056178aa1e37508151b8ac6ca18684 100644 (file)
@@ -5,7 +5,7 @@ console.log("Starting PMG Manager");
 
 Ext.define('PMG.Utils', {
     singleton: true,
+
     // this singleton contains miscellaneous utilities
 
     senderText: gettext('Sender'),
@@ -17,7 +17,17 @@ Ext.define('PMG.Utils', {
        when: gettext('When Objects'),
        action: gettext('Action Objects')
     },
-    
+
+    rule_direction_text: {
+       0: gettext('In'),
+       1: gettext('Out'),
+       2: gettext('In & Out')
+    },
+
+    format_rule_direction: function(dir) {
+       return PMG.Utils.rule_direction_text[dir] || dir;
+    },
+
     format_otype: function(otype) {
        var editor = PMG.Utils.object_editors[otype];
        if (editor) {
@@ -178,7 +188,7 @@ Ext.define('PMG.Utils', {
 
        }
     },
-                         
+
     constructor: function() {
        var me = this;