Fix modal displaying and add image to application entity.

cerberus/src/app/app.component.html

@@ -2,3 +2,4 @@
 <div class="content">
     <router-outlet></router-outlet>
 </div>
+<app-modal></app-modal>

cerberus/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { StatusComponent } from './applications/status/status.component';
 import { ApplicationCardComponent } from './core/components/application-card/application-card.component';
 import {MatTooltipModule} from '@angular/material/tooltip'; 
 import { AddApplicationButtonComponent } from './core/components/add-application-button/add-application-button.component';
+import { ModalComponent } from './core/components/modal/modal.component';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { AddApplicationButtonComponent } from './core/components/add-application
     UiKitComponent,
     StatusComponent,
     ApplicationCardComponent,
-    AddApplicationButtonComponent
+    AddApplicationButtonComponent,
+    ModalComponent
   ],
   imports: [
     RouterModule,

cerberus/src/app/applications/create-application/create-application.component.html

@@ -1,4 +1,4 @@
-<div class="card">
+<div class="content">
   <h1>Add a new application</h1>
   <form [formGroup]="form" (ngSubmit)="onSubmit()" ngNativeValidate>
     <div class="form-control">
@@ -10,15 +10,19 @@
       <input id="service-name" formControlName="serviceName" placeholder="Enter service name" required/>
     </div>
     <div class="form-control">
-      <label for="service-type">Type:</label>
+      <label for="service-type">Type</label>
       <select id="service-type" formControlName="serviceType" placeholder="Enter service type">
         <option *ngFor="let type of serviceTypes" [value]="type.value">
           {{type.label}}
         </option>
       </select>
     </div>
+    <div class="form-control">
+      <label for="image">Image</label>
+      <input id="image" formControlName="image" placeholder="Enter image url" required/>
+    </div>
     <div class="row action">
-      <button type="button" class="secondary">Cancel</button>
+      <button type="button" class="secondary" (click)="onCancel()">Cancel</button>
       <button type="submit">Save</button>
     </div>
   </form>

cerberus/src/app/applications/create-application/create-application.component.scss

@@ -1,3 +1,17 @@
-.card {
+.content {
+  width: 300px;
   margin: auto;
-}
+
+  form {
+    .action {
+      display: flex;
+      justify-content: space-between;
+
+      button {
+        margin: 0;
+        width: 100px;
+        flex: 0 0;
+      }
+    }
+  }
+}

cerberus/src/app/applications/create-application/create-application.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Application } from 'src/app/core/entities/Application';
 import { ReferentialData } from 'src/app/core/entities/ReferentialData';
 import { ApplicationService } from 'src/app/core/services/application.service';
+import { ModalService } from 'src/app/core/services/modal.service';
 import { ReferentialDataService } from 'src/app/core/services/referential-data.service';
 
 @Component({
@@ -14,14 +15,16 @@ export class CreateApplicationComponent implements OnInit {
   form: FormGroup = this._formBuilder.group({
     name: [undefined, Validators.required],
     serviceName: [undefined, Validators.required],
-    serviceType: [undefined, Validators.required]
+    serviceType: [undefined, Validators.required],
+    image: [undefined, Validators.required]
   });
   serviceTypes: ReferentialData[] = [];
 
   constructor(
     private _formBuilder: FormBuilder,
     private _referentialDataService: ReferentialDataService,
-    private _applicationService: ApplicationService
+    private _applicationService: ApplicationService,
+    private _modalService: ModalService
   ) { }
 
   ngOnInit(): void {
@@ -40,4 +43,8 @@ export class CreateApplicationComponent implements OnInit {
       console.error('Form is invalid');
     }
   }
+
+  onCancel(): void {
+    this._modalService.close();
+  }
 }

cerberus/src/app/applications/status/status.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Application } from 'src/app/core/entities/Application';
 import { ApplicationService } from 'src/app/core/services/application.service';
+import { ModalService } from 'src/app/core/services/modal.service';
 
 @Component({
   selector: 'app-status',
@@ -11,7 +12,8 @@ export class StatusComponent implements OnInit {
   applications: Application[] = [];
 
   constructor(
-    private _applicationService: ApplicationService
+    private _applicationService: ApplicationService,
+    private _modalService: ModalService
   ) {}
 
   ngOnInit(): void {

cerberus/src/app/core/components/add-application-button/add-application-button.component.ts

@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { CreateApplicationComponent } from 'src/app/applications/create-application/create-application.component';
+import { ModalService } from '../../services/modal.service';
 
 
 @Component({
   selector: 'app-add-application-button',
   template: `
-    <button class="secondaryy" type="button" matTooltip="Add a new application to monitor">
+    <button type="button" (click)="onClick()" matTooltip="Add a new application to monitor">
         <mat-icon>add</mat-icon>
         Add
     </button>
   `
 })
 export class AddApplicationButtonComponent {
-  
+  constructor(
+    private _modalService: ModalService
+  ) {}
+
+  onClick(): void {
+    this._modalService.open(CreateApplicationComponent);
+  }
 }

cerberus/src/app/core/components/modal/modal.component.html

@@ -0,0 +1,8 @@
+<div id="modal-container" [class]="this.displayed ? 'displayed' : 'hidden'">
+    <div id="overlay"></div>
+    <div id="modal-frame" #modalFrame>
+        <div id="modal-window">
+            <div #modalContent></div>
+        </div>
+    </div>
+</div>

cerberus/src/app/core/components/modal/modal.component.scss

@@ -0,0 +1,63 @@
+#modal-container {
+    &.hidden {
+        #overlay {
+            display: none;
+        }
+
+        #modal-frame {
+            height: 0;
+
+            #modal-window {
+                top: -500px;
+            }
+        }
+    }
+
+    &.displayed {
+        display: flex;
+
+        #overlay {
+            display: flex;
+        }
+
+        #modal-frame {
+            #modal-window {
+                top: 58px;
+            }
+        }
+    }
+
+    #overlay {
+        position: fixed;
+        top: 56px;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+
+    #modal-frame {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 101;
+        display: flex;
+        justify-content: center;
+        transition: height 1s ease;
+
+        #modal-window {
+            position: absolute;
+            background-color: #f6f6f6;
+            z-index: 102;
+            padding: 1rem;
+            border: 1px solid #bfbfbf;
+            border-top: none;
+            min-width: 600px;
+            max-height: 500px;
+            box-shadow: inset 0px 5px 5px -3px rgba(0,0,0,.2), 0px 5px 10px 1px rgba(0,0,0,.2);
+            transition: top 1s ease;
+        }
+    }
+}

cerberus/src/app/core/components/modal/modal.component.ts

@@ -0,0 +1,35 @@
+import { Component, ComponentFactoryResolver, ElementRef, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/core";
+import { ModalService } from "../../services/modal.service";
+
+@Component({
+    selector: 'app-modal',
+    templateUrl: './modal.component.html',
+    styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent implements OnInit {
+    displayed: boolean = false;
+    modalContentClass: Type<unknown> | undefined;
+    @ViewChild('modalFrame', { static: true }) modalFrame: ElementRef<HTMLDivElement> | undefined;
+    @ViewChild('modalContent', { read: ViewContainerRef }) modalContent: ViewContainerRef | undefined;
+
+    constructor(
+        private _componentFactoryResolver: ComponentFactoryResolver,
+        private _modalService: ModalService
+    ) {}
+
+    ngOnInit(): void {
+        this._modalService.modalContent.subscribe(modalContentClass => {
+            if (!modalContentClass) {
+                this.displayed = false;
+                window.setTimeout(() => {
+                    this.modalContent?.detach();
+                }, 1000);
+            } else {
+                this.displayed = true;
+                this.modalContent?.detach();
+                const componentFactory = this._componentFactoryResolver.resolveComponentFactory(modalContentClass);
+                this.modalContent?.createComponent<unknown>(componentFactory);
+            }
+        })
+    }
+}

cerberus/src/app/core/services/modal.service.ts

@@ -0,0 +1,21 @@
+import { Injectable, Type } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ModalService {
+    _modalContent: BehaviorSubject<Type<unknown> | undefined> = new BehaviorSubject<Type<unknown> | undefined>(undefined);
+
+    open(componentClass: Type<unknown>): void {
+        this._modalContent.next(componentClass);
+    }
+
+    close(): void {
+        this._modalContent.next(undefined);
+    }
+
+    get modalContent(): Observable<Type<unknown> | undefined> {
+        return this._modalContent.asObservable();
+    }
+}

cerberus/src/app/header/header.component.scss

@@ -11,6 +11,8 @@ header {
     height: 56px;
     justify-content: center;
     align-items: center;
+    border: 1px solid #bfbfbf;
+    z-index: 102;
 
     img {
         width: 42px;

cerberus/src/app/header/header.component.ts

@@ -1,11 +1,10 @@
 import { Component } from "@angular/core";
 
-
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
-
+    
 }