Add frontend changes for Dcn Collective Stats tool

PiperOrigin-RevId: 559811249

frontend/app/components/dcn_collective_stats/BUILD

@@ -0,0 +1,42 @@
+load("//defs:defs.bzl", "xprof_ng_module")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+
+package(default_visibility = ["//frontend:internal"])
+
+xprof_ng_module(
+    name = "dcn_collective_stats",
+    srcs = [
+        "dcn_collective_stats.ts",
+        "dcn_collective_stats_module.ts",
+    ],
+    assets = [
+        ":dcn_collective_stats_css",
+        "dcn_collective_stats.ng.html",
+    ],
+    deps = [
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/router",
+        "@npm//@ngrx/store",
+        "@npm//@types/google.visualization",
+        "@npm//rxjs",
+        "@org_xprof//frontend/app/common/interfaces",
+        "@org_xprof//frontend/app/common/interfaces:chart",
+        "@org_xprof//frontend/app/common/utils",
+        "@org_xprof//frontend/app/components/chart",
+        "@org_xprof//frontend/app/components/chart:chart_options",
+        "@org_xprof//frontend/app/components/chart:default_data_provider",
+        "@org_xprof//frontend/app/components/chart/dashboard",
+        "@org_xprof//frontend/app/services/data_service",
+        "@org_xprof//frontend/app/store",
+    ],
+)
+
+sass_binary(
+    name = "dcn_collective_stats_css",
+    src = "dcn_collective_stats.scss",
+    sourcemap = False,
+    deps = [
+        "@org_xprof//frontend/app/styles:common",
+    ],
+)

frontend/app/components/dcn_collective_stats/dcn_collective_stats.ng.html

@@ -0,0 +1,32 @@
+<div class="section-container">
+  <div class="mat-h1">DCN Collective Stats</div>
+  <div>
+    <div class="mat-body">
+      This tool provides insights into the DCN Collective.
+    </div>
+    <div class="description">
+      (1) Dcn Collective Name is the name assigned to the collective.
+    </div>
+    <div class="description">
+      (2) Recv Op Name and Send Op Name is TPU recv-done op name and send op name.
+    </div>
+    <div class="description">
+      (3) Slack Time is the network independent time the collective has to transmit the data.
+    </div>
+    <div class="description">
+      (4) Observed Duration is the interval between the start of the send op to the end of the corresponding recv-done op.
+    </div>
+    <div class="description">
+      (5) Stall Duration is the duration of time the collective spends in send/send-done/recv/recv-done ops.
+    </div>
+    <div class="description">
+      (6) Occurrences is the total number of occurrences for each collective in the profiled duration.
+    </div>
+  </div>
+</div>
+
+<div>
+  <chart chartType="Table"
+         [dataInfo]="dataInfo">
+  </chart>
+</div>

frontend/app/components/dcn_collective_stats/dcn_collective_stats.scss

@@ -0,0 +1,10 @@
+/** CSS for dcn collective stats component. */
+@import 'frontend/app/styles/common';
+
+.section-container {
+  padding: 20px;
+}
+
+chart {
+  margin: 0 16px;
+}

frontend/app/components/dcn_collective_stats/dcn_collective_stats.ts

@@ -0,0 +1,82 @@
+import {Component, OnDestroy} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Store} from '@ngrx/store';
+import {ChartDataInfo} from 'org_xprof/frontend/app/common/interfaces/chart';
+import {SimpleDataTableOrNull} from 'org_xprof/frontend/app/common/interfaces/data_table';
+import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
+import {TABLE_OPTIONS} from 'org_xprof/frontend/app/components/chart/chart_options';
+import {Dashboard} from 'org_xprof/frontend/app/components/chart/dashboard/dashboard';
+import {DefaultDataProvider} from 'org_xprof/frontend/app/components/chart/default_data_provider';
+import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
+import {setLoadingStateAction} from 'org_xprof/frontend/app/store/actions';
+import {ReplaySubject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+const DCN_COLLECTIVE_STATS_INDEX = 0;
+
+/** A Dcn Collective Stats page component. */
+@Component({
+  selector: 'dcn-collective-stats',
+  templateUrl: './dcn_collective_stats.ng.html',
+  styleUrls: ['./dcn_collective_stats.scss']
+})
+export class DcnCollectiveStats extends Dashboard implements OnDestroy {
+  /** Handles on-destroy Subject, used to unsubscribe. */
+  private readonly destroyed = new ReplaySubject<void>(1);
+
+  dataInfo: ChartDataInfo = {
+    data: null,
+    dataProvider: new DefaultDataProvider(),
+    filters: [],
+    options: {
+      ...TABLE_OPTIONS,
+      showRowNumber: false,
+    },
+  };
+
+  constructor(
+      route: ActivatedRoute, private readonly dataService: DataService,
+      private readonly store: Store<{}>) {
+    super();
+    route.params.pipe(takeUntil(this.destroyed)).subscribe((params) => {
+      this.update(params as NavigationEvent);
+    });
+  }
+
+  update(event: NavigationEvent) {
+    const run = event.run || '';
+    const tag = event.tag || 'dcn_collective_stats';
+    const host = event.host || '';
+
+    this.store.dispatch(setLoadingStateAction({
+      loadingState: {
+        loading: true,
+        message: 'Loading Dcn Collective Stats data',
+      }
+    }));
+
+    this.dataService.getData(run, tag, host)
+        .pipe(takeUntil(this.destroyed))
+        .subscribe((data) => {
+          this.store.dispatch(setLoadingStateAction({
+            loadingState: {
+              loading: false,
+              message: '',
+            }
+          }));
+
+          const d = data as SimpleDataTableOrNull[];
+          this.parseData(d[DCN_COLLECTIVE_STATS_INDEX]);
+          this.dataInfo = {
+            ...this.dataInfo,
+            data: d[DCN_COLLECTIVE_STATS_INDEX],
+          };
+        });
+  }
+
+  ngOnDestroy() {
+    // Unsubscribes all pending subscriptions.
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+}

frontend/app/components/dcn_collective_stats/dcn_collective_stats_module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart';
+
+import {DcnCollectiveStats} from './dcn_collective_stats';
+
+/** A Dcn Collective Stats module. */
+@NgModule({
+  declarations: [DcnCollectiveStats],
+  imports: [
+    ChartModule,
+  ],
+  exports: [DcnCollectiveStats],
+})
+export class DcnCollectiveStatsModule {
+}

frontend/app/components/main_page/BUILD

@@ -22,6 +22,7 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
+        "@org_xprof//frontend/app/components/dcn_collective_stats",
         "@org_xprof//frontend/app/components/empty_page",
         "@org_xprof//frontend/app/components/graph_viewer",
         "@org_xprof//frontend/app/components/input_pipeline",

frontend/app/components/main_page/main_page_module.ts

@@ -2,6 +2,8 @@ import {NgModule} from '@angular/core';
 import {MatLegacyProgressBarModule} from '@angular/material/legacy-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';
+import {DcnCollectiveStatsModule} from 'org_xprof/frontend/app/components/dcn_collective_stats/dcn_collective_stats_module';
 import {EmptyPage} from 'org_xprof/frontend/app/components/empty_page/empty_page';
 import {EmptyPageModule} from 'org_xprof/frontend/app/components/empty_page/empty_page_module';
 import {GraphViewer} from 'org_xprof/frontend/app/components/graph_viewer/graph_viewer';
@@ -55,6 +57,7 @@ export const routes: Routes = [
   {path: 'trace_viewer@^', component: TraceViewer},
   {path: 'trace_viewer^', component: TraceViewer},
   {path: 'graph_viewer^', component: GraphViewer},
+  {path: 'dcn_collective_stats^', component: DcnCollectiveStats},
   {path: '**', component: EmptyPage},
 ];
 
@@ -77,6 +80,7 @@ export const routes: Routes = [
     GraphViewerModule,
     TfDataBottleneckAnalysisModule,
     TensorflowStatsAdapterModule,
+    DcnCollectiveStatsModule,
     RouterModule.forRoot(routes),
   ],
   exports: [MainPage]