Programatic download/export for workflow history (#546)

* handle export for cross origin

* lint fix

* fix href for export btn

* remove wrong query params to the export get

* change export link to use onclick

* fix blob content

* parse status query param to int (#544)

Co-authored-by: Assem Hafez <assem.a.hafez@gmail.com>

* move chai-spies to dev dependecies

* fix lint

* preserve event target reference in the promise context

* fix lint

---------

Co-authored-by: Assem Hafez <137278762+Assem-Uber@users.noreply.github.com>

client/containers/workflow-history/component.vue

@@ -43,6 +43,8 @@ import {
  SelectInput,
 } from '~components';
 
+import { httpService } from '~services';
+
 export default {
  name: 'history',
  data() {
@@ -88,7 +90,6 @@ export default {
  'workflowHistoryEventHighlightList',
  'workflowHistoryEventHighlightListEnabled',
  'workflowId',
- 'origin',
  ],
  created() {
  this.onResizeWindow = debounce(() => {
@@ -314,6 +315,21 @@ export default {
  });
  }
  },
+ exportHistory(e) {
+ const target = e.target;
+
+ httpService.get(this.baseAPIURL + '/export').then(historyJson => {
+ const blob = new Blob([JSON.stringify(historyJson)], {
+ type: 'application/json',
+ });
+
+ target.href = window.URL.createObjectURL(blob);
+ target.download = this.exportFilename;
+ target.click();
+ });
+
+ return false;
+ },
  },
  watch: {
  eventId(eventId) {
@@ -398,10 +414,7 @@ export default {
  class="show-timeline-btn"
  >{{ graphView === GRAPH_VIEW_TIMELINE ? 'hide' : 'show' }} timeline</a
  >
- <a
- class="export"
- :href="origin + baseAPIURL + '/export'"
- :download="exportFilename"
+ <a class="export" href="#" @click.once.prevent="exportHistory"
  >Export</a
  >
  </div>

client/containers/workflow-history/connector.js

@@ -21,11 +21,9 @@
 
 import { connect } from 'vuex-connect';
 import { WORKFLOW_EXECUTION_PENDING_TASK_COUNT } from '../workflow/getter-types';
-import { DOMAIN_CROSS_ORIGIN } from '../domain/getter-types';
 
 const gettersToProps = {
  pendingTaskCount: WORKFLOW_EXECUTION_PENDING_TASK_COUNT,
- origin: DOMAIN_CROSS_ORIGIN,
 };
 
 const stateToProps = {

client/test/index.js

@@ -72,6 +72,7 @@ chai.should();
 chai.use(require('chai-dom'));
 chai.use(require('chai-string'));
 chai.use(require('chai-things'));
+chai.use(require('chai-spies'));
 
 require('nathanboktae-browser-test-utils');
 

client/test/scenario.js

@@ -365,6 +365,14 @@ Scenario.prototype.withFullHistory = function withFullHistory(events, options) {
  .withHistory(parsedEvents.slice(third + third), false, options);
 };
 
+Scenario.prototype.withExportHistory = function withExportHistory(events) {
+ const jsonHistoryEvents = getFixture('history.emailRun1', events);
+
+ this.api.getOnce(`${this.execApiBase()}/export`, jsonHistoryEvents);
+
+ return this;
+};
+
 Scenario.prototype.withQuery = function withQuery(query) {
  this.api.getOnce(
  `${this.execApiBase()}/query`,

client/test/workflow.test.js

@@ -505,13 +505,13 @@ describe('Workflow', () => {
  ...o,
  });
 
- scenario.withFullHistory(opts.events);
+ scenario.withFullHistory(opts.events).withExportHistory(opts.events);
 
  const historyEl = await scenario
  .render(opts.attach)
  .waitUntilExists('section.execution.ready');
 
- return [historyEl, scenario];
+ return [historyEl, scenario, opts];
  }
  it('should pick default view format from localstorage if exists ', async function test() {
  localStorage.setItem('ci-test:history-viewing-format', 'json');
@@ -570,19 +570,23 @@ describe('Workflow', () => {
  });
 
  it('should allow downloading the full history via export', async function test() {
- const [, scenario] = await historyTest(this.test);
+ const [, scenario, opts] = await historyTest(this.test);
  const exportEl = await scenario.vm.$el.waitUntilExists(
  'section.history .controls a.export'
  );
+ const downloadLink = 'javascript:void(0);'; //prevent createing a redirectable link
 
- exportEl.should.have.attr(
- 'href',
- 'http://localhost:8090/api/domains/ci-test/workflows/email-daily-summaries/emailRun1/export'
- );
- exportEl.should.have.attr(
- 'download',
- 'email daily summaries - emailRun1.json'
- );
+ chai.spy.on(window.URL, 'createObjectURL', () => downloadLink);
+ exportEl.trigger('click');
+
+ await retry(() => {
+ window.URL.createObjectURL.should.have.been.called();
+ exportEl.should.have.attr('href', downloadLink);
+ exportEl.should.have.attr(
+ 'download',
+ 'email daily summaries - emailRun1.json'
+ );
+ });
  });
 
  describe('Compact View', function describeTest() {

package.json

@@ -109,6 +109,7 @@
  "babel-jest": "^24.9.0",
  "chai": "^4.1.2",
  "chai-dom": "^1.7.0",
+ "chai-spies": "^1.1.0",
  "chai-string": "^1.5.0",
  "chai-things": "^0.2.0",
  "eslint": "^7.32.0",