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: [ '../follows.component.scss', './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     const totalSize = stats.totalSize
  94       ? stats.totalSize - stats.totalUsed
  95       : stats.totalUsed
  96
  97     if (totalSize === 0) return
  98
  99     this.redundanciesGraphsData.push({
 100       stats,
 101       graphData: {
 102         labels: [ $localize`Used`, $localize`Available` ],
 103         datasets: [
 104           {
 105             data: [ stats.totalUsed, totalSize ],
 106             backgroundColor: [
 107               '#FF6384',
 108               '#36A2EB'
 109             ],
 110             hoverBackgroundColor: [
 111               '#FF6384',
 112               '#36A2EB'
 113             ]
 114           }
 115         ]
 116       },
 117       options: {
 118         plugins: {
 119           title: {
 120             display: true,
 121             text: stats.strategy
 122           },
 123
 124           tooltip: {
 125             callbacks: {
 126               label: (tooltip: TooltipItem<any>) => {
 127                 let label = tooltip.label || ''
 128                 if (label) label += ': '
 129
 130                 label += this.bytesPipe.transform(tooltip.raw as number, 1)
 131
 132                 return label
 133               }
 134             }
 135           }
 136         }
 137       }
 138     })
 139   }
 140
 141   async removeRedundancy (redundancy: VideoRedundancy) {
 142     const message = $localize`Do you really want to remove this video redundancy?`
 143     const res = await this.confirmService.confirm(message, $localize`Remove redundancy`)
 144     if (res === false) return
 145
 146     this.redundancyService.removeVideoRedundancies(redundancy)
 147       .subscribe({
 148         next: () => {
 149           this.notifier.success($localize`Video redundancies removed!`)
 150           this.reloadData()
 151         },
 152
 153         error: err => this.notifier.error(err.message)
 154       })
 155
 156   }
 157
 158   protected reloadData () {
 159     const options = {
 160       pagination: this.pagination,
 161       sort: this.sort,
 162       target: this.displayType
 163     }
 164
 165     this.redundancyService.listVideoRedundancies(options)
 166                       .subscribe({
 167                         next: resultList => {
 168                           this.videoRedundancies = resultList.data
 169                           this.totalRecords = resultList.total
 170                         },
 171
 172                         error: err => this.notifier.error(err.message)
 173                       })
 174   }
 175
 176   private loadSelectLocalStorage () {
 177     const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE)
 178     if (displayType) this.displayType = displayType as VideoRedundanciesTarget
 179   }
 180
 181   private saveSelectLocalStorage () {
 182     peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
 183   }
 184 }