QOL enhancements for Applications in Admin Panel (#6863)

* Show warning for applications with datacenters Signed-off-by: Waleed Malik <[email protected]> * Hide system applications from admin panel Signed-off-by: Waleed Malik <[email protected]> --------- Signed-off-by: Waleed Malik <[email protected]>
kubermatic · Sep 20, 2024 · 9900ea0 · 9900ea0
1 parent 9328327
commit 9900ea0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/modules/web/src/app/settings/admin/applications/component.ts b/modules/web/src/app/settings/admin/applications/component.ts
@@ -21,7 +21,7 @@ import {ApplicationService} from '@app/core/services/application';
 import {DatacenterService} from '@app/core/services/datacenter';
 import {NotificationService} from '@app/core/services/notification';
 import {UserService} from '@app/core/services/user';
-import {ApplicationDefinition} from '@app/shared/entity/application';
+import {ApplicationDefinition, ApplicationLabel, ApplicationLabelValue} from '@app/shared/entity/application';
 import {Datacenter} from '@app/shared/entity/datacenter';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -51,7 +51,7 @@ export class ApplicationsComponent implements OnInit, OnChanges {
   ) {}
 
   ngOnInit() {
-    this.dataSource.data = this.applications;
+    this.dataSource.data = this.applications?.filter(app => !this.isSystemApplication(app));
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.sort.active = 'name';
@@ -64,7 +64,8 @@ export class ApplicationsComponent implements OnInit, OnChanges {
       .subscribe({
         next: applications => {
           this.applications = this._filter(applications);
-          this.dataSource.data = this.applications;
+          // Filter out system applications.
+          this.dataSource.data = this.applications?.filter(app => !this.isSystemApplication(app));
           this.isLoading = false;
         },
         error: () => (this.isLoading = false),
@@ -94,6 +95,10 @@ export class ApplicationsComponent implements OnInit, OnChanges {
     this.dataSource.filter = query;
   }
 
+  isSystemApplication(application: ApplicationDefinition): boolean {
+    return application.labels?.[ApplicationLabel.ManagedBy] === ApplicationLabelValue.KKP;
+  }
+
   isPaginatorVisible(): boolean {
     return (
       this.applications &&

diff --git a/modules/web/src/app/settings/admin/applications/style.scss b/modules/web/src/app/settings/admin/applications/style.scss
@@ -38,3 +38,16 @@ km-search-field {
     margin: 0;
   }
 }
+
+.km-selector-warning {
+  margin-bottom: 24px;
+
+  i.km-icon-warning {
+    margin: 0 8px;
+  }
+
+  p {
+    font-size: variables.$font-size-body;
+    margin: 0;
+  }
+}
diff --git a/modules/web/src/app/settings/admin/applications/template.html b/modules/web/src/app/settings/admin/applications/template.html
@@ -22,6 +22,16 @@
                     fxLayoutAlign="start"
                     fxLayoutGap="32px">
       <div fxFlex>Applications</div>
+      <div class="km-selector-warning"
+           fxLayout="row"
+           fxLayoutAlign="start">
+        <i class="km-icon-warning km-warning km-pointer"></i>
+        <p fxFlex="95">
+          To apply default or enforced applications to specific datacenters, it's recommended to first select the datacenters
+          and then enable/disable enforced/default checkbox. Otherwise, the applications will be defaulted/enforced
+          unconditionally on all clusters.
+        </p>
+      </div>
       <km-search-field class="search"
                        (queryChange)="onSearch($event)"></km-search-field>
     </mat-card-title>

diff --git a/modules/web/src/app/settings/admin/presets/dialog/steps/settings/template.html b/modules/web/src/app/settings/admin/presets/dialog/steps/settings/template.html
@@ -90,7 +90,8 @@
 
     <ng-container *ngIf="!isExternal()">
       <div class="optional-section">Optional Restrictions</div>
-      <div fxLayout="column" fxLayoutGap="10px">
+      <div fxLayout="column"
+           fxLayoutGap="10px">
         <mat-checkbox *ngIf="isProvider(Providers.OPENSTACK)"
                       [formControlName]="Controls.IsCustomizable">
           Customizable Preset