Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

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
});