check datacenter selector (#7679)

Author: ahmadhamzh

modules/web/src/app/wizard/component.ts

@@ -133,7 +133,7 @@ export class WizardComponent implements OnInit, OnDestroy {
     this.project.id = this._route.snapshot.paramMap.get(PathParam.ProjectID);
 
     if (this.clusterTemplateID) {
-      this.loadClusterTemplate();
+      this._loadClusterTemplate();
     } else {
       this.loadingClusterTemplate = false;
     }
@@ -333,7 +333,7 @@ export class WizardComponent implements OnInit, OnDestroy {
         // Template is already loaded at this point and we don't need to reload it unless the project ID has changed.
         if (this.clusterTemplateID && project.id !== this.project.id) {
           this.project = project;
-          this.loadClusterTemplate();
+          this._loadClusterTemplate();
         }
         this.project = project;
       });
@@ -352,7 +352,7 @@ export class WizardComponent implements OnInit, OnDestroy {
     this.form = this._formBuilder.group(controls);
   }
 
-  private loadClusterTemplate(): void {
+  private _loadClusterTemplate(): void {
     this._clusterTemplateService
       .get(this.project.id, this.clusterTemplateID)
       // We just need to load the cluster template once. Usage of `takeUntil` will cause an endless chain of update that

modules/web/src/app/wizard/step/applications/component.ts

@@ -17,12 +17,13 @@ import {FormBuilder, NG_VALIDATORS, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {ClusterSpecService} from '@app/core/services/cluster-spec';
 import {StepRegistry} from '@app/wizard/config';
 import {StepBase} from '@app/wizard/step/base';
+import {WizardMode} from '@app/wizard/types/wizard-mode';
 import {ApplicationService} from '@core/services/application';
 import {WizardService} from '@core/services/wizard/wizard';
 import {ApplicationsListView} from '@shared/components/application-list/component';
 import {Application, ApplicationSettings, createApplicationInstallation} from '@shared/entity/application';
-import _, {merge} from 'lodash';
-import {forkJoin, takeUntil} from 'rxjs';
+import _ from 'lodash';
+import {forkJoin, switchMap, takeUntil} from 'rxjs';
 
 enum Controls {
   Applications = 'applications',
@@ -49,6 +50,7 @@ export class ApplicationsStepComponent extends StepBase implements OnInit, OnDes
   readonly ApplicationsListView = ApplicationsListView;
 
   applications: Application[] = [];
+  wizardMode: WizardMode;
 
   private _applicationSettings: ApplicationSettings;
 
@@ -62,6 +64,8 @@ export class ApplicationsStepComponent extends StepBase implements OnInit, OnDes
   }
 
   ngOnInit(): void {
+    this.wizardMode = window.history.state?.mode;
+
     this.form = this._builder.group({
       [Controls.Applications]: this._builder.control(''),
     });
@@ -81,45 +85,60 @@ export class ApplicationsStepComponent extends StepBase implements OnInit, OnDes
         }
         return application;
       }) || [];
-
-    merge(this._clusterSpecService.datacenterChanges, this._applicationService.applicationChanges)
-      .pipe(takeUntil(this._unsubscribe))
-      .subscribe(_ => {
-        this.loadDefaultAndEnforcedApplications();
+    this._loadDefaultAndEnforcedApplications();
+    if (this.wizardMode !== WizardMode.CustomizeClusterTemplate && this.wizardMode !== WizardMode.EditClusterTemplate) {
+      this._clusterSpecService.datacenterChanges.pipe(takeUntil(this._unsubscribe)).subscribe(_ => {
+        this._applicationService.applications = [];
+        this.applications = [];
+        this._loadDefaultAndEnforcedApplications();
       });
+    }
   }
 
-  private loadDefaultAndEnforcedApplications() {
-    const defaultAndEnforcedApplications = this._applicationService.applicationDefinitions.filter(
-      application => application.spec.default || application.spec.enforced
-    );
-
-    // Fetch individual application definitions and create ApplicationInstallations
-    forkJoin(
-      defaultAndEnforcedApplications.map(application =>
-        this._applicationService.getApplicationDefinition(application.name)
+  private _loadDefaultAndEnforcedApplications() {
+    this._applicationService
+      .listApplicationDefinitions()
+      .pipe(
+        switchMap(apps => {
+          const defaultAndEnforcedApplications = apps.filter(application => {
+            return (
+              (application.spec.default || application.spec.enforced) &&
+              (!application.spec.selector?.datacenters ||
+                application.spec.selector?.datacenters?.includes(this._clusterSpecService.datacenter))
+            );
+          });
+          return forkJoin(
+            defaultAndEnforcedApplications.map(application =>
+              this._applicationService.getApplicationDefinition(application.name)
+            )
+          );
+        })
       )
-    ).subscribe(applicationDefinitions => {
-      applicationDefinitions.forEach(appDef => {
-        if (appDef.name === 'k8sgpt') {
-          appDef.spec.enforced = true;
-        }
-
-        if (appDef.name === 'cert-manager') {
-          appDef.spec.default = true;
-        }
-
-        const applicationInstallation = createApplicationInstallation(
-          appDef,
-          this._applicationSettings?.defaultNamespace
-        );
-        this.onApplicationAdded(applicationInstallation);
+      // Fetch individual application definitions and create ApplicationInstallations
+      .subscribe(applicationDefinitions => {
+        applicationDefinitions.forEach(appDef => {
+          if (appDef.name === 'k8sgpt') {
+            appDef.spec.enforced = true;
+          }
+
+          if (appDef.name === 'cert-manager') {
+            appDef.spec.default = true;
+          }
+
+          const applicationInstallation = createApplicationInstallation(
+            appDef,
+            this._applicationSettings?.defaultNamespace
+          );
+          this.onApplicationAdded(applicationInstallation);
+        });
       });
-    });
   }
 
   onApplicationAdded(application: Application): void {
     application.id = `${application.name}/${application.spec.namespace.name}`;
+    if (this.applications.find(app => app.id === application.id)) {
+      return;
+    }
     this.applications = [...this.applications, application];
     this._onApplicationsChanged();
   }