.gitignore

@@ -49,4 +49,3 @@ Thumbs.db
 # custom
 config.json
 cache.json
-uptime.json

angular.json

@@ -17,14 +17,12 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": ["dayjs/locale/de"],
             "outputPath": "dist/universal-statuspage/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
-            "outputHashing": "media",
             "assets": [
               "src/favicon.png",
               "src/favicon-operational.ico",

config.json

@@ -2,44 +2,22 @@
   "authToken": "test",
   "title": "sp-status",
   "description": "Services hosted by sp-codes",
-  "translations": {
-    "de": {
-      "title": "sp-status",
-      "description": "Services von sp-codes bereitgestellt"
-    }
-  },
   "servicesPath": "$.alerts.*",
   "idPath": "$.labels.status_service",
   "statePath": "$.status",
   "stateValues": {
     "operational": ["ok", "resolved"],
-    "maintenance": ["maintenance" ,"paused"]
+    "maintenance": ["paused"]
   },
   "groups": [
     {
-      "id": "group",
+      "id": "test",
-      "name": "My Group",
+      "name": "Test",
       "url": "http://sp-codes.de",
       "services": [
         {
           "id": "test",
-          "name": "My Service",
+          "name": "test",
-          "url": "http://sp-codes.de",
-          "statePath": "$.state"
-        }, {
-          "id": "test3",
-          "name": "Test3",
-          "statePath": "$.state"
-        }
-      ]
-    }, {
-      "id": "group2",
-      "name": "Group2",
-      "services": [
-        {
-          "id": "test2",
-          "name": "Test2",
-          "url": "http://sp-codes.de",
           "statePath": "$.state"
         }
       ]

package.json

@@ -15,40 +15,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.0.7",
+    "@angular/animations": "~11.0.2",
-    "@angular/cdk": "^11.0.3",
+    "@angular/cdk": "^11.0.1",
-    "@angular/common": "~11.0.7",
+    "@angular/common": "~11.0.2",
-    "@angular/compiler": "~11.0.7",
+    "@angular/compiler": "~11.0.2",
-    "@angular/core": "~11.0.7",
+    "@angular/core": "~11.0.2",
-    "@angular/forms": "~11.0.7",
+    "@angular/forms": "~11.0.2",
-    "@angular/material": "^11.0.3",
+    "@angular/material": "^11.0.1",
-    "@angular/platform-browser": "~11.0.7",
+    "@angular/platform-browser": "~11.0.2",
-    "@angular/platform-browser-dynamic": "~11.0.7",
+    "@angular/platform-browser-dynamic": "~11.0.2",
-    "@angular/platform-server": "~11.0.7",
+    "@angular/platform-server": "~11.0.2",
-    "@angular/router": "~11.0.7",
+    "@angular/router": "~11.0.2",
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@nguniversal/express-engine": "^11.0.1",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "@types/node-cron": "^2.0.3",
     "bootstrap": "^4.5.3",
-    "cron": "^1.8.2",
-    "dayjs": "^1.10.2",
     "express": "^4.17.1",
-    "flag-icon-css": "^3.5.0",
     "jsonpath-plus": "^4.0.0",
-    "node-cron": "^2.0.3",
     "roboto-fontface": "^0.10.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",
-    "tz-offset": "0.0.2",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.6",
+    "@angular-devkit/build-angular": "~0.1100.2",
-    "@angular/cli": "~11.0.6",
+    "@angular/cli": "~11.0.2",
-    "@angular/compiler-cli": "~11.0.7",
+    "@angular/compiler-cli": "~11.0.2",
-    "@angular/language-service": "~11.0.7",
+    "@angular/language-service": "~11.0.2",
     "@nguniversal/builders": "^11.0.1",
     "@types/express": "^4.17.9",
     "@types/node": "^14.0.23",

server.ts

@@ -1,6 +1,6 @@
 import 'zone.js/dist/zone-node';
 
-import {ngExpressEngine, RenderOptions} from '@nguniversal/express-engine';
+import {ngExpressEngine} from '@nguniversal/express-engine';
 import * as express from 'express';
 import {join} from 'path';
 
@@ -17,26 +17,14 @@ export function app() {
   const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
 
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  // server.engine('html', ngExpressEngine({
+  server.engine('html', ngExpressEngine({
-  //   bootstrap: AppServerModule,
-  // }));
-  server.engine('html', (path: string, options: Readonly<RenderOptions>, callback) => {
-    const engine = ngExpressEngine({
     bootstrap: AppServerModule,
-      providers: [
+  }));
-        {provide: 'REQUEST', useFactory: () => options.req, deps: []}
-      ]
-    });
-    engine(path, options, callback);
-  });
 
   server.set('view engine', 'html');
   server.set('views', distFolder);
 
   server.use('/api', api);
-  server.get('/favicon.ico', (req, res) => {
-    return res.sendStatus(404);
-  });
 
   // Serve static files from /browser
   server.get('*.*', express.static(distFolder, {

src/app/_data/data.ts

@@ -18,31 +18,9 @@ export interface Service {
   name: string;
   url?: string;
   state: State;
-  uptime: number;
 }
 
 export interface MetaInfo {
   title: string;
   description: string;
-  translations?: {
-    [lang: string]: {
-      title: string;
-      description: string;
-    }
-  }
-}
-
-export interface UptimeStatus {
-  hours24: number;
-  days7: number;
-  days30: number;
-  days90: number;
-  days: {
-    date: Date;
-    uptime: number;
-  }[];
-  events: {
-    state: State;
-    date: Date;
-  }[];
 }

src/app/_pipe/dayjs.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { DayjsPipe } from './dayjs.pipe';
-
-describe('DayjsPipe', () => {
-  it('create an instance', () => {
-    const pipe = new DayjsPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src/app/_pipe/dayjs.pipe.ts

@@ -1,36 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import * as dayjs from 'dayjs';
-import * as utc from 'dayjs/plugin/utc';
-import * as relativeTime from 'dayjs/plugin/relativeTime';
-import * as localizedFormat from 'dayjs/plugin/localizedFormat';
-import {TranslateService} from '@ngx-translate/core';
-import 'dayjs/locale/de';
-
-dayjs.extend(utc);
-dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
-
-@Pipe({
-  name: 'dayjs',
-  pure: false
-})
-export class DayjsPipe implements PipeTransform {
-  constructor(private translate: TranslateService) {
-  }
-
-  transform(value: string | Date, method: string, ...args: any[]): string {
-    const date = dayjs.utc(value);
-    switch (method) {
-      case 'to':
-        const to = args[0] ? dayjs.utc(args[0]) : dayjs.utc();
-        const suffix = args.length > 1 && args[1] === true;
-        return date.locale(this.translate.currentLang).to(to, !suffix);
-      case 'from':
-        const from = args[0] ? dayjs.utc(args[0]) : dayjs.utc();
-        return date.locale(this.translate.currentLang).from(from);
-      case 'format':
-        return date.local().locale(this.translate.currentLang).format(args[0]);
-    }
-    throw new Error('please pass a method to use!');
-  }
-}

src/app/_service/api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_service/api.service.ts

@@ -1,9 +1,9 @@
 import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
-import {Observable, of} from 'rxjs';
+import {Observable} from "rxjs";
-import {CurrentStatus, MetaInfo, UptimeStatus} from '../_data/data';
+import {CurrentStatus, MetaInfo} from "../_data/data";
-import {HttpClient} from '@angular/common/http';
+import {HttpClient} from "@angular/common/http";
-import {environment} from '../../environments/environment';
+import {environment} from "../../environments/environment";
-import {isPlatformBrowser} from '@angular/common';
+import {isPlatformBrowser} from "@angular/common";
 
 @Injectable({
   providedIn: 'root'
@@ -16,14 +16,10 @@ export class ApiService {
   }
 
   public getServiceStates(): Observable<CurrentStatus> {
-    return this.http.get<CurrentStatus>(this.api + '/status');
+    return this.http.get<CurrentStatus>(this.api+ '/status');
-  }
-
-  public getServiceUptime(id: string): Observable<UptimeStatus> {
-    return this.http.get<UptimeStatus>(this.api + '/uptime', {params: {service: id}});
   }
 
   public getMetaInfo(): Observable<MetaInfo> {
-    return this.http.get<MetaInfo>(this.api + '/info');
+    return this.http.get<MetaInfo>(this.api+ '/info');
   }
 }

src/app/_service/storage.service.ts

@@ -1,30 +0,0 @@
-import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
-import {isPlatformBrowser} from '@angular/common';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class StorageService {
-  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
-  }
-
-  getValue(key: string): any {
-    if (!isPlatformBrowser(this.platformId)) {
-      return null;
-    }
-    try {
-      return JSON.parse(localStorage.getItem(key));
-    } catch (e) {
-      return null;
-    }
-  }
-
-  setValue(key: string, value: any): void {
-    if (isPlatformBrowser(this.platformId)) {
-      try {
-        localStorage.setItem(key, JSON.stringify(value));
-      } catch (e) {
-      }
-    }
-  }
-}

src/app/app.component.html

@@ -1,22 +1,7 @@
 <div class="box">
   <header class="container pt-4">
-    <div class="d-flex">
+    <h1 *ngIf="title && title.length">{{title}}</h1>
-      <div *ngIf="title && title.length">
+    <h3 *ngIf="description && description.length">{{description}}</h3>
-        <h1>{{translations[getLanguage()]?.title || title}}</h1>
-      </div>
-      <div class="flex-grow-1"></div>
-      <div class="language-selection">
-        <a href="#" class="mr-2" (click)="setLanguage('en'); $event.preventDefault();">
-          <span class="flag-icon flag-icon-us"></span>
-        </a>
-        <a href="#" (click)="setLanguage('de'); $event.preventDefault();">
-          <span class="flag-icon flag-icon-de"></span>
-        </a>
-      </div>
-    </div>
-    <div *ngIf="description && description.length">
-      <h3>{{translations[getLanguage()]?.description || description}}</h3>
-    </div>
   </header>
 
   <main class="container">

src/app/app.component.scss

@@ -19,6 +19,12 @@ footer {
   flex-shrink: 0;
 }
 
-.language-selection {
+a {
-  font-size: 1.3em;
+  color: #cccccc;
+  text-decoration: none;
+
+  &:hover {
+    color: #ffffff;
+    text-decoration: underline;
+  }
 }

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'universal-statuspage'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('universal-statuspage');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('universal-statuspage app is running!');
+  });
+});

src/app/app.component.ts

@@ -1,9 +1,8 @@
-import {Component, Inject, Injector, OnInit, PLATFORM_ID} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
-import {ApiService} from './_service/api.service';
+import {ApiService} from "./_service/api.service";
-import {Title} from '@angular/platform-browser';
+import {Observable} from "rxjs";
-import {TranslateService} from '@ngx-translate/core';
+import {MetaInfo} from "./_data/data";
-import {StorageService} from './_service/storage.service';
+import {Title} from "@angular/platform-browser";
-import {isPlatformServer} from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -13,42 +12,15 @@ import {isPlatformServer} from '@angular/common';
 export class AppComponent implements OnInit {
   title: string;
   description: string;
-  translations: { [lang: string]: { title: string; description: string } };
 
-  private supportedLanguages = ['en', 'de'];
+  constructor(private api: ApiService, private htmlTitle: Title) {
-
-  constructor(private translate: TranslateService, private api: ApiService,
-              private storage: StorageService, private htmlTitle: Title,
-              private injector: Injector, @Inject(PLATFORM_ID) private platformId: Object) {
-    this.translate.setDefaultLang('en');
-    if (isPlatformServer(platformId)) {
-      const request = this.injector.get<any>(<any> 'REQUEST');
-      const requestLanguage = request.acceptsLanguages(this.supportedLanguages) || 'en';
-      this.translate.use(requestLanguage);
-      return;
-    }
-    let language = this.storage.getValue('language') || this.translate.getBrowserLang();
-    if (language ! in this.supportedLanguages) {
-      language = 'en';
-    }
-    translate.use(language);
   }
 
   ngOnInit(): void {
     this.api.getMetaInfo().subscribe(info => {
       this.title = info.title;
       this.description = info.description;
-      this.translations = info.translations;
       this.htmlTitle.setTitle(this.title);
-    });
+    })
-  }
-
-  getLanguage(): string {
-    return this.translate.currentLang;
-  }
-
-  setLanguage(language: string): void {
-    this.translate.use(language);
-    this.storage.setValue('language', language);
   }
 }

src/app/app.module.ts

@@ -1,56 +1,26 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule, PLATFORM_ID} from '@angular/core';
+import {NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {StatusComponent} from './status/status.component';
-import {MatExpansionModule} from '@angular/material/expansion';
+import {MatExpansionModule} from "@angular/material/expansion";
-import {MatListModule} from '@angular/material/list';
+import {MatListModule} from "@angular/material/list";
-import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {HttpClientModule} from "@angular/common/http";
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {UptimeComponent} from './uptime/uptime.component';
-import {DayjsPipe} from './_pipe/dayjs.pipe';
-import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
-import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import {isPlatformServer} from '@angular/common';
-import {from, Observable} from 'rxjs';
-
-export class TranslateUniversalLoader extends TranslateLoader {
-  getTranslation(lang: string): Observable<any> {
-    return from(import(`../assets/i18n/${lang}.json`));
-  }
-}
-
-export function UniversalLoaderFactory(http: HttpClient, plattformId: Object) {
-  if (isPlatformServer(plattformId)) {
-    return new TranslateUniversalLoader();
-  }
-  return new TranslateHttpLoader(http);
-}
 
 @NgModule({
   declarations: [
     AppComponent,
-    StatusComponent,
+    StatusComponent
-    UptimeComponent,
-    DayjsPipe
   ],
   imports: [
     BrowserModule.withServerTransition({appId: 'serverApp'}),
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: UniversalLoaderFactory,
-        deps: [HttpClient, PLATFORM_ID]
-      }
-    }),
     MatExpansionModule,
-    MatListModule,
+    MatListModule
-    MatTooltipModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/status/status.component.html

@@ -1,38 +1,25 @@
-<div class="py-3" *ngFor="let group of groups">
+<mat-accordion [multi]="true">
-  <h2>
+  <mat-expansion-panel *ngFor="let group of groups" [expanded]="true">
-    <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[group.state]"></i>
-            <i [class]="stateClasses[service.state]"></i>
+        <a *ngIf="group.url" class="name" [href]="group.url" target="_blank" (click)="$event.stopPropagation()">{{group.name}}</a>
-            <a *ngIf="service.url" class="text-truncate" [href]="service.url" target="_blank"
+        <span *ngIf="!group.url">{{group.name}}</span>
-               (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>
 
-      <ng-template matExpansionPanelContent>
+    <mat-list>
-        <app-uptime [id]="service.id"></app-uptime>
+      <a *ngFor="let service of group.services; last as last" mat-list-item [href]="service.url || group.url || '#'" target="_blank">
-      </ng-template>
+        <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>
+</mat-accordion>
-</div>
 
-<div class="text-right pb-3"><small matTooltip="{{lastUpdated | dayjs:'format':'LTS'}}" matTooltipPosition="above"
+<div class="text-right mt-3"><small>Last updated {{lastUpdated | date:'HH:mm:ss'}}</small></div>
-                                    [matTooltipShowDelay]="0"
-                                    [matTooltipHideDelay]="0">{{'last-updated' | translate:{'time': lastUpdated | dayjs:'from'} }}</small>
-</div>

src/app/status/status.component.scss

@@ -1,5 +1,23 @@
+.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 {

src/app/status/status.component.spec.ts

@@ -0,0 +1,25 @@
+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();
+  });
+});

src/app/status/status.component.ts

@@ -1,10 +1,11 @@
 import {Component, Inject, OnDestroy, OnInit, PLATFORM_ID} from '@angular/core';
-import {ApiService} from '../_service/api.service';
+import {ApiService} from "../_service/api.service";
-import {Group} from '../_data/data';
+import {Group} from "../_data/data";
-import {interval, Subject} from 'rxjs';
+import {interval, Subject} from "rxjs";
-import {takeUntil} from 'rxjs/operators';
+import {flatMap, startWith, takeUntil} from "rxjs/operators";
-import {DOCUMENT, isPlatformBrowser} from '@angular/common';
+import {DOCUMENT, isPlatformBrowser} from "@angular/common";
-import {StorageService} from '../_service/storage.service';
+
+// import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-status',
@@ -13,24 +14,17 @@ import {StorageService} from '../_service/storage.service';
 })
 export class StatusComponent implements OnInit, OnDestroy {
   readonly stateClasses = {
-    'operational': 'fas fa-fw fa-heart operational mr-2',
+    "operational": 'fas fa-fw fa-heart operational mr-2',
-    'outage': 'fas fa-fw fa-heart-broken outage mr-2',
+    "outage": 'fas fa-fw fa-heart-broken outage mr-2',
-    'maintenance': 'fas fa-fw fa-heartbeat maintenance 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, private storage: StorageService,
+  constructor(private api: ApiService, @Inject(PLATFORM_ID) private platformId: Object,
-              @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 {
@@ -55,8 +49,4 @@ export class StatusComponent implements OnInit, OnDestroy {
     this.destroyed$.next();
     this.destroyed$.complete();
   }
-
-  saveExpandedCache() {
-    this.storage.setValue('expanded', this.expandedCache);
-  }
 }

src/app/uptime/uptime.component.html

@@ -1,70 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-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);
-  }
-}

src/assets/i18n/de.json

@@ -1,24 +0,0 @@
-{
-  "state": {
-    "operational": "Funktionsfähig",
-    "maintenance": "Wartung",
-    "outage": "Ausfall"
-  },
-  "uptime": {
-    "title": "Verfügbarkeit",
-    "last24hours": "Letzte 24 Stunden",
-    "last7days": "Letzte 7 Tage",
-    "last30days": "Letzte 30 Tage",
-    "last90days": "Letzte 90 Tage"
-  },
-  "recent-events": {
-    "title": "Letzte Ereignisse",
-    "operational": "Wieder funktionsfähig",
-    "maintenance": "Wartung für {{time}}",
-    "outage": "Ausfall für {{time}}"
-  },
-  "last-updated": "Aktualisiert {{time}}",
-  "loading": "Lade...",
-  "show-all": "Alle anzeigen",
-  "show-less": "Weniger anzeigen"
-}

src/assets/i18n/en.json

@@ -1,24 +0,0 @@
-{
-  "state": {
-    "operational": "Operational",
-    "maintenance": "Maintenance",
-    "outage": "Outage"
-  },
-  "uptime": {
-    "title": "Uptime",
-    "last24hours": "Last 24 hours",
-    "last7days": "Last 7 days",
-    "last30days": "Last 30 days",
-    "last90days": "Last 90 days"
-  },
-  "recent-events": {
-    "title": "Recent events",
-    "operational": "Operational again",
-    "maintenance": "Maintenance for {{time}}",
-    "outage": "Outage for {{time}}"
-  },
-  "last-updated": "Last updated {{time}}",
-  "loading": "Loading...",
-  "show-all": "Show all",
-  "show-less": "Show less"
-}

src/main.status.ts

@@ -1,16 +1,8 @@
 import {json, Router} from 'express';
-import {CurrentStatus, State, UptimeStatus} from './app/_data/data';
+import {CurrentStatus, Service, State} from './app/_data/data';
 import {existsSync, readFileSync, writeFileSync} from 'fs';
 import {join} from 'path';
 import {JSONPath} from 'jsonpath-plus';
-import * as dayjs from 'dayjs';
-import {Dayjs} from 'dayjs';
-import * as utc from 'dayjs/plugin/utc';
-import * as isBetween from 'dayjs/plugin/isBetween';
-import {CronJob} from 'cron';
-
-dayjs.extend(utc);
-dayjs.extend(isBetween);
 
 interface Cache {
   [id: string]: State;
@@ -20,12 +12,6 @@ interface Config {
   authToken: string;
   title: string;
   description: string;
-  translations?: {
-    [lang: string]: {
-      title: string;
-      description: string;
-    }
-  },
   servicesPath?: string;
   idPath?: string;
   statePath?: string;
@@ -60,7 +46,6 @@ const serviceStatePaths: { [service: string]: string } = config.groups
   }, {});
 
 let cache: CurrentStatus;
-let uptimeStates = existsSync(join(process.cwd(), 'uptime.json')) ? JSON.parse(readFileSync(join(process.cwd(), 'uptime.json'), {encoding: 'utf-8'})) : {} as { [id: string]: UptimeStatus; };
 updateCache();
 
 api.post('/update/health', (req, res) => {
@@ -82,16 +67,17 @@ api.post('/update/health', (req, res) => {
 
   services.forEach(s => {
     if (config.stateValues.operational.includes(s.state)) {
-      updateServiceState(s.id, 'operational');
+      serviceStates[s.id] = 'operational';
     } else if (config.stateValues.maintenance.includes(s.state)) {
-      updateServiceState(s.id, 'maintenance');
+      serviceStates[s.id] = 'maintenance';
     } else {
-      updateServiceState(s.id, 'outage');
+      serviceStates[s.id] = 'outage';
     }
   });
 
   updateCache();
-  persistCache();
+
+  writeFileSync('cache.json', JSON.stringify(serviceStates), {encoding: 'utf-8'});
 
   return res.send('OK');
 });
@@ -100,23 +86,14 @@ api.get('/status', (req, res) => {
     return res.json(cache);
 });
 
-api.get('/uptime', (req, res) => {
-  const serviceId = req.query.service as string;
-  const uptime = uptimeStates[serviceId];
-  if (uptime) {
-    return res.json(uptime);
-  }
-  return res.sendStatus(404);
-});
-
 api.get('/badge', (req, res) => {
   const serviceId = req.query.service as string;
   if (!serviceId) {
     return res.json({
-      'schemaVersion': 1,
+      "schemaVersion": 1,
-      'label': 'sp-status',
+      "label": "sp-status",
-      'message': 'service not provided',
+      "message": "service not provided",
-      'isError': true
+      "isError": true
     });
   }
   const service = cache.groups
@@ -124,10 +101,10 @@ api.get('/badge', (req, res) => {
     .find(s => s.id === serviceId);
   if (!service) {
     return res.json({
-      'schemaVersion': 1,
+      "schemaVersion": 1,
-      'label': 'sp-status',
+      "label": "sp-status",
-      'message': 'service not found',
+      "message": "service not found",
-      'isError': true
+      "isError": true
     });
   }
   const label = req.query.label || service.name;
@@ -148,51 +125,28 @@ api.get('/badge', (req, res) => {
       break;
   }
   return res.json({
-    'schemaVersion': 1,
+    "schemaVersion": 1,
-    'label': label,
+    "label": label,
-    'message': message,
+    "message": message,
-    'color': color
+    "color": color
   });
 });
 
 api.get('/info', (req, res) => {
   return res.json({
     title: config.title,
-    description: config.description,
+    description: config.description
-    translations: config.translations
   });
 });
 
-function updateServiceState(id: string, state: string) {
-  if (serviceStates[id] === state) {
-    return;
-  }
-  serviceStates[id] = state;
-  if (!uptimeStates[id]) {
-    uptimeStates[id] = {
-      days: [],
-      events: []
-    };
-  }
-  if (uptimeStates[id].events.length === 0 && state !== 'operational' ||
-    uptimeStates[id].events.length > 0 && uptimeStates[id].events[0].state !== state) {
-    uptimeStates[id].events.unshift({state: state, date: new Date()});
-    console.log(`${id} changed to ${state}`);
-  }
-}
-
 function updateCache(): void {
-  updateUptime();
-
   const groups = config.groups.map(group => {
     const services = group.services.map(service => {
-      const uptime = uptimeStates[service.id];
       return {
         id: service.id,
         name: service.name,
         url: service.url,
-        state: serviceStates[service.id] || 'operational',
+        state: serviceStates[service.id] || 'operational'
-        uptime: uptime ? uptime.days30 : 100
       };
     });
     return {
@@ -209,151 +163,8 @@ function updateCache(): void {
   };
 }
 
-function updateUptime() {
-  const now = dayjs.utc();
-  const today = now.startOf('d');
-  const eventLimit = now.subtract(7, 'd');
-  for (const id in uptimeStates) {
-    if (uptimeStates.hasOwnProperty(id)) {
-      const uptime = uptimeStates[id] as UptimeStatus;
-      if (uptime.days.length < 90) {
-        for (let i = 0; i < 90; i++) {
-          uptime.days.push({date: today.subtract(90 - i, 'd').toDate(), uptime: 100})
-        }
-      }
-      if (today.diff(dayjs.utc(uptime.days[uptime.days.length - 1].date), 'd') >= 1) {
-        uptime.days.push({date: today.toDate(), uptime: 0});
-      }
-      if (uptime.days.length > 90) {
-        uptime.days.splice(0, uptime.days.length - 90);
-      }
-      for (let i = uptime.days.length - 3; i < uptime.days.length; i++) {
-        const start = dayjs.utc(uptime.days[i].date);
-        let end = start.add(1, 'd');
-        if (end.isAfter(now)) {
-          end = now;
-        }
-        uptime.days[i].uptime = calculateUptime(start, end, uptime.events);
-      }
-      uptime.hours24 = calculateUptime(now.subtract(24, 'h'), now, uptime.events);
-      uptime.days7 = uptime.days.slice(uptime.days.length - 7, uptime.days.length).map(e => e.uptime).reduce((a, b) => a + b) / 7;
-      uptime.days30 = uptime.days.slice(uptime.days.length - 30, uptime.days.length).map(e => e.uptime).reduce((a, b) => a + b) / 30;
-      uptime.days90 = uptime.days.slice(uptime.days.length - 90, uptime.days.length).map(e => e.uptime).reduce((a, b) => a + b) / 90;
-      uptime.events = uptime.events.filter(e => dayjs.utc(e.date).isAfter(eventLimit));
-      if (uptime.events.length > 0 && uptime.events[uptime.events.length - 1].state === 'operational') {
-        uptime.events.pop();
-      }
-    }
-  }
-}
-
-function calculateUptime(start: Dayjs, end: Dayjs, events: { state: State; date: Date; }[]): number {
-  if (events.filter(event => dayjs.utc(event.date).isBetween(start, end)).length == 0) {
-    const lastEvent = events.filter(event => dayjs.utc(event.date).isBefore(start))[0];
-    if (lastEvent && lastEvent.state !== 'operational') {
-      return 0;
-    }
-    return 100;
-  }
-  let uptimeMillis = 0;
-  let newestEventDate;
-  for (let i = events.length - 1; i >= 0; i--) {
-    const event = events[i];
-    const eventDate = dayjs.utc(event.date);
-    const lastEvent = events[i + 1];
-    let lastEventDate = lastEvent ? dayjs.utc(lastEvent.date) : start;
-    if (lastEventDate.isBefore(start)) {
-      lastEventDate = start;
-    }
-    if (eventDate.isBetween(start, end)) {
-      if (event.state === 'operational') {
-        newestEventDate = eventDate;
-      } else if (!lastEvent || lastEvent.state === 'operational') {
-        newestEventDate = null;
-        uptimeMillis += eventDate.diff(lastEventDate, 'ms');
-      }
-    }
-  }
-  if (newestEventDate) {
-    uptimeMillis += end.diff(newestEventDate, 'ms');
-  }
-  return uptimeMillis / end.diff(start, 'ms') * 100;
-}
-
 function calculateOverallState(states: State[]): State {
   return states.includes('outage') ? 'outage' : states.includes('maintenance') ? 'maintenance' : 'operational';
 }
 
-function persistCache() {
-  writeFileSync('cache.json', JSON.stringify(serviceStates), {encoding: 'utf-8'});
-  writeFileSync('uptime.json', JSON.stringify(uptimeStates), {encoding: 'utf-8'});
-}
-
-new CronJob('0 * * * * *', () => updateCache(), null, true, 'UTC').start();
-new CronJob('0 0 * * * *', () => persistCache(), null, true, 'UTC').start();
-
-
-api.get('/test', (req, res) => {
-  return res.json({
-    '50_5': calculateUptime(dayjs.utc('2020-01-02'), dayjs.utc('2020-01-03'), [{
-      state: 'outage',
-      date: new Date('2020-01-03T12:00:00.000Z')
-    }, {
-      state: 'operational',
-      date: new Date('2020-01-02T18:00:00.000Z')
-    }, {
-      state: 'outage',
-      date: new Date('2020-01-02T06:00:00.000Z')
-    }, {
-      state: 'operational',
-      date: new Date('2020-01-01T12:00:00.000Z')
-    }]),
-    '50_4': calculateUptime(dayjs.utc('2020-01-02'), dayjs.utc('2020-01-03'), [{
-      state: 'operational',
-      date: new Date('2020-01-02T18:00:00.000Z')
-    }, {
-      state: 'outage',
-      date: new Date('2020-01-02T06:00:00.000Z')
-    }, {
-      state: 'operational',
-      date: new Date('2020-01-01T12:00:00.000Z')
-    }]),
-    '50_3': calculateUptime(dayjs.utc('2020-01-02'), dayjs.utc('2020-01-03'), [{
-      state: 'outage',
-      date: new Date('2020-01-02T12:00:00.000Z')
-    }, {
-      state: 'operational',
-      date: new Date('2020-01-01T12:00:00.000Z')
-    }]),
-    '50_2': calculateUptime(dayjs.utc('2020-01-02'), dayjs.utc('2020-01-03'), [{
-      state: 'outage',
-      date: new Date('2020-01-02T18:00:00.000Z')
-    }, {
-      state: 'operational',
-      date: new Date('2020-01-02T06:00:00.000Z')
-    }]),
-    '50_1': calculateUptime(dayjs.utc('2020-01-02'), dayjs.utc('2020-01-03'), [{
-      state: 'operational',
-      date: new Date('2020-01-02T12:00:00.000Z')
-    }, {
-      state: 'outage',
-      date: new Date('2020-01-01T12:00:00.000Z')
-    }]),
-    '50_0': calculateUptime(dayjs.utc('2020-01-01'), dayjs.utc('2020-01-02'), [{
-      state: 'operational',
-      date: new Date('2020-01-01T12:00:00.000Z')
-    }]),
-    '75': calculateUptime(dayjs.utc('2020-01-01'), dayjs.utc('2020-01-02'), [{
-      state: 'operational',
-      date: new Date('2020-01-01T06:00:00.000Z')
-    }]),
-    '100': calculateUptime(dayjs.utc('2020-01-01'), dayjs.utc('2020-01-02'), []),
-    '0': calculateUptime(dayjs.utc('2020-01-02'), dayjs.utc('2020-01-03'), [{
-      state: 'outage',
-      date: new Date('2020-01-01T12:00:00.000Z')
-    }]),
-    'test': calculateUptime(dayjs.utc('2020-01-07'), dayjs.utc(), [{state: 'outage', date: new Date('2021-01-07T13:54:32.705Z')}])
-  });
-});
-
 export {api};

src/styles.scss

@@ -3,17 +3,8 @@
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
 @import "~bootstrap/scss/bootstrap-grid";
-@import "~bootstrap/scss/functions";
+@import "~@fortawesome/fontawesome-free/css/all.css";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/_breakpoints";
 @import "~roboto-fontface/css/roboto/roboto-fontface.css";
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/brands";
-@import "~@fortawesome/fontawesome-free/scss/regular";
-$flag-icon-css-path: '~flag-icon-css/flags' !default;
-@import "~flag-icon-css/sass/flag-icon";
 
 @import '~@angular/material/theming';
 
@@ -216,8 +207,7 @@ $mat-warn: (
     darker: $light-primary-text,
   )
 );
-$theme-warn: mat-palette($mat-warn, main, lighter, darker);
+$theme-warn: mat-palette($mat-warn, main, lighter, darker);;
-;
 
 $theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
 $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
@@ -254,47 +244,3 @@ body {
   background-color: #222222;
   color: #ffffff;
 }
-
-.multiline-tooltip {
-  white-space: pre-line;
-}
-
-.operational {
-  color: #7ed321;
-}
-
-.outage {
-  color: #ff6f6f;
-}
-
-.maintenance {
-  color: #f7ca18;
-}
-
-.bg-operational {
-  background-color: #7ed321;
-}
-
-.bg-outage {
-  background-color: #ff6f6f;
-}
-
-.bg-maintenance {
-  background-color: #f7ca18;
-}
-
-a {
-  color: #cccccc;
-  text-decoration: none;
-
-  &:hover {
-    color: #ffffff;
-    text-decoration: underline;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .border-md-right {
-    border-right: $border-width solid $border-color !important;
-  }
-}