]>
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 | ||
0e76f30a C |
29 | // Prevent layout shift for redundancy stats |
30 | dataLoaded = false | |
31 | ||
b764380a C |
32 | private bytesPipe: BytesPipe |
33 | ||
34 | constructor ( | |
35 | private notifier: Notifier, | |
36 | private confirmService: ConfirmService, | |
37 | private redundancyService: RedundancyService, | |
66357162 | 38 | private serverService: ServerService |
9df52d66 | 39 | ) { |
b764380a C |
40 | super() |
41 | ||
42 | this.bytesPipe = new BytesPipe() | |
43 | } | |
44 | ||
8e11a1b3 C |
45 | getIdentifier () { |
46 | return 'VideoRedundanciesListComponent' | |
47 | } | |
48 | ||
b764380a C |
49 | ngOnInit () { |
50 | this.loadSelectLocalStorage() | |
51 | ||
52 | this.initialize() | |
53 | ||
54 | this.serverService.getServerStats() | |
55 | .subscribe(res => { | |
56 | const redundancies = res.videosRedundancy | |
57 | ||
58 | if (redundancies.length === 0) this.noRedundancies = true | |
59 | ||
60 | for (const r of redundancies) { | |
61 | this.buildPieData(r) | |
62 | } | |
63 | }) | |
64 | } | |
65 | ||
66 | isDisplayingRemoteVideos () { | |
67 | return this.displayType === 'remote-videos' | |
68 | } | |
69 | ||
70 | getTotalSize (redundancy: VideoRedundancy) { | |
71 | return redundancy.redundancies.files.reduce((a, b) => a + b.size, 0) + | |
72 | redundancy.redundancies.streamingPlaylists.reduce((a, b) => a + b.size, 0) | |
73 | } | |
74 | ||
75 | onDisplayTypeChanged () { | |
76 | this.pagination.start = 0 | |
77 | this.saveSelectLocalStorage() | |
78 | ||
2e46eb97 | 79 | this.reloadData() |
b764380a C |
80 | } |
81 | ||
82 | getRedundancyStrategy (redundancy: VideoRedundancy) { | |
83 | if (redundancy.redundancies.files.length !== 0) return redundancy.redundancies.files[0].strategy | |
84 | if (redundancy.redundancies.streamingPlaylists.length !== 0) return redundancy.redundancies.streamingPlaylists[0].strategy | |
85 | ||
86 | return '' | |
87 | } | |
88 | ||
89 | buildPieData (stats: VideosRedundancyStats) { | |
ba8a8367 C |
90 | if (stats.totalSize === 0) return |
91 | ||
92 | const totalAvailable = stats.totalSize | |
b764380a | 93 | ? stats.totalSize - stats.totalUsed |
ba8a8367 C |
94 | : null |
95 | ||
96 | const labels = [ $localize`Used (${this.bytesToHuman(stats.totalUsed)})` ] | |
97 | const data = [ stats.totalUsed ] | |
b764380a | 98 | |
ba8a8367 C |
99 | // Not in manual strategy |
100 | if (totalAvailable) { | |
101 | labels.push( | |
102 | $localize`Available (${this.bytesToHuman(totalAvailable)})` | |
103 | ) | |
104 | ||
105 | data.push(totalAvailable) | |
106 | } | |
b764380a C |
107 | |
108 | this.redundanciesGraphsData.push({ | |
109 | stats, | |
110 | graphData: { | |
ba8a8367 | 111 | labels, |
b764380a C |
112 | datasets: [ |
113 | { | |
ba8a8367 | 114 | data, |
b764380a C |
115 | backgroundColor: [ |
116 | '#FF6384', | |
117 | '#36A2EB' | |
118 | ], | |
119 | hoverBackgroundColor: [ | |
120 | '#FF6384', | |
121 | '#36A2EB' | |
122 | ] | |
123 | } | |
124 | ] | |
125 | }, | |
126 | options: { | |
818045ef C |
127 | plugins: { |
128 | title: { | |
129 | display: true, | |
130 | text: stats.strategy | |
131 | }, | |
132 | ||
133 | tooltip: { | |
134 | callbacks: { | |
135 | label: (tooltip: TooltipItem<any>) => { | |
ba8a8367 | 136 | return tooltip.label |
818045ef | 137 | } |
b764380a C |
138 | } |
139 | } | |
140 | } | |
141 | } | |
142 | }) | |
143 | } | |
144 | ||
145 | async removeRedundancy (redundancy: VideoRedundancy) { | |
66357162 C |
146 | const message = $localize`Do you really want to remove this video redundancy?` |
147 | const res = await this.confirmService.confirm(message, $localize`Remove redundancy`) | |
b764380a C |
148 | if (res === false) return |
149 | ||
150 | this.redundancyService.removeVideoRedundancies(redundancy) | |
1378c0d3 C |
151 | .subscribe({ |
152 | next: () => { | |
66357162 | 153 | this.notifier.success($localize`Video redundancies removed!`) |
2e46eb97 | 154 | this.reloadData() |
b764380a C |
155 | }, |
156 | ||
1378c0d3 C |
157 | error: err => this.notifier.error(err.message) |
158 | }) | |
b764380a C |
159 | |
160 | } | |
161 | ||
e854d57b | 162 | protected reloadDataInternal () { |
0e76f30a C |
163 | this.dataLoaded = false |
164 | ||
b764380a C |
165 | const options = { |
166 | pagination: this.pagination, | |
167 | sort: this.sort, | |
168 | target: this.displayType | |
169 | } | |
170 | ||
171 | this.redundancyService.listVideoRedundancies(options) | |
1378c0d3 C |
172 | .subscribe({ |
173 | next: resultList => { | |
b764380a C |
174 | this.videoRedundancies = resultList.data |
175 | this.totalRecords = resultList.total | |
0e76f30a C |
176 | |
177 | this.dataLoaded = true | |
b764380a C |
178 | }, |
179 | ||
343d1395 | 180 | error: err => this.notifier.error(err.message) |
1378c0d3 | 181 | }) |
b764380a C |
182 | } |
183 | ||
184 | private loadSelectLocalStorage () { | |
185 | const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE) | |
186 | if (displayType) this.displayType = displayType as VideoRedundanciesTarget | |
187 | } | |
188 | ||
189 | private saveSelectLocalStorage () { | |
190 | peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType) | |
191 | } | |
ba8a8367 C |
192 | |
193 | private bytesToHuman (bytes: number) { | |
194 | return this.bytesPipe.transform(bytes, 1) | |
195 | } | |
b764380a | 196 | } |