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

…rated: card PiperOrigin-RevId: 565173655
tensorflow · Sep 15, 2023 · 396a3aa · 396a3aa
1 parent fdb11fa
commit 396a3aa
Show file tree

Hide file tree

Showing 27 changed files with 34 additions and 35 deletions.
diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
@@ -131,7 +131,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_card",
+    name = "angular_material_card",
     srcs = [],
     deps = [
         "@npm//@angular/material",

diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 

diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 

diff --git a/frontend/app/components/diagnostics_view/BUILD b/frontend/app/components/diagnostics_view/BUILD
@@ -15,7 +15,6 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )

diff --git a/frontend/app/components/memory_profile/memory_profile_summary/BUILD b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
@@ -15,7 +15,7 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@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/...end/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts b/...end/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {MemoryProfileSummary} from './memory_profile_summary';
@@ -9,7 +9,7 @@ import {MemoryProfileSummary} from './memory_profile_summary';
   declarations: [MemoryProfileSummary],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
     MatLegacyTooltipModule,
   ],
   exports: [MemoryProfileSummary]

diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
@@ -16,7 +16,7 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
     ],

diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts b/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {MemoryTimelineGraph} from './memory_timeline_graph';
 
 @NgModule({
   declarations: [MemoryTimelineGraph],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [MemoryTimelineGraph]
 })
 export class MemoryTimelineGraphModule {

diff --git a/frontend/app/components/memory_viewer/buffer_details/BUILD b/frontend/app/components/memory_viewer/buffer_details/BUILD
@@ -17,7 +17,7 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/store",

diff --git a/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts b/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
@@ -1,12 +1,12 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {BufferDetails} from './buffer_details';
 
 /** A buffer details view module. */
 @NgModule({
   declarations: [BufferDetails],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [BufferDetails]
 })
 export class BufferDetailsModule {

diff --git a/frontend/app/components/op_profile/op_details/BUILD b/frontend/app/components/op_profile/op_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -19,8 +19,8 @@ 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_card",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces:op_metrics_proto_defs",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",

diff --git a/frontend/app/components/op_profile/op_details/op_details.scss b/frontend/app/components/op_profile/op_details/op_details.scss
@@ -70,6 +70,7 @@ mat-card {
 .bar {
   height: 24px;
   line-height: 24px;
+  max-width: 100%;
 }
 
 .expression {

diff --git a/frontend/app/components/op_profile/op_details/op_details_module.ts b/frontend/app/components/op_profile/op_details/op_details_module.ts
@@ -2,15 +2,15 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {OpDetails} from './op_details';
 
 /** An op details view module. */
 @NgModule({
   declarations: [OpDetails],
   imports:
-      [CommonModule, MatLegacyCardModule, MatIconModule, MatButtonModule],
+      [CommonModule, MatCardModule, MatIconModule, MatButtonModule],
   exports: [OpDetails]
 })
 export class OpDetailsModule {

diff --git a/frontend/app/components/overview/BUILD b/frontend/app/components/overview/BUILD
@@ -21,7 +21,6 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//@types/google.visualization",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/components/diagnostics_view",

diff --git a/frontend/app/components/overview/performance_summary/BUILD b/frontend/app/components/overview/performance_summary/BUILD
@@ -16,8 +16,8 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
     ],

diff --git a/frontend/app/components/overview/performance_summary/performance_summary_module.ts b/frontend/app/components/overview/performance_summary/performance_summary_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {PerformanceSummary} from './performance_summary';
@@ -10,7 +10,7 @@ import {PerformanceSummary} from './performance_summary';
   declarations: [PerformanceSummary],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
     MatIconModule,
     MatLegacyTooltipModule,
   ],

diff --git a/frontend/app/components/overview/recommendation_result_view/BUILD b/frontend/app/components/overview/recommendation_result_view/BUILD
@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/store",

diff --git a/...d/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts b/...d/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
@@ -1,14 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {RecommendationResultView} from './recommendation_result_view';
 
 @NgModule({
   declarations: [RecommendationResultView],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
   ],
   exports: [RecommendationResultView]
 })

diff --git a/frontend/app/components/overview/run_environment_view/BUILD b/frontend/app/components/overview/run_environment_view/BUILD
@@ -15,7 +15,7 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )

diff --git a/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts b/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {RunEnvironmentView} from './run_environment_view';
 
 @NgModule({
   declarations: [RunEnvironmentView],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [RunEnvironmentView]
 })
 export class RunEnvironmentViewModule {

diff --git a/frontend/app/components/overview/step_time_graph/BUILD b/frontend/app/components/overview/step_time_graph/BUILD
@@ -16,7 +16,7 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )

diff --git a/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts b/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {StepTimeGraph} from './step_time_graph';
 
 @NgModule({
   declarations: [StepTimeGraph],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [StepTimeGraph]
 })
 export class StepTimeGraphModule {

diff --git a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
@@ -18,7 +18,7 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@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/pod_viewer_details/pod_viewer_details_module.ts b/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {PodViewerDetails} from './pod_viewer_details';
 
@@ -9,7 +9,7 @@ import {PodViewerDetails} from './pod_viewer_details';
   declarations: [PodViewerDetails],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
   ],
   exports: [PodViewerDetails]
 })

diff --git a/frontend/app/components/tensorflow_stats/BUILD b/frontend/app/components/tensorflow_stats/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 

diff --git a/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD b/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
@@ -15,7 +15,6 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
         "@org_xprof//frontend/app/components/chart",

diff --git a/frontend/styles.scss b/frontend/styles.scss
@@ -28,6 +28,7 @@ $theme: mat.define-light-theme(
 @include mat.fab-theme($theme);
 @include mat.button-theme($theme);
 @include mat.icon-button-theme($theme);
+@include mat.card-theme($theme);
 
 html, body {
   height: 100%;