vigigraph / vigigraph / public / js / toolbar.js @ 71709694
History | View | Annotate | Download (9.94 KB)
1 | 71709694 | Francois POIROTTE | // Copyright (C) 2006-2020 CS GROUP – France
|
---|---|---|---|
2 | 90a1f4ab | Aurelien BOMPARD | // License: GNU GPL v2 <http://www.gnu.org/licenses/gpl-2.0.html>
|
3 | |||
4 | 7c9baa43 | Francois POIROTTE | Jx.Button.SelectorFlyout = new Class({
|
5 | Extends: Jx.Button.Flyout,
|
||
6 | |||
7 | 704b1fa1 | Aurelien BOMPARD | initialize: function (options, url, itemImage) { |
8 | 7c9baa43 | Francois POIROTTE | this.idselection = null; |
9 | 704b1fa1 | Aurelien BOMPARD | 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 | aed0c054 | Aurelien BOMPARD | this.parent(options);
|
26 | 7c9baa43 | Francois POIROTTE | this.tree.addEvent('select', this.selectItem.bind(this)); |
27 | aed0c054 | Aurelien BOMPARD | |
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 | 704b1fa1 | Aurelien BOMPARD | this.tree.addEvent("load", adaptPopup.bind(this)); |
43 | aed0c054 | Aurelien BOMPARD | this.tree.addEvent("branchloaded", adaptPopup.bind(this)); |
44 | this.tree.addEvent("nodedisclosed", adaptPopup.bind(this)); |
||
45 | 704b1fa1 | Aurelien BOMPARD | this.tree.addEvent("groupClick", adaptPopup.bind(this)); |
46 | 7c9baa43 | Francois POIROTTE | }, |
47 | |||
48 | d6de3c2f | Francois POIROTTE | setItem: function (idselection, label) { |
49 | this.idselection = idselection;
|
||
50 | 7c9baa43 | Francois POIROTTE | this.setLabel(label);
|
51 | d6de3c2f | Francois POIROTTE | this.fireEvent("select", [idselection, label]); |
52 | 7c9baa43 | Francois POIROTTE | }, |
53 | |||
54 | selectItem: function (item) { |
||
55 | 704b1fa1 | Aurelien BOMPARD | this.setItem(item.id, item.name);
|
56 | aed0c054 | Aurelien BOMPARD | this.hide();
|
57 | 7c9baa43 | Francois POIROTTE | }, |
58 | |||
59 | 704b1fa1 | Aurelien BOMPARD | setHostId: function(hostid) { |
60 | this.tree.options.requestOptions = {"host_id": hostid}; |
||
61 | this.hostid = hostid;
|
||
62 | }, |
||
63 | |||
64 | aed0c054 | Aurelien BOMPARD | redraw: function() { |
65 | 704b1fa1 | Aurelien BOMPARD | this.tree.clear();
|
66 | this.tree.load();
|
||
67 | 7c9baa43 | Francois POIROTTE | } |
68 | }); |
||
69 | |||
70 | 71acc6fa | Francois POIROTTE | 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 | 7c9baa43 | Francois POIROTTE | var Toolbar = new Class({ |
93 | 71acc6fa | Francois POIROTTE | Implements: [Events],
|
94 | |||
95 | 7c9baa43 | Francois POIROTTE | initialize: function () { |
96 | this.jxtoolbar = new Jx.Toolbar({ |
||
97 | parent: $('toolbar') |
||
98 | }); |
||
99 | |||
100 | this.global_refresh = new Jx.Button({ |
||
101 | a128e1c2 | Aurelien BOMPARD | label: _('Refresh'), |
102 | 7c9baa43 | Francois POIROTTE | tooltip: _('Globally change auto-refresh setting'), |
103 | aed0c054 | Aurelien BOMPARD | image: app_path + 'images/refresh.png', |
104 | 7c9baa43 | Francois POIROTTE | 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 | e4dedc04 | Laurent DEVIGNES | tooltip: _('Click me to select another host') |
122 | 7c9baa43 | Francois POIROTTE | }, |
123 | app_path + 'rpc/hosttree',
|
||
124 | 704b1fa1 | Aurelien BOMPARD | "drive-harddisk.png"
|
125 | 7c9baa43 | Francois POIROTTE | ); |
126 | |||
127 | this.host_picker.addEvent("select", function() { |
||
128 | var idselection = this.host_picker.idselection; |
||
129 | 704b1fa1 | Aurelien BOMPARD | if (this.graph_picker.hostid !== idselection) { |
130 | this.graph_picker.setHostId(idselection);
|
||
131 | this.graph_picker.redraw();
|
||
132 | d6de3c2f | Francois POIROTTE | this.graph_picker.setItem(null, this.graph_picker.options.label); |
133 | 7c9baa43 | Francois POIROTTE | } |
134 | 71acc6fa | Francois POIROTTE | this.fireEvent('select-host'); |
135 | 7c9baa43 | Francois POIROTTE | this.graph_picker.setEnabled(1); |
136 | }.bind(this));
|
||
137 | |||
138 | 71acc6fa | Francois POIROTTE | this.links = new Jx.Button.StaticCombo({ |
139 | label: _('External links...'), |
||
140 | image: app_path + 'images/external-link.png', |
||
141 | enabled: false |
||
142 | 8f6567c2 | Francois POIROTTE | }); |
143 | 71acc6fa | Francois POIROTTE | 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 | 9a445246 | Francois POIROTTE | }.bind(this)
|
176 | 8f6567c2 | Francois POIROTTE | }); |
177 | 71acc6fa | Francois POIROTTE | extlinks.send(); |
178 | 9a445246 | Francois POIROTTE | |
179 | 7c9baa43 | Francois POIROTTE | 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 | 704b1fa1 | Aurelien BOMPARD | "utilities-system-monitor.png"
|
188 | 7c9baa43 | Francois POIROTTE | ); |
189 | |||
190 | d6de3c2f | Francois POIROTTE | this.graph_picker.addEvent("select", function (idselection, label) { |
191 | aed0c054 | Aurelien BOMPARD | 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 | d6de3c2f | Francois POIROTTE | }.bind(this));
|
200 | |||
201 | 7c9baa43 | Francois POIROTTE | 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 | 8f6567c2 | Francois POIROTTE | new Graph(
|
208 | 7c9baa43 | Francois POIROTTE | {autoRefresh: this.global_refresh.isActive() ? 1 : 0}, |
209 | this.host_picker.getLabel(),
|
||
210 | this.graph_picker.getLabel()
|
||
211 | ); |
||
212 | }.bind(this)
|
||
213 | b02623ff | Francois POIROTTE | }); |
214 | 7c9baa43 | Francois POIROTTE | |
215 | aed0c054 | Aurelien BOMPARD | // 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 | 7c9baa43 | Francois POIROTTE | this.jxtoolbar.add(this.graph_picker); |
223 | aed0c054 | Aurelien BOMPARD | //this.jxtoolbar.add(this.show_graph);
|
224 | 8d814524 | Francois POIROTTE | this.jxtoolbar.add(this.links); |
225 | aed0c054 | Aurelien BOMPARD | |
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 | 704b1fa1 | Aurelien BOMPARD | this.checkExpiration.periodical(30 * 1000, this); |
230 | 7c9baa43 | Francois POIROTTE | }, |
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 | aed0c054 | Aurelien BOMPARD | }, |
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 | 704b1fa1 | Aurelien BOMPARD | toolbar.host_picker.redraw(); |
264 | aed0c054 | Aurelien BOMPARD | } |
265 | if (toolbar.graph_picker.idselection) {
|
||
266 | 704b1fa1 | Aurelien BOMPARD | toolbar.graph_picker.redraw(); |
267 | aed0c054 | Aurelien BOMPARD | } |
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 | 7c9baa43 | Francois POIROTTE | } |
278 | }); |
||
279 | |||
280 | toolbar = null;
|
||
281 | window.addEvent('load', function () { |
||
282 | window.toolbar = new Toolbar();
|
||
283 | }); |