SED-4778 Execution queries data while on performance tab

projects/step-frontend/src/lib/modules/execution/components/alt-execution-progress/alt-execution-progress.component.html

@@ -225,6 +225,5 @@ <h3 data-step-testid>
   <div class="primary-content">
     <router-outlet />
   </div>
-  <router-outlet name="nodeDetails" />
 </section>
 <router-outlet name="modal" />

projects/step-frontend/src/lib/modules/execution/components/alt-execution-progress/alt-execution-progress.component.scss

@@ -135,9 +135,11 @@ step-alt-execution-progress {
       step-btn-group {
         .mat-mdc-icon-button.mat-mdc-button-base {
           margin: 0;
+
           &:first-child {
             margin-left: 0.25rem;
           }
+
           &:last-child {
             margin-right: 0.25rem;
           }
@@ -158,6 +160,7 @@ step-alt-execution-progress {
 
     step-skeleton-placeholder {
       min-height: 3.7rem;
+
       & > div {
         margin: 0;
       }
@@ -181,21 +184,11 @@ step-alt-execution-progress {
       gap: 1.8rem;
     }
 
-    &.has-drilldown {
+    &.has-drilldown > step-simple-outlet {
+      display: flex;
+      flex-direction: column;
       flex: 1 1 auto;
       min-height: 0;
-      padding-top: 1rem;
-
-      .primary-content {
-        display: none;
-      }
-
-      > step-simple-outlet {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        min-height: 0;
-      }
     }
 
     &.is-layout-edit {
@@ -250,12 +243,6 @@ step-alt-execution-progress {
     }
   }
 
-  &.is-drilldown-opened {
-    $header-height: 6.4rem;
-    height: calc(100vh - $header-height);
-    overflow: hidden;
-  }
-
   .node-details-drilldown {
     display: block;
     min-height: 0;

projects/step-frontend/src/lib/modules/execution/components/alt-execution-progress/alt-execution-progress.component.ts

@@ -40,9 +40,9 @@ import {
   Execution,
   EXECUTION_REPORT_GRID,
   ExecutionCloseHandleService,
-  GridPersistenceStateService,
-  GridEditableService,
   GRID_ELEMENT_HEADER_ACTIONS,
+  GridEditableService,
+  GridPersistenceStateService,
   IncludeTestcases,
   IS_SMALL_SCREEN,
   PopoverMode,
@@ -88,6 +88,8 @@ import { AltExecutionReportSettingsService } from '../../services/alt-execution-
 import { AltExecutionReportGridSettingsActionComponent } from '../alt-execution-report-grid-settings-action/alt-execution-report-grid-settings-action.component';
 import { TestCasesDisplayMode } from '../../shared/test-cases-display-mode';
 import { AltExecutionDrilldownNavigationUtilsService } from '../../services/alt-execution-drilldown-navigation-utils.service';
+import { AltExecutionRefreshActivityService } from '../../services/alt-execution-refresh-activity.service';
+import { AltExecutionRefreshActivity } from '../../shared/alt-execution-refresh-activity.enum';
 
 enum UpdateSelection {
   ALL = 'all',
@@ -179,6 +181,7 @@ interface RefreshParams {
 export class AltExecutionProgressComponent
   implements OnInit, OnDestroy, AltExecutionStateService, EntityRefService<Execution>
 {
+  private _refreshActivityService = inject(AltExecutionRefreshActivityService);
   private _urlParamsService = inject(DashboardUrlParamsService);
   private _activeExecutionContext = inject(ActiveExecutionContextService);
   private _activeExecutionsService = inject(ActiveExecutionsService);
@@ -316,8 +319,13 @@ export class AltExecutionProgressComponent
 
   readonly isExecutionCompleted$ = this.execution$.pipe(map((execution) => execution.status === 'ENDED'));
 
-  readonly testCases$ = combineLatest([this.execution$.pipe(startWith(undefined)), this.timeRangeSelection$]).pipe(
-    map(([execution, timeRangeSelection]) => ({ execution, timeRangeSelection })),
+  readonly testCases$ = combineLatest([
+    this._refreshActivityService.isActive$(AltExecutionRefreshActivity.TEST_CASES_TABLE),
+    this.execution$.pipe(startWith(undefined)),
+    this.timeRangeSelection$,
+  ]).pipe(
+    filter(([isActive]) => isActive),
+    map(([, execution, timeRangeSelection]) => ({ execution, timeRangeSelection })),
     smartSwitchMap(
       (curr, prev) => {
         return (
@@ -420,19 +428,31 @@ export class AltExecutionProgressComponent
   /**
    * Logic to reload keyword's datasource when execution is refreshed
    * **/
-  private refreshKeywordsSubscription = this.execution$
+  private readonly executionRefresh$ = this.execution$.pipe(
+    map((execution) => execution.id),
+    pairwise(),
+    filter((pair) => pair[0] === pair[1]),
+  );
+
+  private refreshKeywordsSubscription = combineLatest([
+    this._refreshActivityService.isActive$(AltExecutionRefreshActivity.KEYWORDS_TABLE),
+    this.executionRefresh$,
+  ])
     .pipe(
-      map((execution) => execution.id),
-      pairwise(),
-      filter((pair) => pair[0] === pair[1]),
+      filter(([isActive]) => isActive),
       takeUntilDestroyed(),
     )
     .subscribe(() => this.keywordsDataSource.reload({ isForce: false, hideProgress: true }));
 
   readonly keywordsDataSource$ = of(this.keywordsDataSource);
 
-  readonly errors$ = combineLatest([this.execution$, this.timeRangeSelection$]).pipe(
-    map(([execution, timeRangeSelection]) => ({ execution, timeRangeSelection })),
+  readonly errors$ = combineLatest([
+    this._refreshActivityService.isActive$(AltExecutionRefreshActivity.ERRORS),
+    this.execution$,
+    this.timeRangeSelection$,
+  ]).pipe(
+    filter(([isActive]) => isActive),
+    map(([, execution, timeRangeSelection]) => ({ execution, timeRangeSelection })),
     smartSwitchMap(
       (curr, prev) => {
         return (
@@ -523,9 +543,14 @@ export class AltExecutionProgressComponent
   }
 
   private setupTreeRefresh(): void {
-    combineLatest([this.execution$, this.timeRangeSelection$])
+    combineLatest([
+      this._refreshActivityService.isActive$(AltExecutionRefreshActivity.TREE),
+      this.execution$,
+      this.timeRangeSelection$,
+    ])
       .pipe(
-        map(([execution, timeRangeSelection]) => ({ execution, timeRangeSelection })),
+        filter(([isActive]) => isActive),
+        map(([, execution, timeRangeSelection]) => ({ execution, timeRangeSelection })),
         debounceTime(300),
         smartSwitchMap(
           (curr, prev) => {
@@ -606,7 +631,11 @@ export class AltExecutionProgressComponent
             return true;
           }
 
-          const name = (item.singleInstanceReportNode?.name ?? item?.artefact?.attributes?.['name'] ?? '').toLowerCase();
+          const name = (
+            item.singleInstanceReportNode?.name ??
+            item?.artefact?.attributes?.['name'] ??
+            ''
+          ).toLowerCase();
           return name.includes(search);
         })
         .addSearchStringRegexPredicate('status', (item) =>

projects/step-frontend/src/lib/modules/execution/components/alt-execution-tabs/alt-execution-tabs.component.ts

@@ -106,7 +106,7 @@ export class AltExecutionTabsComponent {
       )
       .subscribe(() => {
         this.currentUrl.set(this._router.url);
-        if (!this._router.url.includes('nodeDetails:')) {
+        if (!this._router.url.includes('node-details')) {
           this._tabsService.clearActiveDrilldownTab();
         }
       });
@@ -147,7 +147,7 @@ export class AltExecutionTabsComponent {
 
   private selectPerformance(): void {
     this._tabsService.clearActiveDrilldownTab();
-    this._router.navigate([{ outlets: { primary: STATIC_TABS.ANALYTICS, nodeDetails: null } }], {
+    this._router.navigate([STATIC_TABS.ANALYTICS], {
       relativeTo: this._activatedRoute,
       queryParamsHandling: 'merge',
     });
@@ -173,7 +173,7 @@ export class AltExecutionTabsComponent {
       this.navigateToDrilldown(nextTab!);
       return;
     }
-    this._router.navigate([{ outlets: { nodeDetails: null } }], {
+    this._router.navigate([STATIC_TABS.REPORT], {
       relativeTo: this._activatedRoute,
       queryParamsHandling: 'merge',
     });
@@ -400,14 +400,14 @@ export class AltExecutionTabsComponent {
   }
 
   private navigateToReport(): void {
-    this._router.navigate([{ outlets: { primary: STATIC_TABS.REPORT, nodeDetails: null } }], {
+    this._router.navigate([STATIC_TABS.REPORT], {
       relativeTo: this._activatedRoute,
       queryParamsHandling: 'merge',
     });
   }
 
   private navigateToDrilldown(tab: DrilldownExecutionTab): void {
-    this._router.navigate([{ outlets: { primary: STATIC_TABS.REPORT, nodeDetails: tab.nodeDetailsPath } }], {
+    this._router.navigate(tab.nodeDetailsPath, {
       relativeTo: this._activatedRoute,
       queryParams: tab.queryParams as Params | undefined,
       queryParamsHandling: 'merge',

projects/step-frontend/src/lib/modules/execution/components/schedule-overview/cross-execution-dashboard/cross-execution-dashboard.component.ts

@@ -35,7 +35,7 @@ export class CrossExecutionDashboardComponent implements OnInit {
         if (task == null) {
           return 'Deleted task';
         }
-        return task.attributes?.['name']
+        return task.attributes?.['name'];
       case 'plan':
         const plan = this._state.plan();
         if (plan === undefined) {
@@ -54,7 +54,6 @@ export class CrossExecutionDashboardComponent implements OnInit {
           // TODO handle
         }
         return ExecutionNamePipe.transform(execution!);
-
     }
   });
 
@@ -88,7 +87,7 @@ export class CrossExecutionDashboardComponent implements OnInit {
     this.fetchLastExecutionTrigger$.next();
   }
 
-  private updateTimeAndRefresh(urlParams: DashboardUrlParams) {
+  private updateTimeAndRefresh(urlParams: DashboardUrlParams): void {
     if (urlParams.refreshInterval === undefined) {
       urlParams.refreshInterval = 0;
     }
@@ -105,7 +104,7 @@ export class CrossExecutionDashboardComponent implements OnInit {
     return {
       id,
       label,
-      link: [{ outlets: { primary: link ?? id, modal: null, nodeDetails: null } }],
+      link: [{ outlets: { primary: link ?? id, modal: null } }],
     };
   }
 }

projects/step-frontend/src/lib/modules/execution/execution.module.ts

@@ -21,6 +21,7 @@ import {
   DialogParentService,
   dialogRoute,
   editScheduledTaskRoute,
+  EntityRefDirective,
   EntityRegistry,
   EXECUTION_REPORT_GRID,
   GridSettingsRegistryService,
@@ -39,7 +40,6 @@ import {
   TreeNodeUtilsService,
   ViewItemDefaultNamePipe,
   ViewRegistryService,
-  EntityRefDirective,
 } from '@exense/step-core';
 import { ExecutionErrorsComponent } from './components/execution-errors/execution-errors.component';
 import { RepositoryPlanTestcaseListComponent } from './components/repository-plan-testcase-list/repository-plan-testcase-list.component';
@@ -203,6 +203,11 @@ import {
 import { DrilldownRootType } from './shared/drilldown-root-type';
 import { DrilldownPartialTreeStateDirective } from './directives/drilldown-partial-tree-state.directive';
 import { DashletEmptyColumnComponent } from './components/dashlet-empty-column/dashlet-empty-column.component';
+import { AltExecutionRefreshActivityService } from './services/alt-execution-refresh-activity.service';
+import {
+  ALL_ALT_EXECUTION_REFRESH_ACTIVITY,
+  AltExecutionRefreshActivity,
+} from './shared/alt-execution-refresh-activity.enum';
 
 @NgModule({
   declarations: [
@@ -646,6 +651,7 @@ export class ExecutionModule {
           path: ':id',
           component: AltExecutionProgressComponent,
           providers: [
+            AltExecutionRefreshActivityService,
             AggregatedReportViewTreeNodeUtilsService,
             {
               provide: DialogParentService,
@@ -680,7 +686,7 @@ export class ExecutionModule {
               const id = route.params['id'];
               inject(ActiveExecutionContextService).setupExecutionId(id);
               return true;
-            }
+            },
           },
           canDeactivate: [
             () => {
@@ -733,6 +739,12 @@ export class ExecutionModule {
                     _ctx.setState(_treeState);
                     return true;
                   },
+                  () => {
+                    inject(AltExecutionRefreshActivityService).setupRefreshActivity(
+                      ...ALL_ALT_EXECUTION_REFRESH_ACTIVITY,
+                    );
+                    return true;
+                  },
                 ],
                 children: [
                   {
@@ -761,6 +773,12 @@ export class ExecutionModule {
                 {
                   path: '',
                   component: AltExecutionAnalyticsComponent,
+                  canActivate: [
+                    () => {
+                      inject(AltExecutionRefreshActivityService).setupRefreshActivity();
+                      return true;
+                    },
+                  ],
                 },
               ],
             },
@@ -836,7 +854,6 @@ export class ExecutionModule {
             }),
             {
               path: 'node-details',
-              outlet: 'nodeDetails',
               component: SimpleOutletComponent,
               children: [
                 {
@@ -851,6 +868,16 @@ export class ExecutionModule {
                     }
                     return null;
                   },
+                  canActivate: [
+                    () => {
+                      inject(AltExecutionRefreshActivityService).setupRefreshActivity(
+                        AltExecutionRefreshActivity.TREE,
+                        AltExecutionRefreshActivity.KEYWORDS_TABLE,
+                        AltExecutionRefreshActivity.TEST_CASES_TABLE,
+                      );
+                      return true;
+                    },
+                  ],
                   resolve: {
                     drilldownState: (route: ActivatedRouteSnapshot) => {
                       const _aggregatedViewTreeStateContext = inject(AggregatedReportViewTreeStateContextService);

projects/step-frontend/src/lib/modules/execution/services/alt-execution-drilldown-navigation-utils.service.ts

@@ -40,7 +40,7 @@ export class AltExecutionDrilldownNavigationUtilsService {
   }
 
   openDrilldownRoot(drilldownRootType: DrilldownRootType): void {
-    this._router.navigate([{ outlets: { nodeDetails: ['node-details', drilldownRootType] } }], {
+    this._router.navigate(['node-details', drilldownRootType], {
       relativeTo: this._nodeDetailsRelativeParent,
       queryParamsHandling: 'merge',
     });
@@ -63,7 +63,7 @@ export class AltExecutionDrilldownNavigationUtilsService {
     }
     const nodeDetails = ['node-details', drilldownRootType, type, detailsValueId];
     this._tabs.openDrilldownTab(nodeDetails, queryParams);
-    this._router.navigate([{ outlets: { nodeDetails } }], {
+    this._router.navigate(nodeDetails, {
       relativeTo: this._nodeDetailsRelativeParent,
       queryParams,
       queryParamsHandling: 'merge',
@@ -105,7 +105,7 @@ export class AltExecutionDrilldownNavigationUtilsService {
     }
     this._tabs.updateActiveDrilldownTab(path, queryParams);
 
-    const urlTree = this._router.createUrlTree([{ outlets: { nodeDetails: path } }], {
+    const urlTree = this._router.createUrlTree(path, {
       relativeTo: this._nodeDetailsRelativeParent,
       queryParams,
       queryParamsHandling: 'merge',
@@ -120,14 +120,14 @@ export class AltExecutionDrilldownNavigationUtilsService {
       ? this._tabs.removeDrilldownTab(this._tabs.activeDrilldownTabId()!)
       : undefined;
     if (nextTab) {
-      this._router.navigate([{ outlets: { primary: STATIC_TABS.REPORT, nodeDetails: nextTab.nodeDetailsPath } }], {
+      this._router.navigate(nextTab.nodeDetailsPath, {
         relativeTo: this._nodeDetailsRelativeParent,
         queryParams: nextTab.queryParams,
         queryParamsHandling: 'merge',
       });
       return;
     }
-    this._router.navigate([{ outlets: { nodeDetails: null } }], {
+    this._router.navigate([STATIC_TABS.REPORT], {
       relativeTo: this._nodeDetailsRelativeParent,
       queryParamsHandling: 'merge',
     });