From 29981116ac3bd17265d1ca639f009d656ea74933 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Tue, 16 Nov 2021 14:10:01 -0800 Subject: [PATCH 1/4] feat: use local storage to persist table columns --- .../table/table-widget-renderer.component.ts | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 36eb26ef3..31cd7c22d 100644 --- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -32,7 +32,7 @@ import { } from '@hypertrace/components'; import { WidgetRenderer } from '@hypertrace/dashboards'; import { Renderer } from '@hypertrace/hyperdash'; -import { RendererApi, RENDERER_API } from '@hypertrace/hyperdash-angular'; +import { RENDERER_API, RendererApi } from '@hypertrace/hyperdash-angular'; import { capitalize, isEmpty, isEqual, pick } from 'lodash-es'; import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs'; import { @@ -124,11 +124,6 @@ import { TableWidgetModel } from './table-widget.model'; export class TableWidgetRendererComponent extends WidgetRenderer | undefined> implements OnInit { - private static readonly DEFAULT_PREFERENCES: TableWidgetPreferences = { - columns: [], - checkboxes: [] - }; - private static readonly DEFAULT_TAB_INDEX: number = 0; public viewItems: ToggleItem[] = []; @@ -228,7 +223,7 @@ export class TableWidgetRendererComponent } private getSelectControls(changed?: TableSelectControl): Observable { - return this.getPreferences().pipe( + return this.getSessionPreferences().pipe( take(1), switchMap(preferences => forkJoinSafeEmpty( @@ -300,7 +295,7 @@ export class TableWidgetRendererComponent } private getColumnConfigs(): Observable { - return this.getPreferences().pipe( + return this.getLocalPreferences().pipe( switchMap(preferences => combineLatest([this.getScope(), this.api.change$.pipe(mapTo(true), startWith(true))]).pipe( switchMap(([scope]) => this.model.getColumns(scope)), @@ -366,8 +361,8 @@ export class TableWidgetRendererComponent private updateSelectionPreferences(tableSelectControls: TableSelectControl[]): void { if (isNonEmptyString(this.model.getId())) { - this.getPreferences().subscribe(preferences => - this.setPreferences({ + this.getSessionPreferences().subscribe(preferences => + this.setSessionPreferences({ ...preferences, selections: tableSelectControls }) @@ -401,8 +396,8 @@ export class TableWidgetRendererComponent private updateCheckboxPreferences(tableCheckboxControls: TableCheckboxControl[]): void { if (isNonEmptyString(this.model.getId())) { - this.getPreferences().subscribe(preferences => - this.setPreferences({ + this.getSessionPreferences().subscribe(preferences => + this.setSessionPreferences({ ...preferences, checkboxes: tableCheckboxControls }) @@ -411,7 +406,7 @@ export class TableWidgetRendererComponent } private getCheckboxControls(changed?: TableCheckboxChange): Observable { - return this.getPreferences().pipe( + return this.getSessionPreferences().pipe( switchMap(preferences => forkJoinSafeEmpty( this.model @@ -484,8 +479,8 @@ export class TableWidgetRendererComponent public onColumnsChange(columns: TableColumnConfig[]): void { if (isNonEmptyString(this.model.getId())) { - this.getPreferences().subscribe(preferences => - this.setPreferences({ + this.getLocalPreferences().subscribe(preferences => + this.setLocalPreferences({ ...preferences, columns: columns.map(column => this.dehydratePersistedColumnConfig(column)) }) @@ -552,27 +547,39 @@ export class TableWidgetRendererComponent private getViewPreferences(): Observable { return isNonEmptyString(this.model.viewId) - ? this.preferenceService.get(this.model.viewId, {}, StorageType.Session).pipe(first()) + ? this.preferenceService.get(this.model.viewId, {}, StorageType.Local).pipe(first()) : of({}); } private setViewPreferences(preferences: TableWidgetViewPreferences): void { if (isNonEmptyString(this.model.viewId)) { - this.preferenceService.set(this.model.viewId, preferences, StorageType.Session); + this.preferenceService.set(this.model.viewId, preferences, StorageType.Local); + } + } + + private getLocalPreferences(): Observable { + return isNonEmptyString(this.model.getId()) + ? this.preferenceService + .get(this.model.getId()!, {}, StorageType.Local) + .pipe(first()) + : of({}); + } + + private setLocalPreferences(preferences: TableWidgetLocalPreferences): void { + if (isNonEmptyString(this.model.getId())) { + this.preferenceService.set(this.model.getId()!, preferences, StorageType.Local); } } - private getPreferences( - defaultPreferences: TableWidgetPreferences = TableWidgetRendererComponent.DEFAULT_PREFERENCES - ): Observable { + private getSessionPreferences(): Observable { return isNonEmptyString(this.model.getId()) ? this.preferenceService - .get(this.model.getId()!, defaultPreferences, StorageType.Session) + .get(this.model.getId()!, {}, StorageType.Session) .pipe(first()) - : of(defaultPreferences); + : of({}); } - private setPreferences(preferences: TableWidgetPreferences): void { + private setSessionPreferences(preferences: TableWidgetSessionPreferences): void { if (isNonEmptyString(this.model.getId())) { this.preferenceService.set(this.model.getId()!, preferences, StorageType.Session); } @@ -607,8 +614,11 @@ interface TableWidgetViewPreferences { activeView?: string; } -interface TableWidgetPreferences { +interface TableWidgetLocalPreferences { columns?: PersistedTableColumnConfig[]; +} + +interface TableWidgetSessionPreferences { checkboxes?: TableCheckboxControl[]; selections?: TableSelectControl[]; } From 0c307dc9c274ba25d1abefc18d31a33bd7521381 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Tue, 16 Nov 2021 14:31:10 -0800 Subject: [PATCH 2/4] fix: typo --- .../table/table-widget-renderer.component.ts | 64 +++++++++++-------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 31cd7c22d..ed1c096fb 100644 --- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -124,6 +124,7 @@ import { TableWidgetModel } from './table-widget.model'; export class TableWidgetRendererComponent extends WidgetRenderer | undefined> implements OnInit { + private static readonly DEFAULT_TAB_INDEX: number = 0; public viewItems: ToggleItem[] = []; @@ -142,9 +143,7 @@ export class TableWidgetRendererComponent private readonly searchFilterSubject: Subject = new BehaviorSubject([]); private readonly selectFilterSubject: BehaviorSubject = new BehaviorSubject([]); - private readonly queryPropertiesSubject: BehaviorSubject> = new BehaviorSubject< - Dictionary - >({}); + private readonly queryPropertiesSubject: BehaviorSubject> = new BehaviorSubject>({}); public queryProperties$: Observable> = this.queryPropertiesSubject.asObservable(); public constructor( @@ -242,9 +241,9 @@ export class TableWidgetRendererComponent map(([options, filters]) => { const foundPreferences = preferences.selections ? preferences.selections.find( - preferencesSelectionControl => - selectControlModel.placeholder === preferencesSelectionControl.placeholder - ) + preferencesSelectionControl => + selectControlModel.placeholder === preferencesSelectionControl.placeholder + ) : undefined; return ( @@ -362,10 +361,11 @@ export class TableWidgetRendererComponent private updateSelectionPreferences(tableSelectControls: TableSelectControl[]): void { if (isNonEmptyString(this.model.getId())) { this.getSessionPreferences().subscribe(preferences => - this.setSessionPreferences({ - ...preferences, - selections: tableSelectControls - }) + this.setSessionPreferences( + { + ...preferences, + selections: tableSelectControls + }) ); } } @@ -397,10 +397,11 @@ export class TableWidgetRendererComponent private updateCheckboxPreferences(tableCheckboxControls: TableCheckboxControl[]): void { if (isNonEmptyString(this.model.getId())) { this.getSessionPreferences().subscribe(preferences => - this.setSessionPreferences({ - ...preferences, - checkboxes: tableCheckboxControls - }) + this.setSessionPreferences( + { + ...preferences, + checkboxes: tableCheckboxControls + }) ); } } @@ -432,8 +433,8 @@ export class TableWidgetRendererComponent const found = preferences.checkboxes ? preferences.checkboxes.find(preferencesCheckboxControl => - options.some(option => option.label === preferencesCheckboxControl.label) - ) + options.some(option => option.label === preferencesCheckboxControl.label) + ) : undefined; return ( @@ -480,10 +481,11 @@ export class TableWidgetRendererComponent public onColumnsChange(columns: TableColumnConfig[]): void { if (isNonEmptyString(this.model.getId())) { this.getLocalPreferences().subscribe(preferences => - this.setLocalPreferences({ - ...preferences, - columns: columns.map(column => this.dehydratePersistedColumnConfig(column)) - }) + this.setLocalPreferences( + { + ...preferences, + columns: columns.map(column => this.dehydratePersistedColumnConfig(column)) + }) ); } } @@ -495,7 +497,7 @@ export class TableWidgetRendererComponent public onRowSelection(selections: StatefulTableRow[]): void { this.selectedRows = selections; /** - * Todo: Stich this with selection handlers + * Todo: Stitch this with selection handlers */ } @@ -551,7 +553,9 @@ export class TableWidgetRendererComponent : of({}); } - private setViewPreferences(preferences: TableWidgetViewPreferences): void { + private setViewPreferences( + preferences: TableWidgetViewPreferences + ): void { if (isNonEmptyString(this.model.viewId)) { this.preferenceService.set(this.model.viewId, preferences, StorageType.Local); } @@ -560,12 +564,14 @@ export class TableWidgetRendererComponent private getLocalPreferences(): Observable { return isNonEmptyString(this.model.getId()) ? this.preferenceService - .get(this.model.getId()!, {}, StorageType.Local) - .pipe(first()) + .get(this.model.getId()!, {}, StorageType.Local) + .pipe(first()) : of({}); } - private setLocalPreferences(preferences: TableWidgetLocalPreferences): void { + private setLocalPreferences( + preferences: TableWidgetLocalPreferences + ): void { if (isNonEmptyString(this.model.getId())) { this.preferenceService.set(this.model.getId()!, preferences, StorageType.Local); } @@ -574,12 +580,14 @@ export class TableWidgetRendererComponent private getSessionPreferences(): Observable { return isNonEmptyString(this.model.getId()) ? this.preferenceService - .get(this.model.getId()!, {}, StorageType.Session) - .pipe(first()) + .get(this.model.getId()!, {}, StorageType.Session) + .pipe(first()) : of({}); } - private setSessionPreferences(preferences: TableWidgetSessionPreferences): void { + private setSessionPreferences( + preferences: TableWidgetSessionPreferences + ): void { if (isNonEmptyString(this.model.getId())) { this.preferenceService.set(this.model.getId()!, preferences, StorageType.Session); } From 1399118e8d6bba21c03697cbf75eba0d6d12f02e Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Tue, 16 Nov 2021 16:04:31 -0800 Subject: [PATCH 3/4] style: lint --- .../dashboard/widgets/table/table-widget-renderer.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index ed1c096fb..63de784e5 100644 --- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -32,7 +32,7 @@ import { } from '@hypertrace/components'; import { WidgetRenderer } from '@hypertrace/dashboards'; import { Renderer } from '@hypertrace/hyperdash'; -import { RENDERER_API, RendererApi } from '@hypertrace/hyperdash-angular'; +import { RendererApi, RENDERER_API } from '@hypertrace/hyperdash-angular'; import { capitalize, isEmpty, isEqual, pick } from 'lodash-es'; import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs'; import { From 806398204193d0a7bb85ed0dfb7bfe496066eb52 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Tue, 16 Nov 2021 16:27:12 -0800 Subject: [PATCH 4/4] style: prettier --- .../table/table-widget-renderer.component.ts | 62 ++++++++----------- 1 file changed, 27 insertions(+), 35 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 63de784e5..71a36b0d9 100644 --- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -124,7 +124,6 @@ import { TableWidgetModel } from './table-widget.model'; export class TableWidgetRendererComponent extends WidgetRenderer | undefined> implements OnInit { - private static readonly DEFAULT_TAB_INDEX: number = 0; public viewItems: ToggleItem[] = []; @@ -143,7 +142,9 @@ export class TableWidgetRendererComponent private readonly searchFilterSubject: Subject = new BehaviorSubject([]); private readonly selectFilterSubject: BehaviorSubject = new BehaviorSubject([]); - private readonly queryPropertiesSubject: BehaviorSubject> = new BehaviorSubject>({}); + private readonly queryPropertiesSubject: BehaviorSubject> = new BehaviorSubject< + Dictionary + >({}); public queryProperties$: Observable> = this.queryPropertiesSubject.asObservable(); public constructor( @@ -241,9 +242,9 @@ export class TableWidgetRendererComponent map(([options, filters]) => { const foundPreferences = preferences.selections ? preferences.selections.find( - preferencesSelectionControl => - selectControlModel.placeholder === preferencesSelectionControl.placeholder - ) + preferencesSelectionControl => + selectControlModel.placeholder === preferencesSelectionControl.placeholder + ) : undefined; return ( @@ -361,11 +362,10 @@ export class TableWidgetRendererComponent private updateSelectionPreferences(tableSelectControls: TableSelectControl[]): void { if (isNonEmptyString(this.model.getId())) { this.getSessionPreferences().subscribe(preferences => - this.setSessionPreferences( - { - ...preferences, - selections: tableSelectControls - }) + this.setSessionPreferences({ + ...preferences, + selections: tableSelectControls + }) ); } } @@ -397,11 +397,10 @@ export class TableWidgetRendererComponent private updateCheckboxPreferences(tableCheckboxControls: TableCheckboxControl[]): void { if (isNonEmptyString(this.model.getId())) { this.getSessionPreferences().subscribe(preferences => - this.setSessionPreferences( - { - ...preferences, - checkboxes: tableCheckboxControls - }) + this.setSessionPreferences({ + ...preferences, + checkboxes: tableCheckboxControls + }) ); } } @@ -433,8 +432,8 @@ export class TableWidgetRendererComponent const found = preferences.checkboxes ? preferences.checkboxes.find(preferencesCheckboxControl => - options.some(option => option.label === preferencesCheckboxControl.label) - ) + options.some(option => option.label === preferencesCheckboxControl.label) + ) : undefined; return ( @@ -481,11 +480,10 @@ export class TableWidgetRendererComponent public onColumnsChange(columns: TableColumnConfig[]): void { if (isNonEmptyString(this.model.getId())) { this.getLocalPreferences().subscribe(preferences => - this.setLocalPreferences( - { - ...preferences, - columns: columns.map(column => this.dehydratePersistedColumnConfig(column)) - }) + this.setLocalPreferences({ + ...preferences, + columns: columns.map(column => this.dehydratePersistedColumnConfig(column)) + }) ); } } @@ -553,9 +551,7 @@ export class TableWidgetRendererComponent : of({}); } - private setViewPreferences( - preferences: TableWidgetViewPreferences - ): void { + private setViewPreferences(preferences: TableWidgetViewPreferences): void { if (isNonEmptyString(this.model.viewId)) { this.preferenceService.set(this.model.viewId, preferences, StorageType.Local); } @@ -564,14 +560,12 @@ export class TableWidgetRendererComponent private getLocalPreferences(): Observable { return isNonEmptyString(this.model.getId()) ? this.preferenceService - .get(this.model.getId()!, {}, StorageType.Local) - .pipe(first()) + .get(this.model.getId()!, {}, StorageType.Local) + .pipe(first()) : of({}); } - private setLocalPreferences( - preferences: TableWidgetLocalPreferences - ): void { + private setLocalPreferences(preferences: TableWidgetLocalPreferences): void { if (isNonEmptyString(this.model.getId())) { this.preferenceService.set(this.model.getId()!, preferences, StorageType.Local); } @@ -580,14 +574,12 @@ export class TableWidgetRendererComponent private getSessionPreferences(): Observable { return isNonEmptyString(this.model.getId()) ? this.preferenceService - .get(this.model.getId()!, {}, StorageType.Session) - .pipe(first()) + .get(this.model.getId()!, {}, StorageType.Session) + .pipe(first()) : of({}); } - private setSessionPreferences( - preferences: TableWidgetSessionPreferences - ): void { + private setSessionPreferences(preferences: TableWidgetSessionPreferences): void { if (isNonEmptyString(this.model.getId())) { this.preferenceService.set(this.model.getId()!, preferences, StorageType.Session); }