feat: CreateCsvDownloaderService

projects/components/src/table/table.component.ts

@@ -404,6 +404,9 @@ export class TableComponent
   @Output()
   public readonly columnConfigsChange: EventEmitter<TableColumnConfig[]> = new EventEmitter<TableColumnConfig[]>();
 
+  @Output()
+  public readonly visibleColumnsChange: EventEmitter<TableColumnConfig[]> = new EventEmitter<TableColumnConfig[]>();
+
   @Output()
   public readonly sortChange: EventEmitter<SortedColumn<TableColumnConfig>> = new EventEmitter<
     SortedColumn<TableColumnConfig>
@@ -731,6 +734,7 @@ export class TableComponent
   private updateVisibleColumns(visibleColumnConfigs: TableColumnConfigExtended[]): void {
     this.visibleColumnConfigs = visibleColumnConfigs;
     this.visibleColumnIds = this.visibleColumnConfigs.map(column => column.id);
+    this.visibleColumnsChange.next(this.visibleColumnConfigs.filter(column => !this.isStateColumn(column)));
   }
 
   private initializeData(): void {

projects/dashboards/src/test/dashboard-verification.ts

@@ -11,13 +11,14 @@ import {
   TimeRangeService,
   TimeUnit
 } from '@hypertrace/common';
+import { NotificationService } from '@hypertrace/components';
 import { GraphQlRequestService } from '@hypertrace/graphql-client';
 import { ModelJson } from '@hypertrace/hyperdash';
 import { DashboardManagerService, LoggerService, RENDERER_API } from '@hypertrace/hyperdash-angular';
 import { GraphQlQueryEventService, MetadataService } from '@hypertrace/observability';
 import { getMockFlexLayoutProviders } from '@hypertrace/test-utils';
 import { mockProvider, Spectator } from '@ngneat/spectator/jest';
-import { EMPTY, of } from 'rxjs';
+import { EMPTY, Observable, of } from 'rxjs';
 
 export const isValidModelJson = (
   spectator: Spectator<unknown>,
@@ -55,6 +56,7 @@ export const mockDashboardProviders = [
     getFilterAttributes: () => of([]),
     getAttributeKeyDisplayName: (_: string, attributeKey: string) => of(attributeKey)
   }),
+  mockProvider(NotificationService, { withNotification: jest.fn().mockReturnValue((x: Observable<unknown>) => x) }),
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/55803#discussioncomment-1341954
   mockProvider(LoggerService, {
     warn: jest.fn().mockReturnValue(() => {

projects/observability/src/pages/explorer/explorer.component.test.ts

@@ -21,12 +21,13 @@ import {
   FilterBarComponent,
   FilterBuilderLookupService,
   FilterOperator,
+  NotificationService,
   ToggleGroupComponent
 } from '@hypertrace/components';
 import { GraphQlRequestService } from '@hypertrace/graphql-client';
 import { getMockFlexLayoutProviders, patchRouterNavigateForTest } from '@hypertrace/test-utils';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-import { EMPTY, NEVER, of } from 'rxjs';
+import { EMPTY, NEVER, Observable, of } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 import { CartesianSeriesVisualizationType } from '../../shared/components/cartesian/chart';
 import { ExploreQueryEditorComponent } from '../../shared/components/explore-query-editor/explore-query-editor.component';
@@ -94,6 +95,7 @@ describe('Explorer component', () => {
         getCurrentTimeRange: () => testTimeRange,
         getTimeRangeAndChanges: () => NEVER.pipe(startWith(testTimeRange))
       }),
+      mockProvider(NotificationService, { withNotification: jest.fn().mockReturnValue((x: Observable<unknown>) => x) }),
       mockProvider(EntitiesGraphqlQueryBuilderService),
       {
         provide: ActivatedRoute,

projects/observability/src/public-api.ts

@@ -400,3 +400,6 @@ export * from './shared/components/bar-gauge/bar-gauge.module';
 
 // Time Range utils
 export * from './shared/utils/time-range';
+
+// CSV Downloader Service
+export * from './shared/services/global-csv-download-table/global-csv-download-table.service';

projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -50,6 +50,7 @@ import {
   withLatestFrom
 } from 'rxjs/operators';
 import { AttributeMetadata, toFilterAttributeType } from '../../../graphql/model/metadata/attribute-metadata';
+import { GlobalCsvDownloadTableService } from '../../../services/global-csv-download-table/global-csv-download-table.service';
 import { MetadataService } from '../../../services/metadata/metadata.service';
 import { InteractionHandler } from '../../interaction/interaction-handler';
 import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
@@ -110,6 +111,7 @@ import { TableWidgetModel } from './table-widget.model';
           (rowClicked)="this.onRowClicked($event)"
           (selectionsChange)="this.onRowSelection($event)"
           (columnConfigsChange)="this.onColumnsChange($event)"
+          (visibleColumnsChange)="this.onVisibleColumnsChange($event)"
         >
         </ht-table>
       </div>
@@ -154,7 +156,8 @@ export class TableWidgetRendererComponent
     @Inject(RENDERER_API) api: RendererApi<TableWidgetModel>,
     changeDetectorRef: ChangeDetectorRef,
     private readonly metadataService: MetadataService,
-    private readonly preferenceService: PreferenceService
+    private readonly preferenceService: PreferenceService,
+    private readonly globalCsvDownloadTableService: GlobalCsvDownloadTableService
   ) {
     super(api, changeDetectorRef);
   }
@@ -498,6 +501,13 @@ export class TableWidgetRendererComponent
     this.columnConfigs$ = this.getColumnConfigs();
   }
 
+  public onVisibleColumnsChange(columns: TableColumnConfig[]): void {
+    this.globalCsvDownloadTableService.registerDataSource('table-widget-renderer', {
+      columns: columns,
+      data: this.model.getData()
+    });
+  }
+
   public onColumnsChange(columns: TableColumnConfig[]): void {
     if (isNonEmptyString(this.model.getId())) {
       this.getLocalPreferences().subscribe(preferences =>

projects/observability/src/shared/services/global-csv-download-table/global-csv-download-table.service.ts

@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+import { Dictionary } from '@hypertrace/common';
+import {
+  CsvDownloadFileConfig,
+  FileDownloadService,
+  TableColumnConfig,
+  TableDataResponse,
+  TableDataSource,
+  TableRow,
+  TableSortDirection
+} from '@hypertrace/components';
+import { isNil } from 'lodash-es';
+import { Observable, throwError } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class GlobalCsvDownloadTableService {
+  // Note: This service should be use to connect and donwload data from two unrelated components. The component's data to be downloaded should be register and can be executed from a different component.
+
+  private readonly csvDataSourceMap: Map<string, GlobalCsvDownloadTableData> = new Map();
+
+  public constructor(private readonly fileDownloadService: FileDownloadService) {}
+
+  public downloadCsv(key: string, fileName: string, parser: GlobalCsvDownloadTableRowParser): Observable<unknown> {
+    if (!this.hasRegisteredDataSource(key)) {
+      throwError('No data available.');
+    }
+
+    const csvDownloadFileConfig: CsvDownloadFileConfig = this.getCsvDownloadFileConfig(
+      fileName,
+      this.csvDataSourceMap.get(key)!,
+      parser
+    );
+
+    return !isNil(csvDownloadFileConfig)
+      ? this.fileDownloadService.downloadAsCsv(csvDownloadFileConfig)
+      : throwError('No data available.');
+  }
+
+  public registerDataSource(key: string, source: GlobalCsvDownloadTableData): void {
+    this.csvDataSourceMap.set(key, source);
+  }
+
+  public getRegisteredDataSource(key: string): GlobalCsvDownloadTableData | undefined {
+    return this.csvDataSourceMap.get(key);
+  }
+
+  public hasRegisteredDataSource(key: string): boolean {
+    return this.csvDataSourceMap.has(key);
+  }
+
+  public deleteRegisteredDataSource(key: string): void {
+    if (this.csvDataSourceMap.has(key)) {
+      this.csvDataSourceMap.delete(key);
+    }
+  }
+
+  public clearAllDataSource(): void {
+    this.csvDataSourceMap.clear();
+  }
+
+  private getCsvDownloadFileConfig(
+    fileName: string,
+    downloadData: GlobalCsvDownloadTableData,
+    parser: GlobalCsvDownloadTableRowParser
+  ): CsvDownloadFileConfig {
+    return {
+      fileName: `${fileName}.csv`,
+      dataSource: downloadData.data.pipe(
+        switchMap(sourceData => this.getDownloadableData(sourceData, downloadData.columns)),
+        map(result => result.data.map(row => parser.parse(row)))
+      )
+    };
+  }
+
+  private getDownloadableData(
+    sourceData: TableDataSource<TableRow>,
+    columns: TableColumnConfig[]
+  ): Observable<TableDataResponse<TableRow>> {
+    const sortedByColumn = columns.find(column => column.sort !== undefined);
+
+    return sourceData.getData({
+      columns: columns,
+      position: {
+        startIndex: 0,
+        limit: 10000
+      },
+      ...(sortedByColumn !== undefined
+        ? {
+            sort: {
+              column: sortedByColumn,
+              direction: sortedByColumn.sort === 'DESC' ? TableSortDirection.Descending : TableSortDirection.Ascending
+            }
+          }
+        : undefined)
+    });
+  }
+}
+
+export interface GlobalCsvDownloadTableData {
+  columns: TableColumnConfig[];
+  data: Observable<TableDataSource<TableRow>>;
+}
+
+export interface GlobalCsvDownloadTableRowParser {
+  parse: (row: TableRow) => Dictionary<unknown>;
+}