]>
Commit | Line | Data |
---|---|---|
9f95a23c TL |
1 | import { Component, Input, NgZone, OnChanges, OnDestroy } from '@angular/core'; |
2 | ||
f67539c2 | 3 | import _ from 'lodash'; |
9f95a23c TL |
4 | import { Subscription, timer } from 'rxjs'; |
5 | ||
f67539c2 TL |
6 | import { CephfsService } from '~/app/shared/api/cephfs.service'; |
7 | import { TableStatusViewCache } from '~/app/shared/classes/table-status-view-cache'; | |
8 | import { ViewCacheStatus } from '~/app/shared/enum/view-cache-status.enum'; | |
9 | import { Permission } from '~/app/shared/models/permissions'; | |
10 | import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; | |
9f95a23c TL |
11 | |
12 | @Component({ | |
13 | selector: 'cd-cephfs-tabs', | |
14 | templateUrl: './cephfs-tabs.component.html', | |
15 | styleUrls: ['./cephfs-tabs.component.scss'] | |
16 | }) | |
17 | export class CephfsTabsComponent implements OnChanges, OnDestroy { | |
18 | @Input() | |
e306af50 | 19 | selection: any; |
9f95a23c TL |
20 | |
21 | // Grafana tab | |
22 | grafanaId: any; | |
23 | grafanaPermission: Permission; | |
24 | ||
25 | // Client tab | |
26 | id: number; | |
27 | clients: Record<string, any> = { | |
28 | data: [], | |
f67539c2 | 29 | status: new TableStatusViewCache(ViewCacheStatus.ValueNone) |
9f95a23c TL |
30 | }; |
31 | ||
32 | // Details tab | |
33 | details: Record<string, any> = { | |
34 | standbys: '', | |
35 | pools: [], | |
36 | ranks: [], | |
37 | mdsCounters: {}, | |
38 | name: '' | |
39 | }; | |
40 | ||
9f95a23c TL |
41 | private data: any; |
42 | private reloadSubscriber: Subscription; | |
43 | ||
44 | constructor( | |
45 | private ngZone: NgZone, | |
46 | private authStorageService: AuthStorageService, | |
47 | private cephfsService: CephfsService | |
48 | ) { | |
49 | this.grafanaPermission = this.authStorageService.getPermissions().grafana; | |
50 | } | |
51 | ||
52 | ngOnChanges() { | |
e306af50 | 53 | if (!this.selection) { |
9f95a23c TL |
54 | this.unsubscribeInterval(); |
55 | return; | |
56 | } | |
e306af50 TL |
57 | if (this.selection.id !== this.id) { |
58 | this.setupSelected(this.selection.id, this.selection.mdsmap.info); | |
9f95a23c TL |
59 | } |
60 | } | |
61 | ||
62 | private setupSelected(id: number, mdsInfo: any) { | |
63 | this.id = id; | |
64 | const firstMds: any = _.first(Object.values(mdsInfo)); | |
65 | this.grafanaId = firstMds && firstMds['name']; | |
66 | this.details = { | |
67 | standbys: '', | |
68 | pools: [], | |
69 | ranks: [], | |
70 | mdsCounters: {}, | |
71 | name: '' | |
72 | }; | |
73 | this.clients = { | |
74 | data: [], | |
f67539c2 | 75 | status: new TableStatusViewCache(ViewCacheStatus.ValueNone) |
9f95a23c TL |
76 | }; |
77 | this.updateInterval(); | |
78 | } | |
79 | ||
80 | private updateInterval() { | |
81 | this.unsubscribeInterval(); | |
82 | this.subscribeInterval(); | |
83 | } | |
84 | ||
85 | private unsubscribeInterval() { | |
86 | if (this.reloadSubscriber) { | |
87 | this.reloadSubscriber.unsubscribe(); | |
88 | } | |
89 | } | |
90 | ||
91 | private subscribeInterval() { | |
92 | this.ngZone.runOutsideAngular( | |
93 | () => | |
94 | (this.reloadSubscriber = timer(0, 5000).subscribe(() => | |
95 | this.ngZone.run(() => this.refresh()) | |
96 | )) | |
97 | ); | |
98 | } | |
99 | ||
100 | refresh() { | |
101 | this.cephfsService.getTabs(this.id).subscribe( | |
102 | (data: any) => { | |
103 | this.data = data; | |
104 | this.softRefresh(); | |
105 | }, | |
106 | () => { | |
f67539c2 | 107 | this.clients.status = new TableStatusViewCache(ViewCacheStatus.ValueException); |
9f95a23c TL |
108 | } |
109 | ); | |
110 | } | |
111 | ||
112 | softRefresh() { | |
113 | const data = _.cloneDeep(this.data); // Forces update of tab tables on tab switch | |
114 | // Clients tab | |
115 | this.clients = data.clients; | |
f67539c2 | 116 | this.clients.status = new TableStatusViewCache(this.clients.status); |
9f95a23c TL |
117 | // Details tab |
118 | this.details = { | |
119 | standbys: data.standbys, | |
120 | pools: data.pools, | |
121 | ranks: data.ranks, | |
122 | mdsCounters: data.mds_counters, | |
123 | name: data.name | |
124 | }; | |
125 | } | |
126 | ||
127 | ngOnDestroy() { | |
128 | this.unsubscribeInterval(); | |
129 | } | |
130 | } |