From ad834b6f60f6795b59da7abadc2eab96d40d8353 Mon Sep 17 00:00:00 2001 From: Dietmar Maurer Date: Tue, 7 Mar 2017 11:16:18 +0100 Subject: [PATCH] improve rule GUI --- js/Makefile | 1 + js/ObjectGroup.js | 1 - js/ObjectGroupConfiguration.js | 8 ++ js/ObjectGroupList.js | 24 ++-- js/RuleConfiguration.js | 14 ++- js/RuleInfo.js | 211 +++++++++++++++++++++++++++++++++ js/RuleList.js | 40 +++++-- js/Utils.js | 16 ++- 8 files changed, 285 insertions(+), 30 deletions(-) create mode 100644 js/RuleInfo.js diff --git a/js/Makefile b/js/Makefile index d44ebb3..e2cd291 100644 --- a/js/Makefile +++ b/js/Makefile @@ -7,6 +7,7 @@ JSSRC= \ ObjectGroupConfiguration.js \ ActionConfiguration.js \ RuleList.js \ + RuleInfo.js \ RuleConfiguration.js \ SystemConfiguration.js \ MailProxyRelaying.js \ diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js index 223a1e9..8e30928 100644 --- a/js/ObjectGroup.js +++ b/js/ObjectGroup.js @@ -23,7 +23,6 @@ Ext.define('PMG.ObjectGroup', { me.store.load(function() { me.down('#addMenuButton').setDisabled(false); - }); }, diff --git a/js/ObjectGroupConfiguration.js b/js/ObjectGroupConfiguration.js index 0902228..7965681 100644 --- a/js/ObjectGroupConfiguration.js +++ b/js/ObjectGroupConfiguration.js @@ -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)) { diff --git a/js/ObjectGroupList.js b/js/ObjectGroupList.js index f88ba36..52b14dc 100644 --- a/js/ObjectGroupList.js +++ b/js/ObjectGroupList.js @@ -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(); } } }); diff --git a/js/RuleConfiguration.js b/js/RuleConfiguration.js index f948233..dd08e62 100644 --- a/js/RuleConfiguration.js +++ b/js/RuleConfiguration.js @@ -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 index 0000000..355933f --- /dev/null +++ b/js/RuleInfo.js @@ -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 = '' + Ext.String.htmlEncode(me.ruledata.name) + ''; + html += '

'; + html += 'Priority: ' + me.ruledata.priority + '
'; + html += 'Direction: ' + PMG.Utils.format_rule_direction(me.ruledata.direction) + '
'; + html += 'Active: ' + Proxmox.Utils.format_boolean(me.ruledata.active) + '
'; + + 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(); + } + } +}); diff --git a/js/RuleList.js b/js/RuleList.js index e094234..620ec75 100644 --- a/js/RuleList.js +++ b/js/RuleList.js @@ -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')); + } } }); diff --git a/js/Utils.js b/js/Utils.js index 813998d..f1ec382 100644 --- a/js/Utils.js +++ b/js/Utils.js @@ -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; -- 2.39.5