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