optimization

Author: siewer

src/app/pages/show-project/show-project.component.html

@@ -36,19 +36,19 @@ <h3> {{ risk?.projectName }} <button *ngIf="showVulnAuditor" (click)="displayPro
 <div class="row">
   <div class="col-md-12">
     <nb-card >
-      <nb-tabset>
+      <nb-tabset (changeTab)="onTabChange($event)">
         <nb-tab tabTitle="Assets" tabIcon="list-outline">
-          <ngx-manage-assets [projectName]="risk?.projectName"></ngx-manage-assets>
+          <ngx-manage-assets *ngIf="assetsDataLoaded" [projectName]="risk?.projectName"></ngx-manage-assets>
         </nb-tab>
 
         <nb-tab tabTitle="All Vulnerabilities" tabIcon="browser-outline" [badgeText]="vulnsNumber" [badgeStatus]="vulnsColor" badgePosition="center end" >
-          <ngx-details-tables id="detailsTables" *ngIf="showDetailsTemplate"></ngx-details-tables>
+          <ngx-details-tables id="detailsTables" *ngIf="showDetailsTemplate && vulnerabilitiesDataLoaded"></ngx-details-tables>
 
         </nb-tab>
         <nb-tab tabTitle="Statistics" tabIcon="pie-chart-outline" >
-          <ngx-trend-chart [vulnTrendChart]="vulnTrendChart" *ngIf="showDetailsTemplate && vulnTrendChart" [severities]="severities" [showDetailsTemplate]="showDetailsTemplate" [class.hidden]="!showConfigTemplate"></ngx-trend-chart>
+          <ngx-trend-chart [vulnTrendChart]="vulnTrendChart" *ngIf="showDetailsTemplate && vulnTrendChart && statisticsDataLoaded" [severities]="severities" [showDetailsTemplate]="showDetailsTemplate" [class.hidden]="!showConfigTemplate"></ngx-trend-chart>
         </nb-tab>
-        <nb-tab tabTitle="Metrics" tabIcon="activity-outline">
+        <nb-tab *ngIf="metricsDataLoaded" tabTitle="Metrics" tabIcon="activity-outline">
           <div class="metrics-container">
             <ngx-metric class="metric-card col-md-4" title="Number of active vulnerabilities" image="success1.png" [accent]="vulnNumberColor" [topLine]="projectMetric?.activeVulnNo+''" [bottomLine]="projectMetric?.activeVulnNo > globalMetric?.activeVulnAvg ? 'Which is more then average:' + globalMetric?.activeVulnAvg : 'Which is better then average:' + globalMetric?.activeVulnAvg "></ngx-metric>
             <ngx-metric class="metric-card col-md-4" title="Number of Fixed vulnerabilities" image="001-no-passing.png" [accent]="fixedVulnColor" [topLine]="projectMetric?.fixedVulnNo+''" [bottomLine]="'Which is ' + projectMetric?.fixedVulnPercent + '% of all vulnerabilities'"></ngx-metric>

src/app/pages/show-project/show-project.component.ts

@@ -1,12 +1,20 @@
-import {ChangeDetectorRef, Component, ElementRef, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
 import {Risk} from '../../@core/Model/Risk';
 import {ShowProjectService} from '../../@core/service/ShowProjectService';
 import {ActivatedRoute, Router} from '@angular/router';
 import {CookieService} from 'ngx-cookie-service';
 import {ProjectConstants} from '../../@core/constants/ProjectConstants';
 import {ScannerType} from '../../@core/Model/Scanner';
 import {CiOperations} from '../../@core/Model/CiOperations';
-import {NbDialogService, NbWindowService} from '@nebular/theme';
+import {NbDialogService, NbTabComponent, NbWindowService} from '@nebular/theme';
 import {FormBuilder} from '@angular/forms';
 import {Toast} from '../../@core/utils/Toast';
 import {ProjectInfo} from '../../@core/Model/ProjectInfo';
@@ -23,6 +31,7 @@ import {DashboardService} from '../../@core/service/DashboardService';
   selector: 'ngx-show-project',
   templateUrl: './show-project.component.html',
   styleUrls: ['./show-project.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShowProjectComponent implements OnInit {
   @ViewChild('vulnAuditorSettings')
@@ -56,6 +65,12 @@ export class ShowProjectComponent implements OnInit {
   vulnsNumber: string = '0';
   vulnsColor: string = 'success';
 
+  assetsDataLoaded = false;
+  vulnerabilitiesDataLoaded = false;
+  statisticsDataLoaded = false;
+  metricsDataLoaded = false;
+
+
   private vulnAuditorForm: any;
   private projectUserForm: any;
   projectUser: ProjectUser = new ProjectUser;
@@ -79,11 +94,11 @@ export class ShowProjectComponent implements OnInit {
     this.loadScannerTypes();
     this.loadProjectInfo();
     this.loadCiOperations();
-    this.loadTrendChartData();
-    this.loadProjectStats();
-    this.loadCodes();
+    // this.loadTrendChartData();
+    // this.loadProjectStats();
+    // this.loadCodes();
     this.updateOffset();
-    this.loadProjectMetric();
+    // this.loadProjectMetric();
     this.vulnAuditorForm = this.formBuilder.group({
       enableVulnAuditor: this.projectInfo.vulnAuditorEnable,
       dclocation: this.projectInfo.networkdc,
@@ -189,7 +204,7 @@ export class ShowProjectComponent implements OnInit {
     });
   }
   ngOnInit() {
-    this.loadSeveritiesChart();
+    // this.loadSeveritiesChart();
     this.role = this.cookieService.get('role');
     this.showConfigTemplate = this.role !== 'ROLE_ADMIN' && this.role !== 'ROLE_EDITOR_RUNNER';
     this.showVulnAuditor = true;
@@ -324,4 +339,55 @@ export class ShowProjectComponent implements OnInit {
       });
     });
   }
+
+  onTabChange(tab: NbTabComponent) {
+    switch (tab.tabTitle) {
+      case 'Assets':
+        if (!this.assetsDataLoaded) {
+          this.loadAssetsData();
+          this.assetsDataLoaded = true;
+        }
+        break;
+      case 'All Vulnerabilities':
+        if (!this.vulnerabilitiesDataLoaded) {
+          this.loadVulnerabilitiesData();
+          this.vulnerabilitiesDataLoaded = true;
+        }
+        break;
+      case 'Statistics':
+        if (!this.statisticsDataLoaded) {
+          this.loadStatisticsData();
+          this.statisticsDataLoaded = true;
+        }
+        break;
+      case 'Metrics':
+        if (!this.metricsDataLoaded) {
+          this.loadMetricsData();
+          this.metricsDataLoaded = true;
+        }
+        break;
+      // Handle other tabs
+    }
+  }
+
+  loadAssetsData() {
+    this.loadCodes();
+    // Any additional data for Assets tab
+  }
+
+  loadVulnerabilitiesData() {
+    this.loadProjectStats();
+    // Any additional data for Vulnerabilities tab
+  }
+
+  loadStatisticsData() {
+    this.loadTrendChartData();
+    this.loadSeveritiesChart();
+    // Any additional data for Statistics tab
+  }
+
+  loadMetricsData() {
+    this.loadProjectMetric();
+    // Any additional data for Metrics tab
+  }
 }