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 {
-
+    
 }

src/main/java/org/takiguchi/cerberus/cerberusapp/controller/ApplicationController.java

@@ -3,6 +3,7 @@ package org.takiguchi.cerberus.cerberusapp.controller;
 import org.springframework.http.HttpStatus;
 import org.springframework.web.bind.annotation.*;
 import org.takiguchi.cerberus.cerberusapp.model.Application;
+import org.takiguchi.cerberus.cerberusapp.model.ApplicationStatus;
 import org.takiguchi.cerberus.cerberusapp.model.ServiceStatus;
 import org.takiguchi.cerberus.cerberusapp.service.ApplicationService;
 
@@ -37,6 +38,7 @@ public class ApplicationController {
                 .withName(application.getName())
                 .withServiceName(application.getServiceName())
                 .withServiceType(application.getServiceType())
+                .withImage(application.getImage())
                 .build();
         return service.add(applicationToAdd);
     }
@@ -80,4 +82,9 @@ public class ApplicationController {
     public void restart(@PathVariable("applicationId") UUID applicationId) {
         service.restart(applicationId);
     }
+
+    @GetMapping("/status")
+    public List<ApplicationStatus> getAllApplicationStatus() {
+        return service.checkAllStatus();
+    }
 }

src/main/java/org/takiguchi/cerberus/cerberusapp/model/Application.java

@@ -9,16 +9,18 @@ public class Application {
     /** The technical service name, like a docker container name or a system V service name. */
     private final String serviceName;
     private final ServiceType serviceType;
+    private final String image;
 
     public static Builder anApplication() {
         return new Builder();
     }
 
-    private Application(UUID id, String name, String serviceName, ServiceType serviceType) {
+    private Application(UUID id, String name, String serviceName, ServiceType serviceType, String image) {
         this.id = id;
         this.name = name;
         this.serviceName = serviceName;
         this.serviceType = serviceType;
+        this.image = image;
     }
 
     public UUID getId() {
@@ -37,11 +39,16 @@ public class Application {
         return serviceType;
     }
 
+    public String getImage() {
+        return image;
+    }
+
     public static class Builder {
         private UUID id;
         private String name;
         private String serviceName;
         private ServiceType serviceType;
+        private String image;
 
         private Builder() {
         }
@@ -66,8 +73,13 @@ public class Application {
             return this;
         }
 
+        public Builder withImage(String image) {
+            this.image = image;
+            return this;
+        }
+
         public Application build() {
-            return new Application(id, name, serviceName, serviceType);
+            return new Application(id, name, serviceName, serviceType, image);
         }
     }
 }

src/main/java/org/takiguchi/cerberus/cerberusapp/model/ApplicationStatus.java

@@ -0,0 +1,45 @@
+package org.takiguchi.cerberus.cerberusapp.model;
+
+public class ApplicationStatus {
+    private final Application application;
+    private final ServiceStatus status;
+
+    public static Builder anApplicationStatus() {
+        return new Builder();
+    }
+
+    public ApplicationStatus(Application application, ServiceStatus status) {
+        this.application = application;
+        this.status = status;
+    }
+
+    public Application getApplication() {
+        return application;
+    }
+
+    public ServiceStatus getStatus() {
+        return status;
+    }
+
+    public static class Builder {
+        private Application application;
+        private ServiceStatus status;
+
+        private Builder() {
+        }
+
+        public Builder withApplication(Application application) {
+            this.application = application;
+            return this;
+        }
+
+        public Builder withStatus(ServiceStatus status) {
+            this.status = status;
+            return this;
+        }
+
+        public ApplicationStatus build() {
+            return new ApplicationStatus(application, status);
+        }
+    }
+}

src/main/java/org/takiguchi/cerberus/cerberusapp/persistence/mapper/ApplicationEntityMapper.java

@@ -15,6 +15,7 @@ public class ApplicationEntityMapper {
                 .withName(entity.getName())
                 .withServiceName(entity.getServiceName())
                 .withServiceType(entity.getServiceType())
+                .withImage(entity.getImage())
                 .build();
     }
 
@@ -23,7 +24,8 @@ public class ApplicationEntityMapper {
                 application.getId(),
                 application.getName(),
                 application.getServiceName(),
-                application.getServiceType()
+                application.getServiceType(),
+                application.getImage()
         );
     }
 }

src/main/java/org/takiguchi/cerberus/cerberusapp/persistence/model/ApplicationEntity.java

@@ -1,13 +1,10 @@
 package org.takiguchi.cerberus.cerberusapp.persistence.model;
 
-import com.fasterxml.jackson.annotation.JsonView;
 import org.takiguchi.cerberus.cerberusapp.model.ServiceType;
 
 import javax.persistence.*;
 import java.util.UUID;
 
-import static javax.persistence.EnumType.ORDINAL;
-
 @Entity
 @Table(name = "application")
 public class ApplicationEntity {
@@ -18,15 +15,17 @@ public class ApplicationEntity {
     private String serviceName;
     @Enumerated
     private ServiceType serviceType;
+    private String image;
 
     public ApplicationEntity() {
     }
 
-    public ApplicationEntity(UUID id, String name, String serviceName, ServiceType serviceType) {
+    public ApplicationEntity(UUID id, String name, String serviceName, ServiceType serviceType, String image) {
         this.id = id;
         this.name = name;
         this.serviceName = serviceName;
         this.serviceType = serviceType;
+        this.image = image;
     }
 
     public UUID getId() {
@@ -57,6 +56,14 @@ public class ApplicationEntity {
         return serviceType;
     }
 
+    public String getImage() {
+        return image;
+    }
+
+    public void setImage(String image) {
+        this.image = image;
+    }
+
     public void setServiceType(ServiceType serviceType) {
         this.serviceType = serviceType;
     }

src/main/java/org/takiguchi/cerberus/cerberusapp/service/ApplicationService.java

@@ -3,6 +3,7 @@ package org.takiguchi.cerberus.cerberusapp.service;
 import org.springframework.stereotype.Service;
 import org.takiguchi.cerberus.cerberusapp.exception.NotFoundException;
 import org.takiguchi.cerberus.cerberusapp.model.Application;
+import org.takiguchi.cerberus.cerberusapp.model.ApplicationStatus;
 import org.takiguchi.cerberus.cerberusapp.model.ServiceStatus;
 import org.takiguchi.cerberus.cerberusapp.service.servicemanager.ServiceManagerProvider;
 import org.takiguchi.cerberus.cerberusapp.service.validator.ApplicationValidator;
@@ -10,8 +11,10 @@ import org.takiguchi.cerberus.cerberusapp.service.validator.ApplicationValidator
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
+import java.util.stream.Collectors;
 
 import static org.takiguchi.cerberus.cerberusapp.model.Application.anApplication;
+import static org.takiguchi.cerberus.cerberusapp.model.ApplicationStatus.anApplicationStatus;
 
 @Service
 public class ApplicationService {
@@ -94,4 +97,16 @@ public class ApplicationService {
                         NotFoundException::new
                 );
     }
+
+    public List<ApplicationStatus> checkAllStatus() {
+        return getAll().stream()
+                .map(application -> {
+                    ServiceStatus status = checkStatus(application.getId());
+                    return anApplicationStatus()
+                            .withApplication(application)
+                            .withStatus(status)
+                            .build();
+                })
+                .collect(Collectors.toList());
+    }
 }

src/main/sql/ddl.sql

@@ -5,5 +5,6 @@ CREATE TABLE IF NOT EXISTS application (
 	name VARCHAR NOT NULL,
 	service_name VARCHAR NOT NULL,
 	service_type SMALLINT NOT NULL,
+	image VARCHAR NOT NULL,
 	CONSTRAINT application_pk PRIMARY KEY (id)
 );