feat(Tracking): Added tracking to all routed components

src/app/applications/application-formular/application-formular.component.ts

@@ -1,7 +1,8 @@
 import {
-	ChangeDetectorRef, Component, Input, OnInit, ViewChild,
+	ChangeDetectorRef, Component, Input, OnInit, ViewChild, inject,
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { Flavor } from '../../virtualmachines/virtualmachinemodels/flavor';
 import { FlavorService } from '../../api-connector/flavor.service';
 import { FlavorType } from '../../virtualmachines/virtualmachinemodels/flavorType';
@@ -50,6 +51,8 @@ export class ApplicationFormularComponent extends ApplicationBaseClassComponent
 	@Input() is_validation: boolean = false;
 	@Input() hash: string;
 
+	private readonly tracker = inject(MatomoTracker);
+
 	userinfo: Userinfo;
 	valid_pi_affiliations;
 	unknownPiAffiliationsConfirmation: boolean = false;
@@ -112,6 +115,11 @@ export class ApplicationFormularComponent extends ApplicationBaseClassComponent
 	}
 
 	ngOnInit(): void {
+		if (!this.is_validation) {
+			const typeStr: string = this.openstack_project ? ' Openstack' : 'SimpleVM';
+			this.tracker.trackPageView(`New Application Formular: ${typeStr}`);
+		}
+
 		this.getUserinfo();
 		this.getListOfFlavors();
 		this.getListOfTypes();

src/app/applications/applications.component.ts

@@ -1,11 +1,12 @@
 /* eslint-disable no-lonely-if */
 import {
-	ChangeDetectorRef, Component, OnDestroy, OnInit,
+	ChangeDetectorRef, Component, OnDestroy, OnInit, inject,
 } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { Subscription } from 'rxjs';
 import { HttpStatusCode } from '@angular/common/http';
 import { FlavorTypeShortcuts } from 'app/shared/shared_modules/baseClass/flavor-type-shortcuts';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { ApplicationsService } from '../api-connector/applications.service';
 import { ApiSettings } from '../api-connector/api-settings.service';
 import { Application } from './application.model/application.model';
@@ -27,7 +28,6 @@ import { NotificationModalComponent } from '../shared/modal/notification-modal';
 import { ConfirmationModalComponent } from '../shared/modal/confirmation-modal.component';
 import { ModificationRequestComponent } from '../projectmanagement/modals/modification-request/modification-request.component';
 import { ConfirmationActions } from '../shared/modal/confirmation_actions';
-
 // eslint-disable-next-line no-shadow
 enum TabStates {
 	'SUBMITTED' = 0,
@@ -54,6 +54,7 @@ enum TabStates {
 	],
 })
 export class ApplicationsComponent extends ApplicationBaseClassComponent implements OnInit, OnDestroy {
+	private readonly tracker = inject(MatomoTracker);
 	title: string = 'Application Overview';
 	tab_state: number = TabStates.SUBMITTED;
 	TabStates: typeof TabStates = TabStates;
@@ -132,6 +133,7 @@ export class ApplicationsComponent extends ApplicationBaseClassComponent impleme
 	}
 
 	ngOnInit(): void {
+		this.tracker.trackPageView('Application Overview');
 		this.is_vo_admin = is_vo;
 		if (this.is_vo_admin) {
 			this.getSubmittedApplicationsAdmin();

src/app/applications/type-overview.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
+import { MatomoTracker } from 'ngx-matomo-client';
 import {
 	WIKI_WORKSHOPS, OPENSTACK_LINK, PROJECT_TYPES_LINK, SIMPLE_VM_LINK,
 } from '../../links/links';
@@ -12,6 +13,7 @@ import {
 	styleUrls: ['./type-overview.component.css'],
 })
 export class TypeOverviewComponent implements OnInit {
+	private readonly tracker = inject(MatomoTracker);
 
 	title: string = 'Project Type Overview';
 
@@ -32,6 +34,7 @@ export class TypeOverviewComponent implements OnInit {
 	OPENSTACK_LINK: string = OPENSTACK_LINK;
 
 	ngOnInit(): any {
+		this.tracker.trackPageView('New Project - Project Type Overview');
 		this.simpleVM_logo_link = `${this.static_img_folder}simpleVM_Logo.svg`;
 		this.simpleVM_curve_logo = `${this.static_img_folder}/simplevm-info-page/flatlearning.svg`;
 		this.simpleVM_ease_logo = `${this.static_img_folder}/simplevm-info-page/easytouse.svg`;
@@ -42,5 +45,4 @@ export class TypeOverviewComponent implements OnInit {
 		this.openstack_conf_logo = `${this.static_img_folder}/openstack-info-page/configuration.svg`;
 		this.openstack_scale_logo = `${this.static_img_folder}/openstack-info-page/scale.svg`;
 	}
-
 }

src/app/credits-calculator/credits-calculator.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { FacilityService } from '../api-connector/facility.service';
 import { FlavorService } from '../api-connector/flavor.service';
 import { Flavor } from '../virtualmachines/virtualmachinemodels/flavor';
@@ -19,6 +20,7 @@ import { ResourceWeight } from './resource-weights.model/resource-weights.model'
 	providers: [FacilityService, FlavorService, CreditsService, GroupService],
 })
 export class CreditsCalculatorComponent implements OnInit {
+	private readonly tracker = inject(MatomoTracker);
 	title: string = 'Credits Calculator';
 	got_all_cc: boolean = false;
 	got_all_flavor: boolean = false;
@@ -62,6 +64,7 @@ export class CreditsCalculatorComponent implements OnInit {
 	}
 
 	ngOnInit(): void {
+		this.tracker.trackPageView('Credits Calculator');
 		this.flavor_service.getListOfTypesAvailable().subscribe((result: FlavorType[]) => {
 			this.flavor_types = result;
 		});

src/app/facility_manager/facility.application.component.ts

@@ -1,4 +1,7 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+	ChangeDetectorRef, Component, OnInit, inject,
+} from '@angular/core';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { FacilityService } from '../api-connector/facility.service';
 import { UserService } from '../api-connector/user.service';
 import { GroupService } from '../api-connector/group.service';
@@ -7,7 +10,6 @@ import { Application } from '../applications/application.model/application.model
 import { Application_States } from '../shared/shared_modules/baseClass/abstract-base-class';
 import { ApplicationsService } from '../api-connector/applications.service';
 import { ApplicationBaseClassComponent } from '../shared/shared_modules/baseClass/application-base-class.component';
-
 // eslint-disable-next-line no-shadow
 enum TabStates {
 	'SUBMITTED' = 0,
@@ -27,6 +29,7 @@ enum TabStates {
 	providers: [FacilityService, UserService, GroupService, ApplicationsService, ApiSettings],
 })
 export class FacilityApplicationComponent extends ApplicationBaseClassComponent implements OnInit {
+	private readonly tracker = inject(MatomoTracker);
 	numberOfExtensionRequests: number = 0;
 	numberOfModificationRequests: number = 0;
 	numberOfCreditRequests: number = 0;
@@ -413,6 +416,7 @@ export class FacilityApplicationComponent extends ApplicationBaseClassComponent
 	}
 
 	ngOnInit(): void {
+		this.tracker.trackPageView('Facility Application Overview');
 		this.facilityService.getManagerFacilities().subscribe((result: any): void => {
 			this.managerFacilities = result;
 			this.selectedFacility = this.managerFacilities[0];

src/app/facility_manager/facilityprojectsoverview.component.ts

@@ -1,8 +1,9 @@
 import {
-	Component, Input, OnInit, QueryList, ViewChildren,
+	Component, Input, OnInit, QueryList, ViewChildren, inject,
 } from '@angular/core';
 import { Observable, Subject, take } from 'rxjs';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { ProjectMember } from '../projectmanagement/project_member.model';
 import { environment } from '../../environments/environment';
 import { ApiSettings } from '../api-connector/api-settings.service';
@@ -32,6 +33,7 @@ import { CsvMailTemplateModel } from '../shared/classes/csvMailTemplate.model';
 	providers: [FacilityService, UserService, GroupService, ApiSettings, NewsService, ProjectSortService],
 })
 export class FacilityProjectsOverviewComponent extends AbstractBaseClass implements OnInit {
+	private readonly tracker = inject(MatomoTracker);
 	@Input() voRegistrationLink: string = environment.voRegistrationLink;
 
 	title: string = 'Projects Overview';
@@ -147,6 +149,7 @@ export class FacilityProjectsOverviewComponent extends AbstractBaseClass impleme
 	}
 
 	ngOnInit(): void {
+		this.tracker.trackPageView('Facility Project Overview');
 		this.facilityService.getManagerFacilities().subscribe((result: any): void => {
 			this.managerFacilities = result;
 			this.selectedFacility = this.managerFacilities[0];

src/app/facility_manager/imagetags.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { forkJoin } from 'rxjs';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { ImageService } from '../api-connector/image.service';
 import {
 	BlockedImageTag, BlockedImageTagResenv, ImageLogo, ImageMode, ImageTag,
@@ -16,6 +17,7 @@ import { BiocondaService } from '../api-connector/bioconda.service';
 	providers: [ImageService, FacilityService, BiocondaService],
 })
 export class ImageTagComponent implements OnInit {
+	private readonly tracker = inject(MatomoTracker);
 
 	title: string = 'Image Tags';
 
@@ -50,7 +52,11 @@ export class ImageTagComponent implements OnInit {
 	 */
 	public selectedFacility: [string, number];
 
-	constructor(private imageService: ImageService, private facilityService: FacilityService, private biocondaService: BiocondaService) {
+	constructor(
+		private imageService: ImageService,
+		private facilityService: FacilityService,
+		private biocondaService: BiocondaService,
+	) {
 		// constructor for ImageTags
 	}
 
@@ -91,18 +97,18 @@ export class ImageTagComponent implements OnInit {
 			this.imageService.getBlockedImageTags(this.selectedFacility['FacilityId']),
 			this.imageService.getImageModes(this.selectedFacility['FacilityId']),
 			this.imageService.getBlockedImageTagsResenv(this.selectedFacility['FacilityId']),
-		)
-			.subscribe((res: any): void => {
-				this.imageTags = res[0];
-				this.imageLogos = res[1];
-				this.blockedImageTags = res[2];
-				this.imageModes = res[3];
-				this.blockedImageTagsResenv = res[4];
-				this.isLoaded = true;
-			});
+		).subscribe((res: any): void => {
+			this.imageTags = res[0];
+			this.imageLogos = res[1];
+			this.blockedImageTags = res[2];
+			this.imageModes = res[3];
+			this.blockedImageTagsResenv = res[4];
+			this.isLoaded = true;
+		});
 	}
 
 	ngOnInit(): void {
+		this.tracker.trackPageView('Image Tags');
 		this.facilityService.getManagerFacilities().subscribe((result: any): void => {
 			this.managerFacilities = result;
 			this.selectedFacility = this.managerFacilities[0];
@@ -113,15 +119,14 @@ export class ImageTagComponent implements OnInit {
 				this.imageService.getBlockedImageTags(this.selectedFacility['FacilityId']),
 				this.imageService.getImageModes(this.selectedFacility['FacilityId']),
 				this.imageService.getBlockedImageTagsResenv(this.selectedFacility['FacilityId']),
-			)
-				.subscribe((res: any): void => {
-					this.imageTags = res[0];
-					this.imageLogos = res[1];
-					this.blockedImageTags = res[2];
-					this.imageModes = res[3];
-					this.blockedImageTagsResenv = res[4];
-					this.isLoaded = true;
-				});
+			).subscribe((res: any): void => {
+				this.imageTags = res[0];
+				this.imageLogos = res[1];
+				this.blockedImageTags = res[2];
+				this.imageModes = res[3];
+				this.blockedImageTagsResenv = res[4];
+				this.isLoaded = true;
+			});
 		});
 	}
 
@@ -150,10 +155,12 @@ export class ImageTagComponent implements OnInit {
 
 	addTag(tag: string, input: HTMLInputElement): void {
 		if (input.validity.valid) {
-			this.imageService.addImageTags(tag.trim(), this.checkedModes, this.selectedFacility['FacilityId']).subscribe((newTag: ImageTag): void => {
-				this.checkedModes = [];
-				this.imageTags.push(newTag);
-			});
+			this.imageService
+				.addImageTags(tag.trim(), this.checkedModes, this.selectedFacility['FacilityId'])
+				.subscribe((newTag: ImageTag): void => {
+					this.checkedModes = [];
+					this.imageTags.push(newTag);
+				});
 			this.alertRed = false;
 		} else {
 			this.alertRed = true;
@@ -166,16 +173,15 @@ export class ImageTagComponent implements OnInit {
 			description: this.newModeDescription,
 			copy_field: this.newModeCopy,
 		};
-		this.imageService.addImageMode(newMode, this.selectedFacility['FacilityId']).subscribe((createdMode: ImageMode): void => {
-
-			this.newModeName = '';
-			this.newModeDescription = '';
-			this.newModeCopy = '';
-			this.imageModes.push(createdMode);
-			this.getTagModeSuggestions();
-
-		});
-
+		this.imageService
+			.addImageMode(newMode, this.selectedFacility['FacilityId'])
+			.subscribe((createdMode: ImageMode): void => {
+				this.newModeName = '';
+				this.newModeDescription = '';
+				this.newModeCopy = '';
+				this.imageModes.push(createdMode);
+				this.getTagModeSuggestions();
+			});
 	}
 
 	deleteTag(tag: ImageTag): void {
@@ -208,9 +214,11 @@ export class ImageTagComponent implements OnInit {
 
 	addBlockedTag(tag: string, input: HTMLInputElement): void {
 		if (input.validity.valid) {
-			this.imageService.addBlockedImageTag(tag.trim(), this.selectedFacility['FacilityId']).subscribe((newTag: BlockedImageTag): void => {
-				this.blockedImageTags.push(newTag);
-			});
+			this.imageService
+				.addBlockedImageTag(tag.trim(), this.selectedFacility['FacilityId'])
+				.subscribe((newTag: BlockedImageTag): void => {
+					this.blockedImageTags.push(newTag);
+				});
 			this.alertRed_blocked = false;
 		} else {
 			this.alertRed_blocked = true;
@@ -250,5 +258,4 @@ export class ImageTagComponent implements OnInit {
 			});
 		});
 	}
-
 }

src/app/facility_manager/newsmanagement/news-manager.component.ts

@@ -1,15 +1,15 @@
 import {
-	Component, OnDestroy, OnInit, ViewChild,
+	Component, OnDestroy, OnInit, ViewChild, inject,
 } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { ModalDirective } from 'ngx-bootstrap/modal';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { NewsService } from '../../api-connector/news.service';
 import { FacilityService } from '../../api-connector/facility.service';
 import { environment } from '../../../environments/environment';
 import { FacilityNews } from './facility-news';
 import { WIKI_MOTD } from '../../../links/links';
-
 /**
  * News-Manager Class to manage news in wordPress.
  */
@@ -19,6 +19,7 @@ import { WIKI_MOTD } from '../../../links/links';
 	providers: [NewsService, FacilityService],
 })
 export class NewsManagerComponent implements OnInit, OnDestroy {
+	private readonly tracker = inject(MatomoTracker);
 	title: string = 'News Management';
 	public production: boolean = environment.production;
 	WIKI_MOTD: string = WIKI_MOTD;
@@ -72,6 +73,7 @@ export class NewsManagerComponent implements OnInit, OnDestroy {
 	 * Method on site initialization.
 	 */
 	ngOnInit(): void {
+		this.tracker.trackPageView('News Management');
 		this.subscription.add(
 			this.facilityService.getComputeCenters().subscribe((computeCenters: any[]): void => {
 				this.computeCenters = computeCenters;

src/app/facility_manager/resources/resources.component.ts

@@ -1,9 +1,10 @@
 import {
-	Component, ElementRef, OnInit, ViewChild,
+	Component, ElementRef, OnInit, ViewChild, inject,
 } from '@angular/core';
 import {
 	download, mkConfig, generateCsv, CsvOutput,
 } from 'export-to-csv';
+import { MatomoTracker } from 'ngx-matomo-client';
 import { Resources } from '../../vo_manager/resources/resources';
 import { FacilityService } from '../../api-connector/facility.service';
 import { ObjectStorageFactor } from './object-storage-factor';
@@ -22,6 +23,7 @@ import { GPUSpecification } from './gpu-specification';
 	providers: [FacilityService],
 })
 export class ResourcesComponent implements OnInit {
+	private readonly tracker = inject(MatomoTracker);
 	title: string = 'Resource Overview';
 
 	tableId: string = 'contentToConvert';
@@ -154,6 +156,7 @@ export class ResourcesComponent implements OnInit {
 	}
 
 	ngOnInit(): void {
+		this.tracker.trackPageView('Facility Resources');
 		this.facilityService.getManagerFacilities().subscribe((result: [string, number][]): void => {
 			this.managerFacilities = result;
 			this.selectedFacility = this.managerFacilities[0];