]> git.proxmox.com Git - pmg-gui.git/blobdiff - js/RuleInfo.js
rules: use tree panel instead of grouping feature of the grid
[pmg-gui.git] / js / RuleInfo.js
index 8e15b20b2287f678323d8e50e18579f8d2b6f3f4..404c43726953a7481128208ef71147a537025417 100644 (file)
@@ -1,6 +1,3 @@
-/*global Proxmox*/
-/*jslint confusion: true*/
-/* bind is a function function */
 Ext.define('PMG.RuleInfo', {
     extend: 'Ext.panel.Panel',
     xtype: 'pmgRuleInfo',
@@ -30,9 +27,9 @@ Ext.define('PMG.RuleInfo', {
                success: function(response, opts) {
                    me.setRuleInfo(response.result.data);
                },
-               failure: function (response, opts) {
+               failure: function(response, opts) {
                    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-               }
+               },
            });
        },
 
@@ -52,12 +49,12 @@ Ext.define('PMG.RuleInfo', {
                            callback: function() {
                                me.reload();
                            },
-                           failure: function (response, opts) {
+                           failure: function(response, opts) {
                                Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-                           }
+                           },
                        });
                    }
-               }
+               },
            );
        },
 
@@ -65,7 +62,7 @@ Ext.define('PMG.RuleInfo', {
            var me = this;
            var baseurl = me.getViewModel().get('baseurl');
            var url = baseurl + '/' + type;
-           var id = (type === 'action')?record.data.ogroup:record.data.id;
+           var id = type === 'action'?record.data.ogroup:record.data.id;
            Proxmox.Utils.API2Request({
                url: url,
                params: { ogroup: id },
@@ -74,9 +71,9 @@ Ext.define('PMG.RuleInfo', {
                callback: function() {
                    me.reload();
                },
-               failure: function (response, opts) {
+               failure: function(response, opts) {
                    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-               }
+               },
            });
        },
 
@@ -86,18 +83,17 @@ Ext.define('PMG.RuleInfo', {
            var viewmodel = me.getViewModel();
 
            if (ruledata === undefined) {
-
                viewmodel.set('selectedRule', null);
                viewmodel.get('objects').setData([]);
-
            } else {
-
-               ruledata.name = Ext.String.htmlEncode(ruledata.name);
                viewmodel.set('selectedRule', ruledata);
 
-               var data = [];
+               let data = {
+                   leaf: false,
+                   expanded: true,
+                   children: [],
+               };
                Ext.Array.each(['from', 'to', 'when', 'what', 'action'], function(oc) {
-
                    var store = viewmodel.get(oc + 'objects');
                    if (ruledata[oc] === undefined || store === undefined) { return; }
 
@@ -108,23 +104,36 @@ Ext.define('PMG.RuleInfo', {
 
                    var ids = Ext.Array.pluck(ruledata[oc], 'id');
                    // for the actions, we have a different id field
-                   var idField = (oc === 'action')?'ogroup':'id';
+                   var idField = oc === 'action'?'ogroup':'id';
                    store.clearFilter();
                    store.addFilter({
-                       filterFn:function(record){
+                       filterFn: function(record) {
                            // FIXME
                            // actions have the ogroup as a string
                            // -> parseInt
-                           return (ids.indexOf(parseInt(record.data[idField], 10)) === -1);
-                       }
+                           return ids.indexOf(parseInt(record.data[idField], 10)) === -1;
+                       },
                    });
                    store.load();
+
+                   let group = {
+                       name: oc,
+                       oclass: oc,
+                       type: true,
+                       leaf: false,
+                       expanded: true,
+                       expandable: false,
+                       children: [],
+                   };
                    Ext.Array.each(ruledata[oc], function(og) {
-                       data.push({ oclass: oc, name: og.name, typeid: og.id });
+                       group.children.push({ oclass: oc, name: og.name, typeid: og.id, leaf: true });
                    });
-               });
 
-               viewmodel.get('objects').setData(data);
+                   if (group.children.length) {
+                       data.children.push(group);
+                   }
+               });
+               viewmodel.get('objects').setRoot(data);
            }
        },
 
@@ -154,80 +163,81 @@ Ext.define('PMG.RuleInfo', {
        },
 
        control: {
-           'grid[reference=usedobjects]': {
-               drop: 'addDrop'
+           'treepanel[reference=usedobjects]': {
+               drop: 'addDrop',
            },
            'tabpanel[reference=availobjects] > grid': {
-               drop: 'removeDrop'
-           }
-       }
+               drop: 'removeDrop',
+           },
+       },
     },
 
     viewModel: {
        data: {
-           baseurl: ''
+           baseurl: '',
        },
 
        stores: {
            objects: {
+               type: 'tree',
                fields: ['oclass', 'name', 'typeid'],
                groupField: 'oclass',
-               sorters: 'name'
+               sorters: 'name',
            },
 
            actionobjects: {
                model: 'pmg-action-list',
                proxy: {
                    type: 'proxmox',
-                   url: "/api2/json/config/ruledb/action/objects"
+                   url: "/api2/json/config/ruledb/action/objects",
                },
-               sorters: 'name'
+               sorters: 'name',
            },
            fromobjects: {
                model: 'pmg-object-group',
                proxy: {
                    type: 'proxmox',
-                   url: "/api2/json/config/ruledb/who"
+                   url: "/api2/json/config/ruledb/who",
                },
-               sorters: 'name'
+               sorters: 'name',
            },
            toobjects: {
                model: 'pmg-object-group',
                proxy: {
                    type: 'proxmox',
-                   url: "/api2/json/config/ruledb/who"
+                   url: "/api2/json/config/ruledb/who",
                },
-               sorters: 'name'
+               sorters: 'name',
            },
            whatobjects: {
                model: 'pmg-object-group',
                proxy: {
                    type: 'proxmox',
-                   url: "/api2/json/config/ruledb/what"
+                   url: "/api2/json/config/ruledb/what",
                },
-               sorters: 'name'
+               sorters: 'name',
            },
            whenobjects: {
                model: 'pmg-object-group',
                proxy: {
                    type: 'proxmox',
-                   url: "/api2/json/config/ruledb/when"
+                   url: "/api2/json/config/ruledb/when",
                },
-               sorters: 'name'
-           }
-       }
+               sorters: 'name',
+           },
+       },
     },
 
 
     defaults: {
-       padding: '5 10 5 10'
+       padding: '5 10 5 10',
     },
 
     bodyPadding: '5 0 5 0',
 
     layout: {
        type: 'vbox',
-       align: 'stretch'
+       align: 'stretch',
     },
 
     scrollable: true,
@@ -237,46 +247,42 @@ Ext.define('PMG.RuleInfo', {
            xtype: 'panel',
            bodyPadding: '10 10 10 10',
            data: {
-               name: ''
+               name: '',
            },
            bind: {
                data: {
-                   name: '{selectedRule.name}',
+                   name: '{selectedRule.name:htmlEncode}',
                    priority: '{selectedRule.priority}',
                    active: '{selectedRule.active}',
                    direction: '{selectedRule.direction}',
-                   selected: '{selectedRule}'
-               }
+                   selected: '{selectedRule}',
+               },
            },
            tpl: [
                '<tpl if="selected">',
                '<b>{name}</b><br><br>',
-               'Priority: {priority}<br>',
-               'Direction: {[PMG.Utils.format_rule_direction(values.direction)]}<br>',
-               'Active: {[Proxmox.Utils.format_boolean(values.active)]}<br>',
+               gettext('Priority') + ': {priority}<br>',
+               gettext('Direction') + ': {[PMG.Utils.format_rule_direction(values.direction)]}<br>',
+               gettext('Active') + ': {[Proxmox.Utils.format_boolean(values.active)]}<br>',
                '<tpl else>',
                gettext('Please select a rule.'),
-               '</tpl>'
-           ]
+               '</tpl>',
+           ],
        },
        {
-           xtype: 'grid',
+           xtype: 'treepanel',
            reference: 'usedobjects',
            hidden: true,
            emptyText: gettext('No Objects'),
-           features: [{
-               id: 'group',
-               ftype: 'grouping',
-               enableGroupingMenu: false,
-               collapsible: false,
-               groupHeaderTpl: [
-                   '{[PMG.Utils.format_oclass(values.name)]}'
-               ]
-           }],
 
            title: gettext('Used Objects'),
+           rootVisible: false,
+           useArrows: true,
+           rowLines: true,
+           userCls: 'pmx-rule-tree',
 
            viewConfig: {
+               getRowClass: record => record.data.type ? 'pmx-type-row' : '',
                plugins: {
                    ptype: 'gridviewdragdrop',
                    copy: true,
@@ -287,21 +293,24 @@ Ext.define('PMG.RuleInfo', {
                    dropZone: {
                        indicatorHtml: '',
                        indicatorCls: '',
-                       handleNodeDrop: Ext.emptyFn
-                   }
-               }
+                       handleNodeDrop: Ext.emptyFn,
+                   },
+               },
            },
 
            columns: [
-               {
-                   header: gettext('Type'),
-                   dataIndex: 'oclass',
-                   hidden: true
-               },
                {
                    header: gettext('Name'),
                    dataIndex: 'name',
-                   flex: 1
+                   xtype: 'treecolumn',
+                   renderer: PMG.Utils.format_oclass,
+                   sorter: function(a, b) {
+                       if (a.data.type && b.data.type) {
+                           return a.data.oclass.localeCompare(b.data.oclass);
+                       }
+                       return a.data.text.localeCompare(b.data.text);
+                   },
+                   flex: 1,
                },
                {
                    text: '',
@@ -310,18 +319,19 @@ Ext.define('PMG.RuleInfo', {
                    width: 40,
                    items: [
                        {
-                           iconCls: 'fa fa-fw fa-minus-circle',
                            tooltip: gettext('Remove'),
-                           handler: 'removeIconClick'
-                       }
-                   ]
-               }
+                           isActionDisabled: (v, rI, cI, i, rec) => rec.data.type,
+                           getClass: (v, mD, { data }) => data.type ? 'pmx-hidden' : 'fa fa-fw fa-minus-circle',
+                           handler: 'removeIconClick',
+                       },
+                   ],
+               },
            ],
 
            bind: {
                store: '{objects}',
-               hidden: '{!selectedRule}'
-           }
+               hidden: '{!selectedRule}',
+           },
        },
        {
            xtype: 'tabpanel',
@@ -329,7 +339,7 @@ Ext.define('PMG.RuleInfo', {
            reference: 'availobjects',
            hidden: true,
            bind: {
-               hidden: '{!selectedRule}'
+               hidden: '{!selectedRule}',
            },
            defaults: {
                xtype: 'grid',
@@ -344,15 +354,15 @@ Ext.define('PMG.RuleInfo', {
                        dropZone: {
                            indicatorHtml: '',
                            indicatorCls: '',
-                           handleNodeDrop: Ext.emptyFn
-                       }
-                   }
+                           handleNodeDrop: Ext.emptyFn,
+                       },
+                   },
                },
                columns: [
                    {
                        header: gettext('Name'),
                        dataIndex: 'name',
-                       flex: 1
+                       flex: 1,
                    },
                    {
                        text: '',
@@ -363,54 +373,54 @@ Ext.define('PMG.RuleInfo', {
                            {
                                iconCls: 'fa fa-fw fa-plus-circle',
                                tooltip: gettext('Add'),
-                               handler: 'addIconClick'
-                           }
-                       ]
-                   }
-               ]
+                               handler: 'addIconClick',
+                           },
+                       ],
+                   },
+               ],
            },
            items: [
                {
                    title: gettext('Action'),
                    bind: {
-                       store: '{actionobjects}'
+                       store: '{actionobjects}',
                    },
                    type: 'action',
-                   iconCls: 'fa fa-flag'
+                   iconCls: 'fa fa-flag',
                },
                {
                    title: gettext('From'),
                    iconCls: 'fa fa-user-circle',
                    type: 'from',
                    bind: {
-                       store: '{fromobjects}'
-                   }
+                       store: '{fromobjects}',
+                   },
                },
                {
                    title: gettext('To'),
                    iconCls: 'fa fa-user-circle',
                    type: 'to',
                    bind: {
-                       store: '{toobjects}'
-                   }
+                       store: '{toobjects}',
+                   },
                },
                {
                    title: gettext('What'),
                    iconCls: 'fa fa-cube',
                    type: 'what',
                    bind: {
-                       store: '{whatobjects}'
-                   }
+                       store: '{whatobjects}',
+                   },
                },
                {
                    title: gettext('When'),
                    iconCls: 'fa fa-clock-o',
                    type: 'when',
                    bind: {
-                       store: '{whenobjects}'
-                   }
-               }
-           ]
-       }
-    ]
+                       store: '{whenobjects}',
+                   },
+               },
+           ],
+       },
+    ],
 });