added last downtime log (closes #55)

added uptime statistics (closes #56)
added german translations (closes #57)

src/app/uptime/uptime.component.html

@@ -0,0 +1,70 @@
+<div *ngIf="uptime$ | async as uptime; else loadingOrError">
+  <h2 class="m-0">{{'uptime.title' | translate}}</h2>
+
+  <div class="row m-0">
+    <div class="col-6 col-md-3 p-0">
+      <div class="my-4 px-4 border-right">
+        <h1 class="m-0">{{uptime.hours24?.toFixed(2)}}%</h1>
+        {{'uptime.last24hours' | translate}}
+      </div>
+    </div>
+    <div class="col-6 col-md-3 p-0">
+      <div class="my-4 px-4 border-md-right">
+        <h1 class="m-0">{{uptime.days7?.toFixed(2)}}%</h1>
+        {{'uptime.last7days' | translate}}
+      </div>
+    </div>
+    <div class="col-6 col-md-3 p-0">
+      <div class="my-4 px-4 border-right">
+        <h1 class="m-0">{{uptime.days30?.toFixed(2)}}%</h1>
+        {{'uptime.last30days' | translate}}
+      </div>
+    </div>
+    <div class="col-6 col-md-3 p-0">
+      <div class="my-4 px-4">
+        <h1 class="m-0">{{uptime.days90?.toFixed(2)}}%</h1>
+        {{'uptime.last90days' | translate}}
+      </div>
+    </div>
+  </div>
+  <div class="d-flex mb-4" style="height: 2rem">
+    <ng-container *ngFor="let day of uptime.days; index as index">
+      <div class="flex-grow-1" style="margin: 1px"
+           [class.d-none]="index < 60" [class.d-lg-block]="index < 30" [class.d-sm-block]="index >= 30 && index < 60"
+           [class.bg-operational]="day.uptime >= 99" [class.bg-maintenance]="day.uptime < 99 && day.uptime >= 95"
+           [class.bg-outage]="day.uptime < 95"
+           matTooltip="{{day.date | dayjs:'format':'l'}}&#13;{{day.uptime.toFixed(2)}}%" matTooltipPosition="above"
+           [matTooltipShowDelay]="0" [matTooltipHideDelay]="0" matTooltipClass="multiline-tooltip"></div>
+    </ng-container>
+  </div>
+
+  <div *ngIf="uptime.events.length">
+    <h2 class="m-0">{{'recent-events.title' | translate}}</h2>
+    <mat-list>
+      <ng-container *ngFor="let event of uptime.events; index as index; last as last">
+        <mat-list-item *ngIf="index < 4 || expanded">
+          <i mat-list-icon [class]="stateClasses[event.state]"></i>
+          <p matLine>
+            <span *ngIf="event.state === 'operational'"
+                  class="text-truncate">{{'recent-events.operational' | translate}}</span>
+            <span *ngIf="event.state === 'maintenance'"
+                  class="text-truncate">{{'recent-events.maintenance' | translate: {'time': event.date | dayjs:'to':uptime.events[index - 1]?.date} }}</span>
+            <span *ngIf="event.state === 'outage'"
+                  class="text-truncate">{{'recent-events.outage' | translate:{'time': event.date | dayjs:'to':uptime.events[index - 1]?.date} }}</span>
+          </p>
+          <div matLine><small matTooltip="{{event.date | dayjs:'format':'LLL'}}" matTooltipPosition="above"
+                              [matTooltipShowDelay]="0" [matTooltipHideDelay]="0">{{event.date | dayjs:'from'}}</small>
+          </div>
+          <mat-divider [inset]="true"
+                       *ngIf="!(last || uptime.events.length > 4 && !expanded && index >= 3)"></mat-divider>
+        </mat-list-item>
+      </ng-container>
+    </mat-list>
+    <a href="#" class="mt-3" *ngIf="uptime.events.length > 4"
+       (click)="toggleExpanded(); $event.preventDefault()">{{(expanded ? 'show-less' : 'show-all') | translate}}</a>
+  </div>
+</div>
+<ng-template #loadingOrError>
+  <div *ngIf="error">{{error}}</div>
+  <div *ngIf="!error">{{'loading' | translate}}</div>
+</ng-template>

src/app/uptime/uptime.component.ts

@@ -0,0 +1,52 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {UptimeStatus} from '../_data/data';
+import {ApiService} from '../_service/api.service';
+import {catchError} from 'rxjs/operators';
+import {StorageService} from '../_service/storage.service';
+
+@Component({
+  selector: 'app-uptime',
+  templateUrl: './uptime.component.html',
+  styleUrls: ['./uptime.component.scss']
+})
+export class UptimeComponent implements OnInit {
+  @Input() id: string;
+  readonly stateClasses = {
+    'operational': 'fas fa-fw fa-heart operational mr-2',
+    'outage': 'fas fa-fw fa-heart-broken outage mr-2',
+    'maintenance': 'fas fa-fw fa-heartbeat maintenance mr-2'
+  };
+  uptime$: Observable<UptimeStatus>;
+  error: string;
+  expanded: boolean;
+
+  constructor(private api: ApiService, private storage: StorageService) {
+  }
+
+  ngOnInit(): void {
+    if (!this.id) {
+      throw new Error('please pass a service id!');
+    }
+    let value = this.storage.getValue('show-events-' + this.id);
+    console.log(value, typeof value);
+    if (typeof value !== 'boolean') {
+      value = false;
+    }
+    this.expanded = value;
+    this.uptime$ = this.api.getServiceUptime(this.id)
+      .pipe(catchError(err => {
+        if (err.status === 404) {
+          this.error = 'No uptime information available.';
+        } else {
+          this.error = 'An unexpected error occurred: ' + err.error;
+        }
+        return of(null);
+      }));
+  }
+
+  toggleExpanded(): void {
+    this.expanded = !this.expanded;
+    this.storage.setValue('show-events-' + this.id, this.expanded);
+  }
+}