commit
2bea201bb3
41 changed files with 15481 additions and 0 deletions
@ -0,0 +1,3 @@ |
||||
.idea/ |
||||
*.iml |
||||
|
||||
@ -0,0 +1,16 @@ |
||||
# Editor configuration, see https://editorconfig.org |
||||
root = true |
||||
|
||||
[*] |
||||
charset = utf-8 |
||||
indent_style = space |
||||
indent_size = 2 |
||||
insert_final_newline = true |
||||
trim_trailing_whitespace = true |
||||
|
||||
[*.ts] |
||||
quote_type = single |
||||
|
||||
[*.md] |
||||
max_line_length = off |
||||
trim_trailing_whitespace = false |
||||
@ -0,0 +1,46 @@ |
||||
# See http://help.github.com/ignore-files/ for more about ignoring files. |
||||
|
||||
# compiled output |
||||
/dist |
||||
/tmp |
||||
/out-tsc |
||||
# Only exists if Bazel was run |
||||
/bazel-out |
||||
|
||||
# dependencies |
||||
/node_modules |
||||
|
||||
# profiling files |
||||
chrome-profiler-events*.json |
||||
speed-measure-plugin*.json |
||||
|
||||
# IDEs and editors |
||||
/.idea |
||||
.project |
||||
.classpath |
||||
.c9/ |
||||
*.launch |
||||
.settings/ |
||||
*.sublime-workspace |
||||
|
||||
# IDE - VSCode |
||||
.vscode/* |
||||
!.vscode/settings.json |
||||
!.vscode/tasks.json |
||||
!.vscode/launch.json |
||||
!.vscode/extensions.json |
||||
.history/* |
||||
|
||||
# misc |
||||
/.sass-cache |
||||
/connect.lock |
||||
/coverage |
||||
/libpeerconnection.log |
||||
npm-debug.log |
||||
yarn-error.log |
||||
testem.log |
||||
/typings |
||||
|
||||
# System Files |
||||
.DS_Store |
||||
Thumbs.db |
||||
@ -0,0 +1,27 @@ |
||||
# sp-status frontend |
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.4. |
||||
|
||||
## Development server |
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
||||
|
||||
## Code scaffolding |
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
||||
|
||||
## Build |
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
||||
|
||||
## Running end-to-end tests |
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). |
||||
|
||||
## Further help |
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
||||
@ -0,0 +1,130 @@ |
||||
{ |
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", |
||||
"version": 1, |
||||
"newProjectRoot": "projects", |
||||
"projects": { |
||||
"frontend": { |
||||
"projectType": "application", |
||||
"schematics": { |
||||
"@schematics/angular:component": { |
||||
"style": "scss" |
||||
} |
||||
}, |
||||
"root": "", |
||||
"sourceRoot": "src", |
||||
"prefix": "app", |
||||
"architect": { |
||||
"build": { |
||||
"builder": "@angular-devkit/build-angular:browser", |
||||
"options": { |
||||
"outputPath": "dist/frontend", |
||||
"index": "src/index.html", |
||||
"main": "src/main.ts", |
||||
"polyfills": "src/polyfills.ts", |
||||
"tsConfig": "tsconfig.app.json", |
||||
"aot": true, |
||||
"assets": [ |
||||
"src/favicon-operational.ico", |
||||
"src/favicon-outage.ico", |
||||
"src/favicon-maintenance.ico", |
||||
"src/assets" |
||||
], |
||||
"styles": [ |
||||
"src/styles.scss" |
||||
], |
||||
"scripts": [] |
||||
}, |
||||
"configurations": { |
||||
"production": { |
||||
"fileReplacements": [ |
||||
{ |
||||
"replace": "src/environments/environment.ts", |
||||
"with": "src/environments/environment.prod.ts" |
||||
} |
||||
], |
||||
"optimization": true, |
||||
"outputHashing": "all", |
||||
"sourceMap": false, |
||||
"extractCss": true, |
||||
"namedChunks": false, |
||||
"extractLicenses": true, |
||||
"vendorChunk": false, |
||||
"buildOptimizer": true, |
||||
"budgets": [ |
||||
{ |
||||
"type": "initial", |
||||
"maximumWarning": "2mb", |
||||
"maximumError": "5mb" |
||||
}, |
||||
{ |
||||
"type": "anyComponentStyle", |
||||
"maximumWarning": "6kb", |
||||
"maximumError": "10kb" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
"serve": { |
||||
"builder": "@angular-devkit/build-angular:dev-server", |
||||
"options": { |
||||
"browserTarget": "frontend:build" |
||||
}, |
||||
"configurations": { |
||||
"production": { |
||||
"browserTarget": "frontend:build:production" |
||||
} |
||||
} |
||||
}, |
||||
"extract-i18n": { |
||||
"builder": "@angular-devkit/build-angular:extract-i18n", |
||||
"options": { |
||||
"browserTarget": "frontend:build" |
||||
} |
||||
}, |
||||
"test": { |
||||
"builder": "@angular-devkit/build-angular:karma", |
||||
"options": { |
||||
"main": "src/test.ts", |
||||
"polyfills": "src/polyfills.ts", |
||||
"tsConfig": "tsconfig.spec.json", |
||||
"karmaConfig": "karma.conf.js", |
||||
"assets": [ |
||||
"src/favicon.ico", |
||||
"src/assets" |
||||
], |
||||
"styles": [ |
||||
"src/styles.scss" |
||||
], |
||||
"scripts": [] |
||||
} |
||||
}, |
||||
"lint": { |
||||
"builder": "@angular-devkit/build-angular:tslint", |
||||
"options": { |
||||
"tsConfig": [ |
||||
"tsconfig.app.json", |
||||
"tsconfig.spec.json", |
||||
"e2e/tsconfig.json" |
||||
], |
||||
"exclude": [ |
||||
"**/node_modules/**" |
||||
] |
||||
} |
||||
}, |
||||
"e2e": { |
||||
"builder": "@angular-devkit/build-angular:protractor", |
||||
"options": { |
||||
"protractorConfig": "e2e/protractor.conf.js", |
||||
"devServerTarget": "frontend:serve" |
||||
}, |
||||
"configurations": { |
||||
"production": { |
||||
"devServerTarget": "frontend:serve:production" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}}, |
||||
"defaultProject": "frontend" |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. |
||||
# For additional information regarding the format and rule options, please see: |
||||
# https://github.com/browserslist/browserslist#queries |
||||
|
||||
# You can see what browsers were selected by your queries by running: |
||||
# npx browserslist |
||||
|
||||
> 0.5% |
||||
last 2 versions |
||||
Firefox ESR |
||||
not dead |
||||
not IE 9-11 # For IE 9-11 support, remove 'not'. |
||||
@ -0,0 +1,32 @@ |
||||
// @ts-check
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter'); |
||||
|
||||
/** |
||||
* @type { import("protractor").Config } |
||||
*/ |
||||
exports.config = { |
||||
allScriptsTimeout: 11000, |
||||
specs: [ |
||||
'./src/**/*.e2e-spec.ts' |
||||
], |
||||
capabilities: { |
||||
browserName: 'chrome' |
||||
}, |
||||
directConnect: true, |
||||
baseUrl: 'http://localhost:4200/', |
||||
framework: 'jasmine', |
||||
jasmineNodeOpts: { |
||||
showColors: true, |
||||
defaultTimeoutInterval: 30000, |
||||
print: function() {} |
||||
}, |
||||
onPrepare() { |
||||
require('ts-node').register({ |
||||
project: require('path').join(__dirname, './tsconfig.json') |
||||
}); |
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); |
||||
} |
||||
}; |
||||
@ -0,0 +1,23 @@ |
||||
import { AppPage } from './app.po'; |
||||
import { browser, logging } from 'protractor'; |
||||
|
||||
describe('workspace-project App', () => { |
||||
let page: AppPage; |
||||
|
||||
beforeEach(() => { |
||||
page = new AppPage(); |
||||
}); |
||||
|
||||
it('should display welcome message', () => { |
||||
page.navigateTo(); |
||||
expect(page.getTitleText()).toEqual('frontend app is running!'); |
||||
}); |
||||
|
||||
afterEach(async () => { |
||||
// Assert that there are no errors emitted from the browser
|
||||
const logs = await browser.manage().logs().get(logging.Type.BROWSER); |
||||
expect(logs).not.toContain(jasmine.objectContaining({ |
||||
level: logging.Level.SEVERE, |
||||
} as logging.Entry)); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,11 @@ |
||||
import { browser, by, element } from 'protractor'; |
||||
|
||||
export class AppPage { |
||||
navigateTo(): Promise<unknown> { |
||||
return browser.get(browser.baseUrl) as Promise<unknown>; |
||||
} |
||||
|
||||
getTitleText(): Promise<string> { |
||||
return element(by.css('app-root .content span')).getText() as Promise<string>; |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"extends": "../tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../out-tsc/e2e", |
||||
"module": "commonjs", |
||||
"target": "es5", |
||||
"types": [ |
||||
"jasmine", |
||||
"jasminewd2", |
||||
"node" |
||||
] |
||||
} |
||||
} |
||||
@ -0,0 +1,32 @@ |
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) { |
||||
config.set({ |
||||
basePath: '', |
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'], |
||||
plugins: [ |
||||
require('karma-jasmine'), |
||||
require('karma-chrome-launcher'), |
||||
require('karma-jasmine-html-reporter'), |
||||
require('karma-coverage-istanbul-reporter'), |
||||
require('@angular-devkit/build-angular/plugins/karma') |
||||
], |
||||
client: { |
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
}, |
||||
coverageIstanbulReporter: { |
||||
dir: require('path').join(__dirname, './coverage/frontend'), |
||||
reports: ['html', 'lcovonly', 'text-summary'], |
||||
fixWebpackSourcePaths: true |
||||
}, |
||||
reporters: ['progress', 'kjhtml'], |
||||
port: 9876, |
||||
colors: true, |
||||
logLevel: config.LOG_INFO, |
||||
autoWatch: true, |
||||
browsers: ['Chrome'], |
||||
singleRun: false, |
||||
restartOnFileChange: true |
||||
}); |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,51 @@ |
||||
{ |
||||
"name": "sp-status", |
||||
"version": "0.0.1", |
||||
"scripts": { |
||||
"ng": "ng", |
||||
"start": "ng serve", |
||||
"build": "ng build", |
||||
"test": "ng test", |
||||
"lint": "ng lint", |
||||
"e2e": "ng e2e" |
||||
}, |
||||
"private": true, |
||||
"dependencies": { |
||||
"@angular/animations": "~9.1.4", |
||||
"@angular/cdk": "^9.2.2", |
||||
"@angular/common": "~9.1.4", |
||||
"@angular/compiler": "~9.1.4", |
||||
"@angular/core": "~9.1.4", |
||||
"@angular/forms": "~9.1.4", |
||||
"@angular/material": "^9.2.2", |
||||
"@angular/platform-browser": "~9.1.4", |
||||
"@angular/platform-browser-dynamic": "~9.1.4", |
||||
"@angular/router": "~9.1.4", |
||||
"@fortawesome/fontawesome-free": "^5.13.0", |
||||
"bootstrap": "^4.4.1", |
||||
"rxjs": "~6.5.4", |
||||
"tslib": "^1.10.0", |
||||
"zone.js": "~0.10.2" |
||||
}, |
||||
"devDependencies": { |
||||
"@angular-devkit/build-angular": "~0.901.4", |
||||
"@angular/cli": "~9.1.4", |
||||
"@angular/compiler-cli": "~9.1.4", |
||||
"@angular/language-service": "~9.1.4", |
||||
"@types/node": "^12.11.1", |
||||
"@types/jasmine": "~3.5.0", |
||||
"@types/jasminewd2": "~2.0.3", |
||||
"codelyzer": "^5.1.2", |
||||
"jasmine-core": "~3.5.0", |
||||
"jasmine-spec-reporter": "~4.2.1", |
||||
"karma": "~5.0.0", |
||||
"karma-chrome-launcher": "~3.1.0", |
||||
"karma-coverage-istanbul-reporter": "~2.1.0", |
||||
"karma-jasmine": "~3.0.1", |
||||
"karma-jasmine-html-reporter": "^1.4.2", |
||||
"protractor": "~5.4.3", |
||||
"ts-node": "~8.3.0", |
||||
"tslint": "~6.1.0", |
||||
"typescript": "~3.8.3" |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
export type State = 'operational' | 'outage' | 'maintenance'; // ok, alerting, paused
|
||||
|
||||
export interface ApiResponse { |
||||
state: State; |
||||
groups: Group[]; |
||||
} |
||||
|
||||
export interface Group { |
||||
id: string; |
||||
name: string; |
||||
state: State; |
||||
services: Service[]; |
||||
} |
||||
|
||||
export interface Service { |
||||
id: string; |
||||
name: string; |
||||
url: string; |
||||
state: State; |
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,53 @@ |
||||
import {Injectable} from '@angular/core'; |
||||
import {Observable, of} from "rxjs"; |
||||
import {ApiResponse} from "../_data/data"; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class ApiService { |
||||
constructor() { |
||||
} |
||||
|
||||
public getServiceStates(): Observable<ApiResponse> { |
||||
return of({ |
||||
state: "maintenance", |
||||
groups: [{ |
||||
id: 'default', |
||||
name: 'Some Group', |
||||
state: "outage", |
||||
services: [{ |
||||
id: 'nextcloud', |
||||
name: 'Nextcloud', |
||||
url: "https://sp-codes.de", |
||||
state: "operational" |
||||
}, { |
||||
id: 'synapse', |
||||
name: 'Synapse', |
||||
url: "https://sp-codes.de", |
||||
state: "outage" |
||||
}, { |
||||
id: 'searx', |
||||
name: 'Searx', |
||||
url: "https://sp-codes.de", |
||||
state: "maintenance" |
||||
}] |
||||
}, { |
||||
id: 'test', |
||||
name: 'Test', |
||||
state: "operational", |
||||
services: [{ |
||||
id: 'nextcloud', |
||||
name: 'Nextcloud', |
||||
url: "https://sp-codes.de", |
||||
state: "operational" |
||||
}, { |
||||
id: 'synapse', |
||||
name: 'Synapse', |
||||
url: "https://sp-codes.de", |
||||
state: "operational" |
||||
}] |
||||
}] |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import {NgModule} from '@angular/core'; |
||||
import {RouterModule, Routes} from '@angular/router'; |
||||
import {StatusComponent} from "./status/status.component"; |
||||
|
||||
|
||||
const routes: Routes = [{ |
||||
path: '', |
||||
component: StatusComponent |
||||
}]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forRoot(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class AppRoutingModule { |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
<div class="box"> |
||||
<header class="container pt-4"> |
||||
<h1>sp-status</h1> |
||||
<h3>Services hosted by sp-codes</h3> |
||||
</header> |
||||
|
||||
<main class="container"> |
||||
<router-outlet></router-outlet> |
||||
</main> |
||||
|
||||
<footer> |
||||
<div class="container"> |
||||
Made with <span class="fas fa-heart"></span> by <a href="https://sp-codes.de">sp-codes</a> |
||||
</div> |
||||
</footer> |
||||
</div> |
||||
@ -0,0 +1,30 @@ |
||||
.box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
} |
||||
|
||||
header { |
||||
|
||||
} |
||||
|
||||
main { |
||||
flex: 1 0 auto; |
||||
padding-bottom: 1rem; |
||||
} |
||||
|
||||
footer { |
||||
padding: 30px 0; |
||||
border-top: 1px solid #e8e8e8; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
a { |
||||
color: #cccccc; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
color: #ffffff; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import { TestBed, async } from '@angular/core/testing'; |
||||
import { RouterTestingModule } from '@angular/router/testing'; |
||||
import { AppComponent } from './app.component'; |
||||
|
||||
describe('AppComponent', () => { |
||||
beforeEach(async(() => { |
||||
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 'frontend'`, () => { |
||||
const fixture = TestBed.createComponent(AppComponent); |
||||
const app = fixture.componentInstance; |
||||
expect(app.title).toEqual('frontend'); |
||||
}); |
||||
|
||||
it('should render title', () => { |
||||
const fixture = TestBed.createComponent(AppComponent); |
||||
fixture.detectChanges(); |
||||
const compiled = fixture.nativeElement; |
||||
expect(compiled.querySelector('.content span').textContent).toContain('frontend app is running!'); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,9 @@ |
||||
import { Component } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-root', |
||||
templateUrl: './app.component.html', |
||||
styleUrls: ['./app.component.scss'] |
||||
}) |
||||
export class AppComponent { |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import { BrowserModule } from '@angular/platform-browser'; |
||||
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 {MatListModule} from "@angular/material/list"; |
||||
|
||||
@NgModule({ |
||||
declarations: [ |
||||
AppComponent, |
||||
StatusComponent |
||||
], |
||||
imports: [ |
||||
BrowserModule, |
||||
AppRoutingModule, |
||||
BrowserAnimationsModule, |
||||
MatExpansionModule, |
||||
MatListModule |
||||
], |
||||
providers: [], |
||||
bootstrap: [AppComponent] |
||||
}) |
||||
export class AppModule { } |
||||
@ -0,0 +1,24 @@ |
||||
<mat-accordion [multi]="true"> |
||||
<mat-expansion-panel *ngFor="let group of groups" [expanded]="true"> |
||||
<mat-expansion-panel-header> |
||||
<mat-panel-title><i [class]="stateClasses[group.state]"></i> {{group.name}}</mat-panel-title> |
||||
<!-- <mat-panel-description>--> |
||||
<!-- <span class="text-capitalize">{{getGroupState(group.services)}}</span>--> |
||||
<!-- </mat-panel-description>--> |
||||
</mat-expansion-panel-header> |
||||
|
||||
<mat-list> |
||||
<a *ngFor="let service of group.services; last as last" mat-list-item [href]="service.url" target="_blank"> |
||||
<div matLine class="d-flex"> |
||||
<i [class]="stateClasses[service.state]"></i> |
||||
<span>{{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> |
||||
|
||||
<div class="text-right mt-3"><small>Last updated {{lastUpdated | date:'HH:mm:ss'}}</small></div> |
||||
@ -0,0 +1,22 @@ |
||||
.operational { |
||||
color: #7ed321; |
||||
} |
||||
|
||||
.outage { |
||||
color: #ff6f6f; |
||||
} |
||||
|
||||
.maintenance { |
||||
color: #f7ca18; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
outline: none; |
||||
} |
||||
|
||||
mat-panel-title { |
||||
.fa, .fas, .far, .fal, .fad, .fab { |
||||
line-height: inherit; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { StatusComponent } from './status.component'; |
||||
|
||||
describe('StatusComponent', () => { |
||||
let component: StatusComponent; |
||||
let fixture: ComponentFixture<StatusComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ StatusComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(StatusComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,45 @@ |
||||
import {Component, Inject, OnDestroy, OnInit} 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 {Meta} from "@angular/platform-browser"; |
||||
import {DOCUMENT} from "@angular/common"; |
||||
|
||||
@Component({ |
||||
selector: 'app-status', |
||||
templateUrl: './status.component.html', |
||||
styleUrls: ['./status.component.scss'] |
||||
}) |
||||
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' |
||||
}; |
||||
|
||||
destroyed$ = new Subject(); |
||||
groups: Group[]; |
||||
lastUpdated: Date; |
||||
|
||||
constructor(private api: ApiService, @Inject(DOCUMENT) private document: Document) { |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
interval(30000).pipe( |
||||
startWith(0), |
||||
takeUntil(this.destroyed$), |
||||
flatMap(() => this.api.getServiceStates()) |
||||
).subscribe(response => { |
||||
const favicon: HTMLLinkElement = document.getElementById('favicon') as HTMLLinkElement; |
||||
favicon.href = `favicon-${response.state}.ico`; |
||||
this.groups = response.groups; |
||||
this.lastUpdated = new Date(); |
||||
}); |
||||
} |
||||
|
||||
ngOnDestroy(): void { |
||||
this.destroyed$.next(); |
||||
this.destroyed$.complete(); |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
export const environment = { |
||||
production: true |
||||
}; |
||||
@ -0,0 +1,16 @@ |
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = { |
||||
production: false |
||||
}; |
||||
|
||||
/* |
||||
* For easier debugging in development mode, you can import the following file |
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. |
||||
* |
||||
* This import should be commented out in production mode because it will have a negative impact |
||||
* on performance if an error is thrown. |
||||
*/ |
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,15 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>sp-status</title> |
||||
<base href="/"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<link id="favicon" rel="icon" type="image/x-icon" href="favicon-operational.ico"> |
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> |
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
||||
</head> |
||||
<body class="mat-typography"> |
||||
<app-root></app-root> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,12 @@ |
||||
import { enableProdMode } from '@angular/core'; |
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
||||
|
||||
import { AppModule } from './app/app.module'; |
||||
import { environment } from './environments/environment'; |
||||
|
||||
if (environment.production) { |
||||
enableProdMode(); |
||||
} |
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule) |
||||
.catch(err => console.error(err)); |
||||
@ -0,0 +1,63 @@ |
||||
/** |
||||
* This file includes polyfills needed by Angular and is loaded before the app. |
||||
* You can add your own extra polyfills to this file. |
||||
* |
||||
* This file is divided into 2 sections: |
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. |
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main |
||||
* file. |
||||
* |
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that |
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), |
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. |
||||
* |
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/ |
||||
|
||||
/*************************************************************************************************** |
||||
* BROWSER POLYFILLS |
||||
*/ |
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */ |
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** |
||||
* Web Animations `@angular/platform-browser/animations` |
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. |
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). |
||||
*/ |
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/** |
||||
* By default, zone.js will patch all possible macroTask and DomEvents |
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags |
||||
* because those flags need to be set before `zone.js` being loaded, and webpack |
||||
* will put import in the top of bundle, so user need to create a separate file |
||||
* in this directory (for example: zone-flags.ts), and put the following flags |
||||
* into that file, and then add the following code before importing zone.js. |
||||
* import './zone-flags'; |
||||
* |
||||
* The flags allowed in zone-flags.ts are listed here. |
||||
* |
||||
* The following flags will work for all browsers. |
||||
* |
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
* |
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js |
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge |
||||
* |
||||
* (window as any).__Zone_enable_cross_context_check = true; |
||||
* |
||||
*/ |
||||
|
||||
/*************************************************************************************************** |
||||
* Zone JS is required by default for Angular itself. |
||||
*/ |
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/*************************************************************************************************** |
||||
* APPLICATION IMPORTS |
||||
*/ |
||||
@ -0,0 +1,245 @@ |
||||
@import "~bootstrap/scss/functions"; |
||||
@import "~bootstrap/scss/variables"; |
||||
@import "~bootstrap/scss/mixins"; |
||||
@import "~bootstrap/scss/utilities"; |
||||
@import "~bootstrap/scss/bootstrap-grid"; |
||||
@import "~@fortawesome/fontawesome-free/css/all.css"; |
||||
|
||||
@import '~@angular/material/theming'; |
||||
|
||||
$fontConfig: ( |
||||
display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em), |
||||
display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em), |
||||
display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em), |
||||
display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em), |
||||
headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em), |
||||
title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em), |
||||
subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em), |
||||
subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em), |
||||
body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em), |
||||
body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em), |
||||
button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em), |
||||
caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), |
||||
input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px) |
||||
); |
||||
|
||||
// Foreground Elements |
||||
|
||||
// Light Theme Text |
||||
$dark-text: #000000; |
||||
$dark-primary-text: rgba($dark-text, 0.87); |
||||
$dark-accent-text: rgba($dark-primary-text, 0.54); |
||||
$dark-disabled-text: rgba($dark-primary-text, 0.38); |
||||
$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), |
||||
slider-off-active: $dark-disabled-text, |
||||
); |
||||
|
||||
// Dark Theme text |
||||
$light-text: #ffffff; |
||||
$light-primary-text: $light-text; |
||||
$light-accent-text: rgba($light-primary-text, 0.7); |
||||
$light-disabled-text: rgba($light-primary-text, 0.5); |
||||
$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), |
||||
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); |
||||
|
||||
$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, |
||||
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, |
||||
); |
||||
|
||||
// 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); |
||||
|
||||
// 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, |
||||
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, |
||||
); |
||||
|
||||
// Compute font config |
||||
@include mat-core($fontConfig); |
||||
|
||||
// Theme Config |
||||
|
||||
body { |
||||
--primary-color: #fdd835; |
||||
--primary-lighter-color: #fef3c2; |
||||
--primary-darker-color: #fcc822; |
||||
--text-primary-color: #{$dark-primary-text}; |
||||
--text-primary-lighter-color: #{$dark-primary-text}; |
||||
--text-primary-darker-color: #{$dark-primary-text}; |
||||
} |
||||
|
||||
$mat-primary: ( |
||||
main: #fdd835, |
||||
lighter: #fef3c2, |
||||
darker: #fcc822, |
||||
200: #fdd835, // For slide toggle, |
||||
contrast : ( |
||||
main: $dark-primary-text, |
||||
lighter: $dark-primary-text, |
||||
darker: $dark-primary-text, |
||||
) |
||||
); |
||||
$theme-primary: mat-palette($mat-primary, main, lighter, darker); |
||||
|
||||
body { |
||||
--accent-color: #797979; |
||||
--accent-lighter-color: #d7d7d7; |
||||
--accent-darker-color: #5c5c5c; |
||||
--text-accent-color: #{$light-primary-text}; |
||||
--text-accent-lighter-color: #{$dark-primary-text}; |
||||
--text-accent-darker-color: #{$light-primary-text}; |
||||
} |
||||
|
||||
$mat-accent: ( |
||||
main: #797979, |
||||
lighter: #d7d7d7, |
||||
darker: #5c5c5c, |
||||
200: #797979, // For slide toggle, |
||||
contrast : ( |
||||
main: $light-primary-text, |
||||
lighter: $dark-primary-text, |
||||
darker: $light-primary-text, |
||||
) |
||||
); |
||||
$theme-accent: mat-palette($mat-accent, main, lighter, darker); |
||||
|
||||
body { |
||||
--warn-color: #c62828; |
||||
--warn-lighter-color: #eebfbf; |
||||
--warn-darker-color: #b11818; |
||||
--text-warn-color: #{$light-primary-text}; |
||||
--text-warn-lighter-color: #{$dark-primary-text}; |
||||
--text-warn-darker-color: #{$light-primary-text}; |
||||
} |
||||
|
||||
$mat-warn: ( |
||||
main: #c62828, |
||||
lighter: #eebfbf, |
||||
darker: #b11818, |
||||
200: #c62828, // For slide toggle, |
||||
contrast : ( |
||||
main: $light-primary-text, |
||||
lighter: $dark-primary-text, |
||||
darker: $light-primary-text, |
||||
) |
||||
); |
||||
$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); |
||||
|
||||
// Theme Init |
||||
@include angular-material-theme($theme); |
||||
|
||||
.theme-alternate { |
||||
@include angular-material-theme($altTheme); |
||||
} |
||||
|
||||
// Specific component overrides, pieces that are not in line with the general theming |
||||
|
||||
// Handle buttons appropriately, with respect to line-height |
||||
.mat-raised-button, .mat-stroked-button, .mat-flat-button { |
||||
padding: 0 1.15em; |
||||
margin: 0 .65em; |
||||
min-width: 3em; |
||||
line-height: 36.4px |
||||
} |
||||
|
||||
.mat-standard-chip { |
||||
padding: .5em .85em; |
||||
min-height: 2.5em; |
||||
} |
||||
|
||||
html, body { |
||||
height: 100%; |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
font-family: Roboto, "Helvetica Neue", sans-serif; |
||||
background-color: #222222; |
||||
color: #ffffff; |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing'; |
||||
import { getTestBed } from '@angular/core/testing'; |
||||
import { |
||||
BrowserDynamicTestingModule, |
||||
platformBrowserDynamicTesting |
||||
} from '@angular/platform-browser-dynamic/testing'; |
||||
|
||||
declare const require: { |
||||
context(path: string, deep?: boolean, filter?: RegExp): { |
||||
keys(): string[]; |
||||
<T>(id: string): T; |
||||
}; |
||||
}; |
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment( |
||||
BrowserDynamicTestingModule, |
||||
platformBrowserDynamicTesting() |
||||
); |
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/); |
||||
// And load the modules.
|
||||
context.keys().map(context); |
||||
@ -0,0 +1,14 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "./out-tsc/app", |
||||
"types": [] |
||||
}, |
||||
"files": [ |
||||
"src/main.ts", |
||||
"src/polyfills.ts" |
||||
], |
||||
"include": [ |
||||
"src/**/*.d.ts" |
||||
] |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
{ |
||||
"compileOnSave": false, |
||||
"compilerOptions": { |
||||
"baseUrl": "./", |
||||
"outDir": "./dist/out-tsc", |
||||
"sourceMap": true, |
||||
"declaration": false, |
||||
"downlevelIteration": true, |
||||
"experimentalDecorators": true, |
||||
"module": "esnext", |
||||
"moduleResolution": "node", |
||||
"importHelpers": true, |
||||
"target": "es2015", |
||||
"lib": [ |
||||
"es2018", |
||||
"dom" |
||||
] |
||||
}, |
||||
"angularCompilerOptions": { |
||||
"fullTemplateTypeCheck": true, |
||||
"strictInjectionParameters": true |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "./out-tsc/spec", |
||||
"types": [ |
||||
"jasmine", |
||||
"node" |
||||
] |
||||
}, |
||||
"files": [ |
||||
"src/test.ts", |
||||
"src/polyfills.ts" |
||||
], |
||||
"include": [ |
||||
"src/**/*.spec.ts", |
||||
"src/**/*.d.ts" |
||||
] |
||||
} |
||||
@ -0,0 +1,148 @@ |
||||
{ |
||||
"extends": "tslint:recommended", |
||||
"rules": { |
||||
"align": { |
||||
"options": [ |
||||
"parameters", |
||||
"statements" |
||||
] |
||||
}, |
||||
"array-type": false, |
||||
"arrow-return-shorthand": true, |
||||
"curly": true, |
||||
"deprecation": { |
||||
"severity": "warning" |
||||
}, |
||||
"component-class-suffix": true, |
||||
"contextual-lifecycle": true, |
||||
"directive-class-suffix": true, |
||||
"directive-selector": [ |
||||
true, |
||||
"attribute", |
||||
"app", |
||||
"camelCase" |
||||
], |
||||
"component-selector": [ |
||||
true, |
||||
"element", |
||||
"app", |
||||
"kebab-case" |
||||
], |
||||
"eofline": true, |
||||
"import-blacklist": [ |
||||
true, |
||||
"rxjs/Rx" |
||||
], |
||||
"import-spacing": true, |
||||
"indent": { |
||||
"options": [ |
||||
"spaces" |
||||
] |
||||
}, |
||||
"max-classes-per-file": false, |
||||
"max-line-length": [ |
||||
true, |
||||
140 |
||||
], |
||||
"member-ordering": [ |
||||
true, |
||||
{ |
||||
"order": [ |
||||
"static-field", |
||||
"instance-field", |
||||
"static-method", |
||||
"instance-method" |
||||
] |
||||
} |
||||
], |
||||
"no-console": [ |
||||
true, |
||||
"debug", |
||||
"info", |
||||
"time", |
||||
"timeEnd", |
||||
"trace" |
||||
], |
||||
"no-empty": false, |
||||
"no-inferrable-types": [ |
||||
true, |
||||
"ignore-params" |
||||
], |
||||
"no-non-null-assertion": true, |
||||
"no-redundant-jsdoc": true, |
||||
"no-switch-case-fall-through": true, |
||||
"no-var-requires": false, |
||||
"object-literal-key-quotes": [ |
||||
true, |
||||
"as-needed" |
||||
], |
||||
"quotemark": [ |
||||
true, |
||||
"single" |
||||
], |
||||
"semicolon": { |
||||
"options": [ |
||||
"always" |
||||
] |
||||
}, |
||||
"space-before-function-paren": { |
||||
"options": { |
||||
"anonymous": "never", |
||||
"asyncArrow": "always", |
||||
"constructor": "never", |
||||
"method": "never", |
||||
"named": "never" |
||||
} |
||||
}, |
||||
"typedef-whitespace": { |
||||
"options": [ |
||||
{ |
||||
"call-signature": "nospace", |
||||
"index-signature": "nospace", |
||||
"parameter": "nospace", |
||||
"property-declaration": "nospace", |
||||
"variable-declaration": "nospace" |
||||
}, |
||||
{ |
||||
"call-signature": "onespace", |
||||
"index-signature": "onespace", |
||||
"parameter": "onespace", |
||||
"property-declaration": "onespace", |
||||
"variable-declaration": "onespace" |
||||
} |
||||
] |
||||
}, |
||||
"variable-name": { |
||||
"options": [ |
||||
"ban-keywords", |
||||
"check-format", |
||||
"allow-pascal-case" |
||||
] |
||||
}, |
||||
"whitespace": { |
||||
"options": [ |
||||
"check-branch", |
||||
"check-decl", |
||||
"check-operator", |
||||