From 7d6e24524a09523ef7bd3a06766c0860199293c8 Mon Sep 17 00:00:00 2001 From: Yin Zhang Date: Wed, 13 Sep 2023 16:25:49 -0700 Subject: [PATCH] Migration to use the new MDC-based Angular Components. Components migrated: menu PiperOrigin-RevId: 565193630 --- frontend/app/common/angular/BUILD | 6 +++--- frontend/app/components/capture_profile/BUILD | 2 +- frontend/app/components/capture_profile/capture_profile.ts | 4 ++-- .../components/capture_profile/capture_profile_dialog/BUILD | 2 +- .../capture_profile_dialog/capture_profile_dialog.ts | 4 ++-- .../capture_profile_dialog/capture_profile_dialog_module.ts | 4 ++-- .../components/capture_profile/capture_profile_module.ts | 4 ++-- frontend/app/components/graph_viewer/graph_config/BUILD | 2 +- .../graph_viewer/graph_config/graph_config_module.ts | 4 ++-- .../app/components/memory_viewer/memory_viewer_main/BUILD | 2 +- .../memory_viewer_main/memory_viewer_main_module.ts | 4 ++-- frontend/app/components/pod_viewer/topology_graph/BUILD | 2 +- .../pod_viewer/topology_graph/topology_graph_module.ts | 4 ++-- frontend/app/components/tensorflow_stats/BUILD | 2 +- .../components/tensorflow_stats/tensorflow_stats_module.ts | 4 ++-- frontend/styles.scss | 3 +++ 16 files changed, 28 insertions(+), 25 deletions(-) diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD index e39a08087..ecdf23feb 100644 --- a/frontend/app/common/angular/BUILD +++ b/frontend/app/common/angular/BUILD @@ -75,7 +75,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_menu", + name = "angular_material_menu", srcs = [], deps = [ "@npm//@angular/material", @@ -91,7 +91,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_checkbox", + name = "angular_material_checkbox", srcs = [], deps = [ "@npm//@angular/material", @@ -99,7 +99,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_dialog", + name = "angular_material_dialog", srcs = [], deps = [ "@npm//@angular/material", diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD index 45d0cde24..8ae1be62c 100644 --- a/frontend/app/components/capture_profile/BUILD +++ b/frontend/app/components/capture_profile/BUILD @@ -20,7 +20,7 @@ xprof_ng_module( "@npm//@ngrx/store", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_material_button", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog", + "@org_xprof//frontend/app/common/angular:angular_material_dialog", "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_spinner", "@org_xprof//frontend/app/common/angular:angular_material_legacy_snack_bar", "@org_xprof//frontend/app/common/interfaces", diff --git a/frontend/app/components/capture_profile/capture_profile.ts b/frontend/app/components/capture_profile/capture_profile.ts index 7f1cfbc31..4132cbf5a 100644 --- a/frontend/app/components/capture_profile/capture_profile.ts +++ b/frontend/app/components/capture_profile/capture_profile.ts @@ -1,5 +1,5 @@ import {Component, OnDestroy} from '@angular/core'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar'; import {Store} from '@ngrx/store'; import {CaptureProfileOptions, CaptureProfileResponse} from 'org_xprof/frontend/app/common/interfaces/capture_profile'; @@ -27,7 +27,7 @@ export class CaptureProfile implements OnDestroy { capturingProfile: Observable; constructor( - private readonly dialog: MatLegacyDialog, + private readonly dialog: MatDialog, private readonly snackBar: MatLegacySnackBar, private readonly dataService: DataService, private readonly store: Store<{}>) { diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD index 3c1d471d7..23e02ffe6 100644 --- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD +++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD @@ -19,10 +19,10 @@ xprof_ng_module( "@npm//@angular/forms", "@npm//@angular/platform-browser", "@org_xprof//frontend/app/common/angular:angular_material_button", + "@org_xprof//frontend/app/common/angular:angular_material_dialog", "@org_xprof//frontend/app/common/angular:angular_material_expansion", "@org_xprof//frontend/app/common/angular:angular_material_form_field", "@org_xprof//frontend/app/common/angular:angular_material_input", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog", "@org_xprof//frontend/app/common/angular:angular_material_legacy_radio", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/angular:angular_material_select", diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts index b8017398e..38e79313b 100644 --- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts +++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MatLegacyDialogRef} from '@angular/material/legacy-dialog'; +import {MatDialogRef} from '@angular/material/dialog'; /** A capture profile dialog component. */ @Component({ @@ -25,7 +25,7 @@ export class CaptureProfileDialog { delay = 0; constructor(private readonly dialogRef: - MatLegacyDialogRef) {} + MatDialogRef) {} addressTypeChanged(value: string) { this.isTpuName = value === 'tpu'; diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts index a8651940c..242d32ac2 100644 --- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts +++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; +import {MatDialogModule} from '@angular/material/dialog'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -21,7 +21,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog'; CommonModule, FormsModule, MatButtonModule, - MatLegacyDialogModule, + MatDialogModule, MatExpansionModule, MatFormFieldModule, MatInputModule, diff --git a/frontend/app/components/capture_profile/capture_profile_module.ts b/frontend/app/components/capture_profile/capture_profile_module.ts index 4c0a81be6..2176dcd72 100644 --- a/frontend/app/components/capture_profile/capture_profile_module.ts +++ b/frontend/app/components/capture_profile/capture_profile_module.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; +import {MatDialogModule} from '@angular/material/dialog'; import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar'; @@ -15,7 +15,7 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi imports: [ CommonModule, MatButtonModule, - MatLegacyDialogModule, + MatDialogModule, MatLegacyProgressSpinnerModule, CaptureProfileDialogModule, MatLegacySnackBarModule, diff --git a/frontend/app/components/graph_viewer/graph_config/BUILD b/frontend/app/components/graph_viewer/graph_config/BUILD index 63201ee15..26d9d5555 100644 --- a/frontend/app/components/graph_viewer/graph_config/BUILD +++ b/frontend/app/components/graph_viewer/graph_config/BUILD @@ -19,11 +19,11 @@ xprof_ng_module( "@npm//@angular/forms", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_material_button", + "@org_xprof//frontend/app/common/angular:angular_material_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_core", "@org_xprof//frontend/app/common/angular:angular_material_form_field", "@org_xprof//frontend/app/common/angular:angular_material_icon", "@org_xprof//frontend/app/common/angular:angular_material_input", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/angular:angular_material_select", "@org_xprof//frontend/app/common/angular:angular_material_sidenav", diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts index 34cc6681e..66ee37671 100644 --- a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts +++ b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatOptionModule} from '@angular/material/core'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; @@ -18,7 +18,7 @@ import {GraphConfig} from './graph_config'; CommonModule, FormsModule, MatButtonModule, - MatLegacyCheckboxModule, + MatCheckboxModule, MatFormFieldModule, MatIconModule, MatInputModule, diff --git a/frontend/app/components/memory_viewer/memory_viewer_main/BUILD b/frontend/app/components/memory_viewer/memory_viewer_main/BUILD index 05424fa0f..1a97124bf 100644 --- a/frontend/app/components/memory_viewer/memory_viewer_main/BUILD +++ b/frontend/app/components/memory_viewer/memory_viewer_main/BUILD @@ -18,9 +18,9 @@ xprof_ng_module( "@npm//@angular/forms", "@npm//@angular/router", "@npm//@ngrx/store", + "@org_xprof//frontend/app/common/angular:angular_material_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_divider", "@org_xprof//frontend/app/common/angular:angular_material_icon", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/utils", diff --git a/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts b/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts index 93616f4cb..f057b0fcc 100644 --- a/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts +++ b/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatDividerModule} from '@angular/material/divider'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module'; import {MaxHeapChartModule} from 'org_xprof/frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart_module'; @@ -18,7 +18,7 @@ import {MemoryViewerMain} from './memory_viewer_main'; FormsModule, MatDividerModule, MaxHeapChartModule, - MatLegacyCheckboxModule, + MatCheckboxModule, MatIconModule, MatLegacyTooltipModule, ProgramOrderChartModule, diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD index c6a215198..164fc1adf 100644 --- a/frontend/app/components/pod_viewer/topology_graph/BUILD +++ b/frontend/app/components/pod_viewer/topology_graph/BUILD @@ -22,8 +22,8 @@ xprof_ng_module( "@org_xprof//frontend/app/common/angular:angular_material_form_field", "@org_xprof//frontend/app/common/angular:angular_material_icon", "@org_xprof//frontend/app/common/angular:angular_material_input", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu", "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider", + "@org_xprof//frontend/app/common/angular:angular_material_menu", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/utils", diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts index 7cbdfa081..c58edea49 100644 --- a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts +++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts @@ -4,7 +4,7 @@ import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material/button'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {TopologyGraph} from './topology_graph'; @@ -18,7 +18,7 @@ import {TopologyGraph} from './topology_graph'; MatFormFieldModule, MatIconModule, MatInputModule, - MatLegacyMenuModule, + MatMenuModule, MatLegacySliderModule, ], exports: [TopologyGraph] diff --git a/frontend/app/components/tensorflow_stats/BUILD b/frontend/app/components/tensorflow_stats/BUILD index 293d3fb2b..fe7d4e30c 100644 --- a/frontend/app/components/tensorflow_stats/BUILD +++ b/frontend/app/components/tensorflow_stats/BUILD @@ -38,7 +38,7 @@ xprof_ng_module( "@org_xprof//frontend/app/common/angular:angular_material_button", "@org_xprof//frontend/app/common/angular:angular_material_divider", "@org_xprof//frontend/app/common/angular:angular_material_icon", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu", + "@org_xprof//frontend/app/common/angular:angular_material_menu", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/interfaces:chart", diff --git a/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts b/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts index 7fe602bf6..397c418d0 100644 --- a/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts +++ b/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {MatDividerModule} from '@angular/material/divider'; import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; import {ExportAsCsvModule} from 'org_xprof/frontend/app/components/controls/export_as_csv/export_as_csv_module'; import {FlopRateChartModule} from 'org_xprof/frontend/app/components/tensorflow_stats/flop_rate_chart/flop_rate_chart_module'; @@ -21,7 +21,7 @@ import {TensorflowStats} from './tensorflow_stats'; MatButtonModule, MatDividerModule, MatIconModule, - MatLegacyMenuModule, + MatMenuModule, ChartModule, ExportAsCsvModule, FlopRateChartModule, diff --git a/frontend/styles.scss b/frontend/styles.scss index 9ca8ef4e5..9e9054972 100644 --- a/frontend/styles.scss +++ b/frontend/styles.scss @@ -33,7 +33,10 @@ $theme: mat.define-light-theme( @include mat.core-theme($theme); @include mat.input-theme($theme); @include mat.form-field-theme($theme); +@include mat.checkbox-theme($theme); @include mat.select-theme($theme); +@include mat.menu-theme($theme); +@include mat.dialog-theme($theme); html, body { height: 100%;