]> git.proxmox.com Git - pmg-gui.git/blobdiff - js/RuleConfiguration.js
fix #5251: login: set autocomplete on password and user
[pmg-gui.git] / js / RuleConfiguration.js
index c02940f1343c51a8cb61cd9a6d33a38db1dfcc22..1209b1d587a86fefc5517e043d86790caf04a53b 100644 (file)
-Ext.define('PMG.RuleConfiguration', {
-    extend: 'Ext.tree.Panel',
-    alias: 'widget.pmgRuleConfiguration',
-
-    title: gettext('Configuration') + ': ' +
-       gettext('Rules'),
-    rootVisible: false,
-
-    baseurl: '/config/ruledb/rules',
-
-    useArrows: true,
-    rowLines: true,
-
-    reload: function() {
-       var me = this;
-
-       Proxmox.Utils.API2Request({
-           url: me.baseurl,
-           method: 'GET',
-           waitMsgTarget: me,
-           success: function(response) {
-               var data = response.result.data;
-               var rulelist = [];
-               var root = {
-                   expanded: true,
-                   children: rulelist
-               };
-               Ext.Array.each(data, function(rule) {
-                   var entry = {
-                       text: rule.name,
-                       priority: rule.priority,
-                       active: rule.active,
-                       direction: rule.direction,
-                       children: [],
-                       expanded: false,
-                       leaf: true
-                   };
-
-                   var add_group = function(group, group_name) {
-
-                       var tmp = [];
-
-                       entry.leaf = false;
-                       entry.children.push({
-                           text: group_name,
-                           expanded: true,
-                           leaf: false,
-                           children: tmp
-                       });
-
-                       Ext.Array.each(group, function(obj) {
-                           tmp.push({
-                               leaf: true,
-                               text: obj.name,
-                               info: obj.info
-                           });
-                       });
-                   };
-
-                   if (rule.from) {
-                       add_group(rule.from, gettext('From'));
-                   }
-                   if (rule.to) {
-                       add_group(rule.to, gettext('To'));
-                   }
-                   if (rule.what) {
-                       add_group(rule.what, gettext('What'));
-                   }
-                   if (rule.when) {
-                       add_group(rule.when, gettext('When'));
-                   }
-                   if (rule.action) {
-                       add_group(rule.action, gettext('Action'));
+Ext.define('pmg-rule-list', {
+    extend: 'Ext.data.Model',
+    fields: [
+       'id', 'name',
+       { name: 'active', type: 'boolean' },
+       { name: 'direction', type: 'integer' },
+       { name: 'priority', type: 'integer' },
+    ],
+    idProperty: 'id',
+});
+
+Ext.define('PMG.RulesConfiguration', {
+    extend: 'Ext.container.Container',
+    xtype: 'pmgRuleConfiguration',
+
+    layout: 'border',
+    border: false,
+    defaults: {
+       border: false,
+    },
+
+    controller: {
+       xclass: 'Ext.app.ViewController',
+
+       selectedRuleChange: function(grid, selected, eOpts) {
+           let me = this;
+           let infoPanel = me.lookupReference('infopanel');
+           let baseurl = '';
+
+           if (selected.length > 0) {
+               baseurl = `/config/ruledb/rules/${selected[0].data.id}`;
+           }
+
+           infoPanel.getController().setBaseUrl(baseurl);
+       },
+
+       editIconClick: function(gridView, rowindex, colindex, column, e, record) {
+           let me = this;
+           me.showEditWindow(gridView, record);
+       },
+
+       showEditWindow: function(gridView, record) {
+           let me = this;
+           let win = Ext.create('PMG.RuleEditor', {
+               url: `/api2/extjs/config/ruledb/rules/${record.data.id}/config`,
+               listeners: {
+                   destroy: function() {
+                       gridView.getStore().load();
+                   },
+               },
+           });
+           win.load();
+           win.show();
+       },
+
+       toggleIconClick: function(gridView, rowindex, colindex, column, e, record) {
+           let me = this;
+           Proxmox.Utils.API2Request({
+               url: `/config/ruledb/rules/${record.data.id}/config`,
+               params: {
+                   active: record.data.active ? 0 : 1,
+               },
+               method: 'PUT',
+               callback: function() {
+                   gridView.getStore().load();
+               },
+               failure: function(response, opts) {
+                   Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+               },
+           });
+       },
+
+       reload: function() {
+           let me = this;
+           me.lookupReference('rulegrid').getStore().load();
+       },
+
+       addRule: function() {
+           let me = this;
+           let win = Ext.create('PMG.RuleEditor', {
+               url: '/api2/extjs/config/ruledb/rules/',
+               method: 'POST',
+               isCreate: true,
+               listeners: {
+                   destroy: function() {
+                       me.lookupReference('rulegrid').getStore().load();
+                   },
+               },
+           });
+           win.load();
+           win.show();
+       },
+
+       onFactoryDefaults: function() {
+           let me = this;
+
+           Ext.Msg.confirm(
+               gettext('Confirm'),
+               gettext('Reset rule database to factory defaults?'),
+               function(button) {
+                   if (button !== 'yes') {
+                       return;
                    }
+                   Proxmox.Utils.API2Request({
+                       url: '/config/ruledb',
+                       method: 'POST',
+                       waitMsgTarget: me.getView(),
+                       callback: function() {
+                           me.reload();
+                       },
+                       failure: function(response, opts) {
+                           Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                       },
+                   });
+               },
+           );
+       },
+
+       init: function(view) {
+           let grid = this.lookupReference('rulegrid');
+           Proxmox.Utils.monStoreErrors(grid, grid.getStore(), true);
+       },
 
-                   rulelist.push(entry);
-               });
-               me.store.setRoot(root);
+       control: {
+           'grid[reference=rulegrid]': {
+               itemdblclick: 'showEditWindow',
+               selectionchange: 'selectedRuleChange',
            },
-           failure: function (response, opts) {
-               me.store.setRoot({});
-               Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-           }
-       });
+           'button[reference=addButton]': {
+               click: 'addRule',
+           },
+       },
+    },
 
+    viewModel: {
+       data: {
+           selectedRule: undefined,
+           baseUrl: '/config/ruledb/rules',
+       },
     },
 
-    initComponent : function() {
-       var me = this;
+    items: [
+       {
+           xtype: 'grid',
+           layout: 'fit',
+           title: 'Rules',
+           reference: 'rulegrid',
+           region: 'center',
 
-       me.store = Ext.create('Ext.data.TreeStore', {});
+           bind: {
+               selection: '{selectedRule}',
+           },
 
-       me.columns = [
-           {
-               xtype: 'treecolumn',
-               text: gettext('Name'),
-               width: 300,
-               sortable: true,
-               dataIndex: 'text',
-               locked: true
+           dockedItems: {
+               xtype: 'toolbar',
+               reference: 'mytb',
+               items: [
+                   {
+                       xtype: 'button',
+                       text: gettext('Add'),
+                       iconCls: 'fa fa-plus-circle',
+                       reference: 'addButton',
+                   },
+                   {
+                       xtype: 'proxmoxStdRemoveButton',
+                       text: gettext('Remove'),
+                       iconCls: 'fa fa-minus-circle',
+                       reference: 'removeButton',
+                       callback: 'reload',
+                       getRecordName: function(rec) { return rec.data.name; },
+                       bind: {
+                           baseurl: '{baseUrl}',
+                       },
+                   },
+                   '->',
+                   {
+                       text: gettext('Factory Defaults'),
+                       handler: 'onFactoryDefaults',
+                   },
+               ],
            },
-           {
-               text: gettext('Priority'),
-               width: 80,
-               dataIndex: 'priority',
-               sortable: true
-            },
-           {
-               text: gettext('Active'),
-               width: 80,
-               dataIndex: 'active',
-               sortable: true
-            },
-           {
-               text: gettext('Direction'),
-               width: 80,
-               dataIndex: 'direction',
-               renderer: function(value) {
-                   if (value === 0) {
-                       return 'in';
-                   } else if (value === 1) {
-                       return 'out';
-                   } else if (value === 2) {
-                       return 'inout';
-                   } else {
-                       return value; // unknown
-                   }
+
+           viewConfig: {
+               getRowClass: function(record, rowIndex) {
+                   return record.get('active') ? 'enabled' : 'disabled';
+               },
+           },
+
+           store: {
+               autoLoad: true,
+               model: 'pmg-rule-list',
+               reference: 'rulesStore',
+               proxy: {
+                   type: 'proxmox',
+                   url: '/api2/json/config/ruledb/rules',
+               },
+               sorters: [
+                   {
+                       property: 'priority',
+                       direction: 'DESC',
+                   },
+                   {
+                       property: 'name',
+                   },
+               ],
+           },
+
+           sortableColumns: false,
+           columns: [
+               {
+                   text: 'Active',
+                   dataIndex: 'active',
+                   hidden: true,
+               },
+               {
+                   text: 'Name',
+                   dataIndex: 'name',
+                   flex: 1,
+                   renderer: Ext.htmlEncode,
+               },
+               {
+                   text: 'Priority',
+                   dataIndex: 'priority',
+               },
+               {
+                   text: 'Direction',
+                   dataIndex: 'direction',
+                   renderer: PMG.Utils.format_rule_direction,
+               },
+               {
+                   text: '',
+                   xtype: 'actioncolumn',
+                   align: 'center',
+                   width: 70,
+                   items: [
+                       {
+                           iconCls: 'fa fa-fw fa-pencil',
+                           tooltip: 'Edit',
+                           handler: 'editIconClick',
+                       },
+                       {
+                           getClass: function(val, meta, rec) {
+                               return 'fa fa-fw fa-' + (rec.get('active') ? 'toggle-on' : 'toggle-off');
+                           },
+                           getTip: function(val, meta, rec) {
+                               return rec.get('active') ? 'Deactivate' : 'Activate';
+                           },
+                           handler: 'toggleIconClick',
+                       },
+                   ],
                },
-               sortable: true
-            },
-           {
-               text: gettext('Description'),
-               flex: 1,
-               dataIndex: 'info',
-               sortable: false
-            }
-       ];
-
-       me.callParent();
-
-       me.reload();
-    }
+           ],
+       },
+       {
+           region: 'east',
+           reference: 'infopanel',
+           xtype: 'pmgRuleInfo',
+           split: true,
+           width: 440,
+       },
+    ],
 });