Better display redundancy pies

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / follows / video-redundancies-list / video-redundancies-list.component.ts

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 0048882bcbf69d05afd49b797d6e9135c68d960a..a89603048cb8dde6731358268d48e03f88df785c 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -1,17 +1,16 @@
-import { BytesPipe } from 'ngx-pipes'
+import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
-import { RedundancyService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { BytesPipe, RedundancyService } from '@app/shared/shared-main'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
 import { VideosRedundancyStats } from '@shared/models/server'
 
 @Component({
   selector: 'my-video-redundancies-list',
   templateUrl: './video-redundancies-list.component.html',
-  styleUrls: [ '../follows.component.scss', './video-redundancies-list.component.scss' ]
+  styleUrls: [ './video-redundancies-list.component.scss' ]
 })
 export class VideoRedundanciesListComponent extends RestTable implements OnInit {
   private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'
@@ -23,7 +22,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   displayType: VideoRedundanciesTarget = 'my-videos'
 
-  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: object, options: object }[] = []
+  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: ChartData, options: ChartOptions }[] = []
 
   noRedundancies = false
 
@@ -33,8 +32,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private redundancyService: RedundancyService,
-    private serverService: ServerService,
-    private i18n: I18n
+    private serverService: ServerService
   ) {
     super()
 
@@ -81,7 +79,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     this.pagination.start = 0
     this.saveSelectLocalStorage()
 
-    this.loadData()
+    this.reloadData()
   }
 
   getRedundancyStrategy (redundancy: VideoRedundancy) {
@@ -92,19 +90,31 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   }
 
   buildPieData (stats: VideosRedundancyStats) {
-    const totalSize = stats.totalSize
+    if (stats.totalSize === 0) return
+
+    const totalAvailable = stats.totalSize
       ? stats.totalSize - stats.totalUsed
-      : stats.totalUsed
+      : null
+
+    const labels = [ $localize`Used (${this.bytesToHuman(stats.totalUsed)})` ]
+    const data = [ stats.totalUsed ]
+
+    // Not in manual strategy
+    if (totalAvailable) {
+      labels.push(
+        $localize`Available (${this.bytesToHuman(totalAvailable)})`
+      )
 
-    if (totalSize === 0) return
+      data.push(totalAvailable)
+    }
 
     this.redundanciesGraphsData.push({
       stats,
       graphData: {
-        labels: [ this.i18n('Used'), this.i18n('Available') ],
+        labels,
         datasets: [
           {
-            data: [ stats.totalUsed, totalSize ],
+            data,
             backgroundColor: [
               '#FF6384',
               '#36A2EB'
@@ -117,21 +127,17 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         ]
       },
       options: {
-        title: {
-          display: true,
-          text: stats.strategy
-        },
-
-        tooltips: {
-          callbacks: {
-            label: (tooltipItem: any, data: any) => {
-              const dataset = data.datasets[tooltipItem.datasetIndex]
-              let label = data.labels[tooltipItem.index]
-              if (label) label += ': '
-              else label = ''
-
-              label += this.bytesPipe.transform(dataset.data[tooltipItem.index], 1)
-              return label
+        plugins: {
+          title: {
+            display: true,
+            text: stats.strategy
+          },
+
+          tooltip: {
+            callbacks: {
+              label: (tooltip: TooltipItem<any>) => {
+                return tooltip.label
+              }
             }
           }
         }
@@ -140,23 +146,23 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   }
 
   async removeRedundancy (redundancy: VideoRedundancy) {
-    const message = this.i18n('Do you really want to remove this video redundancy?')
-    const res = await this.confirmService.confirm(message, this.i18n('Remove redundancy'))
+    const message = $localize`Do you really want to remove this video redundancy?`
+    const res = await this.confirmService.confirm(message, $localize`Remove redundancy`)
     if (res === false) return
 
     this.redundancyService.removeVideoRedundancies(redundancy)
-      .subscribe(
-        () => {
-          this.notifier.success(this.i18n('Video redundancies removed!'))
-          this.loadData()
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Video redundancies removed!`)
+          this.reloadData()
         },
 
-        err => this.notifier.error(err.message)
-      )
+        error: err => this.notifier.error(err.message)
+      })
 
   }
 
-  protected loadData () {
+  protected reloadData () {
     const options = {
       pagination: this.pagination,
       sort: this.sort,
@@ -164,14 +170,14 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     }
 
     this.redundancyService.listVideoRedundancies(options)
-                      .subscribe(
-                        resultList => {
+                      .subscribe({
+                        next: resultList => {
                           this.videoRedundancies = resultList.data
                           this.totalRecords = resultList.total
                         },
 
-                        err => this.notifier.error(err.message)
-                      )
+                        error: err => this.notifier.error(err.message)
+                      })
   }
 
   private loadSelectLocalStorage () {
@@ -182,4 +188,8 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   private saveSelectLocalStorage () {
     peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
   }
+
+  private bytesToHuman (bytes: number) {
+    return this.bytesPipe.transform(bytes, 1)
+  }
 }