aboutsummaryrefslogtreecommitdiff
path: root/pw_web/log-viewer/src/createLogViewer.ts
blob: 10ce61859faa2e118e1291f7c2d1f8aa7b433fe4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Copyright 2023 The Pigweed Authors
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

import { LogViewer as RootComponent } from './components/log-viewer';
import { StateStore, LocalStorageState } from './shared/state';
import { LogEntry } from '../src/shared/interfaces';
import { LogSource } from '../src/log-source';

import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';
import '@material/web/field/outlined-field.js';
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/textfield/filled-text-field.js';
import '@material/web/icon/icon.js';
import '@material/web/iconbutton/icon-button.js';
import '@material/web/menu/menu.js';
import '@material/web/menu/menu-item.js';

export function createLogViewer(
  logSource: LogSource,
  root: HTMLElement,
  state: StateStore = new LocalStorageState(),
) {
  const logViewer = new RootComponent(state);
  const logs: LogEntry[] = [];
  root.appendChild(logViewer);
  let lastUpdateTimeoutId: NodeJS.Timeout;

  // Define an event listener for the 'logEntry' event
  const logEntryListener = (logEntry: LogEntry) => {
    logs.push(logEntry);
    logViewer.logs = logs;
    if (lastUpdateTimeoutId) {
      clearTimeout(lastUpdateTimeoutId);
    }

    // Call requestUpdate at most once every 100 milliseconds.
    lastUpdateTimeoutId = setTimeout(() => {
      const updatedLogs = [...logs];
      logViewer.logs = updatedLogs;
    }, 100);
  };

  // Add the event listener to the LogSource instance
  logSource.addEventListener('logEntry', logEntryListener);

  // Method to destroy and unsubscribe
  return () => {
    logSource.removeEventListener('logEntry', logEntryListener);
  };
}