golden/modules/details-page-sk/details-page-sk.js

/**
 * @module module/details-page-sk
 * @description <h2><code>details-page-sk</code></h2>
 *
 * Page to view details about a digest. This includes other digests similar to it and trace history.
 */
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
import { stateReflector } from 'common-sk/modules/stateReflector';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';

import '../digest-details-sk';
import { sendBeginTask, sendEndTask, sendFetchError } from '../common';

const template = (ele) => {
  if (!ele._didInitialLoad) {
    return html`<h1>Loading...</h1>`;
  }
  if (!ele._details.digest) {
    return html`
<div>
  Could not load details for digest ${ele._digest} and test "${ele._grouping}".
  <br>
  It might not exist or be too new so as not to be indexed yet.
</div>`;
  }
  return html`
<digest-details-sk .commits=${ele._commits} .changeListID=${ele._changeListID} .crs=${ele._crs}
                   .details=${ele._details}>
</digest-details-sk>
  `;
};

define('details-page-sk', class extends ElementSk {
  constructor() {
    super(template);

    this._grouping = '';
    this._digest = '';
    this._crs = '';
    this._changeListID = '';
    this._commits = [];
    this._details = {};
    this._didInitialLoad = false;

    this._stateChanged = stateReflector(
      /* getState */() => ({
        // provide empty values
        test: this._grouping, // TODO(kjlubick) rename test -> grouping
        digest: this._digest,
        changelist_id: this._changeListID,
        crs: this._crs,
      }), /* setState */(newState) => {
        if (!this._connected) {
          return;
        }
        // default values if not specified.
        this._grouping = newState.test || '';
        this._digest = newState.digest || '';
        this._changeListID = newState.changelist_id || '';
        this._crs = newState.crs || '';
        this._fetch();
        this._render();
      },
    );

    // Allows us to abort fetches if we fetch again.
    this._fetchController = null;
  }

  connectedCallback() {
    super.connectedCallback();
    this._render();
  }

  _fetch() {
    if (this._fetchController) {
      // Kill any outstanding requests
      this._fetchController.abort();
    }

    // Make a fresh abort controller for each set of fetches.
    // They cannot be re-used once aborted.
    this._fetchController = new AbortController();
    const extra = {
      signal: this._fetchController.signal,
    };
    sendBeginTask(this);

    const url = `/json/v1/details?test=${encodeURIComponent(this._grouping)}`
      + `&digest=${encodeURIComponent(this._digest)}&changelist_id=${this._changeListID}`
      + `&crs=${this._crs}`;
    fetch(url, extra)
      .then(jsonOrThrow)
      .then((obj) => {
        this._commits = obj.commits || [];
        this._details = obj.digest || {};
        this._didInitialLoad = true;
        this._render();
        sendEndTask(this);
      })
      .catch((e) => {
        this._commits = [];
        this._details = {};
        this._didInitialLoad = true;
        this._render();
        sendFetchError(this, e, 'digest-details');
      });
  }
});