Merge pull request #2860 from timroes/sidebar-hintboxes

Add hintboxes in sidebar for additional information

src/kibana/components/agg_types/controls/field.html

@@ -2,6 +2,21 @@
   <label for="field">
     Field
   </label>
+
+  <span class="pull-right text-warning hintbox-label" ng-show="agg.params.field.analyzed"
+      ng-click="showAnalyzedFieldWarning = !showAnalyzedFieldWarning">
+    <i class="fa fa-warning"></i> Analyzed Field
+  </span>
+  <div class="hintbox" ng-show="showAnalyzedFieldWarning">
+    <p>
+    <strong>Careful!</strong> The field selected contains analyzed strings. Values such as <i>foo-bar</i> will be broken into <i>foo</i> and <i>bar</i>. See <a href="http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-core-types.html" target="_blank">Mapping Core Types</a> for more information on setting this field as <i>not_analyzed</i>
+    </p>
+
+    <p ng-show="indexedFields.byName[agg.params.field.name + '.raw'].analyzed == false">
+      <strong>Tip:</strong> <i>{{agg.params.field.name + '.raw'}}</i> may be a <i>not_analyzed</i> version of this field.
+    </p>
+  </div>
+
   <select
     class="form-control"
     name="field"
@@ -9,17 +24,5 @@
     ng-model="agg.params.field"
     ng-options="field as field.displayName group by field.type for field in indexedFields">
   </select>
-  <span ng-show="agg.params.field.analyzed">
-    <p>
-      <strong>Careful!</strong> The field selected contains analyzed strings. Values such as <i>foo-bar</i> will be broken into <i>foo</i> and <i>bar</i>. See <a href="http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-core-types.html" target="_blank">Mapping Core Types</a> for more information on setting this field as <i>not_analyzed</i>
-    </p>
-
-    <p ng-show="indexedFields.byName[agg.params.field.name + '.raw'].analyzed == false">
-      <strong>Tip:</strong> <i>{{agg.params.field.name + '.raw'}}</i> may be a <i>not_analyzed</i> version of this field.
-    </p>
-  </span>
-
-
-  </p>
 
 </div>

src/kibana/components/agg_types/controls/raw_json.html

@@ -1,5 +1,9 @@
 <div class="form-group regex">
-  <label>JSON Input</label>
+    <span class="hintbox-label" ng-click="showJsonHint = !showJsonHint">
+      <label>JSON Input</label>
+      <i class="fa fa-info-circle"></i>
+    </span>
+    <div class="hintbox" ng-show="showJsonHint">Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example <i>shard_size</i> on a <i>terms</i> aggregation</div>
   <p>
     <textarea
       type="text"
@@ -7,6 +11,5 @@
       ng-model="agg.params.json"
       validate-json
       ></textarea>
-      <small>Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example <i>shard_size</i> on a <i>terms</i> aggregation</small>
   </p>
 </div>

src/kibana/styles/_hintbox.less

@@ -0,0 +1,26 @@
+.hintbox-label,
+.hintbox-label[ng-click] {
+  cursor: help;
+}
+
+.hintbox {
+  border-radius: 5px;
+  background-color: @gray-lighter;
+  padding: 5px;
+  margin-bottom: 5px;
+
+  a {
+    color: @link-color !important;
+
+    &:hover {
+      color: @text-color !important;
+    }
+  }
+}
+
+.hintbox p {
+  margin-bottom: 0;
+}
+.hintbox p + p {
+  margin-top: 5px;
+}

src/kibana/styles/main.less

@@ -34,6 +34,7 @@
 @import "./_sidebar.less";
 @import "./_truncate.less";
 @import "./_control_group.less";
+@import "./_hintbox.less";
 
 html,
 body {