baalajimaestro/traefik
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

chore(webui): format code with prettier

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webui/.prettierrc Normal file
View file

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

1
webui/Dockerfile
View file

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

9
webui/package.json
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"
}
}
}

4
webui/readme.md
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`**

11
webui/src/app/app.component.spec.ts
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();
}));

2
webui/src/app/app.component.ts
View file

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

11
webui/src/app/app.module.ts
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 {}

2
webui/src/app/charts/bar-chart/bar-chart.component.html
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>

10
webui/src/app/charts/bar-chart/bar-chart.component.spec.ts
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();
});
});

69
webui/src/app/charts/bar-chart/bar-chart.component.ts
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();
}
}

2
webui/src/app/charts/line-chart/line-chart.component.html
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>

79
webui/src/app/charts/line-chart/line-chart.component.ts
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;

36
webui/src/app/components/header/header.component.html
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>

14
webui/src/app/components/header/header.component.ts
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;
});
}
}

30
webui/src/app/components/health/health.component.html
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">

30
webui/src/app/components/health/health.component.ts
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;

1818
webui/src/app/components/providers/providers.component.html
View file

File diff suppressed because it is too large Load diff

2
webui/src/app/components/providers/providers.component.ts
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;

7
webui/src/app/directives/let.directive.ts
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);
}

7
webui/src/app/pipes/backend.filter.pipe.ts
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))
);
}
}

9
webui/src/app/pipes/frontend.filter.pipe.ts
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))
);
}
}

52
webui/src/app/pipes/humanreadable.filter.pipe.spec.ts
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();
});
});

2
webui/src/app/pipes/humanreadable.filter.pipe.ts
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 = '';

2
webui/src/app/pipes/keys.pipe.ts
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);

67
webui/src/app/services/api.service.ts
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];
});
}
}

12
webui/src/app/services/window.service.ts
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);
}
);
}
}

26
webui/src/index.html
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>

3
webui/src/main.ts
View file

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

15
webui/src/polyfills.ts
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

2
webui/src/test.ts
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;

5
webui/tslint.json
View file

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

10
webui/yarn.lock
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"