Add Preset Management UI

src/app/core/components/notification/style.scss

@@ -26,3 +26,7 @@
 .km-icon-close {
   margin: auto 16px;
 }
+
+:host {
+  width: 100%;
+}

src/app/core/services/wizard/presets.service.ts

@@ -11,10 +11,10 @@
 
 import {HttpClient} from '@angular/common/http';
 import {EventEmitter, Injectable} from '@angular/core';
-import {EMPTY, Observable} from 'rxjs';
 import {environment} from '@environments/environment';
-import {PresetList} from '@shared/entity/preset';
+import {CreatePresetReq, Preset, PresetList, UpdatePresetStatusReq} from '@shared/entity/preset';
 import {NodeProvider} from '@shared/model/NodeProviderConstants';
+import {Observable} from 'rxjs';
 import {Alibaba} from './provider/alibaba';
 import {AWS} from './provider/aws';
 import {Azure} from './provider/azure';
@@ -32,19 +32,19 @@ export class PresetsService {
   readonly presetStatusChanges = new EventEmitter<boolean>();
   readonly presetChanges = new EventEmitter<string>();
 
+  constructor(private readonly _http: HttpClient) {}
+
   private _preset: string;
 
-  constructor(private readonly _http: HttpClient) {}
+  get preset(): string {
+    return this._preset;
+  }
 
   set preset(preset: string) {
     this._preset = preset;
     this.presetChanges.next(preset);
   }
 
-  get preset(): string {
-    return this._preset;
-  }
-
   enablePresets(enable: boolean): void {
     this.presetStatusChanges.next(enable);
   }
@@ -83,12 +83,32 @@ export class PresetsService {
     }
   }
 
-  presets(provider: NodeProvider, datacenter: string): Observable<PresetList> {
-    if (!provider || !datacenter) {
-      return EMPTY;
+  presets(disabled?: boolean, provider: NodeProvider = NodeProvider.NONE, datacenter = ''): Observable<PresetList> {
+    if (!provider) {
+      const url = `${environment.newRestRoot}/presets?disabled=${disabled}`;
+      return this._http.get<PresetList>(url);
     }
 
-    const url = `${environment.restRoot}/providers/${provider}/presets/credentials?datacenter=${datacenter}`;
+    const url = `${environment.newRestRoot}/providers/${provider}/presets?datacenter=${datacenter}&disabled=${disabled}`;
     return this._http.get<PresetList>(url);
   }
+
+  updateStatus(
+    presetName: string,
+    status: UpdatePresetStatusReq,
+    provider: NodeProvider = NodeProvider.NONE
+  ): Observable<Preset> {
+    const url = `${environment.newRestRoot}/presets/${presetName}/status?provider=${provider}`;
+    return this._http.put<Preset>(url, status);
+  }
+
+  create(preset: CreatePresetReq): Observable<Preset> {
+    const url = `${environment.newRestRoot}/providers/${preset.spec.provider()}/presets`;
+    return this._http.post<Preset>(url, preset);
+  }
+
+  update(preset: CreatePresetReq): Observable<Preset> {
+    const url = `${environment.newRestRoot}/providers/${preset.spec.provider()}/presets`;
+    return this._http.put<Preset>(url, preset);
+  }
 }

src/app/settings/admin/dynamic-datacenters/template.html

@@ -10,6 +10,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+
 <mat-card>
   <mat-card-header fxLayoutGap="24px">
     <mat-card-title>Dynamic Datacenters</mat-card-title>

src/app/settings/admin/module.ts

@@ -10,16 +10,32 @@
 // limitations under the License.
 
 import {NgModule} from '@angular/core';
-
-import {SharedModule} from '../../shared/shared.module';
-
-import {AdminSettingsComponent} from './component';
-import {AdminSettingsRoutingModule} from './routing';
+import {PresetListComponent} from '@app/settings/admin/presets/component';
+import {PresetDialogComponent} from '@app/settings/admin/presets/dialog/component';
+import {PresetStepComponent} from '@app/settings/admin/presets/dialog/steps/preset/component';
+import {PresetProviderStepComponent} from '@app/settings/admin/presets/dialog/steps/provider/component';
+import {PresetDialogService} from '@app/settings/admin/presets/dialog/steps/service';
+import {PresetSettingsStepComponent} from '@app/settings/admin/presets/dialog/steps/settings/component';
+import {AlibabaSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/alibaba/component';
+import {AnexiaSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/anexia/component';
+import {AWSSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/aws/component';
+import {AzureSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/azure/component';
+import {DigitaloceanSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/digitalocean/component';
+import {GCPSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/gcp/component';
+import {HetznerSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/hetzner/component';
+import {KubevirtSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/kubevirt/component';
+import {OpenstackSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/openstack/component';
+import {PacketSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/packet/component';
+import {VSphereSettingsComponent} from '@app/settings/admin/presets/dialog/steps/settings/provider/vsphere/component';
+import {EditPresetDialogComponent} from '@app/settings/admin/presets/edit-dialog/component';
+import {SharedModule} from '@shared/shared.module';
 import {AddAdminDialogComponent} from './admins/add-admin-dialog/component';
 import {AdminsComponent} from './admins/component';
+import {AdminSettingsComponent} from './component';
 import {CustomLinksFormComponent} from './custom-link-form/component';
-import {DatacenterDataDialogComponent} from './dynamic-datacenters/datacenter-data-dialog/component';
 import {DynamicDatacentersComponent} from './dynamic-datacenters/component';
+import {DatacenterDataDialogComponent} from './dynamic-datacenters/datacenter-data-dialog/component';
+import {AdminSettingsRoutingModule} from './routing';
 
 @NgModule({
   imports: [SharedModule, AdminSettingsRoutingModule],
@@ -30,6 +46,24 @@ import {DynamicDatacentersComponent} from './dynamic-datacenters/component';
     DatacenterDataDialogComponent,
     DynamicDatacentersComponent,
     AdminsComponent,
+    PresetListComponent,
+    PresetDialogComponent,
+    EditPresetDialogComponent,
+    PresetStepComponent,
+    PresetProviderStepComponent,
+    PresetSettingsStepComponent,
+    AlibabaSettingsComponent,
+    AnexiaSettingsComponent,
+    AWSSettingsComponent,
+    AzureSettingsComponent,
+    DigitaloceanSettingsComponent,
+    GCPSettingsComponent,
+    HetznerSettingsComponent,
+    KubevirtSettingsComponent,
+    OpenstackSettingsComponent,
+    PacketSettingsComponent,
+    VSphereSettingsComponent,
   ],
+  providers: [PresetDialogService],
 })
 export class AdminSettingsModule {}

src/app/settings/admin/presets/component.ts

@@ -0,0 +1,224 @@
+// Copyright 2020 The Kubermatic Kubernetes Platform contributors.
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//     http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Component, OnChanges, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {Mode, PresetDialogComponent, PresetDialogData} from '@app/settings/admin/presets/dialog/component';
+import {PresetDialogService} from '@app/settings/admin/presets/dialog/steps/service';
+import {EditPresetDialogComponent} from '@app/settings/admin/presets/edit-dialog/component';
+import {DatacenterService} from '@core/services/datacenter/service';
+import {NotificationService} from '@core/services/notification/service';
+import {UserService} from '@core/services/user/service';
+import {PresetsService} from '@core/services/wizard/presets.service';
+import {Datacenter} from '@shared/entity/datacenter';
+import {Preset, PresetList} from '@shared/entity/preset';
+import {NodeProvider, NodeProviderConstants} from '@shared/model/NodeProviderConstants';
+import {merge, of, Subject} from 'rxjs';
+import {Observable} from 'rxjs/Observable';
+import {switchMap, take, takeUntil} from 'rxjs/operators';
+
+enum Column {
+  Name = 'name',
+  Providers = 'providers',
+  Show = 'show',
+  Actions = 'actions',
+}
+
+@Component({
+  selector: 'km-preset-list',
+  templateUrl: './template.html',
+  styleUrls: ['./style.scss'],
+})
+export class PresetListComponent implements OnInit, OnDestroy, OnChanges {
+  presets: Preset[] = [];
+  dataSource = new MatTableDataSource<Preset>();
+  displayedColumns: string[] = Object.values(Column);
+  datacenters: Datacenter[] = [];
+  datacenterFilter: string;
+  providers: NodeProvider[] = Object.values(NodeProvider).filter(provider => !!provider);
+  providerFilter: NodeProvider;
+
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+  private _unsubscribe = new Subject<void>();
+  private _supportedProviders: NodeProvider[] = [];
+  private _presetsChanged = new Subject<void>();
+
+  constructor(
+    private readonly _userService: UserService,
+    private readonly _presetService: PresetsService,
+    private readonly _datacenterService: DatacenterService,
+    private readonly _matDialog: MatDialog,
+    private readonly _presetDialogService: PresetDialogService,
+    private readonly _notificationService: NotificationService
+  ) {}
+
+  get _presets$(): Observable<PresetList> {
+    if (this.datacenterFilter) {
+      return this._presetService.presets(true, this.providerFilter, this.datacenterFilter);
+    }
+
+    if (this.providerFilter) {
+      return this._presetService.presets(true, this.providerFilter);
+    }
+
+    return this._presetService.presets(true);
+  }
+
+  ngOnInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.sort.active = Column.Name;
+    this.sort.direction = 'asc';
+
+    this.dataSource.sortingDataAccessor = (preset, property) => {
+      switch (property) {
+        case Column.Name:
+          return preset.name;
+        case Column.Show:
+          return preset.enabled;
+        default:
+          return preset[property];
+      }
+    };
+
+    merge(of(true), this._presetsChanged)
+      .pipe(switchMap(_ => this._presets$))
+      .pipe(takeUntil(this._unsubscribe))
+      .subscribe(presetList => {
+        this.presets = presetList.items;
+        this.dataSource.data = this.presets;
+      });
+
+    this._datacenterService.datacenters.pipe(takeUntil(this._unsubscribe)).subscribe(datacenters => {
+      this.datacenters = datacenters;
+      const uniqueProviders = new Set<NodeProvider>(
+        this.datacenters.map(dc => NodeProviderConstants.newNodeProvider(dc.spec.provider))
+      );
+      this._supportedProviders = Array.from(uniqueProviders);
+    });
+
+    this._userService.currentUserSettings.pipe(takeUntil(this._unsubscribe)).subscribe(settings => {
+      this.paginator.pageSize = settings.itemsPerPage;
+      this.dataSource.paginator = this.paginator; // Force refresh.
+    });
+  }
+
+  ngOnChanges(): void {
+    this.filter();
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribe.next();
+    this._unsubscribe.complete();
+  }
+
+  filter(): void {
+    this._presetsChanged.next();
+  }
+
+  createPreset(): void {
+    const dialogConfig: MatDialogConfig = {
+      panelClass: 'km-preset-dialog',
+      maxWidth: '600px',
+      data: {
+        title: 'Create Preset',
+        steps: ['Preset', 'Provider', 'Settings'],
+        mode: Mode.Create,
+      } as PresetDialogData,
+    };
+
+    this._matDialog
+      .open(PresetDialogComponent, dialogConfig)
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe(created => (created === true ? this._presetsChanged.next() : null));
+  }
+
+  editPreset(preset: Preset): void {
+    const dialogConfig: MatDialogConfig = {
+      panelClass: 'km-preset-dialog',
+      data: {
+        preset: preset,
+      } as PresetDialogData,
+    };
+
+    this._matDialog
+      .open(EditPresetDialogComponent, dialogConfig)
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe(_ => {});
+  }
+
+  canAddProvider(preset: Preset): boolean {
+    return (
+      this._supportedProviders.filter(p => this._presetDialogService.unsupportedProviders.indexOf(p) < 0).length >
+      preset.providers.length
+    );
+  }
+
+  addProvider(preset: Preset): void {
+    const dialogConfig: MatDialogConfig = {
+      panelClass: 'km-preset-dialog',
+      maxWidth: '600px',
+      data: {
+        title: 'Add Preset Provider',
+        steps: ['Provider', 'Settings'],
+        mode: Mode.Add,
+        preset: preset,
+      } as PresetDialogData,
+    };
+
+    this._matDialog
+      .open(PresetDialogComponent, dialogConfig)
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe(created => (created === true ? this._presetsChanged.next() : null));
+  }
+
+  editProvider(preset: Preset): void {
+    const dialogConfig: MatDialogConfig = {
+      panelClass: 'km-preset-dialog',
+      maxWidth: '600px',
+      data: {
+        title: 'Edit Preset Provider',
+        steps: ['Provider', 'Settings'],
+        mode: Mode.Edit,
+        preset: preset,
+      } as PresetDialogData,
+    };
+
+    this._matDialog
+      .open(PresetDialogComponent, dialogConfig)
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe(created => (created === true ? this._presetsChanged.next() : null));
+  }
+
+  updatePresetStatus(name: string, enabled: boolean): void {
+    this._presetService
+      .updateStatus(name, {enabled: enabled})
+      .pipe(take(1))
+      .subscribe(_ => {
+        const idx = this.presets.findIndex(p => p.name === name);
+        this.presets[idx].enabled = enabled;
+        this._notificationService.success(`${enabled ? 'Enabled' : 'Disabled'} preset ${name}.`);
+      });
+  }
+
+  isPaginatorVisible(): boolean {
+    return this.presets && this.presets.length > 0 && this.paginator && this.presets.length > this.paginator.pageSize;
+  }
+}