see deployment per stage

modulefederation/apps/web/src/app/portal/applications/application-version/application-version.component.html

@@ -19,4 +19,6 @@
     <mat-label>Microfrontends</mat-label>
     <assigned-microfrontends [applicationVersion]="applicationVersion" [microfrontends]="microfrontends" (dirty)="onDirty($event)"></assigned-microfrontends>
 </div>
+
+<button (click)="open()">CHECK</button>
 </div>

modulefederation/apps/web/src/app/portal/applications/application-version/application-version.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Injector, Input, OnChanges, OnInit, Output, SimpleChanges } from "@angular/core";
+import { Component, EventEmitter, Inject, Injector, Input, OnChanges, OnInit, Output, SimpleChanges } from "@angular/core";
 import { Application, ApplicationVersion, Microfrontend } from "../../model";
 import { ConfigurationProperty } from "../../config/configuration-model";
 import { ConfigurationTreeComponent } from "../../config/configuration-tree.component";
@@ -8,6 +8,8 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { ApplicationFeatureComponent } from "../application.feature";
 import { PortalAdministrationService } from "../../service";
 import { ApplicationView } from "../application-view";
+import { ContentComponent } from "./application-version-dialog";
+
 
 @Component({
     standalone: true,
@@ -59,14 +61,29 @@ export class ApplicationVersionComponent extends ApplicationView implements OnIn
             this.applicationVersion.assignedMicrofrontends[i].id = version.assignedMicrofrontends[i].id
         }
     })
+
+    this.showSnackbar("saved")
    }
 
-   revert() {
+  revert() {
     // TODO
-    }
+    this.showSnackbar("reverted")
+  }
 
   // callbacks
 
+  open() {
+    this.dynamicDialog()
+      .title(this.applicationVersion.version)
+      .component(ContentComponent)
+      .args({
+        version: this.applicationVersion
+      })
+      .ok()
+      .show().subscribe()
+
+  }
+
   onDirty(dirty: boolean) {
     this.dirty.emit(dirty)
   }

modulefederation/apps/web/src/app/portal/applications/application-view.ts

@@ -1,10 +1,10 @@
-import { AbstractFeature, WithCommands, WithSnackbar } from "@modulefederation/portal"
+import { AbstractFeature, WithCommands, WithDialogs, WithSnackbar } from "@modulefederation/portal"
 import { ConfigurationProperty } from "../config/configuration-model"
 import { WithCommandToolbar } from "./toolbar/with-command-toolbar.mixin"
 import { CommandToolbarComponent } from "./toolbar/command-toolbar.component"
 import { Injector } from "@angular/core"
 
-export abstract class ApplicationView extends WithSnackbar(WithCommandToolbar(WithCommands(AbstractFeature))) {
+export abstract class ApplicationView extends WithDialogs(WithSnackbar(WithCommandToolbar(WithCommands(AbstractFeature)))) {
    // instance data
 
    override commandToolbar?: CommandToolbarComponent

modulefederation/apps/web/src/app/portal/applications/application/application.component.ts

@@ -52,10 +52,12 @@ export class ApplicationComponent extends ApplicationView implements OnInit {
 
         this.portalAdministrationService.updateApplication(this.application).subscribe()
 
+        this.showSnackbar("saved")
     }
 
     revert() {
         // TODO
+        this.showSnackbar("reverted")
     }
 
    // callbacks

modulefederation/apps/web/src/app/portal/applications/microfrontend-version/microfrontend-version.component.ts

@@ -130,6 +130,8 @@ export class MicrofrontendVersionComponent extends ApplicationView implements On
 
             this.manifestComponent.saved()
         }
+
+        this.showSnackbar("saved")
     }
 
     revert() {

modulefederation/apps/web/src/app/portal/applications/microfrontend/microfrontend.component.ts

@@ -67,10 +67,12 @@ export class MicrofrontendComponent extends ApplicationView implements OnInit {
 
     this.portalAdministrationService.updateMicrofrontend(this.microfrontend).subscribe()
 
+    this.showSnackbar("saved")
    }
 
    revert() {
       // TODO
+      this.showSnackbar("reverted")
    }
 
    onDirty(dirty: boolean) {

modulefederation/apps/web/src/app/portal/service/portal-deployment-service.service.ts

@@ -6,10 +6,11 @@
 
 import { Injectable, Injector } from "@angular/core"
 import { Observable } from "rxjs"
-import { AbstractHTTPService, Deployment, Service } from "@modulefederation/portal";
+import { AbstractHTTPService, Deployment, DeploymentRequest, Service } from "@modulefederation/portal";
+import { MicrofrontendInstance } from "../model";
 
 @Injectable({providedIn: 'root'})
-@Service({domain: "admin", prefix: "/portal-administration/"})
+@Service({domain: "admin", prefix: "/portal-deployment/"})
 export class PortalDeploymentService extends AbstractHTTPService {
     // constructor
 
@@ -19,11 +20,11 @@ export class PortalDeploymentService extends AbstractHTTPService {
 
     // public methods
 
-    public getDeployment(session : boolean) : Observable<Deployment> {
-        return this.get<Deployment>(`deployment/${session}`)
+    public computeDeployment(request: DeploymentRequest) : Observable<Deployment> {
+        return this.post<Deployment>(`compute-deployment`, request)
     }
 
-    public computeDeployment(application: string, version: string, session : boolean) : Observable<Deployment> {
-        return this.get<Deployment>(`compute-deployment/${application}/${version}/${session}`)
+    public findShellInstances(application: number) : Observable<MicrofrontendInstance[]> {
+        return this.get<MicrofrontendInstance[]>(`shell-instances/${application}`)
     }
 }

modulefederation/libs/portal/src/lib/deployment/http-deployment-loader.ts

@@ -5,7 +5,7 @@ import { Observable } from "rxjs";
 import { AbstractHTTPService, Service } from "../common/communication";
 
 @Injectable({providedIn: 'root'})
-@Service({domain: "admin", prefix: "/portal-administration"})
+@Service({domain: "admin", prefix: "/portal-deployment"})
 export class PortalDeploymentService extends AbstractHTTPService {
     // constructor
 

modulefederation/libs/portal/src/lib/dialog/dialogs.ts

@@ -6,6 +6,7 @@ import { ConfirmationDialogBuilder } from "./confirmation-dialog-builder";
 import { tap } from "rxjs/operators";
 import { ComponentType } from "@angular/cdk/overlay";
 import { Observable } from "rxjs";
+import { DynamicDialogBuilder } from "./dynamic-dialog-builder";
 
 export interface ButtonConfiguration {
     label?: string
@@ -28,6 +29,8 @@ export interface Dialogs {
   confirmationDialog() : ConfirmationDialogBuilder
 
   inputDialog() : InputDialogBuilder
+
+  dynamicDialog() : DynamicDialogBuilder
 }
 
 export interface DialogListener {
@@ -72,4 +75,8 @@ export class DialogService implements Dialogs {
     inputDialog() : InputDialogBuilder {
       return new InputDialogBuilder(this)
     }
+
+    dynamicDialog() : DynamicDialogBuilder {
+      return new DynamicDialogBuilder(this)
+    }
 }

modulefederation/libs/portal/src/lib/dialog/dynamic-dialog-builder.ts

@@ -0,0 +1,46 @@
+import { DialogService } from "./dialogs";
+import { DynamicDialog } from "./dynamic-dialog";
+import { ComponentType } from "@angular/cdk/portal";
+import { AbstractDialogBuilder, AbstractDialogConfig } from "./abstract-dialog-builder";
+
+
+export interface DynamicDialogConfig extends AbstractDialogConfig {
+    component: ComponentType<any>,
+    arguments?: any
+}
+
+
+export class DynamicDialogBuilder extends AbstractDialogBuilder<DynamicDialogConfig> {
+    // constructor
+
+    constructor(dialog : DialogService) {
+        super(dialog, DynamicDialog, {
+            title: "",
+            component: DynamicDialog,
+            buttons: []
+        })
+    }
+
+    // fluent
+
+    /**
+     * set the dialog title
+     * @param title the title
+     */
+    component(component : ComponentType<any>) : this {
+        this.configuration.component = component;
+
+        return this;
+    }
+
+    /**
+     * set the dialog arguments
+     * @param args the arguments
+     */
+    args(args : any) : this {
+        this.configuration.arguments = args;
+
+        return this;
+    }
+}
+

modulefederation/libs/portal/src/lib/dialog/dynamic-dialog.html

@@ -0,0 +1,14 @@
+<h1 mat-dialog-title>{{data.title}}</h1>
+<div class="content" mat-dialog-content>
+  <ng-container *ngComponentOutlet="data.component"></ng-container>
+</div>
+<div align="end" mat-dialog-actions>
+  <button (click)="click(button)" *ngFor="let button of data.buttons"
+          [color]="button.primary === true ? 'primary' : 'basic'"
+          [mat-dialog-close]="button.result"
+          mat-button mat-raised-button>
+    {{button.label || (button.i18n! | translate)}}
+  </button>
+</div>
+
+

modulefederation/libs/portal/src/lib/dialog/dynamic-dialog.scss

@@ -0,0 +1 @@
+

modulefederation/libs/portal/src/lib/dialog/dynamic-dialog.ts

@@ -0,0 +1,59 @@
+
+/* eslint-disable @angular-eslint/component-class-suffix */
+import { Component, Inject, OnInit } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
+import { ButtonConfiguration } from "./dialogs";
+import { MatIconModule } from "@angular/material/icon";
+import { MatButtonModule } from "@angular/material/button";
+import { CommonModule } from "@angular/common";
+import { CommonDialog } from "./dialog-builder";
+import { I18nModule } from "../i18n";
+import { DynamicDialogConfig } from "./dynamic-dialog-builder";
+
+@Component({
+    selector: 'dynamic-dialog',
+    templateUrl: './dynamic-dialog.html',
+    styleUrls: ['./dynamic-dialog.scss'],
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatIconModule,
+        MatDialogModule,
+        MatButtonModule,
+        I18nModule
+    ]
+})
+export class DynamicDialog extends CommonDialog implements OnInit {
+    // constructor
+
+    constructor(dialogRef : MatDialogRef<DynamicDialog>, @Inject(MAT_DIALOG_DATA) public data : DynamicDialogConfig) {
+        super(dialogRef)
+    }
+
+    // callbacks
+
+    override click(button : ButtonConfiguration) : void {
+        this.dialogRef.close(button.result);
+    }
+
+    // implement OnInit
+
+    ngOnInit() : void {
+        this.data.buttons.forEach(button => this.decorate(button))
+
+        const button = this.data.buttons.find(button => button.primary)
+
+        if (button)
+            this.dialogRef.keydownEvents().subscribe(event => {
+                //if (event.key === "Escape") {
+                //    this.cancel();
+                //}
+
+                if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+
+                    this.dialogRef.close(button.result);
+                }
+            });
+    }
+}

modulefederation/libs/portal/src/lib/dialog/index.ts

@@ -2,5 +2,7 @@ export * from "./input-dialog"
 export * from "./input-dialog-builder"
 export * from "./confirmation-dialog-builder"
 export * from "./confirmation-dialog"
+export * from "./dynamic-dialog"
+export * from "./dynamic-dialog-builder"
 export * from "./dialogs"
-export * from "./with-dialogs.mixin"
+export * from "./with-dialogs.mixin"

modulefederation/libs/portal/src/lib/dialog/with-dialogs.mixin.ts

@@ -7,6 +7,7 @@ import { Observable } from "rxjs";
 import { ConfirmationDialogBuilder } from "./confirmation-dialog-builder";
 import { InputDialogBuilder } from "./input-dialog-builder";
 import { GConstructor } from "@modulefederation/common";
+import { DynamicDialogBuilder } from "./dynamic-dialog-builder";
 
 
 export function WithDialogs<T extends GConstructor<AbstractFeature>>(base: T) :GConstructor<Dialogs> &  T  {
@@ -34,6 +35,10 @@ export function WithDialogs<T extends GConstructor<AbstractFeature>>(base: T) :G
             return this.dialogs.confirmationDialog()
         }
 
+        dynamicDialog() : DynamicDialogBuilder {
+            return this.dialogs.dynamicDialog()
+        }
+
         inputDialog() : InputDialogBuilder {
             return this.dialogs.inputDialog()
         }