From eb0f5cc900e7928ed4a69d244278671aaba16294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 31 Aug 2017 16:38:49 +0200
Subject: [PATCH] ux: progress on metrics tab changes

---
 public/app/core/core.ts                       |   1 +
 public/app/core/utils/outline.js              |  32 +++++
 public/app/features/panel/metrics_tab.ts      |  18 ++-
 .../features/panel/partials/metrics_tab.html  | 113 ++++++++----------
 .../app/plugins/datasource/graphite/help.md   |   7 +-
 public/sass/_variables.dark.scss              |   2 +-
 public/sass/components/_gf-form.scss          |   4 +
 public/sass/components/_infobox.scss          |  13 +-
 public/sass/mixins/_animations.scss           |  11 ++
 9 files changed, 112 insertions(+), 89 deletions(-)
 create mode 100644 public/app/core/utils/outline.js

diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index f7ebb614d2a..6a5702d1f12 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -20,6 +20,7 @@ import './jquery_extended';
 import './partials';
 import './components/jsontree/jsontree';
 import './components/code_editor/code_editor';
+import './utils/outline';
 
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';
diff --git a/public/app/core/utils/outline.js b/public/app/core/utils/outline.js
new file mode 100644
index 00000000000..f968b3e51f9
--- /dev/null
+++ b/public/app/core/utils/outline.js
@@ -0,0 +1,32 @@
+// outline.js
+// based on http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/
+(function(d) {
+  "use strict";
+
+  var style_element = d.createElement('STYLE'),
+    dom_events = 'addEventListener' in d,
+    add_event_listener = function(type, callback) {
+      // Basic cross-browser event handling
+      if(dom_events){
+        d.addEventListener(type, callback);
+      } else {
+        d.attachEvent('on' + type, callback);
+      }
+    },
+    set_css = function(css_text) {
+      // Handle setting of <style> element contents in IE8
+      !!style_element.styleSheet ? style_element.styleSheet.cssText = css_text : style_element.innerHTML = css_text;
+    };
+
+  d.getElementsByTagName('HEAD')[0].appendChild(style_element);
+
+  // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
+  add_event_listener('mousedown', function() {
+    set_css(':focus{outline:0 !important}::-moz-focus-inner{border:0;}');
+  });
+
+  add_event_listener('keydown', function() {
+    set_css('');
+  });
+
+})(document);
diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts
index 25957ac35ae..e57a685d4e4 100644
--- a/public/app/features/panel/metrics_tab.ts
+++ b/public/app/features/panel/metrics_tab.ts
@@ -21,7 +21,7 @@ export class MetricsTabCtrl {
   hasMinInterval: boolean;
   hasCacheTimeout: boolean;
   hasMaxDataPoints: boolean;
-  animateStart: boolean;
+  optionsOpen: boolean;
 
   /** @ngInject */
   constructor($scope, private $sce, private datasourceSrv, private backendSrv, private $timeout) {
@@ -85,19 +85,25 @@ export class MetricsTabCtrl {
   }
 
   toggleHelp() {
-    this.animateStart = false;
+    this.optionsOpen = false;
+    this.queryTroubleshooterOpen = false;
     this.helpOpen = !this.helpOpen;
+
     this.backendSrv.get(`/api/plugins/${this.current.meta.id}/markdown/help`).then(res => {
       var md = new Remarkable();
       this.helpHtml = this.$sce.trustAsHtml(md.render(res));
-
-      this.$timeout(() => {
-        this.animateStart = true;
-      }, 1);
     });
   }
 
+  toggleOptions() {
+    this.helpOpen = false;
+    this.queryTroubleshooterOpen = false;
+    this.optionsOpen = !this.optionsOpen;
+  }
+
   toggleQueryTroubleshooter() {
+    this.helpOpen = false;
+    this.optionsOpen = false;
     this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
   }
 }
diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html
index 53033d0e241..d9ad033e9ea 100644
--- a/public/app/features/panel/partials/metrics_tab.html
+++ b/public/app/features/panel/partials/metrics_tab.html
@@ -11,82 +11,65 @@
                         on-change="ctrl.datasourceChanged($option)">
       </gf-form-dropdown>
 		</div>
-		<div class="gf-form" ng-if="ctrl.hasMinInterval">
-			<label class="gf-form-label">
-				Min auto interval
-			</label>
-			<input type="text"
-						class="gf-form-input width-6"
-						placeholder="1s"
-						ng-model="ctrl.panel.interval"
-						spellcheck="false"
-						ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
-						/>
-			<info-popover mode="right-absolute">
-				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
-				for example <code>1m</code> if your data is written every minute. Access auto interval via variable <code>$__interval</code> for time range
-				string and <code>$__interval_ms</code> for numeric variable that can be used in math expressions.
-			</info-popover>
-		</div>
-		<div class="gf-form" ng-if="ctrl.hasCacheTimeout">
-			<label class="gf-form-label">
-				Cache timeout
-			</label>
-			<input  type="text"
-							class="gf-form-input width-6"
-							placeholder="60"
-							ng-model="ctrl.panel.cacheTimeout"
-						  ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
-							spellcheck="false"
-							/>
-			<info-popover mode="right-absolute">
-					If your time series store has a query cache this option can override the default
-					cache timeout. Specify a numeric value in seconds.
-			</info-popover>
-		</div>
-		<div class="gf-form" ng-if="ctrl.hasMaxDataPoints">
-			<label class="gf-form-label">
-				Max data points
-			</label>
-			<input type="text"
-					 	 class="gf-form-input width-6"
-						 placeholder="auto"
-					   ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
-						 ng-model="ctrl.panel.maxDataPoints"
-						 spellcheck="false"  />
-			<info-popover mode="right-absolute">
-					The maximum data points the query should return. For graphs this
-					is automatically set to one data point per pixel.
-			</info-popover>
-		</div>
 
 		<div class="gf-form gf-form--grow">
 			<label class="gf-form-label gf-form-label--grow"></label>
 		</div>
 		<div class="gf-form" ng-if="ctrl.hasHelp">
-			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleHelp()">
-				<i class="fa fa-chevron-right" ng-hide="ctrl.helpOpen"></i>
-				<i class="fa fa-chevron-down" ng-show="ctrl.helpOpen"></i>
-				Help
+			<a class="gf-form-label" ng-click="ctrl.toggleOptions()">
+				<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.optionsOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.optionsOpen"></i>Options
+			</a>
+		</div>
+		<div class="gf-form" ng-if="ctrl.hasHelp">
+			<button class="gf-form-label" ng-click="ctrl.toggleHelp()">
+				<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.helpOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.helpOpen"></i>Help
 			</button>
 		</div>
 		<div class="gf-form">
-			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display data query request & response'">
-				<i class="fa fa-chevron-right" ng-hide="ctrl.queryTroubleshooterOpen"></i>
-				<i class="fa fa-chevron-down" ng-show="ctrl.queryTroubleshooterOpen"></i>
-				Query Inspector
+			<button class="gf-form-label" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display query request & response'">
+				<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.queryTroubleshooterOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.queryTroubleshooterOpen"></i>Query Inspector
 			</button>
 		</div>
 	</div>
 
-	<div class="grafana-info-box grafana-info-box--animate" ng-if="ctrl.helpOpen" ng-class="{'grafana-info-box--animate-open': ctrl.animateStart}">
-		<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
-		<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
-			<i class="fa fa-chevron-up"></i>
-		</a>
-	</div>
+	<div>
+		<div class="" ng-if="ctrl.optionsOpen">
+			<div class="gf-form gf-form--flex-end" ng-if="ctrl.hasMinInterval">
+				<label class="gf-form-label">Min auto interval</label>
+				<input type="text" class="gf-form-input width-6" placeholder="1s" ng-model="ctrl.panel.interval" spellcheck="false" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" />
+				<info-popover mode="right-absolute">
+					A lower limit for the auto group by time interval. Recommended to be set to write frequency,
+					for example <code>1m</code> if your data is written every minute. Access auto interval via variable <code>$__interval</code> for time range
+					string and <code>$__interval_ms</code> for numeric variable that can be used in math expressions.
+				</info-popover>
+			</div>
+			<div class="gf-form gf-form--flex-end" ng-if="ctrl.hasCacheTimeout">
+				<label class="gf-form-label width-9">Cache timeout</label>
+				<input  type="text" class="gf-form-input width-6" placeholder="60" ng-model="ctrl.panel.cacheTimeout" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" spellcheck="false" />
+				<info-popover mode="right-absolute">
+					If your time series store has a query cache this option can override the default
+					cache timeout. Specify a numeric value in seconds.
+				</info-popover>
+			</div>
+			<div class="gf-form gf-form--flex-end" ng-if="ctrl.hasMaxDataPoints">
+				<label class="gf-form-label width-9">Max data points</label>
+				<input type="text" class="gf-form-input width-6" placeholder="auto" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" ng-model="ctrl.panel.maxDataPoints" spellcheck="false"  />
+				<info-popover mode="right-absolute">
+					The maximum data points the query should return. For graphs this
+					is automatically set to one data point per pixel.
+				</info-popover>
+			</div>
+		</div>
 
-	<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
+		<div class="grafana-info-box" ng-if="ctrl.helpOpen">
+			<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
+			<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
+				<i class="fa fa-chevron-up"></i>
+			</a>
+		</div>
+
+		<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
+	</div>
 </div>
 
 <div class="query-editor-rows gf-form-group">
@@ -110,9 +93,7 @@
 			</button>
 
 			<div class="dropdown" ng-if="ctrl.current.meta.mixed">
-				<gf-form-dropdown model="ctrl.addQueryDropdown"
-													get-options="ctrl.getOptions(false)"
-													on-change="ctrl.addMixedQuery($option)">
+				<gf-form-dropdown model="ctrl.addQueryDropdown" get-options="ctrl.getOptions(false)" on-change="ctrl.addMixedQuery($option)">
 				</gf-form-dropdown>
 			</div>
 		</div>
diff --git a/public/app/plugins/datasource/graphite/help.md b/public/app/plugins/datasource/graphite/help.md
index c57d89985d3..a7191550d57 100644
--- a/public/app/plugins/datasource/graphite/help.md
+++ b/public/app/plugins/datasource/graphite/help.md
@@ -1,9 +1,8 @@
 #### Get Shorter legend names
 
-- alias() function to specify a custom series name<
+- alias() function to specify a custom series name
 - aliasByNode(2) to alias by a specific part of your metric path
-- aliasByNode(2, -1) you can add multiple segment paths, and use negative index
-- groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by
+- groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by.
 
 #### Series as parameter
 
@@ -11,8 +10,6 @@
 - Use #[A-Z] to use a graphite query as parameter to a function
 - Examples:
   - asPercent(#A, #B)
-  - prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query
-  - prod.srv-01.counters.count - sumSeries(#A) : sum count and series A
   - divideSeries(#A, #B)
 
 If a query is added only to be used as a parameter, hide it from the graph with the eye icon
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 131e52f3f02..c3c673c517d 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -276,7 +276,7 @@ $card-background-hover: linear-gradient(135deg, #343434, #262626);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
 
 // info box
-$info-box-background: linear-gradient(177deg, #006e95, #412078);
+$info-box-background: linear-gradient(100deg, #1a4552, #0b2127);
 
 // footer
 $footer-link-color:   $gray-1;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index a15f91e9ed3..14c8220337a 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -16,6 +16,10 @@ $gf-form-margin: 0.25rem;
   &--grow {
     flex-grow: 1;
   }
+
+  &--flex-end {
+    justify-content: flex-end;
+  }
 }
 
 .gf-form-disabled {
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index a7d762c602d..0d3cbcd52b8 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -16,27 +16,18 @@
   border-radius: 4px;
   margin-bottom: $spacer;
   margin-right: $gf-form-margin;
+  flex-grow: 1;
 
   h5 {
     margin-bottom: $spacer;
   }
   ul {
-    padding-left: $spacer;
+    padding-left: $spacer * 1.5;
   }
 
   a {
     @extend .external-link;
   }
-
-  &--animate {
-    max-height: 0;
-    overflow: hidden;
-  }
-
-  &--animate-open {
-    max-height: 1000px;
-    transition: max-height 250ms ease-in-out;
-  }
 }
 
 .grafana-info-box__close {
diff --git a/public/sass/mixins/_animations.scss b/public/sass/mixins/_animations.scss
index 7ef6f8f0a08..853dd34048e 100644
--- a/public/sass/mixins/_animations.scss
+++ b/public/sass/mixins/_animations.scss
@@ -23,3 +23,14 @@
   -o-animation: #{$str};
   animation: #{$str};
 }
+
+.animate-height {
+  max-height: 0;
+  overflow: hidden;
+
+  &--open {
+    max-height: 1000px;
+    overflow: auto;
+    transition: max-height 250ms ease-in-out;
+  }
+}