[pve-devel] [PATCH manager v2 5/5] ui: ha: add ha rules components and menu entry

[Michael Köppl]

On 6/20/25 16:31, Daniel Kral wrote:
> diff --git a/www/manager6/ha/Rules.js b/www/manager6/ha/Rules.js
> new file mode 100644
> index 00000000..d69aa3b2
> --- /dev/null
> +++ b/www/manager6/ha/Rules.js
> @@ -0,0 +1,228 @@
> +Ext.define('PVE.ha.RulesBaseView', {
> +    extend: 'Ext.grid.GridPanel',
> +
> +    initComponent: function () {
> +        let me = this;
> +
> +        if (!me.ruleType) {
> +            throw 'no rule type given';
> +        }
> +
> +        let store = new Ext.data.Store({
> +            model: 'pve-ha-rules',
> +            autoLoad: true,
> +            filters: [
> +                {
> +                    property: 'type',
> +                    value: me.ruleType,
> +                },
> +            ],
> +        });
> +
> +        let reloadStore = () => store.load();
> +
> +        let sm = Ext.create('Ext.selection.RowModel', {});
> +
> +        let createRuleEditWindow = (ruleId) => {
> +            if (!me.inputPanel) {
> +                throw `no editor registered for ha rule type: ${me.ruleType}`;
> +            }
> +
> +            Ext.create('PVE.ha.RuleEdit', {
> +                panelType: `PVE.ha.rules.${me.inputPanel}`,
> +                panelName: me.ruleTitle,
> +                ruleType: me.ruleType,
> +                ruleId: ruleId,
> +                autoShow: true,
> +                listeners: {
> +                    destroy: reloadStore,
> +                },
> +            });
> +        };
> +
> +        let runEditor = () => {
> +            let rec = sm.getSelection()[0];
> +            if (!rec) {
> +                return;
> +            }
> +            let { rule } = rec.data;
> +            createRuleEditWindow(rule);
> +        };
> +
> +        let editButton = Ext.create('Proxmox.button.Button', {
> +            text: gettext('Edit'),
> +            disabled: true,
> +            selModel: sm,
> +            handler: runEditor,
> +        });
> +
> +        let removeButton = Ext.create('Proxmox.button.StdRemoveButton', {
> +            selModel: sm,
> +            baseurl: '/cluster/ha/rules/',
> +            callback: reloadStore,
> +        });
> +
> +        Ext.apply(me, {
> +            store: store,
> +            selModel: sm,
> +            viewConfig: {
> +                trackOver: false,
> +            },
> +            emptyText: Ext.String.format(gettext('No {0} rules configured.'), me.ruleTitle),
> +            tbar: [
> +                {
> +                    text: gettext('Add'),
> +                    handler: () => createRuleEditWindow(),
> +                },
> +                editButton,
> +                removeButton,
> +            ],
> +            listeners: {
> +                activate: reloadStore,
> +                itemdblclick: runEditor,
> +            },
> +        });
> +
> +        me.columns.unshift(
> +            {
> +                header: gettext('State'),
> +                xtype: 'actioncolumn',
> +                width: 25,

This is very narrow. Prior to resizing the column, I only see "S". A
width of 65 works quite nicely.

> +                align: 'center',
> +                dataIndex: 'state',
> +                items: [
> +                    {
> +                        isActionDisabled: (table, rowIndex, colIndex, item, { data }) =>
> +                            data.state !== 'contradictory',
> +                        handler: (table, rowIndex, colIndex, item, event, { data }) => {
> +                            Ext.create('PVE.ha.RuleErrorsModal', {
> +                                autoShow: true,
> +                                errors: data.errors ?? {},
> +                            });
> +                        },
> +                        getTip: (value) => {
> +                            switch (value) {
> +                                case 'contradictory':
> +                                    return gettext('Errors');
> +                                case 'disabled':
> +                                    return gettext('Disabled');
> +                                default:
> +                                    return gettext('Enabled');
> +                            }
> +                        },
> +                        getClass: (value) => {
> +                            let iconName = 'check';
> +
> +                            if (value === 'contradictory') {
> +                                iconName = 'exclamation-triangle';
> +                            } else if (value === 'disabled') {
> +                                iconName = 'minus';
> +                            }
> +
> +                            return `fa fa-${iconName}`;
> +                        },
> +                    },
> +                ],
> +            },
> +            {
> +                header: gettext('Rule'),
> +                width: 200,
> +                dataIndex: 'rule',
> +            },
> +        );
> +
> +        me.columns.push({
> +            header: gettext('Comment'),
> +            flex: 1,
> +            renderer: Ext.String.htmlEncode,
> +            dataIndex: 'comment',
> +        });
> +
> +        me.callParent();
> +    },
> +});