]>
Commit | Line | Data |
---|---|---|
818045ef | 1 | import { ChartData, ChartOptions, TooltipItem } from 'chart.js' |
b764380a | 2 | import { SortMeta } from 'primeng/api' |
67ed6552 C |
3 | import { Component, OnInit } from '@angular/core' |
4 | import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core' | |
94676e63 | 5 | import { BytesPipe, RedundancyService } from '@app/shared/shared-main' |
94676e63 | 6 | import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' |
b764380a | 7 | import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models' |
b764380a | 8 | import { VideosRedundancyStats } from '@shared/models/server' |
b764380a C |
9 | |
10 | @Component({ | |
11 | selector: 'my-video-redundancies-list', | |
12 | templateUrl: './video-redundancies-list.component.html', | |
eeae8142 | 13 | styleUrls: [ './video-redundancies-list.component.scss' ] |
b764380a C |
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 | |
b764380a C |
20 | |
21 | sort: SortMeta = { field: 'name', order: 1 } | |
22 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } | |
23 | displayType: VideoRedundanciesTarget = 'my-videos' | |
24 | ||
818045ef | 25 | redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: ChartData, options: ChartOptions }[] = [] |
b764380a C |
26 | |
27 | noRedundancies = false | |
28 | ||
29 | private bytesPipe: BytesPipe | |
30 | ||
31 | constructor ( | |
32 | private notifier: Notifier, | |
33 | private confirmService: ConfirmService, | |
34 | private redundancyService: RedundancyService, | |
66357162 | 35 | private serverService: ServerService |
9df52d66 | 36 | ) { |
b764380a C |
37 | super() |
38 | ||
39 | this.bytesPipe = new BytesPipe() | |
40 | } | |
41 | ||
8e11a1b3 C |
42 | getIdentifier () { |
43 | return 'VideoRedundanciesListComponent' | |
44 | } | |
45 | ||
b764380a C |
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 | ||
b1f3b635 | 63 | getColspan () { |
2bc9bd08 | 64 | if (this.isDisplayingRemoteVideos()) return 5 |
b1f3b635 | 65 | |
2bc9bd08 | 66 | return 4 |
b1f3b635 C |
67 | } |
68 | ||
b764380a C |
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 | ||
2e46eb97 | 82 | this.reloadData() |
b764380a C |
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) { | |
ba8a8367 C |
93 | if (stats.totalSize === 0) return |
94 | ||
95 | const totalAvailable = stats.totalSize | |
b764380a | 96 | ? stats.totalSize - stats.totalUsed |
ba8a8367 C |
97 | : null |
98 | ||
99 | const labels = [ $localize`Used (${this.bytesToHuman(stats.totalUsed)})` ] | |
100 | const data = [ stats.totalUsed ] | |
b764380a | 101 | |
ba8a8367 C |
102 | // Not in manual strategy |
103 | if (totalAvailable) { | |
104 | labels.push( | |
105 | $localize`Available (${this.bytesToHuman(totalAvailable)})` | |
106 | ) | |
107 | ||
108 | data.push(totalAvailable) | |
109 | } | |
b764380a C |
110 | |
111 | this.redundanciesGraphsData.push({ | |
112 | stats, | |
113 | graphData: { | |
ba8a8367 | 114 | labels, |
b764380a C |
115 | datasets: [ |
116 | { | |
ba8a8367 | 117 | data, |
b764380a C |
118 | backgroundColor: [ |
119 | '#FF6384', | |
120 | '#36A2EB' | |
121 | ], | |
122 | hoverBackgroundColor: [ | |
123 | '#FF6384', | |
124 | '#36A2EB' | |
125 | ] | |
126 | } | |
127 | ] | |
128 | }, | |
129 | options: { | |
818045ef C |
130 | plugins: { |
131 | title: { | |
132 | display: true, | |
133 | text: stats.strategy | |
134 | }, | |
135 | ||
136 | tooltip: { | |
137 | callbacks: { | |
138 | label: (tooltip: TooltipItem<any>) => { | |
ba8a8367 | 139 | return tooltip.label |
818045ef | 140 | } |
b764380a C |
141 | } |
142 | } | |
143 | } | |
144 | } | |
145 | }) | |
146 | } | |
147 | ||
148 | async removeRedundancy (redundancy: VideoRedundancy) { | |
66357162 C |
149 | const message = $localize`Do you really want to remove this video redundancy?` |
150 | const res = await this.confirmService.confirm(message, $localize`Remove redundancy`) | |
b764380a C |
151 | if (res === false) return |
152 | ||
153 | this.redundancyService.removeVideoRedundancies(redundancy) | |
1378c0d3 C |
154 | .subscribe({ |
155 | next: () => { | |
66357162 | 156 | this.notifier.success($localize`Video redundancies removed!`) |
2e46eb97 | 157 | this.reloadData() |
b764380a C |
158 | }, |
159 | ||
1378c0d3 C |
160 | error: err => this.notifier.error(err.message) |
161 | }) | |
b764380a C |
162 | |
163 | } | |
164 | ||
2e46eb97 | 165 | protected reloadData () { |
b764380a C |
166 | const options = { |
167 | pagination: this.pagination, | |
168 | sort: this.sort, | |
169 | target: this.displayType | |
170 | } | |
171 | ||
172 | this.redundancyService.listVideoRedundancies(options) | |
1378c0d3 C |
173 | .subscribe({ |
174 | next: resultList => { | |
b764380a C |
175 | this.videoRedundancies = resultList.data |
176 | this.totalRecords = resultList.total | |
177 | }, | |
178 | ||
1378c0d3 C |
179 | error: err => this.notifier.error(err.message) |
180 | }) | |
b764380a C |
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 | } | |
ba8a8367 C |
191 | |
192 | private bytesToHuman (bytes: number) { | |
193 | return this.bytesPipe.transform(bytes, 1) | |
194 | } | |
b764380a | 195 | } |