From ea53e7221eea8247ab5314a74b352900a6d3452f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 21 Apr 2017 15:52:42 +0200
Subject: [PATCH] mysql: added query help

---
 public/app/plugins/datasource/mysql/module.ts |  1 +
 .../mysql/partials/query.editor.html          | 35 ++++++++++++++++---
 public/sass/components/_gf-form.scss          | 10 ++++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/datasource/mysql/module.ts b/public/app/plugins/datasource/mysql/module.ts
index 6725a4fe0a6..afaa2b9e143 100644
--- a/public/app/plugins/datasource/mysql/module.ts
+++ b/public/app/plugins/datasource/mysql/module.ts
@@ -23,6 +23,7 @@ class MysqlQueryCtrl extends QueryCtrl {
   target: MysqlQuery;
   lastQueryMeta: QueryMeta;
   lastQueryError: string;
+  showHelp: boolean;
 
   constructor($scope, $injector) {
     super($scope, $injector);
diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html
index 3dba49f9a89..de54f0ce942 100644
--- a/public/app/plugins/datasource/mysql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -12,9 +12,12 @@
 				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
 			</div>
 		</div>
-    <div class="gf-form max-width-30">
-			<label class="gf-form-label query-keyword">Name by</label>
-			<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="pattern" ng-blur="ctrl.refresh()">
+		<div class="gf-form">
+      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
+        Show Help
+        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
+        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+      </label>
 		</div>
 		<div class="gf-form" ng-show="ctrl.lastQueryMeta">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
@@ -28,7 +31,29 @@
 		</div>
 	</div>
 
-  <pre class="small" ng-show="ctrl.showLastQuerySQL">{{ctrl.lastQueryMeta.sql}}</pre>
-  <pre class="small alert alert-error" ng-show="ctrl.lastQueryError">{{ctrl.lastQueryError}}</pre>
+	<div class="gf-form" ng-show="ctrl.showLastQuerySQL">
+		<pre class="gf-form-pre">{{ctrl.lastQueryMeta.sql}}</pre>
+	</div>
+
+	<div class="gf-form"  ng-show="ctrl.showHelp">
+		<pre class="gf-form-pre alert alert-info">Time series:
+- return column named time_sec (UTC in seconds), use UNIX_TIMESTAMP(column)
+- return column named value for the time point value
+- return column named metric to represent the series name
+
+Table:
+- return any set of columns
+
+Macros:
+- $__time(column) -&gt; UNIX_TIMESTAMP(column) as time_sec
+- $__timeFilter(column) -&gt;  UNIX_TIMESTAMP(time_date_time) &gt; from AND UNIX_TIMESTAMP(time_date_time) &lt; 1492750877
+		</pre>
+	</div>
+
+	</div>
+
+	<div class="gf-form" ng-show="ctrl.lastQueryError">
+		<pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
+	</div>
 
 </query-editor-row>
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 94691334fe2..9c88435fcc2 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -66,6 +66,16 @@ $gf-form-margin: 0.25rem;
   }
 }
 
+.gf-form-pre {
+  display: block;
+  flex-grow: 1;
+  font-size: $font-size-sm;
+  margin: 0;
+  margin-right: $gf-form-margin;
+  border: $input-btn-border-width solid transparent;
+  @include border-radius($label-border-radius-sm);
+}
+
 .gf-form-error {
   padding: $input-padding-y $input-padding-x;
   margin-right: $gf-form-margin;