webviews/logging/components/view.ts

// Copyright 2022 The Fuchsia Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import { LogControl } from './log_control';
import { LogViewActions } from './log_view_actions';
import { FfxLogData } from '../src/log_data';
import { State } from '../src/state';
import { LogList } from './log_list';

export const RESUMING_LOG_STREAMING_LOG = 'Resuming log streaming, press [pause icon] to pause.';
export const PAUSING_LOG_STREAMING_LOG = 'Playback has been paused, press [play icon] to resume.';

export type ExternalActionRequestEvent =
  | { type: 'pause-log-streaming' }
  | { type: 'resume-log-streaming' };

export class LoggingView extends EventTarget {
  private logActionContainer: HTMLDivElement;
  private logControl: LogControl;
  private logList: LogList;
  private logListContainer: HTMLDivElement;
  private logViewActions: LogViewActions;

  public static readonly externalActionRequestEvent: string = 'external-action-request-event';

  constructor(private state: State, private root: HTMLElement) {
    super();
    this.logList = new LogList(state);

    this.logControl = new LogControl(this.state.currentFilterText);
    this.logControl.addEventListener(LogControl.filterChangeEvent, (e) => {
      const event = e as CustomEvent;
      const { filter, text } = event.detail;
      this.state.registerFilter(filter, text);
    });

    this.logViewActions = new LogViewActions({
      wrappingLogs: this.state.shouldWrapLogs,
      /**
       * TODO(fxbug.dev/109719): make this behavior persisted and automatic
       * with focus changes
       */
      playActive: true
    });
    this.logViewActions.addEventListener(LogViewActions.clearRequestedEvent, (e) => {
      this.logList.reset();
    });
    this.logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
      const event = e as CustomEvent;
      const { wrapLogs } = event.detail;
      this.logList.logWrapping = wrapLogs;
      this.state.shouldWrapLogs = wrapLogs;
    });
    this.logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
      const event = e as CustomEvent;
      const { playActive } = event.detail;
      this.onPlayPauseChangeEvent(playActive);
    });

    this.logActionContainer = document.createElement('div');
    this.logActionContainer.id = 'log-action-container';
    this.logListContainer = document.createElement('div');
    this.logListContainer.id = 'log-list-container';

    this.root.appendChild(this.logActionContainer);
    this.logActionContainer.appendChild(this.logControl);
    this.logActionContainer.appendChild(this.logViewActions);

    this.root.appendChild(this.logListContainer);
    this.logListContainer.appendChild(this.logList.element);
  }

  /**
   * Appends a log to the current list of logs
   */
  public addLog(log: FfxLogData) {
    this.logList.addLog(log);
  }

  /**
   * Resets the state and contents of the webview to contain nothing.
   * The persistent state is maintained as that represents user selections.
   */
  public reset() {
    this.state.reset();
    this.logList.reset();
    this.logControl.reset();
  }

  /**
   * Handles a play/pause event emitted by the log actions view.
   * @param playActive whether or not the streaming of logs is active
   */
  private onPlayPauseChangeEvent(playActive: boolean) {
    const detail: ExternalActionRequestEvent =
      playActive
        ? { type: 'resume-log-streaming' }
        : { type: 'pause-log-streaming' };
    this.dispatchEvent(new CustomEvent(LoggingView.externalActionRequestEvent, {
      detail,
    }));

    this.logList.addLog({
      data: {
        // eslint-disable-next-line @typescript-eslint/naming-convention
        ViewerEvent: playActive
          ? RESUMING_LOG_STREAMING_LOG
          : PAUSING_LOG_STREAMING_LOG
      },
      timestamp: Date.now(),
      version: 0
    });
  }
}