]>
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', | |
d3840613 | 13 | styleUrls: [ '../follows.component.scss', './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) { | |
93 | const totalSize = stats.totalSize | |
94 | ? stats.totalSize - stats.totalUsed | |
95 | : stats.totalUsed | |
96 | ||
97 | if (totalSize === 0) return | |
98 | ||
99 | this.redundanciesGraphsData.push({ | |
100 | stats, | |
101 | graphData: { | |
66357162 | 102 | labels: [ $localize`Used`, $localize`Available` ], |
b764380a C |
103 | datasets: [ |
104 | { | |
105 | data: [ stats.totalUsed, totalSize ], | |
106 | backgroundColor: [ | |
107 | '#FF6384', | |
108 | '#36A2EB' | |
109 | ], | |
110 | hoverBackgroundColor: [ | |
111 | '#FF6384', | |
112 | '#36A2EB' | |
113 | ] | |
114 | } | |
115 | ] | |
116 | }, | |
117 | options: { | |
818045ef C |
118 | plugins: { |
119 | title: { | |
120 | display: true, | |
121 | text: stats.strategy | |
122 | }, | |
123 | ||
124 | tooltip: { | |
125 | callbacks: { | |
126 | label: (tooltip: TooltipItem<any>) => { | |
127 | let label = tooltip.label || '' | |
128 | if (label) label += ': ' | |
129 | ||
130 | label += this.bytesPipe.transform(tooltip.raw as number, 1) | |
131 | ||
132 | return label | |
133 | } | |
b764380a C |
134 | } |
135 | } | |
136 | } | |
137 | } | |
138 | }) | |
139 | } | |
140 | ||
141 | async removeRedundancy (redundancy: VideoRedundancy) { | |
66357162 C |
142 | const message = $localize`Do you really want to remove this video redundancy?` |
143 | const res = await this.confirmService.confirm(message, $localize`Remove redundancy`) | |
b764380a C |
144 | if (res === false) return |
145 | ||
146 | this.redundancyService.removeVideoRedundancies(redundancy) | |
1378c0d3 C |
147 | .subscribe({ |
148 | next: () => { | |
66357162 | 149 | this.notifier.success($localize`Video redundancies removed!`) |
2e46eb97 | 150 | this.reloadData() |
b764380a C |
151 | }, |
152 | ||
1378c0d3 C |
153 | error: err => this.notifier.error(err.message) |
154 | }) | |
b764380a C |
155 | |
156 | } | |
157 | ||
2e46eb97 | 158 | protected reloadData () { |
b764380a C |
159 | const options = { |
160 | pagination: this.pagination, | |
161 | sort: this.sort, | |
162 | target: this.displayType | |
163 | } | |
164 | ||
165 | this.redundancyService.listVideoRedundancies(options) | |
1378c0d3 C |
166 | .subscribe({ |
167 | next: resultList => { | |
b764380a C |
168 | this.videoRedundancies = resultList.data |
169 | this.totalRecords = resultList.total | |
170 | }, | |
171 | ||
1378c0d3 C |
172 | error: err => this.notifier.error(err.message) |
173 | }) | |
b764380a C |
174 | } |
175 | ||
176 | private loadSelectLocalStorage () { | |
177 | const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE) | |
178 | if (displayType) this.displayType = displayType as VideoRedundanciesTarget | |
179 | } | |
180 | ||
181 | private saveSelectLocalStorage () { | |
182 | peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType) | |
183 | } | |
184 | } |