Migration to use the new MDC-based Angular Components. Components mig…

…rated: snack-bar

PiperOrigin-RevId: 565194998

frontend/app/BUILD

@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_common_http",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_platform-browser_animation",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",

frontend/app/app.ng.html

@@ -9,7 +9,7 @@
 </div>
 
 <ng-template #progress_bar>
-  <div class="progress-container" [hidden]="!loading">
+  <div class="progress-container" *ngIf="loading">
     <div class="loading-message">Loading data</div>
     <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
   </div>

frontend/app/app_module.ts

@@ -1,6 +1,6 @@
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {EmptyPageModule} from 'org_xprof/frontend/app/components/empty_page/empty_page_module';
@@ -18,7 +18,7 @@ import {App} from './app';
   imports: [
     BrowserModule,
     HttpClientModule,
-    MatLegacyProgressBarModule,
+    MatProgressBarModule,
     EmptyPageModule,
     MainPageModule,
     BrowserAnimationsModule,

frontend/app/common/angular/BUILD

@@ -27,7 +27,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_progress_bar",
+    name = "angular_material_progress_bar",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -107,23 +107,23 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_radio",
+    name = "angular_material_radio",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_legacy_progress_spinner",
+    name = "angular_material_progress_spinner",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_legacy_snack_bar",
+    name = "angular_material_snack_bar",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -139,15 +139,15 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_slide_toggle",
+    name = "angular_material_slide_toggle",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_legacy_slider",
+    name = "angular_material_slider",
     srcs = [],
     deps = [
         "@npm//@angular/material",

frontend/app/components/capture_profile/BUILD

@@ -21,8 +21,8 @@ xprof_ng_module(
         "@npm//rxjs",
         "@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_legacy_progress_spinner",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_snack_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_spinner",
+        "@org_xprof//frontend/app/common/angular:angular_material_snack_bar",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/capture_profile/capture_profile_dialog",
         "@org_xprof//frontend/app/services/data_service",

frontend/app/components/capture_profile/capture_profile.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {Store} from '@ngrx/store';
 import {CaptureProfileOptions, CaptureProfileResponse} from 'org_xprof/frontend/app/common/interfaces/capture_profile';
 import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
@@ -28,7 +28,7 @@ export class CaptureProfile implements OnDestroy {
 
   constructor(
       private readonly dialog: MatDialog,
-      private readonly snackBar: MatLegacySnackBar,
+      private readonly snackBar: MatSnackBar,
       private readonly dataService: DataService,
       private readonly store: Store<{}>) {
     this.capturingProfile = this.store.select(getCapturingProfileState);

frontend/app/components/capture_profile/capture_profile_dialog/BUILD

@@ -23,8 +23,8 @@ xprof_ng_module(
         "@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_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
     ],

frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html

@@ -29,10 +29,10 @@
 
   <div>
     <mat-form-field>
+      <mat-label>Profiling duration(ms)</mat-label>
       <input
         matInput
         type="number"
-        placeholder="Profiling Duration (milliseconds)"
         [(ngModel)]="duration"
       />
     </mat-form-field>

frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts

@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 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';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
@@ -25,7 +25,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     MatExpansionModule,
     MatFormFieldModule,
     MatInputModule,
-    MatLegacyRadioModule,
+    MatRadioModule,
     MatSelectModule,
     MatLegacyTooltipModule,
   ],

frontend/app/components/capture_profile/capture_profile_module.ts

@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
-import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 import {CaptureProfile} from './capture_profile';
 import {CaptureProfileDialog} from './capture_profile_dialog/capture_profile_dialog';
@@ -16,9 +16,9 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi
     CommonModule,
     MatButtonModule,
     MatDialogModule,
-    MatLegacyProgressSpinnerModule,
+    MatProgressSpinnerModule,
     CaptureProfileDialogModule,
-    MatLegacySnackBarModule,
+    MatSnackBarModule,
   ],
   exports: [CaptureProfile],
   entryComponents: [CaptureProfileDialog],

frontend/app/components/graph_viewer/BUILD

@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",

frontend/app/components/graph_viewer/graph_viewer.ng.html

@@ -6,10 +6,10 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <diagnostics-view [diagnostics]="diagnostics"></diagnostics-view>
-    <div class="progress-container" [hidden]="!loading">
+    <div class="progress-container" *ngIf="loading">
       <div class="loading-message">Loading graph viewer data</div>
       <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
     </div>
-    <iframe #iframe id="graph-html" [src]="graphvizUri | safe"></iframe>
+    <iframe #iframe id="graph-html" [src]="graphvizUri | safe" (load)="onIframeLoaded()"></iframe>
   </mat-sidenav-content>
 </mat-sidenav-container>

frontend/app/components/graph_viewer/graph_viewer.scss

@@ -41,6 +41,6 @@ mat-progress-bar {
 .progress-container {
   position: absolute;
   width: 100%;
-  margin: 300 0;
+  margin: 300px 0;
   z-index: 1;
 }

frontend/app/components/graph_viewer/graph_viewer.ts

@@ -86,8 +86,18 @@ export class GraphViewer implements OnDestroy {
     return this.opName && this.selectedModule;
   }
 
+  setLoadingStatus(loading: boolean, diagnostics?: Diagnostics) {
+    this.loading = loading;
+    this.diagnostics = diagnostics || {...DIAGNOSTICS_DEFAULT};
+  }
+
+  onIframeLoaded() {
+    this.setLoadingStatus(false);
+  }
+
   onPlot() {
     if (!this.validToPlot()) return;
+    this.setLoadingStatus(true);
 
     // Update the query parameters in url after form updates
     const queryParams: GraphViewerQueryParams = {

frontend/app/components/graph_viewer/graph_viewer_module.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatOptionModule} from '@angular/material/core';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
 import {GraphConfigModule} from 'org_xprof/frontend/app/components/graph_viewer/graph_config/graph_config_module';
@@ -14,7 +14,7 @@ import {GraphViewer} from './graph_viewer';
     CommonModule,
     DiagnosticsViewModule,
     MatOptionModule,
-    MatLegacyProgressBarModule,
+    MatProgressBarModule,
     MatSidenavModule,
     PipesModule,
     GraphConfigModule,

frontend/app/components/main_page/BUILD

@@ -14,11 +14,12 @@ xprof_ng_module(
         "main_page.ng.html",
     ],
     deps = [
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",

frontend/app/components/main_page/main_page.ng.html

@@ -3,7 +3,7 @@
     <sidenav></sidenav>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div class="progress-container" [hidden]="!loading">
+    <div class="progress-container" *ngIf="loading">
       <div class="loading-message">{{loadingMessage}}</div>
       <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
     </div>

frontend/app/components/main_page/main_page_module.ts

@@ -1,5 +1,6 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {RouterModule, Routes} from '@angular/router';
 import {DcnCollectiveStats} from 'org_xprof/frontend/app/components/dcn_collective_stats/dcn_collective_stats';
@@ -65,7 +66,8 @@ export const routes: Routes = [
 @NgModule({
   declarations: [MainPage],
   imports: [
-    MatLegacyProgressBarModule,
+    CommonModule,
+    MatProgressBarModule,
     MatSidenavModule,
     EmptyPageModule,
     SideNavModule,

frontend/app/components/op_profile/BUILD

@@ -23,9 +23,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_slide_toggle",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/op_profile/op_table",
         "@org_xprof//frontend/app/services/data_service",

frontend/app/components/op_profile/op_profile_common.scss

@@ -15,7 +15,8 @@
 
 .control-container {
   display: flex;
-  padding-top: 32px;
+  align-items: center;
+  margin-top: 32px;
 }
 
 .control {

frontend/app/components/op_profile/op_profile_module.ts

@@ -1,10 +1,9 @@
 import {NgModule} from '@angular/core';
-import {MatIconModule} from '@angular/material/icon';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 import {OpProfile} from './op_profile';
 import {OpTableModule} from './op_table/op_table_module';
@@ -15,8 +14,7 @@ import {OpTableModule} from './op_table/op_table_module';
   imports: [
     MatFormFieldModule,
     MatInputModule,
-    MatLegacySliderModule,
-    MatLegacySlideToggleModule,
+    MatSlideToggleModule,
     OpTableModule,
     MatIconModule,
     MatLegacyTooltipModule,

frontend/app/components/pod_viewer/BUILD

@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
+        "@org_xprof//frontend/app/common/angular:angular_material_slider",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",

frontend/app/components/pod_viewer/pod_viewer.ng.html

@@ -6,8 +6,7 @@
     <mat-slider
                 [min]="minStep"
                 [max]="maxStep"
-                [step]="1"
-                (change)="updateSelectedStep($event.value)">
+                [step]="1" #ngSlider><input matSliderThumb (change)="updateSelectedStep({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
     </mat-slider>
   </div>
   <div *ngIf="topology">

frontend/app/components/pod_viewer/pod_viewer_module.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
 
 import {PodViewer} from './pod_viewer';
@@ -15,7 +15,7 @@ import {TopologyGraphModule} from './topology_graph/topology_graph_module';
     CommonModule,
     DiagnosticsViewModule,
     MatDividerModule,
-    MatLegacySliderModule,
+    MatSliderModule,
     StackBarChartModule,
     TopologyGraphModule,
   ],

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_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_menu",
+        "@org_xprof//frontend/app/common/angular:angular_material_slider",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",

frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html

@@ -25,9 +25,7 @@
       <mat-slider
         [min]="0"
         [max]="channelCount"
-        [step]="1"
-        [value]="selectedChannelIndex"
-        (change)="updateChannelIndex($event.value)">
+        [step]="1" #ngSlider><input matSliderThumb [value]="selectedChannelIndex" (change)="updateChannelIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
       </mat-slider>
       <mat-form-field class="channel-input" appearance="outline">
         <mat-label>Channel id</mat-label>