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 class LoggingView {
  private logActionContainer: HTMLDivElement;
  private logControl: LogControl;
  private logList: LogList;
  private logListContainer: HTMLDivElement;
  private logViewActions: LogViewActions;

  constructor(private state: State, private root: HTMLElement) {
    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(this.state.shouldWrapLogs);
    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.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();
  }
}