vigigraph / vigigraph / public / js / toolbar.js @ 696cffc9
History | View | Annotate | Download (9.94 KB)
1 |
// Copyright (C) 2006-2020 CS GROUP - France
|
---|---|
2 |
// License: GNU GPL v2 <http://www.gnu.org/licenses/gpl-2.0.html>
|
3 |
|
4 |
Jx.Button.SelectorFlyout = new Class({
|
5 |
Extends: Jx.Button.Flyout,
|
6 |
|
7 |
initialize: function (options, url, itemImage) { |
8 |
this.idselection = null; |
9 |
this.hostid = null; |
10 |
var tree_container = new Element("div"); |
11 |
tree_container.setStyle("padding", "0 10px 10px 10px"); |
12 |
this.tree = new GroupTree({ |
13 |
parent: tree_container,
|
14 |
url: url,
|
15 |
itemName: "item", |
16 |
itemImage: "images/" + itemImage, |
17 |
onItemClick: this.selectItem.bind(this) |
18 |
}); |
19 |
options.content = tree_container; |
20 |
options.onOpen = function() { |
21 |
if (! this.tree.isLoaded) { |
22 |
this.tree.load();
|
23 |
} |
24 |
}.bind(this);
|
25 |
this.parent(options);
|
26 |
this.tree.addEvent('select', this.selectItem.bind(this)); |
27 |
|
28 |
// On adapte la fenêtre popup aux dépliements de l'arbre
|
29 |
var adaptPopup = function(e) { |
30 |
if (!this.options.active) return; |
31 |
// On évite le scrolling dans le menu popup
|
32 |
var size_x = this.content.getSize().x; |
33 |
var scroll_size_x = this.content.getScrollSize().x; |
34 |
if (scroll_size_x > size_x) {
|
35 |
this.content.setStyle("width", scroll_size_x + 10); |
36 |
// 10: padding-right du div
|
37 |
} |
38 |
// On adapte la bordure ombrée
|
39 |
this.contentContainer.setContentBoxSize(
|
40 |
$(this.content).getMarginBoxSize()); |
41 |
}; |
42 |
this.tree.addEvent("load", adaptPopup.bind(this)); |
43 |
this.tree.addEvent("branchloaded", adaptPopup.bind(this)); |
44 |
this.tree.addEvent("nodedisclosed", adaptPopup.bind(this)); |
45 |
this.tree.addEvent("groupClick", adaptPopup.bind(this)); |
46 |
}, |
47 |
|
48 |
setItem: function (idselection, label) { |
49 |
this.idselection = idselection;
|
50 |
this.setLabel(label);
|
51 |
this.fireEvent("select", [idselection, label]); |
52 |
}, |
53 |
|
54 |
selectItem: function (item) { |
55 |
this.setItem(item.id, item.name);
|
56 |
this.hide();
|
57 |
}, |
58 |
|
59 |
setHostId: function(hostid) { |
60 |
this.tree.options.requestOptions = {"host_id": hostid}; |
61 |
this.hostid = hostid;
|
62 |
}, |
63 |
|
64 |
redraw: function() { |
65 |
this.tree.clear();
|
66 |
this.tree.load();
|
67 |
} |
68 |
}); |
69 |
|
70 |
Jx.Button.StaticCombo = new Class({
|
71 |
Extends: Jx.Button.Combo,
|
72 |
|
73 |
initialize: function (options) { |
74 |
this.locked = false; |
75 |
this.parent(options);
|
76 |
this.setImage(options.image);
|
77 |
this.setLabel(options.label);
|
78 |
this.locked = true; |
79 |
}, |
80 |
|
81 |
setLabel: function(label) { |
82 |
if (!this.locked) |
83 |
this.parent(label);
|
84 |
}, |
85 |
|
86 |
setImage: function(path) { |
87 |
if (!this.locked) |
88 |
this.parent(path);
|
89 |
} |
90 |
}); |
91 |
|
92 |
var Toolbar = new Class({ |
93 |
Implements: [Events],
|
94 |
|
95 |
initialize: function () { |
96 |
this.jxtoolbar = new Jx.Toolbar({ |
97 |
parent: $('toolbar') |
98 |
}); |
99 |
|
100 |
this.global_refresh = new Jx.Button({ |
101 |
label: _('Refresh'), |
102 |
tooltip: _('Globally change auto-refresh setting'), |
103 |
image: app_path + 'images/refresh.png', |
104 |
toggle: true, |
105 |
onDown: function () { |
106 |
window.graphs.each(function (graph) {
|
107 |
graph.refresh_button.setActive(1);
|
108 |
}, this.global_refresh);
|
109 |
}.bind(this),
|
110 |
onUp: function () { |
111 |
window.graphs.each(function (graph) {
|
112 |
graph.refresh_button.setActive(0);
|
113 |
}, this.global_refresh);
|
114 |
}.bind(this)
|
115 |
}); |
116 |
|
117 |
this.host_label = new Jx.Toolbar.Item(this.createLabel(_('Host:'))); |
118 |
|
119 |
this.host_picker = new Jx.Button.SelectorFlyout({ |
120 |
label: _('Select a host'), |
121 |
tooltip: _('Click me to select another host') |
122 |
}, |
123 |
app_path + 'rpc/hosttree',
|
124 |
"drive-harddisk.png"
|
125 |
); |
126 |
|
127 |
this.host_picker.addEvent("select", function() { |
128 |
var idselection = this.host_picker.idselection; |
129 |
if (this.graph_picker.hostid !== idselection) { |
130 |
this.graph_picker.setHostId(idselection);
|
131 |
this.graph_picker.redraw();
|
132 |
this.graph_picker.setItem(null, this.graph_picker.options.label); |
133 |
} |
134 |
this.fireEvent('select-host'); |
135 |
this.graph_picker.setEnabled(1); |
136 |
}.bind(this));
|
137 |
|
138 |
this.links = new Jx.Button.StaticCombo({ |
139 |
label: _('External links...'), |
140 |
image: app_path + 'images/external-link.png', |
141 |
enabled: false |
142 |
}); |
143 |
var extlinks = new Request.JSON({ |
144 |
url: app_path + "rpc/external_links", |
145 |
method: 'get', |
146 |
onSuccess: function (data) { |
147 |
if (!data.links) return; |
148 |
data.links.each(function (extlink) {
|
149 |
var uri;
|
150 |
extlink = new Hash(extlink);
|
151 |
if (extlink.has('uri')) { |
152 |
uri = extlink.get('uri');
|
153 |
extlink.erase('uri');
|
154 |
extlink.set('enabled', false); |
155 |
extlink.set('onClick', function (obj, evt) { |
156 |
var dest = new URI(uri.substitute({ |
157 |
'host': encodeURIComponent(this.host_picker.getLabel()) |
158 |
})); |
159 |
if (!obj.options.sameWindow)
|
160 |
window.open(dest.toString()); |
161 |
else dest.go();
|
162 |
}.bind(this));
|
163 |
this.links.add(extlink.getClean());
|
164 |
} |
165 |
}, this);
|
166 |
|
167 |
this.links.buttonSet.buttons.each(function (btn) { |
168 |
this.addEvent('select-host', function () { |
169 |
btn.setEnabled(1);
|
170 |
}); |
171 |
}, this);
|
172 |
|
173 |
if (this.links.buttonSet.buttons.length) |
174 |
this.links.setEnabled(1); |
175 |
}.bind(this)
|
176 |
}); |
177 |
extlinks.send(); |
178 |
|
179 |
this.graph_label = new Jx.Toolbar.Item(this.createLabel(_('Graph:'))); |
180 |
|
181 |
this.graph_picker = new Jx.Button.SelectorFlyout({ |
182 |
label: _('Select a graph'), |
183 |
tooltip: _('Click me to select another graph'), |
184 |
enabled: false |
185 |
}, |
186 |
app_path + 'rpc/graphtree',
|
187 |
"utilities-system-monitor.png"
|
188 |
); |
189 |
|
190 |
this.graph_picker.addEvent("select", function (idselection, label) { |
191 |
if (idselection !== null) { |
192 |
//this.show_graph.setEnabled(1);
|
193 |
new Graph(
|
194 |
{autoRefresh: this.global_refresh.isActive() ? 1 : 0}, |
195 |
this.host_picker.getLabel(),
|
196 |
this.graph_picker.getLabel()
|
197 |
); |
198 |
} |
199 |
}.bind(this));
|
200 |
|
201 |
this.show_graph = new Jx.Button({ |
202 |
label: _('Graph'), |
203 |
tooltip: _('Display the contents of the selected graph'), |
204 |
toggle: false, |
205 |
enabled: false, |
206 |
onClick: function () { |
207 |
new Graph(
|
208 |
{autoRefresh: this.global_refresh.isActive() ? 1 : 0}, |
209 |
this.host_picker.getLabel(),
|
210 |
this.graph_picker.getLabel()
|
211 |
); |
212 |
}.bind(this)
|
213 |
}); |
214 |
|
215 |
// Remplissage de la barre d'outils
|
216 |
this.jxtoolbar.add(this.global_refresh); |
217 |
this.jxtoolbar.add(new Jx.Toolbar.Separator()); |
218 |
this.jxtoolbar.add(this.host_label); // à supprimer ? |
219 |
this.jxtoolbar.add(this.host_picker); |
220 |
this.jxtoolbar.add(new Jx.Toolbar.Separator()); |
221 |
this.jxtoolbar.add(this.graph_label); // à supprimer ? |
222 |
this.jxtoolbar.add(this.graph_picker); |
223 |
//this.jxtoolbar.add(this.show_graph);
|
224 |
this.jxtoolbar.add(this.links); |
225 |
|
226 |
// Vérification de la date de dernière modification en base, et
|
227 |
// rechargement des arbres le cas échéant
|
228 |
this.loadtime = new Date(); |
229 |
this.checkExpiration.periodical(30 * 1000, this); |
230 |
}, |
231 |
|
232 |
// Retourne un objet opaque qui possède un label,
|
233 |
// et peut être ajouté à une Jx.Toolbar via Jx.Toolbar.Item.
|
234 |
createLabel: function (label) { |
235 |
var container, content, span;
|
236 |
|
237 |
container = new Element('div', {'class': 'jxButtonContainer'}); |
238 |
content = new Element('span', {'class': 'jxButtonContent'}); |
239 |
span = new Element('span', { |
240 |
'class': 'jxButtonLabel', |
241 |
text: label
|
242 |
}); |
243 |
span.setStyles({cursor: 'default'}); |
244 |
|
245 |
span.inject(content); |
246 |
content.inject(container); |
247 |
|
248 |
return container;
|
249 |
}, |
250 |
|
251 |
// Vérifie si la base a changé, et recharge les sélecteurs en conséquence
|
252 |
checkExpiration: function() { |
253 |
if (!this.req_expiration) { // ne creer qu'une instance |
254 |
this.req_expiration = new Request.JSON({ |
255 |
method: "get", |
256 |
url: app_path + "rpc/dbmtime", |
257 |
onSuccess: function(result){ |
258 |
if (!result) return; |
259 |
var mtime = Date.parse(result.mtime);
|
260 |
if ((toolbar.loadtime - mtime) >= 0) return; |
261 |
// la base a changé, on recharge les arbres
|
262 |
if (toolbar.host_picker.idselection) {
|
263 |
toolbar.host_picker.redraw(); |
264 |
} |
265 |
if (toolbar.graph_picker.idselection) {
|
266 |
toolbar.graph_picker.redraw(); |
267 |
} |
268 |
// @todo: En théorie on devrait aussi vérifier que
|
269 |
// l'élément sélectionné existe dans l'arbre, mais c'est un
|
270 |
// peu compliqué avec le chargement dynamique. Il faudrait
|
271 |
// faire une requête spécifique
|
272 |
toolbar.loadtime = new Date();
|
273 |
} |
274 |
}); |
275 |
} |
276 |
this.req_expiration.send();
|
277 |
} |
278 |
}); |
279 |
|
280 |
toolbar = null;
|
281 |
window.addEvent('load', function () { |
282 |
window.toolbar = new Toolbar();
|
283 |
}); |