florian/Cerberus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix modal displaying and add image to application entity.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2021-08-02 09:35:36 +02:00
parent 30d336fed9
commit 555b9d4532
20 changed files with 275 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cerberus/src/app/app.component.html
View File

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

4
cerberus/src/app/app.module.ts
View File

@@ -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,

10
cerberus/src/app/applications/create-application/create-application.component.html
View File

@@ -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>

16
cerberus/src/app/applications/create-application/create-application.component.scss
View File

@@ -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;
}
}
}
}

11
cerberus/src/app/applications/create-application/create-application.component.ts
View File

@@ -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();
}
}

4
cerberus/src/app/applications/status/status.component.ts
View File

@@ -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 {

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

@@ -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);
}
}

8
cerberus/src/app/core/components/modal/modal.component.html Normal file
View File

@@ -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>

63
cerberus/src/app/core/components/modal/modal.component.scss Normal file
View File

@@ -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;
}
}
}

35
cerberus/src/app/core/components/modal/modal.component.ts Normal file
View File

@@ -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);
}
})
}
}

21
cerberus/src/app/core/services/modal.service.ts Normal file
View File

@@ -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();
}
}

2
cerberus/src/app/header/header.component.scss
View File

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

1
cerberus/src/app/header/header.component.ts
View File

@@ -1,6 +1,5 @@
import { Component } from "@angular/core";
@Component({
selector: 'app-header',
templateUrl: './header.component.html',

7
src/main/java/org/takiguchi/cerberus/cerberusapp/controller/ApplicationController.java
View File

@@ -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();
}
}

16
src/main/java/org/takiguchi/cerberus/cerberusapp/model/Application.java
View File

@@ -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);
}
}
}

45
src/main/java/org/takiguchi/cerberus/cerberusapp/model/ApplicationStatus.java Normal file
View File

@@ -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);
}
}
}

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

@@ -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()
);
}
}

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

@@ -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;
}

15
src/main/java/org/takiguchi/cerberus/cerberusapp/service/ApplicationService.java
View File

@@ -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());
}
}

1
src/main/sql/ddl.sql
View File

@@ -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)
);