diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-09-23 17:09:38 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-09-23 17:09:38 +0200 |
commit | eb4f957eca2a045ad0d5cf0c1e79b9c08494b088 (patch) | |
tree | 26b1cc77d20bf9e1ec76b2f2c9cfb8182ebbf064 /client/src/app/admin/requests | |
parent | ccc64aa6790961d2af3524a78ff8506cbdbefb13 (diff) | |
download | PeerTube-eb4f957eca2a045ad0d5cf0c1e79b9c08494b088.tar.gz PeerTube-eb4f957eca2a045ad0d5cf0c1e79b9c08494b088.tar.zst PeerTube-eb4f957eca2a045ad0d5cf0c1e79b9c08494b088.zip |
Client: add requests stats page
Diffstat (limited to 'client/src/app/admin/requests')
10 files changed, 149 insertions, 0 deletions
diff --git a/client/src/app/admin/requests/index.ts b/client/src/app/admin/requests/index.ts new file mode 100644 index 000000000..236a9ee8f --- /dev/null +++ b/client/src/app/admin/requests/index.ts | |||
@@ -0,0 +1,4 @@ | |||
1 | export * from './request-stats'; | ||
2 | export * from './shared'; | ||
3 | export * from './requests.component'; | ||
4 | export * from './requests.routes'; | ||
diff --git a/client/src/app/admin/requests/request-stats/index.ts b/client/src/app/admin/requests/request-stats/index.ts new file mode 100644 index 000000000..be3a66f77 --- /dev/null +++ b/client/src/app/admin/requests/request-stats/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './request-stats.component'; | |||
diff --git a/client/src/app/admin/requests/request-stats/request-stats.component.html b/client/src/app/admin/requests/request-stats/request-stats.component.html new file mode 100644 index 000000000..114fd371f --- /dev/null +++ b/client/src/app/admin/requests/request-stats/request-stats.component.html | |||
@@ -0,0 +1,18 @@ | |||
1 | <h3>Requests stats</h3> | ||
2 | |||
3 | <div *ngIf="stats !== null"> | ||
4 | <div> | ||
5 | <span class="label-description">Interval seconds between requests:</span> | ||
6 | {{ secondsInterval }} | ||
7 | </div> | ||
8 | |||
9 | <div> | ||
10 | <span class="label-description">Remaining time before the scheduled request:</span> | ||
11 | {{ remainingSeconds }} | ||
12 | </div> | ||
13 | |||
14 | <div> | ||
15 | <span class="label-description">Total requests:</span> | ||
16 | {{ stats.requests.length }} | ||
17 | </div> | ||
18 | </div> | ||
diff --git a/client/src/app/admin/requests/request-stats/request-stats.component.scss b/client/src/app/admin/requests/request-stats/request-stats.component.scss new file mode 100644 index 000000000..92c28dc99 --- /dev/null +++ b/client/src/app/admin/requests/request-stats/request-stats.component.scss | |||
@@ -0,0 +1,6 @@ | |||
1 | .label-description { | ||
2 | display: inline-block; | ||
3 | width: 350px; | ||
4 | font-weight: bold; | ||
5 | color: black; | ||
6 | } | ||
diff --git a/client/src/app/admin/requests/request-stats/request-stats.component.ts b/client/src/app/admin/requests/request-stats/request-stats.component.ts new file mode 100644 index 000000000..8ff4eb540 --- /dev/null +++ b/client/src/app/admin/requests/request-stats/request-stats.component.ts | |||
@@ -0,0 +1,59 @@ | |||
1 | import { Component, OnInit, OnDestroy } from '@angular/core'; | ||
2 | |||
3 | import { RequestService, RequestStats } from '../shared'; | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'my-request-stats', | ||
7 | templateUrl: './request-stats.component.html', | ||
8 | styleUrls: [ './request-stats.component.scss' ] | ||
9 | }) | ||
10 | export class RequestStatsComponent implements OnInit, OnDestroy { | ||
11 | stats: RequestStats = null; | ||
12 | |||
13 | private interval: NodeJS.Timer = null; | ||
14 | |||
15 | constructor(private requestService: RequestService) { } | ||
16 | |||
17 | ngOnInit() { | ||
18 | this.getStats(); | ||
19 | } | ||
20 | |||
21 | ngOnDestroy() { | ||
22 | if (this.secondsInterval !== null) { | ||
23 | clearInterval(this.interval); | ||
24 | } | ||
25 | } | ||
26 | |||
27 | get remainingSeconds() { | ||
28 | return Math.floor(this.stats.remainingMilliSeconds / 1000); | ||
29 | } | ||
30 | |||
31 | get secondsInterval() { | ||
32 | return Math.floor(this.stats.milliSecondsInterval / 1000); | ||
33 | } | ||
34 | |||
35 | getStats() { | ||
36 | this.requestService.getStats().subscribe( | ||
37 | stats => { | ||
38 | console.log(stats); | ||
39 | this.stats = stats; | ||
40 | this.runInterval(); | ||
41 | }, | ||
42 | |||
43 | err => alert(err) | ||
44 | ); | ||
45 | } | ||
46 | |||
47 | private runInterval() { | ||
48 | this.interval = setInterval(() => { | ||
49 | this.stats.remainingMilliSeconds -= 1000; | ||
50 | |||
51 | if (this.stats.remainingMilliSeconds <= 0) { | ||
52 | setTimeout(() => this.getStats(), this.stats.remainingMilliSeconds + 100); | ||
53 | clearInterval(this.interval); | ||
54 | } | ||
55 | }, 1000); | ||
56 | } | ||
57 | |||
58 | |||
59 | } | ||
diff --git a/client/src/app/admin/requests/requests.component.ts b/client/src/app/admin/requests/requests.component.ts new file mode 100644 index 000000000..471112b45 --- /dev/null +++ b/client/src/app/admin/requests/requests.component.ts | |||
@@ -0,0 +1,8 @@ | |||
1 | import { Component } from '@angular/core'; | ||
2 | |||
3 | @Component({ | ||
4 | template: '<router-outlet></router-outlet>' | ||
5 | }) | ||
6 | |||
7 | export class RequestsComponent { | ||
8 | } | ||
diff --git a/client/src/app/admin/requests/requests.routes.ts b/client/src/app/admin/requests/requests.routes.ts new file mode 100644 index 000000000..78221a9ff --- /dev/null +++ b/client/src/app/admin/requests/requests.routes.ts | |||
@@ -0,0 +1,22 @@ | |||
1 | import { Routes } from '@angular/router'; | ||
2 | |||
3 | import { RequestsComponent } from './requests.component'; | ||
4 | import { RequestStatsComponent } from './request-stats'; | ||
5 | |||
6 | export const RequestsRoutes: Routes = [ | ||
7 | { | ||
8 | path: 'requests', | ||
9 | component: RequestsComponent, | ||
10 | children: [ | ||
11 | { | ||
12 | path: '', | ||
13 | redirectTo: 'stats', | ||
14 | pathMatch: 'full' | ||
15 | }, | ||
16 | { | ||
17 | path: 'stats', | ||
18 | component: RequestStatsComponent | ||
19 | } | ||
20 | ] | ||
21 | } | ||
22 | ]; | ||
diff --git a/client/src/app/admin/requests/shared/index.ts b/client/src/app/admin/requests/shared/index.ts new file mode 100644 index 000000000..32ab5767b --- /dev/null +++ b/client/src/app/admin/requests/shared/index.ts | |||
@@ -0,0 +1,2 @@ | |||
1 | export * from './request-stats.model'; | ||
2 | export * from './request.service'; | ||
diff --git a/client/src/app/admin/requests/shared/request-stats.model.ts b/client/src/app/admin/requests/shared/request-stats.model.ts new file mode 100644 index 000000000..7e4b26bca --- /dev/null +++ b/client/src/app/admin/requests/shared/request-stats.model.ts | |||
@@ -0,0 +1,8 @@ | |||
1 | export interface RequestStats { | ||
2 | milliSecondsInterval: number; | ||
3 | remainingMilliSeconds: number; | ||
4 | requests: { | ||
5 | request: any, | ||
6 | to: any | ||
7 | }[]; | ||
8 | } | ||
diff --git a/client/src/app/admin/requests/shared/request.service.ts b/client/src/app/admin/requests/shared/request.service.ts new file mode 100644 index 000000000..59d138039 --- /dev/null +++ b/client/src/app/admin/requests/shared/request.service.ts | |||
@@ -0,0 +1,21 @@ | |||
1 | import { Injectable } from '@angular/core'; | ||
2 | import { Observable } from 'rxjs/Observable'; | ||
3 | |||
4 | import { RequestStats } from './request-stats.model'; | ||
5 | import { AuthHttp, RestExtractor } from '../../../shared'; | ||
6 | |||
7 | @Injectable() | ||
8 | export class RequestService { | ||
9 | private static BASE_REQUEST_URL: string = '/api/v1/requests/'; | ||
10 | |||
11 | constructor ( | ||
12 | private authHttp: AuthHttp, | ||
13 | private restExtractor: RestExtractor | ||
14 | ) {} | ||
15 | |||
16 | getStats(): Observable<RequestStats> { | ||
17 | return this.authHttp.get(RequestService.BASE_REQUEST_URL + 'stats') | ||
18 | .map(this.restExtractor.extractDataGet) | ||
19 | .catch((res) => this.restExtractor.handleError(res)); | ||
20 | } | ||
21 | } | ||