From 2f0316fae5ef6cb6ea281e7a385dcacd75cc4e6b Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 30 Nov 2021 17:32:27 +0530 Subject: [PATCH 1/4] feat: persisted expan collapse for explorer panels --- .../src/pages/explorer/explorer.component.ts | 53 ++++++++++++++++--- 1 file changed, 47 insertions(+), 6 deletions(-) diff --git a/projects/observability/src/pages/explorer/explorer.component.ts b/projects/observability/src/pages/explorer/explorer.component.ts index ae75ac8e6..bbc032fa2 100644 --- a/projects/observability/src/pages/explorer/explorer.component.ts +++ b/projects/observability/src/pages/explorer/explorer.component.ts @@ -10,7 +10,7 @@ import { import { Filter, ToggleItem } from '@hypertrace/components'; import { isNil } from 'lodash-es'; import { concat, EMPTY, Observable, Subject } from 'rxjs'; -import { map, take } from 'rxjs/operators'; +import { map, take, tap } from 'rxjs/operators'; import { CartesianSeriesVisualizationType } from '../../shared/components/cartesian/chart'; import { ExploreRequestState, @@ -53,7 +53,11 @@ import { (filtersChange)="this.onFiltersUpdated($event)" >
- + Visualization - + Results @@ -146,7 +154,16 @@ export class ExplorerComponent { this.vizDashboard$ = this.explorerDashboardBuilder.visualizationDashboard$; this.initialState$ = activatedRoute.queryParamMap.pipe( take(1), - map(paramMap => this.mapToInitialState(paramMap)) + map(paramMap => this.mapToInitialState(paramMap)), + tap(initialState => { + // Updating initial visualization and results expanded state + this.visualizationExpanded = initialState.visualizationExpanded ?? true; + this.resultsExpanded = initialState.resultsExpanded ?? true; + this.navigationService.addQueryParametersToUrl({ + [ExplorerQueryParam.VisualizationExpanded]: this.visualizationExpanded, + [ExplorerQueryParam.ResultsExpanded]: this.resultsExpanded + }); + }) ); this.currentContext$ = concat( this.initialState$.pipe(map(value => value.contextToggle.value.dashboardContext)), @@ -183,6 +200,20 @@ export class ExplorerComponent { this.contextChangeSubject.next(contextWrapper.dashboardContext); } + public onVisualizationExpandedChange(expanded: boolean): void { + this.visualizationExpanded = expanded; + this.navigationService.addQueryParametersToUrl({ + [ExplorerQueryParam.VisualizationExpanded]: expanded + }); + } + + public onResultsExpandedChange(expanded: boolean): void { + this.resultsExpanded = expanded; + this.navigationService.addQueryParametersToUrl({ + [ExplorerQueryParam.ResultsExpanded]: expanded + }); + } + private updateUrlWithVisualizationData(request: ExploreRequestState): void { this.navigationService.addQueryParametersToUrl({ [ExplorerQueryParam.Scope]: this.getQueryParamFromContext(request.context as ExplorerGeneratedDashboardContext), @@ -222,10 +253,16 @@ export class ExplorerComponent { } : undefined, interval: this.decodeInterval(param.get(ExplorerQueryParam.Interval)), - series: param.getAll(ExplorerQueryParam.Series).flatMap(series => this.tryDecodeExploreSeries(series)) + series: param.getAll(ExplorerQueryParam.Series).flatMap(series => this.tryDecodeExploreSeries(series)), + visualizationExpanded: this.getBooleanOrUndefined(param.get(ExplorerQueryParam.VisualizationExpanded)), + resultsExpanded: this.getBooleanOrUndefined(param.get(ExplorerQueryParam.ResultsExpanded)) }; } + private getBooleanOrUndefined(value: string | null): boolean | undefined { + return !isNil(value) ? value === 'true' : undefined; + } + private encodeInterval(interval?: TimeDuration | 'AUTO'): string | undefined { if (!interval) { return 'NONE'; @@ -281,6 +318,8 @@ interface InitialExplorerState { series: ExploreSeries[]; interval?: IntervalValue; groupBy?: GraphQlGroupBy; + visualizationExpanded?: boolean; + resultsExpanded?: boolean; } interface ExplorerContextScope { @@ -298,5 +337,7 @@ const enum ExplorerQueryParam { Group = 'group', OtherGroup = 'other', GroupLimit = 'limit', - Series = 'series' + Series = 'series', + VisualizationExpanded = 'visualization-expanded', + ResultsExpanded = 'results-expanded' } From fc707b33a0c18168c2d375be23f005e953e4b737 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 30 Nov 2021 20:45:03 +0530 Subject: [PATCH 2/4] fix: using preference service --- .../src/pages/explorer/explorer.component.ts | 56 +++++++------------ 1 file changed, 20 insertions(+), 36 deletions(-) diff --git a/projects/observability/src/pages/explorer/explorer.component.ts b/projects/observability/src/pages/explorer/explorer.component.ts index bbc032fa2..d2467136e 100644 --- a/projects/observability/src/pages/explorer/explorer.component.ts +++ b/projects/observability/src/pages/explorer/explorer.component.ts @@ -3,6 +3,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router'; import { assertUnreachable, NavigationService, + PreferenceService, QueryParamObject, TimeDuration, TimeDurationService @@ -10,7 +11,7 @@ import { import { Filter, ToggleItem } from '@hypertrace/components'; import { isNil } from 'lodash-es'; import { concat, EMPTY, Observable, Subject } from 'rxjs'; -import { map, take, tap } from 'rxjs/operators'; +import { map, take } from 'rxjs/operators'; import { CartesianSeriesVisualizationType } from '../../shared/components/cartesian/chart'; import { ExploreRequestState, @@ -54,12 +55,13 @@ import { >
- Visualization @@ -88,12 +90,13 @@ import { - Results + Results ; public readonly vizDashboard$: Observable; @@ -136,9 +141,8 @@ export class ExplorerComponent { ]; public filters: Filter[] = []; - - public visualizationExpanded: boolean = true; - public resultsExpanded: boolean = true; + public visualizationExpanded$: Observable; + public resultsExpanded$: Observable; private readonly contextChangeSubject: Subject = new Subject(); @@ -146,24 +150,18 @@ export class ExplorerComponent { private readonly metadataService: MetadataService, private readonly navigationService: NavigationService, private readonly timeDurationService: TimeDurationService, + private readonly preferenceService: PreferenceService, @Inject(EXPLORER_DASHBOARD_BUILDER_FACTORY) explorerDashboardBuilderFactory: ExplorerDashboardBuilderFactory, activatedRoute: ActivatedRoute ) { this.explorerDashboardBuilder = explorerDashboardBuilderFactory.build(); + this.visualizationExpanded$ = this.preferenceService.get(ExplorerComponent.VISUALIZATION_EXPANDED_PREFERENCE, true); + this.resultsExpanded$ = this.preferenceService.get(ExplorerComponent.RESULTS_EXPANDED_PREFERENCE, true); this.resultsDashboard$ = this.explorerDashboardBuilder.resultsDashboard$; this.vizDashboard$ = this.explorerDashboardBuilder.visualizationDashboard$; this.initialState$ = activatedRoute.queryParamMap.pipe( take(1), - map(paramMap => this.mapToInitialState(paramMap)), - tap(initialState => { - // Updating initial visualization and results expanded state - this.visualizationExpanded = initialState.visualizationExpanded ?? true; - this.resultsExpanded = initialState.resultsExpanded ?? true; - this.navigationService.addQueryParametersToUrl({ - [ExplorerQueryParam.VisualizationExpanded]: this.visualizationExpanded, - [ExplorerQueryParam.ResultsExpanded]: this.resultsExpanded - }); - }) + map(paramMap => this.mapToInitialState(paramMap)) ); this.currentContext$ = concat( this.initialState$.pipe(map(value => value.contextToggle.value.dashboardContext)), @@ -201,17 +199,11 @@ export class ExplorerComponent { } public onVisualizationExpandedChange(expanded: boolean): void { - this.visualizationExpanded = expanded; - this.navigationService.addQueryParametersToUrl({ - [ExplorerQueryParam.VisualizationExpanded]: expanded - }); + this.preferenceService.set(ExplorerComponent.VISUALIZATION_EXPANDED_PREFERENCE, expanded); } public onResultsExpandedChange(expanded: boolean): void { - this.resultsExpanded = expanded; - this.navigationService.addQueryParametersToUrl({ - [ExplorerQueryParam.ResultsExpanded]: expanded - }); + this.preferenceService.set(ExplorerComponent.RESULTS_EXPANDED_PREFERENCE, expanded); } private updateUrlWithVisualizationData(request: ExploreRequestState): void { @@ -253,16 +245,10 @@ export class ExplorerComponent { } : undefined, interval: this.decodeInterval(param.get(ExplorerQueryParam.Interval)), - series: param.getAll(ExplorerQueryParam.Series).flatMap(series => this.tryDecodeExploreSeries(series)), - visualizationExpanded: this.getBooleanOrUndefined(param.get(ExplorerQueryParam.VisualizationExpanded)), - resultsExpanded: this.getBooleanOrUndefined(param.get(ExplorerQueryParam.ResultsExpanded)) + series: param.getAll(ExplorerQueryParam.Series).flatMap(series => this.tryDecodeExploreSeries(series)) }; } - private getBooleanOrUndefined(value: string | null): boolean | undefined { - return !isNil(value) ? value === 'true' : undefined; - } - private encodeInterval(interval?: TimeDuration | 'AUTO'): string | undefined { if (!interval) { return 'NONE'; @@ -337,7 +323,5 @@ const enum ExplorerQueryParam { Group = 'group', OtherGroup = 'other', GroupLimit = 'limit', - Series = 'series', - VisualizationExpanded = 'visualization-expanded', - ResultsExpanded = 'results-expanded' + Series = 'series' } From ec5f2885d7ee485ea1de8e73b734d11d0d963d1e Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 30 Nov 2021 20:47:03 +0530 Subject: [PATCH 3/4] fix: test cases --- .../src/pages/explorer/explorer.component.test.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/observability/src/pages/explorer/explorer.component.test.ts b/projects/observability/src/pages/explorer/explorer.component.test.ts index dcab7cb6d..a77f92535 100644 --- a/projects/observability/src/pages/explorer/explorer.component.test.ts +++ b/projects/observability/src/pages/explorer/explorer.component.test.ts @@ -8,6 +8,7 @@ import { DEFAULT_COLOR_PALETTE, LayoutChangeService, NavigationService, + PreferenceService, RelativeTimeRange, TimeDuration, TimeRangeService, @@ -102,6 +103,9 @@ describe('Explorer component', () => { colors: ['black', 'white'] } }, + mockProvider(PreferenceService, { + get: jest.fn().mockReturnValue(of(true)) + }), ...getMockFlexLayoutProviders() ] }); From 4a6aad85fe52ae92c7594045c1822a3403a92697 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 30 Nov 2021 20:49:13 +0530 Subject: [PATCH 4/4] fix: removing unwanted code --- projects/observability/src/pages/explorer/explorer.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/observability/src/pages/explorer/explorer.component.ts b/projects/observability/src/pages/explorer/explorer.component.ts index d2467136e..185d1a348 100644 --- a/projects/observability/src/pages/explorer/explorer.component.ts +++ b/projects/observability/src/pages/explorer/explorer.component.ts @@ -304,8 +304,6 @@ interface InitialExplorerState { series: ExploreSeries[]; interval?: IntervalValue; groupBy?: GraphQlGroupBy; - visualizationExpanded?: boolean; - resultsExpanded?: boolean; } interface ExplorerContextScope {