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