add help text component

public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { AnnotationTarget } from '../types';
+import { AnnotationsHelp } from './AnnotationsHelp';
 
 export interface Props {
   onQueryChange: (target: AnnotationTarget) => void;
@@ -57,7 +58,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
   }
 
   render() {
-    const { defaultProject, metricType, filters, refId, title } = this.state;
+    const { defaultProject, metricType, filters, refId, title, text } = this.state;
     const { datasource } = this.props;
 
     return (
@@ -95,12 +96,19 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           </div>
           <div className="gf-form">
             <span className="gf-form-label query-keyword width-9">Text</span>
-            <input type="text" className="gf-form-input width-20" ng-model="ctrl.annotation.target.text" />
+            <input
+              type="text"
+              className="gf-form-input width-20"
+              value={text}
+              onChange={e => this.handleChange('text', e.target.value)}
+            />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
+
+        <AnnotationsHelp />
         {/* <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} /> */}
       </React.Fragment>
     );

public/app/plugins/datasource/stackdriver/components/AnnotationsHelp.tsx

+import React, { SFC } from 'react';
+
+export const AnnotationsHelp: SFC = () => {
+  return (
+    <div className="gf-form grafana-info-box" style={{ padding: 0 }}>
+      <pre className="gf-form-pre alert alert-info" style={{ marginRight: 0 }}>
+        <h5>Annotation Query Format</h5>
+        <p>
+          An annotation is an event that is overlaid on top of graphs. Annotation rendering is expensive so it is
+          important to limit the number of rows returned.{' '}
+        </p>
+        <p>
+          The Title and Text fields support templating and can use data returned from the query. For example, the Title
+          field could have the following text:
+        </p>
+        <code>
+          {`${'{{metric.type}}'}`} has value: {`${'{{metric.value}}'}`}
+        </code>
+        <p>
+          Example Result: <code>monitoring.googleapis.com/uptime_check/http_status has this value: 502</code>
+        </p>
+        <label>Patterns:</label>
+        <p>
+          <code>{`${'{{metric.value}}'}`}</code> = value of the metric/point
+        </p>
+        <p>
+          <code>{`${'{{metric.type}}'}`}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
+        </p>
+        <p>
+          <code>{`${'{{metric.name}}'}`}</code> = name part of metric e.g. instance/cpu/usage_time
+        </p>
+        <p>
+          <code>{`${'{{metric.service}}'}`}</code> = service part of metric e.g. compute
+        </p>
+        <p>
+          <code>{`${'{{metric.label.label_name}}'}`}</code> = Metric label metadata e.g. metric.label.instance_name
+        </p>
+        <p>
+          <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
+        </p>
+      </pre>
+    </div>
+  );
+};

public/app/plugins/datasource/stackdriver/partials/annotations.editor.html

-<!-- <stackdriver-filter target="ctrl.annotation.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
-  default-dropdown-value="ctrl.defaultDropdownValue" default-service-value="ctrl.defaultServiceValue" hide-group-bys="true"></stackdriver-filter> -->
 <annotation-query-editor
   target="ctrl.annotation.target"
   datasource="ctrl.datasource"
   on-query-change="(ctrl.handleQueryChange)"
 ></annotation-query-editor>
-
-<!-- <div class="gf-form gf-form-inline">
-  <div class="gf-form">
-    <span class="gf-form-label query-keyword width-9">Title</span>
-    <input type="text" class="gf-form-input width-20" ng-model="ctrl.annotation.target.title" />
-  </div>
-  <div class="gf-form">
-    <span class="gf-form-label query-keyword width-9">Text</span>
-    <input type="text" class="gf-form-input width-20" ng-model="ctrl.annotation.target.text" />
-  </div>
-  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-</div> -->
-
-<div class="gf-form grafana-info-box" style="padding: 0">
-  <pre class="gf-form-pre alert alert-info" style="margin-right: 0"><h5>Annotation Query Format</h5>
-An annotation is an event that is overlaid on top of graphs. Annotation rendering is expensive so it is important to limit the number of rows returned.
-
-The Title and Text fields support templating and can use data returned from the query. For example, the Title field could have the following text:
-
-<code ng-non-bindable>{{metric.type}} has value: {{metric.value}}</code>
-
-Example Result: <code ng-non-bindable>monitoring.googleapis.com/uptime_check/http_status has this value: 502</code>
-
-<label>Patterns:</label>
-<code ng-non-bindable>{{metric.value}}</code> = value of the metric/point
-<code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
-<code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. instance/cpu/usage_time
-<code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute
-
-<code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g. metric.label.instance_name
-<code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
-</pre>
-</div>