[pve-devel] [PATCH widget-toolkit 1/1] fix #3971: Download button in the TaskViewer

[Daniel Tschlatscher]

The taskviewer now has a button which implements functionality for
downloading the current tasklog as a file. The code for saving the log
to a file was taken from the pve System Report class, adapted and
moved to its own function in the Utils file.

Also simplified the PVE-Subscription report file download to use the
newly created function in the Utils file. I simplified the "download
as file" calls for invokations in the FileBrowser UI as well.

Tested on Firefox 91.7.0esr and Chromium Version 99 in the PMG, PBS
and the PVE webinterfaces.

Signed-off-by: Daniel Tschlatscher <d.tschlatscher at proxmox.com>
---
 src/Utils.js              | 18 ++++++++++++++++++
 src/window/FileBrowser.js | 12 +++---------
 src/window/TaskViewer.js  | 16 ++++++++++++++--
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index 6a03057..8d4d1cc 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1272,6 +1272,24 @@ utilities: {
 	    .map(val => val.charCodeAt(0)),
 	);
     },
+
+    // Setting filename here when downloading from a remote url sometimes fails in chromium browsers
+    // because of a bug when using attribute download in conjunction with a self signed certificate.
+    // For more info see https://bugs.chromium.org/p/chromium/issues/detail?id=993362
+    downloadAsFile: function(source, fileName) {
+	let hiddenElement = document.createElement('a');
+	hiddenElement.href = source;
+	hiddenElement.target = '_blank';
+	if (fileName) {
+	    hiddenElement.download = fileName;
+	}
+	hiddenElement.click();
+    },
+
+    downloadStringAsFile: function(fileContent, fileName) {
+	let source = `data:attachment/text;charset=utf-8,${encodeURIComponent(fileContent)}`;
+	this.downloadAsFile(source, fileName);
+    },
 },
 
     singleton: true,
diff --git a/src/window/FileBrowser.js b/src/window/FileBrowser.js
index 99a7a85..2dac7c9 100644
--- a/src/window/FileBrowser.js
+++ b/src/window/FileBrowser.js
@@ -98,17 +98,11 @@ Ext.define("Proxmox.window.FileBrowser", {
 
 	    let data = selection[0].data;
 
-	    let atag = document.createElement('a');
-
-	    atag.download = data.text;
 	    let params = { ...view.extraParams };
 	    params.filepath = data.filepath;
-	    atag.download = data.text;
-	    if (data.type === 'd') {
-		atag.download += ".zip";
-	    }
-	    atag.href = me.buildUrl(view.downloadURL, params);
-	    atag.click();
+	    let filename = data.type === 'd' ? `${data.text}.zip` : data.text;
+
+	    Proxmox.Utils.downloadAsFile(me.buildUrl(view.downloadURL, params), filename);
 	},
 
 	fileChanged: function() {
diff --git a/src/window/TaskViewer.js b/src/window/TaskViewer.js
index 996a41b..e47a4d8 100644
--- a/src/window/TaskViewer.js
+++ b/src/window/TaskViewer.js
@@ -229,11 +229,22 @@ Ext.define('Proxmox.window.TaskViewer', {
 	    border: false,
 	});
 
+	let downloadBtn = new Ext.Button({
+	    text: gettext('Download'),
+	    iconCls: 'fa fa-download',
+	    handler: function() {
+		let url = '/api2/extjs/nodes/' +
+		    `${task.node}/tasks/${encodeURIComponent(me.upid)}/log?limit=0`;
+
+		Proxmox.Utils.downloadAsFile(url);
+	    },
+	});
+
 	let logView = Ext.create('Proxmox.panel.LogView', {
 	    title: gettext('Output'),
-	    tbar: [stop_btn2],
+	    tbar: [stop_btn2, '->', downloadBtn],
 	    border: false,
-	    url: "/api2/extjs/nodes/" + task.node + "/tasks/" + encodeURIComponent(me.upid) + "/log",
+	    url: `/api2/extjs/nodes/${task.node}/tasks/${encodeURIComponent(me.upid)}/log`,
 	});
 
 	me.mon(statstore, 'load', function() {
@@ -248,6 +259,7 @@ Ext.define('Proxmox.window.TaskViewer', {
 
 	    stop_btn1.setDisabled(status !== 'running');
 	    stop_btn2.setDisabled(status !== 'running');
+	    downloadBtn.setDisabled(status === 'running');
 	});
 
 	statstore.startUpdate();
-- 
2.30.2