| 2 |
2 |
Extends: Jx.Button.Flyout,
|
| 3 |
3 |
|
| 4 |
4 |
initialize: function (options, url, hostid) {
|
| 5 |
|
this.parent(options);
|
| 6 |
5 |
this.idselection = null;
|
| 7 |
6 |
this.tree = new TreeGroup({
|
| 8 |
7 |
title: this.options.label,
|
| 9 |
8 |
url: url,
|
| 10 |
9 |
hostid: hostid
|
| 11 |
10 |
});
|
|
11 |
options.content = this.tree.container;
|
|
12 |
this.parent(options);
|
| 12 |
13 |
this.tree.addEvent('select', this.selectItem.bind(this));
|
|
14 |
|
|
15 |
// On adapte la fenêtre popup aux dépliements de l'arbre
|
|
16 |
var adaptPopup = function(e) {
|
|
17 |
if (!this.options.active) return;
|
|
18 |
// On évite le scrolling dans le menu popup
|
|
19 |
var size_x = this.content.getSize().x;
|
|
20 |
var scroll_size_x = this.content.getScrollSize().x;
|
|
21 |
if (scroll_size_x > size_x) {
|
|
22 |
this.content.setStyle("width", scroll_size_x + 10);
|
|
23 |
// 10: padding-right du div
|
|
24 |
}
|
|
25 |
// On adapte la bordure ombrée
|
|
26 |
this.contentContainer.setContentBoxSize(
|
|
27 |
$(this.content).getMarginBoxSize());
|
|
28 |
};
|
|
29 |
this.tree.addEvent("branchloaded", adaptPopup.bind(this));
|
|
30 |
this.tree.addEvent("nodedisclosed", adaptPopup.bind(this));
|
|
31 |
|
| 13 |
32 |
},
|
| 14 |
33 |
|
| 15 |
34 |
setItem: function (idselection, label) {
|
| ... | ... | |
| 20 |
39 |
|
| 21 |
40 |
selectItem: function (item) {
|
| 22 |
41 |
this.setItem(item.options.data, item.options.label);
|
|
42 |
this.hide();
|
| 23 |
43 |
},
|
| 24 |
44 |
|
| 25 |
|
clicked: function (e) {
|
| 26 |
|
if (!this.options.enabled)
|
| 27 |
|
return;
|
| 28 |
|
this.tree.selectGroup();
|
|
45 |
//clicked: function (e) {
|
|
46 |
// if (!this.options.enabled)
|
|
47 |
// return;
|
|
48 |
// this.tree.selectGroup();
|
|
49 |
//},
|
|
50 |
|
|
51 |
redraw: function() {
|
|
52 |
this.tree.redraw();
|
| 29 |
53 |
}
|
| 30 |
54 |
});
|
| 31 |
55 |
|
| ... | ... | |
| 37 |
61 |
|
| 38 |
62 |
this.global_refresh = new Jx.Button({
|
| 39 |
63 |
tooltip: _('Globally change auto-refresh setting'),
|
| 40 |
|
image: app_path + 'images/refresh-all.png',
|
|
64 |
//image: app_path + 'images/refresh-all.png',
|
|
65 |
image: app_path + 'images/refresh.png',
|
| 41 |
66 |
toggle: true,
|
| 42 |
67 |
onDown: function () {
|
| 43 |
68 |
window.graphs.each(function (graph) {
|
| ... | ... | |
| 50 |
75 |
}, this.global_refresh);
|
| 51 |
76 |
}.bind(this)
|
| 52 |
77 |
});
|
| 53 |
|
this.jxtoolbar.add(this.global_refresh);
|
| 54 |
78 |
|
| 55 |
79 |
this.host_label = new Jx.Toolbar.Item(this.createLabel(_('Host:')));
|
| 56 |
80 |
|
| 57 |
81 |
this.host_picker = new Jx.Button.SelectorFlyout({
|
| 58 |
82 |
label: _('Select a host'),
|
| 59 |
|
tooltip: _('Click me to select another host')
|
|
83 |
tooltip: _('Click me to select another host'),
|
| 60 |
84 |
},
|
| 61 |
85 |
app_path + 'rpc/hosttree',
|
| 62 |
86 |
null
|
| ... | ... | |
| 74 |
98 |
}.bind(this));
|
| 75 |
99 |
|
| 76 |
100 |
this.show_nagios = new Jx.Button({
|
| 77 |
|
label: _('Nagios page'),
|
|
101 |
//label: _('Nagios page'),
|
| 78 |
102 |
tooltip: _('Display Nagios page for the selected host'),
|
|
103 |
image: app_path + 'images/nagios-16.png',
|
| 79 |
104 |
toggle: false,
|
| 80 |
105 |
enabled: false,
|
| 81 |
106 |
onClick: function () {
|
| ... | ... | |
| 93 |
118 |
}.bind(this)
|
| 94 |
119 |
})
|
| 95 |
120 |
|
| 96 |
|
this.jxtoolbar.add(this.host_label);
|
| 97 |
|
this.jxtoolbar.add(this.host_picker);
|
| 98 |
|
this.jxtoolbar.add(this.show_nagios);
|
| 99 |
|
|
| 100 |
|
var separator = new Jx.Toolbar.Separator();
|
| 101 |
|
this.jxtoolbar.add(separator);
|
| 102 |
|
|
| 103 |
121 |
this.graph_label = new Jx.Toolbar.Item(this.createLabel(_('Graph:')));
|
| 104 |
122 |
|
| 105 |
123 |
this.graph_picker = new Jx.Button.SelectorFlyout({
|
| ... | ... | |
| 112 |
130 |
);
|
| 113 |
131 |
|
| 114 |
132 |
this.graph_picker.addEvent("select", function (idselection, label) {
|
| 115 |
|
if (idselection !== null)
|
| 116 |
|
this.show_graph.setEnabled(1);
|
|
133 |
if (idselection !== null) {
|
|
134 |
//this.show_graph.setEnabled(1);
|
|
135 |
new Graph(
|
|
136 |
{autoRefresh: this.global_refresh.isActive() ? 1 : 0},
|
|
137 |
this.host_picker.getLabel(),
|
|
138 |
this.graph_picker.getLabel()
|
|
139 |
);
|
|
140 |
}
|
| 117 |
141 |
}.bind(this));
|
| 118 |
142 |
|
| 119 |
143 |
this.show_graph = new Jx.Button({
|
| ... | ... | |
| 130 |
154 |
}.bind(this)
|
| 131 |
155 |
})
|
| 132 |
156 |
|
| 133 |
|
this.jxtoolbar.add(this.graph_label);
|
|
157 |
// Remplissage de la barre d'outils
|
|
158 |
this.jxtoolbar.add(this.global_refresh);
|
|
159 |
this.jxtoolbar.add(this.show_nagios);
|
|
160 |
this.jxtoolbar.add(new Jx.Toolbar.Separator());
|
|
161 |
this.jxtoolbar.add(this.host_label); // à supprimer ?
|
|
162 |
this.jxtoolbar.add(this.host_picker);
|
|
163 |
this.jxtoolbar.add(new Jx.Toolbar.Separator());
|
|
164 |
this.jxtoolbar.add(this.graph_label); // à supprimer ?
|
| 134 |
165 |
this.jxtoolbar.add(this.graph_picker);
|
| 135 |
|
this.jxtoolbar.add(this.show_graph);
|
|
166 |
//this.jxtoolbar.add(this.show_graph);
|
|
167 |
|
|
168 |
// Vérification de la date de dernière modification en base, et
|
|
169 |
// rechargement des arbres le cas échéant
|
|
170 |
this.loadtime = new Date();
|
|
171 |
this.req_expiration = new Request.JSON({
|
|
172 |
method: "get",
|
|
173 |
url: app_path + "rpc/dbmtime",
|
|
174 |
onSuccess: function(result){
|
|
175 |
if (!result) return;
|
|
176 |
var mtime = Date.parse(result.mtime);
|
|
177 |
if ((toolbar.loadtime - mtime) >= 0) return;
|
|
178 |
// la base a changé, on recharge les arbres
|
|
179 |
toolbar.host_picker.tree.redraw();
|
|
180 |
toolbar.graph_picker.tree.redraw();
|
|
181 |
// @todo: En théorie on devrait aussi vérifier que l'élément
|
|
182 |
// sélectionné existe dans l'arbre, mais c'est un peu compliqué
|
|
183 |
// avec le chargement dynamique. Il faudrait faire une requête
|
|
184 |
// spécifique
|
|
185 |
toolbar.loadtime = new Date();
|
|
186 |
}
|
|
187 |
});
|
|
188 |
this.req_expiration.send.periodical(30 * 1000, this.req_expiration);
|
| 136 |
189 |
},
|
| 137 |
190 |
|
| 138 |
191 |
// Retourne un objet opaque qui possède un label,
|
| ... | ... | |
| 152 |
205 |
content.inject(container);
|
| 153 |
206 |
|
| 154 |
207 |
return container;
|
|
208 |
},
|
|
209 |
|
|
210 |
// Vérifie si la base a changé, et recharge les sélecteurs en conséquence
|
|
211 |
checkExpiration: function() {
|
|
212 |
if (!this.req_expiration) { // ne creer qu'une instance
|
|
213 |
this.req_expiration = new Request.JSON({
|
|
214 |
method: "get",
|
|
215 |
url: app_path + "rpc/dbmtime",
|
|
216 |
onSuccess: function(result){
|
|
217 |
if (!result) return;
|
|
218 |
var mtime = Date.parse(result.mtime);
|
|
219 |
if ((toolbar.loadtime - mtime) >= 0) return;
|
|
220 |
// la base a changé, on recharge les arbres
|
|
221 |
if (toolbar.host_picker.idselection) {
|
|
222 |
toolbar.host_picker.tree.redraw();
|
|
223 |
}
|
|
224 |
if (toolbar.graph_picker.idselection) {
|
|
225 |
toolbar.graph_picker.tree.redraw();
|
|
226 |
}
|
|
227 |
// @todo: En théorie on devrait aussi vérifier que
|
|
228 |
// l'élément sélectionné existe dans l'arbre, mais c'est un
|
|
229 |
// peu compliqué avec le chargement dynamique. Il faudrait
|
|
230 |
// faire une requête spécifique
|
|
231 |
toolbar.loadtime = new Date();
|
|
232 |
}
|
|
233 |
});
|
|
234 |
}
|
|
235 |
this.req_expiration.send();
|
| 155 |
236 |
}
|
| 156 |
237 |
});
|
| 157 |
238 |
|
