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 => column.id !== '$$expanded'));
   }
 
   private initializeData(): void {

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/global-csv-download.service';

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

@@ -58,6 +58,7 @@ import { SpecificationBackedTableColumnDef } from './table-widget-column.model';
 import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
 import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model';
 import { TableWidgetModel } from './table-widget.model';
+import { GlobalCsvDownloadService } from '../../../services/global-csv-download/global-csv-download.service';
 
 @Renderer({ modelClass: TableWidgetModel })
 @Renderer({ modelClass: TableWidgetViewToggleModel })
@@ -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 globalCsvDownloadService: GlobalCsvDownloadService
   ) {
     super(api, changeDetectorRef);
   }
@@ -498,6 +501,13 @@ export class TableWidgetRendererComponent
     this.columnConfigs$ = this.getColumnConfigs();
   }
 
+  public onVisibleColumnsChange(columns: TableColumnConfig[]): void {
+    this.globalCsvDownloadService.registerDataSource('table-widget-renderer', {
+      columns: columns,
+      getData: 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/global-csv-download.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { TableColumnConfig, TableDataSource, TableRow } from '@hypertrace/components';
+import { Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class GlobalCsvDownloadService {
+  // 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, GlobalCsvDownloadData> = new Map();
+
+  public registerDataSource(key: string, source: GlobalCsvDownloadData): void {
+    if (this.csvDataSourceMap.has(key)) {
+      this.csvDataSourceMap.delete(key);
+    }
+
+    this.csvDataSourceMap.set(key, source);
+  }
+
+  public getRegisteredDataSource(key: string): GlobalCsvDownloadData | 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();
+  }
+}
+
+export interface GlobalCsvDownloadData {
+  columns: TableColumnConfig[];
+  getData: Observable<TableDataSource<TableRow>>;
+}