1
0
mirror of https://github.com/containous/traefik.git synced 2024-12-22 13:34:03 +03:00

chore(webui): format code with prettier

This commit is contained in:
Antoine CARON 2019-02-05 18:18:04 +01:00 committed by Traefiker Bot
parent 115ddc6a4a
commit c5c8382742
32 changed files with 1525 additions and 827 deletions

3
webui/.prettierrc Normal file
View File

@ -0,0 +1,3 @@
{
"singleQuote": true
}

View File

@ -14,3 +14,4 @@ COPY . $WEBUI_DIR/
EXPOSE 8080
RUN yarn lint
RUN yarn format --check

View File

@ -13,6 +13,7 @@
"build": "ng build --prod --no-delete-output-path --output-path ../static/",
"test": "ng test",
"lint": "ng lint",
"format": "yarn prettier 'src/**/*.{js,ts,html}' '*.md'",
"e2e": "ng e2e"
},
"dependencies": {
@ -34,9 +35,9 @@
"date-fns": "^1.29.0",
"lodash": "^4.17.5",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.9.0",
"zone.js": "^0.8.19",
"rxjs-compat": "^6.0.0-rc.0"
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
@ -54,9 +55,11 @@
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"prettier": "^1.16.4",
"protractor": "~5.4.2",
"ts-node": "~8.0.2",
"tslint": "~5.12.1",
"tslint-config-prettier": "^1.18.0",
"typescript": "~3.2.4"
}
}
}

View File

@ -5,6 +5,7 @@ Access to Traefik Web UI, ex: http://localhost:8080
## Interface
Traefik Web UI provide 2 types of informations:
- Providers with their backends and frontends information.
- Health of the web server.
@ -27,9 +28,11 @@ make generate-webui # Generate static contents in `traefik/static/` folder.
- Go to the directory `webui`
- To install dependencies, execute the following commands:
- `yarn install`
- Build static Web UI, execute the following command:
- `yarn run build`
- Static contents are build in the directory `static`
@ -44,7 +47,6 @@ make generate-webui # Generate static contents in `traefik/static/` folder.
- all images will be optimized at build
- bundle JavaScript in one file
## How to edit (only for frontends developer)
**Don't change manually the files in the directory `static`**

View File

@ -1,17 +1,12 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
}));

View File

@ -7,4 +7,4 @@ import { Component } from '@angular/core';
<router-outlet></router-outlet>
`
})
export class AppComponent { }
export class AppComponent {}

View File

@ -38,14 +38,11 @@ import { WindowService } from './services/window.service';
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{path: '', component: ProvidersComponent, pathMatch: 'full'},
{path: 'status', component: HealthComponent}
{ path: '', component: ProvidersComponent, pathMatch: 'full' },
{ path: 'status', component: HealthComponent }
])
],
providers: [
ApiService,
WindowService
],
providers: [ApiService, WindowService],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}

View File

@ -2,6 +2,6 @@
<div class="loading-text" [class.is-hidden]="!loading">
<span>
<span>Loading, please wait...</span>
<img src="./assets/images/loader.svg" class="main-loader">
<img src="./assets/images/loader.svg" class="main-loader" />
</span>
</div>

View File

@ -1,7 +1,7 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BarChartComponent } from './bar-chart.component';
import { WindowService } from '../../services/window.service';
import { BarChartComponent } from './bar-chart.component';
describe('BarChartComponent', () => {
let component: BarChartComponent;
@ -9,10 +9,9 @@ describe('BarChartComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BarChartComponent ],
providers: [{provide: WindowService, useInstance: {}}]
})
.compileComponents();
declarations: [BarChartComponent],
providers: [{ provide: WindowService, useInstance: {} }]
}).compileComponents();
}));
beforeEach(() => {
@ -27,5 +26,4 @@ describe('BarChartComponent', () => {
it('should initially go to loading state', () => {
expect(component.loading).toBeTruthy();
});
});

View File

@ -1,4 +1,11 @@
import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import {
Component,
ElementRef,
Input,
OnChanges,
OnInit,
SimpleChanges
} from '@angular/core';
import { axisBottom, axisLeft, max, scaleBand, scaleLinear, select } from 'd3';
import { format } from 'd3-format';
import * as _ from 'lodash';
@ -18,19 +25,22 @@ export class BarChartComponent implements OnInit, OnChanges {
g: any;
width: number;
height: number;
margin = {top: 40, right: 40, bottom: 40, left: 40};
margin = { top: 40, right: 40, bottom: 40, left: 40 };
loading: boolean;
data: any[];
previousData: any[];
constructor(public elementRef: ElementRef, public windowService: WindowService) {
constructor(
public elementRef: ElementRef,
public windowService: WindowService
) {
this.loading = true;
}
ngOnInit() {
this.barChartEl = this.elementRef.nativeElement.querySelector('.bar-chart');
this.setup();
setTimeout(() => this.loading = false, 1000);
setTimeout(() => (this.loading = false), 1000);
this.windowService.resize.subscribe(w => this.draw());
}
@ -49,39 +59,44 @@ export class BarChartComponent implements OnInit, OnChanges {
}
setup(): void {
this.width = this.barChartEl.clientWidth - this.margin.left - this.margin.right;
this.height = this.barChartEl.clientHeight - this.margin.top - this.margin.bottom;
this.width =
this.barChartEl.clientWidth - this.margin.left - this.margin.right;
this.height =
this.barChartEl.clientHeight - this.margin.top - this.margin.bottom;
this.svg = select(this.barChartEl)
.append('svg')
.attr('width', this.width + this.margin.left + this.margin.right)
.attr('height', this.height + this.margin.top + this.margin.bottom);
this.g = this.svg.append('g')
this.g = this.svg
.append('g')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
this.x = scaleBand().padding(0.05);
this.y = scaleLinear();
this.g.append('g')
.attr('class', 'axis axis--x');
this.g.append('g').attr('class', 'axis axis--x');
this.g.append('g')
.attr('class', 'axis axis--y');
this.g.append('g').attr('class', 'axis axis--y');
}
draw(): void {
if (this.barChartEl.clientWidth === 0 || this.barChartEl.clientHeight === 0) {
if (
this.barChartEl.clientWidth === 0 ||
this.barChartEl.clientHeight === 0
) {
this.previousData = [];
} else {
this.width = this.barChartEl.clientWidth - this.margin.left - this.margin.right;
this.height = this.barChartEl.clientHeight - this.margin.top - this.margin.bottom;
this.width =
this.barChartEl.clientWidth - this.margin.left - this.margin.right;
this.height =
this.barChartEl.clientHeight - this.margin.top - this.margin.bottom;
}
this.x.domain(this.data.map((d: any) => d.code));
this.y.domain([0, max(this.data, (d: any) => d.count)]);
this.svg
.attr('width', this.width + this.margin.left + this.margin.right)
.attr('height', this.height + this.margin.top + this.margin.bottom);
@ -89,28 +104,38 @@ export class BarChartComponent implements OnInit, OnChanges {
this.x.rangeRound([0, this.width]);
this.y.rangeRound([this.height, 0]);
this.g.select('.axis--x')
this.g
.select('.axis--x')
.attr('transform', `translate(0, ${this.height})`)
.call(axisBottom(this.x));
this.g.select('.axis--y')
.call(axisLeft(this.y).tickFormat(format('~s')).tickSize(-this.width));
this.g.select('.axis--y').call(
axisLeft(this.y)
.tickFormat(format('~s'))
.tickSize(-this.width)
);
// Clean previous graph
this.g.selectAll('.bar').remove();
const bars = this.g.selectAll('.bar').data(this.data);
bars.enter()
bars
.enter()
.append('rect')
.attr('class', 'bar')
.style('fill', (d: any) => 'hsl(' + Math.floor(((d.code - 100) * 310 / 427) + 50) + ', 50%, 50%)')
.style(
'fill',
(d: any) =>
'hsl(' + Math.floor(((d.code - 100) * 310) / 427 + 50) + ', 50%, 50%)'
)
.attr('x', (d: any) => this.x(d.code))
.attr('y', (d: any) => this.y(d.count))
.attr('width', this.x.bandwidth())
.attr('height', (d: any) => (this.height - this.y(d.count)) < 0 ? 0 : this.height - this.y(d.count));
.attr('height', (d: any) =>
this.height - this.y(d.count) < 0 ? 0 : this.height - this.y(d.count)
);
bars.exit().remove();
}
}

View File

@ -2,6 +2,6 @@
<div class="loading-text line-chart-loading" [class.is-hidden]="!loading">
<span>
<span>Loading, please wait...</span>
<img src="./assets/images/loader.svg" class="main-loader">
<img src="./assets/images/loader.svg" class="main-loader" />
</span>
</div>

View File

@ -1,4 +1,11 @@
import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import {
Component,
ElementRef,
Input,
OnChanges,
OnInit,
SimpleChanges
} from '@angular/core';
import {
axisBottom,
axisLeft,
@ -21,7 +28,7 @@ import { WindowService } from '../../services/window.service';
templateUrl: 'line-chart.component.html'
})
export class LineChartComponent implements OnChanges, OnInit {
@Input() value: { count: number, date: string };
@Input() value: { count: number; date: string };
firstDisplay: boolean;
dirty: boolean;
@ -42,14 +49,21 @@ export class LineChartComponent implements OnChanges, OnInit {
yAxis: any;
height: number;
width: number;
margin = {top: 40, right: 40, bottom: 60, left: 60};
margin = { top: 40, right: 40, bottom: 60, left: 60 };
loading = true;
constructor(private elementRef: ElementRef, public windowService: WindowService) { }
constructor(
private elementRef: ElementRef,
public windowService: WindowService
) {}
ngOnInit() {
this.lineChartEl = this.elementRef.nativeElement.querySelector('.line-chart');
this.loadingEl = this.elementRef.nativeElement.querySelector('.line-chart-loading');
this.lineChartEl = this.elementRef.nativeElement.querySelector(
'.line-chart'
);
this.loadingEl = this.elementRef.nativeElement.querySelector(
'.line-chart-loading'
);
this.limit = 40;
// related to the Observable.timer(0, 3000) in health component
@ -77,7 +91,10 @@ export class LineChartComponent implements OnChanges, OnInit {
render() {
// When the lineChartEl is not displayed (is-hidden), width and length are equal to 0.
let elt;
if (this.lineChartEl.clientWidth === 0 || this.lineChartEl.clientHeight === 0) {
if (
this.lineChartEl.clientWidth === 0 ||
this.lineChartEl.clientHeight === 0
) {
elt = this.loadingEl;
} else {
elt = this.lineChartEl;
@ -85,7 +102,6 @@ export class LineChartComponent implements OnChanges, OnInit {
this.width = elt.clientWidth - this.margin.left - this.margin.right;
this.height = elt.clientHeight - this.margin.top - this.margin.bottom;
const el = this.lineChartEl.querySelector('svg');
if (el) {
el.parentNode.removeChild(el);
@ -105,11 +121,16 @@ export class LineChartComponent implements OnChanges, OnInit {
this.x = scaleTime().range([0, this.width - 10]);
this.y = scaleLinear().range([this.height, 0]);
this.x.domain([<any>this.now - (this.limit - 2), <any>this.now - this.duration]);
this.x.domain([
(this.now as any) - (this.limit - 2),
(this.now as any) - this.duration
]);
this.y.domain([0, max(this.data, (d: any) => d)]);
this.line = line()
.x((d: any, i: number) => this.x(<any>this.now - (this.limit - 1 - i) * this.duration))
.x((d: any, i: number) =>
this.x((this.now as any) - (this.limit - 1 - i) * this.duration)
)
.y((d: any) => this.y(d))
.curve(curveLinear);
@ -121,16 +142,24 @@ export class LineChartComponent implements OnChanges, OnInit {
.attr('width', this.width)
.attr('height', this.height);
this.xAxis = this.svg.append('g')
this.xAxis = this.svg
.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${this.height})`)
.call(axisBottom(this.x).tickSize(-this.height).ticks(timeSecond, 5).tickFormat(timeFormat('%H:%M:%S')));
.call(
axisBottom(this.x)
.tickSize(-this.height)
.ticks(timeSecond, 5)
.tickFormat(timeFormat('%H:%M:%S'))
);
this.yAxis = this.svg.append('g')
this.yAxis = this.svg
.append('g')
.attr('class', 'y axis')
.call(axisLeft(this.y).tickSize(-this.width));
this.path = this.svg.append('g')
this.path = this.svg
.append('g')
.attr('clip-path', 'url(#clip)')
.append('path')
.data([this.data])
@ -149,8 +178,12 @@ export class LineChartComponent implements OnChanges, OnInit {
this.data.push(value * 1000000);
this.now = new Date();
this.x.domain([<any>this.now - (this.limit - 2) * this.duration, <any>this.now - this.duration]);
const minv = min(this.data, (d: any) => d) > 0 ? min(this.data, (d: any) => d) - 4 : 0;
this.x.domain([
(this.now as any) - (this.limit - 2) * this.duration,
(this.now as any) - this.duration
]);
const minv =
min(this.data, (d: any) => d) > 0 ? min(this.data, (d: any) => d) - 4 : 0;
const maxv = max(this.data, (d: any) => d) + 4;
this.y.domain([minv, maxv]);
@ -158,7 +191,12 @@ export class LineChartComponent implements OnChanges, OnInit {
.transition()
.duration(this.firstDisplay || this.dirty ? 0 : this.duration)
.ease(easeLinear)
.call(axisBottom(this.x).tickSize(-this.height).ticks(timeSecond, 5).tickFormat(timeFormat('%H:%M:%S')));
.call(
axisBottom(this.x)
.tickSize(-this.height)
.ticks(timeSecond, 5)
.tickFormat(timeFormat('%H:%M:%S'))
);
this.xAxis
.transition()
@ -183,7 +221,12 @@ export class LineChartComponent implements OnChanges, OnInit {
.transition()
.duration(this.duration)
.ease(easeLinear)
.attr('transform', `translate(${this.x(<any>this.now - (this.limit - 1) * this.duration)})`);
.attr(
'transform',
`translate(${this.x(
(this.now as any) - (this.limit - 1) * this.duration
)})`
);
this.firstDisplay = false;
this.dirty = false;

View File

@ -1,11 +1,23 @@
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
<nav
class="navbar is-fixed-top is-transparent"
role="navigation"
aria-label="main navigation"
>
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" routerLink="/" (click)="burger = false">
<img src="./assets/images/traefik.logo.svg" alt="Traefik" class="navbar-logo">
<img
src="./assets/images/traefik.logo.svg"
alt="Traefik"
class="navbar-logo"
/>
</a>
<div class="navbar-burger burger" data-target="navbarMain" (click)="burger = !burger" [class.is-active]="burger">
<div
class="navbar-burger burger"
data-target="navbarMain"
(click)="burger = !burger"
[class.is-active]="burger"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@ -14,10 +26,21 @@
<div id="navbarMain" class="navbar-menu" [class.is-active]="burger">
<div class="navbar-start">
<a class="navbar-item" routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{ exact: true }" (click)="burger = false">
<a
class="navbar-item"
routerLink="/"
routerLinkActive="is-active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="burger = false"
>
Providers
</a>
<a class="navbar-item" routerLink="/status" routerLinkActive="is-active" (click)="burger = false">
<a
class="navbar-item"
routerLink="/status"
routerLinkActive="is-active"
(click)="burger = false"
>
Health
</a>
</div>
@ -30,6 +53,5 @@
</a>
</div>
</div>
</div>
</nav>

View File

@ -11,14 +11,14 @@ export class HeaderComponent implements OnInit {
releaseLink: string;
burger: boolean;
constructor(private apiService: ApiService) { }
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.fetchVersion()
.subscribe(data => {
this.version = data.Version;
this.codename = data.Codename;
this.releaseLink = 'https://github.com/containous/traefik/tree/' + data.Version;
});
this.apiService.fetchVersion().subscribe(data => {
this.version = data.Version;
this.codename = data.Codename;
this.releaseLink =
'https://github.com/containous/traefik/tree/' + data.Version;
});
}
}

View File

@ -1,7 +1,6 @@
<div class="container">
<div class="content">
<div class="columns is-multiline">
<div class="column is-12">
<div class="content-item">
<div class="content-item-data">
@ -9,7 +8,9 @@
<div class="column is-4">
<div class="item-data border-right">
<span class="data-grey">Total Response Time</span>
<span class="data-blue" [title]="exactTotalResponseTime">{{ totalResponseTime }}</span>
<span class="data-blue" [title]="exactTotalResponseTime">{{
totalResponseTime
}}</span>
</div>
</div>
<div class="column is-4">
@ -20,7 +21,9 @@
</div>
<div class="column is-4">
<div class="item-data">
<span class="data-grey">Uptime Since <br/>{{ uptimeSince }}</span>
<span class="data-grey"
>Uptime Since <br />{{ uptimeSince }}</span
>
<span class="data-blue">{{ uptime }}</span>
</div>
</div>
@ -33,7 +36,9 @@
<div class="column is-4">
<div class="item-data border-right">
<span class="data-grey">Average Response Time</span>
<span class="data-blue" [title]="exactAverageResponseTime">{{ averageResponseTime }}</span>
<span class="data-blue" [title]="exactAverageResponseTime">{{
averageResponseTime
}}</span>
</div>
</div>
<div class="column is-4">
@ -69,7 +74,6 @@
</div>
</div>
</div>
</div>
</div>
@ -82,15 +86,23 @@
<td>Request</td>
<td>Time</td>
</tr>
<tr *ngFor="let entry of recentErrors; trackBy: trackRecentErrors;">
<tr *ngFor="let entry of recentErrors; trackBy: trackRecentErrors">
<td>
<span class="tag is-info" [title]="entry.status">{{ entry.status_code }}</span>&nbsp;<span class="is-hidden-mobile is-hidden-desktop-only">{{ entry.status }}</span>
<span class="tag is-info" [title]="entry.status">{{
entry.status_code
}}</span
>&nbsp;<span class="is-hidden-mobile is-hidden-desktop-only">{{
entry.status
}}</span>
</td>
<td>
<span class="tag">{{ entry.method }}</span>&nbsp;<span>{{ entry.host }}{{ entry.path }}</span>
<span class="tag">{{ entry.method }}</span
>&nbsp;<span>{{ entry.host }}{{ entry.path }}</span>
</td>
<td>
<span [title]="entry.time | date:'yyyy-MM-dd HH:mm:ss:SSS a z'">{{ entry.time | date:'yyyy-MM-dd HH:mm:ss a z' }}</span>
<span [title]="entry.time | date: 'yyyy-MM-dd HH:mm:ss:SSS a z'">{{
entry.time | date: 'yyyy-MM-dd HH:mm:ss a z'
}}</span>
</td>
</tr>
<tr *ngIf="!recentErrors?.length">

View File

@ -29,7 +29,7 @@ export class HealthComponent implements OnInit, OnDestroy {
chartValue: any;
statusCodeValue: any;
constructor(private apiService: ApiService) { }
constructor(private apiService: ApiService) {}
ngOnInit() {
this.sub = Observable.timer(0, 3000)
@ -42,16 +42,30 @@ export class HealthComponent implements OnInit, OnDestroy {
this.recentErrors = data.recent_errors;
}
this.chartValue = {count: data.average_response_time_sec, date: data.time};
this.statusCodeValue = Object.keys(data.total_status_code_count)
.map(key => ({code: key, count: data.total_status_code_count[key]}));
this.chartValue = {
count: data.average_response_time_sec,
date: data.time
};
this.statusCodeValue = Object.keys(data.total_status_code_count).map(
key => ({ code: key, count: data.total_status_code_count[key] })
);
this.pid = data.pid;
this.uptime = distanceInWordsStrict(subSeconds(new Date(), data.uptime_sec), new Date());
this.uptimeSince = format(subSeconds(new Date(), data.uptime_sec), 'YYYY-MM-DD HH:mm:ss Z');
this.totalResponseTime = distanceInWordsStrict(subSeconds(new Date(), data.total_response_time_sec), new Date());
this.uptime = distanceInWordsStrict(
subSeconds(new Date(), data.uptime_sec),
new Date()
);
this.uptimeSince = format(
subSeconds(new Date(), data.uptime_sec),
'YYYY-MM-DD HH:mm:ss Z'
);
this.totalResponseTime = distanceInWordsStrict(
subSeconds(new Date(), data.total_response_time_sec),
new Date()
);
this.exactTotalResponseTime = data.total_response_time;
this.averageResponseTime = Math.floor(data.average_response_time_sec * 1000) + ' ms';
this.averageResponseTime =
Math.floor(data.average_response_time_sec * 1000) + ' ms';
this.exactAverageResponseTime = data.average_response_time;
this.codeCount = data.count;
this.totalCodeCount = data.total_count;

File diff suppressed because it is too large Load Diff

View File

@ -18,7 +18,7 @@ export class ProvidersComponent implements OnInit, OnDestroy {
tab: string;
keyword: string;
constructor(private apiService: ApiService) { }
constructor(private apiService: ApiService) {}
ngOnInit() {
this.maxItem = 100;

View File

@ -8,9 +8,12 @@ interface LetContext<T> {
selector: '[appLet]'
})
export class LetDirective<T> {
private _context: LetContext<T> = {appLet: null};
private _context: LetContext<T> = { appLet: null };
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef<LetContext<T>>) {
constructor(
_viewContainer: ViewContainerRef,
_templateRef: TemplateRef<LetContext<T>>
) {
_viewContainer.createEmbeddedView(_templateRef, this._context);
}

View File

@ -11,7 +11,10 @@ export class BackendFilterPipe implements PipeTransform {
}
const keyword = filter.toLowerCase();
return items.filter(d => d.id.toLowerCase().includes(keyword)
|| d.servers.some(r => r.url.toLowerCase().includes(keyword)));
return items.filter(
d =>
d.id.toLowerCase().includes(keyword) ||
d.servers.some(r => r.url.toLowerCase().includes(keyword))
);
}
}

View File

@ -11,8 +11,11 @@ export class FrontendFilterPipe implements PipeTransform {
}
const keyword = filter.toLowerCase();
return items.filter(d => d.id.toLowerCase().includes(keyword)
|| d.backend.toLowerCase().includes(keyword)
|| d.routes.some(r => r.rule.toLowerCase().includes(keyword)));
return items.filter(
d =>
d.id.toLowerCase().includes(keyword) ||
d.backend.toLowerCase().includes(keyword) ||
d.routes.some(r => r.rule.toLowerCase().includes(keyword))
);
}
}

View File

@ -1,46 +1,46 @@
import { HumanReadableFilterPipe } from './humanreadable.filter.pipe';
describe('HumanReadableFilterPipe', () => {
const pipe = new HumanReadableFilterPipe();
const pipe = new HumanReadableFilterPipe();
const datatable = [{
'given': '180000000000',
'expected': '180s'
const datatable = [
{
given: '180000000000',
expected: '180s'
},
{
'given': '4096.0',
'expected': '4096ns'
given: '4096.0',
expected: '4096ns'
},
{
'given': '7200000000000',
'expected': '120m'
given: '7200000000000',
expected: '120m'
},
{
'given': '1337',
'expected': '1337ns'
given: '1337',
expected: '1337ns'
},
{
'given': 'traefik',
'expected': 'traefik',
given: 'traefik',
expected: 'traefik'
},
{
'given': '-23',
'expected': '-23',
given: '-23',
expected: '-23'
},
{
'given': '0',
'expected': '0',
},
];
given: '0',
expected: '0'
}
];
datatable.forEach(item => {
it((item.given + ' should be transformed to ' + item.expected ), () => {
expect(pipe.transform(item.given)).toEqual(item.expected);
});
});
it('create an instance', () => {
expect(pipe).toBeTruthy();
datatable.forEach(item => {
it(item.given + ' should be transformed to ' + item.expected, () => {
expect(pipe.transform(item.given)).toEqual(item.expected);
});
});
it('create an instance', () => {
expect(pipe).toBeTruthy();
});
});

View File

@ -4,7 +4,7 @@ import { Pipe, PipeTransform } from '@angular/core';
* HumanReadableFilterPipe converts a time period in nanoseconds to a human-readable
* string.
*/
@Pipe({name: 'humanreadable'})
@Pipe({ name: 'humanreadable' })
export class HumanReadableFilterPipe implements PipeTransform {
transform(value): any {
let result = '';

View File

@ -1,6 +1,6 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'keys'})
@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
transform(value, args: string[]): any {
return Object.keys(value);

View File

@ -1,11 +1,15 @@
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import {
HttpClient,
HttpErrorResponse,
HttpHeaders
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/retry';
import { Observable } from 'rxjs/Observable';
import { EMPTY } from 'rxjs/internal/observable/empty';
import { Observable } from 'rxjs/Observable';
export interface ProviderType {
[provider: string]: {
@ -25,28 +29,37 @@ export class ApiService {
}
fetchVersion(): Observable<any> {
return this.http.get('../api/version', {headers: this.headers})
return this.http
.get('../api/version', { headers: this.headers })
.retry(4)
.catch((err: HttpErrorResponse) => {
console.error(`[version] returned code ${err.status}, body was: ${err.error}`);
console.error(
`[version] returned code ${err.status}, body was: ${err.error}`
);
return EMPTY;
});
}
fetchHealthStatus(): Observable<any> {
return this.http.get('../health', {headers: this.headers})
return this.http
.get('../health', { headers: this.headers })
.retry(2)
.catch((err: HttpErrorResponse) => {
console.error(`[health] returned code ${err.status}, body was: ${err.error}`);
console.error(
`[health] returned code ${err.status}, body was: ${err.error}`
);
return EMPTY;
});
}
fetchProviders(): Observable<any> {
return this.http.get('../api/providers', {headers: this.headers})
return this.http
.get('../api/providers', { headers: this.headers })
.retry(2)
.catch((err: HttpErrorResponse) => {
console.error(`[providers] returned code ${err.status}, body was: ${err.error}`);
console.error(
`[providers] returned code ${err.status}, body was: ${err.error}`
);
return Observable.of<any>({});
})
.map((data: any): ProviderType => this.parseProviders(data));
@ -58,34 +71,47 @@ export class ApiService {
.reduce((acc, curr) => {
acc[curr] = {};
acc[curr].frontends = this.toArray(data[curr].frontends, 'id')
.map(frontend => {
acc[curr].frontends = this.toArray(data[curr].frontends, 'id').map(
frontend => {
frontend.routes = this.toArray(frontend.routes, 'id');
frontend.errors = this.toArray(frontend.errors, 'id');
if (frontend.headers) {
frontend.headers.customRequestHeaders = this.toHeaderArray(frontend.headers.customRequestHeaders);
frontend.headers.customResponseHeaders = this.toHeaderArray(frontend.headers.customResponseHeaders);
frontend.headers.sslProxyHeaders = this.toHeaderArray(frontend.headers.sslProxyHeaders);
frontend.headers.customRequestHeaders = this.toHeaderArray(
frontend.headers.customRequestHeaders
);
frontend.headers.customResponseHeaders = this.toHeaderArray(
frontend.headers.customResponseHeaders
);
frontend.headers.sslProxyHeaders = this.toHeaderArray(
frontend.headers.sslProxyHeaders
);
}
if (frontend.ratelimit && frontend.ratelimit.rateset) {
frontend.ratelimit.rateset = this.toArray(frontend.ratelimit.rateset, 'id');
frontend.ratelimit.rateset = this.toArray(
frontend.ratelimit.rateset,
'id'
);
}
return frontend;
});
}
);
acc[curr].backends = this.toArray(data[curr].backends, 'id')
.map(backend => {
acc[curr].backends = this.toArray(data[curr].backends, 'id').map(
backend => {
backend.servers = this.toArray(backend.servers, 'id');
return backend;
});
}
);
return acc;
}, {});
}
toHeaderArray(data: any): any[] {
return Object.keys(data || {}).map(key => ({name: key, value: data[key]}));
return Object.keys(data || {}).map(key => ({
name: key,
value: data[key]
}));
}
toArray(data: any, fieldKeyName: string): any[] {
@ -94,5 +120,4 @@ export class ApiService {
return data[key];
});
}
}

View File

@ -8,10 +8,12 @@ export class WindowService {
constructor(private eventManager: EventManager) {
this.resize = new Subject();
this.eventManager.addGlobalEventListener('window', 'resize', this.onResize);
}
onResize = (event: UIEvent) => {
this.resize.next(event.target);
this.eventManager.addGlobalEventListener(
'window',
'resize',
(event: UIEvent) => {
this.resize.next(event.target);
}
);
}
}

View File

@ -1,13 +1,17 @@
<!doctype html>
<!DOCTYPE html>
<html class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<title>Traefik</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/images/traefik.icon.png">
</head>
<body>
<app-root></app-root>
</body>
<head>
<meta charset="utf-8" />
<title>Traefik</title>
<base href="./" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
type="image/x-icon"
href="./assets/images/traefik.icon.png"
/>
</head>
<body>
<app-root></app-root>
</body>
</html>

View File

@ -8,5 +8,6 @@ if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));

View File

@ -1,6 +1,3 @@
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
@ -12,11 +9,11 @@
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (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__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
// (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__BLACK_LISTED_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
*/
@ -25,9 +22,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS

View File

@ -1,11 +1,11 @@
// 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';
import 'zone.js/dist/zone-testing';
declare const require: any;

View File

@ -138,5 +138,8 @@
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
},
"extends": [
"tslint-config-prettier"
]
}

View File

@ -5706,6 +5706,11 @@ preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
prettier@^1.16.4:
version "1.16.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
process-nextick-args@~1.0.6:
version "1.0.7"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
@ -7342,6 +7347,11 @@ tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
tslint-config-prettier@^1.18.0:
version "1.18.0"
resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37"
integrity sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==
tslint@~5.12.1:
version "5.12.1"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.12.1.tgz#8cec9d454cf8a1de9b0a26d7bdbad6de362e52c1"