[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:
> +
> +        me.columns.unshift(
> +            {
> +                header: gettext('State'),
> +                xtype: 'actioncolumn',
> +                width: 25,
> +                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 ?? {},
> +                            });

Even though not super important to this series, I think you could avoid
defining a new modal here by doing something like this:

	let listItems = Object.entries(data.errors ?? {})
		.flatMap(([opt, messages]) => messages.map(message =>
`<li>${Ext.htmlEncode(`${opt}: ${message}`)}</li>`))
		.join('');
	Ext.Msg.show({
		title: gettext("Rule errors"),
		icon: Ext.Msg.WARNING,
		msg: `<div>
                	<p>${gettext('The HA rule has the following errors:')}</p>
			<ul style="list-style-position: inside; padding-left: 0;">
				${listItems}
			</ul>
		      </div>`,
	});

Just a suggestion, of course. If you plan to keep the RuleErrorsModal,
the padding made it seem a bit off compared to other dialogs throughout
the manager.

> +                        },
> +                        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();
> +    },
> +});
> +