xref: /aosp_15_r20/external/pigweed/pw_web/log-viewer/src/createLogViewer.ts (revision 61c4878ac05f98d0ceed94b57d316916de578985)
1// Copyright 2024 The Pigweed Authors
2//
3// Licensed under the Apache License, Version 2.0 (the "License"); you may not
4// use this file except in compliance with the License. You may obtain a copy of
5// the License at
6//
7//     https://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
12// License for the specific language governing permissions and limitations under
13// the License.
14
15import { LogViewer as RootComponent } from './components/log-viewer';
16import { LogViewerState } from './shared/state';
17import { LogSource } from '../src/log-source';
18import { LogStore } from './log-store';
19
20import '@material/web/button/filled-button.js';
21import '@material/web/button/outlined-button.js';
22import '@material/web/checkbox/checkbox.js';
23import '@material/web/field/outlined-field.js';
24import '@material/web/textfield/outlined-text-field.js';
25import '@material/web/textfield/filled-text-field.js';
26import '@material/web/icon/icon.js';
27import '@material/web/iconbutton/icon-button.js';
28import '@material/web/menu/menu.js';
29import '@material/web/menu/sub-menu.js';
30import '@material/web/menu/menu-item.js';
31
32/**
33 * Create an instance of log-viewer
34 * @param logSources - Collection of sources from where logs originate
35 * @param root - HTML component to append log-viewer to
36 * @param options - Optional parameters to change default settings
37 * @param options.columnOrder - Defines column order between level and
38 *   message. Undefined fields are added between defined order and message.
39 * @param options.logStore - Stores and handles management of all logs
40 * @param options.state - Handles state between sessions, defaults to localStorage
41 */
42export function createLogViewer(
43  logSources: LogSource[] | LogSource,
44  root: HTMLElement,
45  options?: {
46    columnOrder?: string[] | undefined;
47    logSources?: LogSource | LogSource[] | undefined;
48    logStore?: LogStore | undefined;
49    state?: LogViewerState | undefined;
50  },
51) {
52  const logViewer = new RootComponent(logSources, options);
53  root.appendChild(logViewer);
54
55  // Method to destroy and unsubscribe
56  return () => {
57    if (logViewer.parentNode) {
58      logViewer.parentNode.removeChild(logViewer);
59    }
60  };
61}
62