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   private bytesPipe: BytesPipe
  30
  31   constructor (
  32     private notifier: Notifier,
  33     private confirmService: ConfirmService,
  34     private redundancyService: RedundancyService,
  35     private serverService: ServerService
  36   ) {
  37     super()
  38
  39     this.bytesPipe = new BytesPipe()
  40   }
  41
  42   getIdentifier () {
  43     return 'VideoRedundanciesListComponent'
  44   }
  45
  46   ngOnInit () {
  47     this.loadSelectLocalStorage()
  48
  49     this.initialize()
  50
  51     this.serverService.getServerStats()
  52         .subscribe(res => {
  53           const redundancies = res.videosRedundancy
  54
  55           if (redundancies.length === 0) this.noRedundancies = true
  56
  57           for (const r of redundancies) {
  58             this.buildPieData(r)
  59           }
  60         })
  61   }
  62
  63   getColspan () {
  64     if (this.isDisplayingRemoteVideos()) return 5
  65
  66     return 4
  67   }
  68
  69   isDisplayingRemoteVideos () {
  70     return this.displayType === 'remote-videos'
  71   }
  72
  73   getTotalSize (redundancy: VideoRedundancy) {
  74     return redundancy.redundancies.files.reduce((a, b) => a + b.size, 0) +
  75       redundancy.redundancies.streamingPlaylists.reduce((a, b) => a + b.size, 0)
  76   }
  77
  78   onDisplayTypeChanged () {
  79     this.pagination.start = 0
  80     this.saveSelectLocalStorage()
  81
  82     this.reloadData()
  83   }
  84
  85   getRedundancyStrategy (redundancy: VideoRedundancy) {
  86     if (redundancy.redundancies.files.length !== 0) return redundancy.redundancies.files[0].strategy
  87     if (redundancy.redundancies.streamingPlaylists.length !== 0) return redundancy.redundancies.streamingPlaylists[0].strategy
  88
  89     return ''
  90   }
  91
  92   buildPieData (stats: VideosRedundancyStats) {
  93     if (stats.totalSize === 0) return
  94
  95     const totalAvailable = stats.totalSize
  96       ? stats.totalSize - stats.totalUsed
  97       : null
  98
  99     const labels = [ $localize`Used (${this.bytesToHuman(stats.totalUsed)})` ]
 100     const data = [ stats.totalUsed ]
 101
 102     // Not in manual strategy
 103     if (totalAvailable) {
 104       labels.push(
 105         $localize`Available (${this.bytesToHuman(totalAvailable)})`
 106       )
 107
 108       data.push(totalAvailable)
 109     }
 110
 111     this.redundanciesGraphsData.push({
 112       stats,
 113       graphData: {
 114         labels,
 115         datasets: [
 116           {
 117             data,
 118             backgroundColor: [
 119               '#FF6384',
 120               '#36A2EB'
 121             ],
 122             hoverBackgroundColor: [
 123               '#FF6384',
 124               '#36A2EB'
 125             ]
 126           }
 127         ]
 128       },
 129       options: {
 130         plugins: {
 131           title: {
 132             display: true,
 133             text: stats.strategy
 134           },
 135
 136           tooltip: {
 137             callbacks: {
 138               label: (tooltip: TooltipItem<any>) => {
 139                 return tooltip.label
 140               }
 141             }
 142           }
 143         }
 144       }
 145     })
 146   }
 147
 148   async removeRedundancy (redundancy: VideoRedundancy) {
 149     const message = $localize`Do you really want to remove this video redundancy?`
 150     const res = await this.confirmService.confirm(message, $localize`Remove redundancy`)
 151     if (res === false) return
 152
 153     this.redundancyService.removeVideoRedundancies(redundancy)
 154       .subscribe({
 155         next: () => {
 156           this.notifier.success($localize`Video redundancies removed!`)
 157           this.reloadData()
 158         },
 159
 160         error: err => this.notifier.error(err.message)
 161       })
 162
 163   }
 164
 165   protected reloadData () {
 166     const options = {
 167       pagination: this.pagination,
 168       sort: this.sort,
 169       target: this.displayType
 170     }
 171
 172     this.redundancyService.listVideoRedundancies(options)
 173                       .subscribe({
 174                         next: resultList => {
 175                           this.videoRedundancies = resultList.data
 176                           this.totalRecords = resultList.total
 177                         },
 178
 179                         error: err => this.notifier.error(err.message)
 180                       })
 181   }
 182
 183   private loadSelectLocalStorage () {
 184     const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE)
 185     if (displayType) this.displayType = displayType as VideoRedundanciesTarget
 186   }
 187
 188   private saveSelectLocalStorage () {
 189     peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
 190   }
 191
 192   private bytesToHuman (bytes: number) {
 193     return this.bytesPipe.transform(bytes, 1)
 194   }
 195 }