From c78fb9e8de7a22f30b5bded9a11bb29617d06ed7 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Fri, 4 Dec 2020 05:11:02 +0000 Subject: [PATCH 01/10] Update dependency @nguniversal/builders to ^11.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 29da8d9..5a222f1 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.2", "@angular/language-service": "~11.0.2", - "@nguniversal/builders": "^11.0.0", + "@nguniversal/builders": "^11.0.1", "@types/express": "^4.17.9", "@types/node": "^14.0.23", "@types/jasmine": "~3.6.0", From ca9441a89aec4ba21a524bdc1b287b47de33e236 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Fri, 4 Dec 2020 05:12:03 +0000 Subject: [PATCH 02/10] Update dependency @nguniversal/express-engine to ^11.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 29da8d9..feada99 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@angular/platform-server": "~11.0.2", "@angular/router": "~11.0.2", "@fortawesome/fontawesome-free": "^5.15.1", - "@nguniversal/express-engine": "^11.0.0", + "@nguniversal/express-engine": "^11.0.1", "bootstrap": "^4.5.3", "express": "^4.17.1", "jsonpath-plus": "^4.0.0", From a52b1512e13428d95103a1f5e94096e3232ee2b1 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Thu, 17 Dec 2020 05:10:59 +0000 Subject: [PATCH 03/10] Update node Docker tag to v14.15.2 --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 1d5515b..71a5369 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:14.15.1-alpine +FROM node:14.15.2-alpine COPY dist/universal-statuspage /universal-statuspage From d644c77d01abe3dc66f20978efc29ca5be1598d2 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Sat, 19 Dec 2020 05:12:29 +0000 Subject: [PATCH 04/10] Update node Docker tag to v14.15.3 --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 71a5369..e9084d0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:14.15.2-alpine +FROM node:14.15.3-alpine COPY dist/universal-statuspage /universal-statuspage From 91125ba6979397dd3f2d9b8a66418549352e9706 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Wed, 6 Jan 2021 05:13:25 +0000 Subject: [PATCH 05/10] Update node Docker tag to v14.15.4 --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index e9084d0..8a18d76 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:14.15.3-alpine +FROM node:14.15.4-alpine COPY dist/universal-statuspage /universal-statuspage From e9599373ecdc49216ac9e8eea1cf989630603fd3 Mon Sep 17 00:00:00 2001 From: samuel-p Date: Sun, 10 Jan 2021 16:06:18 +0100 Subject: [PATCH 06/10] added last downtime log (closes #55) added uptime statistics (closes #56) added german translations (closes #57) --- .gitignore | 1 + angular.json | 2 + config.json | 30 ++- package.json | 8 + server.ts | 20 +- src/app/_data/data.ts | 22 +++ src/app/_pipe/dayjs.pipe.spec.ts | 8 + src/app/_pipe/dayjs.pipe.ts | 36 ++++ src/app/_service/api.service.spec.ts | 16 -- src/app/_service/api.service.ts | 18 +- src/app/_service/storage.service.ts | 30 +++ src/app/app.component.html | 19 +- src/app/app.component.scss | 10 +- src/app/app.component.spec.ts | 35 ---- src/app/app.component.ts | 42 ++++- src/app/app.module.ts | 42 ++++- src/app/status/status.component.html | 59 +++--- src/app/status/status.component.scss | 18 -- src/app/status/status.component.spec.ts | 25 --- src/app/status/status.component.ts | 32 ++-- src/app/uptime/uptime.component.html | 70 +++++++ src/app/uptime/uptime.component.scss | 0 src/app/uptime/uptime.component.ts | 52 ++++++ src/assets/i18n/de.json | 24 +++ src/assets/i18n/en.json | 24 +++ src/main.status.ts | 235 +++++++++++++++++++++--- src/styles.scss | 206 +++++++++++++-------- 27 files changed, 819 insertions(+), 265 deletions(-) create mode 100644 src/app/_pipe/dayjs.pipe.spec.ts create mode 100644 src/app/_pipe/dayjs.pipe.ts delete mode 100644 src/app/_service/api.service.spec.ts create mode 100644 src/app/_service/storage.service.ts delete mode 100644 src/app/app.component.spec.ts delete mode 100644 src/app/status/status.component.spec.ts create mode 100644 src/app/uptime/uptime.component.html create mode 100644 src/app/uptime/uptime.component.scss create mode 100644 src/app/uptime/uptime.component.ts create mode 100644 src/assets/i18n/de.json create mode 100644 src/assets/i18n/en.json diff --git a/.gitignore b/.gitignore index a3ed5d0..991d42f 100644 --- a/.gitignore +++ b/.gitignore @@ -49,3 +49,4 @@ Thumbs.db # custom config.json cache.json +uptime.json diff --git a/angular.json b/angular.json index a458a21..23b55b0 100644 --- a/angular.json +++ b/angular.json @@ -17,12 +17,14 @@ "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", diff --git a/config.json b/config.json index d988f5c..d781b11 100644 --- a/config.json +++ b/config.json @@ -2,22 +2,44 @@ "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": ["paused"] + "maintenance": ["maintenance" ,"paused"] }, "groups": [ { - "id": "test", - "name": "Test", + "id": "group", + "name": "My Group", "url": "http://sp-codes.de", "services": [ { "id": "test", - "name": "test", + "name": "My Service", + "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" } ] diff --git a/package.json b/package.json index ce81dc9..f7f6d7f 100644 --- a/package.json +++ b/package.json @@ -28,12 +28,20 @@ "@angular/router": "~11.0.2", "@fortawesome/fontawesome-free": "^5.15.1", "@nguniversal/express-engine": "^11.0.0", + "@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": { diff --git a/server.ts b/server.ts index edd57b5..185923d 100644 --- a/server.ts +++ b/server.ts @@ -1,6 +1,6 @@ import 'zone.js/dist/zone-node'; -import {ngExpressEngine} from '@nguniversal/express-engine'; +import {ngExpressEngine, RenderOptions} from '@nguniversal/express-engine'; import * as express from 'express'; import {join} from 'path'; @@ -17,14 +17,26 @@ 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({ - bootstrap: AppServerModule, - })); + // server.engine('html', ngExpressEngine({ + // bootstrap: AppServerModule, + // })); + server.engine('html', (path: string, options: Readonly, 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, { diff --git a/src/app/_data/data.ts b/src/app/_data/data.ts index 478dd1a..69aec05 100644 --- a/src/app/_data/data.ts +++ b/src/app/_data/data.ts @@ -18,9 +18,31 @@ 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; + }[]; } diff --git a/src/app/_pipe/dayjs.pipe.spec.ts b/src/app/_pipe/dayjs.pipe.spec.ts new file mode 100644 index 0000000..e1d508f --- /dev/null +++ b/src/app/_pipe/dayjs.pipe.spec.ts @@ -0,0 +1,8 @@ +import { DayjsPipe } from './dayjs.pipe'; + +describe('DayjsPipe', () => { + it('create an instance', () => { + const pipe = new DayjsPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/_pipe/dayjs.pipe.ts b/src/app/_pipe/dayjs.pipe.ts new file mode 100644 index 0000000..705b106 --- /dev/null +++ b/src/app/_pipe/dayjs.pipe.ts @@ -0,0 +1,36 @@ +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!'); + } +} diff --git a/src/app/_service/api.service.spec.ts b/src/app/_service/api.service.spec.ts deleted file mode 100644 index c0310ae..0000000 --- a/src/app/_service/api.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -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(); - }); -}); diff --git a/src/app/_service/api.service.ts b/src/app/_service/api.service.ts index af2e0b3..83554e8 100644 --- a/src/app/_service/api.service.ts +++ b/src/app/_service/api.service.ts @@ -1,9 +1,9 @@ import {Inject, Injectable, PLATFORM_ID} from '@angular/core'; -import {Observable} from "rxjs"; -import {CurrentStatus, MetaInfo} from "../_data/data"; -import {HttpClient} from "@angular/common/http"; -import {environment} from "../../environments/environment"; -import {isPlatformBrowser} from "@angular/common"; +import {Observable, of} from 'rxjs'; +import {CurrentStatus, MetaInfo, UptimeStatus} from '../_data/data'; +import {HttpClient} from '@angular/common/http'; +import {environment} from '../../environments/environment'; +import {isPlatformBrowser} from '@angular/common'; @Injectable({ providedIn: 'root' @@ -16,10 +16,14 @@ export class ApiService { } public getServiceStates(): Observable { - return this.http.get(this.api+ '/status'); + return this.http.get(this.api + '/status'); + } + + public getServiceUptime(id: string): Observable { + return this.http.get(this.api + '/uptime', {params: {service: id}}); } public getMetaInfo(): Observable { - return this.http.get(this.api+ '/info'); + return this.http.get(this.api + '/info'); } } diff --git a/src/app/_service/storage.service.ts b/src/app/_service/storage.service.ts new file mode 100644 index 0000000..cf42735 --- /dev/null +++ b/src/app/_service/storage.service.ts @@ -0,0 +1,30 @@ +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) { + } + } + } +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 9ad4c05..dad89c8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,22 @@
-

{{title}}

-

{{description}}

+
+
+

{{translations[getLanguage()]?.title || title}}

+
+
+
+ + + + + + +
+
+
+

{{translations[getLanguage()]?.description || description}}

+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 238bbd2..8d7031d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -19,12 +19,6 @@ footer { flex-shrink: 0; } -a { - color: #cccccc; - text-decoration: none; - - &:hover { - color: #ffffff; - text-decoration: underline; - } +.language-selection { + font-size: 1.3em; } diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 994ccc9..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -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!'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 83cacfb..32afafa 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,8 +1,9 @@ -import {Component, OnInit} from '@angular/core'; -import {ApiService} from "./_service/api.service"; -import {Observable} from "rxjs"; -import {MetaInfo} from "./_data/data"; -import {Title} from "@angular/platform-browser"; +import {Component, Inject, Injector, OnInit, PLATFORM_ID} from '@angular/core'; +import {ApiService} from './_service/api.service'; +import {Title} from '@angular/platform-browser'; +import {TranslateService} from '@ngx-translate/core'; +import {StorageService} from './_service/storage.service'; +import {isPlatformServer} from '@angular/common'; @Component({ selector: 'app-root', @@ -12,15 +13,42 @@ import {Title} from "@angular/platform-browser"; export class AppComponent implements OnInit { title: string; description: string; + translations: { [lang: string]: { title: string; description: string } }; - constructor(private api: ApiService, private htmlTitle: Title) { + private supportedLanguages = ['en', 'de']; + + 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( '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); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index db73aab..297ecdd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,26 +1,56 @@ import {BrowserModule} from '@angular/platform-browser'; -import {NgModule} from '@angular/core'; +import {NgModule, PLATFORM_ID} 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 {MatListModule} from "@angular/material/list"; -import {HttpClientModule} from "@angular/common/http"; +import {MatExpansionModule} from '@angular/material/expansion'; +import {MatListModule} from '@angular/material/list'; +import {HttpClient, 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 { + 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] diff --git a/src/app/status/status.component.html b/src/app/status/status.component.html index f0b5aa2..91ccd84 100644 --- a/src/app/status/status.component.html +++ b/src/app/status/status.component.html @@ -1,25 +1,38 @@ - - - - - - {{group.name}} - {{group.name}} - - +
+

+ + {{group.name}} + {{group.name}} +

+ + + + +
+ + {{service.name}} + {{service.name}} + {{service.uptime?.toFixed(2)}}% + + {{'state.' + service.state | translate}} +
+ + - - -
- - {{service.name}} - - {{service.state}} -
- - - - - + + + + + +
-
Last updated {{lastUpdated | date:'HH:mm:ss'}}
+
{{'last-updated' | translate:{'time': lastUpdated | dayjs:'from'} }} +
diff --git a/src/app/status/status.component.scss b/src/app/status/status.component.scss index 310e4f4..19c51a6 100644 --- a/src/app/status/status.component.scss +++ b/src/app/status/status.component.scss @@ -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 { diff --git a/src/app/status/status.component.spec.ts b/src/app/status/status.component.spec.ts deleted file mode 100644 index 0fed327..0000000 --- a/src/app/status/status.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ StatusComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(StatusComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/status/status.component.ts b/src/app/status/status.component.ts index 44212ec..8c64f50 100644 --- a/src/app/status/status.component.ts +++ b/src/app/status/status.component.ts @@ -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); + } } diff --git a/src/app/uptime/uptime.component.html b/src/app/uptime/uptime.component.html new file mode 100644 index 0000000..9266374 --- /dev/null +++ b/src/app/uptime/uptime.component.html @@ -0,0 +1,70 @@ +
+

{{'uptime.title' | translate}}

+ +
+
+
+

{{uptime.hours24?.toFixed(2)}}%

+ {{'uptime.last24hours' | translate}} +
+
+
+
+

{{uptime.days7?.toFixed(2)}}%

+ {{'uptime.last7days' | translate}} +
+
+
+
+

{{uptime.days30?.toFixed(2)}}%

+ {{'uptime.last30days' | translate}} +
+
+
+
+

{{uptime.days90?.toFixed(2)}}%

+ {{'uptime.last90days' | translate}} +
+
+
+
+ +
+ +
+ +
+

{{'recent-events.title' | translate}}

+ + + + +

+ {{'recent-events.operational' | translate}} + {{'recent-events.maintenance' | translate: {'time': event.date | dayjs:'to':uptime.events[index - 1]?.date} }} + {{'recent-events.outage' | translate:{'time': event.date | dayjs:'to':uptime.events[index - 1]?.date} }} +

+
{{event.date | dayjs:'from'}} +
+ + + + + {{(expanded ? 'show-less' : 'show-all') | translate}} +
+
+ +
{{error}}
+
{{'loading' | translate}}
+ diff --git a/src/app/uptime/uptime.component.scss b/src/app/uptime/uptime.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/uptime/uptime.component.ts b/src/app/uptime/uptime.component.ts new file mode 100644 index 0000000..30cd58f --- /dev/null +++ b/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; + 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); + } +} diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json new file mode 100644 index 0000000..5ae699f --- /dev/null +++ b/src/assets/i18n/de.json @@ -0,0 +1,24 @@ +{ + "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" +} diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json new file mode 100644 index 0000000..9e6d0cf --- /dev/null +++ b/src/assets/i18n/en.json @@ -0,0 +1,24 @@ +{ + "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" +} diff --git a/src/main.status.ts b/src/main.status.ts index db41deb..6f6de4c 100644 --- a/src/main.status.ts +++ b/src/main.status.ts @@ -1,8 +1,16 @@ import {json, Router} from 'express'; -import {CurrentStatus, Service, State} from './app/_data/data'; +import {CurrentStatus, State, UptimeStatus} 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; @@ -12,6 +20,12 @@ interface Config { authToken: string; title: string; description: string; + translations?: { + [lang: string]: { + title: string; + description: string; + } + }, servicesPath?: string; idPath?: string; statePath?: string; @@ -46,6 +60,7 @@ 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) => { @@ -60,40 +75,48 @@ api.post('/update/health', (req, res) => { } else if (config.servicesPath && config.idPath && config.statePath) { services = JSONPath({path: config.servicesPath, json: req.body}) .map(s => ({ - id: JSONPath({path: config.idPath, json: s, wrap: false}), - state: JSONPath({path: config.statePath, json: s, wrap: false}) + id: JSONPath({path: config.idPath, json: s, wrap: false}), + state: JSONPath({path: config.statePath, json: s, wrap: false}) })); } services.forEach(s => { if (config.stateValues.operational.includes(s.state)) { - serviceStates[s.id] = 'operational'; + updateServiceState(s.id, 'operational'); } else if (config.stateValues.maintenance.includes(s.state)) { - serviceStates[s.id] = 'maintenance'; + updateServiceState(s.id, 'maintenance'); } else { - serviceStates[s.id] = 'outage'; + updateServiceState(s.id, 'outage'); } }); updateCache(); - - writeFileSync('cache.json', JSON.stringify(serviceStates), {encoding: 'utf-8'}); + persistCache(); return res.send('OK'); }); api.get('/status', (req, res) => { - return res.json(cache); + 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, - "label": "sp-status", - "message": "service not provided", - "isError": true + 'schemaVersion': 1, + 'label': 'sp-status', + 'message': 'service not provided', + 'isError': true }); } const service = cache.groups @@ -101,10 +124,10 @@ api.get('/badge', (req, res) => { .find(s => s.id === serviceId); if (!service) { return res.json({ - "schemaVersion": 1, - "label": "sp-status", - "message": "service not found", - "isError": true + 'schemaVersion': 1, + 'label': 'sp-status', + 'message': 'service not found', + 'isError': true }); } const label = req.query.label || service.name; @@ -125,28 +148,51 @@ api.get('/badge', (req, res) => { break; } return res.json({ - "schemaVersion": 1, - "label": label, - "message": message, - "color": color + 'schemaVersion': 1, + 'label': label, + 'message': message, + '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 { @@ -163,8 +209,151 @@ 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}; diff --git a/src/styles.scss b/src/styles.scss index 066912a..539e68a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,8 +3,17 @@ @import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/utilities"; @import "~bootstrap/scss/bootstrap-grid"; -@import "~@fortawesome/fontawesome-free/css/all.css"; +@import "~bootstrap/scss/functions"; +@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'; @@ -35,21 +44,21 @@ $dark-dividers: rgba($dark-primary-text, 0.12); $dark-focused: rgba($dark-primary-text, 0.12); $mat-light-theme-foreground: ( - base: black, - divider: $dark-dividers, - dividers: $dark-dividers, - disabled: $dark-disabled-text, - disabled-button: rgba($dark-text, 0.26), - disabled-text: $dark-disabled-text, - elevation: black, - secondary-text: $dark-accent-text, - hint-text: $dark-disabled-text, - accent-text: $dark-accent-text, - icon: $dark-accent-text, - icons: $dark-accent-text, - text: $dark-primary-text, - slider-min: $dark-primary-text, - slider-off: rgba($dark-text, 0.26), + base: black, + divider: $dark-dividers, + dividers: $dark-dividers, + disabled: $dark-disabled-text, + disabled-button: rgba($dark-text, 0.26), + disabled-text: $dark-disabled-text, + elevation: black, + secondary-text: $dark-accent-text, + hint-text: $dark-disabled-text, + accent-text: $dark-accent-text, + icon: $dark-accent-text, + icons: $dark-accent-text, + text: $dark-primary-text, + slider-min: $dark-primary-text, + slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, ); @@ -62,80 +71,80 @@ $light-dividers: rgba($light-primary-text, 0.12); $light-focused: rgba($light-primary-text, 0.12); $mat-dark-theme-foreground: ( - base: $light-text, - divider: $light-dividers, - dividers: $light-dividers, - disabled: $light-disabled-text, - disabled-button: rgba($light-text, 0.3), - disabled-text: $light-disabled-text, - elevation: black, - hint-text: $light-disabled-text, - secondary-text: $light-accent-text, - accent-text: $light-accent-text, - icon: $light-text, - icons: $light-text, - text: $light-text, - slider-min: $light-text, - slider-off: rgba($light-text, 0.3), + base: $light-text, + divider: $light-dividers, + dividers: $light-dividers, + disabled: $light-disabled-text, + disabled-button: rgba($light-text, 0.3), + disabled-text: $light-disabled-text, + elevation: black, + hint-text: $light-disabled-text, + secondary-text: $light-accent-text, + accent-text: $light-accent-text, + icon: $light-text, + icons: $light-text, + text: $light-text, + slider-min: $light-text, + slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), ); // Background config // Light bg -$light-background: #fafafa; -$light-bg-darker-5: darken($light-background, 5%); -$light-bg-darker-10: darken($light-background, 10%); -$light-bg-darker-20: darken($light-background, 20%); -$light-bg-darker-30: darken($light-background, 30%); -$light-bg-lighter-5: lighten($light-background, 5%); -$dark-bg-tooltip: lighten(#2c2c2c, 20%); -$dark-bg-alpha-4: rgba(#2c2c2c, 0.04); -$dark-bg-alpha-12: rgba(#2c2c2c, 0.12); +$light-background: #fafafa; +$light-bg-darker-5: darken($light-background, 5%); +$light-bg-darker-10: darken($light-background, 10%); +$light-bg-darker-20: darken($light-background, 20%); +$light-bg-darker-30: darken($light-background, 30%); +$light-bg-lighter-5: lighten($light-background, 5%); +$dark-bg-tooltip: lighten(#2c2c2c, 20%); +$dark-bg-alpha-4: rgba(#2c2c2c, 0.04); +$dark-bg-alpha-12: rgba(#2c2c2c, 0.12); $mat-light-theme-background: ( - background: $light-background, - status-bar: $light-bg-darker-20, - app-bar: $light-bg-darker-5, - hover: $dark-bg-alpha-4, - card: $light-bg-lighter-5, - dialog: $light-bg-lighter-5, - tooltip: $dark-bg-tooltip, - disabled-button: $dark-bg-alpha-12, - raised-button: $light-bg-lighter-5, - focused-button: $dark-focused, - selected-button: $light-bg-darker-20, + background: $light-background, + status-bar: $light-bg-darker-20, + app-bar: $light-bg-darker-5, + hover: $dark-bg-alpha-4, + card: $light-bg-lighter-5, + dialog: $light-bg-lighter-5, + tooltip: $dark-bg-tooltip, + disabled-button: $dark-bg-alpha-12, + raised-button: $light-bg-lighter-5, + focused-button: $dark-focused, + selected-button: $light-bg-darker-20, selected-disabled-button: $light-bg-darker-30, - disabled-button-toggle: $light-bg-darker-10, - unselected-chip: $light-bg-darker-10, - disabled-list-option: $light-bg-darker-10, + disabled-button-toggle: $light-bg-darker-10, + unselected-chip: $light-bg-darker-10, + disabled-list-option: $light-bg-darker-10, ); // Dark bg -$dark-background: #2c2c2c; -$dark-bg-lighter-5: lighten($dark-background, 5%); -$dark-bg-lighter-10: lighten($dark-background, 10%); -$dark-bg-lighter-20: lighten($dark-background, 20%); -$dark-bg-lighter-30: lighten($dark-background, 30%); -$light-bg-alpha-4: rgba(#fafafa, 0.04); -$light-bg-alpha-12: rgba(#fafafa, 0.12); +$dark-background: #2c2c2c; +$dark-bg-lighter-5: lighten($dark-background, 5%); +$dark-bg-lighter-10: lighten($dark-background, 10%); +$dark-bg-lighter-20: lighten($dark-background, 20%); +$dark-bg-lighter-30: lighten($dark-background, 30%); +$light-bg-alpha-4: rgba(#fafafa, 0.04); +$light-bg-alpha-12: rgba(#fafafa, 0.12); // Background palette for dark themes. $mat-dark-theme-background: ( - background: $dark-background, - status-bar: $dark-bg-lighter-20, - app-bar: $dark-bg-lighter-5, - hover: $light-bg-alpha-4, - card: $dark-bg-lighter-5, - dialog: $dark-bg-lighter-5, - tooltip: $dark-bg-lighter-20, - disabled-button: $light-bg-alpha-12, - raised-button: $dark-bg-lighter-5, - focused-button: $light-focused, - selected-button: $dark-bg-lighter-20, + background: $dark-background, + status-bar: $dark-bg-lighter-20, + app-bar: $dark-bg-lighter-5, + hover: $light-bg-alpha-4, + card: $dark-bg-lighter-5, + dialog: $dark-bg-lighter-5, + tooltip: $dark-bg-lighter-20, + disabled-button: $light-bg-alpha-12, + raised-button: $dark-bg-lighter-5, + focused-button: $light-focused, + selected-button: $dark-bg-lighter-20, selected-disabled-button: $dark-bg-lighter-30, - disabled-button-toggle: $dark-bg-lighter-10, - unselected-chip: $dark-bg-lighter-20, - disabled-list-option: $dark-bg-lighter-10, + disabled-button-toggle: $dark-bg-lighter-10, + unselected-chip: $dark-bg-lighter-20, + disabled-list-option: $dark-bg-lighter-10, ); // Compute font config @@ -207,7 +216,8 @@ $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); @@ -244,3 +254,47 @@ 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; + } +} From 41d5f07e358d708d32af351c4d7efed39ab817a5 Mon Sep 17 00:00:00 2001 From: samuel-p Date: Sun, 10 Jan 2021 16:09:17 +0100 Subject: [PATCH 07/10] updated @angular/material --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0c70e71..fe69a68 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,12 @@ "private": true, "dependencies": { "@angular/animations": "~11.0.2", - "@angular/cdk": "^11.0.1", + "@angular/cdk": "^11.0.3", "@angular/common": "~11.0.2", "@angular/compiler": "~11.0.2", "@angular/core": "~11.0.2", "@angular/forms": "~11.0.2", - "@angular/material": "^11.0.1", + "@angular/material": "^11.0.3", "@angular/platform-browser": "~11.0.2", "@angular/platform-browser-dynamic": "~11.0.2", "@angular/platform-server": "~11.0.2", From 0f929b92eac9c9afc5f202dcb2a59b150b2d4d03 Mon Sep 17 00:00:00 2001 From: samuel-p Date: Sun, 10 Jan 2021 16:10:50 +0100 Subject: [PATCH 08/10] updated @angular/cli --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fe69a68..ac1dbc4 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "zone.js": "~0.10.2" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.1100.2", - "@angular/cli": "~11.0.2", + "@angular-devkit/build-angular": "~0.1100.6", + "@angular/cli": "~11.0.6", "@angular/compiler-cli": "~11.0.2", "@angular/language-service": "~11.0.2", "@nguniversal/builders": "^11.0.1", From e6dc8b8e0d5a9cb7378d1f557fcd21525b82093f Mon Sep 17 00:00:00 2001 From: samuel-p Date: Sun, 10 Jan 2021 16:13:54 +0100 Subject: [PATCH 09/10] updated @angular/core --- package.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index ac1dbc4..ee80acc 100644 --- a/package.json +++ b/package.json @@ -15,17 +15,17 @@ }, "private": true, "dependencies": { - "@angular/animations": "~11.0.2", + "@angular/animations": "~11.0.7", "@angular/cdk": "^11.0.3", - "@angular/common": "~11.0.2", - "@angular/compiler": "~11.0.2", - "@angular/core": "~11.0.2", - "@angular/forms": "~11.0.2", + "@angular/common": "~11.0.7", + "@angular/compiler": "~11.0.7", + "@angular/core": "~11.0.7", + "@angular/forms": "~11.0.7", "@angular/material": "^11.0.3", - "@angular/platform-browser": "~11.0.2", - "@angular/platform-browser-dynamic": "~11.0.2", - "@angular/platform-server": "~11.0.2", - "@angular/router": "~11.0.2", + "@angular/platform-browser": "~11.0.7", + "@angular/platform-browser-dynamic": "~11.0.7", + "@angular/platform-server": "~11.0.7", + "@angular/router": "~11.0.7", "@fortawesome/fontawesome-free": "^5.15.1", "@nguniversal/express-engine": "^11.0.1", "@ngx-translate/core": "^13.0.0", @@ -47,8 +47,8 @@ "devDependencies": { "@angular-devkit/build-angular": "~0.1100.6", "@angular/cli": "~11.0.6", - "@angular/compiler-cli": "~11.0.2", - "@angular/language-service": "~11.0.2", + "@angular/compiler-cli": "~11.0.7", + "@angular/language-service": "~11.0.7", "@nguniversal/builders": "^11.0.1", "@types/express": "^4.17.9", "@types/node": "^14.0.23", From ec6ae661b825a23b80881bdd39c0faf531e6d3e2 Mon Sep 17 00:00:00 2001 From: samuel-p Date: Sun, 10 Jan 2021 16:53:18 +0100 Subject: [PATCH 10/10] changed license to agpl --- LICENSE | 141 +++++++++++++++++++++++++----------------------------- README.md | 6 +-- 2 files changed, 67 insertions(+), 80 deletions(-) diff --git a/LICENSE b/LICENSE index f288702..be3f7b2 100644 --- a/LICENSE +++ b/LICENSE @@ -1,5 +1,5 @@ - GNU GENERAL PUBLIC LICENSE - Version 3, 29 June 2007 + GNU AFFERO GENERAL PUBLIC LICENSE + Version 3, 19 November 2007 Copyright (C) 2007 Free Software Foundation, Inc. Everyone is permitted to copy and distribute verbatim copies @@ -7,17 +7,15 @@ Preamble - The GNU General Public License is a free, copyleft license for -software and other kinds of works. + The GNU Affero General Public License is a free, copyleft license for +software and other kinds of works, specifically designed to ensure +cooperation with the community in the case of network server software. The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, -the GNU General Public License is intended to guarantee your freedom to +our General Public Licenses are intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free -software for all its users. We, the Free Software Foundation, use the -GNU General Public License for most of our software; it applies also to -any other work released this way by its authors. You can apply it to -your programs, too. +software for all its users. When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you @@ -26,44 +24,34 @@ them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things. - To protect your rights, we need to prevent others from denying you -these rights or asking you to surrender the rights. Therefore, you have -certain responsibilities if you distribute copies of the software, or if -you modify it: responsibilities to respect the freedom of others. + Developers that use our General Public Licenses protect your rights +with two steps: (1) assert copyright on the software, and (2) offer +you this License which gives you legal permission to copy, distribute +and/or modify the software. - For example, if you distribute copies of such a program, whether -gratis or for a fee, you must pass on to the recipients the same -freedoms that you received. You must make sure that they, too, receive -or can get the source code. And you must show them these terms so they -know their rights. + A secondary benefit of defending all users' freedom is that +improvements made in alternate versions of the program, if they +receive widespread use, become available for other developers to +incorporate. Many developers of free software are heartened and +encouraged by the resulting cooperation. However, in the case of +software used on network servers, this result may fail to come about. +The GNU General Public License permits making a modified version and +letting the public access it on a server without ever releasing its +source code to the public. - Developers that use the GNU GPL protect your rights with two steps: -(1) assert copyright on the software, and (2) offer you this License -giving you legal permission to copy, distribute and/or modify it. + The GNU Affero General Public License is designed specifically to +ensure that, in such cases, the modified source code becomes available +to the community. It requires the operator of a network server to +provide the source code of the modified version running there to the +users of that server. Therefore, public use of a modified version, on +a publicly accessible server, gives the public access to the source +code of the modified version. - For the developers' and authors' protection, the GPL clearly explains -that there is no warranty for this free software. For both users' and -authors' sake, the GPL requires that modified versions be marked as -changed, so that their problems will not be attributed erroneously to -authors of previous versions. - - Some devices are designed to deny users access to install or run -modified versions of the software inside them, although the manufacturer -can do so. This is fundamentally incompatible with the aim of -protecting users' freedom to change the software. The systematic -pattern of such abuse occurs in the area of products for individuals to -use, which is precisely where it is most unacceptable. Therefore, we -have designed this version of the GPL to prohibit the practice for those -products. If such problems arise substantially in other domains, we -stand ready to extend this provision to those domains in future versions -of the GPL, as needed to protect the freedom of users. - - Finally, every program is threatened constantly by software patents. -States should not allow patents to restrict development and use of -software on general-purpose computers, but in those that do, we wish to -avoid the special danger that patents applied to a free program could -make it effectively proprietary. To prevent this, the GPL assures that -patents cannot be used to render the program non-free. + An older license, called the Affero General Public License and +published by Affero, was designed to accomplish similar goals. This is +a different license, not a version of the Affero GPL, but Affero has +released a new version of the Affero GPL which permits relicensing under +this license. The precise terms and conditions for copying, distribution and modification follow. @@ -72,7 +60,7 @@ modification follow. 0. Definitions. - "This License" refers to version 3 of the GNU General Public License. + "This License" refers to version 3 of the GNU Affero General Public License. "Copyright" also means copyright-like laws that apply to other kinds of works, such as semiconductor masks. @@ -549,35 +537,45 @@ to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program. - 13. Use with the GNU Affero General Public License. + 13. Remote Network Interaction; Use with the GNU General Public License. + + Notwithstanding any other provision of this License, if you modify the +Program, your modified version must prominently offer all users +interacting with it remotely through a computer network (if your version +supports such interaction) an opportunity to receive the Corresponding +Source of your version by providing access to the Corresponding Source +from a network server at no charge, through some standard or customary +means of facilitating copying of software. This Corresponding Source +shall include the Corresponding Source for any work covered by version 3 +of the GNU General Public License that is incorporated pursuant to the +following paragraph. Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed -under version 3 of the GNU Affero General Public License into a single +under version 3 of the GNU General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, -but the special requirements of the GNU Affero General Public License, -section 13, concerning interaction through a network will apply to the -combination as such. +but the work with which it is combined will remain governed by version +3 of the GNU General Public License. 14. Revised Versions of this License. The Free Software Foundation may publish revised and/or new versions of -the GNU General Public License from time to time. Such new versions will -be similar in spirit to the present version, but may differ in detail to +the GNU Affero General Public License from time to time. Such new versions +will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. Each version is given a distinguishing version number. If the -Program specifies that a certain numbered version of the GNU General +Program specifies that a certain numbered version of the GNU Affero General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the -GNU General Public License, you may choose any version ever published +GNU Affero General Public License, you may choose any version ever published by the Free Software Foundation. If the Program specifies that a proxy can decide which future -versions of the GNU General Public License can be used, that proxy's +versions of the GNU Affero General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program. @@ -635,40 +633,29 @@ the "copyright" line and a pointer to where the full notice is found. Copyright (C) This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by + it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. + GNU Affero General Public License for more details. - You should have received a copy of the GNU General Public License + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . Also add information on how to contact you by electronic and paper mail. - If the program does terminal interaction, make it output a short -notice like this when it starts in an interactive mode: - - Copyright (C) - This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. - This is free software, and you are welcome to redistribute it - under certain conditions; type `show c' for details. - -The hypothetical commands `show w' and `show c' should show the appropriate -parts of the General Public License. Of course, your program's commands -might be different; for a GUI interface, you would use an "about box". + If your software can interact with users remotely through a computer +network, you should also make sure that it provides a way for users to +get its source. For example, if your program is a web application, its +interface could display a "Source" link that leads users to an archive +of the code. There are many ways you could offer source, and different +solutions will be better for different programs; see section 13 for the +specific requirements. You should also get your employer (if you work as a programmer) or school, if any, to sign a "copyright disclaimer" for the program, if necessary. -For more information on this, and how to apply and follow the GNU GPL, see +For more information on this, and how to apply and follow the GNU AGPL, see . - - The GNU General Public License does not permit incorporating your program -into proprietary programs. If your program is a subroutine library, you -may consider it more useful to permit linking proprietary applications with -the library. If this is what you want to do, use the GNU Lesser General -Public License instead of this License. But first, please read -. diff --git a/README.md b/README.md index 29a5910..531920f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # [universal-statuspage](https://git.sp-codes.de/samuel-p/universal-statuspage) -[![Build Status](https://ci.sp-codes.de/api/badges/samuel-p/universal-statuspage/status.svg)](https://ci.sp-codes.de/samuel-p/universal-statuspage) [![License](https://img.shields.io/badge/license-GPL--3.0-orange)](#license) [![Docker Pulls](https://img.shields.io/docker/pulls/samuelph/universal-statuspage)](https://hub.docker.com/r/samuelph/universal-statuspage) +[![Build Status](https://ci.sp-codes.de/api/badges/samuel-p/universal-statuspage/status.svg)](https://ci.sp-codes.de/samuel-p/universal-statuspage) [![License](https://img.shields.io/badge/license-AGPL--3.0-purple)](#license) [![Docker Pulls](https://img.shields.io/docker/pulls/samuelph/universal-statuspage)](https://hub.docker.com/r/samuelph/universal-statuspage) A simple, universal public Statuspage. [Demo](https://status.sp-codes.de) @@ -10,6 +10,6 @@ _tbd_ ## License -[![GNU GPLv3 Image](https://www.gnu.org/graphics/gplv3-127x51.png)](https://www.gnu.org/licenses/gpl-3.0) +[![GNU AGPLv3 Image](https://www.gnu.org/graphics/agplv3-155x51.png)](https://www.gnu.org/licenses/agpl-3.0) -universal-statuspage is Free Software: It is licensed under GNU GPL v3 (See [LICENSE](LICENSE) for more information). +universal-statuspage is Free Software: It is licensed under GNU AGPL v3 (See [LICENSE](LICENSE) for more information).