ct/modules/runs-history-summary-sk/runs-history-summary-sk.ts

/**
 * @fileoverview The bulk of the Runs History page.
 */

import '../../../elements-sk/modules/tabs-sk';

import { html } from 'lit-html';
import { DomReady } from '../../../infra-sk/modules/dom';
import { fromObject } from '../../../infra-sk/modules/query';
import { jsonOrThrow } from '../../../infra-sk/modules/jsonOrThrow';
import { define } from '../../../elements-sk/modules/define';
import { errorMessage } from '../../../elements-sk/modules/errorMessage';

import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { getCtDbTimestamp } from '../ctfe_utils';

import { CompletedTask, CompletedTaskResponse } from '../json';

export class RunsHistorySummarySk extends ElementSk {
  private _tasks: CompletedTask[] = [];

  private _uniqueUsers: number = 0;

  private _period: number = 0;

  constructor() {
    super(RunsHistorySummarySk.template);
  }

  private static template = (el: RunsHistorySummarySk) => html`
    <div>
      <h4>CT Runs Summary</h4>
      <tabs-sk
        @tab-selected-sk=${(e: CustomEvent) =>
          (el.period = [7, 30, 365, 0][e.detail.index])}>
        <button>Last Week</button>
        <button>Last Month</button>
        <button>Last Year</button>
        <button>All Time</button>
      </tabs-sk>
      <br /><br />
      <span>
        ${el._tasks.length} runs by ${el._uniqueUsers} users
        ${el.period > 0 ? `last ${el.period} days` : 'all time'}
      </span>
      <br />
      <table
        class="queue surface-themes-sk secondary-links runssummary"
        id="runssummary">
        <tr>
          <th>Type</th>
          <th>User</th>
          <th>Description</th>
          <th>Completed</th>
        </tr>
        ${el._tasks.map((task: CompletedTask) =>
          RunsHistorySummarySk.taskRowTemplate(task)
        )}
      </table>
    </div>
  `;

  private static taskRowTemplate = (task: CompletedTask) => html`
    <tr>
      <td>${task.type}</td>
      <td>${task.username}</td>
      <td>${task.description}</td>
      <td class="nowrap">${task.ts_completed}</td>
    </tr>
  `;

  connectedCallback(): void {
    super.connectedCallback();
    // We wait for everything to load so scaffolding event handlers are
    // attached.
    DomReady.then(() => {
      this.period = 7; // kicks off the reload.
    });
  }

  /**
   * @prop {Number} period - Number of days to look back for tasks.
   */
  get period(): number {
    return this._period;
  }

  set period(val: number) {
    this._period = val;
    this._reload();
  }

  _reload(): void {
    this.dispatchEvent(new CustomEvent('begin-task', { bubbles: true }));
    let completedAfter;
    if (this._period > 0) {
      const d = new Date();
      d.setDate(d.getDate() - this._period);
      completedAfter = getCtDbTimestamp(d);
    } else {
      completedAfter = getCtDbTimestamp(new Date(0));
    }

    const queryParams = {
      completed_after: completedAfter,
      exclude_ctadmin_tasks: true,
    };
    fetch(`/_/completed_tasks?${fromObject(queryParams)}`, { method: 'POST' })
      .then(jsonOrThrow)
      .then((json: CompletedTaskResponse) => {
        this._tasks = json.completed_tasks!;
        this._uniqueUsers = json.unique_users;
      })
      .catch((e) => {
        errorMessage(e);
      })
      .finally(() => {
        this._render();
        this.dispatchEvent(new CustomEvent('end-task', { bubbles: true }));
      });
  }
}

define('runs-history-summary-sk', RunsHistorySummarySk);