[pve-devel] [RFC manager 2/2] ui: dc: backup: Add detail dialog, disks included

[Aaron Lauterer]

Adds a 'Detail' button which opens a new dialog to show which disks
and mountpoints will be included the selected backup job.

Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
---

For this RFC the new detail dialog is a bit bare and only shows the
treepanel for the included status.

It probably would be nice to have a short summary above the tree panel
that shows the other details of the job as well. If we do not want that
we should find a better name instead of `Detail` to indicate that it
will only show what is included in the backup.

 www/manager6/Utils.js     |  23 +++++++
 www/manager6/dc/Backup.js | 124 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 146 insertions(+), 1 deletion(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index e61e2693..81127013 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -207,6 +207,29 @@ Ext.define('PVE.Utils', { utilities: {
 
     },
 
+    render_disk_backup_status: function(value) {
+	if (typeof value == 'undefined') {
+	    return "";
+	}
+
+	let iconCls = 'check-circle good';
+	let text = gettext('Yes');
+
+	switch (value) {
+	    case 'false':
+		iconCls = 'times-circle critical';
+		text = gettext('No');
+		break;
+	    case 'not possible':
+		iconCls = 'minus-circle warning';
+		text = gettext('Not possible');
+		break;
+	    default: //unknown
+	}
+
+	return '<i class="fa fa-' + iconCls + '"></i> ' + text;
+    },
+
     get_kvm_osinfo: function(value) {
 	var info = { base: 'Other' }; // default
 	if (value) {
diff --git a/www/manager6/dc/Backup.js b/www/manager6/dc/Backup.js
index 28275f01..f3f5faa1 100644
--- a/www/manager6/dc/Backup.js
+++ b/www/manager6/dc/Backup.js
@@ -377,6 +377,88 @@ Ext.define('PVE.dc.BackupEdit', {
 });
 
 
+Ext.define('PVE.dc.BackupDiskTree', {
+    extend: 'Ext.tree.Panel',
+    xtype: 'pveBackDiskTree',
+    stateful: true,
+    stateId: 'grid-node-backupinfo',
+    folderSort: true,
+    rootVisible: false,
+
+    columns: [
+	{
+	    xtype: 'treecolumn',
+	    text: gettext('Guest/Disk/Mount point'),
+	    dataIndex: 'id',
+	    flex: 1,
+	},
+	{
+	    text: gettext('Guest Type'),
+	    dataIndex: 'type',
+	    width: 120,
+	},
+	{
+	    text: gettext('Included in backups'),
+	    renderer: PVE.Utils.render_disk_backup_status,
+	    dataIndex: 'status',
+	    width: 150,
+	}
+    ],
+
+    reload: function() {
+	var me = this;
+	var sm = me.getSelectionModel();
+
+	Proxmox.Utils.API2Request({
+	    url: "/cluster/backup/" + me.jobid + "/included_disks",
+	    waitMsgTarget: me,
+	    method: 'GET',
+	    failure: function(response, opts) {
+		Proxmox.Utils.setErrorMask(me, response.htmlStatus);
+	    },
+	    success: function(response, oopts) {
+		sm.deselectAll();
+		me.setRootNode(response.result.data);
+		me.expandAll();
+	    }
+	});
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	if (!me.jobid) {
+	    throw "no job id specified";
+	}
+
+	var sm = Ext.create('Ext.selection.TreeModel', {});
+
+	Ext.apply(me, {
+	    selModel: sm,
+	    fields: ['id', 'type',
+		{
+		    type: 'string',
+		    name: 'iconCls',
+		    calculate: function(data) {
+			var txt = 'fa x-fa-tree fa-';
+			if (data.leaf) {
+			    return txt + 'hdd-o';
+			} else if (data.type === 'VM') {
+			    return txt + 'desktop';
+			} else if (data.type === 'CT') {
+			    return txt + 'cube';
+			}
+		    }
+		}
+	    ],
+	});
+
+	me.callParent();
+
+	me.reload();
+    }
+});
+
 Ext.define('PVE.dc.BackupView', {
     extend: 'Ext.grid.GridPanel',
 
@@ -417,6 +499,37 @@ Ext.define('PVE.dc.BackupView', {
 	    win.show();
 	};
 
+	var run_detail = function() {
+	    let rec = sm.getSelection()[0]
+	    if (!rec) {
+		return;
+	    }
+	    var me = this;
+	    var disktree = Ext.create('PVE.dc.BackupDiskTree', {
+		title: gettext('Included disks'),
+		flex: 1,
+		jobid: rec.data.id,
+	    });
+
+	    var win = Ext.create('Ext.window.Window', {
+		modal: true,
+		width: 800,
+		height: 500,
+		resizable: true,
+		layout: 'fit',
+		title: gettext('Backup Info'),
+		items:[{
+		    xtype: 'panel',
+		    region: 'center',
+		    layout: {
+			type: 'vbox',
+			align: 'stretch'
+		    },
+		    items: [disktree],
+		}]
+	    }).show();
+	};
+
 	var run_backup_now = function(job) {
 	    job = Ext.clone(job);
 
@@ -517,6 +630,13 @@ Ext.define('PVE.dc.BackupView', {
 	    }
 	});
 
+	var detail_btn = new Proxmox.button.Button({
+	    text: gettext('Detail'),
+	    disabled: true,
+	    selModel: sm,
+	    handler: run_detail
+	});
+
 	Proxmox.Utils.monStoreErrors(me, store);
 
 	Ext.apply(me, {
@@ -540,7 +660,9 @@ Ext.define('PVE.dc.BackupView', {
 		remove_btn,
 		edit_btn,
 		'-',
-		run_btn
+		run_btn,
+		'-',
+		detail_btn
 	    ],
 	    columns: [
 		{
-- 
2.20.1