From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id DCF5568CBE for ; Fri, 23 Jul 2021 08:31:53 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id D353C18840 for ; Fri, 23 Jul 2021 08:31:53 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id BB31F18835 for ; Fri, 23 Jul 2021 08:31:52 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 890CF425EF for ; Fri, 23 Jul 2021 08:31:52 +0200 (CEST) From: Dominik Csapak To: pbs-devel@lists.proxmox.com Date: Fri, 23 Jul 2021 08:31:51 +0200 Message-Id: <20210723063151.292363-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.521 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pbs-devel] [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries X-BeenThere: pbs-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Backup Server development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Fri, 23 Jul 2021 06:31:53 -0000 instead of having the grid be as tall as possible and the containing panel scroll. limit the grids height to the panel size and scroll the grid. this has two advantages: * if a user has many slots, it is now possible to to navigate the other grids to the position wanted * having the grids scroll, means it can use extjs' buffered renderer, which makes the view much more responsive (in case of hundreds of slots) Signed-off-by: Dominik Csapak --- www/tape/ChangerStatus.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js index 97b8f78e..a99b6ba6 100644 --- a/www/tape/ChangerStatus.js +++ b/www/tape/ChangerStatus.js @@ -693,9 +693,8 @@ Ext.define('PBS.TapeManagement.ChangerStatus', { }, ], - layout: 'auto', + layout: 'fit', bodyPadding: 5, - scrollable: true, items: [ { @@ -703,7 +702,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', { reference: 'content', layout: { type: 'hbox', - aling: 'stretch', + align: 'stretch', }, items: [ { @@ -711,6 +710,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', { reference: 'slots', title: gettext('Slots'), padding: 5, + srollable: true, flex: 1, store: { type: 'diff', @@ -771,10 +771,16 @@ Ext.define('PBS.TapeManagement.ChangerStatus', { defaults: { padding: 5, }, + layout: { + type: 'vbox', + align: 'stretch', + }, items: [ { xtype: 'grid', reference: 'drives', + scrollable: true, + maxHeight: 350, // ~10 drives title: gettext('Drives'), store: { type: 'diff', @@ -918,6 +924,8 @@ Ext.define('PBS.TapeManagement.ChangerStatus', { { xtype: 'grid', reference: 'import_export', + flex: 1, + srollable: true, store: { type: 'diff', rstore: { -- 2.30.2