1// Copyright 2024 The Chromium Authors 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5import {CustomElement} from 'chrome://resources/js/custom_element.js'; 6 7import {getTemplate} from './app.html.js'; 8import {StructuredMetricsBrowserProxyImpl} from './structured_metrics_browser_proxy.js'; 9import type {StructuredMetricEvent, StructuredMetricsSummary} from './structured_utils.js'; 10import {updateStructuredMetricsEvents, updateStructuredMetricsSummary} from './structured_utils.js'; 11 12export class StructuredMetricsInternalsAppElement extends CustomElement { 13 static get is(): string { 14 return 'structured-metrics-internals-app'; 15 } 16 17 static override get template() { 18 return getTemplate(); 19 } 20 21 private browserProxy_: StructuredMetricsBrowserProxyImpl = 22 StructuredMetricsBrowserProxyImpl.getInstance(); 23 private summaryIntervalId_: ReturnType<typeof setInterval>; 24 25 initPromise: Promise<void>; 26 27 constructor() { 28 super(); 29 this.initPromise = this.init_(); 30 31 // Create periodic callbacks. 32 this.summaryIntervalId_ = 33 setInterval(() => this.updateStructuredMetricsSummary_(), 5000); 34 } 35 36 disconnectedCallback() { 37 clearInterval(this.summaryIntervalId_); 38 } 39 40 private async init_(): Promise<void> { 41 // Fetch Structured Metrics summary and events. 42 // TODO: Implement a push model as new events are recorded. 43 await this.updateStructuredMetricsSummary_(); 44 await this.updateStructuredMetricsEvents_(); 45 46 const eventRefreshButton = 47 this.getRequiredElement<HTMLElement>('#sm-refresh-events'); 48 eventRefreshButton.addEventListener( 49 'click', () => this.updateStructuredMetricsEvents_()); 50 } 51 52 /** 53 * Fetches summary information of the Structured Metrics service and renders 54 * it. 55 */ 56 private async updateStructuredMetricsSummary_(): Promise<void> { 57 const summary: StructuredMetricsSummary = 58 await this.browserProxy_.fetchStructuredMetricsSummary(); 59 const template = 60 this.getRequiredElement<HTMLTemplateElement>('#summary-row-template'); 61 const smSummaryBody = 62 this.getRequiredElement<HTMLElement>('#sm-summary-body'); 63 updateStructuredMetricsSummary(smSummaryBody, summary, template); 64 } 65 66 /** 67 * Fetches all events currently recorded by the Structured Metrics Service and 68 * renders them. It an event has been uploaded then it will not be shown 69 * again. This only shows Events recorded in Chromium. Platform2 events are 70 * not supported yet. 71 */ 72 private async updateStructuredMetricsEvents_(): Promise<void> { 73 const events: StructuredMetricEvent[] = 74 await this.browserProxy_.fetchStructuredMetricsEvents(); 75 const eventTemplate = this.getRequiredElement<HTMLTemplateElement>( 76 '#structured-metrics-event-row-template'); 77 const eventDetailsTemplate = this.getRequiredElement<HTMLTemplateElement>( 78 '#structured-metrics-event-details-template'); 79 80 const kvTemplate = 81 this.getRequiredElement<HTMLTemplateElement>('#summary-row-template'); 82 const eventTableBody = 83 this.getRequiredElement<HTMLElement>('#sm-event-body'); 84 85 updateStructuredMetricsEvents( 86 eventTableBody, events, eventTemplate, eventDetailsTemplate, 87 kvTemplate); 88 } 89} 90 91declare global { 92 interface HTMLElementTagNameMap { 93 'structured-metrics-internals-app': StructuredMetricsInternalsAppElement; 94 } 95} 96 97customElements.define( 98 StructuredMetricsInternalsAppElement.is, 99 StructuredMetricsInternalsAppElement); 100