From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
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 B07A862B1E
 for <pbs-devel@lists.proxmox.com>; Mon,  8 Feb 2021 10:18:31 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id 9DD6D1F743
 for <pbs-devel@lists.proxmox.com>; Mon,  8 Feb 2021 10:18:01 +0100 (CET)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
 [212.186.127.180])
 (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 E61711F73B
 for <pbs-devel@lists.proxmox.com>; Mon,  8 Feb 2021 10:18:00 +0100 (CET)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
 by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 9E5724345A
 for <pbs-devel@lists.proxmox.com>; Mon,  8 Feb 2021 10:18:00 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Date: Mon,  8 Feb 2021 10:17:59 +0100
Message-Id: <20210208091759.11552-1-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.20.1
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.232 Adjusted score from AWL reputation of From: address
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 RCVD_IN_DNSWL_MED        -2.3 Sender listed at https://www.dnswl.org/,
 medium trust
 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/BackupOverview: rework
 BackupOverview (again)
X-BeenThere: pbs-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Backup Server development discussion
 <pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Mon, 08 Feb 2021 09:18:31 -0000

instead of showing the snapshots directly under the pool and then the
media-sets, list the media-sets under the pool and only after the
snapshots

this has several advantages:
* we only have to read one set of tape catalog data on expand and not all of
  them everytime (which does not scale)
* we can show media-sets without snapshots, this can happen when we
  inventoried a set of tapes from another pbs instance, or lost the
  catalog data somehow

the disadvantage is that one has to go look for the media set where the
snapshot is included, but we can solve this by implementing a search
function in the future (in the backend)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/tape/BackupOverview.js | 133 +++++++++++++++++++++++++------------
 1 file changed, 91 insertions(+), 42 deletions(-)

diff --git a/www/tape/BackupOverview.js b/www/tape/BackupOverview.js
index 439c1394..6659d3ff 100644
--- a/www/tape/BackupOverview.js
+++ b/www/tape/BackupOverview.js
@@ -25,7 +25,7 @@ Ext.define('PBS.TapeManagement.BackupOverview', {
 	    }
 
 	    let mediaset = selection[0].data.text;
-	    let uuid = selection[0].data.uuid;
+	    let uuid = selection[0].data['media-set-uuid'];
 	    Ext.create('PBS.TapeManagement.TapeRestoreWindow', {
 		mediaset,
 		uuid,
@@ -38,62 +38,47 @@ Ext.define('PBS.TapeManagement.BackupOverview', {
 	},
 
 	loadContent: async function() {
+	    let me = this;
 	    let content_response = await PBS.Async.api2({
-		url: '/api2/extjs/tape/media/content',
+		url: '/api2/extjs/tape/media/list',
 	    });
 	    let data = {};
 
 	    for (const entry of content_response.result.data) {
 		let pool = entry.pool;
-		let [type, group_id, id] = PBS.Utils.parse_snapshot_id(entry.snapshot);
-		let group = `${type}/${group_id}`;
 		let media_set = entry['media-set-name'];
-		let uuid = entry['media-set-uuid'];
-		let ctime = entry['media-set-ctime'];
 		if (data[pool] === undefined) {
 		    data[pool] = {};
 		}
 
-		if (data[pool][group] === undefined) {
-		    data[pool][group] = {};
-		}
-
-		if (data[pool][group][id] === undefined) {
-		    data[pool][group][id] = [];
+		if (data[pool][media_set] === undefined) {
+		    data[pool][media_set] = entry;
+		    data[pool][media_set].text = media_set;
+		    data[pool][media_set].tapes = 1;
+		    data[pool][media_set]['seq-nr'] = undefined;
+		    data[pool][media_set].is_media_set = true;
+		} else {
+		    data[pool][media_set].tapes++;
 		}
-		data[pool][group][id].push({
-		    text: media_set,
-		    uuid,
-		    ctime,
-		    leaf: true,
-		});
 	    }
 
 	    let list = [];
 
-	    for (const [pool, groups] of Object.entries(data)) {
-		let pool_entry = {
+	    for (const [pool, media_sets] of Object.entries(data)) {
+		let pool_entry = Ext.create('Ext.data.TreeModel', {
 		    text: pool,
 		    leaf: false,
-		    children: [],
-		};
-		for (const [group, ids] of Object.entries(groups)) {
-		    let group_entry = {
-			text: group,
-			iconCls: "fa " + PBS.Utils.get_type_icon_cls(group),
-			leaf: false,
-			children: [],
-		    };
-		    for (const [id, media_sets] of Object.entries(ids)) {
-			let id_entry = {
-			    text: `${group}/${id}`,
-			    leaf: false,
-			    children: media_sets,
-			};
-			group_entry.children.push(id_entry);
-		    }
-		    pool_entry.children.push(group_entry);
+		});
+
+		let children = [];
+
+		for (const media_set of Object.values(media_sets)) {
+		    let entry = Ext.create('Ext.data.TreeModel', media_set);
+		    entry.on('beforeexpand', (node) => me.beforeExpand(node));
+		    children.push(entry);
 		}
+
+		pool_entry.set('children', children);
 		list.push(pool_entry);
 	    }
 
@@ -119,6 +104,58 @@ Ext.define('PBS.TapeManagement.BackupOverview', {
 		Proxmox.Utils.setErrorMask(view, error.toString());
 	    }
 	},
+
+	loadMediaSet: async function(node) {
+	    let me = this;
+	    let view = me.getView();
+
+	    Proxmox.Utils.setErrorMask(view, true);
+	    const media_set = node.data['media-set-uuid'];
+
+	    try {
+		let list = await PBS.Async.api2({
+		    method: 'GET',
+		    url: `/api2/extjs/tape/media/content`,
+		    params: {
+			'media-set': media_set,
+		    },
+		});
+
+		list.result.data.sort((a, b) => a.snapshot.localeCompare(b.snapshot));
+
+		for (let entry of list.result.data) {
+		    entry.text = entry.snapshot;
+		    entry.leaf = true;
+		    entry.children = [];
+		    let iconCls = PBS.Utils.get_type_icon_cls(entry.snapshot);
+		    if (iconCls !== '') {
+			entry.iconCls = `fa ${iconCls}`;
+		    }
+		    node.appendChild(entry);
+		}
+
+		if (list.result.data.length === 0) {
+		    node.set('leaf', true);
+		}
+
+		node.set('loaded', true);
+		Proxmox.Utils.setErrorMask(view, false);
+		node.expand();
+	    } catch (error) {
+		Proxmox.Utils.setErrorMask(view, error.toString());
+	    }
+	},
+
+	beforeExpand: function(node, e) {
+	    let me = this;
+	    if (node.isLoaded()) {
+		return true;
+	    }
+
+	    me.loadMediaSet(node);
+
+	    return false;
+	},
     },
 
     listeners: {
@@ -128,8 +165,8 @@ Ext.define('PBS.TapeManagement.BackupOverview', {
     store: {
 	data: [],
 	sorters: function(a, b) {
-	    if (a.data.leaf && b.data.leaf) {
-		return a.data.ctime - b.data.ctime;
+	    if (a.data.is_media_set && b.data.is_media_set) {
+		return a.data['media-set-ctime'] - b.data['media-set-ctime'];
 	    } else {
 		return a.data.text.localeCompare(b.data.text);
 	    }
@@ -161,14 +198,26 @@ Ext.define('PBS.TapeManagement.BackupOverview', {
     columns: [
 	{
 	    xtype: 'treecolumn',
-	    text: gettext('Pool/Group/Snapshot/Media Set'),
+	    text: gettext('Pool/Media Set/Snapshot'),
 	    dataIndex: 'text',
 	    sortable: false,
 	    flex: 3,
 	},
+	{
+	    text: gettext('Number of Tapes'),
+	    dataIndex: 'tapes',
+	    sortable: false,
+	    flex: 1,
+	},
+	{
+	    text: gettext('Tape Number'),
+	    dataIndex: 'seq-nr',
+	    sortable: false,
+	    flex: 1,
+	},
 	{
 	    text: gettext('Media Set UUID'),
-	    dataIndex: 'uuid',
+	    dataIndex: 'media-set-uuid',
 	    sortable: false,
 	    flex: 1,
 	},
-- 
2.20.1