client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts

   1 import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
   2 import { SortMeta } from 'primeng/api'
   3 import { Component, OnInit } from '@angular/core'
   4 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
   5 import { BytesPipe, RedundancyService } from '@app/shared/shared-main'
   6 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
   7 import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
   8 import { VideosRedundancyStats } from '@shared/models/server'
   9
  10 @Component({
  11   selector: 'my-video-redundancies-list',
  12   templateUrl: './video-redundancies-list.component.html',
  13   styleUrls: [ './video-redundancies-list.component.scss' ]
  14 })
  15 export class VideoRedundanciesListComponent extends RestTable implements OnInit {
  16   private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'
  17
  18   videoRedundancies: VideoRedundancy[] = []
  19   totalRecords = 0
  20
  21   sort: SortMeta = { field: 'name', order: 1 }
  22   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  23   displayType: VideoRedundanciesTarget = 'my-videos'
  24
  25   redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: ChartData, options: ChartOptions }[] = []
  26
  27   noRedundancies = false
  28
  29   // Prevent layout shift for redundancy stats
  30   dataLoaded = false
  31
  32   private bytesPipe: BytesPipe
  33
  34   constructor (
  35     private notifier: Notifier,
  36     private confirmService: ConfirmService,
  37     private redundancyService: RedundancyService,
  38     private serverService: ServerService
  39   ) {
  40     super()
  41
  42     this.bytesPipe = new BytesPipe()
  43   }
  44
  45   getIdentifier () {
  46     return 'VideoRedundanciesListComponent'
  47   }
  48
  49   ngOnInit () {
  50     this.loadSelectLocalStorage()
  51
  52     this.initialize()
  53
  54     this.serverService.getServerStats()
  55         .subscribe(res => {
  56           const redundancies = res.videosRedundancy
  57
  58           if (redundancies.length === 0) this.noRedundancies = true
  59
  60           for (const r of redundancies) {
  61             this.buildPieData(r)
  62           }
  63         })
  64   }
  65
  66   getColspan () {
  67     if (this.isDisplayingRemoteVideos()) return 5
  68
  69     return 4
  70   }
  71
  72   isDisplayingRemoteVideos () {
  73     return this.displayType === 'remote-videos'
  74   }
  75
  76   getTotalSize (redundancy: VideoRedundancy) {
  77     return redundancy.redundancies.files.reduce((a, b) => a + b.size, 0) +
  78       redundancy.redundancies.streamingPlaylists.reduce((a, b) => a + b.size, 0)
  79   }
  80
  81   onDisplayTypeChanged () {
  82     this.pagination.start = 0
  83     this.saveSelectLocalStorage()
  84
  85     this.reloadData()
  86   }
  87
  88   getRedundancyStrategy (redundancy: VideoRedundancy) {
  89     if (redundancy.redundancies.files.length !== 0) return redundancy.redundancies.files[0].strategy
  90     if (redundancy.redundancies.streamingPlaylists.length !== 0) return redundancy.redundancies.streamingPlaylists[0].strategy
  91
  92     return ''
  93   }
  94
  95   buildPieData (stats: VideosRedundancyStats) {
  96     if (stats.totalSize === 0) return
  97
  98     const totalAvailable = stats.totalSize
  99       ? stats.totalSize - stats.totalUsed
 100       : null
 101
 102     const labels = [ $localize`Used (${this.bytesToHuman(stats.totalUsed)})` ]
 103     const data = [ stats.totalUsed ]
 104
 105     // Not in manual strategy
 106     if (totalAvailable) {
 107       labels.push(
 108         $localize`Available (${this.bytesToHuman(totalAvailable)})`
 109       )
 110
 111       data.push(totalAvailable)
 112     }
 113
 114     this.redundanciesGraphsData.push({
 115       stats,
 116       graphData: {
 117         labels,
 118         datasets: [
 119           {
 120             data,
 121             backgroundColor: [
 122               '#FF6384',
 123               '#36A2EB'
 124             ],
 125             hoverBackgroundColor: [
 126               '#FF6384',
 127               '#36A2EB'
 128             ]
 129           }
 130         ]
 131       },
 132       options: {
 133         plugins: {
 134           title: {
 135             display: true,
 136             text: stats.strategy
 137           },
 138
 139           tooltip: {
 140             callbacks: {
 141               label: (tooltip: TooltipItem<any>) => {
 142                 return tooltip.label
 143               }
 144             }
 145           }
 146         }
 147       }
 148     })
 149   }
 150
 151   async removeRedundancy (redundancy: VideoRedundancy) {
 152     const message = $localize`Do you really want to remove this video redundancy?`
 153     const res = await this.confirmService.confirm(message, $localize`Remove redundancy`)
 154     if (res === false) return
 155
 156     this.redundancyService.removeVideoRedundancies(redundancy)
 157       .subscribe({
 158         next: () => {
 159           this.notifier.success($localize`Video redundancies removed!`)
 160           this.reloadData()
 161         },
 162
 163         error: err => this.notifier.error(err.message)
 164       })
 165
 166   }
 167
 168   protected reloadDataInternal () {
 169     this.dataLoaded = false
 170
 171     const options = {
 172       pagination: this.pagination,
 173       sort: this.sort,
 174       target: this.displayType
 175     }
 176
 177     this.redundancyService.listVideoRedundancies(options)
 178                       .subscribe({
 179                         next: resultList => {
 180                           this.videoRedundancies = resultList.data
 181                           this.totalRecords = resultList.total
 182
 183                           this.dataLoaded = true
 184                         },
 185
 186                         error: err => this.notifier.error(err.message)
 187                       })
 188   }
 189
 190   private loadSelectLocalStorage () {
 191     const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE)
 192     if (displayType) this.displayType = displayType as VideoRedundanciesTarget
 193   }
 194
 195   private saveSelectLocalStorage () {
 196     peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
 197   }
 198
 199   private bytesToHuman (bytes: number) {
 200     return this.bytesPipe.transform(bytes, 1)
 201   }
 202 }