From 965bd58693bfa6c62dbcc2a8ef78dea6b1bf29fe Mon Sep 17 00:00:00 2001
From: Dietmar Maurer <dietmar@proxmox.com>
Date: Tue, 23 Feb 2021 11:13:48 +0100
Subject: [PATCH] ui: use grid to display tape label information

---
 www/tape/ChangerStatus.js | 42 ++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js
index 03317c51..1fcbb34d 100644
--- a/www/tape/ChangerStatus.js
+++ b/www/tape/ChangerStatus.js
@@ -289,18 +289,42 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 	    let me = this;
 	    let drive = record.data.name;
 	    me.driveCommand(drive, 'read-label', function(response) {
-		let lines = [];
-		for (const [key, val] of Object.entries(response.result.data)) {
-		    lines.push(`${key}: ${val}`);
+		let list = [];
+		for (let [key, val] of Object.entries(response.result.data)) {
+		    if (key === 'ctime' || key === 'media-set-ctime') {
+			val = Proxmox.Utils.render_timestamp(val);
+		    }
+		    list.push({ key: key, value: val });
 		}
 
-		let txt = lines.join('<br>');
-
-		Ext.Msg.show({
+		Ext.create('Ext.window.Window', {
 		    title: gettext('Label Information'),
-		    message: txt,
-		    icon: undefined,
-		});
+		    modal: true,
+		    width: 600,
+		    height: 450,
+		    layout: 'fit',
+		    scrollable: true,
+		    items: [
+			{
+			    xtype: 'grid',
+			    store: {
+				data: list,
+			    },
+			    columns: [
+				{
+				    text: gettext('Property'),
+				    dataIndex: 'key',
+				    width: 120,
+				},
+				{
+				    text: gettext('Value'),
+				    dataIndex: 'value',
+				    flex: 1,
+				},
+			    ],
+			},
+		    ],
+		}).show();
 	    });
 	},