From 3f27d3ea23f5a6911d6529b1e839b35ef0828175 Mon Sep 17 00:00:00 2001
From: Jeremy Doupe <jeremy.doupe@stackpath.com>
Date: Tue, 5 Mar 2019 15:51:16 -0600
Subject: [PATCH 01/32] Make datasource variables multiselect and dashboard
 repeatable

closes #7492 (and #7030)
---
 .../app/features/panel/metrics_panel_ctrl.ts  | 21 ++++++++++++++++++-
 public/app/features/plugins/datasource_srv.ts |  4 ++++
 .../templating/datasource_variable.ts         | 15 +++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index ceebfd82335..0d73d6211e4 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -79,9 +79,28 @@ class MetricsPanelCtrl extends PanelCtrl {
     delete this.error;
     this.loading = true;
 
+    // set "mydatasource" to whatever the panel has defined
+    let mydatasource = this.panel.datasource;
+    let datasourceVarName = '';
+
+    // look for data source variables
+    for (let i = 0; i < this.templateSrv.variables.length; i++) {
+      const variable = this.templateSrv.variables[i];
+      if (variable.type !== 'datasource') {
+        continue;
+      }
+
+      datasourceVarName = variable.name;
+    }
+
+    // if a data source variable was found, use its value
+    if (datasourceVarName !== '' && this.panel.scopedVars && this.panel.scopedVars[datasourceVarName]) {
+      mydatasource = this.panel.scopedVars[datasourceVarName].value;
+    }
+
     // load datasource service
     this.datasourceSrv
-      .get(this.panel.datasource)
+      .get(mydatasource)
       .then(this.updateTimeRange.bind(this))
       .then(this.issueQueries.bind(this))
       .then(this.handleQueryResult.bind(this))
diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts
index f7dc0da32c4..aca87d8c63b 100644
--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -40,6 +40,10 @@ export class DatasourceSrv {
   }
 
   loadDatasource(name: string): Promise<DataSourceApi> {
+    // if there are multiple datasources provided, just use the first one
+    const re = /{([^,}]+).*/;
+    name = name.replace(re, '$1');
+
     const dsConfig = config.datasources[name];
     if (!dsConfig) {
       return this.$q.reject({ message: 'Datasource named ' + name + ' was not found' });
diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts
index 4424720c7f8..37b9e707444 100644
--- a/public/app/features/templating/datasource_variable.ts
+++ b/public/app/features/templating/datasource_variable.ts
@@ -6,6 +6,8 @@ export class DatasourceVariable implements Variable {
   query: string;
   options: any;
   current: any;
+  multi: boolean;
+  includeAll: boolean;
   refresh: any;
   skipUrlSync: boolean;
 
@@ -18,6 +20,8 @@ export class DatasourceVariable implements Variable {
     regex: '',
     options: [],
     query: '',
+    multi: false,
+    includeAll: false,
     refresh: 1,
     skipUrlSync: false,
   };
@@ -69,9 +73,16 @@ export class DatasourceVariable implements Variable {
     }
 
     this.options = options;
+    if (this.includeAll) {
+      this.addAllOption();
+    }
     return this.variableSrv.validateVariableSelectionState(this);
   }
 
+  addAllOption() {
+    this.options.unshift({ text: 'All', value: '$__all' });
+  }
+
   dependsOn(variable) {
     if (this.regex) {
       return containsVariable(this.regex, variable.name);
@@ -84,6 +95,9 @@ export class DatasourceVariable implements Variable {
   }
 
   getValueForUrl() {
+    if (this.current.text === 'All') {
+      return 'All';
+    }
     return this.current.value;
   }
 }
@@ -91,5 +105,6 @@ export class DatasourceVariable implements Variable {
 variableTypes['datasource'] = {
   name: 'Datasource',
   ctor: DatasourceVariable,
+  supportsMulti: true,
   description: 'Enabled you to dynamically switch the datasource for multiple panels',
 };

From c104f31149cb3b0bea25aade7ad0860ddb8984b8 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Thu, 7 Mar 2019 18:57:18 +0300
Subject: [PATCH 02/32] heatmap: fix legend for small values, #14019 #15683

---
 public/app/plugins/panel/heatmap/color_legend.ts | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts
index c36fad45cba..a62589a6bf9 100644
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/public/app/plugins/panel/heatmap/color_legend.ts
@@ -95,10 +95,7 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
   const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
   const legendHeight = legendElem.attr('height');
 
-  let rangeStep = 1;
-  if (rangeTo - rangeFrom > legendWidth) {
-    rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
-  }
+  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * 2;
   const widthFactor = legendWidth / (rangeTo - rangeFrom);
   const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
@@ -115,7 +112,7 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
     .attr('stroke-width', 0)
     .attr('fill', d => colorScale(d));
 
-  drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth);
+  drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange);
 }
 
 function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue) {
@@ -126,10 +123,7 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
   const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
   const legendHeight = legendElem.attr('height');
 
-  let rangeStep = 1;
-  if (rangeTo - rangeFrom > legendWidth) {
-    rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
-  }
+  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * 2;
   const widthFactor = legendWidth / (rangeTo - rangeFrom);
   const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
@@ -147,10 +141,10 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
     .attr('fill', options.cardColor)
     .style('opacity', d => opacityScale(d));
 
-  drawLegendValues(elem, opacityScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth);
+  drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange);
 }
 
-function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth) {
+function drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange) {
   const legendElem = $(elem).find('svg');
   const legend = d3.select(legendElem.get(0));
 

From 55d5219a053cbe294b3168f5f749d3de83aade4b Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Thu, 7 Mar 2019 19:49:14 +0300
Subject: [PATCH 03/32] heatmap: fix legend padding

---
 public/app/plugins/panel/heatmap/color_legend.ts | 9 ++++++++-
 public/sass/components/_panel_heatmap.scss       | 1 -
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts
index a62589a6bf9..b397d0b3eee 100644
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/public/app/plugins/panel/heatmap/color_legend.ts
@@ -11,6 +11,7 @@ const LEGEND_HEIGHT_PX = 6;
 const LEGEND_WIDTH_PX = 100;
 const LEGEND_TICK_SIZE = 0;
 const LEGEND_VALUE_MARGIN = 0;
+const LEGEND_PADDING_LEFT = 10;
 
 /**
  * Color legend for heatmap editor.
@@ -101,6 +102,9 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
 
   const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, maxValue, minValue);
   legend
+    .append('g')
+    .attr('class', 'legend-color-bar')
+    .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)')
     .selectAll('.heatmap-color-legend-rect')
     .data(valuesRange)
     .enter()
@@ -129,6 +133,9 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
 
   const opacityScale = getOpacityScale(options, maxValue, minValue);
   legend
+    .append('g')
+    .attr('class', 'legend-color-bar')
+    .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)')
     .selectAll('.heatmap-opacity-legend-rect')
     .data(valuesRange)
     .enter()
@@ -165,7 +172,7 @@ function drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWi
 
   const colorRect = legendElem.find(':first-child');
   const posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN;
-  const posX = getSvgElemX(colorRect);
+  const posX = getSvgElemX(colorRect) + LEGEND_PADDING_LEFT;
 
   d3.select(legendElem.get(0))
     .append('g')
diff --git a/public/sass/components/_panel_heatmap.scss b/public/sass/components/_panel_heatmap.scss
index 279b9392caa..dad1dc3235b 100644
--- a/public/sass/components/_panel_heatmap.scss
+++ b/public/sass/components/_panel_heatmap.scss
@@ -66,7 +66,6 @@ $font-size-heatmap-tick: 11px;
     height: 18px;
     float: left;
     white-space: nowrap;
-    padding-left: 10px;
   }
 
   .heatmap-legend-values {

From 7167fa9d07e9f23307b37bf949cb32ec1ef7d432 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Thu, 7 Mar 2019 20:05:32 +0300
Subject: [PATCH 04/32] heatmap: reduce number of legend segments to reasonable
 value and round x values to prevent gaps

---
 public/app/plugins/panel/heatmap/color_legend.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts
index b397d0b3eee..4b4926c01bd 100644
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/public/app/plugins/panel/heatmap/color_legend.ts
@@ -12,6 +12,7 @@ const LEGEND_WIDTH_PX = 100;
 const LEGEND_TICK_SIZE = 0;
 const LEGEND_VALUE_MARGIN = 0;
 const LEGEND_PADDING_LEFT = 10;
+const LEGEND_SEGMENT_WIDTH = 10;
 
 /**
  * Color legend for heatmap editor.
@@ -96,7 +97,7 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
   const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
   const legendHeight = legendElem.attr('height');
 
-  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * 2;
+  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH;
   const widthFactor = legendWidth / (rangeTo - rangeFrom);
   const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
@@ -109,9 +110,9 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
     .data(valuesRange)
     .enter()
     .append('rect')
-    .attr('x', d => d * widthFactor)
+    .attr('x', d => Math.round(d * widthFactor))
     .attr('y', 0)
-    .attr('width', rangeStep * widthFactor + 1) // Overlap rectangles to prevent gaps
+    .attr('width', Math.round(rangeStep * widthFactor + 1)) // Overlap rectangles to prevent gaps
     .attr('height', legendHeight)
     .attr('stroke-width', 0)
     .attr('fill', d => colorScale(d));
@@ -127,7 +128,7 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
   const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
   const legendHeight = legendElem.attr('height');
 
-  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * 2;
+  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH;
   const widthFactor = legendWidth / (rangeTo - rangeFrom);
   const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
@@ -140,9 +141,9 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
     .data(valuesRange)
     .enter()
     .append('rect')
-    .attr('x', d => d * widthFactor)
+    .attr('x', d => Math.round(d * widthFactor))
     .attr('y', 0)
-    .attr('width', rangeStep * widthFactor)
+    .attr('width', Math.round(rangeStep * widthFactor))
     .attr('height', legendHeight)
     .attr('stroke-width', 0)
     .attr('fill', options.cardColor)

From 7dc4853e911397154748c7b18094e7af26d3c248 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Mon, 11 Mar 2019 08:51:32 +0100
Subject: [PATCH 05/32] added new variables for spacing, set margins in _cards
 with new variables

---
 .../src/themes/_variables.scss.tmpl.ts        |  6 +++-
 packages/grafana-ui/src/themes/default.ts     | 10 +++---
 packages/grafana-ui/src/types/theme.ts        |  2 ++
 public/sass/_variables.generated.scss         |  4 +++
 public/sass/components/_cards.scss            | 35 ++++++++-----------
 5 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 0ce4fac8182..065ffb685d6 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -17,7 +17,11 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
-$spacer: ${theme.spacing.m} !default;
+$space-xs: ${theme.spacing.xs} !default;
+$space-s: ${theme.spacing.s} !default;
+$space-m: ${theme.spacing.m} !default;
+$space-xl: ${theme.spacing.xl} !default;
+$spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
 $spacers: (
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 60ebcfa7aa0..6559f6a8fe8 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -43,10 +43,12 @@ const theme: GrafanaThemeCommons = {
     xl: '1200px',
   },
   spacing: {
-    xs: '0',
-    s: '3px',
-    m: '14px',
-    l: '21px',
+    d: '14px',
+    xs: '4px',
+    s: '8px',
+    m: '16px',
+    l: '24px',
+    xl: '32px',
     gutter: '30px',
   },
   border: {
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 1226b841836..469408942d7 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -48,10 +48,12 @@ export interface GrafanaThemeCommons {
     };
   };
   spacing: {
+    d: string;
     xs: string;
     s: string;
     m: string;
     l: string;
+    xl: string;
     gutter: string;
   };
   border: {
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 9a29f9beba9..64b19871b0a 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -20,6 +20,10 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xs: 4px !default;
+$space-s: 8px !default;
+$space-m: 16px !default;
+$space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss
index 80a4cd7c32a..ff694d607c8 100644
--- a/public/sass/components/_cards.scss
+++ b/public/sass/components/_cards.scss
@@ -1,7 +1,7 @@
 .layout-selector {
   @include clearfix();
 
-  margin-left: $spacer;
+  margin-left: $space-m;
   text-align: right;
 
   button {
@@ -9,7 +9,7 @@
     color: $text-color-weak;
     box-shadow: $card-shadow;
     border: none;
-    padding: 0.5rem;
+    padding: $space-s;
     line-height: 1;
     font-size: 130%;
     float: right;
@@ -35,7 +35,7 @@
 }
 
 .card-section {
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
 }
 
 .card-list {
@@ -50,7 +50,7 @@
   height: 100%;
   background: $card-background;
   box-shadow: $card-shadow;
-  padding: 1rem;
+  padding: $space-m;
   border-radius: 4px;
 
   &:hover {
@@ -58,7 +58,7 @@
   }
 
   .label-tag {
-    margin-left: 6px;
+    margin-left: $space-s;
     font-size: 11px;
     padding: 2px 6px;
   }
@@ -80,15 +80,8 @@
   overflow: hidden;
 }
 
-.card-item-cog {
-  font-size: 130%;
-  position: relative;
-  top: 1rem;
-  color: $text-muted;
-}
-
 .card-item-header {
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
 }
 
 .card-item-type {
@@ -110,7 +103,7 @@
 }
 
 .card-item-label {
-  margin-left: 8px;
+  margin-left: $space-s;
 }
 
 .card-item-sub-name {
@@ -123,7 +116,7 @@
 .card-item-sub-name--header {
   color: $text-color-weak;
   text-transform: uppercase;
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
   font-size: $font-size-sm;
   font-weight: bold;
 }
@@ -136,7 +129,7 @@
   .card-item-notice {
     font-size: $font-size-sm;
     display: inline-block;
-    margin-left: $spacer;
+    margin-left: $space-m;
   }
 
   .card-item-header-action {
@@ -145,7 +138,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 1rem 1rem 0rem;
+    padding: 0 $space-m $space-m 0;
   }
 
   .card-item-wrapper--clickable {
@@ -153,7 +146,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $spacer $spacer 0;
+    margin: 0 $space-m $space-m 0;
     height: 6rem;
 
     img {
@@ -195,7 +188,7 @@
   .card-item-wrapper {
     padding: 0;
     width: 100%;
-    margin-bottom: 3px;
+    margin-bottom: $space-xs;
   }
 
   .card-item-wrapper--clickable {
@@ -212,9 +205,9 @@
   }
 
   .card-item-figure {
-    margin: 0 $spacer 0 0;
+    margin: 0 $space-m 0 0;
     img {
-      width: 3.5rem;
+      width: 48px;
     }
   }
 

From 9dbcc0fb6ec04c879b641290d1a53639462baa0f Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 11 Mar 2019 11:46:30 +0300
Subject: [PATCH 06/32] heatmap: middle bucket bound option, #15683

---
 public/app/plugins/panel/heatmap/axes_editor.ts     | 1 +
 public/app/plugins/panel/heatmap/heatmap_tooltip.ts | 7 +++++--
 public/app/plugins/panel/heatmap/rendering.ts       | 6 ++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts
index 81df957e2ea..cec3df9f8c5 100644
--- a/public/app/plugins/panel/heatmap/axes_editor.ts
+++ b/public/app/plugins/panel/heatmap/axes_editor.ts
@@ -32,6 +32,7 @@ export class AxesEditorCtrl {
       Auto: 'auto',
       Upper: 'upper',
       Lower: 'lower',
+      Middle: 'middle',
     };
   }
 
diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
index c447825eef8..90cbecd6657 100644
--- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
@@ -114,7 +114,9 @@ export class HeatmapTooltip {
           };
 
           boundBottom = tickFormatter(yBucketIndex);
-          boundTop = yBucketIndex < data.tsBuckets.length - 1 ? tickFormatter(yBucketIndex + 1) : '';
+          if (this.panel.yBucketBound !== 'middle') {
+            boundTop = yBucketIndex < data.tsBuckets.length - 1 ? tickFormatter(yBucketIndex + 1) : '';
+          }
         } else {
           // Display 0 if bucket is a special 'zero' bucket
           const bottom = yData.y ? yData.bounds.bottom : 0;
@@ -122,8 +124,9 @@ export class HeatmapTooltip {
           boundTop = bucketBoundFormatter(yData.bounds.top);
         }
         valuesNumber = countValueFormatter(yData.count);
+        const boundStr = boundTop && boundBottom ? `${boundBottom} - ${boundTop}` : boundBottom || boundTop;
         tooltipHtml += `<div>
-          bucket: <b>${boundBottom} - ${boundTop}</b> <br>
+          bucket: <b>${boundStr}</b> <br>
           count: <b>${valuesNumber}</b> <br>
         </div>`;
       } else {
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index 42b418b06cb..a4649428722 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -379,6 +379,12 @@ export class HeatmapRenderer {
     const posX = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING;
     this.heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')');
 
+    if (this.panel.yBucketBound === 'middle' && tickValues && tickValues.length) {
+      // Shift Y axis labels to the middle of bucket
+      const tickShift = 0 - this.chartHeight / (tickValues.length - 1) / 2;
+      this.heatmap.selectAll('.axis-y text').attr('transform', 'translate(' + 0 + ',' + tickShift + ')');
+    }
+
     // Remove vertical line in the right of axis labels (called domain in d3)
     this.heatmap
       .select('.axis-y')

From bef024e4eb3026c1cf3eb33f56b4cf6bb06e250a Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 11 Mar 2019 11:58:15 +0300
Subject: [PATCH 07/32] heatmap: fix error when series empty

---
 public/app/plugins/panel/heatmap/heatmap_ctrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 71e059a5750..0f44dbd477b 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -146,7 +146,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   }
 
   onRender() {
-    if (!this.range) {
+    if (!this.range || !this.series) {
       return;
     }
 

From 57f48f17a0d8d81db7462a4d3d7da843623fd85d Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 11 Mar 2019 12:42:16 +0300
Subject: [PATCH 08/32] heatmap: don't display cut cards

---
 public/app/plugins/panel/heatmap/rendering.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index a4649428722..59d704f0d55 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -621,8 +621,8 @@ export class HeatmapRenderer {
       w = this.cardWidth;
     }
 
-    // Card width should be MIN_CARD_SIZE at least
-    w = Math.max(w, MIN_CARD_SIZE);
+    // Card width should be MIN_CARD_SIZE at least, but cut cards shouldn't be displayed
+    w = w > 0 ? Math.max(w, MIN_CARD_SIZE) : 0;
     return w;
   }
 

From d55f18974982f820b1f5c3fcbdc73fe3d5990c09 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Mon, 11 Mar 2019 11:33:15 +0100
Subject: [PATCH 09/32] added new space variables to margins in AddPanelWidget,
 add_data_source, dashboard_settings and sidemenu

---
 .../grafana-ui/src/themes/_variables.scss.tmpl.ts    |  1 +
 .../components/AddPanelWidget/_AddPanelWidget.scss   | 12 ++++++------
 public/sass/_variables.generated.scss                |  1 +
 public/sass/components/_add_data_source.scss         |  6 +++---
 public/sass/components/_dashboard_settings.scss      | 10 +++++-----
 public/sass/components/_sidemenu.scss                |  8 ++++----
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 065ffb685d6..531f06e1153 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -20,6 +20,7 @@ $enable-hover-media-query: false !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-s: ${theme.spacing.s} !default;
 $space-m: ${theme.spacing.m} !default;
+$space-l: ${theme.spacing.l} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
index 8daf935d918..6d6bba7e1eb 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
@@ -20,7 +20,7 @@
 
   .gicon {
     font-size: 30px;
-    margin-right: $spacer;
+    margin-right: $space-m;
   }
 
   &:hover {
@@ -32,16 +32,16 @@
 .add-panel-widget__title {
   font-size: $font-size-md;
   font-weight: $font-weight-semi-bold;
-  margin-right: $spacer * 2;
+  margin-right: $space-xl;
 }
 
 .add-panel-widget__link {
-  margin: 0 8px;
+  margin: 0 $space-s;
   width: 154px;
 }
 
 .add-panel-widget__icon {
-  margin-bottom: 8px;
+  margin-bottom: $space-s;
 
   .gicon {
     color: white;
@@ -62,7 +62,7 @@
 
 .add-panel-widget__create {
   display: inherit;
-  margin-bottom: 24px;
+  margin-bottom: $space-l;
   // this is to have the big button appear centered
   margin-top: 55px;
 }
@@ -72,7 +72,7 @@
 }
 
 .add-panel-widget__action {
-  margin: 0 4px;
+  margin: 0 $space-xs;
 }
 
 .add-panel-widget__btn-container {
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 64b19871b0a..ca563e6dd97 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -23,6 +23,7 @@ $enable-hover-media-query: false !default;
 $space-xs: 4px !default;
 $space-s: 8px !default;
 $space-m: 16px !default;
+$space-l: 24px !default;
 $space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss
index 508f7f80d8e..2df78b0ed9e 100644
--- a/public/sass/components/_add_data_source.scss
+++ b/public/sass/components/_add_data_source.scss
@@ -1,5 +1,5 @@
 .add-data-source-header {
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
   padding-top: $spacer;
   text-align: center;
 }
@@ -7,7 +7,7 @@
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $panel-margin * 2;
+  margin-bottom: $space-l;
 }
 
 .add-data-source-grid {
@@ -41,6 +41,6 @@
 }
 
 .add-data-source-grid-item-logo {
-  margin: 0 15px;
+  margin: 0 $space-m;
   width: 55px;
 }
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index de16f0c60b5..19c2f49d814 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -41,7 +41,7 @@
   font-size: $font-size-h3;
   padding-right: 60px;
   white-space: nowrap;
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
 
   i {
     font-size: 25px;
@@ -53,7 +53,7 @@
 
 .dashboard-settings__header {
   font-size: $font-size-h3;
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
 }
 
 .dashboard-settings__subheader {
@@ -89,13 +89,13 @@
   flex-direction: column;
   height: 100%;
   flex-grow: 1;
-  margin: $spacer * 3 $spacer * 2 0 0;
+  margin: 40px $space-xl 0 0;
 
   button {
-    margin-bottom: 10px;
+    margin-bottom: $space-s;
   }
 }
 
 .dashboard-settings__json-save-button {
-  margin-top: $spacer;
+  margin-top: $space-m;
 }
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index f30bdb5c79e..c5bcf0ee8dd 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -167,7 +167,7 @@
   font-size: $font-size-sm;
   color: $text-color-weak;
   border-bottom: 1px solid $dropdownDividerBottom;
-  margin-bottom: 0.25rem;
+  margin-bottom: $space-xs;
   white-space: nowrap;
 }
 
@@ -192,7 +192,7 @@ li.sidemenu-org-switcher {
   display: flex;
   align-items: center;
   > i.fa.fa-random {
-    margin-right: 4px;
+    margin-right: $space-xs;
     top: 1px;
   }
 }
@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
       position: unset;
       width: 100%;
       float: none;
-      margin-top: 0.5rem;
-      margin-bottom: 0.5rem;
+      margin-top: $space-s;
+      margin-bottom: $space-s;
 
       > li > a {
         padding-left: 15px;

From 2085397f31a672be01aa234416bf1366202b4a9b Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 11 Mar 2019 15:54:40 +0300
Subject: [PATCH 10/32] heatmap: fix middle bucket bound for prometheus

---
 public/app/plugins/panel/heatmap/heatmap_ctrl.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 0f44dbd477b..33d4511f18e 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -231,7 +231,10 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
 
     tsBuckets = _.map(this.series, 'label');
     const yBucketBound = this.panel.yBucketBound;
-    if ((panelDatasource === 'prometheus' && yBucketBound !== 'lower') || yBucketBound === 'upper') {
+    if (
+      (panelDatasource === 'prometheus' && yBucketBound !== 'lower' && yBucketBound !== 'middle') ||
+      yBucketBound === 'upper'
+    ) {
       // Prometheus labels are upper inclusive bounds, so add empty bottom bucket label.
       tsBuckets = [''].concat(tsBuckets);
     } else {

From 1ad0c7678a6e1cc1cc2a12e7db17b207d33051ea Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Mon, 11 Mar 2019 14:47:27 +0100
Subject: [PATCH 11/32] removed -margin, replaced with new general variables

---
 .../src/themes/_variables.scss.tmpl.ts        |  3 +--
 public/sass/_variables.generated.scss         |  3 +--
 public/sass/components/_alerts.scss           |  2 +-
 public/sass/components/_page_loader.scss      |  2 +-
 public/sass/components/_panel_editor.scss     |  4 ++--
 public/sass/components/_panel_logs.scss       |  2 +-
 public/sass/components/_submenu.scss          |  2 +-
 public/sass/pages/_explore.scss               | 24 ++++++++-----------
 8 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 531f06e1153..11b76f1790c 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -212,8 +212,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 $side-menu-width: 60px;
 
 // dashboard
-$panel-margin: 10px;
-$dashboard-padding: $panel-margin * 2;
+$dashboard-padding: 20 * 2;
 $panel-horizontal-padding: 10;
 $panel-vertical-padding: 5;
 $panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index ca563e6dd97..f28eb4e4f31 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -215,8 +215,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 $side-menu-width: 60px;
 
 // dashboard
-$panel-margin: 10px;
-$dashboard-padding: $panel-margin * 2;
+$dashboard-padding: 20 * 2;
 $panel-horizontal-padding: 10;
 $panel-vertical-padding: 5;
 $panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss
index 1c4f1b7fcb7..da3ebf7fa7b 100644
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@@ -7,7 +7,7 @@
 
 .alert {
   padding: 15px 20px;
-  margin-bottom: $panel-margin / 2;
+  margin-bottom: $space-xs;
   text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
   background: $alert-error-bg;
   position: relative;
diff --git a/public/sass/components/_page_loader.scss b/public/sass/components/_page_loader.scss
index 053a061600f..6fb5ea8ffb2 100644
--- a/public/sass/components/_page_loader.scss
+++ b/public/sass/components/_page_loader.scss
@@ -7,7 +7,7 @@
 
   &__spinner {
     font-size: 32px;
-    margin-bottom: $panel-margin;
+    margin-bottom: $space-s;
   }
 
   &__text {
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index 9bd5672e4a8..81d6e4e9e17 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -21,7 +21,7 @@
 }
 
 .panel-editor-container__editor {
-  margin-top: $panel-margin * 2;
+  margin-top: $space-l;
   display: flex;
   flex-direction: row;
   flex: 1 1 0;
@@ -80,7 +80,7 @@
   }
 
   .submenu-controls {
-    padding: 0 $dashboard-padding $panel-margin $dashboard-padding;
+    padding: 0 $dashboard-padding $space-s $dashboard-padding;
   }
 
   .panel-editor-container__panel {
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 5ecfa7259b1..edb72b829e2 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px;
   padding: $panel-padding;
   padding-top: 10px;
   border-radius: $border-radius;
-  margin: 2 * $panel-margin 0 $panel-margin;
+  margin: $space-m 0 $space-s;
   border: $panel-border;
   flex-direction: column;
 }
diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss
index 6c450f7e6dd..a70b1e46676 100644
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@@ -4,7 +4,7 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-  padding: 0 0 $panel-margin 0;
+  padding: 0 0 $space-s 0;
 }
 
 .annotation-disabled,
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 90579ff67ad..a68d7f1dcb6 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -73,7 +73,7 @@
   min-height: 55px;
   line-height: 55px;
   justify-content: space-between;
-  margin-left: $panel-margin * 3;
+  margin-left: $space-xl;
 }
 
 .explore-toolbar-header {
@@ -197,7 +197,7 @@
 }
 
 .explore-panel {
-  margin-top: $panel-margin;
+  margin-top: $space-s;
 }
 
 .explore-panel__body {
@@ -216,24 +216,20 @@
 
 .explore-panel__header-label {
   font-weight: 500;
-  margin-right: $panel-margin;
+  margin-right: $space-s;
   font-size: $font-size-h6;
   box-shadow: $text-shadow-faint;
 }
 
 .explore-panel__header-buttons {
-  margin-right: $panel-margin;
+  margin-right: $space-s;
   font-size: $font-size-lg;
   line-height: $font-size-h6;
 }
 
-.result-options {
-  margin: 2 * $panel-margin 0;
-}
-
 .time-series-disclaimer {
   width: 300px;
-  margin: $panel-margin auto;
+  margin: $space-s auto;
   padding: 10px 0;
   border-radius: $border-radius;
   text-align: center;
@@ -241,7 +237,7 @@
 
   .disclaimer-icon {
     color: $yellow;
-    margin-right: $panel-margin/2;
+    margin-right: $space-xs;
   }
 
   .show-all-time-series {
@@ -268,7 +264,7 @@
   position: relative;
   overflow: hidden;
   background: none;
-  margin: $panel-margin / 2;
+  margin: $space-xs;
 }
 
 .explore-panel__loader--active:after {
@@ -411,7 +407,7 @@
 .ReactTable .-pagination {
   border-top: none;
   box-shadow: none;
-  margin-top: $panel-margin;
+  margin-top: $space-s;
 }
 .ReactTable .-pagination .-btn {
   color: $blue;
@@ -452,7 +448,7 @@
 // TODO Experimental
 
 .cheat-sheet-item {
-  margin: 2 * $panel-margin 0;
+  margin: $space-l 0;
   width: 50%;
 }
 
@@ -461,6 +457,6 @@
 }
 
 .cheat-sheet-item__expression {
-  margin: $panel-margin/2 0;
+  margin: $space-xs 0;
   cursor: pointer;
 }

From fae2f54530d5d1b47cedd6a98ad43df47e3db73b Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Mon, 11 Mar 2019 15:38:10 +0100
Subject: [PATCH 12/32] fixed minor misstake with dashboard padding

---
 packages/grafana-ui/src/themes/_variables.scss.tmpl.ts | 2 +-
 public/sass/_variables.generated.scss                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 11b76f1790c..5b23f3d7004 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -212,7 +212,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 $side-menu-width: 60px;
 
 // dashboard
-$dashboard-padding: 20 * 2;
+$dashboard-padding: 10px * 2;
 $panel-horizontal-padding: 10;
 $panel-vertical-padding: 5;
 $panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index f28eb4e4f31..d003cd37d8b 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -215,7 +215,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 $side-menu-width: 60px;
 
 // dashboard
-$dashboard-padding: 20 * 2;
+$dashboard-padding: 10px * 2;
 $panel-horizontal-padding: 10;
 $panel-vertical-padding: 5;
 $panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;

From bf72b26c2c854ef8c6b7dbf13dc71223d676a647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 11 Mar 2019 15:44:11 +0100
Subject: [PATCH 13/32] Refactoring of multi-value datasource PR #15812

---
 .../app/features/panel/metrics_panel_ctrl.ts  | 21 +------------------
 public/app/features/plugins/datasource_srv.ts | 15 ++++++-------
 2 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index 92412263f73..3e217369b15 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -79,28 +79,9 @@ class MetricsPanelCtrl extends PanelCtrl {
     delete this.error;
     this.loading = true;
 
-    // set "mydatasource" to whatever the panel has defined
-    let mydatasource = this.panel.datasource;
-    let datasourceVarName = '';
-
-    // look for data source variables
-    for (let i = 0; i < this.templateSrv.variables.length; i++) {
-      const variable = this.templateSrv.variables[i];
-      if (variable.type !== 'datasource') {
-        continue;
-      }
-
-      datasourceVarName = variable.name;
-    }
-
-    // if a data source variable was found, use its value
-    if (datasourceVarName !== '' && this.panel.scopedVars && this.panel.scopedVars[datasourceVarName]) {
-      mydatasource = this.panel.scopedVars[datasourceVarName].value;
-    }
-
     // load datasource service
     this.datasourceSrv
-      .get(mydatasource)
+      .get(this.panel.datasource, this.panel.scopedVars)
       .then(this.updateTimeRange.bind(this))
       .then(this.issueQueries.bind(this))
       .then(this.handleQueryResult.bind(this))
diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts
index aca87d8c63b..a98ac99eaf1 100644
--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -7,7 +7,7 @@ import config from 'app/core/config';
 import { importPluginModule } from './plugin_loader';
 
 // Types
-import { DataSourceApi, DataSourceSelectItem } from '@grafana/ui/src/types';
+import { DataSourceApi, DataSourceSelectItem, ScopedVars } from '@grafana/ui/src/types';
 
 export class DatasourceSrv {
   datasources: { [name: string]: DataSourceApi };
@@ -21,12 +21,17 @@ export class DatasourceSrv {
     this.datasources = {};
   }
 
-  get(name?: string): Promise<DataSourceApi> {
+  get(name?: string, scopedVars?: ScopedVars): Promise<DataSourceApi> {
     if (!name) {
       return this.get(config.defaultDatasource);
     }
 
-    name = this.templateSrv.replace(name);
+    name = this.templateSrv.replace(name, scopedVars, (value, variable) => {
+      if (Array.isArray(value)) {
+        return value[0];
+      }
+      return value;
+    });
 
     if (name === 'default') {
       return this.get(config.defaultDatasource);
@@ -40,10 +45,6 @@ export class DatasourceSrv {
   }
 
   loadDatasource(name: string): Promise<DataSourceApi> {
-    // if there are multiple datasources provided, just use the first one
-    const re = /{([^,}]+).*/;
-    name = name.replace(re, '$1');
-
     const dsConfig = config.datasources[name];
     if (!dsConfig) {
       return this.$q.reject({ message: 'Datasource named ' + name + ' was not found' });

From abb8e71fdc99f283018fab8e23d5ba89445d4dca Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 11 Mar 2019 17:59:59 +0300
Subject: [PATCH 14/32] heatmap: able to reverse Y buckets order, #15683

---
 public/app/plugins/panel/heatmap/heatmap_ctrl.ts         | 9 +++++++--
 .../app/plugins/panel/heatmap/partials/axes_editor.html  | 5 +++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 33d4511f18e..329acbd7ee4 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -34,6 +34,7 @@ const panelDefaults = {
   },
   dataFormat: 'timeseries',
   yBucketBound: 'auto',
+  reverseYBuckets: false,
   xAxis: {
     show: true,
   },
@@ -108,7 +109,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   selectionActivated: boolean;
   unitFormats: any;
   data: any;
-  series: any;
+  series: any[];
   timeSrv: any;
   dataWarning: any;
   decimals: number;
@@ -225,8 +226,12 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
       this.series.sort(sortSeriesByLabel);
     }
 
+    if (this.panel.reverseYBuckets) {
+      this.series.reverse();
+    }
+
     // Convert histogram to heatmap. Each histogram bucket represented by the series which name is
-    // a top (or bottom, depends of datasource) bucket bound. Further, these values will be used as X axis labels.
+    // a top (or bottom, depends of datasource) bucket bound. Further, these values will be used as Y axis labels.
     bucketsData = histogramToHeatmap(this.series);
 
     tsBuckets = _.map(this.series, 'label');
diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html
index 0b12ac52e24..0327ee87251 100644
--- a/public/app/plugins/panel/heatmap/partials/axes_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html
@@ -40,6 +40,11 @@
         </select>
       </div>
     </div>
+    <gf-form-switch ng-if="ctrl.panel.dataFormat == 'tsbuckets'"
+      class="gf-form" label-class="width-8"
+      label="Reverse order"
+      checked="ctrl.panel.reverseYBuckets" on-change="ctrl.refresh()">
+    </gf-form-switch>
   </div>
 
   <div class="section gf-form-group" ng-if="ctrl.panel.dataFormat == 'timeseries'">

From aeb35534914faea3b39778dcf5ab36de514a2ca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 11 Mar 2019 18:36:49 +0100
Subject: [PATCH 15/32] Added scopedVars argument in datasourceSrv.get in
 DataPanel

---
 public/app/features/dashboard/dashgrid/DataPanel.tsx | 2 +-
 public/app/features/plugins/datasource_srv.ts        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 09864d85960..82d94669cd6 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -116,7 +116,7 @@ export class DataPanel extends Component<Props, State> {
     this.setState({ loading: LoadingState.Loading });
 
     try {
-      const ds = await this.dataSourceSrv.get(datasource);
+      const ds = await this.dataSourceSrv.get(datasource, scopedVars);
 
       // TODO interpolate variables
       const minInterval = this.props.minInterval || ds.interval;
diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts
index a98ac99eaf1..fde17ba8f48 100644
--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -26,6 +26,7 @@ export class DatasourceSrv {
       return this.get(config.defaultDatasource);
     }
 
+    // Interpolation here is to support template variable in data source selection
     name = this.templateSrv.replace(name, scopedVars, (value, variable) => {
       if (Array.isArray(value)) {
         return value[0];

From 4ad5e1595b50332232e4c01f0be1e25835f6b346 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Mon, 11 Mar 2019 21:07:10 -0700
Subject: [PATCH 16/32] remove kbn test

---
 public/app/core/specs/kbn.test.ts | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 public/app/core/specs/kbn.test.ts

diff --git a/public/app/core/specs/kbn.test.ts b/public/app/core/specs/kbn.test.ts
deleted file mode 100644
index c97e2e1101a..00000000000
--- a/public/app/core/specs/kbn.test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import kbn from '../utils/kbn';
-
-describe('stringToJsRegex', () => {
-  it('should parse the valid regex value', () => {
-    const output = kbn.stringToJsRegex('/validRegexp/');
-    expect(output).toBeInstanceOf(RegExp);
-  });
-
-  it('should throw error on invalid regex value', () => {
-    const input = '/etc/hostname';
-    expect(() => {
-      kbn.stringToJsRegex(input);
-    }).toThrow();
-  });
-});

From 204d21abbe1d40f83fd3e2158a1f722979f1434b Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 08:01:20 +0100
Subject: [PATCH 17/32] removed headings-margin-bottom variable

---
 packages/grafana-ui/src/themes/_variables.scss.tmpl.ts | 1 -
 public/sass/_variables.generated.scss                  | 1 -
 public/sass/base/_type.scss                            | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 5b23f3d7004..f5272e6ecc2 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -111,7 +111,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default;
 $font-size-h5: ${theme.typography.heading.h5} !default;
 $font-size-h6: ${theme.typography.heading.h6} !default;
 
-$headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-font-weight: ${theme.typography.weight.normal} !default;
 $headings-line-height: ${theme.typography.lineHeight.s} !default;
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index d003cd37d8b..5008c94493a 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -114,7 +114,6 @@ $font-size-h4: 18px !default;
 $font-size-h5: 16px !default;
 $font-size-h6: 14px !default;
 
-$headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-font-weight: 400 !default;
 $headings-line-height: 1.1 !default;
diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss
index ab4fbc33a55..3cb7acb08f0 100644
--- a/public/sass/base/_type.scss
+++ b/public/sass/base/_type.scss
@@ -109,7 +109,7 @@ h6,
 .h4,
 .h5,
 .h6 {
-  margin-bottom: $headings-margin-bottom;
+  margin-bottom: $space-s;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;

From a418697453ae33c655d684db4eab3df063d7c986 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 08:10:31 +0100
Subject: [PATCH 18/32] s -> sm, m -> md, l -> lg

---
 .../src/themes/_variables.scss.tmpl.ts        |  6 ++---
 .../AddPanelWidget/_AddPanelWidget.scss       |  8 +++----
 public/sass/_variables.generated.scss         |  6 ++---
 public/sass/components/_add_data_source.scss  |  4 ++--
 public/sass/components/_cards.scss            | 22 +++++++++----------
 .../sass/components/_dashboard_settings.scss  |  6 ++---
 public/sass/components/_sidemenu.scss         |  4 ++--
 7 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 531f06e1153..bf6a5fb9c79 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: ${theme.spacing.xs} !default;
-$space-s: ${theme.spacing.s} !default;
-$space-m: ${theme.spacing.m} !default;
-$space-l: ${theme.spacing.l} !default;
+$space-sm: ${theme.spacing.s} !default;
+$space-md: ${theme.spacing.m} !default;
+$space-lg: ${theme.spacing.l} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
index 6d6bba7e1eb..941e36c5e33 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
@@ -20,7 +20,7 @@
 
   .gicon {
     font-size: 30px;
-    margin-right: $space-m;
+    margin-right: $space-md;
   }
 
   &:hover {
@@ -36,12 +36,12 @@
 }
 
 .add-panel-widget__link {
-  margin: 0 $space-s;
+  margin: 0 $space-sm;
   width: 154px;
 }
 
 .add-panel-widget__icon {
-  margin-bottom: $space-s;
+  margin-bottom: $space-sm;
 
   .gicon {
     color: white;
@@ -62,7 +62,7 @@
 
 .add-panel-widget__create {
   display: inherit;
-  margin-bottom: $space-l;
+  margin-bottom: $space-lg;
   // this is to have the big button appear centered
   margin-top: 55px;
 }
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index ca563e6dd97..b43345127e6 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -21,9 +21,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: 4px !default;
-$space-s: 8px !default;
-$space-m: 16px !default;
-$space-l: 24px !default;
+$space-sm: 8px !default;
+$space-md: 16px !default;
+$space-lg: 24px !default;
 $space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss
index 2df78b0ed9e..4046be2a723 100644
--- a/public/sass/components/_add_data_source.scss
+++ b/public/sass/components/_add_data_source.scss
@@ -7,7 +7,7 @@
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $space-l;
+  margin-bottom: $space-lg;
 }
 
 .add-data-source-grid {
@@ -41,6 +41,6 @@
 }
 
 .add-data-source-grid-item-logo {
-  margin: 0 $space-m;
+  margin: 0 $space-md;
   width: 55px;
 }
diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss
index ff694d607c8..58d4b1ab5d2 100644
--- a/public/sass/components/_cards.scss
+++ b/public/sass/components/_cards.scss
@@ -1,7 +1,7 @@
 .layout-selector {
   @include clearfix();
 
-  margin-left: $space-m;
+  margin-left: $space-md;
   text-align: right;
 
   button {
@@ -9,7 +9,7 @@
     color: $text-color-weak;
     box-shadow: $card-shadow;
     border: none;
-    padding: $space-s;
+    padding: $space-sm;
     line-height: 1;
     font-size: 130%;
     float: right;
@@ -50,7 +50,7 @@
   height: 100%;
   background: $card-background;
   box-shadow: $card-shadow;
-  padding: $space-m;
+  padding: $space-md;
   border-radius: 4px;
 
   &:hover {
@@ -58,7 +58,7 @@
   }
 
   .label-tag {
-    margin-left: $space-s;
+    margin-left: $space-sm;
     font-size: 11px;
     padding: 2px 6px;
   }
@@ -81,7 +81,7 @@
 }
 
 .card-item-header {
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
 }
 
 .card-item-type {
@@ -103,7 +103,7 @@
 }
 
 .card-item-label {
-  margin-left: $space-s;
+  margin-left: $space-sm;
 }
 
 .card-item-sub-name {
@@ -116,7 +116,7 @@
 .card-item-sub-name--header {
   color: $text-color-weak;
   text-transform: uppercase;
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
   font-size: $font-size-sm;
   font-weight: bold;
 }
@@ -129,7 +129,7 @@
   .card-item-notice {
     font-size: $font-size-sm;
     display: inline-block;
-    margin-left: $space-m;
+    margin-left: $space-md;
   }
 
   .card-item-header-action {
@@ -138,7 +138,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 $space-m $space-m 0;
+    padding: 0 $space-md $space-md 0;
   }
 
   .card-item-wrapper--clickable {
@@ -146,7 +146,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $space-m $space-m 0;
+    margin: 0 $space-md $space-md 0;
     height: 6rem;
 
     img {
@@ -205,7 +205,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $space-m 0 0;
+    margin: 0 $space-md 0 0;
     img {
       width: 48px;
     }
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index 19c2f49d814..173ab1a3935 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -41,7 +41,7 @@
   font-size: $font-size-h3;
   padding-right: 60px;
   white-space: nowrap;
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
 
   i {
     font-size: 25px;
@@ -92,10 +92,10 @@
   margin: 40px $space-xl 0 0;
 
   button {
-    margin-bottom: $space-s;
+    margin-bottom: $space-sm;
   }
 }
 
 .dashboard-settings__json-save-button {
-  margin-top: $space-m;
+  margin-top: $space-md;
 }
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index c5bcf0ee8dd..c48a34651c0 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
       position: unset;
       width: 100%;
       float: none;
-      margin-top: $space-s;
-      margin-bottom: $space-s;
+      margin-top: $space-sm;
+      margin-bottom: $space-sm;
 
       > li > a {
         padding-left: 15px;

From 4e22918010d33ac8d893562f51edb95accb27f8b Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 12 Mar 2019 10:23:07 +0300
Subject: [PATCH 19/32] heatmap: fix prometheus buckets sorting, closes #15637

---
 .../plugins/datasource/prometheus/result_transformer.ts  | 9 +++++----
 public/app/plugins/panel/heatmap/heatmap_ctrl.ts         | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/result_transformer.ts b/public/app/plugins/datasource/prometheus/result_transformer.ts
index c3fbd7ee1d7..b0fab2564eb 100644
--- a/public/app/plugins/datasource/prometheus/result_transformer.ts
+++ b/public/app/plugins/datasource/prometheus/result_transformer.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import TableModel from 'app/core/table_model';
+import { TimeSeries } from '@grafana/ui';
 
 export class ResultTransformer {
   constructor(private templateSrv) {}
@@ -18,10 +19,10 @@ export class ResultTransformer {
       ];
     } else if (prometheusResult && options.format === 'heatmap') {
       let seriesList = [];
-      prometheusResult.sort(sortSeriesByLabel);
       for (const metricData of prometheusResult) {
         seriesList.push(this.transformMetricData(metricData, options, options.start, options.end));
       }
+      seriesList.sort(sortSeriesByLabel);
       seriesList = this.transformToHistogramOverTime(seriesList);
       return seriesList;
     } else if (prometheusResult) {
@@ -197,13 +198,13 @@ export class ResultTransformer {
   }
 }
 
-function sortSeriesByLabel(s1, s2): number {
+function sortSeriesByLabel(s1: TimeSeries, s2: TimeSeries): number {
   let le1, le2;
 
   try {
     // fail if not integer. might happen with bad queries
-    le1 = parseHistogramLabel(s1.metric.le);
-    le2 = parseHistogramLabel(s2.metric.le);
+    le1 = parseHistogramLabel(s1.target);
+    le2 = parseHistogramLabel(s2.target);
   } catch (err) {
     console.log(err);
     return 0;
diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 71e059a5750..772eabd131c 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -97,7 +97,7 @@ const colorSchemes = [
   { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'dark' },
 ];
 
-const dsSupportHistogramSort = ['prometheus', 'elasticsearch'];
+const dsSupportHistogramSort = ['elasticsearch'];
 
 export class HeatmapCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';

From d47f6e5bb335dce664659fa4837c92a6daf63d34 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 08:34:55 +0100
Subject: [PATCH 20/32] s -> sm, m -> md, l -> lg

---
 public/sass/components/_page_loader.scss  |  2 +-
 public/sass/components/_panel_editor.scss |  4 ++--
 public/sass/components/_panel_logs.scss   |  2 +-
 public/sass/components/_submenu.scss      |  2 +-
 public/sass/pages/_explore.scss           | 12 ++++++------
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/sass/components/_page_loader.scss b/public/sass/components/_page_loader.scss
index 6fb5ea8ffb2..0a3eac40a0c 100644
--- a/public/sass/components/_page_loader.scss
+++ b/public/sass/components/_page_loader.scss
@@ -7,7 +7,7 @@
 
   &__spinner {
     font-size: 32px;
-    margin-bottom: $space-s;
+    margin-bottom: $space-sm;
   }
 
   &__text {
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index 81d6e4e9e17..8acf98be1b2 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -21,7 +21,7 @@
 }
 
 .panel-editor-container__editor {
-  margin-top: $space-l;
+  margin-top: $space-lg;
   display: flex;
   flex-direction: row;
   flex: 1 1 0;
@@ -80,7 +80,7 @@
   }
 
   .submenu-controls {
-    padding: 0 $dashboard-padding $space-s $dashboard-padding;
+    padding: 0 $dashboard-padding $space-sm $dashboard-padding;
   }
 
   .panel-editor-container__panel {
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index edb72b829e2..7c36a751572 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px;
   padding: $panel-padding;
   padding-top: 10px;
   border-radius: $border-radius;
-  margin: $space-m 0 $space-s;
+  margin: $space-md 0 $space-sm;
   border: $panel-border;
   flex-direction: column;
 }
diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss
index a70b1e46676..514aa44525e 100644
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@@ -4,7 +4,7 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-  padding: 0 0 $space-s 0;
+  padding: 0 0 $space-sm 0;
 }
 
 .annotation-disabled,
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index a68d7f1dcb6..d3b1c291547 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -197,7 +197,7 @@
 }
 
 .explore-panel {
-  margin-top: $space-s;
+  margin-top: $space-sm;
 }
 
 .explore-panel__body {
@@ -216,20 +216,20 @@
 
 .explore-panel__header-label {
   font-weight: 500;
-  margin-right: $space-s;
+  margin-right: $space-sm;
   font-size: $font-size-h6;
   box-shadow: $text-shadow-faint;
 }
 
 .explore-panel__header-buttons {
-  margin-right: $space-s;
+  margin-right: $space-sm;
   font-size: $font-size-lg;
   line-height: $font-size-h6;
 }
 
 .time-series-disclaimer {
   width: 300px;
-  margin: $space-s auto;
+  margin: $space-sm auto;
   padding: 10px 0;
   border-radius: $border-radius;
   text-align: center;
@@ -407,7 +407,7 @@
 .ReactTable .-pagination {
   border-top: none;
   box-shadow: none;
-  margin-top: $space-s;
+  margin-top: $space-sm;
 }
 .ReactTable .-pagination .-btn {
   color: $blue;
@@ -448,7 +448,7 @@
 // TODO Experimental
 
 .cheat-sheet-item {
-  margin: $space-l 0;
+  margin: $space-lg 0;
   width: 50%;
 }
 

From 9ee2a08def0647ea22f57b9dc1e4a7ae43d2b216 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 12 Mar 2019 10:59:55 +0300
Subject: [PATCH 21/32] heatmap: able to hide buckets with zero value #12080

---
 .../app/plugins/panel/heatmap/heatmap_ctrl.ts |  5 ++--
 .../panel/heatmap/heatmap_data_converter.ts   | 28 +++++++++++++++----
 .../heatmap/partials/display_editor.html      |  4 +++
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 71e059a5750..9f9c65e5796 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -55,6 +55,7 @@ const panelDefaults = {
     showHistogram: false,
   },
   highlightCards: true,
+  hideZeroBuckets: false,
 };
 
 const colorModes = ['opacity', 'spectrum'];
@@ -204,7 +205,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
       yBucketSize = 1;
     }
 
-    const { cards, cardStats } = convertToCards(bucketsData);
+    const { cards, cardStats } = convertToCards(bucketsData, this.panel.hideZeroBuckets);
 
     this.data = {
       buckets: bucketsData,
@@ -246,7 +247,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     // Always let yBucketSize=1 in 'tsbuckets' mode
     yBucketSize = 1;
 
-    const { cards, cardStats } = convertToCards(bucketsData);
+    const { cards, cardStats } = convertToCards(bucketsData, this.panel.hideZeroBuckets);
 
     this.data = {
       buckets: bucketsData,
diff --git a/public/app/plugins/panel/heatmap/heatmap_data_converter.ts b/public/app/plugins/panel/heatmap/heatmap_data_converter.ts
index 99b61be40dc..07960f68ae3 100644
--- a/public/app/plugins/panel/heatmap/heatmap_data_converter.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_data_converter.ts
@@ -93,25 +93,43 @@ function parseHistogramLabel(label: string): number {
   return value;
 }
 
+interface HeatmapCard {
+  x: number;
+  y: number;
+  yBounds: {
+    top: number | null;
+    bottom: number | null;
+  };
+  values: number[];
+  count: number;
+}
+
+interface HeatmapCardStats {
+  min: number;
+  max: number;
+}
+
 /**
  * Convert buckets into linear array of "cards" - objects, represented heatmap elements.
  * @param  {Object} buckets
- * @return {Array}          Array of "card" objects
+ * @return {Object}          Array of "card" objects and stats
  */
-function convertToCards(buckets) {
+function convertToCards(buckets: any, hideZero = false): { cards: HeatmapCard[]; cardStats: HeatmapCardStats } {
   let min = 0,
     max = 0;
-  const cards = [];
+  const cards: HeatmapCard[] = [];
   _.forEach(buckets, xBucket => {
     _.forEach(xBucket.buckets, yBucket => {
-      const card = {
+      const card: HeatmapCard = {
         x: xBucket.x,
         y: yBucket.y,
         yBounds: yBucket.bounds,
         values: yBucket.values,
         count: yBucket.count,
       };
-      cards.push(card);
+      if (!hideZero || card.count !== 0) {
+        cards.push(card);
+      }
 
       if (cards.length === 1) {
         min = yBucket.count;
diff --git a/public/app/plugins/panel/heatmap/partials/display_editor.html b/public/app/plugins/panel/heatmap/partials/display_editor.html
index 929cf1fe7d4..7b38061e2ff 100644
--- a/public/app/plugins/panel/heatmap/partials/display_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/display_editor.html
@@ -63,6 +63,10 @@
 
   <div class="section gf-form-group">
     <h5 class="section-heading">Buckets</h5>
+    <gf-form-switch class="gf-form" label-class="width-8"
+      label="Hide zero"
+      checked="ctrl.panel.hideZeroBuckets" on-change="ctrl.render()">
+    </gf-form-switch>
     <div class="gf-form">
       <label class="gf-form-label width-8">Space</label>
       <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardPadding" ng-change="ctrl.refresh()" ng-model-onblur>

From 7a155282232550123ebef823f5c1b8d9e2530a64 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 12:30:34 +0100
Subject: [PATCH 22/32] removed gf-form-margin variable and replaced with
 space- variables where it was used

---
 .../src/components/FormField/_FormField.scss    |  2 +-
 .../src/components/Select/_Select.scss          |  2 +-
 .../src/themes/_variables.scss.tmpl.ts          |  2 +-
 packages/grafana-ui/src/themes/default.ts       |  1 +
 packages/grafana-ui/src/types/theme.ts          |  1 +
 public/sass/_variables.generated.scss           |  2 +-
 public/sass/base/_type.scss                     |  2 +-
 public/sass/components/_gf-form.scss            | 17 ++++++++---------
 public/sass/components/_infobox.scss            |  2 +-
 public/sass/utils/_widths.scss                  |  6 +++---
 10 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss
index 36955e2fca6..0c69e67f82a 100644
--- a/packages/grafana-ui/src/components/FormField/_FormField.scss
+++ b/packages/grafana-ui/src/components/FormField/_FormField.scss
@@ -1,5 +1,5 @@
 .form-field {
-  margin-bottom: $gf-form-margin;
+  margin-bottom: $space-xxs;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/packages/grafana-ui/src/components/Select/_Select.scss b/packages/grafana-ui/src/components/Select/_Select.scss
index bc18ed9d369..f0270b1422e 100644
--- a/packages/grafana-ui/src/components/Select/_Select.scss
+++ b/packages/grafana-ui/src/components/Select/_Select.scss
@@ -3,7 +3,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 @mixin select-control() {
   width: 100%;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   @include border-radius($input-border-radius-sm);
   background-color: $input-bg;
 }
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 4e4031a0414..f56b4e6d90d 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -17,6 +17,7 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xxs: ${theme.spacing.xxs} !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-sm: ${theme.spacing.s} !default;
 $space-md: ${theme.spacing.m} !default;
@@ -164,7 +165,6 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 6559f6a8fe8..4fb11a213aa 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -44,6 +44,7 @@ const theme: GrafanaThemeCommons = {
   },
   spacing: {
     d: '14px',
+    xxs: '2px',
     xs: '4px',
     s: '8px',
     m: '16px',
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 469408942d7..6c1e7912850 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -49,6 +49,7 @@ export interface GrafanaThemeCommons {
   };
   spacing: {
     d: string;
+    xxs: string;
     xs: string;
     s: string;
     m: string;
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 63212141bad..75d033fcf87 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -20,6 +20,7 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xxs: 2px !default;
 $space-xs: 4px !default;
 $space-sm: 8px !default;
 $space-md: 16px !default;
@@ -167,7 +168,6 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss
index 3cb7acb08f0..6cf32687188 100644
--- a/public/sass/base/_type.scss
+++ b/public/sass/base/_type.scss
@@ -109,7 +109,7 @@ h6,
 .h4,
 .h5,
 .h6 {
-  margin-bottom: $space-s;
+  margin-bottom: $space-sm;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index c341c686143..2eccdd52e8b 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -1,8 +1,7 @@
-$gf-form-margin: 3px;
 $input-border: 1px solid $input-border-color;
 
 .gf-form {
-  margin-bottom: $gf-form-margin;
+  margin-bottom: $space-xxs;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -33,7 +32,7 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form--has-input-icon {
   position: relative;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
 
   .gf-form-input-icon {
     position: absolute;
@@ -82,7 +81,7 @@ $input-border: 1px solid $input-border-color;
   align-content: flex-start;
 
   .gf-form + .gf-form {
-    margin-left: $gf-form-margin;
+    margin-left: $space-xs;
   }
 
   &--nowrap {
@@ -147,14 +146,14 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-label + .gf-form-label {
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
 }
 
 .gf-form-pre {
   display: block;
   flex-grow: 1;
   margin: 0;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   border: $input-btn-border-width solid transparent;
   border-left: none;
   @include border-radius($label-border-radius-sm);
@@ -336,7 +335,7 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form-btn {
   padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   line-height: $input-line-height;
   font-size: $font-size-sm;
 
@@ -354,7 +353,7 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-dropdown-typeahead {
-  margin-right: $gf-form-margin;
+  //margin-right: $space-xs; ?
   position: relative;
 
   &::after {
@@ -391,7 +390,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &--header {
-    margin-bottom: $gf-form-margin;
+    margin-bottom: $space-xxs;
   }
 
   &--no-padding {
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index 6f7a7bf86dc..16e07c68b20 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
   border-top: 3px solid $info-box-border-color;
   margin-bottom: $spacer;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   box-shadow: $card-shadow;
   flex-grow: 1;
 
diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss
index b1213e6ea60..0770ba19fc3 100644
--- a/public/sass/utils/_widths.scss
+++ b/public/sass/utils/_widths.scss
@@ -8,20 +8,20 @@
 // widths
 @for $i from 1 through 30 {
   .width-#{$i} {
-    width: ($spacer * $i) - $gf-form-margin !important;
+    width: ($spacer * $i) - $space-xs !important;
   }
 }
 
 @for $i from 1 through 30 {
   .max-width-#{$i} {
-    max-width: ($spacer * $i) - $gf-form-margin !important;
+    max-width: ($spacer * $i) - $space-xs !important;
     flex-grow: 1;
   }
 }
 
 @for $i from 1 through 30 {
   .min-width-#{$i} {
-    min-width: ($spacer * $i) - $gf-form-margin !important;
+    min-width: ($spacer * $i) - $space-xs !important;
   }
 }
 

From c54f2912e41bcce22bcac56316e21466a9a538ba Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 13:01:22 +0100
Subject: [PATCH 23/32] renamed default variables: s -> sm, m -> md, l -> lg

---
 .../src/themes/_variables.scss.tmpl.ts        | 24 +++++++--------
 packages/grafana-ui/src/themes/default.ts     | 30 +++++++++----------
 packages/grafana-ui/src/types/theme.ts        | 30 +++++++++----------
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index bf6a5fb9c79..c07f642fb1d 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: ${theme.spacing.xs} !default;
-$space-sm: ${theme.spacing.s} !default;
-$space-md: ${theme.spacing.m} !default;
-$space-lg: ${theme.spacing.l} !default;
+$space-sm: ${theme.spacing.sm} !default;
+$space-md: ${theme.spacing.md} !default;
+$space-lg: ${theme.spacing.lg} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
@@ -51,7 +51,7 @@ $spacers: (
     ),
   ),
 ) !default;
-$border-width: ${theme.border.width.s} !default;
+$border-width: ${theme.border.width.sm} !default;
 
 // Grid breakpoints
 //
@@ -60,9 +60,9 @@ $border-width: ${theme.border.width.s} !default;
 
 $grid-breakpoints: (
   xs: ${theme.breakpoints.xs},
-  sm: ${theme.breakpoints.s},
-  md: ${theme.breakpoints.m},
-  lg: ${theme.breakpoints.l},
+  sm: ${theme.breakpoints.sm},
+  md: ${theme.breakpoints.md},
+  lg: ${theme.breakpoints.lg},
   xl: ${theme.breakpoints.xl},
 ) !default;
 
@@ -96,12 +96,12 @@ $font-family-base: $font-family-sans-serif !default;
 $font-size-root: ${theme.typography.size.root} !default;
 $font-size-base: ${theme.typography.size.base} !default;
 
-$font-size-lg: ${theme.typography.size.l} !default;
-$font-size-md: ${theme.typography.size.m} !default;
-$font-size-sm: ${theme.typography.size.s} !default;
+$font-size-lg: ${theme.typography.size.lg} !default;
+$font-size-md: ${theme.typography.size.md} !default;
+$font-size-sm: ${theme.typography.size.sm} !default;
 $font-size-xs: ${theme.typography.size.xs} !default;
 
-$line-height-base: ${theme.typography.lineHeight.l} !default;
+$line-height-base: ${theme.typography.lineHeight.lg} !default;
 $font-weight-semi-bold: ${theme.typography.weight.semibold};
 
 $font-size-h1: ${theme.typography.heading.h1} !default;
@@ -114,7 +114,7 @@ $font-size-h6: ${theme.typography.heading.h6} !default;
 $headings-margin-bottom: ($spacer / 2) !default;
 $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-font-weight: ${theme.typography.weight.normal} !default;
-$headings-line-height: ${theme.typography.lineHeight.s} !default;
+$headings-line-height: ${theme.typography.lineHeight.sm} !default;
 
 $hr-border-width: $border-width !default;
 $dt-font-weight: bold !default;
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 6559f6a8fe8..76de196e6b8 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -11,9 +11,9 @@ const theme: GrafanaThemeCommons = {
       root: '14px',
       base: '13px',
       xs: '10px',
-      s: '12px',
-      m: '14px',
-      l: '18px',
+      sm: '12px',
+      md: '14px',
+      lg: '18px',
     },
     heading: {
       h1: '28px',
@@ -30,35 +30,35 @@ const theme: GrafanaThemeCommons = {
     },
     lineHeight: {
       xs: 1,
-      s: 1.1,
-      m: 4 / 3,
-      l: 1.5,
+      sm: 1.1,
+      md: 4 / 3,
+      lg: 1.5,
     },
   },
   breakpoints: {
     xs: '0',
-    s: '544px',
-    m: '768px',
-    l: '992px',
+    sm: '544px',
+    md: '768px',
+    lg: '992px',
     xl: '1200px',
   },
   spacing: {
     d: '14px',
     xs: '4px',
-    s: '8px',
-    m: '16px',
-    l: '24px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
     xl: '32px',
     gutter: '30px',
   },
   border: {
     radius: {
       xs: '2px',
-      s: '3px',
-      m: '5px',
+      sm: '3px',
+      md: '5px',
     },
     width: {
-      s: '1px',
+      sm: '1px',
     },
   },
 };
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 469408942d7..54b2b5e7329 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -8,9 +8,9 @@ export interface GrafanaThemeCommons {
   // TODO: not sure if should be a part of theme
   breakpoints: {
     xs: string;
-    s: string;
-    m: string;
-    l: string;
+    sm: string;
+    md: string;
+    lg: string;
     xl: string;
   };
   typography: {
@@ -22,9 +22,9 @@ export interface GrafanaThemeCommons {
       root: string;
       base: string;
       xs: string;
-      s: string;
-      m: string;
-      l: string;
+      sm: string;
+      md: string;
+      lg: string;
     };
     weight: {
       light: number;
@@ -33,9 +33,9 @@ export interface GrafanaThemeCommons {
     };
     lineHeight: {
       xs: number; //1
-      s: number; //1.1
-      m: number; // 4/3
-      l: number; // 1.5
+      sm: number; //1.1
+      md: number; // 4/3
+      lg: number; // 1.5
     };
     // TODO: Refactor to use size instead of custom defs
     heading: {
@@ -50,20 +50,20 @@ export interface GrafanaThemeCommons {
   spacing: {
     d: string;
     xs: string;
-    s: string;
-    m: string;
-    l: string;
+    sm: string;
+    md: string;
+    lg: string;
     xl: string;
     gutter: string;
   };
   border: {
     radius: {
       xs: string;
-      s: string;
-      m: string;
+      sm: string;
+      md: string;
     };
     width: {
-      s: string;
+      sm: string;
     };
   };
 }

From dc98fb5e82498ed66f95e273af46e87c6c4c4703 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 14:24:48 +0100
Subject: [PATCH 24/32] added two new variables in default theme for panel
 padding, replaced panelhorizontalpadding and variables.panelverticalpadding
 with new variables

---
 packages/grafana-ui/src/themes/_variables.scss.tmpl.ts    | 5 -----
 packages/grafana-ui/src/themes/default.ts                 | 4 ++++
 packages/grafana-ui/src/types/theme.ts                    | 4 ++++
 .../features/dashboard/containers/DashboardPage.test.tsx  | 5 -----
 .../app/features/dashboard/dashgrid/PanelChrome.test.tsx  | 5 -----
 public/app/features/dashboard/dashgrid/PanelChrome.tsx    | 6 +++---
 public/sass/_variables.generated.scss                     | 5 -----
 public/sass/_variables.generated.scss.d.ts                | 8 --------
 8 files changed, 11 insertions(+), 31 deletions(-)
 delete mode 100644 public/sass/_variables.generated.scss.d.ts

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index bf6a5fb9c79..a15d5de594d 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -248,9 +248,4 @@ $external-services: (
     icon: '',
   ),
 ) !default;
-
-:export {
-  panelhorizontalpadding: $panel-horizontal-padding;
-  panelverticalpadding: $panel-vertical-padding;
-}
 `;
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 6559f6a8fe8..c9b66c74360 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -61,6 +61,10 @@ const theme: GrafanaThemeCommons = {
       s: '1px',
     },
   },
+  panelPadding: {
+    horizontal: 10,
+    vertical: 5,
+  },
 };
 
 export default theme;
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 469408942d7..43db0ef79ad 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -66,6 +66,10 @@ export interface GrafanaThemeCommons {
       s: string;
     };
   };
+  panelPadding: {
+    horizontal: number;
+    vertical: number;
+  };
 }
 
 export interface GrafanaTheme extends GrafanaThemeCommons {
diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx
index 1095effcfa2..e3b9e1ca77a 100644
--- a/public/app/features/dashboard/containers/DashboardPage.test.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx
@@ -6,11 +6,6 @@ import { cleanUpDashboard } from '../state/actions';
 import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
 import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
 
-jest.mock('sass/_variables.generated.scss', () => ({
-  panelhorizontalpadding: 10,
-  panelVerticalPadding: 10,
-}));
-
 jest.mock('app/features/dashboard/components/DashboardSettings/SettingsCtrl', () => ({}));
 
 interface ScenarioContext {
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
index 7136a14a907..52bbd494f9a 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
@@ -1,10 +1,5 @@
 import { PanelChrome } from './PanelChrome';
 
-jest.mock('sass/_variables.generated.scss', () => ({
-  panelhorizontalpadding: 10,
-  panelVerticalPadding: 10,
-}));
-
 describe('PanelChrome', () => {
   let chrome: PanelChrome;
 
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 0a9d1d44ceb..deb14f130ec 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -14,6 +14,7 @@ import ErrorBoundary from '../../../core/components/ErrorBoundary/ErrorBoundary'
 import { applyPanelTimeOverrides, snapshotDataToPanelData } from 'app/features/dashboard/utils/panel';
 import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
 import { profiler } from 'app/core/profiler';
+import config from 'app/core/config';
 
 // Types
 import { DashboardModel, PanelModel } from '../state';
@@ -21,7 +22,6 @@ import { PanelPlugin } from 'app/types';
 import { DataQueryResponse, TimeRange, LoadingState, PanelData, DataQueryError } from '@grafana/ui';
 import { ScopedVars } from '@grafana/ui';
 
-import variables from 'sass/_variables.generated.scss';
 import templateSrv from 'app/features/templating/template_srv';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
@@ -160,8 +160,8 @@ export class PanelChrome extends PureComponent<Props, State> {
           panelData={panelData}
           timeRange={timeRange}
           options={panel.getOptions(plugin.exports.reactPanel.defaults)}
-          width={width - 2 * variables.panelhorizontalpadding}
-          height={height - PANEL_HEADER_HEIGHT - variables.panelverticalpadding}
+          width={width - 2 * config.theme.panelPadding.horizontal}
+          height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical}
           renderCounter={renderCounter}
           replaceVariables={this.replaceVariables}
         />
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index b43345127e6..89cafdeb1d9 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -251,8 +251,3 @@ $external-services: (
     icon: '',
   ),
 ) !default;
-
-:export {
-  panelhorizontalpadding: $panel-horizontal-padding;
-  panelverticalpadding: $panel-vertical-padding;
-}
diff --git a/public/sass/_variables.generated.scss.d.ts b/public/sass/_variables.generated.scss.d.ts
deleted file mode 100644
index 992dbb7bddf..00000000000
--- a/public/sass/_variables.generated.scss.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface GrafanaVariables {
-  panelhorizontalpadding: number;
-  panelverticalpadding: number;
-}
-
-declare const variables: GrafanaVariables;
-
-export default variables;

From c248c1f4f19702be9f92581790bb2c97920f2f68 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 12 Mar 2019 16:38:57 +0300
Subject: [PATCH 25/32] changelog: add notes about heatmap issues #15683 #14019

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 343e3ccfbb1..5483529f75e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,12 +5,15 @@
 
 ### Minor
 * **Cloudwatch**: Add AWS RDS MaximumUsedTransactionIDs metric [#15077](https://github.com/grafana/grafana/pull/15077), thx [@activeshadow](https://github.com/activeshadow)
+* **Heatmap**: `Middle` bucket bound option [#15683](https://github.com/grafana/grafana/issues/15683)
+* **Heatmap**: `Reverse order` option for changing order of buckets [#15683](https://github.com/grafana/grafana/issues/15683)
 
 ### Bug Fixes
 * **Api**: Invalid org invite code [#10506](https://github.com/grafana/grafana/issues/10506)
 * **Datasource**: Handles nil jsondata field gracefully [#14239](https://github.com/grafana/grafana/issues/14239)
 * **Gauge**: Interpolate scoped variables in repeated gauges [#15739](https://github.com/grafana/grafana/issues/15739)
 * **Datasource**: Empty user/password was not updated when updating datasources [#15608](https://github.com/grafana/grafana/pull/15608), thx [@Maddin-619](https://github.com/Maddin-619)
+* **Heatmap**: legend shows wrong colors for small values [#14019](https://github.com/grafana/grafana/issues/14019)
 
 # 6.0.1 (2019-03-06)
 

From 3e2350be87890f5d0b341619bf6b01f44f999084 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Mar 2019 14:42:36 +0100
Subject: [PATCH 26/32] POC on collecting metrics in ci process

---
 scripts/circle-metrics.sh       | 16 ++++++++++++++++
 scripts/circle-test-frontend.sh |  1 +
 2 files changed, 17 insertions(+)
 create mode 100755 scripts/circle-metrics.sh

diff --git a/scripts/circle-metrics.sh b/scripts/circle-metrics.sh
new file mode 100755
index 00000000000..a5d44a7dfc4
--- /dev/null
+++ b/scripts/circle-metrics.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --noImplicitAny true | grep -oP 'Found \K(\d+)')"
+DIRECTIVES="$(grep -r -o  directive public/app/**/*  | wc -l)"
+CONTROLLERS="${grep -r -oP \"class .*Ctrl\" public/app/**/*  | wc -l}"
+
+echo "Typescript errors: $ERROR_COUNT"
+echo "Directives: $DIRECTIVES"
+echo "Controllers: $CONTROLLERS"
+
+curl \
+  -d "{\"metrics\":{\"noImplicitAny\": $ERROR_COUNT}}" \
+  -H "Content-Type: application/json" \
+  -u ci:$CIRCLE_STATS \
+  -X POST https://stats.grafana.org/metric-receiver
+
diff --git a/scripts/circle-test-frontend.sh b/scripts/circle-test-frontend.sh
index cd42dd0b7e9..41fa9e252ee 100755
--- a/scripts/circle-test-frontend.sh
+++ b/scripts/circle-test-frontend.sh
@@ -10,5 +10,6 @@ function exit_if_fail {
     fi
 }
 
+exit_if_fail ./circle-metrics.sh
 exit_if_fail npm run prettier:check
 exit_if_fail npm run test

From 94677ba874480d83de1ac1f845666d7de695ebe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Mar 2019 14:46:38 +0100
Subject: [PATCH 27/32] Updated path to new script

---
 scripts/circle-test-frontend.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/circle-test-frontend.sh b/scripts/circle-test-frontend.sh
index 41fa9e252ee..d74565239fa 100755
--- a/scripts/circle-test-frontend.sh
+++ b/scripts/circle-test-frontend.sh
@@ -10,6 +10,6 @@ function exit_if_fail {
     fi
 }
 
-exit_if_fail ./circle-metrics.sh
+exit_if_fail ./scripts/circle-metrics.sh
 exit_if_fail npm run prettier:check
 exit_if_fail npm run test

From 9f4bca503ab838399087c9d38219b64288ea7b63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Mar 2019 15:08:46 +0100
Subject: [PATCH 28/32] Updated code stats collection

---
 scripts/circle-metrics.sh       | 17 ++++++++++++-----
 scripts/circle-test-frontend.sh |  7 ++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/scripts/circle-metrics.sh b/scripts/circle-metrics.sh
index a5d44a7dfc4..849fc0e1339 100755
--- a/scripts/circle-metrics.sh
+++ b/scripts/circle-metrics.sh
@@ -1,16 +1,23 @@
 #!/bin/bash
 
+echo "Collecting code stats (typescript errors & more)"
+
 ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --noImplicitAny true | grep -oP 'Found \K(\d+)')"
 DIRECTIVES="$(grep -r -o  directive public/app/**/*  | wc -l)"
-CONTROLLERS="${grep -r -oP \"class .*Ctrl\" public/app/**/*  | wc -l}"
+CONTROLLERS="$(grep -r -oP 'class .*Ctrl' public/app/**/*  | wc -l)"
 
 echo "Typescript errors: $ERROR_COUNT"
 echo "Directives: $DIRECTIVES"
 echo "Controllers: $CONTROLLERS"
 
 curl \
-  -d "{\"metrics\":{\"noImplicitAny\": $ERROR_COUNT}}" \
-  -H "Content-Type: application/json" \
-  -u ci:$CIRCLE_STATS \
-  -X POST https://stats.grafana.org/metric-receiver
+   -d "{\"metrics\": {
+        \"ci.code.noImplicitAny\": $ERROR_COUNT,
+        \"ci.code.directives\": $DIRECTIVES,
+        \"ci.code.controllers\": $CONTROLLERS
+      }
+    }" \
+   -H "Content-Type: application/json" \
+   -u ci:$CIRCLE_STATS_PWD \
+   -X POST https://stats.grafana.org/metric-receiver
 
diff --git a/scripts/circle-test-frontend.sh b/scripts/circle-test-frontend.sh
index d74565239fa..3366bf3d4fb 100755
--- a/scripts/circle-test-frontend.sh
+++ b/scripts/circle-test-frontend.sh
@@ -10,6 +10,11 @@ function exit_if_fail {
     fi
 }
 
-exit_if_fail ./scripts/circle-metrics.sh
 exit_if_fail npm run prettier:check
 exit_if_fail npm run test
+
+# On master also collect some and send some metrics
+branch="$(git rev-parse --abbrev-ref HEAD)"
+if [ "${branch}" == "master" ]; then
+  exit_if_fail ./scripts/circle-metrics.sh
+fi

From 25b1bec250a0719a93919fcffa6923589a36d7a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 11 Mar 2019 20:44:14 +0100
Subject: [PATCH 29/32] Typescript noAny fixes, start of a long journey

---
 package.json                                       | 1 +
 packages/grafana-ui/src/components/Gauge/Gauge.tsx | 5 ++---
 public/app/core/components/jsontree/jsontree.ts    | 4 ++--
 yarn.lock                                          | 5 +++++
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d2760bbad02..c951e5241c1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1",
+    "@types/angular": "^1.6.6",
     "@types/chalk": "^2.2.0",
     "@types/classnames": "^2.2.6",
     "@types/commander": "^2.12.2",
diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
index d04daae3dab..aa6d2a40258 100644
--- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx
+++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
@@ -30,7 +30,7 @@ const FONT_SCALE = 1;
 export class Gauge extends PureComponent<Props> {
   canvasElement: any;
 
-  static defaultProps = {
+  static defaultProps: Partial<Props> = {
     maxValue: 100,
     valueMappings: [],
     minValue: 0,
@@ -41,7 +41,6 @@ export class Gauge extends PureComponent<Props> {
     thresholds: [],
     unit: 'none',
     stat: 'avg',
-    theme: GrafanaThemeType.Dark,
   };
 
   componentDidMount() {
@@ -134,7 +133,7 @@ export class Gauge extends PureComponent<Props> {
       Math.min(dimension / 5, 100) * (formattedValue !== null ? this.getFontScale(formattedValue.length) : 1);
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    const options = {
+    const options: any = {
       series: {
         gauges: {
           gauge: {
diff --git a/public/app/core/components/jsontree/jsontree.ts b/public/app/core/components/jsontree/jsontree.ts
index 4bcb2f632c2..a101007f129 100644
--- a/public/app/core/components/jsontree/jsontree.ts
+++ b/public/app/core/components/jsontree/jsontree.ts
@@ -10,13 +10,13 @@ coreModule.directive('jsonTree', [
         startExpanded: '@',
         rootName: '@',
       },
-      link: (scope, elem) => {
+      link: (scope: any, elem) => {
         const jsonExp = new JsonExplorer(scope.object, 3, {
           animateOpen: true,
         });
 
         const html = jsonExp.render(true);
-        elem.html(html);
+        elem.replaceAll(html);
       },
     };
   },
diff --git a/yarn.lock b/yarn.lock
index 0a3513595a8..c75b8e5a57b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1514,6 +1514,11 @@
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
+"@types/angular@^1.6.6":
+  version "1.6.54"
+  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.54.tgz#f9d5a03e4da7b021a6dabe5d63e899ed4567a5bd"
+  integrity sha512-xA1FuozWXeRQ7FClUbvk8ePL+dydBeDoCWRPFTHU5+8uvVtIIfLGiHA8CMkwsbddFCYnTDVbLxG85a/HBx7LtA==
+
 "@types/chalk@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@types/chalk/-/chalk-2.2.0.tgz#b7f6e446f4511029ee8e3f43075fb5b73fbaa0ba"

From d7dc6ad3f4807b37105a47ab2ddf6407eb5a4bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Mar 2019 15:27:02 +0100
Subject: [PATCH 30/32] Fixed type issues introduced by adding angular types

---
 public/app/core/directives/give_focus.ts      |  2 +-
 .../datasources/settings/HttpSettingsCtrl.ts  |  2 +-
 public/app/features/panel/panel_directive.ts  |  4 +-
 .../stackdriver/query_filter_ctrl.ts          | 45 +++++++++----------
 .../app/plugins/panel/heatmap/color_legend.ts |  4 +-
 5 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/public/app/core/directives/give_focus.ts b/public/app/core/directives/give_focus.ts
index 4ef574ec68e..37549ad7229 100644
--- a/public/app/core/directives/give_focus.ts
+++ b/public/app/core/directives/give_focus.ts
@@ -14,7 +14,7 @@ coreModule.directive('giveFocus', () => {
         }
         setTimeout(() => {
           element.focus();
-          const domEl = element[0];
+          const domEl: any = element[0];
           if (domEl.setSelectionRange) {
             const pos = element.val().length * 2;
             domEl.setSelectionRange(pos, pos);
diff --git a/public/app/features/datasources/settings/HttpSettingsCtrl.ts b/public/app/features/datasources/settings/HttpSettingsCtrl.ts
index 47022c283f8..5cdebe7b9ab 100644
--- a/public/app/features/datasources/settings/HttpSettingsCtrl.ts
+++ b/public/app/features/datasources/settings/HttpSettingsCtrl.ts
@@ -9,7 +9,7 @@ coreModule.directive('datasourceHttpSettings', () => {
     },
     templateUrl: 'public/app/features/datasources/partials/http_settings.html',
     link: {
-      pre: ($scope, elem, attrs) => {
+      pre: ($scope: any, elem, attrs) => {
         // do not show access option if direct access is disabled
         $scope.showAccessOption = $scope.noDirectAccess !== 'true';
         $scope.showAccessHelp = false;
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 31da05a2d4f..8dff4de5872 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -33,7 +33,7 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
     template: panelTemplate,
     transclude: true,
     scope: { ctrl: '=' },
-    link: (scope, elem) => {
+    link: (scope: any, elem) => {
       const panelContainer = elem.find('.panel-container');
       const panelContent = elem.find('.panel-content');
       const cornerInfoElem = elem.find('.panel-info-corner');
@@ -67,7 +67,7 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       // set initial transparency
       if (ctrl.panel.transparent) {
         transparentLastState = true;
-        panelContainer.addClass('panel-transparent', true);
+        panelContainer.addClass('panel-transparent');
       }
 
       // update scrollbar after mounting
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 889720ad286..0cbd1bac564 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -2,28 +2,6 @@ import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 import { FilterSegments, DefaultFilterValue } from './filter_segments';
 
-export class StackdriverFilter {
-  /** @ngInject */
-  constructor() {
-    return {
-      templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.filter.html',
-      controller: 'StackdriverFilterCtrl',
-      controllerAs: 'ctrl',
-      bindToController: true,
-      restrict: 'E',
-      scope: {
-        labelData: '<',
-        loading: '<',
-        groupBys: '<',
-        filters: '<',
-        filtersChanged: '&',
-        groupBysChanged: '&',
-        hideGroupBys: '<',
-      },
-    };
-  }
-}
-
 export class StackdriverFilterCtrl {
   defaultRemoveGroupByValue = '-- remove group by --';
   resourceTypeValue = 'resource.type';
@@ -193,5 +171,24 @@ export class StackdriverFilterCtrl {
   }
 }
 
-coreModule.directive('stackdriverFilter', StackdriverFilter);
-coreModule.controller('StackdriverFilterCtrl', StackdriverFilterCtrl);
+/** @ngInject */
+function stackdriverFilter() {
+  return {
+    templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.filter.html',
+    controller: StackdriverFilterCtrl,
+    controllerAs: 'ctrl',
+    bindToController: true,
+    restrict: 'E',
+    scope: {
+      labelData: '<',
+      loading: '<',
+      groupBys: '<',
+      filters: '<',
+      filtersChanged: '&',
+      groupBysChanged: '&',
+      hideGroupBys: '<',
+    },
+  };
+}
+
+coreModule.directive('stackdriverFilter', stackdriverFilter);
diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts
index c36fad45cba..c90b394fb02 100644
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/public/app/plugins/panel/heatmap/color_legend.ts
@@ -19,7 +19,7 @@ coreModule.directive('colorLegend', () => {
   return {
     restrict: 'E',
     template: '<div class="heatmap-color-legend"><svg width="16.5rem" height="24px"></svg></div>',
-    link: (scope, elem, attrs) => {
+    link: (scope: any, elem, attrs) => {
       const ctrl = scope.ctrl;
       const panel = scope.ctrl.panel;
 
@@ -55,7 +55,7 @@ coreModule.directive('heatmapLegend', () => {
   return {
     restrict: 'E',
     template: `<div class="heatmap-color-legend"><svg width="${LEGEND_WIDTH_PX}px" height="${LEGEND_HEIGHT_PX}px"></svg></div>`,
-    link: (scope, elem, attrs) => {
+    link: (scope: any, elem, attrs) => {
       const ctrl = scope.ctrl;
       const panel = scope.ctrl.panel;
 

From 4eef407b81af10f18103b2f53db59a74925053de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Mar 2019 17:11:47 +0100
Subject: [PATCH 31/32] Also push to ci metrics to new shared HM instance

---
 scripts/circle-metrics.sh | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scripts/circle-metrics.sh b/scripts/circle-metrics.sh
index 849fc0e1339..b52347d0755 100755
--- a/scripts/circle-metrics.sh
+++ b/scripts/circle-metrics.sh
@@ -21,3 +21,10 @@ curl \
    -u ci:$CIRCLE_STATS_PWD \
    -X POST https://stats.grafana.org/metric-receiver
 
+curl https://6371:$GRAFANA_MISC_STATS_API_KEY@graphite-us-central1.grafana.net/metrics \
+  -H 'Content-type: application/json' \
+  -d '[
+      {"name":"grafana.ci-code.noImplicitAny", "interval":60, "value": '$ERROR_COUNT', "mtype": "gauge", "time": '$(date +%s)'},
+      {"name":"grafana.ci-code.directives", "interval":60, "value": '$DIRECTIVES', "mtype": "gauge", "time": '$(date +%s)'},
+      {"name":"grafana.ci-code.controllers", "interval":60, "value": '$CONTROLLERS', "mtype": "gauge", "time": '$(date +%s)'}
+   ]'

From 37496fe6a876133930606b40009323bb6e95bd57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Mar 2019 17:55:01 +0100
Subject: [PATCH 32/32] Fixed more typescript no implicit any issues

---
 public/test/specs/helpers.ts         | 17 ++++-----
 public/vendor/ansicolor/ansicolor.ts | 52 +++++++++++++++++-----------
 tsconfig.json                        |  1 +
 3 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/public/test/specs/helpers.ts b/public/test/specs/helpers.ts
index b8307186540..58403ac7ed7 100644
--- a/public/test/specs/helpers.ts
+++ b/public/test/specs/helpers.ts
@@ -123,6 +123,7 @@ export function ServiceTestContext(this: any) {
   };
 
   this.createService = name => {
+    // @ts-ignore
     return angularMocks.inject(($q, $rootScope, $httpBackend, $injector, $location, $timeout) => {
       self.$q = $q;
       self.$rootScope = $rootScope;
@@ -145,7 +146,7 @@ export function DashboardViewStateStub(this: any) {
 export function TimeSrvStub(this: any) {
   this.init = () => {};
   this.time = { from: 'now-1h', to: 'now' };
-  this.timeRange = function(parse) {
+  this.timeRange = function(parse: boolean) {
     if (parse === false) {
       return this.time;
     }
@@ -155,11 +156,7 @@ export function TimeSrvStub(this: any) {
     };
   };
 
-  this.replace = target => {
-    return target;
-  };
-
-  this.setTime = function(time) {
+  this.setTime = function(time: any) {
     this.time = time;
   };
 }
@@ -174,11 +171,11 @@ export function TemplateSrvStub(this: any) {
   this.variables = [];
   this.templateSettings = { interpolate: /\[\[([\s\S]+?)\]\]/g };
   this.data = {};
-  this.replace = function(text) {
+  this.replace = function(text: string) {
     return _.template(text, this.templateSettings)(this.data);
   };
   this.init = () => {};
-  this.getAdhocFilters = () => {
+  this.getAdhocFilters = (): any => {
     return [];
   };
   this.fillVariableValuesForUrl = () => {};
@@ -187,10 +184,10 @@ export function TemplateSrvStub(this: any) {
     return false;
   };
   this.variableInitialized = () => {};
-  this.highlightVariablesAsHtml = str => {
+  this.highlightVariablesAsHtml = (str: string) => {
     return str;
   };
-  this.setGrafanaVariable = function(name, value) {
+  this.setGrafanaVariable = function(name: string, value: string) {
     this.data[name] = value;
   };
 }
diff --git a/public/vendor/ansicolor/ansicolor.ts b/public/vendor/ansicolor/ansicolor.ts
index 98524eb6827..0e3cb0d5d0d 100644
--- a/public/vendor/ansicolor/ansicolor.ts
+++ b/public/vendor/ansicolor/ansicolor.ts
@@ -48,7 +48,7 @@ const colorCodes = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan'
 
 /*  ------------------------------------------------------------------------ */
 
-const clean = obj => {
+const clean = (obj: any) => {
   for (const k in obj) {
     if (!obj[k]) {
       delete obj[k];
@@ -60,11 +60,11 @@ const clean = obj => {
 /*  ------------------------------------------------------------------------ */
 
 class Color {
-  background: string;
+  background: boolean;
   name: string;
   brightness: number;
 
-  constructor(background?, name?, brightness?) {
+  constructor(background?: boolean, name?: string, brightness?: number) {
     this.background = background;
     this.name = name;
     this.brightness = brightness;
@@ -82,18 +82,21 @@ class Color {
     });
   }
 
-  defaultBrightness(value) {
+  defaultBrightness(value: number) {
     return new Color(this.background, this.name, this.brightness || value);
   }
 
-  css(inverted) {
+  css(inverted: boolean) {
     const color = inverted ? this.inverse : this;
 
+    // @ts-ignore
     const rgbName = (color.brightness === Code.bright && asBright[color.name]) || color.name;
 
-    const prop = color.background ? 'background:' : 'color:',
-      rgb = Colors.rgb[rgbName],
-      alpha = this.brightness === Code.dim ? 0.5 : 1;
+    const prop = color.background ? 'background:' : 'color:';
+
+    // @ts-ignore
+    const rgb = Colors.rgb[rgbName];
+    const alpha = this.brightness === Code.dim ? 0.5 : 1;
 
     return rgb
       ? prop + 'rgba(' + [...rgb, alpha].join(',') + ');'
@@ -117,17 +120,19 @@ class Code {
 
   value: number;
 
-  constructor(n?) {
+  constructor(n?: string | number) {
     if (n !== undefined) {
       this.value = Number(n);
     }
   }
 
   get type() {
+    // @ts-ignore
     return types[Math.floor(this.value / 10)];
   }
 
   get subtype() {
+    // @ts-ignore
     return subtypes[this.type][this.value % 10];
   }
 
@@ -135,7 +140,7 @@ class Code {
     return this.value ? '\u001b[' + this.value + 'm' : '';
   }
 
-  static str(x) {
+  static str(x: string | number) {
     return new Code(x).str;
   }
 
@@ -146,16 +151,17 @@ class Code {
 
 /*  ------------------------------------------------------------------------ */
 
-const replaceAll = (str, a, b) => str.split(a).join(b);
+const replaceAll = (str: string, a: string, b: string) => str.split(a).join(b);
 
 /*  ANSI brightness codes do not overlap, e.g. "{bright}{dim}foo" will be rendered bright (not dim).
     So we fix it by adding brightness canceling before each brightness code, so the former example gets
     converted to "{noBrightness}{bright}{noBrightness}{dim}foo" – this way it gets rendered as expected.
  */
 
-const denormalizeBrightness = s => s.replace(/(\u001b\[(1|2)m)/g, '\u001b[22m$1');
-const normalizeBrightness = s => s.replace(/\u001b\[22m(\u001b\[(1|2)m)/g, '$1');
+const denormalizeBrightness = (s: string) => s.replace(/(\u001b\[(1|2)m)/g, '\u001b[22m$1');
+const normalizeBrightness = (s: string) => s.replace(/\u001b\[22m(\u001b\[(1|2)m)/g, '$1');
 
+// @ts-ignore
 const wrap = (x, openCode, closeCode) => {
   const open = Code.str(openCode),
     close = Code.str(closeCode);
@@ -168,7 +174,7 @@ const wrap = (x, openCode, closeCode) => {
 
 /*  ------------------------------------------------------------------------ */
 
-const camel = (a, b) => a + b.charAt(0).toUpperCase() + b.slice(1);
+const camel = (a: string, b: string) => a + b.charAt(0).toUpperCase() + b.slice(1);
 
 const stringWrappingMethods = (() =>
   [
@@ -216,10 +222,12 @@ const stringWrappingMethods = (() =>
 
 /*  ------------------------------------------------------------------------ */
 
+// @ts-ignore
 const assignStringWrappingAPI = (target, wrapBefore = target) =>
   stringWrappingMethods.reduce(
     (memo, [k, open, close]) =>
       O.defineProperty(memo, k, {
+        // @ts-ignore
         get: () => assignStringWrappingAPI(str => wrapBefore(wrap(str, open, close))),
       }),
 
@@ -232,7 +240,7 @@ const TEXT = 0,
   BRACKET = 1,
   CODE = 2;
 
-function rawParse(s) {
+function rawParse(s: string) {
   let state = TEXT,
     buffer = '',
     text = '',
@@ -333,7 +341,7 @@ export default class Colors {
   /**
    * @param {string} s a string containing ANSI escape codes.
    */
-  constructor(s?) {
+  constructor(s?: string) {
     this.spans = s ? rawParse(s) : [];
   }
 
@@ -342,7 +350,10 @@ export default class Colors {
   }
 
   get parsed() {
-    let color, bgColor, brightness, styles;
+    let styles: Set<string>;
+    let brightness: number;
+    let color: Color;
+    let bgColor: Color;
 
     function reset() {
       (color = new Color()),
@@ -431,6 +442,7 @@ export default class Colors {
       if (!(k in String.prototype)) {
         O.defineProperty(String.prototype, k, {
           get: function() {
+            // @ts-ignore
             return Colors[k](this);
           },
         });
@@ -444,7 +456,7 @@ export default class Colors {
    * @desc parses a string containing ANSI escape codes
    * @return {Colors} parsed representation.
    */
-  static parse(s) {
+  static parse(s: string) {
     return new Colors(s).parsed;
   }
 
@@ -453,7 +465,7 @@ export default class Colors {
    * @param {string} s a string containing ANSI escape codes.
    * @return {string} clean string.
    */
-  static strip(s) {
+  static strip(s: string) {
     return s.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-PRZcf-nqry=><]/g, ''); // hope V8 caches the regexp
   }
 
@@ -468,4 +480,4 @@ export default class Colors {
 
 /*  ------------------------------------------------------------------------ */
 
-assignStringWrappingAPI(Colors, str => str);
+assignStringWrappingAPI(Colors, (str: string) => str);
diff --git a/tsconfig.json b/tsconfig.json
index 1af0de2b3b9..f223c027af6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,7 @@
     "noImplicitThis": true,
     "noImplicitUseStrict": false,
     "noImplicitAny": false,
+    "downlevelIteration": true,
     "noUnusedLocals": true,
     "baseUrl": "public",
     "pretty": true,