content / browser / resources / traces_internals / trace_report.ts [blame]

// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
import 'chrome://resources/cr_elements/icons.html.js';
import './icons.html.js';

import {assert} from 'chrome://resources/js/assert.js';
import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
import type {BigBuffer} from 'chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-webui.js';
import type {Time} from 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-webui.js';

import {getCss} from './trace_report.css.js';
import {getHtml} from './trace_report.html.js';
import type {ClientTraceReport} from './trace_report.mojom-webui.js';
import {ReportUploadState, SkipUploadReason} from './trace_report.mojom-webui.js';
import {TraceReportBrowserProxy} from './trace_report_browser_proxy.js';
import {Notification, NotificationType} from './trace_report_list.js';

// Create the temporary element here to hold the data to download the trace
// since it is only obtained after downloadData_ is called. This way we can
// perform a download directly in JS without touching the element that
// triggers the action. Initiate download a resource identified by |url| into
// |filename|.
function downloadUrl(fileName: string, url: string): void {
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
}

export class TraceReportElement extends CrLitElement {
  static get is() {
    return 'trace-report';
  }

  static override get styles() {
    return getCss();
  }

  override render() {
    return getHtml.bind(this)();
  }

  static override get properties() {
    return {
      trace: {type: Object},
      isLoading: {type: Boolean},
    };
  }

  private traceReportProxy_: TraceReportBrowserProxy =
      TraceReportBrowserProxy.getInstance();

  protected trace: ClientTraceReport = {
    // Dummy ClientTraceReport
    uuid: {
      high: 0n,
      low: 0n,
    },
    creationTime: {internalValue: 0n},
    scenarioName: '',
    uploadRuleName: '',
    totalSize: 0n,
    uploadState: ReportUploadState.kNotUploaded,
    uploadTime: {internalValue: 0n},
    skipReason: SkipUploadReason.kNoSkip,
    hasTraceContent: false,
  };
  protected isLoading_: boolean = false;

  protected onCopyUuidClick_(): void {
    // Get the text field
    navigator.clipboard.writeText(this.getTokenAsString_());
  }

  protected getTraceSize_(): string {
    if (this.trace.totalSize < 1) {
      return '0 Bytes';
    }

    let displayedSize = Number(this.trace.totalSize);
    const k = 1024;

    const sizes = ['Bytes', 'KB', 'MB', 'GB'];

    let i = 0;

    for (i; displayedSize >= k && i < 3; i++) {
      displayedSize /= k;
    }

    return `${displayedSize.toFixed(2)} ${sizes[i]}`;
  }

  protected getSkipReason_(): string {
    // Keep this in sync with the values of SkipUploadReason in
    // tracereport.mojom
    const skipReasonMap: string[] = [
      'None',
      'Size limit exceeded',
      'Not anonymized',
      'Scenario quota exceeded',
      'Upload timed out',
    ];

    return skipReasonMap[this.trace.skipReason] ??
        'Could not get the skip reason';
  }

  protected onCopyScenarioClick_(): void {
    // Get the text field
    navigator.clipboard.writeText(this.trace.scenarioName);
  }

  protected onCopyUploadRuleClick_(): void {
    // Get the text field
    navigator.clipboard.writeText(this.trace.uploadRuleName);
  }

  protected isManualUploadPermitted_(): boolean {
    return this.trace.skipReason !== SkipUploadReason.kNotAnonymized;
  }

  protected dateToString_(mojoTime: Time): string {
    // The JS Date() is based off of the number of milliseconds since
    // the UNIX epoch (1970-01-01 00::00:00 UTC), while |internalValue|
    // of the base::Time (represented in mojom.Time) represents the
    // number of microseconds since the Windows FILETIME epoch
    // (1601-01-01 00:00:00 UTC). This computes the final JS time by
    // computing the epoch delta and the conversion from microseconds to
    // milliseconds.
    const windowsEpoch = Date.UTC(1601, 0, 1, 0, 0, 0, 0);
    const unixEpoch = Date.UTC(1970, 0, 1, 0, 0, 0, 0);
    // |epochDeltaInMs| equals to
    // base::Time::kTimeTToMicrosecondsOffset.
    const epochDeltaInMs = unixEpoch - windowsEpoch;
    const timeInMs = Number(mojoTime.internalValue) / 1000;

    // Define the format in which the date string is going to be displayed.
    return new Date(timeInMs - epochDeltaInMs)
        .toLocaleString(
            /*locales=*/ undefined, {
              hour: 'numeric',
              minute: 'numeric',
              month: 'short',
              day: 'numeric',
              year: 'numeric',
              hour12: true,
            });
  }

  protected async onDownloadTraceClick_(): Promise<void> {
    this.isLoading_ = true;
    const {trace} =
        await this.traceReportProxy_.handler.downloadTrace(this.trace.uuid);
    if (trace !== null) {
      this.downloadData_(`${this.getTokenAsString_()}.gz`, trace);
    } else {
      this.dispatchToast_(`Failed to download trace ${this.getTokenAsString_()}.`);
    }
    this.isLoading_ = false;
  }

  private downloadData_(fileName: string, data: BigBuffer): void {
    if (data.invalidBuffer) {
      this.dispatchToast_(
          `Invalid buffer received for ${this.getTokenAsString_()}.`);
      return;
    }
    try {
      let bytes: Uint8Array;
      if (Array.isArray(data.bytes)) {
        bytes = new Uint8Array(data.bytes);
      } else {
        assert(!!data.sharedMemory, 'sharedMemory must be defined here');
        const sharedMemory = data.sharedMemory!;
        const {buffer, result} =
            sharedMemory.bufferHandle.mapBuffer(0, sharedMemory.size);
        assert(result === Mojo.RESULT_OK, 'Could not map buffer');
        bytes = new Uint8Array(buffer);
      }
      const url = URL.createObjectURL(
          new Blob([bytes], {type: 'application/octet-stream'}));
      downloadUrl(fileName, url);
    } catch (e) {
      this.dispatchToast_(
          `Unable to create blob from trace data for ${this.getTokenAsString_()}.`);
    }
  }

  protected async onDeleteTraceClick_(): Promise<void> {
    this.isLoading_ = true;
    const {success} =
        await this.traceReportProxy_.handler.deleteSingleTrace(this.trace.uuid);
    if (!success) {
      this.dispatchToast_(`Failed to delete ${this.getTokenAsString_()}.`);
    } else {
      this.dispatchReloadRequest_();
    }
    this.isLoading_ = false;
  }

  protected async onUploadTraceClick_(): Promise<void> {
    this.isLoading_ = true;
    const {success} =
        await this.traceReportProxy_.handler.userUploadSingleTrace(
            this.trace.uuid);
    if (!success) {
      this.dispatchToast_(`Failed to upload trace ${this.getTokenAsString_()}.`);
    } else {
      this.dispatchReloadRequest_();
    }
    this.isLoading_ = false;
  }

  protected uploadStateEqual_(state: ReportUploadState): boolean {
    return this.trace.uploadState === state;
  }

  protected getTokenAsString_(): string {
    return `${this.trace.uuid.high.toString(16)}-${
        this.trace.uuid.low.toString(16)}`;
  }

  private dispatchToast_(message: string): void {
    this.dispatchEvent(new CustomEvent('show-toast', {
      bubbles: true,
      composed: true,
      detail: new Notification(NotificationType.ERROR, message),
    }));
  }

  protected isDownloadDisabled_(): boolean {
    return this.isLoading_ || !this.trace.hasTraceContent;
  }

  protected getDownloadTooltip_(): string {
    return this.trace.hasTraceContent ? 'Download Trace' : 'Trace expired';
  }

  private dispatchReloadRequest_(): void {
    this.fire('refresh-traces-request');
  }

  protected getStateCssClass_(): string {
    switch (this.trace.uploadState) {
      case ReportUploadState.kNotUploaded:
        return 'state-default';
      case ReportUploadState.kPending:
      case ReportUploadState.kPending_UserRequested:
        return 'state-pending';
      case ReportUploadState.kUploaded:
        return 'state-success';
      default:
        return '';
    }
  }

  protected getStateText_(): string {
    switch (this.trace.uploadState) {
      case ReportUploadState.kNotUploaded:
        return `Skip reason: ${this.getSkipReason_()}`;
      case ReportUploadState.kPending:
        return 'Pending upload';
      case ReportUploadState.kPending_UserRequested:
        return 'Pending upload: User requested';
      case ReportUploadState.kUploaded:
        return `Uploaded: ${this.dateToString_(this.trace.uploadTime)}`;
      default:
        return '';
    }
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'trace-report': TraceReportElement;
  }
}

customElements.define(TraceReportElement.is, TraceReportElement);