-
diff --git a/frontend/src/app/graphic-builder/shared/components/viewer/metric-view/metric-view.component.ts b/frontend/src/app/graphic-builder/shared/components/viewer/metric-view/metric-view.component.ts
index 4f39e2a24..5f383fd82 100644
--- a/frontend/src/app/graphic-builder/shared/components/viewer/metric-view/metric-view.component.ts
+++ b/frontend/src/app/graphic-builder/shared/components/viewer/metric-view/metric-view.component.ts
@@ -1,10 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {UtmToastService} from '../../../../../shared/alert/utm-toast.service';
import {DashboardBehavior} from '../../../../../shared/behaviors/dashboard.behavior';
import {EchartClickAction} from '../../../../../shared/chart/types/action/echart-click-action';
import {MetricResponse} from '../../../../../shared/chart/types/metric/metric-response';
import {VisualizationType} from '../../../../../shared/chart/types/visualization.type';
-import {ElasticFilterDefaultTime} from '../../../../../shared/components/utm/filters/elastic-filter-time/elastic-filter-time.component';
+import {
+ ElasticFilterDefaultTime
+} from '../../../../../shared/components/utm/filters/elastic-filter-time/elastic-filter-time.component';
import {ChartTypeEnum} from '../../../../../shared/enums/chart-type.enum';
import {TimeFilterType} from '../../../../../shared/types/time-filter.type';
import {mergeParams, sanitizeFilters} from '../../../../../shared/util/elastic-filter.util';
@@ -14,14 +16,20 @@ import {RunVisualizationService} from '../../../services/run-visualization.servi
import {UtmChartClickActionService} from '../../../services/utm-chart-click-action.service';
import {rebuildVisualizationFilterTime} from '../../../util/chart-filter/chart-filter.util';
import {resolveDefaultVisualizationTime} from '../../../util/visualization/visualization-render.util';
+import {Observable, of, Subject} from "rxjs";
+import {RefreshService, RefreshType} from "../../../../../shared/services/util/refresh.service";
+import {catchError, filter, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {TimeFilterBehavior} from "../../../../../shared/behaviors/time-filter.behavior";
@Component({
selector: 'app-metric-view',
templateUrl: './metric-view.component.html',
- styleUrls: ['./metric-view.component.scss']
+ styleUrls: ['./metric-view.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
-export class MetricViewComponent implements OnInit {
+export class MetricViewComponent implements OnInit, OnDestroy {
data: MetricResponse[];
+ data$: Observable
;
@Input() visualization: VisualizationType;
@Input() building: boolean;
@Output() runned = new EventEmitter();
@@ -35,37 +43,70 @@ export class MetricViewComponent implements OnInit {
kpis: KpiValues[] = [];
METRIC_CHART = ChartTypeEnum.METRIC_CHART;
defaultTime: ElasticFilterDefaultTime;
+ refreshType: string;
+ destroy$ = new Subject();
constructor(private runVisualizationService: RunVisualizationService,
private runVisualizationBehavior: RunVisualizationBehavior,
private toastService: UtmToastService,
private dashboardBehavior: DashboardBehavior,
- private utmChartClickActionService: UtmChartClickActionService) {
+ private utmChartClickActionService: UtmChartClickActionService,
+ private timeFilterBehavior: TimeFilterBehavior,
+ private refreshService: RefreshService) {
}
ngOnInit() {
- this.runVisualization();
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
- this.runVisualizationBehavior.$run.subscribe((id) => {
+ this.refreshType = `${this.chartId}`;
+
+ this.data$ = this.refreshService.refresh$
+ .pipe(
+ filter((refreshType) => refreshType === RefreshType.ALL ||
+ refreshType === this.refreshType),
+ switchMap((value, index) => this.runVisualization()));
+
+ this.runVisualizationBehavior.$run
+ .pipe(takeUntil(this.destroy$))
+ .subscribe((id) => {
if (id && this.chartId === id) {
- this.runVisualization();
+ this.refreshService.sendRefresh(this.refreshType);
this.defaultTime = resolveDefaultVisualizationTime(this.visualization);
}
});
- this.dashboardBehavior.$filterDashboard.subscribe(dashboardFilter => {
+
+ this.dashboardBehavior.$filterDashboard
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(dashboardFilter => {
if (dashboardFilter && dashboardFilter.indexPattern === this.visualization.pattern.pattern) {
mergeParams(dashboardFilter.filter, this.visualization.filterType).then(newFilters => {
this.visualization.filterType = sanitizeFilters(newFilters);
- this.runVisualization();
+ this.refreshService.sendRefresh(this.refreshType);
+ });
+ }
+ });
+
+ this.timeFilterBehavior.$time
+ .pipe(
+ takeUntil(this.destroy$),
+ filter(time => !!time))
+ .subscribe(time => {
+ if (time) {
+ this.onTimeFilterChange({
+ timeFrom: time.from,
+ timeTo: time.to
});
}
});
+
+ if (!this.defaultTime) {
+ this.refreshService.sendRefresh(this.refreshType);
+ }
}
runVisualization() {
this.runningChart = true;
- this.runVisualizationService.run(this.visualization).subscribe(data => {
+ /*this.runVisualizationService.run(this.visualization).subscribe(data => {
this.runningChart = false;
this.runned.emit('runned');
this.data = data;
@@ -79,7 +120,28 @@ export class MetricViewComponent implements OnInit {
this.error = true;
this.toastService.showError('Error',
'Error occurred while running visualization');
- });
+ });*/
+
+ return this.runVisualizationService.run(this.visualization)
+ .pipe(
+ tap((data) => {
+ this.runningChart = false;
+ this.runned.emit('runned');
+ this.data = data;
+ this.error = false;
+ this.extractKpiValues().then(kpis => {
+ this.kpis = kpis;
+ });
+ }),
+ catchError(() => {
+ this.runningChart = false;
+ this.runned.emit('runned');
+ this.error = true;
+ this.toastService.showError('Error',
+ 'Error occurred while running visualization');
+ return of([]);
+ })
+ );
}
chartEvent($event: KpiValues) {
@@ -131,9 +193,15 @@ export class MetricViewComponent implements OnInit {
onTimeFilterChange($event: TimeFilterType) {
rebuildVisualizationFilterTime($event, this.visualization.filterType).then(filters => {
this.visualization.filterType = filters;
- this.runVisualization();
+ this.refreshService.sendRefresh(this.refreshType);
});
}
+
+ ngOnDestroy(): void {
+ this.refreshService.stopInterval();
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
export class KpiValues {
diff --git a/frontend/src/app/graphic-builder/shared/components/viewer/table-view/table-view.component.html b/frontend/src/app/graphic-builder/shared/components/viewer/table-view/table-view.component.html
index af4b772a6..f5fa5e626 100644
--- a/frontend/src/app/graphic-builder/shared/components/viewer/table-view/table-view.component.html
+++ b/frontend/src/app/graphic-builder/shared/components/viewer/table-view/table-view.component.html
@@ -38,7 +38,8 @@