← Back to branch summary

~canonical-ci-engineering/ubuntu-ci-services-itself/graphite-web

« back to all changes in this revision

Viewing changes to webapp/content/js/browser.js

  • Committer: Package Import Robot
  • Author(s): Jonas Genannt
  • Date: 2013-03-09 16:06:34 UTC
  • Revision ID: package-import@ubuntu.com-20130309160634-p1ei8oxvm3plrbas
Tags: upstream-0.9.10+debian
Import upstream version 0.9.10+debian

Show diffs side-by-side

added added

removed removed

Lines of Context:
webapp/content/js/browser.js
 
1
/* Copyright 2008 Orbitz WorldWide
 
2
 
 
3
Licensed under the Apache License, Version 2.0 (the "License");
 
4
you may not use this file except in compliance with the License.
 
5
You may obtain a copy of the License at
 
6
 
 
7
   http://www.apache.org/licenses/LICENSE-2.0
 
8
 
 
9
Unless required by applicable law or agreed to in writing, software
 
10
distributed under the License is distributed on an "AS IS" BASIS,
 
11
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 
12
See the License for the specific language governing permissions and
 
13
limitations under the License. */
 
14
 
 
15
function GraphiteBrowser () {
 
16
  var treePanel = createTreePanel();
 
17
  var searchPanel = createSearchPanel();
 
18
  var completerPanel = createCompleterPanel();
 
19
  var treeRoot = treePanel.getRootNode();
 
20
 
 
21
  this.trees = {
 
22
    graphite: treeRoot.findChild('id', 'GraphiteTree'),
 
23
    mygraphs: treeRoot.findChild('id', 'MyGraphsTree'),
 
24
    usergraphs: treeRoot.findChild('id', 'UserGraphsTree')
 
25
  };
 
26
 
 
27
  this.panel = new Ext.TabPanel({
 
28
    region: 'west',
 
29
    items: [treePanel, searchPanel, completerPanel],
 
30
    split: true,
 
31
    width: 300,
 
32
    collapsible: true,
 
33
    collapseMode: 'mini',
 
34
    activeTab: 0
 
35
  });
 
36
}
 
37
 
 
38
//Tree Tab
 
39
function createTreePanel(){
 
40
  var rootNode = new Ext.tree.TreeNode({});
 
41
 
 
42
  function setParams(loader, node) {
 
43
    var node_id = node.id.replace(/^[A-Za-z]+Tree\.?/,"");
 
44
    loader.baseParams.query = (node_id == "") ? "*" : (node_id + ".*");
 
45
    loader.baseParams.format = 'treejson';
 
46
    loader.baseParams.contexts = '1';
 
47
    loader.baseParams.path = node_id;
 
48
 
 
49
    if (node.parentNode && node.parentNode.id == "UserGraphsTree") {
 
50
      loader.baseParams.user = node.id;
 
51
    }
 
52
  }
 
53
 
 
54
  var graphiteNode = new Ext.tree.AsyncTreeNode({
 
55
    id: 'GraphiteTree',
 
56
    text: "Graphite",
 
57
    loader: new Ext.tree.TreeLoader({
 
58
      url: "../metrics/find/",
 
59
      requestMethod: "GET",
 
60
      listeners: {beforeload: setParams}
 
61
    })
 
62
  });
 
63
  rootNode.appendChild(graphiteNode);
 
64
 
 
65
  //function reloadOnce (node) {
 
66
  //  node.un('beforeexpand', reloadOnce);
 
67
  //  node.reload();
 
68
  //  setTimeout(function () { node.on('beforeexpand', reloadOnce); }, 1000);
 
69
  //}
 
70
 
 
71
  if (GraphiteConfig.showMyGraphs) {
 
72
    var myGraphsNode = new Ext.tree.AsyncTreeNode({
 
73
      id: 'MyGraphsTree',
 
74
      text: "My Graphs",
 
75
      leaf: false,
 
76
      allowChildren: true,
 
77
      expandable: true,
 
78
      allowDrag: false,
 
79
      //listeners: {beforeexpand: reloadOnce},
 
80
      loader: new Ext.tree.TreeLoader({
 
81
        url: "../browser/mygraph/",
 
82
        requestMethod: "GET",
 
83
        listeners: {beforeload: setParams}
 
84
      })
 
85
    });
 
86
    rootNode.appendChild(myGraphsNode);
 
87
  }
 
88
 
 
89
  var userGraphsNode = new Ext.tree.AsyncTreeNode({
 
90
    id: 'UserGraphsTree',
 
91
    text: "User Graphs",
 
92
    //listeners: {beforeexpand: reloadOnce},
 
93
    loader: new Ext.tree.TreeLoader({
 
94
      url: "../browser/usergraph/",
 
95
      requestMethod: "GET",
 
96
      listeners: {beforeload: setParams}
 
97
    })
 
98
  });
 
99
  rootNode.appendChild(userGraphsNode);
 
100
 
 
101
  var treePanel = new Ext.tree.TreePanel({
 
102
    title: "Tree",
 
103
    root: rootNode,
 
104
    containerScroll: true,
 
105
    autoScroll: true,
 
106
    pathSeparator: ".",
 
107
    rootVisible: false,
 
108
    singleExpand: false,
 
109
    trackMouseOver: true
 
110
  });
 
111
 
 
112
  treePanel.on("click", function (node,evt) {
 
113
    if (node.id == 'no-click') {
 
114
      return;
 
115
    }
 
116
 
 
117
    if (!node.leaf) {
 
118
      node.toggle();
 
119
      return;
 
120
    }
 
121
 
 
122
    if (node.attributes.graphUrl) {
 
123
      var url = decodeURIComponent(node.attributes.graphUrl).replace(/#/,'%23');
 
124
      Composer.loadMyGraph(node.attributes.text, url);
 
125
      return;
 
126
    }
 
127
 
 
128
    Composer.toggleTarget(node.id);
 
129
  });
 
130
 
 
131
  return treePanel;
 
132
}
 
133
 
 
134
//Search Tab
 
135
function createSearchPanel() {
 
136
  return new Ext.form.FormPanel({
 
137
    formId: 'searchForm',
 
138
    title: 'Search',
 
139
    disabled: (!GraphiteConfig.searchEnabled),
 
140
    width: 200,
 
141
    containerScroll: true,
 
142
    autoScroll: true,
 
143
    items: [
 
144
      new Ext.form.TextField({
 
145
        emptyText: "search for metrics",
 
146
        width: 200,
 
147
        hideLabel: true,
 
148
        listeners: {specialkey: sendSearchRequest}
 
149
      })
 
150
    ],
 
151
    listeners: {render: setupSearchForm}
 
152
  });
 
153
}
 
154
 
 
155
function setupSearchForm(formEl) {
 
156
  var html = '<a id="searchHelpLink" > Help </a> <p id="searchError"></p> <ul id="searchResults"></ul>';
 
157
  Ext.DomHelper.append("searchForm", html);
 
158
  var helpAction = 'javascript: void window.open';
 
159
  var helpPage = '"../content/html/searchHelp.html"';
 
160
  var helpTitle = '"Searching Graphite"';
 
161
  var helpOptions = '"width=500,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no"';
 
162
  Ext.getDom('searchHelpLink').href = helpAction+"("+helpPage+","+helpTitle+","+helpOptions+");";
 
163
  var formPanel = Ext.get("searchForm");
 
164
  formPanel.un("render",setupSearchForm); 
 
165
}
 
166
 
 
167
function showSearchError(message) {
 
168
  Ext.getDom('searchError').innerHTML = '<font color="red">' + message + '</font><br/>';
 
169
}
 
170
 
 
171
function sendSearchRequest (searchField, evt) {
 
172
  if (evt.getCharCode() != Ext.EventObject.RETURN) {
 
173
    return;
 
174
  }
 
175
  //Clear any previous errors
 
176
  showSearchError("");
 
177
  //Clear the result list
 
178
  var resultList = Ext.getDom('searchResults');
 
179
  while (resultList.childNodes[0]) {
 
180
    resultList.removeChild( resultList.childNodes[0] );
 
181
  }
 
182
  Ext.Ajax.request({
 
183
    url: '../browser/search/',
 
184
    method: 'POST',
 
185
    success: handleSearchResponse,
 
186
    failure: handleSearchFailure,
 
187
    params: {query: searchField.getValue()}
 
188
  });
 
189
}
 
190
 
 
191
function handleSearchResponse (response, options) {
 
192
  var text = response.responseText;
 
193
  if (text == "") {
 
194
    showSearchError("Nothing matched your query");
 
195
    return;
 
196
  }
 
197
  var resultList = Ext.getDom('searchResults');
 
198
  var results = text.split(',');
 
199
  Ext.each(results, function (item) {
 
200
    var li = document.createElement('li');
 
201
    li.innerHTML = "<a href=\"javascript: Composer.toggleTarget('" + item + "');\">" + item + "</a>";
 
202
    resultList.appendChild(li);
 
203
  });
 
204
}
 
205
 
 
206
function handleSearchFailure (response, options)
 
207
{
 
208
  showSearchError("Search request failed");
 
209
}
 
210
 
 
211
//Auto-Completer Tab
 
212
function createCompleterPanel() {
 
213
  var metricCompleter = new MetricCompleter({emptyText: "Start typing a metric name..."});
 
214
 
 
215
  metricCompleter.on('specialkey', function (field, e) {
 
216
    if (e.getKey() == e.ENTER) {
 
217
      var target = metricCompleter.getValue();
 
218
      Composer.toggleTarget(target);
 
219
    }
 
220
  });
 
221
 
 
222
  return new Ext.Panel({
 
223
    title: "Auto-Completer",
 
224
    layout: {
 
225
      type: 'vbox',
 
226
      align: 'stretch'
 
227
    },
 
228
    items: [
 
229
      metricCompleter,
 
230
      new Ext.form.Label({html: '<a id="completerHelpLink" href="../content/html/completerHelp.html", target="_new"> Help </a>'})
 
231
    ]
 
232
  });
 
233
 
 
234
  /*
 
235
  return new Ext.form.FormPanel({
 
236
    formId: "completerForm",
 
237
    title: "Auto-Completer",
 
238
    width: 200,
 
239
    items: [
 
240
      new Ext.form.TextField({
 
241
        id: "completerField",
 
242
        emptyText: "start typing a metric path",
 
243
        width: 200,
 
244
        hideLabel: true,
 
245
        listeners: {render: setupCompleterField, specialkey: completerToggle}
 
246
      })
 
247
    ],
 
248
    listeners: {render: setupCompleterForm}
 
249
  });
 
250
  */
 
251
}
 
252
 
 
253
function setupCompleterForm(formEl) {
 
254
  html = '<a id="completerHelpLink" > Help </a> <div id="completerResults"/>';
 
255
  Ext.DomHelper.append("completerForm",html);
 
256
  var helpAction = 'javascript: void window.open';
 
257
  var helpPage= '"../content/html/completerHelp.html"';
 
258
  var helpTitle = '"Using the Auto-Completer"';
 
259
  var helpOptions = '"width=500,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no"';
 
260
  Ext.getDom('completerHelpLink').href = helpAction+"("+helpPage+","+helpTitle+","+helpOptions+");";
 
261
  completer = Ext.get("completerForm");
 
262
  completer.un("render", setupCompleterForm);
 
263
}
 
264
 
 
265
function setupCompleterField(field) {
 
266
  field.el.on("keyup", sendCompleterRequest);
 
267
}
 
268
 
 
269
function completerToggle(field, evt) {
 
270
  if (evt.getKey() != Ext.EventObject.RETURN) {
 
271
    return;
 
272
  }
 
273
 
 
274
  Composer.toggleTarget( field.getValue() );
 
275
}
 
276
 
 
277
function sendCompleterRequest(evt, el) {
 
278
  if(Ext.Ajax.isLoading()) {
 
279
    return;
 
280
  }
 
281
  Ext.Ajax.request({
 
282
    url: '../cli/autocomplete/',
 
283
    method: 'GET',
 
284
    success: handleCompleterResponse,
 
285
    failure: handleCompleterFailure,
 
286
    params: {short:true, path: el.value}
 
287
  });
 
288
}
 
289
 
 
290
function handleCompleterResponse(response, options) {
 
291
  var resultList = Ext.getDom('completerResults');
 
292
  while (resultList.childNodes[0]) {
 
293
    resultList.removeChild( resultList.childNodes[0] );
 
294
  }
 
295
  Ext.DomHelper.append('completerResults',response.responseText);
 
296
}
 
297
 
 
298
function handleCompleterFailure(response, options) {
 
299
  var resultList = Ext.getDom('completerResults');
 
300
  while (resultList.childNodes[0]) {
 
301
    resultList.removeChild( resultList.childNodes[0] );
 
302
  }
 
303
}