Merge pull request #2860 from timroes/sidebar-hintboxes

Add hintboxes in sidebar for additional information

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

@@ -2,24 +2,27 @@
   <label for="field">
     Field
   </label>
-  <select
-    class="form-control"
-    name="field"
-    required
-    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">
+
+  <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>
+    <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>
-
+  </div>
 
-  </p>
+  <select
+    class="form-control"
+    name="field"
+    required
+    ng-model="agg.params.field"
+    ng-options="field as field.displayName group by field.type for field in indexedFields">
+  </select>
 
 </div>

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

@@ -1,12 +1,15 @@
 <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"
       class="form-control"
       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 {