status/modules/tree-status-sk/tree-status-sk.ts

/**
 * @module modules/tree-status-sk
 * @description <h2><code>tree-status-sk</code></h2>
 *
 * Custom element for displaying tree status and tracking rotations.
 * @evt tree-status-update - Periodic event for updated tree-status and rotation information.
 *                           detail is of type TreeStatus.
 *
 * @property baseURL: string - The base URL for getting tree status of specific repos.
 * @property repo: string - The repository we are currently looking at.
 */
import { html } from 'lit/html.js';
import { define } from '../../../elements-sk/modules/define';
import { diffDate } from '../../../infra-sk/modules/human';
import { jsonOrThrow } from '../../../infra-sk/modules/jsonOrThrow';
import { errorMessage } from '../../../elements-sk/modules/errorMessage';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import '../../../elements-sk/modules/icons/star-icon-sk';
import '../../../elements-sk/modules/icons/gesture-icon-sk';
import '../../../elements-sk/modules/icons/android-icon-sk';
import '../../../elements-sk/modules/icons/devices-other-icon-sk';

export interface Rotation {
  role: string;
  currentUrl: string;
  docLink: string;
  icon: string;
  name: string;
}
export interface TreeStatus {
  rotations: Array<Rotation>;
  status: TreeStatusResp;
}
// Type of rotations-update event.detail.
declare global {
  interface DocumentEventMap {
    'tree-status-update': CustomEvent<TreeStatus>;
  }
}

const chopsRotationProxyUrl = 'https://chrome-ops-rotation-proxy.appspot.com/current/';

// This response structure comes from chrome-ops-rotation-proxy.appspot.com.
// We do not have access to the structure to generate TS.
export interface RoleResp {
  emails: string[];
}
// Response structure from tree-status.skia.org.
// TODO(westont): Update once tree-status is migrated to generated TS
export interface TreeStatusResp {
  username?: string;
  date?: string;
  message?: string;
  general_state?: string;
}

export class TreeStatusSk extends ElementSk {
  private _baseURL: string = '';

  private _repo: string = '';

  private treeStatus: TreeStatus = {
    status: { message: 'Open', general_state: 'open' },
    rotations: [
      {
        role: 'Skia',
        currentUrl: `${chopsRotationProxyUrl}grotation:skia-gardener`,
        docLink: 'https://rotations.corp.google.com/rotation/4699606003744768',
        icon: 'star',
        name: '',
      },
      {
        role: 'GPU',
        currentUrl: `${chopsRotationProxyUrl}grotation:skia-gpu-gardener`,
        docLink: 'https://rotations.corp.google.com/rotation/6176639586140160',
        icon: 'gesture',
        name: '',
      },
      {
        role: 'Android',
        currentUrl: `${chopsRotationProxyUrl}grotation:skia-android-gardener`,
        docLink: 'https://rotations.corp.google.com/rotation/5296436538245120',
        icon: 'android',
        name: '',
      },
      {
        role: 'Infra',
        currentUrl: `${chopsRotationProxyUrl}grotation:skia-infra-gardener`,
        docLink: 'https://rotations.corp.google.com/rotation/4617277386260480',
        icon: 'devices-other',
        name: '',
      },
    ],
  };

  private static template = (el: TreeStatusSk) => html`
    <div>
      <span>
        <a href="${el.baseURL}/${el.repo}" target="_blank" rel="noopener noreferrer"
          >${el.treeStatus.status.message ? el.treeStatus.status.message : '(loading)'}</a
        >
      </span>
      <span class="nowrap">
        [${shortName(el.treeStatus.status.username)}
        ${el.treeStatus.status.date ? diffDate(`${el.treeStatus.status.date}UTC`) : 'eons'} ago]
      </span>
    </div>
  `;

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

  connectedCallback(): void {
    super.connectedCallback();
    this._upgradeProperty('baseURL');
    this._upgradeProperty('repo');

    this.requestDesktopNotificationPermission();
    this._render();
    this.refresh();
  }

  private requestDesktopNotificationPermission(): void {
    if (Notification && Notification.permission === 'default') {
      Notification.requestPermission();
    }
  }

  private sendDesktopNotification(treeStatus: TreeStatusResp): void {
    // Do not notify if status window is already in focus.
    if (window.parent.document.hasFocus()) {
      return;
    }

    const msg = `${treeStatus.message} [${shortName(treeStatus.username)} ${
      treeStatus.date ? diffDate(`${treeStatus.date}UTC`) : 'eons'
    } ago]`;
    const notification = new Notification('Skia Tree Status Notification', {
      body: msg,
      // 'tag' handles multi-tab scenarios. When multiple tabs are open then
      // only one notification is sent for the same alert.
      tag: `statusNotification${treeStatus}`,
    });
    // onclick moves focus to the status tab and closes the notification.
    notification.onclick = () => {
      window.parent.focus();
      window.focus(); // Supports older browsers.
      notification.close();
    };
    setTimeout(notification.close.bind(notification), 10000);
  }

  private refresh() {
    if (!this.baseURL || !this.repo) {
      // Cannot refresh with baseURL or repo missing.
      return;
    }
    const fetches = (
      this.treeStatus.rotations.map((role) =>
        fetch(role.currentUrl, { method: 'GET' })
          .then(jsonOrThrow)
          .then((json: RoleResp) => {
            // Skia gardener rotations only have one entry.
            role.name = shortName(json.emails[0]);
          })
          .catch(errorMessage)
      ) as Array<Promise<any>>
    ).concat(
      fetch(`${this.baseURL}/${this.repo}/current`, {
        method: 'GET',
        credentials: 'include',
      })
        .then(jsonOrThrow)
        .then((json: TreeStatusResp) => {
          if (
            Notification.permission === 'granted' &&
            json.message !== this.treeStatus.status.message
          ) {
            // If the received message is different send a chrome notification.
            this.sendDesktopNotification(json);
          }
          this.treeStatus.status = json;
        })
        .catch(errorMessage)
    );

    Promise.all(fetches).finally(() => {
      this._render();
      this.dispatchEvent(
        new CustomEvent<TreeStatus>('tree-status-update', {
          bubbles: true,
          detail: this.treeStatus,
        })
      );
      window.setTimeout(() => this.refresh(), 60 * 1000);
    });
  }

  get baseURL(): string {
    return this._baseURL;
  }

  set baseURL(v: string) {
    this._baseURL = v;
    this._render();
    this.refresh();
  }

  get repo(): string {
    return this._repo;
  }

  set repo(v: string) {
    this._repo = v.toLowerCase();
    if (this._repo === 'infra') {
      // Special case: Status uses "infra" instead of "buildbot", but we need
      // the real repo name to fetch it's tree status.
      this._repo = 'buildbot';
    }
    this._render();
    this.refresh();
  }
}

function shortName(name?: string) {
  return name ? name.split('@')[0] : '';
}

define('tree-status-sk', TreeStatusSk);