samuel-p/universal-statuspage
Archived
1
0
Fork 0
Code Issues 3 Pull requests Releases Packages Wiki Activity

added last downtime log (closes #55)

Browse source 
added uptime statistics (closes #56)
added german translations (closes #57)
This commit is contained in:
Samuel Philipp 2021-01-10 16:06:18 +01:00
parent acb39f6b2a
commit e9599373ec
27 changed files with 819 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/app/status/status.component.html
View file

@ -1,25 +1,38 @@
<mat-accordion [multi]="true">
<mat-expansion-panel *ngFor="let group of groups" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<i [class]="stateClasses[group.state]"></i>
<a *ngIf="group.url" class="name" [href]="group.url" target="_blank" (click)="$event.stopPropagation()">{{group.name}}</a>
<span *ngIf="!group.url">{{group.name}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="py-3" *ngFor="let group of groups">
<h2>
<i [class]="stateClasses[group.state]"></i>
<a *ngIf="group.url" [href]="group.url" target="_blank"
(click)="$event.stopPropagation()">{{group.name}}</a>
<span *ngIf="!group.url">{{group.name}}</span>
</h2>
<mat-accordion [multi]="true">
<mat-expansion-panel *ngFor="let service of group.services" [hideToggle]="true"
[(expanded)]="expandedCache[group.id + '-' + service.id]"
(afterExpand)="saveExpandedCache()" (afterCollapse)="saveExpandedCache()">
<mat-expansion-panel-header>
<mat-panel-title>
<div matLine class="w-100 d-flex">
<i [class]="stateClasses[service.state]"></i>
<a *ngIf="service.url" class="text-truncate" [href]="service.url" target="_blank"
(click)="$event.stopPropagation()">{{service.name}}</a>
<span *ngIf="!service.url" class="text-truncate">{{service.name}}</span>
<span class="ml-2 font-weight-normal d-none d-sm-block" [class.operational]="service.uptime >= 99"
[class.maintenance]="service.uptime < 99 && service.uptime >= 95"
[class.outage]="service.uptime < 95">{{service.uptime?.toFixed(2)}}%</span>
<span class="flex-grow-1"></span>
<span class="{{service.state}}">{{'state.' + service.state | translate}}</span>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
<a *ngFor="let service of group.services; last as last" mat-list-item [href]="service.url || group.url || '#'" target="_blank">
<div matLine class="d-flex">
<i [class]="stateClasses[service.state]"></i>
<span class="text-truncate">{{service.name}}</span>
<span class="flex-grow-1"></span>
<span class="text-capitalize {{service.state}}">{{service.state}}</span>
</div>
<mat-divider [inset]="true" *ngIf="!last"></mat-divider>
</a>
</mat-list>
</mat-expansion-panel>
</mat-accordion>
<ng-template matExpansionPanelContent>
<app-uptime [id]="service.id"></app-uptime>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="text-right mt-3"><small>Last updated {{lastUpdated | date:'HH:mm:ss'}}</small></div>
<div class="text-right pb-3"><small matTooltip="{{lastUpdated | dayjs:'format':'LTS'}}" matTooltipPosition="above"
[matTooltipShowDelay]="0"
[matTooltipHideDelay]="0">{{'last-updated' | translate:{'time': lastUpdated | dayjs:'from'} }}</small>
</div>

18
src/app/status/status.component.scss
View file

@ -1,23 +1,5 @@
.operational {
color: #7ed321;
}
.outage {
color: #ff6f6f;
}
.maintenance {
color: #f7ca18;
}
a {
text-decoration: none;
outline: none;
color: #ffffff;
&:hover.name, &:hover .name {
text-decoration: underline;
}
}
mat-panel-title {

25
src/app/status/status.component.spec.ts
View file

@ -1,25 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { StatusComponent } from './status.component';
describe('StatusComponent', () => {
let component: StatusComponent;
let fixture: ComponentFixture<StatusComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ StatusComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StatusComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

32
src/app/status/status.component.ts
View file

@ -1,11 +1,10 @@
import {Component, Inject, OnDestroy, OnInit, PLATFORM_ID} from '@angular/core';
import {ApiService} from "../_service/api.service";
import {Group} from "../_data/data";
import {interval, Subject} from "rxjs";
import {flatMap, startWith, takeUntil} from "rxjs/operators";
import {DOCUMENT, isPlatformBrowser} from "@angular/common";
// import {DOCUMENT} from "@angular/common";
import {ApiService} from '../_service/api.service';
import {Group} from '../_data/data';
import {interval, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {DOCUMENT, isPlatformBrowser} from '@angular/common';
import {StorageService} from '../_service/storage.service';
@Component({
selector: 'app-status',
@ -14,17 +13,24 @@ import {DOCUMENT, isPlatformBrowser} from "@angular/common";
})
export class StatusComponent implements OnInit, OnDestroy {
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'
'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'
};
destroyed$ = new Subject();
groups: Group[];
lastUpdated: Date;
expandedCache: { [id: string]: boolean };
constructor(private api: ApiService, @Inject(PLATFORM_ID) private platformId: Object,
constructor(private api: ApiService, private storage: StorageService,
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(DOCUMENT) private document: Document) {
let cache = this.storage.getValue('expanded');
if (typeof cache !== 'object') {
cache = null;
}
this.expandedCache = cache || {};
}
ngOnInit(): void {
@ -49,4 +55,8 @@ export class StatusComponent implements OnInit, OnDestroy {
this.destroyed$.next();
this.destroyed$.complete();
}
saveExpandedCache() {
this.storage.setValue('expanded', this.expandedCache);
}
}