Skip to content

Commit

Permalink
Creates new data service for Angular frontend with DataServiceInterface
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 720673081
  • Loading branch information
Profiler Team authored and copybara-github committed Feb 18, 2025
1 parent 3b04a3c commit 6349c96
Show file tree
Hide file tree
Showing 8 changed files with 2,035 additions and 6 deletions.
2 changes: 2 additions & 0 deletions frontend/app/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ xprof_ng_module(
"@org_xprof//frontend/app/components/empty_page",
"@org_xprof//frontend/app/components/main_page",
"@org_xprof//frontend/app/pipes",
"@org_xprof//frontend/app/services/consolidated_data_service:data_service",
"@org_xprof//frontend/app/services/consolidated_data_service:data_service_interface",
"@org_xprof//frontend/app/services/data_dispatcher",
"@org_xprof//frontend/app/services/data_service",
"@org_xprof//frontend/app/store",
Expand Down
3 changes: 3 additions & 0 deletions frontend/app/app_module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {EmptyPageModule} from 'org_xprof/frontend/app/components/empty_page/empty_page_module';
import {MainPageModule} from 'org_xprof/frontend/app/components/main_page/main_page_module';
import {PipesModule} from 'org_xprof/frontend/app/pipes/pipes_module';
import {ConsolidatedDataService} from 'org_xprof/frontend/app/services/consolidated_data_service/data_service';
import {DataServiceInterfaceToken} from 'org_xprof/frontend/app/services/consolidated_data_service/data_service_interface';
import {DataDispatcher} from 'org_xprof/frontend/app/services/data_dispatcher/data_dispatcher';
import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
import {RootStoreModule} from 'org_xprof/frontend/app/store/store_module';
Expand All @@ -28,6 +30,7 @@ import {App} from './app';
providers: [
DataDispatcher,
DataService,
{provide: DataServiceInterfaceToken, useClass: ConsolidatedDataService},
],
bootstrap: [App],
})
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/components/memory_profile/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ xprof_ng_module(
"@org_xprof//frontend/app/components/memory_profile/memory_breakdown_table",
"@org_xprof//frontend/app/components/memory_profile/memory_profile_summary",
"@org_xprof//frontend/app/components/memory_profile/memory_timeline_graph",
"@org_xprof//frontend/app/services/data_service",
"@org_xprof//frontend/app/services/consolidated_data_service:data_service_interface",
"@org_xprof//frontend/app/store",
],
)
Expand Down
11 changes: 6 additions & 5 deletions frontend/app/components/memory_profile/memory_profile.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {Component, OnDestroy} from '@angular/core';
import {Component, Inject, OnDestroy} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Store} from '@ngrx/store';
import {MemoryProfileProto} from 'org_xprof/frontend/app/common/interfaces/data_table';
import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
import {MemoryProfileBase} from 'org_xprof/frontend/app/components/memory_profile/memory_profile_base';
import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
import {type DataServiceInterface, DataServiceInterfaceToken} from 'org_xprof/frontend/app/services/consolidated_data_service/data_service_interface';
import {setLoadingStateAction} from 'org_xprof/frontend/app/store/actions';
import {ReplaySubject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
Expand All @@ -25,8 +25,9 @@ export class MemoryProfile extends MemoryProfileBase implements OnDestroy {
host = '';

constructor(
route: ActivatedRoute, private readonly dataService: DataService,
private readonly store: Store<{}>) {
route: ActivatedRoute,
@Inject(DataServiceInterfaceToken) private readonly dataService:
DataServiceInterface, private readonly store: Store<{}>) {
super();
route.params.pipe(takeUntil(this.destroyed)).subscribe((params) => {
this.update(params as NavigationEvent);
Expand All @@ -45,7 +46,7 @@ export class MemoryProfile extends MemoryProfileBase implements OnDestroy {
}
}));

this.dataService.getData(this.run, this.tag, this.host)
this.dataService.getData(this.tag, this.run, this.host)
.pipe(takeUntil(this.destroyed))
.subscribe(data => {
this.store.dispatch(setLoadingStateAction({
Expand Down
37 changes: 37 additions & 0 deletions frontend/app/services/consolidated_data_service/BUILD
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
load("//defs:defs.bzl", "xprof_ng_module")

package(default_visibility = ["//frontend:internal"])

xprof_ng_module(
name = "data_service",
srcs = [
"data_service.ts",
],
deps = [
":data_service_interface",
"//third_party/javascript/safevalues/dom",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//rxjs",
"@org_xprof//frontend/app/common/angular:angular_common_http",
"@org_xprof//frontend/app/common/constants",
"@org_xprof//frontend/app/common/interfaces",
],
)

xprof_ng_module(
name = "data_service_interface",
srcs = [
"data_service_interface.ts",
"mock_interface_data.ts",
],
deps = [
"//third_party/javascript/safevalues/dom",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//rxjs",
"@org_xprof//frontend/app/common/angular:angular_common_http",
"@org_xprof//frontend/app/common/constants",
"@org_xprof//frontend/app/common/interfaces",
],
)
84 changes: 84 additions & 0 deletions frontend/app/services/consolidated_data_service/data_service.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import {PlatformLocation} from '@angular/common';
import {HttpClient, HttpParams} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {API_PREFIX, DATA_API, LOCAL_URL, PLUGIN_NAME} from 'org_xprof/frontend/app/common/constants/constants';
import {DataTable} from 'org_xprof/frontend/app/common/interfaces/data_table';
import {DataServiceInterface} from 'org_xprof/frontend/app/services/consolidated_data_service/data_service_interface';
import {Observable, of} from 'rxjs';
import {delay} from 'rxjs/operators';

import * as mockData from './mock_interface_data';

/** Delay time for milisecond for testing */
const DELAY_TIME_MS = 1000;

/** The data service class that calls API and return response. */
@Injectable()
export class ConsolidatedDataService implements DataServiceInterface {
isLocalDevelopment = false;
pathPrefix = '';
searchParams?: URLSearchParams;

constructor(
private readonly httpClient: HttpClient,
platformLocation: PlatformLocation) {
this.isLocalDevelopment = platformLocation.pathname === LOCAL_URL;
if (String(platformLocation.pathname).includes(API_PREFIX + PLUGIN_NAME)) {
this.pathPrefix =
String(platformLocation.pathname).split(API_PREFIX + PLUGIN_NAME)[0];
}
this.searchParams = new URLSearchParams(window.location.search);
}

getData(
tag: string, run: string, host: string,
parameters: Map<string, string> = new Map()): Observable<DataTable|null> {
if (this.isLocalDevelopment) {
if (tag.startsWith('overview_page')) {
return of(mockData.DATA_PLUGIN_PROFILE_OVERVIEW_PAGE_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('input_pipeline_analyzer')) {
return of(mockData.DATA_PLUGIN_PROFILE_INPUT_PIPELINE_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('tensorflow_stats')) {
return of(mockData.DATA_PLUGIN_PROFILE_TENSORFLOW_STATS_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('memory_viewer')) {
return of(mockData.DATA_PLUGIN_PROFILE_MEMORY_VIEWER_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('op_profile')) {
return of(mockData.DATA_PLUGIN_PROFILE_OP_PROFILE_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('pod_viewer')) {
return of(mockData.DATA_PLUGIN_PROFILE_POD_VIEWER_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('kernel_stats')) {
return of(mockData.DATA_PLUGIN_PROFILE_KERNEL_STATS_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('memory_profile')) {
return of(mockData.DATA_PLUGIN_PROFILE_MEMORY_PROFILE_DATA)
.pipe(delay(DELAY_TIME_MS));
} else if (tag.startsWith('tf_data_bottleneck_analysis')) {
return of(mockData.DATA_PLUGIN_PROFILE_TF_DATA_BOTTLENECK_ANALYSIS_DATA)
.pipe(delay(DELAY_TIME_MS));
} else {
return of([]).pipe(delay(DELAY_TIME_MS));
}
}
const params =
new HttpParams().set('run', run).set('tag', tag).set('host', host);
parameters.forEach((value, key) => {
params.set(key, value);
});
return this.httpClient.get(this.pathPrefix + DATA_API, {params}) as
Observable<DataTable>;
}

getDataWithParams(
tool: string,
run: string,
paramsMap: Map<string, string>,
): Observable<DataTable|null> {
return this.getData(tool, run, '', paramsMap);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* @fileoverview Data service interface meant to replace and consolidate
* 1P/3P data services in the xprof frontend.
*/

import {InjectionToken} from '@angular/core';
import {DataTable} from 'org_xprof/frontend/app/common/interfaces/data_table';
import {Observable} from 'rxjs';

/** The data service class that calls API and return response. */
export interface DataServiceInterface {
getData(
tool: string,
run: string,
host?: string,
parameters?: Map<string, string>,
ignoreError?: boolean,
): Observable<DataTable|null>;
getDataWithParams(
run: string,
tool: string,
paramsMap: Map<string, string>,
): Observable<DataTable|null>;
}

/** Injection token for the data service interface. */
export const DataServiceInterfaceToken =
new InjectionToken<DataServiceInterface>(
'DataServiceInterface',
);
Loading

0 comments on commit 6349c96

Please sign in to comment.