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 | |
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')
14 files changed, 163 insertions, 0 deletions
diff --git a/client/src/app/admin/admin.routes.ts b/client/src/app/admin/admin.routes.ts index 1fcace994..edb8ba49f 100644 --- a/client/src/app/admin/admin.routes.ts +++ b/client/src/app/admin/admin.routes.ts | |||
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router'; | |||
2 | 2 | ||
3 | import { AdminComponent } from './admin.component'; | 3 | import { AdminComponent } from './admin.component'; |
4 | import { FriendsRoutes } from './friends'; | 4 | import { FriendsRoutes } from './friends'; |
5 | import { RequestsRoutes } from './requests'; | ||
5 | import { UsersRoutes } from './users'; | 6 | import { UsersRoutes } from './users'; |
6 | 7 | ||
7 | export const AdminRoutes: Routes = [ | 8 | export const AdminRoutes: Routes = [ |
@@ -15,6 +16,7 @@ export const AdminRoutes: Routes = [ | |||
15 | pathMatch: 'full' | 16 | pathMatch: 'full' |
16 | }, | 17 | }, |
17 | ...FriendsRoutes, | 18 | ...FriendsRoutes, |
19 | ...RequestsRoutes, | ||
18 | ...UsersRoutes | 20 | ...UsersRoutes |
19 | ] | 21 | ] |
20 | } | 22 | } |
diff --git a/client/src/app/admin/index.ts b/client/src/app/admin/index.ts index 3d0e67b15..493caed15 100644 --- a/client/src/app/admin/index.ts +++ b/client/src/app/admin/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | export * from './friends'; | 1 | export * from './friends'; |
2 | export * from './requests'; | ||
2 | export * from './users'; | 3 | export * from './users'; |
3 | export * from './admin.component'; | 4 | export * from './admin.component'; |
4 | export * from './admin.routes'; | 5 | export * from './admin.routes'; |
diff --git a/client/src/app/admin/menu-admin.component.html b/client/src/app/admin/menu-admin.component.html index f821974bd..e250615aa 100644 --- a/client/src/app/admin/menu-admin.component.html +++ b/client/src/app/admin/menu-admin.component.html | |||
@@ -10,6 +10,11 @@ | |||
10 | <span class="hidden-xs glyphicon glyphicon-cloud"></span> | 10 | <span class="hidden-xs glyphicon glyphicon-cloud"></span> |
11 | <a [routerLink]="['/admin/friends/list']">List friends</a> | 11 | <a [routerLink]="['/admin/friends/list']">List friends</a> |
12 | </div> | 12 | </div> |
13 | |||
14 | <div id="panel-request-stats" class="panel-button"> | ||
15 | <span class="hidden-xs glyphicon glyphicon-stats"></span> | ||
16 | <a [routerLink]="['/admin/requests/stats']">Request stats</a> | ||
17 | </div> | ||
13 | </div> | 18 | </div> |
14 | 19 | ||
15 | <div class="panel-block"> | 20 | <div class="panel-block"> |
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 | } | ||
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 3b7750a76..f9a9ae760 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts | |||
@@ -26,6 +26,9 @@ import { | |||
26 | FriendListComponent, | 26 | FriendListComponent, |
27 | FriendService, | 27 | FriendService, |
28 | MenuAdminComponent, | 28 | MenuAdminComponent, |
29 | RequestsComponent, | ||
30 | RequestStatsComponent, | ||
31 | RequestService, | ||
29 | UsersComponent, | 32 | UsersComponent, |
30 | UserAddComponent, | 33 | UserAddComponent, |
31 | UserListComponent, | 34 | UserListComponent, |
@@ -66,6 +69,7 @@ const APP_PROVIDERS = [ | |||
66 | VideoService, | 69 | VideoService, |
67 | SearchService, | 70 | SearchService, |
68 | FriendService, | 71 | FriendService, |
72 | RequestService, | ||
69 | UserService, | 73 | UserService, |
70 | AccountService, | 74 | AccountService, |
71 | WebTorrentService | 75 | WebTorrentService |
@@ -88,6 +92,8 @@ const APP_PROVIDERS = [ | |||
88 | LoginComponent, | 92 | LoginComponent, |
89 | MenuAdminComponent, | 93 | MenuAdminComponent, |
90 | MenuComponent, | 94 | MenuComponent, |
95 | RequestsComponent, | ||
96 | RequestStatsComponent, | ||
91 | SearchComponent, | 97 | SearchComponent, |
92 | UserAddComponent, | 98 | UserAddComponent, |
93 | UserListComponent, | 99 | UserListComponent, |