Re: [PATCH proxmox-backup v8 04/17] ui: expose s3 request counter statistics in the datastore summary

[Dominik Csapak <d.csapak@proxmox.com>]

Looked at this a bit, and I think this is a bit crammed.
Especially the comment panel looks a bit weird when it's collapsed.

I'd propose switching the positions of s3 and comment, and make
the comment a full column wide in case it's an s3 datastore

this makes it look less cramped. also users in the past
wanted more space for the comments already, so making
it smaller in some cases is not good i think.

On 4/2/26 12:52 PM, Christian Ebner wrote:
> Show the current s3 request counter statistics for datastore backend.
> Use a dedicated info widget, only shown for s3 datastores.
> 
> Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
> Reviewed-by: Hannes Laimer <h.laimer@proxmox.com>
> Tested-by: Hannes Laimer <h.laimer@proxmox.com>
> ---
> changes since version 7:
> - no changes
> 
>   www/datastore/Summary.js | 110 +++++++++++++++++++++++++++++++++++++++
>   1 file changed, 110 insertions(+)
> 
> diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
> index c2b1cedc9..5dcc0e5dc 100644
> --- a/www/datastore/Summary.js
> +++ b/www/datastore/Summary.js
> @@ -130,6 +130,95 @@ Ext.define('PBS.DataStoreInfo', {
>       ],
>   });
>   
> +Ext.define('PBS.DataStoreS3Stats', {
> +    extend: 'Ext.panel.Panel',
> +    alias: 'widget.pbsDataStoreS3Stats',
> +
> +    defaults: {
> +        xtype: 'pmxInfoWidget',
> +    },
> +
> +    bodyPadding: 20,
> +
> +    items: [
> +        {
> +            xtype: 'box',
> +            html: `<b>${gettext('S3 traffic:')}</b>`,
> +            padding: '10 0 5 0',
> +        },
> +        {
> +            iconCls: 'fa fa-fw fa-arrow-up',
> +            title: gettext('Data uploaded'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{uploaded}',
> +                },
> +            },
> +        },
> +        {
> +            iconCls: 'fa fa-fw fa-arrow-down',
> +            title: gettext('Data downloaded'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{downloaded}',
> +                },
> +            },
> +        },
> +        {
> +            xtype: 'box',
> +            html: `<b>${gettext('S3 requests:')}</b>`,
> +            padding: '10 0 5 0',
> +        },
> +        {
> +            title: gettext('GET'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{get}',
> +                },
> +            },
> +        },
> +        {
> +            title: gettext('PUT'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{put}',
> +                },
> +            },
> +        },
> +        {
> +            title: gettext('POST'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{post}',
> +                },
> +            },
> +        },
> +        {
> +            title: gettext('HEAD'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{head}',
> +                },
> +            },
> +        },
> +        {
> +            title: gettext('DELETE'),
> +            printBar: false,
> +            bind: {
> +                data: {
> +                    text: '{delete}',
> +                },
> +            },
> +        },
> +    ],
> +});
> +
>   Ext.define('PBS.DataStoreSummary', {
>       extend: 'Ext.panel.Panel',
>       alias: 'widget.pbsDataStoreSummary',
> @@ -150,6 +239,7 @@ Ext.define('PBS.DataStoreSummary', {
>               usage: {},
>               stillbad: 0,
>               mountpoint: '',
> +            showS3Stats: false,
>           },
>       },
>   
> @@ -244,10 +334,19 @@ Ext.define('PBS.DataStoreSummary', {
>                   {
>                       xtype: 'pbsDataStoreNotes',
>                       flex: 1,
> +                    padding: '0 10 0 0',
>                       cbind: {
>                           datastore: '{datastore}',
>                       },
>                   },
> +                {
> +                    xtype: 'pbsDataStoreS3Stats',
> +                    flex: 1,
> +                    title: gettext('S3 statistics'),
> +                    bind: {
> +                        visible: '{showS3Stats}',
> +                    },
> +                },
>               ],
>           },
>           {
> @@ -464,6 +563,17 @@ Ext.define('PBS.DataStoreSummary', {
>                   vm.set('deduplication', dedup.toFixed(2));
>                   vm.set('stillbad', gcstatus['still-bad']);
>               }
> +            let s3Stats = store.getById('s3-statistics')?.data.value;
> +            if (s3Stats) {
> +                vm.set('uploaded', Proxmox.Utils.format_size(s3Stats.uploaded));
> +                vm.set('downloaded', Proxmox.Utils.format_size(s3Stats.downloaded));
> +                vm.set('get', s3Stats.get);
> +                vm.set('post', s3Stats.post);
> +                vm.set('delete', s3Stats.delete);
> +                vm.set('head', s3Stats.head);
> +                vm.set('put', s3Stats.put);
> +                vm.set('showS3Stats', true);
> +            }
>   
>               vm.set('ctcount', countstext(counts.ct));
>               vm.set('vmcount', countstext(counts.vm));