perf/modules/json-source-sk/json-source-sk.ts

/**
 * @module modules/json-source-sk
 * @description <h2><code>json-source-sk</code></h2>
 *
 * Displays buttons that, when pressed, retrieve and show the JSON file that
 * was ingested for the point in the trace identified by commit id and trace
 * id.
 *
 */
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { $$ } from 'common-sk/modules/dom';
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
import { SpinnerSk } from 'elements-sk/spinner-sk/spinner-sk';
import { errorMessage } from '../errorMessage';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { CommitDetailsRequest, CommitNumber } from '../json';

import 'elements-sk/spinner-sk';
import 'elements-sk/styles/buttons';

export class JSONSourceSk extends ElementSk {
  private _json: string;

  private _cid: CommitNumber = -1;

  private _traceid: string;

  private _spinner: SpinnerSk | null = null;

  constructor() {
    super(JSONSourceSk.template);
    this._json = '';
    this._traceid = '';
  }

  private static template = (ele: JSONSourceSk) => html`
    <div id="controls">
      <button @click=${ele._loadSource}>View Source File</button>
      <button @click=${ele._loadSourceSmall}
        >View Source File Without Results</button
      >
      <spinner-sk id="spinner"></spinner-sk>
    </div>
    <pre>${ele._json}</pre>
  `;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
    this._spinner = $$('#spinner', this);
  }

  /** @prop cid - The Commit ID. */
  get cid(): number {
    return this._cid;
  }

  set cid(val: number) {
    this._cid = val;
    this._json = '';
    this._render();
  }

  /** @prop traceid - The ID of the trace. */
  get traceid(): string {
    return this._traceid;
  }

  set traceid(val: string) {
    this._traceid = val;
    this._json = '';
    this._render();
  }

  private _loadSource() {
    this._loadSourceImpl(false);
  }

  private _loadSourceSmall() {
    this._loadSourceImpl(true);
  }

  private _loadSourceImpl(isSmall: boolean) {
    if (this._spinner!.active === true) {
      return;
    }
    if (!this.traceid) {
      return;
    }
    if (this.cid === -1) {
      return;
    }
    const body: CommitDetailsRequest = {
      cid: this.cid,
      traceid: this.traceid,
    };
    this._spinner!.active = true;
    let url = '/_/details/';
    if (isSmall) {
      url += '?results=false';
    }
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    })
      .then(jsonOrThrow)
      .then((json) => {
        this._spinner!.active = false;
        this._json = JSON.stringify(json, null, '  ');
        this._render();
      })
      .catch((e) => {
        this._spinner!.active = false;
        errorMessage(e);
      });
  }
}

define('json-source-sk', JSONSourceSk);