leasing/modules/leasing-task-sk/leasing-task-sk.ts

/**
 * @module module/leasing-task-sk
 * @description <h2><code>leasing-task-sk</code></h2>
 *
 * <p>
 *   Displays information about a single leasing task.
 * </p>
 *
 */

import { html, TemplateResult } from 'lit-html';
import { define } from '../../../elements-sk/modules/define';
import { $$ } from '../../../infra-sk/modules/dom';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';

import '../../../elements-sk/modules/error-toast-sk';
import '../../../elements-sk/modules/icons/folder-icon-sk';
import '../../../elements-sk/modules/icons/gesture-icon-sk';
import '../../../elements-sk/modules/icons/help-icon-sk';
import '../../../elements-sk/modules/icons/home-icon-sk';
import '../../../elements-sk/modules/icons/star-icon-sk';
import '../../../elements-sk/modules/nav-button-sk';
import '../../../elements-sk/modules/nav-links-sk';
import { device, getAKAStr, doImpl } from '../leasing';
import { Task, ExpireTaskRequest, ExtendTaskRequest } from '../json';

function displayTaskStatus(task: Task): string {
  if (task.done) {
    return 'Completed';
  }
  return 'Still Running';
}

function formatTimestamp(timestamp: string): string {
  if (!timestamp) {
    return timestamp;
  }
  const d = new Date(timestamp);
  return d.toLocaleString();
}

function displayLeaseStartTime(task: Task): string {
  return displayLeaseTime(task.swarmingTaskState, task.leaseStartTime);
}

function displayLeaseEndTime(task: Task): string {
  return displayLeaseTime(task.swarmingTaskState, task.leaseEndTime);
}

function displayLeaseTime(taskState: string, taskTime: string): string {
  if (taskState === 'PENDING') {
    return 'N/A';
  }
  return formatTimestamp(taskTime);
}

function displayDimensions(task: Task): TemplateResult {
  let dims = task.osType;
  if (task.deviceType !== '') {
    dims += ` - ${device(task.deviceType)}${getAKAStr(task.deviceType)}`;
  }
  return html` <br />
    Dimensions: ${dims}`;
}

function displayBotId(task: Task): TemplateResult {
  if (!task.botId) {
    return html``;
  }
  return html`
    <br/>
    Bot Id: <a href="https://${task.swarmingServer}/bot?id=${task.botId}" target="_blank">${task.botId}</a
  `;
}

function displaySwarmingTaskForIsolates(task: Task): TemplateResult {
  if (!task.taskIdForIsolates) {
    return html``;
  }
  return html`
    <br/>
    Task for Isolates: <a href="https://${task.swarmingServer}/task?id=${task.taskIdForIsolates}" target="_blank">Link</a
  `;
}

function displaySwarmingTask(task: Task): TemplateResult {
  if (!task.swarmingTaskId) {
    return html`Processing`;
  }
  return html`
    <a href="https://${task.swarmingServer}/task?id=${task.swarmingTaskId}" target="_blank">Link</a
  `;
}

export class LeasingTaskSk extends ElementSk {
  private leasingTask = {} as Task;

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

  private static template = (ele: LeasingTaskSk) => html`
    <table class="tasktable">
      <col width="50%" />
      <col width="50%" />

      <tr class="headers">
        <td colspan="2" class="task-title">
          Task - ${ele.leasingTask.description} - ${ele.leasingTask.requester} -
          ${displayTaskStatus(ele.leasingTask)}
        </td>
      </tr>

      <tr>
        <td>Created: ${formatTimestamp(ele.leasingTask.created)}</td>
        <td>
          Lease Start Time: ${displayLeaseStartTime(ele.leasingTask)}
          <br />
          Lease End Time: ${displayLeaseEndTime(ele.leasingTask)}
        </td>
      </tr>

      <tr>
        <td>
          Pool: ${ele.leasingTask.pool} ${displayDimensions(ele.leasingTask)}
          ${displayBotId(ele.leasingTask)}
          ${displaySwarmingTaskForIsolates(ele.leasingTask)}
        </td>
        <td>
          Task Log:${displaySwarmingTask(ele.leasingTask)}
          <br />
          Task Status: ${ele.leasingTask.swarmingTaskState}
        </td>
      </tr>

      ${LeasingTaskSk.displayLeaseButtonRow(ele)}
    </table>
  `;

  private static displayLeaseButtonRow(ele: LeasingTaskSk) {
    const task = ele.leasingTask;
    if (task.done || task.swarmingTaskState === 'PENDING') {
      return '';
    }
    return html`
      <tr>
        <td>
          <select id="duration">
            <option value="1" title="1 Hour">1hr</option>
            <option value="2" title="2 Hours">2hr</option>
            <option value="6" title="6 Hours">6hr</option>
            <option value="23" title="23 Hours">23hr</option>
          </select>
          <button raised @click=${ele.onExtend}>Extend Lease</button>
        </td>
        <td>
          <button raised @click=${ele.onExpire}>Expire Lease</button>
        </td>
      </tr>
    `;
  }

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

  disconnectedCallback(): void {
    super.disconnectedCallback();
  }

  private onExtend(): void {
    const confirmed = window.confirm('Proceed with extending leasing task?');
    if (!confirmed) {
      return;
    }
    const detail: ExtendTaskRequest = {
      task: this.leasingTask.datastoreId,
      duration: parseInt(
        ($$('#duration', this) as HTMLInputElement)!.value,
        10
      ),
    };
    doImpl('/_/extend_leasing_task', detail, () => {
      window.location.href = '/my_leases';
    });
  }

  private onExpire(): void {
    const confirmed = window.confirm('Proceed with expiring leasing task?');
    if (!confirmed) {
      return;
    }
    const detail: ExpireTaskRequest = {
      task: this.leasingTask.datastoreId,
    };
    doImpl('/_/expire_leasing_task', detail, () => {
      window.location.href = '/my_leases';
    });
  }

  /** @prop task {Task} Leasing task object. */
  get task(): Task {
    return this.leasingTask;
  }

  set task(val: Task) {
    this.leasingTask = val;
    this._render();
  }
}

define('leasing-task-sk', LeasingTaskSk);