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

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