From 5c9810fba46ffb0eb95a41b1af45a1e78f6e2aaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 5 May 2017 11:30:44 +0200
Subject: [PATCH] docs: added in app docs & links to annotation docs

---
 .../features/annotations/partials/editor.html | 21 +++++++++++++++++++
 public/sass/components/_infobox.scss          |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html
index b9032cdcd87..1506e1a0dc5 100644
--- a/public/app/features/annotations/partials/editor.html
+++ b/public/app/features/annotations/partials/editor.html
@@ -18,6 +18,12 @@
 			<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
 				<span class="active gf-tabs-link">New Query</span>
 			</li>
+
+			<li class="gf-tabs-item" >
+        <a class="gf-tabs-link" ng-click="ctrl.mode = 'help';" ng-class="{active: ctrl.mode === 'help'}">
+          Help
+        </a>
+      </li>
 		</ul>
 
 		<button class="tabbed-view-close-btn" ng-click="dismiss();">
@@ -26,6 +32,21 @@
 	</div>
 
 	<div class="tabbed-view-body">
+
+		<div ng-show="ctrl.mode === 'help'">
+			<div class="grafana-info-box col-lg-8">
+				<h5>What are Annotations?</h5>
+				<p>
+					Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons
+					on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event.
+					In the <i>Queries</i> tab you can add queries that return annotation events.
+					<br>
+					<br>
+					Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
+				</p>
+			</div>
+		</div>
+
 		<div class="editor-row row" ng-if="ctrl.mode === 'list'">
 			<div ng-if="ctrl.annotations.length === 0">
 				<em>No annotation queries defined</em>
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index a6951ee9c51..63b334a273e 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -16,7 +16,7 @@
   border-radius: 4px;
 
   h5 {
-    margin-top: 5px;
+    margin-bottom: $spacer;
   }
   ul {
     padding-left: $spacer;