autoroll/modules/arb-roll-history-sk/arb-roll-history-sk.ts

/**
 * @module autoroll/modules/arb-roll-history-sk
 * @description <h2><code>arb-roll-history-sk</code></h2>
 *
 * <p>
 * This element displays the roll history for a roller.
 * </p>
 */

import { html } from 'lit-html';
import { define } from '../../../elements-sk/modules/define';

import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import '../../../infra-sk/modules/human-date-sk';

import {
  AutoRollService,
  GetAutoRollService,
  GetRollsResponse,
  AutoRollCL,
  AutoRollCL_Result,
  GetStatusResponse,
} from '../rpc';

export class ARBRollHistorySk extends ElementSk {
  private static template = (ele: ARBRollHistorySk) => html`
  <a href="/r/${ele.roller}" class="small">back to roller status</a>
  <br/>
  <table>
  <tr>
    <th>Roll</th>
    <th>Creation Time</th>
    <th>Result</th>
  </tr>
  ${ele.history.map((roll: AutoRollCL) => html`
      <tr>
        <td>
          ${ele.issueURLBase != "" ? html`
            <a href="${ele.issueURL(roll)}" target="_blank">${roll.subject}</a>
          ` : html`
            ${roll.subject}
          ` }
        </td>
        <td><human-date-sk .date="${roll.created}" .diff="${true}"></human-date-sk></td>
        <td>
          <span class="${ele.rollClass(roll)}">${roll.result}</span>
        </td>
      </tr>
    `,
  )}
  </table>
  <br/>
  <button
    @click="${() => { ele.loadPrevious(); }}"
    ?disabled="${!ele.canLoadPrevious}"
    >Previous</button>
  <button
    @click="${() => { ele.loadNext(); }}"
    ?disabled="${!ele.canLoadNext}"
    >Next</button>
`;

  private history: AutoRollCL[] = [];
  private cursorHistory: string[] = [""]; // [..., prevCursor, currentCursor, nextCursor]
  private canLoadPrevious: boolean = false;
  private canLoadNext: boolean = false;
  private issueURLBase: string = "";
  private rpc: AutoRollService;

  constructor() {
    super(ARBRollHistorySk.template);
    this.rpc = GetAutoRollService(this);
  }

  connectedCallback() {
    super.connectedCallback();
    this.loadStatus();
    this.load("");
  }

  get roller() {
    return this.getAttribute('roller') || '';
  }

  set roller(v: string) {
    this.setAttribute('roller', v);
    this.cursorHistory = [""];
    this.load("");
  }

  // TODO(borenet): Share this code with arb-status-sk.
  private rollClass(roll: AutoRollCL) {
    if (!roll) {
      return 'unknown';
    }
    switch (roll.result) {
      case AutoRollCL_Result.SUCCESS:
        return 'fg-success';
      case AutoRollCL_Result.FAILURE:
        return 'fg-failure';
      case AutoRollCL_Result.IN_PROGRESS:
        return 'fg-unknown';
      case AutoRollCL_Result.DRY_RUN_SUCCESS:
        return 'fg-success';
      case AutoRollCL_Result.DRY_RUN_FAILURE:
        return 'fg-failure';
      case AutoRollCL_Result.DRY_RUN_IN_PROGRESS:
        return 'fg-unknown';
      default:
        return 'fg-unknown';
    }
  }

  private issueURL(roll: AutoRollCL) {
    return this.issueURLBase + roll.id;
  }

  private load(cursor: string) {
    const req = {
      rollerId: this.roller,
      cursor: cursor,
    };
    this.rpc.getRolls(req).then((resp: GetRollsResponse) => {
      this.history = resp.rolls!;
      this.cursorHistory.push(resp.cursor);
      this.canLoadNext = this.cursorHistory[this.cursorHistory.length - 1] != "";
      this.canLoadPrevious = this.cursorHistory.length > 2;
      this._render();
    });
  }

  private loadNext() {
    if (!this.canLoadNext) {
      return;
    }
    this.load(this.cursorHistory[this.cursorHistory.length - 1]);
  }

  private loadPrevious() {
    if (!this.canLoadPrevious) {
      return;
    }
    // [..., previous, current, next] => [..., previous]
    this.cursorHistory = this.cursorHistory.slice(0, this.cursorHistory.length - 2);
    this.load(this.cursorHistory[this.cursorHistory.length - 1]);
  }

  private loadStatus() {
    this.rpc.getStatus({ rollerId: this.roller }).then((resp: GetStatusResponse) => {
      this.issueURLBase = resp.status!.issueUrlBase;
      this._render();
    });
  }
}

define('arb-roll-history-sk', ARBRollHistorySk);