wba/frontend/src/js/page/wb-download-page.js

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';

function contentTypeFromFilename(name) {
  let ext = name.split('.');
  ext = ext[ext.length - 1].toUpperCase();
  if (ext === 'TXT')
    return 'text/plain; charset=utf-8';
  if (ext === 'JPG' || ext === 'JPEG')
    return 'image/jpeg';
  if (ext === 'PNG')
    return 'image/png';
  return 'application/octet-stream; charset=utf-8';
}

class WBDownloadPage extends Component {
  componentDidMount() {
    const { app, blocksBlobUrl, inline } = this.props;
    const { arvHost, arvToken } = app.state;

    let prom = new Promise((accept, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', blocksBlobUrl);
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4)
          return;
        if (xhr.status !== 200)
          reject(xhr);
        else
          accept(xhr);
      };
      xhr.responseType = 'blob';
      xhr.send();
    });
    prom = prom.then(xhr => xhr.response.text());

    let name, file;

    const { streamSaver, location } = window;
    streamSaver.mitm = location.protocol + '//' +
      location.hostname + (location.port ?
        ':' + location.port : '') + '/mitm.html';

    let fileStream;
    let writer;
    let done = false;

    prom = prom.then(text => {
      let _;

      [ _, _, name, file ] = JSON.parse(text);

      fileStream = streamSaver.createWriteStream(name, {
        size: file[1],
        inline: inline,
        contentType: contentTypeFromFilename(name)
      });
      writer = fileStream.getWriter();

      window.onunload = () => {
        writer.abort()
      };

      window.onbeforeunload = evt => {
        if (!done) {
          evt.returnValue = `Are you sure you want to leave?`;
        }
      };

      const filters = [
        ['service_type', '=', 'proxy']
      ];

      return makeArvadosRequest(arvHost, arvToken,
        '/arvados/v1/keep_services?filters=' +
        encodeURIComponent(JSON.stringify(filters)));
    });

    prom = prom.then(xhr => {
      const services = xhr.response.items;
      const i = Math.floor(Math.random() * services.length);
      const proxy = services[i];

      let prom_1 = new Promise(accept => accept());
      for (let k = 0; k < file[0].length; k++) {
        const loc = file[0][k];
        prom_1 = prom_1.then(() => makeArvadosRequest(
          proxy.service_host + ':' + proxy.service_port,
          arvToken,
          '/' + loc[0],
          { 'useSsl': proxy.service_ssl_flag,
            'responseType': 'arraybuffer' }
        ));
        prom_1 = prom_1.then(xhr_1 => {
          const blk = xhr_1.response.slice(loc[1], loc[2]);
          // const r = new Response(blk);
          // r.body.pipeTo(fileStream);
          writer.write(new Uint8Array(blk));
        });
      }
      return prom_1;
    });

    prom = prom.then(() => {
      writer.close();
      done = true;
    });
  }

  render() {
    return (
      <div class="container-fluid">
        <div class="card my-3">
          <div class="card-body">
            Downloading, please wait...
          </div>
        </div>
        <div class="alert alert-danger" role="alert">
          Do not close this window until the download is finished.
        </div>
      </div>
    );
  }
}

export default WBDownloadPage;