Skip to content

Commit 6365f57

Browse files
mjabascal10mjabascal10
committed
refactor: improve default time handling and enhance observables in dashboard components
Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>
1 parent 550c4fa commit 6365f57

10 files changed

Lines changed: 119 additions & 31 deletions

File tree

‎frontend/src/app/dashboard/dashboard-export-pdf/dashboard-export-pdf.component.ts‎

Lines changed: 83 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import {AfterViewInit, ChangeDetectorRef, Component, OnInit} from '@angular/core';
1+
import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
22
import {DomSanitizer} from '@angular/platform-browser';
33
import {ActivatedRoute} from '@angular/router';
44
import {NgxSpinnerService} from 'ngx-spinner';
5+
import {combineLatest, from, of, Subject} from 'rxjs';
6+
import {filter, map, switchMap, takeUntil, tap} from 'rxjs/operators';
57
import {AccountService} from '../../core/auth/account.service';
68
import {Account} from '../../core/user/account.model';
79
import {DashboardBehavior} from '../../shared/behaviors/dashboard.behavior';
@@ -21,7 +23,7 @@ import {UtmRenderVisualization} from '../shared/services/utm-render-visualizatio
2123
templateUrl: './dashboard-export-pdf.component.html',
2224
styleUrls: ['./dashboard-export-pdf.component.scss']
2325
})
24-
export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
26+
export class DashboardExportPdfComponent implements OnInit, OnDestroy {
2527
dashboardId: number;
2628
dashboardName: string;
2729
visualizationRender: UtmDashboardVisualizationType[];
@@ -36,6 +38,7 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
3638
filtersValues: ElasticFilterType[] = [];
3739
filterTime: { from: string, to: string };
3840
cover: string;
41+
destroy$ = new Subject<void>();
3942

4043
constructor(private activatedRoute: ActivatedRoute,
4144
private accountService: AccountService,
@@ -48,14 +51,7 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
4851
private cdr: ChangeDetectorRef) {
4952
}
5053

51-
ngAfterViewInit(): void {
52-
this.cdr.detectChanges();
53-
this.themeChangeBehavior.$themeReportCover.subscribe(img => {
54-
this.cover = img;
55-
});
56-
}
57-
58-
ngOnInit() {
54+
/*ngOnInit() {
5955
this.activatedRoute.queryParams.subscribe(params => {
6056
const queryParams = Object.entries(params).length > 0 ? params : null;
6157
if (queryParams) {
@@ -68,12 +64,7 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
6864
this.accountService.identity().then(account => {
6965
this.account = account;
7066
});
71-
/*window.addEventListener('beforeprint', (event) => {
72-
this.printFormat = true;
73-
});
74-
window.addEventListener('afterprint', (event) => {
75-
this.printFormat = false;
76-
});*/
67+
7768
this.activatedRoute.params.subscribe(params => {
7869
this.dashboardId = params.id;
7970
if (this.dashboardId) {
@@ -93,8 +84,66 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
9384
});
9485
}
9586
});
87+
}*/
88+
89+
ngOnInit() {
90+
91+
this.themeChangeBehavior.$themeReportCover
92+
.pipe(takeUntil(this.destroy$))
93+
.subscribe(img => {
94+
this.cover = img;
95+
});
96+
97+
const queryParams$ = this.activatedRoute.queryParams.pipe(
98+
map(params => Object.keys(params).length > 0 ? params : null),
99+
switchMap(params => {
100+
if (!params) { return of(null); }
101+
return from(parseQueryParamsToFilter(params));
102+
}),
103+
tap(filters => {
104+
if (filters && filters.length > 0) {
105+
this.filtersValues = filters;
106+
this.getTimeFilterValue();
107+
}
108+
})
109+
);
110+
111+
const dashboardId$ = this.activatedRoute.params.pipe(
112+
map(params => params.id),
113+
tap(id => this.dashboardId = id)
114+
);
115+
116+
combineLatest([queryParams$, dashboardId$])
117+
.pipe(
118+
filter(([filters, dashboardId]) => !!dashboardId),
119+
switchMap(([filters, dashboardId]) => {
120+
const request = {
121+
page: 0,
122+
size: 10000,
123+
'idDashboard.equals': dashboardId,
124+
sort: 'order,asc'
125+
};
126+
return this.utmRenderVisualization.query(request);
127+
}),
128+
tap(vis => {
129+
const visualizations = vis.body || [];
130+
this.dashboardName = visualizations[0].dashboard.name;
131+
this.dashboardDescription = visualizations[0].dashboard.description;
132+
133+
const filters = JSON.parse(visualizations[0].dashboard.filters);
134+
this.dashboardFilters = filters ? filters : [];
135+
136+
this.applyTimeFilterToVisualizations(visualizations);
137+
138+
this.loadingVisualizations = false;
139+
})
140+
)
141+
.subscribe();
142+
143+
this.accountService.identity().then(account => this.account = account);
96144
}
97145

146+
98147
setVisFilter(): Promise<boolean> {
99148
return new Promise<boolean>(resolve => {
100149
for (const dashFilter of this.getFilterByIndexPattern()) {
@@ -151,7 +200,7 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
151200
getTimeFilterValue() {
152201
this.filterTime = {
153202
from: this.resolveFromDate(this.getTime()),
154-
to: this.resolveToDate(this.getTime()),
203+
to: this.resolveFromDate(this.getTime()),
155204
};
156205
}
157206

@@ -191,4 +240,21 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
191240
showFilters(): boolean {
192241
return this.filtersValues.filter(value => value.field !== '@timestamp').length > 0;
193242
}
243+
244+
applyTimeFilterToVisualizations(visualizations: UtmDashboardVisualizationType[]) {
245+
if (!this.filtersValues || this.filtersValues.length === 0) { return; }
246+
247+
this.visualizationRender = visualizations.map(v => ({
248+
...v,
249+
visualization: {
250+
...v.visualization,
251+
filterType: [...v.visualization.filterType, ... this.filtersValues]
252+
}
253+
}));
254+
}
255+
256+
ngOnDestroy() {
257+
this.destroy$.next();
258+
this.destroy$.complete();
259+
}
194260
}

‎frontend/src/app/dashboard/dashboard-render/dashboard-render.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,8 +177,9 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
177177
exportToPdf() {
178178
filtersToStringParam(this.filtersValues).then(queryParams => {
179179
this.spinner.show('buildPrintPDF');
180-
const url = '/dashboard/export/' + this.dashboard.id + '/' + normalizeString(this.dashboard.name) + '?' + queryParams;
181-
// window.open('/dashboard/export/' + this.dashboardId + '/' + normalizeString(this.dashboard.name) + '?' + queryParams, '_blank');
180+
const safeParams = new URLSearchParams(queryParams).toString();
181+
const url = `/dashboard/export/${this.dashboard.id}/${normalizeString(this.dashboard.name)}?${safeParams}`;
182+
182183
this.exportPdfService.getPdf(url, this.dashboard.name, 'PDF_TYPE_TOKEN').subscribe(response => {
183184
this.spinner.hide('buildPrintPDF').then(() =>
184185
this.exportPdfService.handlePdfResponse(response));

‎frontend/src/app/dashboard/shared/render-visualization-print/render-visualization-print.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="container-fluid container-export">
2-
<div *ngIf="visualizationRender"
2+
<div *ngIf="visualizationRender && visualizationRender.length > 0"
33
class="d-flex flex-column justify-content-center align-items-center">
44
<div #container
55
*ngFor="let vis of visualizationRender"

‎frontend/src/app/graphic-builder/shared/components/viewer/chart-view/chart-view.component.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,10 @@ export class ChartViewComponent implements OnInit, OnDestroy {
7878
this.data$ = this.refreshService.refresh$
7979
.pipe(
8080
takeUntil(this.destroy$),
81-
filter((refreshType) => refreshType === RefreshType.ALL ||
82-
refreshType === this.refreshType),
81+
filter((refreshType) => {
82+
return refreshType === RefreshType.ALL ||
83+
refreshType === this.refreshType;
84+
}),
8385
switchMap((value, index) => this.runVisualization()));
8486

8587

@@ -131,7 +133,11 @@ export class ChartViewComponent implements OnInit, OnDestroy {
131133

132134
if (!this.defaultTime) {
133135
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
134-
this.refreshService.sendRefresh(this.refreshType);
136+
137+
if (!this.defaultTime) {
138+
this.refreshService.sendRefresh(this.refreshType);
139+
}
140+
135141
}
136142
}
137143

‎frontend/src/app/graphic-builder/shared/components/viewer/goal-view/goal-view.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,11 @@ export class GoalViewComponent implements OnInit, OnDestroy {
9595

9696
if (!this.defaultTime) {
9797
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
98-
this.refreshService.sendRefresh(this.refreshType);
98+
99+
if (!this.defaultTime) {
100+
this.refreshService.sendRefresh(this.refreshType);
101+
}
102+
99103
}
100104
}
101105

‎frontend/src/app/graphic-builder/shared/components/viewer/map-view/map-view.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,11 @@ export class MapViewComponent implements OnInit, AfterViewInit, OnDestroy {
324324

325325
if (!this.defaultTime) {
326326
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
327-
this.refreshService.sendRefresh(this.refreshType);
327+
328+
if (!this.defaultTime) {
329+
this.refreshService.sendRefresh(this.refreshType);
330+
}
331+
328332
}
329333
}
330334

‎frontend/src/app/graphic-builder/shared/components/viewer/metric-view/metric-view.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,11 @@ export class MetricViewComponent implements OnInit, OnDestroy {
100100

101101
if (!this.defaultTime) {
102102
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
103-
this.refreshService.sendRefresh(this.refreshType);
103+
104+
if (!this.defaultTime) {
105+
this.refreshService.sendRefresh(this.refreshType);
106+
}
107+
104108
}
105109
}
106110

‎frontend/src/app/graphic-builder/shared/components/viewer/table-view/table-view.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,11 @@ export class TableViewComponent implements OnInit, OnChanges, OnDestroy {
127127

128128
if (!this.defaultTime) {
129129
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
130-
this.refreshService.sendRefresh(this.refreshType);
130+
131+
if (!this.defaultTime) {
132+
this.refreshService.sendRefresh(this.refreshType);
133+
}
134+
131135
}
132136
}
133137

‎frontend/src/app/shared/services/util/refresh.service.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ export class RefreshService {
4545
this.refreshSubject.next(null);
4646
if (this.subscription) {
4747
this.subscription.unsubscribe();
48-
console.log('refresh stopped');
4948
}
5049
}
5150

‎frontend/src/app/shared/util/query-params-to-filter.util.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,18 +167,18 @@ export function extractQueryParamsForNavigation(url: string): { path: string, qu
167167
const queryParamsStart = url.indexOf('?');
168168

169169
if (queryParamsStart !== -1) {
170-
const path = url.slice(0, queryParamsStart); // Obtén la ruta base
170+
const path = url.slice(0, queryParamsStart);
171171
const queryParamsString = url.slice(queryParamsStart + 1);
172172
const searchParams = new URLSearchParams(queryParamsString);
173173
const queryParams: Record<string, string> = {};
174174

175175
searchParams.forEach((value, key) => {
176-
queryParams[key] = value; // No decodifiques nada aquí
176+
queryParams[key] = value;
177177
});
178178

179179
return { path, queryParams };
180180
}
181181

182-
return { path: url, queryParams: {} }; // Si no hay parámetros, devuelve solo la ruta base
182+
return { path: url, queryParams: {} };
183183
}
184184

0 commit comments

Comments
 (0)