forks
/
peertube
1
0
Fork 0
Code Releases Activity

Add statistics section in about page

This commit is contained in:
Julien Maulny 2019-10-02 22:37:01 +02:00 committed by Chocobozzz
parent 235b055dc5
commit 3d05209c9a
5 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/+about/about-instance/about-instance.component.html
View File

@ -94,6 +94,13 @@
<label i18n>Features found on this instance</label>
<my-instance-features-table></my-instance-features-table>
</div>
<div class="col">
<div i18n class="middle-title">
Statistics
</div>
<my-instance-statistics></my-instance-statistics>
</div>
</div>
<my-contact-admin-modal #contactAdminModal></my-contact-admin-modal>

101
client/src/app/shared/instance/instance-statistics.component.html Normal file
View File

@ -0,0 +1,101 @@
<p i18n *ngIf="null === serverStats">Loading instance statistics...</p>
<section *ngIf="null !== serverStats">
<h5 i18n>Local</h5>
<div class="row">
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalUsers }}</p>
<p class="stat-label" i18n>users</p>
</div>
<i class="glyphicon glyphicon-user icon-bottom"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalLocalVideos }}</p>
<p class="stat-label" i18n>videos</p>
</div>
<i class="glyphicon glyphicon-facetime-video"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalLocalVideoViews }}</p>
<p class="stat-label" i18n>videos views</p>
</div>
<i class="glyphicon glyphicon-eye-open"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalLocalVideoComments }}</p>
<p class="stat-label" i18n>videos comments</p>
</div>
<i class="glyphicon glyphicon-comment"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
<p class="stat-label" i18n>of hosted video</p>
</div>
<i class="glyphicon glyphicon-hdd"></i>
</div>
</div>
</div>
<h5 i18n>Federation</h5>
<div class="row">
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalVideos }}</p>
<p class="stat-label" i18n>videos</p>
</div>
<i class="glyphicon glyphicon-facetime-video"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalVideoComments }}</p>
<p class="stat-label" i18n>videos comments</p>
</div>
<i class="glyphicon glyphicon-comment"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalInstanceFollowers }}</p>
<p class="stat-label" i18n>followers</p>
</div>
<i class="glyphicon glyphicon-retweet"></i>
</div>
</div>
<div class="col-6 col-lg-4 col-xl-3">
<div class="card stat">
<div class="card-body">
<p class="stat-value">{{ serverStats.totalInstanceFollowing }}</p>
<p class="stat-label" i18n>following</p>
</div>
<i class="glyphicon glyphicon-retweet"></i>
</div>
</div>
</div>
</section>

35
client/src/app/shared/instance/instance-statistics.component.scss Normal file
View File

@ -0,0 +1,35 @@
.stat {
text-align: center;
margin-bottom: 1em;
overflow: hidden;
.stat-value {
font-size: 2.25em;
line-height: 1em;
margin: 0;
}
.stat-label {
font-size: 1.15em;
margin: 0;
}
.glyphicon {
opacity: 0.12;
position: absolute;
left: 16px;
top: -24px;
&.icon-bottom {
top: 4px;
}
&::before {
font-size: 8em;
}
}
.card-body {
z-index: 2;
}
}

37
client/src/app/shared/instance/instance-statistics.component.ts Normal file
View File

@ -0,0 +1,37 @@
import { map } from 'rxjs/operators'
import { HttpClient } from '@angular/common/http'
import { Component, OnInit } from '@angular/core'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { ServerStats } from '@shared/models/server'
import { environment } from '../../../environments/environment'
@Component({
selector: 'my-instance-statistics',
templateUrl: './instance-statistics.component.html',
styleUrls: [ './instance-statistics.component.scss' ]
})
export class InstanceStatisticsComponent implements OnInit {
private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
serverStats: ServerStats = null
constructor (
private http: HttpClient,
private i18n: I18n
) {
}
ngOnInit () {
this.getStats()
.subscribe(
res => {
this.serverStats = res
}
)
}
getStats () {
return this.http
.get<ServerStats>(InstanceStatisticsComponent.BASE_STATS_URL)
}
}

3
client/src/app/shared/shared.module.ts
View File

@ -61,6 +61,7 @@ import {
} from '@ng-bootstrap/ng-bootstrap'
import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
import { InstanceStatisticsComponent } from '@app/shared/instance/instance-statistics.component'
import { OverviewService } from '@app/shared/overview'
import { UserBanModalComponent } from '@app/shared/moderation'
import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
@ -157,6 +158,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co
SubscribeButtonComponent,
RemoteSubscribeComponent,
InstanceFeaturesTableComponent,
InstanceStatisticsComponent,
FeatureBooleanComponent,
UserBanModalComponent,
UserModerationDropdownComponent,
@ -224,6 +226,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co
SubscribeButtonComponent,
RemoteSubscribeComponent,
InstanceFeaturesTableComponent,
InstanceStatisticsComponent,
UserBanModalComponent,
UserModerationDropdownComponent,
TopMenuDropdownComponent,