Load applications from api.

cerberus/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { HeaderComponent } from './header/header.component';
 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';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     CreateApplicationComponent,
     UiKitComponent,
     StatusComponent,
-    ApplicationCardComponent
+    ApplicationCardComponent,
+    AddApplicationButtonComponent
   ],
   imports: [
     RouterModule,

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

@@ -1,3 +1,13 @@
-<div class="application-list">
+<div class="application-list" *ngIf="applications?.length; else noAnyApp">
     <app-application-card *ngFor="let application of applications" [application]="application"></app-application-card>
-</div>
+</div>
+<ng-template #noAnyApp>
+    <div class="no-any-app">
+        <p>
+            There is no any application.
+        </p>
+        <p>
+            Add one by clicking here: <app-add-application-button></app-add-application-button>
+        </p>
+    </div>
+</ng-template>

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

@@ -1,6 +1,22 @@
+@import '../../../colors.scss';
+
 .application-list {
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
+}
+
+.no-any-app {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: $gray-icon-secondary;
+
+    p {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 }

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

@@ -28,5 +28,8 @@ export class StatusComponent implements OnInit {
       image: 'https://gitea.takiguchi.ovh/avatars/6c339db7805f158c21b4eed47758dbb1',
       status: 'started'
     } as Application);
+
+    this._applicationService.getAll()
+        .then(applications => this.applications = applications);
   }
 }

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-add-application-button',
+  template: `
+    <button class="secondaryy" type="button" matTooltip="Add a new application to monitor">
+        <mat-icon>add</mat-icon>
+        Add
+    </button>
+  `
+})
+export class AddApplicationButtonComponent {
+  
+}

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

@@ -11,6 +11,10 @@ export class ApplicationService {
     private _httpClient: HttpClient
   ) {}
 
+  getAll(): Promise<Application[]> {
+    return this._httpClient.get<Application[]>('/api/applications').toPromise();
+  }
+
   add(application: Application): Promise<Application> {
     return this._httpClient.post<Application>('/api/applications', application).toPromise();
   }

cerberus/src/app/header/header.component.html

@@ -1,10 +1,7 @@
 <header>
     <img src="assets/images/logo.png" alt="Cerberus" matTooltip="Cerberus"/>
     <div class="actions">
-        <button class="secondaryy" type="button">
-            <mat-icon>add</mat-icon>
-            Add
-        </button>
+        <app-add-application-button></app-add-application-button>
         <div class="iconed-input">
             <mat-icon>search</mat-icon>
             <input placeholder="Search"/>

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

@@ -23,8 +23,4 @@ header {
         position: absolute;
         right: 1rem;
     }
-}
-
-mat-icon {
-    font-size: 18px;
 }

cerberus/src/styles.scss

@@ -14,9 +14,11 @@ body {
 
   ::selection {
     background: $blue;
+    color: white;
   }
   ::-moz-selection {
     background: $blue;
+    color: white;
   }
 }
 
@@ -184,4 +186,8 @@ mat-icon.mat-icon {
     position: absolute;
     left: 1rem;
   }
+}
+
+mat-icon.mat-icon {
+  font-size: 18px;
 }