]>
Commit | Line | Data |
---|---|---|
23b126b2 DC |
1 | Ext.define('PVE.dc.Guests', { |
2 | extend: 'Ext.panel.Panel', | |
3 | alias: 'widget.pveDcGuests', | |
4 | ||
5 | ||
6 | title: gettext('Guests'), | |
769d716b | 7 | height: 250, |
701acf20 DC |
8 | layout: { |
9 | type: 'table', | |
10 | columns: 2, | |
11 | tableAttrs: { | |
12 | style: { | |
f6710aac TL |
13 | width: '100%', |
14 | }, | |
15 | }, | |
701acf20 | 16 | }, |
23b126b2 DC |
17 | bodyPadding: '0 20 20 20', |
18 | ||
19 | defaults: { | |
23b126b2 DC |
20 | xtype: 'box', |
21 | padding: '0 50 0 50', | |
22 | style: { | |
8058410f | 23 | 'text-align': 'center', |
30179cc0 TL |
24 | 'line-height': '1.5em', |
25 | 'font-size': '14px', | |
f6710aac | 26 | }, |
23b126b2 | 27 | }, |
3e32628c TL |
28 | items: [ |
29 | { | |
30 | itemId: 'qemu', | |
31 | data: { | |
32 | running: 0, | |
33 | paused: 0, | |
34 | stopped: 0, | |
35 | template: 0, | |
36 | }, | |
f9a7d55d | 37 | cls: 'centered-flex-column', |
3e32628c TL |
38 | tpl: [ |
39 | '<h3>' + gettext("Virtual Machines") + '</h3>', | |
f9a7d55d TL |
40 | '<div>', |
41 | '<div class="left-aligned">', | |
42 | '<i class="good fa fa-fw fa-play-circle"> </i>', | |
43 | gettext('Running'), | |
44 | '</div>', | |
45 | '<div class="right-aligned">{running}</div>', | |
23b126b2 | 46 | '</div>', |
3e32628c | 47 | '<tpl if="paused > 0">', |
f9a7d55d TL |
48 | '<div>', |
49 | '<div class="left-aligned">', | |
50 | '<i class="warning fa fa-fw fa-pause-circle"> </i>', | |
51 | gettext('Paused'), | |
52 | '</div>', | |
53 | '<div class="right-aligned">{paused}</div>', | |
3e32628c | 54 | '</div>', |
3e32628c | 55 | '</tpl>', |
f9a7d55d TL |
56 | '<div>', |
57 | '<div class="left-aligned">', | |
58 | '<i class="faded fa fa-fw fa-stop-circle"> </i>', | |
59 | gettext('Stopped'), | |
60 | '</div>', | |
61 | '<div class="right-aligned">{stopped}</div>', | |
23b126b2 | 62 | '</div>', |
3e32628c | 63 | '<tpl if="template > 0">', |
f9a7d55d TL |
64 | '<div>', |
65 | '<div class="left-aligned">', | |
66 | '<i class="fa fa-fw fa-circle-o"> </i>', | |
67 | gettext('Templates'), | |
68 | '</div>', | |
69 | '<div class="right-aligned">{template}</div>', | |
3e32628c | 70 | '</div>', |
3e32628c TL |
71 | '</tpl>', |
72 | ], | |
23b126b2 | 73 | }, |
3e32628c TL |
74 | { |
75 | itemId: 'lxc', | |
76 | data: { | |
77 | running: 0, | |
78 | paused: 0, | |
79 | stopped: 0, | |
80 | template: 0, | |
81 | }, | |
f9a7d55d | 82 | cls: 'centered-flex-column', |
3e32628c TL |
83 | tpl: [ |
84 | '<h3>' + gettext("LXC Container") + '</h3>', | |
f9a7d55d TL |
85 | '<div>', |
86 | '<div class="left-aligned">', | |
87 | '<i class="good fa fa-fw fa-play-circle"> </i>', | |
88 | gettext('Running'), | |
89 | '</div>', | |
90 | '<div class="right-aligned">{running}</div>', | |
23b126b2 | 91 | '</div>', |
3e32628c | 92 | '<tpl if="paused > 0">', |
f9a7d55d TL |
93 | '<div>', |
94 | '<div class="left-aligned">', | |
95 | '<i class="warning fa fa-fw fa-pause-circle"> </i>', | |
96 | gettext('Paused'), | |
97 | '</div>', | |
98 | '<div class="right-aligned">{paused}</div>', | |
3e32628c | 99 | '</div>', |
3e32628c | 100 | '</tpl>', |
f9a7d55d TL |
101 | '<div>', |
102 | '<div class="left-aligned">', | |
103 | '<i class="faded fa fa-fw fa-stop-circle"> </i>', | |
104 | gettext('Stopped'), | |
105 | '</div>', | |
106 | '<div class="right-aligned">{stopped}</div>', | |
23b126b2 | 107 | '</div>', |
3e32628c | 108 | '<tpl if="template > 0">', |
f9a7d55d TL |
109 | '<div>', |
110 | '<div class="left-aligned">', | |
111 | '<i class="fa fa-fw fa-circle-o"> </i>', | |
112 | gettext('Templates'), | |
113 | '</div>', | |
114 | '<div class="right-aligned">{template}</div>', | |
3e32628c | 115 | '</div>', |
3e32628c TL |
116 | '</tpl>', |
117 | ], | |
23b126b2 | 118 | }, |
3e32628c TL |
119 | { |
120 | itemId: 'error', | |
121 | colspan: 2, | |
122 | data: { | |
123 | num: 0, | |
124 | }, | |
125 | columnWidth: 1, | |
126 | padding: '10 250 0 250', | |
127 | tpl: [ | |
128 | '<tpl if="num > 0">', | |
129 | '<div class="left-aligned">', | |
130 | '<i class="critical fa fa-fw fa-times-circle"> </i>', | |
131 | gettext('Error'), | |
132 | '</div>', | |
133 | '<div class="right-aligned">{num}</div>', | |
134 | '</tpl>', | |
135 | ], | |
136 | }, | |
137 | ], | |
23b126b2 DC |
138 | |
139 | updateValues: function(qemu, lxc, error) { | |
8295f55e | 140 | let me = this; |
6b307141 TL |
141 | |
142 | let lazyUpdate = (query, newData) => { | |
143 | let el = me.getComponent(query); | |
144 | let currentData = el.data; | |
145 | ||
146 | let keys = Object.keys(newData); | |
147 | if (keys.length === Object.keys(currentData).length) { | |
148 | if (keys.every(k => newData[k] === currentData[k])) { | |
149 | return; // all stayed the same here, return early to avoid bogus regeneration | |
150 | } | |
151 | } | |
152 | el.update(newData); | |
153 | }; | |
154 | lazyUpdate('qemu', qemu); | |
155 | lazyUpdate('lxc', lxc); | |
156 | lazyUpdate('error', { num: error }); | |
f6710aac | 157 | }, |
23b126b2 | 158 | }); |