graphite-dev team mailing list archive

[Michael Leinartas <mleinartas@xxxxxxxxx>]

Michael Leinartas has proposed merging lp:~mleinartas/graphite/dashboard into lp:graphite.

Requested reviews:
  graphite-dev (graphite-dev)

For more details, see:
https://code.launchpad.net/~mleinartas/graphite/dashboard/+merge/80019

These are a few changes to make the dashboard experience a little better

* Explicitly size img tags to keep scroll position intact during reloads and rearranging of graphs
  This helps a lot when a dashboard has more graphs than fit on the screen
* Default navBar as collapsed when loading an existing dashboard
  The existing behavior seems more suited to creating dashboards, but viewing dashboards is a more common case.  This change seems to be a good compromise - a new dashboard will open with the navBar open, but a new page load of an existing dashboard will start with the navBar collapsed
* minor fix to css style in north navBar definition - it appears to have been refactored at some point and this occurrence missed
* Add wildcard mode to north navBar similar to west
* Use tab to trigger search update in north navBar and autocomplete when a single result returned
  Caveat here is that if multiple results are present, it will not (yet?) autocomplete the input box with the common metric prefix of the results
-- 
https://code.launchpad.net/~mleinartas/graphite/dashboard/+merge/80019
Your team graphite-dev is requested to review the proposed merge of lp:~mleinartas/graphite/dashboard into lp:graphite.

=== modified file 'webapp/content/js/dashboard.js'
--- webapp/content/js/dashboard.js	2011-07-28 07:32:57 +0000
+++ webapp/content/js/dashboard.js	2011-10-21 04:13:25 +0000
@@ -254,7 +254,7 @@
       region: 'center',
       hideHeaders: true,
       loadMask: true,
-      bodyCssClass: 'terminalStyle',
+      bodyCssClass: 'metric-result',
 
       colModel: new Ext.grid.ColumnModel({
         defaults: {
@@ -268,7 +268,7 @@
       viewConfig: {
         forceFit: true,
         rowOverCls: '',
-        bodyCssClass: 'terminalStyle',
+        bodyCssClass: 'metric-result',
         getRowClass: function(record, index) {
           var toggledClass = (
              graphStore.findExact('target', 'target=' + record.data.path) == -1
@@ -289,6 +289,7 @@
         baseParams: {
           query: '',
           format: 'completer',
+          wildcards: '1',
           automatic_variants: (UI_CONFIG.automatic_variants) ? '1' : '0'
         },
         fields: ['path', 'is_leaf'],
@@ -317,6 +318,17 @@
           charCode == 35) { //end
         autocompleteTask.delay(AUTOCOMPLETE_DELAY);
       }
+      if (charCode == 9) { //tab
+        autocompleteSelectorGrid({
+          callback: function (result, options, success) {
+            if (result.length == 1) {
+              thisField.setValue(result[0].data['path']);
+              autocomplete();
+            }
+          }
+        });
+        focusCompleter();
+      }
     }
 
     metricSelectorTextField = new Ext.form.TextField({
@@ -336,18 +348,20 @@
     });
   }
 
-  var autocompleteTask = new Ext.util.DelayedTask(function () {
+  function autocompleteSelectorGrid (loadOptions) {
     var query = metricSelectorTextField.getValue();
     var store = metricSelectorGrid.getStore();
     store.setBaseParam('query', query);
-    store.load();
-  });
+    store.load(loadOptions);
+  }
+
+  var autocompleteTask = new Ext.util.DelayedTask(autocompleteSelectorGrid);
 
   var graphTemplate = new Ext.XTemplate(
     '<tpl for=".">',
       '<div class="graph-container">',
         '<div class="graph-overlay">',
-          '<img class="graph-img" src="{url}">',
+          '<img class="graph-img" src="{url}" width="{width}" height="{height}">',
           '<div class="overlay-close-button" onclick="javascript: graphAreaToggle(\'{target}\'); justClosedGraph = true;">X</div>',
         '</div>',
       '</div>',
@@ -696,6 +710,7 @@
   // Load initial dashboard state if it was passed in
   if (initialState) {
     applyState(initialState);
+    navBar.collapse();
   }
 
   if (initialError) {
@@ -932,6 +947,8 @@
       params.title = params.target[0];
     }
     this.set('url', '/render?' + Ext.urlEncode(params));
+    this.set('width', GraphSize.width);
+    this.set('height', GraphSize.height);
   });
 }
 

=== modified file 'webapp/graphite/metrics/views.py'
--- webapp/graphite/metrics/views.py	2011-08-18 07:37:59 +0000
+++ webapp/graphite/metrics/views.py	2011-10-21 04:13:25 +0000
@@ -155,8 +155,13 @@
       results.append(node_info)
 
     if len(results) > 1 and wildcards:
-      wildcardNode = {'name' : '*'}
-      results.append(wildcardNode)
+      base_metric_path = matches[0].metric_path.rstrip('.').split('.')
+      base_metric_path[-1] = '*'
+      parent_metric_path = '.'.join(base_metric_path)
+      if not wildcard_is_leaf:
+        parent_metric_path += '.'
+      wildcard_node = {'path' : parent_metric_path, 'name' : '*', 'is_leaf' : str(False)}
+      results.append(wildcard_node)
 
     content = json.dumps({ 'metrics' : results })
     response = HttpResponse(content, mimetype='application/json')