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

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