Merge branch 'master' of github.com:grafana/grafana

docs/sources/reference/table_panel.md

@@ -9,7 +9,7 @@ page_keywords: grafana, table, panel, documentation
 <img src="/img/v2/table-panel.png">
 
 The new table panel is very flexible, supporting both multiple modes for time series as well as for
-table, annotation and raw JSON data. It also provides date formating and value formating and coloring options.
+table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options.
 
 To view table panels in action and test different configurations with sample data, check out the [Table Panel Showcase in the Grafana Playground](http://play.grafana.org/dashboard/db/table-panel-showcase).
 
@@ -21,7 +21,7 @@ The table panel has many ways to manipulate your data for optimal presentation.
 
 1. `Data`: Control how your query is transformed into a table.
 2. `Table Display`: Table display options.
-3. `Column Styles`: Column value formating and display options.
+3. `Column Styles`: Column value formatting and display options.
 
 ## Data to Table
 

public/app/core/utils/kbn.js

@@ -399,6 +399,7 @@ function($, _) {
   // Volume
   kbn.valueFormats.litre  = kbn.formatBuilders.decimalSIPrefix('L');
   kbn.valueFormats.mlitre = kbn.formatBuilders.decimalSIPrefix('L', -1);
+  kbn.valueFormats.m3     = kbn.formatBuilders.decimalSIPrefix('m3');
 
   // Time
   kbn.valueFormats.hertz = kbn.formatBuilders.decimalSIPrefix('Hz');
@@ -626,8 +627,9 @@ function($, _) {
       {
         text: 'volume',
         submenu: [
-          {text: 'millilitre', value: 'mlitre'},
-          {text: 'litre',      value: 'litre' },
+          {text: 'millilitre',  value: 'mlitre'},
+          {text: 'litre',       value: 'litre' },
+          {text: 'cubic metre', value: 'm3'    },
         ]
       },
       {

public/app/features/dashboard/dashboardSrv.js

@@ -214,10 +214,7 @@ function (angular, $, _, moment) {
     };
 
     p.formatDate = function(date, format) {
-      if (!moment.isMoment(date)) {
-        date = moment(date);
-      }
-
+      date = moment.isMoment(date) ? date : moment(date);
       format = format || 'YYYY-MM-DD HH:mm:ss';
 
       return this.timezone === 'browser' ?
@@ -225,6 +222,14 @@ function (angular, $, _, moment) {
         moment.utc(date).format(format);
     };
 
+    p.getRelativeTime = function(date) {
+      date = moment.isMoment(date) ? date : moment(date);
+
+      return this.timezone === 'browser' ?
+        moment(date).fromNow() :
+        moment.utc(date).fromNow();
+    };
+
     p._updateSchema = function(old) {
       var i, j, k;
       var oldVersion = this.schemaVersion;

public/app/features/dashboard/partials/settings.html

@@ -117,7 +117,7 @@
   <div ng-if="editor.index == 4">
     <div class="editor-row">
       <div class="tight-form-section">
-        <h5>Info</h5>
+        <h5>Dashboard info</h5>
         <div class="tight-form">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 120px">

public/app/features/panel/panel_helper.js

@@ -59,7 +59,9 @@ function (angular, _, $, kbn, dateMath, rangeUtil) {
         scope.resolution = Math.ceil($(window).width() * (scope.panel.span / 12));
       }
 
-      scope.interval = kbn.calculateInterval(scope.range, scope.resolution, scope.panel.interval);
+      var panelInterval = scope.panel.interval;
+      var datasourceInterval = (scope.datasource || {}).interval;
+      scope.interval = kbn.calculateInterval(scope.range, scope.resolution, panelInterval || datasourceInterval);
     };
 
     this.applyPanelTimeOverrides = function(scope) {

public/app/plugins/datasource/elasticsearch/datasource.js

@@ -26,6 +26,7 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes
       this.timeField = datasource.jsonData.timeField;
       this.esVersion = datasource.jsonData.esVersion;
       this.indexPattern = new IndexPattern(datasource.index, datasource.jsonData.interval);
+      this.interval = datasource.jsonData.timeInterval;
       this.queryBuilder = new ElasticQueryBuilder({
         timeField: this.timeField,
         esVersion: this.esVersion,

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -1,7 +1,7 @@
 <div ng-include="httpConfigPartialSrc"></div>
 <br>
 
-<h5>Elastic search details</h5>
+<h5>Elasticsearch details</h5>
 
 <div class="tight-form">
 	<ul class="tight-form-list">
@@ -42,3 +42,22 @@
 	</ul>
 	<div class="clearfix"></div>
 </div>
+</div>
+
+<h5>Default query settings</h5>
+
+<div class="tight-form last">
+	<ul class="tight-form-list">
+		<li class="tight-form-item" style="width: 200px">
+			Group by time interval
+		</li>
+		<li>
+			<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="current.jsonData.timeInterval"
+						 spellcheck='false' placeholder="example: >10s">
+		</li>
+		<li class="tight-form-item">
+			<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
+		</li>
+	</ul>
+	<div class="clearfix"></div>
+</div>

public/app/plugins/datasource/graphite/gfunc.js

@@ -279,7 +279,9 @@ function (_, $) {
 
   addFuncDef({
     name: 'sortByName',
-    category: categories.Special
+    category: categories.Special,
+    params: [{ name: "natural", type: "select", options: ["true", "false"], optional: true }],
+    defaultParams: ["false"]
   });
 
   addFuncDef({

public/app/plugins/datasource/graphite/partials/query.editor.html

@@ -8,6 +8,11 @@
 		<li class="tight-form-item small" ng-show="target.datasource">
 			<em>{{target.datasource}}</em>
 		</li>
+		<li class="tight-form-item">
+			<a class="pointer" tabindex="1" ng-click="toggleEditorMode()">
+				<i class="fa fa-pencil"></i>
+			</a>
+		</li>
 		<li class="tight-form-item">
 			<div class="dropdown">
 				<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
@@ -49,7 +54,9 @@
 		</li>
 	</ul>
 
-	<input type="text" class="tight-form-clear-input span10" ng-model="target.target" give-focus="target.textEditor" spellcheck='false' ng-model-onblur ng-change="get_data()" ng-show="target.textEditor"></input>
+	<span style="display: block; overflow: hidden;">
+		<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="target.target" give-focus="target.textEditor" spellcheck='false' ng-model-onblur ng-change="get_data()" ng-show="target.textEditor"></input>
+	</span>
 
 	<ul class="tight-form-list" role="menu" ng-hide="target.textEditor">
 		<li ng-repeat="segment in segments" role="menuitem">

public/app/plugins/panels/graph/graph.tooltip.js

@@ -31,8 +31,8 @@ function ($) {
       return j - 1;
     };
 
-    this.showTooltip = function(title, innerHtml, pos) {
-      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ title + '</div> ' ;
+    this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) {
+      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime + '<br>(' + relativeTime + ')</div> ' ;
       body += innerHtml + '</div>';
       $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
     };
@@ -106,7 +106,7 @@ function ($) {
       var plot = elem.data().plot;
       var plotData = plot.getData();
       var seriesList = getSeriesFn();
-      var group, value, timestamp, hoverInfo, i, series, seriesHtml;
+      var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml;
 
       if(dashboard.sharedCrosshair){
         scope.appEvent('setCrosshair', { pos: pos, scope: scope });
@@ -122,7 +122,9 @@ function ($) {
         var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
 
         seriesHtml = '';
-        timestamp = dashboard.formatDate(seriesHoverInfo.time);
+
+        relativeTime = dashboard.getRelativeTime(seriesHoverInfo.time);
+        absoluteTime = dashboard.formatDate(seriesHoverInfo.time);
 
         for (i = 0; i < seriesHoverInfo.length; i++) {
           hoverInfo = seriesHoverInfo[i];
@@ -132,6 +134,7 @@ function ($) {
           }
 
           series = seriesList[i];
+
           value = series.formatValue(hoverInfo.value);
 
           seriesHtml += '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
@@ -140,7 +143,7 @@ function ($) {
           plot.highlight(i, hoverInfo.hoverIndex);
         }
 
-        self.showTooltip(timestamp, seriesHtml, pos);
+        self.showTooltip(absoluteTime, relativeTime, seriesHtml, pos);
       }
       // single series tooltip
       else if (item) {
@@ -156,10 +159,13 @@ function ($) {
         }
 
         value = series.formatValue(value);
-        timestamp = dashboard.formatDate(item.datapoint[0]);
+
+        relativeTime = dashboard.getRelativeTime(item.datapoint[0]);
+        absoluteTime = dashboard.formatDate(item.datapoint[0]);
+
         group += '<div class="graph-tooltip-value">' + value + '</div>';
 
-        self.showTooltip(timestamp, group, pos);
+        self.showTooltip(absoluteTime, relativeTime, group, pos);
       }
       // no hit
       else {