Merge pull request #9074 from Liraim/fix_download

ui: "View Raw File" download using JS instead simple link

ui/app/components/fs/file.js

@@ -52,10 +52,15 @@ export default class File extends Component {
   isStreaming = false;
 
   @computed('allocation.id', 'taskState.name', 'file')
-  get catUrl() {
+  get catUrlWithoutRegion() {
     const taskUrlPrefix = this.taskState ? `${this.taskState.name}/` : '';
     const encodedPath = encodeURIComponent(`${taskUrlPrefix}${this.file}`);
-    let apiPath = `/v1/client/fs/cat/${this.allocation.id}?path=${encodedPath}`;
+    return `/v1/client/fs/cat/${this.allocation.id}?path=${encodedPath}`;
+  }
+
+  @computed('catUrlWithoutRegion')
+  get catUrl() {
+    let apiPath = this.catUrlWithoutRegion;
     if (this.system.shouldIncludeRegion) {
       apiPath += `&region=${this.system.activeRegion}`;
     }
@@ -160,4 +165,34 @@ export default class File extends Component {
   failoverToServer() {
     this.set('useServer', true);
   }
+
+  @action
+  downloadFile() {
+    const timing = this.useServer ? this.serverTimeout : this.clientTimeout;
+    const fileDownload = url =>
+      RSVP.race([this.token.authorizedRequest(url), timeout(timing)])
+        .then(
+          response => {
+            if (!response || !response.ok) {
+              this.nextErrorState(response);
+            }
+            return response;
+          },
+          error => this.nextErrorState(error)
+        )
+        .then(response => response.blob())
+        .then(blob => {
+          var url = window.URL.createObjectURL(blob);
+          var a = document.createElement('a');
+          a.href = url;
+          a.target = '_blank';
+          a.rel = 'noopener noreferrer';
+          a.download = this.file;
+          document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
+          a.click();
+          a.remove(); //afterwards we remove the element again
+          window.URL.revokeObjectURL(url);
+        });
+    fileDownload(this.catUrlWithoutRegion);
+  }
 }

ui/app/templates/components/fs/file.hbs

@@ -9,7 +9,7 @@
   <span class="pull-right">
 
     {{#unless this.fileTypeIsUnknown}}
-      <a data-test-log-action="raw" class="button is-white is-compact" href="{{this.catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
+      <button data-test-log-action="raw" class="button is-white is-compact" onclick={{action "downloadFile"}} type="button">View Raw File</button>
     {{/unless}}
     {{#if (and this.isLarge this.isStreamable)}}
       <button data-test-log-action="head" class="button is-white is-compact" onclick={{action "gotoHead"}} type="button">Head</button>
@@ -32,7 +32,7 @@
       <h3 class="empty-message-headline">Unsupported File Type</h3>
       <p class="empty-message-body message">The Nomad UI could not render this file, but you can still view the file directly.</p>
       <p class="empty-message-body">
-        <a data-test-log-action="raw" class="button is-light" href="{{this.catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
+        <button data-test-log-action="raw" class="button is-light" onclick={{action "downloadFile"}} type="button">View Raw File</button>
       </p>
     </div>
   {{/if}}

ui/tests/integration/components/fs/file-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { find, render, settled } from '@ember/test-helpers';
+import { find, click, render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import Pretender from 'pretender';
 import { logEncode } from '../../../../mirage/data/logs';
@@ -140,21 +140,17 @@ module('Integration | Component | fs/file', function(hooks) {
     this.setProperties(props);
 
     await render(commonTemplate);
-
-    const rawLink = find('[data-test-log-action="raw"]');
-    assert.equal(
-      rawLink.getAttribute('href'),
-      `/v1/client/fs/cat/${props.allocation.id}?path=${encodeURIComponent(
-        `${props.taskState.name}/${props.file}`
-      )}`,
-      'Raw link href is correct'
-    );
-
-    assert.equal(rawLink.getAttribute('target'), '_blank', 'Raw link opens in a new tab');
-    assert.equal(
-      rawLink.getAttribute('rel'),
-      'noopener noreferrer',
-      'Raw link rel correctly bars openers and referrers'
+    click('[data-test-log-action="raw"]');
+    await settled();
+    assert.ok(
+      this.server.handledRequests.find(
+        ({ url: url }) =>
+          url ===
+          `/v1/client/fs/cat/${props.allocation.id}?path=${encodeURIComponent(
+            `${props.taskState.name}/${props.file}`
+          )}`
+      ),
+      'Request to file is made'
     );
   });
 
@@ -168,13 +164,17 @@ module('Integration | Component | fs/file', function(hooks) {
     await this.system.get('regions');
     await render(commonTemplate);
 
-    const rawLink = find('[data-test-log-action="raw"]');
-    assert.equal(
-      rawLink.getAttribute('href'),
-      `/v1/client/fs/cat/${props.allocation.id}?path=${encodeURIComponent(
-        `${props.taskState.name}/${props.file}`
-      )}&region=${region}`,
-      'Raw link href includes the active region from local storage'
+    click('[data-test-log-action="raw"]');
+    await settled();
+    assert.ok(
+      this.server.handledRequests.find(
+        ({ url: url }) =>
+          url ===
+          `/v1/client/fs/cat/${props.allocation.id}?path=${encodeURIComponent(
+            `${props.taskState.name}/${props.file}`
+          )}&region=${region}`
+      ),
+      'Request to file is made with region'
     );
   });