machine/modules/device-editor-sk/device-editor-sk.ts

/**
 * @module modules/device-editor-sk
 * @description <h2><code>device-editor-sk</code></h2>
 *
 * Displays a dialog to clear the device dimensions or edit them.
 *
 * It emits events when the user takes actions.
 */
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { $$ } from 'common-sk/modules/dom';
import dialogPolyfill from 'dialog-polyfill';
import 'elements-sk/styles/buttons';
import 'elements-sk/checkbox-sk';
import { SwarmingDimensions } from '../json';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';

// ClearDeviceEvent is emitted when the user wishes to clear the device.
export const ClearDeviceEvent = 'clear_device';

// ClearDeviceEvent is emitted when the user wishes to clear the device.
export const UpdateDimensionsEvent = 'update_dimensions';

export interface UpdateDimensionsDetails {
  machineID: string;
  sshUserIP: string;
  specifiedDimensions: {
    gpu: string[];
    cpu: string[];
  };
}

export class DeviceEditorSk extends ElementSk {
  private infoDialog: HTMLDialogElement | null = null;

  private confirmDialog: HTMLDialogElement | null = null;

  private machineID: string = '';

  private sshUserIP: string = '';

  private dimensions: SwarmingDimensions = {};

  private static template = (ele: DeviceEditorSk) => html`
  <dialog class="info">
    <h1>Edit device dimensions for ${ele.machineID}</h1>

    <div class="center">Set the below boxes to indicate a ChromeOS machine</div>
    <table>
      <tr>
        <td>User and IP address:</td>
        <td><input placeholder="e.g. root@skia-pixelbook-01" type=text
                   id="user_ip" .value=${ele.sshUserIP}></td>
      </tr>
      <tr>
        <td>GPU (from chrome://gpu/). Comma seperated if multiple.</td>
        <td><input type=text id="chromeos_gpu"
                   .value=${ele.displayDimensions('gpu')}></td>
      </tr>
      <tr>
        <td>CPU (x86,x86_64,arm,arm32,arm64). Comma seperated if multiple.</td>
        <td><input type=text id="chromeos_cpu"
                   .value=${ele.displayDimensions('cpu')}></td>
      </tr>
    </table>

    <div class=buttons>
      <button title="Make the machine forget it had any device attached."
              @click=${ele.confirmClearClick} class=clear>Clear Device Dimensions</button>
      <button title="Apply the above dimensions and user ip"
              @click=${ele.applyUpdates} class=apply>Apply Updates</button>
      <button title="Do nothing except close the dialog box. The machine remains unchanged."
              @click=${ele.cancelClick} class=cancel>Cancel</button>
    </div>
  </dialog>
  <dialog class="confirm">
    <div class="warning">
      Clearing the dimensions, especially for ChromeOS can be annoying to undo.
      <br>
      Are you sure?
      <br>
    </div>

    <div>
      <button title="Do nothing except close the dialog box. The machine remains unchanged."
              @click=${ele.cancelClick} class=cancel>Cancel</button>
      <button title="Make the machine forget it had any device attached."
              @click=${ele.clearClick} class=clear_yes_im_sure>Yes, clear the dimensions</button>
    </div>
  </dialog>
  `;

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

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
    this.infoDialog = this.querySelector<HTMLDialogElement>('dialog.info');
    this.confirmDialog = this.querySelector<HTMLDialogElement>('dialog.confirm');
    dialogPolyfill.registerDialog(this.infoDialog!);
    dialogPolyfill.registerDialog(this.confirmDialog!);
  }

  private applyUpdates(): void {
    const gpus = $$<HTMLInputElement>('input#chromeos_gpu', this)!.value.split(',');
    const cpus = $$<HTMLInputElement>('input#chromeos_cpu', this)!.value.split(',');

    this.dispatchEvent(new CustomEvent<UpdateDimensionsDetails>(UpdateDimensionsEvent, {
      bubbles: true,
      detail: {
        machineID: this.machineID,
        sshUserIP: $$<HTMLInputElement>('input#user_ip', this)!.value,
        specifiedDimensions: {
          gpu: gpus,
          cpu: cpus,
        },
      },
    }));
    this.infoDialog?.close();
  }

  private cancelClick(): void {
    this.infoDialog?.close();
    this.confirmDialog?.close();
  }

  private clearClick(): void {
    this.infoDialog?.close();
    this.confirmDialog?.close();
    this.dispatchEvent(new CustomEvent<string>(ClearDeviceEvent, {
      bubbles: true,
      detail: this.machineID,
    }));
  }

  private confirmClearClick(): void {
    this.infoDialog?.close();
    this.confirmDialog?.showModal();
  }

  private displayDimensions(key: string): string {
    // If sshUserIP isn't set, we don't want to give the wrong impression that we can
    // override the GPU/CPU for any device - we only set it for ChromeOS devices because
    // we can't easily interrogate them automatically.
    if (this.sshUserIP === '') {
      return '';
    }
    return this.dimensions![key]?.join(',') || '';
  }

  show(dims: SwarmingDimensions, sshUserIP: string): void {
    if (!dims || !dims.id) {
      return;
    }
    this.machineID = dims.id[0];
    this.dimensions = dims;
    this.sshUserIP = sshUserIP;
    this._render();
    this.infoDialog?.showModal();
  }
}

define('device-editor-sk', DeviceEditorSk);