[pbs-devel] [PATCH proxmox-backup v2] fix #6592: ui: add custom sort function to comment column

[Michael Köppl]

Quickly gave this a spin. Generally, it works, apart from some quirks
when editing:

- When I sort alphabetically ascending and then change one of the
comments to "break" the ordering (e.g. sort alphabetically entries with
comments "b" and "c" and then change "c" to "a"), then the new "a" stays
after "b" in the ordering.
- Consider 2 groups with comments "a" and "b". Sort alphabetically. Then
add comment "c" to a snapshot in group with comment "a". Group "a" will
be moved below group "b".

Not major problems, just some things I noticed. In both cases,
re-sorting or reloading the page fixes the sort to be what I would
expect it to be. Both are probably related to how data is reloaded after
an edit of the comment happens.

I wouldn't consider these quirks blockers and I'm not sure if doing an
API call to refresh here would be worth it, so please consider this:

Reviewed-by: Michael Köppl <m.koeppl at proxmox.com>
Tested-by: Michael Köppl <m.koeppl at proxmox.com>

On 8/6/25 12:46, Shan Shaji wrote:
> When sorting the Comment column, if the `comment` field was
> present, the sorting worked correctly. However, when the `comment`
> field was missing and only `last-comment` was available
> (and shown in the UI), the default Ext JS sorting did not use the
> `last-comment` value.
> 
> To fix this, a custom sort function was added to use the `last-comment`
> value when `comment` is empty.
> 
> Signed-off-by: Shan Shaji <s.shaji at proxmox.com>
> ---
>  
>  changes since v1: 
>  - Fixed comment description line length
> 
>  www/datastore/Content.js | 9 +++++++++
>  1 file changed, 9 insertions(+)
> 
> diff --git a/www/datastore/Content.js b/www/datastore/Content.js
> index 075022e9..a2aa1949 100644
> --- a/www/datastore/Content.js
> +++ b/www/datastore/Content.js
> @@ -1004,6 +1004,15 @@ Ext.define('PBS.DataStoreContent', {
>                  return `<span class="snapshot-comment-column ${additionalClasses}">${v}</span>
>  		    <i data-qtip="${gettext('Edit')}" style="float: right; margin: 0px;" class="${icon}"></i>`;
>              },
> +            sorter: (aRec, bRec) => {
> +                let a = aRec.data.comment || aRec.data['last-comment'] || '';
> +                let b = bRec.data.comment || bRec.data['last-comment'] || '';
> +
> +                a = a.toLowerCase();
> +                b = b.toLowerCase();
> +
> +                return a.localeCompare(b);
> +            },
>              listeners: {
>                  afterrender: function (component) {
>                      // a bit of a hack, but relatively easy, cheap and works out well.