X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Badmin%2Ffollows%2Fvideo-redundancies-list%2Fvideo-redundancies-list.component.ts;h=a89603048cb8dde6731358268d48e03f88df785c;hb=ba8a8367e7fde7915ae6633445bf46ebf4a9fe94;hp=4b41d1d864ecaff57a867a9e2328e8ca57aca19c;hpb=134cf2bce96a8c5aefd55154e884964975d8cf23;p=github%2FChocobozzz%2FPeerTube.git

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 4b41d1d86..a89603048 100644
--- 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,14 +1,11 @@
-import { Component, OnInit } from '@angular/core'
-import { Notifier, ServerService } from '@app/core'
+import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
 import { SortMeta } from 'primeng/api'
-import { ConfirmService } from '../../../core/confirm/confirm.service'
-import { RestPagination, RestTable } from '../../../shared'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Component, OnInit } from '@angular/core'
+import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
+import { BytesPipe, RedundancyService } from '@app/shared/shared-main'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
 import { VideosRedundancyStats } from '@shared/models/server'
-import { BytesPipe } from 'ngx-pipes'
-import { RedundancyService } from '@app/shared/video/redundancy.service'
 
 @Component({
   selector: 'my-video-redundancies-list',
@@ -20,13 +17,12 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
 
   videoRedundancies: VideoRedundancy[] = []
   totalRecords = 0
-  rowsPerPage = 10
 
   sort: SortMeta = { field: 'name', order: 1 }
   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
 
@@ -36,14 +32,17 @@ 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()
 
     this.bytesPipe = new BytesPipe()
   }
 
+  getIdentifier () {
+    return 'VideoRedundanciesListComponent'
+  }
+
   ngOnInit () {
     this.loadSelectLocalStorage()
 
@@ -61,6 +60,12 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         })
   }
 
+  getColspan () {
+    if (this.isDisplayingRemoteVideos()) return 5
+
+    return 4
+  }
+
   isDisplayingRemoteVideos () {
     return this.displayType === 'remote-videos'
   }
@@ -74,7 +79,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     this.pagination.start = 0
     this.saveSelectLocalStorage()
 
-    this.loadData()
+    this.reloadData()
   }
 
   getRedundancyStrategy (redundancy: VideoRedundancy) {
@@ -85,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 ]
 
-    if (totalSize === 0) return
+    // Not in manual strategy
+    if (totalAvailable) {
+      labels.push(
+        $localize`Available (${this.bytesToHuman(totalAvailable)})`
+      )
+
+      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'
@@ -110,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
+              }
             }
           }
         }
@@ -133,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,
@@ -157,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 () {
@@ -175,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)
+  }
 }