SED-4450 the cross execution and analytics view have no loading indicator #1307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

lucianbaciu wants to merge 21 commits into master from SED-4450-the-cross-execution-and-analytics-view-have-no-loading-indicator

projects/step-core/src/lib/client/augmented/services/augmented-time-series.service.ts

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     import { inject, Injectable } from '@angular/core';
     import { FetchBucketsRequest, TimeSeriesService } from '../../generated';
-    import { map, Observable, of, OperatorFunction, switchMap } from 'rxjs';
+    import { delay, map, Observable, of, OperatorFunction, switchMap } from 'rxjs';
     import { TableApiWrapperService } from '../../table';
     import { HttpOverrideResponseInterceptor } from '../shared/http-override-response-interceptor';
     import { HttpOverrideResponseInterceptorService } from './http-override-response-interceptor.service';
@@ Expand Down @@

...dules/execution/components/alt-execution-analytics/alt-execution-analytics.component.html

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
         <step-execution-dashboard
           #dashboard
           [execution]="execution!"
-          [timeRange]="(_state.timeRange$ | async)!"
+          [initialTimeRange]="(_state.timeRange$ | async)!"
           (contextSettingsChanged)="handleDashboardSettingsChange($event)"
           (contextSettingsInit)="handleDashboardSettingsInit($event)"
           (fullRangeUpdateRequest)="handleFullRangeChangeRequest($event)"
@@ Expand Down @@

...modules/execution/components/alt-execution-analytics/alt-execution-analytics.component.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,12 +1,15 @@
  
    import { ChangeDetectorRef, Component, DestroyRef, inject, OnDestroy, OnInit, viewChild } from '@angular/core';

    import { ChangeDetectorRef, Component, DestroyRef, effect, inject, OnDestroy, OnInit, viewChild } from '@angular/core';

    import { AltExecutionStateService } from '../../services/alt-execution-state.service';

    import { TimeSeriesContext } from '../../../timeseries/modules/_common';

    import { DashboardUrlParamsService } from '../../../timeseries/modules/_common/injectables/dashboard-url-params.service';

    import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';

    import { ExecutionDashboardComponent } from '../../../timeseries/components/execution-page/execution-dashboard.component';

    import { filter, pairwise } from 'rxjs';

    import { filter, map, Observable, pairwise, switchMap, withLatestFrom } from 'rxjs';

    import { NavigationEnd, NavigationStart, Router } from '@angular/router';

    import { TimeRange } from '@exense/step-core';

    import { ActiveExecution } from '../../services/active-executions.service';

    import { ActiveExecutionContextService } from '../../services/active-execution-context.service';

    import { convertPickerSelectionToTimeRange } from '../../shared/convert-picker-selection';

    @Component({

      selector: 'step-alt-execution-analytics',

    @@ -16,6 +19,7 @@ import { TimeRange } from '@exense/step-core';
  
    })

    export class AltExecutionAnalyticsComponent implements OnInit {

      readonly _state = inject(AltExecutionStateService);

      private _activeExecutionContext = inject(ActiveExecutionContextService);

      private _urlParamsService = inject(DashboardUrlParamsService);

      private _router = inject(Router);

      private _destroyRef = inject(DestroyRef);

    @@ -24,6 +28,34 @@ export class AltExecutionAnalyticsComponent implements OnInit {
  
      activeTimeRangeSelection = toSignal(this._state.timeRangeSelection$);

      readonly timeRangeChange = this._activeExecutionContext.activeExecution$

        .pipe(

          takeUntilDestroyed(),

          switchMap((active) => active.timeRangeSelectionChange$.pipe(withLatestFrom(active.execution$))),

        )

        .subscribe(([tr, execution]) => {

          if (!tr || !execution) {

            return;

          }

          const timeRange = convertPickerSelectionToTimeRange(tr, execution);

          this.dashboardComponent()?.updateFullTimeRange(timeRange!, { actionType: 'manual' });

        });

      readonly autoRefreshTriggered = this._activeExecutionContext.activeExecution$

        .pipe(

          takeUntilDestroyed(),

          switchMap((active) =>

            active.execution$.pipe(map((execution) => [execution, active.getTimeRangeSelection()] as const)),

          ),

        )

        .subscribe(([execution, timeRangeSelection]) => {

          if (!timeRangeSelection || !execution) {

            return;

          }

          const timeRange = convertPickerSelectionToTimeRange(timeRangeSelection, execution);

          this.dashboardComponent()?.updateFullTimeRange(timeRange!, { actionType: 'auto' });

        });

      handleDashboardSettingsChange(context: TimeSeriesContext) {

        this._urlParamsService.updateUrlParamsFromContext(context, this.activeTimeRangeSelection()!, undefined, false);

      }

...lib/modules/execution/components/alt-execution-errors/alt-execution-errors.component.html

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ @@
       matSortActive="count"
       matSortDirection="desc"
       [visibleColumns]="displayColumns()"
-      [indicatorMode]="TableIndicatorMode.SKELETON_ON_INITIAL_LOAD"
+      [indicatorMode]="TableIndicatorMode.SPINNER"
     >
       <ng-container matColumnDef="errorMessage" stepSearchCol>
         <th mat-header-cell mat-sort-header *matHeaderCellDef>Error Message</th>
@@ Expand All / @@ -20,7 +20,9 @@ @@
               <mat-menu #menu="matMenu" class="error-wide-menu">
                 <ng-template matMenuContent>
                   @if (!element?.executionIds?.length) {
-                    <div class="error-empty-executions"><step-icon name="alert-triangle" /> Current time range is too large to display details.</div>
+                    <div class="error-empty-executions">
+                      <step-icon name="alert-triangle" /> Current time range is too large to display details.
+                    </div>
                   } @else {
                     <step-error-details-menu
                       [executionIds]="element.executionIds"
@@ Expand Down @@

.../alt-report-performance-overview-chart/alt-report-performance-overview-chart.component.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ export class AltReportPerformanceOverviewChartComponent { @@
         zoomEnabled: true,
         primaryAxesUnit: 'ms',
         colorizationType: 'STROKE',
-        height: 238,
+        height: 340,
       };
       protected readonly metricKey = 'response-time';
@@ Expand Down @@

...s/execution/components/dashlet-execution-viz/wrapper/legacy-execution-view.component.html

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,15 +2,16 @@
  
      <div class="header">

        <step-time-range-picker

          [activeSelection]="activeTimeRangeSelection()!"

          (selectionChange)="handleTimeRangeChange($event)"

          (selectionChange)="handleTimeRangeSelectionChange($event)"

          [activeTimeRange]="timeRange()"

          [selectOptions]="timeRangeOptions"

        />

      </div>

      <step-execution-dashboard

        #dashboardComponent

        [execution]="execution()"

        [timeRange]="timeRange()!"

        [initialTimeRange]="timeRange()!"

        (contextSettingsChanged)="handleDashboardSettingsChange($event)"

        (contextSettingsInit)="handleDashboardSettingsInit($event)"

        (fullRangeUpdateRequest)="handleFullRangeChangeRequest($event)"

...les/execution/components/dashlet-execution-viz/wrapper/legacy-execution-view.component.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,11 +3,14 @@ import { @@
       Component,
       computed,
       DestroyRef,
+      effect,
       inject,
       input,
       OnInit,
       Signal,
       signal,
+      untracked,
+      viewChild,
       WritableSignal,
     } from '@angular/core';
     import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router';
@@ Expand All @@
     import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
     import { filter, pairwise } from 'rxjs';
     import { AuthService, DashboardsService, DashboardView, Execution, TimeRange } from '@exense/step-core';
+    import { DashboardComponent } from '../../../../timeseries/components/dashboard/dashboard.component';
+    import { convertPickerSelectionToTimeRange } from '../../../shared/convert-picker-selection';
+    import { ExecutionDashboardComponent } from '../../../../timeseries/components/execution-page/execution-dashboard.component';
     @Component({
       selector: 'step-legacy-execution-view',
@@ Expand All @@
       standalone: false,
     })
     export class LegacyExecutionViewComponent implements OnInit {
-      execution = input.required<Execution>();
       private _router: Router = inject(Router);
       private _destroyRef = inject(DestroyRef);
       private _changeDetectorRef = inject(ChangeDetectorRef);
       private _dashboardService = inject(DashboardsService);
       private _authService = inject(AuthService);
       private _urlParamsService = inject(DashboardUrlParamsService);
+      private dashboardComponent = viewChild('dashboardComponent', { read: ExecutionDashboardComponent });
+      execution = input.required<Execution>();
+      executionChangeEffect = effect(() => {
+        // handle autorefresh
+        let execution = this.execution();
+        if (!execution) return;
+        untracked(() => {
+          let timeRangeSelection = this.activeTimeRangeSelection();
+          const timeRange = convertPickerSelectionToTimeRange(timeRangeSelection!, execution);
+          this.dashboardComponent()?.updateFullTimeRange(timeRange!, { actionType: 'auto' });
+        });
+      });
       readonly timeRangeOptions: TimeRangePickerSelection[] = [
         { type: 'FULL' },
         ...TimeSeriesConfig.EXECUTION_PAGE_TIME_SELECTION_OPTIONS,
@@ Expand All @@
       timeRange: Signal<TimeRange | undefined> = computed(() => {
         const pickerSelection = this.activeTimeRangeSelection();
-        if (pickerSelection) {
-          const execution = this.execution();
-          const end = execution.endTime || new Date().getTime();
-          if (pickerSelection.type === 'FULL') {
-            return { from: execution.startTime!, to: end };
-          } else {
-            return TimeSeriesUtils.convertSelectionToTimeRange(pickerSelection, end);
-          }
+        const execution = this.execution();
+        if (pickerSelection && execution) {
+          return convertPickerSelectionToTimeRange(pickerSelection, this.execution());
         } else {
           return undefined;
         }
@@ Expand Down Expand Up @@
         );
       }
-      handleTimeRangeChange(pickerSelection: TimeRangePickerSelection) {
+      handleTimeRangeSelectionChange(pickerSelection: TimeRangePickerSelection) {
         this.activeTimeRangeSelection.set(pickerSelection);
-      }
-      triggerRefresh() {
-        let rangeSelection = this.activeTimeRangeSelection()!;
-        this.activeTimeRangeSelection.set({ ...rangeSelection });
+        let timeRange = convertPickerSelectionToTimeRange(pickerSelection, this.execution());
+        this.dashboardComponent()?.updateFullTimeRange(timeRange!, { actionType: 'manual' });
       }
       private subscribeToUrlNavigation() {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SED-4450 the cross execution and analytics view have no loading indicator #1307

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

SED-4450 the cross execution and analytics view have no loading indicator #1307

Are you sure you want to change the base?

Uh oh!

SED-4450 the cross execution and analytics view have no loading indicator #1307

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!