vigigraph / vigigraph / public / js / toolbar.js @ 8d814524
History | View | Annotate | Download (10.1 KB)
1 |
// Copyright (C) 2006-2011 CS-SI
|
---|---|
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 |
//clicked: function (e) {
|
65 |
// if (!this.options.enabled)
|
66 |
// return;
|
67 |
// this.tree.selectGroup();
|
68 |
//},
|
69 |
|
70 |
redraw: function() { |
71 |
this.tree.clear();
|
72 |
this.tree.load();
|
73 |
} |
74 |
}); |
75 |
|
76 |
Jx.Button.StaticCombo = new Class({
|
77 |
Extends: Jx.Button.Combo,
|
78 |
|
79 |
initialize: function (options) { |
80 |
this.locked = false; |
81 |
this.parent(options);
|
82 |
this.setImage(options.image);
|
83 |
this.setLabel(options.label);
|
84 |
this.locked = true; |
85 |
}, |
86 |
|
87 |
setLabel: function(label) { |
88 |
if (!this.locked) |
89 |
this.parent(label);
|
90 |
}, |
91 |
|
92 |
setImage: function(path) { |
93 |
if (!this.locked) |
94 |
this.parent(path);
|
95 |
} |
96 |
}); |
97 |
|
98 |
var Toolbar = new Class({ |
99 |
Implements: [Events],
|
100 |
|
101 |
initialize: function () { |
102 |
this.jxtoolbar = new Jx.Toolbar({ |
103 |
parent: $('toolbar') |
104 |
}); |
105 |
|
106 |
this.global_refresh = new Jx.Button({ |
107 |
label: _('Refresh'), |
108 |
tooltip: _('Globally change auto-refresh setting'), |
109 |
//image: app_path + 'images/refresh-all.png',
|
110 |
image: app_path + 'images/refresh.png', |
111 |
toggle: true, |
112 |
onDown: function () { |
113 |
window.graphs.each(function (graph) {
|
114 |
graph.refresh_button.setActive(1);
|
115 |
}, this.global_refresh);
|
116 |
}.bind(this),
|
117 |
onUp: function () { |
118 |
window.graphs.each(function (graph) {
|
119 |
graph.refresh_button.setActive(0);
|
120 |
}, this.global_refresh);
|
121 |
}.bind(this)
|
122 |
}); |
123 |
|
124 |
this.host_label = new Jx.Toolbar.Item(this.createLabel(_('Host:'))); |
125 |
|
126 |
this.host_picker = new Jx.Button.SelectorFlyout({ |
127 |
label: _('Select a host'), |
128 |
tooltip: _('Click me to select another host') |
129 |
}, |
130 |
app_path + 'rpc/hosttree',
|
131 |
"drive-harddisk.png"
|
132 |
); |
133 |
|
134 |
this.host_picker.addEvent("select", function() { |
135 |
var idselection = this.host_picker.idselection; |
136 |
if (this.graph_picker.hostid !== idselection) { |
137 |
this.graph_picker.setHostId(idselection);
|
138 |
this.graph_picker.redraw();
|
139 |
this.graph_picker.setItem(null, this.graph_picker.options.label); |
140 |
} |
141 |
this.fireEvent('select-host'); |
142 |
this.graph_picker.setEnabled(1); |
143 |
}.bind(this));
|
144 |
|
145 |
this.links = new Jx.Button.StaticCombo({ |
146 |
label: _('External links...'), |
147 |
image: app_path + 'images/external-link.png', |
148 |
enabled: false |
149 |
}); |
150 |
var extlinks = new Request.JSON({ |
151 |
url: app_path + "rpc/external_links", |
152 |
method: 'get', |
153 |
onSuccess: function (data) { |
154 |
if (!data.links) return; |
155 |
data.links.each(function (extlink) {
|
156 |
var uri;
|
157 |
extlink = new Hash(extlink);
|
158 |
if (extlink.has('uri')) { |
159 |
uri = extlink.get('uri');
|
160 |
extlink.erase('uri');
|
161 |
extlink.set('enabled', false); |
162 |
extlink.set('onClick', function (obj, evt) { |
163 |
var dest = new URI(uri.substitute({ |
164 |
'host': encodeURIComponent(this.host_picker.getLabel()) |
165 |
})); |
166 |
if (!obj.options.sameWindow)
|
167 |
window.open(dest.toString()); |
168 |
else dest.go();
|
169 |
}.bind(this));
|
170 |
this.links.add(extlink.getClean());
|
171 |
} |
172 |
}, this);
|
173 |
|
174 |
this.links.buttonSet.buttons.each(function (btn) { |
175 |
this.addEvent('select-host', function () { |
176 |
btn.setEnabled(1);
|
177 |
}); |
178 |
}, this);
|
179 |
|
180 |
if (this.links.buttonSet.buttons.length) |
181 |
this.links.setEnabled(1); |
182 |
}.bind(this)
|
183 |
}); |
184 |
extlinks.send(); |
185 |
|
186 |
this.graph_label = new Jx.Toolbar.Item(this.createLabel(_('Graph:'))); |
187 |
|
188 |
this.graph_picker = new Jx.Button.SelectorFlyout({ |
189 |
label: _('Select a graph'), |
190 |
tooltip: _('Click me to select another graph'), |
191 |
enabled: false |
192 |
}, |
193 |
app_path + 'rpc/graphtree',
|
194 |
"utilities-system-monitor.png"
|
195 |
); |
196 |
|
197 |
this.graph_picker.addEvent("select", function (idselection, label) { |
198 |
if (idselection !== null) { |
199 |
//this.show_graph.setEnabled(1);
|
200 |
new Graph(
|
201 |
{autoRefresh: this.global_refresh.isActive() ? 1 : 0}, |
202 |
this.host_picker.getLabel(),
|
203 |
this.graph_picker.getLabel()
|
204 |
); |
205 |
} |
206 |
}.bind(this));
|
207 |
|
208 |
this.show_graph = new Jx.Button({ |
209 |
label: _('Graph'), |
210 |
tooltip: _('Display the contents of the selected graph'), |
211 |
toggle: false, |
212 |
enabled: false, |
213 |
onClick: function () { |
214 |
new Graph(
|
215 |
{autoRefresh: this.global_refresh.isActive() ? 1 : 0}, |
216 |
this.host_picker.getLabel(),
|
217 |
this.graph_picker.getLabel()
|
218 |
); |
219 |
}.bind(this)
|
220 |
}); |
221 |
|
222 |
// Remplissage de la barre d'outils
|
223 |
this.jxtoolbar.add(this.global_refresh); |
224 |
this.jxtoolbar.add(new Jx.Toolbar.Separator()); |
225 |
this.jxtoolbar.add(this.host_label); // à supprimer ? |
226 |
this.jxtoolbar.add(this.host_picker); |
227 |
this.jxtoolbar.add(new Jx.Toolbar.Separator()); |
228 |
this.jxtoolbar.add(this.graph_label); // à supprimer ? |
229 |
this.jxtoolbar.add(this.graph_picker); |
230 |
//this.jxtoolbar.add(this.show_graph);
|
231 |
this.jxtoolbar.add(this.links); |
232 |
|
233 |
// Vérification de la date de dernière modification en base, et
|
234 |
// rechargement des arbres le cas échéant
|
235 |
this.loadtime = new Date(); |
236 |
this.checkExpiration.periodical(30 * 1000, this); |
237 |
}, |
238 |
|
239 |
// Retourne un objet opaque qui possède un label,
|
240 |
// et peut être ajouté à une Jx.Toolbar via Jx.Toolbar.Item.
|
241 |
createLabel: function (label) { |
242 |
var container, content, span;
|
243 |
|
244 |
container = new Element('div', {'class': 'jxButtonContainer'}); |
245 |
content = new Element('span', {'class': 'jxButtonContent'}); |
246 |
span = new Element('span', { |
247 |
'class': 'jxButtonLabel', |
248 |
text: label
|
249 |
}); |
250 |
span.setStyles({cursor: 'default'}); |
251 |
|
252 |
span.inject(content); |
253 |
content.inject(container); |
254 |
|
255 |
return container;
|
256 |
}, |
257 |
|
258 |
// Vérifie si la base a changé, et recharge les sélecteurs en conséquence
|
259 |
checkExpiration: function() { |
260 |
if (!this.req_expiration) { // ne creer qu'une instance |
261 |
this.req_expiration = new Request.JSON({ |
262 |
method: "get", |
263 |
url: app_path + "rpc/dbmtime", |
264 |
onSuccess: function(result){ |
265 |
if (!result) return; |
266 |
var mtime = Date.parse(result.mtime);
|
267 |
if ((toolbar.loadtime - mtime) >= 0) return; |
268 |
// la base a changé, on recharge les arbres
|
269 |
if (toolbar.host_picker.idselection) {
|
270 |
toolbar.host_picker.redraw(); |
271 |
} |
272 |
if (toolbar.graph_picker.idselection) {
|
273 |
toolbar.graph_picker.redraw(); |
274 |
} |
275 |
// @todo: En théorie on devrait aussi vérifier que
|
276 |
// l'élément sélectionné existe dans l'arbre, mais c'est un
|
277 |
// peu compliqué avec le chargement dynamique. Il faudrait
|
278 |
// faire une requête spécifique
|
279 |
toolbar.loadtime = new Date();
|
280 |
} |
281 |
}); |
282 |
} |
283 |
this.req_expiration.send();
|
284 |
} |
285 |
}); |
286 |
|
287 |
toolbar = null;
|
288 |
window.addEvent('load', function () { |
289 |
window.toolbar = new Toolbar();
|
290 |
}); |