plugin change: make interval, cache timeout & max data points options in plugin.json, remove query.options component feature, add help markdown feature and toggle for data sources

public/app/features/panel/metrics_tab.ts

@@ -2,6 +2,7 @@
 
 import _ from 'lodash';
 import {DashboardModel} from '../dashboard/model';
+import Remarkable from 'remarkable';
 
 export class MetricsTabCtrl {
   dsName: string;
@@ -14,9 +15,16 @@ export class MetricsTabCtrl {
   panelDsValue: any;
   addQueryDropdown: any;
   queryTroubleshooterOpen: boolean;
+  helpOpen: boolean;
+  hasHelp: boolean;
+  helpHtml: string;
+  hasMinInterval: boolean;
+  hasCacheTimeout: boolean;
+  hasMaxDataPoints: boolean;
+  animateStart: boolean;
 
   /** @ngInject */
-  constructor($scope, private uiSegmentSrv, private datasourceSrv) {
+  constructor($scope, private $sce, private datasourceSrv, private backendSrv, private $timeout) {
     this.panelCtrl = $scope.ctrl;
     $scope.ctrl = this;
 
@@ -34,6 +42,14 @@ export class MetricsTabCtrl {
     this.addQueryDropdown = {text: 'Add Query', value: null, fake: true};
     // update next ref id
     this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+    this.updateDatasourceOptions();
+  }
+
+  updateDatasourceOptions() {
+    this.hasHelp = this.current.meta.hasHelp;
+    this.hasMinInterval = this.current.meta.minInterval === true;
+    this.hasCacheTimeout = this.current.meta.cacheTimeout === true;
+    this.hasMaxDataPoints = this.current.meta.maxDataPoints === true;
   }
 
   getOptions(includeBuiltin) {
@@ -51,6 +67,7 @@ export class MetricsTabCtrl {
 
     this.current = option.datasource;
     this.panelCtrl.setDatasource(option.datasource);
+    this.updateDatasourceOptions();
   }
 
   addMixedQuery(option) {
@@ -67,6 +84,19 @@ export class MetricsTabCtrl {
     this.panelCtrl.addQuery({isNew: true});
   }
 
+  toggleHelp() {
+    this.animateStart = false;
+    this.helpOpen = !this.helpOpen;
+    this.backendSrv.get(`/api/plugins/${this.current.meta.id}/markdown/help`).then(res => {
+      var md = new Remarkable();
+      this.helpHtml = this.$sce.trustAsHtml(md.render(res));
+
+      this.$timeout(() => {
+        this.animateStart = true;
+      }, 1);
+    });
+  }
+
   toggleQueryTroubleshooter() {
     this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
   }

public/app/features/panel/partials/metrics_tab.html

@@ -11,41 +11,90 @@
                         on-change="ctrl.datasourceChanged($option)">
       </gf-form-dropdown>
 		</div>
-		<div class="gf-form">
-			<label class="gf-form-label">Min auto interval</label>
-			<input type="text" class="gf-form-input width-7" placeholder="1s" />
+		<div class="gf-form" ng-if="ctrl.hasMinInterval">
+			<label class="gf-form-label">
+				Min auto interval
+			</label>
+			<input type="text"
+						class="gf-form-input width-6"
+						placeholder="1s"
+						ng-model="ctrl.panel.interval"
+						spellcheck="false"
+						ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
+						/>
 			<info-popover mode="right-absolute">
 				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example <code>1m</code> if your data is written every minute. Access auto interval via variable <code>$__interval</code> for time range
 				string and <code>$__interval_ms</code> for numeric variable that can be used in math expressions.
 			</info-popover>
-    </div>
+		</div>
+		<div class="gf-form" ng-if="ctrl.hasCacheTimeout">
+			<label class="gf-form-label">
+				Cache timeout
+			</label>
+			<input  type="text"
+							class="gf-form-input width-6"
+							placeholder="60"
+							ng-model="ctrl.panel.cacheTimeout"
+						  ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
+							spellcheck="false"
+							/>
+			<info-popover mode="right-absolute">
+					If your time series store has a query cache this option can override the default
+					cache timeout. Specify a numeric value in seconds.
+			</info-popover>
+		</div>
+		<div class="gf-form" ng-if="ctrl.hasMaxDataPoints">
+			<label class="gf-form-label">
+				Max data points
+			</label>
+			<input type="text"
+					 	 class="gf-form-input width-6"
+						 placeholder="auto"
+					   ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
+						 ng-model="ctrl.panel.maxDataPoints"
+						 spellcheck="false"  />
+			<info-popover mode="right-absolute">
+					The maximum data points the query should return. For graphs this
+					is automatically set to one data point per pixel.
+			</info-popover>
+		</div>
+
 		<div class="gf-form gf-form--grow">
 			<label class="gf-form-label gf-form-label--grow"></label>
 		</div>
-		<div class="gf-form">
-			<label class="gf-form-label">
-				<i class="fa fa-question-circle"></i>
-				<a href="http://google.com">Help &amp; Docs</a>
-			</label>
+		<div class="gf-form" ng-if="ctrl.hasHelp">
+			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleHelp()">
+				<i class="fa fa-chevron-right" ng-hide="ctrl.helpOpen"></i>
+				<i class="fa fa-chevron-down" ng-show="ctrl.helpOpen"></i>
+				Help
+			</button>
 		</div>
 		<div class="gf-form">
-			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleQueryTroubleshooter()">
+			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display data query request & response'">
 				<i class="fa fa-chevron-right" ng-hide="ctrl.queryTroubleshooterOpen"></i>
 				<i class="fa fa-chevron-down" ng-show="ctrl.queryTroubleshooterOpen"></i>
 				Query Inspector
 			</button>
-    </div>
-  </div>
+		</div>
+	</div>
+
+	<div class="grafana-info-box grafana-info-box--animate" ng-if="ctrl.helpOpen" ng-class="{'grafana-info-box--animate-open': ctrl.animateStart}">
+		<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
+		<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
+			<i class="fa fa-chevron-up"></i>
+		</a>
+	</div>
+
 	<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
 </div>
 
 <div class="query-editor-rows gf-form-group">
-  <div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
-    <rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
-      <plugin-component type="query-ctrl">
-      </plugin-component>
-    </rebuild-on-change>
+	<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
+		<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
+			<plugin-component type="query-ctrl">
+			</plugin-component>
+		</rebuild-on-change>
 	</div>
 
 	<div class="gf-form-query">
@@ -56,16 +105,16 @@
 				</span>
 				<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
 			</label>
-      <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
-        Add Query
-      </button>
+			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
+				Add Query
+			</button>
 
-      <div class="dropdown" ng-if="ctrl.current.meta.mixed">
-        <gf-form-dropdown model="ctrl.addQueryDropdown"
-                          get-options="ctrl.getOptions(false)"
-                          on-change="ctrl.addMixedQuery($option)">
-        </gf-form-dropdown>
-      </div>
-    </div>
-  </div>
+			<div class="dropdown" ng-if="ctrl.current.meta.mixed">
+				<gf-form-dropdown model="ctrl.addQueryDropdown"
+													get-options="ctrl.getOptions(false)"
+													on-change="ctrl.addMixedQuery($option)">
+				</gf-form-dropdown>
+			</div>
+		</div>
+	</div>
 </div>