From 847f5491bf906604f84c26020cb6c840d45c7840 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 13:14:55 +0100
Subject: [PATCH 001/352] Wrap react select component in angular directive

---
 .../stackdriver/components/OptionPicker.tsx   | 48 +++++++++++++++++++
 .../stackdriver/partials/query.filter.html    | 34 ++++++-------
 .../datasource/stackdriver/query_ctrl.ts      |  9 ++++
 .../stackdriver/query_filter_ctrl.ts          | 16 +++++--
 4 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
new file mode 100644
index 00000000000..f83777e5f79
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+// import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'react-select';
+// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import _ from 'lodash';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, options, selected, placeholder, className } = this.props;
+    const selectedOption = options.find(metric => metric.value === selected);
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={options}
+        components={{
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isDisabled={false}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index b96b0720e33..1d87c8a3005 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,26 +1,26 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <select
-      class="gf-form-input width-12"
-      ng-model="ctrl.service"
-      ng-options="f.value as f.text for f in ctrl.services"
-      ng-change="ctrl.onServiceChange(ctrl.service)"
-    ></select>
+    <option-picker
+      onChange="ctrl.handleServiceChange"
+      selected="ctrl.service"
+      options="ctrl.services"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
+  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
+</div>
+<div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <gf-form-dropdown
-      model="ctrl.metricType"
-      get-options="ctrl.metrics"
-      class="min-width-20"
-      disabled
-      type="text"
-      allow-custom="true"
-      lookup-text="true"
-      css-class="min-width-12"
-      on-change="ctrl.onMetricTypeChange()"
-    ></gf-form-dropdown>
+    <option-picker
+      onChange="ctrl.handleMetricTypeChange"
+      selected="ctrl.metricType"
+      options="ctrl.metrics"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index c2607964456..3186a5e2012 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,6 +2,8 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
+import { OptionPicker } from './components/OptionPicker';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -64,6 +66,13 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+    react2AngularDirective('optionPicker', OptionPicker, [
+      'options',
+      'onChange',
+      'selected',
+      'className',
+      'placeholder',
+    ]);
   }
 
   onDataReceived(dataList) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 0f5dce559fd..7926da9aa1c 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -59,6 +59,13 @@ export class StackdriverFilterCtrl {
       .then(this.getLabels.bind(this));
 
     this.initSegments($scope.hideGroupBys);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    this.handleServiceChange = this.handleServiceChange.bind(this);
+  }
+
+  handleMetricTypeChange(value) {
+    this.metricType = value;
+    this.onMetricTypeChange();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -110,7 +117,7 @@ export class StackdriverFilterCtrl {
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        text: m.serviceShortName,
+        label: m.serviceShortName,
       };
     });
 
@@ -128,7 +135,8 @@ export class StackdriverFilterCtrl {
         value: m.type,
         serviceShortName: m.serviceShortName,
         text: m.displayName,
-        title: m.description,
+        label: m.displayName,
+        description: m.description,
       };
     });
 
@@ -167,8 +175,8 @@ export class StackdriverFilterCtrl {
     });
   }
 
-  onServiceChange() {
-    this.target.service = this.service;
+  handleServiceChange(service) {
+    this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
     this.setMetricType();
     this.getLabels();

From b18f06481719b2322e45777575ba3c17f9452feb Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:11:18 +0100
Subject: [PATCH 002/352] wip: add basic option header

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ++++++++++++
 public/sass/_grafana.scss                          |  1 +
 public/sass/components/_group-heading.scss         |  5 +++++
 3 files changed, 18 insertions(+)
 create mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 create mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
new file mode 100644
index 00000000000..76012ed3e7f
--- /dev/null
+++ b/public/app/core/components/Picker/GroupHeading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { components } from 'react-select';
+
+export const GroupHeading = props => {
+  return (
+    <label className="description-picker-option__button btn picker-option-group">
+      <components.GroupHeading {...props} />
+    </label>
+  );
+};
+
+export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index dac8efcccf0..eb62c5ab612 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -103,6 +103,7 @@
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
 @import 'components/toggle_button_group';
+@import 'components/group-heading';
 
 // PAGES
 @import 'pages/login';
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
new file mode 100644
index 00000000000..9656277d123
--- /dev/null
+++ b/public/sass/components/_group-heading.scss
@@ -0,0 +1,5 @@
+.picker-option-group {
+  cursor: default;
+  font-weight: $lead-font-weight;
+  color: $btn-primary-bg-hl;
+}

From ab5e5de8147b82d49b11dc50ef0727c219231722 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:12:33 +0100
Subject: [PATCH 003/352] wip: add option group component

---
 .../components/OptionGroupPicker.tsx          | 53 +++++++++++++++++++
 .../stackdriver/components/OptionPicker.tsx   | 15 +++---
 .../stackdriver/partials/query.filter.html    | 14 ++---
 .../datasource/stackdriver/query_ctrl.ts      | 10 ++++
 .../stackdriver/query_filter_ctrl.ts          | 39 +++++++++++++-
 5 files changed, 117 insertions(+), 14 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
new file mode 100644
index 00000000000..7401b226413
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Select from 'react-select';
+import _ from 'lodash';
+
+import GroupHeading from 'app/core/components/Picker/GroupHeading';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+
+export interface Props {
+  onChange: (value: string) => void;
+  groups: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionGroupPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
+    const options = _.flatten(groups.map(o => o.options));
+    const selectedOption = options.find(option => option.value === selected);
+
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={groups}
+        components={{
+          GroupHeading,
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isSearchable={searchable}
+        maxMenuHeight={50}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index f83777e5f79..3d99ed3bafc 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
-// import SimplePicker from 'app/core/components/Picker/SimplePicker';
 import Select from 'react-select';
-// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import _ from 'lodash';
+
 import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
 import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
 import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-import _ from 'lodash';
 
 export interface Props {
   onChange: (value: string) => void;
   options: any[];
+  searchable: boolean;
   selected: string;
   placeholder?: string;
   className?: string;
+  groups?: boolean;
 }
 
 export class OptionPicker extends React.Component<Props, any> {
@@ -22,8 +23,9 @@ export class OptionPicker extends React.Component<Props, any> {
   }
 
   render() {
-    const { onChange, options, selected, placeholder, className } = this.props;
-    const selectedOption = options.find(metric => metric.value === selected);
+    const { onChange, options, selected, placeholder, className, searchable } = this.props;
+    const selectedOption = options.find(option => option.value === selected);
+
     return (
       <Select
         placeholder={placeholder}
@@ -36,7 +38,8 @@ export class OptionPicker extends React.Component<Props, any> {
           NoOptionsMessage,
         }}
         styles={ResetStyles}
-        isDisabled={false}
+        isSearchable={searchable}
+        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 1d87c8a3005..df3821ac463 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -5,8 +5,9 @@
       onChange="ctrl.handleServiceChange"
       selected="ctrl.service"
       options="ctrl.services"
-      placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
+      searchable="false"
+      placeholder="ctrl.defaultServiceValue"
+      className="&quot;width-15&quot;"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -14,13 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.metricType"
-      options="ctrl.metrics"
+      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      searchable="true"
       placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
-    ></option-picker>
+      className="&quot;width-15&quot;"
+    ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 3186a5e2012..8c00d6caddb 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -3,6 +3,7 @@ import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
 import { OptionPicker } from './components/OptionPicker';
+import { OptionGroupPicker } from './components/OptionGroupPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -70,6 +71,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'options',
       'onChange',
       'selected',
+      'searchable',
+      'className',
+      'placeholder',
+    ]);
+    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
+      'groups',
+      'onChange',
+      'selected',
+      'searchable',
       'className',
       'placeholder',
     ]);
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 7926da9aa1c..dd7178ecca0 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -36,6 +36,7 @@ export class StackdriverFilterCtrl {
   metricType: string;
   metricDescriptors: any[];
   metrics: any[];
+  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -52,6 +53,7 @@ export class StackdriverFilterCtrl {
 
     this.metricDescriptors = [];
     this.metrics = [];
+    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -106,6 +108,7 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
+      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -113,11 +116,11 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, text: this.$scope.defaultServiceValue };
+    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        label: m.serviceShortName,
+        label: _.startCase(m.serviceShortName),
       };
     });
 
@@ -128,6 +131,37 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
   }
 
+  getMetricGroups() {
+    return this.metrics.reduce((acc, curr) => {
+      const group = acc.find(group => group.service === curr.service);
+      if (group) {
+        group.options = [...group.options, { value: curr.value, label: curr.label }];
+      } else {
+        acc = [
+          ...acc,
+          {
+            label: _.startCase(curr.serviceShortName),
+            service: curr.service,
+            options: [{ value: curr.value, label: curr.label }],
+          },
+        ];
+      }
+      return acc;
+    }, []);
+  }
+
+  insertTemplateVariables(options) {
+    const templateVariables = {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+    return [templateVariables, { label: 'Metrics', options }];
+  }
+
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
@@ -178,6 +212,7 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
+    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {

From 33146b248ec0c94a9d61b4d3df1cc7e03c0986aa Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:14:06 +0100
Subject: [PATCH 004/352] remove redundant default value

---
 .../datasource/stackdriver/datasource.ts      |  1 +
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/partials/query.filter.html    | 12 ++--
 .../datasource/stackdriver/query_ctrl.ts      |  7 +-
 .../stackdriver/query_filter_ctrl.ts          | 72 +++++++++++--------
 .../specs/query_filter_ctrl.test.ts           |  2 -
 6 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index d1545655652..7b1afbae5ac 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -274,6 +274,7 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
+
           return m;
         });
       }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 5c7bc8935b1..66961d106aa 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,6 +1,5 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource" default-dropdown-value="ctrl.defaultDropdownValue"
-    default-service-value="ctrl.defaultServiceValue"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index df3821ac463..583744d0e67 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -6,8 +6,8 @@
       selected="ctrl.service"
       options="ctrl.services"
       searchable="false"
-      placeholder="ctrl.defaultServiceValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Services'"
+      className="'width-15'"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -17,11 +17,11 @@
     <span class="gf-form-label width-9 query-keyword">Metric</span>
     <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.metricType"
-      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      selected="ctrl.target.metricType"
+      groups="ctrl.getMetricGroups()"
       searchable="true"
-      placeholder="ctrl.defaultDropdownValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Metric'"
+      className="'width-15'"
     ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8c00d6caddb..cf22802ae76 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -34,13 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     valueType: any;
   };
 
-  defaultDropdownValue = 'Select Metric';
-  defaultServiceValue = 'All Services';
-
   defaults = {
     defaultProject: 'loading project...',
-    metricType: this.defaultDropdownValue,
-    service: this.defaultServiceValue,
+    metricType: '',
+    service: '',
     metric: '',
     unit: '',
     aggregation: {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index dd7178ecca0..ba96cfc5a60 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -15,8 +15,6 @@ export class StackdriverFilter {
         target: '=',
         datasource: '=',
         refresh: '&',
-        defaultDropdownValue: '<',
-        defaultServiceValue: '<',
         hideGroupBys: '<',
       },
     };
@@ -48,9 +46,6 @@ export class StackdriverFilterCtrl {
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
     this.datasource = $scope.datasource;
     this.target = $scope.target;
-    this.metricType = $scope.defaultDropdownValue;
-    this.service = $scope.defaultServiceValue;
-
     this.metricDescriptors = [];
     this.metrics = [];
     this.metricGroups = [];
@@ -66,7 +61,7 @@ export class StackdriverFilterCtrl {
   }
 
   handleMetricTypeChange(value) {
-    this.metricType = value;
+    this.target.metricType = value;
     this.onMetricTypeChange();
   }
 
@@ -116,7 +111,6 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
@@ -128,10 +122,10 @@ export class StackdriverFilterCtrl {
       this.service = this.target.service;
     }
 
-    return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
+    return services.length > 0 ? _.uniqBy(services, 'value') : [];
   }
 
-  getMetricGroups() {
+  getMetricGroupsOld() {
     return this.metrics.reduce((acc, curr) => {
       const group = acc.find(group => group.service === curr.service);
       if (group) {
@@ -150,6 +144,27 @@ export class StackdriverFilterCtrl {
     }, []);
   }
 
+  getMetricGroups() {
+    return [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Metrics',
+        options: this.metrics,
+      },
+    ];
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+  }
+
   insertTemplateVariables(options) {
     const templateVariables = {
       label: 'Template Variables',
@@ -174,29 +189,28 @@ export class StackdriverFilterCtrl {
       };
     });
 
-    let result;
-    if (this.target.service === this.$scope.defaultServiceValue) {
-      result = metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
-    } else {
-      result = metrics.filter(m => m.service === this.target.service);
+    const metricsByService = metrics.filter(m => m.service === this.target.service);
+    if (
+      metricsByService.length > 0 &&
+      !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
+    ) {
+      this.target.metricType = metricsByService[0].value;
     }
-
-    if (result.find(m => m.value === this.templateSrv.replace(this.target.metricType))) {
-      this.metricType = this.target.metricType;
-    } else if (result.length > 0) {
-      this.metricType = this.target.metricType = result[0].value;
-    }
-    return result;
+    return metricsByService;
   }
 
   async getLabels() {
     this.loadLabelsPromise = new Promise(async resolve => {
       try {
-        const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-        this.metricLabels = meta.metricLabels;
-        this.resourceLabels = meta.resourceLabels;
-        this.resourceTypes = meta.resourceTypes;
-        resolve();
+        if (this.target.metricType) {
+          const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+          this.metricLabels = meta.metricLabels;
+          this.resourceLabels = meta.resourceLabels;
+          this.resourceTypes = meta.resourceTypes;
+          resolve();
+        } else {
+          resolve();
+        }
       } catch (error) {
         if (error.data && error.data.message) {
           console.log(error.data.message);
@@ -216,7 +230,7 @@ export class StackdriverFilterCtrl {
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {
-      this.target.metricType = this.$scope.defaultDropdownValue;
+      this.target.metricType = '';
     } else {
       this.$scope.refresh();
     }
@@ -229,9 +243,9 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    this.target.metricType = this.metricType;
+    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.metricType)
+      m => m.type === this.templateSrv.replace(this.target.metricType)
     );
     this.target.unit = unit;
     this.target.valueType = valueType;
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 020db584508..e8d04357cb8 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -409,8 +409,6 @@ function createCtrlWithFakes(existingFilters?: string[]) {
         return 'project';
       },
     },
-    defaultDropdownValue: 'Select Metric',
-    defaultServiceValue: 'All Services',
     refresh: () => {},
   };
 

From ae922747dbefc069a86448cc5b56c8e091e42645 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:57:30 +0100
Subject: [PATCH 005/352] use new option group in aggregation directive

---
 .../partials/query.aggregation.html           | 43 ++++++----
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 79 ++++++++++++++++---
 3 files changed, 97 insertions(+), 28 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 5f16d3fc61d..7396c6eb546 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,16 +2,21 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAggregationChange"
+        selected="ctrl.target.aggregation.crossSeriesReducer"
+        groups="ctrl.aggOptions"
+        searchable="true"
+        placeholder="'Select Aggregation'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
       <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
         <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
-        Advanced Options
+        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
       </a>
     </label>
   </div>
@@ -20,27 +25,35 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentChange"
+        selected="ctrl.target.aggregation.perSeriesAligner"
+        groups="ctrl.alignOptions"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
 
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentPeriodChange"
+        selected="ctrl.target.aggregation.alignmentPeriod"
+        groups="ctrl.alignmentPeriods"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
 
   <div class="gf-form gf-form--grow">
-    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
-      {{ctrl.formatAlignmentText()}}
-    </label>
+    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 66961d106aa..8760aaf1bb3 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,5 +1,6 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+    ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 628cc494242..f5ff3ad3143 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
-import * as options from './constants';
+import { alignmentPeriods } from './constants';
 import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
 import kbn from 'app/core/utils/kbn';
 
@@ -29,9 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = options.alignmentPeriods;
-    this.aggOptions = options.aggOptions;
-    this.alignOptions = options.alignOptions;
+    this.alignmentPeriods = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Periods',
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -39,30 +46,68 @@ export class StackdriverAggregationCtrl {
       self.setAggOptions();
       self.setAlignOptions();
     });
+    this.handleAlignmentChange = this.handleAlignmentChange.bind(this);
+    this.handleAggregationChange = this.handleAggregationChange.bind(this);
+    this.handleAlignmentPeriodChange = this.handleAlignmentPeriodChange.bind(this);
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    this.alignOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Options',
+        options: alignments,
+      },
+    ];
+    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
     }
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
-
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+    this.aggOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Aggregations',
+        options: aggregations,
+      },
+    ];
+  }
+
+  handleAlignmentChange(value) {
+    this.target.aggregation.perSeriesAligner = value;
+    this.$scope.refresh();
+  }
+
+  handleAggregationChange(value) {
+    this.target.aggregation.crossSeriesReducer = value;
+    this.$scope.refresh();
+  }
+
+  handleAlignmentPeriodChange(value) {
+    this.target.aggregation.alignmentPeriod = value;
+    this.$scope.refresh();
   }
 
   formatAlignmentText() {
-    const selectedAlignment = this.alignOptions.find(
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const selectedAlignment = alignments.find(
       ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
@@ -74,6 +119,16 @@ export class StackdriverAggregationCtrl {
     const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);

From bcb218f57c136678706447a5abaaf9c654e1c6e2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:55:23 +0100
Subject: [PATCH 006/352] remove redundant default value

---
 .../datasource/stackdriver/components/OptionGroupPicker.tsx      | 1 -
 .../plugins/datasource/stackdriver/components/OptionPicker.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
index 7401b226413..f7863dd2a16 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -41,7 +41,6 @@ export class OptionGroupPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index 3d99ed3bafc..64d68f1bd70 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -39,7 +39,6 @@ export class OptionPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}

From ad9a35198d7f936a4d40deca5a99524a4407bda0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:57:57 +0100
Subject: [PATCH 007/352] update failing tests

---
 .../stackdriver/query_aggregation_ctrl.ts     |  6 +-
 .../stackdriver/query_filter_ctrl.ts          | 14 +----
 .../specs/query_aggregation_ctrl.test.ts      | 57 +++++++++++++++++--
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index f5ff3ad3143..d4478c6214c 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,6 +52,7 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
+    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
@@ -78,7 +79,7 @@ export class StackdriverAggregationCtrl {
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
     this.aggOptions = [
@@ -116,7 +117,8 @@ export class StackdriverAggregationCtrl {
   }
 
   deselectAggregationOption(notValidOptionValue: string) {
-    const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
+    const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index ba96cfc5a60..74ca2c9b067 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -160,23 +160,11 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        description: `$${v.definition}`,
+        // description: `$${v.definition}`,
       })),
     };
   }
 
-  insertTemplateVariables(options) {
-    const templateVariables = {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-        description: `$${v.definition}`,
-      })),
-    };
-    return [templateVariables, { label: 'Metrics', options }];
-  }
-
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 81011f5dfe0..6e83824d504 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,27 +17,68 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(11);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(2);
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          expect(ctrl.alignOptions.length).toBe(9);
-          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(11);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
+      describe('and result is double and delta and no group by is used', () => {
+        beforeEach(async () => {
+          ctrl = new StackdriverAggregationCtrl(
+            {
+              $on: () => {},
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'DELTA',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
+            }
+          );
+        });
+
+        it('should populate all alignment options except four', () => {
+          ctrl.setAlignOptions();
+          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(9);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+            expect['not'].arrayContaining([
+              'ALIGN_NEXT_OLDER',
+              'ALIGN_INTERPOLATE',
+              'ALIGN_COUNT_TRUE',
+              'ALIGN_COUNT_FALSE',
+              'ALIGN_FRACTION_TRUE',
+            ])
+          );
+        });
+      });
+
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -51,14 +92,18 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(10);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(ctrl.aggOptions.length).toBe(2);
+          expect(templateVariableGroup.options.length).toBe(1);
+          expect(aggOptionsGroup.options.length).toBe(10);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From ac416ba88052fa7a46d1d2cf0d5a93be6f0c846a Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:57:32 +0100
Subject: [PATCH 008/352] cleanup query filter

---
 .../stackdriver/partials/query.filter.html    |  2 +-
 .../stackdriver/query_filter_ctrl.ts          | 62 +++++--------------
 2 files changed, 15 insertions(+), 49 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 583744d0e67..632f89b8248 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -3,7 +3,7 @@
     <span class="gf-form-label width-9 query-keyword">Service</span>
     <option-picker
       onChange="ctrl.handleServiceChange"
-      selected="ctrl.service"
+      selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 74ca2c9b067..d270290abb2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -30,8 +30,6 @@ export class StackdriverFilterCtrl {
   resourceTypeValue = 'resource.type';
   loadLabelsPromise: Promise<any>;
 
-  service: string;
-  metricType: string;
   metricDescriptors: any[];
   metrics: any[];
   metricGroups: any[];
@@ -111,37 +109,12 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const services = this.metricDescriptors.map(m => {
-      return {
-        value: m.service,
-        label: _.startCase(m.serviceShortName),
-      };
-    });
+    const services = this.metricDescriptors.map(m => ({
+      value: m.service,
+      label: _.startCase(m.serviceShortName),
+    }));
 
-    if (services.find(m => m.value === this.target.service)) {
-      this.service = this.target.service;
-    }
-
-    return services.length > 0 ? _.uniqBy(services, 'value') : [];
-  }
-
-  getMetricGroupsOld() {
-    return this.metrics.reduce((acc, curr) => {
-      const group = acc.find(group => group.service === curr.service);
-      if (group) {
-        group.options = [...group.options, { value: curr.value, label: curr.label }];
-      } else {
-        acc = [
-          ...acc,
-          {
-            label: _.startCase(curr.serviceShortName),
-            service: curr.service,
-            options: [{ value: curr.value, label: curr.label }],
-          },
-        ];
-      }
-      return acc;
-    }, []);
+    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
   getMetricGroups() {
@@ -149,7 +122,7 @@ export class StackdriverFilterCtrl {
       this.getTemplateVariablesGroup(),
       {
         label: 'Metrics',
-        options: this.metrics,
+        options: this.getMetricsList(),
       },
     ];
   }
@@ -160,24 +133,18 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        // description: `$${v.definition}`,
       })),
     };
   }
 
   getMetricsList() {
-    const metrics = this.metricDescriptors.map(m => {
-      return {
-        service: m.service,
-        value: m.type,
-        serviceShortName: m.serviceShortName,
-        text: m.displayName,
-        label: m.displayName,
-        description: m.description,
-      };
-    });
+    const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
+      service: m.service,
+      value: m.type,
+      label: m.displayName,
+      description: m.description,
+    }));
 
-    const metricsByService = metrics.filter(m => m.service === this.target.service);
     if (
       metricsByService.length > 0 &&
       !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
@@ -212,12 +179,12 @@ export class StackdriverFilterCtrl {
   }
 
   handleServiceChange(service) {
-    this.target.service = this.service = service;
+    this.target.service = service;
     this.metrics = this.getMetricsList();
     this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
-    if (!this.metrics.find(m => m.value === this.target.metricType)) {
+    if (!this.metrics.some(m => m.value === this.target.metricType)) {
       this.target.metricType = '';
     } else {
       this.$scope.refresh();
@@ -231,7 +198,6 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)
     );

From d154d160613edb5daf6945e8b0832acd10a3f6a3 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:58:25 +0100
Subject: [PATCH 009/352] use same color for label as in explore dropdown

---
 public/sass/components/_group-heading.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
index 9656277d123..8fc39c0dc2a 100644
--- a/public/sass/components/_group-heading.scss
+++ b/public/sass/components/_group-heading.scss
@@ -1,5 +1,6 @@
 .picker-option-group {
   cursor: default;
+  color: $text-color-weak;
+  font-size: $font-size-sm;
   font-weight: $lead-font-weight;
-  color: $btn-primary-bg-hl;
 }

From f6109d21d269159c67462b4e762b9b588648f72f Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:59:13 +0100
Subject: [PATCH 010/352] fix remove filter bug

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index d270290abb2..8ce2dfde554 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -252,8 +252,10 @@ export class StackdriverFilterCtrl {
       return [];
     }
 
-    this.removeSegment.value = removeText;
-    return [...elements, this.removeSegment];
+    return [
+      ...elements,
+      this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
+    ];
   }
 
   async getGroupBys(segment) {

From 7cc42d7c130eab2667958b56f32e9351a38edba0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 14:08:47 +0100
Subject: [PATCH 011/352] remove on metric type change

---
 .../datasource/stackdriver/query_filter_ctrl.ts        | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 8ce2dfde554..e617dba5945 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -60,7 +60,9 @@ export class StackdriverFilterCtrl {
 
   handleMetricTypeChange(value) {
     this.target.metricType = value;
-    this.onMetricTypeChange();
+    this.setMetricType();
+    this.$scope.refresh();
+    this.getLabels();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -191,12 +193,6 @@ export class StackdriverFilterCtrl {
     }
   }
 
-  async onMetricTypeChange() {
-    this.setMetricType();
-    this.$scope.refresh();
-    this.getLabels();
-  }
-
   setMetricType() {
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)

From ad55be9865b4a62f0b45e63ca8e8c960f8b12726 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 13 Dec 2018 00:16:48 +0100
Subject: [PATCH 012/352] break out metric picker and filter

---
 .../stackdriver/components/MetricPicker.tsx   | 181 ++++++++++
 .../stackdriver/partials/query.editor.html    |   6 +-
 .../stackdriver/partials/query.filter.html    |  54 +--
 .../stackdriver/query_aggregation_ctrl.ts     |   1 -
 .../datasource/stackdriver/query_ctrl.ts      |  47 ++-
 .../stackdriver/query_filter_ctrl.ts          | 195 +++--------
 .../stackdriver/query_filter_ctrl2.ts         | 330 ++++++++++++++++++
 .../specs/query_filter_ctrl.test.ts           |  12 +-
 8 files changed, 642 insertions(+), 184 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts

diff --git a/public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx b/public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx
new file mode 100644
index 00000000000..c3d7d6fda22
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { OptionPicker } from './OptionPicker';
+import { OptionGroupPicker } from './OptionGroupPicker';
+
+export interface Props {
+  onChange: (metricDescriptor) => void;
+  templateSrv: any;
+  datasource: any;
+  defaultProject: string;
+  metricType: string;
+}
+
+interface State {
+  metricDescriptors: any[];
+  metrics: any[];
+  services: any[];
+  service: string;
+  metric: string;
+}
+
+export class MetricPicker extends React.Component<Props, State> {
+  state: State = {
+    metricDescriptors: [],
+    metrics: [],
+    services: [],
+    service: '',
+    metric: '',
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.getCurrentProject()
+      .then(this.loadMetricDescriptors.bind(this))
+      .then(this.initializeServiceAndMetrics.bind(this));
+    // .then(this.getLabels.bind(this));
+  }
+
+  async getCurrentProject() {
+    return new Promise(async (resolve, reject) => {
+      try {
+        if (!this.props.defaultProject || this.props.defaultProject === 'loading project...') {
+          // this.props.defaultProject = await this.props.datasource.getDefaultProject();
+          await this.props.datasource.getDefaultProject();
+        }
+        resolve(this.props.defaultProject);
+      } catch (error) {
+        // appEvents.emit('ds-request-error', error);
+        reject();
+      }
+    });
+  }
+
+  async loadMetricDescriptors() {
+    if (this.props.defaultProject !== 'loading project...') {
+      const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.defaultProject);
+      this.setState({ metricDescriptors });
+      return metricDescriptors;
+    } else {
+      return [];
+    }
+  }
+
+  async initializeServiceAndMetrics() {
+    const { metricDescriptors } = this.state;
+    const services = this.getServicesList(metricDescriptors);
+    const metrics = this.getMetricsList(metricDescriptors);
+    const service = metrics.length > 0 ? metrics[0].service : '';
+    this.setState({ metricDescriptors, services, metrics, service: service });
+  }
+
+  getMetricsList(metricDescriptors) {
+    const selectedMetricDescriptor = metricDescriptors.find(md => md.type === this.props.metricType);
+    const metricsByService = metricDescriptors.filter(m => m.service === selectedMetricDescriptor.service).map(m => ({
+      service: m.service,
+      value: m.type,
+      label: m.displayName,
+      description: m.description,
+    }));
+    return metricsByService;
+  }
+
+  handleServiceChange(service) {
+    console.log('handleServiceChange', service);
+    const { metricDescriptors } = this.state;
+    const { templateSrv, metricType } = this.props;
+
+    const metrics = metricDescriptors.filter(m => m.service === templateSrv.replace(service)).map(m => ({
+      service: m.service,
+      value: m.type,
+      label: m.displayName,
+      description: m.description,
+    }));
+
+    this.setState({ service, metrics });
+
+    if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
+      this.handleMetricTypeChange(metrics[0].value);
+    }
+  }
+
+  handleMetricTypeChange(value) {
+    const selectedMetricDescriptor = this.state.metricDescriptors.find(md => md.type === value);
+    this.props.onChange(selectedMetricDescriptor);
+  }
+
+  getServicesList(metricDescriptors) {
+    const services = metricDescriptors.map(m => ({
+      value: m.service,
+      label: _.startCase(m.serviceShortName),
+    }));
+
+    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.props.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
+
+  getMetricGroups() {
+    return [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Metrics',
+        options: this.state.metrics,
+      },
+    ];
+  }
+
+  render() {
+    const { services, service } = this.state;
+    const { metricType } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <span className="gf-form-label width-9 query-keyword">Service</span>
+            <OptionPicker
+              onChange={value => this.handleServiceChange(value)}
+              selected={service}
+              options={services}
+              searchable={false}
+              placeholder="Select Services"
+              className="width-15"
+            />
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <span className="gf-form-label width-9 query-keyword">Metric</span>
+            <OptionGroupPicker
+              onChange={value => this.handleMetricTypeChange(value)}
+              selected={metricType}
+              groups={this.getMetricGroups()}
+              searchable={true}
+              placeholder="Select Metric"
+              className="width-15"
+            />
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 8760aaf1bb3..a0a37a5ab83 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,7 +1,11 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+  <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject"  metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
     ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
+  <!-- <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+    ></stackdriver-filter>
+  <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label query-keyword width-9">Alias By</span>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 632f89b8248..34eaee0ee3a 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,31 +1,33 @@
-<div class="gf-form-inline">
-  <div class="gf-form">
-    <span class="gf-form-label width-9 query-keyword">Service</span>
-    <option-picker
-      onChange="ctrl.handleServiceChange"
-      selected="ctrl.target.service"
-      options="ctrl.services"
-      searchable="false"
-      placeholder="'Select Services'"
-      className="'width-15'"
-    ></option-picker>
+<!--
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-9 query-keyword">Service</span>
+      <option-picker
+        onChange="ctrl.handleServiceChange"
+        selected="ctrl.target.service"
+        options="ctrl.services"
+        searchable="false"
+        placeholder="'Select Services'"
+        className="'width-15'"
+      ></option-picker>
+    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
-  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-</div>
-<div class="gf-form-inline">
-  <div class="gf-form">
-    <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-group-picker
-      onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.target.metricType"
-      groups="ctrl.getMetricGroups()"
-      searchable="true"
-      placeholder="'Select Metric'"
-      className="'width-15'"
-    ></option-group-picker>
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-9 query-keyword">Metric</span>
+      <option-group-picker
+        onChange="ctrl.handleMetricTypeChange"
+        selected="ctrl.target.metricType"
+        groups="ctrl.getMetricGroups()"
+        searchable="true"
+        placeholder="'Select Metric'"
+        className="'width-15'"
+      ></option-group-picker>
+    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
-  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-</div>
+-->
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label query-keyword width-9">Filter</span>
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index d4478c6214c..0077c74a46e 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,7 +52,6 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index cf22802ae76..8feb2f7dec1 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -1,7 +1,9 @@
 import _ from 'lodash';
+import appEvents from 'app/core/app_events';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
+import { MetricPicker } from './components/MetricPicker';
 import { OptionPicker } from './components/OptionPicker';
 import { OptionGroupPicker } from './components/OptionGroupPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
@@ -57,13 +59,19 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   showLastQuery: boolean;
   lastQueryMeta: QueryMeta;
   lastQueryError?: string;
+  labelData: QueryMeta;
+
+  loadLabelsPromise: Promise<any>;
+  templateSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector) {
+  constructor($scope, $injector, templateSrv, private $rootScope) {
     super($scope, $injector);
+    this.templateSrv = templateSrv;
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
     react2AngularDirective('optionPicker', OptionPicker, [
       'options',
       'onChange',
@@ -80,6 +88,43 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
     ]);
+    react2AngularDirective('metricPicker', MetricPicker, [
+      'target',
+      ['onChange', { watchDepth: 'reference' }],
+      'defaultProject',
+      'metricType',
+      ['templateSrv', { watchDepth: 'reference' }],
+      ['datasource', { watchDepth: 'reference' }],
+    ]);
+    this.getLabels();
+  }
+
+  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+    this.target.metricType = type;
+    this.target.unit = unit;
+    this.target.valueType = valueType;
+    this.target.metricKind = metricKind;
+    this.$rootScope.$broadcast('metricTypeChanged');
+    this.getLabels();
+    this.refresh();
+  }
+
+  async getLabels() {
+    this.loadLabelsPromise = new Promise(async resolve => {
+      try {
+        const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+        this.labelData = meta;
+        resolve();
+      } catch (error) {
+        if (error.data && error.data.message) {
+          console.log(error.data.message);
+        } else {
+          console.log(error);
+        }
+        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
+        resolve();
+      }
+    });
   }
 
   onDataReceived(dataList) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index e617dba5945..99f5386b608 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -1,7 +1,8 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 import { FilterSegments } from './filter_segments';
-import appEvents from 'app/core/app_events';
+import { QueryMeta } from './query_ctrl';
+// import appEvents from 'app/core/app_events';
 
 export class StackdriverFilter {
   /** @ngInject */
@@ -12,8 +13,9 @@ export class StackdriverFilter {
       controllerAs: 'ctrl',
       restrict: 'E',
       scope: {
+        labelData: '<',
+        loading: '<',
         target: '=',
-        datasource: '=',
         refresh: '&',
         hideGroupBys: '<',
       },
@@ -28,41 +30,26 @@ export class StackdriverFilterCtrl {
 
   defaultRemoveGroupByValue = '-- remove group by --';
   resourceTypeValue = 'resource.type';
-  loadLabelsPromise: Promise<any>;
 
   metricDescriptors: any[];
   metrics: any[];
-  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
   removeSegment: any;
   target: any;
-  datasource: any;
+
+  labelData: QueryMeta;
+  loading: Promise<any>;
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
-    this.datasource = $scope.datasource;
     this.target = $scope.target;
     this.metricDescriptors = [];
     this.metrics = [];
-    this.metricGroups = [];
     this.services = [];
 
-    this.getCurrentProject()
-      .then(this.loadMetricDescriptors.bind(this))
-      .then(this.getLabels.bind(this));
-
     this.initSegments($scope.hideGroupBys);
-    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
-    this.handleServiceChange = this.handleServiceChange.bind(this);
-  }
-
-  handleMetricTypeChange(value) {
-    this.target.metricType = value;
-    this.setMetricType();
-    this.$scope.refresh();
-    this.getLabels();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -84,129 +71,34 @@ export class StackdriverFilterCtrl {
     this.filterSegments.buildSegmentModel();
   }
 
-  async getCurrentProject() {
-    return new Promise(async (resolve, reject) => {
-      try {
-        if (!this.target.defaultProject || this.target.defaultProject === 'loading project...') {
-          this.target.defaultProject = await this.datasource.getDefaultProject();
-        }
-        resolve(this.target.defaultProject);
-      } catch (error) {
-        appEvents.emit('ds-request-error', error);
-        reject();
-      }
-    });
-  }
-
-  async loadMetricDescriptors() {
-    if (this.target.defaultProject !== 'loading project...') {
-      this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
-      this.services = this.getServicesList();
-      this.metrics = this.getMetricsList();
-      this.metricGroups = this.getMetricGroups();
-      return this.metricDescriptors;
-    } else {
-      return [];
-    }
-  }
-
-  getServicesList() {
-    const services = this.metricDescriptors.map(m => ({
-      value: m.service,
-      label: _.startCase(m.serviceShortName),
-    }));
-
-    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
-  }
-
-  getMetricGroups() {
-    return [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Metrics',
-        options: this.getMetricsList(),
-      },
-    ];
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-
-  getMetricsList() {
-    const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
-      service: m.service,
-      value: m.type,
-      label: m.displayName,
-      description: m.description,
-    }));
-
-    if (
-      metricsByService.length > 0 &&
-      !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
-    ) {
-      this.target.metricType = metricsByService[0].value;
-    }
-    return metricsByService;
-  }
-
-  async getLabels() {
-    this.loadLabelsPromise = new Promise(async resolve => {
-      try {
-        if (this.target.metricType) {
-          const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-          this.metricLabels = meta.metricLabels;
-          this.resourceLabels = meta.resourceLabels;
-          this.resourceTypes = meta.resourceTypes;
-          resolve();
-        } else {
-          resolve();
-        }
-      } catch (error) {
-        if (error.data && error.data.message) {
-          console.log(error.data.message);
-        } else {
-          console.log(error);
-        }
-        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
-        resolve();
-      }
-    });
-  }
-
-  handleServiceChange(service) {
-    this.target.service = service;
-    this.metrics = this.getMetricsList();
-    this.metricGroups = this.getMetricGroups();
-    this.setMetricType();
-    this.getLabels();
-    if (!this.metrics.some(m => m.value === this.target.metricType)) {
-      this.target.metricType = '';
-    } else {
-      this.$scope.refresh();
-    }
-  }
-
-  setMetricType() {
-    const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.target.metricType)
-    );
-    this.target.unit = unit;
-    this.target.valueType = valueType;
-    this.target.metricKind = metricKind;
-    this.$rootScope.$broadcast('metricTypeChanged');
-  }
+  // async getLabels() {
+  //   this.loadLabelsPromise = new Promise(async resolve => {
+  //     try {
+  //       if (this.target.metricType) {
+  //         const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+  //         this.$scope.labelData.metricLabels = meta.metricLabels;
+  //         this.$scope.labelData.resourceLabels = meta.resourceLabels;
+  //         this.$scope.labelData.resourceTypes = meta.resourceTypes;
+  //         resolve();
+  //       } else {
+  //         resolve();
+  //       }
+  //     } catch (error) {
+  //       if (error.data && error.data.message) {
+  //         console.log(error.data.message);
+  //       } else {
+  //         console.log(error);
+  //       }
+  //       appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
+  //       resolve();
+  //     }
+  //   });
+  // }
 
   async createLabelKeyElements() {
-    await this.loadLabelsPromise;
+    await this.$scope.loading;
 
-    let elements = Object.keys(this.metricLabels || {}).map(l => {
+    let elements = Object.keys(this.$scope.labelData.metricLabels || {}).map(l => {
       return this.uiSegmentSrv.newSegment({
         value: `metric.label.${l}`,
         expandable: false,
@@ -215,7 +107,7 @@ export class StackdriverFilterCtrl {
 
     elements = [
       ...elements,
-      ...Object.keys(this.resourceLabels || {}).map(l => {
+      ...Object.keys(this.$scope.labelData.resourceLabels || {}).map(l => {
         return this.uiSegmentSrv.newSegment({
           value: `resource.label.${l}`,
           expandable: false,
@@ -223,7 +115,7 @@ export class StackdriverFilterCtrl {
       }),
     ];
 
-    if (this.resourceTypes && this.resourceTypes.length > 0) {
+    if (this.$scope.labelData.resourceTypes && this.$scope.labelData.resourceTypes.length > 0) {
       elements = [
         ...elements,
         this.uiSegmentSrv.newSegment({
@@ -288,28 +180,33 @@ export class StackdriverFilterCtrl {
   }
 
   async getFilters(segment, index) {
-    const hasNoFilterKeys = this.metricLabels && Object.keys(this.metricLabels).length === 0;
+    const hasNoFilterKeys =
+      this.$scope.labelData.metricLabels && Object.keys(this.$scope.labelData.metricLabels).length === 0;
     return this.filterSegments.getFilters(segment, index, hasNoFilterKeys);
   }
 
   getFilterValues(index) {
     const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value);
-    if (!filterKey || !this.metricLabels || Object.keys(this.metricLabels).length === 0) {
+    if (
+      !filterKey ||
+      !this.$scope.labelData.metricLabels ||
+      Object.keys(this.$scope.labelData.metricLabels).length === 0
+    ) {
       return [];
     }
 
     const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
 
-    if (filterKey.startsWith('metric.label.') && this.metricLabels.hasOwnProperty(shortKey)) {
-      return this.metricLabels[shortKey];
+    if (filterKey.startsWith('metric.label.') && this.$scope.labelData.metricLabels.hasOwnProperty(shortKey)) {
+      return this.$scope.labelData.metricLabels[shortKey];
     }
 
-    if (filterKey.startsWith('resource.label.') && this.resourceLabels.hasOwnProperty(shortKey)) {
-      return this.resourceLabels[shortKey];
+    if (filterKey.startsWith('resource.label.') && this.$scope.labelData.resourceLabels.hasOwnProperty(shortKey)) {
+      return this.$scope.labelData.resourceLabels[shortKey];
     }
 
     if (filterKey === this.resourceTypeValue) {
-      return this.resourceTypes;
+      return this.$scope.labelData.resourceTypes;
     }
 
     return [];
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts
new file mode 100644
index 00000000000..1b70b86d59a
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts
@@ -0,0 +1,330 @@
+// import coreModule from 'app/core/core_module';
+// import _ from 'lodash';
+// import { FilterSegments } from './filter_segments';
+// import appEvents from 'app/core/app_events';
+
+// export class StackdriverFilter {
+//   /** @ngInject */
+//   constructor() {
+//     return {
+//       templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.filter.html',
+//       controller: 'StackdriverFilterCtrl',
+//       controllerAs: 'ctrl',
+//       restrict: 'E',
+//       scope: {
+//         target: '=',
+//         datasource: '=',
+//         refresh: '&',
+//         hideGroupBys: '<',
+//       },
+//     };
+//   }
+// }
+
+// export class StackdriverFilterCtrl {
+//   metricLabels: { [key: string]: string[] };
+//   resourceLabels: { [key: string]: string[] };
+//   resourceTypes: string[];
+
+//   defaultRemoveGroupByValue = '-- remove group by --';
+//   resourceTypeValue = 'resource.type';
+//   loadLabelsPromise: Promise<any>;
+
+//   metricDescriptors: any[];
+//   metrics: any[];
+//   services: any[];
+//   groupBySegments: any[];
+//   filterSegments: FilterSegments;
+//   removeSegment: any;
+//   target: any;
+//   datasource: any;
+
+//   /** @ngInject */
+//   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
+//     this.datasource = $scope.datasource;
+//     this.target = $scope.target;
+//     this.metricDescriptors = [];
+//     this.metrics = [];
+//     this.services = [];
+
+//     this.getCurrentProject()
+//       .then(this.loadMetricDescriptors.bind(this))
+//       .then(this.getLabels.bind(this));
+
+//     this.initSegments($scope.hideGroupBys);
+//     this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+//     this.handleServiceChange = this.handleServiceChange.bind(this);
+//   }
+
+//   handleMetricTypeChange(value) {
+//     this.target.metricType = value;
+//     this.setMetricType();
+//     this.$scope.refresh();
+//     this.getLabels();
+//   }
+
+//   initSegments(hideGroupBys: boolean) {
+//     if (!hideGroupBys) {
+//       this.groupBySegments = this.target.aggregation.groupBys.map(groupBy => {
+//         return this.uiSegmentSrv.getSegmentForValue(groupBy);
+//       });
+//       this.ensurePlusButton(this.groupBySegments);
+//     }
+
+//     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' });
+
+//     this.filterSegments = new FilterSegments(
+//       this.uiSegmentSrv,
+//       this.target,
+//       this.getFilterKeys.bind(this),
+//       this.getFilterValues.bind(this)
+//     );
+//     this.filterSegments.buildSegmentModel();
+//   }
+
+//   async getCurrentProject() {
+//     return new Promise(async (resolve, reject) => {
+//       try {
+//         if (!this.target.defaultProject || this.target.defaultProject === 'loading project...') {
+//           this.target.defaultProject = await this.datasource.getDefaultProject();
+//         }
+//         resolve(this.target.defaultProject);
+//       } catch (error) {
+//         appEvents.emit('ds-request-error', error);
+//         reject();
+//       }
+//     });
+//   }
+
+//   async loadMetricDescriptors() {
+//     if (this.target.defaultProject !== 'loading project...') {
+//       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
+//       this.services = this.getServicesList();
+//       this.metrics = this.getMetricsList();
+//       return this.metricDescriptors;
+//     } else {
+//       return [];
+//     }
+//   }
+
+//   getServicesList() {
+//     const services = this.metricDescriptors.map(m => ({
+//       value: m.service,
+//       label: _.startCase(m.serviceShortName),
+//     }));
+
+//     return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
+//   }
+
+//   getMetricGroups() {
+//     return [
+//       this.getTemplateVariablesGroup(),
+//       {
+//         label: 'Metrics',
+//         options: this.getMetricsList(),
+//       },
+//     ];
+//   }
+
+//   getTemplateVariablesGroup() {
+//     return {
+//       label: 'Template Variables',
+//       options: this.templateSrv.variables.map(v => ({
+//         label: `$${v.name}`,
+//         value: `$${v.name}`,
+//       })),
+//     };
+//   }
+
+//   getMetricsList() {
+//     const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
+//       service: m.service,
+//       value: m.type,
+//       label: m.displayName,
+//       description: m.description,
+//     }));
+
+//     if (
+//       metricsByService.length > 0 &&
+//       !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
+//     ) {
+//       // this.target.metricType = metricsByService[0].value;
+//     }
+//     return metricsByService;
+//   }
+
+//   async getLabels() {
+//     this.loadLabelsPromise = new Promise(async resolve => {
+//       try {
+//         if (this.target.metricType) {
+//           const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+//           this.metricLabels = meta.metricLabels;
+//           this.resourceLabels = meta.resourceLabels;
+//           this.resourceTypes = meta.resourceTypes;
+//           resolve();
+//         } else {
+//           resolve();
+//         }
+//       } catch (error) {
+//         if (error.data && error.data.message) {
+//           console.log(error.data.message);
+//         } else {
+//           console.log(error);
+//         }
+//         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
+//         resolve();
+//       }
+//     });
+//   }
+
+//   handleServiceChange(service) {
+//     this.target.service = service;
+//     this.metrics = this.getMetricsList();
+//     this.setMetricType();
+//     this.getLabels();
+//     if (!this.metrics.some(m => m.value === this.target.metricType)) {
+//       this.target.metricType = '';
+//     } else {
+//       this.$scope.refresh();
+//     }
+//   }
+
+//   setMetricType() {
+//     const { valueType, metricKind, unit } = this.metricDescriptors.find(
+//       m => m.type === this.templateSrv.replace(this.target.metricType)
+//     );
+//     this.target.unit = unit;
+//     this.target.valueType = valueType;
+//     this.target.metricKind = metricKind;
+//     this.$rootScope.$broadcast('metricTypeChanged');
+//   }
+
+//   async createLabelKeyElements() {
+//     await this.loadLabelsPromise;
+
+//     let elements = Object.keys(this.metricLabels || {}).map(l => {
+//       return this.uiSegmentSrv.newSegment({
+//         value: `metric.label.${l}`,
+//         expandable: false,
+//       });
+//     });
+
+//     elements = [
+//       ...elements,
+//       ...Object.keys(this.resourceLabels || {}).map(l => {
+//         return this.uiSegmentSrv.newSegment({
+//           value: `resource.label.${l}`,
+//           expandable: false,
+//         });
+//       }),
+//     ];
+
+//     if (this.resourceTypes && this.resourceTypes.length > 0) {
+//       elements = [
+//         ...elements,
+//         this.uiSegmentSrv.newSegment({
+//           value: this.resourceTypeValue,
+//           expandable: false,
+//         }),
+//       ];
+//     }
+
+//     return elements;
+//   }
+
+//   async getFilterKeys(segment, removeText?: string) {
+//     let elements = await this.createLabelKeyElements();
+
+//     if (this.target.filters.indexOf(this.resourceTypeValue) !== -1) {
+//       elements = elements.filter(e => e.value !== this.resourceTypeValue);
+//     }
+
+//     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
+//     if (noValueOrPlusButton && elements.length === 0) {
+//       return [];
+//     }
+
+//     return [
+//       ...elements,
+//       this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
+//     ];
+//   }
+
+//   async getGroupBys(segment) {
+//     let elements = await this.createLabelKeyElements();
+
+//     elements = elements.filter(e => this.target.aggregation.groupBys.indexOf(e.value) === -1);
+//     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
+//     if (noValueOrPlusButton && elements.length === 0) {
+//       return [];
+//     }
+
+//     this.removeSegment.value = this.defaultRemoveGroupByValue;
+//     return [...elements, this.removeSegment];
+//   }
+
+//   groupByChanged(segment, index) {
+//     if (segment.value === this.removeSegment.value) {
+//       this.groupBySegments.splice(index, 1);
+//     } else {
+//       segment.type = 'value';
+//     }
+
+//     const reducer = (memo, seg) => {
+//       if (!seg.fake) {
+//         memo.push(seg.value);
+//       }
+//       return memo;
+//     };
+
+//     this.target.aggregation.groupBys = this.groupBySegments.reduce(reducer, []);
+//     this.ensurePlusButton(this.groupBySegments);
+//     this.$rootScope.$broadcast('metricTypeChanged');
+//     this.$scope.refresh();
+//   }
+
+//   async getFilters(segment, index) {
+//     const hasNoFilterKeys = this.metricLabels && Object.keys(this.metricLabels).length === 0;
+//     return this.filterSegments.getFilters(segment, index, hasNoFilterKeys);
+//   }
+
+//   getFilterValues(index) {
+//     const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value);
+//     if (!filterKey || !this.metricLabels || Object.keys(this.metricLabels).length === 0) {
+//       return [];
+//     }
+
+//     const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
+
+//     if (filterKey.startsWith('metric.label.') && this.metricLabels.hasOwnProperty(shortKey)) {
+//       return this.metricLabels[shortKey];
+//     }
+
+//     if (filterKey.startsWith('resource.label.') && this.resourceLabels.hasOwnProperty(shortKey)) {
+//       return this.resourceLabels[shortKey];
+//     }
+
+//     if (filterKey === this.resourceTypeValue) {
+//       return this.resourceTypes;
+//     }
+
+//     return [];
+//   }
+
+//   filterSegmentUpdated(segment, index) {
+//     this.target.filters = this.filterSegments.filterSegmentUpdated(segment, index);
+//     this.$scope.refresh();
+//   }
+
+//   ensurePlusButton(segments) {
+//     const count = segments.length;
+//     const lastSegment = segments[Math.max(count - 1, 0)];
+
+//     if (!lastSegment || lastSegment.type !== 'plus-button') {
+//       segments.push(this.uiSegmentSrv.newPlusButton());
+//     }
+//   }
+// }
+
+// coreModule.directive('stackdriverFilter', StackdriverFilter);
+// coreModule.controller('StackdriverFilterCtrl', StackdriverFilterCtrl);
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index e8d04357cb8..5e8d7c0aea0 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -367,12 +367,12 @@ describe('StackdriverQueryFilterCtrl', () => {
 });
 
 function createCtrlWithFakes(existingFilters?: string[]) {
-  StackdriverFilterCtrl.prototype.loadMetricDescriptors = () => {
-    return Promise.resolve([]);
-  };
-  StackdriverFilterCtrl.prototype.getLabels = () => {
-    return Promise.resolve();
-  };
+  // StackdriverFilterCtrl.prototype.loadMetricDescriptors = () => {
+  //   return Promise.resolve([]);
+  // };
+  // StackdriverFilterCtrl.prototype.getLabels = () => {
+  //   return Promise.resolve();
+  // };
 
   const fakeSegmentServer = {
     newKey: val => {

From 146aa7abab4f36ea003b9c0ebcc95fc142be2983 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 13 Dec 2018 16:40:14 +0100
Subject: [PATCH 013/352] wip: convert angular directives to react components

---
 .../stackdriver/angular_wrappers.ts           |  48 ++++
 .../components/AggregationPicker.tsx          | 134 ++++++++++
 .../stackdriver/components/Filter.tsx         | 239 ++++++++++++++++++
 .../stackdriver/components/QueryEditor.tsx    | 141 +++++++++++
 .../stackdriver/components/Segment.tsx        |  44 ++++
 .../datasource/stackdriver/filter_segments.ts |  13 +-
 .../stackdriver/partials/query.editor.html    |   7 +-
 .../datasource/stackdriver/query_ctrl.ts      | 134 ++++------
 .../stackdriver/query_filter_ctrl.ts          |  16 +-
 .../plugins/datasource/stackdriver/types.ts   |  27 ++
 10 files changed, 704 insertions(+), 99 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/angular_wrappers.ts
 create mode 100644 public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Filter.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Segment.tsx

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
new file mode 100644
index 00000000000..e4451821b44
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -0,0 +1,48 @@
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { QueryEditor } from './components/QueryEditor';
+// import { MetricPicker } from './components/MetricPicker';
+// import { OptionPicker } from './components/OptionPicker';
+// import { OptionGroupPicker } from './components/OptionGroupPicker';
+// import { AggregationPicker } from './components/AggregationPicker';
+
+export function registerAngularDirectives() {
+  //   react2AngularDirective('optionPicker', OptionPicker, [
+  //     'options',
+  //     'onChange',
+  //     'selected',
+  //     'searchable',
+  //     'className',
+  //     'placeholder',
+  //   ]);
+  //   react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
+  //     'groups',
+  //     'onChange',
+  //     'selected',
+  //     'searchable',
+  //     'className',
+  //     'placeholder',
+  //   ]);
+  //   react2AngularDirective('metricPicker', MetricPicker, [
+  //     'target',
+  //     ['onChange', { watchDepth: 'reference' }],
+  //     'defaultProject',
+  //     'metricType',
+  //     ['templateSrv', { watchDepth: 'reference' }],
+  //     ['datasource', { watchDepth: 'reference' }],
+  //   ]);
+  //   react2AngularDirective('aggregationPicker', AggregationPicker, [
+  //     'valueType',
+  //     'metricKind',
+  //     'onChange',
+  //     'aggregation',
+  //     ['templateSrv', { watchDepth: 'reference' }],
+  //   ]);
+
+  react2AngularDirective('queryEditor', QueryEditor, [
+    'target',
+    'onChange',
+    ['uiSegmentSrv', { watchDepth: 'reference' }],
+    ['datasource', { watchDepth: 'reference' }],
+    ['templateSrv', { watchDepth: 'reference' }],
+  ]);
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx b/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
new file mode 100644
index 00000000000..4f733e3e984
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import _ from 'lodash';
+
+// import { OptionPicker } from './OptionPicker';
+import { OptionGroupPicker } from './OptionGroupPicker';
+// import { alignmentPeriods } from '../constants';
+// import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from '../functions';
+import { getAggregationOptionsByMetric } from '../functions';
+// import kbn from 'app/core/utils/kbn';
+
+export interface Props {
+  onChange: (metricDescriptor) => void;
+  templateSrv: any;
+  valueType: string;
+  metricKind: string;
+  aggregation: {
+    crossSeriesReducer: string;
+    alignmentPeriod: string;
+    perSeriesAligner: string;
+    groupBys: string[];
+  };
+}
+
+interface State {
+  alignmentPeriods: any[];
+  alignOptions: any[];
+  aggOptions: any[];
+}
+
+export class AggregationPicker extends React.Component<Props, State> {
+  state: State = {
+    alignmentPeriods: [],
+    alignOptions: [],
+    aggOptions: [],
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setAggOptions();
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    const { valueType, metricKind, aggregation } = this.props;
+    if (
+      nextProps.valueType !== valueType ||
+      nextProps.metricKind !== metricKind ||
+      nextProps.aggregation.groupBys !== aggregation.groupBys
+    ) {
+      this.setAggOptions();
+    }
+  }
+
+  setAggOptions() {
+    const { valueType, metricKind, aggregation, templateSrv } = this.props;
+    let aggregations = getAggregationOptionsByMetric(valueType, metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    if (!aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))) {
+      this.deselectAggregationOption('REDUCE_NONE');
+    }
+
+    if (aggregation.groupBys.length > 0) {
+      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
+      this.deselectAggregationOption('REDUCE_NONE');
+    }
+    this.setState({
+      aggOptions: [
+        this.getTemplateVariablesGroup(),
+        {
+          label: 'Aggregations',
+          options: aggregations,
+        },
+      ],
+    });
+  }
+
+  deselectAggregationOption(notValidOptionValue: string) {
+    const aggregations = getAggregationOptionsByMetric(this.props.valueType, this.props.metricKind);
+    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
+    this.handleAggregationChange(newValue ? newValue.value : '');
+  }
+
+  handleAggregationChange(value) {
+    this.props.onChange(value);
+    // this.$scope.refresh();
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.props.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
+
+  render() {
+    const { aggOptions } = this.state;
+    const { aggregation } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-9">Aggregation</label>
+            <div className="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
+              <OptionGroupPicker
+                onChange={value => this.handleAggregationChange(value)}
+                selected={aggregation.crossSeriesReducer}
+                groups={aggOptions}
+                searchable={true}
+                placeholder="Select Aggregation"
+                className="width-15"
+              />
+            </div>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <label className="gf-form-label gf-form-label--grow">
+              <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
+                <i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" />
+                <i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options
+              </a>
+            </label>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
new file mode 100644
index 00000000000..59967b998c1
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -0,0 +1,239 @@
+import React from 'react';
+import _ from 'lodash';
+
+import Segment from './Segment';
+import { QueryMeta, Target } from '../types';
+import { FilterSegments } from '../filter_segments';
+
+export interface Props {
+  onChange: (metricDescriptor) => void;
+  templateSrv: any;
+  labelData: QueryMeta;
+  loading: Promise<any>;
+  target: Target;
+  uiSegmentSrv: any;
+}
+
+interface State {
+  defaultRemoveGroupByValue: string;
+  resourceTypeValue: string;
+  groupBySegments: any[];
+  // filterSegments: FilterSegments;
+  filterSegments: any;
+  removeSegment?: any;
+}
+
+export class Filter extends React.Component<Props, State> {
+  state: State = {
+    defaultRemoveGroupByValue: '-- remove group by --',
+    resourceTypeValue: 'resource.type',
+    groupBySegments: [],
+    filterSegments: new FilterSegments(this.getFilterKeys.bind(this), this.getFilterValues.bind(this)),
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.initSegments(false);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.state.filterSegments.filterSegments.length > 0;
+  }
+
+  initSegments(hideGroupBys: boolean) {
+    this.state.filterSegments.init(this.props.uiSegmentSrv);
+    if (!hideGroupBys) {
+      this.setState({
+        groupBySegments: this.props.target.aggregation.groupBys.map(groupBy => {
+          return this.props.uiSegmentSrv.getSegmentForValue(groupBy);
+        }),
+      });
+
+      this.ensurePlusButton(this.state.groupBySegments);
+    }
+
+    this.setState({
+      removeSegment: this.props.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' }),
+    });
+
+    this.state.filterSegments.buildSegmentModel(this.props.target.filters);
+  }
+
+  async createLabelKeyElements() {
+    await this.props.loading;
+
+    let elements = Object.keys(this.props.labelData.metricLabels || {}).map(l => {
+      return this.props.uiSegmentSrv.newSegment({
+        value: `metric.label.${l}`,
+        expandable: false,
+      });
+    });
+
+    elements = [
+      ...elements,
+      ...Object.keys(this.props.labelData.resourceLabels || {}).map(l => {
+        return this.props.uiSegmentSrv.newSegment({
+          value: `resource.label.${l}`,
+          expandable: false,
+        });
+      }),
+    ];
+
+    if (this.props.labelData.resourceTypes && this.props.labelData.resourceTypes.length > 0) {
+      elements = [
+        ...elements,
+        this.props.uiSegmentSrv.newSegment({
+          value: this.state.resourceTypeValue,
+          expandable: false,
+        }),
+      ];
+    }
+
+    return elements;
+  }
+
+  async getFilterKeys(segment, removeText?: string) {
+    let elements = await this.createLabelKeyElements();
+
+    if (this.props.target.filters.indexOf(this.state.resourceTypeValue) !== -1) {
+      elements = elements.filter(e => e.value !== this.state.resourceTypeValue);
+    }
+
+    const noValueOrPlusButton = !segment || segment.type === 'plus-button';
+    if (noValueOrPlusButton && elements.length === 0) {
+      return [];
+    }
+
+    return [
+      ...elements,
+      this.props.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.state.defaultRemoveGroupByValue }),
+    ];
+  }
+
+  async getGroupBys(segment) {
+    let elements = await this.createLabelKeyElements();
+
+    elements = elements.filter(e => this.props.target.aggregation.groupBys.indexOf(e.value) === -1);
+    const noValueOrPlusButton = !segment || segment.type === 'plus-button';
+    if (noValueOrPlusButton && elements.length === 0) {
+      return [];
+    }
+
+    this.state.removeSegment.value = this.state.defaultRemoveGroupByValue;
+    return [...elements, this.state.removeSegment];
+  }
+
+  groupByChanged(segment, index) {
+    if (segment.value === this.state.removeSegment.value) {
+      // this.groupBySegments.splice(index, 1);
+    } else {
+      segment.type = 'value';
+    }
+
+    const reducer = (memo, seg) => {
+      if (!seg.fake) {
+        memo.push(seg.value);
+      }
+      return memo;
+    };
+
+    this.props.target.aggregation.groupBys = this.state.groupBySegments.reduce(reducer, []);
+    this.ensurePlusButton(this.state.groupBySegments);
+    // this.$rootScope.$broadcast('metricTypeChanged');
+    // this.$scope.refresh();
+  }
+
+  async getFilters(segment, index) {
+    await this.props.loading;
+    const hasNoFilterKeys =
+      this.props.labelData.metricLabels && Object.keys(this.props.labelData.metricLabels).length === 0;
+    return this.state.filterSegments.getFilters(segment, index, hasNoFilterKeys);
+  }
+
+  getFilterValues(index) {
+    const filterKey = this.props.templateSrv.replace(this.state.filterSegments.filterSegments[index - 2].value);
+    if (
+      !filterKey ||
+      !this.props.labelData.metricLabels ||
+      Object.keys(this.props.labelData.metricLabels).length === 0
+    ) {
+      return [];
+    }
+
+    const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
+
+    if (filterKey.startsWith('metric.label.') && this.props.labelData.metricLabels.hasOwnProperty(shortKey)) {
+      return this.props.labelData.metricLabels[shortKey];
+    }
+
+    if (filterKey.startsWith('resource.label.') && this.props.labelData.resourceLabels.hasOwnProperty(shortKey)) {
+      return this.props.labelData.resourceLabels[shortKey];
+    }
+
+    if (filterKey === this.state.resourceTypeValue) {
+      return this.props.labelData.resourceTypes;
+    }
+
+    return [];
+  }
+
+  filterSegmentUpdated(segment, index) {
+    this.props.target.filters = this.state.filterSegments.filterSegmentUpdated(segment, index);
+    // this.$scope.refresh();
+  }
+
+  ensurePlusButton(segments) {
+    const count = segments.length;
+    const lastSegment = segments[Math.max(count - 1, 0)];
+
+    if (!lastSegment || lastSegment.type !== 'plus-button') {
+      segments.push(this.props.uiSegmentSrv.newPlusButton());
+    }
+  }
+
+  render() {
+    const { filterSegments } = this.state;
+    // const { metrifilterSegmentscType } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <span className="gf-form-label query-keyword width-9">Filter</span>
+            <div className="gf-form">
+              {filterSegments.filterSegments.map((segment, i) => (
+                <Segment
+                  key={i}
+                  segment={segment}
+                  getOptions={() => this.getFilters(segment, i)}
+                  onChange={segment => this.filterSegmentUpdated(segment, i)}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div>
+        {/* <div className="gf-form-inline" ng-hide="ctrl.$scope.hideGroupBys">
+          <div className="gf-form">
+            <span className="gf-form-label query-keyword width-9">Group By</span>
+            <div className="gf-form" ng-repeat="segment in ctrl.groupBySegments">
+              <Segment
+                segment="segment"
+                get-options="ctrl.getGroupBys(segment)"
+                on-change="ctrl.groupByChanged(segment, $index)"
+              />
+            </div>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div> */}
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
new file mode 100644
index 00000000000..5308853324c
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import _ from 'lodash';
+import appEvents from 'app/core/app_events';
+
+import { MetricPicker } from './MetricPicker';
+import { Filter } from './Filter';
+// import { AggregationPicker } from './AggregationPicker';
+import { Target, QueryMeta } from '../types';
+
+export interface Props {
+  onChange: (target: Target) => void;
+  target: Target;
+  datasource: any;
+  templateSrv: any;
+  uiSegmentSrv: any;
+}
+
+interface State {
+  target: Target;
+  labelData: QueryMeta;
+  loadLabelsPromise: Promise<any>;
+}
+
+const DefaultTarget: Target = {
+  defaultProject: 'loading project...',
+  metricType: '',
+  refId: '',
+  service: '',
+  unit: '',
+  aggregation: {
+    crossSeriesReducer: 'REDUCE_MEAN',
+    alignmentPeriod: 'stackdriver-auto',
+    perSeriesAligner: 'ALIGN_MEAN',
+    groupBys: [],
+  },
+  filters: [],
+  aliasBy: '',
+  metricKind: '',
+  valueType: '',
+};
+
+export class QueryEditor extends React.Component<Props, State> {
+  state: State = { labelData: null, loadLabelsPromise: null, target: DefaultTarget };
+
+  constructor(props) {
+    super(props);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    this.handleAggregationChange = this.handleAggregationChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.setState({ target: this.props.target });
+    this.getLabels();
+  }
+
+  async getLabels() {
+    const loadLabelsPromise = new Promise(async resolve => {
+      try {
+        const { meta } = await this.props.datasource.getLabels(this.props.target.metricType, this.props.target.refId);
+        this.setState({ labelData: meta });
+        resolve();
+      } catch (error) {
+        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.target.metricType]);
+        resolve();
+      }
+    });
+    this.setState({ loadLabelsPromise });
+  }
+
+  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+    this.setState({
+      target: {
+        ...this.state.target,
+        ...{
+          metricType: type,
+          unit,
+          valueType,
+          metricKind,
+        },
+      },
+    });
+
+    // this.$rootScope.$broadcast('metricTypeChanged');
+    // this.getLabels();
+    // this.refresh();
+  }
+
+  handleAggregationChange(crossSeriesReducer) {
+    // this.target.aggregation.crossSeriesReducer = crossSeriesReducer;
+    // this.refresh();
+  }
+
+  render() {
+    const { labelData, loadLabelsPromise, target } = this.state;
+    const { defaultProject, metricType } = target;
+    const { templateSrv, datasource, uiSegmentSrv } = this.props;
+
+    return (
+      <React.Fragment>
+        <MetricPicker
+          defaultProject={defaultProject}
+          metricType={metricType}
+          templateSrv={templateSrv}
+          datasource={datasource}
+          onChange={value => this.handleMetricTypeChange(value)}
+        />
+        <Filter
+          onChange={() => console.log('change filter')}
+          target={target}
+          uiSegmentSrv={uiSegmentSrv}
+          labelData={labelData}
+          templateSrv={templateSrv}
+          loading={loadLabelsPromise}
+        />
+        {/* target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData" */}
+        {/* <stackdriver-filter
+          target="target"
+          refresh="target.refresh()"
+          loading="target.loadLabelsPromise"
+          label-data="target.labelData"
+        />
+        <aggregation-picker
+          value-type="target.target.valueType"
+          metric-kind="target.target.metricKind"
+          aggregation="target.target.aggregation"
+          alignment-period="target.lastQueryMeta.alignmentPeriod"
+          refresh="target.refresh()"
+          template-srv="target.templateSrv"
+          datasource="target.datasource"
+          on-change="target.handleAggregationChange"
+        />
+
+        <stackdriver-aggregation
+          target="target.target"
+          alignment-period="target.lastQueryMeta.alignmentPeriod"
+          refresh="target.refresh()"
+        /> */}
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/Segment.tsx b/public/app/plugins/datasource/stackdriver/components/Segment.tsx
new file mode 100644
index 00000000000..e330b1ab312
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Segment.tsx
@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import 'app/core/directives/metric_segment';
+
+interface QueryEditorProps {
+  segment: any;
+  getOptions: () => Promise<any[]>;
+  onChange: (segment, index) => void;
+  key: number;
+}
+
+export default class Segment extends PureComponent<QueryEditorProps, any> {
+  element: any;
+  component: AngularComponent;
+
+  async componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    const { segment, getOptions, onChange } = this.props;
+    const loader = getAngularLoader();
+    const template = '<metric-segment> </metric-segment>';
+
+    const scopeProps = {
+      segment,
+      onChange,
+      getOptions,
+      debounce: false,
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  render() {
+    return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/filter_segments.ts b/public/app/plugins/datasource/stackdriver/filter_segments.ts
index 5adb56e2fcf..7fe406ed765 100644
--- a/public/app/plugins/datasource/stackdriver/filter_segments.ts
+++ b/public/app/plugins/datasource/stackdriver/filter_segments.ts
@@ -4,14 +4,21 @@ export const DefaultFilterValue = 'select value';
 export class FilterSegments {
   filterSegments: any[];
   removeSegment: any;
+  uiSegmentSrv: any;
 
-  constructor(private uiSegmentSrv, private target, private getFilterKeysFunc, private getFilterValuesFunc) {}
+  constructor(private getFilterKeysFunc, private getFilterValuesFunc) {
+    this.filterSegments = [];
+  }
 
-  buildSegmentModel() {
+  init(uiSegmentSrv) {
+    this.uiSegmentSrv = uiSegmentSrv;
+  }
+
+  buildSegmentModel(filters) {
     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: DefaultRemoveFilterValue });
 
     this.filterSegments = [];
-    this.target.filters.forEach((f, index) => {
+    filters.forEach((f, index) => {
       switch (index % 4) {
         case 0:
           this.filterSegments.push(this.uiSegmentSrv.newKey(f));
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index a0a37a5ab83..9cb24815df0 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,8 +1,11 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject"  metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
+    <query-editor target="ctrl.target" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleTargetChange" ui-segment-srv=ctrl.uiSegmentSrv></query-editor>
+  <!-- <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject"  metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
   <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
     ></stackdriver-filter>
-  <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
+    <aggregation-picker value-type="ctrl.target.valueType" metric-kind="ctrl.target.metricKind" aggregation="ctrl.target.aggregation" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleAggregationChange"></aggregation-picker>
+
+  <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
   <!-- <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
     ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8feb2f7dec1..45dabcdd93d 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -3,57 +3,33 @@ import appEvents from 'app/core/app_events';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { MetricPicker } from './components/MetricPicker';
-import { OptionPicker } from './components/OptionPicker';
-import { OptionGroupPicker } from './components/OptionGroupPicker';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { registerAngularDirectives } from './angular_wrappers';
+import { Target, QueryMeta } from './types';
 
-export interface QueryMeta {
-  alignmentPeriod: string;
-  rawQuery: string;
-  rawQueryString: string;
-  metricLabels: { [key: string]: string[] };
-  resourceLabels: { [key: string]: string[] };
-}
+export const DefaultTarget = {
+  defaultProject: 'loading project...',
+  metricType: '',
+  service: '',
+  metric: '',
+  unit: '',
+  aggregation: {
+    crossSeriesReducer: 'REDUCE_MEAN',
+    alignmentPeriod: 'stackdriver-auto',
+    perSeriesAligner: 'ALIGN_MEAN',
+    groupBys: [],
+  },
+  filters: [],
+  showAggregationOptions: false,
+  aliasBy: '',
+  metricKind: '',
+  valueType: '',
+};
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
-  target: {
-    defaultProject: string;
-    unit: string;
-    metricType: string;
-    service: string;
-    refId: string;
-    aggregation: {
-      crossSeriesReducer: string;
-      alignmentPeriod: string;
-      perSeriesAligner: string;
-      groupBys: string[];
-    };
-    filters: string[];
-    aliasBy: string;
-    metricKind: any;
-    valueType: any;
-  };
+  target: Target;
 
-  defaults = {
-    defaultProject: 'loading project...',
-    metricType: '',
-    service: '',
-    metric: '',
-    unit: '',
-    aggregation: {
-      crossSeriesReducer: 'REDUCE_MEAN',
-      alignmentPeriod: 'stackdriver-auto',
-      perSeriesAligner: 'ALIGN_MEAN',
-      groupBys: [],
-    },
-    filters: [],
-    showAggregationOptions: false,
-    aliasBy: '',
-    metricKind: '',
-    valueType: '',
-  };
+  defaults = DefaultTarget;
 
   showHelp: boolean;
   showLastQuery: boolean;
@@ -63,50 +39,41 @@ export class StackdriverQueryCtrl extends QueryCtrl {
 
   loadLabelsPromise: Promise<any>;
   templateSrv: any;
+  $rootScope: any;
+  uiSegmentSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector, templateSrv, private $rootScope) {
+  constructor($scope, $injector, templateSrv, $rootScope, uiSegmentSrv) {
     super($scope, $injector);
     this.templateSrv = templateSrv;
+    this.$rootScope = $rootScope;
+    this.uiSegmentSrv = uiSegmentSrv;
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
-    react2AngularDirective('optionPicker', OptionPicker, [
-      'options',
-      'onChange',
-      'selected',
-      'searchable',
-      'className',
-      'placeholder',
-    ]);
-    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
-      'groups',
-      'onChange',
-      'selected',
-      'searchable',
-      'className',
-      'placeholder',
-    ]);
-    react2AngularDirective('metricPicker', MetricPicker, [
-      'target',
-      ['onChange', { watchDepth: 'reference' }],
-      'defaultProject',
-      'metricType',
-      ['templateSrv', { watchDepth: 'reference' }],
-      ['datasource', { watchDepth: 'reference' }],
-    ]);
-    this.getLabels();
+    // this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    // this.handleAggregationChange = this.handleAggregationChange.bind(this);
+    this.handleTargetChange = this.handleTargetChange.bind(this);
+    registerAngularDirectives();
+    // this.getLabels();
   }
 
-  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
-    this.target.metricType = type;
-    this.target.unit = unit;
-    this.target.valueType = valueType;
-    this.target.metricKind = metricKind;
-    this.$rootScope.$broadcast('metricTypeChanged');
-    this.getLabels();
-    this.refresh();
+  // handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+  //   this.target.metricType = type;
+  //   this.target.unit = unit;
+  //   this.target.valueType = valueType;
+  //   this.target.metricKind = metricKind;
+  //   this.$rootScope.$broadcast('metricTypeChanged');
+  //   this.getLabels();
+  //   this.refresh();
+  // }
+
+  // handleAggregationChange(crossSeriesReducer) {
+  //   this.target.aggregation.crossSeriesReducer = crossSeriesReducer;
+  //   this.refresh();
+  // }
+  handleTargetChange(target: Target) {
+    console.log(target);
   }
 
   async getLabels() {
@@ -116,11 +83,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
         this.labelData = meta;
         resolve();
       } catch (error) {
-        if (error.data && error.data.message) {
-          console.log(error.data.message);
-        } else {
-          console.log(error);
-        }
         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
         resolve();
       }
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 99f5386b608..4ab71839971 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -1,7 +1,7 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 import { FilterSegments } from './filter_segments';
-import { QueryMeta } from './query_ctrl';
+import { QueryMeta } from './types';
 // import appEvents from 'app/core/app_events';
 
 export class StackdriverFilter {
@@ -62,13 +62,13 @@ export class StackdriverFilterCtrl {
 
     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' });
 
-    this.filterSegments = new FilterSegments(
-      this.uiSegmentSrv,
-      this.target,
-      this.getFilterKeys.bind(this),
-      this.getFilterValues.bind(this)
-    );
-    this.filterSegments.buildSegmentModel();
+    // this.filterSegments = new FilterSegments(
+    //   this.uiSegmentSrv,
+    //   this.target,
+    //   this.getFilterKeys.bind(this),
+    //   this.getFilterValues.bind(this)
+    // );
+    // this.filterSegments.buildSegmentModel();
   }
 
   // async getLabels() {
diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts
index df4c2886522..fa46800ce21 100644
--- a/public/app/plugins/datasource/stackdriver/types.ts
+++ b/public/app/plugins/datasource/stackdriver/types.ts
@@ -19,3 +19,30 @@ export interface VariableQueryData {
   metricTypes: Array<{ value: string; name: string }>;
   services: Array<{ value: string; name: string }>;
 }
+
+export interface Target {
+  defaultProject: string;
+  unit: string;
+  metricType: string;
+  service: string;
+  refId: string;
+  aggregation: {
+    crossSeriesReducer: string;
+    alignmentPeriod: string;
+    perSeriesAligner: string;
+    groupBys: string[];
+  };
+  filters: string[];
+  aliasBy: string;
+  metricKind: any;
+  valueType: any;
+}
+
+export interface QueryMeta {
+  alignmentPeriod: string;
+  rawQuery: string;
+  rawQueryString: string;
+  metricLabels: { [key: string]: string[] };
+  resourceLabels: { [key: string]: string[] };
+  resourceTypes: string[];
+}

From 73b5bc680fa6013ac62caf195360f156ee29b1f6 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 13:14:55 +0100
Subject: [PATCH 014/352] Wrap react select component in angular directive

---
 .../stackdriver/components/OptionPicker.tsx   | 48 +++++++++++++++++++
 .../stackdriver/partials/query.filter.html    | 34 ++++++-------
 .../datasource/stackdriver/query_ctrl.ts      |  9 ++++
 .../stackdriver/query_filter_ctrl.ts          | 16 +++++--
 4 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
new file mode 100644
index 00000000000..f83777e5f79
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+// import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'react-select';
+// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import _ from 'lodash';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, options, selected, placeholder, className } = this.props;
+    const selectedOption = options.find(metric => metric.value === selected);
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={options}
+        components={{
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isDisabled={false}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index b96b0720e33..1d87c8a3005 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,26 +1,26 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <select
-      class="gf-form-input width-12"
-      ng-model="ctrl.service"
-      ng-options="f.value as f.text for f in ctrl.services"
-      ng-change="ctrl.onServiceChange(ctrl.service)"
-    ></select>
+    <option-picker
+      onChange="ctrl.handleServiceChange"
+      selected="ctrl.service"
+      options="ctrl.services"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
+  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
+</div>
+<div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <gf-form-dropdown
-      model="ctrl.metricType"
-      get-options="ctrl.metrics"
-      class="min-width-20"
-      disabled
-      type="text"
-      allow-custom="true"
-      lookup-text="true"
-      css-class="min-width-12"
-      on-change="ctrl.onMetricTypeChange()"
-    ></gf-form-dropdown>
+    <option-picker
+      onChange="ctrl.handleMetricTypeChange"
+      selected="ctrl.metricType"
+      options="ctrl.metrics"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index c2607964456..3186a5e2012 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,6 +2,8 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
+import { OptionPicker } from './components/OptionPicker';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -64,6 +66,13 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+    react2AngularDirective('optionPicker', OptionPicker, [
+      'options',
+      'onChange',
+      'selected',
+      'className',
+      'placeholder',
+    ]);
   }
 
   onDataReceived(dataList) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 0f5dce559fd..7926da9aa1c 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -59,6 +59,13 @@ export class StackdriverFilterCtrl {
       .then(this.getLabels.bind(this));
 
     this.initSegments($scope.hideGroupBys);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    this.handleServiceChange = this.handleServiceChange.bind(this);
+  }
+
+  handleMetricTypeChange(value) {
+    this.metricType = value;
+    this.onMetricTypeChange();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -110,7 +117,7 @@ export class StackdriverFilterCtrl {
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        text: m.serviceShortName,
+        label: m.serviceShortName,
       };
     });
 
@@ -128,7 +135,8 @@ export class StackdriverFilterCtrl {
         value: m.type,
         serviceShortName: m.serviceShortName,
         text: m.displayName,
-        title: m.description,
+        label: m.displayName,
+        description: m.description,
       };
     });
 
@@ -167,8 +175,8 @@ export class StackdriverFilterCtrl {
     });
   }
 
-  onServiceChange() {
-    this.target.service = this.service;
+  handleServiceChange(service) {
+    this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
     this.setMetricType();
     this.getLabels();

From 5370f78ee708f3a6b0a53aa56a9cca8c10ce0a90 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:11:18 +0100
Subject: [PATCH 015/352] wip: add basic option header

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ++++++++++++
 public/sass/_grafana.scss                          |  1 +
 public/sass/components/_group-heading.scss         |  5 +++++
 3 files changed, 18 insertions(+)
 create mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 create mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
new file mode 100644
index 00000000000..76012ed3e7f
--- /dev/null
+++ b/public/app/core/components/Picker/GroupHeading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { components } from 'react-select';
+
+export const GroupHeading = props => {
+  return (
+    <label className="description-picker-option__button btn picker-option-group">
+      <components.GroupHeading {...props} />
+    </label>
+  );
+};
+
+export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index bfb186c0b02..c29abb4fa4b 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -103,6 +103,7 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
+@import 'components/group-heading';
 @import 'components/value-mappings';
 
 // PAGES
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
new file mode 100644
index 00000000000..9656277d123
--- /dev/null
+++ b/public/sass/components/_group-heading.scss
@@ -0,0 +1,5 @@
+.picker-option-group {
+  cursor: default;
+  font-weight: $lead-font-weight;
+  color: $btn-primary-bg-hl;
+}

From fe4c77a8a403886d9afc37160b3bc6de0db332a6 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:12:33 +0100
Subject: [PATCH 016/352] wip: add option group component

---
 .../components/OptionGroupPicker.tsx          | 53 +++++++++++++++++++
 .../stackdriver/components/OptionPicker.tsx   | 15 +++---
 .../stackdriver/partials/query.filter.html    | 14 ++---
 .../datasource/stackdriver/query_ctrl.ts      | 10 ++++
 .../stackdriver/query_filter_ctrl.ts          | 39 +++++++++++++-
 5 files changed, 117 insertions(+), 14 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
new file mode 100644
index 00000000000..7401b226413
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Select from 'react-select';
+import _ from 'lodash';
+
+import GroupHeading from 'app/core/components/Picker/GroupHeading';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+
+export interface Props {
+  onChange: (value: string) => void;
+  groups: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionGroupPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
+    const options = _.flatten(groups.map(o => o.options));
+    const selectedOption = options.find(option => option.value === selected);
+
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={groups}
+        components={{
+          GroupHeading,
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isSearchable={searchable}
+        maxMenuHeight={50}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index f83777e5f79..3d99ed3bafc 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
-// import SimplePicker from 'app/core/components/Picker/SimplePicker';
 import Select from 'react-select';
-// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import _ from 'lodash';
+
 import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
 import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
 import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-import _ from 'lodash';
 
 export interface Props {
   onChange: (value: string) => void;
   options: any[];
+  searchable: boolean;
   selected: string;
   placeholder?: string;
   className?: string;
+  groups?: boolean;
 }
 
 export class OptionPicker extends React.Component<Props, any> {
@@ -22,8 +23,9 @@ export class OptionPicker extends React.Component<Props, any> {
   }
 
   render() {
-    const { onChange, options, selected, placeholder, className } = this.props;
-    const selectedOption = options.find(metric => metric.value === selected);
+    const { onChange, options, selected, placeholder, className, searchable } = this.props;
+    const selectedOption = options.find(option => option.value === selected);
+
     return (
       <Select
         placeholder={placeholder}
@@ -36,7 +38,8 @@ export class OptionPicker extends React.Component<Props, any> {
           NoOptionsMessage,
         }}
         styles={ResetStyles}
-        isDisabled={false}
+        isSearchable={searchable}
+        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 1d87c8a3005..df3821ac463 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -5,8 +5,9 @@
       onChange="ctrl.handleServiceChange"
       selected="ctrl.service"
       options="ctrl.services"
-      placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
+      searchable="false"
+      placeholder="ctrl.defaultServiceValue"
+      className="&quot;width-15&quot;"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -14,13 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.metricType"
-      options="ctrl.metrics"
+      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      searchable="true"
       placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
-    ></option-picker>
+      className="&quot;width-15&quot;"
+    ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 3186a5e2012..8c00d6caddb 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -3,6 +3,7 @@ import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
 import { OptionPicker } from './components/OptionPicker';
+import { OptionGroupPicker } from './components/OptionGroupPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -70,6 +71,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'options',
       'onChange',
       'selected',
+      'searchable',
+      'className',
+      'placeholder',
+    ]);
+    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
+      'groups',
+      'onChange',
+      'selected',
+      'searchable',
       'className',
       'placeholder',
     ]);
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 7926da9aa1c..dd7178ecca0 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -36,6 +36,7 @@ export class StackdriverFilterCtrl {
   metricType: string;
   metricDescriptors: any[];
   metrics: any[];
+  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -52,6 +53,7 @@ export class StackdriverFilterCtrl {
 
     this.metricDescriptors = [];
     this.metrics = [];
+    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -106,6 +108,7 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
+      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -113,11 +116,11 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, text: this.$scope.defaultServiceValue };
+    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        label: m.serviceShortName,
+        label: _.startCase(m.serviceShortName),
       };
     });
 
@@ -128,6 +131,37 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
   }
 
+  getMetricGroups() {
+    return this.metrics.reduce((acc, curr) => {
+      const group = acc.find(group => group.service === curr.service);
+      if (group) {
+        group.options = [...group.options, { value: curr.value, label: curr.label }];
+      } else {
+        acc = [
+          ...acc,
+          {
+            label: _.startCase(curr.serviceShortName),
+            service: curr.service,
+            options: [{ value: curr.value, label: curr.label }],
+          },
+        ];
+      }
+      return acc;
+    }, []);
+  }
+
+  insertTemplateVariables(options) {
+    const templateVariables = {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+    return [templateVariables, { label: 'Metrics', options }];
+  }
+
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
@@ -178,6 +212,7 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
+    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {

From 2ac1fe2a17d34c947ad55e41458938db9d6b9a73 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:14:06 +0100
Subject: [PATCH 017/352] remove redundant default value

---
 .../datasource/stackdriver/datasource.ts      |  1 +
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/partials/query.filter.html    | 12 ++--
 .../datasource/stackdriver/query_ctrl.ts      |  7 +-
 .../stackdriver/query_filter_ctrl.ts          | 72 +++++++++++--------
 .../specs/query_filter_ctrl.test.ts           |  2 -
 6 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index d1545655652..7b1afbae5ac 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -274,6 +274,7 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
+
           return m;
         });
       }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 5c7bc8935b1..66961d106aa 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,6 +1,5 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource" default-dropdown-value="ctrl.defaultDropdownValue"
-    default-service-value="ctrl.defaultServiceValue"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index df3821ac463..583744d0e67 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -6,8 +6,8 @@
       selected="ctrl.service"
       options="ctrl.services"
       searchable="false"
-      placeholder="ctrl.defaultServiceValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Services'"
+      className="'width-15'"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -17,11 +17,11 @@
     <span class="gf-form-label width-9 query-keyword">Metric</span>
     <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.metricType"
-      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      selected="ctrl.target.metricType"
+      groups="ctrl.getMetricGroups()"
       searchable="true"
-      placeholder="ctrl.defaultDropdownValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Metric'"
+      className="'width-15'"
     ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8c00d6caddb..cf22802ae76 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -34,13 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     valueType: any;
   };
 
-  defaultDropdownValue = 'Select Metric';
-  defaultServiceValue = 'All Services';
-
   defaults = {
     defaultProject: 'loading project...',
-    metricType: this.defaultDropdownValue,
-    service: this.defaultServiceValue,
+    metricType: '',
+    service: '',
     metric: '',
     unit: '',
     aggregation: {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index dd7178ecca0..ba96cfc5a60 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -15,8 +15,6 @@ export class StackdriverFilter {
         target: '=',
         datasource: '=',
         refresh: '&',
-        defaultDropdownValue: '<',
-        defaultServiceValue: '<',
         hideGroupBys: '<',
       },
     };
@@ -48,9 +46,6 @@ export class StackdriverFilterCtrl {
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
     this.datasource = $scope.datasource;
     this.target = $scope.target;
-    this.metricType = $scope.defaultDropdownValue;
-    this.service = $scope.defaultServiceValue;
-
     this.metricDescriptors = [];
     this.metrics = [];
     this.metricGroups = [];
@@ -66,7 +61,7 @@ export class StackdriverFilterCtrl {
   }
 
   handleMetricTypeChange(value) {
-    this.metricType = value;
+    this.target.metricType = value;
     this.onMetricTypeChange();
   }
 
@@ -116,7 +111,6 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
@@ -128,10 +122,10 @@ export class StackdriverFilterCtrl {
       this.service = this.target.service;
     }
 
-    return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
+    return services.length > 0 ? _.uniqBy(services, 'value') : [];
   }
 
-  getMetricGroups() {
+  getMetricGroupsOld() {
     return this.metrics.reduce((acc, curr) => {
       const group = acc.find(group => group.service === curr.service);
       if (group) {
@@ -150,6 +144,27 @@ export class StackdriverFilterCtrl {
     }, []);
   }
 
+  getMetricGroups() {
+    return [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Metrics',
+        options: this.metrics,
+      },
+    ];
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+  }
+
   insertTemplateVariables(options) {
     const templateVariables = {
       label: 'Template Variables',
@@ -174,29 +189,28 @@ export class StackdriverFilterCtrl {
       };
     });
 
-    let result;
-    if (this.target.service === this.$scope.defaultServiceValue) {
-      result = metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
-    } else {
-      result = metrics.filter(m => m.service === this.target.service);
+    const metricsByService = metrics.filter(m => m.service === this.target.service);
+    if (
+      metricsByService.length > 0 &&
+      !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
+    ) {
+      this.target.metricType = metricsByService[0].value;
     }
-
-    if (result.find(m => m.value === this.templateSrv.replace(this.target.metricType))) {
-      this.metricType = this.target.metricType;
-    } else if (result.length > 0) {
-      this.metricType = this.target.metricType = result[0].value;
-    }
-    return result;
+    return metricsByService;
   }
 
   async getLabels() {
     this.loadLabelsPromise = new Promise(async resolve => {
       try {
-        const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-        this.metricLabels = meta.metricLabels;
-        this.resourceLabels = meta.resourceLabels;
-        this.resourceTypes = meta.resourceTypes;
-        resolve();
+        if (this.target.metricType) {
+          const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+          this.metricLabels = meta.metricLabels;
+          this.resourceLabels = meta.resourceLabels;
+          this.resourceTypes = meta.resourceTypes;
+          resolve();
+        } else {
+          resolve();
+        }
       } catch (error) {
         if (error.data && error.data.message) {
           console.log(error.data.message);
@@ -216,7 +230,7 @@ export class StackdriverFilterCtrl {
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {
-      this.target.metricType = this.$scope.defaultDropdownValue;
+      this.target.metricType = '';
     } else {
       this.$scope.refresh();
     }
@@ -229,9 +243,9 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    this.target.metricType = this.metricType;
+    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.metricType)
+      m => m.type === this.templateSrv.replace(this.target.metricType)
     );
     this.target.unit = unit;
     this.target.valueType = valueType;
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 020db584508..e8d04357cb8 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -409,8 +409,6 @@ function createCtrlWithFakes(existingFilters?: string[]) {
         return 'project';
       },
     },
-    defaultDropdownValue: 'Select Metric',
-    defaultServiceValue: 'All Services',
     refresh: () => {},
   };
 

From dcbe12989f180b9138ac9eb78898f5dc823e017e Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:57:30 +0100
Subject: [PATCH 018/352] use new option group in aggregation directive

---
 .../partials/query.aggregation.html           | 43 ++++++----
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 79 ++++++++++++++++---
 3 files changed, 97 insertions(+), 28 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 5f16d3fc61d..7396c6eb546 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,16 +2,21 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAggregationChange"
+        selected="ctrl.target.aggregation.crossSeriesReducer"
+        groups="ctrl.aggOptions"
+        searchable="true"
+        placeholder="'Select Aggregation'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
       <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
         <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
-        Advanced Options
+        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
       </a>
     </label>
   </div>
@@ -20,27 +25,35 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentChange"
+        selected="ctrl.target.aggregation.perSeriesAligner"
+        groups="ctrl.alignOptions"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
 
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentPeriodChange"
+        selected="ctrl.target.aggregation.alignmentPeriod"
+        groups="ctrl.alignmentPeriods"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
 
   <div class="gf-form gf-form--grow">
-    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
-      {{ctrl.formatAlignmentText()}}
-    </label>
+    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 66961d106aa..8760aaf1bb3 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,5 +1,6 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+    ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 628cc494242..f5ff3ad3143 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
-import * as options from './constants';
+import { alignmentPeriods } from './constants';
 import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
 import kbn from 'app/core/utils/kbn';
 
@@ -29,9 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = options.alignmentPeriods;
-    this.aggOptions = options.aggOptions;
-    this.alignOptions = options.alignOptions;
+    this.alignmentPeriods = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Periods',
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -39,30 +46,68 @@ export class StackdriverAggregationCtrl {
       self.setAggOptions();
       self.setAlignOptions();
     });
+    this.handleAlignmentChange = this.handleAlignmentChange.bind(this);
+    this.handleAggregationChange = this.handleAggregationChange.bind(this);
+    this.handleAlignmentPeriodChange = this.handleAlignmentPeriodChange.bind(this);
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    this.alignOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Options',
+        options: alignments,
+      },
+    ];
+    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
     }
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
-
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+    this.aggOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Aggregations',
+        options: aggregations,
+      },
+    ];
+  }
+
+  handleAlignmentChange(value) {
+    this.target.aggregation.perSeriesAligner = value;
+    this.$scope.refresh();
+  }
+
+  handleAggregationChange(value) {
+    this.target.aggregation.crossSeriesReducer = value;
+    this.$scope.refresh();
+  }
+
+  handleAlignmentPeriodChange(value) {
+    this.target.aggregation.alignmentPeriod = value;
+    this.$scope.refresh();
   }
 
   formatAlignmentText() {
-    const selectedAlignment = this.alignOptions.find(
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const selectedAlignment = alignments.find(
       ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
@@ -74,6 +119,16 @@ export class StackdriverAggregationCtrl {
     const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);

From 8afe48bb3e057a22cee779aad359602f7b428266 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:55:23 +0100
Subject: [PATCH 019/352] remove redundant default value

---
 .../datasource/stackdriver/components/OptionGroupPicker.tsx      | 1 -
 .../plugins/datasource/stackdriver/components/OptionPicker.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
index 7401b226413..f7863dd2a16 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -41,7 +41,6 @@ export class OptionGroupPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index 3d99ed3bafc..64d68f1bd70 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -39,7 +39,6 @@ export class OptionPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}

From 5affc55756f389752d1adf69395b7929d615d595 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:57:57 +0100
Subject: [PATCH 020/352] update failing tests

---
 .../stackdriver/query_aggregation_ctrl.ts     |  6 +-
 .../stackdriver/query_filter_ctrl.ts          | 14 +----
 .../specs/query_aggregation_ctrl.test.ts      | 57 +++++++++++++++++--
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index f5ff3ad3143..d4478c6214c 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,6 +52,7 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
+    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
@@ -78,7 +79,7 @@ export class StackdriverAggregationCtrl {
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
     this.aggOptions = [
@@ -116,7 +117,8 @@ export class StackdriverAggregationCtrl {
   }
 
   deselectAggregationOption(notValidOptionValue: string) {
-    const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
+    const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index ba96cfc5a60..74ca2c9b067 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -160,23 +160,11 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        description: `$${v.definition}`,
+        // description: `$${v.definition}`,
       })),
     };
   }
 
-  insertTemplateVariables(options) {
-    const templateVariables = {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-        description: `$${v.definition}`,
-      })),
-    };
-    return [templateVariables, { label: 'Metrics', options }];
-  }
-
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 81011f5dfe0..6e83824d504 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,27 +17,68 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(11);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(2);
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          expect(ctrl.alignOptions.length).toBe(9);
-          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(11);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
+      describe('and result is double and delta and no group by is used', () => {
+        beforeEach(async () => {
+          ctrl = new StackdriverAggregationCtrl(
+            {
+              $on: () => {},
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'DELTA',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
+            }
+          );
+        });
+
+        it('should populate all alignment options except four', () => {
+          ctrl.setAlignOptions();
+          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(9);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+            expect['not'].arrayContaining([
+              'ALIGN_NEXT_OLDER',
+              'ALIGN_INTERPOLATE',
+              'ALIGN_COUNT_TRUE',
+              'ALIGN_COUNT_FALSE',
+              'ALIGN_FRACTION_TRUE',
+            ])
+          );
+        });
+      });
+
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -51,14 +92,18 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(10);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(ctrl.aggOptions.length).toBe(2);
+          expect(templateVariableGroup.options.length).toBe(1);
+          expect(aggOptionsGroup.options.length).toBe(10);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From 15ba05d7ee3f4afe12dacf8e7831fb2fdc9053fa Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:57:32 +0100
Subject: [PATCH 021/352] cleanup query filter

---
 .../stackdriver/partials/query.filter.html    |  2 +-
 .../stackdriver/query_filter_ctrl.ts          | 62 +++++--------------
 2 files changed, 15 insertions(+), 49 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 583744d0e67..632f89b8248 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -3,7 +3,7 @@
     <span class="gf-form-label width-9 query-keyword">Service</span>
     <option-picker
       onChange="ctrl.handleServiceChange"
-      selected="ctrl.service"
+      selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 74ca2c9b067..d270290abb2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -30,8 +30,6 @@ export class StackdriverFilterCtrl {
   resourceTypeValue = 'resource.type';
   loadLabelsPromise: Promise<any>;
 
-  service: string;
-  metricType: string;
   metricDescriptors: any[];
   metrics: any[];
   metricGroups: any[];
@@ -111,37 +109,12 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const services = this.metricDescriptors.map(m => {
-      return {
-        value: m.service,
-        label: _.startCase(m.serviceShortName),
-      };
-    });
+    const services = this.metricDescriptors.map(m => ({
+      value: m.service,
+      label: _.startCase(m.serviceShortName),
+    }));
 
-    if (services.find(m => m.value === this.target.service)) {
-      this.service = this.target.service;
-    }
-
-    return services.length > 0 ? _.uniqBy(services, 'value') : [];
-  }
-
-  getMetricGroupsOld() {
-    return this.metrics.reduce((acc, curr) => {
-      const group = acc.find(group => group.service === curr.service);
-      if (group) {
-        group.options = [...group.options, { value: curr.value, label: curr.label }];
-      } else {
-        acc = [
-          ...acc,
-          {
-            label: _.startCase(curr.serviceShortName),
-            service: curr.service,
-            options: [{ value: curr.value, label: curr.label }],
-          },
-        ];
-      }
-      return acc;
-    }, []);
+    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
   getMetricGroups() {
@@ -149,7 +122,7 @@ export class StackdriverFilterCtrl {
       this.getTemplateVariablesGroup(),
       {
         label: 'Metrics',
-        options: this.metrics,
+        options: this.getMetricsList(),
       },
     ];
   }
@@ -160,24 +133,18 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        // description: `$${v.definition}`,
       })),
     };
   }
 
   getMetricsList() {
-    const metrics = this.metricDescriptors.map(m => {
-      return {
-        service: m.service,
-        value: m.type,
-        serviceShortName: m.serviceShortName,
-        text: m.displayName,
-        label: m.displayName,
-        description: m.description,
-      };
-    });
+    const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
+      service: m.service,
+      value: m.type,
+      label: m.displayName,
+      description: m.description,
+    }));
 
-    const metricsByService = metrics.filter(m => m.service === this.target.service);
     if (
       metricsByService.length > 0 &&
       !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
@@ -212,12 +179,12 @@ export class StackdriverFilterCtrl {
   }
 
   handleServiceChange(service) {
-    this.target.service = this.service = service;
+    this.target.service = service;
     this.metrics = this.getMetricsList();
     this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
-    if (!this.metrics.find(m => m.value === this.target.metricType)) {
+    if (!this.metrics.some(m => m.value === this.target.metricType)) {
       this.target.metricType = '';
     } else {
       this.$scope.refresh();
@@ -231,7 +198,6 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)
     );

From a7bdd757ef0890ae92a21dfbc41843086c60b35d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:58:25 +0100
Subject: [PATCH 022/352] use same color for label as in explore dropdown

---
 public/sass/components/_group-heading.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
index 9656277d123..8fc39c0dc2a 100644
--- a/public/sass/components/_group-heading.scss
+++ b/public/sass/components/_group-heading.scss
@@ -1,5 +1,6 @@
 .picker-option-group {
   cursor: default;
+  color: $text-color-weak;
+  font-size: $font-size-sm;
   font-weight: $lead-font-weight;
-  color: $btn-primary-bg-hl;
 }

From a5f64a5668ceae9eaccedf2556724762f62e083f Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:59:13 +0100
Subject: [PATCH 023/352] fix remove filter bug

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index d270290abb2..8ce2dfde554 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -252,8 +252,10 @@ export class StackdriverFilterCtrl {
       return [];
     }
 
-    this.removeSegment.value = removeText;
-    return [...elements, this.removeSegment];
+    return [
+      ...elements,
+      this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
+    ];
   }
 
   async getGroupBys(segment) {

From 47b3901e7d40bc29a3f9ce916152422aefb05fdb Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 14:08:47 +0100
Subject: [PATCH 024/352] remove on metric type change

---
 .../datasource/stackdriver/query_filter_ctrl.ts        | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 8ce2dfde554..e617dba5945 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -60,7 +60,9 @@ export class StackdriverFilterCtrl {
 
   handleMetricTypeChange(value) {
     this.target.metricType = value;
-    this.onMetricTypeChange();
+    this.setMetricType();
+    this.$scope.refresh();
+    this.getLabels();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -191,12 +193,6 @@ export class StackdriverFilterCtrl {
     }
   }
 
-  async onMetricTypeChange() {
-    this.setMetricType();
-    this.$scope.refresh();
-    this.getLabels();
-  }
-
   setMetricType() {
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)

From 8430c5a4915219ef2e67d62c74ac08b88f56559c Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:25:13 +0100
Subject: [PATCH 025/352] use new generic picker

---
 .../components/OptionGroupPicker.tsx          | 52 ------------------
 .../stackdriver/components/OptionPicker.tsx   | 50 -----------------
 .../components/StackdriverPicker.tsx          | 53 +++++++++++++++++++
 .../partials/query.aggregation.html           | 16 +++---
 .../stackdriver/partials/query.filter.html    |  6 +--
 .../datasource/stackdriver/query_ctrl.ts      | 13 +----
 6 files changed, 66 insertions(+), 124 deletions(-)
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
deleted file mode 100644
index f7863dd2a16..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import GroupHeading from 'app/core/components/Picker/GroupHeading';
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  groups: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-}
-
-export class OptionGroupPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
-    const options = _.flatten(groups.map(o => o.options));
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={groups}
-        components={{
-          GroupHeading,
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
deleted file mode 100644
index 64d68f1bd70..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groups?: boolean;
-}
-
-export class OptionPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, options, selected, placeholder, className, searchable } = this.props;
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={options}
-        components={{
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
new file mode 100644
index 00000000000..b2c447feeff
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import _ from 'lodash';
+import Select from 'app/core/components/Select/Select';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+  groups?: boolean;
+}
+
+export class StackdriverPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  extractOptions(options) {
+    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+  }
+
+  onChange = item => {
+    const extractedOptions = this.extractOptions(this.props.options);
+    const option = extractedOptions.find(option => option.value === item.value);
+    this.props.onChange(option.value);
+  };
+
+  render() {
+    const { options, selected, placeholder, className, searchable } = this.props;
+    const extractedOptions = this.extractOptions(options);
+    const selectedOption = extractedOptions.find(option => option.value === selected);
+
+    return (
+      <Select
+        className={className}
+        isMulti={false}
+        isClearable={false}
+        backspaceRemovesValue={false}
+        onChange={this.onChange}
+        options={options}
+        autoFocus={false}
+        isSearchable={searchable}
+        openMenuOnFocus={true}
+        maxMenuHeight={500}
+        placeholder={placeholder}
+        noOptionsMessage={() => 'No options found'}
+        value={selectedOption}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 7396c6eb546..587f7a42991 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,10 +2,10 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
-        groups="ctrl.aggOptions"
+        options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
-        groups="ctrl.alignOptions"
+        options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
-        groups="ctrl.alignmentPeriods"
+        options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 632f89b8248..9e5f07fd6a0 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -15,14 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-group-picker
+    <option-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      groups="ctrl.getMetricGroups()"
+      options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-group-picker>
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index cf22802ae76..64b811b47e6 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,8 +2,7 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { OptionPicker } from './components/OptionPicker';
-import { OptionGroupPicker } from './components/OptionGroupPicker';
+import { StackdriverPicker } from './components/StackdriverPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -64,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', OptionPicker, [
+    react2AngularDirective('optionPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',
@@ -72,14 +71,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
     ]);
-    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
-      'groups',
-      'onChange',
-      'selected',
-      'searchable',
-      'className',
-      'placeholder',
-    ]);
   }
 
   onDataReceived(dataList) {

From ea1ce578ff58560c683a43ae76b9059d48e6a2e9 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:26:42 +0100
Subject: [PATCH 026/352] remove old group heading

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ------------
 public/sass/_grafana.scss                          |  1 -
 public/sass/components/_group-heading.scss         |  6 ------
 3 files changed, 19 deletions(-)
 delete mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 delete mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
deleted file mode 100644
index 76012ed3e7f..00000000000
--- a/public/app/core/components/Picker/GroupHeading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-
-export const GroupHeading = props => {
-  return (
-    <label className="description-picker-option__button btn picker-option-group">
-      <components.GroupHeading {...props} />
-    </label>
-  );
-};
-
-export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index c29abb4fa4b..bfb186c0b02 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -103,7 +103,6 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
-@import 'components/group-heading';
 @import 'components/value-mappings';
 
 // PAGES
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
deleted file mode 100644
index 8fc39c0dc2a..00000000000
--- a/public/sass/components/_group-heading.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.picker-option-group {
-  cursor: default;
-  color: $text-color-weak;
-  font-size: $font-size-sm;
-  font-weight: $lead-font-weight;
-}

From b46be0b6387f779b674362efed66ed93731f00df Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:28:35 +0100
Subject: [PATCH 027/352] remove linebreak

---
 public/app/plugins/datasource/stackdriver/datasource.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index 7b1afbae5ac..d1545655652 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -274,7 +274,6 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
-
           return m;
         });
       }

From d23d4c2ca02735576b9572100d4cd6c7b427bd53 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:31:11 +0100
Subject: [PATCH 028/352] rename directive

---
 .../stackdriver/partials/query.aggregation.html      | 12 ++++++------
 .../stackdriver/partials/query.filter.html           |  8 ++++----
 .../app/plugins/datasource/stackdriver/query_ctrl.ts |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 587f7a42991..88a85fa4d03 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,14 +2,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
         options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
-      ></option-group-picker>
+      ></stackdriver-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
         options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-picker>
+      ></stackdriver-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
         options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-picker>
+      ></stackdriver-picker>
     </div>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 9e5f07fd6a0..a31d34bece5 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,28 +1,28 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <option-picker
+    <stackdriver-picker
       onChange="ctrl.handleServiceChange"
       selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
-    ></option-picker>
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
       options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-picker>
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 64b811b47e6..a63aa243087 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -63,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', StackdriverPicker, [
+    react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',

From 738fd997cefc4ae3e4ac3abd8b0d6567c64082d8 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:46:07 +0100
Subject: [PATCH 029/352] remove console log

---
 .../app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index d4478c6214c..0077c74a46e 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,7 +52,6 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,

From 0c596a02746dfcd5bb21704ea18307aa0dc908ca Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 13:03:29 +0100
Subject: [PATCH 030/352] align input widths

---
 .../datasource/stackdriver/partials/query.aggregation.html    | 2 +-
 .../plugins/datasource/stackdriver/partials/query.editor.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 88a85fa4d03..ecbbeddf133 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -23,7 +23,7 @@
 </div>
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
-    <label class="gf-form-label query-keyword width-12">Aligner</label>
+    <label class="gf-form-label query-keyword width-15">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
       <stackdriver-picker
         onChange="ctrl.handleAlignmentChange"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 8760aaf1bb3..1357e97f05f 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -5,7 +5,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label query-keyword width-9">Alias By</span>
-      <input type="text" class="gf-form-input width-30" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
+      <input type="text" class="gf-form-input width-24" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
         ng-model-options="{ debounce: 500 }" />
     </div>
     <div class="gf-form gf-form--grow">
@@ -15,7 +15,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9 query-keyword">Project</span>
-      <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.defaultProject' css-class="min-width-12" />
+      <input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
     </div>
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">

From 5e4841cc6ebeb15f63463563875d4d10ea2132fd Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 14:30:46 +0100
Subject: [PATCH 031/352] fix condition that expands group if it has a selected
 child. also make it possible to pass expanded as a prop

---
 public/app/core/components/Select/OptionGroup.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Select/OptionGroup.tsx b/public/app/core/components/Select/OptionGroup.tsx
index a001f58c681..2e955579ed4 100644
--- a/public/app/core/components/Select/OptionGroup.tsx
+++ b/public/app/core/components/Select/OptionGroup.tsx
@@ -2,7 +2,11 @@ import React, { PureComponent } from 'react';
 import { GroupProps } from 'react-select/lib/components/Group';
 
 interface ExtendedGroupProps extends GroupProps<any> {
-  data: any;
+  data: {
+    label: string;
+    expanded: boolean;
+    options: any[];
+  };
 }
 
 interface State {
@@ -15,8 +19,10 @@ export default class OptionGroup extends PureComponent<ExtendedGroupProps, State
   };
 
   componentDidMount() {
-    if (this.props.selectProps) {
-      const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
+    if (this.props.data.expanded) {
+      this.setState({ expanded: true });
+    } else if (this.props.selectProps && this.props.selectProps.value) {
+      const { value } = this.props.selectProps.value;
 
       if (value && this.props.options.some(option => option.value === value)) {
         this.setState({ expanded: true });

From 5a9dd620a6d5071f2fa8e7c7370a3e3b2f6babf8 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 15:58:33 +0100
Subject: [PATCH 032/352] remove extra arrow div

---
 .../partials/query.aggregation.html           | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index ecbbeddf133..254c7b812cb 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -1,16 +1,16 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAggregationChange"
-        selected="ctrl.target.aggregation.crossSeriesReducer"
-        options="ctrl.aggOptions"
-        searchable="true"
-        placeholder="'Select Aggregation'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAggregationChange"
+      selected="ctrl.target.aggregation.crossSeriesReducer"
+      options="ctrl.aggOptions"
+      searchable="true"
+      placeholder="'Select Aggregation'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Aggregations'"
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
@@ -24,16 +24,16 @@
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAlignmentChange"
-        selected="ctrl.target.aggregation.perSeriesAligner"
-        options="ctrl.alignOptions"
-        searchable="true"
-        placeholder="'Select Alignment'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAlignmentChange"
+      selected="ctrl.target.aggregation.perSeriesAligner"
+      options="ctrl.alignOptions"
+      searchable="true"
+      placeholder="'Select Alignment'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Alignment Options'"
+    ></stackdriver-picker>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
@@ -41,16 +41,16 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAlignmentPeriodChange"
-        selected="ctrl.target.aggregation.alignmentPeriod"
-        options="ctrl.alignmentPeriods"
-        searchable="true"
-        placeholder="'Select Alignment'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAlignmentPeriodChange"
+      selected="ctrl.target.aggregation.alignmentPeriod"
+      options="ctrl.alignmentPeriods"
+      searchable="true"
+      placeholder="'Select Alignment'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Alignment Periods'"
+    ></stackdriver-picker>
   </div>
 
   <div class="gf-form gf-form--grow">

From 9507dfe13c8699b0f82b5c07d9125859a3e2ea4d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:01:12 +0100
Subject: [PATCH 033/352] move template variable logic to component

---
 .../components/StackdriverPicker.tsx          | 82 +++++++++++++++----
 .../stackdriver/partials/query.filter.html    |  4 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 50 +++--------
 .../datasource/stackdriver/query_ctrl.ts      |  2 +
 .../stackdriver/query_filter_ctrl.ts          | 39 ++-------
 5 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index b2c447feeff..b116d94f18d 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -9,28 +9,76 @@ export interface Props {
   selected: string;
   placeholder?: string;
   className?: string;
-  groups?: boolean;
+  groupName?: string;
+  templateVariables?: any[];
 }
 
-export class StackdriverPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
+interface State {
+  options: any[];
+}
 
-  extractOptions(options) {
-    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-  }
-
-  onChange = item => {
-    const extractedOptions = this.extractOptions(this.props.options);
-    const option = extractedOptions.find(option => option.value === item.value);
-    this.props.onChange(option.value);
+export class StackdriverPicker extends React.Component<Props, State> {
+  static defaultProps = {
+    templateVariables: [],
+    options: [],
+    groupName: 'Options',
   };
 
+  constructor(props) {
+    super(props);
+    this.state = { options: [] };
+  }
+
+  componentDidMount() {
+    this.setState({ options: this.buildOptions(this.props) });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
+      this.setState({ options: this.buildOptions(nextProps) });
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      !_.isEqual(nextProps.options, this.props.options) ||
+      !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
+    );
+  }
+
+  buildOptions({ templateVariables = [], groupName = '', options }) {
+    return templateVariables.length > 0
+      ? [
+          this.getTemplateVariablesGroup(),
+          {
+            label: groupName,
+            expanded: true,
+            options,
+          },
+        ]
+      : options;
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.props.templateVariables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
+
+  getSelectedOption() {
+    const { options } = this.state;
+    const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+    return allOptions.find(option => option.value === this.props.selected);
+  }
+
   render() {
-    const { options, selected, placeholder, className, searchable } = this.props;
-    const extractedOptions = this.extractOptions(options);
-    const selectedOption = extractedOptions.find(option => option.value === selected);
+    const { placeholder, className, searchable, onChange } = this.props;
+    const { options } = this.state;
+    const selectedOption = this.getSelectedOption();
 
     return (
       <Select
@@ -38,7 +86,7 @@ export class StackdriverPicker extends React.Component<Props, any> {
         isMulti={false}
         isClearable={false}
         backspaceRemovesValue={false}
-        onChange={this.onChange}
+        onChange={item => onChange(item.value)}
         options={options}
         autoFocus={false}
         isSearchable={searchable}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index a31d34bece5..a509aa44e62 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -18,7 +18,9 @@
     <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      options="ctrl.getMetricGroups()"
+      options="ctrl.getMetricsList()"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Metric Types'"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 0077c74a46e..c88b61725de 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -29,16 +29,10 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Alignment Periods',
-        options: alignmentPeriods.map(ap => ({
-          ...ap,
-          label: ap.text,
-        })),
-      },
-    ];
+    this.alignmentPeriods = alignmentPeriods.map(ap => ({
+      ...ap,
+      label: ap.text,
+    }));
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -52,42 +46,28 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    this.alignOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Alignment Options',
-        options: alignments,
-      },
-    ];
-    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
+    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
     }
   }
 
   setAggOptions() {
-    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
+      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
-    this.aggOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Aggregations',
-        options: aggregations,
-      },
-    ];
   }
 
   handleAlignmentChange(value) {
@@ -120,16 +100,6 @@ export class StackdriverAggregationCtrl {
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index a63aa243087..6256206d07e 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -70,6 +70,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'searchable',
       'className',
       'placeholder',
+      'groupName',
+      ['templateVariables', { watchDepth: 'reference' }],
     ]);
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index e617dba5945..a2f347e377a 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -32,7 +32,6 @@ export class StackdriverFilterCtrl {
 
   metricDescriptors: any[];
   metrics: any[];
-  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -46,7 +45,6 @@ export class StackdriverFilterCtrl {
     this.target = $scope.target;
     this.metricDescriptors = [];
     this.metrics = [];
-    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -103,7 +101,6 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
-      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -119,26 +116,6 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
-  getMetricGroups() {
-    return [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Metrics',
-        options: this.getMetricsList(),
-      },
-    ];
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-
   getMetricsList() {
     const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
       service: m.service,
@@ -183,7 +160,6 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = service;
     this.metrics = this.getMetricsList();
-    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.some(m => m.value === this.target.metricType)) {
@@ -194,13 +170,14 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.target.metricType)
-    );
-    this.target.unit = unit;
-    this.target.valueType = valueType;
-    this.target.metricKind = metricKind;
-    this.$rootScope.$broadcast('metricTypeChanged');
+    const metric = this.metricDescriptors.find(m => m.type === this.templateSrv.replace(this.target.metricType));
+    if (metric) {
+      const { valueType, metricKind, unit } = metric;
+      this.target.unit = unit;
+      this.target.valueType = valueType;
+      this.target.metricKind = metricKind;
+      this.$rootScope.$broadcast('metricTypeChanged');
+    }
   }
 
   async createLabelKeyElements() {

From 7ef09952574b59565810fbf54c7796060bdd4706 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:09:32 +0100
Subject: [PATCH 034/352] cleanup

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index b116d94f18d..ab903c453cb 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -33,14 +33,15 @@ export class StackdriverPicker extends React.Component<Props, State> {
     this.setState({ options: this.buildOptions(this.props) });
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
       this.setState({ options: this.buildOptions(nextProps) });
     }
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: Props) {
     return (
+      nextProps.selected !== this.props.selected ||
       !_.isEqual(nextProps.options, this.props.options) ||
       !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
     );

From 3c2ab68290438a03fc9d9aa7ba68ac46798eb248 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:19:49 +0100
Subject: [PATCH 035/352] rollback test state to before template variables were
 added

---
 .../specs/query_aggregation_ctrl.test.ts      | 57 ++-----------------
 1 file changed, 6 insertions(+), 51 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 6e83824d504..81011f5dfe0 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,68 +17,27 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
-              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(2);
-          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(aggOptionsGroup.options.length).toBe(11);
-          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(11);
+          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(alignOptionGroup.options.length).toBe(11);
-          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.alignOptions.length).toBe(9);
+          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
-      describe('and result is double and delta and no group by is used', () => {
-        beforeEach(async () => {
-          ctrl = new StackdriverAggregationCtrl(
-            {
-              $on: () => {},
-              target: {
-                valueType: 'DOUBLE',
-                metricKind: 'DELTA',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
-              },
-            },
-            {
-              replace: s => s,
-              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
-            }
-          );
-        });
-
-        it('should populate all alignment options except four', () => {
-          ctrl.setAlignOptions();
-          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(alignOptionGroup.options.length).toBe(9);
-          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
-            expect['not'].arrayContaining([
-              'ALIGN_NEXT_OLDER',
-              'ALIGN_INTERPOLATE',
-              'ALIGN_COUNT_TRUE',
-              'ALIGN_COUNT_FALSE',
-              'ALIGN_FRACTION_TRUE',
-            ])
-          );
-        });
-      });
-
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -92,18 +51,14 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
-              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-          expect(ctrl.aggOptions.length).toBe(2);
-          expect(templateVariableGroup.options.length).toBe(1);
-          expect(aggOptionsGroup.options.length).toBe(10);
-          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(10);
+          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From 74c2b22a7718da3d91cdf28d173ae169fbab7b32 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:27:24 +0100
Subject: [PATCH 036/352] remove debug logging

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index a2f347e377a..4012cb733d2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -146,11 +146,6 @@ export class StackdriverFilterCtrl {
           resolve();
         }
       } catch (error) {
-        if (error.data && error.data.message) {
-          console.log(error.data.message);
-        } else {
-          console.log(error);
-        }
         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
         resolve();
       }

From 575d7f8941a22ce2ef8a9a129264f8199eb9ec60 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:41:47 +0100
Subject: [PATCH 037/352] add max width to group header description

---
 public/sass/components/_form_select_box.scss | 28 +++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index a83ca95d038..1a2b9be524c 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -172,18 +172,22 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group__header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  justify-items: center;
-  cursor: pointer;
-  padding: 7px 10px;
-  width: 100%;
-  border-bottom: 1px solid $hr-border-color;
-  text-transform: capitalize;
+.gf-form-select-box__option-group {
+  max-width: 600px;
 
-  .fa {
-    padding-right: 2px;
+  .gf-form-select-box__option-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    justify-items: center;
+    cursor: pointer;
+    padding: 7px 10px;
+    width: 100%;
+    border-bottom: 1px solid $hr-border-color;
+    text-transform: capitalize;
+
+    .fa {
+      padding-right: 2px;
+    }
   }
 }

From 8e9cd83ee8052d688f24aff02ead3e0423176a2a Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:56:16 +0100
Subject: [PATCH 038/352] improve component performance

---
 .../stackdriver/components/StackdriverPicker.tsx         | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index ab903c453cb..30c17e1f983 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -40,11 +40,8 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   shouldComponentUpdate(nextProps: Props) {
-    return (
-      nextProps.selected !== this.props.selected ||
-      !_.isEqual(nextProps.options, this.props.options) ||
-      !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
-    );
+    const nextOptions = this.buildOptions(nextProps);
+    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
   }
 
   buildOptions({ templateVariables = [], groupName = '', options }) {
@@ -89,9 +86,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
         backspaceRemovesValue={false}
         onChange={item => onChange(item.value)}
         options={options}
-        autoFocus={false}
         isSearchable={searchable}
-        openMenuOnFocus={true}
         maxMenuHeight={500}
         placeholder={placeholder}
         noOptionsMessage={() => 'No options found'}

From 2046309de51fb85376ce50c9dc9c9da4f0cbfbee Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 19 Dec 2018 10:42:57 +0100
Subject: [PATCH 039/352] rewrite angular view

---
 .../features/alerting/partials/alert_tab.html | 336 ++++++++----------
 1 file changed, 155 insertions(+), 181 deletions(-)

diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 0e4e48a89a9..5fcc7ae5e44 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -1,191 +1,165 @@
-<div class="panel-option-section__body" ng-if="ctrl.alert">
-	<div class="edit-tab-with-sidemenu">
-		<aside class="edit-sidemenu-aside">
-			<ul class="edit-sidemenu">
-				<li ng-class="{active: ctrl.subTabIndex === 0}">
-					<a ng-click="ctrl.changeTabIndex(0)">Alert Config</a>
-				</li>
-				<li ng-class="{active: ctrl.subTabIndex === 1}">
-					<a ng-click="ctrl.changeTabIndex(1)">
-						Notifications <span class="muted">({{ctrl.alertNotifications.length}})</span>
-					</a>
-				</li>
-				<li ng-class="{active: ctrl.subTabIndex === 2}">
-					<a ng-click="ctrl.changeTabIndex(2)">State history</a>
-				</li>
-				<li>
-					<a ng-click="ctrl.delete()">Delete</a>
-				</li>
-			</ul>
-		</aside>
+<div ng-if="ctrl.alert">
+  <div class="alert alert-error m-b-2" ng-show="ctrl.error">
+    <i class="fa fa-warning"></i> {{ctrl.error}}
+  </div>
+  <div class="panel-option-section">
+    <div class="panel-option-section__body">
+      <div class="section">
+        <div class="gf-form">
+          <div class="gf-form">
+            <span class="gf-form-label width-6">Name</span>
+            <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
+          </div>
+          <div class="gf-form-inline">
+            <div class="gf-form">
+              <span class="gf-form-label width-9">Evaluate every</span>
+              <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
+            </div>
+            <div class="gf-form max-width-11">
+              <label class="gf-form-label width-5">For</label>
+              <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for"
+                     spellcheck='false' placeholder="5m">
+              <info-popover mode="right-absolute">
+                If an alert rule has a configured For and the query violates the configured
+                threshold it
+                will first go from OK to Pending.
+                Going from OK to Pending Grafana will not send any notifications. Once the alert
+                rule
+                has
+                been firing for more than For duration, it will change to Alerting and send alert
+                notifications.
+              </info-popover>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="panel-option-section">
+    <div class="panel-option-section__header">Conditions</div>
+    <div class="panel-option-section__body">
+      <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
+        <div class="gf-form">
+          <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
+                                property="conditionModel.operator.type" options="ctrl.evalOperators"
+                                custom="false"></metric-segment-model>
+          <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+        </div>
+        <div class="gf-form">
+          <query-part-editor class="gf-form-label query-part width-9"
+                             part="conditionModel.reducerPart"
+                             handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
+          </query-part-editor>
+          <span class="gf-form-label query-keyword">OF</span>
+        </div>
+        <div class="gf-form">
+          <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart"
+                             handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
+          </query-part-editor>
+        </div>
+        <div class="gf-form">
+          <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions"
+                                custom="false" css-class="query-keyword"
+                                on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
+          <input class="gf-form-input max-width-9" type="number" step="any"
+                 ng-hide="conditionModel.evaluator.params.length === 0"
+                 ng-model="conditionModel.evaluator.params[0]"
+                 ng-change="ctrl.evaluatorParamsChanged()" />
+          <label class="gf-form-label query-keyword"
+                 ng-show="conditionModel.evaluator.params.length === 2">TO</label>
+          <input class="gf-form-input max-width-9" type="number" step="any"
+                 ng-if="conditionModel.evaluator.params.length === 2"
+                 ng-model="conditionModel.evaluator.params[1]"
+                 ng-change="ctrl.evaluatorParamsChanged()" />
+        </div>
+        <div class="gf-form">
+          <label class="gf-form-label">
+            <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
+              <i class="fa fa-trash"></i>
+            </a>
+          </label>
+        </div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label dropdown">
+          <a class="pointer dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-plus"></i>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
+              <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
+            </li>
+          </ul>
+        </label>
+      </div>
+      <div class="gf-form-group">
+        <div class="gf-form">
+          <span class="gf-form-label width-18">If no data or all values are null</span>
+          <span class="gf-form-label query-keyword">SET STATE TO</span>
+          <div class="gf-form-select-wrapper">
+            <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
+                    ng-options="f.value as f.text for f in ctrl.noDataModes">
+            </select>
+          </div>
+        </div>
 
-		<div class="edit-tab-content">
-			<div ng-if="ctrl.subTabIndex === 0">
-				<div class="alert alert-error m-b-2" ng-show="ctrl.error">
-					<i class="fa fa-warning"></i> {{ctrl.error}}
-				</div>
+        <div class="gf-form">
+          <span class="gf-form-label width-18">If execution error or timeout</span>
+          <span class="gf-form-label query-keyword">SET STATE TO</span>
+          <div class="gf-form-select-wrapper">
+            <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
+                    ng-options="f.value as f.text for f in ctrl.executionErrorModes">
+            </select>
+          </div>
+        </div>
 
-				<div class="gf-form-group">
-					<h5 class="section-heading">Alert Config</h5>
-					<div class="gf-form">
-						<span class="gf-form-label width-6">Name</span>
-						<input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
-					</div>
-					<div class="gf-form-inline">
-						<div class="gf-form">
-							<span class="gf-form-label width-9">Evaluate every</span>
-							<input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
-						</div>
-						<div class="gf-form max-width-11">
-							<label class="gf-form-label width-5">For</label>
-							<input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for" spellcheck='false' placeholder="5m">
-							<info-popover mode="right-absolute">
-									If an alert rule has a configured For and the query violates the configured threshold it will first go from OK to Pending.
-									Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been firing for more than For duration, it will change to Alerting and send alert notifications.
-							</info-popover>
-						</div>
-					</div>
-				</div>
+        <div class="gf-form-button-row">
+          <button class="btn btn-inverse" ng-click="ctrl.test()">
+            Test Rule
+          </button>
+        </div>
+      </div>
 
-				<div class="gf-form-group">
-					<h5 class="section-heading">Conditions</h5>
-					<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
-						<div class="gf-form">
-							<metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model>
-							<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
-						</div>
-									<div class="gf-form">
-							<query-part-editor class="gf-form-label query-part width-9" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
-							</query-part-editor>
-										<span class="gf-form-label query-keyword">OF</span>
-						</div>
-						<div class="gf-form">
-							<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
-							</query-part-editor>
-						</div>
-						<div class="gf-form">
-							<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
-							<input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()">
-							<label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
-							<input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()">
-						</div>
-						<div class="gf-form">
-							<label class="gf-form-label">
-								<a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
-									<i class="fa fa-trash"></i>
-								</a>
-							</label>
-						</div>
-					</div>
+      <div class="gf-form-group" ng-if="ctrl.testing">
+        Evaluating rule <i class="fa fa-spinner fa-spin"></i>
+      </div>
 
-					<div class="gf-form">
-						<label class="gf-form-label dropdown">
-							<a class="pointer dropdown-toggle" data-toggle="dropdown">
-								<i class="fa fa-plus"></i>
-							</a>
-							<ul class="dropdown-menu" role="menu">
-								<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
-									<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
-								</li>
-							</ul>
-						</label>
-					</div>
-				</div>
-
-				<div class="gf-form-group">
-					<div class="gf-form">
-									<span class="gf-form-label width-18">If no data or all values are null</span>
-									<span class="gf-form-label query-keyword">SET STATE TO</span>
-						<div class="gf-form-select-wrapper">
-							<select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes">
-							</select>
-						</div>
-					</div>
-
-					<div class="gf-form">
-									<span class="gf-form-label width-18">If execution error or timeout</span>
-									<span class="gf-form-label query-keyword">SET STATE TO</span>
-						<div class="gf-form-select-wrapper">
-							<select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes">
-							</select>
-						</div>
-					</div>
-
-					<div class="gf-form-button-row">
-						<button class="btn btn-inverse" ng-click="ctrl.test()">
-							Test Rule
-						</button>
-					</div>
-				</div>
-
-				<div class="gf-form-group" ng-if="ctrl.testing">
-					Evaluating rule <i class="fa fa-spinner fa-spin"></i>
-				</div>
-
-				<div class="gf-form-group" ng-if="ctrl.testResult">
-					<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
-				</div>
-			</div>
-
-			<div class="gf-form-group" ng-if="ctrl.subTabIndex === 1">
-				<h5 class="section-heading">Notifications</h5>
-				<div class="gf-form-inline">
-					<div class="gf-form max-width-30">
-						<span class="gf-form-label width-8">Send to</span>
-						<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications" ng-style="{'background-color': nc.bgColor }">
+      <div class="gf-form-group" ng-if="ctrl.testResult">
+        <json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
+      </div>
+    </div>
+  </div>
+  <div class="panel-option-section">
+    <div class="panel-option-section__header">Notifications</div>
+    <div class="panel-option-section__body">
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-30">
+          <span class="gf-form-label width-8">Send to</span>
+          <span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications"
+                ng-style="{'background-color': nc.bgColor }">
 							<i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
-							<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
+							<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)"
+                 ng-if="nc.isDefault === false"></i>
 						</span>
-						<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
-					</div>
-				</div>
-				<div class="gf-form gf-form--v-stretch">
-					<span class="gf-form-label width-8">Message</span>
-					<textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message"  placeholder="Notification message details..."></textarea>
-				</div>
-			</div>
-
-			<div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
-				<button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button>
-						<h5 class="section-heading" style="whitespace: nowrap">
-					State history <span class="muted small">(last 50 state changes)</span>
-				</h5>
-
-				<div ng-show="ctrl.alertHistory.length === 0">
-					<br>
-					<i>No state changes recorded</i>
-				</div>
-
-				<ol class="alert-rule-list" >
-					<li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
-						<div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
-							<i class="{{al.stateModel.iconClass}}"></i>
-						</div>
-						<div class="alert-rule-item__body">
-							<div class="alert-rule-item__header">
-								<div class="alert-rule-item__text">
-									<span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
-								</div>
-							</div>
-							<span class="alert-list-info">{{al.info}}</span>
-						</div>
-						<div class="alert-rule-item__time">
-							<span>{{al.time}}</span>
-						</div>
-					</li>
-				</ol>
-			</div>
-		</div>
-	</div>
+          <metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()"
+                          on-change="ctrl.notificationAdded()"></metric-segment>
+        </div>
+      </div>
+      <div class="gf-form gf-form--v-stretch">
+        <span class="gf-form-label width-8">Message</span>
+        <textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message"
+                  placeholder="Notification message details..."></textarea>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.alert">
-	<div class="empty-list-cta">
-		<div class="empty-list-cta__title">Panel has no alert rule defined</div>
-			<button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
-				<i class="icon-gf icon-gf-alert"></i>
-				Create Alert
-			</button>
-		</div>
-	</div>
+  <div class="empty-list-cta">
+    <div class="empty-list-cta__title">Panel has no alert rule defined</div>
+    <button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
+      <i class="icon-gf icon-gf-alert"></i>
+      Create Alert
+    </button>
+  </div>
 </div>

From f95359fb344ca94545d9d234cf7c43c289448358 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 19 Dec 2018 12:58:10 +0100
Subject: [PATCH 040/352] Notify user on query error

---
 .../features/dashboard/dashgrid/DataPanel.tsx | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 9926410f40d..72f405dcbe7 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -1,5 +1,6 @@
 // Library
 import React, { Component } from 'react';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 // Services
 import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -138,7 +139,7 @@ export class DataPanel extends Component<Props, State> {
     const timeSeries = response.data;
 
     if (isFirstLoad && loading === LoadingState.Loading) {
-      return this.renderLoadingSpinner();
+      return this.renderLoadingState();
     }
 
     if (!queries.length) {
@@ -151,7 +152,7 @@ export class DataPanel extends Component<Props, State> {
 
     return (
       <>
-        {this.renderLoadingSpinner()}
+        {this.renderLoadingState()}
         {this.props.children({
           timeSeries,
           loading,
@@ -160,15 +161,26 @@ export class DataPanel extends Component<Props, State> {
     );
   }
 
-  private renderLoadingSpinner(): JSX.Element {
+  private renderLoadingState(): JSX.Element {
     const { loading } = this.state;
-
     if (loading === LoadingState.Loading) {
       return (
         <div className="panel-loading">
           <i className="fa fa-spinner fa-spin" />
         </div>
       );
+    } else if (loading === LoadingState.Error) {
+      return (
+        <Tooltip
+          content="Request Error"
+          className="popper__manager--block"
+          refClassName={`panel-info-corner panel-info-corner--error`}
+          placement="bottom-start"
+        >
+          <i className="fa" />
+          <span className="panel-info-corner-inner" />
+        </Tooltip>
+      );
     }
 
     return null;

From f3ba3b4df0e4a71e32b0e70024a11ba9204665c5 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 19 Dec 2018 13:09:53 +0100
Subject: [PATCH 041/352] render editor toolbar buttons

---
 .../features/dashboard/dashgrid/AlertTab.tsx  | 22 ++++++++++++++++++-
 .../dashboard/dashgrid/PanelEditor.tsx        |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index 7df7864c758..f9f565222d8 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -3,9 +3,11 @@ import React, { PureComponent } from 'react';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { EditorTabBody } from './EditorTabBody';
 import 'app/features/alerting/AlertTabCtrl';
+import { PanelModel } from '../panel_model';
 
 interface Props {
   angularPanel?: AngularComponent;
+  panel: PanelModel;
 }
 
 export class AlertTab extends PureComponent<Props> {
@@ -63,8 +65,26 @@ export class AlertTab extends PureComponent<Props> {
   }
 
   render() {
+    const { alert } = this.props.panel;
+
+    const stateHistory = {
+      title: 'State history',
+      render: () => {
+        return <div>State history</div>;
+      },
+    };
+
+    const deleteAlert = {
+      title: 'Delete button',
+      render: () => {
+        return <div>Hello</div>;
+      },
+    };
+
+    const toolbarItems = alert ? [deleteAlert, stateHistory] : [];
+
     return (
-      <EditorTabBody heading="Alert" toolbarItems={[]}>
+      <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
         <div ref={element => (this.element = element)} />
       </EditorTabBody>
     );
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index a746d6c4b91..b3d94f43487 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -54,7 +54,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
       case 'queries':
         return <QueriesTab panel={panel} dashboard={dashboard} />;
       case 'alert':
-        return <AlertTab angularPanel={angularPanel} />;
+        return <AlertTab angularPanel={angularPanel} panel={panel} />;
       case 'visualization':
         return (
           <VisualizationTab

From a955caa9acb5ecefb74fc956f839f6b1e39cc958 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 14:19:27 +0100
Subject: [PATCH 042/352] cleanup

---
 .../stackdriver/angular_wrappers.ts           |   3 +-
 .../components/AggregationPicker.tsx          |  54 ++--
 .../stackdriver/components/Filter.tsx         | 239 +++---------------
 .../stackdriver/components/QueryEditor.tsx    |  73 ++++--
 .../datasource/stackdriver/filter_segments.ts |  13 +-
 .../stackdriver/partials/query.editor.html    |   2 +-
 .../stackdriver/partials/query.filter.html    |  56 ++--
 .../datasource/stackdriver/query_ctrl.ts      |  38 +--
 .../stackdriver/query_filter_ctrl.ts          | 152 ++---------
 9 files changed, 162 insertions(+), 468 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
index 683eceac904..6549135790c 100644
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -4,7 +4,8 @@ import { QueryEditor } from './components/QueryEditor';
 export function registerAngularDirectives() {
   react2AngularDirective('queryEditor', QueryEditor, [
     'target',
-    'onChange',
+    'onQueryChange',
+    'onExecuteQuery',
     ['uiSegmentSrv', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
     ['templateSrv', { watchDepth: 'reference' }],
diff --git a/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx b/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
index e357fd0ae2e..0a41a093d8f 100644
--- a/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
@@ -39,7 +39,7 @@ export class AggregationPicker extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    this.setAggOptions();
+    this.setAggOptions(this.props);
   }
 
   componentWillReceiveProps(nextProps: Props) {
@@ -49,17 +49,21 @@ export class AggregationPicker extends React.Component<Props, State> {
       nextProps.metricKind !== metricKind ||
       nextProps.aggregation.groupBys !== aggregation.groupBys
     ) {
-      this.setAggOptions();
+      this.setAggOptions(nextProps);
     }
   }
 
-  setAggOptions() {
-    const { valueType, metricKind, aggregation, templateSrv } = this.props;
+  setAggOptions({ valueType, metricKind, aggregation }) {
+    const { templateSrv } = this.props;
     let aggregations = getAggregationOptionsByMetric(valueType, metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))) {
+
+    if (
+      aggregations.length > 0 &&
+      !aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))
+    ) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
@@ -67,15 +71,7 @@ export class AggregationPicker extends React.Component<Props, State> {
       aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
-    this.setState({
-      aggOptions: [
-        this.getTemplateVariablesGroup(),
-        {
-          label: 'Aggregations',
-          options: aggregations,
-        },
-      ],
-    });
+    this.setState({ aggOptions: aggregations });
   }
 
   deselectAggregationOption(notValidOptionValue: string) {
@@ -86,17 +82,6 @@ export class AggregationPicker extends React.Component<Props, State> {
 
   handleAggregationChange(value) {
     this.props.onChange(value);
-    // this.$scope.refresh();
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.props.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
   }
 
   render() {
@@ -108,16 +93,15 @@ export class AggregationPicker extends React.Component<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
-            <div className="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-              <StackdriverPicker
-                onChange={value => this.handleAggregationChange(value)}
-                selected={aggregation.crossSeriesReducer}
-                options={aggOptions}
-                searchable={true}
-                placeholder="Select Aggregation"
-                className="width-15"
-              />
-            </div>
+            <StackdriverPicker
+              onChange={value => this.handleAggregationChange(value)}
+              selected={aggregation.crossSeriesReducer}
+              options={aggOptions}
+              searchable={true}
+              placeholder="Select Aggregation"
+              className="width-15"
+              groupName="Aggregations"
+            />
           </div>
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index 59967b998c1..03ee301e774 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import _ from 'lodash';
 
-import Segment from './Segment';
 import { QueryMeta, Target } from '../types';
-import { FilterSegments } from '../filter_segments';
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import '../query_filter_ctrl';
 
 export interface Props {
-  onChange: (metricDescriptor) => void;
+  filtersChanged: (filters) => void;
+  groupBysChanged: (groupBys) => void;
   templateSrv: any;
   labelData: QueryMeta;
   loading: Promise<any>;
@@ -14,226 +15,44 @@ export interface Props {
   uiSegmentSrv: any;
 }
 
-interface State {
-  defaultRemoveGroupByValue: string;
-  resourceTypeValue: string;
-  groupBySegments: any[];
-  // filterSegments: FilterSegments;
-  filterSegments: any;
-  removeSegment?: any;
-}
+export class Filter extends React.Component<Props, any> {
+  element: any;
+  component: AngularComponent;
 
-export class Filter extends React.Component<Props, State> {
-  state: State = {
-    defaultRemoveGroupByValue: '-- remove group by --',
-    resourceTypeValue: 'resource.type',
-    groupBySegments: [],
-    filterSegments: new FilterSegments(this.getFilterKeys.bind(this), this.getFilterValues.bind(this)),
-  };
-
-  constructor(props) {
-    super(props);
-  }
-
-  componentDidMount() {
-    this.initSegments(false);
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return this.state.filterSegments.filterSegments.length > 0;
-  }
-
-  initSegments(hideGroupBys: boolean) {
-    this.state.filterSegments.init(this.props.uiSegmentSrv);
-    if (!hideGroupBys) {
-      this.setState({
-        groupBySegments: this.props.target.aggregation.groupBys.map(groupBy => {
-          return this.props.uiSegmentSrv.getSegmentForValue(groupBy);
-        }),
-      });
-
-      this.ensurePlusButton(this.state.groupBySegments);
+  async componentDidMount() {
+    if (!this.element) {
+      return;
     }
 
-    this.setState({
-      removeSegment: this.props.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' }),
-    });
+    const { loading, labelData, target, filtersChanged, groupBysChanged } = this.props;
+    const loader = getAngularLoader();
+    const template = '<stackdriver-filter> </stackdriver-filter>';
 
-    this.state.filterSegments.buildSegmentModel(this.props.target.filters);
-  }
-
-  async createLabelKeyElements() {
-    await this.props.loading;
-
-    let elements = Object.keys(this.props.labelData.metricLabels || {}).map(l => {
-      return this.props.uiSegmentSrv.newSegment({
-        value: `metric.label.${l}`,
-        expandable: false,
-      });
-    });
-
-    elements = [
-      ...elements,
-      ...Object.keys(this.props.labelData.resourceLabels || {}).map(l => {
-        return this.props.uiSegmentSrv.newSegment({
-          value: `resource.label.${l}`,
-          expandable: false,
-        });
-      }),
-    ];
-
-    if (this.props.labelData.resourceTypes && this.props.labelData.resourceTypes.length > 0) {
-      elements = [
-        ...elements,
-        this.props.uiSegmentSrv.newSegment({
-          value: this.state.resourceTypeValue,
-          expandable: false,
-        }),
-      ];
-    }
-
-    return elements;
-  }
-
-  async getFilterKeys(segment, removeText?: string) {
-    let elements = await this.createLabelKeyElements();
-
-    if (this.props.target.filters.indexOf(this.state.resourceTypeValue) !== -1) {
-      elements = elements.filter(e => e.value !== this.state.resourceTypeValue);
-    }
-
-    const noValueOrPlusButton = !segment || segment.type === 'plus-button';
-    if (noValueOrPlusButton && elements.length === 0) {
-      return [];
-    }
-
-    return [
-      ...elements,
-      this.props.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.state.defaultRemoveGroupByValue }),
-    ];
-  }
-
-  async getGroupBys(segment) {
-    let elements = await this.createLabelKeyElements();
-
-    elements = elements.filter(e => this.props.target.aggregation.groupBys.indexOf(e.value) === -1);
-    const noValueOrPlusButton = !segment || segment.type === 'plus-button';
-    if (noValueOrPlusButton && elements.length === 0) {
-      return [];
-    }
-
-    this.state.removeSegment.value = this.state.defaultRemoveGroupByValue;
-    return [...elements, this.state.removeSegment];
-  }
-
-  groupByChanged(segment, index) {
-    if (segment.value === this.state.removeSegment.value) {
-      // this.groupBySegments.splice(index, 1);
-    } else {
-      segment.type = 'value';
-    }
-
-    const reducer = (memo, seg) => {
-      if (!seg.fake) {
-        memo.push(seg.value);
-      }
-      return memo;
+    const scopeProps = {
+      loading,
+      labelData,
+      target,
+      filtersChanged,
+      groupBysChanged,
     };
 
-    this.props.target.aggregation.groupBys = this.state.groupBySegments.reduce(reducer, []);
-    this.ensurePlusButton(this.state.groupBySegments);
-    // this.$rootScope.$broadcast('metricTypeChanged');
-    // this.$scope.refresh();
+    this.component = loader.load(this.element, scopeProps, template);
   }
 
-  async getFilters(segment, index) {
-    await this.props.loading;
-    const hasNoFilterKeys =
-      this.props.labelData.metricLabels && Object.keys(this.props.labelData.metricLabels).length === 0;
-    return this.state.filterSegments.getFilters(segment, index, hasNoFilterKeys);
+  componentDidUpdate() {
+    const scope = this.component.getScope();
+    scope.loading = _.clone(this.props.loading);
+    scope.labelData = _.cloneDeep(this.props.labelData);
+    scope.target = _.cloneDeep(this.props.target);
   }
 
-  getFilterValues(index) {
-    const filterKey = this.props.templateSrv.replace(this.state.filterSegments.filterSegments[index - 2].value);
-    if (
-      !filterKey ||
-      !this.props.labelData.metricLabels ||
-      Object.keys(this.props.labelData.metricLabels).length === 0
-    ) {
-      return [];
-    }
-
-    const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
-
-    if (filterKey.startsWith('metric.label.') && this.props.labelData.metricLabels.hasOwnProperty(shortKey)) {
-      return this.props.labelData.metricLabels[shortKey];
-    }
-
-    if (filterKey.startsWith('resource.label.') && this.props.labelData.resourceLabels.hasOwnProperty(shortKey)) {
-      return this.props.labelData.resourceLabels[shortKey];
-    }
-
-    if (filterKey === this.state.resourceTypeValue) {
-      return this.props.labelData.resourceTypes;
-    }
-
-    return [];
-  }
-
-  filterSegmentUpdated(segment, index) {
-    this.props.target.filters = this.state.filterSegments.filterSegmentUpdated(segment, index);
-    // this.$scope.refresh();
-  }
-
-  ensurePlusButton(segments) {
-    const count = segments.length;
-    const lastSegment = segments[Math.max(count - 1, 0)];
-
-    if (!lastSegment || lastSegment.type !== 'plus-button') {
-      segments.push(this.props.uiSegmentSrv.newPlusButton());
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
     }
   }
 
   render() {
-    const { filterSegments } = this.state;
-    // const { metrifilterSegmentscType } = this.props;
-
-    return (
-      <React.Fragment>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <span className="gf-form-label query-keyword width-9">Filter</span>
-            <div className="gf-form">
-              {filterSegments.filterSegments.map((segment, i) => (
-                <Segment
-                  key={i}
-                  segment={segment}
-                  getOptions={() => this.getFilters(segment, i)}
-                  onChange={segment => this.filterSegmentUpdated(segment, i)}
-                />
-              ))}
-            </div>
-          </div>
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label gf-form-label--grow" />
-          </div>
-        </div>
-        {/* <div className="gf-form-inline" ng-hide="ctrl.$scope.hideGroupBys">
-          <div className="gf-form">
-            <span className="gf-form-label query-keyword width-9">Group By</span>
-            <div className="gf-form" ng-repeat="segment in ctrl.groupBySegments">
-              <Segment
-                segment="segment"
-                get-options="ctrl.getGroupBys(segment)"
-                on-change="ctrl.groupByChanged(segment, $index)"
-              />
-            </div>
-          </div>
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label gf-form-label--grow" />
-          </div>
-        </div> */}
-      </React.Fragment>
-    );
+    return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 5308853324c..49999be7681 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -4,11 +4,12 @@ import appEvents from 'app/core/app_events';
 
 import { MetricPicker } from './MetricPicker';
 import { Filter } from './Filter';
-// import { AggregationPicker } from './AggregationPicker';
+import { AggregationPicker } from './AggregationPicker';
 import { Target, QueryMeta } from '../types';
 
 export interface Props {
-  onChange: (target: Target) => void;
+  onQueryChange: (target: Target) => void;
+  onExecuteQuery?: () => void;
   target: Target;
   datasource: any;
   templateSrv: any;
@@ -24,6 +25,8 @@ interface State {
 const DefaultTarget: Target = {
   defaultProject: 'loading project...',
   metricType: '',
+  metricKind: '',
+  valueType: '',
   refId: '',
   service: '',
   unit: '',
@@ -35,22 +38,14 @@ const DefaultTarget: Target = {
   },
   filters: [],
   aliasBy: '',
-  metricKind: '',
-  valueType: '',
 };
 
 export class QueryEditor extends React.Component<Props, State> {
-  state: State = { labelData: null, loadLabelsPromise: null, target: DefaultTarget };
-
-  constructor(props) {
-    super(props);
-    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
-    this.handleAggregationChange = this.handleAggregationChange.bind(this);
-  }
+  state: State = { labelData: null, loadLabelsPromise: new Promise(() => {}), target: DefaultTarget };
 
   componentDidMount() {
-    this.setState({ target: this.props.target });
     this.getLabels();
+    this.setState({ target: this.props.target });
   }
 
   async getLabels() {
@@ -81,18 +76,50 @@ export class QueryEditor extends React.Component<Props, State> {
     });
 
     // this.$rootScope.$broadcast('metricTypeChanged');
-    // this.getLabels();
-    // this.refresh();
+    this.getLabels();
+    this.props.onQueryChange(this.state.target);
+    this.props.onExecuteQuery();
   }
 
-  handleAggregationChange(crossSeriesReducer) {
-    // this.target.aggregation.crossSeriesReducer = crossSeriesReducer;
-    // this.refresh();
+  handleFilterChange(value) {
+    this.setState({
+      target: {
+        ...this.state.target,
+        filters: value,
+      },
+    });
+    this.props.onQueryChange(this.state.target);
+    this.props.onExecuteQuery();
+  }
+
+  handleGroupBysChange(value) {
+    this.setState({
+      target: {
+        ...this.state.target,
+        groupBys: value,
+      },
+    });
+    this.props.onQueryChange(this.state.target);
+    this.props.onExecuteQuery();
+  }
+
+  handleAggregationChange(value) {
+    this.setState({
+      target: {
+        ...this.state.target,
+        aggregation: {
+          ...this.state.target.aggregation,
+          crossSeriesReducer: value,
+        },
+      },
+    });
+    this.props.onQueryChange(this.state.target);
+    this.props.onExecuteQuery();
   }
 
   render() {
     const { labelData, loadLabelsPromise, target } = this.state;
-    const { defaultProject, metricType } = target;
+    const { defaultProject, metricType, valueType, metricKind, aggregation } = target;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -105,13 +132,21 @@ export class QueryEditor extends React.Component<Props, State> {
           onChange={value => this.handleMetricTypeChange(value)}
         />
         <Filter
-          onChange={() => console.log('change filter')}
+          filtersChanged={value => this.handleFilterChange(value)}
+          groupBysChanged={value => this.handleGroupBysChange(value)}
           target={target}
           uiSegmentSrv={uiSegmentSrv}
           labelData={labelData}
           templateSrv={templateSrv}
           loading={loadLabelsPromise}
         />
+        <AggregationPicker
+          valueType={valueType}
+          metricKind={metricKind}
+          templateSrv={templateSrv}
+          aggregation={aggregation}
+          onChange={value => this.handleAggregationChange(value)}
+        />
         {/* target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData" */}
         {/* <stackdriver-filter
           target="target"
diff --git a/public/app/plugins/datasource/stackdriver/filter_segments.ts b/public/app/plugins/datasource/stackdriver/filter_segments.ts
index 7fe406ed765..5adb56e2fcf 100644
--- a/public/app/plugins/datasource/stackdriver/filter_segments.ts
+++ b/public/app/plugins/datasource/stackdriver/filter_segments.ts
@@ -4,21 +4,14 @@ export const DefaultFilterValue = 'select value';
 export class FilterSegments {
   filterSegments: any[];
   removeSegment: any;
-  uiSegmentSrv: any;
 
-  constructor(private getFilterKeysFunc, private getFilterValuesFunc) {
-    this.filterSegments = [];
-  }
+  constructor(private uiSegmentSrv, private target, private getFilterKeysFunc, private getFilterValuesFunc) {}
 
-  init(uiSegmentSrv) {
-    this.uiSegmentSrv = uiSegmentSrv;
-  }
-
-  buildSegmentModel(filters) {
+  buildSegmentModel() {
     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: DefaultRemoveFilterValue });
 
     this.filterSegments = [];
-    filters.forEach((f, index) => {
+    this.target.filters.forEach((f, index) => {
       switch (index % 4) {
         case 0:
           this.filterSegments.push(this.uiSegmentSrv.newKey(f));
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 81bb03b4c51..f87dda0f044 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,5 +1,5 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-    <query-editor target="ctrl.target" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleTargetChange" ui-segment-srv=ctrl.uiSegmentSrv></query-editor>
+    <query-editor target="ctrl.target" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-query-change="ctrl.handleQueryChange" on-execute-query="ctrl.handleExecuteQuery" ui-segment-srv=ctrl.uiSegmentSrv></query-editor>
   <!-- <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject"  metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
   <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
     ></stackdriver-filter>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 2c069f0ab76..13335f9fc66 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,31 +1,33 @@
-<div class="gf-form-inline">
-  <div class="gf-form">
-    <span class="gf-form-label width-9 query-keyword">Service</span>
-    <stackdriver-picker
-      onChange="ctrl.handleServiceChange"
-      selected="ctrl.target.service"
-      options="ctrl.services"
-      searchable="false"
-      placeholder="'Select Services'"
-      className="'width-15'"
-    ></stackdriver-picker>
-  </div>
-  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-</div>
-<div class="gf-form-inline">
-  <div class="gf-form">
-    <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <stackdriver-picker
-      onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.target.metricType"
-      options="ctrl.getMetricsList()"
-      template-variables="ctrl.templateSrv.variables"
-      group-name="'Metric Types'"
-      searchable="true"
-      placeholder="'Select Metric'"
-      className="'width-15'"
-    ></stackdriver-picker>
+<!--
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-9 query-keyword">Service</span>
+      <stackdriver-picker
+        onChange="ctrl.handleServiceChange"
+        selected="ctrl.target.service"
+        options="ctrl.services"
+        searchable="false"
+        placeholder="'Select Services'"
+        className="'width-15'"
+      ></stackdriver-picker>
+    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-9 query-keyword">Metric</span>
+      <stackdriver-picker
+        onChange="ctrl.handleMetricTypeChange"
+        selected="ctrl.target.metricType"
+        options="ctrl.getMetricsList()"
+        template-variables="ctrl.templateSrv.variables"
+        group-name="'Metric Types'"
+        searchable="true"
+        placeholder="'Select Metric'"
+        className="'width-15'"
+      ></stackdriver-picker>
+    </div>
+-->
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label query-keyword width-9">Filter</span>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 705518618ba..8dbfc7038dc 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import appEvents from 'app/core/app_events';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
@@ -80,42 +79,17 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'groupName',
       ['templateVariables', { watchDepth: 'reference' }],
     ]);
-    // this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
-    // this.handleAggregationChange = this.handleAggregationChange.bind(this);
-    this.handleTargetChange = this.handleTargetChange.bind(this);
     registerAngularDirectives();
-    // this.getLabels();
+    this.handleQueryChange = this.handleQueryChange.bind(this);
+    this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
   }
 
-  // handleMetricTypeChange({ valueType, metricKind, type, unit }) {
-  //   this.target.metricType = type;
-  //   this.target.unit = unit;
-  //   this.target.valueType = valueType;
-  //   this.target.metricKind = metricKind;
-  //   this.$rootScope.$broadcast('metricTypeChanged');
-  //   this.getLabels();
-  //   this.refresh();
-  // }
-
-  // handleAggregationChange(crossSeriesReducer) {
-  //   this.target.aggregation.crossSeriesReducer = crossSeriesReducer;
-  //   this.refresh();
-  // }
-  handleTargetChange(target: Target) {
-    console.log(target);
+  handleQueryChange(target: Target) {
+    Object.assign(this.target, target);
   }
 
-  async getLabels() {
-    this.loadLabelsPromise = new Promise(async resolve => {
-      try {
-        const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-        this.labelData = meta;
-        resolve();
-      } catch (error) {
-        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
-        resolve();
-      }
-    });
+  handleExecuteQuery() {
+    this.$scope.ctrl.refresh();
   }
 
   onDataReceived(dataList) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 94784fcab8d..d02ed91b53d 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -1,8 +1,6 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
-import { FilterSegments } from './filter_segments';
-import { QueryMeta } from './types';
-// import appEvents from 'app/core/app_events';
+import { FilterSegments, DefaultFilterValue } from './filter_segments';
 
 export class StackdriverFilter {
   /** @ngInject */
@@ -16,7 +14,8 @@ export class StackdriverFilter {
         labelData: '<',
         loading: '<',
         target: '=',
-        refresh: '&',
+        filtersChanged: '&',
+        groupBysChanged: '&',
         hideGroupBys: '<',
       },
     };
@@ -24,41 +23,19 @@ export class StackdriverFilter {
 }
 
 export class StackdriverFilterCtrl {
-  metricLabels: { [key: string]: string[] };
-  resourceLabels: { [key: string]: string[] };
-  resourceTypes: string[];
-
   defaultRemoveGroupByValue = '-- remove group by --';
   resourceTypeValue = 'resource.type';
-
-  metricDescriptors: any[];
-  metrics: any[];
-  services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
   removeSegment: any;
   target: any;
 
-  labelData: QueryMeta;
-  loading: Promise<any>;
-
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
-    this.target = $scope.target;
-    this.metricDescriptors = [];
-    this.metrics = [];
-    this.services = [];
+    this.$scope = $scope.$parent;
+    this.target = this.$scope.target;
 
-    this.initSegments($scope.hideGroupBys);
-    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
-    this.handleServiceChange = this.handleServiceChange.bind(this);
-  }
-
-  handleMetricTypeChange(value) {
-    this.target.metricType = value;
-    this.setMetricType();
-    this.$scope.refresh();
-    // this.getLabels();
+    this.initSegments(this.$scope.hideGroupBys);
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -71,106 +48,13 @@ export class StackdriverFilterCtrl {
 
     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' });
 
-    // this.filterSegments = new FilterSegments(
-    //   this.uiSegmentSrv,
-    //   this.target,
-    //   this.getFilterKeys.bind(this),
-    //   this.getFilterValues.bind(this)
-    // );
-    // this.filterSegments.buildSegmentModel();
-  }
-
-  // async getCurrentProject() {
-  //   return new Promise(async (resolve, reject) => {
-  //     try {
-  //       if (!this.target.defaultProject || this.target.defaultProject === 'loading project...') {
-  //         this.target.defaultProject = await this.datasource.getDefaultProject();
-  //       }
-  //       resolve(this.target.defaultProject);
-  //     } catch (error) {
-  //       appEvents.emit('ds-request-error', error);
-  //       reject();
-  //     }
-  //   });
-  // }
-
-  // async loadMetricDescriptors() {
-  //   if (this.target.defaultProject !== 'loading project...') {
-  //     this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
-  //     this.services = this.getServicesList();
-  //     this.metrics = this.getMetricsList();
-  //     return this.metricDescriptors;
-  //   } else {
-  //     return [];
-  //   }
-  // }
-
-  getServicesList() {
-    const services = this.metricDescriptors.map(m => ({
-      value: m.service,
-      label: _.startCase(m.serviceShortName),
-    }));
-
-    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
-  }
-
-  getMetricsList() {
-    const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
-      service: m.service,
-      value: m.type,
-      label: m.displayName,
-      description: m.description,
-    }));
-
-    if (
-      metricsByService.length > 0 &&
-      !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
-    ) {
-      this.target.metricType = metricsByService[0].value;
-    }
-    return metricsByService;
-  }
-
-  // async getLabels() {
-  //   this.loadLabelsPromise = new Promise(async resolve => {
-  //     try {
-  //       if (this.target.metricType) {
-  //         const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-  //         this.metricLabels = meta.metricLabels;
-  //         this.resourceLabels = meta.resourceLabels;
-  //         this.resourceTypes = meta.resourceTypes;
-  //         resolve();
-  //       } else {
-  //         resolve();
-  //       }
-  //     } catch (error) {
-  //       appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
-  //       resolve();
-  //     }
-  //   });
-  // }
-
-  handleServiceChange(service) {
-    this.target.service = service;
-    this.metrics = this.getMetricsList();
-    this.setMetricType();
-    // this.getLabels();
-    if (!this.metrics.some(m => m.value === this.target.metricType)) {
-      this.target.metricType = '';
-    } else {
-      this.$scope.refresh();
-    }
-  }
-
-  setMetricType() {
-    const metric = this.metricDescriptors.find(m => m.type === this.templateSrv.replace(this.target.metricType));
-    if (metric) {
-      const { valueType, metricKind, unit } = metric;
-      this.target.unit = unit;
-      this.target.valueType = valueType;
-      this.target.metricKind = metricKind;
-      this.$rootScope.$broadcast('metricTypeChanged');
-    }
+    this.filterSegments = new FilterSegments(
+      this.uiSegmentSrv,
+      this.target,
+      this.getFilterKeys.bind(this),
+      this.getFilterValues.bind(this)
+    );
+    this.filterSegments.buildSegmentModel();
   }
 
   async createLabelKeyElements() {
@@ -251,10 +135,10 @@ export class StackdriverFilterCtrl {
       return memo;
     };
 
-    this.target.aggregation.groupBys = this.groupBySegments.reduce(reducer, []);
+    const groupBys = this.groupBySegments.reduce(reducer, []);
+    this.$scope.groupBysChanged(groupBys);
     this.ensurePlusButton(this.groupBySegments);
     this.$rootScope.$broadcast('metricTypeChanged');
-    this.$scope.refresh();
   }
 
   async getFilters(segment, index) {
@@ -291,8 +175,10 @@ export class StackdriverFilterCtrl {
   }
 
   filterSegmentUpdated(segment, index) {
-    this.target.filters = this.filterSegments.filterSegmentUpdated(segment, index);
-    this.$scope.refresh();
+    const filters = this.filterSegments.filterSegmentUpdated(segment, index);
+    if (!filters.some(f => f === DefaultFilterValue)) {
+      this.$scope.filtersChanged(filters);
+    }
   }
 
   ensurePlusButton(segments) {

From 07dc9d06d7390668831cdf9586e447584a9614e2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 14:29:00 +0100
Subject: [PATCH 043/352] use template variable prop

---
 ...AggregationPicker.tsx => Aggregations.tsx} |   5 +-
 .../{MetricPicker.tsx => Metrics.tsx}         |  22 +-
 .../stackdriver/components/QueryEditor.tsx    |   8 +-
 .../stackdriver/query_filter_ctrl2.ts         | 330 ------------------
 4 files changed, 13 insertions(+), 352 deletions(-)
 rename public/app/plugins/datasource/stackdriver/components/{AggregationPicker.tsx => Aggregations.tsx} (95%)
 rename public/app/plugins/datasource/stackdriver/components/{MetricPicker.tsx => Metrics.tsx} (91%)
 delete mode 100644 public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts

diff --git a/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
similarity index 95%
rename from public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
rename to public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 0a41a093d8f..a1a2410dada 100644
--- a/public/app/plugins/datasource/stackdriver/components/AggregationPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -27,7 +27,7 @@ interface State {
   aggOptions: any[];
 }
 
-export class AggregationPicker extends React.Component<Props, State> {
+export class Aggregations extends React.Component<Props, State> {
   state: State = {
     alignmentPeriods: [],
     alignOptions: [],
@@ -86,7 +86,7 @@ export class AggregationPicker extends React.Component<Props, State> {
 
   render() {
     const { aggOptions } = this.state;
-    const { aggregation } = this.props;
+    const { aggregation, templateSrv } = this.props;
 
     return (
       <React.Fragment>
@@ -96,6 +96,7 @@ export class AggregationPicker extends React.Component<Props, State> {
             <StackdriverPicker
               onChange={value => this.handleAggregationChange(value)}
               selected={aggregation.crossSeriesReducer}
+              templateVariables={templateSrv.variables}
               options={aggOptions}
               searchable={true}
               placeholder="Select Aggregation"
diff --git a/public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
similarity index 91%
rename from public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx
rename to public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 93d1665da6f..1a1035ef2e1 100644
--- a/public/app/plugins/datasource/stackdriver/components/MetricPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -19,7 +19,7 @@ interface State {
   metric: string;
 }
 
-export class MetricPicker extends React.Component<Props, State> {
+export class Metrics extends React.Component<Props, State> {
   state: State = {
     metricDescriptors: [],
     metrics: [],
@@ -36,7 +36,6 @@ export class MetricPicker extends React.Component<Props, State> {
     this.getCurrentProject()
       .then(this.loadMetricDescriptors.bind(this))
       .then(this.initializeServiceAndMetrics.bind(this));
-    // .then(this.getLabels.bind(this));
   }
 
   async getCurrentProject() {
@@ -86,7 +85,6 @@ export class MetricPicker extends React.Component<Props, State> {
   }
 
   handleServiceChange(service) {
-    console.log('handleServiceChange', service);
     const { metricDescriptors } = this.state;
     const { templateSrv, metricType } = this.props;
 
@@ -128,19 +126,9 @@ export class MetricPicker extends React.Component<Props, State> {
     };
   }
 
-  getMetricGroups() {
-    return [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Metrics',
-        options: this.state.metrics,
-      },
-    ];
-  }
-
   render() {
-    const { services, service } = this.state;
-    const { metricType } = this.props;
+    const { services, service, metrics } = this.state;
+    const { metricType, templateSrv } = this.props;
 
     return (
       <React.Fragment>
@@ -166,10 +154,12 @@ export class MetricPicker extends React.Component<Props, State> {
             <StackdriverPicker
               onChange={value => this.handleMetricTypeChange(value)}
               selected={metricType}
-              options={this.getMetricGroups()}
+              templateVariables={templateSrv.variables}
+              options={metrics}
               searchable={true}
               placeholder="Select Metric"
               className="width-15"
+              groupName="Metric Types"
             />
           </div>
           <div className="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 49999be7681..dbac6a60bb2 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import _ from 'lodash';
 import appEvents from 'app/core/app_events';
 
-import { MetricPicker } from './MetricPicker';
+import { Metrics } from './Metrics';
 import { Filter } from './Filter';
-import { AggregationPicker } from './AggregationPicker';
+import { Aggregations } from './Aggregations';
 import { Target, QueryMeta } from '../types';
 
 export interface Props {
@@ -124,7 +124,7 @@ export class QueryEditor extends React.Component<Props, State> {
 
     return (
       <React.Fragment>
-        <MetricPicker
+        <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
           templateSrv={templateSrv}
@@ -140,7 +140,7 @@ export class QueryEditor extends React.Component<Props, State> {
           templateSrv={templateSrv}
           loading={loadLabelsPromise}
         />
-        <AggregationPicker
+        <Aggregations
           valueType={valueType}
           metricKind={metricKind}
           templateSrv={templateSrv}
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts
deleted file mode 100644
index 1b70b86d59a..00000000000
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl2.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-// import coreModule from 'app/core/core_module';
-// import _ from 'lodash';
-// import { FilterSegments } from './filter_segments';
-// import appEvents from 'app/core/app_events';
-
-// export class StackdriverFilter {
-//   /** @ngInject */
-//   constructor() {
-//     return {
-//       templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.filter.html',
-//       controller: 'StackdriverFilterCtrl',
-//       controllerAs: 'ctrl',
-//       restrict: 'E',
-//       scope: {
-//         target: '=',
-//         datasource: '=',
-//         refresh: '&',
-//         hideGroupBys: '<',
-//       },
-//     };
-//   }
-// }
-
-// export class StackdriverFilterCtrl {
-//   metricLabels: { [key: string]: string[] };
-//   resourceLabels: { [key: string]: string[] };
-//   resourceTypes: string[];
-
-//   defaultRemoveGroupByValue = '-- remove group by --';
-//   resourceTypeValue = 'resource.type';
-//   loadLabelsPromise: Promise<any>;
-
-//   metricDescriptors: any[];
-//   metrics: any[];
-//   services: any[];
-//   groupBySegments: any[];
-//   filterSegments: FilterSegments;
-//   removeSegment: any;
-//   target: any;
-//   datasource: any;
-
-//   /** @ngInject */
-//   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
-//     this.datasource = $scope.datasource;
-//     this.target = $scope.target;
-//     this.metricDescriptors = [];
-//     this.metrics = [];
-//     this.services = [];
-
-//     this.getCurrentProject()
-//       .then(this.loadMetricDescriptors.bind(this))
-//       .then(this.getLabels.bind(this));
-
-//     this.initSegments($scope.hideGroupBys);
-//     this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
-//     this.handleServiceChange = this.handleServiceChange.bind(this);
-//   }
-
-//   handleMetricTypeChange(value) {
-//     this.target.metricType = value;
-//     this.setMetricType();
-//     this.$scope.refresh();
-//     this.getLabels();
-//   }
-
-//   initSegments(hideGroupBys: boolean) {
-//     if (!hideGroupBys) {
-//       this.groupBySegments = this.target.aggregation.groupBys.map(groupBy => {
-//         return this.uiSegmentSrv.getSegmentForValue(groupBy);
-//       });
-//       this.ensurePlusButton(this.groupBySegments);
-//     }
-
-//     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' });
-
-//     this.filterSegments = new FilterSegments(
-//       this.uiSegmentSrv,
-//       this.target,
-//       this.getFilterKeys.bind(this),
-//       this.getFilterValues.bind(this)
-//     );
-//     this.filterSegments.buildSegmentModel();
-//   }
-
-//   async getCurrentProject() {
-//     return new Promise(async (resolve, reject) => {
-//       try {
-//         if (!this.target.defaultProject || this.target.defaultProject === 'loading project...') {
-//           this.target.defaultProject = await this.datasource.getDefaultProject();
-//         }
-//         resolve(this.target.defaultProject);
-//       } catch (error) {
-//         appEvents.emit('ds-request-error', error);
-//         reject();
-//       }
-//     });
-//   }
-
-//   async loadMetricDescriptors() {
-//     if (this.target.defaultProject !== 'loading project...') {
-//       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
-//       this.services = this.getServicesList();
-//       this.metrics = this.getMetricsList();
-//       return this.metricDescriptors;
-//     } else {
-//       return [];
-//     }
-//   }
-
-//   getServicesList() {
-//     const services = this.metricDescriptors.map(m => ({
-//       value: m.service,
-//       label: _.startCase(m.serviceShortName),
-//     }));
-
-//     return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
-//   }
-
-//   getMetricGroups() {
-//     return [
-//       this.getTemplateVariablesGroup(),
-//       {
-//         label: 'Metrics',
-//         options: this.getMetricsList(),
-//       },
-//     ];
-//   }
-
-//   getTemplateVariablesGroup() {
-//     return {
-//       label: 'Template Variables',
-//       options: this.templateSrv.variables.map(v => ({
-//         label: `$${v.name}`,
-//         value: `$${v.name}`,
-//       })),
-//     };
-//   }
-
-//   getMetricsList() {
-//     const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
-//       service: m.service,
-//       value: m.type,
-//       label: m.displayName,
-//       description: m.description,
-//     }));
-
-//     if (
-//       metricsByService.length > 0 &&
-//       !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
-//     ) {
-//       // this.target.metricType = metricsByService[0].value;
-//     }
-//     return metricsByService;
-//   }
-
-//   async getLabels() {
-//     this.loadLabelsPromise = new Promise(async resolve => {
-//       try {
-//         if (this.target.metricType) {
-//           const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-//           this.metricLabels = meta.metricLabels;
-//           this.resourceLabels = meta.resourceLabels;
-//           this.resourceTypes = meta.resourceTypes;
-//           resolve();
-//         } else {
-//           resolve();
-//         }
-//       } catch (error) {
-//         if (error.data && error.data.message) {
-//           console.log(error.data.message);
-//         } else {
-//           console.log(error);
-//         }
-//         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
-//         resolve();
-//       }
-//     });
-//   }
-
-//   handleServiceChange(service) {
-//     this.target.service = service;
-//     this.metrics = this.getMetricsList();
-//     this.setMetricType();
-//     this.getLabels();
-//     if (!this.metrics.some(m => m.value === this.target.metricType)) {
-//       this.target.metricType = '';
-//     } else {
-//       this.$scope.refresh();
-//     }
-//   }
-
-//   setMetricType() {
-//     const { valueType, metricKind, unit } = this.metricDescriptors.find(
-//       m => m.type === this.templateSrv.replace(this.target.metricType)
-//     );
-//     this.target.unit = unit;
-//     this.target.valueType = valueType;
-//     this.target.metricKind = metricKind;
-//     this.$rootScope.$broadcast('metricTypeChanged');
-//   }
-
-//   async createLabelKeyElements() {
-//     await this.loadLabelsPromise;
-
-//     let elements = Object.keys(this.metricLabels || {}).map(l => {
-//       return this.uiSegmentSrv.newSegment({
-//         value: `metric.label.${l}`,
-//         expandable: false,
-//       });
-//     });
-
-//     elements = [
-//       ...elements,
-//       ...Object.keys(this.resourceLabels || {}).map(l => {
-//         return this.uiSegmentSrv.newSegment({
-//           value: `resource.label.${l}`,
-//           expandable: false,
-//         });
-//       }),
-//     ];
-
-//     if (this.resourceTypes && this.resourceTypes.length > 0) {
-//       elements = [
-//         ...elements,
-//         this.uiSegmentSrv.newSegment({
-//           value: this.resourceTypeValue,
-//           expandable: false,
-//         }),
-//       ];
-//     }
-
-//     return elements;
-//   }
-
-//   async getFilterKeys(segment, removeText?: string) {
-//     let elements = await this.createLabelKeyElements();
-
-//     if (this.target.filters.indexOf(this.resourceTypeValue) !== -1) {
-//       elements = elements.filter(e => e.value !== this.resourceTypeValue);
-//     }
-
-//     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
-//     if (noValueOrPlusButton && elements.length === 0) {
-//       return [];
-//     }
-
-//     return [
-//       ...elements,
-//       this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
-//     ];
-//   }
-
-//   async getGroupBys(segment) {
-//     let elements = await this.createLabelKeyElements();
-
-//     elements = elements.filter(e => this.target.aggregation.groupBys.indexOf(e.value) === -1);
-//     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
-//     if (noValueOrPlusButton && elements.length === 0) {
-//       return [];
-//     }
-
-//     this.removeSegment.value = this.defaultRemoveGroupByValue;
-//     return [...elements, this.removeSegment];
-//   }
-
-//   groupByChanged(segment, index) {
-//     if (segment.value === this.removeSegment.value) {
-//       this.groupBySegments.splice(index, 1);
-//     } else {
-//       segment.type = 'value';
-//     }
-
-//     const reducer = (memo, seg) => {
-//       if (!seg.fake) {
-//         memo.push(seg.value);
-//       }
-//       return memo;
-//     };
-
-//     this.target.aggregation.groupBys = this.groupBySegments.reduce(reducer, []);
-//     this.ensurePlusButton(this.groupBySegments);
-//     this.$rootScope.$broadcast('metricTypeChanged');
-//     this.$scope.refresh();
-//   }
-
-//   async getFilters(segment, index) {
-//     const hasNoFilterKeys = this.metricLabels && Object.keys(this.metricLabels).length === 0;
-//     return this.filterSegments.getFilters(segment, index, hasNoFilterKeys);
-//   }
-
-//   getFilterValues(index) {
-//     const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value);
-//     if (!filterKey || !this.metricLabels || Object.keys(this.metricLabels).length === 0) {
-//       return [];
-//     }
-
-//     const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
-
-//     if (filterKey.startsWith('metric.label.') && this.metricLabels.hasOwnProperty(shortKey)) {
-//       return this.metricLabels[shortKey];
-//     }
-
-//     if (filterKey.startsWith('resource.label.') && this.resourceLabels.hasOwnProperty(shortKey)) {
-//       return this.resourceLabels[shortKey];
-//     }
-
-//     if (filterKey === this.resourceTypeValue) {
-//       return this.resourceTypes;
-//     }
-
-//     return [];
-//   }
-
-//   filterSegmentUpdated(segment, index) {
-//     this.target.filters = this.filterSegments.filterSegmentUpdated(segment, index);
-//     this.$scope.refresh();
-//   }
-
-//   ensurePlusButton(segments) {
-//     const count = segments.length;
-//     const lastSegment = segments[Math.max(count - 1, 0)];
-
-//     if (!lastSegment || lastSegment.type !== 'plus-button') {
-//       segments.push(this.uiSegmentSrv.newPlusButton());
-//     }
-//   }
-// }
-
-// coreModule.directive('stackdriverFilter', StackdriverFilter);
-// coreModule.controller('StackdriverFilterCtrl', StackdriverFilterCtrl);

From 9b1b4c09f59bf6aaab049dc71d2d1008f189a2c2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 15:54:45 +0100
Subject: [PATCH 044/352] use render props pattern

---
 .../stackdriver/components/Aggregations.tsx   |  40 +++--
 .../stackdriver/components/Filter.tsx         |  41 +++--
 .../stackdriver/components/Metrics.tsx        |  20 ++-
 .../stackdriver/components/QueryEditor.tsx    | 170 ++++++++----------
 4 files changed, 140 insertions(+), 131 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index a1a2410dada..44bd2cdd92b 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -11,8 +11,10 @@ import { StackdriverPicker } from './StackdriverPicker';
 export interface Props {
   onChange: (metricDescriptor) => void;
   templateSrv: any;
-  valueType: string;
-  metricKind: string;
+  metricDescriptor: {
+    valueType: string;
+    metricKind: string;
+  };
   aggregation: {
     crossSeriesReducer: string;
     alignmentPeriod: string;
@@ -39,26 +41,31 @@ export class Aggregations extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    this.setAggOptions(this.props);
+    if (this.props.metricDescriptor !== null) {
+      this.setAggOptions(this.props);
+    }
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    const { valueType, metricKind, aggregation } = this.props;
-    if (
-      nextProps.valueType !== valueType ||
-      nextProps.metricKind !== metricKind ||
-      nextProps.aggregation.groupBys !== aggregation.groupBys
-    ) {
+    // const { metricDescriptor, aggregation } = this.props;
+    // if (
+    //   (metricDescriptor !== null && nextProps.metricDescriptor.valueType !== metricDescriptor.valueType) ||
+    //   nextProps.metricDescriptor.metricKind !== metricDescriptor.metricKind ||
+    //   nextProps.aggregation.groupBys !== aggregation.groupBys
+    // ) {
+    if (nextProps.metricDescriptor !== null) {
       this.setAggOptions(nextProps);
     }
   }
 
-  setAggOptions({ valueType, metricKind, aggregation }) {
+  setAggOptions({ metricDescriptor, aggregation }) {
     const { templateSrv } = this.props;
-    let aggregations = getAggregationOptionsByMetric(valueType, metricKind).map(a => ({
-      ...a,
-      label: a.text,
-    }));
+    let aggregations = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
+      a => ({
+        ...a,
+        label: a.text,
+      })
+    );
 
     if (
       aggregations.length > 0 &&
@@ -75,7 +82,10 @@ export class Aggregations extends React.Component<Props, State> {
   }
 
   deselectAggregationOption(notValidOptionValue: string) {
-    const aggregations = getAggregationOptionsByMetric(this.props.valueType, this.props.metricKind);
+    const aggregations = getAggregationOptionsByMetric(
+      this.props.metricDescriptor.valueType,
+      this.props.metricDescriptor.metricKind
+    );
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.handleAggregationChange(newValue ? newValue.value : '');
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index 03ee301e774..aab0d2e7be9 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import appEvents from 'app/core/app_events';
 
 import { QueryMeta, Target } from '../types';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
@@ -8,14 +9,19 @@ import '../query_filter_ctrl';
 export interface Props {
   filtersChanged: (filters) => void;
   groupBysChanged: (groupBys) => void;
+  metricType: string;
   templateSrv: any;
-  labelData: QueryMeta;
-  loading: Promise<any>;
   target: Target;
   uiSegmentSrv: any;
+  datasource: any;
 }
 
-export class Filter extends React.Component<Props, any> {
+interface State {
+  labelData: QueryMeta;
+  loading: Promise<any>;
+}
+
+export class Filter extends React.Component<Props, State> {
   element: any;
   component: AngularComponent;
 
@@ -24,13 +30,13 @@ export class Filter extends React.Component<Props, any> {
       return;
     }
 
-    const { loading, labelData, target, filtersChanged, groupBysChanged } = this.props;
+    const { target, filtersChanged, groupBysChanged } = this.props;
     const loader = getAngularLoader();
     const template = '<stackdriver-filter> </stackdriver-filter>';
 
     const scopeProps = {
-      loading,
-      labelData,
+      loading: this.loadLabels.bind(this),
+      labelData: null,
       target,
       filtersChanged,
       groupBysChanged,
@@ -39,11 +45,11 @@ export class Filter extends React.Component<Props, any> {
     this.component = loader.load(this.element, scopeProps, template);
   }
 
-  componentDidUpdate() {
-    const scope = this.component.getScope();
-    scope.loading = _.clone(this.props.loading);
-    scope.labelData = _.cloneDeep(this.props.labelData);
-    scope.target = _.cloneDeep(this.props.target);
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.metricType !== this.props.metricType) {
+      const scope = this.component.getScope();
+      scope.loading = this.loadLabels(scope);
+    }
   }
 
   componentWillUnmount() {
@@ -52,6 +58,19 @@ export class Filter extends React.Component<Props, any> {
     }
   }
 
+  async loadLabels(scope) {
+    return new Promise(async resolve => {
+      try {
+        const { meta } = await this.props.datasource.getLabels(this.props.target.metricType, this.props.target.refId);
+        scope.labelData = meta;
+        resolve();
+      } catch (error) {
+        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.target.metricType]);
+        resolve();
+      }
+    });
+  }
+
   render() {
     return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 1a1035ef2e1..f2f1399593f 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -9,6 +9,7 @@ export interface Props {
   datasource: any;
   defaultProject: string;
   metricType: string;
+  children?: (renderProps: any) => JSX.Element;
 }
 
 interface State {
@@ -17,6 +18,7 @@ interface State {
   services: any[];
   service: string;
   metric: string;
+  metricDescriptor: any;
 }
 
 export class Metrics extends React.Component<Props, State> {
@@ -26,6 +28,7 @@ export class Metrics extends React.Component<Props, State> {
     services: [],
     service: '',
     metric: '',
+    metricDescriptor: null,
   };
 
   constructor(props) {
@@ -68,13 +71,16 @@ export class Metrics extends React.Component<Props, State> {
     const services = this.getServicesList(metricDescriptors);
     const metrics = this.getMetricsList(metricDescriptors);
     const service = metrics.length > 0 ? metrics[0].service : '';
-    this.setState({ metricDescriptors, services, metrics, service: service });
+    const metricDescriptor = this.getSelectedMetricDescriptor(this.props.metricType);
+    this.setState({ metricDescriptors, services, metrics, service: service, metricDescriptor });
+  }
+
+  getSelectedMetricDescriptor(metricType) {
+    return this.state.metricDescriptors.find(md => md.type === this.props.templateSrv.replace(metricType));
   }
 
   getMetricsList(metricDescriptors) {
-    const selectedMetricDescriptor = metricDescriptors.find(
-      md => md.type === this.props.templateSrv.replace(this.props.metricType)
-    );
+    const selectedMetricDescriptor = this.getSelectedMetricDescriptor(this.props.metricType);
     const metricsByService = metricDescriptors.filter(m => m.service === selectedMetricDescriptor.service).map(m => ({
       service: m.service,
       value: m.type,
@@ -103,8 +109,9 @@ export class Metrics extends React.Component<Props, State> {
   }
 
   handleMetricTypeChange(value) {
-    const selectedMetricDescriptor = this.state.metricDescriptors.find(md => md.type === value);
-    this.props.onChange(selectedMetricDescriptor);
+    const metricDescriptor = this.getSelectedMetricDescriptor(value);
+    this.setState({ metricDescriptor });
+    this.props.onChange(metricDescriptor);
   }
 
   getServicesList(metricDescriptors) {
@@ -166,6 +173,7 @@ export class Metrics extends React.Component<Props, State> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
+        {this.props.children(this.state.metricDescriptor)}
       </React.Fragment>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index dbac6a60bb2..bd4b76dff91 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
-import appEvents from 'app/core/app_events';
 
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
-import { Target, QueryMeta } from '../types';
+import { Target } from '../types';
 
 export interface Props {
   onQueryChange: (target: Target) => void;
@@ -18,8 +17,6 @@ export interface Props {
 
 interface State {
   target: Target;
-  labelData: QueryMeta;
-  loadLabelsPromise: Promise<any>;
 }
 
 const DefaultTarget: Target = {
@@ -41,85 +38,79 @@ const DefaultTarget: Target = {
 };
 
 export class QueryEditor extends React.Component<Props, State> {
-  state: State = { labelData: null, loadLabelsPromise: new Promise(() => {}), target: DefaultTarget };
+  state: State = { target: DefaultTarget };
 
   componentDidMount() {
-    this.getLabels();
     this.setState({ target: this.props.target });
   }
 
-  async getLabels() {
-    const loadLabelsPromise = new Promise(async resolve => {
-      try {
-        const { meta } = await this.props.datasource.getLabels(this.props.target.metricType, this.props.target.refId);
-        this.setState({ labelData: meta });
-        resolve();
-      } catch (error) {
-        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.target.metricType]);
-        resolve();
-      }
-    });
-    this.setState({ loadLabelsPromise });
-  }
-
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
-    this.setState({
-      target: {
-        ...this.state.target,
-        ...{
-          metricType: type,
-          unit,
-          valueType,
-          metricKind,
+    this.setState(
+      {
+        target: {
+          ...this.state.target,
+          ...{
+            metricType: type,
+            unit,
+            valueType,
+            metricKind,
+          },
         },
       },
-    });
-
-    // this.$rootScope.$broadcast('metricTypeChanged');
-    this.getLabels();
-    this.props.onQueryChange(this.state.target);
-    this.props.onExecuteQuery();
+      () => {
+        this.props.onQueryChange(this.state.target);
+        this.props.onExecuteQuery();
+      }
+    );
   }
 
   handleFilterChange(value) {
-    this.setState({
-      target: {
-        ...this.state.target,
-        filters: value,
+    this.setState(
+      {
+        target: {
+          ...this.state.target,
+          filters: value,
+        },
       },
-    });
-    this.props.onQueryChange(this.state.target);
-    this.props.onExecuteQuery();
+      () => {
+        this.props.onQueryChange(this.state.target);
+        this.props.onExecuteQuery();
+      }
+    );
   }
 
   handleGroupBysChange(value) {
-    this.setState({
-      target: {
-        ...this.state.target,
-        groupBys: value,
+    this.setState(
+      {
+        target: {
+          ...this.state.target,
+          groupBys: value,
+        },
       },
-    });
-    this.props.onQueryChange(this.state.target);
-    this.props.onExecuteQuery();
+      () => {
+        this.props.onQueryChange(this.state.target);
+        this.props.onExecuteQuery();
+      }
+    );
   }
 
   handleAggregationChange(value) {
-    this.setState({
-      target: {
-        ...this.state.target,
-        aggregation: {
-          ...this.state.target.aggregation,
-          crossSeriesReducer: value,
-        },
+    const target = {
+      ...this.state.target,
+      aggregation: {
+        ...this.state.target.aggregation,
+        crossSeriesReducer: value,
       },
+    };
+    this.setState({ target }, () => {
+      this.props.onQueryChange(target);
+      this.props.onExecuteQuery();
     });
-    this.props.onQueryChange(this.state.target);
-    this.props.onExecuteQuery();
   }
 
   render() {
-    const { labelData, loadLabelsPromise, target } = this.state;
-    const { defaultProject, metricType, valueType, metricKind, aggregation } = target;
+    const { target } = this.state;
+    const { defaultProject, metricType, aggregation } = target;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -130,46 +121,27 @@ export class QueryEditor extends React.Component<Props, State> {
           templateSrv={templateSrv}
           datasource={datasource}
           onChange={value => this.handleMetricTypeChange(value)}
-        />
-        <Filter
-          filtersChanged={value => this.handleFilterChange(value)}
-          groupBysChanged={value => this.handleGroupBysChange(value)}
-          target={target}
-          uiSegmentSrv={uiSegmentSrv}
-          labelData={labelData}
-          templateSrv={templateSrv}
-          loading={loadLabelsPromise}
-        />
-        <Aggregations
-          valueType={valueType}
-          metricKind={metricKind}
-          templateSrv={templateSrv}
-          aggregation={aggregation}
-          onChange={value => this.handleAggregationChange(value)}
-        />
-        {/* target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData" */}
-        {/* <stackdriver-filter
-          target="target"
-          refresh="target.refresh()"
-          loading="target.loadLabelsPromise"
-          label-data="target.labelData"
-        />
-        <aggregation-picker
-          value-type="target.target.valueType"
-          metric-kind="target.target.metricKind"
-          aggregation="target.target.aggregation"
-          alignment-period="target.lastQueryMeta.alignmentPeriod"
-          refresh="target.refresh()"
-          template-srv="target.templateSrv"
-          datasource="target.datasource"
-          on-change="target.handleAggregationChange"
-        />
-
-        <stackdriver-aggregation
-          target="target.target"
-          alignment-period="target.lastQueryMeta.alignmentPeriod"
-          refresh="target.refresh()"
-        /> */}
+        >
+          {metric => (
+            <React.Fragment>
+              <Filter
+                filtersChanged={value => this.handleFilterChange(value)}
+                groupBysChanged={value => this.handleGroupBysChange(value)}
+                target={target}
+                uiSegmentSrv={uiSegmentSrv}
+                templateSrv={templateSrv}
+                datasource={datasource}
+                metricType={metric ? metric.type : ''}
+              />
+              <Aggregations
+                metricDescriptor={metric}
+                templateSrv={templateSrv}
+                aggregation={aggregation}
+                onChange={value => this.handleAggregationChange(value)}
+              />
+            </React.Fragment>
+          )}
+        </Metrics>
       </React.Fragment>
     );
   }

From 603ef1c37da53fbaabf8555b0769aa241d5f66d0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 16:08:18 +0100
Subject: [PATCH 045/352] refactor aggregation picker

---
 .../stackdriver/components/Aggregations.tsx   | 33 +++++++++++--------
 .../stackdriver/components/QueryEditor.tsx    |  4 ++-
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 44bd2cdd92b..b025229a95b 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 
-// import { OptionPicker } from './OptionPicker';
-// import { alignmentPeriods } from '../constants';
-// import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from '../functions';
 import { getAggregationOptionsByMetric } from '../functions';
 import { StackdriverPicker } from './StackdriverPicker';
-// import kbn from 'app/core/utils/kbn';
 
 export interface Props {
   onChange: (metricDescriptor) => void;
@@ -21,12 +17,14 @@ export interface Props {
     perSeriesAligner: string;
     groupBys: string[];
   };
+  children?: (renderProps: any) => JSX.Element;
 }
 
 interface State {
   alignmentPeriods: any[];
   alignOptions: any[];
   aggOptions: any[];
+  displayAdvancedOptions: boolean;
 }
 
 export class Aggregations extends React.Component<Props, State> {
@@ -34,6 +32,7 @@ export class Aggregations extends React.Component<Props, State> {
     alignmentPeriods: [],
     alignOptions: [],
     aggOptions: [],
+    displayAdvancedOptions: false,
   };
 
   constructor(props) {
@@ -47,12 +46,6 @@ export class Aggregations extends React.Component<Props, State> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    // const { metricDescriptor, aggregation } = this.props;
-    // if (
-    //   (metricDescriptor !== null && nextProps.metricDescriptor.valueType !== metricDescriptor.valueType) ||
-    //   nextProps.metricDescriptor.metricKind !== metricDescriptor.metricKind ||
-    //   nextProps.aggregation.groupBys !== aggregation.groupBys
-    // ) {
     if (nextProps.metricDescriptor !== null) {
       this.setAggOptions(nextProps);
     }
@@ -94,8 +87,14 @@ export class Aggregations extends React.Component<Props, State> {
     this.props.onChange(value);
   }
 
+  handleToggleDisplayAdvanced() {
+    this.setState(state => ({
+      displayAdvancedOptions: !state.displayAdvancedOptions,
+    }));
+  }
+
   render() {
-    const { aggOptions } = this.state;
+    const { aggOptions, displayAdvancedOptions } = this.state;
     const { aggregation, templateSrv } = this.props;
 
     return (
@@ -116,13 +115,19 @@ export class Aggregations extends React.Component<Props, State> {
           </div>
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
-              <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
-                <i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" />
-                <i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options
+              <a onClick={() => this.handleToggleDisplayAdvanced()}>
+                {displayAdvancedOptions ? (
+                  <i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" />
+                ) : (
+                  <React.Fragment>
+                    <i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options
+                  </React.Fragment>
+                )}
               </a>
             </label>
           </div>
         </div>
+        {this.props.children(this.state.displayAdvancedOptions)}
       </React.Fragment>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index bd4b76dff91..474e80e3394 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -138,7 +138,9 @@ export class QueryEditor extends React.Component<Props, State> {
                 templateSrv={templateSrv}
                 aggregation={aggregation}
                 onChange={value => this.handleAggregationChange(value)}
-              />
+              >
+                {displayAdvancedOptions => displayAdvancedOptions && <p>RÖV</p>}
+              </Aggregations>
             </React.Fragment>
           )}
         </Metrics>

From 945b0aeb8640195c5e2c3dcc8d77ab630cb5d6dc Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 17:12:50 +0100
Subject: [PATCH 046/352] add alignment component

---
 .../stackdriver/components/Aggregations.tsx   | 16 +---
 .../stackdriver/components/Alignments.tsx     | 83 +++++++++++++++++++
 .../stackdriver/components/QueryEditor.tsx    | 33 +++++++-
 3 files changed, 116 insertions(+), 16 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Alignments.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index b025229a95b..7dae4017991 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -13,24 +13,18 @@ export interface Props {
   };
   aggregation: {
     crossSeriesReducer: string;
-    alignmentPeriod: string;
-    perSeriesAligner: string;
     groupBys: string[];
   };
   children?: (renderProps: any) => JSX.Element;
 }
 
 interface State {
-  alignmentPeriods: any[];
-  alignOptions: any[];
   aggOptions: any[];
   displayAdvancedOptions: boolean;
 }
 
 export class Aggregations extends React.Component<Props, State> {
   state: State = {
-    alignmentPeriods: [],
-    alignOptions: [],
     aggOptions: [],
     displayAdvancedOptions: false,
   };
@@ -80,11 +74,7 @@ export class Aggregations extends React.Component<Props, State> {
       this.props.metricDescriptor.metricKind
     );
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
-    this.handleAggregationChange(newValue ? newValue.value : '');
-  }
-
-  handleAggregationChange(value) {
-    this.props.onChange(value);
+    this.props.onChange(newValue ? newValue.value : '');
   }
 
   handleToggleDisplayAdvanced() {
@@ -95,7 +85,7 @@ export class Aggregations extends React.Component<Props, State> {
 
   render() {
     const { aggOptions, displayAdvancedOptions } = this.state;
-    const { aggregation, templateSrv } = this.props;
+    const { aggregation, templateSrv, onChange } = this.props;
 
     return (
       <React.Fragment>
@@ -103,7 +93,7 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
             <StackdriverPicker
-              onChange={value => this.handleAggregationChange(value)}
+              onChange={value => onChange(value)}
               selected={aggregation.crossSeriesReducer}
               templateVariables={templateSrv.variables}
               options={aggOptions}
diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
new file mode 100644
index 00000000000..b871984a1b3
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import _ from 'lodash';
+
+// import { OptionPicker } from './OptionPicker';
+// import { alignmentPeriods } from '../constants';
+// import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from '../functions';
+import { getAlignmentOptionsByMetric } from '../functions';
+import { StackdriverPicker } from './StackdriverPicker';
+// import kbn from 'app/core/utils/kbn';
+
+export interface Props {
+  onChange: (metricDescriptor) => void;
+  templateSrv: any;
+  metricDescriptor: {
+    valueType: string;
+    metricKind: string;
+  };
+  perSeriesAligner: string;
+}
+
+interface State {
+  alignOptions: any[];
+}
+
+export class Alignments extends React.Component<Props, State> {
+  state: State = {
+    alignOptions: [],
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (this.props.metricDescriptor !== null) {
+      this.setAlignOptions(this.props);
+    }
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.metricDescriptor !== null) {
+      this.setAlignOptions(nextProps);
+    }
+  }
+
+  setAlignOptions({ metricDescriptor, perSeriesAligner, templateSrv, onChange }) {
+    const alignOptions = getAlignmentOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
+      option => ({
+        ...option,
+        label: option.text,
+      })
+    );
+    if (!alignOptions.some(o => o.value === templateSrv.replace(perSeriesAligner))) {
+      onChange(alignOptions.length > 0 ? alignOptions[0].value : '');
+    }
+    this.setState({ alignOptions });
+  }
+
+  render() {
+    const { alignOptions } = this.state;
+    const { perSeriesAligner, templateSrv, onChange } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="gf-form-group">
+          <div className="gf-form offset-width-9">
+            <label className="gf-form-label query-keyword width-15">Aligner</label>
+            <StackdriverPicker
+              onChange={value => onChange(value)}
+              selected={perSeriesAligner}
+              templateVariables={templateSrv.variables}
+              options={alignOptions}
+              searchable={true}
+              placeholder="Select Alignment"
+              className="width-15"
+              groupName="Alignment Options"
+            />
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 474e80e3394..ec5ed594280 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -4,6 +4,7 @@ import _ from 'lodash';
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
+import { Alignments } from './Alignments';
 import { Target } from '../types';
 
 export interface Props {
@@ -58,7 +59,7 @@ export class QueryEditor extends React.Component<Props, State> {
         },
       },
       () => {
-        this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state.target);
         this.props.onExecuteQuery();
       }
     );
@@ -84,7 +85,10 @@ export class QueryEditor extends React.Component<Props, State> {
       {
         target: {
           ...this.state.target,
-          groupBys: value,
+          aggregation: {
+            ...this.state.target.aggregation,
+            groupBys: value,
+          },
         },
       },
       () => {
@@ -108,6 +112,20 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
+  handleAlignmentChange(value) {
+    const target = {
+      ...this.state.target,
+      aggregation: {
+        ...this.state.target.aggregation,
+        perSeriesAligner: value,
+      },
+    };
+    this.setState({ target }, () => {
+      this.props.onQueryChange(target);
+      this.props.onExecuteQuery();
+    });
+  }
+
   render() {
     const { target } = this.state;
     const { defaultProject, metricType, aggregation } = target;
@@ -139,7 +157,16 @@ export class QueryEditor extends React.Component<Props, State> {
                 aggregation={aggregation}
                 onChange={value => this.handleAggregationChange(value)}
               >
-                {displayAdvancedOptions => displayAdvancedOptions && <p>RÖV</p>}
+                {displayAdvancedOptions =>
+                  displayAdvancedOptions && (
+                    <Alignments
+                      metricDescriptor={metric}
+                      templateSrv={templateSrv}
+                      perSeriesAligner={aggregation.perSeriesAligner}
+                      onChange={value => this.handleAlignmentChange(value)}
+                    />
+                  )
+                }
               </Aggregations>
             </React.Fragment>
           )}

From 095407c8cf16dd94ab00480ec9405d7369d66fcd Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:08:38 +0100
Subject: [PATCH 047/352] on deselect when reducer is set to none

---
 .../datasource/stackdriver/components/Aggregations.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 7dae4017991..a077649291c 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -45,8 +45,7 @@ export class Aggregations extends React.Component<Props, State> {
     }
   }
 
-  setAggOptions({ metricDescriptor, aggregation }) {
-    const { templateSrv } = this.props;
+  setAggOptions({ metricDescriptor, aggregation, templateSrv }) {
     let aggregations = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
       a => ({
         ...a,
@@ -63,7 +62,9 @@ export class Aggregations extends React.Component<Props, State> {
 
     if (aggregation.groupBys.length > 0) {
       aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
-      this.deselectAggregationOption('REDUCE_NONE');
+      if (aggregation.crossSeriesReducer === 'REDUCE_NONE') {
+        this.deselectAggregationOption('REDUCE_NONE');
+      }
     }
     this.setState({ aggOptions: aggregations });
   }

From b45f72a14076a0e71b850bf8697b32bac82a4a99 Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Fri, 16 Nov 2018 16:54:25 +0100
Subject: [PATCH 048/352] elasticsearch: support bucket script pipeline
 aggregations

---
 ...atasource_tests_elasticsearch_compare.json | 552 +++++++++++++++++-
 pkg/tsdb/elasticsearch/client/models.go       |   2 +-
 .../elasticsearch/client/search_request.go    |   4 +-
 pkg/tsdb/elasticsearch/models.go              |  32 +-
 pkg/tsdb/elasticsearch/response_parser.go     |  39 +-
 .../elasticsearch/response_parser_test.go     |  78 +++
 pkg/tsdb/elasticsearch/time_series_query.go   |  68 ++-
 .../elasticsearch/time_series_query_test.go   |  71 +++
 .../elasticsearch/elastic_response.ts         |  27 +-
 .../datasource/elasticsearch/metric_agg.ts    |  18 +-
 .../elasticsearch/partials/metric_agg.html    |  28 +-
 .../partials/pipeline_variables.html          |  20 +
 .../elasticsearch/pipeline_variables.ts       |  45 ++
 .../datasource/elasticsearch/query_builder.ts |  43 +-
 .../datasource/elasticsearch/query_ctrl.ts    |   4 +
 .../datasource/elasticsearch/query_def.ts     |  17 +
 .../specs/elastic_response.test.ts            |  66 +++
 .../elasticsearch/specs/query_builder.test.ts |  77 +++
 .../elasticsearch/specs/query_def.test.ts     |  22 +-
 19 files changed, 1151 insertions(+), 62 deletions(-)
 create mode 100644 public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
 create mode 100644 public/app/plugins/datasource/elasticsearch/pipeline_variables.ts

diff --git a/devenv/dev-dashboards/datasource_tests_elasticsearch_compare.json b/devenv/dev-dashboards/datasource_tests_elasticsearch_compare.json
index f07c6f46332..c631ea0a151 100644
--- a/devenv/dev-dashboards/datasource_tests_elasticsearch_compare.json
+++ b/devenv/dev-dashboards/datasource_tests_elasticsearch_compare.json
@@ -17,7 +17,7 @@
   "editable": true,
   "gnetId": null,
   "graphTooltip": 0,
-  "iteration": 1542304484522,
+  "iteration": 1545263815779,
   "links": [
     {
       "icon": "external link",
@@ -66,6 +66,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -168,6 +169,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -270,6 +272,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -372,6 +375,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -474,6 +478,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -576,6 +581,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2249,6 +2255,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2366,6 +2373,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2483,6 +2491,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2600,6 +2609,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2717,6 +2727,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2834,6 +2845,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -2951,6 +2963,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3068,6 +3081,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3185,6 +3199,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3302,6 +3317,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3419,6 +3435,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3536,6 +3553,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3667,6 +3685,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3780,6 +3799,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -3893,6 +3913,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4006,6 +4027,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4119,6 +4141,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4232,6 +4255,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4345,6 +4369,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4458,6 +4483,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4571,6 +4597,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4684,6 +4711,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4797,6 +4825,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -4910,6 +4939,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -5008,6 +5038,512 @@
         "x": 0,
         "y": 4
       },
+      "id": 60,
+      "panels": [
+        {
+          "aliasColors": {},
+          "bars": false,
+          "dashLength": 10,
+          "dashes": false,
+          "datasource": "$version_one",
+          "fill": 1,
+          "gridPos": {
+            "h": 8,
+            "w": 12,
+            "x": 0,
+            "y": 5
+          },
+          "id": 63,
+          "legend": {
+            "avg": false,
+            "current": false,
+            "max": false,
+            "min": false,
+            "show": true,
+            "total": false,
+            "values": false
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "paceLength": 10,
+          "percentage": false,
+          "pointradius": 2,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "bucketAggs": [
+                {
+                  "field": "@timestamp",
+                  "id": "2",
+                  "settings": {
+                    "interval": "auto",
+                    "min_doc_count": 0,
+                    "trimEdges": 0
+                  },
+                  "type": "date_histogram"
+                }
+              ],
+              "metrics": [
+                {
+                  "field": "select field",
+                  "hide": true,
+                  "id": "1",
+                  "type": "count"
+                },
+                {
+                  "field": "select field",
+                  "id": "3",
+                  "meta": {},
+                  "pipelineVariables": [
+                    {
+                      "name": "var1",
+                      "pipelineAgg": "1"
+                    }
+                  ],
+                  "settings": {
+                    "script": "params.var1 * 1000"
+                  },
+                  "type": "bucket_script"
+                }
+              ],
+              "refId": "A",
+              "timeField": "@timestamp"
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeRegions": [],
+          "timeShift": null,
+          "title": "count * 1000 (version one) - interval auto",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "buckets": null,
+            "mode": "time",
+            "name": null,
+            "show": true,
+            "values": []
+          },
+          "yaxes": [
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            },
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            }
+          ],
+          "yaxis": {
+            "align": false,
+            "alignLevel": null
+          }
+        },
+        {
+          "aliasColors": {},
+          "bars": false,
+          "dashLength": 10,
+          "dashes": false,
+          "datasource": "$version_two",
+          "fill": 1,
+          "gridPos": {
+            "h": 8,
+            "w": 12,
+            "x": 12,
+            "y": 5
+          },
+          "id": 64,
+          "legend": {
+            "avg": false,
+            "current": false,
+            "max": false,
+            "min": false,
+            "show": true,
+            "total": false,
+            "values": false
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "paceLength": 10,
+          "percentage": false,
+          "pointradius": 2,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "bucketAggs": [
+                {
+                  "field": "@timestamp",
+                  "id": "2",
+                  "settings": {
+                    "interval": "auto",
+                    "min_doc_count": 0,
+                    "trimEdges": 0
+                  },
+                  "type": "date_histogram"
+                }
+              ],
+              "metrics": [
+                {
+                  "field": "select field",
+                  "hide": true,
+                  "id": "1",
+                  "type": "count"
+                },
+                {
+                  "field": "select field",
+                  "id": "3",
+                  "meta": {},
+                  "pipelineVariables": [
+                    {
+                      "name": "var1",
+                      "pipelineAgg": "1"
+                    }
+                  ],
+                  "settings": {
+                    "script": "params.var1 * 1000"
+                  },
+                  "type": "bucket_script"
+                }
+              ],
+              "refId": "A",
+              "timeField": "@timestamp"
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeRegions": [],
+          "timeShift": null,
+          "title": "count * 1000 (version two) - interval auto",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "buckets": null,
+            "mode": "time",
+            "name": null,
+            "show": true,
+            "values": []
+          },
+          "yaxes": [
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            },
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            }
+          ],
+          "yaxis": {
+            "align": false,
+            "alignLevel": null
+          }
+        },
+        {
+          "aliasColors": {},
+          "bars": false,
+          "dashLength": 10,
+          "dashes": false,
+          "datasource": "$version_one",
+          "fill": 1,
+          "gridPos": {
+            "h": 8,
+            "w": 12,
+            "x": 0,
+            "y": 13
+          },
+          "id": 65,
+          "legend": {
+            "avg": false,
+            "current": false,
+            "max": false,
+            "min": false,
+            "show": true,
+            "total": false,
+            "values": false
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "paceLength": 10,
+          "percentage": false,
+          "pointradius": 2,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "bucketAggs": [
+                {
+                  "field": "@timestamp",
+                  "id": "2",
+                  "settings": {
+                    "interval": "auto",
+                    "min_doc_count": 0,
+                    "trimEdges": 0
+                  },
+                  "type": "date_histogram"
+                }
+              ],
+              "metrics": [
+                {
+                  "field": "select field",
+                  "hide": true,
+                  "id": "1",
+                  "type": "count"
+                },
+                {
+                  "field": "@value",
+                  "hide": true,
+                  "id": "3",
+                  "meta": {},
+                  "settings": {},
+                  "type": "avg"
+                },
+                {
+                  "field": "select field",
+                  "id": "4",
+                  "meta": {},
+                  "pipelineVariables": [
+                    {
+                      "name": "var1",
+                      "pipelineAgg": "1"
+                    },
+                    {
+                      "name": "var2",
+                      "pipelineAgg": "3"
+                    }
+                  ],
+                  "settings": {
+                    "script": "params.var1 * params.var2"
+                  },
+                  "type": "bucket_script"
+                }
+              ],
+              "refId": "A",
+              "timeField": "@timestamp"
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeRegions": [],
+          "timeShift": null,
+          "title": "count * avg (version one) - interval auto",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "buckets": null,
+            "mode": "time",
+            "name": null,
+            "show": true,
+            "values": []
+          },
+          "yaxes": [
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            },
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            }
+          ],
+          "yaxis": {
+            "align": false,
+            "alignLevel": null
+          }
+        },
+        {
+          "aliasColors": {},
+          "bars": false,
+          "dashLength": 10,
+          "dashes": false,
+          "datasource": "$version_two",
+          "fill": 1,
+          "gridPos": {
+            "h": 8,
+            "w": 12,
+            "x": 12,
+            "y": 13
+          },
+          "id": 66,
+          "legend": {
+            "avg": false,
+            "current": false,
+            "max": false,
+            "min": false,
+            "show": true,
+            "total": false,
+            "values": false
+          },
+          "lines": true,
+          "linewidth": 1,
+          "links": [],
+          "nullPointMode": "null",
+          "paceLength": 10,
+          "percentage": false,
+          "pointradius": 2,
+          "points": false,
+          "renderer": "flot",
+          "seriesOverrides": [],
+          "stack": false,
+          "steppedLine": false,
+          "targets": [
+            {
+              "bucketAggs": [
+                {
+                  "field": "@timestamp",
+                  "id": "2",
+                  "settings": {
+                    "interval": "auto",
+                    "min_doc_count": 0,
+                    "trimEdges": 0
+                  },
+                  "type": "date_histogram"
+                }
+              ],
+              "metrics": [
+                {
+                  "field": "select field",
+                  "hide": true,
+                  "id": "1",
+                  "type": "count"
+                },
+                {
+                  "field": "@value",
+                  "hide": true,
+                  "id": "3",
+                  "meta": {},
+                  "settings": {},
+                  "type": "avg"
+                },
+                {
+                  "field": "select field",
+                  "id": "4",
+                  "meta": {},
+                  "pipelineVariables": [
+                    {
+                      "name": "var1",
+                      "pipelineAgg": "1"
+                    },
+                    {
+                      "name": "var2",
+                      "pipelineAgg": "3"
+                    }
+                  ],
+                  "settings": {
+                    "script": "params.var1 * params.var2"
+                  },
+                  "type": "bucket_script"
+                }
+              ],
+              "refId": "A",
+              "timeField": "@timestamp"
+            }
+          ],
+          "thresholds": [],
+          "timeFrom": null,
+          "timeRegions": [],
+          "timeShift": null,
+          "title": "count * avg (version two) - interval auto",
+          "tooltip": {
+            "shared": true,
+            "sort": 0,
+            "value_type": "individual"
+          },
+          "type": "graph",
+          "xaxis": {
+            "buckets": null,
+            "mode": "time",
+            "name": null,
+            "show": true,
+            "values": []
+          },
+          "yaxes": [
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            },
+            {
+              "format": "short",
+              "label": null,
+              "logBase": 1,
+              "max": null,
+              "min": null,
+              "show": true
+            }
+          ],
+          "yaxis": {
+            "align": false,
+            "alignLevel": null
+          }
+        }
+      ],
+      "title": "Basic date histogram with bucket script aggregation",
+      "type": "row"
+    },
+    {
+      "collapsed": true,
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 5
+      },
       "id": 54,
       "panels": [
         {
@@ -5042,6 +5578,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -5193,6 +5730,7 @@
           "linewidth": 1,
           "links": [],
           "nullPointMode": "null",
+          "paceLength": 10,
           "percentage": false,
           "pointradius": 5,
           "points": false,
@@ -5328,8 +5866,8 @@
     "list": [
       {
         "current": {
-          "text": "gdev-elasticsearch-v2-metrics",
-          "value": "gdev-elasticsearch-v2-metrics"
+          "text": "gdev-elasticsearch-v5-metrics",
+          "value": "gdev-elasticsearch-v5-metrics"
         },
         "hide": 0,
         "label": "Version One",
@@ -5343,8 +5881,8 @@
       },
       {
         "current": {
-          "text": "gdev-elasticsearch-v5-metrics",
-          "value": "gdev-elasticsearch-v5-metrics"
+          "text": "gdev-elasticsearch-v6-metrics",
+          "value": "gdev-elasticsearch-v6-metrics"
         },
         "hide": 0,
         "label": "Version Two",
@@ -5359,7 +5897,7 @@
     ]
   },
   "time": {
-    "from": "now-3h",
+    "from": "now-1h",
     "to": "now"
   },
   "timepicker": {
@@ -5390,5 +5928,5 @@
   "timezone": "",
   "title": "Datasource tests - Elasticsearch comparison",
   "uid": "fuFWehBmk",
-  "version": 10
+  "version": 4
 }
\ No newline at end of file
diff --git a/pkg/tsdb/elasticsearch/client/models.go b/pkg/tsdb/elasticsearch/client/models.go
index 5307dc34b27..fcc96aeba93 100644
--- a/pkg/tsdb/elasticsearch/client/models.go
+++ b/pkg/tsdb/elasticsearch/client/models.go
@@ -292,7 +292,7 @@ func (a *MetricAggregation) MarshalJSON() ([]byte, error) {
 
 // PipelineAggregation represents a metric aggregation
 type PipelineAggregation struct {
-	BucketPath string
+	BucketPath interface{}
 	Settings   map[string]interface{}
 }
 
diff --git a/pkg/tsdb/elasticsearch/client/search_request.go b/pkg/tsdb/elasticsearch/client/search_request.go
index d89a98cbadb..b8c9232f97b 100644
--- a/pkg/tsdb/elasticsearch/client/search_request.go
+++ b/pkg/tsdb/elasticsearch/client/search_request.go
@@ -268,7 +268,7 @@ type AggBuilder interface {
 	Filters(key string, fn func(a *FiltersAggregation, b AggBuilder)) AggBuilder
 	GeoHashGrid(key, field string, fn func(a *GeoHashGridAggregation, b AggBuilder)) AggBuilder
 	Metric(key, metricType, field string, fn func(a *MetricAggregation)) AggBuilder
-	Pipeline(key, pipelineType, bucketPath string, fn func(a *PipelineAggregation)) AggBuilder
+	Pipeline(key, pipelineType string, bucketPath interface{}, fn func(a *PipelineAggregation)) AggBuilder
 	Build() (AggArray, error)
 }
 
@@ -438,7 +438,7 @@ func (b *aggBuilderImpl) Metric(key, metricType, field string, fn func(a *Metric
 	return b
 }
 
-func (b *aggBuilderImpl) Pipeline(key, pipelineType, bucketPath string, fn func(a *PipelineAggregation)) AggBuilder {
+func (b *aggBuilderImpl) Pipeline(key, pipelineType string, bucketPath interface{}, fn func(a *PipelineAggregation)) AggBuilder {
 	innerAgg := &PipelineAggregation{
 		BucketPath: bucketPath,
 		Settings:   make(map[string]interface{}),
diff --git a/pkg/tsdb/elasticsearch/models.go b/pkg/tsdb/elasticsearch/models.go
index 46af5e4b745..d38e21c3ebc 100644
--- a/pkg/tsdb/elasticsearch/models.go
+++ b/pkg/tsdb/elasticsearch/models.go
@@ -25,13 +25,14 @@ type BucketAgg struct {
 
 // MetricAgg represents a metric aggregation of the time series query model of the datasource
 type MetricAgg struct {
-	Field             string           `json:"field"`
-	Hide              bool             `json:"hide"`
-	ID                string           `json:"id"`
-	PipelineAggregate string           `json:"pipelineAgg"`
-	Settings          *simplejson.Json `json:"settings"`
-	Meta              *simplejson.Json `json:"meta"`
-	Type              string           `json:"type"`
+	Field             string            `json:"field"`
+	Hide              bool              `json:"hide"`
+	ID                string            `json:"id"`
+	PipelineAggregate string            `json:"pipelineAgg"`
+	PipelineVariables map[string]string `json:"pipelineVariables"`
+	Settings          *simplejson.Json  `json:"settings"`
+	Meta              *simplejson.Json  `json:"meta"`
+	Type              string            `json:"type"`
 }
 
 var metricAggType = map[string]string{
@@ -45,6 +46,7 @@ var metricAggType = map[string]string{
 	"cardinality":    "Unique Count",
 	"moving_avg":     "Moving Average",
 	"derivative":     "Derivative",
+	"bucket_script":  "Bucket Script",
 	"raw_document":   "Raw Document",
 }
 
@@ -60,8 +62,13 @@ var extendedStats = map[string]string{
 }
 
 var pipelineAggType = map[string]string{
-	"moving_avg": "moving_avg",
-	"derivative": "derivative",
+	"moving_avg":    "moving_avg",
+	"derivative":    "derivative",
+	"bucket_script": "bucket_script",
+}
+
+var pipelineAggWithMultipleBucketPathsType = map[string]string{
+	"bucket_script": "bucket_script",
 }
 
 func isPipelineAgg(metricType string) bool {
@@ -71,6 +78,13 @@ func isPipelineAgg(metricType string) bool {
 	return false
 }
 
+func isPipelineAggWithMultipleBucketPaths(metricType string) bool {
+	if _, ok := pipelineAggWithMultipleBucketPathsType[metricType]; ok {
+		return true
+	}
+	return false
+}
+
 func describeMetric(metricType, field string) string {
 	text := metricAggType[metricType]
 	if metricType == countType {
diff --git a/pkg/tsdb/elasticsearch/response_parser.go b/pkg/tsdb/elasticsearch/response_parser.go
index b2c724a9b93..6bbaa3df34b 100644
--- a/pkg/tsdb/elasticsearch/response_parser.go
+++ b/pkg/tsdb/elasticsearch/response_parser.go
@@ -260,6 +260,7 @@ func (rp *responseParser) processMetrics(esAgg *simplejson.Json, target *Query,
 
 			newSeries.Tags["metric"] = metric.Type
 			newSeries.Tags["field"] = metric.Field
+			newSeries.Tags["metricId"] = metric.ID
 			for _, v := range esAgg.Get("buckets").MustArray() {
 				bucket := simplejson.NewFromAny(v)
 				key := castToNullFloat(bucket.Get("key"))
@@ -459,20 +460,42 @@ func (rp *responseParser) getSeriesName(series *tsdb.TimeSeries, target *Query,
 	}
 	// todo, if field and pipelineAgg
 	if field != "" && isPipelineAgg(metricType) {
-		found := false
-		for _, metric := range target.Metrics {
-			if metric.ID == field {
-				metricName += " " + describeMetric(metric.Type, field)
-				found = true
+		if isPipelineAggWithMultipleBucketPaths(metricType) {
+			metricID := ""
+			if v, ok := series.Tags["metricId"]; ok {
+				metricID = v
+			}
+
+			for _, metric := range target.Metrics {
+				if metric.ID == metricID {
+					metricName = metric.Settings.Get("script").MustString()
+					for name, pipelineAgg := range metric.PipelineVariables {
+						for _, m := range target.Metrics {
+							if m.ID == pipelineAgg {
+								metricName = strings.Replace(metricName, "params."+name, describeMetric(m.Type, m.Field), -1)
+							}
+						}
+					}
+				}
+			}
+		} else {
+			found := false
+			for _, metric := range target.Metrics {
+				if metric.ID == field {
+					metricName += " " + describeMetric(metric.Type, field)
+					found = true
+				}
+			}
+			if !found {
+				metricName = "Unset"
 			}
-		}
-		if !found {
-			metricName = "Unset"
 		}
 	} else if field != "" {
 		metricName += " " + field
 	}
 
+	delete(series.Tags, "metricId")
+
 	if len(series.Tags) == 0 {
 		return metricName
 	}
diff --git a/pkg/tsdb/elasticsearch/response_parser_test.go b/pkg/tsdb/elasticsearch/response_parser_test.go
index b00c14cf946..e9cd8ad0980 100644
--- a/pkg/tsdb/elasticsearch/response_parser_test.go
+++ b/pkg/tsdb/elasticsearch/response_parser_test.go
@@ -787,6 +787,84 @@ func TestResponseParser(t *testing.T) {
 			So(rows[0][2].(null.Float).Float64, ShouldEqual, 3000)
 		})
 
+		Convey("With bucket_script", func() {
+			targets := map[string]string{
+				"A": `{
+					"timeField": "@timestamp",
+					"metrics": [
+						{ "id": "1", "type": "sum", "field": "@value" },
+            { "id": "3", "type": "max", "field": "@value" },
+            {
+              "id": "4",
+              "field": "select field",
+              "pipelineVariables": [{ "name": "var1", "pipelineAgg": "1" }, { "name": "var2", "pipelineAgg": "3" }],
+              "settings": { "script": "params.var1 * params.var2" },
+              "type": "bucket_script"
+            }
+					],
+          "bucketAggs": [{ "type": "date_histogram", "field": "@timestamp", "id": "2" }]
+				}`,
+			}
+			response := `{
+        "responses": [
+          {
+            "aggregations": {
+              "2": {
+                "buckets": [
+                  {
+                    "1": { "value": 2 },
+                    "3": { "value": 3 },
+                    "4": { "value": 6 },
+                    "doc_count": 60,
+                    "key": 1000
+                  },
+                  {
+                    "1": { "value": 3 },
+                    "3": { "value": 4 },
+                    "4": { "value": 12 },
+                    "doc_count": 60,
+                    "key": 2000
+                  }
+                ]
+              }
+            }
+          }
+        ]
+			}`
+			rp, err := newResponseParserForTest(targets, response)
+			So(err, ShouldBeNil)
+			result, err := rp.getTimeSeries()
+			So(err, ShouldBeNil)
+			So(result.Results, ShouldHaveLength, 1)
+
+			queryRes := result.Results["A"]
+			So(queryRes, ShouldNotBeNil)
+			So(queryRes.Series, ShouldHaveLength, 3)
+			seriesOne := queryRes.Series[0]
+			So(seriesOne.Name, ShouldEqual, "Sum @value")
+			So(seriesOne.Points, ShouldHaveLength, 2)
+			So(seriesOne.Points[0][0].Float64, ShouldEqual, 2)
+			So(seriesOne.Points[0][1].Float64, ShouldEqual, 1000)
+			So(seriesOne.Points[1][0].Float64, ShouldEqual, 3)
+			So(seriesOne.Points[1][1].Float64, ShouldEqual, 2000)
+
+			seriesTwo := queryRes.Series[1]
+			So(seriesTwo.Name, ShouldEqual, "Max @value")
+			So(seriesTwo.Points, ShouldHaveLength, 2)
+			So(seriesTwo.Points[0][0].Float64, ShouldEqual, 3)
+			So(seriesTwo.Points[0][1].Float64, ShouldEqual, 1000)
+			So(seriesTwo.Points[1][0].Float64, ShouldEqual, 4)
+			So(seriesTwo.Points[1][1].Float64, ShouldEqual, 2000)
+
+			seriesThree := queryRes.Series[2]
+			So(seriesThree.Name, ShouldEqual, "Sum @value * Max @value")
+			So(seriesThree.Points, ShouldHaveLength, 2)
+			So(seriesThree.Points[0][0].Float64, ShouldEqual, 6)
+			So(seriesThree.Points[0][1].Float64, ShouldEqual, 1000)
+			So(seriesThree.Points[1][0].Float64, ShouldEqual, 12)
+			So(seriesThree.Points[1][1].Float64, ShouldEqual, 2000)
+		})
+
 		// Convey("Raw documents query", func() {
 		// 	targets := map[string]string{
 		// 		"A": `{
diff --git a/pkg/tsdb/elasticsearch/time_series_query.go b/pkg/tsdb/elasticsearch/time_series_query.go
index 28a930df3a2..e1cd466275e 100644
--- a/pkg/tsdb/elasticsearch/time_series_query.go
+++ b/pkg/tsdb/elasticsearch/time_series_query.go
@@ -94,26 +94,56 @@ func (e *timeSeriesQuery) execute() (*tsdb.Response, error) {
 			}
 
 			if isPipelineAgg(m.Type) {
-				if _, err := strconv.Atoi(m.PipelineAggregate); err == nil {
-					var appliedAgg *MetricAgg
-					for _, pipelineMetric := range q.Metrics {
-						if pipelineMetric.ID == m.PipelineAggregate {
-							appliedAgg = pipelineMetric
-							break
-						}
-					}
-					if appliedAgg != nil {
-						bucketPath := m.PipelineAggregate
-						if appliedAgg.Type == countType {
-							bucketPath = "_count"
+				if isPipelineAggWithMultipleBucketPaths(m.Type) {
+					if len(m.PipelineVariables) > 0 {
+						bucketPaths := map[string]interface{}{}
+						for name, pipelineAgg := range m.PipelineVariables {
+							if _, err := strconv.Atoi(pipelineAgg); err == nil {
+								var appliedAgg *MetricAgg
+								for _, pipelineMetric := range q.Metrics {
+									if pipelineMetric.ID == pipelineAgg {
+										appliedAgg = pipelineMetric
+										break
+									}
+								}
+								if appliedAgg != nil {
+									if appliedAgg.Type == countType {
+										bucketPaths[name] = "_count"
+									} else {
+										bucketPaths[name] = pipelineAgg
+									}
+								}
+							}
 						}
 
-						aggBuilder.Pipeline(m.ID, m.Type, bucketPath, func(a *es.PipelineAggregation) {
+						aggBuilder.Pipeline(m.ID, m.Type, bucketPaths, func(a *es.PipelineAggregation) {
 							a.Settings = m.Settings.MustMap()
 						})
+					} else {
+						continue
 					}
 				} else {
-					continue
+					if _, err := strconv.Atoi(m.PipelineAggregate); err == nil {
+						var appliedAgg *MetricAgg
+						for _, pipelineMetric := range q.Metrics {
+							if pipelineMetric.ID == m.PipelineAggregate {
+								appliedAgg = pipelineMetric
+								break
+							}
+						}
+						if appliedAgg != nil {
+							bucketPath := m.PipelineAggregate
+							if appliedAgg.Type == countType {
+								bucketPath = "_count"
+							}
+
+							aggBuilder.Pipeline(m.ID, m.Type, bucketPath, func(a *es.PipelineAggregation) {
+								a.Settings = m.Settings.MustMap()
+							})
+						}
+					} else {
+						continue
+					}
 				}
 			} else {
 				aggBuilder.Metric(m.ID, m.Type, m.Field, func(a *es.MetricAggregation) {
@@ -328,12 +358,20 @@ func (p *timeSeriesQueryParser) parseMetrics(model *simplejson.Json) ([]*MetricA
 		metric.PipelineAggregate = metricJSON.Get("pipelineAgg").MustString()
 		metric.Settings = simplejson.NewFromAny(metricJSON.Get("settings").MustMap())
 		metric.Meta = simplejson.NewFromAny(metricJSON.Get("meta").MustMap())
-
 		metric.Type, err = metricJSON.Get("type").String()
 		if err != nil {
 			return nil, err
 		}
 
+		if isPipelineAggWithMultipleBucketPaths(metric.Type) {
+			metric.PipelineVariables = map[string]string{}
+			pvArr := metricJSON.Get("pipelineVariables").MustArray()
+			for _, v := range pvArr {
+				kv := v.(map[string]interface{})
+				metric.PipelineVariables[kv["name"].(string)] = kv["pipelineAgg"].(string)
+			}
+		}
+
 		result = append(result, metric)
 	}
 	return result, nil
diff --git a/pkg/tsdb/elasticsearch/time_series_query_test.go b/pkg/tsdb/elasticsearch/time_series_query_test.go
index a4f305242fa..3a558c32782 100644
--- a/pkg/tsdb/elasticsearch/time_series_query_test.go
+++ b/pkg/tsdb/elasticsearch/time_series_query_test.go
@@ -543,6 +543,77 @@ func TestExecuteTimeSeriesQuery(t *testing.T) {
 			plAgg := derivativeAgg.Aggregation.Aggregation.(*es.PipelineAggregation)
 			So(plAgg.BucketPath, ShouldEqual, "_count")
 		})
+
+		Convey("With bucket_script", func() {
+			c := newFakeClient(5)
+			_, err := executeTsdbQuery(c, `{
+				"timeField": "@timestamp",
+				"bucketAggs": [
+					{ "type": "date_histogram", "field": "@timestamp", "id": "4" }
+				],
+				"metrics": [
+					{ "id": "3", "type": "sum", "field": "@value" },
+					{ "id": "5", "type": "max", "field": "@value" },
+					{
+						"id": "2",
+						"type": "bucket_script",
+						"pipelineVariables": [
+							{ "name": "var1", "pipelineAgg": "3" },
+							{ "name": "var2", "pipelineAgg": "5" }
+						],
+						"settings": { "script": "params.var1 * params.var2" }
+					}
+				]
+			}`, from, to, 15*time.Second)
+			So(err, ShouldBeNil)
+			sr := c.multisearchRequests[0].Requests[0]
+
+			firstLevel := sr.Aggs[0]
+			So(firstLevel.Key, ShouldEqual, "4")
+			So(firstLevel.Aggregation.Type, ShouldEqual, "date_histogram")
+
+			bucketScriptAgg := firstLevel.Aggregation.Aggs[2]
+			So(bucketScriptAgg.Key, ShouldEqual, "2")
+			plAgg := bucketScriptAgg.Aggregation.Aggregation.(*es.PipelineAggregation)
+			So(plAgg.BucketPath.(map[string]interface{}), ShouldResemble, map[string]interface{}{
+				"var1": "3",
+				"var2": "5",
+			})
+		})
+
+		Convey("With bucket_script doc count", func() {
+			c := newFakeClient(5)
+			_, err := executeTsdbQuery(c, `{
+				"timeField": "@timestamp",
+				"bucketAggs": [
+					{ "type": "date_histogram", "field": "@timestamp", "id": "4" }
+				],
+				"metrics": [
+					{ "id": "3", "type": "count", "field": "select field" },
+					{
+						"id": "2",
+						"type": "bucket_script",
+						"pipelineVariables": [
+							{ "name": "var1", "pipelineAgg": "3" }
+						],
+						"settings": { "script": "params.var1 * 1000" }
+					}
+				]
+			}`, from, to, 15*time.Second)
+			So(err, ShouldBeNil)
+			sr := c.multisearchRequests[0].Requests[0]
+
+			firstLevel := sr.Aggs[0]
+			So(firstLevel.Key, ShouldEqual, "4")
+			So(firstLevel.Aggregation.Type, ShouldEqual, "date_histogram")
+
+			bucketScriptAgg := firstLevel.Aggregation.Aggs[0]
+			So(bucketScriptAgg.Key, ShouldEqual, "2")
+			plAgg := bucketScriptAgg.Aggregation.Aggregation.(*es.PipelineAggregation)
+			So(plAgg.BucketPath.(map[string]interface{}), ShouldResemble, map[string]interface{}{
+				"var1": "_count",
+			})
+		})
 	})
 }
 
diff --git a/public/app/plugins/datasource/elasticsearch/elastic_response.ts b/public/app/plugins/datasource/elasticsearch/elastic_response.ts
index 7adec22c545..49f33e2963a 100644
--- a/public/app/plugins/datasource/elasticsearch/elastic_response.ts
+++ b/public/app/plugins/datasource/elasticsearch/elastic_response.ts
@@ -88,6 +88,7 @@ export class ElasticResponse {
             datapoints: [],
             metric: metric.type,
             field: metric.field,
+            metricId: metric.id,
             props: props,
           };
           for (i = 0; i < esAgg.buckets.length; i++) {
@@ -240,7 +241,7 @@ export class ElasticResponse {
           return metricName;
         }
         if (group === 'field') {
-          return series.field;
+          return series.field || '';
         }
 
         return match;
@@ -248,11 +249,27 @@ export class ElasticResponse {
     }
 
     if (series.field && queryDef.isPipelineAgg(series.metric)) {
-      const appliedAgg = _.find(target.metrics, { id: series.field });
-      if (appliedAgg) {
-        metricName += ' ' + queryDef.describeMetric(appliedAgg);
+      if (series.metric && queryDef.isPipelineAggWithMultipleBucketPaths(series.metric)) {
+        const agg = _.find(target.metrics, { id: series.metricId });
+        if (agg && agg.settings.script) {
+          metricName = agg.settings.script;
+
+          for (const pv of agg.pipelineVariables) {
+            const appliedAgg = _.find(target.metrics, { id: pv.pipelineAgg });
+            if (appliedAgg) {
+              metricName = metricName.replace('params.' + pv.name, queryDef.describeMetric(appliedAgg));
+            }
+          }
+        } else {
+          metricName = 'Unset';
+        }
       } else {
-        metricName = 'Unset';
+        const appliedAgg = _.find(target.metrics, { id: series.field });
+        if (appliedAgg) {
+          metricName += ' ' + queryDef.describeMetric(appliedAgg);
+        } else {
+          metricName = 'Unset';
+        }
       }
     } else if (series.field) {
       metricName += ' ' + series.field;
diff --git a/public/app/plugins/datasource/elasticsearch/metric_agg.ts b/public/app/plugins/datasource/elasticsearch/metric_agg.ts
index cae5be45720..735b4b4f7f9 100644
--- a/public/app/plugins/datasource/elasticsearch/metric_agg.ts
+++ b/public/app/plugins/datasource/elasticsearch/metric_agg.ts
@@ -35,11 +35,20 @@ export class ElasticMetricAggCtrl {
       $scope.isFirst = $scope.index === 0;
       $scope.isSingle = metricAggs.length === 1;
       $scope.settingsLinkText = '';
+      $scope.variablesLinkText = '';
       $scope.aggDef = _.find($scope.metricAggTypes, { value: $scope.agg.type });
 
       if (queryDef.isPipelineAgg($scope.agg.type)) {
-        $scope.agg.pipelineAgg = $scope.agg.pipelineAgg || 'select metric';
-        $scope.agg.field = $scope.agg.pipelineAgg;
+        if (queryDef.isPipelineAggWithMultipleBucketPaths($scope.agg.type)) {
+          $scope.variablesLinkText = 'Options';
+
+          if ($scope.agg.settings.script) {
+            $scope.variablesLinkText = 'Script: ' + $scope.agg.settings.script.replace(new RegExp('params.', 'g'), '');
+          }
+        } else {
+          $scope.agg.pipelineAgg = $scope.agg.pipelineAgg || 'select metric';
+          $scope.agg.field = $scope.agg.pipelineAgg;
+        }
 
         const pipelineOptions = queryDef.getPipelineOptions($scope.agg);
         if (pipelineOptions.length > 0) {
@@ -119,6 +128,10 @@ export class ElasticMetricAggCtrl {
       $scope.updatePipelineAggOptions();
     };
 
+    $scope.toggleVariables = () => {
+      $scope.showVariables = !$scope.showVariables;
+    };
+
     $scope.onChangeInternal = () => {
       $scope.onChange();
     };
@@ -152,6 +165,7 @@ export class ElasticMetricAggCtrl {
         $scope.target.bucketAggs = [queryDef.defaultBucketAgg()];
       }
 
+      $scope.showVariables = queryDef.isPipelineAggWithMultipleBucketPaths($scope.agg.type);
       $scope.updatePipelineAggOptions();
       $scope.onChange();
     };
diff --git a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
index b4a1a61ed32..362b0ddb486 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
@@ -13,7 +13,17 @@
 	<div class="gf-form">
 		<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="width-10"></metric-segment-model>
 		<metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
-		<metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
+		<metric-segment-model ng-if="aggDef.isPipelineAgg && !aggDef.supportsMultipleBucketPaths" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
+	</div>
+
+  <div class="gf-form gf-form--grow" ng-if="aggDef.isPipelineAgg && aggDef.supportsMultipleBucketPaths">
+		<label class="gf-form-label gf-form-label--grow">
+			<a ng-click="toggleVariables()">
+				<i class="fa fa-caret-down" ng-show="showVariables"></i>
+				<i class="fa fa-caret-right" ng-hide="showVariables"></i>
+        {{variablesLinkText}}
+			</a>
+		</label>
 	</div>
 
 	<div class="gf-form gf-form--grow">
@@ -36,6 +46,20 @@
 	</div>
 </div>
 
+<div class="gf-form-group" ng-if="showVariables">
+	<elastic-pipeline-variables variables="agg.pipelineVariables" options="pipelineAggOptions" on-change="onChangeInternal()" />
+  <div class="gf-form offset-width-7">
+    <label class="gf-form-label width-10">
+      Script
+      <info-popover mode="right-normal">
+        Elasticsearch v5.0 and above: Scripting language is Painless. Use <i>params.&lt;var&gt;</i> to reference a variable.<br/><br/>
+        Elasticsearch pre-v5.0: Scripting language is per default Groovy if not changed. For Groovy use <i>&lt;var&gt;</i> to reference a variable.
+      </info-popover>
+    </label>
+    <input type="text" class="gf-form-input max-width-24" empty-to-null ng-model="agg.settings.script" ng-blur="onChangeInternal()" spellcheck='false' placeholder="params.var1 / params.var2">
+  </div>
+</div>
+
 <div class="gf-form-group" ng-if="showOptions">
 	<div class="gf-form offset-width-7" ng-if="agg.type === 'derivative'">
 		<label class="gf-form-label width-10">Unit</label>
@@ -103,5 +127,5 @@
 			<tip>The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value</tip>
 		</label>
 		<input type="number" class="gf-form-input max-width-12" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
-	</div>
+  </div>
 </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
new file mode 100644
index 00000000000..66bf5c8467b
--- /dev/null
+++ b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
@@ -0,0 +1,20 @@
+<div ng-repeat="var in variables">
+  <div class="gf-form offset-width-7" ng-if="$index === 0">
+    <label class="gf-form-label width-10">Variables</label>
+    <input type="text" class="gf-form-input max-width-12" ng-model="var.name" placeholder="Variable name" ng-blur="onChangeInternal()" spellcheck='false'>
+    <metric-segment-model property="var.pipelineAgg" options="options" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
+    <label class="gf-form-label">
+      <a class="pointer" ng-click="remove($index)"><i class="fa fa-minus"></i></a>
+    </label>
+    <label class="gf-form-label">
+      <a class="pointer" ng-click="add()"><i class="fa fa-plus"></i></a>
+    </label>
+  </div>
+  <div class="gf-form offset-width-17" ng-if="$index !== 0">
+    <input type="text" class="gf-form-input max-width-12" ng-model="var.name" placeholder="Variable name" ng-blur="onChangeInternal()" spellcheck='false'>
+    <metric-segment-model property="var.pipelineAgg" options="options" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
+    <label class="gf-form-label">
+      <a class="pointer" ng-click="remove($index)"><i class="fa fa-minus"></i></a>
+    </label>
+  </div>
+</div>
diff --git a/public/app/plugins/datasource/elasticsearch/pipeline_variables.ts b/public/app/plugins/datasource/elasticsearch/pipeline_variables.ts
new file mode 100644
index 00000000000..94e0e78d686
--- /dev/null
+++ b/public/app/plugins/datasource/elasticsearch/pipeline_variables.ts
@@ -0,0 +1,45 @@
+import coreModule from 'app/core/core_module';
+import _ from 'lodash';
+
+export function elasticPipelineVariables() {
+  return {
+    templateUrl: 'public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html',
+    controller: 'ElasticPipelineVariablesCtrl',
+    restrict: 'E',
+    scope: {
+      onChange: '&',
+      variables: '=',
+      options: '=',
+    },
+  };
+}
+
+const newVariable = index => {
+  return {
+    name: 'var' + index,
+    pipelineAgg: 'select metric',
+  };
+};
+
+export class ElasticPipelineVariablesCtrl {
+  constructor($scope) {
+    $scope.variables = $scope.variables || [newVariable(1)];
+
+    $scope.onChangeInternal = () => {
+      $scope.onChange();
+    };
+
+    $scope.add = () => {
+      $scope.variables.push(newVariable($scope.variables.length + 1));
+      $scope.onChange();
+    };
+
+    $scope.remove = index => {
+      $scope.variables.splice(index, 1);
+      $scope.onChange();
+    };
+  }
+}
+
+coreModule.directive('elasticPipelineVariables', elasticPipelineVariables);
+coreModule.controller('ElasticPipelineVariablesCtrl', ElasticPipelineVariablesCtrl);
diff --git a/public/app/plugins/datasource/elasticsearch/query_builder.ts b/public/app/plugins/datasource/elasticsearch/query_builder.ts
index cff7b5672f6..7d4d23aa6f0 100644
--- a/public/app/plugins/datasource/elasticsearch/query_builder.ts
+++ b/public/app/plugins/datasource/elasticsearch/query_builder.ts
@@ -189,7 +189,7 @@ export class ElasticQueryBuilder {
     target.bucketAggs = target.bucketAggs || [queryDef.defaultBucketAgg()];
     target.timeField = this.timeField;
 
-    let i, nestedAggs, metric;
+    let i, j, pv, nestedAggs, metric;
     const query = {
       size: 0,
       query: {
@@ -269,17 +269,42 @@ export class ElasticQueryBuilder {
       let metricAgg = null;
 
       if (queryDef.isPipelineAgg(metric.type)) {
-        if (metric.pipelineAgg && /^\d*$/.test(metric.pipelineAgg)) {
-          const appliedAgg = queryDef.findMetricById(target.metrics, metric.pipelineAgg);
-          if (appliedAgg) {
-            if (appliedAgg.type === 'count') {
-              metricAgg = { buckets_path: '_count' };
-            } else {
-              metricAgg = { buckets_path: metric.pipelineAgg };
+        if (queryDef.isPipelineAggWithMultipleBucketPaths(metric.type)) {
+          if (metric.pipelineVariables) {
+            metricAgg = {
+              buckets_path: {},
+            };
+
+            for (j = 0; j < metric.pipelineVariables.length; j++) {
+              pv = metric.pipelineVariables[j];
+
+              if (pv.name && pv.pipelineAgg && /^\d*$/.test(pv.pipelineAgg)) {
+                const appliedAgg = queryDef.findMetricById(target.metrics, pv.pipelineAgg);
+                if (appliedAgg) {
+                  if (appliedAgg.type === 'count') {
+                    metricAgg.buckets_path[pv.name] = '_count';
+                  } else {
+                    metricAgg.buckets_path[pv.name] = pv.pipelineAgg;
+                  }
+                }
+              }
             }
+          } else {
+            continue;
           }
         } else {
-          continue;
+          if (metric.pipelineAgg && /^\d*$/.test(metric.pipelineAgg)) {
+            const appliedAgg = queryDef.findMetricById(target.metrics, metric.pipelineAgg);
+            if (appliedAgg) {
+              if (appliedAgg.type === 'count') {
+                metricAgg = { buckets_path: '_count' };
+              } else {
+                metricAgg = { buckets_path: metric.pipelineAgg };
+              }
+            }
+          } else {
+            continue;
+          }
         }
       } else {
         metricAgg = { field: metric.field };
diff --git a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts
index 81dbd5b8f8a..40420d7c6a3 100644
--- a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts
+++ b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts
@@ -1,5 +1,6 @@
 import './bucket_agg';
 import './metric_agg';
+import './pipeline_variables';
 
 import angular from 'angular';
 import _ from 'lodash';
@@ -70,6 +71,9 @@ export class ElasticQueryCtrl extends QueryCtrl {
       if (aggDef.requiresField) {
         text += metric.field;
       }
+      if (aggDef.supportsMultipleBucketPaths) {
+        text += metric.settings.script.replace(new RegExp('params.', 'g'), '');
+      }
       text += '), ';
     });
 
diff --git a/public/app/plugins/datasource/elasticsearch/query_def.ts b/public/app/plugins/datasource/elasticsearch/query_def.ts
index ae9a453b1fb..13797853a77 100644
--- a/public/app/plugins/datasource/elasticsearch/query_def.ts
+++ b/public/app/plugins/datasource/elasticsearch/query_def.ts
@@ -64,6 +64,14 @@ export const metricAggTypes = [
     isPipelineAgg: true,
     minVersion: 2,
   },
+  {
+    text: 'Bucket Script',
+    value: 'bucket_script',
+    requiresField: false,
+    isPipelineAgg: true,
+    supportsMultipleBucketPaths: true,
+    minVersion: 2,
+  },
   { text: 'Raw Document', value: 'raw_document', requiresField: false },
 ];
 
@@ -128,6 +136,7 @@ export const pipelineOptions = {
     { text: 'minimize', default: false },
   ],
   derivative: [{ text: 'unit', default: undefined }],
+  bucket_script: [],
 };
 
 export const movingAvgModelSettings = {
@@ -171,6 +180,14 @@ export function isPipelineAgg(metricType) {
   return false;
 }
 
+export function isPipelineAggWithMultipleBucketPaths(metricType) {
+  if (metricType) {
+    return metricAggTypes.find(t => t.value === metricType && t.supportsMultipleBucketPaths) !== undefined;
+  }
+
+  return false;
+}
+
 export function getPipelineAggOptions(targets) {
   const result = [];
   _.each(targets.metrics, metric => {
diff --git a/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts b/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts
index 8b41e71145a..bedc71a0b58 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts
@@ -665,4 +665,70 @@ describe('ElasticResponse', () => {
       expect(result.data[0].datapoints[0].fieldProp).toBe('field');
     });
   });
+
+  describe('with bucket_script ', () => {
+    let result;
+
+    beforeEach(() => {
+      targets = [
+        {
+          refId: 'A',
+          metrics: [
+            { id: '1', type: 'sum', field: '@value' },
+            { id: '3', type: 'max', field: '@value' },
+            {
+              id: '4',
+              field: 'select field',
+              pipelineVariables: [{ name: 'var1', pipelineAgg: '1' }, { name: 'var2', pipelineAgg: '3' }],
+              settings: { script: 'params.var1 * params.var2' },
+              type: 'bucket_script',
+            },
+          ],
+          bucketAggs: [{ type: 'date_histogram', field: '@timestamp', id: '2' }],
+        },
+      ];
+      response = {
+        responses: [
+          {
+            aggregations: {
+              '2': {
+                buckets: [
+                  {
+                    1: { value: 2 },
+                    3: { value: 3 },
+                    4: { value: 6 },
+                    doc_count: 60,
+                    key: 1000,
+                  },
+                  {
+                    1: { value: 3 },
+                    3: { value: 4 },
+                    4: { value: 12 },
+                    doc_count: 60,
+                    key: 2000,
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      };
+
+      result = new ElasticResponse(targets, response).getTimeSeries();
+    });
+
+    it('should return 3 series', () => {
+      expect(result.data.length).toBe(3);
+      expect(result.data[0].datapoints.length).toBe(2);
+      expect(result.data[0].target).toBe('Sum @value');
+      expect(result.data[1].target).toBe('Max @value');
+      expect(result.data[2].target).toBe('Sum @value * Max @value');
+      expect(result.data[0].datapoints[0][0]).toBe(2);
+      expect(result.data[1].datapoints[0][0]).toBe(3);
+      expect(result.data[2].datapoints[0][0]).toBe(6);
+      expect(result.data[0].datapoints[1][0]).toBe(3);
+      expect(result.data[1].datapoints[1][0]).toBe(4);
+      expect(result.data[2].datapoints[1][0]).toBe(12);
+    });
+  });
 });
diff --git a/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts b/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts
index 4cd7deddb67..993eaccfbe2 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts
@@ -353,6 +353,83 @@ describe('ElasticQueryBuilder', () => {
     expect(firstLevel.aggs['2'].derivative.buckets_path).toBe('_count');
   });
 
+  it('with bucket_script', () => {
+    const query = builder.build({
+      metrics: [
+        {
+          id: '1',
+          type: 'sum',
+          field: '@value',
+        },
+        {
+          id: '3',
+          type: 'max',
+          field: '@value',
+        },
+        {
+          field: 'select field',
+          id: '4',
+          meta: {},
+          pipelineVariables: [
+            {
+              name: 'var1',
+              pipelineAgg: '1',
+            },
+            {
+              name: 'var2',
+              pipelineAgg: '3',
+            },
+          ],
+          settings: {
+            script: 'params.var1 * params.var2',
+          },
+          type: 'bucket_script',
+        },
+      ],
+      bucketAggs: [{ type: 'date_histogram', field: '@timestamp', id: '2' }],
+    });
+
+    const firstLevel = query.aggs['2'];
+
+    expect(firstLevel.aggs['4']).not.toBe(undefined);
+    expect(firstLevel.aggs['4'].bucket_script).not.toBe(undefined);
+    expect(firstLevel.aggs['4'].bucket_script.buckets_path).toMatchObject({ var1: '1', var2: '3' });
+  });
+
+  it('with bucket_script doc count', () => {
+    const query = builder.build({
+      metrics: [
+        {
+          id: '3',
+          type: 'count',
+          field: 'select field',
+        },
+        {
+          field: 'select field',
+          id: '4',
+          meta: {},
+          pipelineVariables: [
+            {
+              name: 'var1',
+              pipelineAgg: '3',
+            },
+          ],
+          settings: {
+            script: 'params.var1 * 1000',
+          },
+          type: 'bucket_script',
+        },
+      ],
+      bucketAggs: [{ type: 'date_histogram', field: '@timestamp', id: '2' }],
+    });
+
+    const firstLevel = query.aggs['2'];
+
+    expect(firstLevel.aggs['4']).not.toBe(undefined);
+    expect(firstLevel.aggs['4'].bucket_script).not.toBe(undefined);
+    expect(firstLevel.aggs['4'].bucket_script.buckets_path).toMatchObject({ var1: '_count' });
+  });
+
   it('with histogram', () => {
     const query = builder.build({
       metrics: [{ id: '1', type: 'count' }],
diff --git a/public/app/plugins/datasource/elasticsearch/specs/query_def.test.ts b/public/app/plugins/datasource/elasticsearch/specs/query_def.test.ts
index 471d400037c..f3d1874338f 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/query_def.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/query_def.test.ts
@@ -65,6 +65,24 @@ describe('ElasticQueryDef', () => {
     });
   });
 
+  describe('isPipelineAggWithMultipleBucketPaths', () => {
+    describe('bucket_script', () => {
+      const result = queryDef.isPipelineAggWithMultipleBucketPaths('bucket_script');
+
+      test('should have multiple bucket paths support', () => {
+        expect(result).toBe(true);
+      });
+    });
+
+    describe('moving_avg', () => {
+      const result = queryDef.isPipelineAggWithMultipleBucketPaths('moving_avg');
+
+      test('should not have multiple bucket paths support', () => {
+        expect(result).toBe(false);
+      });
+    });
+  });
+
   describe('pipeline aggs depending on esverison', () => {
     describe('using esversion undefined', () => {
       test('should not get pipeline aggs', () => {
@@ -80,13 +98,13 @@ describe('ElasticQueryDef', () => {
 
     describe('using esversion 2', () => {
       test('should get pipeline aggs', () => {
-        expect(queryDef.getMetricAggTypes(2).length).toBe(11);
+        expect(queryDef.getMetricAggTypes(2).length).toBe(12);
       });
     });
 
     describe('using esversion 5', () => {
       test('should get pipeline aggs', () => {
-        expect(queryDef.getMetricAggTypes(5).length).toBe(11);
+        expect(queryDef.getMetricAggTypes(5).length).toBe(12);
       });
     });
   });

From ec68c656607d3c8fb08f8d74aa8fb710740ddec2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 11:00:16 +0100
Subject: [PATCH 049/352] flatten target obj

---
 .../stackdriver/components/Aggregations.tsx   |  21 ++--
 .../stackdriver/components/QueryEditor.tsx    | 105 ++++++------------
 .../datasource/stackdriver/datasource.ts      |  18 +--
 .../partials/query.aggregation.html           |   8 +-
 .../stackdriver/query_aggregation_ctrl.ts     |  14 +--
 .../datasource/stackdriver/query_ctrl.ts      |  20 ++--
 .../stackdriver/query_filter_ctrl.ts          |   4 +-
 .../stackdriver/specs/datasource.test.ts      |   1 -
 .../specs/query_aggregation_ctrl.test.ts      |  13 ++-
 .../specs/query_filter_ctrl.test.ts           |  16 ++-
 .../plugins/datasource/stackdriver/types.ts   |  10 +-
 11 files changed, 90 insertions(+), 140 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index a077649291c..2fa3b9b9f7d 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -11,10 +11,8 @@ export interface Props {
     valueType: string;
     metricKind: string;
   };
-  aggregation: {
-    crossSeriesReducer: string;
-    groupBys: string[];
-  };
+  crossSeriesReducer: string;
+  groupBys: string[];
   children?: (renderProps: any) => JSX.Element;
 }
 
@@ -45,7 +43,7 @@ export class Aggregations extends React.Component<Props, State> {
     }
   }
 
-  setAggOptions({ metricDescriptor, aggregation, templateSrv }) {
+  setAggOptions({ metricDescriptor, crossSeriesReducer, groupBys, templateSrv }) {
     let aggregations = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
       a => ({
         ...a,
@@ -53,16 +51,13 @@ export class Aggregations extends React.Component<Props, State> {
       })
     );
 
-    if (
-      aggregations.length > 0 &&
-      !aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))
-    ) {
+    if (aggregations.length > 0 && !aggregations.find(o => o.value === templateSrv.replace(crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
-    if (aggregation.groupBys.length > 0) {
+    if (groupBys.length > 0) {
       aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
-      if (aggregation.crossSeriesReducer === 'REDUCE_NONE') {
+      if (crossSeriesReducer === 'REDUCE_NONE') {
         this.deselectAggregationOption('REDUCE_NONE');
       }
     }
@@ -86,7 +81,7 @@ export class Aggregations extends React.Component<Props, State> {
 
   render() {
     const { aggOptions, displayAdvancedOptions } = this.state;
-    const { aggregation, templateSrv, onChange } = this.props;
+    const { templateSrv, onChange, crossSeriesReducer } = this.props;
 
     return (
       <React.Fragment>
@@ -95,7 +90,7 @@ export class Aggregations extends React.Component<Props, State> {
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
             <StackdriverPicker
               onChange={value => onChange(value)}
-              selected={aggregation.crossSeriesReducer}
+              selected={crossSeriesReducer}
               templateVariables={templateSrv.variables}
               options={aggOptions}
               searchable={true}
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index ec5ed594280..24dec2e90d5 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -16,10 +16,6 @@ export interface Props {
   uiSegmentSrv: any;
 }
 
-interface State {
-  target: Target;
-}
-
 const DefaultTarget: Target = {
   defaultProject: 'loading project...',
   metricType: '',
@@ -28,38 +24,31 @@ const DefaultTarget: Target = {
   refId: '',
   service: '',
   unit: '',
-  aggregation: {
-    crossSeriesReducer: 'REDUCE_MEAN',
-    alignmentPeriod: 'stackdriver-auto',
-    perSeriesAligner: 'ALIGN_MEAN',
-    groupBys: [],
-  },
+  crossSeriesReducer: 'REDUCE_MEAN',
+  alignmentPeriod: 'stackdriver-auto',
+  perSeriesAligner: 'ALIGN_MEAN',
+  groupBys: [],
   filters: [],
   aliasBy: '',
 };
 
-export class QueryEditor extends React.Component<Props, State> {
-  state: State = { target: DefaultTarget };
+export class QueryEditor extends React.Component<Props, Target> {
+  state: Target = DefaultTarget;
 
   componentDidMount() {
-    this.setState({ target: this.props.target });
+    this.setState(this.props.target);
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
     this.setState(
       {
-        target: {
-          ...this.state.target,
-          ...{
-            metricType: type,
-            unit,
-            valueType,
-            metricKind,
-          },
-        },
+        metricType: type,
+        unit,
+        valueType,
+        metricKind,
       },
       () => {
-        // this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -68,13 +57,10 @@ export class QueryEditor extends React.Component<Props, State> {
   handleFilterChange(value) {
     this.setState(
       {
-        target: {
-          ...this.state.target,
-          filters: value,
-        },
+        filters: value,
       },
       () => {
-        this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -83,52 +69,35 @@ export class QueryEditor extends React.Component<Props, State> {
   handleGroupBysChange(value) {
     this.setState(
       {
-        target: {
-          ...this.state.target,
-          aggregation: {
-            ...this.state.target.aggregation,
-            groupBys: value,
-          },
-        },
+        groupBys: value,
       },
       () => {
-        this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
   }
 
   handleAggregationChange(value) {
-    const target = {
-      ...this.state.target,
-      aggregation: {
-        ...this.state.target.aggregation,
-        crossSeriesReducer: value,
-      },
-    };
-    this.setState({ target }, () => {
-      this.props.onQueryChange(target);
+    this.setState({ crossSeriesReducer: value }, () => {
+      // this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
   }
 
   handleAlignmentChange(value) {
-    const target = {
-      ...this.state.target,
-      aggregation: {
-        ...this.state.target.aggregation,
-        perSeriesAligner: value,
-      },
-    };
-    this.setState({ target }, () => {
-      this.props.onQueryChange(target);
+    this.setState({ perSeriesAligner: value }, () => {
+      // this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
   }
 
+  componentDidUpdate(prevProps: Props, prevState: Target) {
+    this.props.onQueryChange(this.state);
+  }
+
   render() {
-    const { target } = this.state;
-    const { defaultProject, metricType, aggregation } = target;
+    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -145,7 +114,7 @@ export class QueryEditor extends React.Component<Props, State> {
               <Filter
                 filtersChanged={value => this.handleFilterChange(value)}
                 groupBysChanged={value => this.handleGroupBysChange(value)}
-                target={target}
+                target={this.state}
                 uiSegmentSrv={uiSegmentSrv}
                 templateSrv={templateSrv}
                 datasource={datasource}
@@ -154,19 +123,19 @@ export class QueryEditor extends React.Component<Props, State> {
               <Aggregations
                 metricDescriptor={metric}
                 templateSrv={templateSrv}
-                aggregation={aggregation}
+                crossSeriesReducer={crossSeriesReducer}
+                groupBys={groupBys}
                 onChange={value => this.handleAggregationChange(value)}
               >
-                {displayAdvancedOptions =>
-                  displayAdvancedOptions && (
-                    <Alignments
-                      metricDescriptor={metric}
-                      templateSrv={templateSrv}
-                      perSeriesAligner={aggregation.perSeriesAligner}
-                      onChange={value => this.handleAlignmentChange(value)}
-                    />
-                  )
-                }
+                {displayAdvancedOptions => (
+                  <Alignments
+                    display={displayAdvancedOptions}
+                    metricDescriptor={metric}
+                    templateSrv={templateSrv}
+                    perSeriesAligner={perSeriesAligner}
+                    onChange={value => this.handleAlignmentChange(value)}
+                  />
+                )}
               </Aggregations>
             </React.Fragment>
           )}
diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index 7b1afbae5ac..8e361558e6d 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -29,21 +29,15 @@ export default class StackdriverDatasource {
         return !target.hide && target.metricType;
       })
       .map(t => {
-        if (!t.hasOwnProperty('aggregation')) {
-          t.aggregation = {
-            crossSeriesReducer: 'REDUCE_MEAN',
-            groupBys: [],
-          };
-        }
         return {
           refId: t.refId,
           intervalMs: options.intervalMs,
           datasourceId: this.id,
           metricType: this.templateSrv.replace(t.metricType, options.scopedVars || {}),
-          primaryAggregation: this.templateSrv.replace(t.aggregation.crossSeriesReducer, options.scopedVars || {}),
-          perSeriesAligner: this.templateSrv.replace(t.aggregation.perSeriesAligner, options.scopedVars || {}),
-          alignmentPeriod: this.templateSrv.replace(t.aggregation.alignmentPeriod, options.scopedVars || {}),
-          groupBys: this.interpolateGroupBys(t.aggregation.groupBys, options.scopedVars),
+          primaryAggregation: this.templateSrv.replace(t.crossSeriesReducer || 'REDUCE_MEAN', options.scopedVars || {}),
+          perSeriesAligner: this.templateSrv.replace(t.perSeriesAligner, options.scopedVars || {}),
+          alignmentPeriod: this.templateSrv.replace(t.alignmentPeriod, options.scopedVars || {}),
+          groupBys: this.interpolateGroupBys(t.groupBys, options.scopedVars),
           view: t.view || 'FULL',
           filters: (t.filters || []).map(f => {
             return this.templateSrv.replace(f, options.scopedVars || {});
@@ -76,9 +70,7 @@ export default class StackdriverDatasource {
           refId: refId,
           datasourceId: this.id,
           metricType: this.templateSrv.replace(metricType),
-          aggregation: {
-            crossSeriesReducer: 'REDUCE_NONE',
-          },
+          crossSeriesReducer: 'REDUCE_NONE',
           view: 'HEADERS',
         },
       ],
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index d6de9011857..30ac9f219eb 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -3,7 +3,7 @@
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <stackdriver-picker
       onChange="ctrl.handleAggregationChange"
-      selected="ctrl.target.aggregation.crossSeriesReducer"
+      selected="ctrl.target.crossSeriesReducer"
       options="ctrl.aggOptions"
       searchable="true"
       placeholder="'Select Aggregation'"
@@ -26,7 +26,7 @@
     <label class="gf-form-label query-keyword width-15">Aligner</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentChange"
-      selected="ctrl.target.aggregation.perSeriesAligner"
+      selected="ctrl.target.perSeriesAligner"
       options="ctrl.alignOptions"
       searchable="true"
       placeholder="'Select Alignment'"
@@ -43,7 +43,7 @@
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentPeriodChange"
-      selected="ctrl.target.aggregation.alignmentPeriod"
+      selected="ctrl.target.alignmentPeriod"
       options="ctrl.alignmentPeriods"
       searchable="true"
       placeholder="'Select Alignment'"
@@ -56,4 +56,4 @@
   <div class="gf-form gf-form--grow">
     <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 7213b02550d..d08bf8d94d9 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -54,11 +54,11 @@ export class StackdriverAggregationCtrl {
       ...a,
       label: a.text,
     }));
-    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
-    if (this.target.aggregation.groupBys.length > 0) {
+    if (this.target.groupBys.length > 0) {
       aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
@@ -72,24 +72,24 @@ export class StackdriverAggregationCtrl {
   }
 
   handleAlignmentChange(value) {
-    this.target.aggregation.perSeriesAligner = value;
+    this.target.perSeriesAligner = value;
     this.$scope.refresh();
   }
 
   handleAggregationChange(value) {
-    this.target.aggregation.crossSeriesReducer = value;
+    this.target.crossSeriesReducer = value;
     this.$scope.refresh();
   }
 
   handleAlignmentPeriodChange(value) {
-    this.target.aggregation.alignmentPeriod = value;
+    this.target.alignmentPeriod = value;
     this.$scope.refresh();
   }
 
   formatAlignmentText() {
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
     const selectedAlignment = alignments.find(
-      ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
+      ap => ap.value === this.templateSrv.replace(this.target.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
       selectedAlignment ? selectedAlignment.text : ''
@@ -99,7 +99,7 @@ export class StackdriverAggregationCtrl {
   deselectAggregationOption(notValidOptionValue: string) {
     const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
-    this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
+    this.target.crossSeriesReducer = newValue ? newValue.value : '';
   }
 
   getTemplateVariablesGroup() {
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8dbfc7038dc..d7b08522711 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -13,12 +13,10 @@ export const DefaultTarget = {
   service: '',
   metric: '',
   unit: '',
-  aggregation: {
-    crossSeriesReducer: 'REDUCE_MEAN',
-    alignmentPeriod: 'stackdriver-auto',
-    perSeriesAligner: 'ALIGN_MEAN',
-    groupBys: [],
-  },
+  crossSeriesReducer: 'REDUCE_MEAN',
+  alignmentPeriod: 'stackdriver-auto',
+  perSeriesAligner: 'ALIGN_MEAN',
+  groupBys: [],
   filters: [],
   showAggregationOptions: false,
   aliasBy: '',
@@ -36,12 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     service: '',
     metric: '',
     unit: '',
-    aggregation: {
-      crossSeriesReducer: 'REDUCE_MEAN',
-      alignmentPeriod: 'stackdriver-auto',
-      perSeriesAligner: 'ALIGN_MEAN',
-      groupBys: [],
-    },
+    crossSeriesReducer: 'REDUCE_MEAN',
+    alignmentPeriod: 'stackdriver-auto',
+    perSeriesAligner: 'ALIGN_MEAN',
+    groupBys: [],
     filters: [],
     showAggregationOptions: false,
     aliasBy: '',
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index d02ed91b53d..767c80c4721 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -40,7 +40,7 @@ export class StackdriverFilterCtrl {
 
   initSegments(hideGroupBys: boolean) {
     if (!hideGroupBys) {
-      this.groupBySegments = this.target.aggregation.groupBys.map(groupBy => {
+      this.groupBySegments = this.target.groupBys.map(groupBy => {
         return this.uiSegmentSrv.getSegmentForValue(groupBy);
       });
       this.ensurePlusButton(this.groupBySegments);
@@ -111,7 +111,7 @@ export class StackdriverFilterCtrl {
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
 
-    elements = elements.filter(e => this.target.aggregation.groupBys.indexOf(e.value) === -1);
+    elements = elements.filter(e => this.target.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
       return [];
diff --git a/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts b/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts
index d0d8462e506..46cdd77b7a9 100644
--- a/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts
@@ -82,7 +82,6 @@ describe('StackdriverDataSource', () => {
       targets: [
         {
           refId: 'A',
-          aggregation: {},
         },
       ],
     };
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 6e83824d504..c2273526844 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -12,7 +12,8 @@ describe('StackdriverAggregationCtrl', () => {
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'GAUGE',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
+                crossSeriesReducer: '',
+                groupBys: [],
               },
             },
             {
@@ -52,7 +53,8 @@ describe('StackdriverAggregationCtrl', () => {
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'DELTA',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
+                crossSeriesReducer: '',
+                groupBys: [],
               },
             },
             {
@@ -87,7 +89,8 @@ describe('StackdriverAggregationCtrl', () => {
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'GAUGE',
-                aggregation: { crossSeriesReducer: 'REDUCE_NONE', groupBys: ['resource.label.projectid'] },
+                crossSeriesReducer: 'REDUCE_NONE',
+                groupBys: ['resource.label.projectid'],
               },
             },
             {
@@ -110,8 +113,8 @@ describe('StackdriverAggregationCtrl', () => {
 
         it('should select some other reducer than REDUCE_NONE', () => {
           ctrl.setAggOptions();
-          expect(ctrl.target.aggregation.crossSeriesReducer).not.toBe('');
-          expect(ctrl.target.aggregation.crossSeriesReducer).not.toBe('REDUCE_NONE');
+          expect(ctrl.target.crossSeriesReducer).not.toBe('');
+          expect(ctrl.target.crossSeriesReducer).not.toBe('REDUCE_NONE');
         });
       });
     });
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 5e8d7c0aea0..539ac5c71da 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -56,7 +56,7 @@ describe('StackdriverQueryFilterCtrl', () => {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
-        ctrl.target.aggregation.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
+        ctrl.target.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
 
         result = await ctrl.getGroupBys();
       });
@@ -78,7 +78,7 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(ctrl.target.aggregation.groupBys.length).toBe(1);
+        expect(ctrl.target.groupBys.length).toBe(1);
       });
     });
 
@@ -91,7 +91,7 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(ctrl.target.aggregation.groupBys.length).toBe(0);
+        expect(ctrl.target.groupBys.length).toBe(0);
       });
     });
   });
@@ -425,12 +425,10 @@ function createTarget(existingFilters?: string[]) {
     metricType: 'ametric',
     service: '',
     refId: 'A',
-    aggregation: {
-      crossSeriesReducer: '',
-      alignmentPeriod: '',
-      perSeriesAligner: '',
-      groupBys: [],
-    },
+    crossSeriesReducer: '',
+    alignmentPeriod: '',
+    perSeriesAligner: '',
+    groupBys: [],
     filters: existingFilters || [],
     aliasBy: '',
     metricService: '',
diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts
index fa46800ce21..ffd4f28cad1 100644
--- a/public/app/plugins/datasource/stackdriver/types.ts
+++ b/public/app/plugins/datasource/stackdriver/types.ts
@@ -26,12 +26,10 @@ export interface Target {
   metricType: string;
   service: string;
   refId: string;
-  aggregation: {
-    crossSeriesReducer: string;
-    alignmentPeriod: string;
-    perSeriesAligner: string;
-    groupBys: string[];
-  };
+  crossSeriesReducer: string;
+  alignmentPeriod: string;
+  perSeriesAligner: string;
+  groupBys: string[];
   filters: string[];
   aliasBy: string;
   metricKind: any;

From 1452bc2e8a6573bad6f4a6dba2eaf7cd73330593 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 11:26:05 +0100
Subject: [PATCH 050/352] move alignment population code to parent component.
 make alignment a stateless component instead.

---
 .../stackdriver/components/Alignments.tsx     | 90 +++++--------------
 .../stackdriver/components/QueryEditor.tsx    | 47 +++++++---
 .../datasource/stackdriver/functions.ts       | 11 +++
 3 files changed, 66 insertions(+), 82 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
index b871984a1b3..bf26d3347d0 100644
--- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -1,16 +1,12 @@
-import React from 'react';
+import React, { SFC } from 'react';
 import _ from 'lodash';
 
-// import { OptionPicker } from './OptionPicker';
-// import { alignmentPeriods } from '../constants';
-// import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from '../functions';
-import { getAlignmentOptionsByMetric } from '../functions';
 import { StackdriverPicker } from './StackdriverPicker';
-// import kbn from 'app/core/utils/kbn';
 
 export interface Props {
   onChange: (metricDescriptor) => void;
   templateSrv: any;
+  alignOptions: any[];
   metricDescriptor: {
     valueType: string;
     metricKind: string;
@@ -18,66 +14,24 @@ export interface Props {
   perSeriesAligner: string;
 }
 
-interface State {
-  alignOptions: any[];
-}
-
-export class Alignments extends React.Component<Props, State> {
-  state: State = {
-    alignOptions: [],
-  };
-
-  constructor(props) {
-    super(props);
-  }
-
-  componentDidMount() {
-    if (this.props.metricDescriptor !== null) {
-      this.setAlignOptions(this.props);
-    }
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.metricDescriptor !== null) {
-      this.setAlignOptions(nextProps);
-    }
-  }
-
-  setAlignOptions({ metricDescriptor, perSeriesAligner, templateSrv, onChange }) {
-    const alignOptions = getAlignmentOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
-      option => ({
-        ...option,
-        label: option.text,
-      })
-    );
-    if (!alignOptions.some(o => o.value === templateSrv.replace(perSeriesAligner))) {
-      onChange(alignOptions.length > 0 ? alignOptions[0].value : '');
-    }
-    this.setState({ alignOptions });
-  }
-
-  render() {
-    const { alignOptions } = this.state;
-    const { perSeriesAligner, templateSrv, onChange } = this.props;
-
-    return (
-      <React.Fragment>
-        <div className="gf-form-group">
-          <div className="gf-form offset-width-9">
-            <label className="gf-form-label query-keyword width-15">Aligner</label>
-            <StackdriverPicker
-              onChange={value => onChange(value)}
-              selected={perSeriesAligner}
-              templateVariables={templateSrv.variables}
-              options={alignOptions}
-              searchable={true}
-              placeholder="Select Alignment"
-              className="width-15"
-              groupName="Alignment Options"
-            />
-          </div>
+export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange, alignOptions }) => {
+  return (
+    <React.Fragment>
+      <div className="gf-form-group">
+        <div className="gf-form offset-width-9">
+          <label className="gf-form-label query-keyword width-15">Aligner</label>
+          <StackdriverPicker
+            onChange={value => onChange(value)}
+            selected={perSeriesAligner}
+            templateVariables={templateSrv.variables}
+            options={alignOptions}
+            searchable={true}
+            placeholder="Select Alignment"
+            className="width-15"
+            groupName="Alignment Options"
+          />
         </div>
-      </React.Fragment>
-    );
-  }
-}
+      </div>
+    </React.Fragment>
+  );
+};
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 24dec2e90d5..b661166e2a2 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -6,6 +6,7 @@ import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
 import { Target } from '../types';
+import { getAlignmentPickerData } from '../functions';
 
 export interface Props {
   onQueryChange: (target: Target) => void;
@@ -16,7 +17,11 @@ export interface Props {
   uiSegmentSrv: any;
 }
 
-const DefaultTarget: Target = {
+interface State extends Target {
+  alignOptions: any[];
+}
+
+const DefaultTarget: State = {
   defaultProject: 'loading project...',
   metricType: '',
   metricKind: '',
@@ -30,18 +35,30 @@ const DefaultTarget: Target = {
   groupBys: [],
   filters: [],
   aliasBy: '',
+  alignOptions: [],
 };
 
-export class QueryEditor extends React.Component<Props, Target> {
-  state: Target = DefaultTarget;
+export class QueryEditor extends React.Component<Props, State> {
+  state: State = DefaultTarget;
 
   componentDidMount() {
-    this.setState(this.props.target);
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(this.props.target, this.props.templateSrv);
+    this.setState({
+      ...this.props.target,
+      alignOptions,
+      perSeriesAligner,
+    });
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
+      { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
+      this.props.templateSrv
+    );
     this.setState(
       {
+        alignOptions,
+        perSeriesAligner,
         metricType: type,
         unit,
         valueType,
@@ -97,7 +114,7 @@ export class QueryEditor extends React.Component<Props, Target> {
   }
 
   render() {
-    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner } = this.state;
+    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner, alignOptions } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -127,15 +144,17 @@ export class QueryEditor extends React.Component<Props, Target> {
                 groupBys={groupBys}
                 onChange={value => this.handleAggregationChange(value)}
               >
-                {displayAdvancedOptions => (
-                  <Alignments
-                    display={displayAdvancedOptions}
-                    metricDescriptor={metric}
-                    templateSrv={templateSrv}
-                    perSeriesAligner={perSeriesAligner}
-                    onChange={value => this.handleAlignmentChange(value)}
-                  />
-                )}
+                {displayAdvancedOptions =>
+                  displayAdvancedOptions && (
+                    <Alignments
+                      alignOptions={alignOptions}
+                      metricDescriptor={metric}
+                      templateSrv={templateSrv}
+                      perSeriesAligner={perSeriesAligner}
+                      onChange={value => this.handleAlignmentChange(value)}
+                    />
+                  )
+                }
               </Aggregations>
             </React.Fragment>
           )}
diff --git a/public/app/plugins/datasource/stackdriver/functions.ts b/public/app/plugins/datasource/stackdriver/functions.ts
index e39a7d42508..81074b07707 100644
--- a/public/app/plugins/datasource/stackdriver/functions.ts
+++ b/public/app/plugins/datasource/stackdriver/functions.ts
@@ -46,3 +46,14 @@ export const getLabelKeys = async (datasource, selectedMetricType) => {
     : [];
   return labelKeys;
 };
+
+export const getAlignmentPickerData = ({ valueType, metricKind, perSeriesAligner }, templateSrv) => {
+  const alignOptions = getAlignmentOptionsByMetric(valueType, metricKind).map(option => ({
+    ...option,
+    label: option.text,
+  }));
+  if (!alignOptions.some(o => o.value === templateSrv.replace(perSeriesAligner))) {
+    perSeriesAligner = alignOptions.length > 0 ? alignOptions[0].value : '';
+  }
+  return { alignOptions, perSeriesAligner };
+};

From 7a31076f0932edae267b4744f77f88174b89f9f9 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 13:27:47 +0100
Subject: [PATCH 051/352] cleanup aggregation picker

---
 .../stackdriver/components/Aggregations.tsx   | 45 ++++---------------
 .../stackdriver/components/QueryEditor.tsx    | 17 +++----
 2 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 2fa3b9b9f7d..22bd2d268cb 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -27,50 +27,23 @@ export class Aggregations extends React.Component<Props, State> {
     displayAdvancedOptions: false,
   };
 
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
-    if (this.props.metricDescriptor !== null) {
-      this.setAggOptions(this.props);
-    }
+    this.setAggOptions(this.props);
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.metricDescriptor !== null) {
-      this.setAggOptions(nextProps);
-    }
+    this.setAggOptions(nextProps);
   }
 
-  setAggOptions({ metricDescriptor, crossSeriesReducer, groupBys, templateSrv }) {
-    let aggregations = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
-      a => ({
+  setAggOptions({ metricDescriptor }: Props) {
+    let aggOptions = [];
+    if (metricDescriptor !== null) {
+      aggOptions = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(a => ({
         ...a,
         label: a.text,
-      })
-    );
-
-    if (aggregations.length > 0 && !aggregations.find(o => o.value === templateSrv.replace(crossSeriesReducer))) {
-      this.deselectAggregationOption('REDUCE_NONE');
+      }));
     }
-
-    if (groupBys.length > 0) {
-      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
-      if (crossSeriesReducer === 'REDUCE_NONE') {
-        this.deselectAggregationOption('REDUCE_NONE');
-      }
-    }
-    this.setState({ aggOptions: aggregations });
-  }
-
-  deselectAggregationOption(notValidOptionValue: string) {
-    const aggregations = getAggregationOptionsByMetric(
-      this.props.metricDescriptor.valueType,
-      this.props.metricDescriptor.metricKind
-    );
-    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
-    this.props.onChange(newValue ? newValue.value : '');
+    this.setState({ aggOptions });
   }
 
   handleToggleDisplayAdvanced() {
@@ -80,7 +53,7 @@ export class Aggregations extends React.Component<Props, State> {
   }
 
   render() {
-    const { aggOptions, displayAdvancedOptions } = this.state;
+    const { displayAdvancedOptions, aggOptions } = this.state;
     const { templateSrv, onChange, crossSeriesReducer } = this.props;
 
     return (
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index b661166e2a2..b08ecd55fe9 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -65,7 +65,7 @@ export class QueryEditor extends React.Component<Props, State> {
         metricKind,
       },
       () => {
-        // this.props.onQueryChange(this.state);
+        this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -77,7 +77,7 @@ export class QueryEditor extends React.Component<Props, State> {
         filters: value,
       },
       () => {
-        // this.props.onQueryChange(this.state);
+        this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -89,7 +89,7 @@ export class QueryEditor extends React.Component<Props, State> {
         groupBys: value,
       },
       () => {
-        // this.props.onQueryChange(this.state);
+        this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -97,21 +97,22 @@ export class QueryEditor extends React.Component<Props, State> {
 
   handleAggregationChange(value) {
     this.setState({ crossSeriesReducer: value }, () => {
-      // this.props.onQueryChange(this.state);
+      this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
   }
 
   handleAlignmentChange(value) {
     this.setState({ perSeriesAligner: value }, () => {
-      // this.props.onQueryChange(this.state);
+      this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
   }
 
-  componentDidUpdate(prevProps: Props, prevState: Target) {
-    this.props.onQueryChange(this.state);
-  }
+  // componentDidUpdate(prevProps: Props, prevState: Target) {
+  //   this.props.onQueryChange(this.state);
+
+  // }
 
   render() {
     const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner, alignOptions } = this.state;

From 861f911cdaac4d8be7751bc55531aab0e2c048ba Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 13:36:10 +0100
Subject: [PATCH 052/352] add alignment periods component

---
 .../components/AlignmentPeriods.tsx           | 36 +++++++++++++++++++
 .../stackdriver/components/QueryEditor.tsx    | 26 +++++++++++---
 2 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
new file mode 100644
index 00000000000..5bedb7ec040
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -0,0 +1,36 @@
+import React, { SFC } from 'react';
+import _ from 'lodash';
+
+import { StackdriverPicker } from './StackdriverPicker';
+import { alignmentPeriods } from '../constants';
+
+export interface Props {
+  onChange: (alignmentPeriod) => void;
+  templateSrv: any;
+  alignmentPeriod: string;
+}
+
+export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onChange }) => {
+  return (
+    <React.Fragment>
+      <div className="gf-form-inline">
+        <div className="gf-form">
+          <label className="gf-form-label query-keyword width-9">Alignment Period</label>
+          <StackdriverPicker
+            onChange={value => onChange(value)}
+            selected={alignmentPeriod}
+            templateVariables={templateSrv.variables}
+            options={alignmentPeriods.map(ap => ({
+              ...ap,
+              label: ap.text,
+            }))}
+            searchable={true}
+            placeholder="Select Alignment"
+            className="width-15"
+            groupName="Alignment Options"
+          />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index b08ecd55fe9..fd985a353c9 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -5,6 +5,7 @@ import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
+import { AlignmentPeriods } from './AlignmentPeriods';
 import { Target } from '../types';
 import { getAlignmentPickerData } from '../functions';
 
@@ -109,13 +110,23 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
-  // componentDidUpdate(prevProps: Props, prevState: Target) {
-  //   this.props.onQueryChange(this.state);
-
-  // }
+  handleAlignmentPeriodChange(value) {
+    this.setState({ alignmentPeriod: value }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
+  }
 
   render() {
-    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner, alignOptions } = this.state;
+    const {
+      defaultProject,
+      metricType,
+      crossSeriesReducer,
+      groupBys,
+      perSeriesAligner,
+      alignOptions,
+      alignmentPeriod,
+    } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -157,6 +168,11 @@ export class QueryEditor extends React.Component<Props, State> {
                   )
                 }
               </Aggregations>
+              <AlignmentPeriods
+                templateSrv={templateSrv}
+                alignmentPeriod={alignmentPeriod}
+                onChange={value => this.handleAlignmentPeriodChange(value)}
+              />
             </React.Fragment>
           )}
         </Metrics>

From 06f771afd39cf02d28303063503b0a936d7ac99c Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 15:59:21 +0100
Subject: [PATCH 053/352] add alias by component

---
 .../stackdriver/components/AliasBy.tsx        | 54 +++++++++++++++++++
 .../stackdriver/components/QueryEditor.tsx    | 10 ++++
 .../stackdriver/partials/query.editor.html    |  4 +-
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/AliasBy.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
new file mode 100644
index 00000000000..ae397a2c4d8
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { debounce } from 'lodash';
+
+export interface Props {
+  onChange: (alignmentPeriod) => void;
+  value: string;
+}
+
+export interface State {
+  value: string;
+}
+
+export class AliasBy extends Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.onChange = debounce(this.onChange.bind(this), 500);
+    this.state = { value: '' };
+  }
+
+  componentDidMount() {
+    this.setState({ value: this.props.value });
+  }
+
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+    this.onChange(e.target.value);
+  }
+
+  onChange(value) {
+    this.props.onChange(value);
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-9">Alias By</label>
+            <input
+              type="text"
+              className="gf-form-input width-24"
+              value={this.state.value}
+              onChange={this.handleChange}
+            />
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index fd985a353c9..a5a85760054 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -6,6 +6,7 @@ import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
 import { AlignmentPeriods } from './AlignmentPeriods';
+import { AliasBy } from './AliasBy';
 import { Target } from '../types';
 import { getAlignmentPickerData } from '../functions';
 
@@ -117,6 +118,13 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
+  handleAliasByChange(value) {
+    this.setState({ aliasBy: value }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
+  }
+
   render() {
     const {
       defaultProject,
@@ -126,6 +134,7 @@ export class QueryEditor extends React.Component<Props, State> {
       perSeriesAligner,
       alignOptions,
       alignmentPeriod,
+      aliasBy,
     } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
@@ -173,6 +182,7 @@ export class QueryEditor extends React.Component<Props, State> {
                 alignmentPeriod={alignmentPeriod}
                 onChange={value => this.handleAlignmentPeriodChange(value)}
               />
+              <AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
             </React.Fragment>
           )}
         </Metrics>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index f87dda0f044..20b3a6634a5 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -9,7 +9,7 @@
   <!-- <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
     ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
-  <div class="gf-form-inline">
+  <!-- <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label query-keyword width-9">Alias By</span>
       <input type="text" class="gf-form-input width-24" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
@@ -18,7 +18,7 @@
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
-  </div>
+  </div> -->
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9 query-keyword">Project</span>

From e2ed1637791e63b280c0312f02d359f46a3174df Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 16:55:02 +0100
Subject: [PATCH 054/352] add project and help component

---
 .../stackdriver/components/Help.tsx           | 59 +++++++++++++++++
 .../stackdriver/components/Project.tsx        | 30 +++++++++
 .../stackdriver/components/QueryEditor.tsx    | 63 +++++++++++--------
 .../stackdriver/partials/query.editor.html    |  4 +-
 4 files changed, 129 insertions(+), 27 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Help.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Project.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
new file mode 100644
index 00000000000..9cc02acffa0
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Project } from './Project';
+
+export interface Props {
+  datasource: any;
+}
+
+interface State {
+  displayHelp: boolean;
+  displaRawQuery: boolean;
+}
+
+export class Help extends React.Component<Props, State> {
+  state: State = {
+    displayHelp: false,
+    displaRawQuery: false,
+  };
+
+  handleHelpClicked() {
+    this.setState({ displayHelp: !this.state.displayHelp });
+  }
+
+  handleRawQueryClicked() {
+    this.setState({ displayHelp: !this.state.displayHelp });
+  }
+
+  render() {
+    const { displayHelp, displaRawQuery } = this.state;
+    const { datasource } = this.props;
+
+    return (
+      <div className="gf-form-inline">
+        <Project datasource={datasource} />
+        {/* {displayHelp && ( */}
+        <div className="gf-form" ng-show="ctrl.lastQueryMeta">
+          <label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
+            Show Help
+            <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
+          </label>
+        </div>
+        {/* )} */}
+
+        {displaRawQuery && (
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
+              Raw Query
+              <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
+              {/* <i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
+        <i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" /> */}
+            </label>
+          </div>
+        )}
+        <div className="gf-form gf-form--grow">
+          <div className="gf-form-label gf-form-label--grow" />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/Project.tsx b/public/app/plugins/datasource/stackdriver/components/Project.tsx
new file mode 100644
index 00000000000..65fd76884dc
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Project.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export interface Props {
+  datasource: any;
+}
+
+interface State {
+  projectName: string;
+}
+
+export class Project extends React.Component<Props, State> {
+  state: State = {
+    projectName: 'Loading project...',
+  };
+
+  async componentDidMount() {
+    const projectName = await this.props.datasource.getDefaultProject();
+    this.setState({ projectName });
+  }
+
+  render() {
+    const { projectName } = this.state;
+    return (
+      <div className="gf-form">
+        <span className="gf-form-label width-9 query-keyword">Project</span>
+        <input className="gf-form-input width-15" disabled type="text" value={projectName} />
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index a5a85760054..373e2ccddb0 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -7,6 +7,7 @@ import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
 import { AlignmentPeriods } from './AlignmentPeriods';
 import { AliasBy } from './AliasBy';
+import { Help } from './Help';
 import { Target } from '../types';
 import { getAlignmentPickerData } from '../functions';
 
@@ -73,28 +74,18 @@ export class QueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleFilterChange(value) {
-    this.setState(
-      {
-        filters: value,
-      },
-      () => {
-        this.props.onQueryChange(this.state);
-        this.props.onExecuteQuery();
-      }
-    );
+  handleFilterChange(filters) {
+    this.setState({ filters }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
   }
 
-  handleGroupBysChange(value) {
-    this.setState(
-      {
-        groupBys: value,
-      },
-      () => {
-        this.props.onQueryChange(this.state);
-        this.props.onExecuteQuery();
-      }
-    );
+  handleGroupBysChange(groupBys) {
+    this.setState({ groupBys }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
   }
 
   handleAggregationChange(value) {
@@ -177,15 +168,37 @@ export class QueryEditor extends React.Component<Props, State> {
                   )
                 }
               </Aggregations>
-              <AlignmentPeriods
-                templateSrv={templateSrv}
-                alignmentPeriod={alignmentPeriod}
-                onChange={value => this.handleAlignmentPeriodChange(value)}
-              />
               <AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
             </React.Fragment>
           )}
         </Metrics>
+        <AlignmentPeriods
+          templateSrv={templateSrv}
+          alignmentPeriod={alignmentPeriod}
+          onChange={value => this.handleAlignmentPeriodChange(value)}
+        />
+
+        <Help datasource={datasource} />
+        {/* <div className="gf-form-inline">
+          <Help datasource={datasource} />
+          <div className="gf-form" ng-show="ctrl.lastQueryMeta">
+            <label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
+              Show Help
+              <i className="fa fa-caret-down" ng-show="ctrl.showHelp" />
+              <i className="fa fa-caret-right" ng-hide="ctrl.showHelp" />
+            </label>
+          </div>
+          <div className="gf-form" ng-show="ctrl.lastQueryMeta">
+            <label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
+              Raw Query
+              <i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
+              <i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" />
+            </label>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div> */}
       </React.Fragment>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 20b3a6634a5..0e531694eff 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -19,7 +19,7 @@
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
   </div> -->
-  <div class="gf-form-inline">
+  <!-- <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9 query-keyword">Project</span>
       <input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
@@ -41,7 +41,7 @@
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
-  </div>
+  </div> -->
 
   <div class="gf-form" ng-show="ctrl.showLastQuery">
     <pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>

From 6aacd0734b6c4ec99913c0772bd9329dee9a12da Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 21 Dec 2018 11:57:21 +0100
Subject: [PATCH 056/352] typings and renamings

---
 .../features/dashboard/dashgrid/AlertTab.tsx  |  8 +++---
 .../dashboard/dashgrid/EditorTabBody.tsx      | 26 +++++++++++++------
 .../dashboard/dashgrid/QueriesTab.tsx         | 19 +++++++-------
 .../dashboard/dashgrid/VisualizationTab.tsx   | 10 +++----
 4 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index f9f565222d8..ee7d320a85b 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import { EditorTabBody } from './EditorTabBody';
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
+import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import 'app/features/alerting/AlertTabCtrl';
 import { PanelModel } from '../panel_model';
 
@@ -67,11 +67,12 @@ export class AlertTab extends PureComponent<Props> {
   render() {
     const { alert } = this.props.panel;
 
-    const stateHistory = {
+    const stateHistory: EditorToolbarView = {
       title: 'State history',
       render: () => {
         return <div>State history</div>;
       },
+      buttonType: ToolbarButtonType.View,
     };
 
     const deleteAlert = {
@@ -79,6 +80,7 @@ export class AlertTab extends PureComponent<Props> {
       render: () => {
         return <div>Hello</div>;
       },
+      buttonType: ToolbarButtonType.Action,
     };
 
     const toolbarItems = alert ? [deleteAlert, stateHistory] : [];
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 7606d327405..2cd247ed704 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -10,21 +10,28 @@ interface Props {
   children: JSX.Element;
   heading: string;
   renderToolbar?: () => JSX.Element;
-  toolbarItems?: EditorToolBarView[];
+  toolbarItems?: EditorToolbarView[];
 }
 
-export interface EditorToolBarView {
+export enum ToolbarButtonType {
+  Action = 'action',
+  View = 'view',
+}
+
+export interface EditorToolbarView {
   title?: string;
   heading?: string;
   imgSrc?: string;
   icon?: string;
   disabled?: boolean;
   onClick?: () => void;
-  render: (closeFunction?: any) => JSX.Element | JSX.Element[];
+  render?: (closeFunction?: any) => JSX.Element | JSX.Element[];
+  action?: () => void;
+  buttonType: ToolbarButtonType;
 }
 
 interface State {
-  openView?: EditorToolBarView;
+  openView?: EditorToolbarView;
   isOpen: boolean;
   fadeIn: boolean;
 }
@@ -48,7 +55,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     this.setState({ fadeIn: true });
   }
 
-  onToggleToolBarView = (item: EditorToolBarView) => {
+  onToggleToolBarView = (item: EditorToolbarView) => {
     this.setState({
       openView: item,
       isOpen: !this.state.isOpen,
@@ -74,12 +81,15 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return state;
   }
 
-  renderButton(view: EditorToolBarView) {
+  renderButton(view: EditorToolbarView) {
     const onClick = () => {
       if (view.onClick) {
         view.onClick();
       }
-      this.onToggleToolBarView(view);
+
+      if (view.buttonType !== ToolbarButtonType.Action) {
+        this.onToggleToolBarView(view);
+      }
     };
 
     return (
@@ -91,7 +101,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     );
   }
 
-  renderOpenView(view: EditorToolBarView) {
+  renderOpenView(view: EditorToolbarView) {
     return (
       <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
         {view.render()}
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 9ad0bb3cadd..98287e4888e 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -1,26 +1,23 @@
 // Libraries
-import React, { SFC, PureComponent } from 'react';
+import React, { PureComponent, SFC } from 'react';
 import _ from 'lodash';
-
 // Components
 import './../../panel/metrics_tab';
-import { EditorTabBody } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
 import { PanelOptionSection } from './PanelOptionSection';
-
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import config from 'app/core/config';
-
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { DataSourceSelectItem, DataQuery } from 'app/types';
+import { DataQuery, DataSourceSelectItem } from 'app/types';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 
 interface Props {
@@ -204,15 +201,17 @@ export class QueriesTab extends PureComponent<Props, State> {
     const { panel } = this.props;
     const { currentDS, isAddingMixed } = this.state;
 
-    const queryInspector = {
+    const queryInspector: EditorToolbarView = {
       title: 'Query Inspector',
       render: this.renderQueryInspector,
+      buttonType: ToolbarButtonType.View,
     };
 
-    const dsHelp = {
+    const dsHelp: EditorToolbarView = {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
+      buttonType: ToolbarButtonType.View,
     };
 
     return (
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index 42d9bf6a6eb..8a57dd17190 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -1,16 +1,13 @@
 // Libraries
 import React, { PureComponent } from 'react';
-
 // Utils & Services
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 // Components
-import { EditorTabBody } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
-
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
@@ -206,10 +203,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
     const { plugin } = this.props;
     const { isVizPickerOpen, searchQuery } = this.state;
 
-    const pluginHelp = {
+    const pluginHelp: EditorToolbarView = {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
+      buttonType: ToolbarButtonType.View,
     };
 
     return (

From 4002f80ab880e34b60a855b03820f4b21d1f9814 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 21 Dec 2018 14:56:49 +0100
Subject: [PATCH 057/352] delete works

---
 .../features/alerting/partials/alert_tab.html |  4 +-
 .../features/dashboard/dashgrid/AlertTab.tsx  | 44 ++++++++++++++-----
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 5fcc7ae5e44..cbddb93207a 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -1,4 +1,4 @@
-<div ng-if="ctrl.alert">
+<div ng-if="ctrl.panel.alert">
   <div class="alert alert-error m-b-2" ng-show="ctrl.error">
     <i class="fa fa-warning"></i> {{ctrl.error}}
   </div>
@@ -154,7 +154,7 @@
   </div>
 </div>
 
-<div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.alert">
+<div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.panel.alert">
   <div class="empty-list-cta">
     <div class="empty-list-cta__title">Panel has no alert rule defined</div>
     <button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index ee7d320a85b..e191b579020 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -2,8 +2,9 @@ import React, { PureComponent } from 'react';
 
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
-import 'app/features/alerting/AlertTabCtrl';
+import appEvents from 'app/core/app_events';
 import { PanelModel } from '../panel_model';
+import 'app/features/alerting/AlertTabCtrl';
 
 interface Props {
   angularPanel?: AngularComponent;
@@ -13,6 +14,7 @@ interface Props {
 export class AlertTab extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
+  panelCtrl: any;
 
   constructor(props) {
     super(props);
@@ -53,37 +55,55 @@ export class AlertTab extends PureComponent<Props> {
       return;
     }
 
-    const panelCtrl = scope.$$childHead.ctrl;
+    this.panelCtrl = scope.$$childHead.ctrl;
     const loader = getAngularLoader();
     const template = '<alert-tab />';
 
     const scopeProps = {
-      ctrl: panelCtrl,
+      ctrl: this.panelCtrl,
     };
 
     this.component = loader.load(this.element, scopeProps, template);
   }
 
-  render() {
-    const { alert } = this.props.panel;
-
-    const stateHistory: EditorToolbarView = {
+  stateHistory = (): EditorToolbarView => {
+    return {
       title: 'State history',
       render: () => {
         return <div>State history</div>;
       },
       buttonType: ToolbarButtonType.View,
     };
+  };
 
-    const deleteAlert = {
-      title: 'Delete button',
-      render: () => {
-        return <div>Hello</div>;
+  deleteAlert = (): EditorToolbarView => {
+    const { panel } = this.props;
+    return {
+      title: 'Delete',
+      icon: 'fa fa-trash',
+      onClick: () => {
+        appEvents.emit('confirm-modal', {
+          title: 'Delete Alert',
+          text: 'Are you sure you want to delete this alert rule?',
+          text2: 'You need to save dashboard for the delete to take effect',
+          icon: 'fa-trash',
+          yesText: 'Delete',
+          onConfirm: () => {
+            delete panel.alert;
+            panel.thresholds = [];
+            this.panelCtrl.alertState = null;
+            this.panelCtrl.render();
+          },
+        });
       },
       buttonType: ToolbarButtonType.Action,
     };
+  };
 
-    const toolbarItems = alert ? [deleteAlert, stateHistory] : [];
+  render() {
+    const { alert } = this.props.panel;
+
+    const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
 
     return (
       <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>

From acf8390d5758085a16b20fe81ba6efc045d3b33f Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 21 Dec 2018 14:57:54 +0100
Subject: [PATCH 058/352] note to future me

---
 public/app/features/dashboard/dashgrid/AlertTab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index e191b579020..2a715536ca8 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -105,6 +105,7 @@ export class AlertTab extends PureComponent<Props> {
 
     const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
 
+    //TODO move add button react from angular and add condition to render angular view
     return (
       <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
         <div ref={element => (this.element = element)} />

From 0515605b9a327708f5837e59f5f184d8f1df6990 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 21 Dec 2018 21:38:46 +0100
Subject: [PATCH 059/352] add help component

---
 .../stackdriver/angular_wrappers.ts           |  1 +
 .../stackdriver/components/Help.tsx           | 97 ++++++++++++++-----
 .../stackdriver/components/QueryEditor.tsx    | 66 +++++++------
 .../stackdriver/partials/query.editor.html    | 16 ++-
 4 files changed, 125 insertions(+), 55 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
index 6549135790c..537b03f9c99 100644
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -6,6 +6,7 @@ export function registerAngularDirectives() {
     'target',
     'onQueryChange',
     'onExecuteQuery',
+    ['events', { watchDepth: 'reference' }],
     ['uiSegmentSrv', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
     ['templateSrv', { watchDepth: 'reference' }],
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index 9cc02acffa0..bf9cb2b182d 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -3,6 +3,7 @@ import { Project } from './Project';
 
 export interface Props {
   datasource: any;
+  rawQuery: string;
 }
 
 interface State {
@@ -21,39 +22,87 @@ export class Help extends React.Component<Props, State> {
   }
 
   handleRawQueryClicked() {
-    this.setState({ displayHelp: !this.state.displayHelp });
+    this.setState({ displaRawQuery: !this.state.displaRawQuery });
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.metricDescriptor !== null;
   }
 
   render() {
     const { displayHelp, displaRawQuery } = this.state;
-    const { datasource } = this.props;
+    const { datasource, rawQuery } = this.props;
 
     return (
-      <div className="gf-form-inline">
-        <Project datasource={datasource} />
-        {/* {displayHelp && ( */}
-        <div className="gf-form" ng-show="ctrl.lastQueryMeta">
-          <label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
-            Show Help
-            <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
-          </label>
-        </div>
-        {/* )} */}
-
-        {displaRawQuery && (
-          <div className="gf-form">
-            <label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
-              Raw Query
-              <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
-              {/* <i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
-        <i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" /> */}
+      <React.Fragment>
+        <div className="gf-form-inline">
+          <Project datasource={datasource} />
+          <div className="gf-form" onClick={() => this.handleHelpClicked()}>
+            <label className="gf-form-label query-keyword">
+              Show Help
+              <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
             </label>
           </div>
-        )}
-        <div className="gf-form gf-form--grow">
-          <div className="gf-form-label gf-form-label--grow" />
+
+          {rawQuery && (
+            <div className="gf-form" onClick={() => this.handleRawQueryClicked()}>
+              <label className="gf-form-label query-keyword">
+                Raw Query
+                <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
+              </label>
+            </div>
+          )}
+
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
         </div>
-      </div>
+        {rawQuery &&
+          displaRawQuery && (
+            <div className="gf-form">
+              <pre className="gf-form-pre">{rawQuery}</pre>
+            </div>
+          )}
+
+        {displayHelp && (
+          <div className="gf-form grafana-info-box" style={{ padding: 0 }}>
+            <pre className="gf-form-pre alert alert-info" style={{ marginRight: 0 }}>
+              <h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns. Format the legend
+              keys any way you want by using alias patterns.<br /> <br />
+              Example:
+              <code>{`${'{{metricDescriptor.name}} - {{metricDescriptor.label.instance_name}}'}`}</code>
+              <br />
+              Result: &nbsp;&nbsp;<code>cpu/usage_time - server1-europe-west-1</code>
+              <br />
+              <br />
+              <strong>Patterns</strong>
+              <br />
+              <ul>
+                <li>
+                  <code>{`${'{{metricDescriptor.type}}'}`}</code> = metric type e.g.
+                  compute.googleapis.com/instance/cpu/usage_time
+                </li>
+                <li>
+                  <code>{`${'{{metricDescriptor.name}}'}`}</code> = name part of metric e.g. instance/cpu/usage_time
+                </li>
+                <li>
+                  <code>{`${'{{metricDescriptor.service}}'}`}</code> = service part of metric e.g. compute
+                </li>
+                <li>
+                  <code>{`${'{{metricDescriptor.label.label_name}}'}`}</code> = Metric label metadata e.g.
+                  metricDescriptor.label.instance_name
+                </li>
+                <li>
+                  <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
+                </li>
+              </ul>
+              <div className="gf-form" ng-show="ctrl.lastQueryError">
+                <pre className="gf-form-pre alert alert-error">{'ctrl.lastQueryError'}</pre>
+              </div>
+            </pre>
+          </div>
+        )}
+      </React.Fragment>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 373e2ccddb0..d7f3e58325e 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -15,6 +15,7 @@ export interface Props {
   onQueryChange: (target: Target) => void;
   onExecuteQuery?: () => void;
   target: Target;
+  events: any;
   datasource: any;
   templateSrv: any;
   uiSegmentSrv: any;
@@ -22,6 +23,7 @@ export interface Props {
 
 interface State extends Target {
   alignOptions: any[];
+  lastQuery: string;
 }
 
 const DefaultTarget: State = {
@@ -39,12 +41,16 @@ const DefaultTarget: State = {
   filters: [],
   aliasBy: '',
   alignOptions: [],
+  lastQuery: '',
 };
 
 export class QueryEditor extends React.Component<Props, State> {
   state: State = DefaultTarget;
 
   componentDidMount() {
+    const { events } = this.props;
+    events.on('data-received', this.onDataReceived.bind(this));
+    events.on('data-error', this.onDataError.bind(this));
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(this.props.target, this.props.templateSrv);
     this.setState({
       ...this.props.target,
@@ -53,6 +59,30 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
+  onDataReceived(dataList) {
+    const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId);
+    if (anySeriesFromQuery) {
+      this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery) });
+    }
+  }
+
+  onDataError(err) {
+    // if (err.data && err.data.results) {
+    //   const queryRes = err.data.results[this.target.refId];
+    //   if (queryRes && queryRes.error) {
+    //     this.lastQueryMeta = queryRes.meta;
+    //     this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
+    //     let jsonBody;
+    //     try {
+    //       jsonBody = JSON.parse(queryRes.error);
+    //     } catch {
+    //       this.lastQueryError = queryRes.error;
+    //     }
+    //     this.lastQueryError = jsonBody.error.message;
+    //   }
+    // }
+  }
+
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@@ -126,6 +156,7 @@ export class QueryEditor extends React.Component<Props, State> {
       alignOptions,
       alignmentPeriod,
       aliasBy,
+      lastQuery,
     } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
@@ -169,36 +200,17 @@ export class QueryEditor extends React.Component<Props, State> {
                 }
               </Aggregations>
               <AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
+
+              <AlignmentPeriods
+                templateSrv={templateSrv}
+                alignmentPeriod={alignmentPeriod}
+                onChange={value => this.handleAlignmentPeriodChange(value)}
+              />
+
+              <Help datasource={datasource} rawQuery={lastQuery} />
             </React.Fragment>
           )}
         </Metrics>
-        <AlignmentPeriods
-          templateSrv={templateSrv}
-          alignmentPeriod={alignmentPeriod}
-          onChange={value => this.handleAlignmentPeriodChange(value)}
-        />
-
-        <Help datasource={datasource} />
-        {/* <div className="gf-form-inline">
-          <Help datasource={datasource} />
-          <div className="gf-form" ng-show="ctrl.lastQueryMeta">
-            <label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
-              Show Help
-              <i className="fa fa-caret-down" ng-show="ctrl.showHelp" />
-              <i className="fa fa-caret-right" ng-hide="ctrl.showHelp" />
-            </label>
-          </div>
-          <div className="gf-form" ng-show="ctrl.lastQueryMeta">
-            <label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
-              Raw Query
-              <i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
-              <i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" />
-            </label>
-          </div>
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label gf-form-label--grow" />
-          </div>
-        </div> */}
       </React.Fragment>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 0e531694eff..b22b092e04c 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,5 +1,13 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-    <query-editor target="ctrl.target" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-query-change="ctrl.handleQueryChange" on-execute-query="ctrl.handleExecuteQuery" ui-segment-srv=ctrl.uiSegmentSrv></query-editor>
+  <query-editor
+    target="ctrl.target"
+    events="ctrl.panelCtrl.events"
+    template-srv="ctrl.templateSrv"
+    datasource="ctrl.datasource"
+    on-query-change="(ctrl.handleQueryChange)"
+    on-execute-query="(ctrl.handleExecuteQuery)"
+    ui-segment-srv="ctrl.uiSegmentSrv"
+  ></query-editor>
   <!-- <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject"  metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
   <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
     ></stackdriver-filter>
@@ -43,7 +51,7 @@
     </div>
   </div> -->
 
-  <div class="gf-form" ng-show="ctrl.showLastQuery">
+  <!-- <div class="gf-form" ng-show="ctrl.showLastQuery">
     <pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>
   </div>
   <div class="gf-form grafana-info-box" style="padding: 0" ng-show="ctrl.showHelp">
@@ -76,5 +84,5 @@
   </div>
   <div class="gf-form" ng-show="ctrl.lastQueryError">
     <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
-  </div>
-</query-editor-row>
\ No newline at end of file
+  </div> -->
+</query-editor-row>

From 31254e1c72abf113c4db132a24d4392cd2e74005 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 21 Dec 2018 22:04:46 +0100
Subject: [PATCH 060/352] add event handler

---
 .../stackdriver/components/Help.tsx           | 12 ++++--
 .../stackdriver/components/QueryEditor.tsx    | 39 +++++++++++--------
 .../datasource/stackdriver/query_ctrl.ts      | 34 ----------------
 3 files changed, 31 insertions(+), 54 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index bf9cb2b182d..e865d1f4046 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -4,6 +4,7 @@ import { Project } from './Project';
 export interface Props {
   datasource: any;
   rawQuery: string;
+  lastQueryError: string;
 }
 
 interface State {
@@ -31,7 +32,7 @@ export class Help extends React.Component<Props, State> {
 
   render() {
     const { displayHelp, displaRawQuery } = this.state;
-    const { datasource, rawQuery } = this.props;
+    const { datasource, rawQuery, lastQueryError } = this.props;
 
     return (
       <React.Fragment>
@@ -96,12 +97,15 @@ export class Help extends React.Component<Props, State> {
                   <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
                 </li>
               </ul>
-              <div className="gf-form" ng-show="ctrl.lastQueryError">
-                <pre className="gf-form-pre alert alert-error">{'ctrl.lastQueryError'}</pre>
-              </div>
             </pre>
           </div>
         )}
+
+        {lastQueryError && (
+          <div className="gf-form">
+            <pre className="gf-form-pre alert alert-error">{lastQueryError}</pre>
+          </div>
+        )}
       </React.Fragment>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index d7f3e58325e..1091900225f 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -24,6 +24,7 @@ export interface Props {
 interface State extends Target {
   alignOptions: any[];
   lastQuery: string;
+  lastQueryError: string;
 }
 
 const DefaultTarget: State = {
@@ -42,6 +43,7 @@ const DefaultTarget: State = {
   aliasBy: '',
   alignOptions: [],
   lastQuery: '',
+  lastQueryError: '',
 };
 
 export class QueryEditor extends React.Component<Props, State> {
@@ -62,25 +64,29 @@ export class QueryEditor extends React.Component<Props, State> {
   onDataReceived(dataList) {
     const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId);
     if (anySeriesFromQuery) {
-      this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery) });
+      this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery), lastQueryError: '' });
     }
   }
 
   onDataError(err) {
-    // if (err.data && err.data.results) {
-    //   const queryRes = err.data.results[this.target.refId];
-    //   if (queryRes && queryRes.error) {
-    //     this.lastQueryMeta = queryRes.meta;
-    //     this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
-    //     let jsonBody;
-    //     try {
-    //       jsonBody = JSON.parse(queryRes.error);
-    //     } catch {
-    //       this.lastQueryError = queryRes.error;
-    //     }
-    //     this.lastQueryError = jsonBody.error.message;
-    //   }
-    // }
+    if (err) {
+      let lastQuery;
+      let lastQueryError;
+      if (err.data && err.data.error) {
+        lastQueryError = this.props.datasource.formatStackdriverError(err);
+      } else if (err.data && err.data.results) {
+        const queryRes = err.data.results[this.props.target.refId];
+        lastQuery = decodeURIComponent(queryRes.meta.rawQuery);
+        if (queryRes && queryRes.error) {
+          try {
+            lastQueryError = JSON.parse(queryRes.error).error.message;
+          } catch {
+            lastQueryError = queryRes.error;
+          }
+        }
+      }
+      this.setState({ lastQuery, lastQueryError });
+    }
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
@@ -157,6 +163,7 @@ export class QueryEditor extends React.Component<Props, State> {
       alignmentPeriod,
       aliasBy,
       lastQuery,
+      lastQueryError,
     } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
@@ -207,7 +214,7 @@ export class QueryEditor extends React.Component<Props, State> {
                 onChange={value => this.handleAlignmentPeriodChange(value)}
               />
 
-              <Help datasource={datasource} rawQuery={lastQuery} />
+              <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </React.Fragment>
           )}
         </Metrics>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index d7b08522711..8744227164b 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -63,8 +63,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     this.$rootScope = $rootScope;
     this.uiSegmentSrv = uiSegmentSrv;
     _.defaultsDeep(this.target, this.defaults);
-    this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
-    this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
@@ -76,8 +74,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       ['templateVariables', { watchDepth: 'reference' }],
     ]);
     registerAngularDirectives();
-    this.handleQueryChange = this.handleQueryChange.bind(this);
-    this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
   }
 
   handleQueryChange(target: Target) {
@@ -87,34 +83,4 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   handleExecuteQuery() {
     this.$scope.ctrl.refresh();
   }
-
-  onDataReceived(dataList) {
-    this.lastQueryError = null;
-    this.lastQueryMeta = null;
-
-    const anySeriesFromQuery: any = _.find(dataList, { refId: this.target.refId });
-    if (anySeriesFromQuery) {
-      this.lastQueryMeta = anySeriesFromQuery.meta;
-      this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
-    }
-  }
-
-  onDataError(err) {
-    if (err.data && err.data.results) {
-      const queryRes = err.data.results[this.target.refId];
-      if (queryRes && queryRes.error) {
-        this.lastQueryMeta = queryRes.meta;
-        this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
-
-        let jsonBody;
-        try {
-          jsonBody = JSON.parse(queryRes.error);
-        } catch {
-          this.lastQueryError = queryRes.error;
-        }
-
-        this.lastQueryError = jsonBody.error.message;
-      }
-    }
-  }
 }

From 2f342b89172ed48221fa34479207e8720031d6e0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 21 Dec 2018 23:07:46 +0100
Subject: [PATCH 061/352] remove not used stuff

---
 .../stackdriver/components/QueryEditor.tsx    |  86 ++++---------
 .../partials/query.aggregation.html           |  59 ---------
 .../stackdriver/partials/query.editor.html    |  77 ------------
 .../stackdriver/query_aggregation_ctrl.ts     | 117 ------------------
 .../datasource/stackdriver/query_ctrl.ts      |  52 +-------
 .../specs/query_aggregation_ctrl.test.ts      |   2 +-
 6 files changed, 30 insertions(+), 363 deletions(-)
 delete mode 100755 public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
 delete mode 100644 public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts

diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 1091900225f..632ea3c8ac9 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -25,6 +25,7 @@ interface State extends Target {
   alignOptions: any[];
   lastQuery: string;
   lastQueryError: string;
+  [key: string]: any;
 }
 
 const DefaultTarget: State = {
@@ -62,31 +63,29 @@ export class QueryEditor extends React.Component<Props, State> {
   }
 
   onDataReceived(dataList) {
-    const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId);
-    if (anySeriesFromQuery) {
-      this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery), lastQueryError: '' });
+    const series = dataList.find(item => item.refId === this.props.target.refId);
+    if (series) {
+      this.setState({ lastQuery: decodeURIComponent(series.meta.rawQuery), lastQueryError: '' });
     }
   }
 
   onDataError(err) {
-    if (err) {
-      let lastQuery;
-      let lastQueryError;
-      if (err.data && err.data.error) {
-        lastQueryError = this.props.datasource.formatStackdriverError(err);
-      } else if (err.data && err.data.results) {
-        const queryRes = err.data.results[this.props.target.refId];
-        lastQuery = decodeURIComponent(queryRes.meta.rawQuery);
-        if (queryRes && queryRes.error) {
-          try {
-            lastQueryError = JSON.parse(queryRes.error).error.message;
-          } catch {
-            lastQueryError = queryRes.error;
-          }
+    let lastQuery;
+    let lastQueryError;
+    if (err.data && err.data.error) {
+      lastQueryError = this.props.datasource.formatStackdriverError(err);
+    } else if (err.data && err.data.results) {
+      const queryRes = err.data.results[this.props.target.refId];
+      lastQuery = decodeURIComponent(queryRes.meta.rawQuery);
+      if (queryRes && queryRes.error) {
+        try {
+          lastQueryError = JSON.parse(queryRes.error).error.message;
+        } catch {
+          lastQueryError = queryRes.error;
         }
       }
-      this.setState({ lastQuery, lastQueryError });
     }
+    this.setState({ lastQuery, lastQueryError });
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
@@ -110,43 +109,8 @@ export class QueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleFilterChange(filters) {
-    this.setState({ filters }, () => {
-      this.props.onQueryChange(this.state);
-      this.props.onExecuteQuery();
-    });
-  }
-
-  handleGroupBysChange(groupBys) {
-    this.setState({ groupBys }, () => {
-      this.props.onQueryChange(this.state);
-      this.props.onExecuteQuery();
-    });
-  }
-
-  handleAggregationChange(value) {
-    this.setState({ crossSeriesReducer: value }, () => {
-      this.props.onQueryChange(this.state);
-      this.props.onExecuteQuery();
-    });
-  }
-
-  handleAlignmentChange(value) {
-    this.setState({ perSeriesAligner: value }, () => {
-      this.props.onQueryChange(this.state);
-      this.props.onExecuteQuery();
-    });
-  }
-
-  handleAlignmentPeriodChange(value) {
-    this.setState({ alignmentPeriod: value }, () => {
-      this.props.onQueryChange(this.state);
-      this.props.onExecuteQuery();
-    });
-  }
-
-  handleAliasByChange(value) {
-    this.setState({ aliasBy: value }, () => {
+  handleChange(prop, value) {
+    this.setState({ [prop]: value }, () => {
       this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
@@ -179,8 +143,8 @@ export class QueryEditor extends React.Component<Props, State> {
           {metric => (
             <React.Fragment>
               <Filter
-                filtersChanged={value => this.handleFilterChange(value)}
-                groupBysChanged={value => this.handleGroupBysChange(value)}
+                filtersChanged={value => this.handleChange('filters', value)}
+                groupBysChanged={value => this.handleChange('groupBys', value)}
                 target={this.state}
                 uiSegmentSrv={uiSegmentSrv}
                 templateSrv={templateSrv}
@@ -192,7 +156,7 @@ export class QueryEditor extends React.Component<Props, State> {
                 templateSrv={templateSrv}
                 crossSeriesReducer={crossSeriesReducer}
                 groupBys={groupBys}
-                onChange={value => this.handleAggregationChange(value)}
+                onChange={value => this.handleChange('crossSeriesReducer', value)}
               >
                 {displayAdvancedOptions =>
                   displayAdvancedOptions && (
@@ -201,17 +165,17 @@ export class QueryEditor extends React.Component<Props, State> {
                       metricDescriptor={metric}
                       templateSrv={templateSrv}
                       perSeriesAligner={perSeriesAligner}
-                      onChange={value => this.handleAlignmentChange(value)}
+                      onChange={value => this.handleChange('perSeriesAligner', value)}
                     />
                   )
                 }
               </Aggregations>
-              <AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
+              <AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
 
               <AlignmentPeriods
                 templateSrv={templateSrv}
                 alignmentPeriod={alignmentPeriod}
-                onChange={value => this.handleAlignmentPeriodChange(value)}
+                onChange={value => this.handleChange('alignmentPeriod', value)}
               />
 
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
deleted file mode 100755
index 30ac9f219eb..00000000000
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<div class="gf-form-inline">
-  <div class="gf-form">
-    <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <stackdriver-picker
-      onChange="ctrl.handleAggregationChange"
-      selected="ctrl.target.crossSeriesReducer"
-      options="ctrl.aggOptions"
-      searchable="true"
-      placeholder="'Select Aggregation'"
-      className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
-      group-name="'Aggregations'"
-    ></stackdriver-picker>
-  </div>
-  <div class="gf-form gf-form--grow">
-    <label class="gf-form-label gf-form-label--grow">
-      <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
-        <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
-      </a>
-    </label>
-  </div>
-</div>
-<div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
-  <div class="gf-form offset-width-9">
-    <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <stackdriver-picker
-      onChange="ctrl.handleAlignmentChange"
-      selected="ctrl.target.perSeriesAligner"
-      options="ctrl.alignOptions"
-      searchable="true"
-      placeholder="'Select Alignment'"
-      className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
-      group-name="'Alignment Options'"
-    ></stackdriver-picker>
-
-    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-  </div>
-</div>
-<div class="gf-form-inline">
-  <div class="gf-form">
-    <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <stackdriver-picker
-      onChange="ctrl.handleAlignmentPeriodChange"
-      selected="ctrl.target.alignmentPeriod"
-      options="ctrl.alignmentPeriods"
-      searchable="true"
-      placeholder="'Select Alignment'"
-      className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
-      group-name="'Alignment Periods'"
-    ></stackdriver-picker>
-  </div>
-
-  <div class="gf-form gf-form--grow">
-    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
-  </div>
-</div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index b22b092e04c..f27b08609b4 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -8,81 +8,4 @@
     on-execute-query="(ctrl.handleExecuteQuery)"
     ui-segment-srv="ctrl.uiSegmentSrv"
   ></query-editor>
-  <!-- <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject"  metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
-    ></stackdriver-filter>
-    <aggregation-picker value-type="ctrl.target.valueType" metric-kind="ctrl.target.metricKind" aggregation="ctrl.target.aggregation" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleAggregationChange"></aggregation-picker>
-
-  <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
-  <!-- <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
-    ></stackdriver-filter>
-  <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
-  <!-- <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label query-keyword width-9">Alias By</span>
-      <input type="text" class="gf-form-input width-24" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
-        ng-model-options="{ debounce: 500 }" />
-    </div>
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
-  </div> -->
-  <!-- <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-9 query-keyword">Project</span>
-      <input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
-    </div>
-    <div class="gf-form">
-      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
-        Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
-      </label>
-    </div>
-    <div class="gf-form" ng-show="ctrl.lastQueryMeta">
-      <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
-        Raw Query
-        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuery"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuery"></i>
-      </label>
-    </div>
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
-  </div> -->
-
-  <!-- <div class="gf-form" ng-show="ctrl.showLastQuery">
-    <pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>
-  </div>
-  <div class="gf-form grafana-info-box" style="padding: 0" ng-show="ctrl.showHelp">
-    <pre class="gf-form-pre alert alert-info" style="margin-right: 0"><h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns.
-
-    Format the legend keys any way you want by using alias patterns.<br /> <br />
-
-    Example: <code ng-non-bindable>{{metric.name}} - {{metric.label.instance_name}}</code><br />
-    Result: &nbsp;&nbsp;<code ng-non-bindable>cpu/usage_time - server1-europe-west-1</code><br /><br />
-
-    <strong>Patterns</strong><br />
-    <ul>
-      <li>
-        <code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
-      </li>
-      <li>
-        <code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. instance/cpu/usage_time
-      </li>
-      <li>
-        <code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute
-      </li>
-      <li>
-        <code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g.
-        metric.label.instance_name
-      </li>
-      <li>
-        <code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
-      </li>
-    </ul>
-  </div>
-  <div class="gf-form" ng-show="ctrl.lastQueryError">
-    <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
-  </div> -->
 </query-editor-row>
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
deleted file mode 100644
index d08bf8d94d9..00000000000
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import coreModule from 'app/core/core_module';
-import _ from 'lodash';
-import { alignmentPeriods } from './constants';
-import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
-import kbn from 'app/core/utils/kbn';
-
-export class StackdriverAggregation {
-  constructor() {
-    return {
-      templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.aggregation.html',
-      controller: 'StackdriverAggregationCtrl',
-      restrict: 'E',
-      scope: {
-        target: '=',
-        alignmentPeriod: '<',
-        refresh: '&',
-      },
-    };
-  }
-}
-
-export class StackdriverAggregationCtrl {
-  alignmentPeriods: any[];
-  aggOptions: any[];
-  alignOptions: any[];
-  target: any;
-
-  /** @ngInject */
-  constructor(private $scope, private templateSrv) {
-    this.$scope.ctrl = this;
-    this.target = $scope.target;
-    this.alignmentPeriods = alignmentPeriods.map(ap => ({
-      ...ap,
-      label: ap.text,
-    }));
-    this.setAggOptions();
-    this.setAlignOptions();
-    const self = this;
-    $scope.$on('metricTypeChanged', () => {
-      self.setAggOptions();
-      self.setAlignOptions();
-    });
-  }
-
-  setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
-      ...a,
-      label: a.text,
-    }));
-  }
-
-  setAggOptions() {
-    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
-      ...a,
-      label: a.text,
-    }));
-    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.crossSeriesReducer))) {
-      this.deselectAggregationOption('REDUCE_NONE');
-    }
-
-    if (this.target.groupBys.length > 0) {
-      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
-      this.deselectAggregationOption('REDUCE_NONE');
-    }
-    this.aggOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Aggregations',
-        options: aggregations,
-      },
-    ];
-  }
-
-  handleAlignmentChange(value) {
-    this.target.perSeriesAligner = value;
-    this.$scope.refresh();
-  }
-
-  handleAggregationChange(value) {
-    this.target.crossSeriesReducer = value;
-    this.$scope.refresh();
-  }
-
-  handleAlignmentPeriodChange(value) {
-    this.target.alignmentPeriod = value;
-    this.$scope.refresh();
-  }
-
-  formatAlignmentText() {
-    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
-    const selectedAlignment = alignments.find(
-      ap => ap.value === this.templateSrv.replace(this.target.perSeriesAligner)
-    );
-    return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
-      selectedAlignment ? selectedAlignment.text : ''
-    })`;
-  }
-
-  deselectAggregationOption(notValidOptionValue: string) {
-    const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
-    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
-    this.target.crossSeriesReducer = newValue ? newValue.value : '';
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-}
-
-coreModule.directive('stackdriverAggregation', StackdriverAggregation);
-coreModule.controller('StackdriverAggregationCtrl', StackdriverAggregationCtrl);
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8744227164b..b2d2f0f1dfc 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -5,64 +5,18 @@ import './query_filter_ctrl';
 import { StackdriverPicker } from './components/StackdriverPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { registerAngularDirectives } from './angular_wrappers';
-import { Target, QueryMeta } from './types';
-
-export const DefaultTarget = {
-  defaultProject: 'loading project...',
-  metricType: '',
-  service: '',
-  metric: '',
-  unit: '',
-  crossSeriesReducer: 'REDUCE_MEAN',
-  alignmentPeriod: 'stackdriver-auto',
-  perSeriesAligner: 'ALIGN_MEAN',
-  groupBys: [],
-  filters: [],
-  showAggregationOptions: false,
-  aliasBy: '',
-  metricKind: '',
-  valueType: '',
-};
+import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
-  target: Target;
-
-  defaults = {
-    defaultProject: 'loading project...',
-    metricType: '',
-    service: '',
-    metric: '',
-    unit: '',
-    crossSeriesReducer: 'REDUCE_MEAN',
-    alignmentPeriod: 'stackdriver-auto',
-    perSeriesAligner: 'ALIGN_MEAN',
-    groupBys: [],
-    filters: [],
-    showAggregationOptions: false,
-    aliasBy: '',
-    metricKind: '',
-    valueType: '',
-  };
-
-  showHelp: boolean;
-  showLastQuery: boolean;
-  lastQueryMeta: QueryMeta;
-  lastQueryError?: string;
-  labelData: QueryMeta;
-
-  loadLabelsPromise: Promise<any>;
   templateSrv: any;
-  $rootScope: any;
   uiSegmentSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector, templateSrv, $rootScope, uiSegmentSrv) {
+  constructor($scope, $injector, templateSrv, uiSegmentSrv) {
     super($scope, $injector);
     this.templateSrv = templateSrv;
-    this.$rootScope = $rootScope;
     this.uiSegmentSrv = uiSegmentSrv;
-    _.defaultsDeep(this.target, this.defaults);
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
@@ -74,6 +28,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       ['templateVariables', { watchDepth: 'reference' }],
     ]);
     registerAngularDirectives();
+    this.handleQueryChange = this.handleQueryChange.bind(this);
+    this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
   }
 
   handleQueryChange(target: Target) {
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index c2273526844..c092b9dcd7b 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -1,4 +1,4 @@
-import { StackdriverAggregationCtrl } from '../query_aggregation_ctrl';
+const StackdriverAggregationCtrl = ({}, {}) => {};
 
 describe('StackdriverAggregationCtrl', () => {
   let ctrl;

From b9cf15786d037f3904483553d9da8ec45f71f377 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 21 Dec 2018 23:21:55 +0100
Subject: [PATCH 062/352] use ds template srv reference

---
 .../stackdriver/angular_wrappers.ts           |  1 -
 .../stackdriver/components/Aggregations.tsx   |  2 +-
 .../stackdriver/components/Alignments.tsx     |  6 +----
 .../stackdriver/components/QueryEditor.tsx    | 25 +++++++++----------
 .../stackdriver/partials/query.editor.html    |  1 -
 .../datasource/stackdriver/query_ctrl.ts      |  5 +---
 6 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
index 537b03f9c99..b5e18c77d03 100644
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -9,6 +9,5 @@ export function registerAngularDirectives() {
     ['events', { watchDepth: 'reference' }],
     ['uiSegmentSrv', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
-    ['templateSrv', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 22bd2d268cb..7b84450635b 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -37,7 +37,7 @@ export class Aggregations extends React.Component<Props, State> {
 
   setAggOptions({ metricDescriptor }: Props) {
     let aggOptions = [];
-    if (metricDescriptor !== null) {
+    if (metricDescriptor) {
       aggOptions = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(a => ({
         ...a,
         label: a.text,
diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
index bf26d3347d0..5f90a604d7a 100644
--- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -4,13 +4,9 @@ import _ from 'lodash';
 import { StackdriverPicker } from './StackdriverPicker';
 
 export interface Props {
-  onChange: (metricDescriptor) => void;
+  onChange: (perSeriesAligner) => void;
   templateSrv: any;
   alignOptions: any[];
-  metricDescriptor: {
-    valueType: string;
-    metricKind: string;
-  };
   perSeriesAligner: string;
 }
 
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 632ea3c8ac9..d57e33dfa0e 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -17,7 +17,6 @@ export interface Props {
   target: Target;
   events: any;
   datasource: any;
-  templateSrv: any;
   uiSegmentSrv: any;
 }
 
@@ -51,10 +50,10 @@ export class QueryEditor extends React.Component<Props, State> {
   state: State = DefaultTarget;
 
   componentDidMount() {
-    const { events } = this.props;
+    const { events, target, datasource } = this.props;
     events.on('data-received', this.onDataReceived.bind(this));
     events.on('data-error', this.onDataError.bind(this));
-    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(this.props.target, this.props.templateSrv);
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, datasource.templateSrv);
     this.setState({
       ...this.props.target,
       alignOptions,
@@ -89,9 +88,10 @@ export class QueryEditor extends React.Component<Props, State> {
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+    const { datasource, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
-      this.props.templateSrv
+      datasource.templateSrv
     );
     this.setState(
       {
@@ -103,8 +103,8 @@ export class QueryEditor extends React.Component<Props, State> {
         metricKind,
       },
       () => {
-        this.props.onQueryChange(this.state);
-        this.props.onExecuteQuery();
+        onQueryChange(this.state);
+        onExecuteQuery();
       }
     );
   }
@@ -129,14 +129,14 @@ export class QueryEditor extends React.Component<Props, State> {
       lastQuery,
       lastQueryError,
     } = this.state;
-    const { templateSrv, datasource, uiSegmentSrv } = this.props;
+    const { datasource, uiSegmentSrv } = this.props;
 
     return (
       <React.Fragment>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
-          templateSrv={templateSrv}
+          templateSrv={datasource.templateSrv}
           datasource={datasource}
           onChange={value => this.handleMetricTypeChange(value)}
         >
@@ -147,13 +147,13 @@ export class QueryEditor extends React.Component<Props, State> {
                 groupBysChanged={value => this.handleChange('groupBys', value)}
                 target={this.state}
                 uiSegmentSrv={uiSegmentSrv}
-                templateSrv={templateSrv}
+                templateSrv={datasource.templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />
               <Aggregations
                 metricDescriptor={metric}
-                templateSrv={templateSrv}
+                templateSrv={datasource.templateSrv}
                 crossSeriesReducer={crossSeriesReducer}
                 groupBys={groupBys}
                 onChange={value => this.handleChange('crossSeriesReducer', value)}
@@ -162,8 +162,7 @@ export class QueryEditor extends React.Component<Props, State> {
                   displayAdvancedOptions && (
                     <Alignments
                       alignOptions={alignOptions}
-                      metricDescriptor={metric}
-                      templateSrv={templateSrv}
+                      templateSrv={datasource.templateSrv}
                       perSeriesAligner={perSeriesAligner}
                       onChange={value => this.handleChange('perSeriesAligner', value)}
                     />
@@ -173,7 +172,7 @@ export class QueryEditor extends React.Component<Props, State> {
               <AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
 
               <AlignmentPeriods
-                templateSrv={templateSrv}
+                templateSrv={datasource.templateSrv}
                 alignmentPeriod={alignmentPeriod}
                 onChange={value => this.handleChange('alignmentPeriod', value)}
               />
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index f27b08609b4..58aa1ae8d99 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -2,7 +2,6 @@
   <query-editor
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
-    template-srv="ctrl.templateSrv"
     datasource="ctrl.datasource"
     on-query-change="(ctrl.handleQueryChange)"
     on-execute-query="(ctrl.handleExecuteQuery)"
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index b2d2f0f1dfc..b41fa1e4b23 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
-import './query_aggregation_ctrl';
 import './query_filter_ctrl';
 import { StackdriverPicker } from './components/StackdriverPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
@@ -9,13 +8,11 @@ import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
-  templateSrv: any;
   uiSegmentSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector, templateSrv, uiSegmentSrv) {
+  constructor($scope, $injector, uiSegmentSrv) {
     super($scope, $injector);
-    this.templateSrv = templateSrv;
     this.uiSegmentSrv = uiSegmentSrv;
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',

From 8a916757d7cdf75d56b1c15c3712b376c16168dc Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 21 Dec 2018 23:28:21 +0100
Subject: [PATCH 063/352] remove segment srv prop

---
 public/app/plugins/datasource/stackdriver/angular_wrappers.ts | 1 -
 .../app/plugins/datasource/stackdriver/components/Filter.tsx  | 1 -
 .../plugins/datasource/stackdriver/components/QueryEditor.tsx | 4 +---
 .../plugins/datasource/stackdriver/partials/query.editor.html | 1 -
 public/app/plugins/datasource/stackdriver/query_ctrl.ts       | 4 +---
 5 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
index b5e18c77d03..6881632ecbf 100644
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -7,7 +7,6 @@ export function registerAngularDirectives() {
     'onQueryChange',
     'onExecuteQuery',
     ['events', { watchDepth: 'reference' }],
-    ['uiSegmentSrv', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index aab0d2e7be9..0bff47e809d 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -12,7 +12,6 @@ export interface Props {
   metricType: string;
   templateSrv: any;
   target: Target;
-  uiSegmentSrv: any;
   datasource: any;
 }
 
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index d57e33dfa0e..b99865f5070 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -17,7 +17,6 @@ export interface Props {
   target: Target;
   events: any;
   datasource: any;
-  uiSegmentSrv: any;
 }
 
 interface State extends Target {
@@ -129,7 +128,7 @@ export class QueryEditor extends React.Component<Props, State> {
       lastQuery,
       lastQueryError,
     } = this.state;
-    const { datasource, uiSegmentSrv } = this.props;
+    const { datasource } = this.props;
 
     return (
       <React.Fragment>
@@ -146,7 +145,6 @@ export class QueryEditor extends React.Component<Props, State> {
                 filtersChanged={value => this.handleChange('filters', value)}
                 groupBysChanged={value => this.handleChange('groupBys', value)}
                 target={this.state}
-                uiSegmentSrv={uiSegmentSrv}
                 templateSrv={datasource.templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 58aa1ae8d99..67878c6380c 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -5,6 +5,5 @@
     datasource="ctrl.datasource"
     on-query-change="(ctrl.handleQueryChange)"
     on-execute-query="(ctrl.handleExecuteQuery)"
-    ui-segment-srv="ctrl.uiSegmentSrv"
   ></query-editor>
 </query-editor-row>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index b41fa1e4b23..b7c1ed8bd41 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -8,12 +8,10 @@ import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
-  uiSegmentSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector, uiSegmentSrv) {
+  constructor($scope, $injector) {
     super($scope, $injector);
-    this.uiSegmentSrv = uiSegmentSrv;
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',

From 5ba429387f37997556c9cd5bf1085279efee3c97 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 28 Dec 2018 19:45:24 +0100
Subject: [PATCH 064/352] reactify annotation query editor

---
 .../stackdriver/angular_wrappers.ts           |   7 ++
 .../stackdriver/annotations_query_ctrl.ts     |   7 ++
 .../components/AnnotationQueryEditor.tsx      | 108 ++++++++++++++++++
 .../stackdriver/components/Filter.tsx         |  35 ++++--
 .../stackdriver/components/Metrics.tsx        |  25 ++--
 .../stackdriver/components/QueryEditor.tsx    |  14 ++-
 .../datasource/stackdriver/filter_segments.ts |   4 +-
 .../partials/annotations.editor.html          |  17 +--
 .../stackdriver/query_filter_ctrl.ts          |  14 +--
 .../plugins/datasource/stackdriver/types.ts   |  15 ++-
 10 files changed, 207 insertions(+), 39 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
index 6881632ecbf..513d7d3f623 100644
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -1,5 +1,6 @@
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { QueryEditor } from './components/QueryEditor';
+import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
 
 export function registerAngularDirectives() {
   react2AngularDirective('queryEditor', QueryEditor, [
@@ -9,4 +10,10 @@ export function registerAngularDirectives() {
     ['events', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+    'target',
+    'onQueryChange',
+    'onExecuteQuery',
+    ['datasource', { watchDepth: 'reference' }],
+  ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
index bccac02bf38..1975c75d5a6 100644
--- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import './query_filter_ctrl';
+import { registerAngularDirectives } from './angular_wrappers';
 
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
@@ -27,5 +28,11 @@ export class StackdriverAnnotationsQueryCtrl {
     this.annotation.target = this.annotation.target || {};
     this.annotation.target.refId = 'annotationQuery';
     _.defaultsDeep(this.annotation.target, this.defaults);
+    registerAngularDirectives();
+    this.handleQueryChange = this.handleQueryChange.bind(this);
+  }
+
+  handleQueryChange(target) {
+    Object.assign(this.annotation.target, target);
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
new file mode 100644
index 00000000000..6c501d45eda
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { Metrics } from './Metrics';
+import { Filter } from './Filter';
+import { AnnotationTarget } from '../types';
+
+export interface Props {
+  onQueryChange: (target: AnnotationTarget) => void;
+  target: AnnotationTarget;
+  datasource: any;
+}
+
+interface State extends AnnotationTarget {
+  [key: string]: any;
+}
+
+const DefaultTarget: State = {
+  defaultProject: 'loading project...',
+  metricType: '',
+  filters: [],
+  metricKind: '',
+  valueType: '',
+  refId: 'annotationQuery',
+  title: '',
+  text: '',
+};
+
+export class AnnotationQueryEditor extends React.Component<Props, State> {
+  state: State = DefaultTarget;
+
+  componentDidMount() {
+    this.setState({
+      ...this.props.target,
+    });
+  }
+
+  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+    const { onQueryChange } = this.props;
+    this.setState(
+      {
+        metricType: type,
+        unit,
+        valueType,
+        metricKind,
+      },
+      () => {
+        onQueryChange(this.state);
+      }
+    );
+  }
+
+  handleChange(prop, value) {
+    this.setState({ [prop]: value }, () => {
+      this.props.onQueryChange(this.state);
+    });
+  }
+
+  render() {
+    const { defaultProject, metricType, filters, refId, title } = this.state;
+    const { datasource } = this.props;
+
+    return (
+      <React.Fragment>
+        <Metrics
+          defaultProject={defaultProject}
+          metricType={metricType}
+          templateSrv={datasource.templateSrv}
+          datasource={datasource}
+          onChange={value => this.handleMetricTypeChange(value)}
+        >
+          {metric => (
+            <React.Fragment>
+              <Filter
+                filtersChanged={value => this.handleChange('filters', value)}
+                filters={filters}
+                refId={refId}
+                hideGroupBys={true}
+                templateSrv={datasource.templateSrv}
+                datasource={datasource}
+                metricType={metric ? metric.type : ''}
+              />
+            </React.Fragment>
+          )}
+        </Metrics>
+        <div className="gf-form gf-form-inline">
+          <div className="gf-form">
+            <span className="gf-form-label query-keyword width-9">Title</span>
+            <input
+              type="text"
+              className="gf-form-input width-20"
+              value={title}
+              onChange={e => this.handleChange('title', e.target.value)}
+            />
+          </div>
+          <div className="gf-form">
+            <span className="gf-form-label query-keyword width-9">Text</span>
+            <input type="text" className="gf-form-input width-20" ng-model="ctrl.annotation.target.text" />
+          </div>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--grow" />
+          </div>
+        </div>
+        {/* <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} /> */}
+      </React.Fragment>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index 0bff47e809d..cfaa5480d0b 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -2,17 +2,20 @@ import React from 'react';
 import _ from 'lodash';
 import appEvents from 'app/core/app_events';
 
-import { QueryMeta, Target } from '../types';
+import { QueryMeta } from '../types';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import '../query_filter_ctrl';
 
 export interface Props {
   filtersChanged: (filters) => void;
-  groupBysChanged: (groupBys) => void;
+  groupBysChanged?: (groupBys) => void;
   metricType: string;
   templateSrv: any;
-  target: Target;
+  groupBys?: string[];
+  filters: string[];
   datasource: any;
+  refId: string;
+  hideGroupBys: boolean;
 }
 
 interface State {
@@ -20,6 +23,12 @@ interface State {
   loading: Promise<any>;
 }
 
+const defaultLabelData = {
+  metricLabels: {},
+  resourceLabels: {},
+  resourceTypes: [],
+};
+
 export class Filter extends React.Component<Props, State> {
   element: any;
   component: AngularComponent;
@@ -29,17 +38,20 @@ export class Filter extends React.Component<Props, State> {
       return;
     }
 
-    const { target, filtersChanged, groupBysChanged } = this.props;
+    const { groupBys, filters, filtersChanged, groupBysChanged, hideGroupBys } = this.props;
     const loader = getAngularLoader();
     const template = '<stackdriver-filter> </stackdriver-filter>';
 
     const scopeProps = {
-      loading: this.loadLabels.bind(this),
+      loading: null,
       labelData: null,
-      target,
+      groupBys,
+      filters,
       filtersChanged,
       groupBysChanged,
+      hideGroupBys,
     };
+    scopeProps.loading = this.loadLabels(scopeProps);
 
     this.component = loader.load(this.element, scopeProps, template);
   }
@@ -60,11 +72,16 @@ export class Filter extends React.Component<Props, State> {
   async loadLabels(scope) {
     return new Promise(async resolve => {
       try {
-        const { meta } = await this.props.datasource.getLabels(this.props.target.metricType, this.props.target.refId);
-        scope.labelData = meta;
+        if (!this.props.metricType) {
+          scope.labelData = defaultLabelData;
+        } else {
+          const { meta } = await this.props.datasource.getLabels(this.props.metricType, this.props.refId);
+          scope.labelData = meta;
+        }
         resolve();
       } catch (error) {
-        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.target.metricType]);
+        appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.metricType]);
+        scope.labelData = defaultLabelData;
         resolve();
       }
     });
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index f2f1399593f..edb12456447 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -19,6 +19,7 @@ interface State {
   service: string;
   metric: string;
   metricDescriptor: any;
+  defaultProject: string;
 }
 
 export class Metrics extends React.Component<Props, State> {
@@ -29,6 +30,7 @@ export class Metrics extends React.Component<Props, State> {
     service: '',
     metric: '',
     metricDescriptor: null,
+    defaultProject: '',
   };
 
   constructor(props) {
@@ -36,19 +38,21 @@ export class Metrics extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    this.getCurrentProject()
-      .then(this.loadMetricDescriptors.bind(this))
-      .then(this.initializeServiceAndMetrics.bind(this));
+    this.setState({ defaultProject: this.props.defaultProject }, () => {
+      this.getCurrentProject()
+        .then(this.loadMetricDescriptors.bind(this))
+        .then(this.initializeServiceAndMetrics.bind(this));
+    });
   }
 
   async getCurrentProject() {
     return new Promise(async (resolve, reject) => {
       try {
-        if (!this.props.defaultProject || this.props.defaultProject === 'loading project...') {
-          // this.props.defaultProject = await this.props.datasource.getDefaultProject();
-          await this.props.datasource.getDefaultProject();
+        if (!this.state.defaultProject || this.state.defaultProject === 'loading project...') {
+          const defaultProject = await this.props.datasource.getDefaultProject();
+          this.setState({ defaultProject });
         }
-        resolve(this.props.defaultProject);
+        resolve(this.state.defaultProject);
       } catch (error) {
         // appEvents.emit('ds-request-error', error);
         reject();
@@ -57,8 +61,8 @@ export class Metrics extends React.Component<Props, State> {
   }
 
   async loadMetricDescriptors() {
-    if (this.props.defaultProject !== 'loading project...') {
-      const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.defaultProject);
+    if (this.state.defaultProject !== 'loading project...') {
+      const metricDescriptors = await this.props.datasource.getMetricTypes(this.state.defaultProject);
       this.setState({ metricDescriptors });
       return metricDescriptors;
     } else {
@@ -81,6 +85,9 @@ export class Metrics extends React.Component<Props, State> {
 
   getMetricsList(metricDescriptors) {
     const selectedMetricDescriptor = this.getSelectedMetricDescriptor(this.props.metricType);
+    if (!selectedMetricDescriptor) {
+      return [];
+    }
     const metricsByService = metricDescriptors.filter(m => m.service === selectedMetricDescriptor.service).map(m => ({
       service: m.service,
       value: m.type,
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index b99865f5070..c25134b4e70 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -60,6 +60,11 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
+  componentWillUnmount() {
+    this.props.events.off('data-received');
+    this.props.events.off('data-error');
+  }
+
   onDataReceived(dataList) {
     const series = dataList.find(item => item.refId === this.props.target.refId);
     if (series) {
@@ -121,12 +126,14 @@ export class QueryEditor extends React.Component<Props, State> {
       metricType,
       crossSeriesReducer,
       groupBys,
+      filters,
       perSeriesAligner,
       alignOptions,
       alignmentPeriod,
       aliasBy,
       lastQuery,
       lastQueryError,
+      refId,
     } = this.state;
     const { datasource } = this.props;
 
@@ -144,7 +151,10 @@ export class QueryEditor extends React.Component<Props, State> {
               <Filter
                 filtersChanged={value => this.handleChange('filters', value)}
                 groupBysChanged={value => this.handleChange('groupBys', value)}
-                target={this.state}
+                filters={filters}
+                groupBys={groupBys}
+                refId={refId}
+                hideGroupBys={false}
                 templateSrv={datasource.templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
@@ -168,13 +178,11 @@ export class QueryEditor extends React.Component<Props, State> {
                 }
               </Aggregations>
               <AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
-
               <AlignmentPeriods
                 templateSrv={datasource.templateSrv}
                 alignmentPeriod={alignmentPeriod}
                 onChange={value => this.handleChange('alignmentPeriod', value)}
               />
-
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </React.Fragment>
           )}
diff --git a/public/app/plugins/datasource/stackdriver/filter_segments.ts b/public/app/plugins/datasource/stackdriver/filter_segments.ts
index 5adb56e2fcf..e9adcad6da6 100644
--- a/public/app/plugins/datasource/stackdriver/filter_segments.ts
+++ b/public/app/plugins/datasource/stackdriver/filter_segments.ts
@@ -5,13 +5,13 @@ export class FilterSegments {
   filterSegments: any[];
   removeSegment: any;
 
-  constructor(private uiSegmentSrv, private target, private getFilterKeysFunc, private getFilterValuesFunc) {}
+  constructor(private uiSegmentSrv, private filters, private getFilterKeysFunc, private getFilterValuesFunc) {}
 
   buildSegmentModel() {
     this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: DefaultRemoveFilterValue });
 
     this.filterSegments = [];
-    this.target.filters.forEach((f, index) => {
+    this.filters.forEach((f, index) => {
       switch (index % 4) {
         case 0:
           this.filterSegments.push(this.uiSegmentSrv.newKey(f));
diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
index 0c2ce32f894..41d4be493de 100644
--- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
@@ -1,7 +1,12 @@
-<stackdriver-filter target="ctrl.annotation.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
-  default-dropdown-value="ctrl.defaultDropdownValue" default-service-value="ctrl.defaultServiceValue" hide-group-bys="true"></stackdriver-filter>
+<!-- <stackdriver-filter target="ctrl.annotation.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+  default-dropdown-value="ctrl.defaultDropdownValue" default-service-value="ctrl.defaultServiceValue" hide-group-bys="true"></stackdriver-filter> -->
+<annotation-query-editor
+  target="ctrl.annotation.target"
+  datasource="ctrl.datasource"
+  on-query-change="(ctrl.handleQueryChange)"
+></annotation-query-editor>
 
-<div class="gf-form gf-form-inline">
+<!-- <div class="gf-form gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label query-keyword width-9">Title</span>
     <input type="text" class="gf-form-input width-20" ng-model="ctrl.annotation.target.title" />
@@ -10,10 +15,8 @@
     <span class="gf-form-label query-keyword width-9">Text</span>
     <input type="text" class="gf-form-input width-20" ng-model="ctrl.annotation.target.text" />
   </div>
-  <div class="gf-form gf-form--grow">
-    <div class="gf-form-label gf-form-label--grow"></div>
-  </div>
-</div>
+  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
+</div> -->
 
 <div class="gf-form grafana-info-box" style="padding: 0">
   <pre class="gf-form-pre alert alert-info" style="margin-right: 0"><h5>Annotation Query Format</h5>
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 767c80c4721..c15560c30ab 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -13,7 +13,8 @@ export class StackdriverFilter {
       scope: {
         labelData: '<',
         loading: '<',
-        target: '=',
+        groupBys: '<',
+        filters: '<',
         filtersChanged: '&',
         groupBysChanged: '&',
         hideGroupBys: '<',
@@ -28,19 +29,17 @@ export class StackdriverFilterCtrl {
   groupBySegments: any[];
   filterSegments: FilterSegments;
   removeSegment: any;
-  target: any;
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
     this.$scope = $scope.$parent;
-    this.target = this.$scope.target;
 
     this.initSegments(this.$scope.hideGroupBys);
   }
 
   initSegments(hideGroupBys: boolean) {
     if (!hideGroupBys) {
-      this.groupBySegments = this.target.groupBys.map(groupBy => {
+      this.groupBySegments = this.$scope.groupBys.map(groupBy => {
         return this.uiSegmentSrv.getSegmentForValue(groupBy);
       });
       this.ensurePlusButton(this.groupBySegments);
@@ -50,7 +49,7 @@ export class StackdriverFilterCtrl {
 
     this.filterSegments = new FilterSegments(
       this.uiSegmentSrv,
-      this.target,
+      this.$scope.filters,
       this.getFilterKeys.bind(this),
       this.getFilterValues.bind(this)
     );
@@ -93,7 +92,7 @@ export class StackdriverFilterCtrl {
   async getFilterKeys(segment, removeText?: string) {
     let elements = await this.createLabelKeyElements();
 
-    if (this.target.filters.indexOf(this.resourceTypeValue) !== -1) {
+    if (this.$scope.filters.indexOf(this.resourceTypeValue) !== -1) {
       elements = elements.filter(e => e.value !== this.resourceTypeValue);
     }
 
@@ -111,7 +110,7 @@ export class StackdriverFilterCtrl {
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
 
-    elements = elements.filter(e => this.target.groupBys.indexOf(e.value) === -1);
+    elements = elements.filter(e => this.$scope.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
       return [];
@@ -142,6 +141,7 @@ export class StackdriverFilterCtrl {
   }
 
   async getFilters(segment, index) {
+    await this.$scope.loading;
     const hasNoFilterKeys =
       this.$scope.labelData.metricLabels && Object.keys(this.$scope.labelData.metricLabels).length === 0;
     return this.filterSegments.getFilters(segment, index, hasNoFilterKeys);
diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts
index ffd4f28cad1..c3259649d81 100644
--- a/public/app/plugins/datasource/stackdriver/types.ts
+++ b/public/app/plugins/datasource/stackdriver/types.ts
@@ -32,8 +32,19 @@ export interface Target {
   groupBys: string[];
   filters: string[];
   aliasBy: string;
-  metricKind: any;
-  valueType: any;
+  metricKind: string;
+  valueType: string;
+}
+
+export interface AnnotationTarget {
+  defaultProject: string;
+  metricType: string;
+  refId: string;
+  filters: string[];
+  metricKind: string;
+  valueType: string;
+  title: string;
+  text: string;
 }
 
 export interface QueryMeta {

From f9380a2634862e911426ea51af9ed4fd77b2fcf5 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 09:36:32 +0100
Subject: [PATCH 065/352] add help text component

---
 .../components/AnnotationQueryEditor.tsx      | 12 ++++-
 .../components/AnnotationsHelp.tsx            | 44 +++++++++++++++++++
 .../partials/annotations.editor.html          | 35 ---------------
 3 files changed, 54 insertions(+), 37 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/AnnotationsHelp.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index 6c501d45eda..057fd5fe35b 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -4,6 +4,7 @@ import _ from 'lodash';
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { AnnotationTarget } from '../types';
+import { AnnotationsHelp } from './AnnotationsHelp';
 
 export interface Props {
   onQueryChange: (target: AnnotationTarget) => void;
@@ -57,7 +58,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
   }
 
   render() {
-    const { defaultProject, metricType, filters, refId, title } = this.state;
+    const { defaultProject, metricType, filters, refId, title, text } = this.state;
     const { datasource } = this.props;
 
     return (
@@ -95,12 +96,19 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           </div>
           <div className="gf-form">
             <span className="gf-form-label query-keyword width-9">Text</span>
-            <input type="text" className="gf-form-input width-20" ng-model="ctrl.annotation.target.text" />
+            <input
+              type="text"
+              className="gf-form-input width-20"
+              value={text}
+              onChange={e => this.handleChange('text', e.target.value)}
+            />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
+
+        <AnnotationsHelp />
         {/* <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} /> */}
       </React.Fragment>
     );
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationsHelp.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationsHelp.tsx
new file mode 100644
index 00000000000..71c54fe5f76
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationsHelp.tsx
@@ -0,0 +1,44 @@
+import React, { SFC } from 'react';
+
+export const AnnotationsHelp: SFC = () => {
+  return (
+    <div className="gf-form grafana-info-box" style={{ padding: 0 }}>
+      <pre className="gf-form-pre alert alert-info" style={{ marginRight: 0 }}>
+        <h5>Annotation Query Format</h5>
+        <p>
+          An annotation is an event that is overlaid on top of graphs. Annotation rendering is expensive so it is
+          important to limit the number of rows returned.{' '}
+        </p>
+        <p>
+          The Title and Text fields support templating and can use data returned from the query. For example, the Title
+          field could have the following text:
+        </p>
+        <code>
+          {`${'{{metric.type}}'}`} has value: {`${'{{metric.value}}'}`}
+        </code>
+        <p>
+          Example Result: <code>monitoring.googleapis.com/uptime_check/http_status has this value: 502</code>
+        </p>
+        <label>Patterns:</label>
+        <p>
+          <code>{`${'{{metric.value}}'}`}</code> = value of the metric/point
+        </p>
+        <p>
+          <code>{`${'{{metric.type}}'}`}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
+        </p>
+        <p>
+          <code>{`${'{{metric.name}}'}`}</code> = name part of metric e.g. instance/cpu/usage_time
+        </p>
+        <p>
+          <code>{`${'{{metric.service}}'}`}</code> = service part of metric e.g. compute
+        </p>
+        <p>
+          <code>{`${'{{metric.label.label_name}}'}`}</code> = Metric label metadata e.g. metric.label.instance_name
+        </p>
+        <p>
+          <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
+        </p>
+      </pre>
+    </div>
+  );
+};
diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
index 41d4be493de..5495ed234e5 100644
--- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
@@ -1,40 +1,5 @@
-<!-- <stackdriver-filter target="ctrl.annotation.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
-  default-dropdown-value="ctrl.defaultDropdownValue" default-service-value="ctrl.defaultServiceValue" hide-group-bys="true"></stackdriver-filter> -->
 <annotation-query-editor
   target="ctrl.annotation.target"
   datasource="ctrl.datasource"
   on-query-change="(ctrl.handleQueryChange)"
 ></annotation-query-editor>
-
-<!-- <div class="gf-form gf-form-inline">
-  <div class="gf-form">
-    <span class="gf-form-label query-keyword width-9">Title</span>
-    <input type="text" class="gf-form-input width-20" ng-model="ctrl.annotation.target.title" />
-  </div>
-  <div class="gf-form">
-    <span class="gf-form-label query-keyword width-9">Text</span>
-    <input type="text" class="gf-form-input width-20" ng-model="ctrl.annotation.target.text" />
-  </div>
-  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-</div> -->
-
-<div class="gf-form grafana-info-box" style="padding: 0">
-  <pre class="gf-form-pre alert alert-info" style="margin-right: 0"><h5>Annotation Query Format</h5>
-An annotation is an event that is overlaid on top of graphs. Annotation rendering is expensive so it is important to limit the number of rows returned.
-
-The Title and Text fields support templating and can use data returned from the query. For example, the Title field could have the following text:
-
-<code ng-non-bindable>{{metric.type}} has value: {{metric.value}}</code>
-
-Example Result: <code ng-non-bindable>monitoring.googleapis.com/uptime_check/http_status has this value: 502</code>
-
-<label>Patterns:</label>
-<code ng-non-bindable>{{metric.value}}</code> = value of the metric/point
-<code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
-<code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. instance/cpu/usage_time
-<code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute
-
-<code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g. metric.label.instance_name
-<code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
-</pre>
-</div>

From fd88f637b2de3bf223cc794be131fa75a588538b Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 09:41:26 +0100
Subject: [PATCH 066/352] fix filter bug

---
 .../app/plugins/datasource/stackdriver/components/Filter.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index cfaa5480d0b..67a1ff6c38a 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -57,10 +57,12 @@ export class Filter extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
+    const scope = this.component.getScope();
     if (prevProps.metricType !== this.props.metricType) {
-      const scope = this.component.getScope();
       scope.loading = this.loadLabels(scope);
     }
+    scope.filters = this.props.filters;
+    scope.groupBys = this.props.groupBys;
   }
 
   componentWillUnmount() {

From d9c93e572ea5e8589c4a862b06ced294c1407c38 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 2 Jan 2019 10:50:52 +0100
Subject: [PATCH 067/352] hide protip if not defined

---
 .../core/components/EmptyListCTA/EmptyListCTA.tsx  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index ae0e39cc26d..d63af72ae4d 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -24,12 +24,14 @@ class EmptyListCTA extends Component<Props, any> {
           <i className={buttonIcon} />
           {buttonTitle}
         </a>
-        <div className="empty-list-cta__pro-tip">
-          <i className="fa fa-rocket" /> ProTip: {proTip}
-          <a className="text-link empty-list-cta__pro-tip-link" href={proTipLink} target={proTipTarget}>
-            {proTipLinkTitle}
-          </a>
-        </div>
+        {proTip && (
+          <div className="empty-list-cta__pro-tip">
+            <i className="fa fa-rocket" /> ProTip: {proTip}
+            <a className="text-link empty-list-cta__pro-tip-link" href={proTipLink} target={proTipTarget}>
+              {proTipLinkTitle}
+            </a>
+          </div>
+        )}
       </div>
     );
   }

From ce01bd696e69ef93864a84fe84b7456c0f67caba Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 2 Jan 2019 10:57:12 +0100
Subject: [PATCH 068/352] add alert in react instead of angular

---
 public/app/features/alerting/AlertTabCtrl.ts  |  5 ++--
 .../features/alerting/partials/alert_tab.html | 10 --------
 .../features/dashboard/dashgrid/AlertTab.tsx  | 23 ++++++++++++++++---
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index 6d87c159d02..ffcb20472ad 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/public/app/features/alerting/AlertTabCtrl.ts
@@ -45,6 +45,7 @@ export class AlertTabCtrl {
     this.noDataModes = alertDef.noDataModes;
     this.executionErrorModes = alertDef.executionErrorModes;
     this.appSubUrl = config.appSubUrl;
+    this.panelCtrl._enableAlert = this.enable;
   }
 
   $onInit() {
@@ -353,11 +354,11 @@ export class AlertTabCtrl {
     });
   }
 
-  enable() {
+  enable = () => {
     this.panel.alert = {};
     this.initModel();
     this.panel.alert.for = '5m'; //default value for new alerts. for existing alerts we use 0m to avoid breaking changes
-  }
+  };
 
   evaluatorParamsChanged() {
     ThresholdMapper.alertToGraphThresholds(this.panel);
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index cbddb93207a..3a03b23a076 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -153,13 +153,3 @@
     </div>
   </div>
 </div>
-
-<div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.panel.alert">
-  <div class="empty-list-cta">
-    <div class="empty-list-cta__title">Panel has no alert rule defined</div>
-    <button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
-      <i class="icon-gf icon-gf-alert"></i>
-      Create Alert
-    </button>
-  </div>
-</div>
diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index 2a715536ca8..5ccfa791328 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import appEvents from 'app/core/app_events';
 import { PanelModel } from '../panel_model';
 import 'app/features/alerting/AlertTabCtrl';
@@ -33,7 +33,7 @@ export class AlertTab extends PureComponent<Props> {
   }
 
   shouldLoadAlertTab() {
-    return this.props.angularPanel && this.element;
+    return this.props.angularPanel && this.element && !this.component;
   }
 
   componentWillUnmount() {
@@ -93,6 +93,7 @@ export class AlertTab extends PureComponent<Props> {
             panel.thresholds = [];
             this.panelCtrl.alertState = null;
             this.panelCtrl.render();
+            this.forceUpdate();
           },
         });
       },
@@ -100,15 +101,31 @@ export class AlertTab extends PureComponent<Props> {
     };
   };
 
+  onAddAlert = () => {
+    this.panelCtrl._enableAlert();
+    this.component.digest();
+    this.forceUpdate();
+  };
+
   render() {
     const { alert } = this.props.panel;
 
     const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
 
+    const model = {
+      title: 'Panel has no alert rule defined',
+      icon: 'icon-gf icon-gf-alert',
+      onClick: this.onAddAlert,
+      buttonTitle: 'Create Alert',
+    };
+
     //TODO move add button react from angular and add condition to render angular view
     return (
       <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
-        <div ref={element => (this.element = element)} />
+        <>
+          <div ref={element => (this.element = element)} />
+          {!alert && <EmptyListCTA model={model} />}
+        </>
       </EditorTabBody>
     );
   }

From 70c2efd7117c0cff1397bf1301672d437baa108f Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 13:14:55 +0100
Subject: [PATCH 069/352] Wrap react select component in angular directive

---
 .../stackdriver/components/OptionPicker.tsx   | 48 +++++++++++++++++++
 .../stackdriver/partials/query.filter.html    | 34 ++++++-------
 .../datasource/stackdriver/query_ctrl.ts      |  9 ++++
 .../stackdriver/query_filter_ctrl.ts          | 16 +++++--
 4 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
new file mode 100644
index 00000000000..f83777e5f79
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+// import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'react-select';
+// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import _ from 'lodash';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, options, selected, placeholder, className } = this.props;
+    const selectedOption = options.find(metric => metric.value === selected);
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={options}
+        components={{
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isDisabled={false}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index b96b0720e33..1d87c8a3005 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,26 +1,26 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <select
-      class="gf-form-input width-12"
-      ng-model="ctrl.service"
-      ng-options="f.value as f.text for f in ctrl.services"
-      ng-change="ctrl.onServiceChange(ctrl.service)"
-    ></select>
+    <option-picker
+      onChange="ctrl.handleServiceChange"
+      selected="ctrl.service"
+      options="ctrl.services"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
+  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
+</div>
+<div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <gf-form-dropdown
-      model="ctrl.metricType"
-      get-options="ctrl.metrics"
-      class="min-width-20"
-      disabled
-      type="text"
-      allow-custom="true"
-      lookup-text="true"
-      css-class="min-width-12"
-      on-change="ctrl.onMetricTypeChange()"
-    ></gf-form-dropdown>
+    <option-picker
+      onChange="ctrl.handleMetricTypeChange"
+      selected="ctrl.metricType"
+      options="ctrl.metrics"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index c2607964456..3186a5e2012 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,6 +2,8 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
+import { OptionPicker } from './components/OptionPicker';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -64,6 +66,13 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+    react2AngularDirective('optionPicker', OptionPicker, [
+      'options',
+      'onChange',
+      'selected',
+      'className',
+      'placeholder',
+    ]);
   }
 
   onDataReceived(dataList) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 0f5dce559fd..7926da9aa1c 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -59,6 +59,13 @@ export class StackdriverFilterCtrl {
       .then(this.getLabels.bind(this));
 
     this.initSegments($scope.hideGroupBys);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    this.handleServiceChange = this.handleServiceChange.bind(this);
+  }
+
+  handleMetricTypeChange(value) {
+    this.metricType = value;
+    this.onMetricTypeChange();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -110,7 +117,7 @@ export class StackdriverFilterCtrl {
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        text: m.serviceShortName,
+        label: m.serviceShortName,
       };
     });
 
@@ -128,7 +135,8 @@ export class StackdriverFilterCtrl {
         value: m.type,
         serviceShortName: m.serviceShortName,
         text: m.displayName,
-        title: m.description,
+        label: m.displayName,
+        description: m.description,
       };
     });
 
@@ -167,8 +175,8 @@ export class StackdriverFilterCtrl {
     });
   }
 
-  onServiceChange() {
-    this.target.service = this.service;
+  handleServiceChange(service) {
+    this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
     this.setMetricType();
     this.getLabels();

From 488e92e7f5bb026c569d0154443811c07c02e871 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:11:18 +0100
Subject: [PATCH 070/352] wip: add basic option header

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ++++++++++++
 public/sass/_grafana.scss                          |  1 +
 public/sass/components/_group-heading.scss         |  5 +++++
 3 files changed, 18 insertions(+)
 create mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 create mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
new file mode 100644
index 00000000000..76012ed3e7f
--- /dev/null
+++ b/public/app/core/components/Picker/GroupHeading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { components } from 'react-select';
+
+export const GroupHeading = props => {
+  return (
+    <label className="description-picker-option__button btn picker-option-group">
+      <components.GroupHeading {...props} />
+    </label>
+  );
+};
+
+export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 404a212241b..3acb76e960d 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -105,6 +105,7 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
+@import 'components/group-heading';
 @import 'components/value-mappings';
 @import 'components/popover-box';
 
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
new file mode 100644
index 00000000000..9656277d123
--- /dev/null
+++ b/public/sass/components/_group-heading.scss
@@ -0,0 +1,5 @@
+.picker-option-group {
+  cursor: default;
+  font-weight: $lead-font-weight;
+  color: $btn-primary-bg-hl;
+}

From b5d6cd1cc86be4691d54d40f279d2e6d0fc32e27 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:12:33 +0100
Subject: [PATCH 071/352] wip: add option group component

---
 .../components/OptionGroupPicker.tsx          | 53 +++++++++++++++++++
 .../stackdriver/components/OptionPicker.tsx   | 15 +++---
 .../stackdriver/partials/query.filter.html    | 14 ++---
 .../datasource/stackdriver/query_ctrl.ts      | 10 ++++
 .../stackdriver/query_filter_ctrl.ts          | 39 +++++++++++++-
 5 files changed, 117 insertions(+), 14 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
new file mode 100644
index 00000000000..7401b226413
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Select from 'react-select';
+import _ from 'lodash';
+
+import GroupHeading from 'app/core/components/Picker/GroupHeading';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+
+export interface Props {
+  onChange: (value: string) => void;
+  groups: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionGroupPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
+    const options = _.flatten(groups.map(o => o.options));
+    const selectedOption = options.find(option => option.value === selected);
+
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={groups}
+        components={{
+          GroupHeading,
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isSearchable={searchable}
+        maxMenuHeight={50}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index f83777e5f79..3d99ed3bafc 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
-// import SimplePicker from 'app/core/components/Picker/SimplePicker';
 import Select from 'react-select';
-// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import _ from 'lodash';
+
 import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
 import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
 import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-import _ from 'lodash';
 
 export interface Props {
   onChange: (value: string) => void;
   options: any[];
+  searchable: boolean;
   selected: string;
   placeholder?: string;
   className?: string;
+  groups?: boolean;
 }
 
 export class OptionPicker extends React.Component<Props, any> {
@@ -22,8 +23,9 @@ export class OptionPicker extends React.Component<Props, any> {
   }
 
   render() {
-    const { onChange, options, selected, placeholder, className } = this.props;
-    const selectedOption = options.find(metric => metric.value === selected);
+    const { onChange, options, selected, placeholder, className, searchable } = this.props;
+    const selectedOption = options.find(option => option.value === selected);
+
     return (
       <Select
         placeholder={placeholder}
@@ -36,7 +38,8 @@ export class OptionPicker extends React.Component<Props, any> {
           NoOptionsMessage,
         }}
         styles={ResetStyles}
-        isDisabled={false}
+        isSearchable={searchable}
+        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 1d87c8a3005..df3821ac463 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -5,8 +5,9 @@
       onChange="ctrl.handleServiceChange"
       selected="ctrl.service"
       options="ctrl.services"
-      placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
+      searchable="false"
+      placeholder="ctrl.defaultServiceValue"
+      className="&quot;width-15&quot;"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -14,13 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.metricType"
-      options="ctrl.metrics"
+      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      searchable="true"
       placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
-    ></option-picker>
+      className="&quot;width-15&quot;"
+    ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 3186a5e2012..8c00d6caddb 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -3,6 +3,7 @@ import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
 import { OptionPicker } from './components/OptionPicker';
+import { OptionGroupPicker } from './components/OptionGroupPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -70,6 +71,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'options',
       'onChange',
       'selected',
+      'searchable',
+      'className',
+      'placeholder',
+    ]);
+    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
+      'groups',
+      'onChange',
+      'selected',
+      'searchable',
       'className',
       'placeholder',
     ]);
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 7926da9aa1c..dd7178ecca0 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -36,6 +36,7 @@ export class StackdriverFilterCtrl {
   metricType: string;
   metricDescriptors: any[];
   metrics: any[];
+  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -52,6 +53,7 @@ export class StackdriverFilterCtrl {
 
     this.metricDescriptors = [];
     this.metrics = [];
+    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -106,6 +108,7 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
+      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -113,11 +116,11 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, text: this.$scope.defaultServiceValue };
+    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        label: m.serviceShortName,
+        label: _.startCase(m.serviceShortName),
       };
     });
 
@@ -128,6 +131,37 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
   }
 
+  getMetricGroups() {
+    return this.metrics.reduce((acc, curr) => {
+      const group = acc.find(group => group.service === curr.service);
+      if (group) {
+        group.options = [...group.options, { value: curr.value, label: curr.label }];
+      } else {
+        acc = [
+          ...acc,
+          {
+            label: _.startCase(curr.serviceShortName),
+            service: curr.service,
+            options: [{ value: curr.value, label: curr.label }],
+          },
+        ];
+      }
+      return acc;
+    }, []);
+  }
+
+  insertTemplateVariables(options) {
+    const templateVariables = {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+    return [templateVariables, { label: 'Metrics', options }];
+  }
+
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
@@ -178,6 +212,7 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
+    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {

From 406c0d15a5ba2ea733bc2fdf27bff21b37d274f5 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:14:06 +0100
Subject: [PATCH 072/352] remove redundant default value

---
 .../datasource/stackdriver/datasource.ts      |  1 +
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/partials/query.filter.html    | 12 ++--
 .../datasource/stackdriver/query_ctrl.ts      |  7 +-
 .../stackdriver/query_filter_ctrl.ts          | 72 +++++++++++--------
 .../specs/query_filter_ctrl.test.ts           |  2 -
 6 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index d1545655652..7b1afbae5ac 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -274,6 +274,7 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
+
           return m;
         });
       }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 5c7bc8935b1..66961d106aa 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,6 +1,5 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource" default-dropdown-value="ctrl.defaultDropdownValue"
-    default-service-value="ctrl.defaultServiceValue"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index df3821ac463..583744d0e67 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -6,8 +6,8 @@
       selected="ctrl.service"
       options="ctrl.services"
       searchable="false"
-      placeholder="ctrl.defaultServiceValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Services'"
+      className="'width-15'"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -17,11 +17,11 @@
     <span class="gf-form-label width-9 query-keyword">Metric</span>
     <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.metricType"
-      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      selected="ctrl.target.metricType"
+      groups="ctrl.getMetricGroups()"
       searchable="true"
-      placeholder="ctrl.defaultDropdownValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Metric'"
+      className="'width-15'"
     ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8c00d6caddb..cf22802ae76 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -34,13 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     valueType: any;
   };
 
-  defaultDropdownValue = 'Select Metric';
-  defaultServiceValue = 'All Services';
-
   defaults = {
     defaultProject: 'loading project...',
-    metricType: this.defaultDropdownValue,
-    service: this.defaultServiceValue,
+    metricType: '',
+    service: '',
     metric: '',
     unit: '',
     aggregation: {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index dd7178ecca0..ba96cfc5a60 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -15,8 +15,6 @@ export class StackdriverFilter {
         target: '=',
         datasource: '=',
         refresh: '&',
-        defaultDropdownValue: '<',
-        defaultServiceValue: '<',
         hideGroupBys: '<',
       },
     };
@@ -48,9 +46,6 @@ export class StackdriverFilterCtrl {
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
     this.datasource = $scope.datasource;
     this.target = $scope.target;
-    this.metricType = $scope.defaultDropdownValue;
-    this.service = $scope.defaultServiceValue;
-
     this.metricDescriptors = [];
     this.metrics = [];
     this.metricGroups = [];
@@ -66,7 +61,7 @@ export class StackdriverFilterCtrl {
   }
 
   handleMetricTypeChange(value) {
-    this.metricType = value;
+    this.target.metricType = value;
     this.onMetricTypeChange();
   }
 
@@ -116,7 +111,6 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
@@ -128,10 +122,10 @@ export class StackdriverFilterCtrl {
       this.service = this.target.service;
     }
 
-    return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
+    return services.length > 0 ? _.uniqBy(services, 'value') : [];
   }
 
-  getMetricGroups() {
+  getMetricGroupsOld() {
     return this.metrics.reduce((acc, curr) => {
       const group = acc.find(group => group.service === curr.service);
       if (group) {
@@ -150,6 +144,27 @@ export class StackdriverFilterCtrl {
     }, []);
   }
 
+  getMetricGroups() {
+    return [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Metrics',
+        options: this.metrics,
+      },
+    ];
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+  }
+
   insertTemplateVariables(options) {
     const templateVariables = {
       label: 'Template Variables',
@@ -174,29 +189,28 @@ export class StackdriverFilterCtrl {
       };
     });
 
-    let result;
-    if (this.target.service === this.$scope.defaultServiceValue) {
-      result = metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
-    } else {
-      result = metrics.filter(m => m.service === this.target.service);
+    const metricsByService = metrics.filter(m => m.service === this.target.service);
+    if (
+      metricsByService.length > 0 &&
+      !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
+    ) {
+      this.target.metricType = metricsByService[0].value;
     }
-
-    if (result.find(m => m.value === this.templateSrv.replace(this.target.metricType))) {
-      this.metricType = this.target.metricType;
-    } else if (result.length > 0) {
-      this.metricType = this.target.metricType = result[0].value;
-    }
-    return result;
+    return metricsByService;
   }
 
   async getLabels() {
     this.loadLabelsPromise = new Promise(async resolve => {
       try {
-        const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-        this.metricLabels = meta.metricLabels;
-        this.resourceLabels = meta.resourceLabels;
-        this.resourceTypes = meta.resourceTypes;
-        resolve();
+        if (this.target.metricType) {
+          const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+          this.metricLabels = meta.metricLabels;
+          this.resourceLabels = meta.resourceLabels;
+          this.resourceTypes = meta.resourceTypes;
+          resolve();
+        } else {
+          resolve();
+        }
       } catch (error) {
         if (error.data && error.data.message) {
           console.log(error.data.message);
@@ -216,7 +230,7 @@ export class StackdriverFilterCtrl {
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {
-      this.target.metricType = this.$scope.defaultDropdownValue;
+      this.target.metricType = '';
     } else {
       this.$scope.refresh();
     }
@@ -229,9 +243,9 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    this.target.metricType = this.metricType;
+    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.metricType)
+      m => m.type === this.templateSrv.replace(this.target.metricType)
     );
     this.target.unit = unit;
     this.target.valueType = valueType;
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 020db584508..e8d04357cb8 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -409,8 +409,6 @@ function createCtrlWithFakes(existingFilters?: string[]) {
         return 'project';
       },
     },
-    defaultDropdownValue: 'Select Metric',
-    defaultServiceValue: 'All Services',
     refresh: () => {},
   };
 

From 4d19ac5c02f09770fd0e831c73632d5725434f58 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:57:30 +0100
Subject: [PATCH 073/352] use new option group in aggregation directive

---
 .../partials/query.aggregation.html           | 43 ++++++----
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 79 ++++++++++++++++---
 3 files changed, 97 insertions(+), 28 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 5f16d3fc61d..7396c6eb546 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,16 +2,21 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAggregationChange"
+        selected="ctrl.target.aggregation.crossSeriesReducer"
+        groups="ctrl.aggOptions"
+        searchable="true"
+        placeholder="'Select Aggregation'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
       <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
         <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
-        Advanced Options
+        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
       </a>
     </label>
   </div>
@@ -20,27 +25,35 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentChange"
+        selected="ctrl.target.aggregation.perSeriesAligner"
+        groups="ctrl.alignOptions"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
 
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentPeriodChange"
+        selected="ctrl.target.aggregation.alignmentPeriod"
+        groups="ctrl.alignmentPeriods"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
 
   <div class="gf-form gf-form--grow">
-    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
-      {{ctrl.formatAlignmentText()}}
-    </label>
+    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 66961d106aa..8760aaf1bb3 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,5 +1,6 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+    ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 628cc494242..f5ff3ad3143 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
-import * as options from './constants';
+import { alignmentPeriods } from './constants';
 import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
 import kbn from 'app/core/utils/kbn';
 
@@ -29,9 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = options.alignmentPeriods;
-    this.aggOptions = options.aggOptions;
-    this.alignOptions = options.alignOptions;
+    this.alignmentPeriods = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Periods',
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -39,30 +46,68 @@ export class StackdriverAggregationCtrl {
       self.setAggOptions();
       self.setAlignOptions();
     });
+    this.handleAlignmentChange = this.handleAlignmentChange.bind(this);
+    this.handleAggregationChange = this.handleAggregationChange.bind(this);
+    this.handleAlignmentPeriodChange = this.handleAlignmentPeriodChange.bind(this);
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    this.alignOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Options',
+        options: alignments,
+      },
+    ];
+    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
     }
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
-
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+    this.aggOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Aggregations',
+        options: aggregations,
+      },
+    ];
+  }
+
+  handleAlignmentChange(value) {
+    this.target.aggregation.perSeriesAligner = value;
+    this.$scope.refresh();
+  }
+
+  handleAggregationChange(value) {
+    this.target.aggregation.crossSeriesReducer = value;
+    this.$scope.refresh();
+  }
+
+  handleAlignmentPeriodChange(value) {
+    this.target.aggregation.alignmentPeriod = value;
+    this.$scope.refresh();
   }
 
   formatAlignmentText() {
-    const selectedAlignment = this.alignOptions.find(
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const selectedAlignment = alignments.find(
       ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
@@ -74,6 +119,16 @@ export class StackdriverAggregationCtrl {
     const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);

From 615fa6fc7d7a57ab820287cd10e6d8ef59279983 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:55:23 +0100
Subject: [PATCH 074/352] remove redundant default value

---
 .../datasource/stackdriver/components/OptionGroupPicker.tsx      | 1 -
 .../plugins/datasource/stackdriver/components/OptionPicker.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
index 7401b226413..f7863dd2a16 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -41,7 +41,6 @@ export class OptionGroupPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index 3d99ed3bafc..64d68f1bd70 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -39,7 +39,6 @@ export class OptionPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}

From b6c6cc1ff692dafca9f6214f58b69fbbc6e9efbf Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:57:57 +0100
Subject: [PATCH 075/352] update failing tests

---
 .../stackdriver/query_aggregation_ctrl.ts     |  6 +-
 .../stackdriver/query_filter_ctrl.ts          | 14 +----
 .../specs/query_aggregation_ctrl.test.ts      | 57 +++++++++++++++++--
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index f5ff3ad3143..d4478c6214c 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,6 +52,7 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
+    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
@@ -78,7 +79,7 @@ export class StackdriverAggregationCtrl {
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
     this.aggOptions = [
@@ -116,7 +117,8 @@ export class StackdriverAggregationCtrl {
   }
 
   deselectAggregationOption(notValidOptionValue: string) {
-    const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
+    const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index ba96cfc5a60..74ca2c9b067 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -160,23 +160,11 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        description: `$${v.definition}`,
+        // description: `$${v.definition}`,
       })),
     };
   }
 
-  insertTemplateVariables(options) {
-    const templateVariables = {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-        description: `$${v.definition}`,
-      })),
-    };
-    return [templateVariables, { label: 'Metrics', options }];
-  }
-
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 81011f5dfe0..6e83824d504 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,27 +17,68 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(11);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(2);
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          expect(ctrl.alignOptions.length).toBe(9);
-          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(11);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
+      describe('and result is double and delta and no group by is used', () => {
+        beforeEach(async () => {
+          ctrl = new StackdriverAggregationCtrl(
+            {
+              $on: () => {},
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'DELTA',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
+            }
+          );
+        });
+
+        it('should populate all alignment options except four', () => {
+          ctrl.setAlignOptions();
+          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(9);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+            expect['not'].arrayContaining([
+              'ALIGN_NEXT_OLDER',
+              'ALIGN_INTERPOLATE',
+              'ALIGN_COUNT_TRUE',
+              'ALIGN_COUNT_FALSE',
+              'ALIGN_FRACTION_TRUE',
+            ])
+          );
+        });
+      });
+
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -51,14 +92,18 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(10);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(ctrl.aggOptions.length).toBe(2);
+          expect(templateVariableGroup.options.length).toBe(1);
+          expect(aggOptionsGroup.options.length).toBe(10);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From f68db4eded59eb043cf352e1274d52794251cf5e Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:57:32 +0100
Subject: [PATCH 076/352] cleanup query filter

---
 .../stackdriver/partials/query.filter.html    |  2 +-
 .../stackdriver/query_filter_ctrl.ts          | 62 +++++--------------
 2 files changed, 15 insertions(+), 49 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 583744d0e67..632f89b8248 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -3,7 +3,7 @@
     <span class="gf-form-label width-9 query-keyword">Service</span>
     <option-picker
       onChange="ctrl.handleServiceChange"
-      selected="ctrl.service"
+      selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 74ca2c9b067..d270290abb2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -30,8 +30,6 @@ export class StackdriverFilterCtrl {
   resourceTypeValue = 'resource.type';
   loadLabelsPromise: Promise<any>;
 
-  service: string;
-  metricType: string;
   metricDescriptors: any[];
   metrics: any[];
   metricGroups: any[];
@@ -111,37 +109,12 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const services = this.metricDescriptors.map(m => {
-      return {
-        value: m.service,
-        label: _.startCase(m.serviceShortName),
-      };
-    });
+    const services = this.metricDescriptors.map(m => ({
+      value: m.service,
+      label: _.startCase(m.serviceShortName),
+    }));
 
-    if (services.find(m => m.value === this.target.service)) {
-      this.service = this.target.service;
-    }
-
-    return services.length > 0 ? _.uniqBy(services, 'value') : [];
-  }
-
-  getMetricGroupsOld() {
-    return this.metrics.reduce((acc, curr) => {
-      const group = acc.find(group => group.service === curr.service);
-      if (group) {
-        group.options = [...group.options, { value: curr.value, label: curr.label }];
-      } else {
-        acc = [
-          ...acc,
-          {
-            label: _.startCase(curr.serviceShortName),
-            service: curr.service,
-            options: [{ value: curr.value, label: curr.label }],
-          },
-        ];
-      }
-      return acc;
-    }, []);
+    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
   getMetricGroups() {
@@ -149,7 +122,7 @@ export class StackdriverFilterCtrl {
       this.getTemplateVariablesGroup(),
       {
         label: 'Metrics',
-        options: this.metrics,
+        options: this.getMetricsList(),
       },
     ];
   }
@@ -160,24 +133,18 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        // description: `$${v.definition}`,
       })),
     };
   }
 
   getMetricsList() {
-    const metrics = this.metricDescriptors.map(m => {
-      return {
-        service: m.service,
-        value: m.type,
-        serviceShortName: m.serviceShortName,
-        text: m.displayName,
-        label: m.displayName,
-        description: m.description,
-      };
-    });
+    const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
+      service: m.service,
+      value: m.type,
+      label: m.displayName,
+      description: m.description,
+    }));
 
-    const metricsByService = metrics.filter(m => m.service === this.target.service);
     if (
       metricsByService.length > 0 &&
       !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
@@ -212,12 +179,12 @@ export class StackdriverFilterCtrl {
   }
 
   handleServiceChange(service) {
-    this.target.service = this.service = service;
+    this.target.service = service;
     this.metrics = this.getMetricsList();
     this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
-    if (!this.metrics.find(m => m.value === this.target.metricType)) {
+    if (!this.metrics.some(m => m.value === this.target.metricType)) {
       this.target.metricType = '';
     } else {
       this.$scope.refresh();
@@ -231,7 +198,6 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)
     );

From 85a434568f85ef124c78318b98633fe375afc1d0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:58:25 +0100
Subject: [PATCH 077/352] use same color for label as in explore dropdown

---
 public/sass/components/_group-heading.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
index 9656277d123..8fc39c0dc2a 100644
--- a/public/sass/components/_group-heading.scss
+++ b/public/sass/components/_group-heading.scss
@@ -1,5 +1,6 @@
 .picker-option-group {
   cursor: default;
+  color: $text-color-weak;
+  font-size: $font-size-sm;
   font-weight: $lead-font-weight;
-  color: $btn-primary-bg-hl;
 }

From 014457c48645b38bc840ff990c7539c00126de88 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:59:13 +0100
Subject: [PATCH 078/352] fix remove filter bug

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index d270290abb2..8ce2dfde554 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -252,8 +252,10 @@ export class StackdriverFilterCtrl {
       return [];
     }
 
-    this.removeSegment.value = removeText;
-    return [...elements, this.removeSegment];
+    return [
+      ...elements,
+      this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
+    ];
   }
 
   async getGroupBys(segment) {

From 478cfc195afe702aefaf55212a8a40d533693554 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 14:08:47 +0100
Subject: [PATCH 079/352] remove on metric type change

---
 .../datasource/stackdriver/query_filter_ctrl.ts        | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 8ce2dfde554..e617dba5945 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -60,7 +60,9 @@ export class StackdriverFilterCtrl {
 
   handleMetricTypeChange(value) {
     this.target.metricType = value;
-    this.onMetricTypeChange();
+    this.setMetricType();
+    this.$scope.refresh();
+    this.getLabels();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -191,12 +193,6 @@ export class StackdriverFilterCtrl {
     }
   }
 
-  async onMetricTypeChange() {
-    this.setMetricType();
-    this.$scope.refresh();
-    this.getLabels();
-  }
-
   setMetricType() {
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)

From 4734788db47c6f31394da69b96f681ca9ccf7a8a Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:25:13 +0100
Subject: [PATCH 080/352] use new generic picker

---
 .../components/OptionGroupPicker.tsx          | 52 ------------------
 .../stackdriver/components/OptionPicker.tsx   | 50 -----------------
 .../components/StackdriverPicker.tsx          | 53 +++++++++++++++++++
 .../partials/query.aggregation.html           | 16 +++---
 .../stackdriver/partials/query.filter.html    |  6 +--
 .../datasource/stackdriver/query_ctrl.ts      | 13 +----
 6 files changed, 66 insertions(+), 124 deletions(-)
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
deleted file mode 100644
index f7863dd2a16..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import GroupHeading from 'app/core/components/Picker/GroupHeading';
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  groups: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-}
-
-export class OptionGroupPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
-    const options = _.flatten(groups.map(o => o.options));
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={groups}
-        components={{
-          GroupHeading,
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
deleted file mode 100644
index 64d68f1bd70..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groups?: boolean;
-}
-
-export class OptionPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, options, selected, placeholder, className, searchable } = this.props;
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={options}
-        components={{
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
new file mode 100644
index 00000000000..b2c447feeff
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import _ from 'lodash';
+import Select from 'app/core/components/Select/Select';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+  groups?: boolean;
+}
+
+export class StackdriverPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  extractOptions(options) {
+    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+  }
+
+  onChange = item => {
+    const extractedOptions = this.extractOptions(this.props.options);
+    const option = extractedOptions.find(option => option.value === item.value);
+    this.props.onChange(option.value);
+  };
+
+  render() {
+    const { options, selected, placeholder, className, searchable } = this.props;
+    const extractedOptions = this.extractOptions(options);
+    const selectedOption = extractedOptions.find(option => option.value === selected);
+
+    return (
+      <Select
+        className={className}
+        isMulti={false}
+        isClearable={false}
+        backspaceRemovesValue={false}
+        onChange={this.onChange}
+        options={options}
+        autoFocus={false}
+        isSearchable={searchable}
+        openMenuOnFocus={true}
+        maxMenuHeight={500}
+        placeholder={placeholder}
+        noOptionsMessage={() => 'No options found'}
+        value={selectedOption}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 7396c6eb546..587f7a42991 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,10 +2,10 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
-        groups="ctrl.aggOptions"
+        options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
-        groups="ctrl.alignOptions"
+        options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
-        groups="ctrl.alignmentPeriods"
+        options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 632f89b8248..9e5f07fd6a0 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -15,14 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-group-picker
+    <option-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      groups="ctrl.getMetricGroups()"
+      options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-group-picker>
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index cf22802ae76..64b811b47e6 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,8 +2,7 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { OptionPicker } from './components/OptionPicker';
-import { OptionGroupPicker } from './components/OptionGroupPicker';
+import { StackdriverPicker } from './components/StackdriverPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -64,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', OptionPicker, [
+    react2AngularDirective('optionPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',
@@ -72,14 +71,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
     ]);
-    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
-      'groups',
-      'onChange',
-      'selected',
-      'searchable',
-      'className',
-      'placeholder',
-    ]);
   }
 
   onDataReceived(dataList) {

From 566001aaf27cca19b6ef3c465d5ba60e2ff60756 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:26:42 +0100
Subject: [PATCH 081/352] remove old group heading

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ------------
 public/sass/_grafana.scss                          |  1 -
 public/sass/components/_group-heading.scss         |  6 ------
 3 files changed, 19 deletions(-)
 delete mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 delete mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
deleted file mode 100644
index 76012ed3e7f..00000000000
--- a/public/app/core/components/Picker/GroupHeading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-
-export const GroupHeading = props => {
-  return (
-    <label className="description-picker-option__button btn picker-option-group">
-      <components.GroupHeading {...props} />
-    </label>
-  );
-};
-
-export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 3acb76e960d..404a212241b 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -105,7 +105,6 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
-@import 'components/group-heading';
 @import 'components/value-mappings';
 @import 'components/popover-box';
 
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
deleted file mode 100644
index 8fc39c0dc2a..00000000000
--- a/public/sass/components/_group-heading.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.picker-option-group {
-  cursor: default;
-  color: $text-color-weak;
-  font-size: $font-size-sm;
-  font-weight: $lead-font-weight;
-}

From 843e9fb4dc6debb20b50e8a6f11917d841dd1bb4 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:28:35 +0100
Subject: [PATCH 082/352] remove linebreak

---
 public/app/plugins/datasource/stackdriver/datasource.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index 7b1afbae5ac..d1545655652 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -274,7 +274,6 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
-
           return m;
         });
       }

From 55f558cb7ccf1f807ab3ebc8ca8e403cd6ff93a1 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:31:11 +0100
Subject: [PATCH 083/352] rename directive

---
 .../stackdriver/partials/query.aggregation.html      | 12 ++++++------
 .../stackdriver/partials/query.filter.html           |  8 ++++----
 .../app/plugins/datasource/stackdriver/query_ctrl.ts |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 587f7a42991..88a85fa4d03 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,14 +2,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
         options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
-      ></option-group-picker>
+      ></stackdriver-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
         options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-picker>
+      ></stackdriver-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
         options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-picker>
+      ></stackdriver-picker>
     </div>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 9e5f07fd6a0..a31d34bece5 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,28 +1,28 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <option-picker
+    <stackdriver-picker
       onChange="ctrl.handleServiceChange"
       selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
-    ></option-picker>
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
       options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-picker>
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 64b811b47e6..a63aa243087 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -63,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', StackdriverPicker, [
+    react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',

From 3afe8a07639502087904aeaa37685de92b6a42cc Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:46:07 +0100
Subject: [PATCH 084/352] remove console log

---
 .../app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index d4478c6214c..0077c74a46e 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,7 +52,6 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,

From 971526015132fb9e6d2ccd12d396c4bde2fd240d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 13:03:29 +0100
Subject: [PATCH 085/352] align input widths

---
 .../datasource/stackdriver/partials/query.aggregation.html    | 2 +-
 .../plugins/datasource/stackdriver/partials/query.editor.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 88a85fa4d03..ecbbeddf133 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -23,7 +23,7 @@
 </div>
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
-    <label class="gf-form-label query-keyword width-12">Aligner</label>
+    <label class="gf-form-label query-keyword width-15">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
       <stackdriver-picker
         onChange="ctrl.handleAlignmentChange"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 8760aaf1bb3..1357e97f05f 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -5,7 +5,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label query-keyword width-9">Alias By</span>
-      <input type="text" class="gf-form-input width-30" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
+      <input type="text" class="gf-form-input width-24" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
         ng-model-options="{ debounce: 500 }" />
     </div>
     <div class="gf-form gf-form--grow">
@@ -15,7 +15,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9 query-keyword">Project</span>
-      <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.defaultProject' css-class="min-width-12" />
+      <input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
     </div>
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">

From e7670cacf48af16685aff5205202fd248c62cab8 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 14:30:46 +0100
Subject: [PATCH 086/352] fix condition that expands group if it has a selected
 child. also make it possible to pass expanded as a prop

---
 public/app/core/components/Select/OptionGroup.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Select/OptionGroup.tsx b/public/app/core/components/Select/OptionGroup.tsx
index a001f58c681..2e955579ed4 100644
--- a/public/app/core/components/Select/OptionGroup.tsx
+++ b/public/app/core/components/Select/OptionGroup.tsx
@@ -2,7 +2,11 @@ import React, { PureComponent } from 'react';
 import { GroupProps } from 'react-select/lib/components/Group';
 
 interface ExtendedGroupProps extends GroupProps<any> {
-  data: any;
+  data: {
+    label: string;
+    expanded: boolean;
+    options: any[];
+  };
 }
 
 interface State {
@@ -15,8 +19,10 @@ export default class OptionGroup extends PureComponent<ExtendedGroupProps, State
   };
 
   componentDidMount() {
-    if (this.props.selectProps) {
-      const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
+    if (this.props.data.expanded) {
+      this.setState({ expanded: true });
+    } else if (this.props.selectProps && this.props.selectProps.value) {
+      const { value } = this.props.selectProps.value;
 
       if (value && this.props.options.some(option => option.value === value)) {
         this.setState({ expanded: true });

From 3f05364eb9cfb30fae8f81e388de129b7fd335c0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 15:58:33 +0100
Subject: [PATCH 087/352] remove extra arrow div

---
 .../partials/query.aggregation.html           | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index ecbbeddf133..254c7b812cb 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -1,16 +1,16 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAggregationChange"
-        selected="ctrl.target.aggregation.crossSeriesReducer"
-        options="ctrl.aggOptions"
-        searchable="true"
-        placeholder="'Select Aggregation'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAggregationChange"
+      selected="ctrl.target.aggregation.crossSeriesReducer"
+      options="ctrl.aggOptions"
+      searchable="true"
+      placeholder="'Select Aggregation'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Aggregations'"
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
@@ -24,16 +24,16 @@
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAlignmentChange"
-        selected="ctrl.target.aggregation.perSeriesAligner"
-        options="ctrl.alignOptions"
-        searchable="true"
-        placeholder="'Select Alignment'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAlignmentChange"
+      selected="ctrl.target.aggregation.perSeriesAligner"
+      options="ctrl.alignOptions"
+      searchable="true"
+      placeholder="'Select Alignment'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Alignment Options'"
+    ></stackdriver-picker>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
@@ -41,16 +41,16 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAlignmentPeriodChange"
-        selected="ctrl.target.aggregation.alignmentPeriod"
-        options="ctrl.alignmentPeriods"
-        searchable="true"
-        placeholder="'Select Alignment'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAlignmentPeriodChange"
+      selected="ctrl.target.aggregation.alignmentPeriod"
+      options="ctrl.alignmentPeriods"
+      searchable="true"
+      placeholder="'Select Alignment'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Alignment Periods'"
+    ></stackdriver-picker>
   </div>
 
   <div class="gf-form gf-form--grow">

From 00a763511e3d4e01e7a9f5239f041ff4f225e768 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:01:12 +0100
Subject: [PATCH 088/352] move template variable logic to component

---
 .../components/StackdriverPicker.tsx          | 82 +++++++++++++++----
 .../stackdriver/partials/query.filter.html    |  4 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 50 +++--------
 .../datasource/stackdriver/query_ctrl.ts      |  2 +
 .../stackdriver/query_filter_ctrl.ts          | 39 ++-------
 5 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index b2c447feeff..b116d94f18d 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -9,28 +9,76 @@ export interface Props {
   selected: string;
   placeholder?: string;
   className?: string;
-  groups?: boolean;
+  groupName?: string;
+  templateVariables?: any[];
 }
 
-export class StackdriverPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
+interface State {
+  options: any[];
+}
 
-  extractOptions(options) {
-    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-  }
-
-  onChange = item => {
-    const extractedOptions = this.extractOptions(this.props.options);
-    const option = extractedOptions.find(option => option.value === item.value);
-    this.props.onChange(option.value);
+export class StackdriverPicker extends React.Component<Props, State> {
+  static defaultProps = {
+    templateVariables: [],
+    options: [],
+    groupName: 'Options',
   };
 
+  constructor(props) {
+    super(props);
+    this.state = { options: [] };
+  }
+
+  componentDidMount() {
+    this.setState({ options: this.buildOptions(this.props) });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
+      this.setState({ options: this.buildOptions(nextProps) });
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      !_.isEqual(nextProps.options, this.props.options) ||
+      !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
+    );
+  }
+
+  buildOptions({ templateVariables = [], groupName = '', options }) {
+    return templateVariables.length > 0
+      ? [
+          this.getTemplateVariablesGroup(),
+          {
+            label: groupName,
+            expanded: true,
+            options,
+          },
+        ]
+      : options;
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.props.templateVariables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
+
+  getSelectedOption() {
+    const { options } = this.state;
+    const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+    return allOptions.find(option => option.value === this.props.selected);
+  }
+
   render() {
-    const { options, selected, placeholder, className, searchable } = this.props;
-    const extractedOptions = this.extractOptions(options);
-    const selectedOption = extractedOptions.find(option => option.value === selected);
+    const { placeholder, className, searchable, onChange } = this.props;
+    const { options } = this.state;
+    const selectedOption = this.getSelectedOption();
 
     return (
       <Select
@@ -38,7 +86,7 @@ export class StackdriverPicker extends React.Component<Props, any> {
         isMulti={false}
         isClearable={false}
         backspaceRemovesValue={false}
-        onChange={this.onChange}
+        onChange={item => onChange(item.value)}
         options={options}
         autoFocus={false}
         isSearchable={searchable}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index a31d34bece5..a509aa44e62 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -18,7 +18,9 @@
     <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      options="ctrl.getMetricGroups()"
+      options="ctrl.getMetricsList()"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Metric Types'"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 0077c74a46e..c88b61725de 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -29,16 +29,10 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Alignment Periods',
-        options: alignmentPeriods.map(ap => ({
-          ...ap,
-          label: ap.text,
-        })),
-      },
-    ];
+    this.alignmentPeriods = alignmentPeriods.map(ap => ({
+      ...ap,
+      label: ap.text,
+    }));
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -52,42 +46,28 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    this.alignOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Alignment Options',
-        options: alignments,
-      },
-    ];
-    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
+    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
     }
   }
 
   setAggOptions() {
-    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
+      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
-    this.aggOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Aggregations',
-        options: aggregations,
-      },
-    ];
   }
 
   handleAlignmentChange(value) {
@@ -120,16 +100,6 @@ export class StackdriverAggregationCtrl {
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index a63aa243087..6256206d07e 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -70,6 +70,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'searchable',
       'className',
       'placeholder',
+      'groupName',
+      ['templateVariables', { watchDepth: 'reference' }],
     ]);
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index e617dba5945..a2f347e377a 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -32,7 +32,6 @@ export class StackdriverFilterCtrl {
 
   metricDescriptors: any[];
   metrics: any[];
-  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -46,7 +45,6 @@ export class StackdriverFilterCtrl {
     this.target = $scope.target;
     this.metricDescriptors = [];
     this.metrics = [];
-    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -103,7 +101,6 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
-      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -119,26 +116,6 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
-  getMetricGroups() {
-    return [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Metrics',
-        options: this.getMetricsList(),
-      },
-    ];
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-
   getMetricsList() {
     const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
       service: m.service,
@@ -183,7 +160,6 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = service;
     this.metrics = this.getMetricsList();
-    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.some(m => m.value === this.target.metricType)) {
@@ -194,13 +170,14 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.target.metricType)
-    );
-    this.target.unit = unit;
-    this.target.valueType = valueType;
-    this.target.metricKind = metricKind;
-    this.$rootScope.$broadcast('metricTypeChanged');
+    const metric = this.metricDescriptors.find(m => m.type === this.templateSrv.replace(this.target.metricType));
+    if (metric) {
+      const { valueType, metricKind, unit } = metric;
+      this.target.unit = unit;
+      this.target.valueType = valueType;
+      this.target.metricKind = metricKind;
+      this.$rootScope.$broadcast('metricTypeChanged');
+    }
   }
 
   async createLabelKeyElements() {

From 01fc9505115dd58c0c94747c91eaafef796b4d34 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:09:32 +0100
Subject: [PATCH 089/352] cleanup

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index b116d94f18d..ab903c453cb 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -33,14 +33,15 @@ export class StackdriverPicker extends React.Component<Props, State> {
     this.setState({ options: this.buildOptions(this.props) });
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
       this.setState({ options: this.buildOptions(nextProps) });
     }
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: Props) {
     return (
+      nextProps.selected !== this.props.selected ||
       !_.isEqual(nextProps.options, this.props.options) ||
       !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
     );

From c70e90cb48bee66d9f3bc3b688c8ada49f09d290 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:19:49 +0100
Subject: [PATCH 090/352] rollback test state to before template variables were
 added

---
 .../specs/query_aggregation_ctrl.test.ts      | 57 ++-----------------
 1 file changed, 6 insertions(+), 51 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 6e83824d504..81011f5dfe0 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,68 +17,27 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
-              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(2);
-          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(aggOptionsGroup.options.length).toBe(11);
-          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(11);
+          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(alignOptionGroup.options.length).toBe(11);
-          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.alignOptions.length).toBe(9);
+          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
-      describe('and result is double and delta and no group by is used', () => {
-        beforeEach(async () => {
-          ctrl = new StackdriverAggregationCtrl(
-            {
-              $on: () => {},
-              target: {
-                valueType: 'DOUBLE',
-                metricKind: 'DELTA',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
-              },
-            },
-            {
-              replace: s => s,
-              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
-            }
-          );
-        });
-
-        it('should populate all alignment options except four', () => {
-          ctrl.setAlignOptions();
-          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(alignOptionGroup.options.length).toBe(9);
-          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
-            expect['not'].arrayContaining([
-              'ALIGN_NEXT_OLDER',
-              'ALIGN_INTERPOLATE',
-              'ALIGN_COUNT_TRUE',
-              'ALIGN_COUNT_FALSE',
-              'ALIGN_FRACTION_TRUE',
-            ])
-          );
-        });
-      });
-
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -92,18 +51,14 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
-              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-          expect(ctrl.aggOptions.length).toBe(2);
-          expect(templateVariableGroup.options.length).toBe(1);
-          expect(aggOptionsGroup.options.length).toBe(10);
-          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(10);
+          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From 53ac3c8fd2c3041e478512f1817829c2c6920e31 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:27:24 +0100
Subject: [PATCH 091/352] remove debug logging

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index a2f347e377a..4012cb733d2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -146,11 +146,6 @@ export class StackdriverFilterCtrl {
           resolve();
         }
       } catch (error) {
-        if (error.data && error.data.message) {
-          console.log(error.data.message);
-        } else {
-          console.log(error);
-        }
         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
         resolve();
       }

From 5f8ccfb9a098a5dff8ff02adf711d973d2d3568d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:41:47 +0100
Subject: [PATCH 092/352] add max width to group header description

---
 public/sass/components/_form_select_box.scss | 28 +++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index a83ca95d038..1a2b9be524c 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -172,18 +172,22 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group__header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  justify-items: center;
-  cursor: pointer;
-  padding: 7px 10px;
-  width: 100%;
-  border-bottom: 1px solid $hr-border-color;
-  text-transform: capitalize;
+.gf-form-select-box__option-group {
+  max-width: 600px;
 
-  .fa {
-    padding-right: 2px;
+  .gf-form-select-box__option-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    justify-items: center;
+    cursor: pointer;
+    padding: 7px 10px;
+    width: 100%;
+    border-bottom: 1px solid $hr-border-color;
+    text-transform: capitalize;
+
+    .fa {
+      padding-right: 2px;
+    }
   }
 }

From e4d18a1933dac2a894c23ead22898c6b22fe6d51 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:56:16 +0100
Subject: [PATCH 093/352] improve component performance

---
 .../stackdriver/components/StackdriverPicker.tsx         | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index ab903c453cb..30c17e1f983 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -40,11 +40,8 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   shouldComponentUpdate(nextProps: Props) {
-    return (
-      nextProps.selected !== this.props.selected ||
-      !_.isEqual(nextProps.options, this.props.options) ||
-      !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
-    );
+    const nextOptions = this.buildOptions(nextProps);
+    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
   }
 
   buildOptions({ templateVariables = [], groupName = '', options }) {
@@ -89,9 +86,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
         backspaceRemovesValue={false}
         onChange={item => onChange(item.value)}
         options={options}
-        autoFocus={false}
         isSearchable={searchable}
-        openMenuOnFocus={true}
         maxMenuHeight={500}
         placeholder={placeholder}
         noOptionsMessage={() => 'No options found'}

From ed673d35f56d9e0edc2e74ee79b7d252cb170a12 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:14:55 +0100
Subject: [PATCH 094/352] rename searchable prop

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx | 6 +++---
 .../datasource/stackdriver/partials/query.aggregation.html  | 6 +++---
 .../datasource/stackdriver/partials/query.filter.html       | 4 ++--
 public/app/plugins/datasource/stackdriver/query_ctrl.ts     | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 30c17e1f983..349c4c33b58 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -5,7 +5,7 @@ import Select from 'app/core/components/Select/Select';
 export interface Props {
   onChange: (value: string) => void;
   options: any[];
-  searchable: boolean;
+  isSearchable: boolean;
   selected: string;
   placeholder?: string;
   className?: string;
@@ -74,7 +74,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   render() {
-    const { placeholder, className, searchable, onChange } = this.props;
+    const { placeholder, className, isSearchable, onChange } = this.props;
     const { options } = this.state;
     const selectedOption = this.getSelectedOption();
 
@@ -86,7 +86,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
         backspaceRemovesValue={false}
         onChange={item => onChange(item.value)}
         options={options}
-        isSearchable={searchable}
+        isSearchable={isSearchable}
         maxMenuHeight={500}
         placeholder={placeholder}
         noOptionsMessage={() => 'No options found'}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 254c7b812cb..3ffcb1d7bbf 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -5,7 +5,7 @@
       onChange="ctrl.handleAggregationChange"
       selected="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Aggregation'"
       className="'width-15'"
       template-variables="ctrl.templateSrv.variables"
@@ -28,7 +28,7 @@
       onChange="ctrl.handleAlignmentChange"
       selected="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       template-variables="ctrl.templateSrv.variables"
@@ -45,7 +45,7 @@
       onChange="ctrl.handleAlignmentPeriodChange"
       selected="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       template-variables="ctrl.templateSrv.variables"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index a509aa44e62..4b87e4d8d44 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -5,7 +5,7 @@
       onChange="ctrl.handleServiceChange"
       selected="ctrl.target.service"
       options="ctrl.services"
-      searchable="false"
+      is-searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
     ></stackdriver-picker>
@@ -21,7 +21,7 @@
       options="ctrl.getMetricsList()"
       template-variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
     ></stackdriver-picker>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 6256206d07e..556df8e1419 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -67,7 +67,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'options',
       'onChange',
       'selected',
-      'searchable',
+      'isSearchable',
       'className',
       'placeholder',
       'groupName',

From cf50cf167ccb6e8235b5b784bd1fd6d61e155d29 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:19:43 +0100
Subject: [PATCH 095/352] rename selected prop

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx | 6 +++---
 .../datasource/stackdriver/partials/query.aggregation.html  | 6 +++---
 .../datasource/stackdriver/partials/query.filter.html       | 4 ++--
 public/app/plugins/datasource/stackdriver/query_ctrl.ts     | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 349c4c33b58..7f7e6f901fa 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -6,7 +6,7 @@ export interface Props {
   onChange: (value: string) => void;
   options: any[];
   isSearchable: boolean;
-  selected: string;
+  value: string;
   placeholder?: string;
   className?: string;
   groupName?: string;
@@ -41,7 +41,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
 
   shouldComponentUpdate(nextProps: Props) {
     const nextOptions = this.buildOptions(nextProps);
-    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
+    return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
 
   buildOptions({ templateVariables = [], groupName = '', options }) {
@@ -70,7 +70,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
   getSelectedOption() {
     const { options } = this.state;
     const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-    return allOptions.find(option => option.value === this.props.selected);
+    return allOptions.find(option => option.value === this.props.value);
   }
 
   render() {
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 3ffcb1d7bbf..8d053256a2d 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -3,7 +3,7 @@
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <stackdriver-picker
       onChange="ctrl.handleAggregationChange"
-      selected="ctrl.target.aggregation.crossSeriesReducer"
+      value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
       is-searchable="true"
       placeholder="'Select Aggregation'"
@@ -26,7 +26,7 @@
     <label class="gf-form-label query-keyword width-15">Aligner</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentChange"
-      selected="ctrl.target.aggregation.perSeriesAligner"
+      value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
       is-searchable="true"
       placeholder="'Select Alignment'"
@@ -43,7 +43,7 @@
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentPeriodChange"
-      selected="ctrl.target.aggregation.alignmentPeriod"
+      value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
       is-searchable="true"
       placeholder="'Select Alignment'"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 4b87e4d8d44..7ae42e73596 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -3,7 +3,7 @@
     <span class="gf-form-label width-9 query-keyword">Service</span>
     <stackdriver-picker
       onChange="ctrl.handleServiceChange"
-      selected="ctrl.target.service"
+      value="ctrl.target.service"
       options="ctrl.services"
       is-searchable="false"
       placeholder="'Select Services'"
@@ -17,7 +17,7 @@
     <span class="gf-form-label width-9 query-keyword">Metric</span>
     <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.target.metricType"
+      value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
       template-variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 556df8e1419..426381eb738 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -66,7 +66,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
-      'selected',
+      'value',
       'isSearchable',
       'className',
       'placeholder',

From 70071e5dad10eff6273c433e90639624fd905966 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:23:05 +0100
Subject: [PATCH 096/352] rename template variables prop

---
 .../stackdriver/components/StackdriverPicker.tsx | 16 ++++++++--------
 .../stackdriver/partials/query.aggregation.html  |  6 +++---
 .../stackdriver/partials/query.filter.html       |  2 +-
 .../plugins/datasource/stackdriver/query_ctrl.ts |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 7f7e6f901fa..1cd9dcb1f53 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -10,7 +10,7 @@ export interface Props {
   placeholder?: string;
   className?: string;
   groupName?: string;
-  templateVariables?: any[];
+  variables?: any[];
 }
 
 interface State {
@@ -19,7 +19,7 @@ interface State {
 
 export class StackdriverPicker extends React.Component<Props, State> {
   static defaultProps = {
-    templateVariables: [],
+    variables: [],
     options: [],
     groupName: 'Options',
   };
@@ -34,7 +34,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
+    if (nextProps.options.length > 0 || nextProps.variables.length) {
       this.setState({ options: this.buildOptions(nextProps) });
     }
   }
@@ -44,10 +44,10 @@ export class StackdriverPicker extends React.Component<Props, State> {
     return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
 
-  buildOptions({ templateVariables = [], groupName = '', options }) {
-    return templateVariables.length > 0
+  buildOptions({ variables = [], groupName = '', options }) {
+    return variables.length > 0
       ? [
-          this.getTemplateVariablesGroup(),
+          this.getVariablesGroup(),
           {
             label: groupName,
             expanded: true,
@@ -57,10 +57,10 @@ export class StackdriverPicker extends React.Component<Props, State> {
       : options;
   }
 
-  getTemplateVariablesGroup() {
+  getVariablesGroup() {
     return {
       label: 'Template Variables',
-      options: this.props.templateVariables.map(v => ({
+      options: this.props.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
       })),
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 8d053256a2d..122f14a9cb6 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -8,7 +8,7 @@
       is-searchable="true"
       placeholder="'Select Aggregation'"
       className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Aggregations'"
     ></stackdriver-picker>
   </div>
@@ -31,7 +31,7 @@
       is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Alignment Options'"
     ></stackdriver-picker>
 
@@ -48,7 +48,7 @@
       is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Alignment Periods'"
     ></stackdriver-picker>
   </div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 7ae42e73596..f93a7a6eb16 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -19,7 +19,7 @@
       onChange="ctrl.handleMetricTypeChange"
       value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
       is-searchable="true"
       placeholder="'Select Metric'"
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 426381eb738..2cf4a295004 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -71,7 +71,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
       'groupName',
-      ['templateVariables', { watchDepth: 'reference' }],
+      ['variables', { watchDepth: 'reference' }],
     ]);
   }
 

From 4662335f80e8234fd3fc7e000d30d41e45cdbc35 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:34:13 +0100
Subject: [PATCH 097/352] add template variable type

---
 .../components/StackdriverPicker.tsx          |  4 +++-
 public/app/types/templates.ts                 | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 public/app/types/templates.ts

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 1cd9dcb1f53..49862bb2023 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
+
 import Select from 'app/core/components/Select/Select';
+import { Variable } from 'app/types/templates';
 
 export interface Props {
   onChange: (value: string) => void;
@@ -10,7 +12,7 @@ export interface Props {
   placeholder?: string;
   className?: string;
   groupName?: string;
-  variables?: any[];
+  variables?: Variable[];
 }
 
 interface State {
diff --git a/public/app/types/templates.ts b/public/app/types/templates.ts
new file mode 100644
index 00000000000..98f94fe4251
--- /dev/null
+++ b/public/app/types/templates.ts
@@ -0,0 +1,19 @@
+export interface Variable {
+  datasource: any;
+  query: any;
+  regex: any;
+  sort: any;
+  options: any;
+  current: any;
+  refresh: number;
+  hide: number;
+  name: string;
+  multi: boolean;
+  includeAll: boolean;
+  useTags: boolean;
+  tagsQuery: string;
+  tagValuesQuery: string;
+  tags: any[];
+  skipUrlSync: boolean;
+  definition: string;
+}

From e180cf54cec94dd0868e5c9866dacae2b01054bb Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:44:38 +0100
Subject: [PATCH 098/352] move component to components dir. also move directive
 registration out from datasource

---
 public/app/core/angular_wrappers.ts                  | 11 +++++++++++
 .../components/Select/MetricSelect.tsx}              |  4 ++--
 .../stackdriver/partials/query.aggregation.html      | 12 ++++++------
 .../stackdriver/partials/query.filter.html           |  8 ++++----
 .../app/plugins/datasource/stackdriver/query_ctrl.ts | 12 ------------
 5 files changed, 23 insertions(+), 24 deletions(-)
 rename public/app/{plugins/datasource/stackdriver/components/StackdriverPicker.tsx => core/components/Select/MetricSelect.tsx} (94%)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 5609c058a27..004d8eb12c5 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -5,6 +5,7 @@ import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
+import { MetricSelect } from './components/Select/MetricSelect';
 import AppNotificationList from './components/AppNotifications/AppNotificationList';
 
 export function registerAngularDirectives() {
@@ -19,4 +20,14 @@ export function registerAngularDirectives() {
     ['onChange', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('metricSelect', MetricSelect, [
+    'options',
+    'onChange',
+    'value',
+    'isSearchable',
+    'className',
+    'placeholder',
+    'groupName',
+    ['variables', { watchDepth: 'reference' }],
+  ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/core/components/Select/MetricSelect.tsx
similarity index 94%
rename from public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
rename to public/app/core/components/Select/MetricSelect.tsx
index 49862bb2023..03d700f1ef4 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
-import Select from 'app/core/components/Select/Select';
+import Select from './Select';
 import { Variable } from 'app/types/templates';
 
 export interface Props {
@@ -19,7 +19,7 @@ interface State {
   options: any[];
 }
 
-export class StackdriverPicker extends React.Component<Props, State> {
+export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 122f14a9cb6..2dc9035c7fe 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -1,7 +1,7 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAggregationChange"
       value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
@@ -10,7 +10,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Aggregations'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
@@ -24,7 +24,7 @@
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAlignmentChange"
       value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
@@ -33,7 +33,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Alignment Options'"
-    ></stackdriver-picker>
+    ></metric-select>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
@@ -41,7 +41,7 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAlignmentPeriodChange"
       value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
@@ -50,7 +50,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Alignment Periods'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
 
   <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index f93a7a6eb16..4c90f4fe608 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,21 +1,21 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleServiceChange"
       value="ctrl.target.service"
       options="ctrl.services"
       is-searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleMetricTypeChange"
       value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
@@ -24,7 +24,7 @@
       is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 2cf4a295004..9dfa7101ad4 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,8 +2,6 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { StackdriverPicker } from './components/StackdriverPicker';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -63,16 +61,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('stackdriverPicker', StackdriverPicker, [
-      'options',
-      'onChange',
-      'value',
-      'isSearchable',
-      'className',
-      'placeholder',
-      'groupName',
-      ['variables', { watchDepth: 'reference' }],
-    ]);
   }
 
   onDataReceived(dataList) {

From d741295795bec2337b02baba75b96786d02aa5f5 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:10:19 +0100
Subject: [PATCH 099/352] remove group name from select component. let the
 parent set group name instead

---
 public/app/core/angular_wrappers.ts           |  1 -
 .../core/components/Select/MetricSelect.tsx   | 15 ++++---
 .../stackdriver/query_aggregation_ctrl.ts     | 41 ++++++++++++++-----
 .../stackdriver/query_filter_ctrl.ts          |  9 +++-
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 004d8eb12c5..7a2703b76e7 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -27,7 +27,6 @@ export function registerAngularDirectives() {
     'isSearchable',
     'className',
     'placeholder',
-    'groupName',
     ['variables', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 03d700f1ef4..8c23bf4ded6 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -11,7 +11,6 @@ export interface Props {
   value: string;
   placeholder?: string;
   className?: string;
-  groupName?: string;
   variables?: Variable[];
 }
 
@@ -23,7 +22,6 @@ export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
-    groupName: 'Options',
   };
 
   constructor(props) {
@@ -46,15 +44,16 @@ export class MetricSelect extends React.Component<Props, State> {
     return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
 
-  buildOptions({ variables = [], groupName = '', options }) {
+  buildOptions({ variables = [], options }) {
     return variables.length > 0
       ? [
           this.getVariablesGroup(),
-          {
-            label: groupName,
-            expanded: true,
-            options,
-          },
+          // {
+          //   label: groupName,
+          //   expanded: true,
+          //   options,
+          // },
+          ...options,
         ]
       : options;
   }
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index c88b61725de..b43ecf56d50 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -29,10 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = alignmentPeriods.map(ap => ({
-      ...ap,
-      label: ap.text,
-    }));
+    this.alignmentPeriods = [
+      {
+        label: 'Alignment Periods',
+        expanded: true,
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -46,28 +52,43 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    const alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    if (!alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignOptions.length > 0 ? alignOptions[0].value : '';
     }
+    this.alignOptions = [
+      {
+        label: 'Alignment Options',
+        expanded: true,
+        options: alignOptions,
+      },
+    ];
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    let aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggOptions = aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+
+    this.aggOptions = [
+      {
+        label: 'Aggregation Options',
+        expanded: true,
+        options: aggOptions,
+      },
+    ];
   }
 
   handleAlignmentChange(value) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 4012cb733d2..c3f00134b11 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -130,7 +130,14 @@ export class StackdriverFilterCtrl {
     ) {
       this.target.metricType = metricsByService[0].value;
     }
-    return metricsByService;
+
+    return [
+      {
+        label: 'Metrics',
+        expanded: true,
+        options: metricsByService,
+      },
+    ];
   }
 
   async getLabels() {

From 681f1f31e12179e6f6b79e73421a99668c6aa48f Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:15:22 +0100
Subject: [PATCH 100/352] make variable type more slim

---
 public/app/types/templates.ts | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/public/app/types/templates.ts b/public/app/types/templates.ts
index 98f94fe4251..897044a93fe 100644
--- a/public/app/types/templates.ts
+++ b/public/app/types/templates.ts
@@ -1,19 +1,5 @@
 export interface Variable {
-  datasource: any;
-  query: any;
-  regex: any;
-  sort: any;
-  options: any;
-  current: any;
-  refresh: number;
-  hide: number;
   name: string;
-  multi: boolean;
-  includeAll: boolean;
-  useTags: boolean;
-  tagsQuery: string;
-  tagValuesQuery: string;
-  tags: any[];
-  skipUrlSync: boolean;
-  definition: string;
+  type: string;
+  current: any;
 }

From b22bf9359fbaadb9b0320fb941b5e216c58d9068 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:18:15 +0100
Subject: [PATCH 101/352] set issearchable default value to true

---
 public/app/core/components/Select/MetricSelect.tsx             | 1 +
 .../datasource/stackdriver/partials/query.aggregation.html     | 3 ---
 .../plugins/datasource/stackdriver/partials/query.filter.html  | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 8c23bf4ded6..0fb1194260c 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -22,6 +22,7 @@ export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
+    isSearchable: true,
   };
 
   constructor(props) {
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 2dc9035c7fe..2c14c3c8393 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -5,7 +5,6 @@
       onChange="ctrl.handleAggregationChange"
       value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
-      is-searchable="true"
       placeholder="'Select Aggregation'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
@@ -28,7 +27,6 @@
       onChange="ctrl.handleAlignmentChange"
       value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
-      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
@@ -45,7 +43,6 @@
       onChange="ctrl.handleAlignmentPeriodChange"
       value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
-      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 4c90f4fe608..95b2ef42726 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -21,7 +21,6 @@
       options="ctrl.getMetricsList()"
       variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
-      is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
     ></metric-select>

From 4dbd113e2045d606191368ed79b549d9e20d4155 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:21:30 +0100
Subject: [PATCH 102/352] use correct type for select option

---
 .../app/core/components/Select/MetricSelect.tsx   | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 0fb1194260c..9cd1c3e03c9 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -3,10 +3,11 @@ import _ from 'lodash';
 
 import Select from './Select';
 import { Variable } from 'app/types/templates';
+import { SelectOptionItem } from './Select';
 
 export interface Props {
   onChange: (value: string) => void;
-  options: any[];
+  options: SelectOptionItem[];
   isSearchable: boolean;
   value: string;
   placeholder?: string;
@@ -46,17 +47,7 @@ export class MetricSelect extends React.Component<Props, State> {
   }
 
   buildOptions({ variables = [], options }) {
-    return variables.length > 0
-      ? [
-          this.getVariablesGroup(),
-          // {
-          //   label: groupName,
-          //   expanded: true,
-          //   options,
-          // },
-          ...options,
-        ]
-      : options;
+    return variables.length > 0 ? [this.getVariablesGroup(), ...options] : options;
   }
 
   getVariablesGroup() {

From b7503407e69e8caa48fd228d8a67f6c84715a198 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:41:25 +0100
Subject: [PATCH 103/352] fix broken tests

---
 .../specs/query_aggregation_ctrl.test.ts      | 51 ++++++++++++++++---
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 81011f5dfe0..fcf55cb5ac1 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,27 +17,64 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(11);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [aggOptionsGroup] = ctrl.aggOptions;
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          expect(ctrl.alignOptions.length).toBe(9);
-          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
+          const [aggOptionsGroup] = ctrl.aggOptions;
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
+      describe('and result is double and delta and no group by is used', () => {
+        beforeEach(async () => {
+          ctrl = new StackdriverAggregationCtrl(
+            {
+              $on: () => {},
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'DELTA',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
+            }
+          );
+        });
+
+        it('should populate all alignment options except four', () => {
+          ctrl.setAlignOptions();
+          const [alignOptionsGroup] = ctrl.alignOptions;
+          expect(alignOptionsGroup.options.length).toBe(9);
+          expect(alignOptionsGroup.options.map(o => o.value)).toEqual(
+            expect['not'].arrayContaining([
+              'ALIGN_NEXT_OLDER',
+              'ALIGN_INTERPOLATE',
+              'ALIGN_COUNT_TRUE',
+              'ALIGN_COUNT_FALSE',
+              'ALIGN_FRACTION_TRUE',
+            ])
+          );
+        });
+      });
+
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -51,14 +88,16 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(10);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [aggOptionsGroup] = ctrl.aggOptions;
+          expect(aggOptionsGroup.options.length).toBe(10);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From e7d9bbf78138e91bbd940771f242e6659dca5285 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 2 Jan 2019 15:22:22 +0100
Subject: [PATCH 104/352] state history tab

---
 .../features/dashboard/dashgrid/AlertTab.tsx  |  6 +-
 .../dashboard/dashgrid/PanelEditor.tsx        |  2 +-
 .../dashboard/dashgrid/StateHistory.tsx       | 85 +++++++++++++++++++
 3 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 public/app/features/dashboard/dashgrid/StateHistory.tsx

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index 5ccfa791328..127e6cd0239 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -2,12 +2,15 @@ import React, { PureComponent } from 'react';
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import StateHistory from './StateHistory';
 import appEvents from 'app/core/app_events';
 import { PanelModel } from '../panel_model';
 import 'app/features/alerting/AlertTabCtrl';
+import { DashboardModel } from '../dashboard_model';
 
 interface Props {
   angularPanel?: AngularComponent;
+  dashboard: DashboardModel;
   panel: PanelModel;
 }
 
@@ -70,7 +73,7 @@ export class AlertTab extends PureComponent<Props> {
     return {
       title: 'State history',
       render: () => {
-        return <div>State history</div>;
+        return <StateHistory dashboard={this.props.dashboard} panelId={this.props.panel.id} />;
       },
       buttonType: ToolbarButtonType.View,
     };
@@ -119,7 +122,6 @@ export class AlertTab extends PureComponent<Props> {
       buttonTitle: 'Create Alert',
     };
 
-    //TODO move add button react from angular and add condition to render angular view
     return (
       <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
         <>
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index b3d94f43487..fbc683c2eb3 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -54,7 +54,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
       case 'queries':
         return <QueriesTab panel={panel} dashboard={dashboard} />;
       case 'alert':
-        return <AlertTab angularPanel={angularPanel} panel={panel} />;
+        return <AlertTab angularPanel={angularPanel} dashboard={dashboard} panel={panel} />;
       case 'visualization':
         return (
           <VisualizationTab
diff --git a/public/app/features/dashboard/dashgrid/StateHistory.tsx b/public/app/features/dashboard/dashgrid/StateHistory.tsx
new file mode 100644
index 00000000000..d40afdd375a
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/StateHistory.tsx
@@ -0,0 +1,85 @@
+import React, { PureComponent } from 'react';
+import alertDef from '../../alerting/state/alertDef';
+import { getBackendSrv } from '../../../core/services/backend_srv';
+import { DashboardModel } from '../dashboard_model';
+
+interface Props {
+  dashboard: DashboardModel;
+  panelId: number;
+}
+
+interface State {
+  stateHistoryItems: any[];
+}
+
+class StateHistory extends PureComponent<Props, State> {
+  state = {
+    stateHistoryItems: [],
+  };
+
+  componentDidMount(): void {
+    const { dashboard, panelId } = this.props;
+
+    getBackendSrv()
+      .get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`)
+      .then(res => {
+        console.log(res);
+        const items = [];
+        res.map(item => {
+          items.push({
+            stateModel: alertDef.getStateDisplayModel(item.newState),
+            time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'),
+            info: alertDef.getAlertAnnotationInfo(item),
+          });
+        });
+
+        this.setState({
+          stateHistoryItems: items,
+        });
+      });
+  }
+
+  render() {
+    const { stateHistoryItems } = this.state;
+
+    return (
+      <div>
+        <div style={{ margin: '0 auto', maxWidth: '720px' }}>
+          <div style={{ marginBottom: '15px' }}>
+            <span className="muted">Last 50 state changes</span>
+            <button className="btn btn-mini btn-danger pull-right">
+              <i className="fa fa-trash" /> {` Clear history`}
+            </button>
+          </div>
+          <ol className="alert-rule-list">
+            {stateHistoryItems ? (
+              stateHistoryItems.map((item, index) => {
+                return (
+                  <li className="alert-rule-item" key={`${item.time}-${index}`}>
+                    <div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
+                      <i className={item.stateModel.iconClass} />
+                    </div>
+                    <div className="alert-rule-item__body">
+                      <div className="alert-rule-item__header">
+                        <p className="alert-rule-item__name">{item.alertName}</p>
+                        <div className="alert-rule-item__text">
+                          <span className={`${item.stateModel.stateClass}`}>{item.stateModel.text}</span>
+                        </div>
+                      </div>
+                      {item.info}
+                    </div>
+                    <div className="alert-rule-item__time">{item.time}</div>
+                  </li>
+                );
+              })
+            ) : (
+              <i>No state changes recorded</i>
+            )}
+          </ol>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StateHistory;

From 1ab9fc871c847adc5ffc924796ed5af476f1ff67 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 15:35:36 +0100
Subject: [PATCH 105/352] cleanup. remove comments, not used files etc

---
 .../stackdriver/angular_wrappers.ts           |  1 +
 .../stackdriver/annotations_query_ctrl.ts     | 11 ++-
 .../stackdriver/components/Aggregations.tsx   |  2 +-
 .../components/AnnotationQueryEditor.tsx      |  1 -
 .../stackdriver/components/Metrics.tsx        |  3 +-
 .../stackdriver/components/Segment.tsx        | 44 ---------
 .../components/StackdriverPicker.tsx          | 97 -------------------
 .../partials/annotations.editor.html          |  2 +-
 .../stackdriver/partials/query.filter.html    | 30 ------
 .../datasource/stackdriver/query_ctrl.ts      | 14 ++-
 10 files changed, 25 insertions(+), 180 deletions(-)
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/Segment.tsx
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
index 513d7d3f623..ff469b96535 100644
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
@@ -2,6 +2,7 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { QueryEditor } from './components/QueryEditor';
 import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
 
+//This should be removed when the plugin is fully reactified
 export function registerAngularDirectives() {
   react2AngularDirective('queryEditor', QueryEditor, [
     'target',
diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
index 1975c75d5a6..0f8a32d254c 100644
--- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import './query_filter_ctrl';
-import { registerAngularDirectives } from './angular_wrappers';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
 
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
@@ -28,8 +29,14 @@ export class StackdriverAnnotationsQueryCtrl {
     this.annotation.target = this.annotation.target || {};
     this.annotation.target.refId = 'annotationQuery';
     _.defaultsDeep(this.annotation.target, this.defaults);
-    registerAngularDirectives();
     this.handleQueryChange = this.handleQueryChange.bind(this);
+
+    react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+      'target',
+      'onQueryChange',
+      'onExecuteQuery',
+      ['datasource', { watchDepth: 'reference' }],
+    ]);
   }
 
   handleQueryChange(target) {
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 7d963582552..d752d59261f 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { getAggregationOptionsByMetric } from '../functions';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
+import { getAggregationOptionsByMetric } from '../functions';
 
 export interface Props {
   onChange: (metricDescriptor) => void;
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index 057fd5fe35b..48add7d584d 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -109,7 +109,6 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         </div>
 
         <AnnotationsHelp />
-        {/* <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} /> */}
       </React.Fragment>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 7d93e796384..4ea09245408 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
+import appEvents from 'app/core/app_events';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 
 export interface Props {
@@ -54,7 +55,7 @@ export class Metrics extends React.Component<Props, State> {
         }
         resolve(this.state.defaultProject);
       } catch (error) {
-        // appEvents.emit('ds-request-error', error);
+        appEvents.emit('ds-request-error', error);
         reject();
       }
     });
diff --git a/public/app/plugins/datasource/stackdriver/components/Segment.tsx b/public/app/plugins/datasource/stackdriver/components/Segment.tsx
deleted file mode 100644
index e330b1ab312..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/Segment.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { PureComponent } from 'react';
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import 'app/core/directives/metric_segment';
-
-interface QueryEditorProps {
-  segment: any;
-  getOptions: () => Promise<any[]>;
-  onChange: (segment, index) => void;
-  key: number;
-}
-
-export default class Segment extends PureComponent<QueryEditorProps, any> {
-  element: any;
-  component: AngularComponent;
-
-  async componentDidMount() {
-    if (!this.element) {
-      return;
-    }
-
-    const { segment, getOptions, onChange } = this.props;
-    const loader = getAngularLoader();
-    const template = '<metric-segment> </metric-segment>';
-
-    const scopeProps = {
-      segment,
-      onChange,
-      getOptions,
-      debounce: false,
-    };
-
-    this.component = loader.load(this.element, scopeProps, template);
-  }
-
-  componentWillUnmount() {
-    if (this.component) {
-      this.component.destroy();
-    }
-  }
-
-  render() {
-    return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
deleted file mode 100644
index 30c17e1f983..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import Select from 'app/core/components/Select/Select';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groupName?: string;
-  templateVariables?: any[];
-}
-
-interface State {
-  options: any[];
-}
-
-export class StackdriverPicker extends React.Component<Props, State> {
-  static defaultProps = {
-    templateVariables: [],
-    options: [],
-    groupName: 'Options',
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = { options: [] };
-  }
-
-  componentDidMount() {
-    this.setState({ options: this.buildOptions(this.props) });
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
-      this.setState({ options: this.buildOptions(nextProps) });
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props) {
-    const nextOptions = this.buildOptions(nextProps);
-    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
-  }
-
-  buildOptions({ templateVariables = [], groupName = '', options }) {
-    return templateVariables.length > 0
-      ? [
-          this.getTemplateVariablesGroup(),
-          {
-            label: groupName,
-            expanded: true,
-            options,
-          },
-        ]
-      : options;
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.props.templateVariables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-
-  getSelectedOption() {
-    const { options } = this.state;
-    const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-    return allOptions.find(option => option.value === this.props.selected);
-  }
-
-  render() {
-    const { placeholder, className, searchable, onChange } = this.props;
-    const { options } = this.state;
-    const selectedOption = this.getSelectedOption();
-
-    return (
-      <Select
-        className={className}
-        isMulti={false}
-        isClearable={false}
-        backspaceRemovesValue={false}
-        onChange={item => onChange(item.value)}
-        options={options}
-        isSearchable={searchable}
-        maxMenuHeight={500}
-        placeholder={placeholder}
-        noOptionsMessage={() => 'No options found'}
-        value={selectedOption}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
index 5495ed234e5..55e6a4fa9fb 100644
--- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
@@ -1,5 +1,5 @@
 <annotation-query-editor
   target="ctrl.annotation.target"
-  datasource="ctrl.datasource"
   on-query-change="(ctrl.handleQueryChange)"
+  datasource="ctrl.datasource"
 ></annotation-query-editor>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 13335f9fc66..9c491ed2d84 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,33 +1,3 @@
-<!--
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-9 query-keyword">Service</span>
-      <stackdriver-picker
-        onChange="ctrl.handleServiceChange"
-        selected="ctrl.target.service"
-        options="ctrl.services"
-        searchable="false"
-        placeholder="'Select Services'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
-    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-  </div>
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-9 query-keyword">Metric</span>
-      <stackdriver-picker
-        onChange="ctrl.handleMetricTypeChange"
-        selected="ctrl.target.metricType"
-        options="ctrl.getMetricsList()"
-        template-variables="ctrl.templateSrv.variables"
-        group-name="'Metric Types'"
-        searchable="true"
-        placeholder="'Select Metric'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
--->
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label query-keyword width-9">Filter</span>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 7c4560be8a6..63c05650d1a 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -1,7 +1,9 @@
 import _ from 'lodash';
+
 import { QueryCtrl } from 'app/plugins/sdk';
-import './query_filter_ctrl';
-import { registerAngularDirectives } from './angular_wrappers';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+
+import { QueryEditor } from './components/QueryEditor';
 import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
@@ -10,9 +12,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
-    registerAngularDirectives();
     this.handleQueryChange = this.handleQueryChange.bind(this);
     this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
+    react2AngularDirective('queryEditor', QueryEditor, [
+      'target',
+      'onQueryChange',
+      'onExecuteQuery',
+      ['events', { watchDepth: 'reference' }],
+      ['datasource', { watchDepth: 'reference' }],
+    ]);
   }
 
   handleQueryChange(target: Target) {

From 6b5f9d58217be26761675509ebfa02e0e5ff994f Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 2 Jan 2019 16:07:29 +0100
Subject: [PATCH 106/352] clear history

---
 .../features/dashboard/dashgrid/AlertTab.tsx  | 12 +++--
 .../dashboard/dashgrid/StateHistory.tsx       | 53 ++++++++++++++-----
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index 127e6cd0239..80706bf9b41 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -19,10 +19,6 @@ export class AlertTab extends PureComponent<Props> {
   component: AngularComponent;
   panelCtrl: any;
 
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
     if (this.shouldLoadAlertTab()) {
       this.loadAlertTab();
@@ -73,7 +69,13 @@ export class AlertTab extends PureComponent<Props> {
     return {
       title: 'State history',
       render: () => {
-        return <StateHistory dashboard={this.props.dashboard} panelId={this.props.panel.id} />;
+        return (
+          <StateHistory
+            dashboard={this.props.dashboard}
+            panelId={this.props.panel.id}
+            onRefresh={this.panelCtrl.refresh}
+          />
+        );
       },
       buttonType: ToolbarButtonType.View,
     };
diff --git a/public/app/features/dashboard/dashgrid/StateHistory.tsx b/public/app/features/dashboard/dashgrid/StateHistory.tsx
index d40afdd375a..c2998190841 100644
--- a/public/app/features/dashboard/dashgrid/StateHistory.tsx
+++ b/public/app/features/dashboard/dashgrid/StateHistory.tsx
@@ -1,11 +1,13 @@
 import React, { PureComponent } from 'react';
 import alertDef from '../../alerting/state/alertDef';
-import { getBackendSrv } from '../../../core/services/backend_srv';
+import { getBackendSrv } from 'app/core/services/backend_srv';
 import { DashboardModel } from '../dashboard_model';
+import appEvents from '../../../core/app_events';
 
 interface Props {
   dashboard: DashboardModel;
   panelId: number;
+  onRefresh: () => void;
 }
 
 interface State {
@@ -23,14 +25,12 @@ class StateHistory extends PureComponent<Props, State> {
     getBackendSrv()
       .get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`)
       .then(res => {
-        console.log(res);
-        const items = [];
-        res.map(item => {
-          items.push({
+        const items = res.map(item => {
+          return {
             stateModel: alertDef.getStateDisplayModel(item.newState),
             time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'),
             info: alertDef.getAlertAnnotationInfo(item),
-          });
+          };
         });
 
         this.setState({
@@ -39,20 +39,47 @@ class StateHistory extends PureComponent<Props, State> {
       });
   }
 
+  clearHistory = () => {
+    const { dashboard, onRefresh, panelId } = this.props;
+
+    appEvents.emit('confirm-modal', {
+      title: 'Delete Alert History',
+      text: 'Are you sure you want to remove all history & annotations for this alert?',
+      icon: 'fa-trash',
+      yesText: 'Yes',
+      onConfirm: () => {
+        getBackendSrv()
+          .post('/api/annotations/mass-delete', {
+            dashboardId: dashboard.id,
+            panelId: panelId,
+          })
+          .then(() => {
+            onRefresh();
+          });
+
+        this.setState({
+          stateHistoryItems: [],
+        });
+      },
+    });
+  };
+
   render() {
     const { stateHistoryItems } = this.state;
 
     return (
       <div>
         <div style={{ margin: '0 auto', maxWidth: '720px' }}>
-          <div style={{ marginBottom: '15px' }}>
-            <span className="muted">Last 50 state changes</span>
-            <button className="btn btn-mini btn-danger pull-right">
-              <i className="fa fa-trash" /> {` Clear history`}
-            </button>
-          </div>
+          {stateHistoryItems.length > 0 && (
+            <div style={{ marginBottom: '15px' }}>
+              <span className="muted">Last 50 state changes</span>
+              <button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
+                <i className="fa fa-trash" /> {` Clear history`}
+              </button>
+            </div>
+          )}
           <ol className="alert-rule-list">
-            {stateHistoryItems ? (
+            {stateHistoryItems.length > 0 ? (
               stateHistoryItems.map((item, index) => {
                 return (
                   <li className="alert-rule-item" key={`${item.time}-${index}`}>

From 93d2588c229b8e037f49c10575f368ae987cfe46 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 20:58:03 +0100
Subject: [PATCH 107/352] remove not used file

---
 .../stackdriver/angular_wrappers.ts           | 20 -------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 public/app/plugins/datasource/stackdriver/angular_wrappers.ts

diff --git a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts b/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
deleted file mode 100644
index ff469b96535..00000000000
--- a/public/app/plugins/datasource/stackdriver/angular_wrappers.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { QueryEditor } from './components/QueryEditor';
-import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
-
-//This should be removed when the plugin is fully reactified
-export function registerAngularDirectives() {
-  react2AngularDirective('queryEditor', QueryEditor, [
-    'target',
-    'onQueryChange',
-    'onExecuteQuery',
-    ['events', { watchDepth: 'reference' }],
-    ['datasource', { watchDepth: 'reference' }],
-  ]);
-  react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
-    'target',
-    'onQueryChange',
-    'onExecuteQuery',
-    ['datasource', { watchDepth: 'reference' }],
-  ]);
-}

From 3ce4287e8cec87f3040834c2e0034cafea5a1a46 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 3 Jan 2019 09:15:49 +0100
Subject: [PATCH 108/352] fix template variable bug

---
 .../datasource/stackdriver/components/AliasBy.tsx      |  6 ++++++
 .../datasource/stackdriver/components/Metrics.tsx      | 10 ++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index ae397a2c4d8..486a051fdc1 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -22,6 +22,12 @@ export class AliasBy extends Component<Props, State> {
     this.setState({ value: this.props.value });
   }
 
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({ value: nextProps.value });
+    }
+  }
+
   handleChange(e) {
     this.setState({ value: e.target.value });
     this.onChange(e.target.value);
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 4ea09245408..c2993e30bee 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -119,7 +119,7 @@ export class Metrics extends React.Component<Props, State> {
   handleMetricTypeChange(value) {
     const metricDescriptor = this.getSelectedMetricDescriptor(value);
     this.setState({ metricDescriptor });
-    this.props.onChange(metricDescriptor);
+    this.props.onChange({ ...metricDescriptor, type: value });
   }
 
   getServicesList(metricDescriptors) {
@@ -170,7 +170,13 @@ export class Metrics extends React.Component<Props, State> {
               onChange={value => this.handleMetricTypeChange(value)}
               value={metricType}
               variables={templateSrv.variables}
-              options={metrics}
+              options={[
+                {
+                  label: 'Metrics',
+                  expanded: true,
+                  options: metrics,
+                },
+              ]}
               placeholder="Select Metric"
               className="width-15"
             />

From 5d3f4422c57236293fd309f4593898361b4760fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 3 Jan 2019 09:39:46 +0100
Subject: [PATCH 109/352] initial design for way to build value formats lazily
 and a backward compatability layer via Proxy

---
 packages/grafana-ui/src/utils/index.ts        |   1 +
 packages/grafana-ui/src/utils/valueFormats.ts | 104 ++++++++++++++++++
 public/app/core/utils/kbn.ts                  |  21 ++++
 .../app/plugins/panel/graph2/GraphPanel.tsx   |  10 +-
 4 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 packages/grafana-ui/src/utils/valueFormats.ts

diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index 4d9b9a4b948..cd46a5b6424 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './processTimeSeries';
+export * from './valueFormats';
diff --git a/packages/grafana-ui/src/utils/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats.ts
new file mode 100644
index 00000000000..d76db20fb0b
--- /dev/null
+++ b/packages/grafana-ui/src/utils/valueFormats.ts
@@ -0,0 +1,104 @@
+type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number) => string;
+
+interface ValueFormat {
+  name: string;
+  id: string;
+  fn: ValueFormatter;
+}
+
+interface ValueFormatCategory {
+  name: string;
+  formats: ValueFormat[];
+}
+
+interface ValueFormatterIndex {
+  [id: string]: ValueFormatter;
+}
+
+// Globals & formats cache
+let categories: ValueFormatCategory[] = [];
+const index: ValueFormatterIndex = {};
+let hasBuildIndex = false;
+
+function toFixed(value: number, decimals?: number): string {
+  if (value === null) {
+    return '';
+  }
+
+  const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
+  const formatted = String(Math.round(value * factor) / factor);
+
+  // if exponent return directly
+  if (formatted.indexOf('e') !== -1 || value === 0) {
+    return formatted;
+  }
+
+  // If tickDecimals was specified, ensure that we have exactly that
+  // much precision; otherwise default to the value's own precision.
+  if (decimals != null) {
+    const decimalPos = formatted.indexOf('.');
+    const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
+    if (precision < decimals) {
+      return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+    }
+  }
+
+  return formatted;
+}
+
+function buildFormats() {
+  categories = [
+    {
+      name: 'none',
+      formats: [
+        {
+          name: 'short',
+          id: 'short',
+          fn: toFixed,
+        },
+      ],
+    },
+  ];
+
+  for (const cat of categories) {
+    for (const format of cat.formats) {
+      index[format.id] = format.fn;
+    }
+  }
+
+  hasBuildIndex = true;
+}
+
+export function getValueFormat(id: string): ValueFormatter {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return index[id];
+}
+
+export function getValueFormatterIndex(): ValueFormatterIndex {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return index;
+}
+
+export function getUnitFormats() {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return categories.map(cat => {
+    return {
+      text: cat.name,
+      submenu: cat.formats.map(format => {
+        return {
+          text: format.name,
+          value: format.id,
+        };
+      }),
+    };
+  });
+}
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index d32844c44ed..2fae6300d16 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
+import { getValueFormat, getValueFormatterIndex  } from '@grafana/ui';
 
 const kbn: any = {};
 
@@ -1218,4 +1219,24 @@ kbn.getUnitFormats = () => {
   ];
 };
 
+if (typeof Proxy !== "undefined") {
+  kbn.valueFormats = new Proxy(kbn.valueFormats, {
+    get(target, name, receiver) {
+      if (typeof name !== 'string') {
+        throw {message: `Value format ${String(name)} is not a string` };
+      }
+
+      const formatter = getValueFormat(name);
+      if  (formatter) {
+        return formatter;
+      }
+
+      // default to look here
+      return Reflect.get(target, name, receiver);
+    }
+  });
+} else {
+  kbn.valueFormats = getValueFormatterIndex();
+}
+
 export default kbn;
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index a08276e5179..3429200d52b 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -3,8 +3,14 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import colors from 'app/core/utils/colors';
 
-// Components & Types
-import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui';
+// Utils
+import { processTimeSeries } from '@grafana/ui/src/utils';
+
+// Components
+import { Graph } from '@grafana/ui';
+
+// Types
+import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
 import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}

From 4892d3f54be27014560ed55b72b9845cdf64d16d Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 3 Jan 2019 14:21:58 +0100
Subject: [PATCH 110/352] Fixing issue with value color being wrong

---
 public/app/viz/Gauge.test.tsx | 55 +++++++++++++++++++++++++++++++++++
 public/app/viz/Gauge.tsx      | 14 +++++----
 2 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 public/app/viz/Gauge.test.tsx

diff --git a/public/app/viz/Gauge.test.tsx b/public/app/viz/Gauge.test.tsx
new file mode 100644
index 00000000000..91107a563e5
--- /dev/null
+++ b/public/app/viz/Gauge.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Gauge, Props } from './Gauge';
+import { BasicGaugeColor } from '../types';
+import { TimeSeriesVMs } from '@grafana/ui';
+
+jest.mock('jquery', () => ({
+  plot: jest.fn(),
+}));
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    baseColor: BasicGaugeColor.Green,
+    maxValue: 100,
+    mappings: [],
+    minValue: 0,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    thresholds: [],
+    unit: 'none',
+    stat: 'avg',
+    height: 300,
+    width: 300,
+    timeSeries: {} as TimeSeriesVMs,
+    decimals: 0,
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<Gauge {...props} />);
+  const instance = wrapper.instance() as Gauge;
+
+  return {
+    instance,
+    wrapper,
+  };
+};
+
+describe('Get font color', () => {
+  it('should get base color if no threshold', () => {
+    const { instance } = setup();
+
+    expect(instance.getFontColor(40)).toEqual(BasicGaugeColor.Green);
+  });
+
+  it('should be f2f2f2', () => {
+    const { instance } = setup({
+      thresholds: [{ value: 59, color: '#f2f2f2' }],
+    });
+
+    expect(instance.getFontColor(58)).toEqual('#f2f2f2');
+  });
+});
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index 031d856f492..defeaf8cc8f 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -5,7 +5,7 @@ import { TimeSeriesVMs } from '@grafana/ui';
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
-interface Props {
+export interface Props {
   baseColor: string;
   decimals: number;
   height: number;
@@ -96,12 +96,14 @@ export class Gauge extends PureComponent<Props> {
   getFontColor(value) {
     const { baseColor, maxValue, thresholds } = this.props;
 
-    const atThreshold = thresholds.filter(threshold => value <= threshold.value);
+    if (thresholds.length > 0) {
+      const atThreshold = thresholds.filter(threshold => value <= threshold.value);
 
-    if (atThreshold.length > 0) {
-      return atThreshold[0].color;
-    } else if (value <= maxValue) {
-      return BasicGaugeColor.Red;
+      if (atThreshold.length > 0) {
+        return atThreshold[0].color;
+      } else if (value <= maxValue) {
+        return BasicGaugeColor.Red;
+      }
     }
 
     return baseColor;

From 44e2fd4b226e8e3000eba9c9485e57d4270f3de0 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 3 Jan 2019 14:31:45 +0100
Subject: [PATCH 111/352] Fix issue with value disappearing when selecting stat

---
 public/app/plugins/panel/gauge/module.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 245a17abe52..dccd424b416 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -38,8 +38,8 @@ export const defaultProps = {
     showThresholdLabels: false,
     suffix: '',
     decimals: 0,
-    stat: '',
-    unit: '',
+    stat: 'avg',
+    unit: 'none',
     mappings: [],
     thresholds: [],
   },

From d23c3d2b643515ff33fcc2492830d0079b9160d1 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 3 Jan 2019 15:12:03 +0100
Subject: [PATCH 112/352] add tests

---
 .../stackdriver/components/Filter.tsx         |   4 +-
 .../components/QueryEditor.test.tsx           |  18 +
 .../stackdriver/components/QueryEditor.tsx    |   2 +-
 .../__snapshots__/QueryEditor.test.tsx.snap   | 455 ++++++++++++++++++
 .../datasource/stackdriver/functions.test.ts  |  38 ++
 5 files changed, 515 insertions(+), 2 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
 create mode 100644 public/app/plugins/datasource/stackdriver/functions.test.ts

diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index 67a1ff6c38a..11fda73248d 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -52,11 +52,13 @@ export class Filter extends React.Component<Props, State> {
       hideGroupBys,
     };
     scopeProps.loading = this.loadLabels(scopeProps);
-
     this.component = loader.load(this.element, scopeProps, template);
   }
 
   componentDidUpdate(prevProps: Props) {
+    if (!this.element) {
+      return;
+    }
     const scope = this.component.getScope();
     if (prevProps.metricType !== this.props.metricType) {
       scope.loading = this.loadLabels(scope);
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
new file mode 100644
index 00000000000..30cfa9fbfd5
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { QueryEditor, Props, DefaultTarget } from './QueryEditor';
+
+const props: Props = {
+  onQueryChange: target => {},
+  onExecuteQuery: () => {},
+  target: DefaultTarget,
+  events: { on: () => {} },
+  datasource: { templateSrv: { variables: [] } },
+};
+
+describe('QueryEditor', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<QueryEditor {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index c25134b4e70..d639cd821f5 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -26,7 +26,7 @@ interface State extends Target {
   [key: string]: any;
 }
 
-const DefaultTarget: State = {
+export const DefaultTarget: State = {
   defaultProject: 'loading project...',
   metricType: '',
   metricKind: '',
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
new file mode 100644
index 00000000000..161f35563e5
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -0,0 +1,455 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QueryEditor renders correctly 1`] = `
+Array [
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <span
+        className="gf-form-label width-9 query-keyword"
+      >
+        Service
+      </span>
+      <div
+        className="css-0 gf-form-input gf-form-input--form-dropdown width-15"
+        onKeyDown={[Function]}
+      >
+        <div
+          className="css-0 gf-form-select-box__control"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <div
+            className="css-0 gf-form-select-box__value-container"
+          >
+            <div
+              className="css-0 gf-form-select-box__placeholder"
+            >
+              Select Services
+            </div>
+            <input
+              className="css-14uuagi"
+              disabled={false}
+              id="react-select-2-input"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              readOnly={true}
+              tabIndex="0"
+              value=""
+            />
+          </div>
+          <div
+            className="css-0 gf-form-select-box__indicators"
+          >
+            <span
+              className="gf-form-select-box__select-arrow "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <div
+        className="gf-form-label gf-form-label--grow"
+      />
+    </div>
+  </div>,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <span
+        className="gf-form-label width-9 query-keyword"
+      >
+        Metric
+      </span>
+      <div
+        className="css-0 gf-form-input gf-form-input--form-dropdown width-15"
+        onKeyDown={[Function]}
+      >
+        <div
+          className="css-0 gf-form-select-box__control"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <div
+            className="css-0 gf-form-select-box__value-container"
+          >
+            <div
+              className="css-0 gf-form-select-box__placeholder"
+            >
+              Select Metric
+            </div>
+            <div
+              className="css-0"
+            >
+              <div
+                className="gf-form-select-box__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                  }
+                }
+              >
+                <input
+                  aria-autocomplete="list"
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  disabled={false}
+                  id="react-select-3-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": 0,
+                      "border": 0,
+                      "boxSizing": "content-box",
+                      "color": "inherit",
+                      "fontSize": "inherit",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex="0"
+                  type="text"
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                >
+                  
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="css-0 gf-form-select-box__indicators"
+          >
+            <span
+              className="gf-form-select-box__select-arrow "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <div
+        className="gf-form-label gf-form-label--grow"
+      />
+    </div>
+  </div>,
+  <div
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  />,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <label
+        className="gf-form-label query-keyword width-9"
+      >
+        Aggregation
+      </label>
+      <div
+        className="css-0 gf-form-input gf-form-input--form-dropdown width-15"
+        onKeyDown={[Function]}
+      >
+        <div
+          className="css-0 gf-form-select-box__control"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <div
+            className="css-0 gf-form-select-box__value-container"
+          >
+            <div
+              className="css-0 gf-form-select-box__placeholder"
+            >
+              Select Aggregation
+            </div>
+            <div
+              className="css-0"
+            >
+              <div
+                className="gf-form-select-box__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                  }
+                }
+              >
+                <input
+                  aria-autocomplete="list"
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  disabled={false}
+                  id="react-select-4-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": 0,
+                      "border": 0,
+                      "boxSizing": "content-box",
+                      "color": "inherit",
+                      "fontSize": "inherit",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex="0"
+                  type="text"
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                >
+                  
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="css-0 gf-form-select-box__indicators"
+          >
+            <span
+              className="gf-form-select-box__select-arrow "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <label
+        className="gf-form-label gf-form-label--grow"
+      >
+        <a
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-caret-right"
+            ng-hide="ctrl.target.showAggregationOptions"
+          />
+           Advanced Options
+        </a>
+      </label>
+    </div>
+  </div>,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <label
+        className="gf-form-label query-keyword width-9"
+      >
+        Alias By
+      </label>
+      <input
+        className="gf-form-input width-24"
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <div
+        className="gf-form-label gf-form-label--grow"
+      />
+    </div>
+  </div>,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <label
+        className="gf-form-label query-keyword width-9"
+      >
+        Alignment Period
+      </label>
+      <div
+        className="css-0 gf-form-input gf-form-input--form-dropdown width-15"
+        onKeyDown={[Function]}
+      >
+        <div
+          className="css-0 gf-form-select-box__control"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <div
+            className="css-0 gf-form-select-box__value-container gf-form-select-box__value-container--has-value"
+          >
+            <div
+              className="css-0 gf-form-select-box__single-value"
+            >
+              <div
+                className="gf-form-select-box__img-value"
+              >
+                stackdriver auto
+              </div>
+            </div>
+            <div
+              className="css-0"
+            >
+              <div
+                className="gf-form-select-box__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                  }
+                }
+              >
+                <input
+                  aria-autocomplete="list"
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  disabled={false}
+                  id="react-select-5-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": 0,
+                      "border": 0,
+                      "boxSizing": "content-box",
+                      "color": "inherit",
+                      "fontSize": "inherit",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex="0"
+                  type="text"
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                >
+                  
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="css-0 gf-form-select-box__indicators"
+          >
+            <span
+              className="gf-form-select-box__select-arrow "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <span
+        className="gf-form-label width-9 query-keyword"
+      >
+        Project
+      </span>
+      <input
+        className="gf-form-input width-15"
+        disabled={true}
+        type="text"
+        value="Loading project..."
+      />
+    </div>
+    <div
+      className="gf-form"
+      onClick={[Function]}
+    >
+      <label
+        className="gf-form-label query-keyword"
+      >
+        Show Help
+        <i
+          className="fa fa-caret-right"
+        />
+      </label>
+    </div>
+    
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <div
+        className="gf-form-label gf-form-label--grow"
+      />
+    </div>
+  </div>,
+  "",
+  "",
+]
+`;
diff --git a/public/app/plugins/datasource/stackdriver/functions.test.ts b/public/app/plugins/datasource/stackdriver/functions.test.ts
new file mode 100644
index 00000000000..ffc421734fc
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/functions.test.ts
@@ -0,0 +1,38 @@
+import { getAlignmentOptionsByMetric } from './functions';
+import { ValueTypes, MetricKind } from './constants';
+
+describe('functions', () => {
+  let result;
+  describe('getAlignmentOptionsByMetric', () => {
+    describe('when double and gauge is passed', () => {
+      beforeEach(() => {
+        result = getAlignmentOptionsByMetric(ValueTypes.DOUBLE, MetricKind.GAUGE);
+      });
+
+      it('should return all alignment options except two', () => {
+        expect(result.length).toBe(9);
+        expect(result.map(o => o.value)).toEqual(
+          expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
+        );
+      });
+    });
+
+    describe('when double and delta is passed', () => {
+      beforeEach(() => {
+        result = getAlignmentOptionsByMetric(ValueTypes.DOUBLE, MetricKind.DELTA);
+      });
+
+      it('should return all alignment options except four', () => {
+        expect(result.length).toBe(9);
+        expect(result.map(o => o.value)).toEqual(
+          expect.not.arrayContaining([
+            'ALIGN_COUNT_TRUE',
+            'ALIGN_COUNT_FALSE',
+            'ALIGN_FRACTION_TRUE',
+            'ALIGN_INTERPOLATE',
+          ])
+        );
+      });
+    });
+  });
+});

From cc7b754e77943631016a5db5f95557971e79f8fd Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 3 Jan 2019 16:00:42 +0100
Subject: [PATCH 113/352] add aggregation tests

---
 .../components/Aggregations.test.tsx          |  56 +++++++++
 .../stackdriver/components/Aggregations.tsx   |  12 +-
 .../__snapshots__/Aggregations.test.tsx.snap  | 119 ++++++++++++++++++
 .../__snapshots__/QueryEditor.test.tsx.snap   |   1 -
 4 files changed, 179 insertions(+), 9 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
new file mode 100644
index 00000000000..7bc2c3cb536
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Aggregations, Props } from './Aggregations';
+import { shallow } from 'enzyme';
+import { ValueTypes, MetricKind } from '../constants';
+
+const props: Props = {
+  onChange: () => {},
+  templateSrv: {},
+  metricDescriptor: {
+    valueType: '',
+    metricKind: '',
+  },
+  crossSeriesReducer: '',
+  groupBys: [],
+  children: renderProps => <div />,
+};
+
+describe('Aggregations', () => {
+  let wrapper;
+  it('renders correctly', () => {
+    const tree = renderer.create(<Aggregations {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe('options', () => {
+    describe('when DOUBLE and DELTA is passed as props', () => {
+      beforeEach(() => {
+        const newProps = { ...props, metricDescriptor: { valueType: ValueTypes.DOUBLE, metricKind: MetricKind.GAUGE } };
+        wrapper = shallow(<Aggregations {...newProps} />);
+      });
+      it('', () => {
+        const options = wrapper.state().aggOptions[0].options;
+        expect(options.length).toEqual(11);
+        expect(options.map(o => o.value)).toEqual(
+          expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
+        );
+      });
+    });
+
+    describe('when MONEY and CUMULATIVE is passed as props', () => {
+      beforeEach(() => {
+        const newProps = {
+          ...props,
+          metricDescriptor: { valueType: ValueTypes.MONEY, metricKind: MetricKind.CUMULATIVE },
+        };
+        wrapper = shallow(<Aggregations {...newProps} />);
+      });
+      it('', () => {
+        const options = wrapper.state().aggOptions[0].options;
+        expect(options.length).toEqual(1);
+        expect(options.map(o => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE']));
+      });
+    });
+  });
+});
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index d752d59261f..f0a311e62e3 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -16,7 +16,7 @@ export interface Props {
   children?: (renderProps: any) => JSX.Element;
 }
 
-interface State {
+export interface State {
   aggOptions: any[];
   displayAdvancedOptions: boolean;
 }
@@ -79,13 +79,9 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
               <a onClick={() => this.handleToggleDisplayAdvanced()}>
-                {displayAdvancedOptions ? (
-                  <i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" />
-                ) : (
-                  <React.Fragment>
-                    <i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options
-                  </React.Fragment>
-                )}
+                <React.Fragment>
+                  <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
+                </React.Fragment>
               </a>
             </label>
           </div>
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap
new file mode 100644
index 00000000000..defd8ef01a4
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap
@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Aggregations renders correctly 1`] = `
+Array [
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <label
+        className="gf-form-label query-keyword width-9"
+      >
+        Aggregation
+      </label>
+      <div
+        className="css-0 gf-form-input gf-form-input--form-dropdown width-15"
+        onKeyDown={[Function]}
+      >
+        <div
+          className="css-0 gf-form-select-box__control"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <div
+            className="css-0 gf-form-select-box__value-container"
+          >
+            <div
+              className="css-0 gf-form-select-box__placeholder"
+            >
+              Select Aggregation
+            </div>
+            <div
+              className="css-0"
+            >
+              <div
+                className="gf-form-select-box__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                  }
+                }
+              >
+                <input
+                  aria-autocomplete="list"
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  disabled={false}
+                  id="react-select-2-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": 0,
+                      "border": 0,
+                      "boxSizing": "content-box",
+                      "color": "inherit",
+                      "fontSize": "inherit",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex="0"
+                  type="text"
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                >
+                  
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="css-0 gf-form-select-box__indicators"
+          >
+            <span
+              className="gf-form-select-box__select-arrow "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <label
+        className="gf-form-label gf-form-label--grow"
+      >
+        <a
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-caret-right"
+          />
+           Advanced Options
+        </a>
+      </label>
+    </div>
+  </div>,
+  <div />,
+]
+`;
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
index 161f35563e5..00a1ac95039 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -276,7 +276,6 @@ Array [
         >
           <i
             className="fa fa-caret-right"
-            ng-hide="ctrl.target.showAggregationOptions"
           />
            Advanced Options
         </a>

From 0c178f86233d005c7695ea36422978c5d6187347 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 3 Jan 2019 16:21:20 +0100
Subject: [PATCH 114/352] cleanup

---
 .../stackdriver/annotations_query_ctrl.ts     |  22 ----
 .../specs/query_aggregation_ctrl.test.ts      | 120 ------------------
 2 files changed, 142 deletions(-)
 delete mode 100644 public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts

diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
index 0f8a32d254c..4df035719a0 100644
--- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
@@ -1,34 +1,12 @@
-import _ from 'lodash';
-import './query_filter_ctrl';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
 
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
   annotation: any;
-  datasource: any;
 
-  defaultDropdownValue = 'Select Metric';
-  defaultServiceValue = 'All Services';
-
-  defaults = {
-    project: {
-      id: 'default',
-      name: 'loading project...',
-    },
-    metricType: this.defaultDropdownValue,
-    service: this.defaultServiceValue,
-    metric: '',
-    filters: [],
-    metricKind: '',
-    valueType: '',
-  };
-
-  /** @ngInject */
   constructor() {
     this.annotation.target = this.annotation.target || {};
-    this.annotation.target.refId = 'annotationQuery';
-    _.defaultsDeep(this.annotation.target, this.defaults);
     this.handleQueryChange = this.handleQueryChange.bind(this);
 
     react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
deleted file mode 100644
index 8cd7493fa3e..00000000000
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-// const StackdriverAggregationCtrl = ({}, {}) => {};
-
-// describe('StackdriverAggregationCtrl', () => {
-//   let ctrl;
-//   describe('aggregation and alignment options', () => {
-//     describe('when new query result is returned from the server', () => {
-//       describe('and result is double and gauge and no group by is used', () => {
-//         beforeEach(async () => {
-//           ctrl = new StackdriverAggregationCtrl(
-//             {
-//               $on: () => {},
-//               target: {
-//                 valueType: 'DOUBLE',
-//                 metricKind: 'GAUGE',
-//                 crossSeriesReducer: '',
-//                 groupBys: [],
-//               },
-//             },
-//             {
-//               replace: s => s,
-//               variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
-//             }
-//           );
-//         });
-
-//         it('should populate all aggregate options except two', () => {
-//           ctrl.setAggOptions();
-//           expect(ctrl.aggOptions.length).toBe(2);
-//           const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-//           expect(templateVariableGroup.options.length).toBe(2);
-//             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
-//           );
-//         });
-
-//         it('should populate all alignment options except two', () => {
-//           ctrl.setAlignOptions();
-//           const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
-//           expect(templateVariableGroup.options.length).toBe(2);
-//           expect(alignOptionGroup.options.length).toBe(11);
-//           expect(alignOptionGroup.options.map(o => o.value)).toEqual(
-//             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
-//           );
-//         });
-//       });
-
-//       describe('and result is double and delta and no group by is used', () => {
-//         beforeEach(async () => {
-//           ctrl = new StackdriverAggregationCtrl(
-//             {
-//               $on: () => {},
-//               target: {
-//                 valueType: 'DOUBLE',
-//                 metricKind: 'DELTA',
-//                 crossSeriesReducer: '',
-//                 groupBys: [],
-//               },
-//             },
-//             {
-//               replace: s => s,
-//               variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
-//             }
-//           );
-//         });
-
-//         it('should populate all alignment options except four', () => {
-//           ctrl.setAlignOptions();
-//           const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
-//           expect(templateVariableGroup.options.length).toBe(2);
-//           expect(alignOptionGroup.options.length).toBe(9);
-//           expect(alignOptionGroup.options.map(o => o.value)).toEqual(
-//             expect['not'].arrayContaining([
-//               'ALIGN_NEXT_OLDER',
-//               'ALIGN_INTERPOLATE',
-//               'ALIGN_COUNT_TRUE',
-//               'ALIGN_COUNT_FALSE',
-//               'ALIGN_FRACTION_TRUE',
-//             ])
-//           );
-//         });
-//       });
-
-//       describe('and result is double and gauge and a group by is used', () => {
-//         beforeEach(async () => {
-//           ctrl = new StackdriverAggregationCtrl(
-//             {
-//               $on: () => {},
-//               target: {
-//                 valueType: 'DOUBLE',
-//                 metricKind: 'GAUGE',
-//                 crossSeriesReducer: 'REDUCE_NONE',
-//                 groupBys: ['resource.label.projectid'],
-//               },
-//             },
-//             {
-//               replace: s => s,
-//               variables: [{ name: 'someVariable1' }],
-//             }
-//           );
-//         });
-
-//         it('should populate all aggregate options except three', () => {
-//           ctrl.setAggOptions();
-//           const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-//           expect(ctrl.aggOptions.length).toBe(2);
-//           expect(templateVariableGroup.options.length).toBe(1);
-//           expect(aggOptionsGroup.options.length).toBe(10);
-//           expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
-//             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
-//           );
-//         });
-
-//         it('should select some other reducer than REDUCE_NONE', () => {
-//           ctrl.setAggOptions();
-//           expect(ctrl.target.crossSeriesReducer).not.toBe('');
-//           expect(ctrl.target.crossSeriesReducer).not.toBe('REDUCE_NONE');
-//         });
-//       });
-//     });
-//   });
-// });

From 297241c4aba4c6db70181b7974f376a1b3a609b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 4 Jan 2019 09:35:16 +0100
Subject: [PATCH 115/352] Fixed timepicker css issue introduced by PR #14700

---
 public/sass/components/_timepicker.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss
index f424e42ded5..e4cb5ce9c21 100644
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -20,9 +20,9 @@
   display: flex;
   flex-direction: column;
   position: absolute;
-  left: 20px;
   right: 20px;
   top: $navbarHeight;
+
   @include media-breakpoint-up(md) {
     width: 550px;
   }

From 0ca0670e0039723f9beef4e77264370b42cf2851 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 4 Jan 2019 09:58:24 +0100
Subject: [PATCH 116/352] Changed datasource list page default layout mode

---
 public/app/features/datasources/state/reducers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index e8625aac0d2..6e86c304fa7 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -5,7 +5,7 @@ import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelec
 const initialState: DataSourcesState = {
   dataSources: [] as DataSource[],
   dataSource: {} as DataSource,
-  layoutMode: LayoutModes.Grid,
+  layoutMode: LayoutModes.List,
   searchQuery: '',
   dataSourcesCount: 0,
   dataSourceTypes: [] as Plugin[],

From 2eeba9dae186806ed5977d1e79815bfc5328169c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 4 Jan 2019 11:57:16 +0100
Subject: [PATCH 117/352] Updated alert tab layout & markup

---
 public/app/features/alerting/AlertTabCtrl.ts  |   3 +-
 .../features/alerting/partials/alert_tab.html | 217 ++++++++++--------
 2 files changed, 117 insertions(+), 103 deletions(-)

diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index ffcb20472ad..2be25e9df6a 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/public/app/features/alerting/AlertTabCtrl.ts
@@ -115,7 +115,7 @@ export class AlertTabCtrl {
   }
 
   getNotifications() {
-    return Promise.resolve(
+    return this.$q.when(
       this.notifications.map(item => {
         return this.uiSegmentSrv.newSegment(item.name);
       })
@@ -148,6 +148,7 @@ export class AlertTabCtrl {
     // reset plus button
     this.addNotificationSegment.value = this.uiSegmentSrv.newPlusButton().value;
     this.addNotificationSegment.html = this.uiSegmentSrv.newPlusButton().html;
+    this.addNotificationSegment.fake = true;
   }
 
   removeNotification(index) {
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 3a03b23a076..da862203da6 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -4,112 +4,121 @@
   </div>
   <div class="panel-option-section">
     <div class="panel-option-section__body">
-      <div class="section">
-        <div class="gf-form">
+      <div class="gf-form-group">
+        <h4 class="section-heading">Rule</h4>
+        <div class="gf-form-inline">
           <div class="gf-form">
             <span class="gf-form-label width-6">Name</span>
             <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
           </div>
-          <div class="gf-form-inline">
-            <div class="gf-form">
-              <span class="gf-form-label width-9">Evaluate every</span>
-              <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
-            </div>
-            <div class="gf-form max-width-11">
-              <label class="gf-form-label width-5">For</label>
-              <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for"
-                     spellcheck='false' placeholder="5m">
-              <info-popover mode="right-absolute">
-                If an alert rule has a configured For and the query violates the configured
-                threshold it
-                will first go from OK to Pending.
-                Going from OK to Pending Grafana will not send any notifications. Once the alert
-                rule
-                has
-                been firing for more than For duration, it will change to Alerting and send alert
-                notifications.
-              </info-popover>
-            </div>
+          <div class="gf-form">
+            <span class="gf-form-label width-9">Evaluate every</span>
+            <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
+          </div>
+          <div class="gf-form max-width-11">
+            <label class="gf-form-label width-5">For</label>
+            <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for"
+                  spellcheck='false' placeholder="5m">
+            <info-popover mode="right-absolute">
+              If an alert rule has a configured For and the query violates the configured
+              threshold it
+              will first go from OK to Pending.
+              Going from OK to Pending Grafana will not send any notifications. Once the alert
+              rule
+              has
+              been firing for more than For duration, it will change to Alerting and send alert
+              notifications.
+            </info-popover>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-  <div class="panel-option-section">
-    <div class="panel-option-section__header">Conditions</div>
-    <div class="panel-option-section__body">
-      <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
-        <div class="gf-form">
-          <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
-                                property="conditionModel.operator.type" options="ctrl.evalOperators"
-                                custom="false"></metric-segment-model>
-          <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
-        </div>
-        <div class="gf-form">
-          <query-part-editor class="gf-form-label query-part width-9"
-                             part="conditionModel.reducerPart"
-                             handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
-          </query-part-editor>
-          <span class="gf-form-label query-keyword">OF</span>
-        </div>
-        <div class="gf-form">
-          <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart"
-                             handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
-          </query-part-editor>
-        </div>
-        <div class="gf-form">
-          <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions"
-                                custom="false" css-class="query-keyword"
-                                on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
-          <input class="gf-form-input max-width-9" type="number" step="any"
-                 ng-hide="conditionModel.evaluator.params.length === 0"
-                 ng-model="conditionModel.evaluator.params[0]"
-                 ng-change="ctrl.evaluatorParamsChanged()" />
-          <label class="gf-form-label query-keyword"
-                 ng-show="conditionModel.evaluator.params.length === 2">TO</label>
-          <input class="gf-form-input max-width-9" type="number" step="any"
-                 ng-if="conditionModel.evaluator.params.length === 2"
-                 ng-model="conditionModel.evaluator.params[1]"
-                 ng-change="ctrl.evaluatorParamsChanged()" />
-        </div>
-        <div class="gf-form">
-          <label class="gf-form-label">
-            <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
-              <i class="fa fa-trash"></i>
-            </a>
-          </label>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label dropdown">
-          <a class="pointer dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-plus"></i>
-          </a>
-          <ul class="dropdown-menu" role="menu">
-            <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
-              <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
-            </li>
-          </ul>
-        </label>
-      </div>
+
       <div class="gf-form-group">
-        <div class="gf-form">
-          <span class="gf-form-label width-18">If no data or all values are null</span>
-          <span class="gf-form-label query-keyword">SET STATE TO</span>
-          <div class="gf-form-select-wrapper">
-            <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
-                    ng-options="f.value as f.text for f in ctrl.noDataModes">
-            </select>
+        <h4 class="section-heading">Conditions</h4>
+        <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
+          <div class="gf-form">
+            <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
+                                  property="conditionModel.operator.type" options="ctrl.evalOperators"
+                                  custom="false"></metric-segment-model>
+            <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+          </div>
+          <div class="gf-form">
+            <query-part-editor class="gf-form-label query-part width-9"
+                                part="conditionModel.reducerPart"
+                                handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
+            </query-part-editor>
+            <span class="gf-form-label query-keyword">OF</span>
+          </div>
+          <div class="gf-form">
+            <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart"
+                                handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
+            </query-part-editor>
+          </div>
+          <div class="gf-form">
+            <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions"
+                                  custom="false" css-class="query-keyword"
+                                  on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
+            <input class="gf-form-input max-width-9" type="number" step="any"
+                    ng-hide="conditionModel.evaluator.params.length === 0"
+                    ng-model="conditionModel.evaluator.params[0]"
+                    ng-change="ctrl.evaluatorParamsChanged()" />
+            <label class="gf-form-label query-keyword"
+                    ng-show="conditionModel.evaluator.params.length === 2">TO</label>
+            <input class="gf-form-input max-width-9" type="number" step="any"
+                    ng-if="conditionModel.evaluator.params.length === 2"
+                    ng-model="conditionModel.evaluator.params[1]"
+                    ng-change="ctrl.evaluatorParamsChanged()" />
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label">
+              <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
+                <i class="fa fa-trash"></i>
+              </a>
+            </label>
           </div>
         </div>
 
         <div class="gf-form">
-          <span class="gf-form-label width-18">If execution error or timeout</span>
-          <span class="gf-form-label query-keyword">SET STATE TO</span>
-          <div class="gf-form-select-wrapper">
-            <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
-                    ng-options="f.value as f.text for f in ctrl.executionErrorModes">
-            </select>
+          <label class="gf-form-label dropdown">
+            <a class="pointer dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-plus"></i>
+            </a>
+            <ul class="dropdown-menu" role="menu">
+              <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
+                <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
+              </li>
+            </ul>
+          </label>
+        </div>
+      </div>
+
+      <div class="gf-form-group">
+        <h4 class="section-heading">No Data & Error Handling</h4>
+        <div class="gf-form-inline">
+          <div class="gf-form">
+            <span class="gf-form-label width-15">If no data or all values are null</span>
+          </div>
+          <div class="gf-form">
+            <span class="gf-form-label query-keyword">SET STATE TO</span>
+            <div class="gf-form-select-wrapper">
+              <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
+                                            ng-options="f.value as f.text for f in ctrl.noDataModes">
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="gf-form-inline">
+          <div class="gf-form">
+            <span class="gf-form-label width-15">If execution error or timeout</span>
+          </div>
+          <div class="gf-form">
+            <span class="gf-form-label query-keyword">SET STATE TO</span>
+            <div class="gf-form-select-wrapper">
+              <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
+                                            ng-options="f.value as f.text for f in ctrl.executionErrorModes">
+              </select>
+            </div>
           </div>
         </div>
 
@@ -129,19 +138,23 @@
       </div>
     </div>
   </div>
+
   <div class="panel-option-section">
     <div class="panel-option-section__header">Notifications</div>
     <div class="panel-option-section__body">
       <div class="gf-form-inline">
-        <div class="gf-form max-width-30">
+        <div class="gf-form">
           <span class="gf-form-label width-8">Send to</span>
-          <span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications"
-                ng-style="{'background-color': nc.bgColor }">
-							<i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
-							<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)"
-                 ng-if="nc.isDefault === false"></i>
-						</span>
-          <metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()"
+        </div>
+        <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
+          <span class="gf-form-label" ng-style="{'background-color': nc.bgColor }">
+            <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
+            <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
+          </span>
+        </div>
+        <div class="gf-form">
+          <metric-segment segment="ctrl.addNotificationSegment"
+                          get-options="ctrl.getNotifications()"
                           on-change="ctrl.notificationAdded()"></metric-segment>
         </div>
       </div>

From f749ced36e05956e02ed0574a24e8350b64e5b53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 4 Jan 2019 12:18:49 +0100
Subject: [PATCH 118/352] AlertTab style fixes

---
 .../dashboard/dashgrid/EditorTabBody.tsx      |  2 +-
 .../dashboard/dashgrid/StateHistory.tsx       | 64 +++++++++----------
 public/sass/pages/_alerting.scss              |  1 +
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 2cd247ed704..822507c5c11 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -25,7 +25,7 @@ export interface EditorToolbarView {
   icon?: string;
   disabled?: boolean;
   onClick?: () => void;
-  render?: (closeFunction?: any) => JSX.Element | JSX.Element[];
+  render?: () => JSX.Element;
   action?: () => void;
   buttonType: ToolbarButtonType;
 }
diff --git a/public/app/features/dashboard/dashgrid/StateHistory.tsx b/public/app/features/dashboard/dashgrid/StateHistory.tsx
index c2998190841..99229b41848 100644
--- a/public/app/features/dashboard/dashgrid/StateHistory.tsx
+++ b/public/app/features/dashboard/dashgrid/StateHistory.tsx
@@ -69,41 +69,39 @@ class StateHistory extends PureComponent<Props, State> {
 
     return (
       <div>
-        <div style={{ margin: '0 auto', maxWidth: '720px' }}>
-          {stateHistoryItems.length > 0 && (
-            <div style={{ marginBottom: '15px' }}>
-              <span className="muted">Last 50 state changes</span>
-              <button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
-                <i className="fa fa-trash" /> {` Clear history`}
-              </button>
-            </div>
-          )}
-          <ol className="alert-rule-list">
-            {stateHistoryItems.length > 0 ? (
-              stateHistoryItems.map((item, index) => {
-                return (
-                  <li className="alert-rule-item" key={`${item.time}-${index}`}>
-                    <div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
-                      <i className={item.stateModel.iconClass} />
-                    </div>
-                    <div className="alert-rule-item__body">
-                      <div className="alert-rule-item__header">
-                        <p className="alert-rule-item__name">{item.alertName}</p>
-                        <div className="alert-rule-item__text">
-                          <span className={`${item.stateModel.stateClass}`}>{item.stateModel.text}</span>
-                        </div>
+        {stateHistoryItems.length > 0 && (
+          <div className="p-b-1">
+            <span className="muted">Last 50 state changes</span>
+            <button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
+              <i className="fa fa-trash" /> {` Clear history`}
+            </button>
+          </div>
+        )}
+        <ol className="alert-rule-list">
+          {stateHistoryItems.length > 0 ? (
+            stateHistoryItems.map((item, index) => {
+              return (
+                <li className="alert-rule-item" key={`${item.time}-${index}`}>
+                  <div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
+                    <i className={item.stateModel.iconClass} />
+                  </div>
+                  <div className="alert-rule-item__body">
+                    <div className="alert-rule-item__header">
+                      <p className="alert-rule-item__name">{item.alertName}</p>
+                      <div className="alert-rule-item__text">
+                        <span className={`${item.stateModel.stateClass}`}>{item.stateModel.text}</span>
                       </div>
-                      {item.info}
                     </div>
-                    <div className="alert-rule-item__time">{item.time}</div>
-                  </li>
-                );
-              })
-            ) : (
-              <i>No state changes recorded</i>
-            )}
-          </ol>
-        </div>
+                    {item.info}
+                  </div>
+                  <div className="alert-rule-item__time">{item.time}</div>
+                </li>
+              );
+            })
+          ) : (
+            <i>No state changes recorded</i>
+          )}
+        </ol>
       </div>
     );
   }
diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss
index 77752be11bc..f285ab753ff 100644
--- a/public/sass/pages/_alerting.scss
+++ b/public/sass/pages/_alerting.scss
@@ -107,6 +107,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  justify-content: center;
   overflow: hidden;
 }
 

From 35f6f50f4092b5bef5023e8a499f4cd1605a47bf Mon Sep 17 00:00:00 2001
From: Simon Podlipsky <simon@podlipsky.net>
Date: Fri, 4 Jan 2019 12:24:22 +0100
Subject: [PATCH 119/352] Fixed timepicker css issue introduced by PR #14700
 and remove hotfix from 297241c

---
 public/sass/components/_timepicker.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss
index e4cb5ce9c21..6f075c4d92e 100644
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -20,10 +20,12 @@
   display: flex;
   flex-direction: column;
   position: absolute;
+  left: 20px;
   right: 20px;
   top: $navbarHeight;
 
   @include media-breakpoint-up(md) {
+    left: auto;
     width: 550px;
   }
 

From e0c28ba7704246a70e4467f23109cadacb8f3fc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 4 Jan 2019 12:38:50 +0100
Subject: [PATCH 120/352] Minor refactoring of EditorTabBody

---
 .../features/dashboard/dashgrid/AlertTab.tsx    | 17 +++++++++++------
 .../dashboard/dashgrid/EditorTabBody.tsx        | 10 ++--------
 .../features/dashboard/dashgrid/QueriesTab.tsx  |  9 +++++----
 .../dashboard/dashgrid/VisualizationTab.tsx     |  6 ++++--
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
index 80706bf9b41..20f7e90633e 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -1,12 +1,19 @@
+// Libraries
 import React, { PureComponent } from 'react';
+
+// Services & Utils
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
-import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import appEvents from 'app/core/app_events';
+
+// Components
+import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
-import appEvents from 'app/core/app_events';
-import { PanelModel } from '../panel_model';
 import 'app/features/alerting/AlertTabCtrl';
+
+// Types
 import { DashboardModel } from '../dashboard_model';
+import { PanelModel } from '../panel_model';
 
 interface Props {
   angularPanel?: AngularComponent;
@@ -77,7 +84,6 @@ export class AlertTab extends PureComponent<Props> {
           />
         );
       },
-      buttonType: ToolbarButtonType.View,
     };
   };
 
@@ -85,7 +91,7 @@ export class AlertTab extends PureComponent<Props> {
     const { panel } = this.props;
     return {
       title: 'Delete',
-      icon: 'fa fa-trash',
+      btnType: 'danger',
       onClick: () => {
         appEvents.emit('confirm-modal', {
           title: 'Delete Alert',
@@ -102,7 +108,6 @@ export class AlertTab extends PureComponent<Props> {
           },
         });
       },
-      buttonType: ToolbarButtonType.Action,
     };
   };
 
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 822507c5c11..b7da81a23f8 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -13,21 +13,15 @@ interface Props {
   toolbarItems?: EditorToolbarView[];
 }
 
-export enum ToolbarButtonType {
-  Action = 'action',
-  View = 'view',
-}
-
 export interface EditorToolbarView {
   title?: string;
   heading?: string;
-  imgSrc?: string;
   icon?: string;
   disabled?: boolean;
   onClick?: () => void;
   render?: () => JSX.Element;
   action?: () => void;
-  buttonType: ToolbarButtonType;
+  btnType?: 'danger';
 }
 
 interface State {
@@ -87,7 +81,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
         view.onClick();
       }
 
-      if (view.buttonType !== ToolbarButtonType.Action) {
+      if (view.render) {
         this.onToggleToolBarView(view);
       }
     };
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 98287e4888e..741e2cd9ac1 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -1,19 +1,22 @@
 // Libraries
 import React, { PureComponent, SFC } from 'react';
 import _ from 'lodash';
+
 // Components
-import './../../panel/metrics_tab';
-import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import 'app/features/panel/metrics_tab';
+import { EditorTabBody, EditorToolbarView} from './EditorTabBody';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
 import { PanelOptionSection } from './PanelOptionSection';
+
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import config from 'app/core/config';
+
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
@@ -204,14 +207,12 @@ export class QueriesTab extends PureComponent<Props, State> {
     const queryInspector: EditorToolbarView = {
       title: 'Query Inspector',
       render: this.renderQueryInspector,
-      buttonType: ToolbarButtonType.View,
     };
 
     const dsHelp: EditorToolbarView = {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
-      buttonType: ToolbarButtonType.View,
     };
 
     return (
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index 8a57dd17190..bc7102f35dd 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -1,13 +1,16 @@
 // Libraries
 import React, { PureComponent } from 'react';
+
 // Utils & Services
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
+
 // Components
-import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
+
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
@@ -207,7 +210,6 @@ export class VisualizationTab extends PureComponent<Props, State> {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
-      buttonType: ToolbarButtonType.View,
     };
 
     return (

From ffc9b7ac03e8e8b161b8280ae66d3cca2b0f8710 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 4 Jan 2019 15:45:39 +0100
Subject: [PATCH 121/352] first stuff

---
 packages/grafana-ui/src/utils/valueFormats.ts | 167 +++++++++++++++++-
 1 file changed, 165 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/utils/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats.ts
index d76db20fb0b..cdff409a683 100644
--- a/packages/grafana-ui/src/utils/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/valueFormats.ts
@@ -46,16 +46,179 @@ function toFixed(value: number, decimals?: number): string {
   return formatted;
 }
 
+function toFixedUnit(unit: string) {
+  return (size: number, decimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    return toFixed(size, decimals) + ' ' + unit;
+  };
+}
+
+// Formatter which scales the unit string geometrically according to the given
+// numeric factor. Repeatedly scales the value down by the factor until it is
+// less than the factor in magnitude, or the end of the array is reached.
+function scaledUnits(factor: number, extArray: string[]) {
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+
+    let steps = 0;
+    const limit = extArray.length;
+
+    while (Math.abs(size) >= factor) {
+      steps++;
+      size /= factor;
+
+      if (steps >= limit) {
+        return 'NA';
+      }
+    }
+
+    if (steps > 0 && scaledDecimals !== null) {
+      decimals = scaledDecimals + 3 * steps;
+    }
+
+    return toFixed(size, decimals) + extArray[steps];
+  };
+}
+
+function toPercent(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(size, decimals) + '%';
+}
+
+function toPercentUnit(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(100 * size, decimals) + '%';
+}
+
+function toHex0x(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  const hexString = hex(value, decimals);
+  if (hexString.substring(0, 1) === '-') {
+    return '-0x' + hexString.substring(1);
+  }
+  return '0x' + hexString;
+}
+
+function hex(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return parseFloat(toFixed(value, decimals))
+    .toString(16)
+    .toUpperCase();
+}
+
+function sci(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toExponential(decimals);
+}
+
+function locale(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
+}
+
+function currency(symbol: string) {
+  const units = ['', 'K', 'M', 'B', 'T'];
+  const scaler = scaledUnits(1000, units);
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    const scaled = scaler(size, decimals, scaledDecimals);
+    return symbol + scaled;
+  };
+}
+
 function buildFormats() {
   categories = [
     {
       name: 'none',
       formats: [
         {
-          name: 'short',
-          id: 'short',
+          name: 'none',
+          id: 'none',
           fn: toFixed,
         },
+        {
+          name: 'short',
+          id: 'short',
+          fn: scaledUnits(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Quadr', ' Quint', ' Sext', ' Sept']),
+        },
+        {
+          name: 'percent (0-100)',
+          id: 'percent',
+          fn: toPercent,
+        },
+        {
+          name: 'percent (0.0-1.0)',
+          id: 'percentunit',
+          fn: toPercentUnit,
+        },
+        {
+          name: 'Humidity (%H)',
+          id: 'humidity',
+          fn: toFixedUnit('%H'),
+        },
+        {
+          name: 'decibel',
+          id: 'dB',
+          fn: toFixedUnit('dB'),
+        },
+        {
+          name: 'hexadecimal (0x)',
+          id: 'hex0x',
+          fn: toHex0x,
+        },
+        {
+          name: 'hexadecimal',
+          id: 'hex',
+          fn: hex,
+        },
+        {
+          name: 'scientific notation',
+          id: 'sci',
+          fn: sci,
+        },
+        {
+          name: 'locale format',
+          id: 'locale',
+          fn: locale,
+        },
+      ],
+    },
+    {
+      name: 'currency',
+      formats: [
+        { name: 'Dollars ($)', id: 'currencyUSD', fn: currency('$') },
+        { name: 'Pounds (£)', id: 'currencyGBP', fn: currency('£') },
+        { name: 'Euro (€)', id: 'currencyEUR', fn: currency('€') },
+        { name: 'Yen (¥)', id: 'currencyJPY', fn: currency('¥') },
+        { name: 'Rubles (₽)', id: 'currencyRUB', fn: currency('₽') },
+        { name: 'Hryvnias (₴)', id: 'currencyUAH', fn: currency('₴') },
+        { name: 'Real (R$)', id: 'currencyBRL', fn: currency('R$') },
+        { name: 'Danish Krone (kr)', id: 'currencyDKK', fn: currency('kr') },
+        { name: 'Icelandic Króna (kr)', id: 'currencyISK', fn: currency('kr') },
+        { name: 'Norwegian Krone (kr)', id: 'currencyNOK', fn: currency('kr') },
+        { name: 'Swedish Krona (kr)', id: 'currencySEK', fn: currency('kr') },
+        { name: 'Czech koruna (czk)', id: 'currencyCZK', fn: currency('czk') },
+        { name: 'Swiss franc (CHF)', id: 'currencyCHF', fn: currency('CHF') },
+        { name: 'Polish Złoty (PLN)', id: 'currencyPLN', fn: currency('PLN') },
+        { name: 'Bitcoin (฿)', id: 'currencyBTC', fn: currency('฿') },
       ],
     },
   ];

From 1eca81139b6b7f27fabd692a910c52d5f1335b55 Mon Sep 17 00:00:00 2001
From: Michael Inthilith <minthilith@gmail.com>
Date: Fri, 4 Jan 2019 15:57:34 +0100
Subject: [PATCH 122/352] Fix stackdriver aggregation series merge

Fixes #14581
---
 public/app/plugins/datasource/stackdriver/constants.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/constants.ts b/public/app/plugins/datasource/stackdriver/constants.ts
index b11f4a1bcb1..b77e1be7b4b 100644
--- a/public/app/plugins/datasource/stackdriver/constants.ts
+++ b/public/app/plugins/datasource/stackdriver/constants.ts
@@ -158,25 +158,25 @@ export const aggOptions = [
     text: 'min',
     value: 'REDUCE_MIN',
     valueTypes: [ValueTypes.INT64, ValueTypes.DOUBLE, ValueTypes.MONEY],
-    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA],
+    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA, MetricKind.CUMULATIVE, MetricKind.METRIC_KIND_UNSPECIFIED],
   },
   {
     text: 'max',
     value: 'REDUCE_MAX',
     valueTypes: [ValueTypes.INT64, ValueTypes.DOUBLE, ValueTypes.MONEY],
-    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA],
+    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA, MetricKind.CUMULATIVE, MetricKind.METRIC_KIND_UNSPECIFIED],
   },
   {
     text: 'sum',
     value: 'REDUCE_SUM',
     valueTypes: [ValueTypes.INT64, ValueTypes.DOUBLE, ValueTypes.MONEY, ValueTypes.DISTRIBUTION],
-    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA],
+    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA, MetricKind.CUMULATIVE, MetricKind.METRIC_KIND_UNSPECIFIED],
   },
   {
     text: 'std. dev.',
     value: 'REDUCE_STDDEV',
     valueTypes: [ValueTypes.INT64, ValueTypes.DOUBLE, ValueTypes.MONEY, ValueTypes.DISTRIBUTION],
-    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA],
+    metricKinds: [MetricKind.GAUGE, MetricKind.DELTA, MetricKind.CUMULATIVE, MetricKind.METRIC_KIND_UNSPECIFIED],
   },
   {
     text: 'count',

From dd6f606cda65284a3d0ebf8ca3c700ea5f86f072 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Fri, 4 Jan 2019 16:30:19 +0100
Subject: [PATCH 123/352] docs: updated debian and centos repo.

---
 docs/sources/installation/debian.md | 21 ++++++---------------
 docs/sources/installation/rpm.md    | 16 +++++-----------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/docs/sources/installation/debian.md b/docs/sources/installation/debian.md
index 7ed44572533..28b975e31e8 100644
--- a/docs/sources/installation/debian.md
+++ b/docs/sources/installation/debian.md
@@ -34,32 +34,23 @@ sudo dpkg -i grafana_<version>_amd64.deb
 Example:
 
 ```bash
-wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_5.1.4_amd64.deb
+wget https://dl.grafana.com/oss/release/grafana_5.4.2_amd64.deb
 sudo apt-get install -y adduser libfontconfig
-sudo dpkg -i grafana_5.1.4_amd64.deb
+sudo dpkg -i grafana_5.4.2_amd64.deb
 ```
 
 ## APT Repository
 
-Add the following line to your `/etc/apt/sources.list` file.
+Create a file `/etc/apt/sources.list.d/grafana.list` and add the following to it.
 
 ```bash
-deb https://packagecloud.io/grafana/stable/debian/ stretch main
+deb https://packages.grafana.com/oss/deb stable main
 ```
 
-Use the above line even if you are on Ubuntu or another Debian version.
-There is also a testing repository if you want beta or release
-candidates.
+Use the above line even if you are on Ubuntu or another Debian version. Then add our gpg key. This allows you to install signed packages.
 
 ```bash
-deb https://packagecloud.io/grafana/testing/debian/ stretch main
-```
-
-Then add the [Package Cloud](https://packagecloud.io/grafana) key. This
-allows you to install signed packages.
-
-```bash
-curl https://packagecloud.io/gpg.key | sudo apt-key add -
+curl https://packages.grafana.com/gpg.key | sudo apt-key add -
 ```
 
 Update your Apt repositories and install Grafana
diff --git a/docs/sources/installation/rpm.md b/docs/sources/installation/rpm.md
index 5bf3b7ed745..559bb0a8ef4 100644
--- a/docs/sources/installation/rpm.md
+++ b/docs/sources/installation/rpm.md
@@ -32,7 +32,7 @@ $ sudo yum install <rpm package url>
 Example:
 
 ```bash
-$ sudo yum install https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.1.4-1.x86_64.rpm
+$ sudo yum install https://dl.grafana.com/oss/release/grafana-5.4.2-1.x86_64.rpm
 ```
 
 Or install manually using `rpm`. First execute
@@ -44,7 +44,7 @@ $ wget <rpm package url>
 Example:
 
 ```bash
-$ wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.1.4-1.x86_64.rpm
+$ wget https://dl.grafana.com/oss/release/grafana-5.4.2-1.x86_64.rpm
 ```
 
 ### On CentOS / Fedora / Redhat:
@@ -67,21 +67,15 @@ Add the following to a new file at `/etc/yum.repos.d/grafana.repo`
 ```bash
 [grafana]
 name=grafana
-baseurl=https://packagecloud.io/grafana/stable/el/7/$basearch
+baseurl=https://packages.grafana.com/oss/rpm
 repo_gpgcheck=1
 enabled=1
 gpgcheck=1
-gpgkey=https://packagecloud.io/gpg.key https://grafanarel.s3.amazonaws.com/RPM-GPG-KEY-grafana
+gpgkey=https://packages.grafana.com/gpg.key
 sslverify=1
 sslcacert=/etc/pki/tls/certs/ca-bundle.crt
 ```
 
-There is also a testing repository if you want beta or release candidates.
-
-```bash
-baseurl=https://packagecloud.io/grafana/testing/el/7/$basearch
-```
-
 Then install Grafana via the `yum` command.
 
 ```bash
@@ -91,7 +85,7 @@ $ sudo yum install grafana
 ### RPM GPG Key
 
 The RPMs are signed, you can verify the signature with this [public GPG
-key](https://grafanarel.s3.amazonaws.com/RPM-GPG-KEY-grafana).
+key](https://packages.grafana.com/gpg.key).
 
 ## Package details
 

From 9759ee53ca4ac48202c8d1bedea92138c66f2945 Mon Sep 17 00:00:00 2001
From: Michael Inthilith <minthilith@gmail.com>
Date: Fri, 4 Jan 2019 16:58:27 +0100
Subject: [PATCH 124/352] Add mean on distribution as well

---
 public/app/plugins/datasource/stackdriver/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/constants.ts b/public/app/plugins/datasource/stackdriver/constants.ts
index b77e1be7b4b..49ac5131f0d 100644
--- a/public/app/plugins/datasource/stackdriver/constants.ts
+++ b/public/app/plugins/datasource/stackdriver/constants.ts
@@ -151,7 +151,7 @@ export const aggOptions = [
   {
     text: 'mean',
     value: 'REDUCE_MEAN',
-    valueTypes: [ValueTypes.INT64, ValueTypes.DOUBLE, ValueTypes.MONEY],
+    valueTypes: [ValueTypes.INT64, ValueTypes.DOUBLE, ValueTypes.MONEY, ValueTypes.DISTRIBUTION],
     metricKinds: [MetricKind.GAUGE, MetricKind.DELTA],
   },
   {

From c39dc1fb1502a7a4a53570e91a00d48e762843b1 Mon Sep 17 00:00:00 2001
From: Simon Podlipsky <simon@podlipsky.net>
Date: Sat, 5 Jan 2019 15:19:54 +0100
Subject: [PATCH 125/352] Some cleanup

---
 public/app/features/datasources/settings/BasicSettings.tsx | 2 +-
 .../settings/__snapshots__/BasicSettings.test.tsx.snap     | 2 +-
 public/app/features/explore/LogLabels.tsx                  | 1 -
 public/app/features/explore/Typeahead.tsx                  | 2 +-
 public/app/features/panel/metrics_tab.ts                   | 3 ---
 public/app/plugins/datasource/influxdb/datasource.ts       | 2 +-
 .../plugins/datasource/loki/components/LokiQueryField.tsx  | 1 -
 public/app/plugins/datasource/stackdriver/datasource.ts    | 1 -
 public/app/plugins/datasource/stackdriver/query_ctrl.ts    | 1 -
 public/app/plugins/panel/heatmap/rendering.ts              | 7 ++-----
 public/emails/invited_to_org.html                          | 2 +-
 public/emails/new_user_invite.html                         | 2 +-
 scripts/webpack/webpack.common.js                          | 4 +---
 scripts/webpack/webpack.prod.js                            | 1 -
 14 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
index 569e0909c4d..120e002ac68 100644
--- a/public/app/features/datasources/settings/BasicSettings.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -16,7 +16,7 @@ const BasicSettings: SFC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
         <div className="gf-form max-width-30" style={{ marginRight: '3px' }}>
           <Label
             tooltip={
-              'The name is used when you select the data source in panels. The Default data source is' +
+              'The name is used when you select the data source in panels. The Default data source is ' +
               'preselected in new panels.'
             }
           >
diff --git a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
index 65d4b5ab953..951edf10dcc 100644
--- a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Render should render component 1`] = `
       }
     >
       <Component
-        tooltip="The name is used when you select the data source in panels. The Default data source ispreselected in new panels."
+        tooltip="The name is used when you select the data source in panels. The Default data source is preselected in new panels."
       >
         Name
       </Component>
diff --git a/public/app/features/explore/LogLabels.tsx b/public/app/features/explore/LogLabels.tsx
index 8aa1789017e..7675fb13152 100644
--- a/public/app/features/explore/LogLabels.tsx
+++ b/public/app/features/explore/LogLabels.tsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
 
diff --git a/public/app/features/explore/Typeahead.tsx b/public/app/features/explore/Typeahead.tsx
index 721527fbebe..6d6c60c0553 100644
--- a/public/app/features/explore/Typeahead.tsx
+++ b/public/app/features/explore/Typeahead.tsx
@@ -55,7 +55,7 @@ class TypeaheadItem extends React.PureComponent<TypeaheadItemProps> {
 interface TypeaheadGroupProps {
   items: CompletionItem[];
   label: string;
-  onClickItem: (CompletionItem) => void;
+  onClickItem: (suggestion: CompletionItem) => void;
   selected: CompletionItem;
   prefix?: string;
 }
diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts
index 70b3571e30d..74418484e3a 100644
--- a/public/app/features/panel/metrics_tab.ts
+++ b/public/app/features/panel/metrics_tab.ts
@@ -1,6 +1,3 @@
-// Libraries
-import _ from 'lodash';
-
 // Services & utils
 import coreModule from 'app/core/core_module';
 import { Emitter } from 'app/core/utils/emitter';
diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts
index cf9b95882bc..8f1904dbc55 100644
--- a/public/app/plugins/datasource/influxdb/datasource.ts
+++ b/public/app/plugins/datasource/influxdb/datasource.ts
@@ -308,7 +308,7 @@ export default class InfluxDatasource {
         return 'now()';
       }
 
-      const parts = /^now-(\d+)([d|h|m|s])$/.exec(date);
+      const parts = /^now-(\d+)([dhms])$/.exec(date);
       if (parts) {
         const amount = parseInt(parts[1], 10);
         const unit = parts[2];
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index 820c964f7b1..e05d2a998b4 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React from 'react';
 import Cascader from 'rc-cascader';
 import PluginPrism from 'slate-prism';
diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index d1545655652..b6050ebf908 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -16,7 +16,6 @@ export default class StackdriverDatasource {
   constructor(instanceSettings, private backendSrv, private templateSrv, private timeSrv) {
     this.baseUrl = `/stackdriver/`;
     this.url = instanceSettings.url;
-    this.doRequest = this.doRequest;
     this.id = instanceSettings.id;
     this.projectName = instanceSettings.jsonData.defaultProject || '';
     this.authenticationType = instanceSettings.jsonData.authenticationType || 'jwt';
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index c2607964456..22477cdf9fd 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -88,7 +88,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
         try {
           jsonBody = JSON.parse(queryRes.error);
         } catch {
-          this.lastQueryError = queryRes.error;
         }
 
         this.lastQueryError = jsonBody.error.message;
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index 8092eaaeb9a..5d44231e362 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -251,7 +251,6 @@ export class HeatmapRenderer {
     if (tickInterval === 0) {
       yMax = max * this.dataRangeWidingFactor;
       yMin = min - min * (this.dataRangeWidingFactor - 1);
-      tickInterval = (yMax - yMin) / 2;
     } else {
       yMax = Math.ceil((max + yWiding) / tickInterval) * tickInterval;
       yMin = Math.floor((min - yWiding) / tickInterval) * tickInterval;
@@ -389,9 +388,7 @@ export class HeatmapRenderer {
 
   // Adjust data range to log base
   adjustLogRange(min, max, logBase) {
-    let yMin, yMax;
-
-    yMin = this.data.heatmapStats.minLog;
+    let yMin = this.data.heatmapStats.minLog;
     if (this.data.heatmapStats.minLog > 1 || !this.data.heatmapStats.minLog) {
       yMin = 1;
     } else {
@@ -399,7 +396,7 @@ export class HeatmapRenderer {
     }
 
     // Adjust max Y value to log base
-    yMax = this.adjustLogMax(this.data.heatmapStats.max, logBase);
+    const yMax = this.adjustLogMax(this.data.heatmapStats.max, logBase);
 
     return { yMin, yMax };
   }
diff --git a/public/emails/invited_to_org.html b/public/emails/invited_to_org.html
index 30f2b34ee9a..16705e7973b 100644
--- a/public/emails/invited_to_org.html
+++ b/public/emails/invited_to_org.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="viewport" content="width=device-width" />
diff --git a/public/emails/new_user_invite.html b/public/emails/new_user_invite.html
index b925ced7267..cef3a210136 100644
--- a/public/emails/new_user_invite.html
+++ b/public/emails/new_user_invite.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="viewport" content="width=device-width" />
diff --git a/scripts/webpack/webpack.common.js b/scripts/webpack/webpack.common.js
index ae7222e8374..cdc17b5ec00 100644
--- a/scripts/webpack/webpack.common.js
+++ b/scripts/webpack/webpack.common.js
@@ -3,9 +3,6 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = {
   target: 'web',
-  stats: {
-    children: false
-  },
   entry: {
     app: './public/app/index.ts',
   },
@@ -25,6 +22,7 @@ module.exports = {
     ],
   },
   stats: {
+    children: false,
     warningsFilter: /export .* was not found in/
   },
   node: {
diff --git a/scripts/webpack/webpack.prod.js b/scripts/webpack/webpack.prod.js
index d45c78352b0..880b7e08ed2 100644
--- a/scripts/webpack/webpack.prod.js
+++ b/scripts/webpack/webpack.prod.js
@@ -3,7 +3,6 @@
 const merge = require('webpack-merge');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
-const webpack = require('webpack');
 const path = require('path');
 const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
 const HtmlWebpackPlugin = require("html-webpack-plugin");

From 179b19c71b022e07b3ee1a8e65ea6bf0852371fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 6 Jan 2019 17:03:38 +0100
Subject: [PATCH 126/352] Fixed issue with cut legend in firefox & mobile
 devices, fixes #14744 and #14489

---
 .../app/core/components/CustomScrollbar/CustomScrollbar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
index 590c11c0615..977892c637d 100644
--- a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
@@ -28,8 +28,10 @@ class CustomScrollbar extends PureComponent<Props> {
       <Scrollbars
         className={customClassName}
         autoHeight={true}
-        autoHeightMin={'inherit'}
-        autoHeightMax={'inherit'}
+        // These autoHeightMin & autoHeightMax options affect firefox and chrome differently.
+        // Before these where set to inhert but that caused problems with cut of legends in firefox
+        autoHeightMin={'0'}
+        autoHeightMax={'100%'}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}

From 64163f019895248812dd5ec128cda5946f5d3e33 Mon Sep 17 00:00:00 2001
From: jaken551 <jaken551@gmail.com>
Date: Sun, 6 Jan 2019 15:21:58 -0500
Subject: [PATCH 127/352] 14722 - removing unnecessary arn check that breaks
 assume role feature in other AWS partitions

---
 pkg/tsdb/cloudwatch/credentials.go | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pkg/tsdb/cloudwatch/credentials.go b/pkg/tsdb/cloudwatch/credentials.go
index 165f8fdbe97..fb92c827f7c 100644
--- a/pkg/tsdb/cloudwatch/credentials.go
+++ b/pkg/tsdb/cloudwatch/credentials.go
@@ -3,7 +3,6 @@ package cloudwatch
 import (
 	"fmt"
 	"os"
-	"strings"
 	"sync"
 	"time"
 
@@ -43,7 +42,7 @@ func GetCredentials(dsInfo *DatasourceInfo) (*credentials.Credentials, error) {
 	secretAccessKey := ""
 	sessionToken := ""
 	var expiration *time.Time = nil
-	if dsInfo.AuthType == "arn" && strings.Index(dsInfo.AssumeRoleArn, "arn:aws:iam:") == 0 {
+	if dsInfo.AuthType == "arn" {
 		params := &sts.AssumeRoleInput{
 			RoleArn:         aws.String(dsInfo.AssumeRoleArn),
 			RoleSessionName: aws.String("GrafanaSession"),

From 294fb7b3bcb698fa2f30099e5b621774e269c7de Mon Sep 17 00:00:00 2001
From: Andrew Prokhorenkov <andrew.prokhorenkov@gmail.com>
Date: Sun, 6 Jan 2019 16:57:44 -0600
Subject: [PATCH 128/352] fix JSON in responses for Admin API documentation

---
 docs/sources/http_api/admin.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/sources/http_api/admin.md b/docs/sources/http_api/admin.md
index 2d4be21bb78..a27fd2aac14 100644
--- a/docs/sources/http_api/admin.md
+++ b/docs/sources/http_api/admin.md
@@ -285,7 +285,7 @@ Content-Type: application/json
 HTTP/1.1 200
 Content-Type: application/json
 
-{message: "User permissions updated"}
+{"message": "User permissions updated"}
 ```
 
 ## Delete global User
@@ -308,7 +308,7 @@ Content-Type: application/json
 HTTP/1.1 200
 Content-Type: application/json
 
-{message: "User deleted"}
+{"message": "User deleted"}
 ```
 
 ## Pause all alerts
@@ -339,5 +339,5 @@ JSON Body schema:
 HTTP/1.1 200
 Content-Type: application/json
 
-{state: "new state", message: "alerts pause/un paused", "alertsAffected": 100}
+{"state": "new state", "message": "alerts pause/un paused", "alertsAffected": 100}
 ```

From 0a936a55b4ef61cd80faa2621cc6c8e2a9b20567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 7 Jan 2019 11:01:31 +0100
Subject: [PATCH 129/352] Fixed new gometalinter issues

---
 pkg/components/dashdiffs/formatter_json.go | 49 +++++++++-------------
 pkg/services/sqlstore/login_attempt.go     |  8 ++--
 2 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/pkg/components/dashdiffs/formatter_json.go b/pkg/components/dashdiffs/formatter_json.go
index 488a345d492..09dac1ae5ac 100644
--- a/pkg/components/dashdiffs/formatter_json.go
+++ b/pkg/components/dashdiffs/formatter_json.go
@@ -206,10 +206,9 @@ func (f *JSONFormatter) processObject(object map[string]interface{}, deltas []di
 
 	// Added
 	for _, delta := range deltas {
-		switch delta.(type) {
+		switch delta := delta.(type) {
 		case *diff.Added:
-			d := delta.(*diff.Added)
-			f.printRecursive(d.Position.String(), d.Value, ChangeAdded)
+			f.printRecursive(delta.Position.String(), delta.Value, ChangeAdded)
 		}
 	}
 
@@ -222,9 +221,8 @@ func (f *JSONFormatter) processItem(value interface{}, deltas []diff.Delta, posi
 	if len(matchedDeltas) > 0 {
 		for _, matchedDelta := range matchedDeltas {
 
-			switch matchedDelta.(type) {
+			switch matchedDelta := matchedDelta.(type) {
 			case *diff.Object:
-				d := matchedDelta.(*diff.Object)
 				switch value.(type) {
 				case map[string]interface{}:
 					//ok
@@ -238,7 +236,7 @@ func (f *JSONFormatter) processItem(value interface{}, deltas []diff.Delta, posi
 				f.print("{")
 				f.closeLine()
 				f.push(positionStr, len(o), false)
-				f.processObject(o, d.Deltas)
+				f.processObject(o, matchedDelta.Deltas)
 				f.pop()
 				f.newLine(ChangeNil)
 				f.print("}")
@@ -246,7 +244,6 @@ func (f *JSONFormatter) processItem(value interface{}, deltas []diff.Delta, posi
 				f.closeLine()
 
 			case *diff.Array:
-				d := matchedDelta.(*diff.Array)
 				switch value.(type) {
 				case []interface{}:
 					//ok
@@ -260,7 +257,7 @@ func (f *JSONFormatter) processItem(value interface{}, deltas []diff.Delta, posi
 				f.print("[")
 				f.closeLine()
 				f.push(positionStr, len(a), true)
-				f.processArray(a, d.Deltas)
+				f.processArray(a, matchedDelta.Deltas)
 				f.pop()
 				f.newLine(ChangeNil)
 				f.print("]")
@@ -268,27 +265,23 @@ func (f *JSONFormatter) processItem(value interface{}, deltas []diff.Delta, posi
 				f.closeLine()
 
 			case *diff.Added:
-				d := matchedDelta.(*diff.Added)
-				f.printRecursive(positionStr, d.Value, ChangeAdded)
+				f.printRecursive(positionStr, matchedDelta.Value, ChangeAdded)
 				f.size[len(f.size)-1]++
 
 			case *diff.Modified:
-				d := matchedDelta.(*diff.Modified)
 				savedSize := f.size[len(f.size)-1]
-				f.printRecursive(positionStr, d.OldValue, ChangeOld)
+				f.printRecursive(positionStr, matchedDelta.OldValue, ChangeOld)
 				f.size[len(f.size)-1] = savedSize
-				f.printRecursive(positionStr, d.NewValue, ChangeNew)
+				f.printRecursive(positionStr, matchedDelta.NewValue, ChangeNew)
 
 			case *diff.TextDiff:
 				savedSize := f.size[len(f.size)-1]
-				d := matchedDelta.(*diff.TextDiff)
-				f.printRecursive(positionStr, d.OldValue, ChangeOld)
+				f.printRecursive(positionStr, matchedDelta.OldValue, ChangeOld)
 				f.size[len(f.size)-1] = savedSize
-				f.printRecursive(positionStr, d.NewValue, ChangeNew)
+				f.printRecursive(positionStr, matchedDelta.NewValue, ChangeNew)
 
 			case *diff.Deleted:
-				d := matchedDelta.(*diff.Deleted)
-				f.printRecursive(positionStr, d.Value, ChangeDeleted)
+				f.printRecursive(positionStr, matchedDelta.Value, ChangeDeleted)
 
 			default:
 				return errors.New("Unknown Delta type detected")
@@ -305,13 +298,13 @@ func (f *JSONFormatter) processItem(value interface{}, deltas []diff.Delta, posi
 func (f *JSONFormatter) searchDeltas(deltas []diff.Delta, position diff.Position) (results []diff.Delta) {
 	results = make([]diff.Delta, 0)
 	for _, delta := range deltas {
-		switch delta.(type) {
+		switch typedDelta := delta.(type) {
 		case diff.PostDelta:
-			if delta.(diff.PostDelta).PostPosition() == position {
+			if typedDelta.PostPosition() == position {
 				results = append(results, delta)
 			}
 		case diff.PreDelta:
-			if delta.(diff.PreDelta).PrePosition() == position {
+			if typedDelta.PrePosition() == position {
 				results = append(results, delta)
 			}
 		default:
@@ -417,20 +410,19 @@ func (f *JSONFormatter) print(a string) {
 }
 
 func (f *JSONFormatter) printRecursive(name string, value interface{}, change ChangeType) {
-	switch value.(type) {
+	switch value := value.(type) {
 	case map[string]interface{}:
 		f.newLine(change)
 		f.printKey(name)
 		f.print("{")
 		f.closeLine()
 
-		m := value.(map[string]interface{})
-		size := len(m)
+		size := len(value)
 		f.push(name, size, false)
 
-		keys := sortKeys(m)
+		keys := sortKeys(value)
 		for _, key := range keys {
-			f.printRecursive(key, m[key], change)
+			f.printRecursive(key, value[key], change)
 		}
 		f.pop()
 
@@ -445,10 +437,9 @@ func (f *JSONFormatter) printRecursive(name string, value interface{}, change Ch
 		f.print("[")
 		f.closeLine()
 
-		s := value.([]interface{})
-		size := len(s)
+		size := len(value)
 		f.push("", size, true)
-		for _, item := range s {
+		for _, item := range value {
 			f.printRecursive("", item, change)
 		}
 		f.pop()
diff --git a/pkg/services/sqlstore/login_attempt.go b/pkg/services/sqlstore/login_attempt.go
index 78da198e8e7..ceff2394dce 100644
--- a/pkg/services/sqlstore/login_attempt.go
+++ b/pkg/services/sqlstore/login_attempt.go
@@ -78,14 +78,14 @@ func GetUserLoginAttemptCount(query *m.GetUserLoginAttemptCountQuery) error {
 }
 
 func toInt64(i interface{}) int64 {
-	switch i.(type) {
+	switch i := i.(type) {
 	case []byte:
-		n, _ := strconv.ParseInt(string(i.([]byte)), 10, 64)
+		n, _ := strconv.ParseInt(string(i), 10, 64)
 		return n
 	case int:
-		return int64(i.(int))
+		return int64(i)
 	case int64:
-		return i.(int64)
+		return i
 	}
 	return 0
 }

From 4340e81605e9d1122750da00e3adfcf09bd60e51 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 11:06:36 +0100
Subject: [PATCH 130/352] remove not used files

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ------------
 public/sass/components/_group-heading.scss         |  6 ------
 2 files changed, 18 deletions(-)
 delete mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 delete mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
deleted file mode 100644
index 76012ed3e7f..00000000000
--- a/public/app/core/components/Picker/GroupHeading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-
-export const GroupHeading = props => {
-  return (
-    <label className="description-picker-option__button btn picker-option-group">
-      <components.GroupHeading {...props} />
-    </label>
-  );
-};
-
-export default GroupHeading;
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
deleted file mode 100644
index 8fc39c0dc2a..00000000000
--- a/public/sass/components/_group-heading.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.picker-option-group {
-  cursor: default;
-  color: $text-color-weak;
-  font-size: $font-size-sm;
-  font-weight: $lead-font-weight;
-}

From 85ecf5475101c91d96f5ae446c0c598b626eefad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 7 Jan 2019 11:19:44 +0100
Subject: [PATCH 131/352] updated scrollbar snapshot

---
 .../__snapshots__/CustomScrollbar.test.tsx.snap           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 310eb714af9..0a7de5fcffe 100644
--- a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -6,8 +6,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
   style={
     Object {
       "height": "auto",
-      "maxHeight": "inherit",
-      "minHeight": "inherit",
+      "maxHeight": "100%",
+      "minHeight": "0",
       "overflow": "hidden",
       "position": "relative",
       "width": "100%",
@@ -23,8 +23,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
         "left": undefined,
         "marginBottom": 0,
         "marginRight": 0,
-        "maxHeight": "calc(inherit + 0px)",
-        "minHeight": "calc(inherit + 0px)",
+        "maxHeight": "calc(100% + 0px)",
+        "minHeight": "calc(0 + 0px)",
         "overflow": "scroll",
         "position": "relative",
         "right": undefined,

From ad4f39101ab49e4e78c464f88444f8b3d7b50191 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 13:14:55 +0100
Subject: [PATCH 132/352] Wrap react select component in angular directive

---
 .../stackdriver/components/OptionPicker.tsx   | 48 +++++++++++++++++++
 .../stackdriver/partials/query.filter.html    | 34 ++++++-------
 .../datasource/stackdriver/query_ctrl.ts      |  9 ++++
 .../stackdriver/query_filter_ctrl.ts          | 16 +++++--
 4 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
new file mode 100644
index 00000000000..f83777e5f79
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+// import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'react-select';
+// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import _ from 'lodash';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, options, selected, placeholder, className } = this.props;
+    const selectedOption = options.find(metric => metric.value === selected);
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={options}
+        components={{
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isDisabled={false}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index b96b0720e33..1d87c8a3005 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,26 +1,26 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <select
-      class="gf-form-input width-12"
-      ng-model="ctrl.service"
-      ng-options="f.value as f.text for f in ctrl.services"
-      ng-change="ctrl.onServiceChange(ctrl.service)"
-    ></select>
+    <option-picker
+      onChange="ctrl.handleServiceChange"
+      selected="ctrl.service"
+      options="ctrl.services"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
+  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
+</div>
+<div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <gf-form-dropdown
-      model="ctrl.metricType"
-      get-options="ctrl.metrics"
-      class="min-width-20"
-      disabled
-      type="text"
-      allow-custom="true"
-      lookup-text="true"
-      css-class="min-width-12"
-      on-change="ctrl.onMetricTypeChange()"
-    ></gf-form-dropdown>
+    <option-picker
+      onChange="ctrl.handleMetricTypeChange"
+      selected="ctrl.metricType"
+      options="ctrl.metrics"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 22477cdf9fd..4a881d3c8df 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,6 +2,8 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
+import { OptionPicker } from './components/OptionPicker';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -64,6 +66,13 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+    react2AngularDirective('optionPicker', OptionPicker, [
+      'options',
+      'onChange',
+      'selected',
+      'className',
+      'placeholder',
+    ]);
   }
 
   onDataReceived(dataList) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 0f5dce559fd..7926da9aa1c 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -59,6 +59,13 @@ export class StackdriverFilterCtrl {
       .then(this.getLabels.bind(this));
 
     this.initSegments($scope.hideGroupBys);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    this.handleServiceChange = this.handleServiceChange.bind(this);
+  }
+
+  handleMetricTypeChange(value) {
+    this.metricType = value;
+    this.onMetricTypeChange();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -110,7 +117,7 @@ export class StackdriverFilterCtrl {
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        text: m.serviceShortName,
+        label: m.serviceShortName,
       };
     });
 
@@ -128,7 +135,8 @@ export class StackdriverFilterCtrl {
         value: m.type,
         serviceShortName: m.serviceShortName,
         text: m.displayName,
-        title: m.description,
+        label: m.displayName,
+        description: m.description,
       };
     });
 
@@ -167,8 +175,8 @@ export class StackdriverFilterCtrl {
     });
   }
 
-  onServiceChange() {
-    this.target.service = this.service;
+  handleServiceChange(service) {
+    this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
     this.setMetricType();
     this.getLabels();

From d75860a72c1f8f5150f76d456d97fa23fc0eadd2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:11:18 +0100
Subject: [PATCH 133/352] wip: add basic option header

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ++++++++++++
 public/sass/_grafana.scss                          |  1 +
 public/sass/components/_group-heading.scss         |  5 +++++
 3 files changed, 18 insertions(+)
 create mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 create mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
new file mode 100644
index 00000000000..76012ed3e7f
--- /dev/null
+++ b/public/app/core/components/Picker/GroupHeading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { components } from 'react-select';
+
+export const GroupHeading = props => {
+  return (
+    <label className="description-picker-option__button btn picker-option-group">
+      <components.GroupHeading {...props} />
+    </label>
+  );
+};
+
+export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 404a212241b..3acb76e960d 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -105,6 +105,7 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
+@import 'components/group-heading';
 @import 'components/value-mappings';
 @import 'components/popover-box';
 
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
new file mode 100644
index 00000000000..9656277d123
--- /dev/null
+++ b/public/sass/components/_group-heading.scss
@@ -0,0 +1,5 @@
+.picker-option-group {
+  cursor: default;
+  font-weight: $lead-font-weight;
+  color: $btn-primary-bg-hl;
+}

From 1f3f3363521b9b04d68caf4e2ae586be13b8fbe4 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 11 Dec 2018 20:12:33 +0100
Subject: [PATCH 134/352] wip: add option group component

---
 .../components/OptionGroupPicker.tsx          | 53 +++++++++++++++++++
 .../stackdriver/components/OptionPicker.tsx   | 15 +++---
 .../stackdriver/partials/query.filter.html    | 14 ++---
 .../datasource/stackdriver/query_ctrl.ts      | 10 ++++
 .../stackdriver/query_filter_ctrl.ts          | 39 +++++++++++++-
 5 files changed, 117 insertions(+), 14 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
new file mode 100644
index 00000000000..7401b226413
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Select from 'react-select';
+import _ from 'lodash';
+
+import GroupHeading from 'app/core/components/Picker/GroupHeading';
+import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
+import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+
+export interface Props {
+  onChange: (value: string) => void;
+  groups: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export class OptionGroupPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
+    const options = _.flatten(groups.map(o => o.options));
+    const selectedOption = options.find(option => option.value === selected);
+
+    return (
+      <Select
+        placeholder={placeholder}
+        classNamePrefix={`gf-form-select-box`}
+        className={className}
+        options={groups}
+        components={{
+          GroupHeading,
+          Option: DescriptionOption,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        styles={ResetStyles}
+        isSearchable={searchable}
+        maxMenuHeight={50}
+        onChange={option => onChange(option.value)}
+        getOptionValue={i => i.value}
+        getOptionLabel={i => i.label}
+        value={selectedOption}
+        noOptionsMessage={() => 'No metrics found'}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index f83777e5f79..3d99ed3bafc 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
-// import SimplePicker from 'app/core/components/Picker/SimplePicker';
 import Select from 'react-select';
-// import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import _ from 'lodash';
+
 import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
 import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
 import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-import _ from 'lodash';
 
 export interface Props {
   onChange: (value: string) => void;
   options: any[];
+  searchable: boolean;
   selected: string;
   placeholder?: string;
   className?: string;
+  groups?: boolean;
 }
 
 export class OptionPicker extends React.Component<Props, any> {
@@ -22,8 +23,9 @@ export class OptionPicker extends React.Component<Props, any> {
   }
 
   render() {
-    const { onChange, options, selected, placeholder, className } = this.props;
-    const selectedOption = options.find(metric => metric.value === selected);
+    const { onChange, options, selected, placeholder, className, searchable } = this.props;
+    const selectedOption = options.find(option => option.value === selected);
+
     return (
       <Select
         placeholder={placeholder}
@@ -36,7 +38,8 @@ export class OptionPicker extends React.Component<Props, any> {
           NoOptionsMessage,
         }}
         styles={ResetStyles}
-        isDisabled={false}
+        isSearchable={searchable}
+        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 1d87c8a3005..df3821ac463 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -5,8 +5,9 @@
       onChange="ctrl.handleServiceChange"
       selected="ctrl.service"
       options="ctrl.services"
-      placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
+      searchable="false"
+      placeholder="ctrl.defaultServiceValue"
+      className="&quot;width-15&quot;"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -14,13 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.metricType"
-      options="ctrl.metrics"
+      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      searchable="true"
       placeholder="ctrl.defaultDropdownValue"
-      className="width-12"
-    ></option-picker>
+      className="&quot;width-15&quot;"
+    ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 4a881d3c8df..48ea8ce140a 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -3,6 +3,7 @@ import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
 import { OptionPicker } from './components/OptionPicker';
+import { OptionGroupPicker } from './components/OptionGroupPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -70,6 +71,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'options',
       'onChange',
       'selected',
+      'searchable',
+      'className',
+      'placeholder',
+    ]);
+    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
+      'groups',
+      'onChange',
+      'selected',
+      'searchable',
       'className',
       'placeholder',
     ]);
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 7926da9aa1c..dd7178ecca0 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -36,6 +36,7 @@ export class StackdriverFilterCtrl {
   metricType: string;
   metricDescriptors: any[];
   metrics: any[];
+  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -52,6 +53,7 @@ export class StackdriverFilterCtrl {
 
     this.metricDescriptors = [];
     this.metrics = [];
+    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -106,6 +108,7 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
+      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -113,11 +116,11 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, text: this.$scope.defaultServiceValue };
+    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        label: m.serviceShortName,
+        label: _.startCase(m.serviceShortName),
       };
     });
 
@@ -128,6 +131,37 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
   }
 
+  getMetricGroups() {
+    return this.metrics.reduce((acc, curr) => {
+      const group = acc.find(group => group.service === curr.service);
+      if (group) {
+        group.options = [...group.options, { value: curr.value, label: curr.label }];
+      } else {
+        acc = [
+          ...acc,
+          {
+            label: _.startCase(curr.serviceShortName),
+            service: curr.service,
+            options: [{ value: curr.value, label: curr.label }],
+          },
+        ];
+      }
+      return acc;
+    }, []);
+  }
+
+  insertTemplateVariables(options) {
+    const templateVariables = {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+    return [templateVariables, { label: 'Metrics', options }];
+  }
+
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
@@ -178,6 +212,7 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
+    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {

From eea91d288500e42d3bac58757f8d16ef16b3f7bc Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:14:06 +0100
Subject: [PATCH 135/352] remove redundant default value

---
 .../datasource/stackdriver/datasource.ts      |  1 +
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/partials/query.filter.html    | 12 ++--
 .../datasource/stackdriver/query_ctrl.ts      |  7 +-
 .../stackdriver/query_filter_ctrl.ts          | 72 +++++++++++--------
 .../specs/query_filter_ctrl.test.ts           |  2 -
 6 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index b6050ebf908..060028dd099 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -273,6 +273,7 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
+
           return m;
         });
       }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 5c7bc8935b1..66961d106aa 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,6 +1,5 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource" default-dropdown-value="ctrl.defaultDropdownValue"
-    default-service-value="ctrl.defaultServiceValue"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index df3821ac463..583744d0e67 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -6,8 +6,8 @@
       selected="ctrl.service"
       options="ctrl.services"
       searchable="false"
-      placeholder="ctrl.defaultServiceValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Services'"
+      className="'width-15'"
     ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -17,11 +17,11 @@
     <span class="gf-form-label width-9 query-keyword">Metric</span>
     <option-group-picker
       onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.metricType"
-      groups="ctrl.insertTemplateVariables(ctrl.defaultServiceValue !== ctrl.service ? ctrl.metrics : ctrl.metricGroups)"
+      selected="ctrl.target.metricType"
+      groups="ctrl.getMetricGroups()"
       searchable="true"
-      placeholder="ctrl.defaultDropdownValue"
-      className="&quot;width-15&quot;"
+      placeholder="'Select Metric'"
+      className="'width-15'"
     ></option-group-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 48ea8ce140a..bd591ecf796 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -34,13 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     valueType: any;
   };
 
-  defaultDropdownValue = 'Select Metric';
-  defaultServiceValue = 'All Services';
-
   defaults = {
     defaultProject: 'loading project...',
-    metricType: this.defaultDropdownValue,
-    service: this.defaultServiceValue,
+    metricType: '',
+    service: '',
     metric: '',
     unit: '',
     aggregation: {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index dd7178ecca0..ba96cfc5a60 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -15,8 +15,6 @@ export class StackdriverFilter {
         target: '=',
         datasource: '=',
         refresh: '&',
-        defaultDropdownValue: '<',
-        defaultServiceValue: '<',
         hideGroupBys: '<',
       },
     };
@@ -48,9 +46,6 @@ export class StackdriverFilterCtrl {
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
     this.datasource = $scope.datasource;
     this.target = $scope.target;
-    this.metricType = $scope.defaultDropdownValue;
-    this.service = $scope.defaultServiceValue;
-
     this.metricDescriptors = [];
     this.metrics = [];
     this.metricGroups = [];
@@ -66,7 +61,7 @@ export class StackdriverFilterCtrl {
   }
 
   handleMetricTypeChange(value) {
-    this.metricType = value;
+    this.target.metricType = value;
     this.onMetricTypeChange();
   }
 
@@ -116,7 +111,6 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const defaultValue = { value: this.$scope.defaultServiceValue, label: this.$scope.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
@@ -128,10 +122,10 @@ export class StackdriverFilterCtrl {
       this.service = this.target.service;
     }
 
-    return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
+    return services.length > 0 ? _.uniqBy(services, 'value') : [];
   }
 
-  getMetricGroups() {
+  getMetricGroupsOld() {
     return this.metrics.reduce((acc, curr) => {
       const group = acc.find(group => group.service === curr.service);
       if (group) {
@@ -150,6 +144,27 @@ export class StackdriverFilterCtrl {
     }, []);
   }
 
+  getMetricGroups() {
+    return [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Metrics',
+        options: this.metrics,
+      },
+    ];
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+        description: `$${v.definition}`,
+      })),
+    };
+  }
+
   insertTemplateVariables(options) {
     const templateVariables = {
       label: 'Template Variables',
@@ -174,29 +189,28 @@ export class StackdriverFilterCtrl {
       };
     });
 
-    let result;
-    if (this.target.service === this.$scope.defaultServiceValue) {
-      result = metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
-    } else {
-      result = metrics.filter(m => m.service === this.target.service);
+    const metricsByService = metrics.filter(m => m.service === this.target.service);
+    if (
+      metricsByService.length > 0 &&
+      !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
+    ) {
+      this.target.metricType = metricsByService[0].value;
     }
-
-    if (result.find(m => m.value === this.templateSrv.replace(this.target.metricType))) {
-      this.metricType = this.target.metricType;
-    } else if (result.length > 0) {
-      this.metricType = this.target.metricType = result[0].value;
-    }
-    return result;
+    return metricsByService;
   }
 
   async getLabels() {
     this.loadLabelsPromise = new Promise(async resolve => {
       try {
-        const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
-        this.metricLabels = meta.metricLabels;
-        this.resourceLabels = meta.resourceLabels;
-        this.resourceTypes = meta.resourceTypes;
-        resolve();
+        if (this.target.metricType) {
+          const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId);
+          this.metricLabels = meta.metricLabels;
+          this.resourceLabels = meta.resourceLabels;
+          this.resourceTypes = meta.resourceTypes;
+          resolve();
+        } else {
+          resolve();
+        }
       } catch (error) {
         if (error.data && error.data.message) {
           console.log(error.data.message);
@@ -216,7 +230,7 @@ export class StackdriverFilterCtrl {
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.find(m => m.value === this.target.metricType)) {
-      this.target.metricType = this.$scope.defaultDropdownValue;
+      this.target.metricType = '';
     } else {
       this.$scope.refresh();
     }
@@ -229,9 +243,9 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    this.target.metricType = this.metricType;
+    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.metricType)
+      m => m.type === this.templateSrv.replace(this.target.metricType)
     );
     this.target.unit = unit;
     this.target.valueType = valueType;
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 020db584508..e8d04357cb8 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -409,8 +409,6 @@ function createCtrlWithFakes(existingFilters?: string[]) {
         return 'project';
       },
     },
-    defaultDropdownValue: 'Select Metric',
-    defaultServiceValue: 'All Services',
     refresh: () => {},
   };
 

From caedbc67b8c6297f6eac42ea4c187b1f4c3647d2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 09:57:30 +0100
Subject: [PATCH 136/352] use new option group in aggregation directive

---
 .../partials/query.aggregation.html           | 43 ++++++----
 .../stackdriver/partials/query.editor.html    |  3 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 79 ++++++++++++++++---
 3 files changed, 97 insertions(+), 28 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 5f16d3fc61d..7396c6eb546 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,16 +2,21 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAggregationChange"
+        selected="ctrl.target.aggregation.crossSeriesReducer"
+        groups="ctrl.aggOptions"
+        searchable="true"
+        placeholder="'Select Aggregation'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
       <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
         <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
-        Advanced Options
+        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
       </a>
     </label>
   </div>
@@ -20,27 +25,35 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentChange"
+        selected="ctrl.target.aggregation.perSeriesAligner"
+        groups="ctrl.alignOptions"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
 
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" class="gf-form width-12"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentPeriodChange"
+        selected="ctrl.target.aggregation.alignmentPeriod"
+        groups="ctrl.alignmentPeriods"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
 
   <div class="gf-form gf-form--grow">
-    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
-      {{ctrl.formatAlignmentText()}}
-    </label>
+    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 66961d106aa..8760aaf1bb3 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,5 +1,6 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+    ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 628cc494242..f5ff3ad3143 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
-import * as options from './constants';
+import { alignmentPeriods } from './constants';
 import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
 import kbn from 'app/core/utils/kbn';
 
@@ -29,9 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = options.alignmentPeriods;
-    this.aggOptions = options.aggOptions;
-    this.alignOptions = options.alignOptions;
+    this.alignmentPeriods = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Periods',
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -39,30 +46,68 @@ export class StackdriverAggregationCtrl {
       self.setAggOptions();
       self.setAlignOptions();
     });
+    this.handleAlignmentChange = this.handleAlignmentChange.bind(this);
+    this.handleAggregationChange = this.handleAggregationChange.bind(this);
+    this.handleAlignmentPeriodChange = this.handleAlignmentPeriodChange.bind(this);
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    this.alignOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Options',
+        options: alignments,
+      },
+    ];
+    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
     }
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
-
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+    this.aggOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Aggregations',
+        options: aggregations,
+      },
+    ];
+  }
+
+  handleAlignmentChange(value) {
+    this.target.aggregation.perSeriesAligner = value;
+    this.$scope.refresh();
+  }
+
+  handleAggregationChange(value) {
+    this.target.aggregation.crossSeriesReducer = value;
+    this.$scope.refresh();
+  }
+
+  handleAlignmentPeriodChange(value) {
+    this.target.aggregation.alignmentPeriod = value;
+    this.$scope.refresh();
   }
 
   formatAlignmentText() {
-    const selectedAlignment = this.alignOptions.find(
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const selectedAlignment = alignments.find(
       ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
@@ -74,6 +119,16 @@ export class StackdriverAggregationCtrl {
     const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);

From 2bc38b7907d23dc7038cdd04d02dc8185c0d764b Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:55:23 +0100
Subject: [PATCH 137/352] remove redundant default value

---
 .../datasource/stackdriver/components/OptionGroupPicker.tsx      | 1 -
 .../plugins/datasource/stackdriver/components/OptionPicker.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
index 7401b226413..f7863dd2a16 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
@@ -41,7 +41,6 @@ export class OptionGroupPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
index 3d99ed3bafc..64d68f1bd70 100644
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
@@ -39,7 +39,6 @@ export class OptionPicker extends React.Component<Props, any> {
         }}
         styles={ResetStyles}
         isSearchable={searchable}
-        maxMenuHeight={50}
         onChange={option => onChange(option.value)}
         getOptionValue={i => i.value}
         getOptionLabel={i => i.label}

From b683a19ff6d6278b11b3b963221f2d224815a466 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 12:57:57 +0100
Subject: [PATCH 138/352] update failing tests

---
 .../stackdriver/query_aggregation_ctrl.ts     |  6 +-
 .../stackdriver/query_filter_ctrl.ts          | 14 +----
 .../specs/query_aggregation_ctrl.test.ts      | 57 +++++++++++++++++--
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index f5ff3ad3143..d4478c6214c 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,6 +52,7 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
+    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
@@ -78,7 +79,7 @@ export class StackdriverAggregationCtrl {
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
     this.aggOptions = [
@@ -116,7 +117,8 @@ export class StackdriverAggregationCtrl {
   }
 
   deselectAggregationOption(notValidOptionValue: string) {
-    const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
+    const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index ba96cfc5a60..74ca2c9b067 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -160,23 +160,11 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        description: `$${v.definition}`,
+        // description: `$${v.definition}`,
       })),
     };
   }
 
-  insertTemplateVariables(options) {
-    const templateVariables = {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-        description: `$${v.definition}`,
-      })),
-    };
-    return [templateVariables, { label: 'Metrics', options }];
-  }
-
   getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       return {
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 81011f5dfe0..6e83824d504 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,27 +17,68 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(11);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(2);
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          expect(ctrl.alignOptions.length).toBe(9);
-          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(11);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
+      describe('and result is double and delta and no group by is used', () => {
+        beforeEach(async () => {
+          ctrl = new StackdriverAggregationCtrl(
+            {
+              $on: () => {},
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'DELTA',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
+            }
+          );
+        });
+
+        it('should populate all alignment options except four', () => {
+          ctrl.setAlignOptions();
+          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
+          expect(templateVariableGroup.options.length).toBe(2);
+          expect(alignOptionGroup.options.length).toBe(9);
+          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+            expect['not'].arrayContaining([
+              'ALIGN_NEXT_OLDER',
+              'ALIGN_INTERPOLATE',
+              'ALIGN_COUNT_TRUE',
+              'ALIGN_COUNT_FALSE',
+              'ALIGN_FRACTION_TRUE',
+            ])
+          );
+        });
+      });
+
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -51,14 +92,18 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(10);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
+          expect(ctrl.aggOptions.length).toBe(2);
+          expect(templateVariableGroup.options.length).toBe(1);
+          expect(aggOptionsGroup.options.length).toBe(10);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From 329d4652fb3004f4c51ae36c029ea04aa9c3d553 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:57:32 +0100
Subject: [PATCH 139/352] cleanup query filter

---
 .../stackdriver/partials/query.filter.html    |  2 +-
 .../stackdriver/query_filter_ctrl.ts          | 62 +++++--------------
 2 files changed, 15 insertions(+), 49 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 583744d0e67..632f89b8248 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -3,7 +3,7 @@
     <span class="gf-form-label width-9 query-keyword">Service</span>
     <option-picker
       onChange="ctrl.handleServiceChange"
-      selected="ctrl.service"
+      selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 74ca2c9b067..d270290abb2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -30,8 +30,6 @@ export class StackdriverFilterCtrl {
   resourceTypeValue = 'resource.type';
   loadLabelsPromise: Promise<any>;
 
-  service: string;
-  metricType: string;
   metricDescriptors: any[];
   metrics: any[];
   metricGroups: any[];
@@ -111,37 +109,12 @@ export class StackdriverFilterCtrl {
   }
 
   getServicesList() {
-    const services = this.metricDescriptors.map(m => {
-      return {
-        value: m.service,
-        label: _.startCase(m.serviceShortName),
-      };
-    });
+    const services = this.metricDescriptors.map(m => ({
+      value: m.service,
+      label: _.startCase(m.serviceShortName),
+    }));
 
-    if (services.find(m => m.value === this.target.service)) {
-      this.service = this.target.service;
-    }
-
-    return services.length > 0 ? _.uniqBy(services, 'value') : [];
-  }
-
-  getMetricGroupsOld() {
-    return this.metrics.reduce((acc, curr) => {
-      const group = acc.find(group => group.service === curr.service);
-      if (group) {
-        group.options = [...group.options, { value: curr.value, label: curr.label }];
-      } else {
-        acc = [
-          ...acc,
-          {
-            label: _.startCase(curr.serviceShortName),
-            service: curr.service,
-            options: [{ value: curr.value, label: curr.label }],
-          },
-        ];
-      }
-      return acc;
-    }, []);
+    return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
   getMetricGroups() {
@@ -149,7 +122,7 @@ export class StackdriverFilterCtrl {
       this.getTemplateVariablesGroup(),
       {
         label: 'Metrics',
-        options: this.metrics,
+        options: this.getMetricsList(),
       },
     ];
   }
@@ -160,24 +133,18 @@ export class StackdriverFilterCtrl {
       options: this.templateSrv.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
-        // description: `$${v.definition}`,
       })),
     };
   }
 
   getMetricsList() {
-    const metrics = this.metricDescriptors.map(m => {
-      return {
-        service: m.service,
-        value: m.type,
-        serviceShortName: m.serviceShortName,
-        text: m.displayName,
-        label: m.displayName,
-        description: m.description,
-      };
-    });
+    const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
+      service: m.service,
+      value: m.type,
+      label: m.displayName,
+      description: m.description,
+    }));
 
-    const metricsByService = metrics.filter(m => m.service === this.target.service);
     if (
       metricsByService.length > 0 &&
       !metricsByService.some(m => m.value === this.templateSrv.replace(this.target.metricType))
@@ -212,12 +179,12 @@ export class StackdriverFilterCtrl {
   }
 
   handleServiceChange(service) {
-    this.target.service = this.service = service;
+    this.target.service = service;
     this.metrics = this.getMetricsList();
     this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
-    if (!this.metrics.find(m => m.value === this.target.metricType)) {
+    if (!this.metrics.some(m => m.value === this.target.metricType)) {
       this.target.metricType = '';
     } else {
       this.$scope.refresh();
@@ -231,7 +198,6 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    // this.target.metricType = this.metricType;
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)
     );

From d632be849a713e4dd771c16091632bbfef7c0de3 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:58:25 +0100
Subject: [PATCH 140/352] use same color for label as in explore dropdown

---
 public/sass/components/_group-heading.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
index 9656277d123..8fc39c0dc2a 100644
--- a/public/sass/components/_group-heading.scss
+++ b/public/sass/components/_group-heading.scss
@@ -1,5 +1,6 @@
 .picker-option-group {
   cursor: default;
+  color: $text-color-weak;
+  font-size: $font-size-sm;
   font-weight: $lead-font-weight;
-  color: $btn-primary-bg-hl;
 }

From de9ace731d2bb6e952f7f947fd7b93fadf8cff80 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 13:59:13 +0100
Subject: [PATCH 141/352] fix remove filter bug

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index d270290abb2..8ce2dfde554 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -252,8 +252,10 @@ export class StackdriverFilterCtrl {
       return [];
     }
 
-    this.removeSegment.value = removeText;
-    return [...elements, this.removeSegment];
+    return [
+      ...elements,
+      this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
+    ];
   }
 
   async getGroupBys(segment) {

From 1090e0ae2f09132d587958c1ed54f6044b75e88c Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 12 Dec 2018 14:08:47 +0100
Subject: [PATCH 142/352] remove on metric type change

---
 .../datasource/stackdriver/query_filter_ctrl.ts        | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 8ce2dfde554..e617dba5945 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -60,7 +60,9 @@ export class StackdriverFilterCtrl {
 
   handleMetricTypeChange(value) {
     this.target.metricType = value;
-    this.onMetricTypeChange();
+    this.setMetricType();
+    this.$scope.refresh();
+    this.getLabels();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -191,12 +193,6 @@ export class StackdriverFilterCtrl {
     }
   }
 
-  async onMetricTypeChange() {
-    this.setMetricType();
-    this.$scope.refresh();
-    this.getLabels();
-  }
-
   setMetricType() {
     const { valueType, metricKind, unit } = this.metricDescriptors.find(
       m => m.type === this.templateSrv.replace(this.target.metricType)

From 07f0d90718027f12abfdbbcbd7067790777807f9 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:25:13 +0100
Subject: [PATCH 143/352] use new generic picker

---
 .../components/OptionGroupPicker.tsx          | 52 ------------------
 .../stackdriver/components/OptionPicker.tsx   | 50 -----------------
 .../components/StackdriverPicker.tsx          | 53 +++++++++++++++++++
 .../partials/query.aggregation.html           | 16 +++---
 .../stackdriver/partials/query.filter.html    |  6 +--
 .../datasource/stackdriver/query_ctrl.ts      | 13 +----
 6 files changed, 66 insertions(+), 124 deletions(-)
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
 delete mode 100644 public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
deleted file mode 100644
index f7863dd2a16..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import GroupHeading from 'app/core/components/Picker/GroupHeading';
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  groups: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-}
-
-export class OptionGroupPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
-    const options = _.flatten(groups.map(o => o.options));
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={groups}
-        components={{
-          GroupHeading,
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx b/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
deleted file mode 100644
index 64d68f1bd70..00000000000
--- a/public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groups?: boolean;
-}
-
-export class OptionPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, options, selected, placeholder, className, searchable } = this.props;
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={options}
-        components={{
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
new file mode 100644
index 00000000000..b2c447feeff
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import _ from 'lodash';
+import Select from 'app/core/components/Select/Select';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+  groups?: boolean;
+}
+
+export class StackdriverPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  extractOptions(options) {
+    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+  }
+
+  onChange = item => {
+    const extractedOptions = this.extractOptions(this.props.options);
+    const option = extractedOptions.find(option => option.value === item.value);
+    this.props.onChange(option.value);
+  };
+
+  render() {
+    const { options, selected, placeholder, className, searchable } = this.props;
+    const extractedOptions = this.extractOptions(options);
+    const selectedOption = extractedOptions.find(option => option.value === selected);
+
+    return (
+      <Select
+        className={className}
+        isMulti={false}
+        isClearable={false}
+        backspaceRemovesValue={false}
+        onChange={this.onChange}
+        options={options}
+        autoFocus={false}
+        isSearchable={searchable}
+        openMenuOnFocus={true}
+        maxMenuHeight={500}
+        placeholder={placeholder}
+        noOptionsMessage={() => 'No options found'}
+        value={selectedOption}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 7396c6eb546..587f7a42991 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,10 +2,10 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
-        groups="ctrl.aggOptions"
+        options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
-        groups="ctrl.alignOptions"
+        options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
-        groups="ctrl.alignmentPeriods"
+        options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 632f89b8248..9e5f07fd6a0 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -15,14 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-group-picker
+    <option-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      groups="ctrl.getMetricGroups()"
+      options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-group-picker>
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index bd591ecf796..8fde686f7ff 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,8 +2,7 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { OptionPicker } from './components/OptionPicker';
-import { OptionGroupPicker } from './components/OptionGroupPicker';
+import { StackdriverPicker } from './components/StackdriverPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -64,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', OptionPicker, [
+    react2AngularDirective('optionPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',
@@ -72,14 +71,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
     ]);
-    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
-      'groups',
-      'onChange',
-      'selected',
-      'searchable',
-      'className',
-      'placeholder',
-    ]);
   }
 
   onDataReceived(dataList) {

From 793d3d9afa03b7c573557f66cd208342a2596cab Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:26:42 +0100
Subject: [PATCH 144/352] remove old group heading

---
 public/app/core/components/Picker/GroupHeading.tsx | 12 ------------
 public/sass/_grafana.scss                          |  1 -
 public/sass/components/_group-heading.scss         |  6 ------
 3 files changed, 19 deletions(-)
 delete mode 100644 public/app/core/components/Picker/GroupHeading.tsx
 delete mode 100644 public/sass/components/_group-heading.scss

diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
deleted file mode 100644
index 76012ed3e7f..00000000000
--- a/public/app/core/components/Picker/GroupHeading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-
-export const GroupHeading = props => {
-  return (
-    <label className="description-picker-option__button btn picker-option-group">
-      <components.GroupHeading {...props} />
-    </label>
-  );
-};
-
-export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 3acb76e960d..404a212241b 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -105,7 +105,6 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
-@import 'components/group-heading';
 @import 'components/value-mappings';
 @import 'components/popover-box';
 
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
deleted file mode 100644
index 8fc39c0dc2a..00000000000
--- a/public/sass/components/_group-heading.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.picker-option-group {
-  cursor: default;
-  color: $text-color-weak;
-  font-size: $font-size-sm;
-  font-weight: $lead-font-weight;
-}

From b385c105fe2f420a1c2b9f8714346c33ab10225f Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:28:35 +0100
Subject: [PATCH 145/352] remove linebreak

---
 public/app/plugins/datasource/stackdriver/datasource.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index 060028dd099..b6050ebf908 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -273,7 +273,6 @@ export default class StackdriverDatasource {
           m.service = service;
           m.serviceShortName = serviceShortName;
           m.displayName = m.displayName || m.type;
-
           return m;
         });
       }

From a441251cf5dd75c54c63b81f74fc05c41f820871 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:31:11 +0100
Subject: [PATCH 146/352] rename directive

---
 .../stackdriver/partials/query.aggregation.html      | 12 ++++++------
 .../stackdriver/partials/query.filter.html           |  8 ++++----
 .../app/plugins/datasource/stackdriver/query_ctrl.ts |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 587f7a42991..88a85fa4d03 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -2,14 +2,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
         options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
-      ></option-group-picker>
+      ></stackdriver-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
         options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-picker>
+      ></stackdriver-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-picker
+      <stackdriver-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
         options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-picker>
+      ></stackdriver-picker>
     </div>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 9e5f07fd6a0..a31d34bece5 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,28 +1,28 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <option-picker
+    <stackdriver-picker
       onChange="ctrl.handleServiceChange"
       selected="ctrl.target.service"
       options="ctrl.services"
       searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
-    ></option-picker>
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-picker
+    <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
       options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-picker>
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8fde686f7ff..fee6d656f3b 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -63,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', StackdriverPicker, [
+    react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',

From b9b25e766fd448fa480ee903c353b0142e1b085e Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 11:46:07 +0100
Subject: [PATCH 147/352] remove console log

---
 .../app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index d4478c6214c..0077c74a46e 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -52,7 +52,6 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    console.log('this.target.metricKind', this.target.metricKind);
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,

From 93bc7e8fa580eeefe1464fd3dc0976ff1579944c Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 13:03:29 +0100
Subject: [PATCH 148/352] align input widths

---
 .../datasource/stackdriver/partials/query.aggregation.html    | 2 +-
 .../plugins/datasource/stackdriver/partials/query.editor.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 88a85fa4d03..ecbbeddf133 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -23,7 +23,7 @@
 </div>
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
-    <label class="gf-form-label query-keyword width-12">Aligner</label>
+    <label class="gf-form-label query-keyword width-15">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
       <stackdriver-picker
         onChange="ctrl.handleAlignmentChange"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 8760aaf1bb3..1357e97f05f 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -5,7 +5,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label query-keyword width-9">Alias By</span>
-      <input type="text" class="gf-form-input width-30" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
+      <input type="text" class="gf-form-input width-24" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
         ng-model-options="{ debounce: 500 }" />
     </div>
     <div class="gf-form gf-form--grow">
@@ -15,7 +15,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9 query-keyword">Project</span>
-      <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.defaultProject' css-class="min-width-12" />
+      <input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
     </div>
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">

From bdf2573db99d3a7fc4c918b2aeff0c01c33e11da Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 14:30:46 +0100
Subject: [PATCH 149/352] fix condition that expands group if it has a selected
 child. also make it possible to pass expanded as a prop

---
 public/app/core/components/Select/OptionGroup.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Select/OptionGroup.tsx b/public/app/core/components/Select/OptionGroup.tsx
index a001f58c681..2e955579ed4 100644
--- a/public/app/core/components/Select/OptionGroup.tsx
+++ b/public/app/core/components/Select/OptionGroup.tsx
@@ -2,7 +2,11 @@ import React, { PureComponent } from 'react';
 import { GroupProps } from 'react-select/lib/components/Group';
 
 interface ExtendedGroupProps extends GroupProps<any> {
-  data: any;
+  data: {
+    label: string;
+    expanded: boolean;
+    options: any[];
+  };
 }
 
 interface State {
@@ -15,8 +19,10 @@ export default class OptionGroup extends PureComponent<ExtendedGroupProps, State
   };
 
   componentDidMount() {
-    if (this.props.selectProps) {
-      const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
+    if (this.props.data.expanded) {
+      this.setState({ expanded: true });
+    } else if (this.props.selectProps && this.props.selectProps.value) {
+      const { value } = this.props.selectProps.value;
 
       if (value && this.props.options.some(option => option.value === value)) {
         this.setState({ expanded: true });

From d42e39a0726916fbd602cb8a6acf77d98959a76a Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 15:58:33 +0100
Subject: [PATCH 150/352] remove extra arrow div

---
 .../partials/query.aggregation.html           | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index ecbbeddf133..254c7b812cb 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -1,16 +1,16 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAggregationChange"
-        selected="ctrl.target.aggregation.crossSeriesReducer"
-        options="ctrl.aggOptions"
-        searchable="true"
-        placeholder="'Select Aggregation'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAggregationChange"
+      selected="ctrl.target.aggregation.crossSeriesReducer"
+      options="ctrl.aggOptions"
+      searchable="true"
+      placeholder="'Select Aggregation'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Aggregations'"
+    ></stackdriver-picker>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
@@ -24,16 +24,16 @@
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAlignmentChange"
-        selected="ctrl.target.aggregation.perSeriesAligner"
-        options="ctrl.alignOptions"
-        searchable="true"
-        placeholder="'Select Alignment'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAlignmentChange"
+      selected="ctrl.target.aggregation.perSeriesAligner"
+      options="ctrl.alignOptions"
+      searchable="true"
+      placeholder="'Select Alignment'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Alignment Options'"
+    ></stackdriver-picker>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
@@ -41,16 +41,16 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <stackdriver-picker
-        onChange="ctrl.handleAlignmentPeriodChange"
-        selected="ctrl.target.aggregation.alignmentPeriod"
-        options="ctrl.alignmentPeriods"
-        searchable="true"
-        placeholder="'Select Alignment'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
+    <stackdriver-picker
+      onChange="ctrl.handleAlignmentPeriodChange"
+      selected="ctrl.target.aggregation.alignmentPeriod"
+      options="ctrl.alignmentPeriods"
+      searchable="true"
+      placeholder="'Select Alignment'"
+      className="'width-15'"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Alignment Periods'"
+    ></stackdriver-picker>
   </div>
 
   <div class="gf-form gf-form--grow">

From 02b745f10649add61e286b84faf2224187f7c915 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:01:12 +0100
Subject: [PATCH 151/352] move template variable logic to component

---
 .../components/StackdriverPicker.tsx          | 82 +++++++++++++++----
 .../stackdriver/partials/query.filter.html    |  4 +-
 .../stackdriver/query_aggregation_ctrl.ts     | 50 +++--------
 .../datasource/stackdriver/query_ctrl.ts      |  2 +
 .../stackdriver/query_filter_ctrl.ts          | 39 ++-------
 5 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index b2c447feeff..b116d94f18d 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -9,28 +9,76 @@ export interface Props {
   selected: string;
   placeholder?: string;
   className?: string;
-  groups?: boolean;
+  groupName?: string;
+  templateVariables?: any[];
 }
 
-export class StackdriverPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
+interface State {
+  options: any[];
+}
 
-  extractOptions(options) {
-    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-  }
-
-  onChange = item => {
-    const extractedOptions = this.extractOptions(this.props.options);
-    const option = extractedOptions.find(option => option.value === item.value);
-    this.props.onChange(option.value);
+export class StackdriverPicker extends React.Component<Props, State> {
+  static defaultProps = {
+    templateVariables: [],
+    options: [],
+    groupName: 'Options',
   };
 
+  constructor(props) {
+    super(props);
+    this.state = { options: [] };
+  }
+
+  componentDidMount() {
+    this.setState({ options: this.buildOptions(this.props) });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
+      this.setState({ options: this.buildOptions(nextProps) });
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      !_.isEqual(nextProps.options, this.props.options) ||
+      !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
+    );
+  }
+
+  buildOptions({ templateVariables = [], groupName = '', options }) {
+    return templateVariables.length > 0
+      ? [
+          this.getTemplateVariablesGroup(),
+          {
+            label: groupName,
+            expanded: true,
+            options,
+          },
+        ]
+      : options;
+  }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.props.templateVariables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
+
+  getSelectedOption() {
+    const { options } = this.state;
+    const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+    return allOptions.find(option => option.value === this.props.selected);
+  }
+
   render() {
-    const { options, selected, placeholder, className, searchable } = this.props;
-    const extractedOptions = this.extractOptions(options);
-    const selectedOption = extractedOptions.find(option => option.value === selected);
+    const { placeholder, className, searchable, onChange } = this.props;
+    const { options } = this.state;
+    const selectedOption = this.getSelectedOption();
 
     return (
       <Select
@@ -38,7 +86,7 @@ export class StackdriverPicker extends React.Component<Props, any> {
         isMulti={false}
         isClearable={false}
         backspaceRemovesValue={false}
-        onChange={this.onChange}
+        onChange={item => onChange(item.value)}
         options={options}
         autoFocus={false}
         isSearchable={searchable}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index a31d34bece5..a509aa44e62 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -18,7 +18,9 @@
     <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      options="ctrl.getMetricGroups()"
+      options="ctrl.getMetricsList()"
+      template-variables="ctrl.templateSrv.variables"
+      group-name="'Metric Types'"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index 0077c74a46e..c88b61725de 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -29,16 +29,10 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Alignment Periods',
-        options: alignmentPeriods.map(ap => ({
-          ...ap,
-          label: ap.text,
-        })),
-      },
-    ];
+    this.alignmentPeriods = alignmentPeriods.map(ap => ({
+      ...ap,
+      label: ap.text,
+    }));
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -52,42 +46,28 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    this.alignOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Alignment Options',
-        options: alignments,
-      },
-    ];
-    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
+    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
     }
   }
 
   setAggOptions() {
-    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
+      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
-    this.aggOptions = [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Aggregations',
-        options: aggregations,
-      },
-    ];
   }
 
   handleAlignmentChange(value) {
@@ -120,16 +100,6 @@ export class StackdriverAggregationCtrl {
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index fee6d656f3b..21928686122 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -70,6 +70,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'searchable',
       'className',
       'placeholder',
+      'groupName',
+      ['templateVariables', { watchDepth: 'reference' }],
     ]);
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index e617dba5945..a2f347e377a 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -32,7 +32,6 @@ export class StackdriverFilterCtrl {
 
   metricDescriptors: any[];
   metrics: any[];
-  metricGroups: any[];
   services: any[];
   groupBySegments: any[];
   filterSegments: FilterSegments;
@@ -46,7 +45,6 @@ export class StackdriverFilterCtrl {
     this.target = $scope.target;
     this.metricDescriptors = [];
     this.metrics = [];
-    this.metricGroups = [];
     this.services = [];
 
     this.getCurrentProject()
@@ -103,7 +101,6 @@ export class StackdriverFilterCtrl {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
       this.services = this.getServicesList();
       this.metrics = this.getMetricsList();
-      this.metricGroups = this.getMetricGroups();
       return this.metricDescriptors;
     } else {
       return [];
@@ -119,26 +116,6 @@ export class StackdriverFilterCtrl {
     return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
   }
 
-  getMetricGroups() {
-    return [
-      this.getTemplateVariablesGroup(),
-      {
-        label: 'Metrics',
-        options: this.getMetricsList(),
-      },
-    ];
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.templateSrv.variables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-
   getMetricsList() {
     const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
       service: m.service,
@@ -183,7 +160,6 @@ export class StackdriverFilterCtrl {
   handleServiceChange(service) {
     this.target.service = service;
     this.metrics = this.getMetricsList();
-    this.metricGroups = this.getMetricGroups();
     this.setMetricType();
     this.getLabels();
     if (!this.metrics.some(m => m.value === this.target.metricType)) {
@@ -194,13 +170,14 @@ export class StackdriverFilterCtrl {
   }
 
   setMetricType() {
-    const { valueType, metricKind, unit } = this.metricDescriptors.find(
-      m => m.type === this.templateSrv.replace(this.target.metricType)
-    );
-    this.target.unit = unit;
-    this.target.valueType = valueType;
-    this.target.metricKind = metricKind;
-    this.$rootScope.$broadcast('metricTypeChanged');
+    const metric = this.metricDescriptors.find(m => m.type === this.templateSrv.replace(this.target.metricType));
+    if (metric) {
+      const { valueType, metricKind, unit } = metric;
+      this.target.unit = unit;
+      this.target.valueType = valueType;
+      this.target.metricKind = metricKind;
+      this.$rootScope.$broadcast('metricTypeChanged');
+    }
   }
 
   async createLabelKeyElements() {

From 2b8185cb800ebe012f0338d413a64627fcb29b60 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:09:32 +0100
Subject: [PATCH 152/352] cleanup

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index b116d94f18d..ab903c453cb 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -33,14 +33,15 @@ export class StackdriverPicker extends React.Component<Props, State> {
     this.setState({ options: this.buildOptions(this.props) });
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
       this.setState({ options: this.buildOptions(nextProps) });
     }
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: Props) {
     return (
+      nextProps.selected !== this.props.selected ||
       !_.isEqual(nextProps.options, this.props.options) ||
       !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
     );

From 243c4bfe29240dab456be17eda8def0a61002a06 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:19:49 +0100
Subject: [PATCH 153/352] rollback test state to before template variables were
 added

---
 .../specs/query_aggregation_ctrl.test.ts      | 57 ++-----------------
 1 file changed, 6 insertions(+), 51 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 6e83824d504..81011f5dfe0 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,68 +17,27 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
-              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(2);
-          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(aggOptionsGroup.options.length).toBe(11);
-          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(11);
+          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          const [templateVariableGroup, alignOptionGroup] = ctrl.aggOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(alignOptionGroup.options.length).toBe(11);
-          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.alignOptions.length).toBe(9);
+          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
-      describe('and result is double and delta and no group by is used', () => {
-        beforeEach(async () => {
-          ctrl = new StackdriverAggregationCtrl(
-            {
-              $on: () => {},
-              target: {
-                valueType: 'DOUBLE',
-                metricKind: 'DELTA',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
-              },
-            },
-            {
-              replace: s => s,
-              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
-            }
-          );
-        });
-
-        it('should populate all alignment options except four', () => {
-          ctrl.setAlignOptions();
-          const [templateVariableGroup, alignOptionGroup] = ctrl.alignOptions;
-          expect(templateVariableGroup.options.length).toBe(2);
-          expect(alignOptionGroup.options.length).toBe(9);
-          expect(alignOptionGroup.options.map(o => o.value)).toEqual(
-            expect['not'].arrayContaining([
-              'ALIGN_NEXT_OLDER',
-              'ALIGN_INTERPOLATE',
-              'ALIGN_COUNT_TRUE',
-              'ALIGN_COUNT_FALSE',
-              'ALIGN_FRACTION_TRUE',
-            ])
-          );
-        });
-      });
-
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -92,18 +51,14 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
-              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          const [templateVariableGroup, aggOptionsGroup] = ctrl.aggOptions;
-          expect(ctrl.aggOptions.length).toBe(2);
-          expect(templateVariableGroup.options.length).toBe(1);
-          expect(aggOptionsGroup.options.length).toBe(10);
-          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
+          expect(ctrl.aggOptions.length).toBe(10);
+          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From 5eb22388c3e1b4f3b1e58fa5b75d65457555cebf Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:27:24 +0100
Subject: [PATCH 154/352] remove debug logging

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index a2f347e377a..4012cb733d2 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -146,11 +146,6 @@ export class StackdriverFilterCtrl {
           resolve();
         }
       } catch (error) {
-        if (error.data && error.data.message) {
-          console.log(error.data.message);
-        } else {
-          console.log(error);
-        }
         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.target.metricType]);
         resolve();
       }

From 86a39183ee2acab287e459faec73e72b201017ed Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:41:47 +0100
Subject: [PATCH 155/352] add max width to group header description

---
 public/sass/components/_form_select_box.scss | 28 +++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index a83ca95d038..1a2b9be524c 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -172,18 +172,22 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group__header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  justify-items: center;
-  cursor: pointer;
-  padding: 7px 10px;
-  width: 100%;
-  border-bottom: 1px solid $hr-border-color;
-  text-transform: capitalize;
+.gf-form-select-box__option-group {
+  max-width: 600px;
 
-  .fa {
-    padding-right: 2px;
+  .gf-form-select-box__option-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    justify-items: center;
+    cursor: pointer;
+    padding: 7px 10px;
+    width: 100%;
+    border-bottom: 1px solid $hr-border-color;
+    text-transform: capitalize;
+
+    .fa {
+      padding-right: 2px;
+    }
   }
 }

From 1e5f2f56e05fc391af02c94dd57723b2bfa63dca Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 18 Dec 2018 16:56:16 +0100
Subject: [PATCH 156/352] improve component performance

---
 .../stackdriver/components/StackdriverPicker.tsx         | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index ab903c453cb..30c17e1f983 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -40,11 +40,8 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   shouldComponentUpdate(nextProps: Props) {
-    return (
-      nextProps.selected !== this.props.selected ||
-      !_.isEqual(nextProps.options, this.props.options) ||
-      !_.isEqual(nextProps.templateVariables, this.props.templateVariables)
-    );
+    const nextOptions = this.buildOptions(nextProps);
+    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
   }
 
   buildOptions({ templateVariables = [], groupName = '', options }) {
@@ -89,9 +86,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
         backspaceRemovesValue={false}
         onChange={item => onChange(item.value)}
         options={options}
-        autoFocus={false}
         isSearchable={searchable}
-        openMenuOnFocus={true}
         maxMenuHeight={500}
         placeholder={placeholder}
         noOptionsMessage={() => 'No options found'}

From 3ca5abf5e9d39becbde94008d8d6a69805acd2ab Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:14:55 +0100
Subject: [PATCH 157/352] rename searchable prop

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx | 6 +++---
 .../datasource/stackdriver/partials/query.aggregation.html  | 6 +++---
 .../datasource/stackdriver/partials/query.filter.html       | 4 ++--
 public/app/plugins/datasource/stackdriver/query_ctrl.ts     | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 30c17e1f983..349c4c33b58 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -5,7 +5,7 @@ import Select from 'app/core/components/Select/Select';
 export interface Props {
   onChange: (value: string) => void;
   options: any[];
-  searchable: boolean;
+  isSearchable: boolean;
   selected: string;
   placeholder?: string;
   className?: string;
@@ -74,7 +74,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   render() {
-    const { placeholder, className, searchable, onChange } = this.props;
+    const { placeholder, className, isSearchable, onChange } = this.props;
     const { options } = this.state;
     const selectedOption = this.getSelectedOption();
 
@@ -86,7 +86,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
         backspaceRemovesValue={false}
         onChange={item => onChange(item.value)}
         options={options}
-        isSearchable={searchable}
+        isSearchable={isSearchable}
         maxMenuHeight={500}
         placeholder={placeholder}
         noOptionsMessage={() => 'No options found'}
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 254c7b812cb..3ffcb1d7bbf 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -5,7 +5,7 @@
       onChange="ctrl.handleAggregationChange"
       selected="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Aggregation'"
       className="'width-15'"
       template-variables="ctrl.templateSrv.variables"
@@ -28,7 +28,7 @@
       onChange="ctrl.handleAlignmentChange"
       selected="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       template-variables="ctrl.templateSrv.variables"
@@ -45,7 +45,7 @@
       onChange="ctrl.handleAlignmentPeriodChange"
       selected="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       template-variables="ctrl.templateSrv.variables"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index a509aa44e62..4b87e4d8d44 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -5,7 +5,7 @@
       onChange="ctrl.handleServiceChange"
       selected="ctrl.target.service"
       options="ctrl.services"
-      searchable="false"
+      is-searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
     ></stackdriver-picker>
@@ -21,7 +21,7 @@
       options="ctrl.getMetricsList()"
       template-variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
-      searchable="true"
+      is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
     ></stackdriver-picker>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 21928686122..8b21a589a07 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -67,7 +67,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'options',
       'onChange',
       'selected',
-      'searchable',
+      'isSearchable',
       'className',
       'placeholder',
       'groupName',

From ff762c213f9c80f2944e8f3f85782712a52dbea7 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:19:43 +0100
Subject: [PATCH 158/352] rename selected prop

---
 .../datasource/stackdriver/components/StackdriverPicker.tsx | 6 +++---
 .../datasource/stackdriver/partials/query.aggregation.html  | 6 +++---
 .../datasource/stackdriver/partials/query.filter.html       | 4 ++--
 public/app/plugins/datasource/stackdriver/query_ctrl.ts     | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 349c4c33b58..7f7e6f901fa 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -6,7 +6,7 @@ export interface Props {
   onChange: (value: string) => void;
   options: any[];
   isSearchable: boolean;
-  selected: string;
+  value: string;
   placeholder?: string;
   className?: string;
   groupName?: string;
@@ -41,7 +41,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
 
   shouldComponentUpdate(nextProps: Props) {
     const nextOptions = this.buildOptions(nextProps);
-    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
+    return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
 
   buildOptions({ templateVariables = [], groupName = '', options }) {
@@ -70,7 +70,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
   getSelectedOption() {
     const { options } = this.state;
     const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-    return allOptions.find(option => option.value === this.props.selected);
+    return allOptions.find(option => option.value === this.props.value);
   }
 
   render() {
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 3ffcb1d7bbf..8d053256a2d 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -3,7 +3,7 @@
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <stackdriver-picker
       onChange="ctrl.handleAggregationChange"
-      selected="ctrl.target.aggregation.crossSeriesReducer"
+      value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
       is-searchable="true"
       placeholder="'Select Aggregation'"
@@ -26,7 +26,7 @@
     <label class="gf-form-label query-keyword width-15">Aligner</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentChange"
-      selected="ctrl.target.aggregation.perSeriesAligner"
+      value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
       is-searchable="true"
       placeholder="'Select Alignment'"
@@ -43,7 +43,7 @@
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentPeriodChange"
-      selected="ctrl.target.aggregation.alignmentPeriod"
+      value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
       is-searchable="true"
       placeholder="'Select Alignment'"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 4b87e4d8d44..7ae42e73596 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -3,7 +3,7 @@
     <span class="gf-form-label width-9 query-keyword">Service</span>
     <stackdriver-picker
       onChange="ctrl.handleServiceChange"
-      selected="ctrl.target.service"
+      value="ctrl.target.service"
       options="ctrl.services"
       is-searchable="false"
       placeholder="'Select Services'"
@@ -17,7 +17,7 @@
     <span class="gf-form-label width-9 query-keyword">Metric</span>
     <stackdriver-picker
       onChange="ctrl.handleMetricTypeChange"
-      selected="ctrl.target.metricType"
+      value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
       template-variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 8b21a589a07..9ae5d4daae1 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -66,7 +66,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
-      'selected',
+      'value',
       'isSearchable',
       'className',
       'placeholder',

From 96d65b55b66917f33207c105dd7d38396f31f830 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:23:05 +0100
Subject: [PATCH 159/352] rename template variables prop

---
 .../stackdriver/components/StackdriverPicker.tsx | 16 ++++++++--------
 .../stackdriver/partials/query.aggregation.html  |  6 +++---
 .../stackdriver/partials/query.filter.html       |  2 +-
 .../plugins/datasource/stackdriver/query_ctrl.ts |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 7f7e6f901fa..1cd9dcb1f53 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -10,7 +10,7 @@ export interface Props {
   placeholder?: string;
   className?: string;
   groupName?: string;
-  templateVariables?: any[];
+  variables?: any[];
 }
 
 interface State {
@@ -19,7 +19,7 @@ interface State {
 
 export class StackdriverPicker extends React.Component<Props, State> {
   static defaultProps = {
-    templateVariables: [],
+    variables: [],
     options: [],
     groupName: 'Options',
   };
@@ -34,7 +34,7 @@ export class StackdriverPicker extends React.Component<Props, State> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
+    if (nextProps.options.length > 0 || nextProps.variables.length) {
       this.setState({ options: this.buildOptions(nextProps) });
     }
   }
@@ -44,10 +44,10 @@ export class StackdriverPicker extends React.Component<Props, State> {
     return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
 
-  buildOptions({ templateVariables = [], groupName = '', options }) {
-    return templateVariables.length > 0
+  buildOptions({ variables = [], groupName = '', options }) {
+    return variables.length > 0
       ? [
-          this.getTemplateVariablesGroup(),
+          this.getVariablesGroup(),
           {
             label: groupName,
             expanded: true,
@@ -57,10 +57,10 @@ export class StackdriverPicker extends React.Component<Props, State> {
       : options;
   }
 
-  getTemplateVariablesGroup() {
+  getVariablesGroup() {
     return {
       label: 'Template Variables',
-      options: this.props.templateVariables.map(v => ({
+      options: this.props.variables.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
       })),
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 8d053256a2d..122f14a9cb6 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -8,7 +8,7 @@
       is-searchable="true"
       placeholder="'Select Aggregation'"
       className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Aggregations'"
     ></stackdriver-picker>
   </div>
@@ -31,7 +31,7 @@
       is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Alignment Options'"
     ></stackdriver-picker>
 
@@ -48,7 +48,7 @@
       is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Alignment Periods'"
     ></stackdriver-picker>
   </div>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 7ae42e73596..f93a7a6eb16 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -19,7 +19,7 @@
       onChange="ctrl.handleMetricTypeChange"
       value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
-      template-variables="ctrl.templateSrv.variables"
+      variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
       is-searchable="true"
       placeholder="'Select Metric'"
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 9ae5d4daae1..c8a2daf9ba5 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -71,7 +71,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
       'groupName',
-      ['templateVariables', { watchDepth: 'reference' }],
+      ['variables', { watchDepth: 'reference' }],
     ]);
   }
 

From 58bea1de79ba53e68caa0d2ece986de5a2cca9b0 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:34:13 +0100
Subject: [PATCH 160/352] add template variable type

---
 .../components/StackdriverPicker.tsx          |  4 +++-
 public/app/types/templates.ts                 | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 public/app/types/templates.ts

diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
index 1cd9dcb1f53..49862bb2023 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
+
 import Select from 'app/core/components/Select/Select';
+import { Variable } from 'app/types/templates';
 
 export interface Props {
   onChange: (value: string) => void;
@@ -10,7 +12,7 @@ export interface Props {
   placeholder?: string;
   className?: string;
   groupName?: string;
-  variables?: any[];
+  variables?: Variable[];
 }
 
 interface State {
diff --git a/public/app/types/templates.ts b/public/app/types/templates.ts
new file mode 100644
index 00000000000..98f94fe4251
--- /dev/null
+++ b/public/app/types/templates.ts
@@ -0,0 +1,19 @@
+export interface Variable {
+  datasource: any;
+  query: any;
+  regex: any;
+  sort: any;
+  options: any;
+  current: any;
+  refresh: number;
+  hide: number;
+  name: string;
+  multi: boolean;
+  includeAll: boolean;
+  useTags: boolean;
+  tagsQuery: string;
+  tagValuesQuery: string;
+  tags: any[];
+  skipUrlSync: boolean;
+  definition: string;
+}

From 03856b4e55e36fed2f81de591a742a982ffb2530 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:44:38 +0100
Subject: [PATCH 161/352] move component to components dir. also move directive
 registration out from datasource

---
 public/app/core/angular_wrappers.ts                  | 11 +++++++++++
 .../components/Select/MetricSelect.tsx}              |  4 ++--
 .../stackdriver/partials/query.aggregation.html      | 12 ++++++------
 .../stackdriver/partials/query.filter.html           |  8 ++++----
 .../app/plugins/datasource/stackdriver/query_ctrl.ts | 12 ------------
 5 files changed, 23 insertions(+), 24 deletions(-)
 rename public/app/{plugins/datasource/stackdriver/components/StackdriverPicker.tsx => core/components/Select/MetricSelect.tsx} (94%)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 5609c058a27..004d8eb12c5 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -5,6 +5,7 @@ import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
+import { MetricSelect } from './components/Select/MetricSelect';
 import AppNotificationList from './components/AppNotifications/AppNotificationList';
 
 export function registerAngularDirectives() {
@@ -19,4 +20,14 @@ export function registerAngularDirectives() {
     ['onChange', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('metricSelect', MetricSelect, [
+    'options',
+    'onChange',
+    'value',
+    'isSearchable',
+    'className',
+    'placeholder',
+    'groupName',
+    ['variables', { watchDepth: 'reference' }],
+  ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/core/components/Select/MetricSelect.tsx
similarity index 94%
rename from public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
rename to public/app/core/components/Select/MetricSelect.tsx
index 49862bb2023..03d700f1ef4 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
-import Select from 'app/core/components/Select/Select';
+import Select from './Select';
 import { Variable } from 'app/types/templates';
 
 export interface Props {
@@ -19,7 +19,7 @@ interface State {
   options: any[];
 }
 
-export class StackdriverPicker extends React.Component<Props, State> {
+export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 122f14a9cb6..2dc9035c7fe 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -1,7 +1,7 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAggregationChange"
       value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
@@ -10,7 +10,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Aggregations'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
@@ -24,7 +24,7 @@
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAlignmentChange"
       value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
@@ -33,7 +33,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Alignment Options'"
-    ></stackdriver-picker>
+    ></metric-select>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
@@ -41,7 +41,7 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAlignmentPeriodChange"
       value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
@@ -50,7 +50,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Alignment Periods'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
 
   <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index f93a7a6eb16..4c90f4fe608 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -1,21 +1,21 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleServiceChange"
       value="ctrl.target.service"
       options="ctrl.services"
       is-searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleMetricTypeChange"
       value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
@@ -24,7 +24,7 @@
       is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index c8a2daf9ba5..ff6348c1ff5 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,8 +2,6 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { StackdriverPicker } from './components/StackdriverPicker';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -63,16 +61,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('stackdriverPicker', StackdriverPicker, [
-      'options',
-      'onChange',
-      'value',
-      'isSearchable',
-      'className',
-      'placeholder',
-      'groupName',
-      ['variables', { watchDepth: 'reference' }],
-    ]);
   }
 
   onDataReceived(dataList) {

From 786df7920ee0854e97a5b27afe14388c2888e76d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:10:19 +0100
Subject: [PATCH 162/352] remove group name from select component. let the
 parent set group name instead

---
 public/app/core/angular_wrappers.ts           |  1 -
 .../core/components/Select/MetricSelect.tsx   | 15 ++++---
 .../stackdriver/query_aggregation_ctrl.ts     | 41 ++++++++++++++-----
 .../stackdriver/query_filter_ctrl.ts          |  9 +++-
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 004d8eb12c5..7a2703b76e7 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -27,7 +27,6 @@ export function registerAngularDirectives() {
     'isSearchable',
     'className',
     'placeholder',
-    'groupName',
     ['variables', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 03d700f1ef4..8c23bf4ded6 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -11,7 +11,6 @@ export interface Props {
   value: string;
   placeholder?: string;
   className?: string;
-  groupName?: string;
   variables?: Variable[];
 }
 
@@ -23,7 +22,6 @@ export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
-    groupName: 'Options',
   };
 
   constructor(props) {
@@ -46,15 +44,16 @@ export class MetricSelect extends React.Component<Props, State> {
     return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
 
-  buildOptions({ variables = [], groupName = '', options }) {
+  buildOptions({ variables = [], options }) {
     return variables.length > 0
       ? [
           this.getVariablesGroup(),
-          {
-            label: groupName,
-            expanded: true,
-            options,
-          },
+          // {
+          //   label: groupName,
+          //   expanded: true,
+          //   options,
+          // },
+          ...options,
         ]
       : options;
   }
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index c88b61725de..b43ecf56d50 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -29,10 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = alignmentPeriods.map(ap => ({
-      ...ap,
-      label: ap.text,
-    }));
+    this.alignmentPeriods = [
+      {
+        label: 'Alignment Periods',
+        expanded: true,
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -46,28 +52,43 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    const alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    if (!alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignOptions.length > 0 ? alignOptions[0].value : '';
     }
+    this.alignOptions = [
+      {
+        label: 'Alignment Options',
+        expanded: true,
+        options: alignOptions,
+      },
+    ];
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    let aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       label: a.text,
     }));
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggOptions = aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+
+    this.aggOptions = [
+      {
+        label: 'Aggregation Options',
+        expanded: true,
+        options: aggOptions,
+      },
+    ];
   }
 
   handleAlignmentChange(value) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 4012cb733d2..c3f00134b11 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -130,7 +130,14 @@ export class StackdriverFilterCtrl {
     ) {
       this.target.metricType = metricsByService[0].value;
     }
-    return metricsByService;
+
+    return [
+      {
+        label: 'Metrics',
+        expanded: true,
+        options: metricsByService,
+      },
+    ];
   }
 
   async getLabels() {

From 102a130a2db73d19f11f0c6f88b0aef08ef7b261 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:15:22 +0100
Subject: [PATCH 163/352] make variable type more slim

---
 public/app/types/templates.ts | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/public/app/types/templates.ts b/public/app/types/templates.ts
index 98f94fe4251..897044a93fe 100644
--- a/public/app/types/templates.ts
+++ b/public/app/types/templates.ts
@@ -1,19 +1,5 @@
 export interface Variable {
-  datasource: any;
-  query: any;
-  regex: any;
-  sort: any;
-  options: any;
-  current: any;
-  refresh: number;
-  hide: number;
   name: string;
-  multi: boolean;
-  includeAll: boolean;
-  useTags: boolean;
-  tagsQuery: string;
-  tagValuesQuery: string;
-  tags: any[];
-  skipUrlSync: boolean;
-  definition: string;
+  type: string;
+  current: any;
 }

From 492898482511805edc9cc98792f40f8b0f50dd15 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:18:15 +0100
Subject: [PATCH 164/352] set issearchable default value to true

---
 public/app/core/components/Select/MetricSelect.tsx             | 1 +
 .../datasource/stackdriver/partials/query.aggregation.html     | 3 ---
 .../plugins/datasource/stackdriver/partials/query.filter.html  | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 8c23bf4ded6..0fb1194260c 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -22,6 +22,7 @@ export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
+    isSearchable: true,
   };
 
   constructor(props) {
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 2dc9035c7fe..2c14c3c8393 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -5,7 +5,6 @@
       onChange="ctrl.handleAggregationChange"
       value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
-      is-searchable="true"
       placeholder="'Select Aggregation'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
@@ -28,7 +27,6 @@
       onChange="ctrl.handleAlignmentChange"
       value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
-      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
@@ -45,7 +43,6 @@
       onChange="ctrl.handleAlignmentPeriodChange"
       value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
-      is-searchable="true"
       placeholder="'Select Alignment'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 4c90f4fe608..95b2ef42726 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -21,7 +21,6 @@
       options="ctrl.getMetricsList()"
       variables="ctrl.templateSrv.variables"
       group-name="'Metric Types'"
-      is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
     ></metric-select>

From 126ceb978076a71f7e407a658826a23e6b9b0bfe Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:21:30 +0100
Subject: [PATCH 165/352] use correct type for select option

---
 .../app/core/components/Select/MetricSelect.tsx   | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 0fb1194260c..9cd1c3e03c9 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -3,10 +3,11 @@ import _ from 'lodash';
 
 import Select from './Select';
 import { Variable } from 'app/types/templates';
+import { SelectOptionItem } from './Select';
 
 export interface Props {
   onChange: (value: string) => void;
-  options: any[];
+  options: SelectOptionItem[];
   isSearchable: boolean;
   value: string;
   placeholder?: string;
@@ -46,17 +47,7 @@ export class MetricSelect extends React.Component<Props, State> {
   }
 
   buildOptions({ variables = [], options }) {
-    return variables.length > 0
-      ? [
-          this.getVariablesGroup(),
-          // {
-          //   label: groupName,
-          //   expanded: true,
-          //   options,
-          // },
-          ...options,
-        ]
-      : options;
+    return variables.length > 0 ? [this.getVariablesGroup(), ...options] : options;
   }
 
   getVariablesGroup() {

From 899811a93493406a2e12dcf208ed7e08a54bd1db Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:41:25 +0100
Subject: [PATCH 166/352] fix broken tests

---
 .../specs/query_aggregation_ctrl.test.ts      | 51 ++++++++++++++++---
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
index 81011f5dfe0..fcf55cb5ac1 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
@@ -17,27 +17,64 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
             }
           );
         });
 
         it('should populate all aggregate options except two', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(11);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [aggOptionsGroup] = ctrl.aggOptions;
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
 
         it('should populate all alignment options except two', () => {
           ctrl.setAlignOptions();
-          expect(ctrl.alignOptions.length).toBe(9);
-          expect(ctrl.alignOptions.map(o => o.value)).toEqual(
+          const [aggOptionsGroup] = ctrl.aggOptions;
+          expect(aggOptionsGroup.options.length).toBe(11);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
           );
         });
       });
 
+      describe('and result is double and delta and no group by is used', () => {
+        beforeEach(async () => {
+          ctrl = new StackdriverAggregationCtrl(
+            {
+              $on: () => {},
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'DELTA',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+              variables: [{ name: 'someVariable1' }, { name: 'someVariable2' }],
+            }
+          );
+        });
+
+        it('should populate all alignment options except four', () => {
+          ctrl.setAlignOptions();
+          const [alignOptionsGroup] = ctrl.alignOptions;
+          expect(alignOptionsGroup.options.length).toBe(9);
+          expect(alignOptionsGroup.options.map(o => o.value)).toEqual(
+            expect['not'].arrayContaining([
+              'ALIGN_NEXT_OLDER',
+              'ALIGN_INTERPOLATE',
+              'ALIGN_COUNT_TRUE',
+              'ALIGN_COUNT_FALSE',
+              'ALIGN_FRACTION_TRUE',
+            ])
+          );
+        });
+      });
+
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
           ctrl = new StackdriverAggregationCtrl(
@@ -51,14 +88,16 @@ describe('StackdriverAggregationCtrl', () => {
             },
             {
               replace: s => s,
+              variables: [{ name: 'someVariable1' }],
             }
           );
         });
 
         it('should populate all aggregate options except three', () => {
           ctrl.setAggOptions();
-          expect(ctrl.aggOptions.length).toBe(10);
-          expect(ctrl.aggOptions.map(o => o.value)).toEqual(
+          const [aggOptionsGroup] = ctrl.aggOptions;
+          expect(aggOptionsGroup.options.length).toBe(10);
+          expect(aggOptionsGroup.options.map(o => o.value)).toEqual(
             expect['not'].arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE', 'REDUCE_NONE'])
           );
         });

From 7b4b1a4f901a7122fef6c2e434fc5d55459bfc51 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 21:01:04 +0100
Subject: [PATCH 167/352] remove not used property

---
 .../datasource/stackdriver/partials/query.aggregation.html     | 3 ---
 .../plugins/datasource/stackdriver/partials/query.filter.html  | 1 -
 2 files changed, 4 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 2c14c3c8393..95b9778708c 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
@@ -8,7 +8,6 @@
       placeholder="'Select Aggregation'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
-      group-name="'Aggregations'"
     ></metric-select>
   </div>
   <div class="gf-form gf-form--grow">
@@ -30,7 +29,6 @@
       placeholder="'Select Alignment'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
-      group-name="'Alignment Options'"
     ></metric-select>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -46,7 +44,6 @@
       placeholder="'Select Alignment'"
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
-      group-name="'Alignment Periods'"
     ></metric-select>
   </div>
 
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 95b2ef42726..f9d057d92b5 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -20,7 +20,6 @@
       value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
       variables="ctrl.templateSrv.variables"
-      group-name="'Metric Types'"
       placeholder="'Select Metric'"
       className="'width-15'"
     ></metric-select>

From d25138060febb055b8357914cb3b3baec0dd5403 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 11:27:48 +0100
Subject: [PATCH 168/352] Revert "add max width to group header description"

This reverts commit 86a39183ee2acab287e459faec73e72b201017ed.
---
 public/sass/components/_form_select_box.scss | 28 +++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 1a2b9be524c..a83ca95d038 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -172,22 +172,18 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group {
-  max-width: 600px;
+.gf-form-select-box__option-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+  border-bottom: 1px solid $hr-border-color;
+  text-transform: capitalize;
 
-  .gf-form-select-box__option-group__header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    justify-items: center;
-    cursor: pointer;
-    padding: 7px 10px;
-    width: 100%;
-    border-bottom: 1px solid $hr-border-color;
-    text-transform: capitalize;
-
-    .fa {
-      padding-right: 2px;
-    }
+  .fa {
+    padding-right: 2px;
   }
 }

From 92d6442948da2342deaa54522ef77fa4df851b03 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 11:44:10 +0100
Subject: [PATCH 169/352] Revert "Revert "add max width to group header
 description""

This reverts commit d25138060febb055b8357914cb3b3baec0dd5403.
---
 public/sass/components/_form_select_box.scss | 28 +++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index a83ca95d038..1a2b9be524c 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -172,18 +172,22 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group__header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  justify-items: center;
-  cursor: pointer;
-  padding: 7px 10px;
-  width: 100%;
-  border-bottom: 1px solid $hr-border-color;
-  text-transform: capitalize;
+.gf-form-select-box__option-group {
+  max-width: 600px;
 
-  .fa {
-    padding-right: 2px;
+  .gf-form-select-box__option-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    justify-items: center;
+    cursor: pointer;
+    padding: 7px 10px;
+    width: 100%;
+    border-bottom: 1px solid $hr-border-color;
+    text-transform: capitalize;
+
+    .fa {
+      padding-right: 2px;
+    }
   }
 }

From 5143a2669dcf7a118bd0283f6ba0ce310a927711 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 7 Jan 2019 13:05:27 +0100
Subject: [PATCH 170/352] feat: Add "theme" to Tooltip

---
 public/app/core/components/Tooltip/Popper.tsx | 12 +++++++--
 .../core/components/Tooltip/withPopper.tsx    |  3 ++-
 .../features/dashboard/dashgrid/DataPanel.tsx |  8 +++---
 public/sass/_variables.dark.scss              |  6 +++--
 public/sass/_variables.light.scss             |  6 +++--
 public/sass/components/_popper.scss           | 26 ++++++++++++-------
 6 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 36cf0fe837e..d5ea1d93091 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -21,13 +21,21 @@ interface Props {
   placement?: any;
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
+  theme?: string;
+}
+
+export enum Themes {
+  Default = 'popper__background--default',
+  Error = 'popper__background--error',
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { children, renderContent, show, placement, refClassName } = this.props;
+    const { children, renderContent, show, placement, refClassName, theme } = this.props;
     const { content } = this.props;
 
+    const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
+
     return (
       <Manager>
         <Reference>
@@ -53,7 +61,7 @@ class Popper extends PureComponent<Props> {
                       data-placement={placement}
                       className="popper"
                     >
-                      <div className="popper__background">
+                      <div className={popperBackgroundClassName}>
                         {renderContent(content)}
                         <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
                       </div>
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
index 4ba05937531..7be12748247 100644
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -9,6 +9,7 @@ export interface UsingPopperProps {
   content: string | ((props: any) => JSX.Element);
   className?: string;
   refClassName?: string;
+  theme?: string;
 }
 
 interface Props {
@@ -16,6 +17,7 @@ interface Props {
   className?: string;
   refClassName?: string;
   content: string | ((props: any) => JSX.Element);
+  theme?: string;
 }
 
 interface State {
@@ -71,7 +73,6 @@ export default function withPopper(WrappedComponent) {
     render() {
       const { show, placement } = this.state;
       const className = this.props.className || '';
-
       return (
         <WrappedComponent
           {...this.props}
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 72f405dcbe7..f21a1adb9ca 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -10,6 +10,7 @@ import kbn from 'app/core/utils/kbn';
 
 // Types
 import { TimeRange, LoadingState, DataQueryOptions, DataQueryResponse, TimeSeries } from 'app/types';
+import { Themes } from 'app/core/components/Tooltip/Popper';
 
 interface RenderProps {
   loading: LoadingState;
@@ -139,7 +140,7 @@ export class DataPanel extends Component<Props, State> {
     const timeSeries = response.data;
 
     if (isFirstLoad && loading === LoadingState.Loading) {
-      return this.renderLoadingState();
+      return this.renderLoadingStates();
     }
 
     if (!queries.length) {
@@ -152,7 +153,7 @@ export class DataPanel extends Component<Props, State> {
 
     return (
       <>
-        {this.renderLoadingState()}
+        {this.renderLoadingStates()}
         {this.props.children({
           timeSeries,
           loading,
@@ -161,7 +162,7 @@ export class DataPanel extends Component<Props, State> {
     );
   }
 
-  private renderLoadingState(): JSX.Element {
+  private renderLoadingStates(): JSX.Element {
     const { loading } = this.state;
     if (loading === LoadingState.Loading) {
       return (
@@ -176,6 +177,7 @@ export class DataPanel extends Component<Props, State> {
           className="popper__manager--block"
           refClassName={`panel-info-corner panel-info-corner--error`}
           placement="bottom-start"
+          theme={Themes.Error}
         >
           <i className="fa" />
           <span className="panel-info-corner-inner" />
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 70db51a0fb2..8769164d5ec 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -302,12 +302,14 @@ $popover-error-bg: $btn-danger-bg;
 // Tooltips and popovers
 // -------------------------
 $tooltipColor: $popover-help-color;
-$tooltipBackground: $popover-help-bg;
 $tooltipArrowWidth: 5px;
-$tooltipArrowColor: $tooltipBackground;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
+$tooltipBackground: $popover-help-bg;
+$tooltipArrowColor: $tooltipBackground;
+$tooltipBackgroundError: $brand-danger;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 6afd087a849..be2d05e2441 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -307,12 +307,14 @@ $popover-error-bg: $btn-danger-bg;
 // Tooltips and popovers
 // -------------------------
 $tooltipColor: $popover-help-color;
-$tooltipBackground: $popover-help-bg;
 $tooltipArrowWidth: 5px;
-$tooltipArrowColor: $tooltipBackground;
 $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 
+$tooltipBackground: $popover-help-bg;
+$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
+$tooltipBackgroundError: $brand-danger;
+
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 
diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss
index d869d52b92f..afa629d4043 100644
--- a/public/sass/components/_popper.scss
+++ b/public/sass/components/_popper.scss
@@ -8,7 +8,22 @@ $popper-margin-from-ref: 5px;
   text-align: center;
 }
 
-.popper .popper__arrow {
+.popper__background {
+  background: $tooltipBackground;
+  border-radius: $border-radius;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+
+  // Themes
+  &.popper__background--error {
+    background: $tooltipBackgroundError;
+    .popper__arrow {
+      border-color: $tooltipBackgroundError;
+    }
+  }
+}
+
+.popper__arrow {
   width: 0;
   height: 0;
   border-style: solid;
@@ -16,17 +31,10 @@ $popper-margin-from-ref: 5px;
   margin: 0px;
 }
 
-.popper .popper__arrow {
+.popper__arrow {
   border-color: $tooltipBackground;
 }
 
-.popper__background {
-  background: $tooltipBackground;
-  border-radius: $border-radius;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
-}
-
 // Top
 .popper[data-placement^='top'] {
   padding-bottom: $popper-margin-from-ref;

From dadbaccfeb0bef811129fd07acfcba286832cd3b Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 19 Dec 2018 12:58:10 +0100
Subject: [PATCH 171/352] Notify user on query error

---
 .../features/dashboard/dashgrid/DataPanel.tsx | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 30a939b50aa..7d752da95a8 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -1,5 +1,6 @@
 // Library
 import React, { Component } from 'react';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 // Services
 import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -139,7 +140,7 @@ export class DataPanel extends Component<Props, State> {
     const timeSeries = response.data;
 
     if (isFirstLoad && loading === LoadingState.Loading) {
-      return this.renderLoadingSpinner();
+      return this.renderLoadingState();
     }
 
     if (!queries.length) {
@@ -152,7 +153,7 @@ export class DataPanel extends Component<Props, State> {
 
     return (
       <>
-        {this.renderLoadingSpinner()}
+        {this.renderLoadingState()}
         {this.props.children({
           timeSeries,
           loading,
@@ -161,15 +162,26 @@ export class DataPanel extends Component<Props, State> {
     );
   }
 
-  private renderLoadingSpinner(): JSX.Element {
+  private renderLoadingState(): JSX.Element {
     const { loading } = this.state;
-
     if (loading === LoadingState.Loading) {
       return (
         <div className="panel-loading">
           <i className="fa fa-spinner fa-spin" />
         </div>
       );
+    } else if (loading === LoadingState.Error) {
+      return (
+        <Tooltip
+          content="Request Error"
+          className="popper__manager--block"
+          refClassName={`panel-info-corner panel-info-corner--error`}
+          placement="bottom-start"
+        >
+          <i className="fa" />
+          <span className="panel-info-corner-inner" />
+        </Tooltip>
+      );
     }
 
     return null;

From 79fd8a7eda2e53685f52129175ce15e35af273fe Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 7 Jan 2019 13:05:27 +0100
Subject: [PATCH 172/352] feat: Add "theme" to Tooltip

---
 public/app/core/components/Tooltip/Popper.tsx | 12 +++++++--
 .../core/components/Tooltip/withPopper.tsx    |  3 ++-
 .../features/dashboard/dashgrid/DataPanel.tsx |  8 +++---
 public/sass/_variables.dark.scss              |  6 +++--
 public/sass/_variables.light.scss             |  6 +++--
 public/sass/components/_popper.scss           | 26 ++++++++++++-------
 6 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 36cf0fe837e..d5ea1d93091 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -21,13 +21,21 @@ interface Props {
   placement?: any;
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
+  theme?: string;
+}
+
+export enum Themes {
+  Default = 'popper__background--default',
+  Error = 'popper__background--error',
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { children, renderContent, show, placement, refClassName } = this.props;
+    const { children, renderContent, show, placement, refClassName, theme } = this.props;
     const { content } = this.props;
 
+    const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
+
     return (
       <Manager>
         <Reference>
@@ -53,7 +61,7 @@ class Popper extends PureComponent<Props> {
                       data-placement={placement}
                       className="popper"
                     >
-                      <div className="popper__background">
+                      <div className={popperBackgroundClassName}>
                         {renderContent(content)}
                         <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
                       </div>
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
index 4ba05937531..7be12748247 100644
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -9,6 +9,7 @@ export interface UsingPopperProps {
   content: string | ((props: any) => JSX.Element);
   className?: string;
   refClassName?: string;
+  theme?: string;
 }
 
 interface Props {
@@ -16,6 +17,7 @@ interface Props {
   className?: string;
   refClassName?: string;
   content: string | ((props: any) => JSX.Element);
+  theme?: string;
 }
 
 interface State {
@@ -71,7 +73,6 @@ export default function withPopper(WrappedComponent) {
     render() {
       const { show, placement } = this.state;
       const className = this.props.className || '';
-
       return (
         <WrappedComponent
           {...this.props}
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 7d752da95a8..d57b787bf57 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -11,6 +11,7 @@ import kbn from 'app/core/utils/kbn';
 // Types
 import { DataQueryOptions, DataQueryResponse } from 'app/types';
 import { TimeRange, TimeSeries, LoadingState } from '@grafana/ui';
+import { Themes } from 'app/core/components/Tooltip/Popper';
 
 interface RenderProps {
   loading: LoadingState;
@@ -140,7 +141,7 @@ export class DataPanel extends Component<Props, State> {
     const timeSeries = response.data;
 
     if (isFirstLoad && loading === LoadingState.Loading) {
-      return this.renderLoadingState();
+      return this.renderLoadingStates();
     }
 
     if (!queries.length) {
@@ -153,7 +154,7 @@ export class DataPanel extends Component<Props, State> {
 
     return (
       <>
-        {this.renderLoadingState()}
+        {this.renderLoadingStates()}
         {this.props.children({
           timeSeries,
           loading,
@@ -162,7 +163,7 @@ export class DataPanel extends Component<Props, State> {
     );
   }
 
-  private renderLoadingState(): JSX.Element {
+  private renderLoadingStates(): JSX.Element {
     const { loading } = this.state;
     if (loading === LoadingState.Loading) {
       return (
@@ -177,6 +178,7 @@ export class DataPanel extends Component<Props, State> {
           className="popper__manager--block"
           refClassName={`panel-info-corner panel-info-corner--error`}
           placement="bottom-start"
+          theme={Themes.Error}
         >
           <i className="fa" />
           <span className="panel-info-corner-inner" />
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 70db51a0fb2..8769164d5ec 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -302,12 +302,14 @@ $popover-error-bg: $btn-danger-bg;
 // Tooltips and popovers
 // -------------------------
 $tooltipColor: $popover-help-color;
-$tooltipBackground: $popover-help-bg;
 $tooltipArrowWidth: 5px;
-$tooltipArrowColor: $tooltipBackground;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
+$tooltipBackground: $popover-help-bg;
+$tooltipArrowColor: $tooltipBackground;
+$tooltipBackgroundError: $brand-danger;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 6afd087a849..be2d05e2441 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -307,12 +307,14 @@ $popover-error-bg: $btn-danger-bg;
 // Tooltips and popovers
 // -------------------------
 $tooltipColor: $popover-help-color;
-$tooltipBackground: $popover-help-bg;
 $tooltipArrowWidth: 5px;
-$tooltipArrowColor: $tooltipBackground;
 $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 
+$tooltipBackground: $popover-help-bg;
+$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
+$tooltipBackgroundError: $brand-danger;
+
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 
diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss
index d869d52b92f..afa629d4043 100644
--- a/public/sass/components/_popper.scss
+++ b/public/sass/components/_popper.scss
@@ -8,7 +8,22 @@ $popper-margin-from-ref: 5px;
   text-align: center;
 }
 
-.popper .popper__arrow {
+.popper__background {
+  background: $tooltipBackground;
+  border-radius: $border-radius;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+
+  // Themes
+  &.popper__background--error {
+    background: $tooltipBackgroundError;
+    .popper__arrow {
+      border-color: $tooltipBackgroundError;
+    }
+  }
+}
+
+.popper__arrow {
   width: 0;
   height: 0;
   border-style: solid;
@@ -16,17 +31,10 @@ $popper-margin-from-ref: 5px;
   margin: 0px;
 }
 
-.popper .popper__arrow {
+.popper__arrow {
   border-color: $tooltipBackground;
 }
 
-.popper__background {
-  background: $tooltipBackground;
-  border-radius: $border-radius;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
-}
-
 // Top
 .popper[data-placement^='top'] {
   padding-bottom: $popper-margin-from-ref;

From 9ec6831713f997e326041a436c97822dcbb41917 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 13:37:39 +0100
Subject: [PATCH 173/352] bind array instead of function

---
 .../plugins/datasource/stackdriver/partials/query.filter.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index f9d057d92b5..464303a6030 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -18,7 +18,7 @@
     <metric-select
       onChange="ctrl.handleMetricTypeChange"
       value="ctrl.target.metricType"
-      options="ctrl.getMetricsList()"
+      options="ctrl.metrics"
       variables="ctrl.templateSrv.variables"
       placeholder="'Select Metric'"
       className="'width-15'"

From 4d07f56354d243fefaf0b7153cce9ecc4878a1f6 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 13:46:15 +0100
Subject: [PATCH 174/352] set max width on the whole menu list instead

---
 public/sass/components/_form_select_box.scss | 29 +++++++++-----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 1a2b9be524c..bf18125d7b8 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -63,6 +63,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 .gf-form-select-box__menu-list {
   overflow-y: auto;
   max-height: 300px;
+  max-width: 600px;
 }
 
 .tag-filter .gf-form-select-box__menu {
@@ -172,22 +173,18 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group {
-  max-width: 600px;
+.gf-form-select-box__option-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+  border-bottom: 1px solid $hr-border-color;
+  text-transform: capitalize;
 
-  .gf-form-select-box__option-group__header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    justify-items: center;
-    cursor: pointer;
-    padding: 7px 10px;
-    width: 100%;
-    border-bottom: 1px solid $hr-border-color;
-    text-transform: capitalize;
-
-    .fa {
-      padding-right: 2px;
-    }
+  .fa {
+    padding-right: 2px;
   }
 }

From 0b89f81609fadab4d60aa0b47ca9c8a8f9124f55 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 7 Jan 2019 13:56:36 +0100
Subject: [PATCH 175/352] fix: Light theme corner bg color update

---
 public/sass/_variables.dark.scss  | 1 +
 public/sass/_variables.light.scss | 1 +
 public/sass/pages/_dashboard.scss | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 8769164d5ec..ded17e6ecfe 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -103,6 +103,7 @@ $panel-bg: #212124;
 $panel-border-color: $dark-1;
 $panel-border: solid 1px $panel-border-color;
 $panel-header-hover-bg: $dark-4;
+$panel-corner: $panel-bg;
 
 // page header
 $page-header-bg: linear-gradient(90deg, #292a2d, black);
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index be2d05e2441..1e7a2e9cfbe 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -102,6 +102,7 @@ $panel-bg: $white;
 $panel-border-color: $gray-5;
 $panel-border: solid 1px $panel-border-color;
 $panel-header-hover-bg: $gray-6;
+$panel-corner: $gray-4;
 
 // Page header
 $page-header-bg: linear-gradient(90deg, $white, $gray-7);
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 589012bff3f..81698d396f8 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -214,7 +214,7 @@ div.flot-text {
 
   &--info {
     display: block;
-    @include panel-corner-color(lighten($panel-bg, 4%));
+    @include panel-corner-color(lighten($panel-corner, 4%));
     .fa:before {
       content: '\f129';
     }
@@ -222,7 +222,7 @@ div.flot-text {
 
   &--links {
     display: block;
-    @include panel-corner-color(lighten($panel-bg, 4%));
+    @include panel-corner-color(lighten($panel-corner, 4%));
     .fa {
       left: 4px;
     }

From e61fa37db4b7cee5e1b8d2c768a9f4b66651b4c8 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 14:15:53 +0100
Subject: [PATCH 176/352] fix filter bug

---
 .../datasource/stackdriver/filter_segments.ts      |  2 +-
 .../datasource/stackdriver/query_filter_ctrl.ts    | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/filter_segments.ts b/public/app/plugins/datasource/stackdriver/filter_segments.ts
index e9adcad6da6..5beae1cdeb1 100644
--- a/public/app/plugins/datasource/stackdriver/filter_segments.ts
+++ b/public/app/plugins/datasource/stackdriver/filter_segments.ts
@@ -44,7 +44,7 @@ export class FilterSegments {
         this.removeSegment.value = DefaultRemoveFilterValue;
         return Promise.resolve([this.removeSegment]);
       } else {
-        return this.getFilterKeysFunc(segment, DefaultRemoveFilterValue);
+        return this.getFilterKeysFunc(segment, DefaultRemoveFilterValue, segment.type === 'plus-button');
       }
     }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index c15560c30ab..5bbd91eb6ca 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -89,7 +89,7 @@ export class StackdriverFilterCtrl {
     return elements;
   }
 
-  async getFilterKeys(segment, removeText?: string) {
+  async getFilterKeys(segment, removeText: string, hideRemoveButton: boolean) {
     let elements = await this.createLabelKeyElements();
 
     if (this.$scope.filters.indexOf(this.resourceTypeValue) !== -1) {
@@ -101,10 +101,12 @@ export class StackdriverFilterCtrl {
       return [];
     }
 
-    return [
-      ...elements,
-      this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
-    ];
+    return hideRemoveButton
+      ? elements
+      : [
+          ...elements,
+          this.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.defaultRemoveGroupByValue }),
+        ];
   }
 
   async getGroupBys(segment) {
@@ -117,7 +119,7 @@ export class StackdriverFilterCtrl {
     }
 
     this.removeSegment.value = this.defaultRemoveGroupByValue;
-    return [...elements, this.removeSegment];
+    return segment.type === 'plus-button' ? elements : [...elements, this.removeSegment];
   }
 
   groupByChanged(segment, index) {

From e75aec9954aaa95bdbf1c2b66684385f9a081df2 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 14:51:20 +0100
Subject: [PATCH 177/352] refactoring

---
 .../app/plugins/datasource/stackdriver/query_filter_ctrl.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 5bbd91eb6ca..3a0b7a40a4e 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -89,7 +89,7 @@ export class StackdriverFilterCtrl {
     return elements;
   }
 
-  async getFilterKeys(segment, removeText: string, hideRemoveButton: boolean) {
+  async getFilterKeys(segment, removeText: string) {
     let elements = await this.createLabelKeyElements();
 
     if (this.$scope.filters.indexOf(this.resourceTypeValue) !== -1) {
@@ -101,7 +101,7 @@ export class StackdriverFilterCtrl {
       return [];
     }
 
-    return hideRemoveButton
+    return segment.type === 'plus-button'
       ? elements
       : [
           ...elements,

From 87cb3d4caa1a85b2d5df790feac1e2da24169b79 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 7 Jan 2019 14:52:36 +0100
Subject: [PATCH 178/352] ugly temporary fix for scope issue. will be removed
 later on

---
 public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 3a0b7a40a4e..0513677c3f9 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -32,7 +32,7 @@ export class StackdriverFilterCtrl {
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
-    this.$scope = $scope.$parent;
+    this.$scope = $scope.hasOwnProperty('groupBysChanged') ? $scope : $scope.$parent;
 
     this.initSegments(this.$scope.hideGroupBys);
   }

From 96be5fe8a341fb4aa5ee59076691ca5bb910d421 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <prokopd@gmail.com>
Date: Mon, 7 Jan 2019 15:07:08 +0100
Subject: [PATCH 179/352] Remove the jump effect on run query button

Caused by the return and loading spinner icons having different widths. Used fa-fw helper class to ensure fixed width on icons. Also, made the spacing between icon and button label slightly smaller, as the rotated level-down icon used as return icon has significantly smaller width compared to the loading spinner and it looked oddly far from the label as compared to timepicker's icon
---
 public/app/features/explore/Explore.tsx | 2 +-
 public/sass/pages/_explore.scss         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index a905034f302..d4d645950c1 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -944,7 +944,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           <div className="navbar-buttons relative">
             <button className="btn navbar-button navbar-button--primary" onClick={this.onSubmit}>
               Run Query{' '}
-              {loading ? <i className="fa fa-spinner fa-spin run-icon" /> : <i className="fa fa-level-down run-icon" />}
+              {loading ? <i className="fa fa-spinner fa-fw fa-spin run-icon" /> : <i className="fa fa-level-down fa-fw run-icon" />}
             </button>
           </div>
         </div>
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index dd1afea7394..098dae1a4a2 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -160,7 +160,7 @@
   }
 
   .run-icon {
-    margin-left: 0.5em;
+    margin-left: 0.25em;
     transform: rotate(90deg);
   }
 

From 36e4bf598541b5961f70816b907f20147d996b87 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 7 Jan 2019 17:00:10 +0100
Subject: [PATCH 180/352] adding more units and functions

---
 packages/grafana-ui/src/utils/valueFormats.ts | 571 ++++++++++++++++--
 1 file changed, 524 insertions(+), 47 deletions(-)

diff --git a/packages/grafana-ui/src/utils/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats.ts
index cdff409a683..c7c8dbd447b 100644
--- a/packages/grafana-ui/src/utils/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/valueFormats.ts
@@ -1,4 +1,6 @@
-type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number) => string;
+import moment from 'moment';
+
+type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number, isUtc?: boolean) => string;
 
 interface ValueFormat {
   name: string;
@@ -15,6 +17,32 @@ interface ValueFormatterIndex {
   [id: string]: ValueFormatter;
 }
 
+interface IntervalsInSeconds {
+  [interval: string]: number;
+}
+
+enum Interval {
+  Year = 'year',
+  Month = 'month',
+  Week = 'week',
+  Day = 'day',
+  Hour = 'hour',
+  Minute = 'minute',
+  Second = 'second',
+  Millisecond = 'millisecond',
+}
+
+const INTERVALS_IN_SECONDS: IntervalsInSeconds = {
+  [Interval.Year]: 31536000,
+  [Interval.Month]: 2592000,
+  [Interval.Week]: 604800,
+  [Interval.Day]: 86400,
+  [Interval.Hour]: 3600,
+  [Interval.Month]: 60,
+  [Interval.Second]: 1,
+  [Interval.Millisecond]: 0.001,
+};
+
 // Globals & formats cache
 let categories: ValueFormatCategory[] = [];
 const index: ValueFormatterIndex = {};
@@ -46,6 +74,20 @@ function toFixed(value: number, decimals?: number): string {
   return formatted;
 }
 
+function toFixedScaled(
+  value: number,
+  decimals: number,
+  scaledDecimals: number,
+  additionalDecimals: number,
+  ext: string
+) {
+  if (scaledDecimals === null) {
+    return toFixed(value, decimals) + ext;
+  } else {
+    return toFixed(value, scaledDecimals + additionalDecimals) + ext;
+  }
+}
+
 function toFixedUnit(unit: string) {
   return (size: number, decimals: number) => {
     if (size === null) {
@@ -144,61 +186,345 @@ function currency(symbol: string) {
   };
 }
 
+function toNanoSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ns';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' µs');
+  } else if (Math.abs(size) < 1000000000) {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' ms');
+  } else if (Math.abs(size) < 60000000000) {
+    return toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, ' s');
+  } else {
+    return toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, ' min');
+  }
+}
+
+function toMicroSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' µs';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' ms');
+  } else {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' s');
+  }
+}
+
+function toMilliSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ms';
+  } else if (Math.abs(size) < 60000) {
+    // Less than 1 min
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' s');
+  } else if (Math.abs(size) < 3600000) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60000, decimals, scaledDecimals, 5, ' min');
+  } else if (Math.abs(size) < 86400000) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, ' hour');
+  } else if (Math.abs(size) < 31536000000) {
+    // Less than one year, divide in days
+    return toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, ' day');
+  }
+
+  return toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, ' year');
+}
+
+function toSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // Less than 1 µs, divide in ns
+  if (Math.abs(size) < 0.000001) {
+    return toFixedScaled(size * 1e9, decimals, scaledDecimals - decimals, -9, ' ns');
+  }
+  // Less than 1 ms, divide in µs
+  if (Math.abs(size) < 0.001) {
+    return toFixedScaled(size * 1e6, decimals, scaledDecimals - decimals, -6, ' µs');
+  }
+  // Less than 1 second, divide in ms
+  if (Math.abs(size) < 1) {
+    return toFixedScaled(size * 1e3, decimals, scaledDecimals - decimals, -3, ' ms');
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' s';
+  } else if (Math.abs(size) < 3600) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min');
+  } else if (Math.abs(size) < 86400) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour');
+  } else if (Math.abs(size) < 604800) {
+    // Less than one week, divide in days
+    return toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day');
+  } else if (Math.abs(size) < 31536000) {
+    // Less than one year, divide in week
+    return toFixedScaled(size / 604800, decimals, scaledDecimals, 6, ' week');
+  }
+
+  return toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, ' year');
+}
+
+function toMinutes(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' min';
+  } else if (Math.abs(size) < 1440) {
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 2, ' hour');
+  } else if (Math.abs(size) < 10080) {
+    return toFixedScaled(size / 1440, decimals, scaledDecimals, 3, ' day');
+  } else if (Math.abs(size) < 604800) {
+    return toFixedScaled(size / 10080, decimals, scaledDecimals, 4, ' week');
+  } else {
+    return toFixedScaled(size / 5.25948e5, decimals, scaledDecimals, 5, ' year');
+  }
+}
+
+function toHours(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 24) {
+    return toFixed(size, decimals) + ' hour';
+  } else if (Math.abs(size) < 168) {
+    return toFixedScaled(size / 24, decimals, scaledDecimals, 2, ' day');
+  } else if (Math.abs(size) < 8760) {
+    return toFixedScaled(size / 168, decimals, scaledDecimals, 3, ' week');
+  } else {
+    return toFixedScaled(size / 8760, decimals, scaledDecimals, 4, ' year');
+  }
+}
+
+function toDays(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 7) {
+    return toFixed(size, decimals) + ' day';
+  } else if (Math.abs(size) < 365) {
+    return toFixedScaled(size / 7, decimals, scaledDecimals, 2, ' week');
+  } else {
+    return toFixedScaled(size / 365, decimals, scaledDecimals, 3, ' year');
+  }
+}
+
+function toDuration(size: number, decimals: number, timeScale: Interval): string {
+  if (size === null) {
+    return '';
+  }
+  if (size === 0) {
+    return '0 ' + timeScale + 's';
+  }
+  if (size < 0) {
+    return toDuration(-size, decimals, timeScale) + ' ago';
+  }
+
+  const units = [
+    { long: Interval.Year },
+    { long: Interval.Month },
+    { long: Interval.Week },
+    { long: Interval.Day },
+    { long: Interval.Hour },
+    { long: Interval.Minute },
+    { long: Interval.Second },
+    { long: Interval.Millisecond },
+  ];
+  // convert $size to milliseconds
+  // intervals_in_seconds uses seconds (duh), convert them to milliseconds here to minimize floating point errors
+  size *= INTERVALS_IN_SECONDS[timeScale] * 1000;
+
+  const strings = [];
+  // after first value >= 1 print only $decimals more
+  let decrementDecimals = false;
+  for (let i = 0; i < units.length && decimals >= 0; i++) {
+    const interval = INTERVALS_IN_SECONDS[units[i].long] * 1000;
+    const value = size / interval;
+    if (value >= 1 || decrementDecimals) {
+      decrementDecimals = true;
+      const floor = Math.floor(value);
+      const unit = units[i].long + (floor !== 1 ? 's' : '');
+      strings.push(floor + ' ' + unit);
+      size = size % interval;
+      decimals--;
+    }
+  }
+
+  return strings.join(', ');
+}
+
+function toClock(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // < 1 second
+  if (size < 1000) {
+    return moment.utc(size).format('SSS\\m\\s');
+  }
+
+  // < 1 minute
+  if (size < 60000) {
+    let format = 'ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  // < 1 hour
+  if (size < 3600000) {
+    let format = 'mm\\m:ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'mm\\m';
+    } else if (decimals === 1) {
+      format = 'mm\\m:ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  let format = 'mm\\m:ss\\s:SSS\\m\\s';
+
+  const hours = `${('0' + Math.floor(moment.duration(size, 'milliseconds').asHours())).slice(-2)}h`;
+
+  if (decimals === 0) {
+    format = '';
+  } else if (decimals === 1) {
+    format = 'mm\\m';
+  } else if (decimals === 2) {
+    format = 'mm\\m:ss\\s';
+  }
+
+  return format ? `${hours}:${moment.utc(size).format(format)}` : hours;
+}
+
+function toDurationInMilliseconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Millisecond);
+}
+
+function toDurationInSeconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Second);
+}
+
+function toDurationInHoursMinutesSeconds(size: number) {
+  const strings = [];
+  const numHours = Math.floor(size / 3600);
+  const numMinutes = Math.floor((size % 3600) / 60);
+  const numSeconds = Math.floor((size % 3600) % 60);
+  numHours > 9 ? strings.push('' + numHours) : strings.push('0' + numHours);
+  numMinutes > 9 ? strings.push('' + numMinutes) : strings.push('0' + numMinutes);
+  numSeconds > 9 ? strings.push('' + numSeconds) : strings.push('0' + numSeconds);
+  return strings.join(':');
+}
+
+function toTimeTicks(size: number, decimals: number, scaledDecimals: number) {
+  return toSeconds(size, decimals, scaledDecimals);
+}
+
+function toClockMilliseconds(size: number, decimals: number) {
+  return toClock(size, decimals);
+}
+
+function toClockSeconds(size: number, decimals: number) {
+  return toClock(size * 1000, decimals);
+}
+
+function dateTimeAsIso(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('HH:mm:ss');
+  }
+  return time.format('YYYY-MM-DD HH:mm:ss');
+}
+
+function dateTimeAsUS(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('h:mm:ss a');
+  }
+  return time.format('MM/DD/YYYY h:mm:ss a');
+}
+
+function dateTimeFromNow(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+  return time.fromNow();
+}
+
+function binarySIPrefix(unit: string, offset = 0) {
+  const prefixes = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'].slice(offset);
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1024, units);
+}
+
+function decimalSIPrefix(unit: string, offset = 0) {
+  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+  prefixes = prefixes.slice(3 + (offset || 0));
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1000, units);
+}
+
 function buildFormats() {
   categories = [
     {
       name: 'none',
       formats: [
-        {
-          name: 'none',
-          id: 'none',
-          fn: toFixed,
-        },
+        { name: 'none', id: 'none', fn: toFixed },
         {
           name: 'short',
           id: 'short',
           fn: scaledUnits(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Quadr', ' Quint', ' Sext', ' Sept']),
         },
-        {
-          name: 'percent (0-100)',
-          id: 'percent',
-          fn: toPercent,
-        },
-        {
-          name: 'percent (0.0-1.0)',
-          id: 'percentunit',
-          fn: toPercentUnit,
-        },
-        {
-          name: 'Humidity (%H)',
-          id: 'humidity',
-          fn: toFixedUnit('%H'),
-        },
-        {
-          name: 'decibel',
-          id: 'dB',
-          fn: toFixedUnit('dB'),
-        },
-        {
-          name: 'hexadecimal (0x)',
-          id: 'hex0x',
-          fn: toHex0x,
-        },
-        {
-          name: 'hexadecimal',
-          id: 'hex',
-          fn: hex,
-        },
-        {
-          name: 'scientific notation',
-          id: 'sci',
-          fn: sci,
-        },
-        {
-          name: 'locale format',
-          id: 'locale',
-          fn: locale,
-        },
+        { name: 'percent (0-100)', id: 'percent', fn: toPercent },
+        { name: 'percent (0.0-1.0)', id: 'percentunit', fn: toPercentUnit },
+        { name: 'Humidity (%H)', id: 'humidity', fn: toFixedUnit('%H') },
+        { name: 'decibel', id: 'dB', fn: toFixedUnit('dB') },
+        { name: 'hexadecimal (0x)', id: 'hex0x', fn: toHex0x },
+        { name: 'hexadecimal', id: 'hex', fn: hex },
+        { name: 'scientific notation', id: 'sci', fn: sci },
+        { name: 'locale format', id: 'locale', fn: locale },
+      ],
+    },
+    {
+      name: 'area',
+      formats: [
+        { name: 'Square Meters (m²)', id: 'areaM2', fn: toFixedUnit('m²') },
+        { name: 'Square Feet (ft²)', id: 'areaF2', fn: toFixedUnit('ft²') },
+        { name: 'Square Miles (mi²)', id: 'areaMI2', fn: toFixedUnit('mi²') },
+      ],
+    },
+    {
+      name: 'computation throughput',
+      formats: [
+        { name: 'FLOP/s', id: 'flops', fn: decimalSIPrefix('FLOP/s') },
+        { name: 'MFLOP/s', id: 'mflops', fn: decimalSIPrefix('FLOP/s', 2) },
+        { name: 'GFLOP/s', id: 'gflops', fn: decimalSIPrefix('FLOP/s', 3) },
+        { name: 'TFLOP/s', id: 'tflops', fn: decimalSIPrefix('FLOP/s', 4) },
+        { name: 'PFLOP/s', id: 'pflops', fn: decimalSIPrefix('FLOP/s', 5) },
+        { name: 'EFLOP/s', id: 'eflops', fn: decimalSIPrefix('FLOP/s', 6) },
       ],
     },
     {
@@ -221,6 +547,157 @@ function buildFormats() {
         { name: 'Bitcoin (฿)', id: 'currencyBTC', fn: currency('฿') },
       ],
     },
+    {
+      name: 'data (IEC)',
+      formats: [
+        { name: 'bits', id: 'bits', fn: binarySIPrefix('b') },
+        { name: 'bytes', id: 'bytes', fn: binarySIPrefix('B') },
+        { name: 'kibibytes', id: 'kbytes', fn: binarySIPrefix('B', 1) },
+        { name: 'mebibytes', id: 'mbytes', fn: binarySIPrefix('B', 2) },
+        { name: 'gibibytes', id: 'gbytes', fn: binarySIPrefix('B', 3) },
+      ],
+    },
+    {
+      name: 'data (Metric)',
+      formats: [
+        { name: 'bits', id: 'decbits', fn: decimalSIPrefix('d') },
+        { name: 'bytes', id: 'decbytes', fn: decimalSIPrefix('B') },
+        { name: 'kilobytes', id: 'deckbytes', fn: decimalSIPrefix('B', 1) },
+        { name: 'megabytes', id: 'decmbytes', fn: decimalSIPrefix('B', 2) },
+        { name: 'gigabytes', id: 'decgbytes', fn: decimalSIPrefix('B', 3) },
+      ],
+    },
+    {
+      name: 'data rate',
+      formats: [
+        { name: 'packets/sec', id: 'pps', fn: decimalSIPrefix('pps') },
+        { name: 'bits/sec', id: 'bps', fn: decimalSIPrefix('bps') },
+        { name: 'bytes/sec', id: 'Bps', fn: decimalSIPrefix('B/s') },
+        { name: 'kilobytes/sec', id: 'KBs', fn: decimalSIPrefix('Bs', 1) },
+        { name: 'kilobits/sec', id: 'Kbits', fn: decimalSIPrefix('bps', 1) },
+        { name: 'megabytes/sec', id: 'MBs', fn: decimalSIPrefix('Bs', 2) },
+        { name: 'megabits/sec', id: 'Mbits', fn: decimalSIPrefix('bps', 2) },
+        { name: 'gigabytes/sec', id: 'GBs', fn: decimalSIPrefix('Bs', 3) },
+        { name: 'gigabits/sec', id: 'Gbits', fn: decimalSIPrefix('bps', 3) },
+      ],
+    },
+    {
+      name: 'date & time',
+      formats: [
+        { name: 'YYYY-MM-DD HH:mm:ss', id: 'dateTimeAsIso', fn: dateTimeAsIso },
+        { name: 'DD/MM/YYYY h:mm:ss a', id: 'dateTimeAsUS', fn: dateTimeAsUS },
+        { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
+      ],
+    },
+    {
+      name: 'energy',
+      formats: [
+        { name: 'Watt (W)', id: 'watt', fn: decimalSIPrefix('W') },
+        { name: 'Kilowatt (kW)', id: 'kwatt', fn: decimalSIPrefix('W', 1) },
+        { name: 'Milliwatt (mW)', id: 'mwatt', fn: decimalSIPrefix('W', -1) },
+        { name: 'Watt per square meter (W/m²)', id: 'Wm2', fn: toFixedUnit('W/m²') },
+        { name: 'Volt-ampere (VA)', id: 'voltamp', fn: decimalSIPrefix('VA') },
+        { name: 'Kilovolt-ampere (kVA)', id: 'kvoltamp', fn: decimalSIPrefix('VA', 1) },
+        { name: 'Volt-ampere reactive (var)', id: 'voltampreact', fn: decimalSIPrefix('var') },
+        { name: 'Kilovolt-ampere reactive (kvar)', id: 'kvoltampreact', fn: decimalSIPrefix('var', 1) },
+        { name: 'Watt-hour (Wh)', id: 'watth', fn: decimalSIPrefix('Wh') },
+        { name: 'Kilowatt-hour (kWh)', id: 'kwatth', fn: decimalSIPrefix('Wh', 1) },
+        { name: 'Kilowatt-min (kWm)', id: 'kwattm', fn: decimalSIPrefix('W/Min', 1) },
+        { name: 'Joule (J)', id: 'joule', fn: decimalSIPrefix('J') },
+        { name: 'Electron volt (eV)', id: 'ev', fn: decimalSIPrefix('eV') },
+        { name: 'Ampere (A)', id: 'amp', fn: decimalSIPrefix('A') },
+        { name: 'Kiloampere (kA)', id: 'kamp', fn: decimalSIPrefix('A', 1) },
+        { name: 'Milliampere (mA)', id: 'mamp', fn: decimalSIPrefix('A', -1) },
+        { name: 'Volt (V)', id: 'volt', fn: decimalSIPrefix('V') },
+        { name: 'Kilovolt (kV)', id: 'kvolt', fn: decimalSIPrefix('V', 1) },
+        { name: 'Millivolt (mV)', id: 'mvolt', fn: decimalSIPrefix('V', -1) },
+        { name: 'Decibel-milliwatt (dBm)', id: 'dBm', fn: decimalSIPrefix('dBm') },
+        { name: 'Ohm (Ω)', id: 'ohm', fn: decimalSIPrefix('Ω') },
+        { name: 'Lumens (Lm)', id: 'lumens', fn: decimalSIPrefix('Lm') },
+      ],
+    },
+    {
+      name: 'hash rate',
+      formats: [
+        { name: 'hashes/sec', id: 'Hs', fn: decimalSIPrefix('H/s') },
+        { name: 'kilohashes/sec', id: 'KHs', fn: decimalSIPrefix('H/s', 1) },
+        { name: 'megahashes/sec', id: 'MHs', fn: decimalSIPrefix('H/s', 2) },
+        { name: 'gigahashes/sec', id: 'GHs', fn: decimalSIPrefix('H/s', 3) },
+        { name: 'terahashes/sec', id: 'THs', fn: decimalSIPrefix('H/s', 4) },
+        { name: 'petahashes/sec', id: 'PHs', fn: decimalSIPrefix('H/s', 5) },
+        { name: 'exahashes/sec', id: 'EHs', fn: decimalSIPrefix('H/s', 6) },
+      ],
+    },
+    {
+      name: 'mass',
+      formats: [
+        { name: 'milligram (mg)', id: 'massmg', fn: decimalSIPrefix('g', -1) },
+        { name: 'gram (g)', id: 'massg', fn: decimalSIPrefix('g') },
+        { name: 'kilogram (kg)', id: 'masskg', fn: decimalSIPrefix('g', 1) },
+        { name: 'metric ton (t)', id: 'masst', fn: toFixedUnit('t') },
+      ],
+    },
+    {
+      name: 'length',
+      formats: [
+        { name: 'millimetre (mm)', id: 'lengthmm', fn: decimalSIPrefix('m', -1) },
+        { name: 'feet (ft)', id: 'lengthft', fn: toFixedUnit('ft') },
+        { name: 'meter (m)', id: 'lengthm', fn: decimalSIPrefix('m') },
+        { name: 'kilometer (km)', id: 'lengthkm', fn: decimalSIPrefix('m', 1) },
+        { name: 'mile (mi)', id: 'lengthmi', fn: toFixedUnit('mi') },
+      ],
+    },
+    {
+      name: 'temperature',
+      formats: [
+        { name: 'Celsius (°C)', id: 'celsius', fn: toFixedUnit('°C') },
+        { name: 'Farenheit (°F)', id: 'farenheit', fn: toFixedUnit('°F') },
+        { name: 'Kelvin (K)', id: 'kelvin', fn: toFixedUnit('K') },
+      ],
+    },
+    {
+      name: 'time',
+      formats: [
+        { name: 'Hertz (1/s)', id: 'hertz', fn: decimalSIPrefix('Hz') },
+        { name: 'nanoseconds (ns)', id: 'ns', fn: toNanoSeconds },
+        { name: 'microseconds (µs)', id: 'µs', fn: toMicroSeconds },
+        { name: 'milliseconds (ms)', id: 'ms', fn: toMilliSeconds },
+        { name: 'seconds (s)', id: 's', fn: toSeconds },
+        { name: 'minutes (m)', id: 'm', fn: toMinutes },
+        { name: 'hours (h)', id: 'h', fn: toHours },
+        { name: 'days (d)', id: 'd', fn: toDays },
+        { name: 'duration (ms)', id: 'dtdurationms', fn: toDurationInMilliseconds },
+        { name: 'duration (s)', id: 'dtdurations', fn: toDurationInSeconds },
+        { name: 'duration (hh:mm:ss)', id: 'dthms', fn: toDurationInHoursMinutesSeconds },
+        { name: 'Timeticks (s/100)', id: 'timeticks', fn: toTimeTicks },
+        { name: 'clock (ms)', id: 'clockms', fn: toClockMilliseconds },
+        { name: 'clock (s)', id: 'clocks', fn: toClockSeconds },
+      ],
+    },
+    {
+      name: 'throughput',
+      formats: [
+        { name: 'ops/sec (ops)', id: 'ops', fn: decimalSIPrefix('ops') },
+        { name: 'requests/sec (rps)', id: 'reqps', fn: decimalSIPrefix('reqps') },
+        { name: 'reads/sec (rps)', id: 'rps', fn: decimalSIPrefix('rps') },
+        { name: 'writes/sec (wps)', id: 'wps', fn: decimalSIPrefix('wps') },
+        { name: 'I/O ops/sec (iops)', id: 'iops', fn: decimalSIPrefix('iops') },
+        { name: 'ops/min (opm)', id: 'opm', fn: decimalSIPrefix('opm') },
+        { name: 'reads/min (rpm)', id: 'rpm', fn: decimalSIPrefix('rpm') },
+        { name: 'writes/min (wpm)', id: 'wpm', fn: decimalSIPrefix('wpm') },
+      ],
+    },
+    {
+      name: 'volume',
+      formats: [
+        { name: 'millilitre (mL)', id: 'mlitre', fn: decimalSIPrefix('L', -1) },
+        { name: 'litre (L)', id: 'litre', fn: decimalSIPrefix('L') },
+        { name: 'cubic metre', id: 'm3', fn: toFixedUnit('m³') },
+        { name: 'Normal cubic metre', id: 'Nm3', fn: toFixedUnit('Nm³') },
+        { name: 'cubic decimetre', id: 'dm3', fn: toFixedUnit('dm³') },
+        { name: 'gallons', id: 'gallons', fn: toFixedUnit('gal') },
+      ],
+    },
   ];
 
   for (const cat of categories) {
@@ -259,7 +736,7 @@ export function getUnitFormats() {
       submenu: cat.formats.map(format => {
         return {
           text: format.name,
-          value: format.id,
+          id: format.id,
         };
       }),
     };

From c964d6d7ef561aac4b07c6bdc591dbe4f78268d3 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 08:51:34 +0100
Subject: [PATCH 181/352] wip: fix broken tests

---
 .../datasource/stackdriver/filter_segments.ts |   2 +-
 .../stackdriver/query_filter_ctrl.ts          |   3 +-
 .../specs/query_filter_ctrl.test.ts           | 560 +++++++++---------
 3 files changed, 290 insertions(+), 275 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/filter_segments.ts b/public/app/plugins/datasource/stackdriver/filter_segments.ts
index 5beae1cdeb1..e9adcad6da6 100644
--- a/public/app/plugins/datasource/stackdriver/filter_segments.ts
+++ b/public/app/plugins/datasource/stackdriver/filter_segments.ts
@@ -44,7 +44,7 @@ export class FilterSegments {
         this.removeSegment.value = DefaultRemoveFilterValue;
         return Promise.resolve([this.removeSegment]);
       } else {
-        return this.getFilterKeysFunc(segment, DefaultRemoveFilterValue, segment.type === 'plus-button');
+        return this.getFilterKeysFunc(segment, DefaultRemoveFilterValue);
       }
     }
 
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 0513677c3f9..99a2bd0f361 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -31,7 +31,7 @@ export class StackdriverFilterCtrl {
   removeSegment: any;
 
   /** @ngInject */
-  constructor(private $scope, private uiSegmentSrv, private templateSrv, private $rootScope) {
+  constructor(private $scope, private uiSegmentSrv, private templateSrv) {
     this.$scope = $scope.hasOwnProperty('groupBysChanged') ? $scope : $scope.$parent;
 
     this.initSegments(this.$scope.hideGroupBys);
@@ -139,7 +139,6 @@ export class StackdriverFilterCtrl {
     const groupBys = this.groupBySegments.reduce(reducer, []);
     this.$scope.groupBysChanged(groupBys);
     this.ensurePlusButton(this.groupBySegments);
-    this.$rootScope.$broadcast('metricTypeChanged');
   }
 
   async getFilters(segment, index) {
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 539ac5c71da..00d3f13c1cf 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -1,10 +1,12 @@
 import { StackdriverFilterCtrl } from '../query_filter_ctrl';
 import { TemplateSrvStub } from 'test/specs/helpers';
-import { DefaultRemoveFilterValue, DefaultFilterValue } from '../filter_segments';
+// import { DefaultRemoveFilterValue, DefaultFilterValue } from '../filter_segments';
 
 describe('StackdriverQueryFilterCtrl', () => {
   let ctrl;
   let result;
+  // let filterChangedMock;
+  let groupByChangedMock;
 
   describe('when initializing query editor', () => {
     beforeEach(() => {
@@ -32,10 +34,10 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when labels are fetched', () => {
       beforeEach(async () => {
-        ctrl.metricLabels = { 'metric-key-1': ['metric-value-1'] };
-        ctrl.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
+        ctrl.$scope.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
+        ctrl.$scope.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
 
-        result = await ctrl.getGroupBys();
+        result = await ctrl.getGroupBys({ type: '' });
       });
 
       it('should populate group bys segments', () => {
@@ -48,17 +50,17 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when a group by label is selected', () => {
       beforeEach(async () => {
-        ctrl.metricLabels = {
+        ctrl.$scope.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.resourceLabels = {
+        ctrl.$scope.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
-        ctrl.target.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
+        ctrl.$scope.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
 
-        result = await ctrl.getGroupBys();
+        result = await ctrl.getGroupBys({ type: '' });
       });
 
       it('should not be used to populate group bys segments', () => {
@@ -71,6 +73,8 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when a group by is selected', () => {
       beforeEach(() => {
+        groupByChangedMock = jest.fn();
+        ctrl.$scope.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -78,20 +82,23 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(ctrl.target.groupBys.length).toBe(1);
+        expect(groupByChangedMock).toHaveBeenCalledWith(['groupby1']);
       });
     });
 
     describe('when a selected group by is removed', () => {
       beforeEach(() => {
+        groupByChangedMock = jest.fn();
+        ctrl.$scope.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
-        ctrl.groupByChanged(removeSegment);
+        // console.log('jepp4', removeSegment);
+        ctrl.$scope.groupByChanged(removeSegment);
       });
 
       it('should be added to group bys list', () => {
-        expect(ctrl.target.groupBys.length).toBe(0);
+        expect(groupByChangedMock).toHaveBeenCalledWith([]);
       });
     });
   });
@@ -101,268 +108,268 @@ describe('StackdriverQueryFilterCtrl', () => {
       ctrl = createCtrlWithFakes();
     });
 
-    describe('when values for a condition filter part are fetched', () => {
-      beforeEach(async () => {
-        const segment = { type: 'condition' };
-        result = await ctrl.getFilters(segment, 0);
-      });
+    // describe('when values for a condition filter part are fetched', () => {
+    //   beforeEach(async () => {
+    //     const segment = { type: 'condition' };
+    //     result = await ctrl.getFilters(segment, 0);
+    //   });
 
-      it('should populate condition segments', () => {
-        expect(result.length).toBe(1);
-        expect(result[0].value).toBe('AND');
-      });
-    });
+    //   it('should populate condition segments', () => {
+    //     expect(result.length).toBe(1);
+    //     expect(result[0].value).toBe('AND');
+    //   });
+    // });
 
-    describe('when values for a operator filter part are fetched', () => {
-      beforeEach(async () => {
-        const segment = { type: 'operator' };
-        result = await ctrl.getFilters(segment, 0);
-      });
+    // describe('when values for a operator filter part are fetched', () => {
+    //   beforeEach(async () => {
+    //     const segment = { type: 'operator' };
+    //     result = await ctrl.getFilters(segment, 0);
+    //   });
 
-      it('should populate group bys segments', () => {
-        expect(result.length).toBe(4);
-        expect(result[0].value).toBe('=');
-        expect(result[1].value).toBe('!=');
-        expect(result[2].value).toBe('=~');
-        expect(result[3].value).toBe('!=~');
-      });
-    });
+    //   it('should populate group bys segments', () => {
+    //     expect(result.length).toBe(4);
+    //     expect(result[0].value).toBe('=');
+    //     expect(result[1].value).toBe('!=');
+    //     expect(result[2].value).toBe('=~');
+    //     expect(result[3].value).toBe('!=~');
+    //   });
+    // });
 
-    describe('when values for a key filter part are fetched', () => {
-      beforeEach(async () => {
-        ctrl.metricLabels = {
-          'metric-key-1': ['metric-value-1'],
-          'metric-key-2': ['metric-value-2'],
-        };
-        ctrl.resourceLabels = {
-          'resource-key-1': ['resource-value-1'],
-          'resource-key-2': ['resource-value-2'],
-        };
+    //   describe('when values for a key filter part are fetched', () => {
+    //     beforeEach(async () => {
+    //       ctrl.metricLabels = {
+    //         'metric-key-1': ['metric-value-1'],
+    //         'metric-key-2': ['metric-value-2'],
+    //       };
+    //       ctrl.resourceLabels = {
+    //         'resource-key-1': ['resource-value-1'],
+    //         'resource-key-2': ['resource-value-2'],
+    //       };
 
-        const segment = { type: 'key' };
-        result = await ctrl.getFilters(segment, 0);
-      });
+    //       const segment = { type: 'key' };
+    //       result = await ctrl.getFilters(segment, 0);
+    //     });
 
-      it('should populate filter key segments', () => {
-        expect(result.length).toBe(5);
-        expect(result[0].value).toBe('metric.label.metric-key-1');
-        expect(result[1].value).toBe('metric.label.metric-key-2');
-        expect(result[2].value).toBe('resource.label.resource-key-1');
-        expect(result[3].value).toBe('resource.label.resource-key-2');
-        expect(result[4].value).toBe('-- remove filter --');
-      });
-    });
+    //     it('should populate filter key segments', () => {
+    //       expect(result.length).toBe(5);
+    //       expect(result[0].value).toBe('metric.label.metric-key-1');
+    //       expect(result[1].value).toBe('metric.label.metric-key-2');
+    //       expect(result[2].value).toBe('resource.label.resource-key-1');
+    //       expect(result[3].value).toBe('resource.label.resource-key-2');
+    //       expect(result[4].value).toBe('-- remove filter --');
+    //     });
+    //   });
 
-    describe('when values for a value filter part are fetched', () => {
-      beforeEach(async () => {
-        ctrl.metricLabels = {
-          'metric-key-1': ['metric-value-1'],
-          'metric-key-2': ['metric-value-2'],
-        };
-        ctrl.resourceLabels = {
-          'resource-key-1': ['resource-value-1'],
-          'resource-key-2': ['resource-value-2'],
-        };
+    //   describe('when values for a value filter part are fetched', () => {
+    //     beforeEach(async () => {
+    //       ctrl.metricLabels = {
+    //         'metric-key-1': ['metric-value-1'],
+    //         'metric-key-2': ['metric-value-2'],
+    //       };
+    //       ctrl.resourceLabels = {
+    //         'resource-key-1': ['resource-value-1'],
+    //         'resource-key-2': ['resource-value-2'],
+    //       };
 
-        ctrl.filterSegments.filterSegments = [
-          { type: 'key', value: 'metric.label.metric-key-1' },
-          { type: 'operator', value: '=' },
-        ];
+    //       ctrl.filterSegments.filterSegments = [
+    //         { type: 'key', value: 'metric.label.metric-key-1' },
+    //         { type: 'operator', value: '=' },
+    //       ];
 
-        const segment = { type: 'value' };
-        result = await ctrl.getFilters(segment, 2);
-      });
+    //       const segment = { type: 'value' };
+    //       result = await ctrl.getFilters(segment, 2);
+    //     });
 
-      it('should populate filter value segments', () => {
-        expect(result.length).toBe(1);
-        expect(result[0].value).toBe('metric-value-1');
-      });
-    });
+    //     it('should populate filter value segments', () => {
+    //       expect(result.length).toBe(1);
+    //       expect(result[0].value).toBe('metric-value-1');
+    //     });
+    //   });
 
-    describe('when a filter is created by clicking on plus button', () => {
-      describe('and there are no other filters', () => {
-        beforeEach(() => {
-          const segment = { value: 'filterkey1', type: 'plus-button' };
-          ctrl.filterSegments.filterSegments = [segment];
-          ctrl.filterSegmentUpdated(segment, 0);
-        });
+    //   describe('when a filter is created by clicking on plus button', () => {
+    //     describe('and there are no other filters', () => {
+    //       beforeEach(() => {
+    //         const segment = { value: 'filterkey1', type: 'plus-button' };
+    //         ctrl.filterSegments.filterSegments = [segment];
+    //         ctrl.filterSegmentUpdated(segment, 0);
+    //       });
 
-        it('should transform the plus button segment to a key segment', () => {
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-        });
+    //       it('should transform the plus button segment to a key segment', () => {
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //       });
 
-        it('should add an operator, value segment and plus button segment', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(3);
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-        });
-      });
-    });
-    describe('when has one existing filter', () => {
-      describe('and user clicks on key segment', () => {
-        beforeEach(() => {
-          const existingKeySegment = { value: 'filterkey1', type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: 'filtervalue', type: 'value' };
-          const plusSegment = { value: '', type: 'plus-button' };
-          ctrl.filterSegments.filterSegments = [
-            existingKeySegment,
-            existingOperatorSegment,
-            existingValueSegment,
-            plusSegment,
-          ];
-          ctrl.filterSegmentUpdated(existingKeySegment, 0);
-        });
+    //       it('should add an operator, value segment and plus button segment', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(3);
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //       });
+    //     });
+    //   });
+    //   describe('when has one existing filter', () => {
+    //     describe('and user clicks on key segment', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
+    //         const plusSegment = { value: '', type: 'plus-button' };
+    //         ctrl.filterSegments.filterSegments = [
+    //           existingKeySegment,
+    //           existingOperatorSegment,
+    //           existingValueSegment,
+    //           plusSegment,
+    //         ];
+    //         ctrl.filterSegmentUpdated(existingKeySegment, 0);
+    //       });
 
-        it('should not add any new segments', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-        });
-      });
-      describe('and user clicks on value segment and value not equal to fake value', () => {
-        beforeEach(() => {
-          const existingKeySegment = { value: 'filterkey1', type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: 'filtervalue', type: 'value' };
-          ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
-          ctrl.filterSegmentUpdated(existingValueSegment, 2);
-        });
+    //       it('should not add any new segments', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //       });
+    //     });
+    //     describe('and user clicks on value segment and value not equal to fake value', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
+    //         ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
+    //         ctrl.filterSegmentUpdated(existingValueSegment, 2);
+    //       });
 
-        it('should ensure that plus segment exists', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-          expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
-        });
-      });
+    //       it('should ensure that plus segment exists', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
+    //       });
+    //     });
 
-      describe('and user clicks on value segment and value is equal to fake value', () => {
-        beforeEach(() => {
-          const existingKeySegment = { value: 'filterkey1', type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: DefaultFilterValue, type: 'value' };
-          ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
-          ctrl.filterSegmentUpdated(existingValueSegment, 2);
-        });
+    //     describe('and user clicks on value segment and value is equal to fake value', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: DefaultFilterValue, type: 'value' };
+    //         ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
+    //         ctrl.filterSegmentUpdated(existingValueSegment, 2);
+    //       });
 
-        it('should not add plus segment', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(3);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-        });
-      });
-      describe('and user removes key segment', () => {
-        beforeEach(() => {
-          const existingKeySegment = { value: DefaultRemoveFilterValue, type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: 'filtervalue', type: 'value' };
-          const plusSegment = { value: '', type: 'plus-button' };
-          ctrl.filterSegments.filterSegments = [
-            existingKeySegment,
-            existingOperatorSegment,
-            existingValueSegment,
-            plusSegment,
-          ];
-          ctrl.filterSegmentUpdated(existingKeySegment, 0);
-        });
+    //       it('should not add plus segment', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(3);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //       });
+    //     });
+    //     describe('and user removes key segment', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment = { value: DefaultRemoveFilterValue, type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
+    //         const plusSegment = { value: '', type: 'plus-button' };
+    //         ctrl.filterSegments.filterSegments = [
+    //           existingKeySegment,
+    //           existingOperatorSegment,
+    //           existingValueSegment,
+    //           plusSegment,
+    //         ];
+    //         ctrl.filterSegmentUpdated(existingKeySegment, 0);
+    //       });
 
-        it('should remove filter segments', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(1);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('plus-button');
-        });
-      });
+    //       it('should remove filter segments', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(1);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('plus-button');
+    //       });
+    //     });
 
-      describe('and user removes key segment and there is a previous filter', () => {
-        beforeEach(() => {
-          const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
-          const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: 'filtervalue', type: 'value' };
-          const conditionSegment = { value: 'AND', type: 'condition' };
-          const plusSegment = { value: '', type: 'plus-button' };
-          ctrl.filterSegments.filterSegments = [
-            existingKeySegment1,
-            existingOperatorSegment,
-            existingValueSegment,
-            conditionSegment,
-            existingKeySegment2,
-            Object.assign({}, existingOperatorSegment),
-            Object.assign({}, existingValueSegment),
-            plusSegment,
-          ];
-          ctrl.filterSegmentUpdated(existingKeySegment2, 4);
-        });
+    //     describe('and user removes key segment and there is a previous filter', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
+    //         const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
+    //         const conditionSegment = { value: 'AND', type: 'condition' };
+    //         const plusSegment = { value: '', type: 'plus-button' };
+    //         ctrl.filterSegments.filterSegments = [
+    //           existingKeySegment1,
+    //           existingOperatorSegment,
+    //           existingValueSegment,
+    //           conditionSegment,
+    //           existingKeySegment2,
+    //           Object.assign({}, existingOperatorSegment),
+    //           Object.assign({}, existingValueSegment),
+    //           plusSegment,
+    //         ];
+    //         ctrl.filterSegmentUpdated(existingKeySegment2, 4);
+    //       });
 
-        it('should remove filter segments and the condition segment', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-          expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
-        });
-      });
+    //       it('should remove filter segments and the condition segment', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
+    //       });
+    //     });
 
-      describe('and user removes key segment and there is a filter after it', () => {
-        beforeEach(() => {
-          const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
-          const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: 'filtervalue', type: 'value' };
-          const conditionSegment = { value: 'AND', type: 'condition' };
-          const plusSegment = { value: '', type: 'plus-button' };
-          ctrl.filterSegments.filterSegments = [
-            existingKeySegment1,
-            existingOperatorSegment,
-            existingValueSegment,
-            conditionSegment,
-            existingKeySegment2,
-            Object.assign({}, existingOperatorSegment),
-            Object.assign({}, existingValueSegment),
-            plusSegment,
-          ];
-          ctrl.filterSegmentUpdated(existingKeySegment1, 0);
-        });
+    //     describe('and user removes key segment and there is a filter after it', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
+    //         const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
+    //         const conditionSegment = { value: 'AND', type: 'condition' };
+    //         const plusSegment = { value: '', type: 'plus-button' };
+    //         ctrl.filterSegments.filterSegments = [
+    //           existingKeySegment1,
+    //           existingOperatorSegment,
+    //           existingValueSegment,
+    //           conditionSegment,
+    //           existingKeySegment2,
+    //           Object.assign({}, existingOperatorSegment),
+    //           Object.assign({}, existingValueSegment),
+    //           plusSegment,
+    //         ];
+    //         ctrl.filterSegmentUpdated(existingKeySegment1, 0);
+    //       });
 
-        it('should remove filter segments and the condition segment', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-          expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
-        });
-      });
+    //       it('should remove filter segments and the condition segment', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
+    //       });
+    //     });
 
-      describe('and user clicks on plus button', () => {
-        beforeEach(() => {
-          const existingKeySegment = { value: 'filterkey1', type: 'key' };
-          const existingOperatorSegment = { value: '=', type: 'operator' };
-          const existingValueSegment = { value: 'filtervalue', type: 'value' };
-          const plusSegment = { value: 'filterkey2', type: 'plus-button' };
-          ctrl.filterSegments.filterSegments = [
-            existingKeySegment,
-            existingOperatorSegment,
-            existingValueSegment,
-            plusSegment,
-          ];
-          ctrl.filterSegmentUpdated(plusSegment, 3);
-        });
+    //     describe('and user clicks on plus button', () => {
+    //       beforeEach(() => {
+    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
+    //         const existingOperatorSegment = { value: '=', type: 'operator' };
+    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
+    //         const plusSegment = { value: 'filterkey2', type: 'plus-button' };
+    //         ctrl.filterSegments.filterSegments = [
+    //           existingKeySegment,
+    //           existingOperatorSegment,
+    //           existingValueSegment,
+    //           plusSegment,
+    //         ];
+    //         ctrl.filterSegmentUpdated(plusSegment, 3);
+    //       });
 
-        it('should condition segment and new filter segments', () => {
-          expect(ctrl.filterSegments.filterSegments.length).toBe(7);
-          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-          expect(ctrl.filterSegments.filterSegments[3].type).toBe('condition');
-          expect(ctrl.filterSegments.filterSegments[4].type).toBe('key');
-          expect(ctrl.filterSegments.filterSegments[5].type).toBe('operator');
-          expect(ctrl.filterSegments.filterSegments[6].type).toBe('value');
-        });
-      });
-    });
+    //       it('should condition segment and new filter segments', () => {
+    //         expect(ctrl.filterSegments.filterSegments.length).toBe(7);
+    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('condition');
+    //         expect(ctrl.filterSegments.filterSegments[4].type).toBe('key');
+    //         expect(ctrl.filterSegments.filterSegments[5].type).toBe('operator');
+    //         expect(ctrl.filterSegments.filterSegments[6].type).toBe('value');
+    //       });
+    //     });
+    //   });
   });
 });
 
@@ -403,7 +410,16 @@ function createCtrlWithFakes(existingFilters?: string[]) {
     },
   };
   const scope = {
-    target: createTarget(existingFilters),
+    hideGroupBys: false,
+    groupBys: [],
+    filters: existingFilters || [],
+    labelData: {
+      metricLabels: {},
+      resourceLabels: {},
+      resourceTypes: [],
+    },
+    filtersChanged: () => {},
+    groupBysChanged: () => {},
     datasource: {
       getDefaultProject: () => {
         return 'project';
@@ -412,27 +428,27 @@ function createCtrlWithFakes(existingFilters?: string[]) {
     refresh: () => {},
   };
 
-  return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub(), { $broadcast: param => {} });
+  return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub());
 }
 
-function createTarget(existingFilters?: string[]) {
-  return {
-    project: {
-      id: '',
-      name: '',
-    },
-    unit: '',
-    metricType: 'ametric',
-    service: '',
-    refId: 'A',
-    crossSeriesReducer: '',
-    alignmentPeriod: '',
-    perSeriesAligner: '',
-    groupBys: [],
-    filters: existingFilters || [],
-    aliasBy: '',
-    metricService: '',
-    metricKind: '',
-    valueType: '',
-  };
-}
+// function createTarget(existingFilters?: string[]) {
+//   return {
+//     project: {
+//       id: '',
+//       name: '',
+//     },
+//     unit: '',
+//     metricType: 'ametric',
+//     service: '',
+//     refId: 'A',
+//     crossSeriesReducer: '',
+//     alignmentPeriod: '',
+//     perSeriesAligner: '',
+//     groupBys: [],
+//     filters: existingFilters || [],
+//     aliasBy: '',
+//     metricService: '',
+//     metricKind: '',
+//     valueType: '',
+//   };
+// }

From 4f943687d84c66165511547eb888607c219bbe9f Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 8 Jan 2019 09:55:23 +0100
Subject: [PATCH 182/352] feat: Display error when plot fail to render

---
 packages/grafana-ui/src/types/panel.ts        |  1 +
 .../src/visualizations/Graph/Graph.tsx        |  4 ++-
 public/app/core/components/Tooltip/Popper.tsx | 12 ++++-----
 .../core/components/Tooltip/withPopper.tsx    |  6 ++---
 .../features/dashboard/dashgrid/DataPanel.tsx | 26 ++++++++++++++++---
 .../dashboard/dashgrid/PanelChrome.tsx        |  4 +--
 .../app/plugins/panel/graph2/GraphPanel.tsx   |  7 ++---
 public/sass/pages/_dashboard.scss             |  2 +-
 8 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 44336555a81..cf808f514de 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -9,6 +9,7 @@ export interface PanelProps<T = any> {
   renderCounter: number;
   width: number;
   height: number;
+  onRenderError: () => void;
 }
 
 export interface PanelOptionsProps<T = any> {
diff --git a/packages/grafana-ui/src/visualizations/Graph/Graph.tsx b/packages/grafana-ui/src/visualizations/Graph/Graph.tsx
index 51afb33802d..b3f2120639c 100644
--- a/packages/grafana-ui/src/visualizations/Graph/Graph.tsx
+++ b/packages/grafana-ui/src/visualizations/Graph/Graph.tsx
@@ -13,6 +13,7 @@ interface GraphProps {
   showBars?: boolean;
   width: number;
   height: number;
+  onRenderError: () => void;
 }
 
 export class Graph extends PureComponent<GraphProps> {
@@ -37,7 +38,7 @@ export class Graph extends PureComponent<GraphProps> {
       return;
     }
 
-    const { width, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
+    const { width, timeSeries, timeRange, showLines, showBars, showPoints, onRenderError } = this.props;
 
     if (!width) {
       return;
@@ -98,6 +99,7 @@ export class Graph extends PureComponent<GraphProps> {
       $.plot(this.element, timeSeries, flotOptions);
     } catch (err) {
       console.log('Graph rendering error', err, flotOptions, timeSeries);
+      onRenderError();
     }
   }
 
diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index d5ea1d93091..65ef510ba8f 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -3,6 +3,11 @@ import Portal from 'app/core/components/Portal/Portal';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
 
+export enum Themes {
+  Default = 'popper__background--default',
+  Error = 'popper__background--error',
+}
+
 const defaultTransitionStyles = {
   transition: 'opacity 200ms linear',
   opacity: 0,
@@ -21,12 +26,7 @@ interface Props {
   placement?: any;
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
-  theme?: string;
-}
-
-export enum Themes {
-  Default = 'popper__background--default',
-  Error = 'popper__background--error',
+  theme?: Themes;
 }
 
 class Popper extends PureComponent<Props> {
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
index 7be12748247..3766b78f0f6 100644
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { Themes } from './Popper';
 export interface UsingPopperProps {
   showPopper: (prevState: object) => void;
   hidePopper: (prevState: object) => void;
@@ -9,7 +9,7 @@ export interface UsingPopperProps {
   content: string | ((props: any) => JSX.Element);
   className?: string;
   refClassName?: string;
-  theme?: string;
+  theme?: Themes;
 }
 
 interface Props {
@@ -17,7 +17,7 @@ interface Props {
   className?: string;
   refClassName?: string;
   content: string | ((props: any) => JSX.Element);
-  theme?: string;
+  theme?: Themes;
 }
 
 interface State {
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index d57b787bf57..4cd9460802a 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -16,6 +16,7 @@ import { Themes } from 'app/core/components/Tooltip/Popper';
 interface RenderProps {
   loading: LoadingState;
   timeSeries: TimeSeries[];
+  onRenderError: () => void;
 }
 
 export interface Props {
@@ -35,6 +36,7 @@ export interface Props {
 export interface State {
   isFirstLoad: boolean;
   loading: LoadingState;
+  errorMessage: string;
   response: DataQueryResponse;
 }
 
@@ -53,6 +55,7 @@ export class DataPanel extends Component<Props, State> {
 
     this.state = {
       loading: LoadingState.NotStarted,
+      errorMessage: '',
       response: {
         data: [],
       },
@@ -92,7 +95,7 @@ export class DataPanel extends Component<Props, State> {
       return;
     }
 
-    this.setState({ loading: LoadingState.Loading });
+    this.setState({ loading: LoadingState.Loading, errorMessage: '' });
 
     try {
       const ds = await this.dataSourceSrv.get(datasource);
@@ -130,10 +133,24 @@ export class DataPanel extends Component<Props, State> {
       });
     } catch (err) {
       console.log('Loading error', err);
-      this.setState({ loading: LoadingState.Error, isFirstLoad: false });
+      this.onError('Request Error');
     }
   };
 
+  onError = (errorMessage: string) => {
+    if (this.state.loading !== LoadingState.Error || this.state.errorMessage !== errorMessage) {
+      this.setState({
+        loading: LoadingState.Error,
+        isFirstLoad: false,
+        errorMessage: errorMessage
+      });
+    }
+  }
+
+  onRenderError = () => {
+    this.onError('Error rendering panel');
+  }
+
   render() {
     const { queries } = this.props;
     const { response, loading, isFirstLoad } = this.state;
@@ -158,13 +175,14 @@ export class DataPanel extends Component<Props, State> {
         {this.props.children({
           timeSeries,
           loading,
+          onRenderError: this.onRenderError
         })}
       </>
     );
   }
 
   private renderLoadingStates(): JSX.Element {
-    const { loading } = this.state;
+    const { loading, errorMessage } = this.state;
     if (loading === LoadingState.Loading) {
       return (
         <div className="panel-loading">
@@ -174,7 +192,7 @@ export class DataPanel extends Component<Props, State> {
     } else if (loading === LoadingState.Error) {
       return (
         <Tooltip
-          content="Request Error"
+          content={errorMessage}
           className="popper__manager--block"
           refClassName={`panel-info-corner panel-info-corner--error`}
           placement="bottom-start"
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 94719dfe6e0..90d66a14cd3 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -87,7 +87,6 @@ export class PanelChrome extends PureComponent<Props, State> {
     const { datasource, targets, transparent } = panel;
     const PanelComponent = plugin.exports.Panel;
     const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
-
     return (
       <AutoSizer>
         {({ width, height }) => {
@@ -115,7 +114,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 widthPixels={width}
                 refreshCounter={refreshCounter}
               >
-                {({ loading, timeSeries }) => {
+                {({ loading, timeSeries, onRenderError }) => {
                   return (
                     <div className="panel-content">
                       <PanelComponent
@@ -126,6 +125,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                         width={width}
                         height={height - PANEL_HEADER_HEIGHT}
                         renderCounter={renderCounter}
+                        onRenderError={onRenderError}
                       />
                     </div>
                   );
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index a08276e5179..1a23fba0c27 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import _ from 'lodash';
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import colors from 'app/core/utils/colors';
 
 // Components & Types
@@ -9,13 +9,13 @@ import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}
 
-export class GraphPanel extends PureComponent<Props> {
+export class GraphPanel extends Component<Props> {
   constructor(props) {
     super(props);
   }
 
   render() {
-    const { timeSeries, timeRange, width, height } = this.props;
+    const { timeSeries, timeRange, width, height, onRenderError } = this.props;
     const { showLines, showBars, showPoints } = this.props.options;
 
     const vmSeries = processTimeSeries({
@@ -33,6 +33,7 @@ export class GraphPanel extends PureComponent<Props> {
         showBars={showBars}
         width={width}
         height={height}
+        onRenderError={onRenderError}
       />
     );
   }
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 81698d396f8..a0ff9fd877c 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -233,7 +233,7 @@ div.flot-text {
 
   &--error {
     display: block;
-    color: $text-color;
+    color: $white;
     @include panel-corner-color($popover-error-bg);
     .fa:before {
       content: '\f12a';

From d6e7fccc97b2e2acb715c2d3b738ef9f761580cd Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 10:00:10 +0100
Subject: [PATCH 183/352] fix more broken tests

---
 .../specs/query_filter_ctrl.test.ts           | 520 ++++++++----------
 1 file changed, 240 insertions(+), 280 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 00d3f13c1cf..f933f866777 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -1,6 +1,6 @@
 import { StackdriverFilterCtrl } from '../query_filter_ctrl';
 import { TemplateSrvStub } from 'test/specs/helpers';
-// import { DefaultRemoveFilterValue, DefaultFilterValue } from '../filter_segments';
+import { DefaultRemoveFilterValue, DefaultFilterValue } from '../filter_segments';
 
 describe('StackdriverQueryFilterCtrl', () => {
   let ctrl;
@@ -93,8 +93,7 @@ describe('StackdriverQueryFilterCtrl', () => {
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
-        // console.log('jepp4', removeSegment);
-        ctrl.$scope.groupByChanged(removeSegment);
+        ctrl.groupByChanged(removeSegment);
       });
 
       it('should be added to group bys list', () => {
@@ -108,279 +107,262 @@ describe('StackdriverQueryFilterCtrl', () => {
       ctrl = createCtrlWithFakes();
     });
 
-    // describe('when values for a condition filter part are fetched', () => {
-    //   beforeEach(async () => {
-    //     const segment = { type: 'condition' };
-    //     result = await ctrl.getFilters(segment, 0);
-    //   });
+    describe('when values for a condition filter part are fetched', () => {
+      beforeEach(async () => {
+        const segment = { type: 'condition' };
+        result = await ctrl.getFilters(segment, 0);
+      });
 
-    //   it('should populate condition segments', () => {
-    //     expect(result.length).toBe(1);
-    //     expect(result[0].value).toBe('AND');
-    //   });
-    // });
+      it('should populate condition segments', () => {
+        expect(result.length).toBe(1);
+        expect(result[0].value).toBe('AND');
+      });
+    });
 
-    // describe('when values for a operator filter part are fetched', () => {
-    //   beforeEach(async () => {
-    //     const segment = { type: 'operator' };
-    //     result = await ctrl.getFilters(segment, 0);
-    //   });
+    describe('when values for a operator filter part are fetched', () => {
+      beforeEach(async () => {
+        const segment = { type: 'operator' };
+        result = await ctrl.getFilters(segment, 0);
+      });
 
-    //   it('should populate group bys segments', () => {
-    //     expect(result.length).toBe(4);
-    //     expect(result[0].value).toBe('=');
-    //     expect(result[1].value).toBe('!=');
-    //     expect(result[2].value).toBe('=~');
-    //     expect(result[3].value).toBe('!=~');
-    //   });
-    // });
+      it('should populate group bys segments', () => {
+        expect(result.length).toBe(4);
+        expect(result[0].value).toBe('=');
+        expect(result[1].value).toBe('!=');
+        expect(result[2].value).toBe('=~');
+        expect(result[3].value).toBe('!=~');
+      });
+    });
 
-    //   describe('when values for a key filter part are fetched', () => {
-    //     beforeEach(async () => {
-    //       ctrl.metricLabels = {
-    //         'metric-key-1': ['metric-value-1'],
-    //         'metric-key-2': ['metric-value-2'],
-    //       };
-    //       ctrl.resourceLabels = {
-    //         'resource-key-1': ['resource-value-1'],
-    //         'resource-key-2': ['resource-value-2'],
-    //       };
+    describe('when values for a key filter part are fetched', () => {
+      beforeEach(async () => {
+        ctrl.$scope.labelData.metricLabels = {
+          'metric-key-1': ['metric-value-1'],
+          'metric-key-2': ['metric-value-2'],
+        };
+        ctrl.$scope.labelData.resourceLabels = {
+          'resource-key-1': ['resource-value-1'],
+          'resource-key-2': ['resource-value-2'],
+        };
 
-    //       const segment = { type: 'key' };
-    //       result = await ctrl.getFilters(segment, 0);
-    //     });
+        const segment = { type: 'key' };
+        result = await ctrl.getFilters(segment, 0);
+      });
 
-    //     it('should populate filter key segments', () => {
-    //       expect(result.length).toBe(5);
-    //       expect(result[0].value).toBe('metric.label.metric-key-1');
-    //       expect(result[1].value).toBe('metric.label.metric-key-2');
-    //       expect(result[2].value).toBe('resource.label.resource-key-1');
-    //       expect(result[3].value).toBe('resource.label.resource-key-2');
-    //       expect(result[4].value).toBe('-- remove filter --');
-    //     });
-    //   });
+      it('should populate filter key segments', () => {
+        expect(result.length).toBe(5);
+        expect(result[0].value).toBe('metric.label.metric-key-1');
+        expect(result[1].value).toBe('metric.label.metric-key-2');
+        expect(result[2].value).toBe('resource.label.resource-key-1');
+        expect(result[3].value).toBe('resource.label.resource-key-2');
+        expect(result[4].value).toBe('-- remove filter --');
+      });
+    });
 
-    //   describe('when values for a value filter part are fetched', () => {
-    //     beforeEach(async () => {
-    //       ctrl.metricLabels = {
-    //         'metric-key-1': ['metric-value-1'],
-    //         'metric-key-2': ['metric-value-2'],
-    //       };
-    //       ctrl.resourceLabels = {
-    //         'resource-key-1': ['resource-value-1'],
-    //         'resource-key-2': ['resource-value-2'],
-    //       };
+    describe('when values for a value filter part are fetched', () => {
+      beforeEach(async () => {
+        ctrl.$scope.labelData.metricLabels = {
+          'metric-key-1': ['metric-value-1'],
+          'metric-key-2': ['metric-value-2'],
+        };
+        ctrl.$scope.labelData.resourceLabels = {
+          'resource-key-1': ['resource-value-1'],
+          'resource-key-2': ['resource-value-2'],
+        };
 
-    //       ctrl.filterSegments.filterSegments = [
-    //         { type: 'key', value: 'metric.label.metric-key-1' },
-    //         { type: 'operator', value: '=' },
-    //       ];
+        ctrl.filterSegments.filterSegments = [
+          { type: 'key', value: 'metric.label.metric-key-1' },
+          { type: 'operator', value: '=' },
+        ];
 
-    //       const segment = { type: 'value' };
-    //       result = await ctrl.getFilters(segment, 2);
-    //     });
+        const segment = { type: 'value' };
+        result = await ctrl.getFilters(segment, 2);
+      });
 
-    //     it('should populate filter value segments', () => {
-    //       expect(result.length).toBe(1);
-    //       expect(result[0].value).toBe('metric-value-1');
-    //     });
-    //   });
+      it('should populate filter value segments', () => {
+        expect(result.length).toBe(1);
+        expect(result[0].value).toBe('metric-value-1');
+      });
+    });
 
-    //   describe('when a filter is created by clicking on plus button', () => {
-    //     describe('and there are no other filters', () => {
-    //       beforeEach(() => {
-    //         const segment = { value: 'filterkey1', type: 'plus-button' };
-    //         ctrl.filterSegments.filterSegments = [segment];
-    //         ctrl.filterSegmentUpdated(segment, 0);
-    //       });
+    describe('when a filter is created by clicking on plus button', () => {
+      describe('and there are no other filters', () => {
+        beforeEach(() => {
+          const segment = { value: 'filterkey1', type: 'plus-button' };
+          ctrl.filterSegments.filterSegments = [segment];
+          ctrl.filterSegmentUpdated(segment, 0);
+        });
 
-    //       it('should transform the plus button segment to a key segment', () => {
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //       });
+        it('should transform the plus button segment to a key segment', () => {
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+        });
 
-    //       it('should add an operator, value segment and plus button segment', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(3);
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //       });
-    //     });
-    //   });
-    //   describe('when has one existing filter', () => {
-    //     describe('and user clicks on key segment', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
-    //         const plusSegment = { value: '', type: 'plus-button' };
-    //         ctrl.filterSegments.filterSegments = [
-    //           existingKeySegment,
-    //           existingOperatorSegment,
-    //           existingValueSegment,
-    //           plusSegment,
-    //         ];
-    //         ctrl.filterSegmentUpdated(existingKeySegment, 0);
-    //       });
+        it('should add an operator, value segment and plus button segment', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(3);
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+        });
+      });
+    });
 
-    //       it('should not add any new segments', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //       });
-    //     });
-    //     describe('and user clicks on value segment and value not equal to fake value', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
-    //         ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
-    //         ctrl.filterSegmentUpdated(existingValueSegment, 2);
-    //       });
-
-    //       it('should ensure that plus segment exists', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
-    //       });
-    //     });
-
-    //     describe('and user clicks on value segment and value is equal to fake value', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: DefaultFilterValue, type: 'value' };
-    //         ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
-    //         ctrl.filterSegmentUpdated(existingValueSegment, 2);
-    //       });
-
-    //       it('should not add plus segment', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(3);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //       });
-    //     });
-    //     describe('and user removes key segment', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment = { value: DefaultRemoveFilterValue, type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
-    //         const plusSegment = { value: '', type: 'plus-button' };
-    //         ctrl.filterSegments.filterSegments = [
-    //           existingKeySegment,
-    //           existingOperatorSegment,
-    //           existingValueSegment,
-    //           plusSegment,
-    //         ];
-    //         ctrl.filterSegmentUpdated(existingKeySegment, 0);
-    //       });
-
-    //       it('should remove filter segments', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(1);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('plus-button');
-    //       });
-    //     });
-
-    //     describe('and user removes key segment and there is a previous filter', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
-    //         const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
-    //         const conditionSegment = { value: 'AND', type: 'condition' };
-    //         const plusSegment = { value: '', type: 'plus-button' };
-    //         ctrl.filterSegments.filterSegments = [
-    //           existingKeySegment1,
-    //           existingOperatorSegment,
-    //           existingValueSegment,
-    //           conditionSegment,
-    //           existingKeySegment2,
-    //           Object.assign({}, existingOperatorSegment),
-    //           Object.assign({}, existingValueSegment),
-    //           plusSegment,
-    //         ];
-    //         ctrl.filterSegmentUpdated(existingKeySegment2, 4);
-    //       });
-
-    //       it('should remove filter segments and the condition segment', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
-    //       });
-    //     });
-
-    //     describe('and user removes key segment and there is a filter after it', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
-    //         const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
-    //         const conditionSegment = { value: 'AND', type: 'condition' };
-    //         const plusSegment = { value: '', type: 'plus-button' };
-    //         ctrl.filterSegments.filterSegments = [
-    //           existingKeySegment1,
-    //           existingOperatorSegment,
-    //           existingValueSegment,
-    //           conditionSegment,
-    //           existingKeySegment2,
-    //           Object.assign({}, existingOperatorSegment),
-    //           Object.assign({}, existingValueSegment),
-    //           plusSegment,
-    //         ];
-    //         ctrl.filterSegmentUpdated(existingKeySegment1, 0);
-    //       });
-
-    //       it('should remove filter segments and the condition segment', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(4);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
-    //       });
-    //     });
-
-    //     describe('and user clicks on plus button', () => {
-    //       beforeEach(() => {
-    //         const existingKeySegment = { value: 'filterkey1', type: 'key' };
-    //         const existingOperatorSegment = { value: '=', type: 'operator' };
-    //         const existingValueSegment = { value: 'filtervalue', type: 'value' };
-    //         const plusSegment = { value: 'filterkey2', type: 'plus-button' };
-    //         ctrl.filterSegments.filterSegments = [
-    //           existingKeySegment,
-    //           existingOperatorSegment,
-    //           existingValueSegment,
-    //           plusSegment,
-    //         ];
-    //         ctrl.filterSegmentUpdated(plusSegment, 3);
-    //       });
-
-    //       it('should condition segment and new filter segments', () => {
-    //         expect(ctrl.filterSegments.filterSegments.length).toBe(7);
-    //         expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
-    //         expect(ctrl.filterSegments.filterSegments[3].type).toBe('condition');
-    //         expect(ctrl.filterSegments.filterSegments[4].type).toBe('key');
-    //         expect(ctrl.filterSegments.filterSegments[5].type).toBe('operator');
-    //         expect(ctrl.filterSegments.filterSegments[6].type).toBe('value');
-    //       });
-    //     });
-    //   });
+    describe('when has one existing filter', () => {
+      describe('and user clicks on key segment', () => {
+        beforeEach(() => {
+          const existingKeySegment = { value: 'filterkey1', type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: 'filtervalue', type: 'value' };
+          const plusSegment = { value: '', type: 'plus-button' };
+          ctrl.filterSegments.filterSegments = [
+            existingKeySegment,
+            existingOperatorSegment,
+            existingValueSegment,
+            plusSegment,
+          ];
+          ctrl.filterSegmentUpdated(existingKeySegment, 0);
+        });
+        it('should not add any new segments', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+        });
+      });
+      describe('and user clicks on value segment and value not equal to fake value', () => {
+        beforeEach(() => {
+          const existingKeySegment = { value: 'filterkey1', type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: 'filtervalue', type: 'value' };
+          ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
+          ctrl.filterSegmentUpdated(existingValueSegment, 2);
+        });
+        it('should ensure that plus segment exists', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+          expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
+        });
+      });
+      describe('and user clicks on value segment and value is equal to fake value', () => {
+        beforeEach(() => {
+          const existingKeySegment = { value: 'filterkey1', type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: DefaultFilterValue, type: 'value' };
+          ctrl.filterSegments.filterSegments = [existingKeySegment, existingOperatorSegment, existingValueSegment];
+          ctrl.filterSegmentUpdated(existingValueSegment, 2);
+        });
+        it('should not add plus segment', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(3);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+        });
+      });
+      describe('and user removes key segment', () => {
+        beforeEach(() => {
+          const existingKeySegment = { value: DefaultRemoveFilterValue, type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: 'filtervalue', type: 'value' };
+          const plusSegment = { value: '', type: 'plus-button' };
+          ctrl.filterSegments.filterSegments = [
+            existingKeySegment,
+            existingOperatorSegment,
+            existingValueSegment,
+            plusSegment,
+          ];
+          ctrl.filterSegmentUpdated(existingKeySegment, 0);
+        });
+        it('should remove filter segments', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(1);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('plus-button');
+        });
+      });
+      describe('and user removes key segment and there is a previous filter', () => {
+        beforeEach(() => {
+          const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
+          const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: 'filtervalue', type: 'value' };
+          const conditionSegment = { value: 'AND', type: 'condition' };
+          const plusSegment = { value: '', type: 'plus-button' };
+          ctrl.filterSegments.filterSegments = [
+            existingKeySegment1,
+            existingOperatorSegment,
+            existingValueSegment,
+            conditionSegment,
+            existingKeySegment2,
+            Object.assign({}, existingOperatorSegment),
+            Object.assign({}, existingValueSegment),
+            plusSegment,
+          ];
+          ctrl.filterSegmentUpdated(existingKeySegment2, 4);
+        });
+        it('should remove filter segments and the condition segment', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+          expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
+        });
+      });
+      describe('and user removes key segment and there is a filter after it', () => {
+        beforeEach(() => {
+          const existingKeySegment1 = { value: DefaultRemoveFilterValue, type: 'key' };
+          const existingKeySegment2 = { value: DefaultRemoveFilterValue, type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: 'filtervalue', type: 'value' };
+          const conditionSegment = { value: 'AND', type: 'condition' };
+          const plusSegment = { value: '', type: 'plus-button' };
+          ctrl.filterSegments.filterSegments = [
+            existingKeySegment1,
+            existingOperatorSegment,
+            existingValueSegment,
+            conditionSegment,
+            existingKeySegment2,
+            Object.assign({}, existingOperatorSegment),
+            Object.assign({}, existingValueSegment),
+            plusSegment,
+          ];
+          ctrl.filterSegmentUpdated(existingKeySegment1, 0);
+        });
+        it('should remove filter segments and the condition segment', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(4);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+          expect(ctrl.filterSegments.filterSegments[3].type).toBe('plus-button');
+        });
+      });
+      describe('and user clicks on plus button', () => {
+        beforeEach(() => {
+          const existingKeySegment = { value: 'filterkey1', type: 'key' };
+          const existingOperatorSegment = { value: '=', type: 'operator' };
+          const existingValueSegment = { value: 'filtervalue', type: 'value' };
+          const plusSegment = { value: 'filterkey2', type: 'plus-button' };
+          ctrl.filterSegments.filterSegments = [
+            existingKeySegment,
+            existingOperatorSegment,
+            existingValueSegment,
+            plusSegment,
+          ];
+          ctrl.filterSegmentUpdated(plusSegment, 3);
+        });
+        it('should condition segment and new filter segments', () => {
+          expect(ctrl.filterSegments.filterSegments.length).toBe(7);
+          expect(ctrl.filterSegments.filterSegments[0].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[1].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[2].type).toBe('value');
+          expect(ctrl.filterSegments.filterSegments[3].type).toBe('condition');
+          expect(ctrl.filterSegments.filterSegments[4].type).toBe('key');
+          expect(ctrl.filterSegments.filterSegments[5].type).toBe('operator');
+          expect(ctrl.filterSegments.filterSegments[6].type).toBe('value');
+        });
+      });
+    });
   });
 });
 
 function createCtrlWithFakes(existingFilters?: string[]) {
-  // StackdriverFilterCtrl.prototype.loadMetricDescriptors = () => {
-  //   return Promise.resolve([]);
-  // };
-  // StackdriverFilterCtrl.prototype.getLabels = () => {
-  //   return Promise.resolve();
-  // };
-
   const fakeSegmentServer = {
     newKey: val => {
       return { value: val, type: 'key' };
@@ -430,25 +412,3 @@ function createCtrlWithFakes(existingFilters?: string[]) {
 
   return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub());
 }
-
-// function createTarget(existingFilters?: string[]) {
-//   return {
-//     project: {
-//       id: '',
-//       name: '',
-//     },
-//     unit: '',
-//     metricType: 'ametric',
-//     service: '',
-//     refId: 'A',
-//     crossSeriesReducer: '',
-//     alignmentPeriod: '',
-//     perSeriesAligner: '',
-//     groupBys: [],
-//     filters: existingFilters || [],
-//     aliasBy: '',
-//     metricService: '',
-//     metricKind: '',
-//     valueType: '',
-//   };
-// }

From bcb94cc0ece63fef6c03870d17887d66c12a741a Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 8 Jan 2019 10:30:00 +0100
Subject: [PATCH 184/352] fix: GraphPanel should be a PureComponent

---
 public/app/plugins/panel/graph2/GraphPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index 1a23fba0c27..49d2ac3e4e4 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import _ from 'lodash';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import colors from 'app/core/utils/colors';
 
 // Components & Types
@@ -9,7 +9,7 @@ import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}
 
-export class GraphPanel extends Component<Props> {
+export class GraphPanel extends PureComponent<Props> {
   constructor(props) {
     super(props);
   }

From abb98a25e4962c1af80303c5e94579aebf39f1c3 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 8 Jan 2019 10:35:10 +0100
Subject: [PATCH 185/352] moved all units

---
 packages/grafana-ui/src/utils/valueFormats.ts | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/packages/grafana-ui/src/utils/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats.ts
index c7c8dbd447b..5e86a583bb4 100644
--- a/packages/grafana-ui/src/utils/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/valueFormats.ts
@@ -508,6 +508,22 @@ function buildFormats() {
         { name: 'locale format', id: 'locale', fn: locale },
       ],
     },
+    {
+      name: 'acceleration',
+      formats: [
+        { name: 'Meters/sec²', id: 'accMS2', fn: toFixedUnit('m/sec²') },
+        { name: 'Feet/sec²', id: 'accFS2', fn: toFixedUnit('f/sec²') },
+        { name: 'G unit', id: 'accG', fn: toFixedUnit('g') },
+      ],
+    },
+    {
+      name: 'angle',
+      formats: [
+        { name: 'Degrees (°)', id: 'degree', fn: toFixedUnit('°') },
+        { name: 'Radians', id: 'radian', fn: toFixedUnit('rad') },
+        { name: 'Gradian', id: 'grad', fn: toFixedUnit('grad') },
+      ],
+    },
     {
       name: 'area',
       formats: [
@@ -527,6 +543,23 @@ function buildFormats() {
         { name: 'EFLOP/s', id: 'eflops', fn: decimalSIPrefix('FLOP/s', 6) },
       ],
     },
+    {
+      name: 'concentration',
+      formats: [
+        { name: 'parts-per-million (ppm)', id: 'ppm', fn: toFixedUnit('ppm') },
+        { name: 'parts-per-billion (ppb)', id: 'conppb', fn: toFixedUnit('ppb') },
+        { name: 'nanogram per cubic meter (ng/m³)', id: 'conngm3', fn: toFixedUnit('ng/m³') },
+        { name: 'nanogram per normal cubic meter (ng/Nm³)', id: 'conngNm3', fn: toFixedUnit('ng/Nm³') },
+        { name: 'microgram per cubic meter (μg/m³)', id: 'conμgm3', fn: toFixedUnit('μg/m³') },
+        { name: 'microgram per normal cubic meter (μg/Nm³)', id: 'conμgNm3', fn: toFixedUnit('μg/Nm³') },
+        { name: 'milligram per cubic meter (mg/m³)', id: 'conmgm3', fn: toFixedUnit('mg/m³') },
+        { name: 'milligram per normal cubic meter (mg/Nm³)', id: 'conmgNm3', fn: toFixedUnit('mg/Nm³') },
+        { name: 'gram per cubic meter (g/m³)', id: 'congm3', fn: toFixedUnit('g/m³') },
+        { name: 'gram per normal cubic meter (g/Nm³)', id: 'congNm3', fn: toFixedUnit('g/Nm³') },
+        { name: 'milligrams per decilitre (mg/dL)', id: 'conmgdL', fn: toFixedUnit('mg/dL') },
+        { name: 'millimoles per litre (mmol/L)', id: 'conmmolL', fn: toFixedUnit('mmol/L') },
+      ],
+    },
     {
       name: 'currency',
       formats: [
@@ -616,6 +649,27 @@ function buildFormats() {
         { name: 'Lumens (Lm)', id: 'lumens', fn: decimalSIPrefix('Lm') },
       ],
     },
+    {
+      name: 'flow',
+      formats: [
+        { name: 'Gallons/min (gpm)', id: 'flowgpm', fn: toFixedUnit('gpm') },
+        { name: 'Cubic meters/sec (cms)', id: 'flowcms', fn: toFixedUnit('cms') },
+        { name: 'Cubic feet/sec (cfs)', id: 'flowcfs', fn: toFixedUnit('cfs') },
+        { name: 'Cubic feet/min (cfm)', id: 'flowcfm', fn: toFixedUnit('cfm') },
+        { name: 'Litre/hour', id: 'litreh', fn: toFixedUnit('l/h') },
+        { name: 'Litre/min (l/min)', id: 'flowlpm', fn: toFixedUnit('l/min') },
+        { name: 'milliLitre/min (mL/min)', id: 'flowmlpm', fn: toFixedUnit('mL/min') },
+      ],
+    },
+    {
+      name: 'force',
+      formats: [
+        { name: 'Newton-meters (Nm)', id: 'forceNm', fn: decimalSIPrefix('Nm') },
+        { name: 'Kilonewton-meters (kNm)', id: 'forcekNm', fn: decimalSIPrefix('Nm', 1) },
+        { name: 'Newtons (N)', id: 'forceN', fn: decimalSIPrefix('N') },
+        { name: 'Kilonewtons (kN)', id: 'forcekN', fn: decimalSIPrefix('N', 1) },
+      ],
+    },
     {
       name: 'hash rate',
       formats: [
@@ -647,6 +701,32 @@ function buildFormats() {
         { name: 'mile (mi)', id: 'lengthmi', fn: toFixedUnit('mi') },
       ],
     },
+    {
+      name: 'pressure',
+      formats: [
+        { name: 'Millibars', id: 'pressurembar', fn: decimalSIPrefix('bar', -1) },
+        { name: 'Bars', id: 'pressurebar', fn: decimalSIPrefix('bar') },
+        { name: 'Kilobars', id: 'pressurekbar', fn: decimalSIPrefix('bar', 1) },
+        { name: 'Hectopascals', id: 'pressurehpa', fn: toFixedUnit('hPa') },
+        { name: 'Kilopascals', id: 'pressurekpa', fn: toFixedUnit('kPa') },
+        { name: 'Inches of mercury', id: 'pressurehg', fn: toFixedUnit('"Hg') },
+        { name: 'PSI', id: 'pressurepsi', fn: scaledUnits(1000, ['psi', 'ksi', 'Mpsi']) },
+      ],
+    },
+    {
+      name: 'radiation',
+      formats: [
+        { name: 'Becquerel (Bq)', id: 'radbq', fn: decimalSIPrefix('Bq') },
+        { name: 'curie (Ci)', id: 'radci', fn: decimalSIPrefix('Ci') },
+        { name: 'Gray (Gy)', id: 'radgy', fn: decimalSIPrefix('Gy') },
+        { name: 'rad', id: 'radrad', fn: decimalSIPrefix('rad') },
+        { name: 'Sievert (Sv)', id: 'radsv', fn: decimalSIPrefix('Sv') },
+        { name: 'rem', id: 'radrem', fn: decimalSIPrefix('rem') },
+        { name: 'Exposure (C/kg)', id: 'radexpckg', fn: decimalSIPrefix('C/kg') },
+        { name: 'roentgen (R)', id: 'radr', fn: decimalSIPrefix('R') },
+        { name: 'Sievert/hour (Sv/h)', id: 'radsvh', fn: decimalSIPrefix('Sv/h') },
+      ],
+    },
     {
       name: 'temperature',
       formats: [

From 8e8b759b21c26d128e3de24df708d8a41f269973 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Tue, 8 Jan 2019 10:47:14 +0100
Subject: [PATCH 186/352] adds note for #13914 and #14581

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 867253ccd18..671740f7225 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * **Proxy whitelist**: Add CIDR capability to auth_proxy whitelist [#14546](https://github.com/grafana/grafana/issues/14546), thx [@jacobrichard](https://github.com/jacobrichard)
 * **OAuth**: Support OAuth providers that are not RFC6749 compliant [#14562](https://github.com/grafana/grafana/issues/14562), thx [@tdabasinskas](https://github.com/tdabasinskas)
 * **Units**: Add blood glucose level units mg/dL and mmol/L [#14519](https://github.com/grafana/grafana/issues/14519), thx [@kjedamzik](https://github.com/kjedamzik)
+* **Stackdriver**: Aggregating series returns more than one series [#14581](https://github.com/grafana/grafana/issues/14581) and [#13914](https://github.com/grafana/grafana/issues/13914), thx [@kinok](https://github.com/kinok)
 
 ### Bug fixes
 * **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)

From 803d546c70d01ebdb87f34b22984a986f7064246 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 12:44:43 +0100
Subject: [PATCH 187/352] ugly fix. will be removed later on

---
 public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 99a2bd0f361..ffc169f1e66 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -32,7 +32,7 @@ export class StackdriverFilterCtrl {
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv) {
-    this.$scope = $scope.hasOwnProperty('groupBysChanged') ? $scope : $scope.$parent;
+    this.$scope = $scope.labelData ? $scope : $scope.$parent;
 
     this.initSegments(this.$scope.hideGroupBys);
   }

From e71e2b3035656fe41ef589e98a9a69e80c5639e1 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 12:52:47 +0100
Subject: [PATCH 188/352] refactoring tests

---
 .../datasource/stackdriver/components/QueryEditor.test.tsx  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
index 30cfa9fbfd5..86682f20035 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
@@ -7,7 +7,11 @@ const props: Props = {
   onExecuteQuery: () => {},
   target: DefaultTarget,
   events: { on: () => {} },
-  datasource: { templateSrv: { variables: [] } },
+  datasource: {
+    templateSrv: { variables: [] },
+    getDefaultProject: () => 'project',
+    getMetricTypes: () => [],
+  },
 };
 
 describe('QueryEditor', () => {

From f9f51d6819a2a4c206f69532dcfb42a9d9c6f37d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 13:00:31 +0100
Subject: [PATCH 189/352] replace fragment with empty jsx tags

---
 .../stackdriver/components/Aggregations.tsx          |  8 ++++----
 .../datasource/stackdriver/components/AliasBy.tsx    |  4 ++--
 .../stackdriver/components/AlignmentPeriods.tsx      |  4 ++--
 .../datasource/stackdriver/components/Alignments.tsx |  4 ++--
 .../stackdriver/components/AnnotationQueryEditor.tsx |  8 ++++----
 .../datasource/stackdriver/components/Help.tsx       |  4 ++--
 .../datasource/stackdriver/components/Metrics.tsx    |  4 ++--
 .../stackdriver/components/QueryEditor.tsx           |  8 ++++----
 .../stackdriver/components/VariableQueryEditor.tsx   | 12 ++++++------
 9 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index f0a311e62e3..81da7aa128c 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -63,7 +63,7 @@ export class Aggregations extends React.Component<Props, State> {
     const { templateSrv, onChange, crossSeriesReducer } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
@@ -79,15 +79,15 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
               <a onClick={() => this.handleToggleDisplayAdvanced()}>
-                <React.Fragment>
+                <>
                   <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
-                </React.Fragment>
+                </>
               </a>
             </label>
           </div>
         </div>
         {this.props.children(this.state.displayAdvancedOptions)}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index 486a051fdc1..5b0ef2c7d8f 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -39,7 +39,7 @@ export class AliasBy extends Component<Props, State> {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
@@ -54,7 +54,7 @@ export class AliasBy extends Component<Props, State> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
index da2057bcabd..b5abb6f3cb6 100644
--- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -12,7 +12,7 @@ export interface Props {
 
 export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onChange }) => {
   return (
-    <React.Fragment>
+    <>
       <div className="gf-form-inline">
         <div className="gf-form">
           <label className="gf-form-label query-keyword width-9">Alignment Period</label>
@@ -35,6 +35,6 @@ export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onC
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
index b377b432e44..e72cafaf808 100644
--- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -12,7 +12,7 @@ export interface Props {
 
 export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange, alignOptions }) => {
   return (
-    <React.Fragment>
+    <>
       <div className="gf-form-group">
         <div className="gf-form offset-width-9">
           <label className="gf-form-label query-keyword width-15">Aligner</label>
@@ -26,6 +26,6 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index 48add7d584d..52a08abfbcd 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -62,7 +62,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     const { datasource } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
@@ -71,7 +71,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           onChange={value => this.handleMetricTypeChange(value)}
         >
           {metric => (
-            <React.Fragment>
+            <>
               <Filter
                 filtersChanged={value => this.handleChange('filters', value)}
                 filters={filters}
@@ -81,7 +81,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />
-            </React.Fragment>
+            </>
           )}
         </Metrics>
         <div className="gf-form gf-form-inline">
@@ -109,7 +109,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         </div>
 
         <AnnotationsHelp />
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index e865d1f4046..194f367d230 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -35,7 +35,7 @@ export class Help extends React.Component<Props, State> {
     const { datasource, rawQuery, lastQueryError } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <Project datasource={datasource} />
           <div className="gf-form" onClick={() => this.handleHelpClicked()}>
@@ -106,7 +106,7 @@ export class Help extends React.Component<Props, State> {
             <pre className="gf-form-pre alert alert-error">{lastQueryError}</pre>
           </div>
         )}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index c2993e30bee..9c5dfc88739 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -146,7 +146,7 @@ export class Metrics extends React.Component<Props, State> {
     const { metricType, templateSrv } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Service</span>
@@ -186,7 +186,7 @@ export class Metrics extends React.Component<Props, State> {
           </div>
         </div>
         {this.props.children(this.state.metricDescriptor)}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index d639cd821f5..b7a4b98823b 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -138,7 +138,7 @@ export class QueryEditor extends React.Component<Props, State> {
     const { datasource } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
@@ -147,7 +147,7 @@ export class QueryEditor extends React.Component<Props, State> {
           onChange={value => this.handleMetricTypeChange(value)}
         >
           {metric => (
-            <React.Fragment>
+            <>
               <Filter
                 filtersChanged={value => this.handleChange('filters', value)}
                 groupBysChanged={value => this.handleChange('groupBys', value)}
@@ -184,10 +184,10 @@ export class QueryEditor extends React.Component<Props, State> {
                 onChange={value => this.handleChange('alignmentPeriod', value)}
               />
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
-            </React.Fragment>
+            </>
           )}
         </Metrics>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
index 1f349ccab59..60f618c8504 100644
--- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
@@ -134,7 +134,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       case MetricFindQueryTypes.LabelValues:
       case MetricFindQueryTypes.ResourceTypes:
         return (
-          <React.Fragment>
+          <>
             <SimpleSelect
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
@@ -155,12 +155,12 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
                 label="Label Key"
               />
             )}
-          </React.Fragment>
+          </>
         );
       case MetricFindQueryTypes.Aligners:
       case MetricFindQueryTypes.Aggregations:
         return (
-          <React.Fragment>
+          <>
             <SimpleSelect
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
@@ -173,7 +173,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
               onValueChange={e => this.onMetricTypeChange(e)}
               label="Metric Type"
             />
-          </React.Fragment>
+          </>
         );
       default:
         return '';
@@ -182,7 +182,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <SimpleSelect
           value={this.state.selectedQueryType}
           options={this.queryTypes}
@@ -190,7 +190,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
           label="Query Type"
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
-      </React.Fragment>
+      </>
     );
   }
 }

From f428db282c277e70ccf192c3593feba1f98d3695 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 8 Jan 2019 13:32:08 +0100
Subject: [PATCH 190/352] fix: Remove the onRenderError prop and add an
 ErrorBoundary component

---
 packages/grafana-ui/src/types/panel.ts        |  1 -
 .../src/visualizations/Graph/Graph.tsx        |  5 +-
 .../ErrorBoundary/ErrorBoundary.tsx           | 47 +++++++++++++++++++
 .../features/dashboard/dashgrid/DataPanel.tsx | 29 ++++++++----
 .../dashboard/dashgrid/PanelChrome.tsx        |  3 +-
 .../app/plugins/panel/graph2/GraphPanel.tsx   |  5 +-
 6 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 public/app/core/components/ErrorBoundary/ErrorBoundary.tsx

diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index cf808f514de..44336555a81 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -9,7 +9,6 @@ export interface PanelProps<T = any> {
   renderCounter: number;
   width: number;
   height: number;
-  onRenderError: () => void;
 }
 
 export interface PanelOptionsProps<T = any> {
diff --git a/packages/grafana-ui/src/visualizations/Graph/Graph.tsx b/packages/grafana-ui/src/visualizations/Graph/Graph.tsx
index b3f2120639c..ad038cebcda 100644
--- a/packages/grafana-ui/src/visualizations/Graph/Graph.tsx
+++ b/packages/grafana-ui/src/visualizations/Graph/Graph.tsx
@@ -13,7 +13,6 @@ interface GraphProps {
   showBars?: boolean;
   width: number;
   height: number;
-  onRenderError: () => void;
 }
 
 export class Graph extends PureComponent<GraphProps> {
@@ -38,7 +37,7 @@ export class Graph extends PureComponent<GraphProps> {
       return;
     }
 
-    const { width, timeSeries, timeRange, showLines, showBars, showPoints, onRenderError } = this.props;
+    const { width, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
 
     if (!width) {
       return;
@@ -99,7 +98,7 @@ export class Graph extends PureComponent<GraphProps> {
       $.plot(this.element, timeSeries, flotOptions);
     } catch (err) {
       console.log('Graph rendering error', err, flotOptions, timeSeries);
-      onRenderError();
+      throw new Error('Error rendering panel');
     }
   }
 
diff --git a/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx b/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 00000000000..ed068819adc
--- /dev/null
+++ b/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+
+interface ErrorInfo {
+  componentStack: string;
+}
+
+interface RenderProps {
+  error: Error;
+  errorInfo: ErrorInfo;
+}
+
+interface Props {
+  children: (r: RenderProps) => JSX.Element;
+}
+
+interface State {
+  error: Error;
+  errorInfo: ErrorInfo;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
+  }
+
+  render() {
+    const { error, errorInfo } = this.state;
+    return (
+      <>
+        {this.props.children({
+          error,
+          errorInfo,
+        })}
+      </>
+    );
+  }
+}
+
+export default ErrorBoundary;
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 4cd9460802a..fa21276d7a2 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -1,6 +1,7 @@
 // Library
 import React, { Component } from 'react';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 
 // Services
 import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -13,10 +14,11 @@ import { DataQueryOptions, DataQueryResponse } from 'app/types';
 import { TimeRange, TimeSeries, LoadingState } from '@grafana/ui';
 import { Themes } from 'app/core/components/Tooltip/Popper';
 
+const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
+
 interface RenderProps {
   loading: LoadingState;
   timeSeries: TimeSeries[];
-  onRenderError: () => void;
 }
 
 export interface Props {
@@ -147,10 +149,6 @@ export class DataPanel extends Component<Props, State> {
     }
   }
 
-  onRenderError = () => {
-    this.onError('Error rendering panel');
-  }
-
   render() {
     const { queries } = this.props;
     const { response, loading, isFirstLoad } = this.state;
@@ -172,11 +170,22 @@ export class DataPanel extends Component<Props, State> {
     return (
       <>
         {this.renderLoadingStates()}
-        {this.props.children({
-          timeSeries,
-          loading,
-          onRenderError: this.onRenderError
-        })}
+        <ErrorBoundary>
+          {({error, errorInfo}) => {
+            if (errorInfo) {
+              this.onError(error.message || DEFAULT_PLUGIN_ERROR);
+              return null;
+            }
+            return (
+              <>
+                {this.props.children({
+                  timeSeries,
+                  loading,
+                })}
+              </>
+            );
+          }}
+        </ErrorBoundary>
       </>
     );
   }
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 90d66a14cd3..84e11511453 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -114,7 +114,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 widthPixels={width}
                 refreshCounter={refreshCounter}
               >
-                {({ loading, timeSeries, onRenderError }) => {
+                {({ loading, timeSeries }) => {
                   return (
                     <div className="panel-content">
                       <PanelComponent
@@ -125,7 +125,6 @@ export class PanelChrome extends PureComponent<Props, State> {
                         width={width}
                         height={height - PANEL_HEADER_HEIGHT}
                         renderCounter={renderCounter}
-                        onRenderError={onRenderError}
                       />
                     </div>
                   );
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index 49d2ac3e4e4..2c21c7f0e15 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -10,12 +10,12 @@ import { Options } from './types';
 interface Props extends PanelProps<Options> {}
 
 export class GraphPanel extends PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
   render() {
-    const { timeSeries, timeRange, width, height, onRenderError } = this.props;
+    const { timeSeries, timeRange, width, height } = this.props;
     const { showLines, showBars, showPoints } = this.props.options;
 
     const vmSeries = processTimeSeries({
@@ -33,7 +33,6 @@ export class GraphPanel extends PureComponent<Props> {
         showBars={showBars}
         width={width}
         height={height}
-        onRenderError={onRenderError}
       />
     );
   }

From dc7f98de6af5330105c4dae37e88166aefd7a2cd Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 13:37:08 +0100
Subject: [PATCH 191/352] use correct event handler name convention. register
 directive on startup

---
 public/app/core/angular_wrappers.ts            |  8 ++++++++
 .../stackdriver/annotations_query_ctrl.ts      |  4 ++--
 .../stackdriver/components/Aggregations.tsx    |  4 ++--
 .../stackdriver/components/AliasBy.tsx         | 15 +++++++--------
 .../components/AnnotationQueryEditor.tsx       | 12 ++++++------
 .../datasource/stackdriver/components/Help.tsx |  8 ++++----
 .../stackdriver/components/Metrics.tsx         | 10 +++++-----
 .../stackdriver/components/QueryEditor.tsx     | 18 +++++++++---------
 .../components/VariableQueryEditor.tsx         |  4 ++--
 .../partials/annotations.editor.html           |  2 +-
 .../stackdriver/partials/query.editor.html     |  6 +++---
 .../datasource/stackdriver/query_ctrl.ts       | 18 ++++--------------
 12 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 7a2703b76e7..92f5d663656 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -1,4 +1,5 @@
 import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@@ -29,4 +30,11 @@ export function registerAngularDirectives() {
     'placeholder',
     ['variables', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('queryEditor', QueryEditor, [
+    'target',
+    'onQueryChange',
+    'onExecuteQuery',
+    ['events', { watchDepth: 'reference' }],
+    ['datasource', { watchDepth: 'reference' }],
+  ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
index 4df035719a0..26a09e3d1fa 100644
--- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
@@ -7,7 +7,7 @@ export class StackdriverAnnotationsQueryCtrl {
 
   constructor() {
     this.annotation.target = this.annotation.target || {};
-    this.handleQueryChange = this.handleQueryChange.bind(this);
+    this.onQueryChange = this.onQueryChange.bind(this);
 
     react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
       'target',
@@ -17,7 +17,7 @@ export class StackdriverAnnotationsQueryCtrl {
     ]);
   }
 
-  handleQueryChange(target) {
+  onQueryChange(target) {
     Object.assign(this.annotation.target, target);
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 81da7aa128c..7ae0e506a0b 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -52,7 +52,7 @@ export class Aggregations extends React.Component<Props, State> {
     this.setState({ aggOptions });
   }
 
-  handleToggleDisplayAdvanced() {
+  onToggleDisplayAdvanced() {
     this.setState(state => ({
       displayAdvancedOptions: !state.displayAdvancedOptions,
     }));
@@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> {
           </div>
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
-              <a onClick={() => this.handleToggleDisplayAdvanced()}>
+              <a onClick={() => this.onToggleDisplayAdvanced()}>
                 <>
                   <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
                 </>
diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index 5b0ef2c7d8f..54200452325 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -13,8 +13,7 @@ export interface State {
 export class AliasBy extends Component<Props, State> {
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.onChange = debounce(this.onChange.bind(this), 500);
+    this.updateQuery = debounce(this.updateQuery.bind(this), 500);
     this.state = { value: '' };
   }
 
@@ -28,18 +27,18 @@ export class AliasBy extends Component<Props, State> {
     }
   }
 
-  handleChange(e) {
+  onChange(e) {
     this.setState({ value: e.target.value });
-    this.onChange(e.target.value);
+    this.updateQuery(e.target.value);
   }
 
-  onChange(value) {
+  updateQuery(value) {
     this.props.onChange(value);
   }
 
   render() {
     return (
-      <>
+      <React.Fragment>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
@@ -47,14 +46,14 @@ export class AliasBy extends Component<Props, State> {
               type="text"
               className="gf-form-input width-24"
               value={this.state.value}
-              onChange={this.handleChange}
+              onChange={e => this.onChange(e)}
             />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-      </>
+      </React.Fragment>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index 52a08abfbcd..cbd27e6ba81 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -36,7 +36,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     });
   }
 
-  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange({ valueType, metricKind, type, unit }) {
     const { onQueryChange } = this.props;
     this.setState(
       {
@@ -51,7 +51,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleChange(prop, value) {
+  onChange(prop, value) {
     this.setState({ [prop]: value }, () => {
       this.props.onQueryChange(this.state);
     });
@@ -68,12 +68,12 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={datasource.templateSrv}
           datasource={datasource}
-          onChange={value => this.handleMetricTypeChange(value)}
+          onChange={value => this.onMetricTypeChange(value)}
         >
           {metric => (
             <>
               <Filter
-                filtersChanged={value => this.handleChange('filters', value)}
+                filtersChanged={value => this.onChange('filters', value)}
                 filters={filters}
                 refId={refId}
                 hideGroupBys={true}
@@ -91,7 +91,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
               type="text"
               className="gf-form-input width-20"
               value={title}
-              onChange={e => this.handleChange('title', e.target.value)}
+              onChange={e => this.onChange('title', e.target.value)}
             />
           </div>
           <div className="gf-form">
@@ -100,7 +100,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
               type="text"
               className="gf-form-input width-20"
               value={text}
-              onChange={e => this.handleChange('text', e.target.value)}
+              onChange={e => this.onChange('text', e.target.value)}
             />
           </div>
           <div className="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index 194f367d230..2510338cce4 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -18,11 +18,11 @@ export class Help extends React.Component<Props, State> {
     displaRawQuery: false,
   };
 
-  handleHelpClicked() {
+  onHelpClicked() {
     this.setState({ displayHelp: !this.state.displayHelp });
   }
 
-  handleRawQueryClicked() {
+  onRawQueryClicked() {
     this.setState({ displaRawQuery: !this.state.displaRawQuery });
   }
 
@@ -38,7 +38,7 @@ export class Help extends React.Component<Props, State> {
       <>
         <div className="gf-form-inline">
           <Project datasource={datasource} />
-          <div className="gf-form" onClick={() => this.handleHelpClicked()}>
+          <div className="gf-form" onClick={() => this.onHelpClicked()}>
             <label className="gf-form-label query-keyword">
               Show Help
               <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
@@ -46,7 +46,7 @@ export class Help extends React.Component<Props, State> {
           </div>
 
           {rawQuery && (
-            <div className="gf-form" onClick={() => this.handleRawQueryClicked()}>
+            <div className="gf-form" onClick={() => this.onRawQueryClicked()}>
               <label className="gf-form-label query-keyword">
                 Raw Query
                 <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 9c5dfc88739..52c0c8ad916 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -98,7 +98,7 @@ export class Metrics extends React.Component<Props, State> {
     return metricsByService;
   }
 
-  handleServiceChange(service) {
+  onServiceChange(service) {
     const { metricDescriptors } = this.state;
     const { templateSrv, metricType } = this.props;
 
@@ -112,11 +112,11 @@ export class Metrics extends React.Component<Props, State> {
     this.setState({ service, metrics });
 
     if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
-      this.handleMetricTypeChange(metrics[0].value);
+      this.onMetricTypeChange(metrics[0].value);
     }
   }
 
-  handleMetricTypeChange(value) {
+  onMetricTypeChange(value) {
     const metricDescriptor = this.getSelectedMetricDescriptor(value);
     this.setState({ metricDescriptor });
     this.props.onChange({ ...metricDescriptor, type: value });
@@ -151,7 +151,7 @@ export class Metrics extends React.Component<Props, State> {
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Service</span>
             <MetricSelect
-              onChange={value => this.handleServiceChange(value)}
+              onChange={value => this.onServiceChange(value)}
               value={service}
               options={services}
               isSearchable={false}
@@ -167,7 +167,7 @@ export class Metrics extends React.Component<Props, State> {
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Metric</span>
             <MetricSelect
-              onChange={value => this.handleMetricTypeChange(value)}
+              onChange={value => this.onMetricTypeChange(value)}
               value={metricType}
               variables={templateSrv.variables}
               options={[
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index b7a4b98823b..5312c9865db 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -91,7 +91,7 @@ export class QueryEditor extends React.Component<Props, State> {
     this.setState({ lastQuery, lastQueryError });
   }
 
-  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange({ valueType, metricKind, type, unit }) {
     const { datasource, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@@ -113,7 +113,7 @@ export class QueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleChange(prop, value) {
+  onPropertyChange(prop, value) {
     this.setState({ [prop]: value }, () => {
       this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
@@ -144,13 +144,13 @@ export class QueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={datasource.templateSrv}
           datasource={datasource}
-          onChange={value => this.handleMetricTypeChange(value)}
+          onChange={value => this.onMetricTypeChange(value)}
         >
           {metric => (
             <>
               <Filter
-                filtersChanged={value => this.handleChange('filters', value)}
-                groupBysChanged={value => this.handleChange('groupBys', value)}
+                filtersChanged={value => this.onPropertyChange('filters', value)}
+                groupBysChanged={value => this.onPropertyChange('groupBys', value)}
                 filters={filters}
                 groupBys={groupBys}
                 refId={refId}
@@ -164,7 +164,7 @@ export class QueryEditor extends React.Component<Props, State> {
                 templateSrv={datasource.templateSrv}
                 crossSeriesReducer={crossSeriesReducer}
                 groupBys={groupBys}
-                onChange={value => this.handleChange('crossSeriesReducer', value)}
+                onChange={value => this.onPropertyChange('crossSeriesReducer', value)}
               >
                 {displayAdvancedOptions =>
                   displayAdvancedOptions && (
@@ -172,16 +172,16 @@ export class QueryEditor extends React.Component<Props, State> {
                       alignOptions={alignOptions}
                       templateSrv={datasource.templateSrv}
                       perSeriesAligner={perSeriesAligner}
-                      onChange={value => this.handleChange('perSeriesAligner', value)}
+                      onChange={value => this.onPropertyChange('perSeriesAligner', value)}
                     />
                   )
                 }
               </Aggregations>
-              <AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
+              <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <AlignmentPeriods
                 templateSrv={datasource.templateSrv}
                 alignmentPeriod={alignmentPeriod}
-                onChange={value => this.handleChange('alignmentPeriod', value)}
+                onChange={value => this.onPropertyChange('alignmentPeriod', value)}
               />
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </>
diff --git a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
index 60f618c8504..be06c71c289 100644
--- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
@@ -63,7 +63,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
     this.setState(state);
   }
 
-  async handleQueryTypeChange(event) {
+  async onQueryTypeChange(event) {
     const state: any = {
       selectedQueryType: event.target.value,
       ...await this.getLabels(this.state.selectedMetricType, event.target.value),
@@ -186,7 +186,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
         <SimpleSelect
           value={this.state.selectedQueryType}
           options={this.queryTypes}
-          onValueChange={e => this.handleQueryTypeChange(e)}
+          onValueChange={e => this.onQueryTypeChange(e)}
           label="Query Type"
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
index 55e6a4fa9fb..a638e7bfe55 100644
--- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
@@ -1,5 +1,5 @@
 <annotation-query-editor
   target="ctrl.annotation.target"
-  on-query-change="(ctrl.handleQueryChange)"
+  on-query-change="(ctrl.onQueryChange)"
   datasource="ctrl.datasource"
 ></annotation-query-editor>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 1dac4a924e6..d8adebbed58 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -3,7 +3,7 @@
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
     datasource="ctrl.datasource"
-    on-query-change="(ctrl.handleQueryChange)"
-    on-execute-query="(ctrl.handleExecuteQuery)"
+    on-query-change="(ctrl.onQueryChange)"
+    on-execute-query="(ctrl.onExecuteQuery)"
   ></query-editor>
-</query-editor-row>
\ No newline at end of file
+</query-editor-row>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 63c05650d1a..a54c2365ab6 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -1,9 +1,6 @@
 import _ from 'lodash';
 
 import { QueryCtrl } from 'app/plugins/sdk';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-
-import { QueryEditor } from './components/QueryEditor';
 import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
@@ -12,22 +9,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
-    this.handleQueryChange = this.handleQueryChange.bind(this);
-    this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
-    react2AngularDirective('queryEditor', QueryEditor, [
-      'target',
-      'onQueryChange',
-      'onExecuteQuery',
-      ['events', { watchDepth: 'reference' }],
-      ['datasource', { watchDepth: 'reference' }],
-    ]);
+    this.onQueryChange = this.onQueryChange.bind(this);
+    this.onExecuteQuery = this.onExecuteQuery.bind(this);
   }
 
-  handleQueryChange(target: Target) {
+  onQueryChange(target: Target) {
     Object.assign(this.target, target);
   }
 
-  handleExecuteQuery() {
+  onExecuteQuery() {
     this.$scope.ctrl.refresh();
   }
 }

From de4e1a91f7d6b42c008e7e1bafac2b194f2d9fc6 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 13:44:10 +0100
Subject: [PATCH 192/352] Refactored withPoper HOC to PopperController using
 render prop

---
 public/app/core/components/Tooltip/Popper.tsx | 17 ++--
 .../components/Tooltip/PopperController.tsx   | 94 +++++++++++++++++++
 .../core/components/Tooltip/withPopper.tsx    | 88 -----------------
 3 files changed, 100 insertions(+), 99 deletions(-)
 create mode 100644 public/app/core/components/Tooltip/PopperController.tsx
 delete mode 100644 public/app/core/components/Tooltip/withPopper.tsx

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 36cf0fe837e..cbd00028e90 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
+import * as PopperJS from 'popper.js';
+import { Manager, Popper as ReactPopper } from 'react-popper';
 import Portal from 'app/core/components/Portal/Portal';
-import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
 
 const defaultTransitionStyles = {
@@ -18,29 +19,23 @@ const transitionStyles = {
 interface Props {
   renderContent: (content: any) => any;
   show: boolean;
-  placement?: any;
+  placement?: PopperJS.Placement;
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
+  referenceElement: PopperJS.ReferenceObject;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { children, renderContent, show, placement, refClassName } = this.props;
+    const { renderContent, show, placement } = this.props;
     const { content } = this.props;
 
     return (
       <Manager>
-        <Reference>
-          {({ ref }) => (
-            <div className={`popper_ref ${refClassName || ''}`} ref={ref}>
-              {children}
-            </div>
-          )}
-        </Reference>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
             <Portal>
-              <ReactPopper placement={placement}>
+              <ReactPopper placement={placement} referenceElement={this.props.referenceElement}>
                 {({ ref, style, placement, arrowProps }) => {
                   return (
                     <div
diff --git a/public/app/core/components/Tooltip/PopperController.tsx b/public/app/core/components/Tooltip/PopperController.tsx
new file mode 100644
index 00000000000..47b66053085
--- /dev/null
+++ b/public/app/core/components/Tooltip/PopperController.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import * as PopperJS from 'popper.js';
+
+type PopperContent = string | (() => JSX.Element);
+
+export interface UsingPopperProps {
+  show?: boolean;
+  placement?: PopperJS.Placement;
+  content: PopperContent;
+  children: JSX.Element;
+  renderContent?: (content: PopperContent) => JSX.Element;
+}
+
+type PopperControllerRenderProp = (
+  showPopper: () => void,
+  hidePopper: () => void,
+  popperProps: {
+    show: boolean;
+    placement: PopperJS.Placement;
+    content: string | ((props: any) => JSX.Element);
+    renderContent: (content: any) => any;
+  }
+) => JSX.Element;
+
+interface Props {
+  placement?: PopperJS.Placement;
+  content: PopperContent;
+  className?: string;
+  children: PopperControllerRenderProp;
+}
+
+interface State {
+  placement: PopperJS.Placement;
+  show: boolean;
+}
+
+class PopperController extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      placement: this.props.placement || 'auto',
+      show: false,
+    };
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.placement && nextProps.placement !== this.state.placement) {
+      this.setState(prevState => {
+        return {
+          ...prevState,
+          placement: nextProps.placement,
+        };
+      });
+    }
+  }
+
+  showPopper = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      show: true,
+    }));
+  };
+
+  hidePopper = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      show: false,
+    }));
+  };
+
+  renderContent(content: PopperContent) {
+    if (typeof content === 'function') {
+      // If it's a function we assume it's a React component
+      const ReactComponent = content;
+      return <ReactComponent />;
+    }
+    return content;
+  }
+
+  render() {
+    const { children, content } = this.props;
+    const { show, placement } = this.state;
+
+    return children(this.showPopper, this.hidePopper, {
+      show,
+      placement,
+      content,
+      renderContent: this.renderContent,
+    });
+  }
+}
+
+export default PopperController;
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
deleted file mode 100644
index 4ba05937531..00000000000
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-
-export interface UsingPopperProps {
-  showPopper: (prevState: object) => void;
-  hidePopper: (prevState: object) => void;
-  renderContent: (content: any) => any;
-  show: boolean;
-  placement?: string;
-  content: string | ((props: any) => JSX.Element);
-  className?: string;
-  refClassName?: string;
-}
-
-interface Props {
-  placement?: string;
-  className?: string;
-  refClassName?: string;
-  content: string | ((props: any) => JSX.Element);
-}
-
-interface State {
-  placement: string;
-  show: boolean;
-}
-
-export default function withPopper(WrappedComponent) {
-  return class extends React.Component<Props, State> {
-    constructor(props) {
-      super(props);
-      this.setState = this.setState.bind(this);
-      this.state = {
-        placement: this.props.placement || 'auto',
-        show: false,
-      };
-    }
-
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.placement && nextProps.placement !== this.state.placement) {
-        this.setState(prevState => {
-          return {
-            ...prevState,
-            placement: nextProps.placement,
-          };
-        });
-      }
-    }
-
-    showPopper = () => {
-      this.setState(prevState => ({
-        ...prevState,
-        show: true,
-      }));
-    };
-
-    hidePopper = () => {
-      this.setState(prevState => ({
-        ...prevState,
-        show: false,
-      }));
-    };
-
-    renderContent(content) {
-      if (typeof content === 'function') {
-        // If it's a function we assume it's a React component
-        const ReactComponent = content;
-        return <ReactComponent />;
-      }
-      return content;
-    }
-
-    render() {
-      const { show, placement } = this.state;
-      const className = this.props.className || '';
-
-      return (
-        <WrappedComponent
-          {...this.props}
-          showPopper={this.showPopper}
-          hidePopper={this.hidePopper}
-          renderContent={this.renderContent}
-          show={show}
-          placement={placement}
-          className={className}
-        />
-      );
-    }
-  };
-}

From 8867d8e99c27852b612e50b3f20f5d73619a0665 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 13:52:19 +0100
Subject: [PATCH 193/352] make templateSrv a prop

---
 public/app/core/angular_wrappers.ts           |  9 ++++++++
 .../stackdriver/annotations_query_ctrl.ts     | 15 ++++--------
 .../components/AnnotationQueryEditor.tsx      |  7 +++---
 .../components/QueryEditor.test.tsx           |  2 +-
 .../stackdriver/components/QueryEditor.tsx    | 23 ++++++++++---------
 .../partials/annotations.editor.html          |  1 +
 .../stackdriver/partials/query.editor.html    |  1 +
 .../datasource/stackdriver/query_ctrl.ts      |  4 +++-
 8 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 92f5d663656..6508b97d490 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -1,5 +1,6 @@
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
+import { AnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@@ -36,5 +37,13 @@ export function registerAngularDirectives() {
     'onExecuteQuery',
     ['events', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
+    ['templateSrv', { watchDepth: 'reference' }],
+  ]);
+  react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+    'target',
+    'onQueryChange',
+    'onExecuteQuery',
+    ['datasource', { watchDepth: 'reference' }],
+    ['templateSrv', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
index 26a09e3d1fa..8827e9e9746 100644
--- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
@@ -1,20 +1,13 @@
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
-
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
   annotation: any;
+  templateSrv: any;
 
-  constructor() {
+  /** @ngInject */
+  constructor(templateSrv) {
+    this.templateSrv = templateSrv;
     this.annotation.target = this.annotation.target || {};
     this.onQueryChange = this.onQueryChange.bind(this);
-
-    react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
-      'target',
-      'onQueryChange',
-      'onExecuteQuery',
-      ['datasource', { watchDepth: 'reference' }],
-    ]);
   }
 
   onQueryChange(target) {
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index cbd27e6ba81..e6942d2195c 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -10,6 +10,7 @@ export interface Props {
   onQueryChange: (target: AnnotationTarget) => void;
   target: AnnotationTarget;
   datasource: any;
+  templateSrv: any;
 }
 
 interface State extends AnnotationTarget {
@@ -59,14 +60,14 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
 
   render() {
     const { defaultProject, metricType, filters, refId, title, text } = this.state;
-    const { datasource } = this.props;
+    const { datasource, templateSrv } = this.props;
 
     return (
       <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
-          templateSrv={datasource.templateSrv}
+          templateSrv={templateSrv}
           datasource={datasource}
           onChange={value => this.onMetricTypeChange(value)}
         >
@@ -77,7 +78,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
                 filters={filters}
                 refId={refId}
                 hideGroupBys={true}
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
index 86682f20035..8098433d83b 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
@@ -8,10 +8,10 @@ const props: Props = {
   target: DefaultTarget,
   events: { on: () => {} },
   datasource: {
-    templateSrv: { variables: [] },
     getDefaultProject: () => 'project',
     getMetricTypes: () => [],
   },
+  templateSrv: { variables: [] },
 };
 
 describe('QueryEditor', () => {
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 5312c9865db..0b101ae3ad7 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -13,10 +13,11 @@ import { getAlignmentPickerData } from '../functions';
 
 export interface Props {
   onQueryChange: (target: Target) => void;
-  onExecuteQuery?: () => void;
+  onExecuteQuery: () => void;
   target: Target;
   events: any;
   datasource: any;
+  templateSrv: any;
 }
 
 interface State extends Target {
@@ -49,10 +50,10 @@ export class QueryEditor extends React.Component<Props, State> {
   state: State = DefaultTarget;
 
   componentDidMount() {
-    const { events, target, datasource } = this.props;
+    const { events, target, templateSrv } = this.props;
     events.on('data-received', this.onDataReceived.bind(this));
     events.on('data-error', this.onDataError.bind(this));
-    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, datasource.templateSrv);
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, templateSrv);
     this.setState({
       ...this.props.target,
       alignOptions,
@@ -92,10 +93,10 @@ export class QueryEditor extends React.Component<Props, State> {
   }
 
   onMetricTypeChange({ valueType, metricKind, type, unit }) {
-    const { datasource, onQueryChange, onExecuteQuery } = this.props;
+    const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
-      datasource.templateSrv
+      templateSrv
     );
     this.setState(
       {
@@ -135,14 +136,14 @@ export class QueryEditor extends React.Component<Props, State> {
       lastQueryError,
       refId,
     } = this.state;
-    const { datasource } = this.props;
+    const { datasource, templateSrv } = this.props;
 
     return (
       <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
-          templateSrv={datasource.templateSrv}
+          templateSrv={templateSrv}
           datasource={datasource}
           onChange={value => this.onMetricTypeChange(value)}
         >
@@ -155,13 +156,13 @@ export class QueryEditor extends React.Component<Props, State> {
                 groupBys={groupBys}
                 refId={refId}
                 hideGroupBys={false}
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />
               <Aggregations
                 metricDescriptor={metric}
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 crossSeriesReducer={crossSeriesReducer}
                 groupBys={groupBys}
                 onChange={value => this.onPropertyChange('crossSeriesReducer', value)}
@@ -170,7 +171,7 @@ export class QueryEditor extends React.Component<Props, State> {
                   displayAdvancedOptions && (
                     <Alignments
                       alignOptions={alignOptions}
-                      templateSrv={datasource.templateSrv}
+                      templateSrv={templateSrv}
                       perSeriesAligner={perSeriesAligner}
                       onChange={value => this.onPropertyChange('perSeriesAligner', value)}
                     />
@@ -179,7 +180,7 @@ export class QueryEditor extends React.Component<Props, State> {
               </Aggregations>
               <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <AlignmentPeriods
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 alignmentPeriod={alignmentPeriod}
                 onChange={value => this.onPropertyChange('alignmentPeriod', value)}
               />
diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
index a638e7bfe55..ccc62258ba5 100644
--- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
@@ -2,4 +2,5 @@
   target="ctrl.annotation.target"
   on-query-change="(ctrl.onQueryChange)"
   datasource="ctrl.datasource"
+  template-srv="ctrl.templateSrv"
 ></annotation-query-editor>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index d8adebbed58..1b9b208a110 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -3,6 +3,7 @@
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
     datasource="ctrl.datasource"
+    template-srv="ctrl.templateSrv"
     on-query-change="(ctrl.onQueryChange)"
     on-execute-query="(ctrl.onExecuteQuery)"
   ></query-editor>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index a54c2365ab6..3de2af919f5 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -5,10 +5,12 @@ import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
+  templateSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector) {
+  constructor($scope, $injector, templateSrv) {
     super($scope, $injector);
+    this.templateSrv = templateSrv;
     this.onQueryChange = this.onQueryChange.bind(this);
     this.onExecuteQuery = this.onExecuteQuery.bind(this);
   }

From ec904cf66247a870f49d4ccaf0ef52f2f476c30d Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 13:53:59 +0100
Subject: [PATCH 194/352] Update components to fit updated PopperController API

---
 public/app/core/components/Label/Label.tsx    |  6 ++-
 .../app/core/components/Tooltip/Popover.tsx   | 19 ----------
 .../core/components/Tooltip/Tooltip.test.tsx  |  4 +-
 .../app/core/components/Tooltip/Tooltip.tsx   | 37 ++++++++++++-------
 .../__snapshots__/Tooltip.test.tsx.snap       | 17 +++------
 .../dashboard/dashgrid/PanelEditor.tsx        |  2 +-
 .../PanelHeader/PanelHeaderCorner.tsx         | 10 +++--
 .../permissions/DashboardPermissions.tsx      |  6 ++-
 .../features/folders/FolderPermissions.tsx    |  6 ++-
 public/app/features/teams/TeamGroupSync.tsx   |  6 ++-
 public/app/features/teams/TeamSettings.tsx    |  1 +
 .../__snapshots__/TeamGroupSync.test.tsx.snap | 30 +++++++++------
 12 files changed, 73 insertions(+), 71 deletions(-)
 delete mode 100644 public/app/core/components/Tooltip/Popover.tsx

diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx
index 362c3c577f7..956678283f6 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -14,8 +14,10 @@ export const Label: SFC<Props> = props => {
     <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
       <span>{props.children}</span>
       {props.tooltip && (
-        <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
-          <i className="gicon gicon-question gicon--has-hover" />
+        <Tooltip placement="auto" content={props.tooltip}>
+          <div className="gf-form-help-icon--right-normal">
+            <i className="gicon gicon-question gicon--has-hover" />
+          </div>
         </Tooltip>
       )}
     </span>
diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx
deleted file mode 100644
index 62397243c1c..00000000000
--- a/public/app/core/components/Tooltip/Popover.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { PureComponent } from 'react';
-import Popper from './Popper';
-import withPopper, { UsingPopperProps } from './withPopper';
-
-class Popover extends PureComponent<UsingPopperProps> {
-  render() {
-    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
-
-    const togglePopper = restProps.show ? hidePopper : showPopper;
-
-    return (
-      <div className={`popper__manager ${className}`} onClick={togglePopper}>
-        <Popper {...restProps}>{children}</Popper>
-      </div>
-    );
-  }
-}
-
-export default withPopper(Popover);
diff --git a/public/app/core/components/Tooltip/Tooltip.test.tsx b/public/app/core/components/Tooltip/Tooltip.test.tsx
index d2c96bb23d2..4a6def738e0 100644
--- a/public/app/core/components/Tooltip/Tooltip.test.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.test.tsx
@@ -6,8 +6,8 @@ describe('Tooltip', () => {
   it('renders correctly', () => {
     const tree = renderer
       .create(
-        <Tooltip className="test-class" placement="auto" content="Tooltip text">
-          <a href="http://www.grafana.com">Link with tooltip</a>
+        <Tooltip  placement="auto" content="Tooltip text">
+          <a className="test-class" href="http://www.grafana.com">Link with tooltip</a>
         </Tooltip>
       )
       .toJSON();
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index 795da94a03c..a905be7d988 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -1,17 +1,28 @@
-import React, { PureComponent } from 'react';
+import React, { createRef } from 'react';
+import * as PopperJS from 'popper.js';
+
 import Popper from './Popper';
-import withPopper, { UsingPopperProps } from './withPopper';
+import PopperController, { UsingPopperProps } from './PopperController';
 
-class Tooltip extends PureComponent<UsingPopperProps> {
-  render() {
-    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
+const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
+  const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
 
-    return (
-      <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
-        <Popper {...restProps}>{children}</Popper>
-      </div>
-    );
-  }
-}
+  return (
+    <PopperController {...controllerProps}>
+      {(showPopper, hidePopper, popperProps) => {
+        return (
+          <>
+            <Popper {...popperProps} referenceElement={tooltipTriggerRef.current} />
+            {React.cloneElement(children, {
+              ref: tooltipTriggerRef,
+              onMouseEnter: showPopper,
+              onMouseLeave: hidePopper,
+            })}
+          </>
+        );
+      }}
+    </PopperController>
+  );
+};
 
-export default withPopper(Tooltip);
+export default Tooltip;
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index c7d680049f4..761221906d4 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -1,19 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip renders correctly 1`] = `
-<div
-  className="popper__manager test-class"
+<a
+  className="test-class"
+  href="http://www.grafana.com"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <div
-    className="popper_ref "
-  >
-    <a
-      href="http://www.grafana.com"
-    >
-      Link with tooltip
-    </a>
-  </div>
-</div>
+  Link with tooltip
+</a>
 `;
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index fbc683c2eb3..bce9af252ee 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -138,7 +138,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   return (
     <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <Tooltip content={`${tab.text}`} className="popper__manager--block" placement="auto">
+        <Tooltip content={`${tab.text}`} placement="auto">
           <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
         </Tooltip>
       </a>
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 331e469a60d..3346f4b902d 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -78,12 +78,14 @@ export class PanelHeaderCorner extends Component<Props> {
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
             content={this.getInfoContent}
-            className="popper__manager--block"
-            refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
             placement="bottom-start"
           >
-            <i className="fa" />
-            <span className="panel-info-corner-inner" />
+            <div
+              className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+            >
+              <i className="fa" />
+              <span className="panel-info-corner-inner" />
+            </div>
           </Tooltip>
         ) : null}
       </>
diff --git a/public/app/features/dashboard/permissions/DashboardPermissions.tsx b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
index c07bef42930..95d78e7a737 100644
--- a/public/app/features/dashboard/permissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
@@ -70,8 +70,10 @@ export class DashboardPermissions extends PureComponent<Props, State> {
         <div className="dashboard-settings__header">
           <div className="page-action-bar">
             <h3 className="d-inline-block">Permissions</h3>
-            <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
-              <i className="gicon gicon-question gicon--has-hover" />
+            <Tooltip placement="auto" content={PermissionsInfo}>
+              <div className="page-sub-heading-icon">
+                <i className="gicon gicon-question gicon--has-hover" />
+              </div>
             </Tooltip>
             <div className="page-action-bar__spacer" />
             <button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
diff --git a/public/app/features/folders/FolderPermissions.tsx b/public/app/features/folders/FolderPermissions.tsx
index 176e270038b..39b44319c0f 100644
--- a/public/app/features/folders/FolderPermissions.tsx
+++ b/public/app/features/folders/FolderPermissions.tsx
@@ -84,8 +84,10 @@ export class FolderPermissions extends PureComponent<Props, State> {
         <div className="page-container page-body">
           <div className="page-action-bar">
             <h3 className="page-sub-heading">Folder Permissions</h3>
-            <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
-              <i className="gicon gicon-question gicon--has-hover" />
+            <Tooltip placement="auto" content={PermissionsInfo}>
+              <div className="page-sub-heading-icon">
+                <i className="gicon gicon-question gicon--has-hover" />
+              </div>
             </Tooltip>
             <div className="page-action-bar__spacer" />
             <button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index 3c3561c605e..822b32abdad 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -77,8 +77,10 @@ export class TeamGroupSync extends PureComponent<Props, State> {
       <div>
         <div className="page-action-bar">
           <h3 className="page-sub-heading">External group sync</h3>
-          <Tooltip className="page-sub-heading-icon" placement="auto" content={headerTooltip}>
-            <i className="gicon gicon-question gicon--has-hover" />
+          <Tooltip placement="auto" content={headerTooltip}>
+            <div className="page-sub-heading-icon">
+              <i className="gicon gicon-question gicon--has-hover" />
+            </div>
           </Tooltip>
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index 35c306d664e..5e058289bf0 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -60,6 +60,7 @@ export class TeamSettings extends React.Component<Props, State> {
               onChange={this.onChangeName}
             />
           </div>
+
           <div className="gf-form max-width-30">
             <Label tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
               Email
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index d486657d352..ac26dba88ed 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -10,15 +10,18 @@ exports[`Render should render component 1`] = `
     >
       External group sync
     </h3>
-    <class_1
-      className="page-sub-heading-icon"
+    <Tooltip
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
-      <i
-        className="gicon gicon-question gicon--has-hover"
-      />
-    </class_1>
+      <div
+        className="page-sub-heading-icon"
+      >
+        <i
+          className="gicon gicon-question gicon--has-hover"
+        />
+      </div>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />
@@ -116,15 +119,18 @@ exports[`Render should render groups table 1`] = `
     >
       External group sync
     </h3>
-    <class_1
-      className="page-sub-heading-icon"
+    <Tooltip
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
-      <i
-        className="gicon gicon-question gicon--has-hover"
-      />
-    </class_1>
+      <div
+        className="page-sub-heading-icon"
+      >
+        <i
+          className="gicon gicon-question gicon--has-hover"
+        />
+      </div>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />

From e03461cea22d950b7c56e305352ebf3211803734 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 13:54:54 +0100
Subject: [PATCH 195/352] Removed unused Popover component

---
 .../app/core/components/Tooltip/Popover.test.tsx | 16 ----------------
 .../Tooltip/__snapshots__/Popover.test.tsx.snap  | 16 ----------------
 2 files changed, 32 deletions(-)
 delete mode 100644 public/app/core/components/Tooltip/Popover.test.tsx
 delete mode 100644 public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap

diff --git a/public/app/core/components/Tooltip/Popover.test.tsx b/public/app/core/components/Tooltip/Popover.test.tsx
deleted file mode 100644
index eea416a9262..00000000000
--- a/public/app/core/components/Tooltip/Popover.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Popover from './Popover';
-
-describe('Popover', () => {
-  it('renders correctly', () => {
-    const tree = renderer
-      .create(
-        <Popover className="test-class" placement="auto" content="Popover text">
-          <button>Button with Popover</button>
-        </Popover>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
deleted file mode 100644
index b36a4fe9af9..00000000000
--- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popover renders correctly 1`] = `
-<div
-  className="popper__manager test-class"
-  onClick={[Function]}
->
-  <div
-    className="popper_ref "
-  >
-    <button>
-      Button with Popover
-    </button>
-  </div>
-</div>
-`;

From b8c2ba332059da29edc59762cfedd9b6f68c3446 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 14:03:52 +0100
Subject: [PATCH 196/352] add typing for metric descriptor

---
 .../datasource/stackdriver/components/Metrics.tsx     | 11 ++++++-----
 .../datasource/stackdriver/components/QueryEditor.tsx |  4 ++--
 .../app/plugins/datasource/stackdriver/datasource.ts  |  3 ++-
 public/app/plugins/datasource/stackdriver/types.ts    | 11 +++++++++++
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 52c0c8ad916..3c04cb07183 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import _ from 'lodash';
 
 import appEvents from 'app/core/app_events';
+import { MetricDescriptor } from '../types';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 
 export interface Props {
-  onChange: (metricDescriptor) => void;
+  onChange: (metricDescriptor: MetricDescriptor) => void;
   templateSrv: any;
   datasource: any;
   defaultProject: string;
@@ -14,12 +15,12 @@ export interface Props {
 }
 
 interface State {
-  metricDescriptors: any[];
+  metricDescriptors: MetricDescriptor[];
   metrics: any[];
   services: any[];
   service: string;
   metric: string;
-  metricDescriptor: any;
+  metricDescriptor: MetricDescriptor;
   defaultProject: string;
 }
 
@@ -84,7 +85,7 @@ export class Metrics extends React.Component<Props, State> {
     return this.state.metricDescriptors.find(md => md.type === this.props.templateSrv.replace(metricType));
   }
 
-  getMetricsList(metricDescriptors) {
+  getMetricsList(metricDescriptors: MetricDescriptor[]) {
     const selectedMetricDescriptor = this.getSelectedMetricDescriptor(this.props.metricType);
     if (!selectedMetricDescriptor) {
       return [];
@@ -122,7 +123,7 @@ export class Metrics extends React.Component<Props, State> {
     this.props.onChange({ ...metricDescriptor, type: value });
   }
 
-  getServicesList(metricDescriptors) {
+  getServicesList(metricDescriptors: MetricDescriptor[]) {
     const services = metricDescriptors.map(m => ({
       value: m.service,
       label: _.startCase(m.serviceShortName),
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 0b101ae3ad7..52c77abc879 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -8,7 +8,7 @@ import { Alignments } from './Alignments';
 import { AlignmentPeriods } from './AlignmentPeriods';
 import { AliasBy } from './AliasBy';
 import { Help } from './Help';
-import { Target } from '../types';
+import { Target, MetricDescriptor } from '../types';
 import { getAlignmentPickerData } from '../functions';
 
 export interface Props {
@@ -92,7 +92,7 @@ export class QueryEditor extends React.Component<Props, State> {
     this.setState({ lastQuery, lastQueryError });
   }
 
-  onMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange({ valueType, metricKind, type, unit }: MetricDescriptor) {
     const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index c5b66079154..3e29747cc95 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -2,6 +2,7 @@ import { stackdriverUnitMappings } from './constants';
 import appEvents from 'app/core/app_events';
 import _ from 'lodash';
 import StackdriverMetricFindQuery from './StackdriverMetricFindQuery';
+import { MetricDescriptor } from './types';
 
 export default class StackdriverDatasource {
   id: number;
@@ -253,7 +254,7 @@ export default class StackdriverDatasource {
     }
   }
 
-  async getMetricTypes(projectName: string) {
+  async getMetricTypes(projectName: string): Promise<MetricDescriptor[]> {
     try {
       if (this.metricTypes.length === 0) {
         const metricsApiPath = `v3/projects/${projectName}/metricDescriptors`;
diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts
index c3259649d81..29b12b4289d 100644
--- a/public/app/plugins/datasource/stackdriver/types.ts
+++ b/public/app/plugins/datasource/stackdriver/types.ts
@@ -55,3 +55,14 @@ export interface QueryMeta {
   resourceLabels: { [key: string]: string[] };
   resourceTypes: string[];
 }
+
+export interface MetricDescriptor {
+  valueType: string;
+  metricKind: string;
+  type: string;
+  unit: string;
+  service: string;
+  serviceShortName: string;
+  displayName: string;
+  description: string;
+}

From d215eecf63821ed08fb144004ade7f8410d128c4 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 14:05:30 +0100
Subject: [PATCH 197/352] remove redundant max-width. it's already declared in
 gf-form-select-box__menu-list

---
 public/sass/components/_form_select_box.scss | 28 +++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 7044b320f31..bf18125d7b8 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -173,22 +173,18 @@ $select-input-bg-disabled: $input-bg-disabled;
   margin-right: 10px;
 }
 
-.gf-form-select-box__option-group {
-  max-width: 600px;
+.gf-form-select-box__option-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+  border-bottom: 1px solid $hr-border-color;
+  text-transform: capitalize;
 
-  .gf-form-select-box__option-group__header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    justify-items: center;
-    cursor: pointer;
-    padding: 7px 10px;
-    width: 100%;
-    border-bottom: 1px solid $hr-border-color;
-    text-transform: capitalize;
-
-    .fa {
-      padding-right: 2px;
-    }
+  .fa {
+    padding-right: 2px;
   }
 }

From bf478a40b191e6c8a9c9fcd7d378008507793dbd Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 8 Jan 2019 14:58:57 +0100
Subject: [PATCH 198/352] fix: When loki is default data source, datasource is
 passed as undefined to QueryOptions #14667

---
 public/app/features/dashboard/dashgrid/QueryOptions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/QueryOptions.tsx b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
index fad70d92990..df911800c20 100644
--- a/public/app/features/dashboard/dashgrid/QueryOptions.tsx
+++ b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
@@ -94,7 +94,7 @@ export class QueryOptions extends PureComponent<Props, State> {
 
   renderOptions() {
     const { datasource, panel } = this.props;
-    const { queryOptions } = datasource.meta;
+    const queryOptions = datasource && datasource.meta ? datasource.meta.queryOptions : undefined;
 
     if (!queryOptions) {
       return null;

From 8d210afd76233ddff949914533eb99428cb4b24e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 8 Jan 2019 15:18:29 +0100
Subject: [PATCH 199/352] Moved AlertTab and StateHistory to
 app/features/alerting

---
 .../features/{dashboard/dashgrid => alerting}/AlertTab.tsx  | 6 +++---
 .../{dashboard/dashgrid => alerting}/StateHistory.tsx       | 6 +++---
 public/app/features/dashboard/dashgrid/PanelEditor.tsx      | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename public/app/features/{dashboard/dashgrid => alerting}/AlertTab.tsx (94%)
 rename public/app/features/{dashboard/dashgrid => alerting}/StateHistory.tsx (95%)

diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
similarity index 94%
rename from public/app/features/dashboard/dashgrid/AlertTab.tsx
rename to public/app/features/alerting/AlertTab.tsx
index 20f7e90633e..a5afbc198fc 100644
--- a/public/app/features/dashboard/dashgrid/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -6,14 +6,14 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
 import appEvents from 'app/core/app_events';
 
 // Components
-import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
 import 'app/features/alerting/AlertTabCtrl';
 
 // Types
-import { DashboardModel } from '../dashboard_model';
-import { PanelModel } from '../panel_model';
+import { DashboardModel } from '../dashboard/dashboard_model';
+import { PanelModel } from '../dashboard/panel_model';
 
 interface Props {
   angularPanel?: AngularComponent;
diff --git a/public/app/features/dashboard/dashgrid/StateHistory.tsx b/public/app/features/alerting/StateHistory.tsx
similarity index 95%
rename from public/app/features/dashboard/dashgrid/StateHistory.tsx
rename to public/app/features/alerting/StateHistory.tsx
index 99229b41848..eb5541f6094 100644
--- a/public/app/features/dashboard/dashgrid/StateHistory.tsx
+++ b/public/app/features/alerting/StateHistory.tsx
@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
-import alertDef from '../../alerting/state/alertDef';
+import alertDef from './state/alertDef';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import { DashboardModel } from '../dashboard_model';
-import appEvents from '../../../core/app_events';
+import { DashboardModel } from '../dashboard/dashboard_model';
+import appEvents from '../../core/app_events';
 
 interface Props {
   dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index fbc683c2eb3..2b91e19d83c 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { QueriesTab } from './QueriesTab';
 import { VisualizationTab } from './VisualizationTab';
 import { GeneralTab } from './GeneralTab';
-import { AlertTab } from './AlertTab';
+import { AlertTab } from '../../alerting/AlertTab';
 
 import config from 'app/core/config';
 import { store } from 'app/store/store';

From de3876997311b984f68add424893e5a2988a3181 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 8 Jan 2019 15:25:23 +0100
Subject: [PATCH 200/352] splitting into more files

---
 .../ValueFormats/arithmeticFormatters.test.ts |  40 +
 .../ValueFormats/arithmeticFormatters.ts      |  42 +
 .../src/utils/ValueFormats/categories.ts      | 313 +++++++
 .../ValueFormats/dateTimeFormatters.test.ts   | 231 +++++
 .../utils/ValueFormats/dateTimeFormatters.ts  | 312 +++++++
 .../ValueFormats/symbolFormatters.test.ts     |  11 +
 .../utils/ValueFormats/symbolFormatters.ts    |  30 +
 .../src/utils/ValueFormats/valueFormats.ts    | 154 ++++
 packages/grafana-ui/src/utils/index.ts        |   2 +-
 packages/grafana-ui/src/utils/valueFormats.ts | 824 ------------------
 10 files changed, 1134 insertions(+), 825 deletions(-)
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/categories.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts
 create mode 100644 packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
 delete mode 100644 packages/grafana-ui/src/utils/valueFormats.ts

diff --git a/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts b/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts
new file mode 100644
index 00000000000..44332a51307
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts
@@ -0,0 +1,40 @@
+import { toHex, toHex0x } from './arithmeticFormatters';
+
+describe('hex', () => {
+  it('positive integer', () => {
+    const str = toHex(100, 0);
+    expect(str).toBe('64');
+  });
+  it('negative integer', () => {
+    const str = toHex(-100, 0);
+    expect(str).toBe('-64');
+  });
+  it('positive float', () => {
+    const str = toHex(50.52, 1);
+    expect(str).toBe('32.8');
+  });
+  it('negative float', () => {
+    const str = toHex(-50.333, 2);
+    expect(str).toBe('-32.547AE147AE14');
+  });
+});
+
+describe('hex 0x', () => {
+  it('positive integeter', () => {
+    const str = toHex0x(7999, 0);
+    expect(str).toBe('0x1F3F');
+  });
+  it('negative integer', () => {
+    const str = toHex0x(-584, 0);
+    expect(str).toBe('-0x248');
+  });
+
+  it('positive float', () => {
+    const str = toHex0x(74.443, 3);
+    expect(str).toBe('0x4A.716872B020C4');
+  });
+  it('negative float', () => {
+    const str = toHex0x(-65.458, 1);
+    expect(str).toBe('-0x41.8');
+  });
+});
diff --git a/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts b/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts
new file mode 100644
index 00000000000..fa9daf0fb97
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts
@@ -0,0 +1,42 @@
+import { toFixed } from './valueFormats';
+
+export function toPercent(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(size, decimals) + '%';
+}
+
+export function toPercentUnit(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(100 * size, decimals) + '%';
+}
+
+export function toHex0x(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  const hexString = toHex(value, decimals);
+  if (hexString.substring(0, 1) === '-') {
+    return '-0x' + hexString.substring(1);
+  }
+  return '0x' + hexString;
+}
+
+export function toHex(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return parseFloat(toFixed(value, decimals))
+    .toString(16)
+    .toUpperCase();
+}
+
+export function sci(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toExponential(decimals);
+}
diff --git a/packages/grafana-ui/src/utils/ValueFormats/categories.ts b/packages/grafana-ui/src/utils/ValueFormats/categories.ts
new file mode 100644
index 00000000000..15ea8d15468
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/categories.ts
@@ -0,0 +1,313 @@
+import { locale, scaledUnits, toFixed, toFixedUnit, ValueFormatCategory } from './valueFormats';
+import {
+  dateTimeAsIso,
+  dateTimeAsUS,
+  dateTimeFromNow,
+  toClockMilliseconds,
+  toClockSeconds,
+  toDays,
+  toDurationInHoursMinutesSeconds,
+  toDurationInMilliseconds,
+  toDurationInSeconds,
+  toHours,
+  toMicroSeconds,
+  toMilliSeconds,
+  toMinutes,
+  toNanoSeconds,
+  toSeconds,
+  toTimeTicks,
+} from './dateTimeFormatters';
+import { toHex, sci, toHex0x, toPercent, toPercentUnit } from './arithmeticFormatters';
+import { binarySIPrefix, currency, decimalSIPrefix } from './symbolFormatters';
+
+export const getCategories = (): ValueFormatCategory[] => [
+  {
+    name: 'none',
+    formats: [
+      { name: 'none', id: 'none', fn: toFixed },
+      {
+        name: 'short',
+        id: 'short',
+        fn: scaledUnits(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Quadr', ' Quint', ' Sext', ' Sept']),
+      },
+      { name: 'percent (0-100)', id: 'percent', fn: toPercent },
+      { name: 'percent (0.0-1.0)', id: 'percentunit', fn: toPercentUnit },
+      { name: 'Humidity (%H)', id: 'humidity', fn: toFixedUnit('%H') },
+      { name: 'decibel', id: 'dB', fn: toFixedUnit('dB') },
+      { name: 'hexadecimal (0x)', id: 'hex0x', fn: toHex0x },
+      { name: 'hexadecimal', id: 'hex', fn: toHex },
+      { name: 'scientific notation', id: 'sci', fn: sci },
+      { name: 'locale format', id: 'locale', fn: locale },
+    ],
+  },
+  {
+    name: 'acceleration',
+    formats: [
+      { name: 'Meters/sec²', id: 'accMS2', fn: toFixedUnit('m/sec²') },
+      { name: 'Feet/sec²', id: 'accFS2', fn: toFixedUnit('f/sec²') },
+      { name: 'G unit', id: 'accG', fn: toFixedUnit('g') },
+    ],
+  },
+  {
+    name: 'angle',
+    formats: [
+      { name: 'Degrees (°)', id: 'degree', fn: toFixedUnit('°') },
+      { name: 'Radians', id: 'radian', fn: toFixedUnit('rad') },
+      { name: 'Gradian', id: 'grad', fn: toFixedUnit('grad') },
+    ],
+  },
+  {
+    name: 'area',
+    formats: [
+      { name: 'Square Meters (m²)', id: 'areaM2', fn: toFixedUnit('m²') },
+      { name: 'Square Feet (ft²)', id: 'areaF2', fn: toFixedUnit('ft²') },
+      { name: 'Square Miles (mi²)', id: 'areaMI2', fn: toFixedUnit('mi²') },
+    ],
+  },
+  {
+    name: 'computation throughput',
+    formats: [
+      { name: 'FLOP/s', id: 'flops', fn: decimalSIPrefix('FLOP/s') },
+      { name: 'MFLOP/s', id: 'mflops', fn: decimalSIPrefix('FLOP/s', 2) },
+      { name: 'GFLOP/s', id: 'gflops', fn: decimalSIPrefix('FLOP/s', 3) },
+      { name: 'TFLOP/s', id: 'tflops', fn: decimalSIPrefix('FLOP/s', 4) },
+      { name: 'PFLOP/s', id: 'pflops', fn: decimalSIPrefix('FLOP/s', 5) },
+      { name: 'EFLOP/s', id: 'eflops', fn: decimalSIPrefix('FLOP/s', 6) },
+    ],
+  },
+  {
+    name: 'concentration',
+    formats: [
+      { name: 'parts-per-million (ppm)', id: 'ppm', fn: toFixedUnit('ppm') },
+      { name: 'parts-per-billion (ppb)', id: 'conppb', fn: toFixedUnit('ppb') },
+      { name: 'nanogram per cubic meter (ng/m³)', id: 'conngm3', fn: toFixedUnit('ng/m³') },
+      { name: 'nanogram per normal cubic meter (ng/Nm³)', id: 'conngNm3', fn: toFixedUnit('ng/Nm³') },
+      { name: 'microgram per cubic meter (μg/m³)', id: 'conμgm3', fn: toFixedUnit('μg/m³') },
+      { name: 'microgram per normal cubic meter (μg/Nm³)', id: 'conμgNm3', fn: toFixedUnit('μg/Nm³') },
+      { name: 'milligram per cubic meter (mg/m³)', id: 'conmgm3', fn: toFixedUnit('mg/m³') },
+      { name: 'milligram per normal cubic meter (mg/Nm³)', id: 'conmgNm3', fn: toFixedUnit('mg/Nm³') },
+      { name: 'gram per cubic meter (g/m³)', id: 'congm3', fn: toFixedUnit('g/m³') },
+      { name: 'gram per normal cubic meter (g/Nm³)', id: 'congNm3', fn: toFixedUnit('g/Nm³') },
+      { name: 'milligrams per decilitre (mg/dL)', id: 'conmgdL', fn: toFixedUnit('mg/dL') },
+      { name: 'millimoles per litre (mmol/L)', id: 'conmmolL', fn: toFixedUnit('mmol/L') },
+    ],
+  },
+  {
+    name: 'currency',
+    formats: [
+      { name: 'Dollars ($)', id: 'currencyUSD', fn: currency('$') },
+      { name: 'Pounds (£)', id: 'currencyGBP', fn: currency('£') },
+      { name: 'Euro (€)', id: 'currencyEUR', fn: currency('€') },
+      { name: 'Yen (¥)', id: 'currencyJPY', fn: currency('¥') },
+      { name: 'Rubles (₽)', id: 'currencyRUB', fn: currency('₽') },
+      { name: 'Hryvnias (₴)', id: 'currencyUAH', fn: currency('₴') },
+      { name: 'Real (R$)', id: 'currencyBRL', fn: currency('R$') },
+      { name: 'Danish Krone (kr)', id: 'currencyDKK', fn: currency('kr') },
+      { name: 'Icelandic Króna (kr)', id: 'currencyISK', fn: currency('kr') },
+      { name: 'Norwegian Krone (kr)', id: 'currencyNOK', fn: currency('kr') },
+      { name: 'Swedish Krona (kr)', id: 'currencySEK', fn: currency('kr') },
+      { name: 'Czech koruna (czk)', id: 'currencyCZK', fn: currency('czk') },
+      { name: 'Swiss franc (CHF)', id: 'currencyCHF', fn: currency('CHF') },
+      { name: 'Polish Złoty (PLN)', id: 'currencyPLN', fn: currency('PLN') },
+      { name: 'Bitcoin (฿)', id: 'currencyBTC', fn: currency('฿') },
+    ],
+  },
+  {
+    name: 'data (IEC)',
+    formats: [
+      { name: 'bits', id: 'bits', fn: binarySIPrefix('b') },
+      { name: 'bytes', id: 'bytes', fn: binarySIPrefix('B') },
+      { name: 'kibibytes', id: 'kbytes', fn: binarySIPrefix('B', 1) },
+      { name: 'mebibytes', id: 'mbytes', fn: binarySIPrefix('B', 2) },
+      { name: 'gibibytes', id: 'gbytes', fn: binarySIPrefix('B', 3) },
+    ],
+  },
+  {
+    name: 'data (Metric)',
+    formats: [
+      { name: 'bits', id: 'decbits', fn: decimalSIPrefix('d') },
+      { name: 'bytes', id: 'decbytes', fn: decimalSIPrefix('B') },
+      { name: 'kilobytes', id: 'deckbytes', fn: decimalSIPrefix('B', 1) },
+      { name: 'megabytes', id: 'decmbytes', fn: decimalSIPrefix('B', 2) },
+      { name: 'gigabytes', id: 'decgbytes', fn: decimalSIPrefix('B', 3) },
+    ],
+  },
+  {
+    name: 'data rate',
+    formats: [
+      { name: 'packets/sec', id: 'pps', fn: decimalSIPrefix('pps') },
+      { name: 'bits/sec', id: 'bps', fn: decimalSIPrefix('bps') },
+      { name: 'bytes/sec', id: 'Bps', fn: decimalSIPrefix('B/s') },
+      { name: 'kilobytes/sec', id: 'KBs', fn: decimalSIPrefix('Bs', 1) },
+      { name: 'kilobits/sec', id: 'Kbits', fn: decimalSIPrefix('bps', 1) },
+      { name: 'megabytes/sec', id: 'MBs', fn: decimalSIPrefix('Bs', 2) },
+      { name: 'megabits/sec', id: 'Mbits', fn: decimalSIPrefix('bps', 2) },
+      { name: 'gigabytes/sec', id: 'GBs', fn: decimalSIPrefix('Bs', 3) },
+      { name: 'gigabits/sec', id: 'Gbits', fn: decimalSIPrefix('bps', 3) },
+    ],
+  },
+  {
+    name: 'date & time',
+    formats: [
+      { name: 'YYYY-MM-DD HH:mm:ss', id: 'dateTimeAsIso', fn: dateTimeAsIso },
+      { name: 'DD/MM/YYYY h:mm:ss a', id: 'dateTimeAsUS', fn: dateTimeAsUS },
+      { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
+    ],
+  },
+  {
+    name: 'energy',
+    formats: [
+      { name: 'Watt (W)', id: 'watt', fn: decimalSIPrefix('W') },
+      { name: 'Kilowatt (kW)', id: 'kwatt', fn: decimalSIPrefix('W', 1) },
+      { name: 'Milliwatt (mW)', id: 'mwatt', fn: decimalSIPrefix('W', -1) },
+      { name: 'Watt per square meter (W/m²)', id: 'Wm2', fn: toFixedUnit('W/m²') },
+      { name: 'Volt-ampere (VA)', id: 'voltamp', fn: decimalSIPrefix('VA') },
+      { name: 'Kilovolt-ampere (kVA)', id: 'kvoltamp', fn: decimalSIPrefix('VA', 1) },
+      { name: 'Volt-ampere reactive (var)', id: 'voltampreact', fn: decimalSIPrefix('var') },
+      { name: 'Kilovolt-ampere reactive (kvar)', id: 'kvoltampreact', fn: decimalSIPrefix('var', 1) },
+      { name: 'Watt-hour (Wh)', id: 'watth', fn: decimalSIPrefix('Wh') },
+      { name: 'Kilowatt-hour (kWh)', id: 'kwatth', fn: decimalSIPrefix('Wh', 1) },
+      { name: 'Kilowatt-min (kWm)', id: 'kwattm', fn: decimalSIPrefix('W/Min', 1) },
+      { name: 'Joule (J)', id: 'joule', fn: decimalSIPrefix('J') },
+      { name: 'Electron volt (eV)', id: 'ev', fn: decimalSIPrefix('eV') },
+      { name: 'Ampere (A)', id: 'amp', fn: decimalSIPrefix('A') },
+      { name: 'Kiloampere (kA)', id: 'kamp', fn: decimalSIPrefix('A', 1) },
+      { name: 'Milliampere (mA)', id: 'mamp', fn: decimalSIPrefix('A', -1) },
+      { name: 'Volt (V)', id: 'volt', fn: decimalSIPrefix('V') },
+      { name: 'Kilovolt (kV)', id: 'kvolt', fn: decimalSIPrefix('V', 1) },
+      { name: 'Millivolt (mV)', id: 'mvolt', fn: decimalSIPrefix('V', -1) },
+      { name: 'Decibel-milliwatt (dBm)', id: 'dBm', fn: decimalSIPrefix('dBm') },
+      { name: 'Ohm (Ω)', id: 'ohm', fn: decimalSIPrefix('Ω') },
+      { name: 'Lumens (Lm)', id: 'lumens', fn: decimalSIPrefix('Lm') },
+    ],
+  },
+  {
+    name: 'flow',
+    formats: [
+      { name: 'Gallons/min (gpm)', id: 'flowgpm', fn: toFixedUnit('gpm') },
+      { name: 'Cubic meters/sec (cms)', id: 'flowcms', fn: toFixedUnit('cms') },
+      { name: 'Cubic feet/sec (cfs)', id: 'flowcfs', fn: toFixedUnit('cfs') },
+      { name: 'Cubic feet/min (cfm)', id: 'flowcfm', fn: toFixedUnit('cfm') },
+      { name: 'Litre/hour', id: 'litreh', fn: toFixedUnit('l/h') },
+      { name: 'Litre/min (l/min)', id: 'flowlpm', fn: toFixedUnit('l/min') },
+      { name: 'milliLitre/min (mL/min)', id: 'flowmlpm', fn: toFixedUnit('mL/min') },
+    ],
+  },
+  {
+    name: 'force',
+    formats: [
+      { name: 'Newton-meters (Nm)', id: 'forceNm', fn: decimalSIPrefix('Nm') },
+      { name: 'Kilonewton-meters (kNm)', id: 'forcekNm', fn: decimalSIPrefix('Nm', 1) },
+      { name: 'Newtons (N)', id: 'forceN', fn: decimalSIPrefix('N') },
+      { name: 'Kilonewtons (kN)', id: 'forcekN', fn: decimalSIPrefix('N', 1) },
+    ],
+  },
+  {
+    name: 'hash rate',
+    formats: [
+      { name: 'hashes/sec', id: 'Hs', fn: decimalSIPrefix('H/s') },
+      { name: 'kilohashes/sec', id: 'KHs', fn: decimalSIPrefix('H/s', 1) },
+      { name: 'megahashes/sec', id: 'MHs', fn: decimalSIPrefix('H/s', 2) },
+      { name: 'gigahashes/sec', id: 'GHs', fn: decimalSIPrefix('H/s', 3) },
+      { name: 'terahashes/sec', id: 'THs', fn: decimalSIPrefix('H/s', 4) },
+      { name: 'petahashes/sec', id: 'PHs', fn: decimalSIPrefix('H/s', 5) },
+      { name: 'exahashes/sec', id: 'EHs', fn: decimalSIPrefix('H/s', 6) },
+    ],
+  },
+  {
+    name: 'mass',
+    formats: [
+      { name: 'milligram (mg)', id: 'massmg', fn: decimalSIPrefix('g', -1) },
+      { name: 'gram (g)', id: 'massg', fn: decimalSIPrefix('g') },
+      { name: 'kilogram (kg)', id: 'masskg', fn: decimalSIPrefix('g', 1) },
+      { name: 'metric ton (t)', id: 'masst', fn: toFixedUnit('t') },
+    ],
+  },
+  {
+    name: 'length',
+    formats: [
+      { name: 'millimetre (mm)', id: 'lengthmm', fn: decimalSIPrefix('m', -1) },
+      { name: 'feet (ft)', id: 'lengthft', fn: toFixedUnit('ft') },
+      { name: 'meter (m)', id: 'lengthm', fn: decimalSIPrefix('m') },
+      { name: 'kilometer (km)', id: 'lengthkm', fn: decimalSIPrefix('m', 1) },
+      { name: 'mile (mi)', id: 'lengthmi', fn: toFixedUnit('mi') },
+    ],
+  },
+  {
+    name: 'pressure',
+    formats: [
+      { name: 'Millibars', id: 'pressurembar', fn: decimalSIPrefix('bar', -1) },
+      { name: 'Bars', id: 'pressurebar', fn: decimalSIPrefix('bar') },
+      { name: 'Kilobars', id: 'pressurekbar', fn: decimalSIPrefix('bar', 1) },
+      { name: 'Hectopascals', id: 'pressurehpa', fn: toFixedUnit('hPa') },
+      { name: 'Kilopascals', id: 'pressurekpa', fn: toFixedUnit('kPa') },
+      { name: 'Inches of mercury', id: 'pressurehg', fn: toFixedUnit('"Hg') },
+      { name: 'PSI', id: 'pressurepsi', fn: scaledUnits(1000, ['psi', 'ksi', 'Mpsi']) },
+    ],
+  },
+  {
+    name: 'radiation',
+    formats: [
+      { name: 'Becquerel (Bq)', id: 'radbq', fn: decimalSIPrefix('Bq') },
+      { name: 'curie (Ci)', id: 'radci', fn: decimalSIPrefix('Ci') },
+      { name: 'Gray (Gy)', id: 'radgy', fn: decimalSIPrefix('Gy') },
+      { name: 'rad', id: 'radrad', fn: decimalSIPrefix('rad') },
+      { name: 'Sievert (Sv)', id: 'radsv', fn: decimalSIPrefix('Sv') },
+      { name: 'rem', id: 'radrem', fn: decimalSIPrefix('rem') },
+      { name: 'Exposure (C/kg)', id: 'radexpckg', fn: decimalSIPrefix('C/kg') },
+      { name: 'roentgen (R)', id: 'radr', fn: decimalSIPrefix('R') },
+      { name: 'Sievert/hour (Sv/h)', id: 'radsvh', fn: decimalSIPrefix('Sv/h') },
+    ],
+  },
+  {
+    name: 'temperature',
+    formats: [
+      { name: 'Celsius (°C)', id: 'celsius', fn: toFixedUnit('°C') },
+      { name: 'Farenheit (°F)', id: 'farenheit', fn: toFixedUnit('°F') },
+      { name: 'Kelvin (K)', id: 'kelvin', fn: toFixedUnit('K') },
+    ],
+  },
+  {
+    name: 'time',
+    formats: [
+      { name: 'Hertz (1/s)', id: 'hertz', fn: decimalSIPrefix('Hz') },
+      { name: 'nanoseconds (ns)', id: 'ns', fn: toNanoSeconds },
+      { name: 'microseconds (µs)', id: 'µs', fn: toMicroSeconds },
+      { name: 'milliseconds (ms)', id: 'ms', fn: toMilliSeconds },
+      { name: 'seconds (s)', id: 's', fn: toSeconds },
+      { name: 'minutes (m)', id: 'm', fn: toMinutes },
+      { name: 'hours (h)', id: 'h', fn: toHours },
+      { name: 'days (d)', id: 'd', fn: toDays },
+      { name: 'duration (ms)', id: 'dtdurationms', fn: toDurationInMilliseconds },
+      { name: 'duration (s)', id: 'dtdurations', fn: toDurationInSeconds },
+      { name: 'duration (hh:mm:ss)', id: 'dthms', fn: toDurationInHoursMinutesSeconds },
+      { name: 'Timeticks (s/100)', id: 'timeticks', fn: toTimeTicks },
+      { name: 'clock (ms)', id: 'clockms', fn: toClockMilliseconds },
+      { name: 'clock (s)', id: 'clocks', fn: toClockSeconds },
+    ],
+  },
+  {
+    name: 'throughput',
+    formats: [
+      { name: 'ops/sec (ops)', id: 'ops', fn: decimalSIPrefix('ops') },
+      { name: 'requests/sec (rps)', id: 'reqps', fn: decimalSIPrefix('reqps') },
+      { name: 'reads/sec (rps)', id: 'rps', fn: decimalSIPrefix('rps') },
+      { name: 'writes/sec (wps)', id: 'wps', fn: decimalSIPrefix('wps') },
+      { name: 'I/O ops/sec (iops)', id: 'iops', fn: decimalSIPrefix('iops') },
+      { name: 'ops/min (opm)', id: 'opm', fn: decimalSIPrefix('opm') },
+      { name: 'reads/min (rpm)', id: 'rpm', fn: decimalSIPrefix('rpm') },
+      { name: 'writes/min (wpm)', id: 'wpm', fn: decimalSIPrefix('wpm') },
+    ],
+  },
+  {
+    name: 'volume',
+    formats: [
+      { name: 'millilitre (mL)', id: 'mlitre', fn: decimalSIPrefix('L', -1) },
+      { name: 'litre (L)', id: 'litre', fn: decimalSIPrefix('L') },
+      { name: 'cubic metre', id: 'm3', fn: toFixedUnit('m³') },
+      { name: 'Normal cubic metre', id: 'Nm3', fn: toFixedUnit('Nm³') },
+      { name: 'cubic decimetre', id: 'dm3', fn: toFixedUnit('dm³') },
+      { name: 'gallons', id: 'gallons', fn: toFixedUnit('gal') },
+    ],
+  },
+];
diff --git a/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts b/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts
new file mode 100644
index 00000000000..cf69a1d433a
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts
@@ -0,0 +1,231 @@
+import moment from 'moment';
+import {
+  dateTimeAsIso,
+  dateTimeAsUS,
+  dateTimeFromNow,
+  Interval,
+  toClock,
+  toDuration,
+  toDurationInMilliseconds,
+  toDurationInSeconds,
+} from './dateTimeFormatters';
+
+describe('date time formats', () => {
+  const epoch = 1505634997920;
+  const utcTime = moment.utc(epoch);
+  const browserTime = moment(epoch);
+
+  it('should format as iso date', () => {
+    const expected = browserTime.format('YYYY-MM-DD HH:mm:ss');
+    const actual = dateTimeAsIso(epoch, 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date (in UTC)', () => {
+    const expected = utcTime.format('YYYY-MM-DD HH:mm:ss');
+    const actual = dateTimeAsIso(epoch, 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date and skip date when today', () => {
+    const now = moment();
+    const expected = now.format('HH:mm:ss');
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date (in UTC) and skip date when today', () => {
+    const now = moment.utc();
+    const expected = now.format('HH:mm:ss');
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date', () => {
+    const expected = browserTime.format('MM/DD/YYYY h:mm:ss a');
+    const actual = dateTimeAsUS(epoch, 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date (in UTC)', () => {
+    const expected = utcTime.format('MM/DD/YYYY h:mm:ss a');
+    const actual = dateTimeAsUS(epoch, 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date and skip date when today', () => {
+    const now = moment();
+    const expected = now.format('h:mm:ss a');
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date (in UTC) and skip date when today', () => {
+    const now = moment.utc();
+    const expected = now.format('h:mm:ss a');
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with days', () => {
+    const daysAgo = moment().add(-7, 'd');
+    const expected = '7 days ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with days (in UTC)', () => {
+    const daysAgo = moment.utc().add(-7, 'd');
+    const expected = '7 days ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with minutes', () => {
+    const daysAgo = moment().add(-2, 'm');
+    const expected = '2 minutes ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with minutes (in UTC)', () => {
+    const daysAgo = moment.utc().add(-2, 'm');
+    const expected = '2 minutes ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+});
+
+describe('duration', () => {
+  it('0 milliseconds', () => {
+    const str = toDurationInMilliseconds(0, 0);
+    expect(str).toBe('0 milliseconds');
+  });
+  it('1 millisecond', () => {
+    const str = toDurationInMilliseconds(1, 0);
+    expect(str).toBe('1 millisecond');
+  });
+  it('-1 millisecond', () => {
+    const str = toDurationInMilliseconds(-1, 0);
+    expect(str).toBe('1 millisecond ago');
+  });
+  it('seconds', () => {
+    const str = toDurationInSeconds(1, 0);
+    expect(str).toBe('1 second');
+  });
+  it('minutes', () => {
+    const str = toDuration(1, 0, Interval.Minute);
+    expect(str).toBe('1 minute');
+  });
+  it('hours', () => {
+    const str = toDuration(1, 0, Interval.Hour);
+    expect(str).toBe('1 hour');
+  });
+  it('days', () => {
+    const str = toDuration(1, 0, Interval.Day);
+    expect(str).toBe('1 day');
+  });
+  it('weeks', () => {
+    const str = toDuration(1, 0, Interval.Week);
+    expect(str).toBe('1 week');
+  });
+  it('months', () => {
+    const str = toDuration(1, 0, Interval.Month);
+    expect(str).toBe('1 month');
+  });
+  it('years', () => {
+    const str = toDuration(1, 0, Interval.Year);
+    expect(str).toBe('1 year');
+  });
+  it('decimal days', () => {
+    const str = toDuration(1.5, 2, Interval.Day);
+    expect(str).toBe('1 day, 12 hours, 0 minutes');
+  });
+  it('decimal months', () => {
+    const str = toDuration(1.5, 3, Interval.Month);
+    expect(str).toBe('1 month, 2 weeks, 1 day, 0 hours');
+  });
+  it('no decimals', () => {
+    const str = toDuration(38898367008, 0, Interval.Millisecond);
+    expect(str).toBe('1 year');
+  });
+  it('1 decimal', () => {
+    const str = toDuration(38898367008, 1, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months');
+  });
+  it('too many decimals', () => {
+    const str = toDuration(38898367008, 20, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months, 3 weeks, 4 days, 5 hours, 6 minutes, 7 seconds, 8 milliseconds');
+  });
+  it('floating point error', () => {
+    const str = toDuration(36993906007, 8, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months, 0 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds');
+  });
+});
+
+describe('clock', () => {
+  it('size less than 1 second', () => {
+    const str = toClock(999, 0);
+    expect(str).toBe('999ms');
+  });
+  describe('size less than 1 minute', () => {
+    it('default', () => {
+      const str = toClock(59999);
+      expect(str).toBe('59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(59999, 0);
+      expect(str).toBe('59s');
+    });
+  });
+  describe('size less than 1 hour', () => {
+    it('default', () => {
+      const str = toClock(3599999);
+      expect(str).toBe('59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(3599999, 0);
+      expect(str).toBe('59m');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(3599999, 1);
+      expect(str).toBe('59m:59s');
+    });
+  });
+  describe('size greater than or equal 1 hour', () => {
+    it('default', () => {
+      const str = toClock(7199999);
+      expect(str).toBe('01h:59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(7199999, 0);
+      expect(str).toBe('01h');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(7199999, 1);
+      expect(str).toBe('01h:59m');
+    });
+    it('decimals equals 2', () => {
+      const str = toClock(7199999, 2);
+      expect(str).toBe('01h:59m:59s');
+    });
+  });
+  describe('size greater than or equal 1 day', () => {
+    it('default', () => {
+      const str = toClock(89999999);
+      expect(str).toBe('24h:59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(89999999, 0);
+      expect(str).toBe('24h');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(89999999, 1);
+      expect(str).toBe('24h:59m');
+    });
+    it('decimals equals 2', () => {
+      const str = toClock(89999999, 2);
+      expect(str).toBe('24h:59m:59s');
+    });
+  });
+});
diff --git a/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts b/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts
new file mode 100644
index 00000000000..1e07857eb66
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts
@@ -0,0 +1,312 @@
+import { toFixed, toFixedScaled } from './valueFormats';
+import moment from 'moment';
+
+interface IntervalsInSeconds {
+  [interval: string]: number;
+}
+
+export enum Interval {
+  Year = 'year',
+  Month = 'month',
+  Week = 'week',
+  Day = 'day',
+  Hour = 'hour',
+  Minute = 'minute',
+  Second = 'second',
+  Millisecond = 'millisecond',
+}
+
+const INTERVALS_IN_SECONDS: IntervalsInSeconds = {
+  [Interval.Year]: 31536000,
+  [Interval.Month]: 2592000,
+  [Interval.Week]: 604800,
+  [Interval.Day]: 86400,
+  [Interval.Hour]: 3600,
+  [Interval.Minute]: 60,
+  [Interval.Second]: 1,
+  [Interval.Millisecond]: 0.001,
+};
+
+export function toNanoSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ns';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' µs');
+  } else if (Math.abs(size) < 1000000000) {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' ms');
+  } else if (Math.abs(size) < 60000000000) {
+    return toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, ' s');
+  } else {
+    return toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, ' min');
+  }
+}
+
+export function toMicroSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' µs';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' ms');
+  } else {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' s');
+  }
+}
+
+export function toMilliSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ms';
+  } else if (Math.abs(size) < 60000) {
+    // Less than 1 min
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' s');
+  } else if (Math.abs(size) < 3600000) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60000, decimals, scaledDecimals, 5, ' min');
+  } else if (Math.abs(size) < 86400000) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, ' hour');
+  } else if (Math.abs(size) < 31536000000) {
+    // Less than one year, divide in days
+    return toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, ' day');
+  }
+
+  return toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, ' year');
+}
+
+export function toSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // Less than 1 µs, divide in ns
+  if (Math.abs(size) < 0.000001) {
+    return toFixedScaled(size * 1e9, decimals, scaledDecimals - decimals, -9, ' ns');
+  }
+  // Less than 1 ms, divide in µs
+  if (Math.abs(size) < 0.001) {
+    return toFixedScaled(size * 1e6, decimals, scaledDecimals - decimals, -6, ' µs');
+  }
+  // Less than 1 second, divide in ms
+  if (Math.abs(size) < 1) {
+    return toFixedScaled(size * 1e3, decimals, scaledDecimals - decimals, -3, ' ms');
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' s';
+  } else if (Math.abs(size) < 3600) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min');
+  } else if (Math.abs(size) < 86400) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour');
+  } else if (Math.abs(size) < 604800) {
+    // Less than one week, divide in days
+    return toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day');
+  } else if (Math.abs(size) < 31536000) {
+    // Less than one year, divide in week
+    return toFixedScaled(size / 604800, decimals, scaledDecimals, 6, ' week');
+  }
+
+  return toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, ' year');
+}
+
+export function toMinutes(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' min';
+  } else if (Math.abs(size) < 1440) {
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 2, ' hour');
+  } else if (Math.abs(size) < 10080) {
+    return toFixedScaled(size / 1440, decimals, scaledDecimals, 3, ' day');
+  } else if (Math.abs(size) < 604800) {
+    return toFixedScaled(size / 10080, decimals, scaledDecimals, 4, ' week');
+  } else {
+    return toFixedScaled(size / 5.25948e5, decimals, scaledDecimals, 5, ' year');
+  }
+}
+
+export function toHours(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 24) {
+    return toFixed(size, decimals) + ' hour';
+  } else if (Math.abs(size) < 168) {
+    return toFixedScaled(size / 24, decimals, scaledDecimals, 2, ' day');
+  } else if (Math.abs(size) < 8760) {
+    return toFixedScaled(size / 168, decimals, scaledDecimals, 3, ' week');
+  } else {
+    return toFixedScaled(size / 8760, decimals, scaledDecimals, 4, ' year');
+  }
+}
+
+export function toDays(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 7) {
+    return toFixed(size, decimals) + ' day';
+  } else if (Math.abs(size) < 365) {
+    return toFixedScaled(size / 7, decimals, scaledDecimals, 2, ' week');
+  } else {
+    return toFixedScaled(size / 365, decimals, scaledDecimals, 3, ' year');
+  }
+}
+
+export function toDuration(size: number, decimals: number, timeScale: Interval): string {
+  if (size === null) {
+    return '';
+  }
+  if (size === 0) {
+    return '0 ' + timeScale + 's';
+  }
+  if (size < 0) {
+    return toDuration(-size, decimals, timeScale) + ' ago';
+  }
+
+  const units = [
+    { long: Interval.Year },
+    { long: Interval.Month },
+    { long: Interval.Week },
+    { long: Interval.Day },
+    { long: Interval.Hour },
+    { long: Interval.Minute },
+    { long: Interval.Second },
+    { long: Interval.Millisecond },
+  ];
+  // convert $size to milliseconds
+  // intervals_in_seconds uses seconds (duh), convert them to milliseconds here to minimize floating point errors
+  size *= INTERVALS_IN_SECONDS[timeScale] * 1000;
+
+  const strings = [];
+  // after first value >= 1 print only $decimals more
+  let decrementDecimals = false;
+  for (let i = 0; i < units.length && decimals >= 0; i++) {
+    const interval = INTERVALS_IN_SECONDS[units[i].long] * 1000;
+    const value = size / interval;
+    if (value >= 1 || decrementDecimals) {
+      decrementDecimals = true;
+      const floor = Math.floor(value);
+      const unit = units[i].long + (floor !== 1 ? 's' : '');
+      strings.push(floor + ' ' + unit);
+      size = size % interval;
+      decimals--;
+    }
+  }
+
+  return strings.join(', ');
+}
+
+export function toClock(size: number, decimals?: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // < 1 second
+  if (size < 1000) {
+    return moment.utc(size).format('SSS\\m\\s');
+  }
+
+  // < 1 minute
+  if (size < 60000) {
+    let format = 'ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  // < 1 hour
+  if (size < 3600000) {
+    let format = 'mm\\m:ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'mm\\m';
+    } else if (decimals === 1) {
+      format = 'mm\\m:ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  let format = 'mm\\m:ss\\s:SSS\\m\\s';
+
+  const hours = `${('0' + Math.floor(moment.duration(size, 'milliseconds').asHours())).slice(-2)}h`;
+
+  if (decimals === 0) {
+    format = '';
+  } else if (decimals === 1) {
+    format = 'mm\\m';
+  } else if (decimals === 2) {
+    format = 'mm\\m:ss\\s';
+  }
+
+  return format ? `${hours}:${moment.utc(size).format(format)}` : hours;
+}
+
+export function toDurationInMilliseconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Millisecond);
+}
+
+export function toDurationInSeconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Second);
+}
+
+export function toDurationInHoursMinutesSeconds(size: number) {
+  const strings = [];
+  const numHours = Math.floor(size / 3600);
+  const numMinutes = Math.floor((size % 3600) / 60);
+  const numSeconds = Math.floor((size % 3600) % 60);
+  numHours > 9 ? strings.push('' + numHours) : strings.push('0' + numHours);
+  numMinutes > 9 ? strings.push('' + numMinutes) : strings.push('0' + numMinutes);
+  numSeconds > 9 ? strings.push('' + numSeconds) : strings.push('0' + numSeconds);
+  return strings.join(':');
+}
+
+export function toTimeTicks(size: number, decimals: number, scaledDecimals: number) {
+  return toSeconds(size, decimals, scaledDecimals);
+}
+
+export function toClockMilliseconds(size: number, decimals: number) {
+  return toClock(size, decimals);
+}
+
+export function toClockSeconds(size: number, decimals: number) {
+  return toClock(size * 1000, decimals);
+}
+
+export function dateTimeAsIso(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('HH:mm:ss');
+  }
+  return time.format('YYYY-MM-DD HH:mm:ss');
+}
+
+export function dateTimeAsUS(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('h:mm:ss a');
+  }
+  return time.format('MM/DD/YYYY h:mm:ss a');
+}
+
+export function dateTimeFromNow(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+  return time.fromNow();
+}
diff --git a/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts b/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
new file mode 100644
index 00000000000..6b91a49c0dc
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
@@ -0,0 +1,11 @@
+import { currency } from './symbolFormatters';
+
+describe('Currency', () => {
+  it('should format as usd', () => {
+    expect(currency('$')(1532.82, 1, -1)).toEqual('$1.53K');
+  });
+
+  it('should format as usd', () => {
+    expect(currency('kr')(1532.82, 1, -1)).toEqual('1.53K kr');
+  });
+});
diff --git a/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts b/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts
new file mode 100644
index 00000000000..66808143daa
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts
@@ -0,0 +1,30 @@
+import { scaledUnits } from './valueFormats';
+
+export function currency(symbol: string) {
+  const units = ['', 'K', 'M', 'B', 'T'];
+  const scaler = scaledUnits(1000, units);
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    const scaled = scaler(size, decimals, scaledDecimals);
+    return symbol + scaled;
+  };
+}
+
+export function binarySIPrefix(unit: string, offset = 0) {
+  const prefixes = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'].slice(offset);
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1024, units);
+}
+
+export function decimalSIPrefix(unit: string, offset = 0) {
+  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+  prefixes = prefixes.slice(3 + (offset || 0));
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1000, units);
+}
diff --git a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts b/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
new file mode 100644
index 00000000000..152f242b1a8
--- /dev/null
+++ b/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
@@ -0,0 +1,154 @@
+import { getCategories } from './categories';
+
+type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number, isUtc?: boolean) => string;
+
+interface ValueFormat {
+  name: string;
+  id: string;
+  fn: ValueFormatter;
+}
+
+export interface ValueFormatCategory {
+  name: string;
+  formats: ValueFormat[];
+}
+
+interface ValueFormatterIndex {
+  [id: string]: ValueFormatter;
+}
+
+// Globals & formats cache
+let categories: ValueFormatCategory[] = [];
+const index: ValueFormatterIndex = {};
+let hasBuildIndex = false;
+
+export function toFixed(value: number, decimals?: number): string {
+  if (value === null) {
+    return '';
+  }
+
+  const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
+  const formatted = String(Math.round(value * factor) / factor);
+
+  // if exponent return directly
+  if (formatted.indexOf('e') !== -1 || value === 0) {
+    return formatted;
+  }
+
+  // If tickDecimals was specified, ensure that we have exactly that
+  // much precision; otherwise default to the value's own precision.
+  if (decimals != null) {
+    const decimalPos = formatted.indexOf('.');
+    const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
+    if (precision < decimals) {
+      return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+    }
+  }
+
+  return formatted;
+}
+
+export function toFixedScaled(
+  value: number,
+  decimals: number,
+  scaledDecimals: number,
+  additionalDecimals: number,
+  ext: string
+) {
+  if (scaledDecimals === null) {
+    return toFixed(value, decimals) + ext;
+  } else {
+    return toFixed(value, scaledDecimals + additionalDecimals) + ext;
+  }
+}
+
+export function toFixedUnit(unit: string) {
+  return (size: number, decimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    return toFixed(size, decimals) + ' ' + unit;
+  };
+}
+
+// Formatter which scales the unit string geometrically according to the given
+// numeric factor. Repeatedly scales the value down by the factor until it is
+// less than the factor in magnitude, or the end of the array is reached.
+export function scaledUnits(factor: number, extArray: string[]) {
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+
+    let steps = 0;
+    const limit = extArray.length;
+
+    while (Math.abs(size) >= factor) {
+      steps++;
+      size /= factor;
+
+      if (steps >= limit) {
+        return 'NA';
+      }
+    }
+
+    if (steps > 0 && scaledDecimals !== null) {
+      decimals = scaledDecimals + 3 * steps;
+    }
+
+    return toFixed(size, decimals) + extArray[steps];
+  };
+}
+
+export function locale(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
+}
+
+function buildFormats() {
+  categories = getCategories();
+
+  for (const cat of categories) {
+    for (const format of cat.formats) {
+      index[format.id] = format.fn;
+    }
+  }
+
+  hasBuildIndex = true;
+}
+
+export function getValueFormat(id: string): ValueFormatter {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return index[id];
+}
+
+export function getValueFormatterIndex(): ValueFormatterIndex {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return index;
+}
+
+export function getUnitFormats() {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return categories.map(cat => {
+    return {
+      text: cat.name,
+      submenu: cat.formats.map(format => {
+        return {
+          text: format.name,
+          id: format.id,
+        };
+      }),
+    };
+  });
+}
diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index cd46a5b6424..b1804c8605e 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -1,2 +1,2 @@
 export * from './processTimeSeries';
-export * from './valueFormats';
+export * from './ValueFormats/valueFormats';
diff --git a/packages/grafana-ui/src/utils/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats.ts
deleted file mode 100644
index 5e86a583bb4..00000000000
--- a/packages/grafana-ui/src/utils/valueFormats.ts
+++ /dev/null
@@ -1,824 +0,0 @@
-import moment from 'moment';
-
-type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number, isUtc?: boolean) => string;
-
-interface ValueFormat {
-  name: string;
-  id: string;
-  fn: ValueFormatter;
-}
-
-interface ValueFormatCategory {
-  name: string;
-  formats: ValueFormat[];
-}
-
-interface ValueFormatterIndex {
-  [id: string]: ValueFormatter;
-}
-
-interface IntervalsInSeconds {
-  [interval: string]: number;
-}
-
-enum Interval {
-  Year = 'year',
-  Month = 'month',
-  Week = 'week',
-  Day = 'day',
-  Hour = 'hour',
-  Minute = 'minute',
-  Second = 'second',
-  Millisecond = 'millisecond',
-}
-
-const INTERVALS_IN_SECONDS: IntervalsInSeconds = {
-  [Interval.Year]: 31536000,
-  [Interval.Month]: 2592000,
-  [Interval.Week]: 604800,
-  [Interval.Day]: 86400,
-  [Interval.Hour]: 3600,
-  [Interval.Month]: 60,
-  [Interval.Second]: 1,
-  [Interval.Millisecond]: 0.001,
-};
-
-// Globals & formats cache
-let categories: ValueFormatCategory[] = [];
-const index: ValueFormatterIndex = {};
-let hasBuildIndex = false;
-
-function toFixed(value: number, decimals?: number): string {
-  if (value === null) {
-    return '';
-  }
-
-  const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
-  const formatted = String(Math.round(value * factor) / factor);
-
-  // if exponent return directly
-  if (formatted.indexOf('e') !== -1 || value === 0) {
-    return formatted;
-  }
-
-  // If tickDecimals was specified, ensure that we have exactly that
-  // much precision; otherwise default to the value's own precision.
-  if (decimals != null) {
-    const decimalPos = formatted.indexOf('.');
-    const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
-    if (precision < decimals) {
-      return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
-    }
-  }
-
-  return formatted;
-}
-
-function toFixedScaled(
-  value: number,
-  decimals: number,
-  scaledDecimals: number,
-  additionalDecimals: number,
-  ext: string
-) {
-  if (scaledDecimals === null) {
-    return toFixed(value, decimals) + ext;
-  } else {
-    return toFixed(value, scaledDecimals + additionalDecimals) + ext;
-  }
-}
-
-function toFixedUnit(unit: string) {
-  return (size: number, decimals: number) => {
-    if (size === null) {
-      return '';
-    }
-    return toFixed(size, decimals) + ' ' + unit;
-  };
-}
-
-// Formatter which scales the unit string geometrically according to the given
-// numeric factor. Repeatedly scales the value down by the factor until it is
-// less than the factor in magnitude, or the end of the array is reached.
-function scaledUnits(factor: number, extArray: string[]) {
-  return (size: number, decimals: number, scaledDecimals: number) => {
-    if (size === null) {
-      return '';
-    }
-
-    let steps = 0;
-    const limit = extArray.length;
-
-    while (Math.abs(size) >= factor) {
-      steps++;
-      size /= factor;
-
-      if (steps >= limit) {
-        return 'NA';
-      }
-    }
-
-    if (steps > 0 && scaledDecimals !== null) {
-      decimals = scaledDecimals + 3 * steps;
-    }
-
-    return toFixed(size, decimals) + extArray[steps];
-  };
-}
-
-function toPercent(size: number, decimals: number) {
-  if (size === null) {
-    return '';
-  }
-  return toFixed(size, decimals) + '%';
-}
-
-function toPercentUnit(size: number, decimals: number) {
-  if (size === null) {
-    return '';
-  }
-  return toFixed(100 * size, decimals) + '%';
-}
-
-function toHex0x(value: number, decimals: number) {
-  if (value == null) {
-    return '';
-  }
-  const hexString = hex(value, decimals);
-  if (hexString.substring(0, 1) === '-') {
-    return '-0x' + hexString.substring(1);
-  }
-  return '0x' + hexString;
-}
-
-function hex(value: number, decimals: number) {
-  if (value == null) {
-    return '';
-  }
-  return parseFloat(toFixed(value, decimals))
-    .toString(16)
-    .toUpperCase();
-}
-
-function sci(value: number, decimals: number) {
-  if (value == null) {
-    return '';
-  }
-  return value.toExponential(decimals);
-}
-
-function locale(value: number, decimals: number) {
-  if (value == null) {
-    return '';
-  }
-  return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
-}
-
-function currency(symbol: string) {
-  const units = ['', 'K', 'M', 'B', 'T'];
-  const scaler = scaledUnits(1000, units);
-  return (size: number, decimals: number, scaledDecimals: number) => {
-    if (size === null) {
-      return '';
-    }
-    const scaled = scaler(size, decimals, scaledDecimals);
-    return symbol + scaled;
-  };
-}
-
-function toNanoSeconds(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 1000) {
-    return toFixed(size, decimals) + ' ns';
-  } else if (Math.abs(size) < 1000000) {
-    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' µs');
-  } else if (Math.abs(size) < 1000000000) {
-    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' ms');
-  } else if (Math.abs(size) < 60000000000) {
-    return toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, ' s');
-  } else {
-    return toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, ' min');
-  }
-}
-
-function toMicroSeconds(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 1000) {
-    return toFixed(size, decimals) + ' µs';
-  } else if (Math.abs(size) < 1000000) {
-    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' ms');
-  } else {
-    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' s');
-  }
-}
-
-function toMilliSeconds(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 1000) {
-    return toFixed(size, decimals) + ' ms';
-  } else if (Math.abs(size) < 60000) {
-    // Less than 1 min
-    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' s');
-  } else if (Math.abs(size) < 3600000) {
-    // Less than 1 hour, divide in minutes
-    return toFixedScaled(size / 60000, decimals, scaledDecimals, 5, ' min');
-  } else if (Math.abs(size) < 86400000) {
-    // Less than one day, divide in hours
-    return toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, ' hour');
-  } else if (Math.abs(size) < 31536000000) {
-    // Less than one year, divide in days
-    return toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, ' day');
-  }
-
-  return toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, ' year');
-}
-
-function toSeconds(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  // Less than 1 µs, divide in ns
-  if (Math.abs(size) < 0.000001) {
-    return toFixedScaled(size * 1e9, decimals, scaledDecimals - decimals, -9, ' ns');
-  }
-  // Less than 1 ms, divide in µs
-  if (Math.abs(size) < 0.001) {
-    return toFixedScaled(size * 1e6, decimals, scaledDecimals - decimals, -6, ' µs');
-  }
-  // Less than 1 second, divide in ms
-  if (Math.abs(size) < 1) {
-    return toFixedScaled(size * 1e3, decimals, scaledDecimals - decimals, -3, ' ms');
-  }
-
-  if (Math.abs(size) < 60) {
-    return toFixed(size, decimals) + ' s';
-  } else if (Math.abs(size) < 3600) {
-    // Less than 1 hour, divide in minutes
-    return toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min');
-  } else if (Math.abs(size) < 86400) {
-    // Less than one day, divide in hours
-    return toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour');
-  } else if (Math.abs(size) < 604800) {
-    // Less than one week, divide in days
-    return toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day');
-  } else if (Math.abs(size) < 31536000) {
-    // Less than one year, divide in week
-    return toFixedScaled(size / 604800, decimals, scaledDecimals, 6, ' week');
-  }
-
-  return toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, ' year');
-}
-
-function toMinutes(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 60) {
-    return toFixed(size, decimals) + ' min';
-  } else if (Math.abs(size) < 1440) {
-    return toFixedScaled(size / 60, decimals, scaledDecimals, 2, ' hour');
-  } else if (Math.abs(size) < 10080) {
-    return toFixedScaled(size / 1440, decimals, scaledDecimals, 3, ' day');
-  } else if (Math.abs(size) < 604800) {
-    return toFixedScaled(size / 10080, decimals, scaledDecimals, 4, ' week');
-  } else {
-    return toFixedScaled(size / 5.25948e5, decimals, scaledDecimals, 5, ' year');
-  }
-}
-
-function toHours(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 24) {
-    return toFixed(size, decimals) + ' hour';
-  } else if (Math.abs(size) < 168) {
-    return toFixedScaled(size / 24, decimals, scaledDecimals, 2, ' day');
-  } else if (Math.abs(size) < 8760) {
-    return toFixedScaled(size / 168, decimals, scaledDecimals, 3, ' week');
-  } else {
-    return toFixedScaled(size / 8760, decimals, scaledDecimals, 4, ' year');
-  }
-}
-
-function toDays(size: number, decimals: number, scaledDecimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 7) {
-    return toFixed(size, decimals) + ' day';
-  } else if (Math.abs(size) < 365) {
-    return toFixedScaled(size / 7, decimals, scaledDecimals, 2, ' week');
-  } else {
-    return toFixedScaled(size / 365, decimals, scaledDecimals, 3, ' year');
-  }
-}
-
-function toDuration(size: number, decimals: number, timeScale: Interval): string {
-  if (size === null) {
-    return '';
-  }
-  if (size === 0) {
-    return '0 ' + timeScale + 's';
-  }
-  if (size < 0) {
-    return toDuration(-size, decimals, timeScale) + ' ago';
-  }
-
-  const units = [
-    { long: Interval.Year },
-    { long: Interval.Month },
-    { long: Interval.Week },
-    { long: Interval.Day },
-    { long: Interval.Hour },
-    { long: Interval.Minute },
-    { long: Interval.Second },
-    { long: Interval.Millisecond },
-  ];
-  // convert $size to milliseconds
-  // intervals_in_seconds uses seconds (duh), convert them to milliseconds here to minimize floating point errors
-  size *= INTERVALS_IN_SECONDS[timeScale] * 1000;
-
-  const strings = [];
-  // after first value >= 1 print only $decimals more
-  let decrementDecimals = false;
-  for (let i = 0; i < units.length && decimals >= 0; i++) {
-    const interval = INTERVALS_IN_SECONDS[units[i].long] * 1000;
-    const value = size / interval;
-    if (value >= 1 || decrementDecimals) {
-      decrementDecimals = true;
-      const floor = Math.floor(value);
-      const unit = units[i].long + (floor !== 1 ? 's' : '');
-      strings.push(floor + ' ' + unit);
-      size = size % interval;
-      decimals--;
-    }
-  }
-
-  return strings.join(', ');
-}
-
-function toClock(size: number, decimals: number) {
-  if (size === null) {
-    return '';
-  }
-
-  // < 1 second
-  if (size < 1000) {
-    return moment.utc(size).format('SSS\\m\\s');
-  }
-
-  // < 1 minute
-  if (size < 60000) {
-    let format = 'ss\\s:SSS\\m\\s';
-    if (decimals === 0) {
-      format = 'ss\\s';
-    }
-    return moment.utc(size).format(format);
-  }
-
-  // < 1 hour
-  if (size < 3600000) {
-    let format = 'mm\\m:ss\\s:SSS\\m\\s';
-    if (decimals === 0) {
-      format = 'mm\\m';
-    } else if (decimals === 1) {
-      format = 'mm\\m:ss\\s';
-    }
-    return moment.utc(size).format(format);
-  }
-
-  let format = 'mm\\m:ss\\s:SSS\\m\\s';
-
-  const hours = `${('0' + Math.floor(moment.duration(size, 'milliseconds').asHours())).slice(-2)}h`;
-
-  if (decimals === 0) {
-    format = '';
-  } else if (decimals === 1) {
-    format = 'mm\\m';
-  } else if (decimals === 2) {
-    format = 'mm\\m:ss\\s';
-  }
-
-  return format ? `${hours}:${moment.utc(size).format(format)}` : hours;
-}
-
-function toDurationInMilliseconds(size: number, decimals: number) {
-  return toDuration(size, decimals, Interval.Millisecond);
-}
-
-function toDurationInSeconds(size: number, decimals: number) {
-  return toDuration(size, decimals, Interval.Second);
-}
-
-function toDurationInHoursMinutesSeconds(size: number) {
-  const strings = [];
-  const numHours = Math.floor(size / 3600);
-  const numMinutes = Math.floor((size % 3600) / 60);
-  const numSeconds = Math.floor((size % 3600) % 60);
-  numHours > 9 ? strings.push('' + numHours) : strings.push('0' + numHours);
-  numMinutes > 9 ? strings.push('' + numMinutes) : strings.push('0' + numMinutes);
-  numSeconds > 9 ? strings.push('' + numSeconds) : strings.push('0' + numSeconds);
-  return strings.join(':');
-}
-
-function toTimeTicks(size: number, decimals: number, scaledDecimals: number) {
-  return toSeconds(size, decimals, scaledDecimals);
-}
-
-function toClockMilliseconds(size: number, decimals: number) {
-  return toClock(size, decimals);
-}
-
-function toClockSeconds(size: number, decimals: number) {
-  return toClock(size * 1000, decimals);
-}
-
-function dateTimeAsIso(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
-  const time = isUtc ? moment.utc(value) : moment(value);
-
-  if (moment().isSame(value, 'day')) {
-    return time.format('HH:mm:ss');
-  }
-  return time.format('YYYY-MM-DD HH:mm:ss');
-}
-
-function dateTimeAsUS(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
-  const time = isUtc ? moment.utc(value) : moment(value);
-
-  if (moment().isSame(value, 'day')) {
-    return time.format('h:mm:ss a');
-  }
-  return time.format('MM/DD/YYYY h:mm:ss a');
-}
-
-function dateTimeFromNow(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
-  const time = isUtc ? moment.utc(value) : moment(value);
-  return time.fromNow();
-}
-
-function binarySIPrefix(unit: string, offset = 0) {
-  const prefixes = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'].slice(offset);
-  const units = prefixes.map(p => {
-    return ' ' + p + unit;
-  });
-  return scaledUnits(1024, units);
-}
-
-function decimalSIPrefix(unit: string, offset = 0) {
-  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
-  prefixes = prefixes.slice(3 + (offset || 0));
-  const units = prefixes.map(p => {
-    return ' ' + p + unit;
-  });
-  return scaledUnits(1000, units);
-}
-
-function buildFormats() {
-  categories = [
-    {
-      name: 'none',
-      formats: [
-        { name: 'none', id: 'none', fn: toFixed },
-        {
-          name: 'short',
-          id: 'short',
-          fn: scaledUnits(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Quadr', ' Quint', ' Sext', ' Sept']),
-        },
-        { name: 'percent (0-100)', id: 'percent', fn: toPercent },
-        { name: 'percent (0.0-1.0)', id: 'percentunit', fn: toPercentUnit },
-        { name: 'Humidity (%H)', id: 'humidity', fn: toFixedUnit('%H') },
-        { name: 'decibel', id: 'dB', fn: toFixedUnit('dB') },
-        { name: 'hexadecimal (0x)', id: 'hex0x', fn: toHex0x },
-        { name: 'hexadecimal', id: 'hex', fn: hex },
-        { name: 'scientific notation', id: 'sci', fn: sci },
-        { name: 'locale format', id: 'locale', fn: locale },
-      ],
-    },
-    {
-      name: 'acceleration',
-      formats: [
-        { name: 'Meters/sec²', id: 'accMS2', fn: toFixedUnit('m/sec²') },
-        { name: 'Feet/sec²', id: 'accFS2', fn: toFixedUnit('f/sec²') },
-        { name: 'G unit', id: 'accG', fn: toFixedUnit('g') },
-      ],
-    },
-    {
-      name: 'angle',
-      formats: [
-        { name: 'Degrees (°)', id: 'degree', fn: toFixedUnit('°') },
-        { name: 'Radians', id: 'radian', fn: toFixedUnit('rad') },
-        { name: 'Gradian', id: 'grad', fn: toFixedUnit('grad') },
-      ],
-    },
-    {
-      name: 'area',
-      formats: [
-        { name: 'Square Meters (m²)', id: 'areaM2', fn: toFixedUnit('m²') },
-        { name: 'Square Feet (ft²)', id: 'areaF2', fn: toFixedUnit('ft²') },
-        { name: 'Square Miles (mi²)', id: 'areaMI2', fn: toFixedUnit('mi²') },
-      ],
-    },
-    {
-      name: 'computation throughput',
-      formats: [
-        { name: 'FLOP/s', id: 'flops', fn: decimalSIPrefix('FLOP/s') },
-        { name: 'MFLOP/s', id: 'mflops', fn: decimalSIPrefix('FLOP/s', 2) },
-        { name: 'GFLOP/s', id: 'gflops', fn: decimalSIPrefix('FLOP/s', 3) },
-        { name: 'TFLOP/s', id: 'tflops', fn: decimalSIPrefix('FLOP/s', 4) },
-        { name: 'PFLOP/s', id: 'pflops', fn: decimalSIPrefix('FLOP/s', 5) },
-        { name: 'EFLOP/s', id: 'eflops', fn: decimalSIPrefix('FLOP/s', 6) },
-      ],
-    },
-    {
-      name: 'concentration',
-      formats: [
-        { name: 'parts-per-million (ppm)', id: 'ppm', fn: toFixedUnit('ppm') },
-        { name: 'parts-per-billion (ppb)', id: 'conppb', fn: toFixedUnit('ppb') },
-        { name: 'nanogram per cubic meter (ng/m³)', id: 'conngm3', fn: toFixedUnit('ng/m³') },
-        { name: 'nanogram per normal cubic meter (ng/Nm³)', id: 'conngNm3', fn: toFixedUnit('ng/Nm³') },
-        { name: 'microgram per cubic meter (μg/m³)', id: 'conμgm3', fn: toFixedUnit('μg/m³') },
-        { name: 'microgram per normal cubic meter (μg/Nm³)', id: 'conμgNm3', fn: toFixedUnit('μg/Nm³') },
-        { name: 'milligram per cubic meter (mg/m³)', id: 'conmgm3', fn: toFixedUnit('mg/m³') },
-        { name: 'milligram per normal cubic meter (mg/Nm³)', id: 'conmgNm3', fn: toFixedUnit('mg/Nm³') },
-        { name: 'gram per cubic meter (g/m³)', id: 'congm3', fn: toFixedUnit('g/m³') },
-        { name: 'gram per normal cubic meter (g/Nm³)', id: 'congNm3', fn: toFixedUnit('g/Nm³') },
-        { name: 'milligrams per decilitre (mg/dL)', id: 'conmgdL', fn: toFixedUnit('mg/dL') },
-        { name: 'millimoles per litre (mmol/L)', id: 'conmmolL', fn: toFixedUnit('mmol/L') },
-      ],
-    },
-    {
-      name: 'currency',
-      formats: [
-        { name: 'Dollars ($)', id: 'currencyUSD', fn: currency('$') },
-        { name: 'Pounds (£)', id: 'currencyGBP', fn: currency('£') },
-        { name: 'Euro (€)', id: 'currencyEUR', fn: currency('€') },
-        { name: 'Yen (¥)', id: 'currencyJPY', fn: currency('¥') },
-        { name: 'Rubles (₽)', id: 'currencyRUB', fn: currency('₽') },
-        { name: 'Hryvnias (₴)', id: 'currencyUAH', fn: currency('₴') },
-        { name: 'Real (R$)', id: 'currencyBRL', fn: currency('R$') },
-        { name: 'Danish Krone (kr)', id: 'currencyDKK', fn: currency('kr') },
-        { name: 'Icelandic Króna (kr)', id: 'currencyISK', fn: currency('kr') },
-        { name: 'Norwegian Krone (kr)', id: 'currencyNOK', fn: currency('kr') },
-        { name: 'Swedish Krona (kr)', id: 'currencySEK', fn: currency('kr') },
-        { name: 'Czech koruna (czk)', id: 'currencyCZK', fn: currency('czk') },
-        { name: 'Swiss franc (CHF)', id: 'currencyCHF', fn: currency('CHF') },
-        { name: 'Polish Złoty (PLN)', id: 'currencyPLN', fn: currency('PLN') },
-        { name: 'Bitcoin (฿)', id: 'currencyBTC', fn: currency('฿') },
-      ],
-    },
-    {
-      name: 'data (IEC)',
-      formats: [
-        { name: 'bits', id: 'bits', fn: binarySIPrefix('b') },
-        { name: 'bytes', id: 'bytes', fn: binarySIPrefix('B') },
-        { name: 'kibibytes', id: 'kbytes', fn: binarySIPrefix('B', 1) },
-        { name: 'mebibytes', id: 'mbytes', fn: binarySIPrefix('B', 2) },
-        { name: 'gibibytes', id: 'gbytes', fn: binarySIPrefix('B', 3) },
-      ],
-    },
-    {
-      name: 'data (Metric)',
-      formats: [
-        { name: 'bits', id: 'decbits', fn: decimalSIPrefix('d') },
-        { name: 'bytes', id: 'decbytes', fn: decimalSIPrefix('B') },
-        { name: 'kilobytes', id: 'deckbytes', fn: decimalSIPrefix('B', 1) },
-        { name: 'megabytes', id: 'decmbytes', fn: decimalSIPrefix('B', 2) },
-        { name: 'gigabytes', id: 'decgbytes', fn: decimalSIPrefix('B', 3) },
-      ],
-    },
-    {
-      name: 'data rate',
-      formats: [
-        { name: 'packets/sec', id: 'pps', fn: decimalSIPrefix('pps') },
-        { name: 'bits/sec', id: 'bps', fn: decimalSIPrefix('bps') },
-        { name: 'bytes/sec', id: 'Bps', fn: decimalSIPrefix('B/s') },
-        { name: 'kilobytes/sec', id: 'KBs', fn: decimalSIPrefix('Bs', 1) },
-        { name: 'kilobits/sec', id: 'Kbits', fn: decimalSIPrefix('bps', 1) },
-        { name: 'megabytes/sec', id: 'MBs', fn: decimalSIPrefix('Bs', 2) },
-        { name: 'megabits/sec', id: 'Mbits', fn: decimalSIPrefix('bps', 2) },
-        { name: 'gigabytes/sec', id: 'GBs', fn: decimalSIPrefix('Bs', 3) },
-        { name: 'gigabits/sec', id: 'Gbits', fn: decimalSIPrefix('bps', 3) },
-      ],
-    },
-    {
-      name: 'date & time',
-      formats: [
-        { name: 'YYYY-MM-DD HH:mm:ss', id: 'dateTimeAsIso', fn: dateTimeAsIso },
-        { name: 'DD/MM/YYYY h:mm:ss a', id: 'dateTimeAsUS', fn: dateTimeAsUS },
-        { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
-      ],
-    },
-    {
-      name: 'energy',
-      formats: [
-        { name: 'Watt (W)', id: 'watt', fn: decimalSIPrefix('W') },
-        { name: 'Kilowatt (kW)', id: 'kwatt', fn: decimalSIPrefix('W', 1) },
-        { name: 'Milliwatt (mW)', id: 'mwatt', fn: decimalSIPrefix('W', -1) },
-        { name: 'Watt per square meter (W/m²)', id: 'Wm2', fn: toFixedUnit('W/m²') },
-        { name: 'Volt-ampere (VA)', id: 'voltamp', fn: decimalSIPrefix('VA') },
-        { name: 'Kilovolt-ampere (kVA)', id: 'kvoltamp', fn: decimalSIPrefix('VA', 1) },
-        { name: 'Volt-ampere reactive (var)', id: 'voltampreact', fn: decimalSIPrefix('var') },
-        { name: 'Kilovolt-ampere reactive (kvar)', id: 'kvoltampreact', fn: decimalSIPrefix('var', 1) },
-        { name: 'Watt-hour (Wh)', id: 'watth', fn: decimalSIPrefix('Wh') },
-        { name: 'Kilowatt-hour (kWh)', id: 'kwatth', fn: decimalSIPrefix('Wh', 1) },
-        { name: 'Kilowatt-min (kWm)', id: 'kwattm', fn: decimalSIPrefix('W/Min', 1) },
-        { name: 'Joule (J)', id: 'joule', fn: decimalSIPrefix('J') },
-        { name: 'Electron volt (eV)', id: 'ev', fn: decimalSIPrefix('eV') },
-        { name: 'Ampere (A)', id: 'amp', fn: decimalSIPrefix('A') },
-        { name: 'Kiloampere (kA)', id: 'kamp', fn: decimalSIPrefix('A', 1) },
-        { name: 'Milliampere (mA)', id: 'mamp', fn: decimalSIPrefix('A', -1) },
-        { name: 'Volt (V)', id: 'volt', fn: decimalSIPrefix('V') },
-        { name: 'Kilovolt (kV)', id: 'kvolt', fn: decimalSIPrefix('V', 1) },
-        { name: 'Millivolt (mV)', id: 'mvolt', fn: decimalSIPrefix('V', -1) },
-        { name: 'Decibel-milliwatt (dBm)', id: 'dBm', fn: decimalSIPrefix('dBm') },
-        { name: 'Ohm (Ω)', id: 'ohm', fn: decimalSIPrefix('Ω') },
-        { name: 'Lumens (Lm)', id: 'lumens', fn: decimalSIPrefix('Lm') },
-      ],
-    },
-    {
-      name: 'flow',
-      formats: [
-        { name: 'Gallons/min (gpm)', id: 'flowgpm', fn: toFixedUnit('gpm') },
-        { name: 'Cubic meters/sec (cms)', id: 'flowcms', fn: toFixedUnit('cms') },
-        { name: 'Cubic feet/sec (cfs)', id: 'flowcfs', fn: toFixedUnit('cfs') },
-        { name: 'Cubic feet/min (cfm)', id: 'flowcfm', fn: toFixedUnit('cfm') },
-        { name: 'Litre/hour', id: 'litreh', fn: toFixedUnit('l/h') },
-        { name: 'Litre/min (l/min)', id: 'flowlpm', fn: toFixedUnit('l/min') },
-        { name: 'milliLitre/min (mL/min)', id: 'flowmlpm', fn: toFixedUnit('mL/min') },
-      ],
-    },
-    {
-      name: 'force',
-      formats: [
-        { name: 'Newton-meters (Nm)', id: 'forceNm', fn: decimalSIPrefix('Nm') },
-        { name: 'Kilonewton-meters (kNm)', id: 'forcekNm', fn: decimalSIPrefix('Nm', 1) },
-        { name: 'Newtons (N)', id: 'forceN', fn: decimalSIPrefix('N') },
-        { name: 'Kilonewtons (kN)', id: 'forcekN', fn: decimalSIPrefix('N', 1) },
-      ],
-    },
-    {
-      name: 'hash rate',
-      formats: [
-        { name: 'hashes/sec', id: 'Hs', fn: decimalSIPrefix('H/s') },
-        { name: 'kilohashes/sec', id: 'KHs', fn: decimalSIPrefix('H/s', 1) },
-        { name: 'megahashes/sec', id: 'MHs', fn: decimalSIPrefix('H/s', 2) },
-        { name: 'gigahashes/sec', id: 'GHs', fn: decimalSIPrefix('H/s', 3) },
-        { name: 'terahashes/sec', id: 'THs', fn: decimalSIPrefix('H/s', 4) },
-        { name: 'petahashes/sec', id: 'PHs', fn: decimalSIPrefix('H/s', 5) },
-        { name: 'exahashes/sec', id: 'EHs', fn: decimalSIPrefix('H/s', 6) },
-      ],
-    },
-    {
-      name: 'mass',
-      formats: [
-        { name: 'milligram (mg)', id: 'massmg', fn: decimalSIPrefix('g', -1) },
-        { name: 'gram (g)', id: 'massg', fn: decimalSIPrefix('g') },
-        { name: 'kilogram (kg)', id: 'masskg', fn: decimalSIPrefix('g', 1) },
-        { name: 'metric ton (t)', id: 'masst', fn: toFixedUnit('t') },
-      ],
-    },
-    {
-      name: 'length',
-      formats: [
-        { name: 'millimetre (mm)', id: 'lengthmm', fn: decimalSIPrefix('m', -1) },
-        { name: 'feet (ft)', id: 'lengthft', fn: toFixedUnit('ft') },
-        { name: 'meter (m)', id: 'lengthm', fn: decimalSIPrefix('m') },
-        { name: 'kilometer (km)', id: 'lengthkm', fn: decimalSIPrefix('m', 1) },
-        { name: 'mile (mi)', id: 'lengthmi', fn: toFixedUnit('mi') },
-      ],
-    },
-    {
-      name: 'pressure',
-      formats: [
-        { name: 'Millibars', id: 'pressurembar', fn: decimalSIPrefix('bar', -1) },
-        { name: 'Bars', id: 'pressurebar', fn: decimalSIPrefix('bar') },
-        { name: 'Kilobars', id: 'pressurekbar', fn: decimalSIPrefix('bar', 1) },
-        { name: 'Hectopascals', id: 'pressurehpa', fn: toFixedUnit('hPa') },
-        { name: 'Kilopascals', id: 'pressurekpa', fn: toFixedUnit('kPa') },
-        { name: 'Inches of mercury', id: 'pressurehg', fn: toFixedUnit('"Hg') },
-        { name: 'PSI', id: 'pressurepsi', fn: scaledUnits(1000, ['psi', 'ksi', 'Mpsi']) },
-      ],
-    },
-    {
-      name: 'radiation',
-      formats: [
-        { name: 'Becquerel (Bq)', id: 'radbq', fn: decimalSIPrefix('Bq') },
-        { name: 'curie (Ci)', id: 'radci', fn: decimalSIPrefix('Ci') },
-        { name: 'Gray (Gy)', id: 'radgy', fn: decimalSIPrefix('Gy') },
-        { name: 'rad', id: 'radrad', fn: decimalSIPrefix('rad') },
-        { name: 'Sievert (Sv)', id: 'radsv', fn: decimalSIPrefix('Sv') },
-        { name: 'rem', id: 'radrem', fn: decimalSIPrefix('rem') },
-        { name: 'Exposure (C/kg)', id: 'radexpckg', fn: decimalSIPrefix('C/kg') },
-        { name: 'roentgen (R)', id: 'radr', fn: decimalSIPrefix('R') },
-        { name: 'Sievert/hour (Sv/h)', id: 'radsvh', fn: decimalSIPrefix('Sv/h') },
-      ],
-    },
-    {
-      name: 'temperature',
-      formats: [
-        { name: 'Celsius (°C)', id: 'celsius', fn: toFixedUnit('°C') },
-        { name: 'Farenheit (°F)', id: 'farenheit', fn: toFixedUnit('°F') },
-        { name: 'Kelvin (K)', id: 'kelvin', fn: toFixedUnit('K') },
-      ],
-    },
-    {
-      name: 'time',
-      formats: [
-        { name: 'Hertz (1/s)', id: 'hertz', fn: decimalSIPrefix('Hz') },
-        { name: 'nanoseconds (ns)', id: 'ns', fn: toNanoSeconds },
-        { name: 'microseconds (µs)', id: 'µs', fn: toMicroSeconds },
-        { name: 'milliseconds (ms)', id: 'ms', fn: toMilliSeconds },
-        { name: 'seconds (s)', id: 's', fn: toSeconds },
-        { name: 'minutes (m)', id: 'm', fn: toMinutes },
-        { name: 'hours (h)', id: 'h', fn: toHours },
-        { name: 'days (d)', id: 'd', fn: toDays },
-        { name: 'duration (ms)', id: 'dtdurationms', fn: toDurationInMilliseconds },
-        { name: 'duration (s)', id: 'dtdurations', fn: toDurationInSeconds },
-        { name: 'duration (hh:mm:ss)', id: 'dthms', fn: toDurationInHoursMinutesSeconds },
-        { name: 'Timeticks (s/100)', id: 'timeticks', fn: toTimeTicks },
-        { name: 'clock (ms)', id: 'clockms', fn: toClockMilliseconds },
-        { name: 'clock (s)', id: 'clocks', fn: toClockSeconds },
-      ],
-    },
-    {
-      name: 'throughput',
-      formats: [
-        { name: 'ops/sec (ops)', id: 'ops', fn: decimalSIPrefix('ops') },
-        { name: 'requests/sec (rps)', id: 'reqps', fn: decimalSIPrefix('reqps') },
-        { name: 'reads/sec (rps)', id: 'rps', fn: decimalSIPrefix('rps') },
-        { name: 'writes/sec (wps)', id: 'wps', fn: decimalSIPrefix('wps') },
-        { name: 'I/O ops/sec (iops)', id: 'iops', fn: decimalSIPrefix('iops') },
-        { name: 'ops/min (opm)', id: 'opm', fn: decimalSIPrefix('opm') },
-        { name: 'reads/min (rpm)', id: 'rpm', fn: decimalSIPrefix('rpm') },
-        { name: 'writes/min (wpm)', id: 'wpm', fn: decimalSIPrefix('wpm') },
-      ],
-    },
-    {
-      name: 'volume',
-      formats: [
-        { name: 'millilitre (mL)', id: 'mlitre', fn: decimalSIPrefix('L', -1) },
-        { name: 'litre (L)', id: 'litre', fn: decimalSIPrefix('L') },
-        { name: 'cubic metre', id: 'm3', fn: toFixedUnit('m³') },
-        { name: 'Normal cubic metre', id: 'Nm3', fn: toFixedUnit('Nm³') },
-        { name: 'cubic decimetre', id: 'dm3', fn: toFixedUnit('dm³') },
-        { name: 'gallons', id: 'gallons', fn: toFixedUnit('gal') },
-      ],
-    },
-  ];
-
-  for (const cat of categories) {
-    for (const format of cat.formats) {
-      index[format.id] = format.fn;
-    }
-  }
-
-  hasBuildIndex = true;
-}
-
-export function getValueFormat(id: string): ValueFormatter {
-  if (!hasBuildIndex) {
-    buildFormats();
-  }
-
-  return index[id];
-}
-
-export function getValueFormatterIndex(): ValueFormatterIndex {
-  if (!hasBuildIndex) {
-    buildFormats();
-  }
-
-  return index;
-}
-
-export function getUnitFormats() {
-  if (!hasBuildIndex) {
-    buildFormats();
-  }
-
-  return categories.map(cat => {
-    return {
-      text: cat.name,
-      submenu: cat.formats.map(format => {
-        return {
-          text: format.name,
-          id: format.id,
-        };
-      }),
-    };
-  });
-}

From df83c4650d7db9a97a177033f78ecb86f195da15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 8 Jan 2019 15:54:12 +0100
Subject: [PATCH 201/352] minor code refactor

---
 public/app/features/dashboard/dashgrid/QueriesTab.tsx   | 8 ++++++--
 public/app/features/dashboard/dashgrid/QueryOptions.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 741e2cd9ac1..77ab64b1dba 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -50,17 +50,21 @@ export class QueriesTab extends PureComponent<Props, State> {
 
   constructor(props) {
     super(props);
-    const { panel } = props;
 
     this.state = {
-      currentDS: this.datasources.find(datasource => datasource.value === panel.datasource),
       isLoadingHelp: false,
+      currentDS: this.findCurrentDataSource(),
       helpContent: null,
       isPickerOpen: false,
       isAddingMixed: false,
     };
   }
 
+  findCurrentDataSource(): DataSourceSelectItem {
+    const { panel } = this.props;
+    return this.datasources.find(datasource => datasource.value === panel.datasource) || this.datasources[0];
+  }
+
   getAngularQueryComponentScope(): AngularQueryComponentScope {
     const { panel, dashboard } = this.props;
 
diff --git a/public/app/features/dashboard/dashgrid/QueryOptions.tsx b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
index df911800c20..fad70d92990 100644
--- a/public/app/features/dashboard/dashgrid/QueryOptions.tsx
+++ b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
@@ -94,7 +94,7 @@ export class QueryOptions extends PureComponent<Props, State> {
 
   renderOptions() {
     const { datasource, panel } = this.props;
-    const queryOptions = datasource && datasource.meta ? datasource.meta.queryOptions : undefined;
+    const { queryOptions } = datasource.meta;
 
     if (!queryOptions) {
       return null;

From 38dcbeb2fd01eca4e0d4612e1a5d547021cc0fd7 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 8 Jan 2019 15:56:01 +0100
Subject: [PATCH 202/352] removing duplicated things

---
 .../src/utils/ValueFormats/categories.ts      |  18 +-
 .../ValueFormats/symbolFormatters.test.ts     |   4 -
 .../src/utils/ValueFormats/valueFormats.ts    |  12 +
 public/app/core/utils/kbn.ts                  | 936 +-----------------
 4 files changed, 23 insertions(+), 947 deletions(-)

diff --git a/packages/grafana-ui/src/utils/ValueFormats/categories.ts b/packages/grafana-ui/src/utils/ValueFormats/categories.ts
index 15ea8d15468..98739343beb 100644
--- a/packages/grafana-ui/src/utils/ValueFormats/categories.ts
+++ b/packages/grafana-ui/src/utils/ValueFormats/categories.ts
@@ -1,4 +1,4 @@
-import { locale, scaledUnits, toFixed, toFixedUnit, ValueFormatCategory } from './valueFormats';
+import { locale, scaledUnits, simpleCountUnit, toFixed, toFixedUnit, ValueFormatCategory } from './valueFormats';
 import {
   dateTimeAsIso,
   dateTimeAsUS,
@@ -289,14 +289,14 @@ export const getCategories = (): ValueFormatCategory[] => [
   {
     name: 'throughput',
     formats: [
-      { name: 'ops/sec (ops)', id: 'ops', fn: decimalSIPrefix('ops') },
-      { name: 'requests/sec (rps)', id: 'reqps', fn: decimalSIPrefix('reqps') },
-      { name: 'reads/sec (rps)', id: 'rps', fn: decimalSIPrefix('rps') },
-      { name: 'writes/sec (wps)', id: 'wps', fn: decimalSIPrefix('wps') },
-      { name: 'I/O ops/sec (iops)', id: 'iops', fn: decimalSIPrefix('iops') },
-      { name: 'ops/min (opm)', id: 'opm', fn: decimalSIPrefix('opm') },
-      { name: 'reads/min (rpm)', id: 'rpm', fn: decimalSIPrefix('rpm') },
-      { name: 'writes/min (wpm)', id: 'wpm', fn: decimalSIPrefix('wpm') },
+      { name: 'ops/sec (ops)', id: 'ops', fn: simpleCountUnit('ops') },
+      { name: 'requests/sec (rps)', id: 'reqps', fn: simpleCountUnit('reqps') },
+      { name: 'reads/sec (rps)', id: 'rps', fn: simpleCountUnit('rps') },
+      { name: 'writes/sec (wps)', id: 'wps', fn: simpleCountUnit('wps') },
+      { name: 'I/O ops/sec (iops)', id: 'iops', fn: simpleCountUnit('iops') },
+      { name: 'ops/min (opm)', id: 'opm', fn: simpleCountUnit('opm') },
+      { name: 'reads/min (rpm)', id: 'rpm', fn: simpleCountUnit('rpm') },
+      { name: 'writes/min (wpm)', id: 'wpm', fn: simpleCountUnit('wpm') },
     ],
   },
   {
diff --git a/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts b/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
index 6b91a49c0dc..49278711608 100644
--- a/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
+++ b/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
@@ -4,8 +4,4 @@ describe('Currency', () => {
   it('should format as usd', () => {
     expect(currency('$')(1532.82, 1, -1)).toEqual('$1.53K');
   });
-
-  it('should format as usd', () => {
-    expect(currency('kr')(1532.82, 1, -1)).toEqual('1.53K kr');
-  });
 });
diff --git a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts b/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
index 152f242b1a8..e70a4d186c7 100644
--- a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
@@ -107,6 +107,18 @@ export function locale(value: number, decimals: number) {
   return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
 }
 
+export function simpleCountUnit(symbol: string) {
+  const units = ['', 'K', 'M', 'B', 'T'];
+  const scaler = scaledUnits(1000, units);
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    const scaled = scaler(size, decimals, scaledDecimals);
+    return scaled + ' ' + symbol;
+  };
+}
+
 function buildFormats() {
   categories = getCategories();
 
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index 2fae6300d16..20088c60f66 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import moment from 'moment';
 import { getValueFormat, getValueFormatterIndex  } from '@grafana/ui';
+import { getUnitFormats } from '@grafana/ui/src';
 
 const kbn: any = {};
 
@@ -281,942 +281,10 @@ kbn.roundValue = (num, decimals) => {
   return Math.round(parseFloat(formatted)) / n;
 };
 
-///// FORMAT FUNCTION CONSTRUCTORS /////
-
-kbn.formatBuilders = {};
-
-// Formatter which always appends a fixed unit string to the value. No
-// scaling of the value is performed.
-kbn.formatBuilders.fixedUnit = unit => {
-  return (size, decimals) => {
-    if (size === null) {
-      return '';
-    }
-    return kbn.toFixed(size, decimals) + ' ' + unit;
-  };
-};
-
-// Formatter which scales the unit string geometrically according to the given
-// numeric factor. Repeatedly scales the value down by the factor until it is
-// less than the factor in magnitude, or the end of the array is reached.
-kbn.formatBuilders.scaledUnits = (factor, extArray) => {
-  return (size, decimals, scaledDecimals) => {
-    if (size === null) {
-      return '';
-    }
-
-    let steps = 0;
-    const limit = extArray.length;
-
-    while (Math.abs(size) >= factor) {
-      steps++;
-      size /= factor;
-
-      if (steps >= limit) {
-        return 'NA';
-      }
-    }
-
-    if (steps > 0 && scaledDecimals !== null) {
-      decimals = scaledDecimals + 3 * steps;
-    }
-
-    return kbn.toFixed(size, decimals) + extArray[steps];
-  };
-};
-
-// Extension of the scaledUnits builder which uses SI decimal prefixes. If an
-// offset is given, it adjusts the starting units at the given prefix; a value
-// of 0 starts at no scale; -3 drops to nano, +2 starts at mega, etc.
-kbn.formatBuilders.decimalSIPrefix = (unit, offset) => {
-  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
-  prefixes = prefixes.slice(3 + (offset || 0));
-  const units = prefixes.map(p => {
-    return ' ' + p + unit;
-  });
-  return kbn.formatBuilders.scaledUnits(1000, units);
-};
-
-// Extension of the scaledUnits builder which uses SI binary prefixes. If
-// offset is given, it starts the units at the given prefix; otherwise, the
-// offset defaults to zero and the initial unit is not prefixed.
-kbn.formatBuilders.binarySIPrefix = (unit, offset) => {
-  const prefixes = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'].slice(offset);
-  const units = prefixes.map(p => {
-    return ' ' + p + unit;
-  });
-  return kbn.formatBuilders.scaledUnits(1024, units);
-};
-
-// Currency formatter for prefixing a symbol onto a number. Supports scaling
-// up to the trillions.
-kbn.formatBuilders.currency = symbol => {
-  const units = ['', 'K', 'M', 'B', 'T'];
-  const scaler = kbn.formatBuilders.scaledUnits(1000, units);
-  return (size, decimals, scaledDecimals) => {
-    if (size === null) {
-      return '';
-    }
-    const scaled = scaler(size, decimals, scaledDecimals);
-    return symbol + scaled;
-  };
-};
-
-kbn.formatBuilders.simpleCountUnit = symbol => {
-  const units = ['', 'K', 'M', 'B', 'T'];
-  const scaler = kbn.formatBuilders.scaledUnits(1000, units);
-  return (size, decimals, scaledDecimals) => {
-    if (size === null) {
-      return '';
-    }
-    const scaled = scaler(size, decimals, scaledDecimals);
-    return scaled + ' ' + symbol;
-  };
-};
-
-///// VALUE FORMATS /////
-
-// Dimensionless Units
-kbn.valueFormats.none = kbn.toFixed;
-kbn.valueFormats.short = kbn.formatBuilders.scaledUnits(1000, [
-  '',
-  ' K',
-  ' Mil',
-  ' Bil',
-  ' Tri',
-  ' Quadr',
-  ' Quint',
-  ' Sext',
-  ' Sept',
-]);
-kbn.valueFormats.dB = kbn.formatBuilders.fixedUnit('dB');
-
-kbn.valueFormats.percent = (size, decimals) => {
-  if (size === null) {
-    return '';
-  }
-  return kbn.toFixed(size, decimals) + '%';
-};
-
-kbn.valueFormats.percentunit = (size, decimals) => {
-  if (size === null) {
-    return '';
-  }
-  return kbn.toFixed(100 * size, decimals) + '%';
-};
-
-/* Formats the value to hex. Uses float if specified decimals are not 0.
- * There are two submenu
- * , one with 0x, and one without */
-
-kbn.valueFormats.hex = (value, decimals) => {
-  if (value == null) {
-    return '';
-  }
-  return parseFloat(kbn.toFixed(value, decimals))
-    .toString(16)
-    .toUpperCase();
-};
-
-kbn.valueFormats.hex0x = (value, decimals) => {
-  if (value == null) {
-    return '';
-  }
-  const hexString = kbn.valueFormats.hex(value, decimals);
-  if (hexString.substring(0, 1) === '-') {
-    return '-0x' + hexString.substring(1);
-  }
-  return '0x' + hexString;
-};
-
-kbn.valueFormats.sci = (value, decimals) => {
-  if (value == null) {
-    return '';
-  }
-  return value.toExponential(decimals);
-};
-
-kbn.valueFormats.locale = (value, decimals) => {
-  if (value == null) {
-    return '';
-  }
-  return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
-};
-
-// Currencies
-kbn.valueFormats.currencyUSD = kbn.formatBuilders.currency('$');
-kbn.valueFormats.currencyGBP = kbn.formatBuilders.currency('£');
-kbn.valueFormats.currencyEUR = kbn.formatBuilders.currency('€');
-kbn.valueFormats.currencyJPY = kbn.formatBuilders.currency('¥');
-kbn.valueFormats.currencyRUB = kbn.formatBuilders.currency('₽');
-kbn.valueFormats.currencyUAH = kbn.formatBuilders.currency('₴');
-kbn.valueFormats.currencyBRL = kbn.formatBuilders.currency('R$');
-kbn.valueFormats.currencyDKK = kbn.formatBuilders.currency('kr');
-kbn.valueFormats.currencyISK = kbn.formatBuilders.currency('kr');
-kbn.valueFormats.currencyNOK = kbn.formatBuilders.currency('kr');
-kbn.valueFormats.currencySEK = kbn.formatBuilders.currency('kr');
-kbn.valueFormats.currencyCZK = kbn.formatBuilders.currency('czk');
-kbn.valueFormats.currencyCHF = kbn.formatBuilders.currency('CHF');
-kbn.valueFormats.currencyPLN = kbn.formatBuilders.currency('zł');
-kbn.valueFormats.currencyBTC = kbn.formatBuilders.currency('฿');
-
-// Data (Binary)
-kbn.valueFormats.bits = kbn.formatBuilders.binarySIPrefix('b');
-kbn.valueFormats.bytes = kbn.formatBuilders.binarySIPrefix('B');
-kbn.valueFormats.kbytes = kbn.formatBuilders.binarySIPrefix('B', 1);
-kbn.valueFormats.mbytes = kbn.formatBuilders.binarySIPrefix('B', 2);
-kbn.valueFormats.gbytes = kbn.formatBuilders.binarySIPrefix('B', 3);
-
-// Data (Decimal)
-kbn.valueFormats.decbits = kbn.formatBuilders.decimalSIPrefix('b');
-kbn.valueFormats.decbytes = kbn.formatBuilders.decimalSIPrefix('B');
-kbn.valueFormats.deckbytes = kbn.formatBuilders.decimalSIPrefix('B', 1);
-kbn.valueFormats.decmbytes = kbn.formatBuilders.decimalSIPrefix('B', 2);
-kbn.valueFormats.decgbytes = kbn.formatBuilders.decimalSIPrefix('B', 3);
-
-// Data Rate
-kbn.valueFormats.pps = kbn.formatBuilders.decimalSIPrefix('pps');
-kbn.valueFormats.bps = kbn.formatBuilders.decimalSIPrefix('bps');
-kbn.valueFormats.Bps = kbn.formatBuilders.decimalSIPrefix('B/s');
-kbn.valueFormats.KBs = kbn.formatBuilders.decimalSIPrefix('Bs', 1);
-kbn.valueFormats.Kbits = kbn.formatBuilders.decimalSIPrefix('bps', 1);
-kbn.valueFormats.MBs = kbn.formatBuilders.decimalSIPrefix('Bs', 2);
-kbn.valueFormats.Mbits = kbn.formatBuilders.decimalSIPrefix('bps', 2);
-kbn.valueFormats.GBs = kbn.formatBuilders.decimalSIPrefix('Bs', 3);
-kbn.valueFormats.Gbits = kbn.formatBuilders.decimalSIPrefix('bps', 3);
-
-// Floating Point Operations per Second
-kbn.valueFormats.flops = kbn.formatBuilders.decimalSIPrefix('FLOP/s');
-kbn.valueFormats.mflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 2);
-kbn.valueFormats.gflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 3);
-kbn.valueFormats.tflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 4);
-kbn.valueFormats.pflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 5);
-kbn.valueFormats.eflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 6);
-
-// Hash Rate
-kbn.valueFormats.Hs = kbn.formatBuilders.decimalSIPrefix('H/s');
-kbn.valueFormats.KHs = kbn.formatBuilders.decimalSIPrefix('H/s', 1);
-kbn.valueFormats.MHs = kbn.formatBuilders.decimalSIPrefix('H/s', 2);
-kbn.valueFormats.GHs = kbn.formatBuilders.decimalSIPrefix('H/s', 3);
-kbn.valueFormats.THs = kbn.formatBuilders.decimalSIPrefix('H/s', 4);
-kbn.valueFormats.PHs = kbn.formatBuilders.decimalSIPrefix('H/s', 5);
-kbn.valueFormats.EHs = kbn.formatBuilders.decimalSIPrefix('H/s', 6);
-
-// Throughput
-kbn.valueFormats.ops = kbn.formatBuilders.simpleCountUnit('ops');
-kbn.valueFormats.reqps = kbn.formatBuilders.simpleCountUnit('reqps');
-kbn.valueFormats.rps = kbn.formatBuilders.simpleCountUnit('rps');
-kbn.valueFormats.wps = kbn.formatBuilders.simpleCountUnit('wps');
-kbn.valueFormats.iops = kbn.formatBuilders.simpleCountUnit('iops');
-kbn.valueFormats.opm = kbn.formatBuilders.simpleCountUnit('opm');
-kbn.valueFormats.rpm = kbn.formatBuilders.simpleCountUnit('rpm');
-kbn.valueFormats.wpm = kbn.formatBuilders.simpleCountUnit('wpm');
-
-// Energy
-kbn.valueFormats.watt = kbn.formatBuilders.decimalSIPrefix('W');
-kbn.valueFormats.kwatt = kbn.formatBuilders.decimalSIPrefix('W', 1);
-kbn.valueFormats.mwatt = kbn.formatBuilders.decimalSIPrefix('W', -1);
-kbn.valueFormats.kwattm = kbn.formatBuilders.decimalSIPrefix('W/Min', 1);
-kbn.valueFormats.Wm2 = kbn.formatBuilders.fixedUnit('W/m²');
-kbn.valueFormats.voltamp = kbn.formatBuilders.decimalSIPrefix('VA');
-kbn.valueFormats.kvoltamp = kbn.formatBuilders.decimalSIPrefix('VA', 1);
-kbn.valueFormats.voltampreact = kbn.formatBuilders.decimalSIPrefix('var');
-kbn.valueFormats.kvoltampreact = kbn.formatBuilders.decimalSIPrefix('var', 1);
-kbn.valueFormats.watth = kbn.formatBuilders.decimalSIPrefix('Wh');
-kbn.valueFormats.kwatth = kbn.formatBuilders.decimalSIPrefix('Wh', 1);
-kbn.valueFormats.joule = kbn.formatBuilders.decimalSIPrefix('J');
-kbn.valueFormats.ev = kbn.formatBuilders.decimalSIPrefix('eV');
-kbn.valueFormats.amp = kbn.formatBuilders.decimalSIPrefix('A');
-kbn.valueFormats.kamp = kbn.formatBuilders.decimalSIPrefix('A', 1);
-kbn.valueFormats.mamp = kbn.formatBuilders.decimalSIPrefix('A', -1);
-kbn.valueFormats.volt = kbn.formatBuilders.decimalSIPrefix('V');
-kbn.valueFormats.kvolt = kbn.formatBuilders.decimalSIPrefix('V', 1);
-kbn.valueFormats.mvolt = kbn.formatBuilders.decimalSIPrefix('V', -1);
-kbn.valueFormats.dBm = kbn.formatBuilders.decimalSIPrefix('dBm');
-kbn.valueFormats.ohm = kbn.formatBuilders.decimalSIPrefix('Ω');
-kbn.valueFormats.lumens = kbn.formatBuilders.decimalSIPrefix('Lm');
-
-// Temperature
-kbn.valueFormats.celsius = kbn.formatBuilders.fixedUnit('°C');
-kbn.valueFormats.farenheit = kbn.formatBuilders.fixedUnit('°F');
-kbn.valueFormats.kelvin = kbn.formatBuilders.fixedUnit('K');
-kbn.valueFormats.humidity = kbn.formatBuilders.fixedUnit('%H');
-
-// Pressure
-kbn.valueFormats.pressurebar = kbn.formatBuilders.decimalSIPrefix('bar');
-kbn.valueFormats.pressurembar = kbn.formatBuilders.decimalSIPrefix('bar', -1);
-kbn.valueFormats.pressurekbar = kbn.formatBuilders.decimalSIPrefix('bar', 1);
-kbn.valueFormats.pressurehpa = kbn.formatBuilders.fixedUnit('hPa');
-kbn.valueFormats.pressurekpa = kbn.formatBuilders.fixedUnit('kPa');
-kbn.valueFormats.pressurehg = kbn.formatBuilders.fixedUnit('"Hg');
-kbn.valueFormats.pressurepsi = kbn.formatBuilders.scaledUnits(1000, [' psi', ' ksi', ' Mpsi']);
-
-// Force
-kbn.valueFormats.forceNm = kbn.formatBuilders.decimalSIPrefix('Nm');
-kbn.valueFormats.forcekNm = kbn.formatBuilders.decimalSIPrefix('Nm', 1);
-kbn.valueFormats.forceN = kbn.formatBuilders.decimalSIPrefix('N');
-kbn.valueFormats.forcekN = kbn.formatBuilders.decimalSIPrefix('N', 1);
-
-// Length
-kbn.valueFormats.lengthm = kbn.formatBuilders.decimalSIPrefix('m');
-kbn.valueFormats.lengthmm = kbn.formatBuilders.decimalSIPrefix('m', -1);
-kbn.valueFormats.lengthkm = kbn.formatBuilders.decimalSIPrefix('m', 1);
-kbn.valueFormats.lengthmi = kbn.formatBuilders.fixedUnit('mi');
-kbn.valueFormats.lengthft = kbn.formatBuilders.fixedUnit('ft');
-
-// Area
-kbn.valueFormats.areaM2 = kbn.formatBuilders.fixedUnit('m²');
-kbn.valueFormats.areaF2 = kbn.formatBuilders.fixedUnit('ft²');
-kbn.valueFormats.areaMI2 = kbn.formatBuilders.fixedUnit('mi²');
-
-// Mass
-kbn.valueFormats.massmg = kbn.formatBuilders.decimalSIPrefix('g', -1);
-kbn.valueFormats.massg = kbn.formatBuilders.decimalSIPrefix('g');
-kbn.valueFormats.masskg = kbn.formatBuilders.decimalSIPrefix('g', 1);
-kbn.valueFormats.masst = kbn.formatBuilders.fixedUnit('t');
-
-// Velocity
-kbn.valueFormats.velocityms = kbn.formatBuilders.fixedUnit('m/s');
-kbn.valueFormats.velocitykmh = kbn.formatBuilders.fixedUnit('km/h');
-kbn.valueFormats.velocitymph = kbn.formatBuilders.fixedUnit('mph');
-kbn.valueFormats.velocityknot = kbn.formatBuilders.fixedUnit('kn');
-
-// Acceleration
-kbn.valueFormats.accMS2 = kbn.formatBuilders.fixedUnit('m/sec²');
-kbn.valueFormats.accFS2 = kbn.formatBuilders.fixedUnit('f/sec²');
-kbn.valueFormats.accG = kbn.formatBuilders.fixedUnit('g');
-
-// Volume
-kbn.valueFormats.litre = kbn.formatBuilders.decimalSIPrefix('L');
-kbn.valueFormats.mlitre = kbn.formatBuilders.decimalSIPrefix('L', -1);
-kbn.valueFormats.m3 = kbn.formatBuilders.fixedUnit('m³');
-kbn.valueFormats.Nm3 = kbn.formatBuilders.fixedUnit('Nm³');
-kbn.valueFormats.dm3 = kbn.formatBuilders.fixedUnit('dm³');
-kbn.valueFormats.gallons = kbn.formatBuilders.fixedUnit('gal');
-
-// Flow
-kbn.valueFormats.flowgpm = kbn.formatBuilders.fixedUnit('gpm');
-kbn.valueFormats.flowcms = kbn.formatBuilders.fixedUnit('cms');
-kbn.valueFormats.flowcfs = kbn.formatBuilders.fixedUnit('cfs');
-kbn.valueFormats.flowcfm = kbn.formatBuilders.fixedUnit('cfm');
-kbn.valueFormats.litreh = kbn.formatBuilders.fixedUnit('l/h');
-kbn.valueFormats.flowlpm = kbn.formatBuilders.fixedUnit('l/min');
-kbn.valueFormats.flowmlpm = kbn.formatBuilders.fixedUnit('mL/min');
-
-// Angle
-kbn.valueFormats.degree = kbn.formatBuilders.fixedUnit('°');
-kbn.valueFormats.radian = kbn.formatBuilders.fixedUnit('rad');
-kbn.valueFormats.grad = kbn.formatBuilders.fixedUnit('grad');
-
-// Radiation
-kbn.valueFormats.radbq = kbn.formatBuilders.decimalSIPrefix('Bq');
-kbn.valueFormats.radci = kbn.formatBuilders.decimalSIPrefix('Ci');
-kbn.valueFormats.radgy = kbn.formatBuilders.decimalSIPrefix('Gy');
-kbn.valueFormats.radrad = kbn.formatBuilders.decimalSIPrefix('rad');
-kbn.valueFormats.radsv = kbn.formatBuilders.decimalSIPrefix('Sv');
-kbn.valueFormats.radrem = kbn.formatBuilders.decimalSIPrefix('rem');
-kbn.valueFormats.radexpckg = kbn.formatBuilders.decimalSIPrefix('C/kg');
-kbn.valueFormats.radr = kbn.formatBuilders.decimalSIPrefix('R');
-kbn.valueFormats.radsvh = kbn.formatBuilders.decimalSIPrefix('Sv/h');
-
-// Concentration
-kbn.valueFormats.ppm = kbn.formatBuilders.fixedUnit('ppm');
-kbn.valueFormats.conppb = kbn.formatBuilders.fixedUnit('ppb');
-kbn.valueFormats.conngm3 = kbn.formatBuilders.fixedUnit('ng/m³');
-kbn.valueFormats.conngNm3 = kbn.formatBuilders.fixedUnit('ng/Nm³');
-kbn.valueFormats.conμgm3 = kbn.formatBuilders.fixedUnit('μg/m³');
-kbn.valueFormats.conμgNm3 = kbn.formatBuilders.fixedUnit('μg/Nm³');
-kbn.valueFormats.conmgm3 = kbn.formatBuilders.fixedUnit('mg/m³');
-kbn.valueFormats.conmgNm3 = kbn.formatBuilders.fixedUnit('mg/Nm³');
-kbn.valueFormats.congm3 = kbn.formatBuilders.fixedUnit('g/m³');
-kbn.valueFormats.congNm3 = kbn.formatBuilders.fixedUnit('g/Nm³');
-kbn.valueFormats.conmgdL = kbn.formatBuilders.fixedUnit('mg/dL');
-kbn.valueFormats.conmmolL = kbn.formatBuilders.fixedUnit('mmol/L');
-
-// Time
-kbn.valueFormats.hertz = kbn.formatBuilders.decimalSIPrefix('Hz');
-
-kbn.valueFormats.ms = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 1000) {
-    return kbn.toFixed(size, decimals) + ' ms';
-  } else if (Math.abs(size) < 60000) {
-    // Less than 1 min
-    return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' s');
-  } else if (Math.abs(size) < 3600000) {
-    // Less than 1 hour, divide in minutes
-    return kbn.toFixedScaled(size / 60000, decimals, scaledDecimals, 5, ' min');
-  } else if (Math.abs(size) < 86400000) {
-    // Less than one day, divide in hours
-    return kbn.toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, ' hour');
-  } else if (Math.abs(size) < 31536000000) {
-    // Less than one year, divide in days
-    return kbn.toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, ' day');
-  }
-
-  return kbn.toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, ' year');
-};
-
-kbn.valueFormats.s = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  // Less than 1 µs, divide in ns
-  if (Math.abs(size) < 0.000001) {
-    return kbn.toFixedScaled(size * 1e9, decimals, scaledDecimals - decimals, -9, ' ns');
-  }
-  // Less than 1 ms, divide in µs
-  if (Math.abs(size) < 0.001) {
-    return kbn.toFixedScaled(size * 1e6, decimals, scaledDecimals - decimals, -6, ' µs');
-  }
-  // Less than 1 second, divide in ms
-  if (Math.abs(size) < 1) {
-    return kbn.toFixedScaled(size * 1e3, decimals, scaledDecimals - decimals, -3, ' ms');
-  }
-
-  if (Math.abs(size) < 60) {
-    return kbn.toFixed(size, decimals) + ' s';
-  } else if (Math.abs(size) < 3600) {
-    // Less than 1 hour, divide in minutes
-    return kbn.toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min');
-  } else if (Math.abs(size) < 86400) {
-    // Less than one day, divide in hours
-    return kbn.toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour');
-  } else if (Math.abs(size) < 604800) {
-    // Less than one week, divide in days
-    return kbn.toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day');
-  } else if (Math.abs(size) < 31536000) {
-    // Less than one year, divide in week
-    return kbn.toFixedScaled(size / 604800, decimals, scaledDecimals, 6, ' week');
-  }
-
-  return kbn.toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, ' year');
-};
-
-kbn.valueFormats['µs'] = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 1000) {
-    return kbn.toFixed(size, decimals) + ' µs';
-  } else if (Math.abs(size) < 1000000) {
-    return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' ms');
-  } else {
-    return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' s');
-  }
-};
-
-kbn.valueFormats.ns = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 1000) {
-    return kbn.toFixed(size, decimals) + ' ns';
-  } else if (Math.abs(size) < 1000000) {
-    return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' µs');
-  } else if (Math.abs(size) < 1000000000) {
-    return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' ms');
-  } else if (Math.abs(size) < 60000000000) {
-    return kbn.toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, ' s');
-  } else {
-    return kbn.toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, ' min');
-  }
-};
-
-kbn.valueFormats.m = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 60) {
-    return kbn.toFixed(size, decimals) + ' min';
-  } else if (Math.abs(size) < 1440) {
-    return kbn.toFixedScaled(size / 60, decimals, scaledDecimals, 2, ' hour');
-  } else if (Math.abs(size) < 10080) {
-    return kbn.toFixedScaled(size / 1440, decimals, scaledDecimals, 3, ' day');
-  } else if (Math.abs(size) < 604800) {
-    return kbn.toFixedScaled(size / 10080, decimals, scaledDecimals, 4, ' week');
-  } else {
-    return kbn.toFixedScaled(size / 5.25948e5, decimals, scaledDecimals, 5, ' year');
-  }
-};
-
-kbn.valueFormats.h = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 24) {
-    return kbn.toFixed(size, decimals) + ' hour';
-  } else if (Math.abs(size) < 168) {
-    return kbn.toFixedScaled(size / 24, decimals, scaledDecimals, 2, ' day');
-  } else if (Math.abs(size) < 8760) {
-    return kbn.toFixedScaled(size / 168, decimals, scaledDecimals, 3, ' week');
-  } else {
-    return kbn.toFixedScaled(size / 8760, decimals, scaledDecimals, 4, ' year');
-  }
-};
-
-kbn.valueFormats.d = (size, decimals, scaledDecimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  if (Math.abs(size) < 7) {
-    return kbn.toFixed(size, decimals) + ' day';
-  } else if (Math.abs(size) < 365) {
-    return kbn.toFixedScaled(size / 7, decimals, scaledDecimals, 2, ' week');
-  } else {
-    return kbn.toFixedScaled(size / 365, decimals, scaledDecimals, 3, ' year');
-  }
-};
-
-kbn.toDuration = (size, decimals, timeScale) => {
-  if (size === null) {
-    return '';
-  }
-  if (size === 0) {
-    return '0 ' + timeScale + 's';
-  }
-  if (size < 0) {
-    return kbn.toDuration(-size, decimals, timeScale) + ' ago';
-  }
-
-  const units = [
-    { short: 'y', long: 'year' },
-    { short: 'M', long: 'month' },
-    { short: 'w', long: 'week' },
-    { short: 'd', long: 'day' },
-    { short: 'h', long: 'hour' },
-    { short: 'm', long: 'minute' },
-    { short: 's', long: 'second' },
-    { short: 'ms', long: 'millisecond' },
-  ];
-  // convert $size to milliseconds
-  // intervals_in_seconds uses seconds (duh), convert them to milliseconds here to minimize floating point errors
-  size *=
-    kbn.intervals_in_seconds[
-      units.find(e => {
-        return e.long === timeScale;
-      }).short
-    ] * 1000;
-
-  const strings = [];
-  // after first value >= 1 print only $decimals more
-  let decrementDecimals = false;
-  for (let i = 0; i < units.length && decimals >= 0; i++) {
-    const interval = kbn.intervals_in_seconds[units[i].short] * 1000;
-    const value = size / interval;
-    if (value >= 1 || decrementDecimals) {
-      decrementDecimals = true;
-      const floor = Math.floor(value);
-      const unit = units[i].long + (floor !== 1 ? 's' : '');
-      strings.push(floor + ' ' + unit);
-      size = size % interval;
-      decimals--;
-    }
-  }
-
-  return strings.join(', ');
-};
-
-kbn.toClock = (size, decimals) => {
-  if (size === null) {
-    return '';
-  }
-
-  // < 1 second
-  if (size < 1000) {
-    return moment.utc(size).format('SSS\\m\\s');
-  }
-
-  // < 1 minute
-  if (size < 60000) {
-    let format = 'ss\\s:SSS\\m\\s';
-    if (decimals === 0) {
-      format = 'ss\\s';
-    }
-    return moment.utc(size).format(format);
-  }
-
-  // < 1 hour
-  if (size < 3600000) {
-    let format = 'mm\\m:ss\\s:SSS\\m\\s';
-    if (decimals === 0) {
-      format = 'mm\\m';
-    } else if (decimals === 1) {
-      format = 'mm\\m:ss\\s';
-    }
-    return moment.utc(size).format(format);
-  }
-
-  let format = 'mm\\m:ss\\s:SSS\\m\\s';
-
-  const hours = `${('0' + Math.floor(moment.duration(size, 'milliseconds').asHours())).slice(-2)}h`;
-
-  if (decimals === 0) {
-    format = '';
-  } else if (decimals === 1) {
-    format = 'mm\\m';
-  } else if (decimals === 2) {
-    format = 'mm\\m:ss\\s';
-  }
-
-  return format ? `${hours}:${moment.utc(size).format(format)}` : hours;
-};
-
-kbn.valueFormats.dtdurationms = (size, decimals) => {
-  return kbn.toDuration(size, decimals, 'millisecond');
-};
-
-kbn.valueFormats.dtdurations = (size, decimals) => {
-  return kbn.toDuration(size, decimals, 'second');
-};
-
-kbn.valueFormats.dthms = (size, decimals) => {
-  return kbn.secondsToHhmmss(size);
-};
-
-kbn.valueFormats.timeticks = (size, decimals, scaledDecimals) => {
-  return kbn.valueFormats.s(size / 100, decimals, scaledDecimals);
-};
-
-kbn.valueFormats.clockms = (size, decimals) => {
-  return kbn.toClock(size, decimals);
-};
-
-kbn.valueFormats.clocks = (size, decimals) => {
-  return kbn.toClock(size * 1000, decimals);
-};
-
-kbn.valueFormats.dateTimeAsIso = (epoch, isUtc) => {
-  const time = isUtc ? moment.utc(epoch) : moment(epoch);
-
-  if (moment().isSame(epoch, 'day')) {
-    return time.format('HH:mm:ss');
-  }
-  return time.format('YYYY-MM-DD HH:mm:ss');
-};
-
-kbn.valueFormats.dateTimeAsUS = (epoch, isUtc) => {
-  const time = isUtc ? moment.utc(epoch) : moment(epoch);
-
-  if (moment().isSame(epoch, 'day')) {
-    return time.format('h:mm:ss a');
-  }
-  return time.format('MM/DD/YYYY h:mm:ss a');
-};
-
-kbn.valueFormats.dateTimeFromNow = (epoch, isUtc) => {
-  const time = isUtc ? moment.utc(epoch) : moment(epoch);
-  return time.fromNow();
-};
-
 ///// FORMAT MENU /////
 
 kbn.getUnitFormats = () => {
-  return [
-    {
-      text: 'none',
-      submenu: [
-        { text: 'none', value: 'none' },
-        { text: 'short', value: 'short' },
-        { text: 'percent (0-100)', value: 'percent' },
-        { text: 'percent (0.0-1.0)', value: 'percentunit' },
-        { text: 'Humidity (%H)', value: 'humidity' },
-        { text: 'decibel', value: 'dB' },
-        { text: 'hexadecimal (0x)', value: 'hex0x' },
-        { text: 'hexadecimal', value: 'hex' },
-        { text: 'scientific notation', value: 'sci' },
-        { text: 'locale format', value: 'locale' },
-      ],
-    },
-    {
-      text: 'currency',
-      submenu: [
-        { text: 'Dollars ($)', value: 'currencyUSD' },
-        { text: 'Pounds (£)', value: 'currencyGBP' },
-        { text: 'Euro (€)', value: 'currencyEUR' },
-        { text: 'Yen (¥)', value: 'currencyJPY' },
-        { text: 'Rubles (₽)', value: 'currencyRUB' },
-        { text: 'Hryvnias (₴)', value: 'currencyUAH' },
-        { text: 'Real (R$)', value: 'currencyBRL' },
-        { text: 'Danish Krone (kr)', value: 'currencyDKK' },
-        { text: 'Icelandic Króna (kr)', value: 'currencyISK' },
-        { text: 'Norwegian Krone (kr)', value: 'currencyNOK' },
-        { text: 'Swedish Krona (kr)', value: 'currencySEK' },
-        { text: 'Czech koruna (czk)', value: 'currencyCZK' },
-        { text: 'Swiss franc (CHF)', value: 'currencyCHF' },
-        { text: 'Polish Złoty (PLN)', value: 'currencyPLN' },
-        { text: 'Bitcoin (฿)', value: 'currencyBTC' },
-      ],
-    },
-    {
-      text: 'time',
-      submenu: [
-        { text: 'Hertz (1/s)', value: 'hertz' },
-        { text: 'nanoseconds (ns)', value: 'ns' },
-        { text: 'microseconds (µs)', value: 'µs' },
-        { text: 'milliseconds (ms)', value: 'ms' },
-        { text: 'seconds (s)', value: 's' },
-        { text: 'minutes (m)', value: 'm' },
-        { text: 'hours (h)', value: 'h' },
-        { text: 'days (d)', value: 'd' },
-        { text: 'duration (ms)', value: 'dtdurationms' },
-        { text: 'duration (s)', value: 'dtdurations' },
-        { text: 'duration (hh:mm:ss)', value: 'dthms' },
-        { text: 'Timeticks (s/100)', value: 'timeticks' },
-        { text: 'clock (ms)', value: 'clockms' },
-        { text: 'clock (s)', value: 'clocks' },
-      ],
-    },
-    {
-      text: 'date & time',
-      submenu: [
-        { text: 'YYYY-MM-DD HH:mm:ss', value: 'dateTimeAsIso' },
-        { text: 'DD/MM/YYYY h:mm:ss a', value: 'dateTimeAsUS' },
-        { text: 'From Now', value: 'dateTimeFromNow' },
-      ],
-    },
-    {
-      text: 'data (IEC)',
-      submenu: [
-        { text: 'bits', value: 'bits' },
-        { text: 'bytes', value: 'bytes' },
-        { text: 'kibibytes', value: 'kbytes' },
-        { text: 'mebibytes', value: 'mbytes' },
-        { text: 'gibibytes', value: 'gbytes' },
-      ],
-    },
-    {
-      text: 'data (Metric)',
-      submenu: [
-        { text: 'bits', value: 'decbits' },
-        { text: 'bytes', value: 'decbytes' },
-        { text: 'kilobytes', value: 'deckbytes' },
-        { text: 'megabytes', value: 'decmbytes' },
-        { text: 'gigabytes', value: 'decgbytes' },
-      ],
-    },
-    {
-      text: 'data rate',
-      submenu: [
-        { text: 'packets/sec', value: 'pps' },
-        { text: 'bits/sec', value: 'bps' },
-        { text: 'bytes/sec', value: 'Bps' },
-        { text: 'kilobits/sec', value: 'Kbits' },
-        { text: 'kilobytes/sec', value: 'KBs' },
-        { text: 'megabits/sec', value: 'Mbits' },
-        { text: 'megabytes/sec', value: 'MBs' },
-        { text: 'gigabytes/sec', value: 'GBs' },
-        { text: 'gigabits/sec', value: 'Gbits' },
-      ],
-    },
-    {
-      text: 'hash rate',
-      submenu: [
-        { text: 'hashes/sec', value: 'Hs' },
-        { text: 'kilohashes/sec', value: 'KHs' },
-        { text: 'megahashes/sec', value: 'MHs' },
-        { text: 'gigahashes/sec', value: 'GHs' },
-        { text: 'terahashes/sec', value: 'THs' },
-        { text: 'petahashes/sec', value: 'PHs' },
-        { text: 'exahashes/sec', value: 'EHs' },
-      ],
-    },
-    {
-      text: 'computation throughput',
-      submenu: [
-        { text: 'FLOP/s', value: 'flops' },
-        { text: 'MFLOP/s', value: 'mflops' },
-        { text: 'GFLOP/s', value: 'gflops' },
-        { text: 'TFLOP/s', value: 'tflops' },
-        { text: 'PFLOP/s', value: 'pflops' },
-        { text: 'EFLOP/s', value: 'eflops' },
-      ],
-    },
-    {
-      text: 'throughput',
-      submenu: [
-        { text: 'ops/sec (ops)', value: 'ops' },
-        { text: 'requests/sec (rps)', value: 'reqps' },
-        { text: 'reads/sec (rps)', value: 'rps' },
-        { text: 'writes/sec (wps)', value: 'wps' },
-        { text: 'I/O ops/sec (iops)', value: 'iops' },
-        { text: 'ops/min (opm)', value: 'opm' },
-        { text: 'reads/min (rpm)', value: 'rpm' },
-        { text: 'writes/min (wpm)', value: 'wpm' },
-      ],
-    },
-    {
-      text: 'length',
-      submenu: [
-        { text: 'millimetre (mm)', value: 'lengthmm' },
-        { text: 'meter (m)', value: 'lengthm' },
-        { text: 'feet (ft)', value: 'lengthft' },
-        { text: 'kilometer (km)', value: 'lengthkm' },
-        { text: 'mile (mi)', value: 'lengthmi' },
-      ],
-    },
-    {
-      text: 'area',
-      submenu: [
-        { text: 'Square Meters (m²)', value: 'areaM2' },
-        { text: 'Square Feet (ft²)', value: 'areaF2' },
-        { text: 'Square Miles (mi²)', value: 'areaMI2' },
-      ],
-    },
-    {
-      text: 'mass',
-      submenu: [
-        { text: 'milligram (mg)', value: 'massmg' },
-        { text: 'gram (g)', value: 'massg' },
-        { text: 'kilogram (kg)', value: 'masskg' },
-        { text: 'metric ton (t)', value: 'masst' },
-      ],
-    },
-    {
-      text: 'velocity',
-      submenu: [
-        { text: 'metres/second (m/s)', value: 'velocityms' },
-        { text: 'kilometers/hour (km/h)', value: 'velocitykmh' },
-        { text: 'miles/hour (mph)', value: 'velocitymph' },
-        { text: 'knot (kn)', value: 'velocityknot' },
-      ],
-    },
-    {
-      text: 'volume',
-      submenu: [
-        { text: 'millilitre (mL)', value: 'mlitre' },
-        { text: 'litre (L)', value: 'litre' },
-        { text: 'cubic metre', value: 'm3' },
-        { text: 'Normal cubic metre', value: 'Nm3' },
-        { text: 'cubic decimetre', value: 'dm3' },
-        { text: 'gallons', value: 'gallons' },
-      ],
-    },
-    {
-      text: 'energy',
-      submenu: [
-        { text: 'Watt (W)', value: 'watt' },
-        { text: 'Kilowatt (kW)', value: 'kwatt' },
-        { text: 'Milliwatt (mW)', value: 'mwatt' },
-        { text: 'Watt per square meter (W/m²)', value: 'Wm2' },
-        { text: 'Volt-ampere (VA)', value: 'voltamp' },
-        { text: 'Kilovolt-ampere (kVA)', value: 'kvoltamp' },
-        { text: 'Volt-ampere reactive (var)', value: 'voltampreact' },
-        { text: 'Kilovolt-ampere reactive (kvar)', value: 'kvoltampreact' },
-        { text: 'Watt-hour (Wh)', value: 'watth' },
-        { text: 'Kilowatt-hour (kWh)', value: 'kwatth' },
-        { text: 'Kilowatt-min (kWm)', value: 'kwattm' },
-        { text: 'Joule (J)', value: 'joule' },
-        { text: 'Electron volt (eV)', value: 'ev' },
-        { text: 'Ampere (A)', value: 'amp' },
-        { text: 'Kiloampere (kA)', value: 'kamp' },
-        { text: 'Milliampere (mA)', value: 'mamp' },
-        { text: 'Volt (V)', value: 'volt' },
-        { text: 'Kilovolt (kV)', value: 'kvolt' },
-        { text: 'Millivolt (mV)', value: 'mvolt' },
-        { text: 'Decibel-milliwatt (dBm)', value: 'dBm' },
-        { text: 'Ohm (Ω)', value: 'ohm' },
-        { text: 'Lumens (Lm)', value: 'lumens' },
-      ],
-    },
-    {
-      text: 'temperature',
-      submenu: [
-        { text: 'Celsius (°C)', value: 'celsius' },
-        { text: 'Farenheit (°F)', value: 'farenheit' },
-        { text: 'Kelvin (K)', value: 'kelvin' },
-      ],
-    },
-    {
-      text: 'pressure',
-      submenu: [
-        { text: 'Millibars', value: 'pressurembar' },
-        { text: 'Bars', value: 'pressurebar' },
-        { text: 'Kilobars', value: 'pressurekbar' },
-        { text: 'Hectopascals', value: 'pressurehpa' },
-        { text: 'Kilopascals', value: 'pressurekpa' },
-        { text: 'Inches of mercury', value: 'pressurehg' },
-        { text: 'PSI', value: 'pressurepsi' },
-      ],
-    },
-    {
-      text: 'force',
-      submenu: [
-        { text: 'Newton-meters (Nm)', value: 'forceNm' },
-        { text: 'Kilonewton-meters (kNm)', value: 'forcekNm' },
-        { text: 'Newtons (N)', value: 'forceN' },
-        { text: 'Kilonewtons (kN)', value: 'forcekN' },
-      ],
-    },
-    {
-      text: 'flow',
-      submenu: [
-        { text: 'Gallons/min (gpm)', value: 'flowgpm' },
-        { text: 'Cubic meters/sec (cms)', value: 'flowcms' },
-        { text: 'Cubic feet/sec (cfs)', value: 'flowcfs' },
-        { text: 'Cubic feet/min (cfm)', value: 'flowcfm' },
-        { text: 'Litre/hour', value: 'litreh' },
-        { text: 'Litre/min (l/min)', value: 'flowlpm' },
-        { text: 'milliLitre/min (mL/min)', value: 'flowmlpm' },
-      ],
-    },
-    {
-      text: 'angle',
-      submenu: [
-        { text: 'Degrees (°)', value: 'degree' },
-        { text: 'Radians', value: 'radian' },
-        { text: 'Gradian', value: 'grad' },
-      ],
-    },
-    {
-      text: 'acceleration',
-      submenu: [
-        { text: 'Meters/sec²', value: 'accMS2' },
-        { text: 'Feet/sec²', value: 'accFS2' },
-        { text: 'G unit', value: 'accG' },
-      ],
-    },
-    {
-      text: 'radiation',
-      submenu: [
-        { text: 'Becquerel (Bq)', value: 'radbq' },
-        { text: 'curie (Ci)', value: 'radci' },
-        { text: 'Gray (Gy)', value: 'radgy' },
-        { text: 'rad', value: 'radrad' },
-        { text: 'Sievert (Sv)', value: 'radsv' },
-        { text: 'rem', value: 'radrem' },
-        { text: 'Exposure (C/kg)', value: 'radexpckg' },
-        { text: 'roentgen (R)', value: 'radr' },
-        { text: 'Sievert/hour (Sv/h)', value: 'radsvh' },
-      ],
-    },
-    {
-      text: 'concentration',
-      submenu: [
-        { text: 'parts-per-million (ppm)', value: 'ppm' },
-        { text: 'parts-per-billion (ppb)', value: 'conppb' },
-        { text: 'nanogram per cubic meter (ng/m³)', value: 'conngm3' },
-        { text: 'nanogram per normal cubic meter (ng/Nm³)', value: 'conngNm3' },
-        { text: 'microgram per cubic meter (μg/m³)', value: 'conμgm3' },
-        { text: 'microgram per normal cubic meter (μg/Nm³)', value: 'conμgNm3' },
-        { text: 'milligram per cubic meter (mg/m³)', value: 'conmgm3' },
-        { text: 'milligram per normal cubic meter (mg/Nm³)', value: 'conmgNm3' },
-        { text: 'gram per cubic meter (g/m³)', value: 'congm3' },
-        { text: 'gram per normal cubic meter (g/Nm³)', value: 'congNm3' },
-        { text: 'milligrams per decilitre (mg/dL)', value: 'conmgdL' },
-        { text: 'millimoles per litre (mmol/L)', value: 'conmmolL' },
-      ],
-    },
-  ];
+  return getUnitFormats();
 };
 
 if (typeof Proxy !== "undefined") {

From 12a3edd6e501e1e92ab222e37bdfd8c7d2a299b5 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 8 Jan 2019 16:04:46 +0100
Subject: [PATCH 203/352] fix: Clean up per PR feedback. Thanks @dprokop

---
 .../ErrorBoundary/ErrorBoundary.tsx           | 23 ++++++++-----------
 .../app/plugins/panel/graph2/GraphPanel.tsx   |  4 ----
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx b/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx
index ed068819adc..188750b0fef 100644
--- a/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/public/app/core/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 interface ErrorInfo {
   componentStack: string;
@@ -19,10 +19,10 @@ interface State {
 }
 
 class ErrorBoundary extends Component<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = { error: null, errorInfo: null };
-  }
+  readonly state: State = {
+    error: null,
+    errorInfo: null,
+  };
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
@@ -32,15 +32,12 @@ class ErrorBoundary extends Component<Props, State> {
   }
 
   render() {
+    const { children } = this.props;
     const { error, errorInfo } = this.state;
-    return (
-      <>
-        {this.props.children({
-          error,
-          errorInfo,
-        })}
-      </>
-    );
+    return children({
+      error,
+      errorInfo,
+    });
   }
 }
 
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index 2c21c7f0e15..020c33f7d38 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -10,10 +10,6 @@ import { Options } from './types';
 interface Props extends PanelProps<Options> {}
 
 export class GraphPanel extends PureComponent<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
-
   render() {
     const { timeSeries, timeRange, width, height } = this.props;
     const { showLines, showBars, showPoints } = this.props.options;

From 6c00f3e511e3bcbda622d45a732dae9e9a632827 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 16:08:09 +0100
Subject: [PATCH 204/352] add form grow

---
 .../datasource/stackdriver/components/AlignmentPeriods.tsx     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
index b5abb6f3cb6..ef5ed910862 100644
--- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -34,6 +34,9 @@ export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onC
             className="width-15"
           />
         </div>
+        <div className="gf-form gf-form--grow">
+          <div className="gf-form-label gf-form-label--grow" />
+        </div>
       </div>
     </>
   );

From ae50d83608f911dc63c77773289785ea21eb7f8e Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Tue, 8 Jan 2019 16:21:38 +0100
Subject: [PATCH 205/352] update snapshot

---
 .../components/__snapshots__/QueryEditor.test.tsx.snap     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
index 00a1ac95039..a3a723e8bed 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -407,6 +407,13 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <div
+        className="gf-form-label gf-form-label--grow"
+      />
+    </div>
   </div>,
   <div
     className="gf-form-inline"

From 023e4961081774884cea5e86c4ab3e174deaaaa3 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Tue, 8 Jan 2019 16:45:04 +0100
Subject: [PATCH 206/352] docs: rpm/deb beta repo.

---
 docs/sources/installation/debian.md |  6 ++++++
 docs/sources/installation/rpm.md    | 14 ++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/docs/sources/installation/debian.md b/docs/sources/installation/debian.md
index 28b975e31e8..d26af5277a1 100644
--- a/docs/sources/installation/debian.md
+++ b/docs/sources/installation/debian.md
@@ -47,6 +47,12 @@ Create a file `/etc/apt/sources.list.d/grafana.list` and add the following to it
 deb https://packages.grafana.com/oss/deb stable main
 ```
 
+There is a separate repository if you want beta releases.
+
+```bash
+deb https://packages.grafana.com/oss/deb beta main
+```
+
 Use the above line even if you are on Ubuntu or another Debian version. Then add our gpg key. This allows you to install signed packages.
 
 ```bash
diff --git a/docs/sources/installation/rpm.md b/docs/sources/installation/rpm.md
index 559bb0a8ef4..156f703e164 100644
--- a/docs/sources/installation/rpm.md
+++ b/docs/sources/installation/rpm.md
@@ -76,6 +76,20 @@ sslverify=1
 sslcacert=/etc/pki/tls/certs/ca-bundle.crt
 ```
 
+There is a separate repository if you want beta releases.
+
+```bash
+[grafana]
+name=grafana
+baseurl=https://packages.grafana.com/oss/rpm-beta
+repo_gpgcheck=1
+enabled=1
+gpgcheck=1
+gpgkey=https://packages.grafana.com/gpg.key
+sslverify=1
+sslcacert=/etc/pki/tls/certs/ca-bundle.crt
+```
+
 Then install Grafana via the `yum` command.
 
 ```bash

From 22c9ce7de827ef9078449aecec69786eb9bbae7e Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 17:01:50 +0100
Subject: [PATCH 207/352] Make tooltips persistent when hovered

---
 public/app/core/components/Tooltip/Popper.tsx  | 6 ++++--
 public/app/core/components/Tooltip/Tooltip.tsx | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index cbd00028e90..dc89b801e37 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -16,7 +16,7 @@ const transitionStyles = {
   exiting: { opacity: 0 },
 };
 
-interface Props {
+interface Props extends React.DOMAttributes<HTMLDivElement> {
   renderContent: (content: any) => any;
   show: boolean;
   placement?: PopperJS.Placement;
@@ -27,7 +27,7 @@ interface Props {
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { renderContent, show, placement } = this.props;
+    const { renderContent, show, placement, onMouseEnter, onMouseLeave } = this.props;
     const { content } = this.props;
 
     return (
@@ -39,6 +39,8 @@ class Popper extends PureComponent<Props> {
                 {({ ref, style, placement, arrowProps }) => {
                   return (
                     <div
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
                       ref={ref}
                       style={{
                         ...style,
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index a905be7d988..8fcc4793ba9 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -12,7 +12,12 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
       {(showPopper, hidePopper, popperProps) => {
         return (
           <>
-            <Popper {...popperProps} referenceElement={tooltipTriggerRef.current} />
+            <Popper
+              {...popperProps}
+              onMouseEnter={showPopper}
+              onMouseLeave={hidePopper}
+              referenceElement={tooltipTriggerRef.current}
+            />
             {React.cloneElement(children, {
               ref: tooltipTriggerRef,
               onMouseEnter: showPopper,

From 79c6fdc0e8fe7bb900a88c3782df8f8870d8a5c1 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 20:51:00 +0100
Subject: [PATCH 208/352] wip

---
 packages/grafana-ui/package.json              |  6 ++++--
 .../src}/components/Tooltip/Popper.tsx        |  0
 .../components/Tooltip/PopperController.tsx   |  0
 .../src}/components/Tooltip/Tooltip.test.tsx  |  8 +++++---
 .../src}/components/Tooltip/Tooltip.tsx       | 19 +++++++++----------
 .../src/components/Tooltip/_Tooltip.scss      |  0
 .../__snapshots__/Tooltip.test.tsx.snap       |  0
 packages/grafana-ui/src/components/index.scss |  1 +
 packages/grafana-ui/src/components/index.ts   |  1 +
 public/app/core/components/Label/Label.tsx    |  2 +-
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   |  2 +-
 .../dashboard/dashgrid/DataSourceOption.tsx   |  2 +-
 .../dashboard/dashgrid/PanelEditor.tsx        |  2 +-
 .../PanelHeader/PanelHeaderCorner.tsx         |  6 +++---
 .../permissions/DashboardPermissions.tsx      |  2 +-
 .../features/folders/FolderPermissions.tsx    |  2 +-
 public/app/features/teams/TeamGroupSync.tsx   |  2 +-
 public/sass/_grafana.scss                     |  1 -
 yarn.lock                                     | 18 ++++++++++++++++--
 19 files changed, 46 insertions(+), 28 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Popper.tsx (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/PopperController.tsx (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Tooltip.test.tsx (69%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Tooltip.tsx (63%)
 rename public/sass/components/_popper.scss => packages/grafana-ui/src/components/Tooltip/_Tooltip.scss (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap (100%)

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 2fb210e3b46..f48b8221f9c 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -11,6 +11,8 @@
   "license": "ISC",
   "dependencies": {
     "@torkelo/react-select": "2.1.1",
+    "@types/react-test-renderer": "^16.0.3",
+    "@types/react-transition-group": "^2.0.15",
     "classnames": "^2.2.5",
     "jquery": "^3.2.1",
     "lodash": "^4.17.10",
@@ -23,11 +25,11 @@
     "react-virtualized": "^9.21.0"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
+    "@types/jquery": "^1.10.35",
     "@types/lodash": "^4.14.119",
     "@types/react": "^16.7.6",
-    "@types/classnames": "^2.2.6",
-    "@types/jquery": "^1.10.35",
     "typescript": "^3.2.2"
   }
 }
diff --git a/public/app/core/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
similarity index 100%
rename from public/app/core/components/Tooltip/Popper.tsx
rename to packages/grafana-ui/src/components/Tooltip/Popper.tsx
diff --git a/public/app/core/components/Tooltip/PopperController.tsx b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
similarity index 100%
rename from public/app/core/components/Tooltip/PopperController.tsx
rename to packages/grafana-ui/src/components/Tooltip/PopperController.tsx
diff --git a/public/app/core/components/Tooltip/Tooltip.test.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
similarity index 69%
rename from public/app/core/components/Tooltip/Tooltip.test.tsx
rename to packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
index 4a6def738e0..95d01c7f2fe 100644
--- a/public/app/core/components/Tooltip/Tooltip.test.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 describe('Tooltip', () => {
   it('renders correctly', () => {
     const tree = renderer
       .create(
-        <Tooltip  placement="auto" content="Tooltip text">
-          <a className="test-class" href="http://www.grafana.com">Link with tooltip</a>
+        <Tooltip placement="auto" content="Tooltip text">
+          <a className="test-class" href="http://www.grafana.com">
+            Link with tooltip
+          </a>
         </Tooltip>
       )
       .toJSON();
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
similarity index 63%
rename from public/app/core/components/Tooltip/Tooltip.tsx
rename to packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 8fcc4793ba9..9cffb151d83 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,9 @@
 import React, { createRef } from 'react';
 import * as PopperJS from 'popper.js';
-
 import Popper from './Popper';
 import PopperController, { UsingPopperProps } from './PopperController';
 
-const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
+export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
 
   return (
@@ -12,12 +11,14 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
       {(showPopper, hidePopper, popperProps) => {
         return (
           <>
-            <Popper
-              {...popperProps}
-              onMouseEnter={showPopper}
-              onMouseLeave={hidePopper}
-              referenceElement={tooltipTriggerRef.current}
-            />
+            {tooltipTriggerRef.current && (
+              <Popper
+                {...popperProps}
+                onMouseEnter={showPopper}
+                onMouseLeave={hidePopper}
+                referenceElement={tooltipTriggerRef.current}
+              />
+            )}
             {React.cloneElement(children, {
               ref: tooltipTriggerRef,
               onMouseEnter: showPopper,
@@ -29,5 +30,3 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
     </PopperController>
   );
 };
-
-export default Tooltip;
diff --git a/public/sass/components/_popper.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
similarity index 100%
rename from public/sass/components/_popper.scss
rename to packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
similarity index 100%
rename from public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
rename to packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index d52508c946c..fd10d21f9f1 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1 +1,2 @@
 @import 'DeleteButton/DeleteButton';
+@import 'Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index b57b9bcfdb7..8b9b11404c2 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -1 +1,2 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
+export { Tooltip } from './Tooltip/Tooltip';
diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx
index 956678283f6..5d60efa056a 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -1,5 +1,5 @@
 import React, { SFC, ReactNode } from 'react';
-import Tooltip from '../Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface Props {
   tooltip?: string;
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 2524a265054..86e15923bda 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React, { SFC, ReactNode, PureComponent } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface ToggleButtonGroupProps {
   label?: string;
diff --git a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
index 0adfc4abe16..9a3ce527510 100644
--- a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
+++ b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
@@ -1,5 +1,5 @@
 import React, { SFC } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface Props {
   label: string;
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index bce9af252ee..22921a4f98e 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -15,7 +15,7 @@ import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface PanelEditorProps {
   panel: PanelModel;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 3346f4b902d..82b8d57b64a 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
+import Remarkable from 'remarkable';
+import { Tooltip } from '@grafana/ui';
 import { PanelModel } from 'app/features/dashboard/panel_model';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import templateSrv from 'app/features/templating/template_srv';
 import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv';
-import Remarkable from 'remarkable';
 
 enum InfoModes {
   Error = 'Error',
@@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component<Props> {
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
             content={this.getInfoContent}
-            placement="bottom-start"
+              placement="bottom-start"
           >
             <div
               className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
diff --git a/public/app/features/dashboard/permissions/DashboardPermissions.tsx b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
index 95d78e7a737..96d0e23adcd 100644
--- a/public/app/features/dashboard/permissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { StoreState, FolderInfo } from 'app/types';
 import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
diff --git a/public/app/features/folders/FolderPermissions.tsx b/public/app/features/folders/FolderPermissions.tsx
index 39b44319c0f..62a479b9124 100644
--- a/public/app/features/folders/FolderPermissions.tsx
+++ b/public/app/features/folders/FolderPermissions.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { NavModel, StoreState, FolderState } from 'app/types';
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index 822b32abdad..ee60df28866 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 import { TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
 import { getTeamGroups } from './state/selectors';
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 404a212241b..10cc7335bdf 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -97,7 +97,6 @@
 @import 'components/page_header';
 @import 'components/dashboard_settings';
 @import 'components/empty_list_cta';
-@import 'components/popper';
 @import 'components/form_select_box';
 @import 'components/panel_editor';
 @import 'components/toolbar';
diff --git a/yarn.lock b/yarn.lock
index 78300be233e..ae8c1dc5e06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1091,6 +1091,13 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
+"@types/react-test-renderer@^16.0.3":
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.0.3.tgz#cce5c983d66cc5c3582e7c2f44b274ab635a8acc"
+  integrity sha512-NWOAxVQeJxpXuNKgw83Hah0nquiw1nUexM9qY/Hk3a+XhZwgMtaa6GLA9E1TKMT75Odb3/KE/jiBO4enTuEJjQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@*":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.14.tgz#afd0cd785a97f070b55765e9f9d76ff568269001"
@@ -1098,7 +1105,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react-transition-group@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
+  integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
   version "16.7.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
   integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3161,7 +3175,7 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000772"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
   integrity sha1-UarokXaChureSj2DGep21qAbUSs=

From a8814979081a3a7fa94d349116f96e0d4ffe59c0 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Mon, 20 Aug 2018 15:33:49 +0200
Subject: [PATCH 209/352] Max number of repeated panels per row

Instead of min width
---
 docs/sources/reference/dashboard.md           |  2 +-
 docs/sources/reference/templating.md          |  6 ++++--
 pkg/models/dashboards.go                      |  2 +-
 .../features/dashboard/dashboard_migration.ts | 11 +++++++++-
 .../app/features/dashboard/dashboard_model.ts |  4 ++--
 public/app/features/dashboard/panel_model.ts  |  2 +-
 .../specs/dashboard_migration.test.ts         | 20 ++++++++++---------
 .../features/panel/partials/general_tab.html  |  4 ++--
 public/dashboards/home.json                   |  2 +-
 9 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/docs/sources/reference/dashboard.md b/docs/sources/reference/dashboard.md
index 6be12600da5..3d96923bc72 100644
--- a/docs/sources/reference/dashboard.md
+++ b/docs/sources/reference/dashboard.md
@@ -51,7 +51,7 @@ When a user creates a new dashboard, a new dashboard JSON object is initialized
     "list": []
   },
   "refresh": "5s",
-  "schemaVersion": 16,
+  "schemaVersion": 17,
   "version": 0,
   "links": []
 }
diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md
index f20cc0ccfc9..71ce6bdd2ae 100644
--- a/docs/sources/reference/templating.md
+++ b/docs/sources/reference/templating.md
@@ -292,9 +292,11 @@ The `direction` controls how the panels will be arranged.
 
 By choosing `horizontal` the panels will be arranged side-by-side. Grafana will automatically adjust the width
 of each repeated panel so that the whole row is filled. Currently, you cannot mix other panels on a row with a repeated
-panel. Each panel will never be smaller that the provided `Min width` if you have many selected values.
+panel.
 
-By choosing `vertical` the panels will be arranged from top to bottom in a column. The `Min width` doesn't have any effect in this case. The width of the repeated panels will be the same as of the first panel (the original template) being repeated.
+Set `Max per row` to tell grafana how many panels per row you want at most. It defaults to *4* if you don't set anything.
+
+By choosing `vertical` the panels will be arranged from top to bottom in a column. The width of the repeated panels will be the same as of the first panel (the original template) being repeated.
 
 Only make changes to the first panel (the original template). To have the changes take effect on all panels you need to trigger a dynamic dashboard re-build.
 You can do this by either changing the variable value (that is the basis for the repeat) or reload the dashboard.
diff --git a/pkg/models/dashboards.go b/pkg/models/dashboards.go
index 3a8010e797b..0f3f56175fe 100644
--- a/pkg/models/dashboards.go
+++ b/pkg/models/dashboards.go
@@ -112,7 +112,7 @@ func NewDashboard(title string) *Dashboard {
 func NewDashboardFolder(title string) *Dashboard {
 	folder := NewDashboard(title)
 	folder.IsFolder = true
-	folder.Data.Set("schemaVersion", 16)
+	folder.Data.Set("schemaVersion", 17)
 	folder.Data.Set("version", 0)
 	folder.IsFolder = true
 	return folder
diff --git a/public/app/features/dashboard/dashboard_migration.ts b/public/app/features/dashboard/dashboard_migration.ts
index abd12ab4b13..4196456907f 100644
--- a/public/app/features/dashboard/dashboard_migration.ts
+++ b/public/app/features/dashboard/dashboard_migration.ts
@@ -21,7 +21,7 @@ export class DashboardMigrator {
     let i, j, k, n;
     const oldVersion = this.dashboard.schemaVersion;
     const panelUpgrades = [];
-    this.dashboard.schemaVersion = 16;
+    this.dashboard.schemaVersion = 17;
 
     if (oldVersion === this.dashboard.schemaVersion) {
       return;
@@ -368,6 +368,15 @@ export class DashboardMigrator {
       this.upgradeToGridLayout(old);
     }
 
+    if (oldVersion < 17) {
+      panelUpgrades.push(panel => {
+        if (panel.minSpan) {
+          panel.maxPerRow = GRID_COLUMN_COUNT / panel.minSpan;
+        }
+        delete panel.minSpan;
+      });
+    }
+
     if (panelUpgrades.length === 0) {
       return;
     }
diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index 6f98bc5a17a..33529abdd15 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -442,7 +442,7 @@ export class DashboardModel {
     }
 
     const selectedOptions = this.getSelectedVariableOptions(variable);
-    const minWidth = panel.minSpan || 6;
+    const maxPerRow = panel.maxPerRow || 4;
     let xPos = 0;
     let yPos = panel.gridPos.y;
 
@@ -462,7 +462,7 @@ export class DashboardModel {
       } else {
         // set width based on how many are selected
         // assumed the repeated panels should take up full row width
-        copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selectedOptions.length, minWidth);
+        copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selectedOptions.length, GRID_COLUMN_COUNT / maxPerRow);
         copy.gridPos.x = xPos;
         copy.gridPos.y = yPos;
 
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index 2d5a70b47dd..2fec8e379dd 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -77,7 +77,7 @@ export class PanelModel {
   repeatPanelId?: number;
   repeatDirection?: string;
   repeatedByRow?: boolean;
-  minSpan?: number;
+  maxPerRow?: number;
   collapsed?: boolean;
   panels?: any;
   soloMode?: boolean;
diff --git a/public/app/features/dashboard/specs/dashboard_migration.test.ts b/public/app/features/dashboard/specs/dashboard_migration.test.ts
index 5f693c9f6d9..e15bd65d5a5 100644
--- a/public/app/features/dashboard/specs/dashboard_migration.test.ts
+++ b/public/app/features/dashboard/specs/dashboard_migration.test.ts
@@ -127,7 +127,7 @@ describe('DashboardModel', () => {
     });
 
     it('dashboard schema version should be set to latest', () => {
-      expect(model.schemaVersion).toBe(16);
+      expect(model.schemaVersion).toBe(17);
     });
 
     it('graph thresholds should be migrated', () => {
@@ -364,14 +364,6 @@ describe('DashboardModel', () => {
       expect(dashboard.panels.length).toBe(2);
     });
 
-    it('minSpan should be twice', () => {
-      model.rows = [createRow({ height: 8 }, [[6]])];
-      model.rows[0].panels[0] = { minSpan: 12 };
-
-      const dashboard = new DashboardModel(model);
-      expect(dashboard.panels[0].minSpan).toBe(24);
-    });
-
     it('should assign id', () => {
       model.rows = [createRow({ collapse: true, height: 8 }, [[6], [6]])];
       model.rows[0].panels[0] = {};
@@ -380,6 +372,16 @@ describe('DashboardModel', () => {
       expect(dashboard.panels[0].id).toBe(1);
     });
   });
+
+  describe('when migrating from minSpan to maxPerRow', () => {
+    it('maxPerRow should be correct', () => {
+      const model = {
+        panels: [{ minSpan: 8 }],
+      };
+      const dashboard = new DashboardModel(model);
+      expect(dashboard.panels[0].maxPerRow).toBe(3);
+    });
+  });
 });
 
 function createRow(options, panelDescriptions: any[]) {
diff --git a/public/app/features/panel/partials/general_tab.html b/public/app/features/panel/partials/general_tab.html
index d6c2d4804a0..76c38f73912 100644
--- a/public/app/features/panel/partials/general_tab.html
+++ b/public/app/features/panel/partials/general_tab.html
@@ -32,8 +32,8 @@
         </select>
       </div>
       <div class="gf-form" ng-show="ctrl.panel.repeat && ctrl.panel.repeatDirection == 'h'">
-        <span class="gf-form-label width-9">Min width</span>
-        <select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]">
+        <span class="gf-form-label width-9">Max per row</span>
+        <select class="gf-form-input" ng-model="ctrl.panel.maxPerRow" ng-options="f for f in [2,3,4,6,12,24]">
           <option value=""></option>
         </select>
       </div>
diff --git a/public/dashboards/home.json b/public/dashboards/home.json
index 55cf7242aa6..f2c441053bb 100644
--- a/public/dashboards/home.json
+++ b/public/dashboards/home.json
@@ -65,7 +65,7 @@
     }
   ],
   "rows": [],
-  "schemaVersion": 16,
+  "schemaVersion": 17,
   "style": "dark",
   "tags": [],
   "templating": {

From fb76f41a15e5ee52bbb3b58229da12adcf3bf817 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Wed, 9 Jan 2019 09:42:30 +0100
Subject: [PATCH 210/352] changed light theme page background gradient

---
 public/sass/_variables.light.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 16bb341ba27..6ad07011b68 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -76,8 +76,7 @@ $textShadow: none;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
-$page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
-//$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
+$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
 $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 
 // Links

From 6ac25d41fa29f02ba6437da365aa8d2b5b5d2a25 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 8 Jan 2019 16:59:16 +0100
Subject: [PATCH 211/352] chore: Move CustomScrollbar to @grafana/ui #14759

---
 package.json                                  |  4 +--
 packages/grafana-ui/package.json              |  8 +++--
 .../CustomScrollbar/CustomScrollbar.test.tsx  |  0
 .../CustomScrollbar/CustomScrollbar.tsx       |  2 +-
 .../CustomScrollbar.test.tsx.snap             |  0
 packages/grafana-ui/src/components/index.ts   |  1 +
 public/app/core/components/Select/Select.tsx  |  2 +-
 .../dashboard/dashgrid/EditorTabBody.tsx      |  2 +-
 .../app/plugins/panel/graph/Legend/Legend.tsx |  2 +-
 yarn.lock                                     | 34 +++++++++++++++++--
 10 files changed, 44 insertions(+), 11 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/CustomScrollbar/CustomScrollbar.test.tsx (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/CustomScrollbar/CustomScrollbar.tsx (96%)
 rename {public/app/core => packages/grafana-ui/src}/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap (100%)

diff --git a/package.json b/package.json
index eefe2cbbe53..c8d891b91bc 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "@types/jquery": "^1.10.35",
     "@types/node": "^8.0.31",
     "@types/react": "^16.7.6",
-    "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-dom": "^16.0.9",
     "@types/react-select": "^2.0.4",
     "angular-mocks": "1.6.6",
@@ -72,8 +71,8 @@
     "ng-annotate-loader": "^0.6.1",
     "ng-annotate-webpack-plugin": "^0.3.0",
     "ngtemplate-loader": "^2.0.1",
-    "npm": "^5.4.2",
     "node-sass": "^4.11.0",
+    "npm": "^5.4.2",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
     "phantomjs-prebuilt": "^2.1.15",
     "postcss-browser-reporter": "^0.5.0",
@@ -167,7 +166,6 @@
     "prop-types": "^15.6.2",
     "rc-cascader": "^0.14.0",
     "react": "^16.6.3",
-    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.6.3",
     "react-grid-layout": "0.16.6",
     "react-highlight-words": "0.11.0",
diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 2fb210e3b46..594faa57b0a 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -16,6 +16,7 @@
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
     "react": "^16.6.3",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.6.3",
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
@@ -23,11 +24,14 @@
     "react-virtualized": "^9.21.0"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
+    "@types/jquery": "^1.10.35",
     "@types/lodash": "^4.14.119",
     "@types/react": "^16.7.6",
-    "@types/classnames": "^2.2.6",
-    "@types/jquery": "^1.10.35",
+    "@types/react-custom-scrollbars": "^4.0.5",
+    "@types/react-test-renderer": "^16.0.3",
+    "react-test-renderer": "^16.7.0",
     "typescript": "^3.2.2"
   }
 }
diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.test.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.test.tsx
similarity index 100%
rename from public/app/core/components/CustomScrollbar/CustomScrollbar.test.tsx
rename to packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.test.tsx
diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
similarity index 96%
rename from public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
rename to packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index 977892c637d..cf1657e1c83 100644
--- a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -12,7 +12,7 @@ interface Props {
 /**
  * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
  */
-class CustomScrollbar extends PureComponent<Props> {
+export class CustomScrollbar extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
     customClassName: 'custom-scrollbars',
     autoHide: true,
diff --git a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
similarity index 100%
rename from public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
rename to packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index b57b9bcfdb7..7423ce2a93a 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -1 +1,2 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
+export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
index 893eb1a6655..f66e07c9ed6 100644
--- a/public/app/core/components/Select/Select.tsx
+++ b/public/app/core/components/Select/Select.tsx
@@ -11,7 +11,7 @@ import OptionGroup from './OptionGroup';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
-import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
+import { CustomScrollbar } from '@grafana/ui';
 
 export interface SelectOptionItem {
   label?: string;
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index b7da81a23f8..b159cb30a4b 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
+import { CustomScrollbar } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
 
diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx
index 7af61fde4e9..b83cd7bd88c 100644
--- a/public/app/plugins/panel/graph/Legend/Legend.tsx
+++ b/public/app/plugins/panel/graph/Legend/Legend.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { TimeSeries } from 'app/core/core';
-import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
+import { CustomScrollbar } from '@grafana/ui';
 import { LegendItem, LEGEND_STATS } from './LegendSeriesItem';
 
 interface LegendProps {
diff --git a/yarn.lock b/yarn.lock
index 78300be233e..0f7cf0fab92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1091,6 +1091,13 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
+"@types/react-test-renderer@^16.0.3":
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.0.3.tgz#cce5c983d66cc5c3582e7c2f44b274ab635a8acc"
+  integrity sha512-NWOAxVQeJxpXuNKgw83Hah0nquiw1nUexM9qY/Hk3a+XhZwgMtaa6GLA9E1TKMT75Odb3/KE/jiBO4enTuEJjQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@*":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.14.tgz#afd0cd785a97f070b55765e9f9d76ff568269001"
@@ -1098,7 +1105,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
   version "16.7.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
   integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3161,7 +3168,7 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000772"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
   integrity sha1-UarokXaChureSj2DGep21qAbUSs=
@@ -12061,6 +12068,11 @@ react-is@^16.5.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
   integrity sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ==
 
+react-is@^16.7.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
+  integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -12134,6 +12146,16 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.5.0:
     react-is "^16.5.2"
     schedule "^0.5.0"
 
+react-test-renderer@^16.7.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c"
+  integrity sha512-tFbhSjknSQ6+ttzmuGdv+SjQfmvGcq3PFKyPItohwhhOBmRoTf1We3Mlt3rJtIn85mjPXOkKV+TaKK4irvk9Yg==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.7.0"
+    scheduler "^0.12.0"
+
 react-transition-group@^2.2.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"
@@ -12977,6 +12999,14 @@ scheduler@^0.11.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b"
+  integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"

From 076defdc0b1b6e119c9c619967cafab3682cdee3 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 10:33:20 +0100
Subject: [PATCH 212/352] Post merge updates

---
 .../features/dashboard/dashgrid/DataPanel.tsx | 25 ++++++++-----------
 .../PanelHeader/PanelHeaderCorner.tsx         |  2 +-
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index fa21276d7a2..d71a274ab10 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -1,6 +1,8 @@
 // Library
 import React, { Component } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
+
 import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 
 // Services
@@ -12,7 +14,6 @@ import kbn from 'app/core/utils/kbn';
 // Types
 import { DataQueryOptions, DataQueryResponse } from 'app/types';
 import { TimeRange, TimeSeries, LoadingState } from '@grafana/ui';
-import { Themes } from 'app/core/components/Tooltip/Popper';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
@@ -144,10 +145,10 @@ export class DataPanel extends Component<Props, State> {
       this.setState({
         loading: LoadingState.Error,
         isFirstLoad: false,
-        errorMessage: errorMessage
+        errorMessage: errorMessage,
       });
     }
-  }
+  };
 
   render() {
     const { queries } = this.props;
@@ -171,7 +172,7 @@ export class DataPanel extends Component<Props, State> {
       <>
         {this.renderLoadingStates()}
         <ErrorBoundary>
-          {({error, errorInfo}) => {
+          {({ error, errorInfo }) => {
             if (errorInfo) {
               this.onError(error.message || DEFAULT_PLUGIN_ERROR);
               return null;
@@ -200,15 +201,11 @@ export class DataPanel extends Component<Props, State> {
       );
     } else if (loading === LoadingState.Error) {
       return (
-        <Tooltip
-          content={errorMessage}
-          className="popper__manager--block"
-          refClassName={`panel-info-corner panel-info-corner--error`}
-          placement="bottom-start"
-          theme={Themes.Error}
-        >
-          <i className="fa" />
-          <span className="panel-info-corner-inner" />
+        <Tooltip content={errorMessage} placement="bottom-start" theme={Themes.Error}>
+          <div className="panel-info-corner panel-info-corner--error">
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
+          </div>
         </Tooltip>
       );
     }
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 82b8d57b64a..6b6f81fc579 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component<Props> {
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
             content={this.getInfoContent}
-              placement="bottom-start"
+            placement="bottom-start"
           >
             <div
               className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}

From 702e1b01bbaabf2ad7638afb068ba49281888808 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 9 Jan 2019 10:35:03 +0100
Subject: [PATCH 213/352] chore: Move sass code related to custom scrollbar
 into @grafana/ui #14759

---
 .../CustomScrollbar/_CustomScrollbar.scss     | 40 +++++++++++++++++
 packages/grafana-ui/src/components/index.scss |  1 +
 public/sass/components/_scrollbar.scss        | 44 -------------------
 3 files changed, 41 insertions(+), 44 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss b/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
new file mode 100644
index 00000000000..c0a8077fb63
--- /dev/null
+++ b/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
@@ -0,0 +1,40 @@
+.custom-scrollbars {
+  // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
+  // make scroll working it should fit outer container size (scroll appears only when inner container size is
+  // greater than outer one).
+  display: flex;
+  flex-grow: 1;
+
+  .view {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
+
+  .track-vertical {
+    border-radius: 3px;
+    width: 6px !important;
+    right: 2px;
+    bottom: 2px;
+    top: 2px;
+  }
+
+  .track-horizontal {
+    border-radius: 3px;
+    height: 6px !important;
+
+    right: 2px;
+    bottom: 2px;
+    left: 2px;
+  }
+
+  .thumb-vertical {
+    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+
+  .thumb-horizontal {
+    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+}
\ No newline at end of file
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index d52508c946c..0e18eaf018c 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1 +1,2 @@
+@import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss
index 5dbb4518d52..a7ecb73b786 100644
--- a/public/sass/components/_scrollbar.scss
+++ b/public/sass/components/_scrollbar.scss
@@ -295,50 +295,6 @@
   }
 }
 
-// Custom styles for 'react-custom-scrollbars'
-
-.custom-scrollbars {
-  // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
-  // make scroll working it should fit outer container size (scroll appears only when inner container size is
-  // greater than outer one).
-  display: flex;
-  flex-grow: 1;
-
-  .view {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .track-vertical {
-    border-radius: 3px;
-    width: 6px !important;
-
-    right: 2px;
-    bottom: 2px;
-    top: 2px;
-  }
-
-  .track-horizontal {
-    border-radius: 3px;
-    height: 6px !important;
-
-    right: 2px;
-    bottom: 2px;
-    left: 2px;
-  }
-
-  .thumb-vertical {
-    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
-    border-radius: 6px;
-  }
-
-  .thumb-horizontal {
-    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
-    border-radius: 6px;
-  }
-}
-
 .scroll-margin-helper {
   margin-right: 12px;
 }

From fae8ff57500fa7d9deb20395a7495034861562ba Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 10:55:38 +0100
Subject: [PATCH 214/352] Move Portal to @grafana/ui

---
 .../grafana-ui/src}/components/Portal/Portal.tsx              | 4 ++--
 packages/grafana-ui/src/components/Tooltip/Popper.tsx         | 4 ++--
 packages/grafana-ui/src/components/index.ts                   | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Portal/Portal.tsx (87%)

diff --git a/public/app/core/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx
similarity index 87%
rename from public/app/core/components/Portal/Portal.tsx
rename to packages/grafana-ui/src/components/Portal/Portal.tsx
index 25d54a64209..6f51f4053e2 100644
--- a/public/app/core/components/Portal/Portal.tsx
+++ b/packages/grafana-ui/src/components/Portal/Portal.tsx
@@ -6,11 +6,11 @@ interface Props {
   root?: HTMLElement;
 }
 
-export default class BodyPortal extends PureComponent<Props> {
+export class Portal extends PureComponent<Props> {
   node: HTMLElement = document.createElement('div');
   portalRoot: HTMLElement;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     const {
       className,
diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index fd12e7db517..c393ed4bac5 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -1,7 +1,7 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import * as PopperJS from 'popper.js';
 import { Manager, Popper as ReactPopper } from 'react-popper';
-import Portal from 'app/core/components/Portal/Portal';
+import { Portal } from '@grafana/ui';
 import Transition from 'react-transition-group/Transition';
 
 export enum Themes {
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 8b9b11404c2..d1205e6c291 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -1,2 +1,3 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
+export { Portal } from './Portal/Portal';

From 0b4d212bd2fe8a9ac198ae9478791356d277023b Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 10:56:40 +0100
Subject: [PATCH 215/352] Fixing TS errors and updating snapshot

---
 packages/grafana-ui/src/components/Tooltip/Popper.tsx     | 4 ++--
 .../src/components/Tooltip/PopperController.tsx           | 4 ++--
 .../teams/__snapshots__/TeamGroupSync.test.tsx.snap       | 8 ++++----
 yarn.lock                                                 | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index c393ed4bac5..b405d4c4328 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import * as PopperJS from 'popper.js';
 import { Manager, Popper as ReactPopper } from 'react-popper';
 import { Portal } from '@grafana/ui';
@@ -14,7 +14,7 @@ const defaultTransitionStyles = {
   opacity: 0,
 };
 
-const transitionStyles = {
+const transitionStyles: {[key: string]: object} = {
   exited: { opacity: 0 },
   entering: { opacity: 0 },
   entered: { opacity: 1 },
diff --git a/packages/grafana-ui/src/components/Tooltip/PopperController.tsx b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
index 1b6703c3627..5f4010ac58a 100644
--- a/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
@@ -50,10 +50,10 @@ class PopperController extends React.Component<Props, State> {
 
   componentWillReceiveProps(nextProps: Props) {
     if (nextProps.placement && nextProps.placement !== this.state.placement) {
-      this.setState(prevState => {
+      this.setState((prevState: State) => {
         return {
           ...prevState,
-          placement: nextProps.placement,
+          placement: nextProps.placement || 'auto',
         };
       });
     }
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index ac26dba88ed..e28eb86dc7a 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Render should render component 1`] = `
     >
       External group sync
     </h3>
-    <Tooltip
+    <Component
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
@@ -21,7 +21,7 @@ exports[`Render should render component 1`] = `
           className="gicon gicon-question gicon--has-hover"
         />
       </div>
-    </Tooltip>
+    </Component>
     <div
       className="page-action-bar__spacer"
     />
@@ -119,7 +119,7 @@ exports[`Render should render groups table 1`] = `
     >
       External group sync
     </h3>
-    <Tooltip
+    <Component
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
@@ -130,7 +130,7 @@ exports[`Render should render groups table 1`] = `
           className="gicon gicon-question gicon--has-hover"
         />
       </div>
-    </Tooltip>
+    </Component>
     <div
       className="page-action-bar__spacer"
     />
diff --git a/yarn.lock b/yarn.lock
index ae8c1dc5e06..23ebebb689c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1112,7 +1112,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
   version "16.7.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
   integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3175,7 +3175,7 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000772"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
   integrity sha1-UarokXaChureSj2DGep21qAbUSs=

From 97b087f5a561019392bb21053a64e07c91bbbba2 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Tue, 21 Aug 2018 09:22:41 +0200
Subject: [PATCH 216/352] Use factors for max repeated panels per row

---
 public/app/core/specs/factors.test.ts                |  8 ++++++++
 public/app/core/utils/factors.ts                     |  5 +++++
 public/app/features/dashboard/dashboard_migration.ts | 12 +++++++++++-
 public/app/features/panel/panel_ctrl.ts              |  5 ++++-
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 public/app/core/specs/factors.test.ts
 create mode 100644 public/app/core/utils/factors.ts

diff --git a/public/app/core/specs/factors.test.ts b/public/app/core/specs/factors.test.ts
new file mode 100644
index 00000000000..aed59b5be8b
--- /dev/null
+++ b/public/app/core/specs/factors.test.ts
@@ -0,0 +1,8 @@
+import getFactors from 'app/core/utils/factors';
+
+describe('factors', () => {
+  it('should return factors for 12', () => {
+    const factors = getFactors(12);
+    expect(factors).toEqual([1, 2, 3, 4, 6, 12]);
+  });
+});
diff --git a/public/app/core/utils/factors.ts b/public/app/core/utils/factors.ts
new file mode 100644
index 00000000000..e9ce327a631
--- /dev/null
+++ b/public/app/core/utils/factors.ts
@@ -0,0 +1,5 @@
+// Returns the factors of a number
+// Example getFactors(12) -> [1, 2, 3, 4, 6, 12]
+export default function getFactors(num: number): number[] {
+  return Array.from(new Array(num + 1), (_, i) => i).filter(i => num % i === 0);
+}
diff --git a/public/app/features/dashboard/dashboard_migration.ts b/public/app/features/dashboard/dashboard_migration.ts
index 4196456907f..2dbeb6c6e80 100644
--- a/public/app/features/dashboard/dashboard_migration.ts
+++ b/public/app/features/dashboard/dashboard_migration.ts
@@ -9,6 +9,7 @@ import {
 } from 'app/core/constants';
 import { PanelModel } from './panel_model';
 import { DashboardModel } from './dashboard_model';
+import getFactors from 'app/core/utils/factors';
 
 export class DashboardMigrator {
   dashboard: DashboardModel;
@@ -371,7 +372,16 @@ export class DashboardMigrator {
     if (oldVersion < 17) {
       panelUpgrades.push(panel => {
         if (panel.minSpan) {
-          panel.maxPerRow = GRID_COLUMN_COUNT / panel.minSpan;
+          const max = GRID_COLUMN_COUNT / panel.minSpan;
+          const factors = getFactors(GRID_COLUMN_COUNT);
+          // find the best match compared to factors
+          // (ie. [1,2,3,4,6,12,24] for 24 columns)
+          panel.maxPerRow =
+            factors[
+              _.findIndex(factors, o => {
+                return o > max;
+              }) - 1
+            ];
         }
         delete panel.minSpan;
       });
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 432d22fecdf..f68423315d7 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -5,6 +5,7 @@ import Remarkable from 'remarkable';
 import config from 'app/core/config';
 import { profiler } from 'app/core/core';
 import { Emitter } from 'app/core/core';
+import getFactors from 'app/core/utils/factors';
 import {
   duplicatePanel,
   copyPanel as copyPanelUtil,
@@ -12,7 +13,7 @@ import {
   sharePanel as sharePanelUtil,
 } from 'app/features/dashboard/utils/panel';
 
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
 
 export class PanelCtrl {
   panel: any;
@@ -32,6 +33,7 @@ export class PanelCtrl {
   events: Emitter;
   timing: any;
   loading: boolean;
+  maxPanelsPerRowOptions: number[];
 
   constructor($scope, $injector) {
     this.$injector = $injector;
@@ -92,6 +94,7 @@ export class PanelCtrl {
     if (!this.editModeInitiated) {
       this.editModeInitiated = true;
       this.events.emit('init-edit-mode', null);
+      this.maxPanelsPerRowOptions = getFactors(GRID_COLUMN_COUNT);
     }
   }
 

From 0571ad5ad7db0d9facf2f8c3e5d5b62f3ba2fa25 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 11:33:08 +0100
Subject: [PATCH 217/352] Removes unnecessary warnings from webpack output
 about missing exports

This should not break anything as ForkTsCheckerWebpackPlugin takes care of that
---
 scripts/webpack/IgnoreNotFoundExportPlugin.js | 22 +++++++++++++++++++
 scripts/webpack/webpack.hot.js                |  2 ++
 2 files changed, 24 insertions(+)
 create mode 100644 scripts/webpack/IgnoreNotFoundExportPlugin.js

diff --git a/scripts/webpack/IgnoreNotFoundExportPlugin.js b/scripts/webpack/IgnoreNotFoundExportPlugin.js
new file mode 100644
index 00000000000..37bf1f7200e
--- /dev/null
+++ b/scripts/webpack/IgnoreNotFoundExportPlugin.js
@@ -0,0 +1,22 @@
+// https://github.com/TypeStrong/ts-loader/issues/653#issuecomment-390889335
+
+const ModuleDependencyWarning = require("webpack/lib/ModuleDependencyWarning")
+
+module.exports = class IgnoreNotFoundExportPlugin {
+    apply(compiler) {
+        const messageRegExp = /export '.*'( \(reexported as '.*'\))? was not found in/
+        function doneHook(stats) {
+            stats.compilation.warnings = stats.compilation.warnings.filter(function(warn) {
+                if (warn instanceof ModuleDependencyWarning && messageRegExp.test(warn.message)) {
+                    return false
+                }
+                return true;
+            })
+        }
+        if (compiler.hooks) {
+            compiler.hooks.done.tap("IgnoreNotFoundExportPlugin", doneHook)
+        } else {
+            compiler.plugin("done", doneHook)
+        }
+    }
+}
diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js
index ca08ff1e726..b37e4c08592 100644
--- a/scripts/webpack/webpack.hot.js
+++ b/scripts/webpack/webpack.hot.js
@@ -7,6 +7,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
 
 module.exports = merge(common, {
   entry: {
@@ -111,5 +112,6 @@ module.exports = merge(common, {
         NODE_ENV: JSON.stringify('development'),
       },
     }),
+    new IgnoreNotFoundExportPlugin(),
   ],
 });

From f374da032e5cc9a12646c596298a1d8d38200206 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Wed, 9 Jan 2019 11:34:13 +0100
Subject: [PATCH 218/352] Hint for user on when the repeat is applied

---
 public/app/features/panel/partials/general_tab.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/public/app/features/panel/partials/general_tab.html b/public/app/features/panel/partials/general_tab.html
index 76c38f73912..8881d2c28a4 100644
--- a/public/app/features/panel/partials/general_tab.html
+++ b/public/app/features/panel/partials/general_tab.html
@@ -37,7 +37,12 @@
           <option value=""></option>
         </select>
       </div>
+      <div class="gf-form-hint">
+        <div class="gf-form-hint-text muted">
+          Note: You may need to change the variable selection to see this in action.
+        </div>
       </div>
+    </div>
   </div>
 </div>
 

From e2fe663dba0922810bc56165023db4846024289f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 9 Jan 2019 11:34:22 +0100
Subject: [PATCH 219/352] Added TestRuleButton

---
 public/app/features/alerting/AlertTab.tsx     | 29 +++++++++--
 .../app/features/alerting/TestRuleButton.tsx  | 48 +++++++++++++++++++
 2 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 public/app/features/alerting/TestRuleButton.tsx

diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index a5afbc198fc..5623fac95c1 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { PureComponent } from 'react';
+import React, { PureComponent, SFC } from 'react';
 
 // Services & Utils
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
@@ -14,6 +14,7 @@ import 'app/features/alerting/AlertTabCtrl';
 // Types
 import { DashboardModel } from '../dashboard/dashboard_model';
 import { PanelModel } from '../dashboard/panel_model';
+import { TestRuleButton } from './TestRuleButton';
 
 interface Props {
   angularPanel?: AngularComponent;
@@ -21,6 +22,16 @@ interface Props {
   panel: PanelModel;
 }
 
+interface LoadingPlaceholderProps {
+  text: string;
+}
+
+const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
+  <div className="gf-form-group">
+    {text} <i className="fa fa-spinner fa-spin" />
+  </div>
+);
+
 export class AlertTab extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
@@ -65,9 +76,7 @@ export class AlertTab extends PureComponent<Props> {
     const loader = getAngularLoader();
     const template = '<alert-tab />';
 
-    const scopeProps = {
-      ctrl: this.panelCtrl,
-    };
+    const scopeProps = { ctrl: this.panelCtrl };
 
     this.component = loader.load(this.element, scopeProps, template);
   }
@@ -111,6 +120,16 @@ export class AlertTab extends PureComponent<Props> {
     };
   };
 
+  renderTestRuleButton = () => {
+    const { panel, dashboard } = this.props;
+    return <TestRuleButton panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
+  };
+
+  testRule = (): EditorToolbarView => ({
+    title: 'Test Rule',
+    render: () => this.renderTestRuleButton(),
+  });
+
   onAddAlert = () => {
     this.panelCtrl._enableAlert();
     this.component.digest();
@@ -120,7 +139,7 @@ export class AlertTab extends PureComponent<Props> {
   render() {
     const { alert } = this.props.panel;
 
-    const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
+    const toolbarItems = alert ? [this.stateHistory(), this.testRule(), this.deleteAlert()] : [];
 
     const model = {
       title: 'Panel has no alert rule defined',
diff --git a/public/app/features/alerting/TestRuleButton.tsx b/public/app/features/alerting/TestRuleButton.tsx
new file mode 100644
index 00000000000..032d7c7e4f8
--- /dev/null
+++ b/public/app/features/alerting/TestRuleButton.tsx
@@ -0,0 +1,48 @@
+import React, { PureComponent } from 'react';
+import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { DashboardModel } from '../dashboard/dashboard_model';
+
+export interface Props {
+  panelId: number;
+  dashboard: DashboardModel;
+  LoadingPlaceholder: any;
+}
+
+interface State {
+  isLoading: boolean;
+  testRuleResponse: {};
+}
+
+export class TestRuleButton extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = { isLoading: false, testRuleResponse: {} };
+  }
+
+  componentDidMount() {
+    this.testRule();
+  }
+
+  async testRule() {
+    const { panelId, dashboard } = this.props;
+    const payload = { dashboard: dashboard.getSaveModelClone(), panelId };
+    const testRuleResponse = await getBackendSrv().post(`/api/alerts/test`, payload);
+    this.setState(prevState => ({ ...prevState, isLoading: false, testRuleResponse }));
+  }
+
+  render() {
+    const { testRuleResponse, isLoading } = this.state;
+    const { LoadingPlaceholder } = this.props;
+
+    if (isLoading === true) {
+      return <LoadingPlaceholder text="Evaluating rule" />;
+    }
+
+    return (
+      <>
+        <JSONFormatter json={testRuleResponse} />
+      </>
+    );
+  }
+}

From 8b8af6436c3b392dcf56b103db950c814251f743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 9 Jan 2019 11:38:10 +0100
Subject: [PATCH 220/352] Removed Test Rule button from Angular and view

---
 public/app/features/alerting/AlertTabCtrl.ts    | 17 -----------------
 .../features/alerting/partials/alert_tab.html   | 14 --------------
 2 files changed, 31 deletions(-)

diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index 2be25e9df6a..af00e79b085 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/public/app/features/alerting/AlertTabCtrl.ts
@@ -9,8 +9,6 @@ import appEvents from 'app/core/app_events';
 export class AlertTabCtrl {
   panel: any;
   panelCtrl: any;
-  testing: boolean;
-  testResult: any;
   subTabIndex: number;
   conditionTypes: any;
   alert: any;
@@ -406,21 +404,6 @@ export class AlertTabCtrl {
       },
     });
   }
-
-  test() {
-    this.testing = true;
-    this.testResult = false;
-
-    const payload = {
-      dashboard: this.dashboardSrv.getCurrent().getSaveModelClone(),
-      panelId: this.panelCtrl.panel.id,
-    };
-
-    return this.backendSrv.post('/api/alerts/test', payload).then(res => {
-      this.testResult = res;
-      this.testing = false;
-    });
-  }
 }
 
 /** @ngInject */
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index da862203da6..90e0c7bbac2 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -121,20 +121,6 @@
             </div>
           </div>
         </div>
-
-        <div class="gf-form-button-row">
-          <button class="btn btn-inverse" ng-click="ctrl.test()">
-            Test Rule
-          </button>
-        </div>
-      </div>
-
-      <div class="gf-form-group" ng-if="ctrl.testing">
-        Evaluating rule <i class="fa fa-spinner fa-spin"></i>
-      </div>
-
-      <div class="gf-form-group" ng-if="ctrl.testResult">
-        <json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
       </div>
     </div>
   </div>

From 9b8a5333cb8cf3bcf41ec39c9f07d9270febad3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 9 Jan 2019 11:39:56 +0100
Subject: [PATCH 221/352] Added tests for TestRuleButton

---
 .../features/alerting/TestRuleButton.test.tsx | 44 +++++++++++++++++++
 .../TestRuleButton.test.tsx.snap              | 15 +++++++
 2 files changed, 59 insertions(+)
 create mode 100644 public/app/features/alerting/TestRuleButton.test.tsx
 create mode 100644 public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap

diff --git a/public/app/features/alerting/TestRuleButton.test.tsx b/public/app/features/alerting/TestRuleButton.test.tsx
new file mode 100644
index 00000000000..ae3b570cf43
--- /dev/null
+++ b/public/app/features/alerting/TestRuleButton.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DashboardModel } from '../dashboard/dashboard_model';
+import { Props, TestRuleButton } from './TestRuleButton';
+
+jest.mock('app/core/services/backend_srv', () => ({
+  getBackendSrv: () => ({
+    post: jest.fn(),
+  }),
+}));
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    panelId: 1,
+    dashboard: new DashboardModel({ panels: [{ id: 1 }] }),
+    LoadingPlaceholder: {},
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<TestRuleButton {...props} />);
+
+  return { wrapper, instance: wrapper.instance() as TestRuleButton };
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('Life cycle', () => {
+  describe('component did mount', () => {
+    it('should call testRule', () => {
+      const { instance } = setup();
+      instance.testRule = jest.fn();
+      instance.componentDidMount();
+
+      expect(instance.testRule).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap b/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
new file mode 100644
index 00000000000..0e1c95d7233
--- /dev/null
+++ b/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<Fragment>
+  <JSONFormatter
+    config={
+      Object {
+        "animateOpen": true,
+      }
+    }
+    json={Object {}}
+    open={3}
+  />
+</Fragment>
+`;

From 7fea1f84c0f5a206ba393e1406b35e82b2163a35 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Fri, 14 Dec 2018 16:10:16 +0100
Subject: [PATCH 222/352] build: release of debs to our debian repo.

---
 .circleci/config.yml                    | 12 +++++++-
 scripts/build/load-signing-key.sh       |  7 +++++
 scripts/build/update_repo/aptly.conf    | 27 ++++++++++++++++++
 scripts/build/update_repo/sign-repo.sh  |  7 +++++
 scripts/build/update_repo/update-deb.sh | 38 +++++++++++++++++++++++++
 scripts/build/update_repo/update-rpm.sh |  1 +
 6 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 scripts/build/load-signing-key.sh
 create mode 100644 scripts/build/update_repo/aptly.conf
 create mode 100755 scripts/build/update_repo/sign-repo.sh
 create mode 100755 scripts/build/update_repo/update-deb.sh
 create mode 100755 scripts/build/update_repo/update-rpm.sh

diff --git a/.circleci/config.yml b/.circleci/config.yml
index dba6c5f8bd0..1a1617ed407 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -398,8 +398,9 @@ jobs:
 
   deploy-release:
     docker:
-      - image: grafana/grafana-ci-deploy:1.0.0
+      - image: xlson/aptly-ci:0.1
     steps:
+      - checkout
       - attach_workspace:
           at: .
       - run:
@@ -417,6 +418,15 @@ jobs:
       - run:
           name: Deploy to Grafana.com
           command: './scripts/build/publish.sh'
+      - run:
+          name: Load GPG private key
+          comand: './scripts/build/load-signing-key.sh'
+      - run:
+          name: Update Debian repository
+          command: './scripts/build/update_repo/update-deb.sh "oss" "$GPG_KEY_PASSWORD"'
+      - run:
+          name: Update RPM repository
+          command: 'ls'
 
 workflows:
   version: 2
diff --git a/scripts/build/load-signing-key.sh b/scripts/build/load-signing-key.sh
new file mode 100644
index 00000000000..aa70d289443
--- /dev/null
+++ b/scripts/build/load-signing-key.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -e
+
+git clone git@github.com:torkelo/private.git ~/private-repo
+gpg --batch --allow-secret-key-import --import ~/private-repo/signing/private.key
+pkill gpg-agent
\ No newline at end of file
diff --git a/scripts/build/update_repo/aptly.conf b/scripts/build/update_repo/aptly.conf
new file mode 100644
index 00000000000..5d2a64cd88d
--- /dev/null
+++ b/scripts/build/update_repo/aptly.conf
@@ -0,0 +1,27 @@
+{
+  "rootDir": "/deb-repo/db",
+  "downloadConcurrency": 4,
+  "downloadSpeedLimit": 0,
+  "architectures": [],
+  "dependencyFollowSuggests": false,
+  "dependencyFollowRecommends": false,
+  "dependencyFollowAllVariants": false,
+  "dependencyFollowSource": false,
+  "dependencyVerboseResolve": false,
+  "gpgDisableSign": false,
+  "gpgDisableVerify": false,
+  "gpgProvider": "gpg2",
+  "downloadSourcePackages": false,
+  "skipLegacyPool": true,
+  "ppaDistributorID": "ubuntu",
+  "ppaCodename": "",
+  "skipContentsPublishing": false,
+  "FileSystemPublishEndpoints": {
+    "repo": {
+      "rootDir": "/deb-repo/repo",
+      "linkMethod": "copy"
+    }
+  },
+  "S3PublishEndpoints": {},
+  "SwiftPublishEndpoints": {}
+}
diff --git a/scripts/build/update_repo/sign-repo.sh b/scripts/build/update_repo/sign-repo.sh
new file mode 100755
index 00000000000..eb2922104fe
--- /dev/null
+++ b/scripts/build/update_repo/sign-repo.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env expect
+
+set password [lindex $argv 0]
+spawn aptly publish repo grafana filesystem:repo:grafana
+expect "Enter passphrase: "
+send -- "$password\r"
+expect eof
diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
new file mode 100755
index 00000000000..08f5bd7ef6f
--- /dev/null
+++ b/scripts/build/update_repo/update-deb.sh
@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+
+RELEASE_TYPE="${1:-}"
+GPG_PASS="${2:-}"
+
+if [ -z "$RELEASE_TYPE" -o -z "$GPG_PASS" ]; then
+    exit 1
+fi
+
+set -e
+
+# Setup environment
+cp scripts/build/update_repo/aptly.conf /etc/aptly.conf
+mkdir -p /deb-repo/db
+mkdir -p /deb-repo/repo
+
+# Download the database
+gsutil -m rsync -r gs://grafana-aptly-db/repo-db /deb-repo/db
+
+# Add the new release to the repo
+set +e
+aptly publish drop squeeze filesystem:repo:grafana
+set -e
+aptly repo add grafana ./dist
+
+# Setup signing and sign the repo
+
+echo "allow-loopback-pinentry" > ~/.gnupg/gpg-agent.conf
+echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
+
+./scripts/build/update_repo/sign-repo.sh "$GPG_PASS"
+
+# Update the repo and db on gcp
+gsutil -m rsync -r -d /deb-repo/db gs://grafana-aptly-db/repo-db
+gsutil -m rsync -r -d /deb-repo/repo/grafana "gs://grafana-repo/$RELEASE_TYPE/deb"
+
+# usage:
+# deb https://grafana-repo.storage.googleapis.com/oss/deb squeeze main
\ No newline at end of file
diff --git a/scripts/build/update_repo/update-rpm.sh b/scripts/build/update_repo/update-rpm.sh
new file mode 100755
index 00000000000..212c4ba239e
--- /dev/null
+++ b/scripts/build/update_repo/update-rpm.sh
@@ -0,0 +1 @@
+#!/usr/bin/env bash
\ No newline at end of file

From a26a10cfd1ea2b0e571953aef1ca893746989cc9 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Mon, 17 Dec 2018 11:09:35 +0100
Subject: [PATCH 223/352] build: repo update input error.

---
 scripts/build/update_repo/update-deb.sh | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index 08f5bd7ef6f..d1694f0fee0 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -4,6 +4,7 @@ RELEASE_TYPE="${1:-}"
 GPG_PASS="${2:-}"
 
 if [ -z "$RELEASE_TYPE" -o -z "$GPG_PASS" ]; then
+    echo "Both RELEASE_TYPE (arg 1) and GPG_PASS (arg 2) has to be set"
     exit 1
 fi
 
@@ -35,4 +36,7 @@ gsutil -m rsync -r -d /deb-repo/db gs://grafana-aptly-db/repo-db
 gsutil -m rsync -r -d /deb-repo/repo/grafana "gs://grafana-repo/$RELEASE_TYPE/deb"
 
 # usage:
-# deb https://grafana-repo.storage.googleapis.com/oss/deb squeeze main
\ No newline at end of file
+# deb https://grafana-repo.storage.googleapis.com/oss/deb squeeze main
+#
+# later:
+# deb https://repo.grafana.com/oss/deb squeeze main

From c3e23d7574face9ef72747faca1b1e92da9bc9d2 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Mon, 17 Dec 2018 17:19:55 +0100
Subject: [PATCH 224/352] build: rpm repo deploy.

---
 .circleci/config.yml                          |  2 +-
 .../{sign-repo.sh => sign-deb-repo.sh}        |  0
 scripts/build/update_repo/sign-rpm-repo.sh    |  7 +++
 scripts/build/update_repo/update-deb.sh       |  2 +-
 scripts/build/update_repo/update-rpm.sh       | 44 ++++++++++++++++++-
 5 files changed, 52 insertions(+), 3 deletions(-)
 rename scripts/build/update_repo/{sign-repo.sh => sign-deb-repo.sh} (100%)
 create mode 100755 scripts/build/update_repo/sign-rpm-repo.sh

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1a1617ed407..b5c123bad58 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -426,7 +426,7 @@ jobs:
           command: './scripts/build/update_repo/update-deb.sh "oss" "$GPG_KEY_PASSWORD"'
       - run:
           name: Update RPM repository
-          command: 'ls'
+          command: './scripts/build/update_repo/update-rpm.sh "oss" "$GPG_KEY_PASSWORD"'
 
 workflows:
   version: 2
diff --git a/scripts/build/update_repo/sign-repo.sh b/scripts/build/update_repo/sign-deb-repo.sh
similarity index 100%
rename from scripts/build/update_repo/sign-repo.sh
rename to scripts/build/update_repo/sign-deb-repo.sh
diff --git a/scripts/build/update_repo/sign-rpm-repo.sh b/scripts/build/update_repo/sign-rpm-repo.sh
new file mode 100755
index 00000000000..f7e80756127
--- /dev/null
+++ b/scripts/build/update_repo/sign-rpm-repo.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env expect
+
+set password [lindex $argv 0]
+spawn gpg --detach-sign --armor /rpm-repo/repodata/repomd.xml
+expect "Enter passphrase: "
+send -- "$password\r"
+expect eof
diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index d1694f0fee0..f2eb2f0dfd3 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -29,7 +29,7 @@ aptly repo add grafana ./dist
 echo "allow-loopback-pinentry" > ~/.gnupg/gpg-agent.conf
 echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
 
-./scripts/build/update_repo/sign-repo.sh "$GPG_PASS"
+./scripts/build/update_repo/sign-deb-repo.sh "$GPG_PASS"
 
 # Update the repo and db on gcp
 gsutil -m rsync -r -d /deb-repo/db gs://grafana-aptly-db/repo-db
diff --git a/scripts/build/update_repo/update-rpm.sh b/scripts/build/update_repo/update-rpm.sh
index 212c4ba239e..ca943957fe4 100755
--- a/scripts/build/update_repo/update-rpm.sh
+++ b/scripts/build/update_repo/update-rpm.sh
@@ -1 +1,43 @@
-#!/usr/bin/env bash
\ No newline at end of file
+#!/usr/bin/env bash
+
+RELEASE_TYPE="${1:-}"
+GPG_PASS="${2:-}"
+
+if [ -z "$RELEASE_TYPE" -o -z "$GPG_PASS" ]; then
+    echo "Both RELEASE_TYPE (arg 1) and GPG_PASS (arg 2) has to be set"
+    exit 1
+fi
+
+set -e
+
+# Setup environment
+mkdir -p /rpm-repo
+
+# Download the database
+gsutil -m rsync -r "gs://grafana-repo/$RELEASE_TYPE/rpm" /rpm-repo
+
+# Add the new release to the repo
+cp ./dist/*.rpm /rpm-repo
+cd /rpm-repo
+createrepo .
+
+# Setup signing and sign the repo
+
+echo "allow-loopback-pinentry" > ~/.gnupg/gpg-agent.conf
+echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
+
+./scripts/build/update_repo/sign-rpm-repo.sh "$GPG_PASS"
+
+# Update the repo and db on gcp
+gsutil -m rsync -r -d /rpm-repo "gs://grafana-repo/$RELEASE_TYPE/rpm"
+
+# usage:
+# [grafana]
+# name=grafana
+# baseurl=https://grafana-repo.storage.googleapis.com/oss/rpm
+# repo_gpgcheck=1
+# enabled=1
+# gpgcheck=1
+# gpgkey=https://grafana-repo.storage.googleapis.com/gpg.key https://grafanarel.s3.amazonaws.com/RPM-GPG-KEY-grafana
+# sslverify=1
+# sslcacert=/etc/pki/tls/certs/ca-bundle.crt# later:

From 919617ef963037c44c223c8e1ed8240c87392608 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Tue, 18 Dec 2018 15:30:51 +0100
Subject: [PATCH 225/352] build: only adds the correct packages to the repo.

---
 scripts/build/update_repo/update-deb.sh | 7 ++++---
 scripts/build/update_repo/update-rpm.sh | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index f2eb2f0dfd3..15c555d3426 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -14,14 +14,15 @@ set -e
 cp scripts/build/update_repo/aptly.conf /etc/aptly.conf
 mkdir -p /deb-repo/db
 mkdir -p /deb-repo/repo
+mkdir -p /deb-repo/tmp
 
 # Download the database
 gsutil -m rsync -r gs://grafana-aptly-db/repo-db /deb-repo/db
 
 # Add the new release to the repo
-set +e
-aptly publish drop squeeze filesystem:repo:grafana
-set -e
+aptly publish drop squeeze filesystem:repo:grafana || true
+cp ./dist/*.deb /deb-repo/tmp
+rm /deb-repo/tmp/grafana_latest*.deb || true
 aptly repo add grafana ./dist
 
 # Setup signing and sign the repo
diff --git a/scripts/build/update_repo/update-rpm.sh b/scripts/build/update_repo/update-rpm.sh
index ca943957fe4..b89468938a6 100755
--- a/scripts/build/update_repo/update-rpm.sh
+++ b/scripts/build/update_repo/update-rpm.sh
@@ -18,6 +18,7 @@ gsutil -m rsync -r "gs://grafana-repo/$RELEASE_TYPE/rpm" /rpm-repo
 
 # Add the new release to the repo
 cp ./dist/*.rpm /rpm-repo
+rm /rpm-repo/grafana-latest-1*.rpm || true
 cd /rpm-repo
 createrepo .
 

From 31066aebb423ad5935d20449df85ef138ae1d772 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Thu, 20 Dec 2018 11:11:20 +0100
Subject: [PATCH 226/352] build: handles unexpected cases.

---
 scripts/build/update_repo/update-deb.sh | 5 +++--
 scripts/build/update_repo/update-rpm.sh | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index 15c555d3426..9184ed0369b 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -33,11 +33,12 @@ echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
 ./scripts/build/update_repo/sign-deb-repo.sh "$GPG_PASS"
 
 # Update the repo and db on gcp
-gsutil -m rsync -r -d /deb-repo/db gs://grafana-aptly-db/repo-db
+gsutil -m rsync -r -d /deb-repo/db gs://grafana-aptly-db/repo-db # TODO: support separate enterprise db
 gsutil -m rsync -r -d /deb-repo/repo/grafana "gs://grafana-repo/$RELEASE_TYPE/deb"
 
 # usage:
 # deb https://grafana-repo.storage.googleapis.com/oss/deb squeeze main
 #
 # later:
-# deb https://repo.grafana.com/oss/deb squeeze main
+# curl https://packages.grafana.com/gpg.key | apt-key add -
+# deb https://packages.grafana.com/oss/deb squeeze main
diff --git a/scripts/build/update_repo/update-rpm.sh b/scripts/build/update_repo/update-rpm.sh
index b89468938a6..a98d00a108d 100755
--- a/scripts/build/update_repo/update-rpm.sh
+++ b/scripts/build/update_repo/update-rpm.sh
@@ -27,6 +27,8 @@ createrepo .
 echo "allow-loopback-pinentry" > ~/.gnupg/gpg-agent.conf
 echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
 
+rm /rpm-repo/repodata/repomd.xml.asc || true
+pkill gpg-agent || true
 ./scripts/build/update_repo/sign-rpm-repo.sh "$GPG_PASS"
 
 # Update the repo and db on gcp

From a98c75121f7d30c5fda3ae8b6e0070501faf7e99 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Fri, 21 Dec 2018 12:26:31 +0100
Subject: [PATCH 227/352] build: adds aptly and createrepo to deploy tools.

---
 scripts/build/ci-deploy/Dockerfile      | 26 ++++++++++++++++++++++---
 scripts/build/ci-deploy/build-deploy.sh |  2 +-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/scripts/build/ci-deploy/Dockerfile b/scripts/build/ci-deploy/Dockerfile
index deef612e761..f6683f9663c 100644
--- a/scripts/build/ci-deploy/Dockerfile
+++ b/scripts/build/ci-deploy/Dockerfile
@@ -1,5 +1,25 @@
+FROM circleci/golang:1.11
+
+RUN git clone https://github.com/aptly-dev/aptly $GOPATH/src/github.com/aptly-dev/aptly && \
+    cd $GOPATH/src/github.com/aptly-dev/aptly && \
+    # pin aptly to a specific commit after 1.3.0 that contains gpg2 support
+    git reset --hard a64807efdaf5e380bfa878c71bc88eae10d62be1 && \
+    make install
+
 FROM circleci/python:2.7-stretch
 
-RUN sudo pip install awscli && \
-  curl https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-222.0.0-linux-x86_64.tar.gz | \
-  sudo tar xvzf - -C /opt
+ENV PATH=$PATH:/opt/google-cloud-sdk/bin
+
+USER root
+
+RUN pip install awscli && \
+    curl https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-222.0.0-linux-x86_64.tar.gz | \
+      tar xvzf - -C /opt && \
+    apt update && \
+    apt install -y createrepo expect && \
+    apt-get autoremove -y && \
+    rm -rf /var/lib/apt/lists/*
+
+COPY --from=0 /go/bin/aptly /usr/local/bin/aptly
+
+USER circleci
diff --git a/scripts/build/ci-deploy/build-deploy.sh b/scripts/build/ci-deploy/build-deploy.sh
index c9ce805b30b..818f91013ac 100755
--- a/scripts/build/ci-deploy/build-deploy.sh
+++ b/scripts/build/ci-deploy/build-deploy.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-_version="1.0.0"
+_version="1.1.0"
 _tag="grafana/grafana-ci-deploy:${_version}"
 
 docker build -t $_tag .

From 89956a6a41f1d31c7a57fe46cb9da65dbfe1f6e7 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Fri, 21 Dec 2018 12:32:01 +0100
Subject: [PATCH 228/352] build: uses official deployment image.

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index b5c123bad58..8cbb124d7c3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -398,7 +398,7 @@ jobs:
 
   deploy-release:
     docker:
-      - image: xlson/aptly-ci:0.1
+      - image: grafana/grafana-ci-deploy:1.1.0
     steps:
       - checkout
       - attach_workspace:

From bbbeb78c17480c5f002c1f61cdb0bc4875495d96 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Fri, 4 Jan 2019 10:18:44 +0100
Subject: [PATCH 229/352] build: makes repo update enterprise compatible.

---
 scripts/build/update_repo/update-deb.sh | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index 9184ed0369b..92b0940d396 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -17,7 +17,7 @@ mkdir -p /deb-repo/repo
 mkdir -p /deb-repo/tmp
 
 # Download the database
-gsutil -m rsync -r gs://grafana-aptly-db/repo-db /deb-repo/db
+gsutil -m rsync -r "gs://grafana-aptly-db/$RELEASE_TYPE" /deb-repo/db
 
 # Add the new release to the repo
 aptly publish drop squeeze filesystem:repo:grafana || true
@@ -33,12 +33,9 @@ echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
 ./scripts/build/update_repo/sign-deb-repo.sh "$GPG_PASS"
 
 # Update the repo and db on gcp
-gsutil -m rsync -r -d /deb-repo/db gs://grafana-aptly-db/repo-db # TODO: support separate enterprise db
+gsutil -m rsync -r -d /deb-repo/db "gs://grafana-aptly-db/$RELEASE_TYPE"
 gsutil -m rsync -r -d /deb-repo/repo/grafana "gs://grafana-repo/$RELEASE_TYPE/deb"
 
 # usage:
-# deb https://grafana-repo.storage.googleapis.com/oss/deb squeeze main
-#
-# later:
 # curl https://packages.grafana.com/gpg.key | apt-key add -
-# deb https://packages.grafana.com/oss/deb squeeze main
+# deb https://packages.grafana.com/oss/deb stable main

From 8f5886e6d444a2933c3d9912ed5cc0b8bd4b26f1 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Fri, 4 Jan 2019 16:35:17 +0100
Subject: [PATCH 230/352] refactoring

---
 scripts/build/update_repo/update-deb.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index 92b0940d396..bc6833d07f2 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -12,9 +12,9 @@ set -e
 
 # Setup environment
 cp scripts/build/update_repo/aptly.conf /etc/aptly.conf
-mkdir -p /deb-repo/db
-mkdir -p /deb-repo/repo
-mkdir -p /deb-repo/tmp
+mkdir -p /deb-repo/db   \
+         /deb-repo/repo \
+         /deb-repo/tmp
 
 # Download the database
 gsutil -m rsync -r "gs://grafana-aptly-db/$RELEASE_TYPE" /deb-repo/db

From b9c4eb70b13a4ee9a5eae150ee8ef02480ed2ad7 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Tue, 8 Jan 2019 16:20:26 +0100
Subject: [PATCH 231/352] build: publishes beta releases to separate repos.

---
 .circleci/config.yml                          |  4 ++--
 .../{sign-deb-repo.sh => unlock-gpg-key.sh}   |  2 +-
 scripts/build/update_repo/update-deb.sh       | 23 +++++++++++++++----
 scripts/build/update_repo/update-rpm.sh       | 17 ++++++++++++--
 4 files changed, 37 insertions(+), 9 deletions(-)
 rename scripts/build/update_repo/{sign-deb-repo.sh => unlock-gpg-key.sh} (66%)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8cbb124d7c3..58357c1d490 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -423,10 +423,10 @@ jobs:
           comand: './scripts/build/load-signing-key.sh'
       - run:
           name: Update Debian repository
-          command: './scripts/build/update_repo/update-deb.sh "oss" "$GPG_KEY_PASSWORD"'
+          command: './scripts/build/update_repo/update-deb.sh "oss" "$GPG_KEY_PASSWORD" "$CIRCLE_TAG"'
       - run:
           name: Update RPM repository
-          command: './scripts/build/update_repo/update-rpm.sh "oss" "$GPG_KEY_PASSWORD"'
+          command: './scripts/build/update_repo/update-rpm.sh "oss" "$GPG_KEY_PASSWORD" "$CIRCLE_TAG"'
 
 workflows:
   version: 2
diff --git a/scripts/build/update_repo/sign-deb-repo.sh b/scripts/build/update_repo/unlock-gpg-key.sh
similarity index 66%
rename from scripts/build/update_repo/sign-deb-repo.sh
rename to scripts/build/update_repo/unlock-gpg-key.sh
index eb2922104fe..82f981809c2 100755
--- a/scripts/build/update_repo/sign-deb-repo.sh
+++ b/scripts/build/update_repo/unlock-gpg-key.sh
@@ -1,7 +1,7 @@
 #!/usr/bin/env expect
 
 set password [lindex $argv 0]
-spawn aptly publish repo grafana filesystem:repo:grafana
+spawn gpg --detach-sign --armor /tmp/sign-this
 expect "Enter passphrase: "
 send -- "$password\r"
 expect eof
diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index bc6833d07f2..b08ff36149f 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -2,12 +2,23 @@
 
 RELEASE_TYPE="${1:-}"
 GPG_PASS="${2:-}"
+RELEASE_TAG="${3:-}"
+REPO="grafana"
 
 if [ -z "$RELEASE_TYPE" -o -z "$GPG_PASS" ]; then
     echo "Both RELEASE_TYPE (arg 1) and GPG_PASS (arg 2) has to be set"
     exit 1
 fi
 
+if [[ "$RELEASE_TYPE" != "oss" && "$RELEASE_TYPE" != "enterprise" ]]; then
+    echo "RELEASE_TYPE (arg 1) must be either oss or enterprise."
+    exit 1
+fi
+
+if echo "$RELEASE_TAG" | grep -q "beta"; then
+    REPO="beta"
+fi
+
 set -e
 
 # Setup environment
@@ -20,22 +31,26 @@ mkdir -p /deb-repo/db   \
 gsutil -m rsync -r "gs://grafana-aptly-db/$RELEASE_TYPE" /deb-repo/db
 
 # Add the new release to the repo
-aptly publish drop squeeze filesystem:repo:grafana || true
+aptly publish drop grafana filesystem:repo:grafana || true
+aptly publish drop beta filesystem:repo:grafana || true
 cp ./dist/*.deb /deb-repo/tmp
 rm /deb-repo/tmp/grafana_latest*.deb || true
-aptly repo add grafana ./dist
+aptly repo add "$REPO" ./dist
 
 # Setup signing and sign the repo
 
 echo "allow-loopback-pinentry" > ~/.gnupg/gpg-agent.conf
 echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
 
-./scripts/build/update_repo/sign-deb-repo.sh "$GPG_PASS"
+./scripts/build/update_repo/unlock-gpg-key.sh "$GPG_PASS"
+
+aptly publish repo grafana filesystem:repo:grafana
+aptly publish repo beta filesystem:repo:grafana
 
 # Update the repo and db on gcp
 gsutil -m rsync -r -d /deb-repo/db "gs://grafana-aptly-db/$RELEASE_TYPE"
 gsutil -m rsync -r -d /deb-repo/repo/grafana "gs://grafana-repo/$RELEASE_TYPE/deb"
 
 # usage:
-# curl https://packages.grafana.com/gpg.key | apt-key add -
+# 
 # deb https://packages.grafana.com/oss/deb stable main
diff --git a/scripts/build/update_repo/update-rpm.sh b/scripts/build/update_repo/update-rpm.sh
index a98d00a108d..26eb2c5b329 100755
--- a/scripts/build/update_repo/update-rpm.sh
+++ b/scripts/build/update_repo/update-rpm.sh
@@ -3,18 +3,31 @@
 RELEASE_TYPE="${1:-}"
 GPG_PASS="${2:-}"
 
+RELEASE_TAG="${3:-}"
+REPO="rpm"
+
 if [ -z "$RELEASE_TYPE" -o -z "$GPG_PASS" ]; then
     echo "Both RELEASE_TYPE (arg 1) and GPG_PASS (arg 2) has to be set"
     exit 1
 fi
 
+if [[ "$RELEASE_TYPE" != "oss" && "$RELEASE_TYPE" != "enterprise" ]]; then
+    echo "RELEASE_TYPE (arg 1) must be either oss or enterprise."
+    exit 1
+fi
+
+if echo "$RELEASE_TAG" | grep -q "beta"; then
+    REPO="rpm-beta"
+fi
+
 set -e
 
 # Setup environment
+BUCKET="gs://grafana-repo/$RELEASE_TYPE/$REPO"
 mkdir -p /rpm-repo
 
 # Download the database
-gsutil -m rsync -r "gs://grafana-repo/$RELEASE_TYPE/rpm" /rpm-repo
+gsutil -m rsync -r "$BUCKET" /rpm-repo
 
 # Add the new release to the repo
 cp ./dist/*.rpm /rpm-repo
@@ -32,7 +45,7 @@ pkill gpg-agent || true
 ./scripts/build/update_repo/sign-rpm-repo.sh "$GPG_PASS"
 
 # Update the repo and db on gcp
-gsutil -m rsync -r -d /rpm-repo "gs://grafana-repo/$RELEASE_TYPE/rpm"
+gsutil -m rsync -r -d /rpm-repo "$BUCKET"
 
 # usage:
 # [grafana]

From 76e9607b25bfde8562c66550430474544339bb6c Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Tue, 8 Jan 2019 16:34:59 +0100
Subject: [PATCH 232/352] build: inline docs

---
 scripts/build/update_repo/update-rpm.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/build/update_repo/update-rpm.sh b/scripts/build/update_repo/update-rpm.sh
index 26eb2c5b329..caed3918216 100755
--- a/scripts/build/update_repo/update-rpm.sh
+++ b/scripts/build/update_repo/update-rpm.sh
@@ -50,10 +50,10 @@ gsutil -m rsync -r -d /rpm-repo "$BUCKET"
 # usage:
 # [grafana]
 # name=grafana
-# baseurl=https://grafana-repo.storage.googleapis.com/oss/rpm
+# baseurl=https://packages.grafana.com/oss/rpm
 # repo_gpgcheck=1
 # enabled=1
 # gpgcheck=1
-# gpgkey=https://grafana-repo.storage.googleapis.com/gpg.key https://grafanarel.s3.amazonaws.com/RPM-GPG-KEY-grafana
+# gpgkey=https://packages.grafana.com/gpg.key
 # sslverify=1
-# sslcacert=/etc/pki/tls/certs/ca-bundle.crt# later:
+# sslcacert=/etc/pki/tls/certs/ca-bundle.crt
\ No newline at end of file

From ad61bff3779b9079baeb01d56c00f51f73a6bcda Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Wed, 9 Jan 2019 11:17:21 +0100
Subject: [PATCH 233/352] build: deploys enterprise to its own repo.

---
 .circleci/config.yml                    | 16 +++++++++++++---
 scripts/build/update_repo/update-deb.sh |  2 ++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 58357c1d490..236d5aec398 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -323,7 +323,7 @@ jobs:
 
   deploy-enterprise-master:
     docker:
-      - image: grafana/grafana-ci-deploy:1.0.0
+      - image: grafana/grafana-ci-deploy:1.1.0
     steps:
       - attach_workspace:
           at: .
@@ -346,7 +346,7 @@ jobs:
 
   deploy-enterprise-release:
     docker:
-    - image: grafana/grafana-ci-deploy:1.0.0
+    - image: grafana/grafana-ci-deploy:1.1.0
     steps:
       - attach_workspace:
          at: .
@@ -365,10 +365,20 @@ jobs:
       - run:
           name: Deploy to Grafana.com
           command: './scripts/build/publish.sh --enterprise'
+      - run:
+          name: Load GPG private key
+          comand: './scripts/build/load-signing-key.sh'
+      - run:
+          name: Update Debian repository
+          command: './scripts/build/update_repo/update-deb.sh "enterprise" "$GPG_KEY_PASSWORD" "$CIRCLE_TAG"'
+      - run:
+          name: Update RPM repository
+          command: './scripts/build/update_repo/update-rpm.sh "enterprise" "$GPG_KEY_PASSWORD" "$CIRCLE_TAG"'
+
 
   deploy-master:
     docker:
-      - image: grafana/grafana-ci-deploy:1.0.0
+      - image: grafana/grafana-ci-deploy:1.1.0
     steps:
       - attach_workspace:
           at: .
diff --git a/scripts/build/update_repo/update-deb.sh b/scripts/build/update_repo/update-deb.sh
index b08ff36149f..89c5937b064 100755
--- a/scripts/build/update_repo/update-deb.sh
+++ b/scripts/build/update_repo/update-deb.sh
@@ -42,7 +42,9 @@ aptly repo add "$REPO" ./dist
 echo "allow-loopback-pinentry" > ~/.gnupg/gpg-agent.conf
 echo "pinentry-mode loopback" > ~/.gnupg/gpg.conf
 
+touch /tmp/sign-this
 ./scripts/build/update_repo/unlock-gpg-key.sh "$GPG_PASS"
+rm /tmp/sign-this /tmp/sign-this.asc
 
 aptly publish repo grafana filesystem:repo:grafana
 aptly publish repo beta filesystem:repo:grafana

From 67e8958aec04fed841c8ac0b7f3a6bb0bc4e4af3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 9 Jan 2019 11:49:17 +0100
Subject: [PATCH 234/352] Fixed a small bug when toggling items in toolbar

---
 public/app/features/dashboard/dashgrid/EditorTabBody.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index b7da81a23f8..95397b884c8 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -52,7 +52,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
   onToggleToolBarView = (item: EditorToolbarView) => {
     this.setState({
       openView: item,
-      isOpen: !this.state.isOpen,
+      isOpen: this.state.openView !== item ? true : !this.state.isOpen,
     });
   };
 

From 6e3225c29e399ce4d0837975773a2acb93cd61d7 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 13:09:26 +0100
Subject: [PATCH 235/352] Removed unused refClassNameprops from Propper

---
 packages/grafana-ui/src/components/Tooltip/Popper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index b405d4c4328..f6f9fa6f73a 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -26,7 +26,6 @@ interface Props extends React.DOMAttributes<HTMLDivElement> {
   show: boolean;
   placement?: PopperJS.Placement;
   content: string | ((props: any) => JSX.Element);
-  refClassName?: string;
   referenceElement: PopperJS.ReferenceObject;
   theme?: Themes;
 }

From 236d7b12138928eee17560cb3071e2414651f3bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 9 Jan 2019 13:20:50 +0100
Subject: [PATCH 236/352] Changes after PR comments

---
 .../app/features/alerting/TestRuleButton.tsx   | 14 +++++---------
 .../__snapshots__/TestRuleButton.test.tsx.snap | 18 ++++++++----------
 .../dashboard/dashgrid/EditorTabBody.tsx       |  2 +-
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/public/app/features/alerting/TestRuleButton.tsx b/public/app/features/alerting/TestRuleButton.tsx
index 032d7c7e4f8..f9927b1a182 100644
--- a/public/app/features/alerting/TestRuleButton.tsx
+++ b/public/app/features/alerting/TestRuleButton.tsx
@@ -15,10 +15,10 @@ interface State {
 }
 
 export class TestRuleButton extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = { isLoading: false, testRuleResponse: {} };
-  }
+  readonly state: State = {
+    isLoading: false,
+    testRuleResponse: {},
+  };
 
   componentDidMount() {
     this.testRule();
@@ -39,10 +39,6 @@ export class TestRuleButton extends PureComponent<Props, State> {
       return <LoadingPlaceholder text="Evaluating rule" />;
     }
 
-    return (
-      <>
-        <JSONFormatter json={testRuleResponse} />
-      </>
-    );
+    return <JSONFormatter json={testRuleResponse} />;
   }
 }
diff --git a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap b/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
index 0e1c95d7233..d1ed3e64e99 100644
--- a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
+++ b/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
@@ -1,15 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<Fragment>
-  <JSONFormatter
-    config={
-      Object {
-        "animateOpen": true,
-      }
+<JSONFormatter
+  config={
+    Object {
+      "animateOpen": true,
     }
-    json={Object {}}
-    open={3}
-  />
-</Fragment>
+  }
+  json={Object {}}
+  open={3}
+/>
 `;
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 95397b884c8..ebf57613699 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -52,7 +52,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
   onToggleToolBarView = (item: EditorToolbarView) => {
     this.setState({
       openView: item,
-      isOpen: this.state.openView !== item ? true : !this.state.isOpen,
+      isOpen: this.state.openView !== item || !this.state.isOpen,
     });
   };
 

From d51f91f54be59826d2b0d08c4de877ad6459d44e Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 9 Jan 2019 13:56:15 +0100
Subject: [PATCH 237/352] unregister event listener correctly

---
 .../plugins/datasource/stackdriver/components/QueryEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 52c77abc879..3d3f12ec57d 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -62,8 +62,8 @@ export class QueryEditor extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    this.props.events.off('data-received');
-    this.props.events.off('data-error');
+    this.props.events.off('data-received', this.onDataReceived);
+    this.props.events.off('data-error', this.onDataError);
   }
 
   onDataReceived(dataList) {

From 6ab1abc131150ecb0aa615eed75711676fc43bd8 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 9 Jan 2019 14:02:22 +0100
Subject: [PATCH 238/352] chore: Remove ScrollBar component, superseded by
 CustomScrollbar

---
 .../core/components/ScrollBar/ScrollBar.tsx   | 78 -------------------
 1 file changed, 78 deletions(-)
 delete mode 100644 public/app/core/components/ScrollBar/ScrollBar.tsx

diff --git a/public/app/core/components/ScrollBar/ScrollBar.tsx b/public/app/core/components/ScrollBar/ScrollBar.tsx
deleted file mode 100644
index 24d17f67367..00000000000
--- a/public/app/core/components/ScrollBar/ScrollBar.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import baron from 'baron';
-
-export interface Props {
-  children: any;
-  className: string;
-}
-
-export default class ScrollBar extends React.Component<Props, any> {
-  private container: any;
-  private scrollbar: baron;
-
-  constructor(props) {
-    super(props);
-  }
-
-  componentDidMount() {
-    this.scrollbar = baron({
-      root: this.container.parentElement,
-      scroller: this.container,
-      bar: '.baron__bar',
-      barOnCls: '_scrollbar',
-      scrollingCls: '_scrolling',
-      track: '.baron__track',
-    });
-  }
-
-  componentDidUpdate() {
-    this.scrollbar.update();
-  }
-
-  componentWillUnmount() {
-    this.scrollbar.dispose();
-  }
-
-  // methods can be invoked by outside
-  setScrollTop(top) {
-    if (this.container) {
-      this.container.scrollTop = top;
-      this.scrollbar.update();
-
-      return true;
-    }
-    return false;
-  }
-
-  setScrollLeft(left) {
-    if (this.container) {
-      this.container.scrollLeft = left;
-      this.scrollbar.update();
-
-      return true;
-    }
-    return false;
-  }
-
-  update() {
-    this.scrollbar.update();
-  }
-
-  handleRef = ref => {
-    this.container = ref;
-  };
-
-  render() {
-    return (
-      <div className="baron baron__root baron__clipper">
-        <div className={this.props.className + ' baron__scroller'} ref={this.handleRef}>
-          {this.props.children}
-        </div>
-
-        <div className="baron__track">
-          <div className="baron__bar" />
-        </div>
-      </div>
-    );
-  }
-}

From 23996b364e98695597f32971f532d15dc3d9d785 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 9 Jan 2019 14:44:47 +0100
Subject: [PATCH 239/352] fix broken test

---
 .../datasource/stackdriver/components/Aggregations.test.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
index 7bc2c3cb536..160dd4d2105 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
@@ -48,7 +48,7 @@ describe('Aggregations', () => {
       });
       it('', () => {
         const options = wrapper.state().aggOptions[0].options;
-        expect(options.length).toEqual(1);
+        expect(options.length).toEqual(5);
         expect(options.map(o => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE']));
       });
     });

From 5f7e6a5c7378ebf4fa534e3b3de8b7f293c1f0a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20W=C3=BCrbach?= <johannes.wuerbach@googlemail.com>
Date: Thu, 20 Dec 2018 22:48:53 +0100
Subject: [PATCH 240/352] Docker image for ARM

---
 .circleci/config.yml                   | 44 +++++++++++++-------------
 build.go                               |  2 ++
 packaging/docker/Dockerfile            |  6 ++--
 packaging/docker/build.sh              | 34 +++++++++++++++++---
 packaging/docker/push_to_docker_hub.sh | 29 ++++++++++++++---
 scripts/build/build.sh                 |  7 ++++
 6 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 236d5aec398..3d66a8ef13b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -200,47 +200,47 @@ jobs:
             - dist/grafana*
 
   grafana-docker-master:
-    docker:
-      - image: docker:stable-git
+    machine:
+      image: circleci/classic:201808-01
     steps:
       - checkout
       - attach_workspace:
           at: .
-      - setup_remote_docker
       - run: docker info
-      - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
+      - run: docker run --privileged linuxkit/binfmt:v0.6
+      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
       - run: cd packaging/docker && ./build-deploy.sh "master-${CIRCLE_SHA1}"
-      - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
+      - run: rm packaging/docker/grafana-latest.linux-*.tar.gz
       - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
       - run: cd packaging/docker && ./build-enterprise.sh "master"
 
 
   grafana-docker-pr:
-    docker:
-      - image: docker:stable-git
+    machine:
+      image: circleci/classic:201808-01
     steps:
       - checkout
       - attach_workspace:
           at: .
-      - setup_remote_docker
       - run: docker info
-      - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
+      - run: docker run --privileged linuxkit/binfmt:v0.6
+      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
       - run: cd packaging/docker && ./build.sh "${CIRCLE_SHA1}"
 
   grafana-docker-release:
-      docker:
-        - image: docker:stable-git
-      steps:
-        - checkout
-        - attach_workspace:
-            at: .
-        - setup_remote_docker
-        - run: docker info
-        - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
-        - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
-        - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
-        - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
-        - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
+    machine:
+      image: circleci/classic:201808-01
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: docker info
+      - run: docker run --privileged linuxkit/binfmt:v0.6
+      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
+      - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
+      - run: rm packaging/docker/grafana-latest.linux-*.tar.gz
+      - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
+      - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
 
   build-enterprise:
     docker:
diff --git a/build.go b/build.go
index 9d5216de1d0..4486cd3deb9 100644
--- a/build.go
+++ b/build.go
@@ -164,6 +164,8 @@ func makeLatestDistCopies() {
 		"_amd64.deb":          "dist/grafana_latest_amd64.deb",
 		".x86_64.rpm":         "dist/grafana-latest-1.x86_64.rpm",
 		".linux-amd64.tar.gz": "dist/grafana-latest.linux-x64.tar.gz",
+		".linux-armv7.tar.gz": "dist/grafana-latest.linux-armv7.tar.gz",
+		".linux-arm64.tar.gz": "dist/grafana-latest.linux-arm64.tar.gz",
 	}
 
 	for _, file := range files {
diff --git a/packaging/docker/Dockerfile b/packaging/docker/Dockerfile
index 4d4f6539972..d4f2f2aa7a3 100644
--- a/packaging/docker/Dockerfile
+++ b/packaging/docker/Dockerfile
@@ -1,4 +1,5 @@
-FROM debian:stretch-slim
+ARG BASE_IMAGE=debian:stretch-slim
+FROM ${BASE_IMAGE}
 
 ARG GRAFANA_TGZ="grafana-latest.linux-x64.tar.gz"
 
@@ -10,7 +11,8 @@ COPY ${GRAFANA_TGZ} /tmp/grafana.tar.gz
 
 RUN mkdir /tmp/grafana && tar xfvz /tmp/grafana.tar.gz --strip-components=1 -C /tmp/grafana
 
-FROM debian:stretch-slim
+ARG BASE_IMAGE=debian:stretch-slim
+FROM ${BASE_IMAGE}
 
 ARG GF_UID="472"
 ARG GF_GID="472"
diff --git a/packaging/docker/build.sh b/packaging/docker/build.sh
index c303c71cd5f..860df4780b5 100755
--- a/packaging/docker/build.sh
+++ b/packaging/docker/build.sh
@@ -13,13 +13,37 @@ fi
 
 echo "Building ${_docker_repo}:${_grafana_version}"
 
-docker build \
-	--tag "${_docker_repo}:${_grafana_version}" \
-	--no-cache=true .
+export DOCKER_CLI_EXPERIMENTAL=enabled
+
+# Build grafana image for a specific arch
+docker_build () {
+	base_image=$1
+	grafana_tgz=$2
+	tag=$3
+
+  docker build \
+		--build-arg BASE_IMAGE=${base_image} \
+		--build-arg GRAFANA_TGZ=${grafana_tgz} \
+		--tag "${tag}" \
+		--no-cache=true .
+}
+
+# Tag docker images of all architectures
+docker_tag_all () {
+	repo=$1
+	tag=$2
+	docker tag "${_docker_repo}:${_grafana_version}" "${repo}:${tag}"
+	docker tag "${_docker_repo}-arm32v7-linux:${_grafana_version}" "${repo}-arm32v7-linux:${tag}"
+	docker tag "${_docker_repo}-arm64v8-linux:${_grafana_version}" "${repo}-arm64v8-linux:${tag}"
+}
+
+docker_build "debian:stretch-slim" "grafana-latest.linux-x64.tar.gz" "${_docker_repo}:${_grafana_version}"
+docker_build "arm32v7/debian:stretch-slim" "grafana-latest.linux-armv7.tar.gz" "${_docker_repo}-arm32v7-linux:${_grafana_version}"
+docker_build "arm64v8/debian:stretch-slim" "grafana-latest.linux-arm64.tar.gz" "${_docker_repo}-arm64v8-linux:${_grafana_version}"
 
 # Tag as 'latest' for official release; otherwise tag as grafana/grafana:master
 if echo "$_grafana_tag" | grep -q "^v"; then
-	docker tag "${_docker_repo}:${_grafana_version}" "${_docker_repo}:latest"
+	docker_tag_all "${_docker_repo}" "latest"
 else
-	docker tag "${_docker_repo}:${_grafana_version}" "grafana/grafana:master"
+	docker_tag_all "grafana/grafana" "master"
 fi
diff --git a/packaging/docker/push_to_docker_hub.sh b/packaging/docker/push_to_docker_hub.sh
index 526c216f8fa..b873dbe05e0 100755
--- a/packaging/docker/push_to_docker_hub.sh
+++ b/packaging/docker/push_to_docker_hub.sh
@@ -12,13 +12,34 @@ else
 	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
+export DOCKER_CLI_EXPERIMENTAL=enabled
+
 echo "pushing ${_docker_repo}:${_grafana_version}"
-docker push "${_docker_repo}:${_grafana_version}"
+
+
+docker_push_all () {
+	repo=$1
+	tag=$2
+
+	# Push each image individually
+	docker push "${repo}:${tag}"
+	docker push "${repo}-arm32v7-linux:${tag}"
+	docker push "${repo}-arm64v8-linux:${tag}"
+
+	# Create and push a multi-arch manifest
+	docker manifest create "${repo}:${tag}" \
+		"${repo}:${tag}" \
+  	"${repo}-arm32v7-linux:${tag}" \
+		"${repo}-arm64v8-linux:${tag}"
+
+	docker manifest push "${repo}:${tag}"
+}
+
+docker_push_all "${_docker_repo}" "${_grafana_version}"
 
 if echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -vq "beta"; then
 	echo "pushing ${_docker_repo}:latest"
-	docker push "${_docker_repo}:latest"
+	docker_push_all "${_docker_repo}" "latest"
 elif echo "$_grafana_tag" | grep -q "master"; then
-	echo "pushing grafana/grafana:master"
-	docker push grafana/grafana:master
+	docker_push_all "grafana/grafana" "master"
 fi
diff --git a/scripts/build/build.sh b/scripts/build/build.sh
index 8362942c6cd..1222053f1c8 100755
--- a/scripts/build/build.sh
+++ b/scripts/build/build.sh
@@ -8,6 +8,8 @@ set -e
 
 EXTRA_OPTS="$@"
 
+CCARMV7=arm-linux-gnueabihf-gcc
+CCARM64=aarch64-linux-gnu-gcc
 CCX64=/tmp/x86_64-centos6-linux-gnu/bin/x86_64-centos6-linux-gnu-gcc
 
 GOPATH=/go
@@ -26,6 +28,9 @@ fi
 
 echo "Build arguments: $OPT"
 
+go run build.go -goarch armv7 -cc ${CCARMV7} ${OPT} build
+go run build.go -goarch arm64 -cc ${CCARM64} ${OPT} build
+
 CC=${CCX64} go run build.go ${OPT} build
 
 yarn install --pure-lockfile --no-progress
@@ -44,3 +49,5 @@ source /etc/profile.d/rvm.sh
 
 echo "Packaging"
 go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only latest
+go run build.go -goos linux -pkg-arch armv7 ${OPT} package-only latest
+go run build.go -goos linux -pkg-arch arm64 ${OPT} package-only latest

From d8a91fa3557a0e8d22f6e3b0833d7a115e8049bc Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 9 Jan 2019 15:36:53 +0100
Subject: [PATCH 241/352] feat: Add brand as tooltip theme and use it on panel
 edit tabs #14271

---
 .../src/components/Tooltip/Popper.tsx          |  1 +
 .../src/components/Tooltip/_Tooltip.scss       | 18 ++++++++++++++----
 .../dashboard/dashgrid/PanelEditor.tsx         |  3 ++-
 public/sass/_variables.dark.scss               |  1 +
 public/sass/_variables.light.scss              |  1 +
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index f6f9fa6f73a..eb64df1cb6e 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -7,6 +7,7 @@ import Transition from 'react-transition-group/Transition';
 export enum Themes {
   Default = 'popper__background--default',
   Error = 'popper__background--error',
+  Brand = 'popper__background--brand',
 }
 
 const defaultTransitionStyles = {
diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index afa629d4043..c8fa099cce6 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
@@ -1,5 +1,13 @@
 $popper-margin-from-ref: 5px;
 
+
+@mixin popper-theme($backgroundColor, $arrowColor) {
+  background: $backgroundColor;
+  .popper__arrow {
+    border-color: $arrowColor;
+  }
+}
+
 .popper {
   position: absolute;
   z-index: $zindex-tooltip;
@@ -16,10 +24,12 @@ $popper-margin-from-ref: 5px;
 
   // Themes
   &.popper__background--error {
-    background: $tooltipBackgroundError;
-    .popper__arrow {
-      border-color: $tooltipBackgroundError;
-    }
+    @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
+  }
+
+  &.popper__background--brand {
+    @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
+    @include gradient-vertical($red, $orange);
   }
 }
 
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 123204aa239..a09ff66f114 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -16,6 +16,7 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
 import { Tooltip } from '@grafana/ui';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -138,7 +139,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   return (
     <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <Tooltip content={`${tab.text}`} placement="auto">
+        <Tooltip content={`${tab.text}`} placement="auto" theme={Themes.Brand}>
           <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
         </Tooltip>
       </a>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index ded17e6ecfe..5640ff1775e 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -310,6 +310,7 @@ $graph-tooltip-bg: $dark-1;
 $tooltipBackground: $popover-help-bg;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
+$tooltipBackgroundBrand: $brand-primary;
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index ec25be52676..be8df389c1b 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -314,6 +314,7 @@ $graph-tooltip-bg: $gray-5;
 $tooltipBackground: $popover-help-bg;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
+$tooltipBackgroundBrand: $brand-primary;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';

From be57f6878cd094893005a179f66de19f17fe9fd5 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Wed, 9 Jan 2019 15:50:52 +0100
Subject: [PATCH 242/352] build: fixes docker push.

---
 packaging/docker/build.sh              |  8 ++++----
 packaging/docker/push_to_docker_hub.sh | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packaging/docker/build.sh b/packaging/docker/build.sh
index 860df4780b5..1bad2980d34 100755
--- a/packaging/docker/build.sh
+++ b/packaging/docker/build.sh
@@ -1,14 +1,13 @@
 #!/bin/sh
 
-_grafana_tag=$1
+_grafana_tag=${1:-}
+_docker_repo=${2:-grafana/grafana}
 
 # If the tag starts with v, treat this as a official release
 if echo "$_grafana_tag" | grep -q "^v"; then
 	_grafana_version=$(echo "${_grafana_tag}" | cut -d "v" -f 2)
-	_docker_repo=${2:-grafana/grafana}
 else
 	_grafana_version=$_grafana_tag
-	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
 echo "Building ${_docker_repo}:${_grafana_version}"
@@ -45,5 +44,6 @@ docker_build "arm64v8/debian:stretch-slim" "grafana-latest.linux-arm64.tar.gz" "
 if echo "$_grafana_tag" | grep -q "^v"; then
 	docker_tag_all "${_docker_repo}" "latest"
 else
-	docker_tag_all "grafana/grafana" "master"
+	docker_tag_all "${_docker_repo}" "master"
+	docker tag "${_docker_repo}:${_grafana_version} grafana/grafana-dev:${_grafana_version}"
 fi
diff --git a/packaging/docker/push_to_docker_hub.sh b/packaging/docker/push_to_docker_hub.sh
index b873dbe05e0..cef6d596851 100755
--- a/packaging/docker/push_to_docker_hub.sh
+++ b/packaging/docker/push_to_docker_hub.sh
@@ -1,15 +1,14 @@
 #!/bin/sh
 set -e
 
-_grafana_tag=$1
+_grafana_tag=${1:-}
+_docker_repo=${2:-grafana/grafana}
 
 # If the tag starts with v, treat this as a official release
 if echo "$_grafana_tag" | grep -q "^v"; then
 	_grafana_version=$(echo "${_grafana_tag}" | cut -d "v" -f 2)
-	_docker_repo=${2:-grafana/grafana}
 else
 	_grafana_version=$_grafana_tag
-	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
 export DOCKER_CLI_EXPERIMENTAL=enabled
@@ -35,11 +34,13 @@ docker_push_all () {
 	docker manifest push "${repo}:${tag}"
 }
 
-docker_push_all "${_docker_repo}" "${_grafana_version}"
-
 if echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -vq "beta"; then
 	echo "pushing ${_docker_repo}:latest"
 	docker_push_all "${_docker_repo}" "latest"
+	docker_push_all "${_docker_repo}" "${_grafana_version}"
+elif echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -q "beta"; then
+	docker_push_all "${_docker_repo}" "${_grafana_version}"
 elif echo "$_grafana_tag" | grep -q "master"; then
 	docker_push_all "grafana/grafana" "master"
+	docker push "grafana/grafana-dev:${_grafana_version}"
 fi

From a237a495b0b5bb0921735ff560d3ec977e4b90f1 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Wed, 9 Jan 2019 16:14:03 +0100
Subject: [PATCH 243/352] Revert "build: fixes docker push."

This reverts commit be57f6878cd094893005a179f66de19f17fe9fd5.
---
 packaging/docker/build.sh              |  8 ++++----
 packaging/docker/push_to_docker_hub.sh | 11 +++++------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packaging/docker/build.sh b/packaging/docker/build.sh
index 1bad2980d34..860df4780b5 100755
--- a/packaging/docker/build.sh
+++ b/packaging/docker/build.sh
@@ -1,13 +1,14 @@
 #!/bin/sh
 
-_grafana_tag=${1:-}
-_docker_repo=${2:-grafana/grafana}
+_grafana_tag=$1
 
 # If the tag starts with v, treat this as a official release
 if echo "$_grafana_tag" | grep -q "^v"; then
 	_grafana_version=$(echo "${_grafana_tag}" | cut -d "v" -f 2)
+	_docker_repo=${2:-grafana/grafana}
 else
 	_grafana_version=$_grafana_tag
+	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
 echo "Building ${_docker_repo}:${_grafana_version}"
@@ -44,6 +45,5 @@ docker_build "arm64v8/debian:stretch-slim" "grafana-latest.linux-arm64.tar.gz" "
 if echo "$_grafana_tag" | grep -q "^v"; then
 	docker_tag_all "${_docker_repo}" "latest"
 else
-	docker_tag_all "${_docker_repo}" "master"
-	docker tag "${_docker_repo}:${_grafana_version} grafana/grafana-dev:${_grafana_version}"
+	docker_tag_all "grafana/grafana" "master"
 fi
diff --git a/packaging/docker/push_to_docker_hub.sh b/packaging/docker/push_to_docker_hub.sh
index cef6d596851..b873dbe05e0 100755
--- a/packaging/docker/push_to_docker_hub.sh
+++ b/packaging/docker/push_to_docker_hub.sh
@@ -1,14 +1,15 @@
 #!/bin/sh
 set -e
 
-_grafana_tag=${1:-}
-_docker_repo=${2:-grafana/grafana}
+_grafana_tag=$1
 
 # If the tag starts with v, treat this as a official release
 if echo "$_grafana_tag" | grep -q "^v"; then
 	_grafana_version=$(echo "${_grafana_tag}" | cut -d "v" -f 2)
+	_docker_repo=${2:-grafana/grafana}
 else
 	_grafana_version=$_grafana_tag
+	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
 export DOCKER_CLI_EXPERIMENTAL=enabled
@@ -34,13 +35,11 @@ docker_push_all () {
 	docker manifest push "${repo}:${tag}"
 }
 
+docker_push_all "${_docker_repo}" "${_grafana_version}"
+
 if echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -vq "beta"; then
 	echo "pushing ${_docker_repo}:latest"
 	docker_push_all "${_docker_repo}" "latest"
-	docker_push_all "${_docker_repo}" "${_grafana_version}"
-elif echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -q "beta"; then
-	docker_push_all "${_docker_repo}" "${_grafana_version}"
 elif echo "$_grafana_tag" | grep -q "master"; then
 	docker_push_all "grafana/grafana" "master"
-	docker push "grafana/grafana-dev:${_grafana_version}"
 fi

From 13a962cc50d149cfdc9dece53adee47eec94f364 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Wed, 9 Jan 2019 16:14:41 +0100
Subject: [PATCH 244/352] Revert "Docker image for ARM"

This reverts commit 5f7e6a5c7378ebf4fa534e3b3de8b7f293c1f0a3.
---
 .circleci/config.yml                   | 44 +++++++++++++-------------
 build.go                               |  2 --
 packaging/docker/Dockerfile            |  6 ++--
 packaging/docker/build.sh              | 34 +++-----------------
 packaging/docker/push_to_docker_hub.sh | 29 +++--------------
 scripts/build/build.sh                 |  7 ----
 6 files changed, 33 insertions(+), 89 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3d66a8ef13b..236d5aec398 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -200,47 +200,47 @@ jobs:
             - dist/grafana*
 
   grafana-docker-master:
-    machine:
-      image: circleci/classic:201808-01
+    docker:
+      - image: docker:stable-git
     steps:
       - checkout
       - attach_workspace:
           at: .
+      - setup_remote_docker
       - run: docker info
-      - run: docker run --privileged linuxkit/binfmt:v0.6
-      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
+      - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
       - run: cd packaging/docker && ./build-deploy.sh "master-${CIRCLE_SHA1}"
-      - run: rm packaging/docker/grafana-latest.linux-*.tar.gz
+      - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
       - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
       - run: cd packaging/docker && ./build-enterprise.sh "master"
 
 
   grafana-docker-pr:
-    machine:
-      image: circleci/classic:201808-01
+    docker:
+      - image: docker:stable-git
     steps:
       - checkout
       - attach_workspace:
           at: .
+      - setup_remote_docker
       - run: docker info
-      - run: docker run --privileged linuxkit/binfmt:v0.6
-      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
+      - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
       - run: cd packaging/docker && ./build.sh "${CIRCLE_SHA1}"
 
   grafana-docker-release:
-    machine:
-      image: circleci/classic:201808-01
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run: docker info
-      - run: docker run --privileged linuxkit/binfmt:v0.6
-      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
-      - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
-      - run: rm packaging/docker/grafana-latest.linux-*.tar.gz
-      - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
-      - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
+      docker:
+        - image: docker:stable-git
+      steps:
+        - checkout
+        - attach_workspace:
+            at: .
+        - setup_remote_docker
+        - run: docker info
+        - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
+        - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
+        - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
+        - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
+        - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
 
   build-enterprise:
     docker:
diff --git a/build.go b/build.go
index 4486cd3deb9..9d5216de1d0 100644
--- a/build.go
+++ b/build.go
@@ -164,8 +164,6 @@ func makeLatestDistCopies() {
 		"_amd64.deb":          "dist/grafana_latest_amd64.deb",
 		".x86_64.rpm":         "dist/grafana-latest-1.x86_64.rpm",
 		".linux-amd64.tar.gz": "dist/grafana-latest.linux-x64.tar.gz",
-		".linux-armv7.tar.gz": "dist/grafana-latest.linux-armv7.tar.gz",
-		".linux-arm64.tar.gz": "dist/grafana-latest.linux-arm64.tar.gz",
 	}
 
 	for _, file := range files {
diff --git a/packaging/docker/Dockerfile b/packaging/docker/Dockerfile
index d4f2f2aa7a3..4d4f6539972 100644
--- a/packaging/docker/Dockerfile
+++ b/packaging/docker/Dockerfile
@@ -1,5 +1,4 @@
-ARG BASE_IMAGE=debian:stretch-slim
-FROM ${BASE_IMAGE}
+FROM debian:stretch-slim
 
 ARG GRAFANA_TGZ="grafana-latest.linux-x64.tar.gz"
 
@@ -11,8 +10,7 @@ COPY ${GRAFANA_TGZ} /tmp/grafana.tar.gz
 
 RUN mkdir /tmp/grafana && tar xfvz /tmp/grafana.tar.gz --strip-components=1 -C /tmp/grafana
 
-ARG BASE_IMAGE=debian:stretch-slim
-FROM ${BASE_IMAGE}
+FROM debian:stretch-slim
 
 ARG GF_UID="472"
 ARG GF_GID="472"
diff --git a/packaging/docker/build.sh b/packaging/docker/build.sh
index 860df4780b5..c303c71cd5f 100755
--- a/packaging/docker/build.sh
+++ b/packaging/docker/build.sh
@@ -13,37 +13,13 @@ fi
 
 echo "Building ${_docker_repo}:${_grafana_version}"
 
-export DOCKER_CLI_EXPERIMENTAL=enabled
-
-# Build grafana image for a specific arch
-docker_build () {
-	base_image=$1
-	grafana_tgz=$2
-	tag=$3
-
-  docker build \
-		--build-arg BASE_IMAGE=${base_image} \
-		--build-arg GRAFANA_TGZ=${grafana_tgz} \
-		--tag "${tag}" \
-		--no-cache=true .
-}
-
-# Tag docker images of all architectures
-docker_tag_all () {
-	repo=$1
-	tag=$2
-	docker tag "${_docker_repo}:${_grafana_version}" "${repo}:${tag}"
-	docker tag "${_docker_repo}-arm32v7-linux:${_grafana_version}" "${repo}-arm32v7-linux:${tag}"
-	docker tag "${_docker_repo}-arm64v8-linux:${_grafana_version}" "${repo}-arm64v8-linux:${tag}"
-}
-
-docker_build "debian:stretch-slim" "grafana-latest.linux-x64.tar.gz" "${_docker_repo}:${_grafana_version}"
-docker_build "arm32v7/debian:stretch-slim" "grafana-latest.linux-armv7.tar.gz" "${_docker_repo}-arm32v7-linux:${_grafana_version}"
-docker_build "arm64v8/debian:stretch-slim" "grafana-latest.linux-arm64.tar.gz" "${_docker_repo}-arm64v8-linux:${_grafana_version}"
+docker build \
+	--tag "${_docker_repo}:${_grafana_version}" \
+	--no-cache=true .
 
 # Tag as 'latest' for official release; otherwise tag as grafana/grafana:master
 if echo "$_grafana_tag" | grep -q "^v"; then
-	docker_tag_all "${_docker_repo}" "latest"
+	docker tag "${_docker_repo}:${_grafana_version}" "${_docker_repo}:latest"
 else
-	docker_tag_all "grafana/grafana" "master"
+	docker tag "${_docker_repo}:${_grafana_version}" "grafana/grafana:master"
 fi
diff --git a/packaging/docker/push_to_docker_hub.sh b/packaging/docker/push_to_docker_hub.sh
index b873dbe05e0..526c216f8fa 100755
--- a/packaging/docker/push_to_docker_hub.sh
+++ b/packaging/docker/push_to_docker_hub.sh
@@ -12,34 +12,13 @@ else
 	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
-export DOCKER_CLI_EXPERIMENTAL=enabled
-
 echo "pushing ${_docker_repo}:${_grafana_version}"
-
-
-docker_push_all () {
-	repo=$1
-	tag=$2
-
-	# Push each image individually
-	docker push "${repo}:${tag}"
-	docker push "${repo}-arm32v7-linux:${tag}"
-	docker push "${repo}-arm64v8-linux:${tag}"
-
-	# Create and push a multi-arch manifest
-	docker manifest create "${repo}:${tag}" \
-		"${repo}:${tag}" \
-  	"${repo}-arm32v7-linux:${tag}" \
-		"${repo}-arm64v8-linux:${tag}"
-
-	docker manifest push "${repo}:${tag}"
-}
-
-docker_push_all "${_docker_repo}" "${_grafana_version}"
+docker push "${_docker_repo}:${_grafana_version}"
 
 if echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -vq "beta"; then
 	echo "pushing ${_docker_repo}:latest"
-	docker_push_all "${_docker_repo}" "latest"
+	docker push "${_docker_repo}:latest"
 elif echo "$_grafana_tag" | grep -q "master"; then
-	docker_push_all "grafana/grafana" "master"
+	echo "pushing grafana/grafana:master"
+	docker push grafana/grafana:master
 fi
diff --git a/scripts/build/build.sh b/scripts/build/build.sh
index 1222053f1c8..8362942c6cd 100755
--- a/scripts/build/build.sh
+++ b/scripts/build/build.sh
@@ -8,8 +8,6 @@ set -e
 
 EXTRA_OPTS="$@"
 
-CCARMV7=arm-linux-gnueabihf-gcc
-CCARM64=aarch64-linux-gnu-gcc
 CCX64=/tmp/x86_64-centos6-linux-gnu/bin/x86_64-centos6-linux-gnu-gcc
 
 GOPATH=/go
@@ -28,9 +26,6 @@ fi
 
 echo "Build arguments: $OPT"
 
-go run build.go -goarch armv7 -cc ${CCARMV7} ${OPT} build
-go run build.go -goarch arm64 -cc ${CCARM64} ${OPT} build
-
 CC=${CCX64} go run build.go ${OPT} build
 
 yarn install --pure-lockfile --no-progress
@@ -49,5 +44,3 @@ source /etc/profile.d/rvm.sh
 
 echo "Packaging"
 go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only latest
-go run build.go -goos linux -pkg-arch armv7 ${OPT} package-only latest
-go run build.go -goos linux -pkg-arch arm64 ${OPT} package-only latest

From 1618e90844fa084e762021b1b8f0b421b7993569 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 17:00:10 +0100
Subject: [PATCH 245/352] Minor refactor of Gauge panel

---
 .../app/plugins/panel/gauge/GaugeOptions.tsx  |  8 +-
 public/app/plugins/panel/gauge/GaugePanel.tsx | 20 +++++
 .../plugins/panel/gauge/GaugePanelOptions.tsx | 46 ++++++++++
 .../plugins/panel/gauge/Threshold.test.tsx    |  5 +-
 public/app/plugins/panel/gauge/Thresholds.tsx |  5 +-
 .../panel/gauge/ValueMappings.test.tsx        |  6 +-
 .../app/plugins/panel/gauge/ValueMappings.tsx |  5 +-
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  5 +-
 public/app/plugins/panel/gauge/module.tsx     | 85 +------------------
 public/app/plugins/panel/gauge/types.ts       | 16 ++++
 10 files changed, 106 insertions(+), 95 deletions(-)
 create mode 100644 public/app/plugins/panel/gauge/GaugePanel.tsx
 create mode 100644 public/app/plugins/panel/gauge/GaugePanelOptions.tsx
 create mode 100644 public/app/plugins/panel/gauge/types.ts

diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx
index 655e9b0a65d..7607374b1b7 100644
--- a/public/app/plugins/panel/gauge/GaugeOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx
@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import { Switch } from 'app/core/components/Switch/Switch';
-import { OptionModuleProps } from './module';
 import { Label } from '../../../core/components/Label/Label';
+import { PanelOptionsProps } from '@grafana/ui';
+import { Options } from './types';
 
-export default class GaugeOptions extends PureComponent<OptionModuleProps> {
+export default class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
   onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
@@ -15,7 +16,8 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
   onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
 
   render() {
-    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options;
+    const { options } = this.props;
+    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
       <div className="section gf-form-group">
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
new file mode 100644
index 00000000000..5f1a438863f
--- /dev/null
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import { PanelProps, NullValueMode } from '@grafana/ui';
+import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import Gauge from 'app/viz/Gauge';
+import { Options } from './types';
+
+interface Props extends PanelProps<Options> {}
+
+export class GaugePanel extends PureComponent<Props> {
+  render() {
+    const { timeSeries, width, height } = this.props;
+
+    const vmSeries = getTimeSeriesVMs({
+      timeSeries: timeSeries,
+      nullValueMode: NullValueMode.Ignore,
+    });
+
+    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
+  }
+}
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
new file mode 100644
index 00000000000..2b16ef5a1fe
--- /dev/null
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
+import Thresholds from 'app/plugins/panel/gauge/Thresholds';
+import { BasicGaugeColor } from 'app/types';
+import { PanelOptionsProps } from '@grafana/ui';
+import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
+import { Options } from './types';
+import GaugeOptions from './GaugeOptions';
+
+export const defaultProps = {
+  options: {
+    baseColor: BasicGaugeColor.Green,
+    minValue: 0,
+    maxValue: 100,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    decimals: 0,
+    stat: 'avg',
+    unit: 'none',
+    mappings: [],
+    thresholds: [],
+  },
+};
+
+export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<Options>> {
+  static defaultProps = defaultProps;
+
+  render() {
+    const { onChange, options } = this.props;
+    return (
+      <>
+        <div className="form-section">
+          <ValueOptions onChange={onChange} options={options} />
+          <GaugeOptions onChange={onChange} options={options} />
+          <Thresholds onChange={onChange} options={options} />
+        </div>
+
+        <div className="form-section">
+          <ValueMappings onChange={onChange} options={options} />
+        </div>
+      </>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
index 3fa508b98a9..852b9f4c104 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Thresholds from './Thresholds';
-import { defaultProps, OptionsProps } from './module';
+import { defaultProps } from './GaugePanelOptions';
 import { BasicGaugeColor } from 'app/types';
 import { PanelOptionsProps } from '@grafana/ui';
+import { Options } from './types';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<OptionsProps> = {
+  const props: PanelOptionsProps<Options> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index dd0dcc1e33b..b4d4930e11d 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -1,15 +1,16 @@
 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
 import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
-import { OptionModuleProps } from './module';
 import { BasicGaugeColor, Threshold } from 'app/types';
+import { PanelOptionsProps } from '@grafana/ui';
+import { Options } from './types';
 
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export default class Thresholds extends PureComponent<OptionModuleProps, State> {
+export default class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
index fd9f56343b1..3e59cc76742 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ValueMappings from './ValueMappings';
-import { defaultProps, OptionModuleProps } from './module';
 import { MappingType } from 'app/types';
+import { PanelOptionsProps } from '@grafana/ui';
+import { Options } from './types';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
 const setup = (propOverrides?: object) => {
-  const props: OptionModuleProps = {
+  const props: PanelOptionsProps<Options> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx
index 2197002a135..be800cf2412 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.tsx
@@ -1,14 +1,15 @@
 import React, { PureComponent } from 'react';
 import MappingRow from './MappingRow';
-import { OptionModuleProps } from './module';
 import { MappingType, RangeMap, ValueMap } from 'app/types';
+import { PanelOptionsProps } from '@grafana/ui';
+import { Options } from './types';
 
 interface State {
   mappings: Array<ValueMap | RangeMap>;
   nextIdToAdd: number;
 }
 
-export default class ValueMappings extends PureComponent<OptionModuleProps, State> {
+export default class ValueMappings extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 445d6517c5a..4aafc0b0457 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
 import Select from 'app/core/components/Select/Select';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
-import { OptionModuleProps } from './module';
+import { PanelOptionsProps } from '@grafana/ui';
+import { Options } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
@@ -20,7 +21,7 @@ const statOptions = [
 
 const labelWidth = 6;
 
-export default class ValueOptions extends PureComponent<OptionModuleProps> {
+export default class ValueOptions extends PureComponent<PanelOptionsProps<Options>> {
   onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
 
   onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index dccd424b416..783e4825657 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,83 +1,4 @@
-import React, { PureComponent } from 'react';
-import Gauge from 'app/viz/Gauge';
-import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import ValueOptions from './ValueOptions';
-import GaugeOptions from './GaugeOptions';
-import Thresholds from './Thresholds';
-import ValueMappings from './ValueMappings';
-import { PanelOptionsProps, PanelProps, NullValueMode } from '@grafana/ui';
-import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from 'app/types';
+import GaugePanelOptions, { defaultProps } from './GaugePanelOptions';
+import { GaugePanel } from './GaugePanel';
 
-export interface OptionsProps {
-  baseColor: string;
-  decimals: number;
-  mappings: Array<RangeMap | ValueMap>;
-  maxValue: number;
-  minValue: number;
-  prefix: string;
-  showThresholdLabels: boolean;
-  showThresholdMarkers: boolean;
-  stat: string;
-  suffix: string;
-  thresholds: Threshold[];
-  unit: string;
-}
-
-export interface OptionModuleProps {
-  onChange: (item: any) => void;
-  options: OptionsProps;
-}
-
-export const defaultProps = {
-  options: {
-    baseColor: BasicGaugeColor.Green,
-    minValue: 0,
-    maxValue: 100,
-    prefix: '',
-    showThresholdMarkers: true,
-    showThresholdLabels: false,
-    suffix: '',
-    decimals: 0,
-    stat: 'avg',
-    unit: 'none',
-    mappings: [],
-    thresholds: [],
-  },
-};
-
-interface Props extends PanelProps<OptionsProps> {}
-
-class GaugePanel extends PureComponent<Props> {
-  render() {
-    const { timeSeries, width, height } = this.props;
-
-    const vmSeries = getTimeSeriesVMs({
-      timeSeries: timeSeries,
-      nullValueMode: NullValueMode.Ignore,
-    });
-
-    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
-  }
-}
-
-class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
-  static defaultProps = defaultProps;
-
-  render() {
-    const { onChange, options } = this.props;
-    return (
-      <div>
-        <div className="form-section">
-          <ValueOptions onChange={onChange} options={options} />
-          <GaugeOptions onChange={onChange} options={options} />
-          <Thresholds onChange={onChange} options={options} />
-        </div>
-        <div className="form-section">
-          <ValueMappings onChange={onChange} options={options} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export { GaugePanel as Panel, Options as PanelOptions, defaultProps as PanelDefaults };
+export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };
diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts
new file mode 100644
index 00000000000..60c4fd1581d
--- /dev/null
+++ b/public/app/plugins/panel/gauge/types.ts
@@ -0,0 +1,16 @@
+import { RangeMap, ValueMap, Threshold } from 'app/types';
+
+export interface Options {
+  baseColor: string;
+  decimals: number;
+  mappings: Array<RangeMap | ValueMap>;
+  maxValue: number;
+  minValue: number;
+  prefix: string;
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+  stat: string;
+  suffix: string;
+  thresholds: Threshold[];
+  unit: string;
+}

From cdc99e129fec9e9f3d0f012ead6b6ddb3b2d711f Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 17:21:14 +0100
Subject: [PATCH 246/352] React graph panel options component rename

---
 .../panel/graph2/{GraphOptions.tsx => GraphPanelOptions.tsx}  | 2 +-
 public/app/plugins/panel/graph2/module.tsx                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename public/app/plugins/panel/graph2/{GraphOptions.tsx => GraphPanelOptions.tsx} (95%)

diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphPanelOptions.tsx
similarity index 95%
rename from public/app/plugins/panel/graph2/GraphOptions.tsx
rename to public/app/plugins/panel/graph2/GraphPanelOptions.tsx
index 6bb4b2c13d5..32e68b7a1d4 100644
--- a/public/app/plugins/panel/graph2/GraphOptions.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanelOptions.tsx
@@ -9,7 +9,7 @@ import { Switch } from 'app/core/components/Switch/Switch';
 import { PanelOptionsProps } from '@grafana/ui';
 import { Options } from './types';
 
-export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
+export class GraphPanelOptions extends PureComponent<PanelOptionsProps<Options>> {
   onToggleLines = () => {
     this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
   };
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index ba761ca92cb..762d5609541 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -1,4 +1,4 @@
 import { GraphPanel } from './GraphPanel';
-import { GraphOptions } from './GraphOptions';
+import { GraphPanelOptions } from './GraphPanelOptions';
 
-export { GraphPanel as Panel, GraphOptions as PanelOptions };
+export { GraphPanel as Panel, GraphPanelOptions as PanelOptions };

From 78fe2db5e5264d04c143f0ae136f7eb137991128 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 9 Jan 2019 21:35:01 +0000
Subject: [PATCH 247/352] removing tests

---
 public/app/core/specs/kbn.test.ts | 493 ------------------------------
 1 file changed, 493 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 e621cdef632..00000000000
--- a/public/app/core/specs/kbn.test.ts
+++ /dev/null
@@ -1,493 +0,0 @@
-import kbn from '../utils/kbn';
-import * as dateMath from '../utils/datemath';
-import moment from 'moment';
-
-describe('unit format menu', () => {
-  const menu = kbn.getUnitFormats();
-  menu.map(submenu => {
-    describe('submenu ' + submenu.text, () => {
-      it('should have a title', () => {
-        expect(typeof submenu.text).toBe('string');
-      });
-
-      it('should have a submenu', () => {
-        expect(Array.isArray(submenu.submenu)).toBe(true);
-      });
-
-      submenu.submenu.map(entry => {
-        describe('entry ' + entry.text, () => {
-          it('should have a title', () => {
-            expect(typeof entry.text).toBe('string');
-          });
-          it('should have a format', () => {
-            expect(typeof entry.value).toBe('string');
-          });
-          it('should have a valid format', () => {
-            expect(typeof kbn.valueFormats[entry.value]).toBe('function');
-          });
-        });
-      });
-    });
-  });
-});
-
-function describeValueFormat(desc, value, tickSize, tickDecimals, result) {
-  describe('value format: ' + desc, () => {
-    it('should translate ' + value + ' as ' + result, () => {
-      const scaledDecimals = tickDecimals - Math.floor(Math.log(tickSize) / Math.LN10);
-      const str = kbn.valueFormats[desc](value, tickDecimals, scaledDecimals);
-      expect(str).toBe(result);
-    });
-  });
-}
-
-describeValueFormat('ms', 0.0024, 0.0005, 4, '0.0024 ms');
-describeValueFormat('ms', 100, 1, 0, '100 ms');
-describeValueFormat('ms', 1250, 10, 0, '1.25 s');
-describeValueFormat('ms', 1250, 300, 0, '1.3 s');
-describeValueFormat('ms', 65150, 10000, 0, '1.1 min');
-describeValueFormat('ms', 6515000, 1500000, 0, '1.8 hour');
-describeValueFormat('ms', 651500000, 150000000, 0, '8 day');
-
-describeValueFormat('none', 2.75e-10, 0, 10, '3e-10');
-describeValueFormat('none', 0, 0, 2, '0');
-describeValueFormat('dB', 10, 1000, 2, '10.00 dB');
-
-describeValueFormat('percent', 0, 0, 0, '0%');
-describeValueFormat('percent', 53, 0, 1, '53.0%');
-describeValueFormat('percentunit', 0.0, 0, 0, '0%');
-describeValueFormat('percentunit', 0.278, 0, 1, '27.8%');
-describeValueFormat('percentunit', 1.0, 0, 0, '100%');
-
-describeValueFormat('currencyUSD', 7.42, 10000, 2, '$7.42');
-describeValueFormat('currencyUSD', 1532.82, 1000, 1, '$1.53K');
-describeValueFormat('currencyUSD', 18520408.7, 10000000, 0, '$19M');
-
-describeValueFormat('bytes', -1.57e308, -1.57e308, 2, 'NA');
-
-describeValueFormat('ns', 25, 1, 0, '25 ns');
-describeValueFormat('ns', 2558, 50, 0, '2.56 µs');
-
-describeValueFormat('ops', 123, 1, 0, '123 ops');
-describeValueFormat('rps', 456000, 1000, -1, '456K rps');
-describeValueFormat('rps', 123456789, 1000000, 2, '123.457M rps');
-describeValueFormat('wps', 789000000, 1000000, -1, '789M wps');
-describeValueFormat('iops', 11000000000, 1000000000, -1, '11B iops');
-
-describeValueFormat('s', 1.23456789e-7, 1e-10, 8, '123.5 ns');
-describeValueFormat('s', 1.23456789e-4, 1e-7, 5, '123.5 µs');
-describeValueFormat('s', 1.23456789e-3, 1e-6, 4, '1.235 ms');
-describeValueFormat('s', 1.23456789e-2, 1e-5, 3, '12.35 ms');
-describeValueFormat('s', 1.23456789e-1, 1e-4, 2, '123.5 ms');
-describeValueFormat('s', 24, 1, 0, '24 s');
-describeValueFormat('s', 246, 1, 0, '4.1 min');
-describeValueFormat('s', 24567, 100, 0, '6.82 hour');
-describeValueFormat('s', 24567890, 10000, 0, '40.62 week');
-describeValueFormat('s', 24567890000, 1000000, 0, '778.53 year');
-
-describeValueFormat('m', 24, 1, 0, '24 min');
-describeValueFormat('m', 246, 10, 0, '4.1 hour');
-describeValueFormat('m', 6545, 10, 0, '4.55 day');
-describeValueFormat('m', 24567, 100, 0, '2.44 week');
-describeValueFormat('m', 24567892, 10000, 0, '46.7 year');
-
-describeValueFormat('h', 21, 1, 0, '21 hour');
-describeValueFormat('h', 145, 1, 0, '6.04 day');
-describeValueFormat('h', 1234, 100, 0, '7.3 week');
-describeValueFormat('h', 9458, 1000, 0, '1.08 year');
-
-describeValueFormat('d', 3, 1, 0, '3 day');
-describeValueFormat('d', 245, 100, 0, '35 week');
-describeValueFormat('d', 2456, 10, 0, '6.73 year');
-
-describe('date time formats', () => {
-  const epoch = 1505634997920;
-  const utcTime = moment.utc(epoch);
-  const browserTime = moment(epoch);
-
-  it('should format as iso date', () => {
-    const expected = browserTime.format('YYYY-MM-DD HH:mm:ss');
-    const actual = kbn.valueFormats.dateTimeAsIso(epoch);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as iso date (in UTC)', () => {
-    const expected = utcTime.format('YYYY-MM-DD HH:mm:ss');
-    const actual = kbn.valueFormats.dateTimeAsIso(epoch, true);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as iso date and skip date when today', () => {
-    const now = moment();
-    const expected = now.format('HH:mm:ss');
-    const actual = kbn.valueFormats.dateTimeAsIso(now.valueOf(), false);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as iso date (in UTC) and skip date when today', () => {
-    const now = moment.utc();
-    const expected = now.format('HH:mm:ss');
-    const actual = kbn.valueFormats.dateTimeAsIso(now.valueOf(), true);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as US date', () => {
-    const expected = browserTime.format('MM/DD/YYYY h:mm:ss a');
-    const actual = kbn.valueFormats.dateTimeAsUS(epoch, false);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as US date (in UTC)', () => {
-    const expected = utcTime.format('MM/DD/YYYY h:mm:ss a');
-    const actual = kbn.valueFormats.dateTimeAsUS(epoch, true);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as US date and skip date when today', () => {
-    const now = moment();
-    const expected = now.format('h:mm:ss a');
-    const actual = kbn.valueFormats.dateTimeAsUS(now.valueOf(), false);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as US date (in UTC) and skip date when today', () => {
-    const now = moment.utc();
-    const expected = now.format('h:mm:ss a');
-    const actual = kbn.valueFormats.dateTimeAsUS(now.valueOf(), true);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as from now with days', () => {
-    const daysAgo = moment().add(-7, 'd');
-    const expected = '7 days ago';
-    const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), false);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as from now with days (in UTC)', () => {
-    const daysAgo = moment.utc().add(-7, 'd');
-    const expected = '7 days ago';
-    const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), true);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as from now with minutes', () => {
-    const daysAgo = moment().add(-2, 'm');
-    const expected = '2 minutes ago';
-    const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), false);
-    expect(actual).toBe(expected);
-  });
-
-  it('should format as from now with minutes (in UTC)', () => {
-    const daysAgo = moment.utc().add(-2, 'm');
-    const expected = '2 minutes ago';
-    const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), true);
-    expect(actual).toBe(expected);
-  });
-});
-
-describe('kbn.toFixed and negative decimals', () => {
-  it('should treat as zero decimals', () => {
-    const str = kbn.toFixed(186.123, -2);
-    expect(str).toBe('186');
-  });
-});
-
-describe('kbn ms format when scaled decimals is null do not use it', () => {
-  it('should use specified decimals', () => {
-    const str = kbn.valueFormats['ms'](10000086.123, 1, null);
-    expect(str).toBe('2.8 hour');
-  });
-});
-
-describe('kbn kbytes format when scaled decimals is null do not use it', () => {
-  it('should use specified decimals', () => {
-    const str = kbn.valueFormats['kbytes'](10000000, 3, null);
-    expect(str).toBe('9.537 GiB');
-  });
-});
-
-describe('kbn deckbytes format when scaled decimals is null do not use it', () => {
-  it('should use specified decimals', () => {
-    const str = kbn.valueFormats['deckbytes'](10000000, 3, null);
-    expect(str).toBe('10.000 GB');
-  });
-});
-
-describe('kbn roundValue', () => {
-  it('should should handle null value', () => {
-    const str = kbn.roundValue(null, 2);
-    expect(str).toBe(null);
-  });
-  it('should round value', () => {
-    const str = kbn.roundValue(200.877, 2);
-    expect(str).toBe(200.88);
-  });
-});
-
-describe('calculateInterval', () => {
-  it('1h 100 resultion', () => {
-    const range = { from: dateMath.parse('now-1h'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 100, null);
-    expect(res.interval).toBe('30s');
-  });
-
-  it('10m 1600 resolution', () => {
-    const range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 1600, null);
-    expect(res.interval).toBe('500ms');
-    expect(res.intervalMs).toBe(500);
-  });
-
-  it('fixed user min interval', () => {
-    const range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 1600, '10s');
-    expect(res.interval).toBe('10s');
-    expect(res.intervalMs).toBe(10000);
-  });
-
-  it('short time range and user low limit', () => {
-    const range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 1600, '>10s');
-    expect(res.interval).toBe('10s');
-  });
-
-  it('large time range and user low limit', () => {
-    const range = { from: dateMath.parse('now-14d'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 1000, '>10s');
-    expect(res.interval).toBe('20m');
-  });
-
-  it('10s 900 resolution and user low limit in ms', () => {
-    const range = { from: dateMath.parse('now-10s'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 900, '>15ms');
-    expect(res.interval).toBe('15ms');
-  });
-
-  it('1d 1 resolution', () => {
-    const range = { from: dateMath.parse('now-1d'), to: dateMath.parse('now') };
-    const res = kbn.calculateInterval(range, 1, null);
-    expect(res.interval).toBe('1d');
-    expect(res.intervalMs).toBe(86400000);
-  });
-
-  it('86399s 1 resolution', () => {
-    const range = {
-      from: dateMath.parse('now-86390s'),
-      to: dateMath.parse('now'),
-    };
-    const res = kbn.calculateInterval(range, 1, null);
-    expect(res.interval).toBe('12h');
-    expect(res.intervalMs).toBe(43200000);
-  });
-});
-
-describe('hex', () => {
-  it('positive integer', () => {
-    const str = kbn.valueFormats.hex(100, 0);
-    expect(str).toBe('64');
-  });
-  it('negative integer', () => {
-    const str = kbn.valueFormats.hex(-100, 0);
-    expect(str).toBe('-64');
-  });
-  it('null', () => {
-    const str = kbn.valueFormats.hex(null, 0);
-    expect(str).toBe('');
-  });
-  it('positive float', () => {
-    const str = kbn.valueFormats.hex(50.52, 1);
-    expect(str).toBe('32.8');
-  });
-  it('negative float', () => {
-    const str = kbn.valueFormats.hex(-50.333, 2);
-    expect(str).toBe('-32.547AE147AE14');
-  });
-});
-
-describe('hex 0x', () => {
-  it('positive integeter', () => {
-    const str = kbn.valueFormats.hex0x(7999, 0);
-    expect(str).toBe('0x1F3F');
-  });
-  it('negative integer', () => {
-    const str = kbn.valueFormats.hex0x(-584, 0);
-    expect(str).toBe('-0x248');
-  });
-  it('null', () => {
-    const str = kbn.valueFormats.hex0x(null, 0);
-    expect(str).toBe('');
-  });
-  it('positive float', () => {
-    const str = kbn.valueFormats.hex0x(74.443, 3);
-    expect(str).toBe('0x4A.716872B020C4');
-  });
-  it('negative float', () => {
-    const str = kbn.valueFormats.hex0x(-65.458, 1);
-    expect(str).toBe('-0x41.8');
-  });
-});
-
-describe('duration', () => {
-  it('null', () => {
-    const str = kbn.toDuration(null, 0, 'millisecond');
-    expect(str).toBe('');
-  });
-  it('0 milliseconds', () => {
-    const str = kbn.toDuration(0, 0, 'millisecond');
-    expect(str).toBe('0 milliseconds');
-  });
-  it('1 millisecond', () => {
-    const str = kbn.toDuration(1, 0, 'millisecond');
-    expect(str).toBe('1 millisecond');
-  });
-  it('-1 millisecond', () => {
-    const str = kbn.toDuration(-1, 0, 'millisecond');
-    expect(str).toBe('1 millisecond ago');
-  });
-  it('seconds', () => {
-    const str = kbn.toDuration(1, 0, 'second');
-    expect(str).toBe('1 second');
-  });
-  it('minutes', () => {
-    const str = kbn.toDuration(1, 0, 'minute');
-    expect(str).toBe('1 minute');
-  });
-  it('hours', () => {
-    const str = kbn.toDuration(1, 0, 'hour');
-    expect(str).toBe('1 hour');
-  });
-  it('days', () => {
-    const str = kbn.toDuration(1, 0, 'day');
-    expect(str).toBe('1 day');
-  });
-  it('weeks', () => {
-    const str = kbn.toDuration(1, 0, 'week');
-    expect(str).toBe('1 week');
-  });
-  it('months', () => {
-    const str = kbn.toDuration(1, 0, 'month');
-    expect(str).toBe('1 month');
-  });
-  it('years', () => {
-    const str = kbn.toDuration(1, 0, 'year');
-    expect(str).toBe('1 year');
-  });
-  it('decimal days', () => {
-    const str = kbn.toDuration(1.5, 2, 'day');
-    expect(str).toBe('1 day, 12 hours, 0 minutes');
-  });
-  it('decimal months', () => {
-    const str = kbn.toDuration(1.5, 3, 'month');
-    expect(str).toBe('1 month, 2 weeks, 1 day, 0 hours');
-  });
-  it('no decimals', () => {
-    const str = kbn.toDuration(38898367008, 0, 'millisecond');
-    expect(str).toBe('1 year');
-  });
-  it('1 decimal', () => {
-    const str = kbn.toDuration(38898367008, 1, 'millisecond');
-    expect(str).toBe('1 year, 2 months');
-  });
-  it('too many decimals', () => {
-    const str = kbn.toDuration(38898367008, 20, 'millisecond');
-    expect(str).toBe('1 year, 2 months, 3 weeks, 4 days, 5 hours, 6 minutes, 7 seconds, 8 milliseconds');
-  });
-  it('floating point error', () => {
-    const str = kbn.toDuration(36993906007, 8, 'millisecond');
-    expect(str).toBe('1 year, 2 months, 0 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds');
-  });
-});
-
-describe('clock', () => {
-  it('null', () => {
-    const str = kbn.toClock(null, 0);
-    expect(str).toBe('');
-  });
-  it('size less than 1 second', () => {
-    const str = kbn.toClock(999, 0);
-    expect(str).toBe('999ms');
-  });
-  describe('size less than 1 minute', () => {
-    it('default', () => {
-      const str = kbn.toClock(59999);
-      expect(str).toBe('59s:999ms');
-    });
-    it('decimals equals 0', () => {
-      const str = kbn.toClock(59999, 0);
-      expect(str).toBe('59s');
-    });
-  });
-  describe('size less than 1 hour', () => {
-    it('default', () => {
-      const str = kbn.toClock(3599999);
-      expect(str).toBe('59m:59s:999ms');
-    });
-    it('decimals equals 0', () => {
-      const str = kbn.toClock(3599999, 0);
-      expect(str).toBe('59m');
-    });
-    it('decimals equals 1', () => {
-      const str = kbn.toClock(3599999, 1);
-      expect(str).toBe('59m:59s');
-    });
-  });
-  describe('size greater than or equal 1 hour', () => {
-    it('default', () => {
-      const str = kbn.toClock(7199999);
-      expect(str).toBe('01h:59m:59s:999ms');
-    });
-    it('decimals equals 0', () => {
-      const str = kbn.toClock(7199999, 0);
-      expect(str).toBe('01h');
-    });
-    it('decimals equals 1', () => {
-      const str = kbn.toClock(7199999, 1);
-      expect(str).toBe('01h:59m');
-    });
-    it('decimals equals 2', () => {
-      const str = kbn.toClock(7199999, 2);
-      expect(str).toBe('01h:59m:59s');
-    });
-  });
-  describe('size greater than or equal 1 day', () => {
-    it('default', () => {
-      const str = kbn.toClock(89999999);
-      expect(str).toBe('24h:59m:59s:999ms');
-    });
-    it('decimals equals 0', () => {
-      const str = kbn.toClock(89999999, 0);
-      expect(str).toBe('24h');
-    });
-    it('decimals equals 1', () => {
-      const str = kbn.toClock(89999999, 1);
-      expect(str).toBe('24h:59m');
-    });
-    it('decimals equals 2', () => {
-      const str = kbn.toClock(89999999, 2);
-      expect(str).toBe('24h:59m:59s');
-    });
-  });
-});
-
-describe('volume', () => {
-  it('1000m3', () => {
-    const str = kbn.valueFormats['m3'](1000, 1, null);
-    expect(str).toBe('1000.0 m³');
-  });
-});
-
-describe('hh:mm:ss', () => {
-  it('00:04:06', () => {
-    const str = kbn.valueFormats['dthms'](246, 1);
-    expect(str).toBe('00:04:06');
-  });
-  it('24:00:00', () => {
-    const str = kbn.valueFormats['dthms'](86400, 1);
-    expect(str).toBe('24:00:00');
-  });
-  it('6824413:53:20', () => {
-    const str = kbn.valueFormats['dthms'](24567890000, 1);
-    expect(str).toBe('6824413:53:20');
-  });
-});

From 13e6d2c5cb1c2d572b020055904a03861799218b Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 9 Jan 2019 22:05:29 +0000
Subject: [PATCH 248/352] fixing unitpicker

---
 public/app/core/components/Select/UnitPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
index 75885cbbb84..29fa2928045 100644
--- a/public/app/core/components/Select/UnitPicker.tsx
+++ b/public/app/core/components/Select/UnitPicker.tsx
@@ -23,7 +23,7 @@ export default class UnitPicker extends PureComponent<Props> {
       const options = group.submenu.map(unit => {
         return {
           label: unit.text,
-          value: unit.value,
+          value: unit.id,
         };
       });
 

From 31d35a6884dcad78903fd2d6c490a62be9638c80 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 9 Jan 2019 22:21:42 +0000
Subject: [PATCH 249/352] rename

---
 .../grafana-ui/src/utils/ValueFormats/valueFormats.ts  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts b/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
index e70a4d186c7..ade0115fef2 100644
--- a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
@@ -20,7 +20,7 @@ interface ValueFormatterIndex {
 // Globals & formats cache
 let categories: ValueFormatCategory[] = [];
 const index: ValueFormatterIndex = {};
-let hasBuildIndex = false;
+let hasBuiltIndex = false;
 
 export function toFixed(value: number, decimals?: number): string {
   if (value === null) {
@@ -128,11 +128,11 @@ function buildFormats() {
     }
   }
 
-  hasBuildIndex = true;
+  hasBuiltIndex = true;
 }
 
 export function getValueFormat(id: string): ValueFormatter {
-  if (!hasBuildIndex) {
+  if (!hasBuiltIndex) {
     buildFormats();
   }
 
@@ -140,7 +140,7 @@ export function getValueFormat(id: string): ValueFormatter {
 }
 
 export function getValueFormatterIndex(): ValueFormatterIndex {
-  if (!hasBuildIndex) {
+  if (!hasBuiltIndex) {
     buildFormats();
   }
 
@@ -148,7 +148,7 @@ export function getValueFormatterIndex(): ValueFormatterIndex {
 }
 
 export function getUnitFormats() {
-  if (!hasBuildIndex) {
+  if (!hasBuiltIndex) {
     buildFormats();
   }
 

From e1f6870fce9a7d564c54c61152a561d138fa2d73 Mon Sep 17 00:00:00 2001
From: SamuelToh <Tendious@bigpond.com>
Date: Wed, 9 Jan 2019 16:46:20 +1000
Subject: [PATCH 250/352] 4075: Interpolate tempvar on alias

---
 .../datasource/elasticsearch/datasource.ts    |  4 ++++
 .../elasticsearch/specs/datasource.test.ts    | 21 +++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/datasource.ts b/public/app/plugins/datasource/elasticsearch/datasource.ts
index c2f2364d49d..3781a9048a6 100644
--- a/public/app/plugins/datasource/elasticsearch/datasource.ts
+++ b/public/app/plugins/datasource/elasticsearch/datasource.ts
@@ -254,6 +254,10 @@ export class ElasticDatasource {
         continue;
       }
 
+      if (target.alias) {
+        target.alias = this.templateSrv.replace(target.alias, options.scopedVars, 'lucene');
+      }
+
       const queryString = this.templateSrv.replace(target.query || '*', options.scopedVars, 'lucene');
       const queryObj = this.queryBuilder.build(target, adhocFilters, queryString);
       const esQuery = angular.toJson(queryObj);
diff --git a/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts b/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts
index 4be0c35852c..0480fcb52e8 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts
@@ -16,7 +16,13 @@ describe('ElasticDatasource', function(this: any) {
   };
 
   const templateSrv = {
-    replace: jest.fn(text => text),
+    replace: jest.fn(text => {
+      if (text.startsWith("$")) {
+        return `resolvedVariable`;
+      } else {
+        return text;
+      }
+    }),
     getAdhocFilters: jest.fn(() => []),
   };
 
@@ -67,7 +73,7 @@ describe('ElasticDatasource', function(this: any) {
   });
 
   describe('When issuing metric query with interval pattern', () => {
-    let requestOptions, parts, header;
+    let requestOptions, parts, header, query;
 
     beforeEach(() => {
       createDatasource({
@@ -81,19 +87,22 @@ describe('ElasticDatasource', function(this: any) {
         return Promise.resolve({ data: { responses: [] } });
       });
 
-      ctx.ds.query({
+      query = {
         range: {
           from: moment.utc([2015, 4, 30, 10]),
           to: moment.utc([2015, 5, 1, 10]),
         },
         targets: [
           {
+            alias: "$varAlias",
             bucketAggs: [],
             metrics: [{ type: 'raw_document' }],
             query: 'escape\\:test',
           },
         ],
-      });
+      };
+
+      ctx.ds.query(query);
 
       parts = requestOptions.data.split('\n');
       header = angular.fromJson(parts[0]);
@@ -103,6 +112,10 @@ describe('ElasticDatasource', function(this: any) {
       expect(header.index).toEqual(['asd-2015.05.30', 'asd-2015.05.31', 'asd-2015.06.01']);
     });
 
+    it('should resolve the alias variable', () => {
+      expect(query.targets[0].alias).toEqual('resolvedVariable');
+    });
+
     it('should json escape lucene query', () => {
       const body = angular.fromJson(parts[1]);
       expect(body.query.bool.filter[1].query_string.query).toBe('escape\\:test');

From 9e3ab71e403298b9ffa7710e84a8e6b47b336dcc Mon Sep 17 00:00:00 2001
From: SamuelToh <Tendious@bigpond.com>
Date: Thu, 10 Jan 2019 10:47:22 +1000
Subject: [PATCH 251/352] 11503: escape measurement filter regex value

---
 public/app/plugins/datasource/influxdb/query_builder.ts     | 3 ++-
 .../plugins/datasource/influxdb/specs/query_builder.test.ts | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/influxdb/query_builder.ts b/public/app/plugins/datasource/influxdb/query_builder.ts
index a61216787d3..0b3e6f01e74 100644
--- a/public/app/plugins/datasource/influxdb/query_builder.ts
+++ b/public/app/plugins/datasource/influxdb/query_builder.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import kbn from 'app/core/utils/kbn';
 
 function renderTagCondition(tag, index) {
   let str = '';
@@ -43,7 +44,7 @@ export class InfluxQueryBuilder {
     } else if (type === 'MEASUREMENTS') {
       query = 'SHOW MEASUREMENTS';
       if (withMeasurementFilter) {
-        query += ' WITH MEASUREMENT =~ /' + withMeasurementFilter + '/';
+        query += ' WITH MEASUREMENT =~ /' + kbn.regexEscape(withMeasurementFilter) + '/';
       }
     } else if (type === 'FIELDS') {
       measurement = this.target.measurement;
diff --git a/public/app/plugins/datasource/influxdb/specs/query_builder.test.ts b/public/app/plugins/datasource/influxdb/specs/query_builder.test.ts
index e21b95ac374..ee617e7e774 100644
--- a/public/app/plugins/datasource/influxdb/specs/query_builder.test.ts
+++ b/public/app/plugins/datasource/influxdb/specs/query_builder.test.ts
@@ -50,6 +50,12 @@ describe('InfluxQueryBuilder', () => {
       expect(query).toBe('SHOW MEASUREMENTS WITH MEASUREMENT =~ /something/ LIMIT 100');
     });
 
+    it('should escape the regex value in measurement query', () => {
+      const builder = new InfluxQueryBuilder({ measurement: '', tags: [] });
+      const query = builder.buildExploreQuery('MEASUREMENTS', undefined, 'abc/edf/');
+      expect(query).toBe('SHOW MEASUREMENTS WITH MEASUREMENT =~ /abc\\/edf\\// LIMIT 100');
+    });
+
     it('should have WITH MEASUREMENT WHERE in measurement query for non-empty query with tags', () => {
       const builder = new InfluxQueryBuilder({
         measurement: '',

From 1dc1af7e00823e1107fc683b1e40ad5f86ba1743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 10 Jan 2019 08:37:40 +0100
Subject: [PATCH 252/352] Update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1ce4ffbe109..ff5da04f209 100644
--- a/README.md
+++ b/README.md
@@ -131,7 +131,9 @@ GRAFANA_TEST_DB=postgres go test ./pkg/...
 
 If you have any idea for an improvement or found a bug, do not hesitate to open an issue.
 And if you have time clone this repo and submit a pull request and help me make Grafana
-the kickass metrics & devops dashboard we all dream about!
+the kickass metrics & devops dashboard we all dream about! 
+
+Read the [contributing](https://github.com/grafana/grafana/blob/master/CONTRIBUTING.md) guide then check the [`beginner friendly`](https://github.com/grafana/grafana/issues?q=is%3Aopen+is%3Aissue+label%3A%22beginner+friendly%22) label to find issues that are easy and that we would like help with.
 
 ## Plugin development
 

From 5fc07663410722713c54a457fa0ae1a9c7c871e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 09:37:32 +0100
Subject: [PATCH 253/352] Moved Thresholds and styles to grafana/ui/components

---
 packages/grafana-ui/package.json                          | 3 ++-
 .../src/components/Thresholds}/Threshold.test.tsx         | 8 ++++----
 .../grafana-ui/src/components/Thresholds}/Thresholds.tsx  | 8 ++++----
 .../grafana-ui/src/components/Thresholds/_Thresholds.scss | 0
 packages/grafana-ui/src/components/index.scss             | 1 +
 packages/grafana-ui/src/components/index.ts               | 1 +
 packages/grafana-ui/src/types/panel.ts                    | 6 ++++++
 public/app/plugins/panel/gauge/GaugePanelOptions.tsx      | 3 +--
 public/app/types/index.ts                                 | 3 ++-
 public/app/types/panel.ts                                 | 6 ------
 public/sass/_grafana.scss                                 | 1 -
 11 files changed, 21 insertions(+), 19 deletions(-)
 rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Threshold.test.tsx (91%)
 rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Thresholds.tsx (96%)
 rename public/sass/components/_thresholds.scss => packages/grafana-ui/src/components/Thresholds/_Thresholds.scss (100%)

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 6548f75e91f..724c3334643 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -23,7 +23,8 @@
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
     "react-transition-group": "^2.2.1",
-    "react-virtualized": "^9.21.0"
+    "react-virtualized": "^9.21.0",
+    "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.6",
diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
similarity index 91%
rename from public/app/plugins/panel/gauge/Threshold.test.tsx
rename to packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
index 852b9f4c104..eac82e1b0f4 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Thresholds from './Thresholds';
-import { defaultProps } from './GaugePanelOptions';
-import { BasicGaugeColor } from 'app/types';
 import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
+import { Options } from 'app/plugins/panel/gauge/types';
+import { BasicGaugeColor } from 'app/types';
+import { Thresholds } from './Thresholds';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<Options> = {
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
similarity index 96%
rename from public/app/plugins/panel/gauge/Thresholds.tsx
rename to packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
index b4d4930e11d..802891998e9 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
@@ -1,16 +1,16 @@
 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
 import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
-import { BasicGaugeColor, Threshold } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
+import { BasicGaugeColor } from 'app/types';
+import { PanelOptionsProps, Threshold } from '@grafana/ui';
+import { Options } from 'app/plugins/panel/gauge/types';
 
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export default class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
+export class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 
diff --git a/public/sass/components/_thresholds.scss b/packages/grafana-ui/src/components/Thresholds/_Thresholds.scss
similarity index 100%
rename from public/sass/components/_thresholds.scss
rename to packages/grafana-ui/src/components/Thresholds/_Thresholds.scss
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index e1d1474bb16..d0a81675490 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1,3 +1,4 @@
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
+@import 'Thresholds/Thresholds';
 @import 'Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index abb1cf1b34c..5293cb7bc66 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -2,3 +2,4 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+export { Thresholds } from './Thresholds/Thresholds';
diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 44336555a81..46fe84a211c 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -29,3 +29,9 @@ export interface PanelMenuItem {
   shortcut?: string;
   subMenu?: PanelMenuItem[];
 }
+
+export interface Threshold {
+  index: number;
+  value: number;
+  color?: string;
+}
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 2b16ef5a1fe..7b627a09592 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import Thresholds from 'app/plugins/panel/gauge/Thresholds';
 import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
+import { PanelOptionsProps, Thresholds } from '@grafana/ui';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import { Options } from './types';
 import GaugeOptions from './GaugeOptions';
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index ab52b03ab17..52b2b996542 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -9,7 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
 import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources';
 import { DataQuery, DataQueryResponse, DataQueryOptions } from './series';
-import { BasicGaugeColor, MappingType, RangeMap, Threshold, ValueMap } from './panel';
+import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -20,6 +20,7 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
+import { Threshold } from '@grafana/ui';
 export {
   Team,
   TeamsState,
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index 31674d20304..1f5a2307733 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -1,9 +1,3 @@
-export interface Threshold {
-  index: number;
-  value: number;
-  color?: string;
-}
-
 export enum MappingType {
   ValueToText = 1,
   RangeToText = 2,
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 10cc7335bdf..a3dd204eb63 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -102,7 +102,6 @@
 @import 'components/toolbar';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
-@import 'components/thresholds';
 @import 'components/toggle_button_group';
 @import 'components/value-mappings';
 @import 'components/popover-box';

From 96759e39a63a2934a6cbbe34434a33d9767ceb53 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Thu, 10 Jan 2019 09:47:39 +0100
Subject: [PATCH 254/352] docker: enable flux in influxdb docker block

---
 devenv/docker/blocks/influxdb/influxdb.conf | 1 +
 1 file changed, 1 insertion(+)

diff --git a/devenv/docker/blocks/influxdb/influxdb.conf b/devenv/docker/blocks/influxdb/influxdb.conf
index c0331ce7449..120739dd896 100644
--- a/devenv/docker/blocks/influxdb/influxdb.conf
+++ b/devenv/docker/blocks/influxdb/influxdb.conf
@@ -69,6 +69,7 @@ reporting-disabled = false
 
   unix-socket-enabled = false # enable http service over unix domain socket
   # bind-socket = "/var/run/influxdb.sock"
+  flux-enabled = true
 
 [subscriber]
   enabled = true

From 5fed50713d61b5203e16f481e53bc2a9e06e16f1 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 10 Jan 2019 12:02:38 +0100
Subject: [PATCH 255/352] provide angular directive scope props correctly

---
 .../stackdriver/components/Filter.tsx         | 24 +++++++----
 .../stackdriver/partials/query.filter.html    |  2 +-
 .../stackdriver/query_filter_ctrl.ts          | 43 ++++++++++---------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index 11fda73248d..d6de9ba2b0e 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -7,8 +7,8 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
 import '../query_filter_ctrl';
 
 export interface Props {
-  filtersChanged: (filters) => void;
-  groupBysChanged?: (groupBys) => void;
+  filtersChanged: (filters: string[]) => void;
+  groupBysChanged?: (groupBys: string[]) => void;
   metricType: string;
   templateSrv: any;
   groupBys?: string[];
@@ -23,7 +23,7 @@ interface State {
   loading: Promise<any>;
 }
 
-const defaultLabelData = {
+const labelData = {
   metricLabels: {},
   resourceLabels: {},
   resourceTypes: [],
@@ -40,18 +40,26 @@ export class Filter extends React.Component<Props, State> {
 
     const { groupBys, filters, filtersChanged, groupBysChanged, hideGroupBys } = this.props;
     const loader = getAngularLoader();
-    const template = '<stackdriver-filter> </stackdriver-filter>';
 
     const scopeProps = {
       loading: null,
-      labelData: null,
+      labelData,
       groupBys,
       filters,
       filtersChanged,
       groupBysChanged,
       hideGroupBys,
     };
-    scopeProps.loading = this.loadLabels(scopeProps);
+    const loading = this.loadLabels(scopeProps);
+    scopeProps.loading = loading;
+    const template = `<stackdriver-filter
+                        filters="filters"
+                        group-bys="groupBys"
+                        label-data="labelData"
+                        loading="loading"
+                        filters-changed="filtersChanged"
+                        group-bys-changed="groupBysChanged"
+                        hide-group-bys="hideGroupBys"/>`;
     this.component = loader.load(this.element, scopeProps, template);
   }
 
@@ -77,7 +85,7 @@ export class Filter extends React.Component<Props, State> {
     return new Promise(async resolve => {
       try {
         if (!this.props.metricType) {
-          scope.labelData = defaultLabelData;
+          scope.labelData = labelData;
         } else {
           const { meta } = await this.props.datasource.getLabels(this.props.metricType, this.props.refId);
           scope.labelData = meta;
@@ -85,7 +93,7 @@ export class Filter extends React.Component<Props, State> {
         resolve();
       } catch (error) {
         appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.metricType]);
-        scope.labelData = defaultLabelData;
+        scope.labelData = labelData;
         resolve();
       }
     });
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index 9c491ed2d84..aa1d6892961 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
@@ -11,7 +11,7 @@
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>
-<div class="gf-form-inline" ng-hide="ctrl.$scope.hideGroupBys">
+<div class="gf-form-inline" ng-hide="ctrl.hideGroupBys">
   <div class="gf-form">
     <span class="gf-form-label query-keyword width-9">Group By</span>
     <div class="gf-form" ng-repeat="segment in ctrl.groupBySegments">
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index ffc169f1e66..97848efcabe 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -9,6 +9,7 @@ export class StackdriverFilter {
       templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.filter.html',
       controller: 'StackdriverFilterCtrl',
       controllerAs: 'ctrl',
+      bindToController: true,
       restrict: 'E',
       scope: {
         labelData: '<',
@@ -32,14 +33,14 @@ export class StackdriverFilterCtrl {
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv) {
-    this.$scope = $scope.labelData ? $scope : $scope.$parent;
+    // this.$scope = $scope.labelData ? $scope : $scope.$parent;
 
-    this.initSegments(this.$scope.hideGroupBys);
+    this.initSegments(this.$scope.ctrl.hideGroupBys);
   }
 
   initSegments(hideGroupBys: boolean) {
     if (!hideGroupBys) {
-      this.groupBySegments = this.$scope.groupBys.map(groupBy => {
+      this.groupBySegments = this.$scope.ctrl.groupBys.map(groupBy => {
         return this.uiSegmentSrv.getSegmentForValue(groupBy);
       });
       this.ensurePlusButton(this.groupBySegments);
@@ -49,7 +50,7 @@ export class StackdriverFilterCtrl {
 
     this.filterSegments = new FilterSegments(
       this.uiSegmentSrv,
-      this.$scope.filters,
+      this.$scope.ctrl.filters,
       this.getFilterKeys.bind(this),
       this.getFilterValues.bind(this)
     );
@@ -57,9 +58,9 @@ export class StackdriverFilterCtrl {
   }
 
   async createLabelKeyElements() {
-    await this.$scope.loading;
+    await this.$scope.ctrl.loading;
 
-    let elements = Object.keys(this.$scope.labelData.metricLabels || {}).map(l => {
+    let elements = Object.keys(this.$scope.ctrl.labelData.metricLabels || {}).map(l => {
       return this.uiSegmentSrv.newSegment({
         value: `metric.label.${l}`,
         expandable: false,
@@ -68,7 +69,7 @@ export class StackdriverFilterCtrl {
 
     elements = [
       ...elements,
-      ...Object.keys(this.$scope.labelData.resourceLabels || {}).map(l => {
+      ...Object.keys(this.$scope.ctrl.labelData.resourceLabels || {}).map(l => {
         return this.uiSegmentSrv.newSegment({
           value: `resource.label.${l}`,
           expandable: false,
@@ -76,7 +77,7 @@ export class StackdriverFilterCtrl {
       }),
     ];
 
-    if (this.$scope.labelData.resourceTypes && this.$scope.labelData.resourceTypes.length > 0) {
+    if (this.$scope.ctrl.labelData.resourceTypes && this.$scope.ctrl.labelData.resourceTypes.length > 0) {
       elements = [
         ...elements,
         this.uiSegmentSrv.newSegment({
@@ -92,7 +93,7 @@ export class StackdriverFilterCtrl {
   async getFilterKeys(segment, removeText: string) {
     let elements = await this.createLabelKeyElements();
 
-    if (this.$scope.filters.indexOf(this.resourceTypeValue) !== -1) {
+    if (this.$scope.ctrl.filters.indexOf(this.resourceTypeValue) !== -1) {
       elements = elements.filter(e => e.value !== this.resourceTypeValue);
     }
 
@@ -112,7 +113,7 @@ export class StackdriverFilterCtrl {
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
 
-    elements = elements.filter(e => this.$scope.groupBys.indexOf(e.value) === -1);
+    elements = elements.filter(e => this.$scope.ctrl.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
       return [];
@@ -137,14 +138,14 @@ export class StackdriverFilterCtrl {
     };
 
     const groupBys = this.groupBySegments.reduce(reducer, []);
-    this.$scope.groupBysChanged(groupBys);
+    this.$scope.ctrl.groupBysChanged()(groupBys);
     this.ensurePlusButton(this.groupBySegments);
   }
 
   async getFilters(segment, index) {
-    await this.$scope.loading;
+    await this.$scope.ctrl.loading;
     const hasNoFilterKeys =
-      this.$scope.labelData.metricLabels && Object.keys(this.$scope.labelData.metricLabels).length === 0;
+      this.$scope.ctrl.labelData.metricLabels && Object.keys(this.$scope.ctrl.labelData.metricLabels).length === 0;
     return this.filterSegments.getFilters(segment, index, hasNoFilterKeys);
   }
 
@@ -152,24 +153,24 @@ export class StackdriverFilterCtrl {
     const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value);
     if (
       !filterKey ||
-      !this.$scope.labelData.metricLabels ||
-      Object.keys(this.$scope.labelData.metricLabels).length === 0
+      !this.$scope.ctrl.labelData.metricLabels ||
+      Object.keys(this.$scope.ctrl.labelData.metricLabels).length === 0
     ) {
       return [];
     }
 
     const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
 
-    if (filterKey.startsWith('metric.label.') && this.$scope.labelData.metricLabels.hasOwnProperty(shortKey)) {
-      return this.$scope.labelData.metricLabels[shortKey];
+    if (filterKey.startsWith('metric.label.') && this.$scope.ctrl.labelData.metricLabels.hasOwnProperty(shortKey)) {
+      return this.$scope.ctrl.labelData.metricLabels[shortKey];
     }
 
-    if (filterKey.startsWith('resource.label.') && this.$scope.labelData.resourceLabels.hasOwnProperty(shortKey)) {
-      return this.$scope.labelData.resourceLabels[shortKey];
+    if (filterKey.startsWith('resource.label.') && this.$scope.ctrl.labelData.resourceLabels.hasOwnProperty(shortKey)) {
+      return this.$scope.ctrl.labelData.resourceLabels[shortKey];
     }
 
     if (filterKey === this.resourceTypeValue) {
-      return this.$scope.labelData.resourceTypes;
+      return this.$scope.ctrl.labelData.resourceTypes;
     }
 
     return [];
@@ -178,7 +179,7 @@ export class StackdriverFilterCtrl {
   filterSegmentUpdated(segment, index) {
     const filters = this.filterSegments.filterSegmentUpdated(segment, index);
     if (!filters.some(f => f === DefaultFilterValue)) {
-      this.$scope.filtersChanged(filters);
+      this.$scope.ctrl.filtersChanged()(filters);
     }
   }
 

From 7819529d459c6c20aab524c26528212f754b72fb Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 10 Jan 2019 13:29:53 +0100
Subject: [PATCH 256/352] Migrate Select components to @grafana/ui

---
 .../components/Select/IndicatorsContainer.tsx |  2 +-
 .../components/Select/NoOptionsMessage.tsx    |  0
 .../src}/components/Select/OptionGroup.tsx    |  2 +-
 .../components/Select/PickerOption.test.tsx   | 34 +++++++++++++------
 .../src}/components/Select/PickerOption.tsx   |  2 +-
 .../src}/components/Select/Select.tsx         |  8 ++---
 .../components/Select/resetSelectStyles.ts    | 27 +++++++++++++++
 packages/grafana-ui/src/components/index.ts   |  6 ++++
 .../PermissionList/AddPermission.tsx          |  2 +-
 .../DisabledPermissionListItem.tsx            |  2 +-
 .../PermissionList/PermissionListItem.tsx     |  2 +-
 .../components/Select/DataSourcePicker.tsx    |  2 +-
 .../core/components/Select/ResetStyles.tsx    | 25 --------------
 .../app/core/components/Select/TeamPicker.tsx |  2 +-
 .../app/core/components/Select/UnitPicker.tsx |  2 +-
 .../app/core/components/Select/UserPicker.tsx |  2 +-
 .../SharedPreferences/SharedPreferences.tsx   |  2 +-
 .../core/components/TagFilter/TagFilter.tsx   |  6 ++--
 public/app/plugins/panel/gauge/MappingRow.tsx |  2 +-
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  2 +-
 yarn.lock                                     |  6 ++--
 21 files changed, 78 insertions(+), 60 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/IndicatorsContainer.tsx (88%)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/NoOptionsMessage.tsx (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/OptionGroup.tsx (96%)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/PickerOption.test.tsx (55%)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/PickerOption.tsx (96%)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/Select.tsx (97%)
 create mode 100644 packages/grafana-ui/src/components/Select/resetSelectStyles.ts
 delete mode 100644 public/app/core/components/Select/ResetStyles.tsx

diff --git a/public/app/core/components/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
similarity index 88%
rename from public/app/core/components/Select/IndicatorsContainer.tsx
rename to packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
index d4de51a2cef..8fc8e0b08d3 100644
--- a/public/app/core/components/Select/IndicatorsContainer.tsx
+++ b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { components } from '@torkelo/react-select';
 
-export const IndicatorsContainer = props => {
+export const IndicatorsContainer = (props: any) => {
   const isOpen = props.selectProps.menuIsOpen;
   return (
     <components.IndicatorsContainer {...props}>
diff --git a/public/app/core/components/Select/NoOptionsMessage.tsx b/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx
similarity index 100%
rename from public/app/core/components/Select/NoOptionsMessage.tsx
rename to packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx
diff --git a/public/app/core/components/Select/OptionGroup.tsx b/packages/grafana-ui/src/components/Select/OptionGroup.tsx
similarity index 96%
rename from public/app/core/components/Select/OptionGroup.tsx
rename to packages/grafana-ui/src/components/Select/OptionGroup.tsx
index a001f58c681..ed2b72a537c 100644
--- a/public/app/core/components/Select/OptionGroup.tsx
+++ b/packages/grafana-ui/src/components/Select/OptionGroup.tsx
@@ -24,7 +24,7 @@ export default class OptionGroup extends PureComponent<ExtendedGroupProps, State
     }
   }
 
-  componentDidUpdate(nextProps) {
+  componentDidUpdate(nextProps: ExtendedGroupProps) {
     if (nextProps.selectProps.inputValue !== '') {
       this.setState({ expanded: true });
     }
diff --git a/public/app/core/components/Select/PickerOption.test.tsx b/packages/grafana-ui/src/components/Select/PickerOption.test.tsx
similarity index 55%
rename from public/app/core/components/Select/PickerOption.test.tsx
rename to packages/grafana-ui/src/components/Select/PickerOption.test.tsx
index 6b4aedcfcc0..96a4ff9cf2a 100644
--- a/public/app/core/components/Select/PickerOption.test.tsx
+++ b/packages/grafana-ui/src/components/Select/PickerOption.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import PickerOption from './PickerOption';
+import { OptionProps } from 'react-select/lib/components/Option';
 
-const model = {
+const model: OptionProps<any> = {
   cx: jest.fn(),
   clearValue: jest.fn(),
-  onSelect: jest.fn(),
   getStyles: jest.fn(),
   getValue: jest.fn(),
   hasValue: true,
@@ -18,21 +18,33 @@ const model = {
   isFocused: false,
   isSelected: false,
   innerRef: null,
-  innerProps: null,
-  label: 'Option label',
-  type: null,
-  children: 'Model title',
-  data: {
-    title: 'Model title',
-    imgUrl: 'url/to/avatar',
-    label: 'User picker label',
+  innerProps: {
+    id: '',
+    key: '',
+    onClick: jest.fn(),
+    onMouseOver: jest.fn(),
+    tabIndex: 1,
   },
+  label: 'Option label',
+  type: 'option',
+  children: 'Model title',
   className: 'class-for-user-picker',
 };
 
 describe('PickerOption', () => {
   it('renders correctly', () => {
-    const tree = renderer.create(<PickerOption {...model} />).toJSON();
+    const tree = renderer
+      .create(
+        <PickerOption
+          {...model}
+          data={{
+            title: 'Model title',
+            imgUrl: 'url/to/avatar',
+            label: 'User picker label',
+          }}
+        />
+      )
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/public/app/core/components/Select/PickerOption.tsx b/packages/grafana-ui/src/components/Select/PickerOption.tsx
similarity index 96%
rename from public/app/core/components/Select/PickerOption.tsx
rename to packages/grafana-ui/src/components/Select/PickerOption.tsx
index d263f6f832b..ac6a5c62783 100644
--- a/public/app/core/components/Select/PickerOption.tsx
+++ b/packages/grafana-ui/src/components/Select/PickerOption.tsx
@@ -28,7 +28,7 @@ export const Option = (props: ExtendedOptionProps) => {
 };
 
 // was not able to type this without typescript error
-export const SingleValue = props => {
+export const SingleValue = (props: any) => {
   const { children, data } = props;
 
   return (
diff --git a/public/app/core/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
similarity index 97%
rename from public/app/core/components/Select/Select.tsx
rename to packages/grafana-ui/src/components/Select/Select.tsx
index f66e07c9ed6..c456de1c94d 100644
--- a/public/app/core/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -10,7 +10,7 @@ import { Option, SingleValue } from './PickerOption';
 import OptionGroup from './OptionGroup';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
-import ResetStyles from './ResetStyles';
+import resetSelectStyles from './resetSelectStyles';
 import { CustomScrollbar } from '@grafana/ui';
 
 export interface SelectOptionItem {
@@ -53,7 +53,7 @@ interface AsyncProps {
   loadingMessage?: () => string;
 }
 
-export const MenuList = props => {
+export const MenuList = (props: any) => {
   return (
     <components.MenuList {...props}>
       <CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar>
@@ -127,7 +127,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
         onChange={onChange}
         options={options}
         placeholder={placeholder || 'Choose'}
-        styles={ResetStyles}
+        styles={resetSelectStyles()}
         isDisabled={isDisabled}
         isLoading={isLoading}
         isClearable={isClearable}
@@ -212,7 +212,7 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
         isLoading={isLoading}
         defaultOptions={defaultOptions}
         placeholder={placeholder || 'Choose'}
-        styles={ResetStyles}
+        styles={resetSelectStyles()}
         loadingMessage={loadingMessage}
         noOptionsMessage={noOptionsMessage}
         isDisabled={isDisabled}
diff --git a/packages/grafana-ui/src/components/Select/resetSelectStyles.ts b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
new file mode 100644
index 00000000000..a980741c17c
--- /dev/null
+++ b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
@@ -0,0 +1,27 @@
+export default function resetSelectStyles() {
+  return {
+    clearIndicator: () => ({}),
+    container: () => ({}),
+    control: () => ({}),
+    dropdownIndicator: () => ({}),
+    group: () => ({}),
+    groupHeading: () => ({}),
+    indicatorsContainer: () => ({}),
+    indicatorSeparator: () => ({}),
+    input: () => ({}),
+    loadingIndicator: () => ({}),
+    loadingMessage: () => ({}),
+    menu: () => ({}),
+    menuList: ({ maxHeight }: { maxHeight: number }) => ({
+      maxHeight,
+    }),
+    multiValue: () => ({}),
+    multiValueLabel: () => ({}),
+    multiValueRemove: () => ({}),
+    noOptionsMessage: () => ({}),
+    option: () => ({}),
+    placeholder: () => ({}),
+    singleValue: () => ({}),
+    valueContainer: () => ({}),
+  };
+}
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index abb1cf1b34c..9780b841959 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -2,3 +2,9 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+
+// Select
+export { Select, AsyncSelect, SelectOptionItem } from './Select/Select';
+export { IndicatorsContainer } from './Select/IndicatorsContainer';
+export { NoOptionsMessage } from './Select/NoOptionsMessage';
+export { default as resetSelectStyles } from './Select/resetSelectStyles';
diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index 749bef680bf..30219371257 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
-import { Select, SelectOptionItem } from 'app/core/components/Select/Select';
+import { Select, SelectOptionItem } from '@grafana/ui';
 import { User } from 'app/types';
 import {
   dashboardPermissionLevels,
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index d3f9ddbb1fb..ebf3cbad1bc 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Select from 'app/core/components/Select/Select';
+import { Select } from '@grafana/ui';
 import { dashboardPermissionLevels } from 'app/types/acl';
 
 export interface Props {
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index e726667cfbb..c33b564154a 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Select } from 'app/core/components/Select/Select';
+import { Select } from '@grafana/ui';
 import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
 import { FolderInfo } from 'app/types';
 
diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
index 1a9081038c0..372c4cd4013 100644
--- a/public/app/core/components/Select/DataSourcePicker.tsx
+++ b/public/app/core/components/Select/DataSourcePicker.tsx
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
 // Components
-import Select from './Select';
+import { Select } from '@grafana/ui';
 
 // Types
 import { DataSourceSelectItem } from 'app/types';
diff --git a/public/app/core/components/Select/ResetStyles.tsx b/public/app/core/components/Select/ResetStyles.tsx
deleted file mode 100644
index c34abb544ab..00000000000
--- a/public/app/core/components/Select/ResetStyles.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-export default {
-  clearIndicator: () => ({}),
-  container: () => ({}),
-  control: () => ({}),
-  dropdownIndicator: () => ({}),
-  group: () => ({}),
-  groupHeading: () => ({}),
-  indicatorsContainer: () => ({}),
-  indicatorSeparator: () => ({}),
-  input: () => ({}),
-  loadingIndicator: () => ({}),
-  loadingMessage: () => ({}),
-  menu: () => ({}),
-  menuList: ({ maxHeight }: { maxHeight: number }) => ({
-    maxHeight,
-  }),
-  multiValue: () => ({}),
-  multiValueLabel: () => ({}),
-  multiValueRemove: () => ({}),
-  noOptionsMessage: () => ({}),
-  option: () => ({}),
-  placeholder: () => ({}),
-  singleValue: () => ({}),
-  valueContainer: () => ({}),
-};
diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx
index bc608318806..8d9e1d48d81 100644
--- a/public/app/core/components/Select/TeamPicker.tsx
+++ b/public/app/core/components/Select/TeamPicker.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
-import { AsyncSelect } from './Select';
+import { AsyncSelect } from '@grafana/ui';
 import { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 
diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
index 75885cbbb84..54b064df7dc 100644
--- a/public/app/core/components/Select/UnitPicker.tsx
+++ b/public/app/core/components/Select/UnitPicker.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Select from './Select';
+import { Select } from '@grafana/ui';
 import kbn from 'app/core/utils/kbn';
 
 interface Props {
diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx
index 8496d707105..ff4ae32f068 100644
--- a/public/app/core/components/Select/UserPicker.tsx
+++ b/public/app/core/components/Select/UserPicker.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 
 // Components
-import { AsyncSelect } from './Select';
+import { AsyncSelect } from '@grafana/ui';
 
 // Utils & Services
 import { debounce } from 'lodash';
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index d41626d9a2f..b13393ab2e1 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Label } from 'app/core/components/Label/Label';
-import Select from 'app/core/components/Select/Select';
+import { Select } from '@grafana/ui';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 
 import { DashboardSearchHit } from 'app/types';
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 4b2de6b1b16..7e8bc9c6fd2 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
+import { NoOptionsMessage, IndicatorsContainer, resetSelectStyles } from '@grafana/ui';
 import AsyncSelect from '@torkelo/react-select/lib/Async';
 
 import { TagOption } from './TagOption';
 import { TagBadge } from './TagBadge';
-import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
 import { components } from '@torkelo/react-select';
-import ResetStyles from 'app/core/components/Select/ResetStyles';
 
 export interface Props {
   tags: string[];
@@ -51,7 +49,7 @@ export class TagFilter extends React.Component<Props, any> {
       getOptionValue: i => i.value,
       getOptionLabel: i => i.label,
       value: tags,
-      styles: ResetStyles,
+      styles: resetSelectStyles(),
       filterOption: (option, searchQuery) => {
         const regex = RegExp(searchQuery, 'i');
         return regex.test(option.value);
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
index 35d0b2e638c..277afb4fd5c 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/public/app/plugins/panel/gauge/MappingRow.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import { Select } from 'app/core/components/Select/Select';
+import { Select } from '@grafana/ui';
 import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface Props {
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 4aafc0b0457..e8af6bc2fe1 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import Select from 'app/core/components/Select/Select';
+import { Select} from '@grafana/ui';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
 import { PanelOptionsProps } from '@grafana/ui';
 import { Options } from './types';
diff --git a/yarn.lock b/yarn.lock
index 8eff64ca822..c5734ffcad3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1098,14 +1098,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^2.0.15":
+"@types/react-transition-group@*", "@types/react-transition-group@^2.0.15":
   version "2.0.15"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
   integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
   version "16.7.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
   integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3168,7 +3168,7 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000772"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
   integrity sha1-UarokXaChureSj2DGep21qAbUSs=

From 6a2f5eb61e776d08a7e98a536ae2c4f237897ee5 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 10 Jan 2019 13:49:11 +0100
Subject: [PATCH 257/352] refactoring. fix broken test

---
 .../stackdriver/components/Filter.tsx         | 14 ++++-
 .../stackdriver/query_filter_ctrl.ts          |  8 +--
 .../specs/query_filter_ctrl.test.ts           | 56 ++++++++++---------
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index d6de9ba2b0e..7cd14235ab3 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -38,9 +38,17 @@ export class Filter extends React.Component<Props, State> {
       return;
     }
 
-    const { groupBys, filters, filtersChanged, groupBysChanged, hideGroupBys } = this.props;
+    const { groupBys, filters, hideGroupBys } = this.props;
     const loader = getAngularLoader();
 
+    const filtersChanged = filters => {
+      this.props.filtersChanged(filters);
+    };
+
+    const groupBysChanged = groupBys => {
+      this.props.groupBysChanged(groupBys);
+    };
+
     const scopeProps = {
       loading: null,
       labelData,
@@ -57,8 +65,8 @@ export class Filter extends React.Component<Props, State> {
                         group-bys="groupBys"
                         label-data="labelData"
                         loading="loading"
-                        filters-changed="filtersChanged"
-                        group-bys-changed="groupBysChanged"
+                        filters-changed="filtersChanged(filters)"
+                        group-bys-changed="groupBysChanged(groupBys)"
                         hide-group-bys="hideGroupBys"/>`;
     this.component = loader.load(this.element, scopeProps, template);
   }
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 97848efcabe..2d631ee43a7 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -33,8 +33,6 @@ export class StackdriverFilterCtrl {
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv) {
-    // this.$scope = $scope.labelData ? $scope : $scope.$parent;
-
     this.initSegments(this.$scope.ctrl.hideGroupBys);
   }
 
@@ -112,7 +110,7 @@ export class StackdriverFilterCtrl {
 
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
-
+    console.log('elements', elements);
     elements = elements.filter(e => this.$scope.ctrl.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
@@ -138,7 +136,7 @@ export class StackdriverFilterCtrl {
     };
 
     const groupBys = this.groupBySegments.reduce(reducer, []);
-    this.$scope.ctrl.groupBysChanged()(groupBys);
+    this.$scope.ctrl.groupBysChanged({ groupBys });
     this.ensurePlusButton(this.groupBySegments);
   }
 
@@ -179,7 +177,7 @@ export class StackdriverFilterCtrl {
   filterSegmentUpdated(segment, index) {
     const filters = this.filterSegments.filterSegmentUpdated(segment, index);
     if (!filters.some(f => f === DefaultFilterValue)) {
-      this.$scope.ctrl.filtersChanged()(filters);
+      this.$scope.ctrl.filtersChanged({ filters });
     }
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index f933f866777..70622cb5de9 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -34,8 +34,8 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when labels are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
-        ctrl.$scope.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
+        ctrl.$scope.ctrl.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
+        ctrl.$scope.ctrl.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
 
         result = await ctrl.getGroupBys({ type: '' });
       });
@@ -50,15 +50,15 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when a group by label is selected', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = {
+        ctrl.$scope.ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.labelData.resourceLabels = {
+        ctrl.$scope.ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
-        ctrl.$scope.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
+        ctrl.$scope.ctrl.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
 
         result = await ctrl.getGroupBys({ type: '' });
       });
@@ -74,7 +74,7 @@ describe('StackdriverQueryFilterCtrl', () => {
     describe('when a group by is selected', () => {
       beforeEach(() => {
         groupByChangedMock = jest.fn();
-        ctrl.$scope.groupBysChanged = groupByChangedMock;
+        ctrl.$scope.ctrl.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -82,14 +82,14 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(groupByChangedMock).toHaveBeenCalledWith(['groupby1']);
+        expect(groupByChangedMock).toHaveBeenCalledWith({ groupBys: ['groupby1'] });
       });
     });
 
     describe('when a selected group by is removed', () => {
       beforeEach(() => {
         groupByChangedMock = jest.fn();
-        ctrl.$scope.groupBysChanged = groupByChangedMock;
+        ctrl.$scope.ctrl.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -97,7 +97,7 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(groupByChangedMock).toHaveBeenCalledWith([]);
+        expect(groupByChangedMock).toHaveBeenCalledWith({ groupBys: [] });
       });
     });
   });
@@ -136,11 +136,11 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when values for a key filter part are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = {
+        ctrl.$scope.ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.labelData.resourceLabels = {
+        ctrl.$scope.ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
@@ -161,11 +161,11 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when values for a value filter part are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = {
+        ctrl.$scope.ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.labelData.resourceLabels = {
+        ctrl.$scope.ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
@@ -392,22 +392,24 @@ function createCtrlWithFakes(existingFilters?: string[]) {
     },
   };
   const scope = {
-    hideGroupBys: false,
-    groupBys: [],
-    filters: existingFilters || [],
-    labelData: {
-      metricLabels: {},
-      resourceLabels: {},
-      resourceTypes: [],
-    },
-    filtersChanged: () => {},
-    groupBysChanged: () => {},
-    datasource: {
-      getDefaultProject: () => {
-        return 'project';
+    ctrl: {
+      hideGroupBys: false,
+      groupBys: [],
+      filters: existingFilters || [],
+      labelData: {
+        metricLabels: {},
+        resourceLabels: {},
+        resourceTypes: [],
       },
+      filtersChanged: () => {},
+      groupBysChanged: () => {},
+      datasource: {
+        getDefaultProject: () => {
+          return 'project';
+        },
+      },
+      refresh: () => {},
     },
-    refresh: () => {},
   };
 
   return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub());

From fbb3ad5fc45a93e040d1ab90092741612d990696 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Thu, 10 Jan 2019 09:35:48 +0100
Subject: [PATCH 258/352] make sure frequency cannot be zero

frequency set to zero causes division by zero
panics in the alert schedular.

closes #14810
---
 pkg/services/alerting/extractor.go |  2 +-
 pkg/services/alerting/rule.go      | 21 ++++++--
 pkg/services/alerting/rule_test.go | 80 ++++++++++++++++++++++--------
 3 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/pkg/services/alerting/extractor.go b/pkg/services/alerting/extractor.go
index e33e3dc2af3..5b911c5a9ad 100644
--- a/pkg/services/alerting/extractor.go
+++ b/pkg/services/alerting/extractor.go
@@ -112,7 +112,7 @@ func (e *DashAlertExtractor) getAlertFromPanels(jsonWithPanels *simplejson.Json,
 
 		frequency, err := getTimeDurationStringToSeconds(jsonAlert.Get("frequency").MustString())
 		if err != nil {
-			return nil, ValidationError{Reason: "Could not parse frequency"}
+			return nil, ValidationError{Reason: err.Error()}
 		}
 
 		rawFor := jsonAlert.Get("for").MustString()
diff --git a/pkg/services/alerting/rule.go b/pkg/services/alerting/rule.go
index d2a505145ac..4423046d600 100644
--- a/pkg/services/alerting/rule.go
+++ b/pkg/services/alerting/rule.go
@@ -1,16 +1,21 @@
 package alerting
 
 import (
+	"errors"
 	"fmt"
 	"regexp"
 	"strconv"
 	"time"
 
 	"github.com/grafana/grafana/pkg/components/simplejson"
-
 	m "github.com/grafana/grafana/pkg/models"
 )
 
+var (
+	ErrFrequencyCannotBeZeroOrLess = errors.New(`"evaluate every" cannot be zero or below`)
+	ErrFrequencyCouldNotBeParsed   = errors.New(`"evaluate every" field could not be parsed`)
+)
+
 type Rule struct {
 	Id                  int64
 	OrgId               int64
@@ -76,7 +81,7 @@ func getTimeDurationStringToSeconds(str string) (int64, error) {
 	matches := ValueFormatRegex.FindAllString(str, 1)
 
 	if len(matches) <= 0 {
-		return 0, fmt.Errorf("Frequency could not be parsed")
+		return 0, ErrFrequencyCouldNotBeParsed
 	}
 
 	value, err := strconv.Atoi(matches[0])
@@ -84,6 +89,10 @@ func getTimeDurationStringToSeconds(str string) (int64, error) {
 		return 0, err
 	}
 
+	if value == 0 {
+		return 0, ErrFrequencyCannotBeZeroOrLess
+	}
+
 	unit := UnitFormatRegex.FindAllString(str, 1)[0]
 
 	if val, ok := unitMultiplier[unit]; ok {
@@ -101,7 +110,6 @@ func NewRuleFromDBAlert(ruleDef *m.Alert) (*Rule, error) {
 	model.PanelId = ruleDef.PanelId
 	model.Name = ruleDef.Name
 	model.Message = ruleDef.Message
-	model.Frequency = ruleDef.Frequency
 	model.State = ruleDef.State
 	model.LastStateChange = ruleDef.NewStateDate
 	model.For = ruleDef.For
@@ -109,6 +117,13 @@ func NewRuleFromDBAlert(ruleDef *m.Alert) (*Rule, error) {
 	model.ExecutionErrorState = m.ExecutionErrorOption(ruleDef.Settings.Get("executionErrorState").MustString("alerting"))
 	model.StateChanges = ruleDef.StateChanges
 
+	model.Frequency = ruleDef.Frequency
+	// frequency cannot be zero since that would not execute the alert rule.
+	// so we fallback to 60 seconds if `Freqency` is missing
+	if model.Frequency == 0 {
+		model.Frequency = 60
+	}
+
 	for _, v := range ruleDef.Settings.Get("notifications").MustArray() {
 		jsonModel := simplejson.NewFromAny(v)
 		id, err := jsonModel.Get("id").Int64()
diff --git a/pkg/services/alerting/rule_test.go b/pkg/services/alerting/rule_test.go
index 2a9e95e5723..cf25cc118f4 100644
--- a/pkg/services/alerting/rule_test.go
+++ b/pkg/services/alerting/rule_test.go
@@ -14,6 +14,36 @@ func (f *FakeCondition) Eval(context *EvalContext) (*ConditionResult, error) {
 	return &ConditionResult{}, nil
 }
 
+func TestAlertRuleFrequencyParsing(t *testing.T) {
+	tcs := []struct {
+		input  string
+		err    error
+		result int64
+	}{
+		{input: "10s", result: 10},
+		{input: "10m", result: 600},
+		{input: "1h", result: 3600},
+		{input: "1o", result: 1},
+		{input: "0s", err: ErrFrequencyCannotBeZeroOrLess},
+		{input: "0m", err: ErrFrequencyCannotBeZeroOrLess},
+		{input: "0h", err: ErrFrequencyCannotBeZeroOrLess},
+		{input: "0", err: ErrFrequencyCannotBeZeroOrLess},
+		{input: "-1s", err: ErrFrequencyCouldNotBeParsed},
+	}
+
+	for _, tc := range tcs {
+		r, err := getTimeDurationStringToSeconds(tc.input)
+		if err != tc.err {
+			t.Errorf("expected error: '%v' got: '%v'", tc.err, err)
+			return
+		}
+
+		if r != tc.result {
+			t.Errorf("expected result: %d got %d", tc.result, r)
+		}
+	}
+}
+
 func TestAlertRuleModel(t *testing.T) {
 	Convey("Testing alert rule", t, func() {
 
@@ -21,26 +51,6 @@ func TestAlertRuleModel(t *testing.T) {
 			return &FakeCondition{}, nil
 		})
 
-		Convey("Can parse seconds", func() {
-			seconds, _ := getTimeDurationStringToSeconds("10s")
-			So(seconds, ShouldEqual, 10)
-		})
-
-		Convey("Can parse minutes", func() {
-			seconds, _ := getTimeDurationStringToSeconds("10m")
-			So(seconds, ShouldEqual, 600)
-		})
-
-		Convey("Can parse hours", func() {
-			seconds, _ := getTimeDurationStringToSeconds("1h")
-			So(seconds, ShouldEqual, 3600)
-		})
-
-		Convey("defaults to seconds", func() {
-			seconds, _ := getTimeDurationStringToSeconds("1o")
-			So(seconds, ShouldEqual, 1)
-		})
-
 		Convey("should return err for empty string", func() {
 			_, err := getTimeDurationStringToSeconds("")
 			So(err, ShouldNotBeNil)
@@ -89,5 +99,35 @@ func TestAlertRuleModel(t *testing.T) {
 				So(len(alertRule.Notifications), ShouldEqual, 2)
 			})
 		})
+
+		Convey("can construct alert rule model with invalid frequency", func() {
+			json := `
+			{
+				"name": "name2",
+				"description": "desc2",
+				"noDataMode": "critical",
+				"enabled": true,
+				"frequency": "0s",
+        		"conditions": [ { "type": "test", "prop": 123 } ],
+        		"notifications": []
+			}`
+
+			alertJSON, jsonErr := simplejson.NewJson([]byte(json))
+			So(jsonErr, ShouldBeNil)
+
+			alert := &m.Alert{
+				Id:          1,
+				OrgId:       1,
+				DashboardId: 1,
+				PanelId:     1,
+				Frequency:   0,
+
+				Settings: alertJSON,
+			}
+
+			alertRule, err := NewRuleFromDBAlert(alert)
+			So(err, ShouldBeNil)
+			So(alertRule.Frequency, ShouldEqual, 60)
+		})
 	})
 }

From 53f0f08efab58384aac5f73c76c5de381f9f36db Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 10 Jan 2019 14:24:24 +0100
Subject: [PATCH 259/352] Fixing TS and updating snapshot

---
 .../src/components/Select/IndicatorsContainer.tsx          | 3 +++
 .../grafana-ui/src/components/Select/NoOptionsMessage.tsx  | 4 ++++
 .../grafana-ui/src/components/Select/PickerOption.test.tsx | 2 --
 packages/grafana-ui/src/components/Select/PickerOption.tsx | 3 +++
 packages/grafana-ui/src/components/Select/Select.tsx       | 5 +++++
 .../Select/__snapshots__/PickerOption.test.tsx.snap        | 7 ++++++-
 6 files changed, 21 insertions(+), 3 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Select/__snapshots__/PickerOption.test.tsx.snap (81%)

diff --git a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
index 8fc8e0b08d3..260fe6ebbdf 100644
--- a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
+++ b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
@@ -1,4 +1,7 @@
 import React from 'react';
+
+// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// @ts-ignore
 import { components } from '@torkelo/react-select';
 
 export const IndicatorsContainer = (props: any) => {
diff --git a/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx b/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx
index 5fe229340a4..1cec06a5301 100644
--- a/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx
+++ b/packages/grafana-ui/src/components/Select/NoOptionsMessage.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
+
+// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// @ts-ignore
 import { components } from '@torkelo/react-select';
+// @ts-ignore
 import { OptionProps } from '@torkelo/react-select/lib/components/Option';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx b/packages/grafana-ui/src/components/Select/PickerOption.test.tsx
index 96a4ff9cf2a..20187734c1a 100644
--- a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx
+++ b/packages/grafana-ui/src/components/Select/PickerOption.test.tsx
@@ -38,9 +38,7 @@ describe('PickerOption', () => {
         <PickerOption
           {...model}
           data={{
-            title: 'Model title',
             imgUrl: 'url/to/avatar',
-            label: 'User picker label',
           }}
         />
       )
diff --git a/packages/grafana-ui/src/components/Select/PickerOption.tsx b/packages/grafana-ui/src/components/Select/PickerOption.tsx
index ac6a5c62783..4bbcb74a563 100644
--- a/packages/grafana-ui/src/components/Select/PickerOption.tsx
+++ b/packages/grafana-ui/src/components/Select/PickerOption.tsx
@@ -1,4 +1,7 @@
 import React from 'react';
+
+// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// @ts-ignore
 import { components } from '@torkelo/react-select';
 import { OptionProps } from 'react-select/lib/components/Option';
 
diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
index c456de1c94d..a2584ce8124 100644
--- a/packages/grafana-ui/src/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -1,8 +1,13 @@
 // Libraries
 import classNames from 'classnames';
 import React, { PureComponent } from 'react';
+
+// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// @ts-ignore
 import { default as ReactSelect } from '@torkelo/react-select';
+// @ts-ignore
 import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async';
+// @ts-ignore
 import { components } from '@torkelo/react-select';
 
 // Components
diff --git a/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap b/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap
similarity index 81%
rename from public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
rename to packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap
index 2136c22b1c6..c4185025a5d 100644
--- a/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
+++ b/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap
@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PickerOption renders correctly 1`] = `
-<div>
+<div
+  id=""
+  onClick={[MockFunction]}
+  onMouseOver={[MockFunction]}
+  tabIndex={1}
+>
   <div
     className="gf-form-select-box__desc-option"
   >

From 702d4490018dcd41f763f81b7631fef17a873429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20W=C3=BCrbach?= <johannes.wuerbach@googlemail.com>
Date: Thu, 20 Dec 2018 22:48:53 +0100
Subject: [PATCH 260/352] Docker image for ARM

---
 .circleci/config.yml                   | 44 +++++++++++++-------------
 build.go                               |  2 ++
 packaging/docker/Dockerfile            |  6 ++--
 packaging/docker/build.sh              | 40 ++++++++++++++++++-----
 packaging/docker/push_to_docker_hub.sh | 36 +++++++++++++++++----
 scripts/build/build.sh                 |  7 ++++
 6 files changed, 96 insertions(+), 39 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 236d5aec398..3d66a8ef13b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -200,47 +200,47 @@ jobs:
             - dist/grafana*
 
   grafana-docker-master:
-    docker:
-      - image: docker:stable-git
+    machine:
+      image: circleci/classic:201808-01
     steps:
       - checkout
       - attach_workspace:
           at: .
-      - setup_remote_docker
       - run: docker info
-      - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
+      - run: docker run --privileged linuxkit/binfmt:v0.6
+      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
       - run: cd packaging/docker && ./build-deploy.sh "master-${CIRCLE_SHA1}"
-      - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
+      - run: rm packaging/docker/grafana-latest.linux-*.tar.gz
       - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
       - run: cd packaging/docker && ./build-enterprise.sh "master"
 
 
   grafana-docker-pr:
-    docker:
-      - image: docker:stable-git
+    machine:
+      image: circleci/classic:201808-01
     steps:
       - checkout
       - attach_workspace:
           at: .
-      - setup_remote_docker
       - run: docker info
-      - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
+      - run: docker run --privileged linuxkit/binfmt:v0.6
+      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
       - run: cd packaging/docker && ./build.sh "${CIRCLE_SHA1}"
 
   grafana-docker-release:
-      docker:
-        - image: docker:stable-git
-      steps:
-        - checkout
-        - attach_workspace:
-            at: .
-        - setup_remote_docker
-        - run: docker info
-        - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
-        - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
-        - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
-        - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
-        - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
+    machine:
+      image: circleci/classic:201808-01
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: docker info
+      - run: docker run --privileged linuxkit/binfmt:v0.6
+      - run: cp dist/grafana-latest.linux-*.tar.gz packaging/docker
+      - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
+      - run: rm packaging/docker/grafana-latest.linux-*.tar.gz
+      - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
+      - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
 
   build-enterprise:
     docker:
diff --git a/build.go b/build.go
index 9d5216de1d0..4486cd3deb9 100644
--- a/build.go
+++ b/build.go
@@ -164,6 +164,8 @@ func makeLatestDistCopies() {
 		"_amd64.deb":          "dist/grafana_latest_amd64.deb",
 		".x86_64.rpm":         "dist/grafana-latest-1.x86_64.rpm",
 		".linux-amd64.tar.gz": "dist/grafana-latest.linux-x64.tar.gz",
+		".linux-armv7.tar.gz": "dist/grafana-latest.linux-armv7.tar.gz",
+		".linux-arm64.tar.gz": "dist/grafana-latest.linux-arm64.tar.gz",
 	}
 
 	for _, file := range files {
diff --git a/packaging/docker/Dockerfile b/packaging/docker/Dockerfile
index 4d4f6539972..d4f2f2aa7a3 100644
--- a/packaging/docker/Dockerfile
+++ b/packaging/docker/Dockerfile
@@ -1,4 +1,5 @@
-FROM debian:stretch-slim
+ARG BASE_IMAGE=debian:stretch-slim
+FROM ${BASE_IMAGE}
 
 ARG GRAFANA_TGZ="grafana-latest.linux-x64.tar.gz"
 
@@ -10,7 +11,8 @@ COPY ${GRAFANA_TGZ} /tmp/grafana.tar.gz
 
 RUN mkdir /tmp/grafana && tar xfvz /tmp/grafana.tar.gz --strip-components=1 -C /tmp/grafana
 
-FROM debian:stretch-slim
+ARG BASE_IMAGE=debian:stretch-slim
+FROM ${BASE_IMAGE}
 
 ARG GF_UID="472"
 ARG GF_GID="472"
diff --git a/packaging/docker/build.sh b/packaging/docker/build.sh
index c303c71cd5f..1bad2980d34 100755
--- a/packaging/docker/build.sh
+++ b/packaging/docker/build.sh
@@ -1,25 +1,49 @@
 #!/bin/sh
 
-_grafana_tag=$1
+_grafana_tag=${1:-}
+_docker_repo=${2:-grafana/grafana}
 
 # If the tag starts with v, treat this as a official release
 if echo "$_grafana_tag" | grep -q "^v"; then
 	_grafana_version=$(echo "${_grafana_tag}" | cut -d "v" -f 2)
-	_docker_repo=${2:-grafana/grafana}
 else
 	_grafana_version=$_grafana_tag
-	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
 echo "Building ${_docker_repo}:${_grafana_version}"
 
-docker build \
-	--tag "${_docker_repo}:${_grafana_version}" \
-	--no-cache=true .
+export DOCKER_CLI_EXPERIMENTAL=enabled
+
+# Build grafana image for a specific arch
+docker_build () {
+	base_image=$1
+	grafana_tgz=$2
+	tag=$3
+
+  docker build \
+		--build-arg BASE_IMAGE=${base_image} \
+		--build-arg GRAFANA_TGZ=${grafana_tgz} \
+		--tag "${tag}" \
+		--no-cache=true .
+}
+
+# Tag docker images of all architectures
+docker_tag_all () {
+	repo=$1
+	tag=$2
+	docker tag "${_docker_repo}:${_grafana_version}" "${repo}:${tag}"
+	docker tag "${_docker_repo}-arm32v7-linux:${_grafana_version}" "${repo}-arm32v7-linux:${tag}"
+	docker tag "${_docker_repo}-arm64v8-linux:${_grafana_version}" "${repo}-arm64v8-linux:${tag}"
+}
+
+docker_build "debian:stretch-slim" "grafana-latest.linux-x64.tar.gz" "${_docker_repo}:${_grafana_version}"
+docker_build "arm32v7/debian:stretch-slim" "grafana-latest.linux-armv7.tar.gz" "${_docker_repo}-arm32v7-linux:${_grafana_version}"
+docker_build "arm64v8/debian:stretch-slim" "grafana-latest.linux-arm64.tar.gz" "${_docker_repo}-arm64v8-linux:${_grafana_version}"
 
 # Tag as 'latest' for official release; otherwise tag as grafana/grafana:master
 if echo "$_grafana_tag" | grep -q "^v"; then
-	docker tag "${_docker_repo}:${_grafana_version}" "${_docker_repo}:latest"
+	docker_tag_all "${_docker_repo}" "latest"
 else
-	docker tag "${_docker_repo}:${_grafana_version}" "grafana/grafana:master"
+	docker_tag_all "${_docker_repo}" "master"
+	docker tag "${_docker_repo}:${_grafana_version} grafana/grafana-dev:${_grafana_version}"
 fi
diff --git a/packaging/docker/push_to_docker_hub.sh b/packaging/docker/push_to_docker_hub.sh
index 526c216f8fa..cef6d596851 100755
--- a/packaging/docker/push_to_docker_hub.sh
+++ b/packaging/docker/push_to_docker_hub.sh
@@ -1,24 +1,46 @@
 #!/bin/sh
 set -e
 
-_grafana_tag=$1
+_grafana_tag=${1:-}
+_docker_repo=${2:-grafana/grafana}
 
 # If the tag starts with v, treat this as a official release
 if echo "$_grafana_tag" | grep -q "^v"; then
 	_grafana_version=$(echo "${_grafana_tag}" | cut -d "v" -f 2)
-	_docker_repo=${2:-grafana/grafana}
 else
 	_grafana_version=$_grafana_tag
-	_docker_repo=${2:-grafana/grafana-dev}
 fi
 
+export DOCKER_CLI_EXPERIMENTAL=enabled
+
 echo "pushing ${_docker_repo}:${_grafana_version}"
-docker push "${_docker_repo}:${_grafana_version}"
+
+
+docker_push_all () {
+	repo=$1
+	tag=$2
+
+	# Push each image individually
+	docker push "${repo}:${tag}"
+	docker push "${repo}-arm32v7-linux:${tag}"
+	docker push "${repo}-arm64v8-linux:${tag}"
+
+	# Create and push a multi-arch manifest
+	docker manifest create "${repo}:${tag}" \
+		"${repo}:${tag}" \
+  	"${repo}-arm32v7-linux:${tag}" \
+		"${repo}-arm64v8-linux:${tag}"
+
+	docker manifest push "${repo}:${tag}"
+}
 
 if echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -vq "beta"; then
 	echo "pushing ${_docker_repo}:latest"
-	docker push "${_docker_repo}:latest"
+	docker_push_all "${_docker_repo}" "latest"
+	docker_push_all "${_docker_repo}" "${_grafana_version}"
+elif echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -q "beta"; then
+	docker_push_all "${_docker_repo}" "${_grafana_version}"
 elif echo "$_grafana_tag" | grep -q "master"; then
-	echo "pushing grafana/grafana:master"
-	docker push grafana/grafana:master
+	docker_push_all "grafana/grafana" "master"
+	docker push "grafana/grafana-dev:${_grafana_version}"
 fi
diff --git a/scripts/build/build.sh b/scripts/build/build.sh
index 8362942c6cd..1222053f1c8 100755
--- a/scripts/build/build.sh
+++ b/scripts/build/build.sh
@@ -8,6 +8,8 @@ set -e
 
 EXTRA_OPTS="$@"
 
+CCARMV7=arm-linux-gnueabihf-gcc
+CCARM64=aarch64-linux-gnu-gcc
 CCX64=/tmp/x86_64-centos6-linux-gnu/bin/x86_64-centos6-linux-gnu-gcc
 
 GOPATH=/go
@@ -26,6 +28,9 @@ fi
 
 echo "Build arguments: $OPT"
 
+go run build.go -goarch armv7 -cc ${CCARMV7} ${OPT} build
+go run build.go -goarch arm64 -cc ${CCARM64} ${OPT} build
+
 CC=${CCX64} go run build.go ${OPT} build
 
 yarn install --pure-lockfile --no-progress
@@ -44,3 +49,5 @@ source /etc/profile.d/rvm.sh
 
 echo "Packaging"
 go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only latest
+go run build.go -goos linux -pkg-arch armv7 ${OPT} package-only latest
+go run build.go -goos linux -pkg-arch arm64 ${OPT} package-only latest

From a82f0ed393ef14007b4333bcb83b01f8a58c8aeb Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Thu, 10 Jan 2019 13:46:03 +0100
Subject: [PATCH 261/352] build: tags arm as well as amd64 as latest.

---
 packaging/docker/build.sh              | 2 +-
 packaging/docker/push_to_docker_hub.sh | 2 +-
 scripts/build/build-all.sh             | 3 ++-
 scripts/build/build.sh                 | 8 +++++---
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packaging/docker/build.sh b/packaging/docker/build.sh
index 1bad2980d34..a522363089b 100755
--- a/packaging/docker/build.sh
+++ b/packaging/docker/build.sh
@@ -45,5 +45,5 @@ if echo "$_grafana_tag" | grep -q "^v"; then
 	docker_tag_all "${_docker_repo}" "latest"
 else
 	docker_tag_all "${_docker_repo}" "master"
-	docker tag "${_docker_repo}:${_grafana_version} grafana/grafana-dev:${_grafana_version}"
+	docker tag "${_docker_repo}:${_grafana_version}" "grafana/grafana-dev:${_grafana_version}"
 fi
diff --git a/packaging/docker/push_to_docker_hub.sh b/packaging/docker/push_to_docker_hub.sh
index cef6d596851..37b5ae0095c 100755
--- a/packaging/docker/push_to_docker_hub.sh
+++ b/packaging/docker/push_to_docker_hub.sh
@@ -41,6 +41,6 @@ if echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -vq "beta"
 elif echo "$_grafana_tag" | grep -q "^v" && echo "$_grafana_tag" | grep -q "beta"; then
 	docker_push_all "${_docker_repo}" "${_grafana_version}"
 elif echo "$_grafana_tag" | grep -q "master"; then
-	docker_push_all "grafana/grafana" "master"
+	docker_push_all "${_docker_repo}" "master"
 	docker push "grafana/grafana-dev:${_grafana_version}"
 fi
diff --git a/scripts/build/build-all.sh b/scripts/build/build-all.sh
index 3013452a279..980ef5cc4c2 100755
--- a/scripts/build/build-all.sh
+++ b/scripts/build/build-all.sh
@@ -59,7 +59,7 @@ go run build.go ${OPT} build-frontend
 source /etc/profile.d/rvm.sh
 
 echo "Packaging"
-go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only latest
+go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only
 #removing amd64 phantomjs bin for armv7/arm64 packages
 rm tools/phantomjs/phantomjs
 go run build.go -goos linux -pkg-arch armv7 ${OPT} package-only
@@ -80,3 +80,4 @@ else
 fi
 go run build.go -goos windows -pkg-arch amd64 ${OPT} package-only
 
+go run build.go latest
\ No newline at end of file
diff --git a/scripts/build/build.sh b/scripts/build/build.sh
index 1222053f1c8..ac6aab0b867 100755
--- a/scripts/build/build.sh
+++ b/scripts/build/build.sh
@@ -48,6 +48,8 @@ go run build.go ${OPT} build-frontend
 source /etc/profile.d/rvm.sh
 
 echo "Packaging"
-go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only latest
-go run build.go -goos linux -pkg-arch armv7 ${OPT} package-only latest
-go run build.go -goos linux -pkg-arch arm64 ${OPT} package-only latest
+go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only
+go run build.go -goos linux -pkg-arch armv7 ${OPT} package-only
+go run build.go -goos linux -pkg-arch arm64 ${OPT} package-only
+
+go run build.go latest

From c22ef628f32d5d7d29e44db634a48868d48d740b Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Thu, 10 Jan 2019 15:11:51 +0100
Subject: [PATCH 262/352] build: removes curl install from build.

---
 packaging/docker/build-deploy.sh | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packaging/docker/build-deploy.sh b/packaging/docker/build-deploy.sh
index ac3226a4a61..22655bead8c 100755
--- a/packaging/docker/build-deploy.sh
+++ b/packaging/docker/build-deploy.sh
@@ -8,6 +8,5 @@ docker login -u "$DOCKER_USER" -p "$DOCKER_PASS"
 ./push_to_docker_hub.sh "$_grafana_version"
 
 if echo "$_grafana_version" | grep -q "^master-"; then
-  apk add --no-cache curl
   ./deploy_to_k8s.sh "grafana/grafana-dev:$_grafana_version"
 fi

From d322717f3ee8551fffe11d883aff8446241a1ff6 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 10 Jan 2019 15:21:11 +0100
Subject: [PATCH 263/352] Renamed Select related components: Picker* to
 Select*, Option* to SelectOption*

---
 packages/grafana-ui/src/components/Select/Select.tsx      | 8 ++++----
 .../{PickerOption.test.tsx => SelectOption.test.tsx}      | 6 +++---
 .../Select/{PickerOption.tsx => SelectOption.tsx}         | 4 ++--
 .../Select/{OptionGroup.tsx => SelectOptionGroup.tsx}     | 2 +-
 ...kerOption.test.tsx.snap => SelectOption.test.tsx.snap} | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)
 rename packages/grafana-ui/src/components/Select/{PickerOption.test.tsx => SelectOption.test.tsx} (90%)
 rename packages/grafana-ui/src/components/Select/{PickerOption.tsx => SelectOption.tsx} (93%)
 rename packages/grafana-ui/src/components/Select/{OptionGroup.tsx => SelectOptionGroup.tsx} (93%)
 rename packages/grafana-ui/src/components/Select/__snapshots__/{PickerOption.test.tsx.snap => SelectOption.test.tsx.snap} (90%)

diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
index a2584ce8124..b3b0c8efbbb 100644
--- a/packages/grafana-ui/src/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -11,8 +11,8 @@ import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async';
 import { components } from '@torkelo/react-select';
 
 // Components
-import { Option, SingleValue } from './PickerOption';
-import OptionGroup from './OptionGroup';
+import { SelectOption, SingleValue } from './SelectOption';
+import SelectOptionGroup from './SelectOptionGroup';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import resetSelectStyles from './resetSelectStyles';
@@ -117,11 +117,11 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
         classNamePrefix="gf-form-select-box"
         className={selectClassNames}
         components={{
-          Option,
+          Option: SelectOption,
           SingleValue,
           IndicatorsContainer,
           MenuList,
-          Group: OptionGroup,
+          Group: SelectOptionGroup,
         }}
         defaultValue={defaultValue}
         value={value}
diff --git a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx b/packages/grafana-ui/src/components/Select/SelectOption.test.tsx
similarity index 90%
rename from packages/grafana-ui/src/components/Select/PickerOption.test.tsx
rename to packages/grafana-ui/src/components/Select/SelectOption.test.tsx
index 20187734c1a..a7326b3f4db 100644
--- a/packages/grafana-ui/src/components/Select/PickerOption.test.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOption.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import PickerOption from './PickerOption';
+import SelectOption from './SelectOption';
 import { OptionProps } from 'react-select/lib/components/Option';
 
 const model: OptionProps<any> = {
@@ -31,11 +31,11 @@ const model: OptionProps<any> = {
   className: 'class-for-user-picker',
 };
 
-describe('PickerOption', () => {
+describe('SelectOption', () => {
   it('renders correctly', () => {
     const tree = renderer
       .create(
-        <PickerOption
+        <SelectOption
           {...model}
           data={{
             imgUrl: 'url/to/avatar',
diff --git a/packages/grafana-ui/src/components/Select/PickerOption.tsx b/packages/grafana-ui/src/components/Select/SelectOption.tsx
similarity index 93%
rename from packages/grafana-ui/src/components/Select/PickerOption.tsx
rename to packages/grafana-ui/src/components/Select/SelectOption.tsx
index 4bbcb74a563..5f94c2182f9 100644
--- a/packages/grafana-ui/src/components/Select/PickerOption.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOption.tsx
@@ -13,7 +13,7 @@ interface ExtendedOptionProps extends OptionProps<any> {
   };
 }
 
-export const Option = (props: ExtendedOptionProps) => {
+export const SelectOption = (props: ExtendedOptionProps) => {
   const { children, isSelected, data } = props;
 
   return (
@@ -44,4 +44,4 @@ export const SingleValue = (props: any) => {
   );
 };
 
-export default Option;
+export default SelectOption;
diff --git a/packages/grafana-ui/src/components/Select/OptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
similarity index 93%
rename from packages/grafana-ui/src/components/Select/OptionGroup.tsx
rename to packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
index ed2b72a537c..30842f02e29 100644
--- a/packages/grafana-ui/src/components/Select/OptionGroup.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
@@ -9,7 +9,7 @@ interface State {
   expanded: boolean;
 }
 
-export default class OptionGroup extends PureComponent<ExtendedGroupProps, State> {
+export default class SelectOptionGroup extends PureComponent<ExtendedGroupProps, State> {
   state = {
     expanded: false,
   };
diff --git a/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap b/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap
similarity index 90%
rename from packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap
rename to packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap
index c4185025a5d..c52be902edd 100644
--- a/packages/grafana-ui/src/components/Select/__snapshots__/PickerOption.test.tsx.snap
+++ b/packages/grafana-ui/src/components/Select/__snapshots__/SelectOption.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PickerOption renders correctly 1`] = `
+exports[`SelectOption renders correctly 1`] = `
 <div
   id=""
   onClick={[MockFunction]}

From cdfdc676ae5e25b03736438dccd9e8b309bf9238 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Thu, 10 Jan 2019 16:50:36 +0100
Subject: [PATCH 264/352] changelog: docker images for arm.

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 671740f7225..46b7381cba1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 * **OAuth**: Support OAuth providers that are not RFC6749 compliant [#14562](https://github.com/grafana/grafana/issues/14562), thx [@tdabasinskas](https://github.com/tdabasinskas)
 * **Units**: Add blood glucose level units mg/dL and mmol/L [#14519](https://github.com/grafana/grafana/issues/14519), thx [@kjedamzik](https://github.com/kjedamzik)
 * **Stackdriver**: Aggregating series returns more than one series [#14581](https://github.com/grafana/grafana/issues/14581) and [#13914](https://github.com/grafana/grafana/issues/13914), thx [@kinok](https://github.com/kinok)
+* **Docker**: Build and publish docker images for armv7 and arm64 [#14617](https://github.com/grafana/grafana/pull/14617), thx [@johanneswuerbach](https://github.com/johanneswuerbach)
 
 ### Bug fixes
 * **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)

From 0f82fffed65449299394c109903f1ccac6d268d7 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Thu, 10 Jan 2019 15:22:30 +0100
Subject: [PATCH 265/352] build: makes sure all builds use the latest
 container.

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3d66a8ef13b..7f9c40bd968 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -127,7 +127,7 @@ jobs:
 
   build-all:
     docker:
-     - image: grafana/build-container:1.2.1
+     - image: grafana/build-container:1.2.2
     working_directory: /go/src/github.com/grafana/grafana
     steps:
       - checkout
@@ -244,7 +244,7 @@ jobs:
 
   build-enterprise:
     docker:
-     - image: grafana/build-container:1.2.1
+     - image: grafana/build-container:1.2.2
     working_directory: /go/src/github.com/grafana/grafana
     steps:
       - checkout
@@ -276,7 +276,7 @@ jobs:
 
   build-all-enterprise:
     docker:
-    - image: grafana/build-container:1.2.1
+    - image: grafana/build-container:1.2.2
     working_directory: /go/src/github.com/grafana/grafana
     steps:
     - checkout

From b64115e5f5a0b9bd8fe5896ca273e01a11472394 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 10 Jan 2019 17:18:24 +0100
Subject: [PATCH 266/352] access scope directly from this. update tests

---
 .../stackdriver/query_filter_ctrl.ts          | 52 ++++++++---------
 .../specs/query_filter_ctrl.test.ts           | 56 +++++++++----------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 2d631ee43a7..889720ad286 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -30,15 +30,23 @@ export class StackdriverFilterCtrl {
   groupBySegments: any[];
   filterSegments: FilterSegments;
   removeSegment: any;
+  filters: string[];
+  groupBys: string[];
+  hideGroupBys: boolean;
+  labelData: any;
+  loading: Promise<any>;
+  filtersChanged: (filters) => void;
+  groupBysChanged: (groupBys) => void;
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv) {
-    this.initSegments(this.$scope.ctrl.hideGroupBys);
+    this.$scope.ctrl = this;
+    this.initSegments(this.hideGroupBys);
   }
 
   initSegments(hideGroupBys: boolean) {
     if (!hideGroupBys) {
-      this.groupBySegments = this.$scope.ctrl.groupBys.map(groupBy => {
+      this.groupBySegments = this.groupBys.map(groupBy => {
         return this.uiSegmentSrv.getSegmentForValue(groupBy);
       });
       this.ensurePlusButton(this.groupBySegments);
@@ -48,7 +56,7 @@ export class StackdriverFilterCtrl {
 
     this.filterSegments = new FilterSegments(
       this.uiSegmentSrv,
-      this.$scope.ctrl.filters,
+      this.filters,
       this.getFilterKeys.bind(this),
       this.getFilterValues.bind(this)
     );
@@ -56,9 +64,9 @@ export class StackdriverFilterCtrl {
   }
 
   async createLabelKeyElements() {
-    await this.$scope.ctrl.loading;
+    await this.loading;
 
-    let elements = Object.keys(this.$scope.ctrl.labelData.metricLabels || {}).map(l => {
+    let elements = Object.keys(this.labelData.metricLabels || {}).map(l => {
       return this.uiSegmentSrv.newSegment({
         value: `metric.label.${l}`,
         expandable: false,
@@ -67,7 +75,7 @@ export class StackdriverFilterCtrl {
 
     elements = [
       ...elements,
-      ...Object.keys(this.$scope.ctrl.labelData.resourceLabels || {}).map(l => {
+      ...Object.keys(this.labelData.resourceLabels || {}).map(l => {
         return this.uiSegmentSrv.newSegment({
           value: `resource.label.${l}`,
           expandable: false,
@@ -75,7 +83,7 @@ export class StackdriverFilterCtrl {
       }),
     ];
 
-    if (this.$scope.ctrl.labelData.resourceTypes && this.$scope.ctrl.labelData.resourceTypes.length > 0) {
+    if (this.labelData.resourceTypes && this.labelData.resourceTypes.length > 0) {
       elements = [
         ...elements,
         this.uiSegmentSrv.newSegment({
@@ -91,7 +99,7 @@ export class StackdriverFilterCtrl {
   async getFilterKeys(segment, removeText: string) {
     let elements = await this.createLabelKeyElements();
 
-    if (this.$scope.ctrl.filters.indexOf(this.resourceTypeValue) !== -1) {
+    if (this.filters.indexOf(this.resourceTypeValue) !== -1) {
       elements = elements.filter(e => e.value !== this.resourceTypeValue);
     }
 
@@ -110,8 +118,7 @@ export class StackdriverFilterCtrl {
 
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
-    console.log('elements', elements);
-    elements = elements.filter(e => this.$scope.ctrl.groupBys.indexOf(e.value) === -1);
+    elements = elements.filter(e => this.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
       return [];
@@ -136,39 +143,34 @@ export class StackdriverFilterCtrl {
     };
 
     const groupBys = this.groupBySegments.reduce(reducer, []);
-    this.$scope.ctrl.groupBysChanged({ groupBys });
+    this.groupBysChanged({ groupBys });
     this.ensurePlusButton(this.groupBySegments);
   }
 
   async getFilters(segment, index) {
-    await this.$scope.ctrl.loading;
-    const hasNoFilterKeys =
-      this.$scope.ctrl.labelData.metricLabels && Object.keys(this.$scope.ctrl.labelData.metricLabels).length === 0;
+    await this.loading;
+    const hasNoFilterKeys = this.labelData.metricLabels && Object.keys(this.labelData.metricLabels).length === 0;
     return this.filterSegments.getFilters(segment, index, hasNoFilterKeys);
   }
 
   getFilterValues(index) {
     const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value);
-    if (
-      !filterKey ||
-      !this.$scope.ctrl.labelData.metricLabels ||
-      Object.keys(this.$scope.ctrl.labelData.metricLabels).length === 0
-    ) {
+    if (!filterKey || !this.labelData.metricLabels || Object.keys(this.labelData.metricLabels).length === 0) {
       return [];
     }
 
     const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
 
-    if (filterKey.startsWith('metric.label.') && this.$scope.ctrl.labelData.metricLabels.hasOwnProperty(shortKey)) {
-      return this.$scope.ctrl.labelData.metricLabels[shortKey];
+    if (filterKey.startsWith('metric.label.') && this.labelData.metricLabels.hasOwnProperty(shortKey)) {
+      return this.labelData.metricLabels[shortKey];
     }
 
-    if (filterKey.startsWith('resource.label.') && this.$scope.ctrl.labelData.resourceLabels.hasOwnProperty(shortKey)) {
-      return this.$scope.ctrl.labelData.resourceLabels[shortKey];
+    if (filterKey.startsWith('resource.label.') && this.labelData.resourceLabels.hasOwnProperty(shortKey)) {
+      return this.labelData.resourceLabels[shortKey];
     }
 
     if (filterKey === this.resourceTypeValue) {
-      return this.$scope.ctrl.labelData.resourceTypes;
+      return this.labelData.resourceTypes;
     }
 
     return [];
@@ -177,7 +179,7 @@ export class StackdriverFilterCtrl {
   filterSegmentUpdated(segment, index) {
     const filters = this.filterSegments.filterSegmentUpdated(segment, index);
     if (!filters.some(f => f === DefaultFilterValue)) {
-      this.$scope.ctrl.filtersChanged({ filters });
+      this.filtersChanged({ filters });
     }
   }
 
diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
index 70622cb5de9..b492cb72e90 100644
--- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
@@ -5,7 +5,6 @@ import { DefaultRemoveFilterValue, DefaultFilterValue } from '../filter_segments
 describe('StackdriverQueryFilterCtrl', () => {
   let ctrl;
   let result;
-  // let filterChangedMock;
   let groupByChangedMock;
 
   describe('when initializing query editor', () => {
@@ -34,8 +33,8 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when labels are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.ctrl.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
-        ctrl.$scope.ctrl.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
+        ctrl.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
+        ctrl.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
 
         result = await ctrl.getGroupBys({ type: '' });
       });
@@ -50,15 +49,15 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when a group by label is selected', () => {
       beforeEach(async () => {
-        ctrl.$scope.ctrl.labelData.metricLabels = {
+        ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.ctrl.labelData.resourceLabels = {
+        ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
-        ctrl.$scope.ctrl.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
+        ctrl.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
 
         result = await ctrl.getGroupBys({ type: '' });
       });
@@ -74,7 +73,7 @@ describe('StackdriverQueryFilterCtrl', () => {
     describe('when a group by is selected', () => {
       beforeEach(() => {
         groupByChangedMock = jest.fn();
-        ctrl.$scope.ctrl.groupBysChanged = groupByChangedMock;
+        ctrl.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -89,7 +88,7 @@ describe('StackdriverQueryFilterCtrl', () => {
     describe('when a selected group by is removed', () => {
       beforeEach(() => {
         groupByChangedMock = jest.fn();
-        ctrl.$scope.ctrl.groupBysChanged = groupByChangedMock;
+        ctrl.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -136,11 +135,11 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when values for a key filter part are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.ctrl.labelData.metricLabels = {
+        ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.ctrl.labelData.resourceLabels = {
+        ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
@@ -161,11 +160,11 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when values for a value filter part are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.ctrl.labelData.metricLabels = {
+        ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.ctrl.labelData.resourceLabels = {
+        ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
@@ -392,25 +391,24 @@ function createCtrlWithFakes(existingFilters?: string[]) {
     },
   };
   const scope = {
-    ctrl: {
-      hideGroupBys: false,
-      groupBys: [],
-      filters: existingFilters || [],
-      labelData: {
-        metricLabels: {},
-        resourceLabels: {},
-        resourceTypes: [],
-      },
-      filtersChanged: () => {},
-      groupBysChanged: () => {},
-      datasource: {
-        getDefaultProject: () => {
-          return 'project';
-        },
-      },
-      refresh: () => {},
+    hideGroupBys: false,
+    groupBys: [],
+    filters: existingFilters || [],
+    labelData: {
+      metricLabels: {},
+      resourceLabels: {},
+      resourceTypes: [],
     },
+    filtersChanged: () => {},
+    groupBysChanged: () => {},
+    datasource: {
+      getDefaultProject: () => {
+        return 'project';
+      },
+    },
+    refresh: () => {},
   };
 
+  Object.assign(StackdriverFilterCtrl.prototype, scope);
   return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub());
 }

From 60fadcf1e583b1243a2a0334389210a9b7a2807a Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 10 Jan 2019 20:15:03 +0100
Subject: [PATCH 267/352] Fix panel time overrides not being applied fully

When both relative and time shift were applied, only time shift was taken into consideration
---
 public/app/features/dashboard/utils/panel.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index f7ed0efd910..cf00a31c71e 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -143,12 +143,9 @@ export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange)
     const timeShift = '-' + timeShiftInterpolated;
     newTimeData.timeInfo += ' timeshift ' + timeShift;
     newTimeData.timeRange = {
-      from: dateMath.parseDateMath(timeShift, timeRange.from, false),
-      to: dateMath.parseDateMath(timeShift, timeRange.to, true),
-      raw: {
-        from: timeRange.from,
-        to: timeRange.to,
-      },
+      from: dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false),
+      to: dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true),
+      raw: newTimeData.timeRange.raw,
     };
   }
 

From 08ac2959a4d17a58aaf1f64738d1e442c6de93eb Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 10 Jan 2019 21:47:09 +0000
Subject: [PATCH 268/352] Moving to grafana ui, fix issue with TestRuleResult

---
 .../LoadingPlaceholder/LoadingPlaceholder.tsx | 11 ++++++++++
 packages/grafana-ui/src/components/index.ts   |  1 +
 public/app/features/alerting/AlertTab.tsx     | 21 ++++++-------------
 .../features/alerting/TestRuleButton.test.tsx |  6 +++---
 ...{TestRuleButton.tsx => TestRuleResult.tsx} |  6 ++++--
 .../dashboard/dashgrid/QueriesTab.tsx         | 11 +++-------
 6 files changed, 28 insertions(+), 28 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
 rename public/app/features/alerting/{TestRuleButton.tsx => TestRuleResult.tsx} (86%)

diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
new file mode 100644
index 00000000000..01048014f8a
--- /dev/null
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -0,0 +1,11 @@
+import React, { SFC } from 'react';
+
+interface LoadingPlaceholderProps {
+  text: string;
+}
+
+export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
+  <div className="gf-form-group">
+    {text} <i className="fa fa-spinner fa-spin" />
+  </div>
+);
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index abb1cf1b34c..6fa7de62572 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -2,3 +2,4 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index 5623fac95c1..0520cd5e6e8 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -1,11 +1,12 @@
 // Libraries
-import React, { PureComponent, SFC } from 'react';
+import React, { PureComponent } from 'react';
 
 // Services & Utils
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import appEvents from 'app/core/app_events';
 
 // Components
+import { LoadingPlaceholder } from '@grafana/ui';
 import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
@@ -14,7 +15,7 @@ import 'app/features/alerting/AlertTabCtrl';
 // Types
 import { DashboardModel } from '../dashboard/dashboard_model';
 import { PanelModel } from '../dashboard/panel_model';
-import { TestRuleButton } from './TestRuleButton';
+import { TestRuleResult } from './TestRuleResult';
 
 interface Props {
   angularPanel?: AngularComponent;
@@ -22,16 +23,6 @@ interface Props {
   panel: PanelModel;
 }
 
-interface LoadingPlaceholderProps {
-  text: string;
-}
-
-const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
-  <div className="gf-form-group">
-    {text} <i className="fa fa-spinner fa-spin" />
-  </div>
-);
-
 export class AlertTab extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
@@ -120,14 +111,14 @@ export class AlertTab extends PureComponent<Props> {
     };
   };
 
-  renderTestRuleButton = () => {
+  renderTestRuleResult = () => {
     const { panel, dashboard } = this.props;
-    return <TestRuleButton panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
+    return <TestRuleResult panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
   };
 
   testRule = (): EditorToolbarView => ({
     title: 'Test Rule',
-    render: () => this.renderTestRuleButton(),
+    render: () => this.renderTestRuleResult(),
   });
 
   onAddAlert = () => {
diff --git a/public/app/features/alerting/TestRuleButton.test.tsx b/public/app/features/alerting/TestRuleButton.test.tsx
index ae3b570cf43..b762ebf2579 100644
--- a/public/app/features/alerting/TestRuleButton.test.tsx
+++ b/public/app/features/alerting/TestRuleButton.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DashboardModel } from '../dashboard/dashboard_model';
-import { Props, TestRuleButton } from './TestRuleButton';
+import { Props, TestRuleResult } from './TestRuleResult';
 
 jest.mock('app/core/services/backend_srv', () => ({
   getBackendSrv: () => ({
@@ -18,9 +18,9 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<TestRuleButton {...props} />);
+  const wrapper = shallow(<TestRuleResult {...props} />);
 
-  return { wrapper, instance: wrapper.instance() as TestRuleButton };
+  return { wrapper, instance: wrapper.instance() as TestRuleResult };
 };
 
 describe('Render', () => {
diff --git a/public/app/features/alerting/TestRuleButton.tsx b/public/app/features/alerting/TestRuleResult.tsx
similarity index 86%
rename from public/app/features/alerting/TestRuleButton.tsx
rename to public/app/features/alerting/TestRuleResult.tsx
index f9927b1a182..e55dd6aae51 100644
--- a/public/app/features/alerting/TestRuleButton.tsx
+++ b/public/app/features/alerting/TestRuleResult.tsx
@@ -14,7 +14,7 @@ interface State {
   testRuleResponse: {};
 }
 
-export class TestRuleButton extends PureComponent<Props, State> {
+export class TestRuleResult extends PureComponent<Props, State> {
   readonly state: State = {
     isLoading: false,
     testRuleResponse: {},
@@ -27,8 +27,10 @@ export class TestRuleButton extends PureComponent<Props, State> {
   async testRule() {
     const { panelId, dashboard } = this.props;
     const payload = { dashboard: dashboard.getSaveModelClone(), panelId };
+
+    this.setState({ isLoading: true });
     const testRuleResponse = await getBackendSrv().post(`/api/alerts/test`, payload);
-    this.setState(prevState => ({ ...prevState, isLoading: false, testRuleResponse }));
+    this.setState({ isLoading: false, testRuleResponse });
   }
 
   render() {
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 77ab64b1dba..eab7a95d471 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -1,15 +1,16 @@
 // Libraries
-import React, { PureComponent, SFC } from 'react';
+import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
 // Components
 import 'app/features/panel/metrics_tab';
-import { EditorTabBody, EditorToolbarView} from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
 import { PanelOptionSection } from './PanelOptionSection';
+import { LoadingPlaceholder } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -36,12 +37,6 @@ interface State {
   isAddingMixed: boolean;
 }
 
-interface LoadingPlaceholderProps {
-  text: string;
-}
-
-const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
-
 export class QueriesTab extends PureComponent<Props, State> {
   element: HTMLElement;
   component: AngularComponent;

From 2f0ab99ae5e63bc58984b6cc126228962ea38b21 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 10 Jan 2019 22:15:37 +0000
Subject: [PATCH 269/352] Fixing test and small refactor

---
 public/app/features/alerting/AlertTab.tsx           |  3 +--
 ...tRuleButton.test.tsx => TestRuleResult.test.tsx} |  1 -
 public/app/features/alerting/TestRuleResult.tsx     |  3 +--
 .../__snapshots__/TestRuleButton.test.tsx.snap      | 13 -------------
 .../__snapshots__/TestRuleResult.test.tsx.snap      |  7 +++++++
 .../app/features/dashboard/dashgrid/QueriesTab.tsx  |  3 +--
 .../features/dashboard/dashgrid/QueryInspector.tsx  |  3 +--
 7 files changed, 11 insertions(+), 22 deletions(-)
 rename public/app/features/alerting/{TestRuleButton.test.tsx => TestRuleResult.test.tsx} (97%)
 delete mode 100644 public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
 create mode 100644 public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap

diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index 0520cd5e6e8..2a1b3d12ecf 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -6,7 +6,6 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
 import appEvents from 'app/core/app_events';
 
 // Components
-import { LoadingPlaceholder } from '@grafana/ui';
 import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
@@ -113,7 +112,7 @@ export class AlertTab extends PureComponent<Props> {
 
   renderTestRuleResult = () => {
     const { panel, dashboard } = this.props;
-    return <TestRuleResult panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
+    return <TestRuleResult panelId={panel.id} dashboard={dashboard} />;
   };
 
   testRule = (): EditorToolbarView => ({
diff --git a/public/app/features/alerting/TestRuleButton.test.tsx b/public/app/features/alerting/TestRuleResult.test.tsx
similarity index 97%
rename from public/app/features/alerting/TestRuleButton.test.tsx
rename to public/app/features/alerting/TestRuleResult.test.tsx
index b762ebf2579..9beb5ade632 100644
--- a/public/app/features/alerting/TestRuleButton.test.tsx
+++ b/public/app/features/alerting/TestRuleResult.test.tsx
@@ -13,7 +13,6 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     panelId: 1,
     dashboard: new DashboardModel({ panels: [{ id: 1 }] }),
-    LoadingPlaceholder: {},
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/alerting/TestRuleResult.tsx b/public/app/features/alerting/TestRuleResult.tsx
index e55dd6aae51..4014e529597 100644
--- a/public/app/features/alerting/TestRuleResult.tsx
+++ b/public/app/features/alerting/TestRuleResult.tsx
@@ -2,11 +2,11 @@ import React, { PureComponent } from 'react';
 import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { DashboardModel } from '../dashboard/dashboard_model';
+import { LoadingPlaceholder } from '@grafana/ui/src';
 
 export interface Props {
   panelId: number;
   dashboard: DashboardModel;
-  LoadingPlaceholder: any;
 }
 
 interface State {
@@ -35,7 +35,6 @@ export class TestRuleResult extends PureComponent<Props, State> {
 
   render() {
     const { testRuleResponse, isLoading } = this.state;
-    const { LoadingPlaceholder } = this.props;
 
     if (isLoading === true) {
       return <LoadingPlaceholder text="Evaluating rule" />;
diff --git a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap b/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
deleted file mode 100644
index d1ed3e64e99..00000000000
--- a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<JSONFormatter
-  config={
-    Object {
-      "animateOpen": true,
-    }
-  }
-  json={Object {}}
-  open={3}
-/>
-`;
diff --git a/public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap b/public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap
new file mode 100644
index 00000000000..73f85f12354
--- /dev/null
+++ b/public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<Component
+  text="Evaluating rule"
+/>
+`;
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index eab7a95d471..a20f8627fba 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -10,7 +10,6 @@ import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
 import { PanelOptionSection } from './PanelOptionSection';
-import { LoadingPlaceholder } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -129,7 +128,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
   renderQueryInspector = () => {
     const { panel } = this.props;
-    return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />;
+    return <QueryInspector panel={panel} />;
   };
 
   renderHelp = () => {
diff --git a/public/app/features/dashboard/dashgrid/QueryInspector.tsx b/public/app/features/dashboard/dashgrid/QueryInspector.tsx
index 090bc220bc0..8e490f6b622 100644
--- a/public/app/features/dashboard/dashgrid/QueryInspector.tsx
+++ b/public/app/features/dashboard/dashgrid/QueryInspector.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
+import { LoadingPlaceholder } from '@grafana/ui';
 
 interface DsQuery {
   isLoading: boolean;
@@ -10,7 +11,6 @@ interface DsQuery {
 
 interface Props {
   panel: any;
-  LoadingPlaceholder: any;
 }
 
 interface State {
@@ -177,7 +177,6 @@ export class QueryInspector extends PureComponent<Props, State> {
 
   render() {
     const { response, isLoading } = this.state.dsQuery;
-    const { LoadingPlaceholder } = this.props;
     const { isMocking } = this.state;
     const openNodes = this.getNrOfOpenNodes();
 

From d376fae393b099811af036e799738880a2e542ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 13:34:23 +0100
Subject: [PATCH 270/352] Moved colorpicker to ui/components

---
 packages/grafana-ui/package.json              |  4 +-
 .../ColorPicker}/ColorPalette.test.tsx        |  2 +-
 .../components/ColorPicker}/ColorPalette.tsx  |  6 +-
 .../components/ColorPicker}/ColorPicker.tsx   | 10 +-
 .../ColorPicker}/ColorPickerPopover.tsx       | 33 +++----
 .../ColorPicker}/SeriesColorPicker.tsx        |  4 +-
 .../ColorPicker}/SeriesColorPickerPopover.tsx | 11 +--
 .../ColorPicker}/SpectrumPicker.tsx           |  8 +-
 .../__snapshots__/ColorPalette.test.tsx.snap  |  0
 packages/grafana-ui/src/components/index.ts   |  3 +
 packages/grafana-ui/src/index.ts              |  1 +
 packages/grafana-ui/src/utils/colors.ts       | 94 +++++++++++++++++++
 packages/grafana-ui/src/utils/index.ts        |  2 +
 public/app/core/angular_wrappers.ts           | 10 ++
 public/app/core/core.ts                       |  4 +-
 public/app/core/logs_model.ts                 |  4 +-
 public/app/core/utils/colors.ts               | 94 -------------------
 public/app/core/utils/explore.ts              |  2 +-
 .../app/features/annotations/event_manager.ts |  7 +-
 .../app/features/dashboard/dashboard_model.ts |  2 +-
 public/app/plugins/panel/gauge/Thresholds.tsx |  2 +-
 .../panel/graph/Legend/LegendSeriesItem.tsx   |  2 +-
 .../app/plugins/panel/graph/data_processor.ts |  3 +-
 .../app/plugins/panel/graph2/GraphPanel.tsx   |  2 +-
 public/app/routes/GrafanaCtrl.ts              |  4 +-
 public/app/viz/state/timeSeries.ts            |  2 +-
 26 files changed, 157 insertions(+), 159 deletions(-)
 rename {public/app/core/specs => packages/grafana-ui/src/components/ColorPicker}/ColorPalette.test.tsx (80%)
 rename {public/app/core/components/colorpicker => packages/grafana-ui/src/components/ColorPicker}/ColorPalette.tsx (90%)
 rename {public/app/core/components/colorpicker => packages/grafana-ui/src/components/ColorPicker}/ColorPicker.tsx (85%)
 rename {public/app/core/components/colorpicker => packages/grafana-ui/src/components/ColorPicker}/ColorPickerPopover.tsx (83%)
 rename {public/app/core/components/colorpicker => packages/grafana-ui/src/components/ColorPicker}/SeriesColorPicker.tsx (96%)
 rename {public/app/core/components/colorpicker => packages/grafana-ui/src/components/ColorPicker}/SeriesColorPickerPopover.tsx (86%)
 rename {public/app/core/components/colorpicker => packages/grafana-ui/src/components/ColorPicker}/SpectrumPicker.tsx (92%)
 rename {public/app/core/specs => packages/grafana-ui/src/components/ColorPicker}/__snapshots__/ColorPalette.test.tsx.snap (100%)
 create mode 100644 packages/grafana-ui/src/utils/colors.ts

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 6548f75e91f..5221e1ba02f 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -23,7 +23,9 @@
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
     "react-transition-group": "^2.2.1",
-    "react-virtualized": "^9.21.0"
+    "react-virtualized": "^9.21.0",
+    "tether-drop": "https://github.com/torkelo/drop/tarball/master",
+    "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.6",
diff --git a/public/app/core/specs/ColorPalette.test.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPalette.test.tsx
similarity index 80%
rename from public/app/core/specs/ColorPalette.test.tsx
rename to packages/grafana-ui/src/components/ColorPicker/ColorPalette.test.tsx
index fb1124aa975..0714180de54 100644
--- a/public/app/core/specs/ColorPalette.test.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPalette.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { ColorPalette } from '../components/colorpicker/ColorPalette';
+import { ColorPalette } from './ColorPalette';
 
 describe('CollorPalette', () => {
   it('renders correctly', () => {
diff --git a/public/app/core/components/colorpicker/ColorPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPalette.tsx
similarity index 90%
rename from public/app/core/components/colorpicker/ColorPalette.tsx
rename to packages/grafana-ui/src/components/ColorPicker/ColorPalette.tsx
index edb2629d16d..03ed9949361 100644
--- a/public/app/core/components/colorpicker/ColorPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPalette.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { sortedColors } from 'app/core/utils/colors';
+import { sortedColors } from '../../utils';
 
 export interface Props {
   color: string;
@@ -9,13 +9,13 @@ export interface Props {
 export class ColorPalette extends React.Component<Props, any> {
   paletteColors: string[];
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.paletteColors = sortedColors;
     this.onColorSelect = this.onColorSelect.bind(this);
   }
 
-  onColorSelect(color) {
+  onColorSelect(color: string) {
     return () => {
       this.props.onColorSelect(color);
     };
diff --git a/public/app/core/components/colorpicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
similarity index 85%
rename from public/app/core/components/colorpicker/ColorPicker.tsx
rename to packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 9541001b0a8..fbe14d4eb8c 100644
--- a/public/app/core/components/colorpicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Drop from 'tether-drop';
 import { ColorPickerPopover } from './ColorPickerPopover';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface Props {
   color: string;
@@ -10,7 +9,7 @@ export interface Props {
 }
 
 export class ColorPicker extends React.Component<Props, any> {
-  pickerElem: HTMLElement;
+  pickerElem: HTMLElement | null;
   colorPickerDrop: any;
 
   openColorPicker = () => {
@@ -45,7 +44,7 @@ export class ColorPicker extends React.Component<Props, any> {
     }, 100);
   };
 
-  onColorSelect = color => {
+  onColorSelect = (color: string) => {
     this.props.onChange(color);
   };
 
@@ -59,8 +58,3 @@ export class ColorPicker extends React.Component<Props, any> {
     );
   }
 }
-
-react2AngularDirective('colorPicker', ColorPicker, [
-  'color',
-  ['onChange', { watchDepth: 'reference', wrapApply: true }],
-]);
diff --git a/public/app/core/components/colorpicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
similarity index 83%
rename from public/app/core/components/colorpicker/ColorPickerPopover.tsx
rename to packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index c42bcfa1d06..e8305c99319 100644
--- a/public/app/core/components/colorpicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -14,7 +14,7 @@ export interface Props {
 export class ColorPickerPopover extends React.Component<Props, any> {
   pickerNavElem: any;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.state = {
       tab: 'palette',
@@ -23,60 +23,51 @@ export class ColorPickerPopover extends React.Component<Props, any> {
     };
   }
 
-  setPickerNavElem(elem) {
+  setPickerNavElem(elem: any) {
     this.pickerNavElem = $(elem);
   }
 
-  setColor(color) {
+  setColor(color: string) {
     const newColor = tinycolor(color);
     if (newColor.isValid()) {
-      this.setState({
-        color: newColor.toString(),
-        colorString: newColor.toString(),
-      });
+      this.setState({ color: newColor.toString(), colorString: newColor.toString() });
       this.props.onColorSelect(color);
     }
   }
 
-  sampleColorSelected(color) {
+  sampleColorSelected(color: string) {
     this.setColor(color);
   }
 
-  spectrumColorSelected(color) {
+  spectrumColorSelected(color: any) {
     const rgbColor = color.toRgbString();
     this.setColor(rgbColor);
   }
 
-  onColorStringChange(e) {
+  onColorStringChange(e: any) {
     const colorString = e.target.value;
-    this.setState({
-      colorString: colorString,
-    });
+    this.setState({ colorString: colorString });
 
     const newColor = tinycolor(colorString);
     if (newColor.isValid()) {
       // Update only color state
       const newColorString = newColor.toString();
-      this.setState({
-        color: newColorString,
-      });
+      this.setState({ color: newColorString });
       this.props.onColorSelect(newColorString);
     }
   }
 
-  onColorStringBlur(e) {
+  onColorStringBlur(e: any) {
     const colorString = e.target.value;
     this.setColor(colorString);
   }
 
   componentDidMount() {
     this.pickerNavElem.find('li:first').addClass('active');
-    this.pickerNavElem.on('show', e => {
+    this.pickerNavElem.on('show', (e: any) => {
       // use href attr (#name => name)
       const tab = e.target.hash.slice(1);
-      this.setState({
-        tab: tab,
-      });
+      this.setState({ tab: tab });
     });
   }
 
diff --git a/public/app/core/components/colorpicker/SeriesColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
similarity index 96%
rename from public/app/core/components/colorpicker/SeriesColorPicker.tsx
rename to packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
index 32b7554e38d..b8ba03b7feb 100644
--- a/public/app/core/components/colorpicker/SeriesColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
@@ -8,7 +8,7 @@ export interface SeriesColorPickerProps {
   yaxis?: number;
   optionalClass?: string;
   onColorChange: (newColor: string) => void;
-  onToggleAxis?: () => void;
+  onToggleAxis: () => void;
 }
 
 export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
@@ -21,7 +21,7 @@ export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
     onToggleAxis: () => {},
   };
 
-  constructor(props) {
+  constructor(props: SeriesColorPickerProps) {
     super(props);
   }
 
diff --git a/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
similarity index 86%
rename from public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx
rename to packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 085d554300d..9036a1a2ffd 100644
--- a/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import { ColorPickerPopover } from './ColorPickerPopover';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface SeriesColorPickerPopoverProps {
   color: string;
   yaxis?: number;
   onColorChange: (color: string) => void;
-  onToggleAxis?: () => void;
+  onToggleAxis: () => void;
 }
 
 export class SeriesColorPickerPopover extends React.PureComponent<SeriesColorPickerPopoverProps, any> {
@@ -30,7 +29,7 @@ interface AxisSelectorState {
 }
 
 export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSelectorState> {
-  constructor(props) {
+  constructor(props: AxisSelectorProps) {
     super(props);
     this.state = {
       yaxis: this.props.yaxis,
@@ -62,9 +61,3 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
     );
   }
 }
-
-react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
-  'series',
-  'onColorChange',
-  'onToggleAxis',
-]);
diff --git a/public/app/core/components/colorpicker/SpectrumPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
similarity index 92%
rename from public/app/core/components/colorpicker/SpectrumPicker.tsx
rename to packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
index 15a76068e9b..6974eed142e 100644
--- a/public/app/core/components/colorpicker/SpectrumPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
@@ -13,17 +13,17 @@ export class SpectrumPicker extends React.Component<Props, any> {
   elem: any;
   isMoving: boolean;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.onSpectrumMove = this.onSpectrumMove.bind(this);
     this.setComponentElem = this.setComponentElem.bind(this);
   }
 
-  setComponentElem(elem) {
+  setComponentElem(elem: any) {
     this.elem = $(elem);
   }
 
-  onSpectrumMove(color) {
+  onSpectrumMove(color: any) {
     this.isMoving = true;
     this.props.onColorSelect(color);
   }
@@ -46,7 +46,7 @@ export class SpectrumPicker extends React.Component<Props, any> {
     this.elem.spectrum('set', this.props.color);
   }
 
-  componentWillUpdate(nextProps) {
+  componentWillUpdate(nextProps: any) {
     // If user move pointer over spectrum field this produce 'move' event and component
     // may update props.color. We don't want to update spectrum color in this case, so we can use
     // isMoving flag for tracking moving state. Flag should be cleared in componentDidUpdate() which
diff --git a/public/app/core/specs/__snapshots__/ColorPalette.test.tsx.snap b/packages/grafana-ui/src/components/ColorPicker/__snapshots__/ColorPalette.test.tsx.snap
similarity index 100%
rename from public/app/core/specs/__snapshots__/ColorPalette.test.tsx.snap
rename to packages/grafana-ui/src/components/ColorPicker/__snapshots__/ColorPalette.test.tsx.snap
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index abb1cf1b34c..b2b607415b8 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -2,3 +2,6 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+export { ColorPicker } from './ColorPicker/ColorPicker';
+export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
+export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts
index b22152497b9..4072052a07d 100644
--- a/packages/grafana-ui/src/index.ts
+++ b/packages/grafana-ui/src/index.ts
@@ -2,4 +2,5 @@ export * from './components';
 export * from './visualizations';
 export * from './types';
 export * from './utils';
+export { default } from './utils';
 export * from './forms';
diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts
new file mode 100644
index 00000000000..673b0109f11
--- /dev/null
+++ b/packages/grafana-ui/src/utils/colors.ts
@@ -0,0 +1,94 @@
+import _ from 'lodash';
+import tinycolor from 'tinycolor2';
+
+export const PALETTE_ROWS = 4;
+export const PALETTE_COLUMNS = 14;
+export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
+export const OK_COLOR = 'rgba(11, 237, 50, 1)';
+export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
+export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
+export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
+export const REGION_FILL_ALPHA = 0.09;
+
+const colors = [
+  '#7EB26D', // 0: pale green
+  '#EAB839', // 1: mustard
+  '#6ED0E0', // 2: light blue
+  '#EF843C', // 3: orange
+  '#E24D42', // 4: red
+  '#1F78C1', // 5: ocean
+  '#BA43A9', // 6: purple
+  '#705DA0', // 7: violet
+  '#508642', // 8: dark green
+  '#CCA300', // 9: dark sand
+  '#447EBC',
+  '#C15C17',
+  '#890F02',
+  '#0A437C',
+  '#6D1F62',
+  '#584477',
+  '#B7DBAB',
+  '#F4D598',
+  '#70DBED',
+  '#F9BA8F',
+  '#F29191',
+  '#82B5D8',
+  '#E5A8E2',
+  '#AEA2E0',
+  '#629E51',
+  '#E5AC0E',
+  '#64B0C8',
+  '#E0752D',
+  '#BF1B00',
+  '#0A50A1',
+  '#962D82',
+  '#614D93',
+  '#9AC48A',
+  '#F2C96D',
+  '#65C5DB',
+  '#F9934E',
+  '#EA6460',
+  '#5195CE',
+  '#D683CE',
+  '#806EB7',
+  '#3F6833',
+  '#967302',
+  '#2F575E',
+  '#99440A',
+  '#58140C',
+  '#052B51',
+  '#511749',
+  '#3F2B5B',
+  '#E0F9D7',
+  '#FCEACA',
+  '#CFFAFF',
+  '#F9E2D2',
+  '#FCE2DE',
+  '#BADFF4',
+  '#F9D9F9',
+  '#DEDAF7',
+];
+
+function sortColorsByHue(hexColors: string[]) {
+  const hslColors = _.map(hexColors, hexToHsl);
+
+  let sortedHSLColors = _.sortBy(hslColors, ['h']);
+  sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
+  sortedHSLColors = _.map(sortedHSLColors, chunk => {
+    return _.sortBy(chunk, 'l');
+  });
+  sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
+
+  return _.map(sortedHSLColors, hslToHex);
+}
+
+function hexToHsl(color: string) {
+  return tinycolor(color).toHsl();
+}
+
+function hslToHex(color: string) {
+  return tinycolor(color).toHexString();
+}
+
+export let sortedColors = sortColorsByHue(colors);
+export default colors;
diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index 4d9b9a4b948..1a677b1f033 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -1 +1,3 @@
 export * from './processTimeSeries';
+export * from './colors';
+export { default } from './colors';
diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 5609c058a27..d6fc68293c3 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -6,6 +6,7 @@ import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
 import AppNotificationList from './components/AppNotifications/AppNotificationList';
+import { ColorPicker, SeriesColorPickerPopover } from '@grafana/ui';
 
 export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
@@ -19,4 +20,13 @@ export function registerAngularDirectives() {
     ['onChange', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('colorPicker', ColorPicker, [
+    'color',
+    ['onChange', { watchDepth: 'reference', wrapApply: true }],
+  ]);
+  react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
+    'series',
+    'onColorChange',
+    'onToggleAxis',
+  ]);
 }
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 257a2077c97..19e9a473e35 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -13,8 +13,6 @@ import './partials';
 import './components/jsontree/jsontree';
 import './components/code_editor/code_editor';
 import './utils/outline';
-import './components/colorpicker/ColorPicker';
-import './components/colorpicker/SeriesColorPickerPopover';
 import './components/colorpicker/spectrum_picker';
 import './services/search_srv';
 import './services/ng_react';
@@ -36,7 +34,7 @@ import 'app/core/services/all';
 import './filters/filters';
 import coreModule from './core_module';
 import appEvents from './app_events';
-import colors from './utils/colors';
+import colors from '@grafana/ui/';
 import { assignModelProperties } from './utils/model_utils';
 import { contextSrv } from './services/context_srv';
 import { KeybindingSrv } from './services/keybindingSrv';
diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts
index 4e8c6207959..8eb8433cd53 100644
--- a/public/app/core/logs_model.ts
+++ b/public/app/core/logs_model.ts
@@ -1,6 +1,8 @@
 import _ from 'lodash';
+import colors from '@grafana/ui';
+
 import { TimeSeries } from 'app/core/core';
-import colors, { getThemeColor } from 'app/core/utils/colors';
+import { getThemeColor } from 'app/core/utils/colors';
 
 /**
  * Mapping of log level abbreviation to canonical log level.
diff --git a/public/app/core/utils/colors.ts b/public/app/core/utils/colors.ts
index 34508e94a9f..6d73ab9fbd8 100644
--- a/public/app/core/utils/colors.ts
+++ b/public/app/core/utils/colors.ts
@@ -1,99 +1,5 @@
-import _ from 'lodash';
-import tinycolor from 'tinycolor2';
 import config from 'app/core/config';
 
-export const PALETTE_ROWS = 4;
-export const PALETTE_COLUMNS = 14;
-export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
-export const OK_COLOR = 'rgba(11, 237, 50, 1)';
-export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
-export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
-export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
-export const REGION_FILL_ALPHA = 0.09;
-
-const colors = [
-  '#7EB26D', // 0: pale green
-  '#EAB839', // 1: mustard
-  '#6ED0E0', // 2: light blue
-  '#EF843C', // 3: orange
-  '#E24D42', // 4: red
-  '#1F78C1', // 5: ocean
-  '#BA43A9', // 6: purple
-  '#705DA0', // 7: violet
-  '#508642', // 8: dark green
-  '#CCA300', // 9: dark sand
-  '#447EBC',
-  '#C15C17',
-  '#890F02',
-  '#0A437C',
-  '#6D1F62',
-  '#584477',
-  '#B7DBAB',
-  '#F4D598',
-  '#70DBED',
-  '#F9BA8F',
-  '#F29191',
-  '#82B5D8',
-  '#E5A8E2',
-  '#AEA2E0',
-  '#629E51',
-  '#E5AC0E',
-  '#64B0C8',
-  '#E0752D',
-  '#BF1B00',
-  '#0A50A1',
-  '#962D82',
-  '#614D93',
-  '#9AC48A',
-  '#F2C96D',
-  '#65C5DB',
-  '#F9934E',
-  '#EA6460',
-  '#5195CE',
-  '#D683CE',
-  '#806EB7',
-  '#3F6833',
-  '#967302',
-  '#2F575E',
-  '#99440A',
-  '#58140C',
-  '#052B51',
-  '#511749',
-  '#3F2B5B',
-  '#E0F9D7',
-  '#FCEACA',
-  '#CFFAFF',
-  '#F9E2D2',
-  '#FCE2DE',
-  '#BADFF4',
-  '#F9D9F9',
-  '#DEDAF7',
-];
-
-export function sortColorsByHue(hexColors) {
-  const hslColors = _.map(hexColors, hexToHsl);
-
-  let sortedHSLColors = _.sortBy(hslColors, ['h']);
-  sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
-  sortedHSLColors = _.map(sortedHSLColors, chunk => {
-    return _.sortBy(chunk, 'l');
-  });
-  sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
-
-  return _.map(sortedHSLColors, hslToHex);
-}
-
-export function hexToHsl(color) {
-  return tinycolor(color).toHsl();
-}
-
-export function hslToHex(color) {
-  return tinycolor(color).toHexString();
-}
-
 export function getThemeColor(dark: string, light: string): string {
   return config.bootData.user.lightTheme ? light : dark;
 }
-
-export let sortedColors = sortColorsByHue(colors);
-export default colors;
diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index bea166075dc..2cca33620b7 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -1,9 +1,9 @@
 import _ from 'lodash';
+import colors from '@grafana/ui';
 
 import { renderUrl } from 'app/core/utils/url';
 import kbn from 'app/core/utils/kbn';
 import store from 'app/core/store';
-import colors from 'app/core/utils/colors';
 import { parse as parseDate } from 'app/core/utils/datemath';
 
 import TimeSeries from 'app/core/time_series2';
diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts
index db748e639a1..6966d3cdc82 100644
--- a/public/app/features/annotations/event_manager.ts
+++ b/public/app/features/annotations/event_manager.ts
@@ -1,8 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
 import tinycolor from 'tinycolor2';
-import { MetricsPanelCtrl } from 'app/plugins/sdk';
-import { AnnotationEvent } from './event';
 import {
   OK_COLOR,
   ALERTING_COLOR,
@@ -10,7 +8,10 @@ import {
   PENDING_COLOR,
   DEFAULT_ANNOTATION_COLOR,
   REGION_FILL_ALPHA,
-} from 'app/core/utils/colors';
+} from '@grafana/ui';
+
+import { MetricsPanelCtrl } from 'app/plugins/sdk';
+import { AnnotationEvent } from './event';
 
 export class EventManager {
   event: AnnotationEvent;
diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index 6f98bc5a17a..747ea9fecaa 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -1,8 +1,8 @@
 import moment from 'moment';
 import _ from 'lodash';
+import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
 
 import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
-import { DEFAULT_ANNOTATION_COLOR } from 'app/core/utils/colors';
 import { Emitter } from 'app/core/utils/emitter';
 import { contextSrv } from 'app/core/services/context_srv';
 import sortByKeys from 'app/core/utils/sort_by_keys';
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index b4d4930e11d..7699a499146 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
-import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
+import { ColorPicker } from '@grafana/ui';
 import { BasicGaugeColor, Threshold } from 'app/types';
 import { PanelOptionsProps } from '@grafana/ui';
 import { Options } from './types';
diff --git a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
index 2105687d8e1..d6df17d9699 100644
--- a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
+++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { TimeSeries } from 'app/core/core';
-import { SeriesColorPicker } from 'app/core/components/colorpicker/SeriesColorPicker';
+import { SeriesColorPicker } from '@grafana/ui';
 
 export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
 
diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts
index 4ea1efe1502..ef4ad872753 100644
--- a/public/app/plugins/panel/graph/data_processor.ts
+++ b/public/app/plugins/panel/graph/data_processor.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash';
+import colors from '@grafana/ui';
+
 import TimeSeries from 'app/core/time_series2';
-import colors from 'app/core/utils/colors';
 
 export class DataProcessor {
   constructor(private panel) {}
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index 020c33f7d38..11be172aaeb 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import colors from 'app/core/utils/colors';
+import colors from '@grafana/ui';
 
 // Components & Types
 import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui';
diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts
index 75a34ac01c0..434a112692e 100644
--- a/public/app/routes/GrafanaCtrl.ts
+++ b/public/app/routes/GrafanaCtrl.ts
@@ -1,12 +1,12 @@
 import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';
+import Drop from 'tether-drop';
+import colors from '@grafana/ui';
 
 import coreModule from 'app/core/core_module';
 import { profiler } from 'app/core/profiler';
 import appEvents from 'app/core/app_events';
-import Drop from 'tether-drop';
-import colors from 'app/core/utils/colors';
 import { BackendSrv, setBackendSrv } from 'app/core/services/backend_srv';
 import { TimeSrv, setTimeSrv } from 'app/features/dashboard/time_srv';
 import { DatasourceSrv, setDatasourceSrv } from 'app/features/plugins/datasource_srv';
diff --git a/public/app/viz/state/timeSeries.ts b/public/app/viz/state/timeSeries.ts
index 782383957bc..2329d6f41af 100644
--- a/public/app/viz/state/timeSeries.ts
+++ b/public/app/viz/state/timeSeries.ts
@@ -2,7 +2,7 @@
 import _ from 'lodash';
 
 // Utils
-import colors from 'app/core/utils/colors';
+import colors from '@grafana/ui';
 
 // Types
 import { TimeSeries, TimeSeriesVMs, NullValueMode } from '@grafana/ui';

From 37dae043d703c9586a9573ae3de1d463d150e4e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 13:38:55 +0100
Subject: [PATCH 271/352] Small change in SeriesColorPickerPopoverProps

---
 .../src/components/ColorPicker/SeriesColorPicker.tsx     | 2 +-
 .../components/ColorPicker/SeriesColorPickerPopover.tsx  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
index b8ba03b7feb..09a53a8fe60 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
@@ -8,7 +8,7 @@ export interface SeriesColorPickerProps {
   yaxis?: number;
   optionalClass?: string;
   onColorChange: (newColor: string) => void;
-  onToggleAxis: () => void;
+  onToggleAxis?: () => void;
 }
 
 export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 9036a1a2ffd..541a77ddabc 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -5,7 +5,7 @@ export interface SeriesColorPickerPopoverProps {
   color: string;
   yaxis?: number;
   onColorChange: (color: string) => void;
-  onToggleAxis: () => void;
+  onToggleAxis?: () => void;
 }
 
 export class SeriesColorPickerPopover extends React.PureComponent<SeriesColorPickerPopoverProps, any> {
@@ -21,7 +21,7 @@ export class SeriesColorPickerPopover extends React.PureComponent<SeriesColorPic
 
 interface AxisSelectorProps {
   yaxis: number;
-  onToggleAxis: () => void;
+  onToggleAxis?: () => void;
 }
 
 interface AxisSelectorState {
@@ -41,7 +41,10 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
     this.setState({
       yaxis: this.state.yaxis === 2 ? 1 : 2,
     });
-    this.props.onToggleAxis();
+
+    if (this.props.onToggleAxis) {
+      this.props.onToggleAxis();
+    }
   }
 
   render() {

From 6f2bbb737848f2ac24351d9545843038c36625c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 16:52:08 +0100
Subject: [PATCH 272/352] Fixed typings

---
 packages/grafana-ui/package.json              |  3 +++
 .../components/ColorPicker/ColorPicker.tsx    |  3 ++-
 .../ColorPicker/SeriesColorPicker.tsx         |  1 +
 packages/grafana-ui/src/utils/colors.ts       | 12 ++++++------
 yarn.lock                                     | 19 ++++++++++++++++++-
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 5221e1ba02f..91695dc5647 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -24,6 +24,7 @@
     "react-popper": "^1.3.0",
     "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.21.0",
+    "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tinycolor2": "^1.4.1"
   },
@@ -35,6 +36,8 @@
     "@types/react": "^16.7.6",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-test-renderer": "^16.0.3",
+    "@types/tether-drop": "^1.4.8",
+    "@types/tinycolor2": "^1.4.1",
     "react-test-renderer": "^16.7.0",
     "typescript": "^3.2.2"
   }
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index fbe14d4eb8c..485aa5f03d3 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -19,7 +19,7 @@ export class ColorPicker extends React.Component<Props, any> {
     ReactDOM.render(dropContent, dropContentElem);
 
     const drop = new Drop({
-      target: this.pickerElem,
+      target: this.pickerElem as Element,
       content: dropContentElem,
       position: 'top center',
       classes: 'drop-popover',
@@ -27,6 +27,7 @@ export class ColorPicker extends React.Component<Props, any> {
       hoverCloseDelay: 200,
       tetherOptions: {
         constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+        attachment: 'bottom center',
       },
     });
 
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
index 09a53a8fe60..7c3848f6868 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
@@ -51,6 +51,7 @@ export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
       remove: true,
       tetherOptions: {
         constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+        attachment: 'bottom center',
       },
     });
 
diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts
index 673b0109f11..0b22cd7f81d 100644
--- a/packages/grafana-ui/src/utils/colors.ts
+++ b/packages/grafana-ui/src/utils/colors.ts
@@ -72,21 +72,21 @@ const colors = [
 function sortColorsByHue(hexColors: string[]) {
   const hslColors = _.map(hexColors, hexToHsl);
 
-  let sortedHSLColors = _.sortBy(hslColors, ['h']);
-  sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
-  sortedHSLColors = _.map(sortedHSLColors, chunk => {
+  const sortedHSLColors = _.sortBy(hslColors, ['h']);
+  const chunkedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
+  const sortedChunkedHSLColors = _.map(chunkedHSLColors, chunk => {
     return _.sortBy(chunk, 'l');
   });
-  sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
+  const flattenedZippedSortedChunkedHSLColors = _.flattenDeep(_.zip(...sortedChunkedHSLColors));
 
-  return _.map(sortedHSLColors, hslToHex);
+  return _.map(flattenedZippedSortedChunkedHSLColors, hslToHex);
 }
 
 function hexToHsl(color: string) {
   return tinycolor(color).toHsl();
 }
 
-function hslToHex(color: string) {
+function hslToHex(color: any) {
   return tinycolor(color).toHexString();
 }
 
diff --git a/yarn.lock b/yarn.lock
index 8eff64ca822..d6342e8dc26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1098,7 +1098,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^2.0.15":
+"@types/react-transition-group@*", "@types/react-transition-group@^2.0.15":
   version "2.0.15"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
   integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
@@ -1118,6 +1118,23 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-0.2.5.tgz#2443fc12da514c81346b1a665675559cee21fa75"
   integrity sha512-dEoVvo/I9QFomyhY+4Q6Qk+I+dhG59TYceZgC6Q0mCifVPErx6Y83PNTKGDS5e9h9Eti6q0S2mm16BU6iQK+3w==
 
+"@types/tether-drop@^1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@types/tether-drop/-/tether-drop-1.4.8.tgz#8d64288e673259d1bc28518250b80b5ef43af0bc"
+  integrity sha512-QzrJDUxnLoqACUm7opxGOwa9mgMBlkyb7hHYWApMLM3ywWif4pWraTiotooiG3ePZmnTe8wQj2nx7GWMX4pb+w==
+  dependencies:
+    "@types/tether" "*"
+
+"@types/tether@*":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@types/tether/-/tether-1.4.4.tgz#0fde1ccbd2f1fad74f8f465fe6227ff3b7bff634"
+  integrity sha512-6qhsFJVMuMqaQRVyQVi3zUBLfKYyryktL0ZP0Z3zegzeQ7WKm0PZNCdl3JsaitJbzqaoQ9qsFKMfaj5MiMfcSQ==
+
+"@types/tinycolor2@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.1.tgz#2f5670c9d1d6e558897a810ed284b44918fc1253"
+  integrity sha512-25L/RL5tqZkquKXVHM1fM2bd23qjfbcPpAZ2N/H05Y45g3UEi+Hw8CbDV28shKY8gH1SHiLpZSxPI1lacqdpGg==
+
 "@types/uglify-js@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.3.tgz#801a5ca1dc642861f47c46d14b700ed2d610840b"

From dc9b83030f5ae162b005404abdb9da3d13d7b27f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Fri, 11 Jan 2019 06:48:17 +0100
Subject: [PATCH 273/352] Removed default export for colors

---
 packages/grafana-ui/src/index.ts                 | 1 -
 packages/grafana-ui/src/utils/colors.ts          | 3 +--
 packages/grafana-ui/src/utils/index.ts           | 1 -
 public/app/core/core.ts                          | 2 +-
 public/app/core/logs_model.ts                    | 2 +-
 public/app/core/utils/explore.ts                 | 2 +-
 public/app/plugins/panel/graph/data_processor.ts | 2 +-
 public/app/plugins/panel/graph2/GraphPanel.tsx   | 2 +-
 public/app/routes/GrafanaCtrl.ts                 | 2 +-
 public/app/viz/state/timeSeries.ts               | 2 +-
 10 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts
index 4072052a07d..b22152497b9 100644
--- a/packages/grafana-ui/src/index.ts
+++ b/packages/grafana-ui/src/index.ts
@@ -2,5 +2,4 @@ export * from './components';
 export * from './visualizations';
 export * from './types';
 export * from './utils';
-export { default } from './utils';
 export * from './forms';
diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts
index 0b22cd7f81d..263d128aec4 100644
--- a/packages/grafana-ui/src/utils/colors.ts
+++ b/packages/grafana-ui/src/utils/colors.ts
@@ -10,7 +10,7 @@ export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
 export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
 export const REGION_FILL_ALPHA = 0.09;
 
-const colors = [
+export const colors = [
   '#7EB26D', // 0: pale green
   '#EAB839', // 1: mustard
   '#6ED0E0', // 2: light blue
@@ -91,4 +91,3 @@ function hslToHex(color: any) {
 }
 
 export let sortedColors = sortColorsByHue(colors);
-export default colors;
diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index 1a677b1f033..eb67a6f7256 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -1,3 +1,2 @@
 export * from './processTimeSeries';
 export * from './colors';
-export { default } from './colors';
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 19e9a473e35..6713d8bcd14 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -16,6 +16,7 @@ import './utils/outline';
 import './components/colorpicker/spectrum_picker';
 import './services/search_srv';
 import './services/ng_react';
+import { colors } from '@grafana/ui/';
 
 import { searchDirective } from './components/search/search';
 import { infoPopover } from './components/info_popover';
@@ -34,7 +35,6 @@ import 'app/core/services/all';
 import './filters/filters';
 import coreModule from './core_module';
 import appEvents from './app_events';
-import colors from '@grafana/ui/';
 import { assignModelProperties } from './utils/model_utils';
 import { contextSrv } from './services/context_srv';
 import { KeybindingSrv } from './services/keybindingSrv';
diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts
index 8eb8433cd53..4cf9a029a2a 100644
--- a/public/app/core/logs_model.ts
+++ b/public/app/core/logs_model.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import colors from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 import { TimeSeries } from 'app/core/core';
 import { getThemeColor } from 'app/core/utils/colors';
diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index 2cca33620b7..f3273ffa16d 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import colors from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 import { renderUrl } from 'app/core/utils/url';
 import kbn from 'app/core/utils/kbn';
diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts
index ef4ad872753..4fe47b70129 100644
--- a/public/app/plugins/panel/graph/data_processor.ts
+++ b/public/app/plugins/panel/graph/data_processor.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import colors from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 import TimeSeries from 'app/core/time_series2';
 
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index 11be172aaeb..4a3daf77333 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import colors from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 // Components & Types
 import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui';
diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts
index 434a112692e..4e4dd8121cf 100644
--- a/public/app/routes/GrafanaCtrl.ts
+++ b/public/app/routes/GrafanaCtrl.ts
@@ -2,7 +2,7 @@ import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';
 import Drop from 'tether-drop';
-import colors from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 import coreModule from 'app/core/core_module';
 import { profiler } from 'app/core/profiler';
diff --git a/public/app/viz/state/timeSeries.ts b/public/app/viz/state/timeSeries.ts
index 2329d6f41af..5f27974a33b 100644
--- a/public/app/viz/state/timeSeries.ts
+++ b/public/app/viz/state/timeSeries.ts
@@ -2,7 +2,7 @@
 import _ from 'lodash';
 
 // Utils
-import colors from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 // Types
 import { TimeSeries, TimeSeriesVMs, NullValueMode } from '@grafana/ui';

From 1581662a6cd55bc9002c6ae0618ecb57e0056b04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 09:37:32 +0100
Subject: [PATCH 274/352] Moved Thresholds and styles to grafana/ui/components

---
 .../src/components/Thresholds}/Threshold.test.tsx         | 8 ++++----
 .../grafana-ui/src/components/Thresholds}/Thresholds.tsx  | 8 ++++----
 .../grafana-ui/src/components/Thresholds/_Thresholds.scss | 0
 packages/grafana-ui/src/components/index.scss             | 1 +
 packages/grafana-ui/src/components/index.ts               | 1 +
 packages/grafana-ui/src/types/panel.ts                    | 6 ++++++
 public/app/plugins/panel/gauge/GaugePanelOptions.tsx      | 3 +--
 public/app/types/index.ts                                 | 3 ++-
 public/app/types/panel.ts                                 | 6 ------
 public/sass/_grafana.scss                                 | 1 -
 10 files changed, 19 insertions(+), 18 deletions(-)
 rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Threshold.test.tsx (91%)
 rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Thresholds.tsx (96%)
 rename public/sass/components/_thresholds.scss => packages/grafana-ui/src/components/Thresholds/_Thresholds.scss (100%)

diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
similarity index 91%
rename from public/app/plugins/panel/gauge/Threshold.test.tsx
rename to packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
index 852b9f4c104..eac82e1b0f4 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Thresholds from './Thresholds';
-import { defaultProps } from './GaugePanelOptions';
-import { BasicGaugeColor } from 'app/types';
 import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
+import { Options } from 'app/plugins/panel/gauge/types';
+import { BasicGaugeColor } from 'app/types';
+import { Thresholds } from './Thresholds';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<Options> = {
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
similarity index 96%
rename from public/app/plugins/panel/gauge/Thresholds.tsx
rename to packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
index 7699a499146..b5885e4efe8 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
@@ -1,16 +1,16 @@
 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
 import { ColorPicker } from '@grafana/ui';
-import { BasicGaugeColor, Threshold } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
+import { BasicGaugeColor } from 'app/types';
+import { PanelOptionsProps, Threshold } from '@grafana/ui';
+import { Options } from 'app/plugins/panel/gauge/types';
 
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export default class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
+export class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 
diff --git a/public/sass/components/_thresholds.scss b/packages/grafana-ui/src/components/Thresholds/_Thresholds.scss
similarity index 100%
rename from public/sass/components/_thresholds.scss
rename to packages/grafana-ui/src/components/Thresholds/_Thresholds.scss
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index e1d1474bb16..d0a81675490 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1,3 +1,4 @@
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
+@import 'Thresholds/Thresholds';
 @import 'Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index b2b607415b8..fef3f6604c9 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -5,3 +5,4 @@ export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
 export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
+export { Thresholds } from './Thresholds/Thresholds';
diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 44336555a81..46fe84a211c 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -29,3 +29,9 @@ export interface PanelMenuItem {
   shortcut?: string;
   subMenu?: PanelMenuItem[];
 }
+
+export interface Threshold {
+  index: number;
+  value: number;
+  color?: string;
+}
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 2b16ef5a1fe..7b627a09592 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import Thresholds from 'app/plugins/panel/gauge/Thresholds';
 import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
+import { PanelOptionsProps, Thresholds } from '@grafana/ui';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import { Options } from './types';
 import GaugeOptions from './GaugeOptions';
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index ab52b03ab17..52b2b996542 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -9,7 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
 import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources';
 import { DataQuery, DataQueryResponse, DataQueryOptions } from './series';
-import { BasicGaugeColor, MappingType, RangeMap, Threshold, ValueMap } from './panel';
+import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -20,6 +20,7 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
+import { Threshold } from '@grafana/ui';
 export {
   Team,
   TeamsState,
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index 31674d20304..1f5a2307733 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -1,9 +1,3 @@
-export interface Threshold {
-  index: number;
-  value: number;
-  color?: string;
-}
-
 export enum MappingType {
   ValueToText = 1,
   RangeToText = 2,
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 10cc7335bdf..a3dd204eb63 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -102,7 +102,6 @@
 @import 'components/toolbar';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
-@import 'components/thresholds';
 @import 'components/toggle_button_group';
 @import 'components/value-mappings';
 @import 'components/popover-box';

From 0b6e21e9acb529bd12ae0141977782d18e785d22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 10:43:18 +0100
Subject: [PATCH 275/352] Renamed Thresholds to ThresholdsEditor

---
 .../grafana-ui/src/components/Thresholds/Threshold.test.tsx   | 4 ++--
 packages/grafana-ui/src/components/Thresholds/Thresholds.tsx  | 2 +-
 packages/grafana-ui/src/components/index.ts                   | 2 +-
 public/app/plugins/panel/gauge/GaugePanelOptions.tsx          | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
index eac82e1b0f4..90ce6687985 100644
--- a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
+++ b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
@@ -4,7 +4,7 @@ import { PanelOptionsProps } from '@grafana/ui';
 import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 import { Options } from 'app/plugins/panel/gauge/types';
 import { BasicGaugeColor } from 'app/types';
-import { Thresholds } from './Thresholds';
+import { ThresholdsEditor } from './Thresholds';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<Options> = {
@@ -17,7 +17,7 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  return shallow(<Thresholds {...props} />).instance() as Thresholds;
+  return shallow(<ThresholdsEditor {...props} />).instance() as ThresholdsEditor;
 };
 
 describe('Add threshold', () => {
diff --git a/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
index b5885e4efe8..d5af07e4a49 100644
--- a/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
+++ b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
@@ -10,7 +10,7 @@ interface State {
   baseColor: string;
 }
 
-export class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
+export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index fef3f6604c9..79764ac8fa4 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -5,4 +5,4 @@ export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
 export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
-export { Thresholds } from './Thresholds/Thresholds';
+export { ThresholdsEditor } from './Thresholds/Thresholds';
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 7b627a09592..2030b3c4cde 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps, Thresholds } from '@grafana/ui';
+import { PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import { Options } from './types';
 import GaugeOptions from './GaugeOptions';
@@ -33,7 +33,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<O
         <div className="form-section">
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptions onChange={onChange} options={options} />
-          <Thresholds onChange={onChange} options={options} />
+          <ThresholdsEditor onChange={onChange} options={options} />
         </div>
 
         <div className="form-section">

From c05b92c2e0c9043a2e3933dd70cf700adf0e8970 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 10 Jan 2019 10:47:49 +0100
Subject: [PATCH 276/352] Renamed Threshold files

---
 .../ThresholdsEditor.test.tsx}                                  | 2 +-
 .../Thresholds.tsx => ThresholdsEditor/ThresholdsEditor.tsx}    | 0
 .../_ThresholdsEditor.scss}                                     | 0
 packages/grafana-ui/src/components/index.scss                   | 2 +-
 packages/grafana-ui/src/components/index.ts                     | 2 +-
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/grafana-ui/src/components/{Thresholds/Threshold.test.tsx => ThresholdsEditor/ThresholdsEditor.test.tsx} (97%)
 rename packages/grafana-ui/src/components/{Thresholds/Thresholds.tsx => ThresholdsEditor/ThresholdsEditor.tsx} (100%)
 rename packages/grafana-ui/src/components/{Thresholds/_Thresholds.scss => ThresholdsEditor/_ThresholdsEditor.scss} (100%)

diff --git a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
similarity index 97%
rename from packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
rename to packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 90ce6687985..6d6449aaa60 100644
--- a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -4,7 +4,7 @@ import { PanelOptionsProps } from '@grafana/ui';
 import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 import { Options } from 'app/plugins/panel/gauge/types';
 import { BasicGaugeColor } from 'app/types';
-import { ThresholdsEditor } from './Thresholds';
+import { ThresholdsEditor } from './ThresholdsEditor';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<Options> = {
diff --git a/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Thresholds/Thresholds.tsx
rename to packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
diff --git a/packages/grafana-ui/src/components/Thresholds/_Thresholds.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
similarity index 100%
rename from packages/grafana-ui/src/components/Thresholds/_Thresholds.scss
rename to packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index d0a81675490..cc5979c8444 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1,4 +1,4 @@
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
-@import 'Thresholds/Thresholds';
+@import 'ThresholdsEditor/ThresholdsEditor';
 @import 'Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 79764ac8fa4..4b60557be7e 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -5,4 +5,4 @@ export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
 export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
-export { ThresholdsEditor } from './Thresholds/Thresholds';
+export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';

From c54ec5f52f3bdac684a396ad9699306af29bcd94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Fri, 11 Jan 2019 08:30:30 +0100
Subject: [PATCH 277/352] Moved the rest of Threshold dependencies to
 ui/components

---
 .../ThresholdsEditor.test.tsx                 |  7 +--
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 60 ++++++-------------
 .../grafana-ui/src/types/gauge.ts             |  4 +-
 packages/grafana-ui/src/types/index.ts        |  1 +
 packages/grafana-ui/src/types/panel.ts        | 26 ++++++++
 ...augeOptions.tsx => GaugeOptionsEditor.tsx} |  6 +-
 public/app/plugins/panel/gauge/GaugePanel.tsx |  6 +-
 .../plugins/panel/gauge/GaugePanelOptions.tsx | 11 ++--
 public/app/plugins/panel/gauge/MappingRow.tsx |  3 +-
 .../panel/gauge/ValueMappings.test.tsx        |  7 +--
 .../app/plugins/panel/gauge/ValueMappings.tsx |  7 +--
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  6 +-
 public/app/types/index.ts                     |  7 ---
 public/app/types/panel.ts                     | 25 --------
 public/app/viz/Gauge.test.tsx                 |  4 +-
 public/app/viz/Gauge.tsx                      |  4 +-
 16 files changed, 76 insertions(+), 108 deletions(-)
 rename public/app/plugins/panel/gauge/types.ts => packages/grafana-ui/src/types/gauge.ts (75%)
 rename public/app/plugins/panel/gauge/{GaugeOptions.tsx => GaugeOptionsEditor.tsx} (91%)
 delete mode 100644 public/app/types/panel.ts

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 6d6449aaa60..8c0c131e1f8 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { PanelOptionsProps } from '@grafana/ui';
+import { BasicGaugeColor, GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+
 import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
-import { Options } from 'app/plugins/panel/gauge/types';
-import { BasicGaugeColor } from 'app/types';
 import { ThresholdsEditor } from './ThresholdsEditor';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<Options> = {
+  const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index d5af07e4a49..df999de6c25 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,26 +1,20 @@
 import React, { PureComponent } from 'react';
-import tinycolor from 'tinycolor2';
-import { ColorPicker } from '@grafana/ui';
-import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps, Threshold } from '@grafana/ui';
-import { Options } from 'app/plugins/panel/gauge/types';
+import tinycolor, { ColorInput } from 'tinycolor2';
+import { BasicGaugeColor, ColorPicker, GaugeOptions, PanelOptionsProps, Threshold } from '@grafana/ui';
 
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>, State> {
-  constructor(props) {
+export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
+  constructor(props: PanelOptionsProps<GaugeOptions>) {
     super(props);
 
-    this.state = {
-      thresholds: props.options.thresholds,
-      baseColor: props.options.baseColor,
-    };
+    this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor };
   }
 
-  onAddThreshold = index => {
+  onAddThreshold = (index: number) => {
     const { maxValue, minValue } = this.props.options;
     const { thresholds } = this.state;
 
@@ -48,27 +42,25 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     if (index === 0 && thresholds.length === 0) {
       color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
     } else {
-      color = tinycolor.mix(thresholds[index - 1].color, BasicGaugeColor.Red, 50).toRgbString();
+      color = tinycolor.mix(thresholds[index - 1].color as ColorInput, BasicGaugeColor.Red, 50).toRgbString();
     }
 
     this.setState(
       {
-        thresholds: this.sortThresholds([...newThresholds, { index: index, value: value, color: color }]),
+        thresholds: this.sortThresholds([...newThresholds, { index, value: value as number, color }]),
       },
       () => this.updateGauge()
     );
   };
 
-  onRemoveThreshold = threshold => {
+  onRemoveThreshold = (threshold: Threshold) => {
     this.setState(
-      prevState => ({
-        thresholds: prevState.thresholds.filter(t => t !== threshold),
-      }),
+      prevState => ({ thresholds: prevState.thresholds.filter(t => t !== threshold) }),
       () => this.updateGauge()
     );
   };
 
-  onChangeThresholdValue = (event, threshold) => {
+  onChangeThresholdValue = (event: any, threshold: Threshold) => {
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(t => {
@@ -79,12 +71,10 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
       return t;
     });
 
-    this.setState({
-      thresholds: newThresholds,
-    });
+    this.setState({ thresholds: newThresholds });
   };
 
-  onChangeThresholdColor = (threshold, color) => {
+  onChangeThresholdColor = (threshold: Threshold, color: string) => {
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(t => {
@@ -103,11 +93,9 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     );
   };
 
-  onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
+  onChangeBaseColor = (color: string) => this.props.onChange({ ...this.props.options, baseColor: color });
   onBlur = () => {
-    this.setState(prevState => ({
-      thresholds: this.sortThresholds(prevState.thresholds),
-    }));
+    this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
 
     this.updateGauge();
   };
@@ -116,7 +104,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
   };
 
-  sortThresholds = thresholds => {
+  sortThresholds = (thresholds: Threshold[]) => {
     return thresholds.sort((t1, t2) => {
       return t2.value - t1.value;
     });
@@ -161,20 +149,8 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     return thresholds.map((t, i) => {
       return (
         <div key={`${t.value}-${i}`} className="indicator-section">
-          <div
-            onClick={() => this.onAddThreshold(t.index + 1)}
-            style={{
-              height: '50%',
-              backgroundColor: t.color,
-            }}
-          />
-          <div
-            onClick={() => this.onAddThreshold(t.index)}
-            style={{
-              height: '50%',
-              backgroundColor: t.color,
-            }}
-          />
+          <div onClick={() => this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} />
+          <div onClick={() => this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
         </div>
       );
     });
diff --git a/public/app/plugins/panel/gauge/types.ts b/packages/grafana-ui/src/types/gauge.ts
similarity index 75%
rename from public/app/plugins/panel/gauge/types.ts
rename to packages/grafana-ui/src/types/gauge.ts
index 60c4fd1581d..de9c7f07328 100644
--- a/public/app/plugins/panel/gauge/types.ts
+++ b/packages/grafana-ui/src/types/gauge.ts
@@ -1,6 +1,6 @@
-import { RangeMap, ValueMap, Threshold } from 'app/types';
+import { RangeMap, Threshold, ValueMap } from '@grafana/ui';
 
-export interface Options {
+export interface GaugeOptions {
   baseColor: string;
   decimals: number;
   mappings: Array<RangeMap | ValueMap>;
diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts
index f618ce6db34..814ab0478db 100644
--- a/packages/grafana-ui/src/types/index.ts
+++ b/packages/grafana-ui/src/types/index.ts
@@ -1,3 +1,4 @@
 export * from './series';
 export * from './time';
 export * from './panel';
+export * from './gauge';
diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 46fe84a211c..0b995f932f0 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -35,3 +35,29 @@ export interface Threshold {
   value: number;
   color?: string;
 }
+
+export enum BasicGaugeColor {
+  Green = '#299c46',
+  Red = '#d44a3a',
+}
+
+export enum MappingType {
+  ValueToText = 1,
+  RangeToText = 2,
+}
+
+interface BaseMap {
+  id: number;
+  operator: string;
+  text: string;
+  type: MappingType;
+}
+
+export interface ValueMap extends BaseMap {
+  value: string;
+}
+
+export interface RangeMap extends BaseMap {
+  from: string;
+  to: string;
+}
diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
similarity index 91%
rename from public/app/plugins/panel/gauge/GaugeOptions.tsx
rename to public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index 7607374b1b7..cb436180b49 100644
--- a/public/app/plugins/panel/gauge/GaugeOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
+import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 
-export default class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
+export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 5f1a438863f..79220daf37a 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
-import { PanelProps, NullValueMode } from '@grafana/ui';
+import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
+
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import Gauge from 'app/viz/Gauge';
-import { Options } from './types';
 
-interface Props extends PanelProps<Options> {}
+interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
   render() {
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 2030b3c4cde..951a310d29a 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react';
+import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
+
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
-import { Options } from './types';
-import GaugeOptions from './GaugeOptions';
+import GaugeOptionsEditor from './GaugeOptionsEditor';
 
 export const defaultProps = {
   options: {
@@ -23,7 +22,7 @@ export const defaultProps = {
   },
 };
 
-export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<Options>> {
+export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   static defaultProps = defaultProps;
 
   render() {
@@ -32,7 +31,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<O
       <>
         <div className="form-section">
           <ValueOptions onChange={onChange} options={options} />
-          <GaugeOptions onChange={onChange} options={options} />
+          <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={onChange} options={options} />
         </div>
 
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
index 35d0b2e638c..5bf3b4ab907 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/public/app/plugins/panel/gauge/MappingRow.tsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
+import { MappingType, RangeMap, ValueMap } from '@grafana/ui';
+
 import { Label } from 'app/core/components/Label/Label';
 import { Select } from 'app/core/components/Select/Select';
-import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface Props {
   mapping: ValueMap | RangeMap;
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
index 3e59cc76742..503e3e53617 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
+
 import ValueMappings from './ValueMappings';
-import { MappingType } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<Options> = {
+  const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx
index be800cf2412..4ce0d37b53c 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.tsx
@@ -1,15 +1,14 @@
 import React, { PureComponent } from 'react';
+import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
+
 import MappingRow from './MappingRow';
-import { MappingType, RangeMap, ValueMap } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 
 interface State {
   mappings: Array<ValueMap | RangeMap>;
   nextIdToAdd: number;
 }
 
-export default class ValueMappings extends PureComponent<PanelOptionsProps<Options>, State> {
+export default class ValueMappings extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
   constructor(props) {
     super(props);
 
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 4aafc0b0457..0d8771ec326 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
+import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+
 import { Label } from 'app/core/components/Label/Label';
 import Select from 'app/core/components/Select/Select';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
@@ -21,7 +21,7 @@ const statOptions = [
 
 const labelWidth = 6;
 
-export default class ValueOptions extends PureComponent<PanelOptionsProps<Options>> {
+export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
 
   onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 52b2b996542..72da1c76ea8 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -9,7 +9,6 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
 import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources';
 import { DataQuery, DataQueryResponse, DataQueryOptions } from './series';
-import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -20,7 +19,6 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
-import { Threshold } from '@grafana/ui';
 export {
   Team,
   TeamsState,
@@ -70,13 +68,8 @@ export {
   AppNotificationTimeout,
   DashboardSearchHit,
   UserState,
-  Threshold,
   ValidationEvents,
   ValidationRule,
-  ValueMap,
-  RangeMap,
-  MappingType,
-  BasicGaugeColor,
 };
 
 export interface StoreState {
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
deleted file mode 100644
index 1f5a2307733..00000000000
--- a/public/app/types/panel.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export enum MappingType {
-  ValueToText = 1,
-  RangeToText = 2,
-}
-
-export enum BasicGaugeColor {
-  Green = '#299c46',
-  Red = '#d44a3a',
-}
-
-interface BaseMap {
-  id: number;
-  operator: string;
-  text: string;
-  type: MappingType;
-}
-
-export interface ValueMap extends BaseMap {
-  value: string;
-}
-
-export interface RangeMap extends BaseMap {
-  from: string;
-  to: string;
-}
diff --git a/public/app/viz/Gauge.test.tsx b/public/app/viz/Gauge.test.tsx
index 91107a563e5..f0c4a874649 100644
--- a/public/app/viz/Gauge.test.tsx
+++ b/public/app/viz/Gauge.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { BasicGaugeColor, TimeSeriesVMs } from '@grafana/ui';
+
 import { Gauge, Props } from './Gauge';
-import { BasicGaugeColor } from '../types';
-import { TimeSeriesVMs } from '@grafana/ui';
 
 jest.mock('jquery', () => ({
   plot: jest.fn(),
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index defeaf8cc8f..5112ff9aa1b 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { BasicGaugeColor, MappingType, RangeMap, Threshold, ValueMap } from 'app/types';
-import { TimeSeriesVMs } from '@grafana/ui';
+import { BasicGaugeColor, Threshold, TimeSeriesVMs, RangeMap, ValueMap, MappingType } from '@grafana/ui';
+
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 

From 5ceedc4ac4aca6f33d86d93fd3ac84b6381350ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Fri, 11 Jan 2019 09:16:53 +0100
Subject: [PATCH 278/352] Moved defaultProps to ui/components

---
 .../ThresholdsEditor.test.tsx                 |  2 +-
 .../ThresholdsEditor/ThresholdsEditor.tsx     |  4 +++-
 packages/grafana-ui/src/types/gauge.ts        | 19 ++++++++++++++++-
 .../plugins/panel/gauge/GaugePanelOptions.tsx | 21 ++-----------------
 .../panel/gauge/ValueMappings.test.tsx        |  6 +++---
 public/app/plugins/panel/gauge/module.tsx     |  6 ++++--
 6 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 074d3bc267b..40e6bb47f1f 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { BasicGaugeColor, GaugeOptions, PanelOptionsProps } from '@grafana/ui';
 
 import { ThresholdsEditor } from './ThresholdsEditor';
+import { BasicGaugeColor, PanelOptionsProps, GaugeOptions } from '../../types';
 
 const defaultProps = {
   options: {
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index df999de6c25..ed6778f7c43 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import tinycolor, { ColorInput } from 'tinycolor2';
-import { BasicGaugeColor, ColorPicker, GaugeOptions, PanelOptionsProps, Threshold } from '@grafana/ui';
+
+import { Threshold, PanelOptionsProps, GaugeOptions, BasicGaugeColor } from '../../types';
+import { ColorPicker } from '../ColorPicker/ColorPicker';
 
 interface State {
   thresholds: Threshold[];
diff --git a/packages/grafana-ui/src/types/gauge.ts b/packages/grafana-ui/src/types/gauge.ts
index de9c7f07328..fe422386d92 100644
--- a/packages/grafana-ui/src/types/gauge.ts
+++ b/packages/grafana-ui/src/types/gauge.ts
@@ -1,4 +1,4 @@
-import { RangeMap, Threshold, ValueMap } from '@grafana/ui';
+import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from './panel';
 
 export interface GaugeOptions {
   baseColor: string;
@@ -14,3 +14,20 @@ export interface GaugeOptions {
   thresholds: Threshold[];
   unit: string;
 }
+
+export const GaugePanelOptionsDefaultProps = {
+  options: {
+    baseColor: BasicGaugeColor.Green,
+    minValue: 0,
+    maxValue: 100,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    decimals: 0,
+    stat: 'avg',
+    unit: 'none',
+    mappings: [],
+    thresholds: [],
+  },
+};
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 951a310d29a..99bff41a0d3 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,29 +1,12 @@
 import React, { PureComponent } from 'react';
-import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
+import { GaugeOptions, GaugePanelOptionsDefaultProps, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
 
-export const defaultProps = {
-  options: {
-    baseColor: BasicGaugeColor.Green,
-    minValue: 0,
-    maxValue: 100,
-    prefix: '',
-    showThresholdMarkers: true,
-    showThresholdLabels: false,
-    suffix: '',
-    decimals: 0,
-    stat: 'avg',
-    unit: 'none',
-    mappings: [],
-    thresholds: [],
-  },
-};
-
 export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
-  static defaultProps = defaultProps;
+  static defaultProps = GaugePanelOptionsDefaultProps;
 
   render() {
     const { onChange, options } = this.props;
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
index 503e3e53617..0cf08d6d3b7 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
+import { GaugePanelOptionsDefaultProps } from '@grafana/ui/src/types/gauge';
 
 import ValueMappings from './ValueMappings';
-import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
-      ...defaultProps.options,
+      ...GaugePanelOptionsDefaultProps.options,
       mappings: [
         { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
         { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
@@ -67,7 +67,7 @@ describe('Next id to add', () => {
   });
 
   it('should default to 1', () => {
-    const { instance } = setup({ options: { ...defaultProps.options } });
+    const { instance } = setup({ options: { ...GaugePanelOptionsDefaultProps.options } });
 
     expect(instance.state.nextIdToAdd).toEqual(1);
   });
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 783e4825657..72230eb4ba3 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,4 +1,6 @@
-import GaugePanelOptions, { defaultProps } from './GaugePanelOptions';
+import { GaugePanelOptionsDefaultProps } from '@grafana/ui';
+
+import GaugePanelOptions from './GaugePanelOptions';
 import { GaugePanel } from './GaugePanel';
 
-export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };
+export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, GaugePanelOptionsDefaultProps as PanelDefaults };

From 537e2534a64b08fdb7e633c2bc7cd5161c969986 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 11 Jan 2019 09:50:05 +0100
Subject: [PATCH 279/352] Move Select styles to grafana/ui

---
 .../grafana-ui/src/components/Select/_Select.scss        | 0
 packages/grafana-ui/src/components/index.scss            | 1 +
 public/sass/_grafana.scss                                | 9 ++++-----
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename public/sass/components/_form_select_box.scss => packages/grafana-ui/src/components/Select/_Select.scss (100%)

diff --git a/public/sass/components/_form_select_box.scss b/packages/grafana-ui/src/components/Select/_Select.scss
similarity index 100%
rename from public/sass/components/_form_select_box.scss
rename to packages/grafana-ui/src/components/Select/_Select.scss
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index e1d1474bb16..77a2caa9c5c 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1,3 +1,4 @@
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
 @import 'Tooltip/Tooltip';
+@import 'Select/Select';
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 10cc7335bdf..c8ad1ce8edc 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -1,4 +1,4 @@
-// DEPENDENCIES
+ // DEPENDENCIES
 @import '../../node_modules/react-table/react-table.css';
 
 // VENDOR
@@ -38,9 +38,6 @@
 @import 'layout/lists';
 @import 'layout/page';
 
-// LOAD @grafana/ui components
-@import '../../packages/grafana-ui/src/index';
-
 // COMPONENTS
 @import 'components/scrollbar';
 @import 'components/cards';
@@ -97,7 +94,6 @@
 @import 'components/page_header';
 @import 'components/dashboard_settings';
 @import 'components/empty_list_cta';
-@import 'components/form_select_box';
 @import 'components/panel_editor';
 @import 'components/toolbar';
 @import 'components/add_data_source.scss';
@@ -107,6 +103,9 @@
 @import 'components/value-mappings';
 @import 'components/popover-box';
 
+// LOAD @grafana/ui components
+@import '../../packages/grafana-ui/src/index';
+
 // PAGES
 @import 'pages/login';
 @import 'pages/dashboard';

From 3871ef29f95ad76abff8f0ba0257931ec4998bb9 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 11 Jan 2019 10:29:53 +0100
Subject: [PATCH 280/352] refactoring alias by

---
 .../datasource/stackdriver/components/AliasBy.tsx  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index 54200452325..c3445053627 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -11,9 +11,11 @@ export interface State {
 }
 
 export class AliasBy extends Component<Props, State> {
+  propagateOnChange: (value) => void;
+
   constructor(props) {
     super(props);
-    this.updateQuery = debounce(this.updateQuery.bind(this), 500);
+    this.propagateOnChange = debounce(this.props.onChange, 500);
     this.state = { value: '' };
   }
 
@@ -29,16 +31,12 @@ export class AliasBy extends Component<Props, State> {
 
   onChange(e) {
     this.setState({ value: e.target.value });
-    this.updateQuery(e.target.value);
-  }
-
-  updateQuery(value) {
-    this.props.onChange(value);
+    this.propagateOnChange(e.target.value);
   }
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
@@ -53,7 +51,7 @@ export class AliasBy extends Component<Props, State> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }

From d2b71cff3716f19456ea0e0d261f6924f5f9f245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Fri, 11 Jan 2019 11:25:49 +0100
Subject: [PATCH 281/352] Reverted move of defaults for GaugePanelOptions

---
 .../ThresholdsEditor.test.tsx                 | 33 +++-------------
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 38 +++++++++++++------
 packages/grafana-ui/src/types/gauge.ts        | 19 +---------
 .../plugins/panel/gauge/GaugePanelOptions.tsx | 25 ++++++++++--
 .../panel/gauge/ValueMappings.test.tsx        |  6 +--
 public/app/plugins/panel/gauge/module.tsx     |  6 +--
 6 files changed, 60 insertions(+), 67 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 40e6bb47f1f..14f84e00f80 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -1,33 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { ThresholdsEditor } from './ThresholdsEditor';
-import { BasicGaugeColor, PanelOptionsProps, GaugeOptions } from '../../types';
-
-const defaultProps = {
-  options: {
-    baseColor: BasicGaugeColor.Green,
-    minValue: 0,
-    maxValue: 100,
-    prefix: '',
-    showThresholdMarkers: true,
-    showThresholdLabels: false,
-    suffix: '',
-    decimals: 0,
-    stat: 'avg',
-    unit: 'none',
-    mappings: [],
-    thresholds: [],
-  },
-};
+import { ThresholdsEditor, Props } from './ThresholdsEditor';
+import { BasicGaugeColor } from '../../types';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<GaugeOptions> = {
+  const props: Props = {
     onChange: jest.fn(),
-    options: {
-      ...defaultProps.options,
-      thresholds: [],
-    },
+    thresholds: [],
   };
 
   Object.assign(props, propOverrides);
@@ -46,10 +26,7 @@ describe('Add threshold', () => {
 
   it('should add another threshold above a first', () => {
     const instance = setup({
-      options: {
-        ...defaultProps.options,
-        thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
-      },
+      thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
     });
 
     instance.onAddThreshold(1);
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index ed6778f7c43..54165dfadb5 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,28 +1,37 @@
 import React, { PureComponent } from 'react';
 import tinycolor, { ColorInput } from 'tinycolor2';
 
-import { Threshold, PanelOptionsProps, GaugeOptions, BasicGaugeColor } from '../../types';
+import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 
+export interface Props {
+  thresholds: Threshold[];
+  onChange: (thresholds: Threshold[]) => void;
+}
+
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
-  constructor(props: PanelOptionsProps<GaugeOptions>) {
+export class ThresholdsEditor extends PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
 
-    this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor };
+    this.state = { thresholds: props.thresholds, baseColor: BasicGaugeColor.Green };
   }
 
   onAddThreshold = (index: number) => {
-    const { maxValue, minValue } = this.props.options;
+    const maxValue = 100; // hardcoded for now before we add the base threshold
+    const minValue = 0; // hardcoded for now before we add the base threshold
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
-        threshold = { ...threshold, index: threshold.index + 1 };
+        threshold = {
+          ...threshold,
+          index: threshold.index + 1,
+        };
       }
 
       return threshold;
@@ -49,7 +58,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
 
     this.setState(
       {
-        thresholds: this.sortThresholds([...newThresholds, { index, value: value as number, color }]),
+        thresholds: this.sortThresholds([
+          ...newThresholds,
+          {
+            index,
+            value: value as number,
+            color,
+          },
+        ]),
       },
       () => this.updateGauge()
     );
@@ -95,7 +111,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
     );
   };
 
-  onChangeBaseColor = (color: string) => this.props.onChange({ ...this.props.options, baseColor: color });
+  onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
   onBlur = () => {
     this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
 
@@ -103,7 +119,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
   };
 
   updateGauge = () => {
-    this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
+    this.props.onChange(this.state.thresholds);
   };
 
   sortThresholds = (thresholds: Threshold[]) => {
@@ -163,14 +179,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
       <div className="indicator-section" style={{ height: '100%' }}>
         <div
           onClick={() => this.onAddThreshold(0)}
-          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
+          style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }}
         />
       </div>
     );
   }
 
   renderBase() {
-    const { baseColor } = this.props.options;
+    const baseColor = BasicGaugeColor.Green;
 
     return (
       <div className="threshold-row threshold-row-base">
diff --git a/packages/grafana-ui/src/types/gauge.ts b/packages/grafana-ui/src/types/gauge.ts
index fe422386d92..e05849448f7 100644
--- a/packages/grafana-ui/src/types/gauge.ts
+++ b/packages/grafana-ui/src/types/gauge.ts
@@ -1,4 +1,4 @@
-import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from './panel';
+import { RangeMap, Threshold, ValueMap } from './panel';
 
 export interface GaugeOptions {
   baseColor: string;
@@ -14,20 +14,3 @@ export interface GaugeOptions {
   thresholds: Threshold[];
   unit: string;
 }
-
-export const GaugePanelOptionsDefaultProps = {
-  options: {
-    baseColor: BasicGaugeColor.Green,
-    minValue: 0,
-    maxValue: 100,
-    prefix: '',
-    showThresholdMarkers: true,
-    showThresholdLabels: false,
-    suffix: '',
-    decimals: 0,
-    stat: 'avg',
-    unit: 'none',
-    mappings: [],
-    thresholds: [],
-  },
-};
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 99bff41a0d3..e43abad61a3 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,12 +1,31 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, GaugePanelOptionsDefaultProps, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
+import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
 
+export const defaultProps = {
+  options: {
+    baseColor: BasicGaugeColor.Green,
+    minValue: 0,
+    maxValue: 100,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    decimals: 0,
+    stat: 'avg',
+    unit: 'none',
+    mappings: [],
+    thresholds: [],
+  },
+};
+
 export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
-  static defaultProps = GaugePanelOptionsDefaultProps;
+  static defaultProps = defaultProps;
+
+  onThresholdsChanged = (thresholds: Threshold[]) => this.props.onChange({ ...this.props.options, thresholds });
 
   render() {
     const { onChange, options } = this.props;
@@ -15,7 +34,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
         <div className="form-section">
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
-          <ThresholdsEditor onChange={onChange} options={options} />
+          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </div>
 
         <div className="form-section">
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
index 0cf08d6d3b7..07db4028c68 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
-import { GaugePanelOptionsDefaultProps } from '@grafana/ui/src/types/gauge';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
 import ValueMappings from './ValueMappings';
 
@@ -9,7 +9,7 @@ const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
-      ...GaugePanelOptionsDefaultProps.options,
+      ...defaultProps.options,
       mappings: [
         { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
         { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
@@ -67,7 +67,7 @@ describe('Next id to add', () => {
   });
 
   it('should default to 1', () => {
-    const { instance } = setup({ options: { ...GaugePanelOptionsDefaultProps.options } });
+    const { instance } = setup({ options: { ...defaultProps.options } });
 
     expect(instance.state.nextIdToAdd).toEqual(1);
   });
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 72230eb4ba3..783e4825657 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,6 +1,4 @@
-import { GaugePanelOptionsDefaultProps } from '@grafana/ui';
-
-import GaugePanelOptions from './GaugePanelOptions';
+import GaugePanelOptions, { defaultProps } from './GaugePanelOptions';
 import { GaugePanel } from './GaugePanel';
 
-export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, GaugePanelOptionsDefaultProps as PanelDefaults };
+export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };

From 8aae6e8c09d726ae588dc6a7db1bafeb3b1d8762 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 11 Jan 2019 11:22:50 +0100
Subject: [PATCH 282/352] value formats: renamed folder

---
 packages/grafana-ui/src/utils/index.ts                          | 2 +-
 .../arithmeticFormatters.test.ts                                | 0
 .../{ValueFormats => value_formats}/arithmeticFormatters.ts     | 0
 .../src/utils/{ValueFormats => value_formats}/categories.ts     | 0
 .../{ValueFormats => value_formats}/dateTimeFormatters.test.ts  | 0
 .../utils/{ValueFormats => value_formats}/dateTimeFormatters.ts | 0
 .../{ValueFormats => value_formats}/symbolFormatters.test.ts    | 0
 .../utils/{ValueFormats => value_formats}/symbolFormatters.ts   | 0
 .../src/utils/{ValueFormats => value_formats}/valueFormats.ts   | 2 +-
 9 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/arithmeticFormatters.test.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/arithmeticFormatters.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/categories.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/dateTimeFormatters.test.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/dateTimeFormatters.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/symbolFormatters.test.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/symbolFormatters.ts (100%)
 rename packages/grafana-ui/src/utils/{ValueFormats => value_formats}/valueFormats.ts (99%)

diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index b1804c8605e..15694248832 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -1,2 +1,2 @@
 export * from './processTimeSeries';
-export * from './ValueFormats/valueFormats';
+export * from './value_formats/valueFormats';
diff --git a/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts b/packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.test.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts
rename to packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.test.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts b/packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts
rename to packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/categories.ts b/packages/grafana-ui/src/utils/value_formats/categories.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/categories.ts
rename to packages/grafana-ui/src/utils/value_formats/categories.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts b/packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.test.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts
rename to packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.test.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts b/packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts
rename to packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts b/packages/grafana-ui/src/utils/value_formats/symbolFormatters.test.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts
rename to packages/grafana-ui/src/utils/value_formats/symbolFormatters.test.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts b/packages/grafana-ui/src/utils/value_formats/symbolFormatters.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts
rename to packages/grafana-ui/src/utils/value_formats/symbolFormatters.ts
diff --git a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts b/packages/grafana-ui/src/utils/value_formats/valueFormats.ts
similarity index 99%
rename from packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
rename to packages/grafana-ui/src/utils/value_formats/valueFormats.ts
index ade0115fef2..dc06ce7848e 100644
--- a/packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/value_formats/valueFormats.ts
@@ -147,7 +147,7 @@ export function getValueFormatterIndex(): ValueFormatterIndex {
   return index;
 }
 
-export function getUnitFormats() {
+export function getValueFormats() {
   if (!hasBuiltIndex) {
     buildFormats();
   }

From 9e6411bf4bab47b2354042733b9e683895eed17f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 11 Jan 2019 13:31:25 +0100
Subject: [PATCH 283/352] value formats: another rename and updates code to use
 new valueFormats func

---
 packages/grafana-ui/src/utils/index.ts                    | 2 +-
 .../arithmeticFormatters.test.ts                          | 0
 .../arithmeticFormatters.ts                               | 0
 .../utils/{value_formats => valueFormats}/categories.ts   | 0
 .../dateTimeFormatters.test.ts                            | 0
 .../{value_formats => valueFormats}/dateTimeFormatters.ts | 0
 .../symbolFormatters.test.ts                              | 0
 .../{value_formats => valueFormats}/symbolFormatters.ts   | 0
 .../utils/{value_formats => valueFormats}/valueFormats.ts | 2 +-
 public/app/core/components/Select/UnitPicker.tsx          | 6 +++---
 public/app/core/utils/kbn.ts                              | 8 +++++---
 public/app/plugins/panel/graph/axes_editor.ts             | 4 ++--
 public/app/plugins/panel/table/column_options.ts          | 4 ++--
 13 files changed, 14 insertions(+), 12 deletions(-)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/arithmeticFormatters.test.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/arithmeticFormatters.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/categories.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/dateTimeFormatters.test.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/dateTimeFormatters.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/symbolFormatters.test.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/symbolFormatters.ts (100%)
 rename packages/grafana-ui/src/utils/{value_formats => valueFormats}/valueFormats.ts (99%)

diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index 15694248832..77940e19719 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -1,2 +1,2 @@
 export * from './processTimeSeries';
-export * from './value_formats/valueFormats';
+export * from './valueFormats/valueFormats';
diff --git a/packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.test.ts b/packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.test.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.test.ts
rename to packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.test.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.ts b/packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/arithmeticFormatters.ts
rename to packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/categories.ts b/packages/grafana-ui/src/utils/valueFormats/categories.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/categories.ts
rename to packages/grafana-ui/src/utils/valueFormats/categories.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.test.ts b/packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.test.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.test.ts
rename to packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.test.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.ts b/packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/dateTimeFormatters.ts
rename to packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/symbolFormatters.test.ts b/packages/grafana-ui/src/utils/valueFormats/symbolFormatters.test.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/symbolFormatters.test.ts
rename to packages/grafana-ui/src/utils/valueFormats/symbolFormatters.test.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/symbolFormatters.ts b/packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/value_formats/symbolFormatters.ts
rename to packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts
diff --git a/packages/grafana-ui/src/utils/value_formats/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats/valueFormats.ts
similarity index 99%
rename from packages/grafana-ui/src/utils/value_formats/valueFormats.ts
rename to packages/grafana-ui/src/utils/valueFormats/valueFormats.ts
index dc06ce7848e..0a56ce58e5b 100644
--- a/packages/grafana-ui/src/utils/value_formats/valueFormats.ts
+++ b/packages/grafana-ui/src/utils/valueFormats/valueFormats.ts
@@ -158,7 +158,7 @@ export function getValueFormats() {
       submenu: cat.formats.map(format => {
         return {
           text: format.name,
-          id: format.id,
+          value: format.id,
         };
       }),
     };
diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
index 29fa2928045..0da8a148b9a 100644
--- a/public/app/core/components/Select/UnitPicker.tsx
+++ b/public/app/core/components/Select/UnitPicker.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import Select from './Select';
-import kbn from 'app/core/utils/kbn';
+import { getValueFormats } from '@grafana/ui';
 
 interface Props {
   onChange: (item: any) => void;
@@ -16,14 +16,14 @@ export default class UnitPicker extends PureComponent<Props> {
   render() {
     const { defaultValue, onChange, width } = this.props;
 
-    const unitGroups = kbn.getUnitFormats();
+    const unitGroups = getValueFormats();
 
     // Need to transform the data structure to work well with Select
     const groupOptions = unitGroups.map(group => {
       const options = group.submenu.map(unit => {
         return {
           label: unit.text,
-          value: unit.id,
+          value: unit.value,
         };
       });
 
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index 20088c60f66..a3a96f8afc3 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -1,6 +1,5 @@
 import _ from 'lodash';
-import { getValueFormat, getValueFormatterIndex  } from '@grafana/ui';
-import { getUnitFormats } from '@grafana/ui/src';
+import { getValueFormat, getValueFormatterIndex, getValueFormats } from '@grafana/ui';
 
 const kbn: any = {};
 
@@ -284,9 +283,12 @@ kbn.roundValue = (num, decimals) => {
 ///// FORMAT MENU /////
 
 kbn.getUnitFormats = () => {
-  return getUnitFormats();
+  return getValueFormats();
 };
 
+//
+// Backward compatible layer for value formats to support old plugins
+//
 if (typeof Proxy !== "undefined") {
   kbn.valueFormats = new Proxy(kbn.valueFormats, {
     get(target, name, receiver) {
diff --git a/public/app/plugins/panel/graph/axes_editor.ts b/public/app/plugins/panel/graph/axes_editor.ts
index 3d2dd4acbc5..04ef62f16fb 100644
--- a/public/app/plugins/panel/graph/axes_editor.ts
+++ b/public/app/plugins/panel/graph/axes_editor.ts
@@ -1,4 +1,4 @@
-import kbn from 'app/core/utils/kbn';
+import { getValueFormats } from '@grafana/ui';
 
 export class AxesEditorCtrl {
   panel: any;
@@ -15,7 +15,7 @@ export class AxesEditorCtrl {
     this.panel = this.panelCtrl.panel;
     this.$scope.ctrl = this;
 
-    this.unitFormats = kbn.getUnitFormats();
+    this.unitFormats = getValueFormats();
 
     this.logScales = {
       linear: 1,
diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts
index 4c810d9987d..dfe5ff8fdcd 100644
--- a/public/app/plugins/panel/table/column_options.ts
+++ b/public/app/plugins/panel/table/column_options.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import kbn from 'app/core/utils/kbn';
+import { getValueFormats } from '@grafana/ui';
 
 export class ColumnOptionsCtrl {
   panel: any;
@@ -22,7 +22,7 @@ export class ColumnOptionsCtrl {
     this.activeStyleIndex = 0;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
-    this.unitFormats = kbn.getUnitFormats();
+    this.unitFormats = getValueFormats();
     this.colorModes = [
       { text: 'Disabled', value: null },
       { text: 'Cell', value: 'cell' },

From b59655021005574cd93602677fa8bb477eef1a54 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 11 Jan 2019 13:53:04 +0100
Subject: [PATCH 284/352] use typings for ds and template srv

---
 .../stackdriver/components/AnnotationQueryEditor.tsx       | 7 +++++--
 .../app/plugins/datasource/stackdriver/components/Help.tsx | 3 ++-
 .../plugins/datasource/stackdriver/components/Metrics.tsx  | 3 ++-
 .../plugins/datasource/stackdriver/components/Project.tsx  | 3 ++-
 .../datasource/stackdriver/components/QueryEditor.test.tsx | 7 ++++---
 .../datasource/stackdriver/components/QueryEditor.tsx      | 4 +++-
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index e6942d2195c..d5f8e3af78e 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import _ from 'lodash';
 
+import { TemplateSrv } from 'app/features/templating/template_srv';
+
+import StackdriverDatasource from '../datasource';
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { AnnotationTarget } from '../types';
@@ -9,8 +12,8 @@ import { AnnotationsHelp } from './AnnotationsHelp';
 export interface Props {
   onQueryChange: (target: AnnotationTarget) => void;
   target: AnnotationTarget;
-  datasource: any;
-  templateSrv: any;
+  datasource: StackdriverDatasource;
+  templateSrv: TemplateSrv;
 }
 
 interface State extends AnnotationTarget {
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index 2510338cce4..43cbe13e334 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Project } from './Project';
+import StackdriverDatasource from '../datasource';
 
 export interface Props {
-  datasource: any;
+  datasource: StackdriverDatasource;
   rawQuery: string;
   lastQueryError: string;
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 3c04cb07183..55dbbfa31ac 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
+import StackdriverDatasource from '../datasource';
 import appEvents from 'app/core/app_events';
 import { MetricDescriptor } from '../types';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
@@ -8,7 +9,7 @@ import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 export interface Props {
   onChange: (metricDescriptor: MetricDescriptor) => void;
   templateSrv: any;
-  datasource: any;
+  datasource: StackdriverDatasource;
   defaultProject: string;
   metricType: string;
   children?: (renderProps: any) => JSX.Element;
diff --git a/public/app/plugins/datasource/stackdriver/components/Project.tsx b/public/app/plugins/datasource/stackdriver/components/Project.tsx
index 65fd76884dc..8f3e1263ee3 100644
--- a/public/app/plugins/datasource/stackdriver/components/Project.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Project.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import StackdriverDatasource from '../datasource';
 
 export interface Props {
-  datasource: any;
+  datasource: StackdriverDatasource;
 }
 
 interface State {
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
index 8098433d83b..b4fc02fb24a 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { QueryEditor, Props, DefaultTarget } from './QueryEditor';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 const props: Props = {
   onQueryChange: target => {},
@@ -8,10 +9,10 @@ const props: Props = {
   target: DefaultTarget,
   events: { on: () => {} },
   datasource: {
-    getDefaultProject: () => 'project',
-    getMetricTypes: () => [],
+    getDefaultProject: () => Promise.resolve('project'),
+    getMetricTypes: () => Promise.resolve([]),
   },
-  templateSrv: { variables: [] },
+  templateSrv: new TemplateSrv(),
 };
 
 describe('QueryEditor', () => {
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 3d3f12ec57d..6710fd6146c 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 
+import { TemplateSrv } from 'app/features/templating/template_srv';
+
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
@@ -17,7 +19,7 @@ export interface Props {
   target: Target;
   events: any;
   datasource: any;
-  templateSrv: any;
+  templateSrv: TemplateSrv;
 }
 
 interface State extends Target {

From b6171fa3c70e0e7190a288a84beb1b53135c9a0e Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 11 Jan 2019 15:14:35 +0100
Subject: [PATCH 285/352] add feedback to what interval is being used
 (calculated in the backend)

---
 .../components/AlignmentPeriods.tsx           | 18 +++++--
 .../stackdriver/components/QueryEditor.tsx    | 12 ++++-
 .../__snapshots__/QueryEditor.test.tsx.snap   | 50 +++++++++----------
 3 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
index ef5ed910862..e5ac77ed6fb 100644
--- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -1,16 +1,28 @@
 import React, { SFC } from 'react';
 import _ from 'lodash';
 
+import kbn from 'app/core/utils/kbn';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
-import { alignmentPeriods } from '../constants';
+import { alignmentPeriods, alignOptions } from '../constants';
 
 export interface Props {
   onChange: (alignmentPeriod) => void;
   templateSrv: any;
   alignmentPeriod: string;
+  perSeriesAligner: string;
+  usedAlignmentPeriod: string;
 }
 
-export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onChange }) => {
+export const AlignmentPeriods: SFC<Props> = ({
+  alignmentPeriod,
+  templateSrv,
+  onChange,
+  perSeriesAligner,
+  usedAlignmentPeriod,
+}) => {
+  const alignment = alignOptions.find(ap => ap.value === templateSrv.replace(perSeriesAligner));
+  const formatAlignmentText = `${kbn.secondsToHms(usedAlignmentPeriod)} interval (${alignment ? alignment.text : ''})`;
+
   return (
     <>
       <div className="gf-form-inline">
@@ -35,7 +47,7 @@ export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onC
           />
         </div>
         <div className="gf-form gf-form--grow">
-          <div className="gf-form-label gf-form-label--grow" />
+          {usedAlignmentPeriod && <label className="gf-form-label gf-form-label--grow">{formatAlignmentText}</label>}
         </div>
       </div>
     </>
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 6710fd6146c..3175a840d70 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -46,6 +46,7 @@ export const DefaultTarget: State = {
   alignOptions: [],
   lastQuery: '',
   lastQueryError: '',
+  usedAlignmentPeriod: '',
 };
 
 export class QueryEditor extends React.Component<Props, State> {
@@ -71,7 +72,11 @@ export class QueryEditor extends React.Component<Props, State> {
   onDataReceived(dataList) {
     const series = dataList.find(item => item.refId === this.props.target.refId);
     if (series) {
-      this.setState({ lastQuery: decodeURIComponent(series.meta.rawQuery), lastQueryError: '' });
+      this.setState({
+        lastQuery: decodeURIComponent(series.meta.rawQuery),
+        lastQueryError: '',
+        usedAlignmentPeriod: series.meta.alignmentPeriod,
+      });
     }
   }
 
@@ -125,6 +130,7 @@ export class QueryEditor extends React.Component<Props, State> {
 
   render() {
     const {
+      usedAlignmentPeriod,
       defaultProject,
       metricType,
       crossSeriesReducer,
@@ -180,12 +186,14 @@ export class QueryEditor extends React.Component<Props, State> {
                   )
                 }
               </Aggregations>
-              <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <AlignmentPeriods
                 templateSrv={templateSrv}
                 alignmentPeriod={alignmentPeriod}
+                perSeriesAligner={perSeriesAligner}
+                usedAlignmentPeriod={usedAlignmentPeriod}
                 onChange={value => this.onPropertyChange('alignmentPeriod', value)}
               />
+              <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </>
           )}
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
index a3a723e8bed..c93b062c31e 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -282,32 +282,6 @@ Array [
       </label>
     </div>
   </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <label
-        className="gf-form-label query-keyword width-9"
-      >
-        Alias By
-      </label>
-      <input
-        className="gf-form-input width-24"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
   <div
     className="gf-form-inline"
   >
@@ -407,6 +381,30 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      
+    </div>
+  </div>,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <label
+        className="gf-form-label query-keyword width-9"
+      >
+        Alias By
+      </label>
+      <input
+        className="gf-form-input width-24"
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
     <div
       className="gf-form gf-form--grow"
     >

From c3fdc1a0fb5f92d0483181084e7bbfdccbaa68d3 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 11 Jan 2019 16:19:34 +0100
Subject: [PATCH 286/352] Panel time override tests

---
 package.json                                  |  1 +
 .../features/dashboard/utils/panel.test.ts    | 68 +++++++++++++++++++
 yarn.lock                                     |  5 ++
 3 files changed, 74 insertions(+)
 create mode 100644 public/app/features/dashboard/utils/panel.test.ts

diff --git a/package.json b/package.json
index c8d891b91bc..470101ff0c4 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "^23.6.0",
+    "jest-date-mock": "^1.0.6",
     "lint-staged": "^6.0.0",
     "load-grunt-tasks": "3.5.2",
     "mini-css-extract-plugin": "^0.4.0",
diff --git a/public/app/features/dashboard/utils/panel.test.ts b/public/app/features/dashboard/utils/panel.test.ts
new file mode 100644
index 00000000000..eeeb664f874
--- /dev/null
+++ b/public/app/features/dashboard/utils/panel.test.ts
@@ -0,0 +1,68 @@
+import moment from 'moment';
+import { TimeRange } from '@grafana/ui';
+import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
+import { advanceTo, clear } from 'jest-date-mock';
+
+const dashboardTimeRange: TimeRange = {
+  from: moment([2019, 1, 11, 12, 0]),
+  to: moment([2019, 1, 11, 18, 0]),
+  raw: {
+    from: 'now-6h',
+    to: 'now',
+  },
+};
+
+describe('applyPanelTimeOverrides', () => {
+  const fakeCurrentDate = moment([2019, 1, 11, 14, 0, 0]).toDate();
+
+  beforeAll(() => {
+    advanceTo(fakeCurrentDate);
+  });
+
+  afterAll(() => {
+    clear();
+  });
+
+  it('should apply relative time override', () => {
+    const panelModel = {
+      timeFrom: '2h',
+    };
+
+    // @ts-ignore: PanelModel type incositency
+    const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
+
+    expect(overrides.timeRange.from.toISOString()).toBe(moment([2019, 1, 11, 12]).toISOString());
+    expect(overrides.timeRange.to.toISOString()).toBe(fakeCurrentDate.toISOString());
+  });
+
+  it('should apply time shift', () => {
+    const panelModel = {
+      timeShift: '2h'
+    };
+
+    const expectedFromDate = moment([2019, 1, 11, 10, 0, 0]).toDate();
+    const expectedToDate = moment([2019, 1, 11, 16, 0, 0]).toDate();
+
+    // @ts-ignore: PanelModel type incositency
+    const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
+
+    expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
+    expect(overrides.timeRange.to.toISOString()).toBe(expectedToDate.toISOString());
+  });
+
+  it('should apply both relative time and time shift', () => {
+    const panelModel = {
+      timeFrom: '2h',
+      timeShift: '2h'
+    };
+
+    const expectedFromDate = moment([2019, 1, 11, 10, 0, 0]).toDate();
+    const expectedToDate = moment([2019, 1, 11, 12, 0, 0]).toDate();
+
+    // @ts-ignore: PanelModel type incositency
+    const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
+
+    expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
+    expect(overrides.timeRange.to.toISOString()).toBe(expectedToDate.toISOString());
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 376a0b1d23a..70a2a93b8dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8153,6 +8153,11 @@ jest-config@^23.6.0:
     micromatch "^2.3.11"
     pretty-format "^23.6.0"
 
+jest-date-mock@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/jest-date-mock/-/jest-date-mock-1.0.6.tgz#7ea405d1fa68f86bb727d12e47b9c5e6760066a6"
+  integrity sha512-wnLgDaK3i2md/cQ1wKx/+/78PieO4nkGen8avEmHd4dt1NGGxeuW8/oLAF5qsatQBXdn08pxpqRtUoDvTTLdRg==
+
 jest-diff@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"

From 7289e6e500f5ec09d6a2cb664b7cf23519b3a788 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 11 Jan 2019 16:49:29 +0100
Subject: [PATCH 287/352] Addedd assertions about raw time range when panel
 time overriden

---
 public/app/features/dashboard/utils/panel.test.ts |  6 ++++++
 public/app/features/dashboard/utils/panel.ts      | 12 +++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/utils/panel.test.ts b/public/app/features/dashboard/utils/panel.test.ts
index eeeb664f874..fdb4f16fa17 100644
--- a/public/app/features/dashboard/utils/panel.test.ts
+++ b/public/app/features/dashboard/utils/panel.test.ts
@@ -33,6 +33,8 @@ describe('applyPanelTimeOverrides', () => {
 
     expect(overrides.timeRange.from.toISOString()).toBe(moment([2019, 1, 11, 12]).toISOString());
     expect(overrides.timeRange.to.toISOString()).toBe(fakeCurrentDate.toISOString());
+    expect(overrides.timeRange.raw.from).toBe('now-2h');
+    expect(overrides.timeRange.raw.to).toBe('now');
   });
 
   it('should apply time shift', () => {
@@ -48,6 +50,8 @@ describe('applyPanelTimeOverrides', () => {
 
     expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
     expect(overrides.timeRange.to.toISOString()).toBe(expectedToDate.toISOString());
+    expect((overrides.timeRange.raw.from as moment.Moment).toISOString()).toEqual(expectedFromDate.toISOString());
+    expect((overrides.timeRange.raw.to as moment.Moment).toISOString()).toEqual(expectedToDate.toISOString());
   });
 
   it('should apply both relative time and time shift', () => {
@@ -64,5 +68,7 @@ describe('applyPanelTimeOverrides', () => {
 
     expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
     expect(overrides.timeRange.to.toISOString()).toBe(expectedToDate.toISOString());
+    expect((overrides.timeRange.raw.from as moment.Moment).toISOString()).toEqual(expectedFromDate.toISOString());
+    expect((overrides.timeRange.raw.to as moment.Moment).toISOString()).toEqual(expectedToDate.toISOString());
   });
 });
diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index cf00a31c71e..00c960bdfaa 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -142,10 +142,16 @@ export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange)
 
     const timeShift = '-' + timeShiftInterpolated;
     newTimeData.timeInfo += ' timeshift ' + timeShift;
+    const from = dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false);
+    const to = dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true);
+
     newTimeData.timeRange = {
-      from: dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false),
-      to: dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true),
-      raw: newTimeData.timeRange.raw,
+      from,
+      to,
+      raw: {
+        from,
+        to,
+      },
     };
   }
 

From 9c54da8f5d2e3c1cc23865af8aafd256e8e65c54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 12 Jan 2019 20:43:15 +0100
Subject: [PATCH 288/352] Simplified folder structure in grafana-ui lib

---
 .../src/{forms => components}/GfFormLabel/GfFormLabel.tsx       | 0
 .../src/{visualizations => components}/Graph/Graph.tsx          | 0
 packages/grafana-ui/src/components/index.ts                     | 2 ++
 packages/grafana-ui/src/forms/index.ts                          | 1 -
 packages/grafana-ui/src/index.ts                                | 2 --
 packages/grafana-ui/src/visualizations/index.ts                 | 1 -
 6 files changed, 2 insertions(+), 4 deletions(-)
 rename packages/grafana-ui/src/{forms => components}/GfFormLabel/GfFormLabel.tsx (100%)
 rename packages/grafana-ui/src/{visualizations => components}/Graph/Graph.tsx (100%)
 delete mode 100644 packages/grafana-ui/src/forms/index.ts
 delete mode 100644 packages/grafana-ui/src/visualizations/index.ts

diff --git a/packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx b/packages/grafana-ui/src/components/GfFormLabel/GfFormLabel.tsx
similarity index 100%
rename from packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx
rename to packages/grafana-ui/src/components/GfFormLabel/GfFormLabel.tsx
diff --git a/packages/grafana-ui/src/visualizations/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx
similarity index 100%
rename from packages/grafana-ui/src/visualizations/Graph/Graph.tsx
rename to packages/grafana-ui/src/components/Graph/Graph.tsx
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 936e1a1c759..028a71b56c2 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -14,3 +14,5 @@ export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
+export { GfFormLabel } from './GfFormLabel/GfFormLabel';
+export { Graph } from './Graph/Graph';
diff --git a/packages/grafana-ui/src/forms/index.ts b/packages/grafana-ui/src/forms/index.ts
deleted file mode 100644
index bb6998b0025..00000000000
--- a/packages/grafana-ui/src/forms/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { GfFormLabel } from './GfFormLabel/GfFormLabel';
diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts
index b22152497b9..974d976bbef 100644
--- a/packages/grafana-ui/src/index.ts
+++ b/packages/grafana-ui/src/index.ts
@@ -1,5 +1,3 @@
 export * from './components';
-export * from './visualizations';
 export * from './types';
 export * from './utils';
-export * from './forms';
diff --git a/packages/grafana-ui/src/visualizations/index.ts b/packages/grafana-ui/src/visualizations/index.ts
deleted file mode 100644
index 967432d37c9..00000000000
--- a/packages/grafana-ui/src/visualizations/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Graph } from './Graph/Graph';

From 5b59d59afa89f8c4caa9fc5a93c5218883bc3d0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 12 Jan 2019 21:43:41 +0100
Subject: [PATCH 289/352] panel option section moved to grafana-ui and new
 panel option grid component

---
 .../PanelOptionGrid/PanelOptionGrid.tsx       | 15 +++++++++++
 .../PanelOptionGrid/_PanelOptionGrid.scss     | 11 ++++++++
 .../PanelOptionSection.tsx                    |  0
 .../_PanelOptionSection.scss                  | 27 +++++++++++++++++++
 .../ThresholdsEditor/ThresholdsEditor.tsx     |  6 ++---
 packages/grafana-ui/src/components/index.scss |  2 ++
 packages/grafana-ui/src/components/index.ts   |  2 ++
 .../dashboard/dashgrid/EditorTabBody.tsx      |  3 +--
 .../dashboard/dashgrid/QueriesTab.tsx         |  2 +-
 .../dashboard/dashgrid/VisualizationTab.tsx   |  5 ++--
 .../panel/gauge/GaugeOptionsEditor.tsx        |  7 +++--
 .../plugins/panel/gauge/GaugePanelOptions.tsx | 17 +++++++-----
 .../app/plugins/panel/gauge/ValueMappings.tsx |  7 +++--
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  7 +++--
 public/app/plugins/panel/gauge/types.ts       |  2 ++
 public/sass/components/_panel_editor.scss     | 27 -------------------
 16 files changed, 86 insertions(+), 54 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx
 create mode 100644 packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss
 rename {public/app/features/dashboard/dashgrid => packages/grafana-ui/src/components/PanelOptionSection}/PanelOptionSection.tsx (100%)
 create mode 100644 packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss
 create mode 100644 public/app/plugins/panel/gauge/types.ts

diff --git a/packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx b/packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx
new file mode 100644
index 00000000000..48c0d369857
--- /dev/null
+++ b/packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx
@@ -0,0 +1,15 @@
+import React, { SFC } from 'react';
+
+interface Props {
+  cols?: number;
+  children: JSX.Element[] | JSX.Element;
+}
+
+export const PanelOptionGrid: SFC<Props> = ({ children }) => {
+
+  return (
+    <div className="panel-option-grid">
+      {children}
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss b/packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss
new file mode 100644
index 00000000000..d26cf82b2b4
--- /dev/null
+++ b/packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss
@@ -0,0 +1,11 @@
+.panel-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  margin-bottom: 10px;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx b/packages/grafana-ui/src/components/PanelOptionSection/PanelOptionSection.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/PanelOptionSection.tsx
rename to packages/grafana-ui/src/components/PanelOptionSection/PanelOptionSection.tsx
diff --git a/packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss b/packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss
new file mode 100644
index 00000000000..d95d3f47984
--- /dev/null
+++ b/packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss
@@ -0,0 +1,27 @@
+.panel-option-section {
+  margin-bottom: 10px;
+  border: $panel-option-section-border;
+  border-radius: $border-radius;
+  background: $page-bg;
+}
+
+.panel-option-section__header {
+  padding: 4px 20px;
+  font-size: 1.1rem;
+  background: $panel-option-section-header-bg;
+  position: relative;
+
+  .btn {
+    position: absolute;
+    right: 0;
+    top: 0px;
+  }
+}
+
+.panel-option-section__body {
+  padding: 20px;
+
+  &--queries {
+    min-height: 200px;
+  }
+}
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 54165dfadb5..869701677bd 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
 
 import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
+import { PanelOptionSection } from '../PanelOptionSection/PanelOptionSection';
 
 export interface Props {
   thresholds: Threshold[];
@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Thresholds</h5>
+      <PanelOptionSection title="Thresholds">
         <div className="thresholds">
           <div className="color-indicators">
             {this.renderIndicator()}
@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             {this.renderBase()}
           </div>
         </div>
-      </div>
+      </PanelOptionSection>
     );
   }
 }
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index c2fe032d24e..9b92aafedee 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -3,3 +3,5 @@
 @import 'ThresholdsEditor/ThresholdsEditor';
 @import 'Tooltip/Tooltip';
 @import 'Select/Select';
+@import 'PanelOptionSection/PanelOptionSection';
+@import 'PanelOptionGrid/PanelOptionGrid';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 028a71b56c2..085a3742eb6 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -16,3 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
 export { GfFormLabel } from './GfFormLabel/GfFormLabel';
 export { Graph } from './Graph/Graph';
+export { PanelOptionSection } from './PanelOptionSection/PanelOptionSection';
+export { PanelOptionGrid } from './PanelOptionGrid/PanelOptionGrid';
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index e86baf0a80b..b3fe3d4f40a 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -2,9 +2,8 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, PanelOptionSection } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { PanelOptionSection } from './PanelOptionSection';
 
 interface Props {
   children: JSX.Element;
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index a20f8627fba..4e581089629 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
-import { PanelOptionSection } from './PanelOptionSection';
+import { PanelOptionSection } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index bc7102f35dd..b43a0aa406c 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { PanelOptionSection } from './PanelOptionSection';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
 
     return (
-      <PanelOptionSection>
+      <>
         {PanelOptions ? (
           <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
         ) : (
           <p>Visualization has no options</p>
         )}
-      </PanelOptionSection>
+      </>
     );
   }
 
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index cb436180b49..39b24687197 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
     const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Gauge</h5>
+      <PanelOptionSection title="Gauge">
         <div className="gf-form">
           <Label width={8}>Min value</Label>
           <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
@@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
-      </div>
+      </PanelOptionSection>
     );
   }
 }
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index e43abad61a3..d9fba1411c3 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,5 +1,12 @@
 import React, { PureComponent } from 'react';
-import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
+import {
+  BasicGaugeColor,
+  GaugeOptions,
+  PanelOptionsProps,
+  ThresholdsEditor,
+  Threshold,
+  PanelOptionGrid,
+} from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
     const { onChange, options } = this.props;
     return (
       <>
-        <div className="form-section">
+        <PanelOptionGrid>
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
-        </div>
+        </PanelOptionGrid>
 
-        <div className="form-section">
-          <ValueMappings onChange={onChange} options={options} />
-        </div>
+        <ValueMappings onChange={onChange} options={options} />
       </>
     );
   }
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx
index 4ce0d37b53c..f63435480d6 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionSection } from '@grafana/ui';
 
 import MappingRow from './MappingRow';
 
@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
     const { mappings } = this.state;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Value mappings</h5>
+      <PanelOptionSection title="Value Mappings">
         <div>
           {mappings.length > 0 &&
             mappings.map((mapping, index) => (
@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
           </div>
           <div className="add-mapping-row-label">Add mapping</div>
         </div>
-      </div>
+      </PanelOptionSection>
     );
   }
 }
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 0b30da35d36..5a8ffc5cd09 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
 
 import { Label } from 'app/core/components/Label/Label';
 import { Select} from '@grafana/ui';
@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
     const { stat, unit, decimals, prefix, suffix } = this.props.options;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Value</h5>
+      <PanelOptionSection title="Value">
         <div className="gf-form">
           <Label width={labelWidth}>Stat</Label>
           <Select
@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
           <Label width={labelWidth}>Suffix</Label>
           <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
         </div>
-      </div>
+      </PanelOptionSection>
     );
   }
 }
diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts
new file mode 100644
index 00000000000..139597f9cb0
--- /dev/null
+++ b/public/app/plugins/panel/gauge/types.ts
@@ -0,0 +1,2 @@
+
+
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index bfc1c4bb9b5..b2ab91ccb19 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -230,30 +230,3 @@
   min-width: 200px;
 }
 
-.panel-option-section {
-  margin-bottom: 10px;
-  border: $panel-option-section-border;
-  border-radius: $border-radius;
-}
-
-.panel-option-section__header {
-  padding: 4px 20px;
-  font-size: 1.1rem;
-  background: $panel-option-section-header-bg;
-  position: relative;
-
-  .btn {
-    position: absolute;
-    right: 0;
-    top: 0px;
-  }
-}
-
-.panel-option-section__body {
-  padding: 20px;
-  background: $page-bg;
-
-  &--queries {
-    min-height: 200px;
-  }
-}

From c11ec79056f0c11bb9f235b5c9505cd013f23373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 13 Jan 2019 12:42:21 +0100
Subject: [PATCH 290/352] Minor renames and other fixes

---
 .../PanelOptionGrid/_PanelOptionGrid.scss        | 11 -----------
 .../PanelOptionsGrid.tsx}                        |  4 ++--
 .../PanelOptionsGrid/_PanelOptionsGrid.scss      | 10 ++++++++++
 .../PanelOptionsGroup.tsx}                       |  8 ++++----
 .../_PanelOptionsGroup.scss}                     | 10 +++++-----
 .../ThresholdsEditor/ThresholdsEditor.tsx        |  6 +++---
 packages/grafana-ui/src/components/index.scss    |  4 ++--
 packages/grafana-ui/src/components/index.ts      |  4 ++--
 .../features/alerting/partials/alert_tab.html    | 10 +++++-----
 .../dashboard/dashgrid/EditorTabBody.tsx         |  6 +++---
 .../features/dashboard/dashgrid/QueriesTab.tsx   | 10 +++++-----
 .../dashboard/dashgrid/VisualizationTab.tsx      |  6 +++---
 .../app/features/panel/partials/general_tab.html | 16 ++++++++--------
 .../plugins/panel/gauge/GaugeOptionsEditor.tsx   |  6 +++---
 .../plugins/panel/gauge/GaugePanelOptions.tsx    |  6 +++---
 public/app/plugins/panel/gauge/ValueMappings.tsx |  6 +++---
 public/app/plugins/panel/gauge/ValueOptions.tsx  |  6 +++---
 public/sass/_variables.dark.scss                 |  4 ++--
 public/sass/_variables.light.scss                |  4 ++--
 19 files changed, 68 insertions(+), 69 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss
 rename packages/grafana-ui/src/components/{PanelOptionGrid/PanelOptionGrid.tsx => PanelOptionsGrid/PanelOptionsGrid.tsx} (60%)
 create mode 100644 packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss
 rename packages/grafana-ui/src/components/{PanelOptionSection/PanelOptionSection.tsx => PanelOptionsGroup/PanelOptionsGroup.tsx} (65%)
 rename packages/grafana-ui/src/components/{PanelOptionSection/_PanelOptionSection.scss => PanelOptionsGroup/_PanelOptionsGroup.scss} (61%)

diff --git a/packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss b/packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss
deleted file mode 100644
index d26cf82b2b4..00000000000
--- a/packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.panel-option-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-row-gap: 10px;
-  grid-column-gap: 10px;
-  margin-bottom: 10px;
-
-  @include media-breakpoint-up(md) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
diff --git a/packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx b/packages/grafana-ui/src/components/PanelOptionsGrid/PanelOptionsGrid.tsx
similarity index 60%
rename from packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx
rename to packages/grafana-ui/src/components/PanelOptionsGrid/PanelOptionsGrid.tsx
index 48c0d369857..0636ec4a9da 100644
--- a/packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx
+++ b/packages/grafana-ui/src/components/PanelOptionsGrid/PanelOptionsGrid.tsx
@@ -5,10 +5,10 @@ interface Props {
   children: JSX.Element[] | JSX.Element;
 }
 
-export const PanelOptionGrid: SFC<Props> = ({ children }) => {
+export const PanelOptionsGrid: SFC<Props> = ({ children }) => {
 
   return (
-    <div className="panel-option-grid">
+    <div className="panel-options-grid">
       {children}
     </div>
   );
diff --git a/packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss b/packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss
new file mode 100644
index 00000000000..1cd26867a97
--- /dev/null
+++ b/packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss
@@ -0,0 +1,10 @@
+.panel-options-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
diff --git a/packages/grafana-ui/src/components/PanelOptionSection/PanelOptionSection.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
similarity index 65%
rename from packages/grafana-ui/src/components/PanelOptionSection/PanelOptionSection.tsx
rename to packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
index f38d99d2237..7ce4b8335ff 100644
--- a/packages/grafana-ui/src/components/PanelOptionSection/PanelOptionSection.tsx
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
@@ -7,11 +7,11 @@ interface Props {
   children: JSX.Element | JSX.Element[];
 }
 
-export const PanelOptionSection: SFC<Props> = props => {
+export const PanelOptionsGroup: SFC<Props> = props => {
   return (
-    <div className="panel-option-section">
+    <div className="panel-options-group">
       {props.title && (
-        <div className="panel-option-section__header">
+        <div className="panel-options-group__header">
           {props.title}
           {props.onClose && (
             <button className="btn btn-link" onClick={props.onClose}>
@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
           )}
         </div>
       )}
-      <div className="panel-option-section__body">{props.children}</div>
+      <div className="panel-options-group__body">{props.children}</div>
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
similarity index 61%
rename from packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss
rename to packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
index d95d3f47984..9f5d4f02695 100644
--- a/packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
@@ -1,14 +1,14 @@
-.panel-option-section {
+.panel-options-group {
   margin-bottom: 10px;
-  border: $panel-option-section-border;
+  border: $panel-options-group-border;
   border-radius: $border-radius;
   background: $page-bg;
 }
 
-.panel-option-section__header {
+.panel-options-group__header {
   padding: 4px 20px;
   font-size: 1.1rem;
-  background: $panel-option-section-header-bg;
+  background: $panel-options-group-header-bg;
   position: relative;
 
   .btn {
@@ -18,7 +18,7 @@
   }
 }
 
-.panel-option-section__body {
+.panel-options-group__body {
   padding: 20px;
 
   &--queries {
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 869701677bd..c635b9cb4f5 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -3,7 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
 
 import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { PanelOptionSection } from '../PanelOptionSection/PanelOptionSection';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 export interface Props {
   thresholds: Threshold[];
@@ -205,7 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     return (
-      <PanelOptionSection title="Thresholds">
+      <PanelOptionsGroup title="Thresholds">
         <div className="thresholds">
           <div className="color-indicators">
             {this.renderIndicator()}
@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             {this.renderBase()}
           </div>
         </div>
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index 9b92aafedee..5a9263844a4 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -3,5 +3,5 @@
 @import 'ThresholdsEditor/ThresholdsEditor';
 @import 'Tooltip/Tooltip';
 @import 'Select/Select';
-@import 'PanelOptionSection/PanelOptionSection';
-@import 'PanelOptionGrid/PanelOptionGrid';
+@import 'PanelOptionsGroup/PanelOptionsGroup';
+@import 'PanelOptionsGrid/PanelOptionsGrid';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 085a3742eb6..5420fcf14b7 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -16,5 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
 export { GfFormLabel } from './GfFormLabel/GfFormLabel';
 export { Graph } from './Graph/Graph';
-export { PanelOptionSection } from './PanelOptionSection/PanelOptionSection';
-export { PanelOptionGrid } from './PanelOptionGrid/PanelOptionGrid';
+export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
+export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 90e0c7bbac2..9dfd3da47f9 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -2,8 +2,8 @@
   <div class="alert alert-error m-b-2" ng-show="ctrl.error">
     <i class="fa fa-warning"></i> {{ctrl.error}}
   </div>
-  <div class="panel-option-section">
-    <div class="panel-option-section__body">
+  <div class="panel-options-group">
+    <div class="panel-options-group__body">
       <div class="gf-form-group">
         <h4 class="section-heading">Rule</h4>
         <div class="gf-form-inline">
@@ -125,9 +125,9 @@
     </div>
   </div>
 
-  <div class="panel-option-section">
-    <div class="panel-option-section__header">Notifications</div>
-    <div class="panel-option-section__body">
+  <div class="panel-options-group">
+    <div class="panel-options-group__header">Notifications</div>
+    <div class="panel-options-group__body">
       <div class="gf-form-inline">
         <div class="gf-form">
           <span class="gf-form-label width-8">Send to</span>
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index b3fe3d4f40a..dbea7ed59bc 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { CustomScrollbar, PanelOptionSection } from '@grafana/ui';
+import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 interface Props {
@@ -96,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
   renderOpenView(view: EditorToolbarView) {
     return (
-      <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
+      <PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
         {view.render()}
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 4e581089629..47c4f358136 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
-import { PanelOptionSection } from '@grafana/ui';
+import { PanelOptionsGroup } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
       <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
-          <PanelOptionSection>
+          <PanelOptionsGroup>
             <div className="query-editor-rows">
               <div ref={element => (this.element = element)} />
 
@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> {
                 </div>
               </div>
             </div>
-          </PanelOptionSection>
-          <PanelOptionSection>
+          </PanelOptionsGroup>
+          <PanelOptionsGroup>
             <QueryOptions panel={panel} datasource={currentDS} />
-          </PanelOptionSection>
+          </PanelOptionsGroup>
         </>
       </EditorTabBody>
     );
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index b43a0aa406c..ad569a9ff90 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -111,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
       template +=
         `
-      <div class="panel-option-section" ng-cloak>` +
-        (i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
-        `<div class="panel-option-section__body">
+      <div class="panel-options-group" ng-cloak>` +
+        (i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        `<div class="panel-options-group__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
       </div>
diff --git a/public/app/features/panel/partials/general_tab.html b/public/app/features/panel/partials/general_tab.html
index 8881d2c28a4..ceae445f3ed 100644
--- a/public/app/features/panel/partials/general_tab.html
+++ b/public/app/features/panel/partials/general_tab.html
@@ -1,6 +1,6 @@
-<div class="panel-option-section">
+<div class="panel-options-group">
   <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
-  <div class="panel-option-section__body">
+  <div class="panel-options-group__body">
     <div class="section">
       <div class="gf-form">
         <span class="gf-form-label width-7">Title</span>
@@ -17,9 +17,9 @@
   </div>
 </div>
 
-<div class="panel-option-section">
-  <div class="panel-option-section__header">Repeating</div>
-  <div class="panel-option-section__body">
+<div class="panel-options-group">
+  <div class="panel-options-group__header">Repeating</div>
+  <div class="panel-options-group__body">
     <div class="section">
       <div class="gf-form">
         <span class="gf-form-label width-9">Repeat</span>
@@ -46,9 +46,9 @@
   </div>
 </div>
 
-<div class="panel-option-section">
-  <div class="panel-option-section__header">Drilldown Links</div>
-  <div class="panel-option-section__body">
+<div class="panel-options-group">
+  <div class="panel-options-group__header">Drilldown Links</div>
+  <div class="panel-options-group__body">
     <panel-links-editor panel="ctrl.panel"></panel-links-editor>
   </div>
 </div>
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index 39b24687197..f1f78ab1172 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
@@ -20,7 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
     const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
-      <PanelOptionSection title="Gauge">
+      <PanelOptionsGroup title="Gauge">
         <div className="gf-form">
           <Label width={8}>Min value</Label>
           <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
@@ -41,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index d9fba1411c3..a5334b0c6e1 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -5,7 +5,7 @@ import {
   PanelOptionsProps,
   ThresholdsEditor,
   Threshold,
-  PanelOptionGrid,
+  PanelOptionsGrid,
 } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
@@ -38,11 +38,11 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
     const { onChange, options } = this.props;
     return (
       <>
-        <PanelOptionGrid>
+        <PanelOptionsGrid>
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
-        </PanelOptionGrid>
+        </PanelOptionsGrid>
 
         <ValueMappings onChange={onChange} options={options} />
       </>
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx
index f63435480d6..9a3f87450f4 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/public/app/plugins/panel/gauge/ValueMappings.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionSection } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionsGroup } from '@grafana/ui';
 
 import MappingRow from './MappingRow';
 
@@ -75,7 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
     const { mappings } = this.state;
 
     return (
-      <PanelOptionSection title="Value Mappings">
+      <PanelOptionsGroup title="Value Mappings">
         <div>
           {mappings.length > 0 &&
             mappings.map((mapping, index) => (
@@ -93,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
           </div>
           <div className="add-mapping-row-label">Add mapping</div>
         </div>
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 5a8ffc5cd09..7cfbb382f7b 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Label } from 'app/core/components/Label/Label';
 import { Select} from '@grafana/ui';
@@ -40,7 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
     const { stat, unit, decimals, prefix, suffix } = this.props.options;
 
     return (
-      <PanelOptionSection title="Value">
+      <PanelOptionsGroup title="Value">
         <div className="gf-form">
           <Label width={labelWidth}>Stat</Label>
           <Select
@@ -72,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
           <Label width={labelWidth}>Suffix</Label>
           <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
         </div>
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 5640ff1775e..da6328b3c11 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -391,8 +391,8 @@ $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
 
-$panel-option-section-border: 1px solid $dark-3;
-$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
+$panel-options-group-border: 1px solid $dark-3;
+$panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
 
 $panel-grid-placeholder-bg: darken($blue, 47%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index be8df389c1b..cca183233be 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -399,8 +399,8 @@ $panel-editor-tabs-line-color: $dark-5;
 $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
 $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
 
-$panel-option-section-border: 1px solid $gray-6;
-$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
+$panel-options-group-border: 1px solid $gray-6;
+$panel-options-group-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
 
 $panel-grid-placeholder-bg: lighten($blue, 62%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue-light;

From 9e0f961fd5823f844bec81e3d4a4373acf3bbd2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 13 Jan 2019 12:51:21 +0100
Subject: [PATCH 291/352] updated snapshot

---
 .../gauge/__snapshots__/ValueMappings.test.tsx.snap   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap b/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
index 8a05cb7e91b..592b3326421 100644
--- a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
+++ b/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
@@ -1,14 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<div
-  className="section gf-form-group"
+<Component
+  title="Value Mappings"
 >
-  <h5
-    className="section-heading"
-  >
-    Value mappings
-  </h5>
   <div>
     <MappingRow
       key="Ok-0"
@@ -57,5 +52,5 @@ exports[`Render should render component 1`] = `
       Add mapping
     </div>
   </div>
-</div>
+</Component>
 `;

From 8def73ba13e5c7ad9b00d385873ee9352aff3cfd Mon Sep 17 00:00:00 2001
From: Sofia Papagiannaki <papagian@gmail.com>
Date: Sun, 13 Jan 2019 21:30:20 +0200
Subject: [PATCH 292/352] Fix Error 500 on unexisting
 /api/alert-notification/<id>

---
 pkg/api/alerting.go      | 4 ++++
 pkg/api/alerting_test.go | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/pkg/api/alerting.go b/pkg/api/alerting.go
index 66b3b504946..19fb4efd7e8 100644
--- a/pkg/api/alerting.go
+++ b/pkg/api/alerting.go
@@ -212,6 +212,10 @@ func GetAlertNotificationByID(c *m.ReqContext) Response {
 		return Error(500, "Failed to get alert notifications", err)
 	}
 
+	if query.Result == nil {
+		return Error(404, "Alert notification not found", nil)
+	}
+
 	return JSON(200, dtos.NewAlertNotification(query.Result))
 }
 
diff --git a/pkg/api/alerting_test.go b/pkg/api/alerting_test.go
index 331beeef5e4..168193e377f 100644
--- a/pkg/api/alerting_test.go
+++ b/pkg/api/alerting_test.go
@@ -119,6 +119,12 @@ func TestAlertingApiEndpoint(t *testing.T) {
 			So(getAlertsQuery.Limit, ShouldEqual, 5)
 			So(getAlertsQuery.Query, ShouldEqual, "alertQuery")
 		})
+
+		loggedInUserScenarioWithRole("When calling GET on", "GET", "/api/alert-notifications/1", "/alert-notifications/:notificationId", m.ROLE_ADMIN, func(sc *scenarioContext) {
+			sc.handlerFunc = GetAlertNotificationByID
+			sc.fakeReqWithParams("GET", sc.url, map[string]string{}).exec()
+			So(sc.resp.Code, ShouldEqual, 404)
+		})
 	})
 }
 

From 110ffb69dee696dca305167d0167c4c78462fde8 Mon Sep 17 00:00:00 2001
From: fredbcode <numsys@free.fr>
Date: Fri, 11 Jan 2019 08:56:50 +0100
Subject: [PATCH 293/352] Fix bug tls renegociation problem in Notification
 channel (webhook) #14800

---
 pkg/services/notifications/webhook.go | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pkg/services/notifications/webhook.go b/pkg/services/notifications/webhook.go
index dbe441c915e..2be3b145372 100644
--- a/pkg/services/notifications/webhook.go
+++ b/pkg/services/notifications/webhook.go
@@ -3,6 +3,7 @@ package notifications
 import (
 	"bytes"
 	"context"
+	"crypto/tls"
 	"fmt"
 	"io"
 	"io/ioutil"
@@ -26,6 +27,9 @@ type Webhook struct {
 }
 
 var netTransport = &http.Transport{
+	TLSClientConfig: &tls.Config{
+		Renegotiation: tls.RenegotiateFreelyAsClient,
+	},
 	Proxy: http.ProxyFromEnvironment,
 	Dial: (&net.Dialer{
 		Timeout:   30 * time.Second,

From 1fea09ba54c8e8ffab349ea337b9cfe58d62c214 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Sun, 13 Jan 2019 23:37:53 +0100
Subject: [PATCH 294/352] units: adds back velocity units. Fixes #14851

---
 packages/grafana-ui/src/utils/valueFormats/categories.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/grafana-ui/src/utils/valueFormats/categories.ts b/packages/grafana-ui/src/utils/valueFormats/categories.ts
index 98739343beb..4be76b13642 100644
--- a/packages/grafana-ui/src/utils/valueFormats/categories.ts
+++ b/packages/grafana-ui/src/utils/valueFormats/categories.ts
@@ -299,6 +299,15 @@ export const getCategories = (): ValueFormatCategory[] => [
       { name: 'writes/min (wpm)', id: 'wpm', fn: simpleCountUnit('wpm') },
     ],
   },
+  {
+    name: 'velocity',
+    formats: [
+      { name: 'metres/second (m/s)', id: 'velocityms', fn: toFixedUnit('m/s') },
+      { name: 'kilometers/hour (km/h)', id: 'velocitykmh', fn: toFixedUnit('km/h') },
+      { name: 'miles/hour (mph)', id: 'velocitymph', fn: toFixedUnit('mph') },
+      { name: 'knot (kn)', id: 'velocityknot', fn: toFixedUnit('kn') },
+    ]
+  },
   {
     name: 'volume',
     formats: [

From b3b1c21d772929cde9b5f6d5adcc8ee97b5608ec Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 14 Jan 2019 09:45:55 +0100
Subject: [PATCH 295/352] Fixed Gauge being cropped when resizing panel

Enabled import of SASS viariables into TS
---
 public/app/plugins/panel/gauge/GaugePanel.tsx | 10 +++++++++-
 public/sass/_variables.scss                   |  9 ++++++++-
 public/sass/_variables.scss.d.ts              |  8 ++++++++
 tsconfig.json                                 |  3 ++-
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 public/sass/_variables.scss.d.ts

diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 79220daf37a..3aedfcf1f67 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -3,6 +3,7 @@ import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
 
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import Gauge from 'app/viz/Gauge';
+import variables from 'sass/_variables.scss';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
@@ -15,6 +16,13 @@ export class GaugePanel extends PureComponent<Props> {
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
+    return (
+      <Gauge
+        timeSeries={vmSeries}
+        {...this.props.options}
+        width={width - 2 * variables.panelHorizontalPadding}
+        height={height - variables.panelVerticalPadding}
+      />
+    );
   }
 }
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 111ee870658..a10fefadf10 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -189,7 +189,9 @@ $side-menu-width: 60px;
 // dashboard
 $panel-margin: 10px;
 $dashboard-padding: $panel-margin * 2;
-$panel-padding: 0px 10px 5px 10px;
+$panel-horizontal-padding: 10;
+$panel-vertical-padding: 5;
+$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px;
 
 // tabs
 $tabs-padding: 10px 15px 9px;
@@ -202,3 +204,8 @@ $external-services: (
     oauth: (bgColor: #262628, borderColor: #393939, icon: '')
   )
   !default;
+
+:export {
+  panelHorizontalPadding: $panel-horizontal-padding;
+  panelVerticalPadding: $panel-vertical-padding;
+}
diff --git a/public/sass/_variables.scss.d.ts b/public/sass/_variables.scss.d.ts
new file mode 100644
index 00000000000..f3de2340419
--- /dev/null
+++ b/public/sass/_variables.scss.d.ts
@@ -0,0 +1,8 @@
+export interface GrafanaVariables {
+  'panelHorizontalPadding': number;
+  'panelVerticalPadding': number;
+}
+
+declare const variables: GrafanaVariables;
+
+export default variables;
diff --git a/tsconfig.json b/tsconfig.json
index 3c8c41f34e2..5772b931820 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,7 +28,8 @@
     "pretty": true,
     "typeRoots": ["node_modules/@types", "types"],
     "paths": {
-      "app": ["app"]
+      "app": ["app"],
+      "sass": ["sass"]
     }
   },
   "include": ["public/app/**/*.ts", "public/app/**/*.tsx", "public/test/**/*.ts"]

From b1f5a232da7b9acb6026fec87f5bba6cbd2180c3 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Mon, 14 Jan 2019 13:42:58 +0100
Subject: [PATCH 296/352] build: build specific enterprise version when
 releasing.

---
 scripts/build/prepare-enterprise.sh | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scripts/build/prepare-enterprise.sh b/scripts/build/prepare-enterprise.sh
index 0e1c3da2dbd..a2ab269d1cb 100755
--- a/scripts/build/prepare-enterprise.sh
+++ b/scripts/build/prepare-enterprise.sh
@@ -1,6 +1,15 @@
 #!/bin/bash
 
 cd ..
-git clone -b master --single-branch git@github.com:grafana/grafana-enterprise.git --depth 1
+
+
+if [ -z "$CIRCLE_TAG" ]; then
+  _target="master"
+else
+  _target="$CIRCLE_TAG"
+fi
+
+git clone -b "$_target" --single-branch git@github.com:grafana/grafana-enterprise.git --depth 1
+
 cd grafana-enterprise
 ./build.sh

From 37c5ced009bebace09bdd057dc5a5558f03d7f20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 14 Jan 2019 14:03:08 +0100
Subject: [PATCH 297/352] Updated singlestat to use new value format function
 syntax and capitalized unit categories, fixes #12871

---
 .../src/utils/valueFormats/categories.ts      | 48 +++++++++----------
 public/app/plugins/panel/singlestat/module.ts | 10 +++-
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/utils/valueFormats/categories.ts b/packages/grafana-ui/src/utils/valueFormats/categories.ts
index 4be76b13642..d7410c22276 100644
--- a/packages/grafana-ui/src/utils/valueFormats/categories.ts
+++ b/packages/grafana-ui/src/utils/valueFormats/categories.ts
@@ -22,7 +22,7 @@ import { binarySIPrefix, currency, decimalSIPrefix } from './symbolFormatters';
 
 export const getCategories = (): ValueFormatCategory[] => [
   {
-    name: 'none',
+    name: 'Misc',
     formats: [
       { name: 'none', id: 'none', fn: toFixed },
       {
@@ -41,7 +41,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'acceleration',
+    name: 'Acceleration',
     formats: [
       { name: 'Meters/sec²', id: 'accMS2', fn: toFixedUnit('m/sec²') },
       { name: 'Feet/sec²', id: 'accFS2', fn: toFixedUnit('f/sec²') },
@@ -49,7 +49,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'angle',
+    name: 'Angle',
     formats: [
       { name: 'Degrees (°)', id: 'degree', fn: toFixedUnit('°') },
       { name: 'Radians', id: 'radian', fn: toFixedUnit('rad') },
@@ -57,7 +57,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'area',
+    name: 'Area',
     formats: [
       { name: 'Square Meters (m²)', id: 'areaM2', fn: toFixedUnit('m²') },
       { name: 'Square Feet (ft²)', id: 'areaF2', fn: toFixedUnit('ft²') },
@@ -65,7 +65,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'computation throughput',
+    name: 'Computation',
     formats: [
       { name: 'FLOP/s', id: 'flops', fn: decimalSIPrefix('FLOP/s') },
       { name: 'MFLOP/s', id: 'mflops', fn: decimalSIPrefix('FLOP/s', 2) },
@@ -76,7 +76,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'concentration',
+    name: 'Concentration',
     formats: [
       { name: 'parts-per-million (ppm)', id: 'ppm', fn: toFixedUnit('ppm') },
       { name: 'parts-per-billion (ppb)', id: 'conppb', fn: toFixedUnit('ppb') },
@@ -93,7 +93,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'currency',
+    name: 'Currency',
     formats: [
       { name: 'Dollars ($)', id: 'currencyUSD', fn: currency('$') },
       { name: 'Pounds (£)', id: 'currencyGBP', fn: currency('£') },
@@ -113,7 +113,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'data (IEC)',
+    name: 'Data (IEC)',
     formats: [
       { name: 'bits', id: 'bits', fn: binarySIPrefix('b') },
       { name: 'bytes', id: 'bytes', fn: binarySIPrefix('B') },
@@ -123,7 +123,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'data (Metric)',
+    name: 'Data (Metric)',
     formats: [
       { name: 'bits', id: 'decbits', fn: decimalSIPrefix('d') },
       { name: 'bytes', id: 'decbytes', fn: decimalSIPrefix('B') },
@@ -133,7 +133,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'data rate',
+    name: 'Data Rate',
     formats: [
       { name: 'packets/sec', id: 'pps', fn: decimalSIPrefix('pps') },
       { name: 'bits/sec', id: 'bps', fn: decimalSIPrefix('bps') },
@@ -147,7 +147,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'date & time',
+    name: 'Date & Time',
     formats: [
       { name: 'YYYY-MM-DD HH:mm:ss', id: 'dateTimeAsIso', fn: dateTimeAsIso },
       { name: 'DD/MM/YYYY h:mm:ss a', id: 'dateTimeAsUS', fn: dateTimeAsUS },
@@ -155,7 +155,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'energy',
+    name: 'Energy',
     formats: [
       { name: 'Watt (W)', id: 'watt', fn: decimalSIPrefix('W') },
       { name: 'Kilowatt (kW)', id: 'kwatt', fn: decimalSIPrefix('W', 1) },
@@ -182,7 +182,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'flow',
+    name: 'Flow',
     formats: [
       { name: 'Gallons/min (gpm)', id: 'flowgpm', fn: toFixedUnit('gpm') },
       { name: 'Cubic meters/sec (cms)', id: 'flowcms', fn: toFixedUnit('cms') },
@@ -194,7 +194,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'force',
+    name: 'Force',
     formats: [
       { name: 'Newton-meters (Nm)', id: 'forceNm', fn: decimalSIPrefix('Nm') },
       { name: 'Kilonewton-meters (kNm)', id: 'forcekNm', fn: decimalSIPrefix('Nm', 1) },
@@ -203,7 +203,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'hash rate',
+    name: 'Hash Rate',
     formats: [
       { name: 'hashes/sec', id: 'Hs', fn: decimalSIPrefix('H/s') },
       { name: 'kilohashes/sec', id: 'KHs', fn: decimalSIPrefix('H/s', 1) },
@@ -215,7 +215,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'mass',
+    name: 'Mass',
     formats: [
       { name: 'milligram (mg)', id: 'massmg', fn: decimalSIPrefix('g', -1) },
       { name: 'gram (g)', id: 'massg', fn: decimalSIPrefix('g') },
@@ -234,7 +234,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'pressure',
+    name: 'Pressure',
     formats: [
       { name: 'Millibars', id: 'pressurembar', fn: decimalSIPrefix('bar', -1) },
       { name: 'Bars', id: 'pressurebar', fn: decimalSIPrefix('bar') },
@@ -246,7 +246,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'radiation',
+    name: 'Radiation',
     formats: [
       { name: 'Becquerel (Bq)', id: 'radbq', fn: decimalSIPrefix('Bq') },
       { name: 'curie (Ci)', id: 'radci', fn: decimalSIPrefix('Ci') },
@@ -260,7 +260,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'temperature',
+    name: 'Temperature',
     formats: [
       { name: 'Celsius (°C)', id: 'celsius', fn: toFixedUnit('°C') },
       { name: 'Farenheit (°F)', id: 'farenheit', fn: toFixedUnit('°F') },
@@ -268,7 +268,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'time',
+    name: 'Time',
     formats: [
       { name: 'Hertz (1/s)', id: 'hertz', fn: decimalSIPrefix('Hz') },
       { name: 'nanoseconds (ns)', id: 'ns', fn: toNanoSeconds },
@@ -287,7 +287,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'throughput',
+    name: 'Throughput',
     formats: [
       { name: 'ops/sec (ops)', id: 'ops', fn: simpleCountUnit('ops') },
       { name: 'requests/sec (rps)', id: 'reqps', fn: simpleCountUnit('reqps') },
@@ -300,7 +300,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'velocity',
+    name: 'Velocity',
     formats: [
       { name: 'metres/second (m/s)', id: 'velocityms', fn: toFixedUnit('m/s') },
       { name: 'kilometers/hour (km/h)', id: 'velocitykmh', fn: toFixedUnit('km/h') },
@@ -309,7 +309,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ]
   },
   {
-    name: 'volume',
+    name: 'Volume',
     formats: [
       { name: 'millilitre (mL)', id: 'mlitre', fn: decimalSIPrefix('L', -1) },
       { name: 'litre (L)', id: 'litre', fn: decimalSIPrefix('L') },
@@ -318,5 +318,5 @@ export const getCategories = (): ValueFormatCategory[] => [
       { name: 'cubic decimetre', id: 'dm3', fn: toFixedUnit('dm³') },
       { name: 'gallons', id: 'gallons', fn: toFixedUnit('gal') },
     ],
-  },
+  }
 ];
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index f83151a0c46..b8e24616f0a 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -312,14 +312,20 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         const formatFunc = kbn.valueFormats[this.panel.format];
         data.value = lastPoint[1];
         data.valueRounded = data.value;
-        data.valueFormatted = formatFunc(data.value, this.dashboard.isTimezoneUtc());
+        data.valueFormatted = formatFunc(data.value, 0, 0, this.dashboard.isTimezoneUtc());
       } else {
         data.value = this.series[0].stats[this.panel.valueName];
         data.flotpairs = this.series[0].flotpairs;
 
         const decimalInfo = this.getDecimalsForValue(data.value);
         const formatFunc = kbn.valueFormats[this.panel.format];
-        data.valueFormatted = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
+
+        data.valueFormatted = formatFunc(
+          data.value,
+          decimalInfo.decimals,
+          decimalInfo.scaledDecimals,
+          this.dashboard.isTimezoneUtc()
+        );
         data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
       }
 

From 0c8f0416a0696545f7ae43efcda075bd537b96e7 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 14 Jan 2019 14:47:41 +0100
Subject: [PATCH 298/352] Move panel width/height calculation to PanelChrome

---
 public/app/features/dashboard/dashgrid/PanelChrome.tsx | 6 ++++--
 public/app/plugins/panel/gauge/GaugePanel.tsx          | 5 ++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 84e11511453..46534cac065 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -19,6 +19,8 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types';
 import { TimeRange } from '@grafana/ui';
 
+import variables from 'sass/_variables.scss';
+
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
@@ -122,8 +124,8 @@ export class PanelChrome extends PureComponent<Props, State> {
                         timeSeries={timeSeries}
                         timeRange={timeRange}
                         options={panel.getOptions(plugin.exports.PanelDefaults)}
-                        width={width}
-                        height={height - PANEL_HEADER_HEIGHT}
+                        width={width - 2 * variables.panelHorizontalPadding }
+                        height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
                         renderCounter={renderCounter}
                       />
                     </div>
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 3aedfcf1f67..38a88428be7 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -3,7 +3,6 @@ import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
 
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import Gauge from 'app/viz/Gauge';
-import variables from 'sass/_variables.scss';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
@@ -20,8 +19,8 @@ export class GaugePanel extends PureComponent<Props> {
       <Gauge
         timeSeries={vmSeries}
         {...this.props.options}
-        width={width - 2 * variables.panelHorizontalPadding}
-        height={height - variables.panelVerticalPadding}
+        width={width}
+        height={height}
       />
     );
   }

From b9a3239edbb379202192b6f14b689935b09c240e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 14 Jan 2019 15:01:47 +0100
Subject: [PATCH 299/352] removed old unused angular stuff, rename

---
 public/app/features/plugins/all.ts            |   3 +-
 .../features/plugins/ds_dashboards_ctrl.ts    |  42 ----
 public/app/features/plugins/ds_edit_ctrl.ts   | 223 ------------------
 ...ader.tsx => variableQueryEditorLoader.tsx} |   0
 4 files changed, 1 insertion(+), 267 deletions(-)
 delete mode 100644 public/app/features/plugins/ds_dashboards_ctrl.ts
 delete mode 100644 public/app/features/plugins/ds_edit_ctrl.ts
 rename public/app/features/plugins/{VariableQueryComponentLoader.tsx => variableQueryEditorLoader.tsx} (100%)

diff --git a/public/app/features/plugins/all.ts b/public/app/features/plugins/all.ts
index 757a9a2f491..4845a3a6cb8 100644
--- a/public/app/features/plugins/all.ts
+++ b/public/app/features/plugins/all.ts
@@ -1,7 +1,6 @@
 import './plugin_edit_ctrl';
 import './plugin_page_ctrl';
 import './import_list/import_list';
-import './ds_edit_ctrl';
 import './datasource_srv';
 import './plugin_component';
-import './VariableQueryComponentLoader';
+import './variableQueryEditorLoader';
diff --git a/public/app/features/plugins/ds_dashboards_ctrl.ts b/public/app/features/plugins/ds_dashboards_ctrl.ts
deleted file mode 100644
index 71639702e41..00000000000
--- a/public/app/features/plugins/ds_dashboards_ctrl.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { coreModule } from 'app/core/core';
-import { store } from 'app/store/store';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { buildNavModel } from './state/navModel';
-
-export class DataSourceDashboardsCtrl {
-  datasourceMeta: any;
-  navModel: any;
-  current: any;
-
-  /** @ngInject */
-  constructor(private backendSrv, private $routeParams) {
-    const state = store.getState();
-    this.navModel = getNavModel(state.navIndex, 'datasources');
-
-    if (this.$routeParams.id) {
-      this.getDatasourceById(this.$routeParams.id);
-    }
-  }
-
-  getDatasourceById(id) {
-    this.backendSrv
-      .get('/api/datasources/' + id)
-      .then(ds => {
-        this.current = ds;
-      })
-      .then(this.getPluginInfo.bind(this));
-  }
-
-  updateNav() {
-    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-dashboards');
-  }
-
-  getPluginInfo() {
-    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
-      this.datasourceMeta = pluginInfo;
-      this.updateNav();
-    });
-  }
-}
-
-coreModule.controller('DataSourceDashboardsCtrl', DataSourceDashboardsCtrl);
diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts
deleted file mode 100644
index d8e9f7d8e53..00000000000
--- a/public/app/features/plugins/ds_edit_ctrl.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import _ from 'lodash';
-import config from 'app/core/config';
-import { coreModule, appEvents } from 'app/core/core';
-import { store } from 'app/store/store';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { buildNavModel } from './state/navModel';
-
-let datasourceTypes = [];
-
-const defaults = {
-  name: '',
-  type: 'graphite',
-  url: '',
-  access: 'proxy',
-  jsonData: {},
-  secureJsonFields: {},
-  secureJsonData: {},
-};
-
-let datasourceCreated = false;
-
-export class DataSourceEditCtrl {
-  isNew: boolean;
-  datasources: any[];
-  current: any;
-  types: any;
-  testing: any;
-  datasourceMeta: any;
-  editForm: any;
-  gettingStarted: boolean;
-  navModel: any;
-
-  /** @ngInject */
-  constructor(private $q, private backendSrv, private $routeParams, private $location, private datasourceSrv) {
-    const state = store.getState();
-    this.navModel = getNavModel(state.navIndex, 'datasources');
-    this.datasources = [];
-
-    this.loadDatasourceTypes().then(() => {
-      if (this.$routeParams.id) {
-        this.getDatasourceById(this.$routeParams.id);
-      } else {
-        this.initNewDatasourceModel();
-      }
-    });
-  }
-
-  initNewDatasourceModel() {
-    this.isNew = true;
-    this.current = _.cloneDeep(defaults);
-
-    // We are coming from getting started
-    if (this.$location.search().gettingstarted) {
-      this.gettingStarted = true;
-      this.current.isDefault = true;
-    }
-
-    this.typeChanged();
-  }
-
-  loadDatasourceTypes() {
-    if (datasourceTypes.length > 0) {
-      this.types = datasourceTypes;
-      return this.$q.when(null);
-    }
-
-    return this.backendSrv.get('/api/plugins', { enabled: 1, type: 'datasource' }).then(plugins => {
-      datasourceTypes = plugins;
-      this.types = plugins;
-    });
-  }
-
-  getDatasourceById(id) {
-    this.backendSrv.get('/api/datasources/' + id).then(ds => {
-      this.isNew = false;
-      this.current = ds;
-
-      if (datasourceCreated) {
-        datasourceCreated = false;
-        this.testDatasource();
-      }
-
-      return this.typeChanged();
-    });
-  }
-
-  userChangedType() {
-    // reset model but keep name & default flag
-    this.current = _.defaults(
-      {
-        id: this.current.id,
-        name: this.current.name,
-        isDefault: this.current.isDefault,
-        type: this.current.type,
-      },
-      _.cloneDeep(defaults)
-    );
-    this.typeChanged();
-  }
-
-  updateNav() {
-    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-settings');
-  }
-
-  typeChanged() {
-    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
-      this.datasourceMeta = pluginInfo;
-      this.updateNav();
-    });
-  }
-
-  updateFrontendSettings() {
-    return this.backendSrv.get('/api/frontend/settings').then(settings => {
-      config.datasources = settings.datasources;
-      config.defaultDatasource = settings.defaultDatasource;
-      this.datasourceSrv.init();
-    });
-  }
-
-  testDatasource() {
-    return this.datasourceSrv.get(this.current.name).then(datasource => {
-      if (!datasource.testDatasource) {
-        return;
-      }
-
-      this.testing = { done: false, status: 'error' };
-
-      // make test call in no backend cache context
-      return this.backendSrv
-        .withNoBackendCache(() => {
-          return datasource
-            .testDatasource()
-            .then(result => {
-              this.testing.message = result.message;
-              this.testing.status = result.status;
-            })
-            .catch(err => {
-              if (err.statusText) {
-                this.testing.message = 'HTTP Error ' + err.statusText;
-              } else {
-                this.testing.message = err.message;
-              }
-            });
-        })
-        .finally(() => {
-          this.testing.done = true;
-        });
-    });
-  }
-
-  saveChanges() {
-    if (!this.editForm.$valid) {
-      return;
-    }
-
-    if (this.current.readOnly) {
-      return;
-    }
-
-    if (this.current.id) {
-      return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(result => {
-        this.current = result.datasource;
-        this.updateNav();
-        return this.updateFrontendSettings().then(() => {
-          return this.testDatasource();
-        });
-      });
-    } else {
-      return this.backendSrv.post('/api/datasources', this.current).then(result => {
-        this.current = result.datasource;
-        this.updateFrontendSettings();
-
-        datasourceCreated = true;
-        this.$location.path('datasources/edit/' + result.id);
-      });
-    }
-  }
-
-  confirmDelete() {
-    this.backendSrv.delete('/api/datasources/' + this.current.id).then(() => {
-      this.$location.path('datasources');
-    });
-  }
-
-  delete(s) {
-    appEvents.emit('confirm-modal', {
-      title: 'Delete',
-      text: 'Are you sure you want to delete this datasource?',
-      yesText: 'Delete',
-      icon: 'fa-trash',
-      onConfirm: () => {
-        this.confirmDelete();
-      },
-    });
-  }
-}
-
-coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);
-
-coreModule.directive('datasourceHttpSettings', () => {
-  return {
-    scope: {
-      current: '=',
-      suggestUrl: '@',
-      noDirectAccess: '@',
-    },
-    templateUrl: 'public/app/features/plugins/partials/ds_http_settings.html',
-    link: {
-      pre: ($scope, elem, attrs) => {
-        // do not show access option if direct access is disabled
-        $scope.showAccessOption = $scope.noDirectAccess !== 'true';
-        $scope.showAccessHelp = false;
-        $scope.toggleAccessHelp = () => {
-          $scope.showAccessHelp = !$scope.showAccessHelp;
-        };
-
-        $scope.getSuggestUrls = () => {
-          return [$scope.suggestUrl];
-        };
-      },
-    },
-  };
-});
diff --git a/public/app/features/plugins/VariableQueryComponentLoader.tsx b/public/app/features/plugins/variableQueryEditorLoader.tsx
similarity index 100%
rename from public/app/features/plugins/VariableQueryComponentLoader.tsx
rename to public/app/features/plugins/variableQueryEditorLoader.tsx

From 827a292777aab76b28f17fb9c5fd5f7e74805fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 14 Jan 2019 15:17:48 +0100
Subject: [PATCH 300/352] Moved panel editing components to it's own folder

---
 public/app/features/alerting/AlertTab.tsx     |  2 +-
 .../dashboard/dashgrid/DashboardPanel.tsx     |  2 +-
 .../dashboard/dashgrid/KeyboardNavigation.tsx | 71 -------------------
 .../dashboard/dashgrid/PanelLoader.ts         | 31 --------
 .../DataSourceOption.tsx                      |  0
 .../EditorTabBody.tsx                         |  0
 .../{dashgrid => panel_editor}/GeneralTab.tsx |  0
 .../PanelEditor.tsx                           |  0
 .../{dashgrid => panel_editor}/QueriesTab.tsx |  0
 .../QueryInspector.tsx                        |  0
 .../QueryOptions.tsx                          |  0
 .../VisualizationTab.tsx                      |  0
 .../VizTypePicker.tsx                         |  0
 .../VizTypePickerPlugin.tsx                   |  0
 14 files changed, 2 insertions(+), 104 deletions(-)
 delete mode 100644 public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
 delete mode 100644 public/app/features/dashboard/dashgrid/PanelLoader.ts
 rename public/app/features/dashboard/{dashgrid => panel_editor}/DataSourceOption.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/EditorTabBody.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/GeneralTab.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/PanelEditor.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/QueriesTab.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/QueryInspector.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/QueryOptions.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/VisualizationTab.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/VizTypePicker.tsx (100%)
 rename public/app/features/dashboard/{dashgrid => panel_editor}/VizTypePickerPlugin.tsx (100%)

diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index 2a1b3d12ecf..549d84c2808 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -6,7 +6,7 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
 import appEvents from 'app/core/app_events';
 
 // Components
-import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
 import 'app/features/alerting/AlertTabCtrl';
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 9de298e0799..f0e97162d43 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -9,7 +9,7 @@ import { AddPanelPanel } from './AddPanelPanel';
 import { getPanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
 import { PanelChrome } from './PanelChrome';
-import { PanelEditor } from './PanelEditor';
+import { PanelEditor } from '../panel_editor/PanelEditor';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
diff --git a/public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx b/public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
deleted file mode 100644
index dab8371c925..00000000000
--- a/public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { KeyboardEvent, Component } from 'react';
-
-interface State {
-  selected: number;
-}
-
-export interface KeyboardNavigationProps {
-  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter: (select: number) => void;
-  selected: number;
-}
-
-interface Props {
-  render: (injectProps: any) => void;
-}
-
-class KeyboardNavigation extends Component<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selected: 0,
-    };
-  }
-
-  goToNext = (maxSelectedIndex: number) => {
-    const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  goToPrev = (maxSelectedIndex: number) => {
-    const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
-    if (evt.key === 'ArrowDown') {
-      evt.preventDefault();
-      this.goToNext(maxSelectedIndex);
-    }
-    if (evt.key === 'ArrowUp') {
-      evt.preventDefault();
-      this.goToPrev(maxSelectedIndex);
-    }
-    if (evt.key === 'Enter' && onEnterAction) {
-      onEnterAction();
-    }
-  };
-
-  onMouseEnter = (mouseEnterIndex: number) => {
-    this.setState({
-      selected: mouseEnterIndex,
-    });
-  };
-
-  render() {
-    const injectProps = {
-      onKeyDown: this.onKeyDown,
-      onMouseEnter: this.onMouseEnter,
-      selected: this.state.selected,
-    };
-
-    return <>{this.props.render({ ...injectProps })}</>;
-  }
-}
-
-export default KeyboardNavigation;
diff --git a/public/app/features/dashboard/dashgrid/PanelLoader.ts b/public/app/features/dashboard/dashgrid/PanelLoader.ts
deleted file mode 100644
index c654b756085..00000000000
--- a/public/app/features/dashboard/dashgrid/PanelLoader.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import angular from 'angular';
-import coreModule from 'app/core/core_module';
-
-export interface AttachedPanel {
-  destroy();
-}
-
-export class PanelLoader {
-  /** @ngInject */
-  constructor(private $compile, private $rootScope) {}
-
-  load(elem, panel, dashboard): AttachedPanel {
-    const template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
-    const panelScope = this.$rootScope.$new();
-    panelScope.panel = panel;
-    panelScope.dashboard = dashboard;
-
-    const compiledElem = this.$compile(template)(panelScope);
-    const rootNode = angular.element(elem);
-    rootNode.append(compiledElem);
-
-    return {
-      destroy: () => {
-        panelScope.$destroy();
-        compiledElem.remove();
-      },
-    };
-  }
-}
-
-coreModule.service('panelLoader', PanelLoader);
diff --git a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx b/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/DataSourceOption.tsx
rename to public/app/features/dashboard/panel_editor/DataSourceOption.tsx
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/EditorTabBody.tsx
rename to public/app/features/dashboard/panel_editor/EditorTabBody.tsx
diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/panel_editor/GeneralTab.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/GeneralTab.tsx
rename to public/app/features/dashboard/panel_editor/GeneralTab.tsx
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/panel_editor/PanelEditor.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/PanelEditor.tsx
rename to public/app/features/dashboard/panel_editor/PanelEditor.tsx
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/QueriesTab.tsx
rename to public/app/features/dashboard/panel_editor/QueriesTab.tsx
diff --git a/public/app/features/dashboard/dashgrid/QueryInspector.tsx b/public/app/features/dashboard/panel_editor/QueryInspector.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/QueryInspector.tsx
rename to public/app/features/dashboard/panel_editor/QueryInspector.tsx
diff --git a/public/app/features/dashboard/dashgrid/QueryOptions.tsx b/public/app/features/dashboard/panel_editor/QueryOptions.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/QueryOptions.tsx
rename to public/app/features/dashboard/panel_editor/QueryOptions.tsx
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/VisualizationTab.tsx
rename to public/app/features/dashboard/panel_editor/VisualizationTab.tsx
diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/VizTypePicker.tsx
rename to public/app/features/dashboard/panel_editor/VizTypePicker.tsx
diff --git a/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
similarity index 100%
rename from public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx
rename to public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx

From 7da544a52b97dc278cab9a1f0486fd7d3e0dddb3 Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Mon, 14 Jan 2019 16:03:30 +0100
Subject: [PATCH 301/352] changelog: add notes about closing #5968

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46b7381cba1..4f7f21a2a03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### New Features
 * **Alerting**: Adds support for Google Hangouts Chat notifications [#11221](https://github.com/grafana/grafana/issues/11221), thx [@PatrickSchuster](https://github.com/PatrickSchuster)
+* **Elasticsearch**: Support bucket script pipeline aggregations [#5968](https://github.com/grafana/grafana/issues/5968)
 * **Snapshots**: Enable deletion of public snapshot [#14109](https://github.com/grafana/grafana/issues/14109)
 
 ### Minor

From 7b43b9e2727b277cafef6bbad9f59d730fce0342 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Mon, 14 Jan 2019 16:23:48 +0100
Subject: [PATCH 302/352] build: fixes release problems.

---
 .circleci/config.yml              | 4 ++--
 scripts/build/load-signing-key.sh | 0
 2 files changed, 2 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 scripts/build/load-signing-key.sh

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7f9c40bd968..ec1fcfb411f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -367,7 +367,7 @@ jobs:
           command: './scripts/build/publish.sh --enterprise'
       - run:
           name: Load GPG private key
-          comand: './scripts/build/load-signing-key.sh'
+          command: './scripts/build/load-signing-key.sh'
       - run:
           name: Update Debian repository
           command: './scripts/build/update_repo/update-deb.sh "enterprise" "$GPG_KEY_PASSWORD" "$CIRCLE_TAG"'
@@ -430,7 +430,7 @@ jobs:
           command: './scripts/build/publish.sh'
       - run:
           name: Load GPG private key
-          comand: './scripts/build/load-signing-key.sh'
+          command: './scripts/build/load-signing-key.sh'
       - run:
           name: Update Debian repository
           command: './scripts/build/update_repo/update-deb.sh "oss" "$GPG_KEY_PASSWORD" "$CIRCLE_TAG"'
diff --git a/scripts/build/load-signing-key.sh b/scripts/build/load-signing-key.sh
old mode 100644
new mode 100755

From 8880829eda8d9bae91d2517e044eec1f791cbcd1 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Fri, 11 Jan 2019 14:40:49 +0100
Subject: [PATCH 303/352] avoid infinite loop in the dashboard provisioner

if one dashboard with an uid is refered to by two
provsioners each provsioner overwrite each other.
filling up dashboard_versions quite fast if using
default settings.

ref #12864
---
 devenv/dashboards.yaml                        |    2 +-
 .../panel_tests_graph.json                    | 1674 +++++++++
 .../panel_tests_graph_time_regions.json       |  510 +++
 .../panel_tests_polystat.json                 | 3342 +++++++++++++++++
 .../provisioning/dashboards/config_reader.go  |    3 +-
 .../provisioning/dashboards/file_reader.go    |    3 +-
 .../dashboards/file_reader_test.go            |   49 +-
 .../sqlstore/dashboard_provisioning.go        |    2 +-
 8 files changed, 5577 insertions(+), 8 deletions(-)
 create mode 100644 devenv/dev-dashboards-without-uid/panel_tests_graph.json
 create mode 100644 devenv/dev-dashboards-without-uid/panel_tests_graph_time_regions.json
 create mode 100644 devenv/dev-dashboards-without-uid/panel_tests_polystat.json

diff --git a/devenv/dashboards.yaml b/devenv/dashboards.yaml
index 226c1a8b335..c59d7127769 100644
--- a/devenv/dashboards.yaml
+++ b/devenv/dashboards.yaml
@@ -4,6 +4,6 @@ providers:
  - name: 'gdev dashboards'
    folder: 'gdev dashboards'
    type: file
+   updateIntervalSeconds: 15
    options:
      path: devenv/dev-dashboards
-
diff --git a/devenv/dev-dashboards-without-uid/panel_tests_graph.json b/devenv/dev-dashboards-without-uid/panel_tests_graph.json
new file mode 100644
index 00000000000..c47a932ce7f
--- /dev/null
+++ b/devenv/dev-dashboards-without-uid/panel_tests_graph.json
@@ -0,0 +1,1674 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "links": [],
+  "panels": [
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "connected",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenario": "random_walk",
+          "scenarioId": "no_data_points",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "No Data Points Warning",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 8,
+        "y": 0
+      },
+      "id": 2,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "connected",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenario": "random_walk",
+          "scenarioId": "datapoints_outside_range",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Datapoints Outside Range Warning",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 0
+      },
+      "id": 3,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "connected",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenario": "random_walk",
+          "scenarioId": "random_walk",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Random walk series",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 16,
+        "x": 0,
+        "y": 7
+      },
+      "id": 4,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "connected",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenario": "random_walk",
+          "scenarioId": "random_walk",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": "2s",
+      "timeShift": null,
+      "title": "Millisecond res x-axis and tooltip",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Just verify that the tooltip time has millisecond resolution ",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 7
+      },
+      "id": 6,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 9,
+        "w": 16,
+        "x": 0,
+        "y": 14
+      },
+      "id": 5,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "connected",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [
+        {
+          "alias": "B-series",
+          "yaxis": 2
+        }
+      ],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "2000,3000,4000,1000,3000,10000",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "2 yaxis and axis labels",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "percent",
+          "label": "Perecent",
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": "Pressure",
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Verify that axis labels look ok",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 9,
+        "w": 8,
+        "x": 16,
+        "y": 14
+      },
+      "id": 7,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 0,
+        "y": 23
+      },
+      "id": 8,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "connected",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,null,null,null,null,null,null,100,10,10,20,30,40,10",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "null value connected",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 8,
+        "y": 23
+      },
+      "id": 10,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null as zero",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,null,null,null,null,null,null,100,10,10,20,30,40,10",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "null value null as zero",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Should be a long line connecting the null region in the `connected`  mode, and in zero it should just be a line with zero value at the null points. ",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 23
+      },
+      "id": 13,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 16,
+        "x": 0,
+        "y": 30
+      },
+      "id": 9,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [
+        {
+          "alias": "B-series",
+          "zindex": -3
+        }
+      ],
+      "spaceLength": 10,
+      "stack": true,
+      "steppedLine": false,
+      "targets": [
+        {
+          "hide": false,
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,null,null,null,null,null,null,100,10,10,20,30,40,10",
+          "target": ""
+        },
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,10,20,30,40,40,40,100,10,20,20",
+          "target": ""
+        },
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,10,20,30,40,40,40,100,10,20,20",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Stacking value ontop of nulls",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Stacking values on top of nulls, should treat the null values as zero. ",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 30
+      },
+      "id": 14,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 16,
+        "x": 0,
+        "y": 37
+      },
+      "id": 12,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [
+        {
+          "alias": "B-series",
+          "zindex": -3
+        }
+      ],
+      "spaceLength": 10,
+      "stack": true,
+      "steppedLine": false,
+      "targets": [
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,40,null,null,null,null,null,null,100,10,10,20,30,40,10",
+          "target": ""
+        },
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,40,null,null,null,null,null,null,100,10,10,20,30,40,10",
+          "target": ""
+        },
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,40,null,null,null,null,null,null,100,10,10,20,30,40,10",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Stacking all series null segment",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Stacking when all values are null should leave a gap in the graph",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 37
+      },
+      "id": 15,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 0,
+      "gridPos": {
+        "h": 7,
+        "w": 16,
+        "x": 0,
+        "y": 44
+      },
+      "id": 21,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [
+        {
+          "alias": "C-series",
+          "steppedLine": true
+        }
+      ],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,null,40,null,90,null,null,100,null,null,100,null,null,80,null",
+          "target": ""
+        },
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "20,null40,null,null,50,null,70,null,100,null,10,null,30,null",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Null between points",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Left is showing null between values for a normal line graph and staircase graph. Orphaned data points should be rendered as points",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 44
+      },
+      "id": 22,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "decimals": 3,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 24,
+        "x": 0,
+        "y": 51
+      },
+      "id": 20,
+      "legend": {
+        "alignAsTable": true,
+        "avg": true,
+        "current": true,
+        "max": true,
+        "min": true,
+        "show": true,
+        "total": true,
+        "values": true
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Legend Table Single Series Should Take Minimum Height",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "decimals": 3,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 12,
+        "x": 0,
+        "y": 58
+      },
+      "id": 16,
+      "legend": {
+        "alignAsTable": true,
+        "avg": true,
+        "current": true,
+        "max": true,
+        "min": true,
+        "show": true,
+        "total": true,
+        "values": true
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "D",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Legend Table No Scroll Visible",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "decimals": 3,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 12,
+        "x": 12,
+        "y": 58
+      },
+      "id": 17,
+      "legend": {
+        "alignAsTable": true,
+        "avg": true,
+        "current": true,
+        "max": true,
+        "min": true,
+        "show": true,
+        "total": true,
+        "values": true
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "D",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "E",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "F",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "G",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "I",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "J",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Legend Table Should Scroll",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "decimals": 3,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 12,
+        "x": 0,
+        "y": 65
+      },
+      "id": 18,
+      "legend": {
+        "alignAsTable": true,
+        "avg": true,
+        "current": true,
+        "max": true,
+        "min": true,
+        "rightSide": true,
+        "show": true,
+        "total": true,
+        "values": true
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "D",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Legend Table No Scroll Visible",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "decimals": 3,
+      "fill": 1,
+      "gridPos": {
+        "h": 7,
+        "w": 12,
+        "x": 12,
+        "y": 65
+      },
+      "id": 19,
+      "legend": {
+        "alignAsTable": true,
+        "avg": true,
+        "current": true,
+        "max": true,
+        "min": true,
+        "rightSide": true,
+        "show": true,
+        "total": true,
+        "values": true
+      },
+      "lines": true,
+      "linewidth": 1,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "D",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "E",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "F",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "G",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "I",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "J",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "K",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        },
+        {
+          "refId": "L",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Legend Table No Scroll Visible",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    }
+  ],
+  "refresh": false,
+  "revision": 8,
+  "schemaVersion": 16,
+  "style": "dark",
+  "tags": [
+    "gdev",
+    "panel-tests"
+  ],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-1h",
+    "to": "now"
+  },
+  "timepicker": {
+    "refresh_intervals": [
+      "5s",
+      "10s",
+      "30s",
+      "1m",
+      "5m",
+      "15m",
+      "30m",
+      "1h",
+      "2h",
+      "1d"
+    ],
+    "time_options": [
+      "5m",
+      "15m",
+      "1h",
+      "6h",
+      "12h",
+      "24h",
+      "2d",
+      "7d",
+      "30d"
+    ]
+  },
+  "timezone": "browser",
+  "title": "Panel Tests - Graph",
+  "version": 1
+}
diff --git a/devenv/dev-dashboards-without-uid/panel_tests_graph_time_regions.json b/devenv/dev-dashboards-without-uid/panel_tests_graph_time_regions.json
new file mode 100644
index 00000000000..98121cccba6
--- /dev/null
+++ b/devenv/dev-dashboards-without-uid/panel_tests_graph_time_regions.json
@@ -0,0 +1,510 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "links": [],
+  "panels": [
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 2,
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 0
+      },
+      "id": 2,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [
+        {
+          "colorMode": "gray",
+          "fill": true,
+          "fillColor": "rgba(255, 255, 255, 0.03)",
+          "from": "08:30",
+          "fromDayOfWeek": 1,
+          "line": false,
+          "lineColor": "rgba(255, 255, 255, 0.2)",
+          "op": "time",
+          "to": "16:45",
+          "toDayOfWeek": 5
+        }
+      ],
+      "timeShift": null,
+      "title": "Business Hours",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 2,
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 8
+      },
+      "id": 4,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [
+        {
+          "colorMode": "red",
+          "fill": true,
+          "fillColor": "rgba(255, 255, 255, 0.03)",
+          "from": "20:00",
+          "fromDayOfWeek": 7,
+          "line": false,
+          "lineColor": "rgba(255, 255, 255, 0.2)",
+          "op": "time",
+          "to": "23:00",
+          "toDayOfWeek": 7
+        }
+      ],
+      "timeShift": null,
+      "title": "Sunday's 20-23",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {
+        "A-series": "#d683ce"
+      },
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 2,
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 16
+      },
+      "id": 3,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 0.5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(255, 0, 0, 0.22)",
+          "from": "",
+          "fromDayOfWeek": 1,
+          "line": true,
+          "lineColor": "rgba(255, 0, 0, 0.32)",
+          "op": "time",
+          "to": "",
+          "toDayOfWeek": 1
+        },
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(255, 127, 0, 0.22)",
+          "fromDayOfWeek": 2,
+          "line": true,
+          "lineColor": "rgba(255, 127, 0, 0.32)",
+          "op": "time",
+          "toDayOfWeek": 2
+        },
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(255, 255, 0, 0.22)",
+          "fromDayOfWeek": 3,
+          "line": true,
+          "lineColor": "rgba(255, 255, 0, 0.22)",
+          "op": "time",
+          "toDayOfWeek": 3
+        },
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(0, 255, 0, 0.22)",
+          "fromDayOfWeek": 4,
+          "line": true,
+          "lineColor": "rgba(0, 255, 0, 0.32)",
+          "op": "time",
+          "toDayOfWeek": 4
+        },
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(0, 0, 255, 0.22)",
+          "fromDayOfWeek": 5,
+          "line": true,
+          "lineColor": "rgba(0, 0, 255, 0.32)",
+          "op": "time",
+          "toDayOfWeek": 5
+        },
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(75, 0, 130, 0.22)",
+          "fromDayOfWeek": 6,
+          "line": true,
+          "lineColor": "rgba(75, 0, 130, 0.32)",
+          "op": "time",
+          "toDayOfWeek": 6
+        },
+        {
+          "colorMode": "custom",
+          "fill": true,
+          "fillColor": "rgba(148, 0, 211, 0.22)",
+          "fromDayOfWeek": 7,
+          "line": true,
+          "lineColor": "rgba(148, 0, 211, 0.32)",
+          "op": "time",
+          "toDayOfWeek": 7
+        }
+      ],
+      "timeShift": null,
+      "title": "Each day of week",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "fill": 2,
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 24
+      },
+      "id": 5,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [
+        {
+          "colorMode": "red",
+          "fill": false,
+          "from": "05:00",
+          "line": true,
+          "op": "time"
+        }
+      ],
+      "timeShift": null,
+      "title": "05:00",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    }
+  ],
+  "refresh": false,
+  "schemaVersion": 16,
+  "style": "dark",
+  "tags": [
+    "gdev",
+    "panel-tests"
+  ],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-30d",
+    "to": "now"
+  },
+  "timepicker": {
+    "refresh_intervals": [
+      "5s",
+      "10s",
+      "30s",
+      "1m",
+      "5m",
+      "15m",
+      "30m",
+      "1h",
+      "2h",
+      "1d"
+    ],
+    "time_options": [
+      "5m",
+      "15m",
+      "1h",
+      "6h",
+      "12h",
+      "24h",
+      "2d",
+      "7d",
+      "30d"
+    ]
+  },
+  "timezone": "browser",
+  "title": "Panel Tests - Graph (Time Regions)",
+  "version": 1
+}
\ No newline at end of file
diff --git a/devenv/dev-dashboards-without-uid/panel_tests_polystat.json b/devenv/dev-dashboards-without-uid/panel_tests_polystat.json
new file mode 100644
index 00000000000..d18586f88d4
--- /dev/null
+++ b/devenv/dev-dashboards-without-uid/panel_tests_polystat.json
@@ -0,0 +1,3342 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "links": [],
+  "panels": [
+    {
+      "animationModes": [
+        {
+          "text": "Show All",
+          "value": "all"
+        },
+        {
+          "text": "Show Triggered",
+          "value": "triggered"
+        }
+      ],
+      "colors": [
+        "#299c46",
+        "rgba(237, 129, 40, 0.89)",
+        "#d44a3a"
+      ],
+      "d3DivId": "d3_svg_4",
+      "datasource": "gdev-testdata",
+      "decimals": 2,
+      "displayModes": [
+        {
+          "text": "Show All",
+          "value": "all"
+        },
+        {
+          "text": "Show Triggered",
+          "value": "triggered"
+        }
+      ],
+      "fontSizes": [
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        22,
+        24,
+        26,
+        28,
+        30,
+        32,
+        34,
+        36,
+        38,
+        40,
+        42,
+        44,
+        46,
+        48,
+        50,
+        52,
+        54,
+        56,
+        58,
+        60,
+        62,
+        64,
+        66,
+        68,
+        70
+      ],
+      "fontTypes": [
+        "Open Sans",
+        "Arial",
+        "Avant Garde",
+        "Bookman",
+        "Consolas",
+        "Courier",
+        "Courier New",
+        "Futura",
+        "Garamond",
+        "Helvetica",
+        "Palatino",
+        "Times",
+        "Times New Roman",
+        "Verdana"
+      ],
+      "format": "none",
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 4,
+      "links": [],
+      "notcolors": [
+        "rgba(245, 54, 54, 0.9)",
+        "rgba(237, 129, 40, 0.89)",
+        "rgba(50, 172, 45, 0.97)"
+      ],
+      "operatorName": "avg",
+      "operatorOptions": [
+        {
+          "text": "Average",
+          "value": "avg"
+        },
+        {
+          "text": "Count",
+          "value": "count"
+        },
+        {
+          "text": "Current",
+          "value": "current"
+        },
+        {
+          "text": "Delta",
+          "value": "delta"
+        },
+        {
+          "text": "Difference",
+          "value": "diff"
+        },
+        {
+          "text": "First",
+          "value": "first"
+        },
+        {
+          "text": "Log Min",
+          "value": "logmin"
+        },
+        {
+          "text": "Max",
+          "value": "max"
+        },
+        {
+          "text": "Min",
+          "value": "min"
+        },
+        {
+          "text": "Name",
+          "value": "name"
+        },
+        {
+          "text": "Time of Last Point",
+          "value": "last_time"
+        },
+        {
+          "text": "Time Step",
+          "value": "time_step"
+        },
+        {
+          "text": "Total",
+          "value": "total"
+        }
+      ],
+      "polystat": {
+        "animationSpeed": 2500,
+        "columnAutoSize": true,
+        "columns": "",
+        "defaultClickThrough": "",
+        "defaultClickThroughSanitize": true,
+        "displayLimit": 100,
+        "fontAutoScale": true,
+        "fontSize": 12,
+        "globalDisplayMode": "all",
+        "globalOperatorName": "avg",
+        "gradientEnabled": true,
+        "hexagonSortByDirection": "asc",
+        "hexagonSortByField": "name",
+        "maxMetrics": 0,
+        "polygonBorderColor": "black",
+        "polygonBorderSize": 2,
+        "radius": "",
+        "radiusAutoSize": true,
+        "rowAutoSize": true,
+        "rows": "",
+        "shape": "hexagon_pointed_top",
+        "tooltipDisplayMode": "all",
+        "tooltipDisplayTextTriggeredEmpty": "OK",
+        "tooltipFontSize": 12,
+        "tooltipFontType": "Open Sans",
+        "tooltipPrimarySortDirection": "desc",
+        "tooltipPrimarySortField": "thresholdLevel",
+        "tooltipSecondarySortDirection": "desc",
+        "tooltipSecondarySortField": "value",
+        "tooltipTimestampEnabled": true
+      },
+      "savedComposites": [],
+      "savedOverrides": [],
+      "shapes": [
+        {
+          "text": "Hexagon Pointed Top",
+          "value": "hexagon_pointed_top"
+        },
+        {
+          "text": "Hexagon Flat Top",
+          "value": "hexagon_flat_top"
+        },
+        {
+          "text": "Circle",
+          "value": "circle"
+        },
+        {
+          "text": "Cross",
+          "value": "cross"
+        },
+        {
+          "text": "Diamond",
+          "value": "diamond"
+        },
+        {
+          "text": "Square",
+          "value": "square"
+        },
+        {
+          "text": "Star",
+          "value": "star"
+        },
+        {
+          "text": "Triangle",
+          "value": "triangle"
+        },
+        {
+          "text": "Wye",
+          "value": "wye"
+        }
+      ],
+      "sortDirections": [
+        {
+          "text": "Ascending",
+          "value": "asc"
+        },
+        {
+          "text": "Descending",
+          "value": "desc"
+        }
+      ],
+      "sortFields": [
+        {
+          "text": "Name",
+          "value": "name"
+        },
+        {
+          "text": "Threshold Level",
+          "value": "thresholdLevel"
+        },
+        {
+          "text": "Value",
+          "value": "value"
+        }
+      ],
+      "svgContainer": {},
+      "targets": [
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "D",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "E",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholdStates": [
+        {
+          "text": "ok",
+          "value": 0
+        },
+        {
+          "text": "warning",
+          "value": 1
+        },
+        {
+          "text": "critical",
+          "value": 2
+        },
+        {
+          "text": "custom",
+          "value": 3
+        }
+      ],
+      "title": "Poor use of space",
+      "type": "grafana-polystat-panel",
+      "unitFormats": [
+        {
+          "submenu": [
+            {
+              "text": "none",
+              "value": "none"
+            },
+            {
+              "text": "short",
+              "value": "short"
+            },
+            {
+              "text": "percent (0-100)",
+              "value": "percent"
+            },
+            {
+              "text": "percent (0.0-1.0)",
+              "value": "percentunit"
+            },
+            {
+              "text": "Humidity (%H)",
+              "value": "humidity"
+            },
+            {
+              "text": "decibel",
+              "value": "dB"
+            },
+            {
+              "text": "hexadecimal (0x)",
+              "value": "hex0x"
+            },
+            {
+              "text": "hexadecimal",
+              "value": "hex"
+            },
+            {
+              "text": "scientific notation",
+              "value": "sci"
+            },
+            {
+              "text": "locale format",
+              "value": "locale"
+            }
+          ],
+          "text": "none"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Dollars ($)",
+              "value": "currencyUSD"
+            },
+            {
+              "text": "Pounds (£)",
+              "value": "currencyGBP"
+            },
+            {
+              "text": "Euro (€)",
+              "value": "currencyEUR"
+            },
+            {
+              "text": "Yen (¥)",
+              "value": "currencyJPY"
+            },
+            {
+              "text": "Rubles (₽)",
+              "value": "currencyRUB"
+            },
+            {
+              "text": "Hryvnias (₴)",
+              "value": "currencyUAH"
+            },
+            {
+              "text": "Real (R$)",
+              "value": "currencyBRL"
+            },
+            {
+              "text": "Danish Krone (kr)",
+              "value": "currencyDKK"
+            },
+            {
+              "text": "Icelandic Króna (kr)",
+              "value": "currencyISK"
+            },
+            {
+              "text": "Norwegian Krone (kr)",
+              "value": "currencyNOK"
+            },
+            {
+              "text": "Swedish Krona (kr)",
+              "value": "currencySEK"
+            },
+            {
+              "text": "Czech koruna (czk)",
+              "value": "currencyCZK"
+            },
+            {
+              "text": "Swiss franc (CHF)",
+              "value": "currencyCHF"
+            },
+            {
+              "text": "Polish Złoty (PLN)",
+              "value": "currencyPLN"
+            },
+            {
+              "text": "Bitcoin (฿)",
+              "value": "currencyBTC"
+            }
+          ],
+          "text": "currency"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Hertz (1/s)",
+              "value": "hertz"
+            },
+            {
+              "text": "nanoseconds (ns)",
+              "value": "ns"
+            },
+            {
+              "text": "microseconds (µs)",
+              "value": "µs"
+            },
+            {
+              "text": "milliseconds (ms)",
+              "value": "ms"
+            },
+            {
+              "text": "seconds (s)",
+              "value": "s"
+            },
+            {
+              "text": "minutes (m)",
+              "value": "m"
+            },
+            {
+              "text": "hours (h)",
+              "value": "h"
+            },
+            {
+              "text": "days (d)",
+              "value": "d"
+            },
+            {
+              "text": "duration (ms)",
+              "value": "dtdurationms"
+            },
+            {
+              "text": "duration (s)",
+              "value": "dtdurations"
+            },
+            {
+              "text": "duration (hh:mm:ss)",
+              "value": "dthms"
+            },
+            {
+              "text": "Timeticks (s/100)",
+              "value": "timeticks"
+            }
+          ],
+          "text": "time"
+        },
+        {
+          "submenu": [
+            {
+              "text": "YYYY-MM-DD HH:mm:ss",
+              "value": "dateTimeAsIso"
+            },
+            {
+              "text": "DD/MM/YYYY h:mm:ss a",
+              "value": "dateTimeAsUS"
+            },
+            {
+              "text": "From Now",
+              "value": "dateTimeFromNow"
+            }
+          ],
+          "text": "date & time"
+        },
+        {
+          "submenu": [
+            {
+              "text": "bits",
+              "value": "bits"
+            },
+            {
+              "text": "bytes",
+              "value": "bytes"
+            },
+            {
+              "text": "kibibytes",
+              "value": "kbytes"
+            },
+            {
+              "text": "mebibytes",
+              "value": "mbytes"
+            },
+            {
+              "text": "gibibytes",
+              "value": "gbytes"
+            }
+          ],
+          "text": "data (IEC)"
+        },
+        {
+          "submenu": [
+            {
+              "text": "bits",
+              "value": "decbits"
+            },
+            {
+              "text": "bytes",
+              "value": "decbytes"
+            },
+            {
+              "text": "kilobytes",
+              "value": "deckbytes"
+            },
+            {
+              "text": "megabytes",
+              "value": "decmbytes"
+            },
+            {
+              "text": "gigabytes",
+              "value": "decgbytes"
+            }
+          ],
+          "text": "data (Metric)"
+        },
+        {
+          "submenu": [
+            {
+              "text": "packets/sec",
+              "value": "pps"
+            },
+            {
+              "text": "bits/sec",
+              "value": "bps"
+            },
+            {
+              "text": "bytes/sec",
+              "value": "Bps"
+            },
+            {
+              "text": "kilobits/sec",
+              "value": "Kbits"
+            },
+            {
+              "text": "kilobytes/sec",
+              "value": "KBs"
+            },
+            {
+              "text": "megabits/sec",
+              "value": "Mbits"
+            },
+            {
+              "text": "megabytes/sec",
+              "value": "MBs"
+            },
+            {
+              "text": "gigabytes/sec",
+              "value": "GBs"
+            },
+            {
+              "text": "gigabits/sec",
+              "value": "Gbits"
+            }
+          ],
+          "text": "data rate"
+        },
+        {
+          "submenu": [
+            {
+              "text": "hashes/sec",
+              "value": "Hs"
+            },
+            {
+              "text": "kilohashes/sec",
+              "value": "KHs"
+            },
+            {
+              "text": "megahashes/sec",
+              "value": "MHs"
+            },
+            {
+              "text": "gigahashes/sec",
+              "value": "GHs"
+            },
+            {
+              "text": "terahashes/sec",
+              "value": "THs"
+            },
+            {
+              "text": "petahashes/sec",
+              "value": "PHs"
+            },
+            {
+              "text": "exahashes/sec",
+              "value": "EHs"
+            }
+          ],
+          "text": "hash rate"
+        },
+        {
+          "submenu": [
+            {
+              "text": "ops/sec (ops)",
+              "value": "ops"
+            },
+            {
+              "text": "requests/sec (rps)",
+              "value": "reqps"
+            },
+            {
+              "text": "reads/sec (rps)",
+              "value": "rps"
+            },
+            {
+              "text": "writes/sec (wps)",
+              "value": "wps"
+            },
+            {
+              "text": "I/O ops/sec (iops)",
+              "value": "iops"
+            },
+            {
+              "text": "ops/min (opm)",
+              "value": "opm"
+            },
+            {
+              "text": "reads/min (rpm)",
+              "value": "rpm"
+            },
+            {
+              "text": "writes/min (wpm)",
+              "value": "wpm"
+            }
+          ],
+          "text": "throughput"
+        },
+        {
+          "submenu": [
+            {
+              "text": "millimetre (mm)",
+              "value": "lengthmm"
+            },
+            {
+              "text": "meter (m)",
+              "value": "lengthm"
+            },
+            {
+              "text": "feet (ft)",
+              "value": "lengthft"
+            },
+            {
+              "text": "kilometer (km)",
+              "value": "lengthkm"
+            },
+            {
+              "text": "mile (mi)",
+              "value": "lengthmi"
+            }
+          ],
+          "text": "length"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Square Meters (m²)",
+              "value": "areaM2"
+            },
+            {
+              "text": "Square Feet (ft²)",
+              "value": "areaF2"
+            },
+            {
+              "text": "Square Miles (mi²)",
+              "value": "areaMI2"
+            }
+          ],
+          "text": "area"
+        },
+        {
+          "submenu": [
+            {
+              "text": "milligram (mg)",
+              "value": "massmg"
+            },
+            {
+              "text": "gram (g)",
+              "value": "massg"
+            },
+            {
+              "text": "kilogram (kg)",
+              "value": "masskg"
+            },
+            {
+              "text": "metric ton (t)",
+              "value": "masst"
+            }
+          ],
+          "text": "mass"
+        },
+        {
+          "submenu": [
+            {
+              "text": "metres/second (m/s)",
+              "value": "velocityms"
+            },
+            {
+              "text": "kilometers/hour (km/h)",
+              "value": "velocitykmh"
+            },
+            {
+              "text": "miles/hour (mph)",
+              "value": "velocitymph"
+            },
+            {
+              "text": "knot (kn)",
+              "value": "velocityknot"
+            }
+          ],
+          "text": "velocity"
+        },
+        {
+          "submenu": [
+            {
+              "text": "millilitre (mL)",
+              "value": "mlitre"
+            },
+            {
+              "text": "litre (L)",
+              "value": "litre"
+            },
+            {
+              "text": "cubic metre",
+              "value": "m3"
+            },
+            {
+              "text": "Normal cubic metre",
+              "value": "Nm3"
+            },
+            {
+              "text": "cubic decimetre",
+              "value": "dm3"
+            },
+            {
+              "text": "gallons",
+              "value": "gallons"
+            }
+          ],
+          "text": "volume"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Watt (W)",
+              "value": "watt"
+            },
+            {
+              "text": "Kilowatt (kW)",
+              "value": "kwatt"
+            },
+            {
+              "text": "Milliwatt (mW)",
+              "value": "mwatt"
+            },
+            {
+              "text": "Watt per square metre (W/m²)",
+              "value": "Wm2"
+            },
+            {
+              "text": "Volt-ampere (VA)",
+              "value": "voltamp"
+            },
+            {
+              "text": "Kilovolt-ampere (kVA)",
+              "value": "kvoltamp"
+            },
+            {
+              "text": "Volt-ampere reactive (var)",
+              "value": "voltampreact"
+            },
+            {
+              "text": "Kilovolt-ampere reactive (kvar)",
+              "value": "kvoltampreact"
+            },
+            {
+              "text": "Watt-hour (Wh)",
+              "value": "watth"
+            },
+            {
+              "text": "Kilowatt-hour (kWh)",
+              "value": "kwatth"
+            },
+            {
+              "text": "Kilowatt-min (kWm)",
+              "value": "kwattm"
+            },
+            {
+              "text": "Joule (J)",
+              "value": "joule"
+            },
+            {
+              "text": "Electron volt (eV)",
+              "value": "ev"
+            },
+            {
+              "text": "Ampere (A)",
+              "value": "amp"
+            },
+            {
+              "text": "Kiloampere (kA)",
+              "value": "kamp"
+            },
+            {
+              "text": "Milliampere (mA)",
+              "value": "mamp"
+            },
+            {
+              "text": "Volt (V)",
+              "value": "volt"
+            },
+            {
+              "text": "Kilovolt (kV)",
+              "value": "kvolt"
+            },
+            {
+              "text": "Millivolt (mV)",
+              "value": "mvolt"
+            },
+            {
+              "text": "Decibel-milliwatt (dBm)",
+              "value": "dBm"
+            },
+            {
+              "text": "Ohm (Ω)",
+              "value": "ohm"
+            },
+            {
+              "text": "Lumens (Lm)",
+              "value": "lumens"
+            }
+          ],
+          "text": "energy"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Celsius (°C)",
+              "value": "celsius"
+            },
+            {
+              "text": "Farenheit (°F)",
+              "value": "farenheit"
+            },
+            {
+              "text": "Kelvin (K)",
+              "value": "kelvin"
+            }
+          ],
+          "text": "temperature"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Millibars",
+              "value": "pressurembar"
+            },
+            {
+              "text": "Bars",
+              "value": "pressurebar"
+            },
+            {
+              "text": "Kilobars",
+              "value": "pressurekbar"
+            },
+            {
+              "text": "Hectopascals",
+              "value": "pressurehpa"
+            },
+            {
+              "text": "Kilopascals",
+              "value": "pressurekpa"
+            },
+            {
+              "text": "Inches of mercury",
+              "value": "pressurehg"
+            },
+            {
+              "text": "PSI",
+              "value": "pressurepsi"
+            }
+          ],
+          "text": "pressure"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Newton-meters (Nm)",
+              "value": "forceNm"
+            },
+            {
+              "text": "Kilonewton-meters (kNm)",
+              "value": "forcekNm"
+            },
+            {
+              "text": "Newtons (N)",
+              "value": "forceN"
+            },
+            {
+              "text": "Kilonewtons (kN)",
+              "value": "forcekN"
+            }
+          ],
+          "text": "force"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Gallons/min (gpm)",
+              "value": "flowgpm"
+            },
+            {
+              "text": "Cubic meters/sec (cms)",
+              "value": "flowcms"
+            },
+            {
+              "text": "Cubic feet/sec (cfs)",
+              "value": "flowcfs"
+            },
+            {
+              "text": "Cubic feet/min (cfm)",
+              "value": "flowcfm"
+            },
+            {
+              "text": "Litre/hour",
+              "value": "litreh"
+            },
+            {
+              "text": "Litre/min (l/min)",
+              "value": "flowlpm"
+            },
+            {
+              "text": "milliLitre/min (mL/min)",
+              "value": "flowmlpm"
+            }
+          ],
+          "text": "flow"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Degrees (°)",
+              "value": "degree"
+            },
+            {
+              "text": "Radians",
+              "value": "radian"
+            },
+            {
+              "text": "Gradian",
+              "value": "grad"
+            }
+          ],
+          "text": "angle"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Meters/sec²",
+              "value": "accMS2"
+            },
+            {
+              "text": "Feet/sec²",
+              "value": "accFS2"
+            },
+            {
+              "text": "G unit",
+              "value": "accG"
+            }
+          ],
+          "text": "acceleration"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Becquerel (Bq)",
+              "value": "radbq"
+            },
+            {
+              "text": "curie (Ci)",
+              "value": "radci"
+            },
+            {
+              "text": "Gray (Gy)",
+              "value": "radgy"
+            },
+            {
+              "text": "rad",
+              "value": "radrad"
+            },
+            {
+              "text": "Sievert (Sv)",
+              "value": "radsv"
+            },
+            {
+              "text": "rem",
+              "value": "radrem"
+            },
+            {
+              "text": "Exposure (C/kg)",
+              "value": "radexpckg"
+            },
+            {
+              "text": "roentgen (R)",
+              "value": "radr"
+            },
+            {
+              "text": "Sievert/hour (Sv/h)",
+              "value": "radsvh"
+            }
+          ],
+          "text": "radiation"
+        },
+        {
+          "submenu": [
+            {
+              "text": "parts-per-million (ppm)",
+              "value": "ppm"
+            },
+            {
+              "text": "parts-per-billion (ppb)",
+              "value": "conppb"
+            },
+            {
+              "text": "nanogram per cubic metre (ng/m³)",
+              "value": "conngm3"
+            },
+            {
+              "text": "nanogram per normal cubic metre (ng/Nm³)",
+              "value": "conngNm3"
+            },
+            {
+              "text": "microgram per cubic metre (μg/m³)",
+              "value": "conμgm3"
+            },
+            {
+              "text": "microgram per normal cubic metre (μg/Nm³)",
+              "value": "conμgNm3"
+            },
+            {
+              "text": "milligram per cubic metre (mg/m³)",
+              "value": "conmgm3"
+            },
+            {
+              "text": "milligram per normal cubic metre (mg/Nm³)",
+              "value": "conmgNm3"
+            },
+            {
+              "text": "gram per cubic metre (g/m³)",
+              "value": "congm3"
+            },
+            {
+              "text": "gram per normal cubic metre (g/Nm³)",
+              "value": "congNm3"
+            }
+          ],
+          "text": "concentration"
+        }
+      ]
+    },
+    {
+      "animationModes": [
+        {
+          "text": "Show All",
+          "value": "all"
+        },
+        {
+          "text": "Show Triggered",
+          "value": "triggered"
+        }
+      ],
+      "colors": [
+        "#299c46",
+        "rgba(237, 129, 40, 0.89)",
+        "#d44a3a"
+      ],
+      "d3DivId": "d3_svg_5",
+      "datasource": "gdev-testdata",
+      "decimals": 2,
+      "displayModes": [
+        {
+          "text": "Show All",
+          "value": "all"
+        },
+        {
+          "text": "Show Triggered",
+          "value": "triggered"
+        }
+      ],
+      "fontSizes": [
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        22,
+        24,
+        26,
+        28,
+        30,
+        32,
+        34,
+        36,
+        38,
+        40,
+        42,
+        44,
+        46,
+        48,
+        50,
+        52,
+        54,
+        56,
+        58,
+        60,
+        62,
+        64,
+        66,
+        68,
+        70
+      ],
+      "fontTypes": [
+        "Open Sans",
+        "Arial",
+        "Avant Garde",
+        "Bookman",
+        "Consolas",
+        "Courier",
+        "Courier New",
+        "Futura",
+        "Garamond",
+        "Helvetica",
+        "Palatino",
+        "Times",
+        "Times New Roman",
+        "Verdana"
+      ],
+      "format": "none",
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 12,
+        "y": 0
+      },
+      "id": 5,
+      "links": [],
+      "notcolors": [
+        "rgba(245, 54, 54, 0.9)",
+        "rgba(237, 129, 40, 0.89)",
+        "rgba(50, 172, 45, 0.97)"
+      ],
+      "operatorName": "avg",
+      "operatorOptions": [
+        {
+          "text": "Average",
+          "value": "avg"
+        },
+        {
+          "text": "Count",
+          "value": "count"
+        },
+        {
+          "text": "Current",
+          "value": "current"
+        },
+        {
+          "text": "Delta",
+          "value": "delta"
+        },
+        {
+          "text": "Difference",
+          "value": "diff"
+        },
+        {
+          "text": "First",
+          "value": "first"
+        },
+        {
+          "text": "Log Min",
+          "value": "logmin"
+        },
+        {
+          "text": "Max",
+          "value": "max"
+        },
+        {
+          "text": "Min",
+          "value": "min"
+        },
+        {
+          "text": "Name",
+          "value": "name"
+        },
+        {
+          "text": "Time of Last Point",
+          "value": "last_time"
+        },
+        {
+          "text": "Time Step",
+          "value": "time_step"
+        },
+        {
+          "text": "Total",
+          "value": "total"
+        }
+      ],
+      "polystat": {
+        "animationSpeed": 2500,
+        "columnAutoSize": true,
+        "columns": "",
+        "defaultClickThrough": "",
+        "defaultClickThroughSanitize": true,
+        "displayLimit": 100,
+        "fontAutoScale": true,
+        "fontSize": 12,
+        "globalDisplayMode": "all",
+        "globalOperatorName": "avg",
+        "gradientEnabled": true,
+        "hexagonSortByDirection": "asc",
+        "hexagonSortByField": "name",
+        "maxMetrics": 0,
+        "polygonBorderColor": "black",
+        "polygonBorderSize": 2,
+        "radius": "",
+        "radiusAutoSize": true,
+        "rowAutoSize": true,
+        "rows": "",
+        "shape": "hexagon_pointed_top",
+        "tooltipDisplayMode": "all",
+        "tooltipDisplayTextTriggeredEmpty": "OK",
+        "tooltipFontSize": 12,
+        "tooltipFontType": "Open Sans",
+        "tooltipPrimarySortDirection": "desc",
+        "tooltipPrimarySortField": "thresholdLevel",
+        "tooltipSecondarySortDirection": "desc",
+        "tooltipSecondarySortField": "value",
+        "tooltipTimestampEnabled": true
+      },
+      "savedComposites": [
+        {
+          "compositeName": "comp",
+          "members": [
+            {
+              "seriesName": "A-series"
+            },
+            {
+              "seriesName": "B-series"
+            }
+          ],
+          "enabled": true,
+          "clickThrough": "",
+          "hideMembers": true,
+          "showName": true,
+          "showValue": true,
+          "animateMode": "all",
+          "thresholdLevel": 0,
+          "sanitizeURLEnabled": true,
+          "sanitizedURL": ""
+        }
+      ],
+      "savedOverrides": [],
+      "shapes": [
+        {
+          "text": "Hexagon Pointed Top",
+          "value": "hexagon_pointed_top"
+        },
+        {
+          "text": "Hexagon Flat Top",
+          "value": "hexagon_flat_top"
+        },
+        {
+          "text": "Circle",
+          "value": "circle"
+        },
+        {
+          "text": "Cross",
+          "value": "cross"
+        },
+        {
+          "text": "Diamond",
+          "value": "diamond"
+        },
+        {
+          "text": "Square",
+          "value": "square"
+        },
+        {
+          "text": "Star",
+          "value": "star"
+        },
+        {
+          "text": "Triangle",
+          "value": "triangle"
+        },
+        {
+          "text": "Wye",
+          "value": "wye"
+        }
+      ],
+      "sortDirections": [
+        {
+          "text": "Ascending",
+          "value": "asc"
+        },
+        {
+          "text": "Descending",
+          "value": "desc"
+        }
+      ],
+      "sortFields": [
+        {
+          "text": "Name",
+          "value": "name"
+        },
+        {
+          "text": "Threshold Level",
+          "value": "thresholdLevel"
+        },
+        {
+          "text": "Value",
+          "value": "value"
+        }
+      ],
+      "svgContainer": {},
+      "targets": [
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "D",
+          "scenarioId": "random_walk"
+        },
+        {
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "E",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholdStates": [
+        {
+          "text": "ok",
+          "value": 0
+        },
+        {
+          "text": "warning",
+          "value": 1
+        },
+        {
+          "text": "critical",
+          "value": 2
+        },
+        {
+          "text": "custom",
+          "value": 3
+        }
+      ],
+      "title": "Composite crash",
+      "type": "grafana-polystat-panel",
+      "unitFormats": [
+        {
+          "submenu": [
+            {
+              "text": "none",
+              "value": "none"
+            },
+            {
+              "text": "short",
+              "value": "short"
+            },
+            {
+              "text": "percent (0-100)",
+              "value": "percent"
+            },
+            {
+              "text": "percent (0.0-1.0)",
+              "value": "percentunit"
+            },
+            {
+              "text": "Humidity (%H)",
+              "value": "humidity"
+            },
+            {
+              "text": "decibel",
+              "value": "dB"
+            },
+            {
+              "text": "hexadecimal (0x)",
+              "value": "hex0x"
+            },
+            {
+              "text": "hexadecimal",
+              "value": "hex"
+            },
+            {
+              "text": "scientific notation",
+              "value": "sci"
+            },
+            {
+              "text": "locale format",
+              "value": "locale"
+            }
+          ],
+          "text": "none"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Dollars ($)",
+              "value": "currencyUSD"
+            },
+            {
+              "text": "Pounds (£)",
+              "value": "currencyGBP"
+            },
+            {
+              "text": "Euro (€)",
+              "value": "currencyEUR"
+            },
+            {
+              "text": "Yen (¥)",
+              "value": "currencyJPY"
+            },
+            {
+              "text": "Rubles (₽)",
+              "value": "currencyRUB"
+            },
+            {
+              "text": "Hryvnias (₴)",
+              "value": "currencyUAH"
+            },
+            {
+              "text": "Real (R$)",
+              "value": "currencyBRL"
+            },
+            {
+              "text": "Danish Krone (kr)",
+              "value": "currencyDKK"
+            },
+            {
+              "text": "Icelandic Króna (kr)",
+              "value": "currencyISK"
+            },
+            {
+              "text": "Norwegian Krone (kr)",
+              "value": "currencyNOK"
+            },
+            {
+              "text": "Swedish Krona (kr)",
+              "value": "currencySEK"
+            },
+            {
+              "text": "Czech koruna (czk)",
+              "value": "currencyCZK"
+            },
+            {
+              "text": "Swiss franc (CHF)",
+              "value": "currencyCHF"
+            },
+            {
+              "text": "Polish Złoty (PLN)",
+              "value": "currencyPLN"
+            },
+            {
+              "text": "Bitcoin (฿)",
+              "value": "currencyBTC"
+            }
+          ],
+          "text": "currency"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Hertz (1/s)",
+              "value": "hertz"
+            },
+            {
+              "text": "nanoseconds (ns)",
+              "value": "ns"
+            },
+            {
+              "text": "microseconds (µs)",
+              "value": "µs"
+            },
+            {
+              "text": "milliseconds (ms)",
+              "value": "ms"
+            },
+            {
+              "text": "seconds (s)",
+              "value": "s"
+            },
+            {
+              "text": "minutes (m)",
+              "value": "m"
+            },
+            {
+              "text": "hours (h)",
+              "value": "h"
+            },
+            {
+              "text": "days (d)",
+              "value": "d"
+            },
+            {
+              "text": "duration (ms)",
+              "value": "dtdurationms"
+            },
+            {
+              "text": "duration (s)",
+              "value": "dtdurations"
+            },
+            {
+              "text": "duration (hh:mm:ss)",
+              "value": "dthms"
+            },
+            {
+              "text": "Timeticks (s/100)",
+              "value": "timeticks"
+            }
+          ],
+          "text": "time"
+        },
+        {
+          "submenu": [
+            {
+              "text": "YYYY-MM-DD HH:mm:ss",
+              "value": "dateTimeAsIso"
+            },
+            {
+              "text": "DD/MM/YYYY h:mm:ss a",
+              "value": "dateTimeAsUS"
+            },
+            {
+              "text": "From Now",
+              "value": "dateTimeFromNow"
+            }
+          ],
+          "text": "date & time"
+        },
+        {
+          "submenu": [
+            {
+              "text": "bits",
+              "value": "bits"
+            },
+            {
+              "text": "bytes",
+              "value": "bytes"
+            },
+            {
+              "text": "kibibytes",
+              "value": "kbytes"
+            },
+            {
+              "text": "mebibytes",
+              "value": "mbytes"
+            },
+            {
+              "text": "gibibytes",
+              "value": "gbytes"
+            }
+          ],
+          "text": "data (IEC)"
+        },
+        {
+          "submenu": [
+            {
+              "text": "bits",
+              "value": "decbits"
+            },
+            {
+              "text": "bytes",
+              "value": "decbytes"
+            },
+            {
+              "text": "kilobytes",
+              "value": "deckbytes"
+            },
+            {
+              "text": "megabytes",
+              "value": "decmbytes"
+            },
+            {
+              "text": "gigabytes",
+              "value": "decgbytes"
+            }
+          ],
+          "text": "data (Metric)"
+        },
+        {
+          "submenu": [
+            {
+              "text": "packets/sec",
+              "value": "pps"
+            },
+            {
+              "text": "bits/sec",
+              "value": "bps"
+            },
+            {
+              "text": "bytes/sec",
+              "value": "Bps"
+            },
+            {
+              "text": "kilobits/sec",
+              "value": "Kbits"
+            },
+            {
+              "text": "kilobytes/sec",
+              "value": "KBs"
+            },
+            {
+              "text": "megabits/sec",
+              "value": "Mbits"
+            },
+            {
+              "text": "megabytes/sec",
+              "value": "MBs"
+            },
+            {
+              "text": "gigabytes/sec",
+              "value": "GBs"
+            },
+            {
+              "text": "gigabits/sec",
+              "value": "Gbits"
+            }
+          ],
+          "text": "data rate"
+        },
+        {
+          "submenu": [
+            {
+              "text": "hashes/sec",
+              "value": "Hs"
+            },
+            {
+              "text": "kilohashes/sec",
+              "value": "KHs"
+            },
+            {
+              "text": "megahashes/sec",
+              "value": "MHs"
+            },
+            {
+              "text": "gigahashes/sec",
+              "value": "GHs"
+            },
+            {
+              "text": "terahashes/sec",
+              "value": "THs"
+            },
+            {
+              "text": "petahashes/sec",
+              "value": "PHs"
+            },
+            {
+              "text": "exahashes/sec",
+              "value": "EHs"
+            }
+          ],
+          "text": "hash rate"
+        },
+        {
+          "submenu": [
+            {
+              "text": "ops/sec (ops)",
+              "value": "ops"
+            },
+            {
+              "text": "requests/sec (rps)",
+              "value": "reqps"
+            },
+            {
+              "text": "reads/sec (rps)",
+              "value": "rps"
+            },
+            {
+              "text": "writes/sec (wps)",
+              "value": "wps"
+            },
+            {
+              "text": "I/O ops/sec (iops)",
+              "value": "iops"
+            },
+            {
+              "text": "ops/min (opm)",
+              "value": "opm"
+            },
+            {
+              "text": "reads/min (rpm)",
+              "value": "rpm"
+            },
+            {
+              "text": "writes/min (wpm)",
+              "value": "wpm"
+            }
+          ],
+          "text": "throughput"
+        },
+        {
+          "submenu": [
+            {
+              "text": "millimetre (mm)",
+              "value": "lengthmm"
+            },
+            {
+              "text": "meter (m)",
+              "value": "lengthm"
+            },
+            {
+              "text": "feet (ft)",
+              "value": "lengthft"
+            },
+            {
+              "text": "kilometer (km)",
+              "value": "lengthkm"
+            },
+            {
+              "text": "mile (mi)",
+              "value": "lengthmi"
+            }
+          ],
+          "text": "length"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Square Meters (m²)",
+              "value": "areaM2"
+            },
+            {
+              "text": "Square Feet (ft²)",
+              "value": "areaF2"
+            },
+            {
+              "text": "Square Miles (mi²)",
+              "value": "areaMI2"
+            }
+          ],
+          "text": "area"
+        },
+        {
+          "submenu": [
+            {
+              "text": "milligram (mg)",
+              "value": "massmg"
+            },
+            {
+              "text": "gram (g)",
+              "value": "massg"
+            },
+            {
+              "text": "kilogram (kg)",
+              "value": "masskg"
+            },
+            {
+              "text": "metric ton (t)",
+              "value": "masst"
+            }
+          ],
+          "text": "mass"
+        },
+        {
+          "submenu": [
+            {
+              "text": "metres/second (m/s)",
+              "value": "velocityms"
+            },
+            {
+              "text": "kilometers/hour (km/h)",
+              "value": "velocitykmh"
+            },
+            {
+              "text": "miles/hour (mph)",
+              "value": "velocitymph"
+            },
+            {
+              "text": "knot (kn)",
+              "value": "velocityknot"
+            }
+          ],
+          "text": "velocity"
+        },
+        {
+          "submenu": [
+            {
+              "text": "millilitre (mL)",
+              "value": "mlitre"
+            },
+            {
+              "text": "litre (L)",
+              "value": "litre"
+            },
+            {
+              "text": "cubic metre",
+              "value": "m3"
+            },
+            {
+              "text": "Normal cubic metre",
+              "value": "Nm3"
+            },
+            {
+              "text": "cubic decimetre",
+              "value": "dm3"
+            },
+            {
+              "text": "gallons",
+              "value": "gallons"
+            }
+          ],
+          "text": "volume"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Watt (W)",
+              "value": "watt"
+            },
+            {
+              "text": "Kilowatt (kW)",
+              "value": "kwatt"
+            },
+            {
+              "text": "Milliwatt (mW)",
+              "value": "mwatt"
+            },
+            {
+              "text": "Watt per square metre (W/m²)",
+              "value": "Wm2"
+            },
+            {
+              "text": "Volt-ampere (VA)",
+              "value": "voltamp"
+            },
+            {
+              "text": "Kilovolt-ampere (kVA)",
+              "value": "kvoltamp"
+            },
+            {
+              "text": "Volt-ampere reactive (var)",
+              "value": "voltampreact"
+            },
+            {
+              "text": "Kilovolt-ampere reactive (kvar)",
+              "value": "kvoltampreact"
+            },
+            {
+              "text": "Watt-hour (Wh)",
+              "value": "watth"
+            },
+            {
+              "text": "Kilowatt-hour (kWh)",
+              "value": "kwatth"
+            },
+            {
+              "text": "Kilowatt-min (kWm)",
+              "value": "kwattm"
+            },
+            {
+              "text": "Joule (J)",
+              "value": "joule"
+            },
+            {
+              "text": "Electron volt (eV)",
+              "value": "ev"
+            },
+            {
+              "text": "Ampere (A)",
+              "value": "amp"
+            },
+            {
+              "text": "Kiloampere (kA)",
+              "value": "kamp"
+            },
+            {
+              "text": "Milliampere (mA)",
+              "value": "mamp"
+            },
+            {
+              "text": "Volt (V)",
+              "value": "volt"
+            },
+            {
+              "text": "Kilovolt (kV)",
+              "value": "kvolt"
+            },
+            {
+              "text": "Millivolt (mV)",
+              "value": "mvolt"
+            },
+            {
+              "text": "Decibel-milliwatt (dBm)",
+              "value": "dBm"
+            },
+            {
+              "text": "Ohm (Ω)",
+              "value": "ohm"
+            },
+            {
+              "text": "Lumens (Lm)",
+              "value": "lumens"
+            }
+          ],
+          "text": "energy"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Celsius (°C)",
+              "value": "celsius"
+            },
+            {
+              "text": "Farenheit (°F)",
+              "value": "farenheit"
+            },
+            {
+              "text": "Kelvin (K)",
+              "value": "kelvin"
+            }
+          ],
+          "text": "temperature"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Millibars",
+              "value": "pressurembar"
+            },
+            {
+              "text": "Bars",
+              "value": "pressurebar"
+            },
+            {
+              "text": "Kilobars",
+              "value": "pressurekbar"
+            },
+            {
+              "text": "Hectopascals",
+              "value": "pressurehpa"
+            },
+            {
+              "text": "Kilopascals",
+              "value": "pressurekpa"
+            },
+            {
+              "text": "Inches of mercury",
+              "value": "pressurehg"
+            },
+            {
+              "text": "PSI",
+              "value": "pressurepsi"
+            }
+          ],
+          "text": "pressure"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Newton-meters (Nm)",
+              "value": "forceNm"
+            },
+            {
+              "text": "Kilonewton-meters (kNm)",
+              "value": "forcekNm"
+            },
+            {
+              "text": "Newtons (N)",
+              "value": "forceN"
+            },
+            {
+              "text": "Kilonewtons (kN)",
+              "value": "forcekN"
+            }
+          ],
+          "text": "force"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Gallons/min (gpm)",
+              "value": "flowgpm"
+            },
+            {
+              "text": "Cubic meters/sec (cms)",
+              "value": "flowcms"
+            },
+            {
+              "text": "Cubic feet/sec (cfs)",
+              "value": "flowcfs"
+            },
+            {
+              "text": "Cubic feet/min (cfm)",
+              "value": "flowcfm"
+            },
+            {
+              "text": "Litre/hour",
+              "value": "litreh"
+            },
+            {
+              "text": "Litre/min (l/min)",
+              "value": "flowlpm"
+            },
+            {
+              "text": "milliLitre/min (mL/min)",
+              "value": "flowmlpm"
+            }
+          ],
+          "text": "flow"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Degrees (°)",
+              "value": "degree"
+            },
+            {
+              "text": "Radians",
+              "value": "radian"
+            },
+            {
+              "text": "Gradian",
+              "value": "grad"
+            }
+          ],
+          "text": "angle"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Meters/sec²",
+              "value": "accMS2"
+            },
+            {
+              "text": "Feet/sec²",
+              "value": "accFS2"
+            },
+            {
+              "text": "G unit",
+              "value": "accG"
+            }
+          ],
+          "text": "acceleration"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Becquerel (Bq)",
+              "value": "radbq"
+            },
+            {
+              "text": "curie (Ci)",
+              "value": "radci"
+            },
+            {
+              "text": "Gray (Gy)",
+              "value": "radgy"
+            },
+            {
+              "text": "rad",
+              "value": "radrad"
+            },
+            {
+              "text": "Sievert (Sv)",
+              "value": "radsv"
+            },
+            {
+              "text": "rem",
+              "value": "radrem"
+            },
+            {
+              "text": "Exposure (C/kg)",
+              "value": "radexpckg"
+            },
+            {
+              "text": "roentgen (R)",
+              "value": "radr"
+            },
+            {
+              "text": "Sievert/hour (Sv/h)",
+              "value": "radsvh"
+            }
+          ],
+          "text": "radiation"
+        },
+        {
+          "submenu": [
+            {
+              "text": "parts-per-million (ppm)",
+              "value": "ppm"
+            },
+            {
+              "text": "parts-per-billion (ppb)",
+              "value": "conppb"
+            },
+            {
+              "text": "nanogram per cubic metre (ng/m³)",
+              "value": "conngm3"
+            },
+            {
+              "text": "nanogram per normal cubic metre (ng/Nm³)",
+              "value": "conngNm3"
+            },
+            {
+              "text": "microgram per cubic metre (μg/m³)",
+              "value": "conμgm3"
+            },
+            {
+              "text": "microgram per normal cubic metre (μg/Nm³)",
+              "value": "conμgNm3"
+            },
+            {
+              "text": "milligram per cubic metre (mg/m³)",
+              "value": "conmgm3"
+            },
+            {
+              "text": "milligram per normal cubic metre (mg/Nm³)",
+              "value": "conmgNm3"
+            },
+            {
+              "text": "gram per cubic metre (g/m³)",
+              "value": "congm3"
+            },
+            {
+              "text": "gram per normal cubic metre (g/Nm³)",
+              "value": "congNm3"
+            }
+          ],
+          "text": "concentration"
+        }
+      ]
+    },
+    {
+      "animationModes": [
+        {
+          "text": "Show All",
+          "value": "all"
+        },
+        {
+          "text": "Show Triggered",
+          "value": "triggered"
+        }
+      ],
+      "colors": [
+        "#299c46",
+        "rgba(237, 129, 40, 0.89)",
+        "#d44a3a"
+      ],
+      "d3DivId": "d3_svg_2",
+      "datasource": "gdev-testdata",
+      "decimals": 2,
+      "displayModes": [
+        {
+          "text": "Show All",
+          "value": "all"
+        },
+        {
+          "text": "Show Triggered",
+          "value": "triggered"
+        }
+      ],
+      "fontSizes": [
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        22,
+        24,
+        26,
+        28,
+        30,
+        32,
+        34,
+        36,
+        38,
+        40,
+        42,
+        44,
+        46,
+        48,
+        50,
+        52,
+        54,
+        56,
+        58,
+        60,
+        62,
+        64,
+        66,
+        68,
+        70
+      ],
+      "fontTypes": [
+        "Open Sans",
+        "Arial",
+        "Avant Garde",
+        "Bookman",
+        "Consolas",
+        "Courier",
+        "Courier New",
+        "Futura",
+        "Garamond",
+        "Helvetica",
+        "Palatino",
+        "Times",
+        "Times New Roman",
+        "Verdana"
+      ],
+      "format": "none",
+      "gridPos": {
+        "h": 10,
+        "w": 12,
+        "x": 0,
+        "y": 9
+      },
+      "id": 2,
+      "links": [],
+      "notcolors": [
+        "rgba(245, 54, 54, 0.9)",
+        "rgba(237, 129, 40, 0.89)",
+        "rgba(50, 172, 45, 0.97)"
+      ],
+      "operatorName": "avg",
+      "operatorOptions": [
+        {
+          "text": "Average",
+          "value": "avg"
+        },
+        {
+          "text": "Count",
+          "value": "count"
+        },
+        {
+          "text": "Current",
+          "value": "current"
+        },
+        {
+          "text": "Delta",
+          "value": "delta"
+        },
+        {
+          "text": "Difference",
+          "value": "diff"
+        },
+        {
+          "text": "First",
+          "value": "first"
+        },
+        {
+          "text": "Log Min",
+          "value": "logmin"
+        },
+        {
+          "text": "Max",
+          "value": "max"
+        },
+        {
+          "text": "Min",
+          "value": "min"
+        },
+        {
+          "text": "Name",
+          "value": "name"
+        },
+        {
+          "text": "Time of Last Point",
+          "value": "last_time"
+        },
+        {
+          "text": "Time Step",
+          "value": "time_step"
+        },
+        {
+          "text": "Total",
+          "value": "total"
+        }
+      ],
+      "polystat": {
+        "animationSpeed": 2500,
+        "columnAutoSize": true,
+        "columns": 1,
+        "defaultClickThrough": "",
+        "defaultClickThroughSanitize": true,
+        "displayLimit": 100,
+        "fontAutoScale": true,
+        "fontSize": 12,
+        "globalDisplayMode": "all",
+        "globalOperatorName": "avg",
+        "gradientEnabled": true,
+        "hexagonSortByDirection": "asc",
+        "hexagonSortByField": "name",
+        "maxMetrics": 0,
+        "polygonBorderColor": "black",
+        "polygonBorderSize": 2,
+        "radius": "",
+        "radiusAutoSize": true,
+        "rowAutoSize": true,
+        "rows": 1,
+        "shape": "hexagon_pointed_top",
+        "tooltipDisplayMode": "all",
+        "tooltipDisplayTextTriggeredEmpty": "OK",
+        "tooltipFontSize": 12,
+        "tooltipFontType": "Open Sans",
+        "tooltipPrimarySortDirection": "desc",
+        "tooltipPrimarySortField": "thresholdLevel",
+        "tooltipSecondarySortDirection": "desc",
+        "tooltipSecondarySortField": "value",
+        "tooltipTimestampEnabled": true
+      },
+      "savedComposites": [],
+      "savedOverrides": [],
+      "shapes": [
+        {
+          "text": "Hexagon Pointed Top",
+          "value": "hexagon_pointed_top"
+        },
+        {
+          "text": "Hexagon Flat Top",
+          "value": "hexagon_flat_top"
+        },
+        {
+          "text": "Circle",
+          "value": "circle"
+        },
+        {
+          "text": "Cross",
+          "value": "cross"
+        },
+        {
+          "text": "Diamond",
+          "value": "diamond"
+        },
+        {
+          "text": "Square",
+          "value": "square"
+        },
+        {
+          "text": "Star",
+          "value": "star"
+        },
+        {
+          "text": "Triangle",
+          "value": "triangle"
+        },
+        {
+          "text": "Wye",
+          "value": "wye"
+        }
+      ],
+      "sortDirections": [
+        {
+          "text": "Ascending",
+          "value": "asc"
+        },
+        {
+          "text": "Descending",
+          "value": "desc"
+        }
+      ],
+      "sortFields": [
+        {
+          "text": "Name",
+          "value": "name"
+        },
+        {
+          "text": "Threshold Level",
+          "value": "thresholdLevel"
+        },
+        {
+          "text": "Value",
+          "value": "value"
+        }
+      ],
+      "svgContainer": {},
+      "targets": [
+        {
+          "alias": "Sensor-A",
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0"
+        },
+        {
+          "alias": "Sensor-B",
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "3433,23432,55"
+        },
+        {
+          "alias": "Sensor-C",
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,2,3,4,5,6"
+        },
+        {
+          "alias": "Sensor-E",
+          "expr": "",
+          "format": "time_series",
+          "intervalFactor": 1,
+          "refId": "D",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0"
+        }
+      ],
+      "thresholdStates": [
+        {
+          "text": "ok",
+          "value": 0
+        },
+        {
+          "text": "warning",
+          "value": 1
+        },
+        {
+          "text": "critical",
+          "value": 2
+        },
+        {
+          "text": "custom",
+          "value": 3
+        }
+      ],
+      "title": "No Value in Sensor-C Bug",
+      "type": "grafana-polystat-panel",
+      "unitFormats": [
+        {
+          "submenu": [
+            {
+              "text": "none",
+              "value": "none"
+            },
+            {
+              "text": "short",
+              "value": "short"
+            },
+            {
+              "text": "percent (0-100)",
+              "value": "percent"
+            },
+            {
+              "text": "percent (0.0-1.0)",
+              "value": "percentunit"
+            },
+            {
+              "text": "Humidity (%H)",
+              "value": "humidity"
+            },
+            {
+              "text": "decibel",
+              "value": "dB"
+            },
+            {
+              "text": "hexadecimal (0x)",
+              "value": "hex0x"
+            },
+            {
+              "text": "hexadecimal",
+              "value": "hex"
+            },
+            {
+              "text": "scientific notation",
+              "value": "sci"
+            },
+            {
+              "text": "locale format",
+              "value": "locale"
+            }
+          ],
+          "text": "none"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Dollars ($)",
+              "value": "currencyUSD"
+            },
+            {
+              "text": "Pounds (£)",
+              "value": "currencyGBP"
+            },
+            {
+              "text": "Euro (€)",
+              "value": "currencyEUR"
+            },
+            {
+              "text": "Yen (¥)",
+              "value": "currencyJPY"
+            },
+            {
+              "text": "Rubles (₽)",
+              "value": "currencyRUB"
+            },
+            {
+              "text": "Hryvnias (₴)",
+              "value": "currencyUAH"
+            },
+            {
+              "text": "Real (R$)",
+              "value": "currencyBRL"
+            },
+            {
+              "text": "Danish Krone (kr)",
+              "value": "currencyDKK"
+            },
+            {
+              "text": "Icelandic Króna (kr)",
+              "value": "currencyISK"
+            },
+            {
+              "text": "Norwegian Krone (kr)",
+              "value": "currencyNOK"
+            },
+            {
+              "text": "Swedish Krona (kr)",
+              "value": "currencySEK"
+            },
+            {
+              "text": "Czech koruna (czk)",
+              "value": "currencyCZK"
+            },
+            {
+              "text": "Swiss franc (CHF)",
+              "value": "currencyCHF"
+            },
+            {
+              "text": "Polish Złoty (PLN)",
+              "value": "currencyPLN"
+            },
+            {
+              "text": "Bitcoin (฿)",
+              "value": "currencyBTC"
+            }
+          ],
+          "text": "currency"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Hertz (1/s)",
+              "value": "hertz"
+            },
+            {
+              "text": "nanoseconds (ns)",
+              "value": "ns"
+            },
+            {
+              "text": "microseconds (µs)",
+              "value": "µs"
+            },
+            {
+              "text": "milliseconds (ms)",
+              "value": "ms"
+            },
+            {
+              "text": "seconds (s)",
+              "value": "s"
+            },
+            {
+              "text": "minutes (m)",
+              "value": "m"
+            },
+            {
+              "text": "hours (h)",
+              "value": "h"
+            },
+            {
+              "text": "days (d)",
+              "value": "d"
+            },
+            {
+              "text": "duration (ms)",
+              "value": "dtdurationms"
+            },
+            {
+              "text": "duration (s)",
+              "value": "dtdurations"
+            },
+            {
+              "text": "duration (hh:mm:ss)",
+              "value": "dthms"
+            },
+            {
+              "text": "Timeticks (s/100)",
+              "value": "timeticks"
+            }
+          ],
+          "text": "time"
+        },
+        {
+          "submenu": [
+            {
+              "text": "YYYY-MM-DD HH:mm:ss",
+              "value": "dateTimeAsIso"
+            },
+            {
+              "text": "DD/MM/YYYY h:mm:ss a",
+              "value": "dateTimeAsUS"
+            },
+            {
+              "text": "From Now",
+              "value": "dateTimeFromNow"
+            }
+          ],
+          "text": "date & time"
+        },
+        {
+          "submenu": [
+            {
+              "text": "bits",
+              "value": "bits"
+            },
+            {
+              "text": "bytes",
+              "value": "bytes"
+            },
+            {
+              "text": "kibibytes",
+              "value": "kbytes"
+            },
+            {
+              "text": "mebibytes",
+              "value": "mbytes"
+            },
+            {
+              "text": "gibibytes",
+              "value": "gbytes"
+            }
+          ],
+          "text": "data (IEC)"
+        },
+        {
+          "submenu": [
+            {
+              "text": "bits",
+              "value": "decbits"
+            },
+            {
+              "text": "bytes",
+              "value": "decbytes"
+            },
+            {
+              "text": "kilobytes",
+              "value": "deckbytes"
+            },
+            {
+              "text": "megabytes",
+              "value": "decmbytes"
+            },
+            {
+              "text": "gigabytes",
+              "value": "decgbytes"
+            }
+          ],
+          "text": "data (Metric)"
+        },
+        {
+          "submenu": [
+            {
+              "text": "packets/sec",
+              "value": "pps"
+            },
+            {
+              "text": "bits/sec",
+              "value": "bps"
+            },
+            {
+              "text": "bytes/sec",
+              "value": "Bps"
+            },
+            {
+              "text": "kilobits/sec",
+              "value": "Kbits"
+            },
+            {
+              "text": "kilobytes/sec",
+              "value": "KBs"
+            },
+            {
+              "text": "megabits/sec",
+              "value": "Mbits"
+            },
+            {
+              "text": "megabytes/sec",
+              "value": "MBs"
+            },
+            {
+              "text": "gigabytes/sec",
+              "value": "GBs"
+            },
+            {
+              "text": "gigabits/sec",
+              "value": "Gbits"
+            }
+          ],
+          "text": "data rate"
+        },
+        {
+          "submenu": [
+            {
+              "text": "hashes/sec",
+              "value": "Hs"
+            },
+            {
+              "text": "kilohashes/sec",
+              "value": "KHs"
+            },
+            {
+              "text": "megahashes/sec",
+              "value": "MHs"
+            },
+            {
+              "text": "gigahashes/sec",
+              "value": "GHs"
+            },
+            {
+              "text": "terahashes/sec",
+              "value": "THs"
+            },
+            {
+              "text": "petahashes/sec",
+              "value": "PHs"
+            },
+            {
+              "text": "exahashes/sec",
+              "value": "EHs"
+            }
+          ],
+          "text": "hash rate"
+        },
+        {
+          "submenu": [
+            {
+              "text": "ops/sec (ops)",
+              "value": "ops"
+            },
+            {
+              "text": "requests/sec (rps)",
+              "value": "reqps"
+            },
+            {
+              "text": "reads/sec (rps)",
+              "value": "rps"
+            },
+            {
+              "text": "writes/sec (wps)",
+              "value": "wps"
+            },
+            {
+              "text": "I/O ops/sec (iops)",
+              "value": "iops"
+            },
+            {
+              "text": "ops/min (opm)",
+              "value": "opm"
+            },
+            {
+              "text": "reads/min (rpm)",
+              "value": "rpm"
+            },
+            {
+              "text": "writes/min (wpm)",
+              "value": "wpm"
+            }
+          ],
+          "text": "throughput"
+        },
+        {
+          "submenu": [
+            {
+              "text": "millimetre (mm)",
+              "value": "lengthmm"
+            },
+            {
+              "text": "meter (m)",
+              "value": "lengthm"
+            },
+            {
+              "text": "feet (ft)",
+              "value": "lengthft"
+            },
+            {
+              "text": "kilometer (km)",
+              "value": "lengthkm"
+            },
+            {
+              "text": "mile (mi)",
+              "value": "lengthmi"
+            }
+          ],
+          "text": "length"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Square Meters (m²)",
+              "value": "areaM2"
+            },
+            {
+              "text": "Square Feet (ft²)",
+              "value": "areaF2"
+            },
+            {
+              "text": "Square Miles (mi²)",
+              "value": "areaMI2"
+            }
+          ],
+          "text": "area"
+        },
+        {
+          "submenu": [
+            {
+              "text": "milligram (mg)",
+              "value": "massmg"
+            },
+            {
+              "text": "gram (g)",
+              "value": "massg"
+            },
+            {
+              "text": "kilogram (kg)",
+              "value": "masskg"
+            },
+            {
+              "text": "metric ton (t)",
+              "value": "masst"
+            }
+          ],
+          "text": "mass"
+        },
+        {
+          "submenu": [
+            {
+              "text": "metres/second (m/s)",
+              "value": "velocityms"
+            },
+            {
+              "text": "kilometers/hour (km/h)",
+              "value": "velocitykmh"
+            },
+            {
+              "text": "miles/hour (mph)",
+              "value": "velocitymph"
+            },
+            {
+              "text": "knot (kn)",
+              "value": "velocityknot"
+            }
+          ],
+          "text": "velocity"
+        },
+        {
+          "submenu": [
+            {
+              "text": "millilitre (mL)",
+              "value": "mlitre"
+            },
+            {
+              "text": "litre (L)",
+              "value": "litre"
+            },
+            {
+              "text": "cubic metre",
+              "value": "m3"
+            },
+            {
+              "text": "Normal cubic metre",
+              "value": "Nm3"
+            },
+            {
+              "text": "cubic decimetre",
+              "value": "dm3"
+            },
+            {
+              "text": "gallons",
+              "value": "gallons"
+            }
+          ],
+          "text": "volume"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Watt (W)",
+              "value": "watt"
+            },
+            {
+              "text": "Kilowatt (kW)",
+              "value": "kwatt"
+            },
+            {
+              "text": "Milliwatt (mW)",
+              "value": "mwatt"
+            },
+            {
+              "text": "Watt per square metre (W/m²)",
+              "value": "Wm2"
+            },
+            {
+              "text": "Volt-ampere (VA)",
+              "value": "voltamp"
+            },
+            {
+              "text": "Kilovolt-ampere (kVA)",
+              "value": "kvoltamp"
+            },
+            {
+              "text": "Volt-ampere reactive (var)",
+              "value": "voltampreact"
+            },
+            {
+              "text": "Kilovolt-ampere reactive (kvar)",
+              "value": "kvoltampreact"
+            },
+            {
+              "text": "Watt-hour (Wh)",
+              "value": "watth"
+            },
+            {
+              "text": "Kilowatt-hour (kWh)",
+              "value": "kwatth"
+            },
+            {
+              "text": "Kilowatt-min (kWm)",
+              "value": "kwattm"
+            },
+            {
+              "text": "Joule (J)",
+              "value": "joule"
+            },
+            {
+              "text": "Electron volt (eV)",
+              "value": "ev"
+            },
+            {
+              "text": "Ampere (A)",
+              "value": "amp"
+            },
+            {
+              "text": "Kiloampere (kA)",
+              "value": "kamp"
+            },
+            {
+              "text": "Milliampere (mA)",
+              "value": "mamp"
+            },
+            {
+              "text": "Volt (V)",
+              "value": "volt"
+            },
+            {
+              "text": "Kilovolt (kV)",
+              "value": "kvolt"
+            },
+            {
+              "text": "Millivolt (mV)",
+              "value": "mvolt"
+            },
+            {
+              "text": "Decibel-milliwatt (dBm)",
+              "value": "dBm"
+            },
+            {
+              "text": "Ohm (Ω)",
+              "value": "ohm"
+            },
+            {
+              "text": "Lumens (Lm)",
+              "value": "lumens"
+            }
+          ],
+          "text": "energy"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Celsius (°C)",
+              "value": "celsius"
+            },
+            {
+              "text": "Farenheit (°F)",
+              "value": "farenheit"
+            },
+            {
+              "text": "Kelvin (K)",
+              "value": "kelvin"
+            }
+          ],
+          "text": "temperature"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Millibars",
+              "value": "pressurembar"
+            },
+            {
+              "text": "Bars",
+              "value": "pressurebar"
+            },
+            {
+              "text": "Kilobars",
+              "value": "pressurekbar"
+            },
+            {
+              "text": "Hectopascals",
+              "value": "pressurehpa"
+            },
+            {
+              "text": "Kilopascals",
+              "value": "pressurekpa"
+            },
+            {
+              "text": "Inches of mercury",
+              "value": "pressurehg"
+            },
+            {
+              "text": "PSI",
+              "value": "pressurepsi"
+            }
+          ],
+          "text": "pressure"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Newton-meters (Nm)",
+              "value": "forceNm"
+            },
+            {
+              "text": "Kilonewton-meters (kNm)",
+              "value": "forcekNm"
+            },
+            {
+              "text": "Newtons (N)",
+              "value": "forceN"
+            },
+            {
+              "text": "Kilonewtons (kN)",
+              "value": "forcekN"
+            }
+          ],
+          "text": "force"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Gallons/min (gpm)",
+              "value": "flowgpm"
+            },
+            {
+              "text": "Cubic meters/sec (cms)",
+              "value": "flowcms"
+            },
+            {
+              "text": "Cubic feet/sec (cfs)",
+              "value": "flowcfs"
+            },
+            {
+              "text": "Cubic feet/min (cfm)",
+              "value": "flowcfm"
+            },
+            {
+              "text": "Litre/hour",
+              "value": "litreh"
+            },
+            {
+              "text": "Litre/min (l/min)",
+              "value": "flowlpm"
+            },
+            {
+              "text": "milliLitre/min (mL/min)",
+              "value": "flowmlpm"
+            }
+          ],
+          "text": "flow"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Degrees (°)",
+              "value": "degree"
+            },
+            {
+              "text": "Radians",
+              "value": "radian"
+            },
+            {
+              "text": "Gradian",
+              "value": "grad"
+            }
+          ],
+          "text": "angle"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Meters/sec²",
+              "value": "accMS2"
+            },
+            {
+              "text": "Feet/sec²",
+              "value": "accFS2"
+            },
+            {
+              "text": "G unit",
+              "value": "accG"
+            }
+          ],
+          "text": "acceleration"
+        },
+        {
+          "submenu": [
+            {
+              "text": "Becquerel (Bq)",
+              "value": "radbq"
+            },
+            {
+              "text": "curie (Ci)",
+              "value": "radci"
+            },
+            {
+              "text": "Gray (Gy)",
+              "value": "radgy"
+            },
+            {
+              "text": "rad",
+              "value": "radrad"
+            },
+            {
+              "text": "Sievert (Sv)",
+              "value": "radsv"
+            },
+            {
+              "text": "rem",
+              "value": "radrem"
+            },
+            {
+              "text": "Exposure (C/kg)",
+              "value": "radexpckg"
+            },
+            {
+              "text": "roentgen (R)",
+              "value": "radr"
+            },
+            {
+              "text": "Sievert/hour (Sv/h)",
+              "value": "radsvh"
+            }
+          ],
+          "text": "radiation"
+        },
+        {
+          "submenu": [
+            {
+              "text": "parts-per-million (ppm)",
+              "value": "ppm"
+            },
+            {
+              "text": "parts-per-billion (ppb)",
+              "value": "conppb"
+            },
+            {
+              "text": "nanogram per cubic metre (ng/m³)",
+              "value": "conngm3"
+            },
+            {
+              "text": "nanogram per normal cubic metre (ng/Nm³)",
+              "value": "conngNm3"
+            },
+            {
+              "text": "microgram per cubic metre (μg/m³)",
+              "value": "conμgm3"
+            },
+            {
+              "text": "microgram per normal cubic metre (μg/Nm³)",
+              "value": "conμgNm3"
+            },
+            {
+              "text": "milligram per cubic metre (mg/m³)",
+              "value": "conmgm3"
+            },
+            {
+              "text": "milligram per normal cubic metre (mg/Nm³)",
+              "value": "conmgNm3"
+            },
+            {
+              "text": "gram per cubic metre (g/m³)",
+              "value": "congm3"
+            },
+            {
+              "text": "gram per normal cubic metre (g/Nm³)",
+              "value": "congNm3"
+            }
+          ],
+          "text": "concentration"
+        }
+      ]
+    }
+  ],
+  "schemaVersion": 16,
+  "style": "dark",
+  "tags": [
+    "panel-test",
+    "gdev"
+  ],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {
+    "refresh_intervals": [
+      "5s",
+      "10s",
+      "30s",
+      "1m",
+      "5m",
+      "15m",
+      "30m",
+      "1h",
+      "2h",
+      "1d"
+    ],
+    "time_options": [
+      "5m",
+      "15m",
+      "1h",
+      "6h",
+      "12h",
+      "24h",
+      "2d",
+      "7d",
+      "30d"
+    ]
+  },
+  "timezone": "",
+  "title": "Panel Tests - Polystat",
+  "version": 5
+}
diff --git a/pkg/services/provisioning/dashboards/config_reader.go b/pkg/services/provisioning/dashboards/config_reader.go
index bfef06b558e..fa08972961d 100644
--- a/pkg/services/provisioning/dashboards/config_reader.go
+++ b/pkg/services/provisioning/dashboards/config_reader.go
@@ -1,6 +1,7 @@
 package dashboards
 
 import (
+	"fmt"
 	"io/ioutil"
 	"os"
 	"path/filepath"
@@ -69,7 +70,7 @@ func (cr *configReader) readConfig() ([]*DashboardsAsConfig, error) {
 
 		parsedDashboards, err := cr.parseConfigs(file)
 		if err != nil {
-			return nil, err
+			return nil, fmt.Errorf("could not parse provisioning config file: %s error: %v", file.Name(), err)
 		}
 
 		if len(parsedDashboards) > 0 {
diff --git a/pkg/services/provisioning/dashboards/file_reader.go b/pkg/services/provisioning/dashboards/file_reader.go
index f9590b01bf1..1c1819df8a9 100644
--- a/pkg/services/provisioning/dashboards/file_reader.go
+++ b/pkg/services/provisioning/dashboards/file_reader.go
@@ -118,6 +118,7 @@ func (fr *fileReader) startWalkingDisk() error {
 
 	return nil
 }
+
 func (fr *fileReader) deleteDashboardIfFileIsMissing(provisionedDashboardRefs map[string]*models.DashboardProvisioning, filesFoundOnDisk map[string]os.FileInfo) {
 	if fr.Cfg.DisableDeletion {
 		return
@@ -180,7 +181,7 @@ func (fr *fileReader) saveDashboard(path string, folderId int64, fileInfo os.Fil
 		dash.Dashboard.SetId(provisionedData.DashboardId)
 	}
 
-	fr.log.Debug("saving new dashboard", "file", path)
+	fr.log.Debug("saving new dashboard", "provisoner", fr.Cfg.Name, "file", path, "folderId", dash.Dashboard.FolderId)
 	dp := &models.DashboardProvisioning{
 		ExternalId: path,
 		Name:       fr.Cfg.Name,
diff --git a/pkg/services/provisioning/dashboards/file_reader_test.go b/pkg/services/provisioning/dashboards/file_reader_test.go
index fe849816553..1a9d2216e7a 100644
--- a/pkg/services/provisioning/dashboards/file_reader_test.go
+++ b/pkg/services/provisioning/dashboards/file_reader_test.go
@@ -166,6 +166,36 @@ func TestDashboardFileReader(t *testing.T) {
 				_, err := NewDashboardFileReader(cfg, logger)
 				So(err, ShouldBeNil)
 			})
+
+			Convey("Two dashboard providers should be able to provisioned the same dashboard without uid", func() {
+				cfg1 := &DashboardsAsConfig{Name: "1", Type: "file", OrgId: 1, Folder: "f1", Options: map[string]interface{}{"path": containingId}}
+				cfg2 := &DashboardsAsConfig{Name: "2", Type: "file", OrgId: 1, Folder: "f2", Options: map[string]interface{}{"path": containingId}}
+
+				reader1, err := NewDashboardFileReader(cfg1, logger)
+				So(err, ShouldBeNil)
+
+				err = reader1.startWalkingDisk()
+				So(err, ShouldBeNil)
+
+				reader2, err := NewDashboardFileReader(cfg2, logger)
+				So(err, ShouldBeNil)
+
+				err = reader2.startWalkingDisk()
+				So(err, ShouldBeNil)
+
+				var folderCount int
+				var dashCount int
+				for _, o := range fakeService.inserted {
+					if o.Dashboard.IsFolder {
+						folderCount++
+					} else {
+						dashCount++
+					}
+				}
+
+				So(folderCount, ShouldEqual, 2)
+				So(dashCount, ShouldEqual, 2)
+			})
 		})
 
 		Convey("Should not create new folder if folder name is missing", func() {
@@ -256,7 +286,9 @@ func (ffi FakeFileInfo) Sys() interface{} {
 }
 
 func mockDashboardProvisioningService() *fakeDashboardProvisioningService {
-	mock := fakeDashboardProvisioningService{}
+	mock := fakeDashboardProvisioningService{
+		provisioned: map[string][]*models.DashboardProvisioning{},
+	}
 	dashboards.NewProvisioningService = func() dashboards.DashboardProvisioningService {
 		return &mock
 	}
@@ -265,17 +297,26 @@ func mockDashboardProvisioningService() *fakeDashboardProvisioningService {
 
 type fakeDashboardProvisioningService struct {
 	inserted     []*dashboards.SaveDashboardDTO
-	provisioned  []*models.DashboardProvisioning
+	provisioned  map[string][]*models.DashboardProvisioning
 	getDashboard []*models.Dashboard
 }
 
 func (s *fakeDashboardProvisioningService) GetProvisionedDashboardData(name string) ([]*models.DashboardProvisioning, error) {
-	return s.provisioned, nil
+	if _, ok := s.provisioned[name]; !ok {
+		s.provisioned[name] = []*models.DashboardProvisioning{}
+	}
+
+	return s.provisioned[name], nil
 }
 
 func (s *fakeDashboardProvisioningService) SaveProvisionedDashboard(dto *dashboards.SaveDashboardDTO, provisioning *models.DashboardProvisioning) (*models.Dashboard, error) {
 	s.inserted = append(s.inserted, dto)
-	s.provisioned = append(s.provisioned, provisioning)
+
+	if _, ok := s.provisioned[provisioning.Name]; !ok {
+		s.provisioned[provisioning.Name] = []*models.DashboardProvisioning{}
+	}
+
+	s.provisioned[provisioning.Name] = append(s.provisioned[provisioning.Name], provisioning)
 	return dto.Dashboard, nil
 }
 
diff --git a/pkg/services/sqlstore/dashboard_provisioning.go b/pkg/services/sqlstore/dashboard_provisioning.go
index 33fbb01c5b7..9b180662278 100644
--- a/pkg/services/sqlstore/dashboard_provisioning.go
+++ b/pkg/services/sqlstore/dashboard_provisioning.go
@@ -51,7 +51,7 @@ func SaveProvisionedDashboard(cmd *models.SaveProvisionedDashboardCommand) error
 func saveProvionedData(sess *DBSession, cmd *models.DashboardProvisioning, dashboard *models.Dashboard) error {
 	result := &models.DashboardProvisioning{}
 
-	exist, err := sess.Where("dashboard_id=?", dashboard.Id).Get(result)
+	exist, err := sess.Where("dashboard_id=? AND name = ?", dashboard.Id, cmd.Name).Get(result)
 	if err != nil {
 		return err
 	}

From aa799c6f0b18e919694bc2dbd04d5377fb258575 Mon Sep 17 00:00:00 2001
From: Mohammed Salman Khan <coder.salman@gmail.com>
Date: Mon, 14 Jan 2019 10:53:16 -0500
Subject: [PATCH 304/352] Fixed Syntax for folder permission's JSON

---
 docs/sources/http_api/folder_permissions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/sources/http_api/folder_permissions.md b/docs/sources/http_api/folder_permissions.md
index 284ab70866f..39cbbc3720a 100644
--- a/docs/sources/http_api/folder_permissions.md
+++ b/docs/sources/http_api/folder_permissions.md
@@ -105,7 +105,7 @@ POST /api/folders/nErXDvCkzz/permissions
 Accept: application/json
 Content-Type: application/json
 Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
-
+{
   "items": [
     {
       "role": "Viewer",

From d7a3f91b3c4bd10878712ed382d94773a3603c1e Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Mon, 14 Jan 2019 17:25:43 +0100
Subject: [PATCH 305/352] stackdriver: fixes space before caret icon in query
 editor

---
 .../plugins/datasource/stackdriver/components/Help.tsx    | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index 43cbe13e334..c50beae02b3 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -40,17 +40,15 @@ export class Help extends React.Component<Props, State> {
         <div className="gf-form-inline">
           <Project datasource={datasource} />
           <div className="gf-form" onClick={() => this.onHelpClicked()}>
-            <label className="gf-form-label query-keyword">
-              Show Help
-              <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
+            <label className="gf-form-label query-keyword pointer">
+              Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
             </label>
           </div>
 
           {rawQuery && (
             <div className="gf-form" onClick={() => this.onRawQueryClicked()}>
               <label className="gf-form-label query-keyword">
-                Raw Query
-                <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
+                Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
               </label>
             </div>
           )}

From ce3117507afaedeca3bc7b91f7d036b64066bdf2 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Mon, 14 Jan 2019 17:40:47 +0100
Subject: [PATCH 306/352] Prometheus: Fix annotation step calculation

- since e731c248d7d7885d8f2e2d81bbce3dda4b35c31e step calculation for
annotation queries was broken
- this change puts the interval in the correct parameter so it gets
considered in `createQuery`
- added tests
---
 .../datasource/prometheus/datasource.ts       | 10 ++-
 .../prometheus/specs/datasource.test.ts       | 73 +++++++++++++++++++
 2 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts
index 2c7c62d881b..ceaf88fb477 100644
--- a/public/app/plugins/datasource/prometheus/datasource.ts
+++ b/public/app/plugins/datasource/prometheus/datasource.ts
@@ -219,8 +219,9 @@ export class PrometheusDatasource {
     };
     const range = Math.ceil(end - start);
 
+    // options.interval is the dynamically calculated interval
     let interval = kbn.interval_to_seconds(options.interval);
-    // Minimum interval ("Min step"), if specified for the query. or same as interval otherwise
+    // Minimum interval ("Min step"), if specified for the query or datasource. or same as interval otherwise
     const minInterval = kbn.interval_to_seconds(
       this.templateSrv.replace(target.interval, options.scopedVars) || options.interval
     );
@@ -366,12 +367,13 @@ export class PrometheusDatasource {
     const step = annotation.step || '60s';
     const start = this.getPrometheusTime(options.range.from, false);
     const end = this.getPrometheusTime(options.range.to, true);
-    // Unsetting min interval
     const queryOptions = {
       ...options,
-      interval: '0s',
+      interval: step,
     };
-    const query = this.createQuery({ expr, interval: step }, queryOptions, start, end);
+    // Unsetting min interval for accurate event resolution
+    const minStep = '1s';
+    const query = this.createQuery({ expr, interval: minStep }, queryOptions, start, end);
 
     const self = this;
     return this.performTimeSeriesQuery(query, query.start, query.end).then(results => {
diff --git a/public/app/plugins/datasource/prometheus/specs/datasource.test.ts b/public/app/plugins/datasource/prometheus/specs/datasource.test.ts
index bff35c7ba88..46b37d37b8e 100644
--- a/public/app/plugins/datasource/prometheus/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/prometheus/specs/datasource.test.ts
@@ -577,6 +577,79 @@ describe('PrometheusDatasource', () => {
         expect(results[0].time).toEqual(1);
       });
     });
+
+    describe('step parameter', () => {
+      beforeEach(() => {
+        backendSrv.datasourceRequest = jest.fn(() => Promise.resolve(response));
+        ctx.ds = new PrometheusDatasource(instanceSettings, q, backendSrv as any, templateSrv, timeSrv);
+      });
+
+      it('should use default step for short range if no interval is given', () => {
+        const query = {
+          ...options,
+          range: {
+            from: time({ seconds: 63 }),
+            to: time({ seconds: 123 }),
+          },
+        };
+        ctx.ds.annotationQuery(query);
+        const req = backendSrv.datasourceRequest.mock.calls[0][0];
+        expect(req.url).toContain('step=60');
+      });
+
+      it('should use custom step for short range', () => {
+        const annotation = {
+          ...options.annotation,
+          step: '10s',
+        };
+        const query = {
+          ...options,
+          annotation,
+          range: {
+            from: time({ seconds: 63 }),
+            to: time({ seconds: 123 }),
+          },
+        };
+        ctx.ds.annotationQuery(query);
+        const req = backendSrv.datasourceRequest.mock.calls[0][0];
+        expect(req.url).toContain('step=10');
+      });
+
+      it('should use custom step for short range', () => {
+        const annotation = {
+          ...options.annotation,
+          step: '10s',
+        };
+        const query = {
+          ...options,
+          annotation,
+          range: {
+            from: time({ seconds: 63 }),
+            to: time({ seconds: 123 }),
+          },
+        };
+        ctx.ds.annotationQuery(query);
+        const req = backendSrv.datasourceRequest.mock.calls[0][0];
+        expect(req.url).toContain('step=10');
+      });
+
+      it('should use dynamic step on long ranges if no option was given', () => {
+        const query = {
+          ...options,
+          range: {
+            from: time({ seconds: 63 }),
+            to: time({ hours: 24 * 30, seconds: 63 }),
+          },
+        };
+        ctx.ds.annotationQuery(query);
+        const req = backendSrv.datasourceRequest.mock.calls[0][0];
+        // Range in seconds: (to - from) / 1000
+        // Max_datapints: 11000
+        // Step: range / max_datapints
+        const step = 236;
+        expect(req.url).toContain(`step=${step}`);
+      });
+    });
   });
 
   describe('When resultFormat is table and instant = true', () => {

From b4a51ad7cee3e53fed1fe14ccacaa2bdab76a533 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Mon, 14 Jan 2019 17:52:06 +0100
Subject: [PATCH 307/352] stackdriver: add help text for bucket alias

---
 public/app/plugins/datasource/stackdriver/components/Help.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index c50beae02b3..27acace369f 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -95,6 +95,10 @@ export class Help extends React.Component<Props, State> {
                 <li>
                   <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
                 </li>
+                <li>
+                  <code>{`${'{{bucket}}'}`}</code> = bucket boundary for distribution metrics when using a heatmap in
+                  Grafana
+                </li>
               </ul>
             </pre>
           </div>

From 03c6cc59a756a377c30bdaf4f7791cae3074bce1 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Mon, 14 Jan 2019 18:01:19 +0100
Subject: [PATCH 308/352] changelog

---
 CHANGELOG.md | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f7f21a2a03..26efcaec081 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,18 +12,25 @@
 * **Auth**: Prevent password reset when login form is disabled or either LDAP or Auth Proxy is enabled [#14246](https://github.com/grafana/grafana/issues/14246), thx [@SilverFire](https://github.com/SilverFire)
 * **Dataproxy**: Override incoming Authorization header [#13815](https://github.com/grafana/grafana/issues/13815), thx [@kornholi](https://github.com/kornholi)
 * **Admin**: Fix prevent removing last grafana admin permissions [#11067](https://github.com/grafana/grafana/issues/11067), thx [@danielbh](https://github.com/danielbh)
-* **Templating**: Escaping "Custom" template variables [#13754](https://github.com/grafana/grafana/issues/13754), thx [@IntegersOfK](https://github.com/IntegersOfK)
+* **Templating**: Escaping "Custom" template variables [#13754](https://github.com/grafana/grafana/issues/13754), thx [@IntegersOfK]req(https://github.com/IntegersOfK)
 * **Admin**: When multiple user invitations, all links are the same as the first user who was invited [#14483](https://github.com/grafana/grafana/issues/14483)
 * **LDAP**: Upgrade go-ldap to v3 [#14548](https://github.com/grafana/grafana/issues/14548)
 * **Proxy whitelist**: Add CIDR capability to auth_proxy whitelist [#14546](https://github.com/grafana/grafana/issues/14546), thx [@jacobrichard](https://github.com/jacobrichard)
 * **OAuth**: Support OAuth providers that are not RFC6749 compliant [#14562](https://github.com/grafana/grafana/issues/14562), thx [@tdabasinskas](https://github.com/tdabasinskas)
 * **Units**: Add blood glucose level units mg/dL and mmol/L [#14519](https://github.com/grafana/grafana/issues/14519), thx [@kjedamzik](https://github.com/kjedamzik)
 * **Stackdriver**: Aggregating series returns more than one series [#14581](https://github.com/grafana/grafana/issues/14581) and [#13914](https://github.com/grafana/grafana/issues/13914), thx [@kinok](https://github.com/kinok)
-* **Docker**: Build and publish docker images for armv7 and arm64 [#14617](https://github.com/grafana/grafana/pull/14617), thx [@johanneswuerbach](https://github.com/johanneswuerbach)
 
 ### Bug fixes
 * **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)
 
+# 5.4.3 (2019-01-14)
+* **Docker**: Build and publish docker images for armv7 and arm64 [#14617](https://github.com/grafana/grafana/pull/14617), thx [@johanneswuerbach](https://github.com/johanneswuerbach)
+
+### Bug fixes
+* **Alerting** Invalid frequency causes division by zero in alert scheduler [#14810](https://github.com/grafana/grafana/issues/14810)
+* **Dashboard** Dashboard links do not update when time range changes [#14493](https://github.com/grafana/grafana/issues/14493)
+
+
 # 5.4.2 (2018-12-13)
 
 * **Datasource admin**: Fix for issue creating new data source when same name exists [#14467](https://github.com/grafana/grafana/issues/14467)

From 18abb87cbbabbbef980b875166d072b8031c57d4 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Mon, 14 Jan 2019 18:23:01 +0100
Subject: [PATCH 309/352] stackdriver: small fixes after reactifying

---
 public/app/core/angular_wrappers.ts                  |  8 ++++----
 .../stackdriver/components/Aggregations.tsx          |  8 ++++----
 .../datasource/stackdriver/components/AliasBy.tsx    | 11 +++--------
 .../stackdriver/components/AlignmentPeriods.tsx      |  2 +-
 .../datasource/stackdriver/components/Alignments.tsx |  2 +-
 .../stackdriver/components/AnnotationQueryEditor.tsx |  6 +++---
 .../datasource/stackdriver/components/Help.tsx       | 12 ++++++------
 .../datasource/stackdriver/components/Metrics.tsx    | 12 ++++++------
 .../stackdriver/components/QueryEditor.tsx           |  6 +++---
 .../stackdriver/partials/annotations.editor.html     |  4 ++--
 .../stackdriver/partials/query.editor.html           |  4 ++--
 11 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 7c87fbecc02..65eb68966ff 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -1,6 +1,6 @@
 import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
-import { AnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
+import { QueryEditor as StackdriverQueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
+import { AnnotationQueryEditor as StackdriverAnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@@ -41,7 +41,7 @@ export function registerAngularDirectives() {
     'placeholder',
     ['variables', { watchDepth: 'reference' }],
   ]);
-  react2AngularDirective('queryEditor', QueryEditor, [
+  react2AngularDirective('stackdriverQueryEditor', StackdriverQueryEditor, [
     'target',
     'onQueryChange',
     'onExecuteQuery',
@@ -49,7 +49,7 @@ export function registerAngularDirectives() {
     ['datasource', { watchDepth: 'reference' }],
     ['templateSrv', { watchDepth: 'reference' }],
   ]);
-  react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+  react2AngularDirective('stackdriverAnnotationQueryEditor', StackdriverAnnotationQueryEditor, [
     'target',
     'onQueryChange',
     'onExecuteQuery',
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 7ae0e506a0b..d20c70ca72d 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -52,11 +52,11 @@ export class Aggregations extends React.Component<Props, State> {
     this.setState({ aggOptions });
   }
 
-  onToggleDisplayAdvanced() {
+  onToggleDisplayAdvanced = () => {
     this.setState(state => ({
       displayAdvancedOptions: !state.displayAdvancedOptions,
     }));
-  }
+  };
 
   render() {
     const { displayAdvancedOptions, aggOptions } = this.state;
@@ -68,7 +68,7 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
             <MetricSelect
-              onChange={value => onChange(value)}
+              onChange={onChange}
               value={crossSeriesReducer}
               variables={templateSrv.variables}
               options={aggOptions}
@@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> {
           </div>
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
-              <a onClick={() => this.onToggleDisplayAdvanced()}>
+              <a onClick={this.onToggleDisplayAdvanced}>
                 <>
                   <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
                 </>
diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index c3445053627..64bd6ebe28d 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -29,10 +29,10 @@ export class AliasBy extends Component<Props, State> {
     }
   }
 
-  onChange(e) {
+  onChange = e => {
     this.setState({ value: e.target.value });
     this.propagateOnChange(e.target.value);
-  }
+  };
 
   render() {
     return (
@@ -40,12 +40,7 @@ export class AliasBy extends Component<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
-            <input
-              type="text"
-              className="gf-form-input width-24"
-              value={this.state.value}
-              onChange={e => this.onChange(e)}
-            />
+            <input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />
diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
index e5ac77ed6fb..db7d1c3ba86 100644
--- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -29,7 +29,7 @@ export const AlignmentPeriods: SFC<Props> = ({
         <div className="gf-form">
           <label className="gf-form-label query-keyword width-9">Alignment Period</label>
           <MetricSelect
-            onChange={value => onChange(value)}
+            onChange={onChange}
             value={alignmentPeriod}
             variables={templateSrv.variables}
             options={[
diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
index e72cafaf808..cb174f6fbec 100644
--- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -17,7 +17,7 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange
         <div className="gf-form offset-width-9">
           <label className="gf-form-label query-keyword width-15">Aligner</label>
           <MetricSelect
-            onChange={value => onChange(value)}
+            onChange={onChange}
             value={perSeriesAligner}
             variables={templateSrv.variables}
             options={alignOptions}
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index d5f8e3af78e..f3264176a83 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -40,7 +40,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     });
   }
 
-  onMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange = ({ valueType, metricKind, type, unit }) => {
     const { onQueryChange } = this.props;
     this.setState(
       {
@@ -53,7 +53,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         onQueryChange(this.state);
       }
     );
-  }
+  };
 
   onChange(prop, value) {
     this.setState({ [prop]: value }, () => {
@@ -72,7 +72,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={templateSrv}
           datasource={datasource}
-          onChange={value => this.onMetricTypeChange(value)}
+          onChange={this.onMetricTypeChange}
         >
           {metric => (
             <>
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index 27acace369f..8e1acdef7fc 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -19,13 +19,13 @@ export class Help extends React.Component<Props, State> {
     displaRawQuery: false,
   };
 
-  onHelpClicked() {
+  onHelpClicked = () => {
     this.setState({ displayHelp: !this.state.displayHelp });
-  }
+  };
 
-  onRawQueryClicked() {
+  onRawQueryClicked = () => {
     this.setState({ displaRawQuery: !this.state.displaRawQuery });
-  }
+  };
 
   shouldComponentUpdate(nextProps) {
     return nextProps.metricDescriptor !== null;
@@ -39,14 +39,14 @@ export class Help extends React.Component<Props, State> {
       <>
         <div className="gf-form-inline">
           <Project datasource={datasource} />
-          <div className="gf-form" onClick={() => this.onHelpClicked()}>
+          <div className="gf-form" onClick={this.onHelpClicked}>
             <label className="gf-form-label query-keyword pointer">
               Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
             </label>
           </div>
 
           {rawQuery && (
-            <div className="gf-form" onClick={() => this.onRawQueryClicked()}>
+            <div className="gf-form" onClick={this.onRawQueryClicked}>
               <label className="gf-form-label query-keyword">
                 Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
               </label>
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index 55dbbfa31ac..fbd7ad8f735 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -100,7 +100,7 @@ export class Metrics extends React.Component<Props, State> {
     return metricsByService;
   }
 
-  onServiceChange(service) {
+  onServiceChange = service => {
     const { metricDescriptors } = this.state;
     const { templateSrv, metricType } = this.props;
 
@@ -116,13 +116,13 @@ export class Metrics extends React.Component<Props, State> {
     if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
       this.onMetricTypeChange(metrics[0].value);
     }
-  }
+  };
 
-  onMetricTypeChange(value) {
+  onMetricTypeChange = value => {
     const metricDescriptor = this.getSelectedMetricDescriptor(value);
     this.setState({ metricDescriptor });
     this.props.onChange({ ...metricDescriptor, type: value });
-  }
+  };
 
   getServicesList(metricDescriptors: MetricDescriptor[]) {
     const services = metricDescriptors.map(m => ({
@@ -153,7 +153,7 @@ export class Metrics extends React.Component<Props, State> {
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Service</span>
             <MetricSelect
-              onChange={value => this.onServiceChange(value)}
+              onChange={this.onServiceChange}
               value={service}
               options={services}
               isSearchable={false}
@@ -169,7 +169,7 @@ export class Metrics extends React.Component<Props, State> {
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Metric</span>
             <MetricSelect
-              onChange={value => this.onMetricTypeChange(value)}
+              onChange={this.onMetricTypeChange}
               value={metricType}
               variables={templateSrv.variables}
               options={[
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 3175a840d70..6af66bad579 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -99,7 +99,7 @@ export class QueryEditor extends React.Component<Props, State> {
     this.setState({ lastQuery, lastQueryError });
   }
 
-  onMetricTypeChange({ valueType, metricKind, type, unit }: MetricDescriptor) {
+  onMetricTypeChange = ({ valueType, metricKind, type, unit }: MetricDescriptor) => {
     const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@@ -119,7 +119,7 @@ export class QueryEditor extends React.Component<Props, State> {
         onExecuteQuery();
       }
     );
-  }
+  };
 
   onPropertyChange(prop, value) {
     this.setState({ [prop]: value }, () => {
@@ -153,7 +153,7 @@ export class QueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={templateSrv}
           datasource={datasource}
-          onChange={value => this.onMetricTypeChange(value)}
+          onChange={this.onMetricTypeChange}
         >
           {metric => (
             <>
diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
index ccc62258ba5..454f86bf579 100644
--- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
@@ -1,6 +1,6 @@
-<annotation-query-editor
+<stackdriver-annotation-query-editor
   target="ctrl.annotation.target"
   on-query-change="(ctrl.onQueryChange)"
   datasource="ctrl.datasource"
   template-srv="ctrl.templateSrv"
-></annotation-query-editor>
+></stackdriver-annotation-query-editor>
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 1b9b208a110..520c3d20f29 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -1,10 +1,10 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <query-editor
+  <stackdriver-query-editor
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
     datasource="ctrl.datasource"
     template-srv="ctrl.templateSrv"
     on-query-change="(ctrl.onQueryChange)"
     on-execute-query="(ctrl.onExecuteQuery)"
-  ></query-editor>
+  ></stackdriver-query-editor>
 </query-editor-row>

From 6b4dcb38eaf4002cbafcb92766957fc57350a7a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 14 Jan 2019 21:21:58 +0100
Subject: [PATCH 310/352] Restored http settings directive that was hidden in
 an unused angular controller page

---
 public/app/features/all.ts                    |  1 +
 .../partials/http_settings.html}              |  0
 .../datasources/settings/HttpSettingsCtrl.ts  | 26 +++++++++++++++++++
 3 files changed, 27 insertions(+)
 rename public/app/features/{plugins/partials/ds_http_settings.html => datasources/partials/http_settings.html} (100%)
 create mode 100644 public/app/features/datasources/settings/HttpSettingsCtrl.ts

diff --git a/public/app/features/all.ts b/public/app/features/all.ts
index b1283fdfd3e..1ba6a85899c 100644
--- a/public/app/features/all.ts
+++ b/public/app/features/all.ts
@@ -11,3 +11,4 @@ import './alerting/NotificationsListCtrl';
 import './manage-dashboards';
 import './teams/CreateTeamCtrl';
 import './profile/all';
+import './datasources/settings/HttpSettingsCtrl';
diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/datasources/partials/http_settings.html
similarity index 100%
rename from public/app/features/plugins/partials/ds_http_settings.html
rename to public/app/features/datasources/partials/http_settings.html
diff --git a/public/app/features/datasources/settings/HttpSettingsCtrl.ts b/public/app/features/datasources/settings/HttpSettingsCtrl.ts
new file mode 100644
index 00000000000..47022c283f8
--- /dev/null
+++ b/public/app/features/datasources/settings/HttpSettingsCtrl.ts
@@ -0,0 +1,26 @@
+import { coreModule } from 'app/core/core';
+
+coreModule.directive('datasourceHttpSettings', () => {
+  return {
+    scope: {
+      current: '=',
+      suggestUrl: '@',
+      noDirectAccess: '@',
+    },
+    templateUrl: 'public/app/features/datasources/partials/http_settings.html',
+    link: {
+      pre: ($scope, elem, attrs) => {
+        // do not show access option if direct access is disabled
+        $scope.showAccessOption = $scope.noDirectAccess !== 'true';
+        $scope.showAccessHelp = false;
+        $scope.toggleAccessHelp = () => {
+          $scope.showAccessHelp = !$scope.showAccessHelp;
+        };
+
+        $scope.getSuggestUrls = () => {
+          return [$scope.suggestUrl];
+        };
+      },
+    },
+  };
+});

From 7b1aed6caf186bdf42a30c5c652009664dee3e82 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Mon, 14 Jan 2019 23:43:31 +0100
Subject: [PATCH 311/352] stackdriver: converts some variables from any to
 types

---
 .../datasource/stackdriver/annotations_query_ctrl.ts        | 4 +++-
 .../datasource/stackdriver/components/Aggregations.test.tsx | 3 ++-
 .../datasource/stackdriver/components/Aggregations.tsx      | 3 ++-
 .../datasource/stackdriver/components/AlignmentPeriods.tsx  | 3 ++-
 .../datasource/stackdriver/components/Alignments.tsx        | 6 ++++--
 .../plugins/datasource/stackdriver/components/Filter.tsx    | 6 ++++--
 .../plugins/datasource/stackdriver/components/Metrics.tsx   | 3 ++-
 .../datasource/stackdriver/components/QueryEditor.test.tsx  | 2 +-
 .../datasource/stackdriver/components/QueryEditor.tsx       | 6 ++++--
 .../components/__snapshots__/QueryEditor.test.tsx.snap      | 4 ++--
 public/app/plugins/datasource/stackdriver/query_ctrl.ts     | 3 ++-
 11 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
index 8827e9e9746..c4d6c137f35 100644
--- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
@@ -1,7 +1,9 @@
+import { TemplateSrv } from 'app/features/templating/template_srv';
+
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
   annotation: any;
-  templateSrv: any;
+  templateSrv: TemplateSrv;
 
   /** @ngInject */
   constructor(templateSrv) {
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
index 160dd4d2105..2402cc5da2c 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx
@@ -3,10 +3,11 @@ import renderer from 'react-test-renderer';
 import { Aggregations, Props } from './Aggregations';
 import { shallow } from 'enzyme';
 import { ValueTypes, MetricKind } from '../constants';
+import { TemplateSrvStub } from 'test/specs/helpers';
 
 const props: Props = {
   onChange: () => {},
-  templateSrv: {},
+  templateSrv: new TemplateSrvStub(),
   metricDescriptor: {
     valueType: '',
     metricKind: '',
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index d20c70ca72d..c616d55ba7a 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -3,10 +3,11 @@ import _ from 'lodash';
 
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 import { getAggregationOptionsByMetric } from '../functions';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export interface Props {
   onChange: (metricDescriptor) => void;
-  templateSrv: any;
+  templateSrv: TemplateSrv;
   metricDescriptor: {
     valueType: string;
     metricKind: string;
diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
index db7d1c3ba86..0a8715714da 100644
--- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -4,10 +4,11 @@ import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 import { alignmentPeriods, alignOptions } from '../constants';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export interface Props {
   onChange: (alignmentPeriod) => void;
-  templateSrv: any;
+  templateSrv: TemplateSrv;
   alignmentPeriod: string;
   perSeriesAligner: string;
   usedAlignmentPeriod: string;
diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
index cb174f6fbec..b97cce9e620 100644
--- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -2,11 +2,13 @@ import React, { SFC } from 'react';
 import _ from 'lodash';
 
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import { SelectOptionItem } from '@grafana/ui';
 
 export interface Props {
   onChange: (perSeriesAligner) => void;
-  templateSrv: any;
-  alignOptions: any[];
+  templateSrv: TemplateSrv;
+  alignOptions: SelectOptionItem[];
   perSeriesAligner: string;
 }
 
diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
index 7cd14235ab3..6c63f1ed891 100644
--- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx
@@ -4,16 +4,18 @@ import appEvents from 'app/core/app_events';
 
 import { QueryMeta } from '../types';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import StackdriverDatasource from '../datasource';
 import '../query_filter_ctrl';
 
 export interface Props {
   filtersChanged: (filters: string[]) => void;
   groupBysChanged?: (groupBys: string[]) => void;
   metricType: string;
-  templateSrv: any;
+  templateSrv: TemplateSrv;
   groupBys?: string[];
   filters: string[];
-  datasource: any;
+  datasource: StackdriverDatasource;
   refId: string;
   hideGroupBys: boolean;
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index fbd7ad8f735..39a0c45cca1 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -5,10 +5,11 @@ import StackdriverDatasource from '../datasource';
 import appEvents from 'app/core/app_events';
 import { MetricDescriptor } from '../types';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export interface Props {
   onChange: (metricDescriptor: MetricDescriptor) => void;
-  templateSrv: any;
+  templateSrv: TemplateSrv;
   datasource: StackdriverDatasource;
   defaultProject: string;
   metricType: string;
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
index b4fc02fb24a..b8830d4fd11 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx
@@ -11,7 +11,7 @@ const props: Props = {
   datasource: {
     getDefaultProject: () => Promise.resolve('project'),
     getMetricTypes: () => Promise.resolve([]),
-  },
+  } as any,
   templateSrv: new TemplateSrv(),
 };
 
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index 6af66bad579..94521041416 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -12,18 +12,20 @@ import { AliasBy } from './AliasBy';
 import { Help } from './Help';
 import { Target, MetricDescriptor } from '../types';
 import { getAlignmentPickerData } from '../functions';
+import StackdriverDatasource from '../datasource';
+import { SelectOptionItem } from '@grafana/ui';
 
 export interface Props {
   onQueryChange: (target: Target) => void;
   onExecuteQuery: () => void;
   target: Target;
   events: any;
-  datasource: any;
+  datasource: StackdriverDatasource;
   templateSrv: TemplateSrv;
 }
 
 interface State extends Target {
-  alignOptions: any[];
+  alignOptions: SelectOptionItem[];
   lastQuery: string;
   lastQueryError: string;
   [key: string]: any;
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
index c93b062c31e..1ae6d157bf2 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -436,9 +436,9 @@ Array [
       onClick={[Function]}
     >
       <label
-        className="gf-form-label query-keyword"
+        className="gf-form-label query-keyword pointer"
       >
-        Show Help
+        Show Help 
         <i
           className="fa fa-caret-right"
         />
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index 3de2af919f5..c6a8a4d9782 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
@@ -2,10 +2,11 @@ import _ from 'lodash';
 
 import { QueryCtrl } from 'app/plugins/sdk';
 import { Target } from './types';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
-  templateSrv: any;
+  templateSrv: TemplateSrv;
 
   /** @ngInject */
   constructor($scope, $injector, templateSrv) {

From 191f60345929daa37040a060683cdb2b1d9fa0f1 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Tue, 15 Jan 2019 09:35:10 +0100
Subject: [PATCH 312/352] docs: add a title to the Explore docs

---
 docs/sources/features/explore/index.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/sources/features/explore/index.md b/docs/sources/features/explore/index.md
index 438943b3243..0ba3d2f7d44 100644
--- a/docs/sources/features/explore/index.md
+++ b/docs/sources/features/explore/index.md
@@ -1,5 +1,6 @@
 +++
 title = "Explore"
+keywords = ["explore", "loki", "logs"]
 type = "docs"
 [menu.docs]
 name = "Explore"
@@ -8,7 +9,11 @@ parent = "features"
 weight = 5
 +++
 
-# Introduction
+# Explore
+
+> Explore is only available in Grafana 6.0 and above.
+
+## Introduction
 
 One of the major new features of Grafana 6.0 is the new query-focused Explore workflow for troubleshooting and/or for data exploration.
 

From 1c0a385df1a6445832e4717d05608e4e3d5cf634 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Tue, 15 Jan 2019 10:37:56 +0100
Subject: [PATCH 313/352] changelog: adds ntoe about closing #12864

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26efcaec081..1e03282256f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 * **OAuth**: Support OAuth providers that are not RFC6749 compliant [#14562](https://github.com/grafana/grafana/issues/14562), thx [@tdabasinskas](https://github.com/tdabasinskas)
 * **Units**: Add blood glucose level units mg/dL and mmol/L [#14519](https://github.com/grafana/grafana/issues/14519), thx [@kjedamzik](https://github.com/kjedamzik)
 * **Stackdriver**: Aggregating series returns more than one series [#14581](https://github.com/grafana/grafana/issues/14581) and [#13914](https://github.com/grafana/grafana/issues/13914), thx [@kinok](https://github.com/kinok)
+* **Provisioning**: Fixes bug causing infinite growth in dashboard_version table. [#12864](https://github.com/grafana/grafana/issues/12864)
 
 ### Bug fixes
 * **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)

From 85c68cc734c9a71bfeabfec898d32cc9cb3c8144 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Tue, 15 Jan 2019 10:49:46 +0100
Subject: [PATCH 314/352] 5.4.3 changelog

---
 CHANGELOG.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e03282256f..dd0339d1991 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,12 +25,19 @@
 * **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)
 
 # 5.4.3 (2019-01-14)
+
+### Tech
+
 * **Docker**: Build and publish docker images for armv7 and arm64 [#14617](https://github.com/grafana/grafana/pull/14617), thx [@johanneswuerbach](https://github.com/johanneswuerbach)
+* **Backend**: Upgrade to golang 1.11.4 [#14580](https://github.com/grafana/grafana/issues/14580)
+* **MySQL** only update session in mysql database when required [#14540](https://github.com/grafana/grafana/pull/14540)
 
 ### Bug fixes
 * **Alerting** Invalid frequency causes division by zero in alert scheduler [#14810](https://github.com/grafana/grafana/issues/14810)
 * **Dashboard** Dashboard links do not update when time range changes [#14493](https://github.com/grafana/grafana/issues/14493)
-
+* **Limits** Support more than 1000 datasources per org [#13883](https://github.com/grafana/grafana/issues/13883)
+* **Backend** fix signed in user for orgId=0 result should return active org id [#14574](https://github.com/grafana/grafana/pull/14574)
+* **Provisioning** Adds orgId to user dto for provisioned dashboards [#14678](https://github.com/grafana/grafana/pull/14678)
 
 # 5.4.2 (2018-12-13)
 

From d907b1ec6bf0f8aff4162afe5ec5574979b7e0d7 Mon Sep 17 00:00:00 2001
From: Leonard Gram <leo@xlson.com>
Date: Tue, 15 Jan 2019 11:00:45 +0100
Subject: [PATCH 315/352] Updates to latest checking.

---
 latest.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/latest.json b/latest.json
index 21a3f38e1af..dc83446f588 100644
--- a/latest.json
+++ b/latest.json
@@ -1,4 +1,4 @@
 {
-  "stable": "5.4.2",
-  "testing": "5.4.2"
+  "stable": "5.4.3",
+  "testing": "5.4.3"
 }

From 1b6203e430ade30712752d71dcff8a4755fe4fdf Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Tue, 15 Jan 2019 11:49:18 +0100
Subject: [PATCH 316/352] removes error2 logger

---
 pkg/components/imguploader/imguploader.go   |  7 +++++--
 pkg/log/log.go                              | 14 ++------------
 pkg/services/alerting/notifiers/telegram.go |  2 +-
 pkg/services/alerting/test_notification.go  |  7 +++++--
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/pkg/components/imguploader/imguploader.go b/pkg/components/imguploader/imguploader.go
index 93f69cadd46..422a03d3501 100644
--- a/pkg/components/imguploader/imguploader.go
+++ b/pkg/components/imguploader/imguploader.go
@@ -6,7 +6,6 @@ import (
 	"regexp"
 
 	"github.com/grafana/grafana/pkg/log"
-
 	"github.com/grafana/grafana/pkg/setting"
 )
 
@@ -21,6 +20,10 @@ func (NopImageUploader) Upload(ctx context.Context, path string) (string, error)
 	return "", nil
 }
 
+var (
+	logger = log.New("imguploader")
+)
+
 func NewImageUploader() (ImageUploader, error) {
 
 	switch setting.ImageUploadProvider {
@@ -94,7 +97,7 @@ func NewImageUploader() (ImageUploader, error) {
 	}
 
 	if setting.ImageUploadProvider != "" {
-		log.Error2("The external image storage configuration is invalid", "unsupported provider", setting.ImageUploadProvider)
+		logger.Error("The external image storage configuration is invalid", "unsupported provider", setting.ImageUploadProvider)
 	}
 
 	return NopImageUploader{}, nil
diff --git a/pkg/log/log.go b/pkg/log/log.go
index 8f0522748ef..47da0784f9f 100644
--- a/pkg/log/log.go
+++ b/pkg/log/log.go
@@ -10,13 +10,11 @@ import (
 	"path/filepath"
 	"strings"
 
-	"gopkg.in/ini.v1"
-
 	"github.com/go-stack/stack"
+	"github.com/grafana/grafana/pkg/util"
 	"github.com/inconshreveable/log15"
 	isatty "github.com/mattn/go-isatty"
-
-	"github.com/grafana/grafana/pkg/util"
+	"gopkg.in/ini.v1"
 )
 
 var Root log15.Logger
@@ -88,18 +86,10 @@ func Warn(format string, v ...interface{}) {
 	Root.Warn(message)
 }
 
-func Warn2(message string, v ...interface{}) {
-	Root.Warn(message, v...)
-}
-
 func Error(skip int, format string, v ...interface{}) {
 	Root.Error(fmt.Sprintf(format, v...))
 }
 
-func Error2(message string, v ...interface{}) {
-	Root.Error(message, v...)
-}
-
 func Critical(skip int, format string, v ...interface{}) {
 	Root.Crit(fmt.Sprintf(format, v...))
 }
diff --git a/pkg/services/alerting/notifiers/telegram.go b/pkg/services/alerting/notifiers/telegram.go
index 4a4a989d873..ab43f3bce35 100644
--- a/pkg/services/alerting/notifiers/telegram.go
+++ b/pkg/services/alerting/notifiers/telegram.go
@@ -130,7 +130,7 @@ func (this *TelegramNotifier) buildMessageInlineImage(evalContext *alerting.Eval
 	defer func() {
 		err := imageFile.Close()
 		if err != nil {
-			log.Error2("Could not close Telegram inline image.", "err", err)
+			this.log.Error("Could not close Telegram inline image.", "err", err)
 		}
 	}()
 
diff --git a/pkg/services/alerting/test_notification.go b/pkg/services/alerting/test_notification.go
index b6e59f694c8..5ffc8dc58fc 100644
--- a/pkg/services/alerting/test_notification.go
+++ b/pkg/services/alerting/test_notification.go
@@ -18,9 +18,12 @@ type NotificationTestCommand struct {
 	Settings *simplejson.Json
 }
 
+var (
+	logger = log.New("alerting.testnotification")
+)
+
 func init() {
 	bus.AddHandler("alerting", handleNotificationTestCommand)
-
 }
 
 func handleNotificationTestCommand(cmd *NotificationTestCommand) error {
@@ -35,7 +38,7 @@ func handleNotificationTestCommand(cmd *NotificationTestCommand) error {
 	notifiers, err := InitNotifier(model)
 
 	if err != nil {
-		log.Error2("Failed to create notifier", "error", err.Error())
+		logger.Error("Failed to create notifier", "error", err.Error())
 		return err
 	}
 

From 3cd0cb3d3f70ff1722e759751e767eb496bed95d Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Tue, 15 Jan 2019 11:52:39 +0100
Subject: [PATCH 317/352] removes debug2 logging

---
 pkg/log/log.go        | 8 --------
 pkg/login/ext_user.go | 6 +++++-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/pkg/log/log.go b/pkg/log/log.go
index 47da0784f9f..2e3b6303a6e 100644
--- a/pkg/log/log.go
+++ b/pkg/log/log.go
@@ -56,10 +56,6 @@ func Debug(format string, v ...interface{}) {
 	Root.Debug(message)
 }
 
-func Debug2(message string, v ...interface{}) {
-	Root.Debug(message, v...)
-}
-
 func Info(format string, v ...interface{}) {
 	var message string
 	if len(v) > 0 {
@@ -71,10 +67,6 @@ func Info(format string, v ...interface{}) {
 	Root.Info(message)
 }
 
-func Info2(message string, v ...interface{}) {
-	Root.Info(message, v...)
-}
-
 func Warn(format string, v ...interface{}) {
 	var message string
 	if len(v) > 0 {
diff --git a/pkg/login/ext_user.go b/pkg/login/ext_user.go
index 1262c1cc44f..42fb37ff9d0 100644
--- a/pkg/login/ext_user.go
+++ b/pkg/login/ext_user.go
@@ -11,6 +11,10 @@ func init() {
 	bus.AddHandler("auth", UpsertUser)
 }
 
+var (
+	logger = log.New("login.ext_user")
+)
+
 func UpsertUser(cmd *m.UpsertUserCommand) error {
 	extUser := cmd.ExternalUser
 
@@ -135,7 +139,7 @@ func updateUser(user *m.User, extUser *m.ExternalUserInfo) error {
 		return nil
 	}
 
-	log.Debug2("Syncing user info", "id", user.Id, "update", updateCmd)
+	logger.Debug("Syncing user info", "id", user.Id, "update", updateCmd)
 	return bus.Dispatch(updateCmd)
 }
 

From d59f1fe629e83ddabe9ec8b296521eb61cee7934 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 15 Jan 2019 14:14:38 +0100
Subject: [PATCH 318/352] fix: It should be possible to scroll in the unit
 picker before selecting a value #14871

---
 .../app/core/directives/dropdown_typeahead.ts | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/public/app/core/directives/dropdown_typeahead.ts b/public/app/core/directives/dropdown_typeahead.ts
index a4bed4fe2b7..dfc3eddbcbb 100644
--- a/public/app/core/directives/dropdown_typeahead.ts
+++ b/public/app/core/directives/dropdown_typeahead.ts
@@ -141,6 +141,9 @@ export function dropdownTypeahead2($compile) {
     link: ($scope, elem, attrs) => {
       const $input = $(inputTemplate);
       const $button = $(buttonTemplate);
+      const timeoutId = {
+        blur: null
+      };
       $input.appendTo(elem);
       $button.appendTo(elem);
 
@@ -177,6 +180,14 @@ export function dropdownTypeahead2($compile) {
         []
       );
 
+      const closeDropdownMenu = () => {
+        $input.hide();
+        $input.val('');
+        $button.show();
+        $button.focus();
+        elem.removeClass('open');
+      };
+
       $scope.menuItemSelected = (index, subIndex) => {
         const menuItem = $scope.menuItems[index];
         const payload: any = { $item: menuItem };
@@ -184,6 +195,7 @@ export function dropdownTypeahead2($compile) {
           payload.$subItem = menuItem.submenu[subIndex];
         }
         $scope.dropdownTypeaheadOnSelect(payload);
+        closeDropdownMenu();
       };
 
       $input.attr('data-provide', 'typeahead');
@@ -223,16 +235,15 @@ export function dropdownTypeahead2($compile) {
         elem.toggleClass('open', $input.val() === '');
       });
 
+      elem.mousedown((evt: Event) => {
+        evt.preventDefault();
+        timeoutId.blur = null;
+      });
+
       $input.blur(() => {
-        $input.hide();
-        $input.val('');
-        $button.show();
-        $button.focus();
-        // clicking the function dropdown menu won't
-        // work if you remove class at once
-        setTimeout(() => {
-          elem.removeClass('open');
-        }, 200);
+        timeoutId.blur = setTimeout(() => {
+          closeDropdownMenu();
+        }, 1);
       });
 
       $compile(elem.contents())($scope);

From 89a0d1090d7369568fd1d9f69d2e8aca05344348 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 15 Jan 2019 15:43:17 +0100
Subject: [PATCH 319/352] Move ColorPicker leftovers to @grafana/ui

---
 .../grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx    | 2 +-
 .../grafana-ui/src/components/ColorPicker/_ColorPicker.scss     | 0
 packages/grafana-ui/src/components/index.scss                   | 2 ++
 packages/grafana-ui/src/index.scss                              | 2 ++
 .../vendor/css => packages/grafana-ui/src/vendor}/spectrum.css  | 0
 {public => packages/grafana-ui/src}/vendor/spectrum.js          | 0
 public/sass/_grafana.scss                                       | 2 --
 7 files changed, 5 insertions(+), 3 deletions(-)
 rename public/sass/components/_color_picker.scss => packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss (100%)
 rename {public/vendor/css => packages/grafana-ui/src/vendor}/spectrum.css (100%)
 rename {public => packages/grafana-ui/src}/vendor/spectrum.js (100%)

diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
index 6974eed142e..a225db09046 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import $ from 'jquery';
-import 'vendor/spectrum';
+import '../../vendor/spectrum';
 
 export interface Props {
   color: string;
diff --git a/public/sass/components/_color_picker.scss b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
similarity index 100%
rename from public/sass/components/_color_picker.scss
rename to packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index 5a9263844a4..31c8857a130 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -5,3 +5,5 @@
 @import 'Select/Select';
 @import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
+@import 'PanelOptionsGrid/PanelOptionsGrid';
+@import 'ColorPicker/ColorPicker';
diff --git a/packages/grafana-ui/src/index.scss b/packages/grafana-ui/src/index.scss
index 841415620d6..74fdcde3072 100644
--- a/packages/grafana-ui/src/index.scss
+++ b/packages/grafana-ui/src/index.scss
@@ -1 +1,3 @@
+@import 'vendor/spectrum';
 @import 'components/index';
+
diff --git a/public/vendor/css/spectrum.css b/packages/grafana-ui/src/vendor/spectrum.css
similarity index 100%
rename from public/vendor/css/spectrum.css
rename to packages/grafana-ui/src/vendor/spectrum.css
diff --git a/public/vendor/spectrum.js b/packages/grafana-ui/src/vendor/spectrum.js
similarity index 100%
rename from public/vendor/spectrum.js
rename to packages/grafana-ui/src/vendor/spectrum.js
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index b8498f18b19..93fd26b7ca8 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -3,7 +3,6 @@
 
 // VENDOR
 @import '../vendor/css/timepicker.css';
-@import '../vendor/css/spectrum.css';
 @import '../vendor/css/rc-cascader.scss';
 
 // MIXINS
@@ -76,7 +75,6 @@
 @import 'components/typeahead';
 @import 'components/modals';
 @import 'components/dropdown';
-@import 'components/color_picker';
 @import 'components/footer';
 @import 'components/infobox';
 @import 'components/shortcuts';

From 3bdd4a5c33eb1c62db4d105f3cebe8a84eb6f11d Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Tue, 15 Jan 2019 17:14:58 +0100
Subject: [PATCH 320/352] changelog: adds note for #14795

---
 CHANGELOG.md                                                  | 1 +
 .../plugins/datasource/prometheus/specs/datasource.test.ts    | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd0339d1991..9225d6545e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
 
 ### Bug fixes
 * **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)
+* **Prometheus**: Query for annotation always uses 60s step regardless of dashboard range, fixes [#14795](https://github.com/grafana/grafana/issues/14795)
 
 # 5.4.3 (2019-01-14)
 
diff --git a/public/app/plugins/datasource/prometheus/specs/datasource.test.ts b/public/app/plugins/datasource/prometheus/specs/datasource.test.ts
index 46b37d37b8e..77ccbf2eadf 100644
--- a/public/app/plugins/datasource/prometheus/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/prometheus/specs/datasource.test.ts
@@ -644,8 +644,8 @@ describe('PrometheusDatasource', () => {
         ctx.ds.annotationQuery(query);
         const req = backendSrv.datasourceRequest.mock.calls[0][0];
         // Range in seconds: (to - from) / 1000
-        // Max_datapints: 11000
-        // Step: range / max_datapints
+        // Max_datapoints: 11000
+        // Step: range / max_datapoints
         const step = 236;
         expect(req.url).toContain(`step=${step}`);
       });

From 1faa5819a8f76ddb78a5b323e6fd3cc5e4e9964c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 17:15:46 +0100
Subject: [PATCH 321/352] Initial commit

---
 packages/grafana-ui/src/types/panel.ts              |  3 +++
 .../app/features/dashboard/dashgrid/PanelChrome.tsx |  8 +++++++-
 .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx  |  7 +++++--
 public/app/features/templating/variable_srv.ts      |  2 +-
 public/app/plugins/panel/gauge/GaugePanel.tsx       | 13 ++++---------
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 0b995f932f0..17ef712b0dd 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -1,6 +1,8 @@
 import { TimeSeries, LoadingState } from './series';
 import { TimeRange } from './time';
 
+export type InterpolateFunction = (value: string, format?: string | Function) => string;
+
 export interface PanelProps<T = any> {
   timeSeries: TimeSeries[];
   timeRange: TimeRange;
@@ -9,6 +11,7 @@ export interface PanelProps<T = any> {
   renderCounter: number;
   width: number;
   height: number;
+  onInterpolate: InterpolateFunction;
 }
 
 export interface PanelOptionsProps<T = any> {
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 46534cac065..6b4ef48c32e 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -20,6 +20,7 @@ import { PanelPlugin } from 'app/types';
 import { TimeRange } from '@grafana/ui';
 
 import variables from 'sass/_variables.scss';
+import templateSrv from 'app/features/templating/template_srv';
 
 export interface Props {
   panel: PanelModel;
@@ -78,6 +79,10 @@ export class PanelChrome extends PureComponent<Props, State> {
     });
   };
 
+  onInterpolate = (value: string, format?: string) => {
+    return templateSrv.replace(value, this.props.panel.scopedVars, format);
+  };
+
   get isVisible() {
     return !this.props.dashboard.otherPanelInFullscreen(this.props.panel);
   }
@@ -124,9 +129,10 @@ export class PanelChrome extends PureComponent<Props, State> {
                         timeSeries={timeSeries}
                         timeRange={timeRange}
                         options={panel.getOptions(plugin.exports.PanelDefaults)}
-                        width={width - 2 * variables.panelHorizontalPadding }
+                        width={width - 2 * variables.panelHorizontalPadding}
                         height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
                         renderCounter={renderCounter}
+                        onInterpolate={this.onInterpolate}
                       />
                     </div>
                   );
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 8b7afd7d09e..b5cd9258c08 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
+import templateSrv from 'app/features/templating/template_srv';
 
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
@@ -45,7 +46,9 @@ export class PanelHeader extends Component<Props, State> {
     const isFullscreen = false;
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
-    const { panel, dashboard, timeInfo } = this.props;
+    const { panel, dashboard, timeInfo, scopedVars } = this.props;
+    const title = templateSrv.replaceWithText(panel.title, scopedVars);
+
     return (
       <>
         <PanelHeaderCorner
@@ -65,7 +68,7 @@ export class PanelHeader extends Component<Props, State> {
             <div className="panel-title">
               <span className="icon-gf panel-alert-icon" />
               <span className="panel-title-text">
-                {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
+                {title} <span className="fa fa-caret-down panel-menu-toggle" />
               </span>
 
               {this.state.panelMenuOpen && (
diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts
index bc0362f0678..896987de706 100644
--- a/public/app/features/templating/variable_srv.ts
+++ b/public/app/features/templating/variable_srv.ts
@@ -132,7 +132,7 @@ export class VariableSrv {
 
     return this.$q.all(promises).then(() => {
       if (emitChangeEvents) {
-        this.$rootScope.$emit('template-variable-value-updated');
+        this.$rootScope.appEvent('template-variable-value-updated');
         this.dashboard.startRefresh();
       }
     });
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 38a88428be7..008889782eb 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -8,20 +8,15 @@ interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
   render() {
-    const { timeSeries, width, height } = this.props;
+    const { timeSeries, width, height, onInterpolate, options } = this.props;
+
+    const prefix = onInterpolate(options.prefix);
 
     const vmSeries = getTimeSeriesVMs({
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return (
-      <Gauge
-        timeSeries={vmSeries}
-        {...this.props.options}
-        width={width}
-        height={height}
-      />
-    );
+    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} prefix={prefix} />;
   }
 }

From 8cfa2c00d1f8ba4695a2db85d60d02d413206558 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 15 Jan 2019 17:35:24 +0100
Subject: [PATCH 322/352] Remove duplicated import

---
 packages/grafana-ui/src/components/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index 31c8857a130..b894cf73c1a 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -5,5 +5,4 @@
 @import 'Select/Select';
 @import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
-@import 'PanelOptionsGrid/PanelOptionsGrid';
 @import 'ColorPicker/ColorPicker';

From 7105d16131d648a59eef410e3e2961eb86346cd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 15 Jan 2019 18:02:05 +0100
Subject: [PATCH 323/352] Scrollbar select fix

---
 .../src/components/CustomScrollbar/CustomScrollbar.tsx     | 7 ++++---
 packages/grafana-ui/src/components/Select/Select.tsx       | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index cf1657e1c83..519e755b474 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -6,6 +6,7 @@ interface Props {
   autoHide?: boolean;
   autoHideTimeout?: number;
   autoHideDuration?: number;
+  autoMaxHeight?: string;
   hideTracksWhenNotNeeded?: boolean;
 }
 
@@ -18,11 +19,12 @@ export class CustomScrollbar extends PureComponent<Props> {
     autoHide: true,
     autoHideTimeout: 200,
     autoHideDuration: 200,
+    autoMaxHeight: '100%',
     hideTracksWhenNotNeeded: false,
   };
 
   render() {
-    const { customClassName, children, ...scrollProps } = this.props;
+    const { customClassName, children, autoMaxHeight } = this.props;
 
     return (
       <Scrollbars
@@ -31,13 +33,12 @@ export class CustomScrollbar extends PureComponent<Props> {
         // These autoHeightMin & autoHeightMax options affect firefox and chrome differently.
         // Before these where set to inhert but that caused problems with cut of legends in firefox
         autoHeightMin={'0'}
-        autoHeightMax={'100%'}
+        autoHeightMax={autoMaxHeight}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
         renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
         renderView={props => <div {...props} className="view" />}
-        {...scrollProps}
       >
         {children}
       </Scrollbars>
diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
index b3b0c8efbbb..348133c6c28 100644
--- a/packages/grafana-ui/src/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -61,7 +61,7 @@ interface AsyncProps {
 export const MenuList = (props: any) => {
   return (
     <components.MenuList {...props}>
-      <CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar>
+      <CustomScrollbar autoHide={false} autoMaxHeight="inherit">{props.children}</CustomScrollbar>
     </components.MenuList>
   );
 };

From 6bb2d5ff243bd93b5ebf5a5a447368fc7850a5d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 18:05:55 +0100
Subject: [PATCH 324/352] Added suffix interpolation

---
 public/app/plugins/panel/gauge/GaugePanel.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 008889782eb..fd3d812f21e 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -11,12 +11,22 @@ export class GaugePanel extends PureComponent<Props> {
     const { timeSeries, width, height, onInterpolate, options } = this.props;
 
     const prefix = onInterpolate(options.prefix);
+    const suffix = onInterpolate(options.suffix);
 
     const vmSeries = getTimeSeriesVMs({
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} prefix={prefix} />;
+    return (
+      <Gauge
+        timeSeries={vmSeries}
+        {...this.props.options}
+        width={width}
+        height={height}
+        prefix={prefix}
+        suffix={suffix}
+      />
+    );
   }
 }

From 9bf3d49393f9b5d66544bc25d8f280e4acbdf0d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 15 Jan 2019 18:26:21 +0100
Subject: [PATCH 325/352] updated snapshot

---
 .../__snapshots__/CustomScrollbar.test.tsx.snap               | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 0a7de5fcffe..60b4a2e0aa5 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -42,9 +42,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
       Object {
         "display": "none",
         "height": 6,
-        "opacity": 0,
         "position": "absolute",
-        "transition": "opacity 200ms",
       }
     }
   >
@@ -64,9 +62,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     style={
       Object {
         "display": "none",
-        "opacity": 0,
         "position": "absolute",
-        "transition": "opacity 200ms",
         "width": 6,
       }
     }

From 5c9c0244751e1477427a092b506d3786426d91ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 18:41:04 +0100
Subject: [PATCH 326/352] Fixed a bug with prefix and suffix not showing when
 using value mappings

---
 public/app/viz/Gauge.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index 5112ff9aa1b..d5e4eb94884 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -80,9 +80,9 @@ export class Gauge extends PureComponent<Props> {
       const { rangeMap, valueMap } = this.formatWithMappings(mappings, formattedValue);
 
       if (valueMap) {
-        return valueMap;
+        return `${prefix} ${valueMap} ${suffix}`;
       } else if (rangeMap) {
-        return rangeMap;
+        return `${prefix} ${rangeMap} ${suffix}`;
       }
     }
 

From 2be2deddb86d73fccb858d2ef379f60cac000b0c Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Thu, 10 Jan 2019 14:24:31 +0100
Subject: [PATCH 327/352] WIP Explore redux migration

---
 public/app/core/utils/explore.ts              |  89 +-
 public/app/features/explore/Explore.tsx       | 928 ++++--------------
 public/app/features/explore/state/actions.ts  | 694 +++++++++++++
 public/app/features/explore/state/reducers.ts | 412 ++++++++
 public/app/store/configureStore.ts            |   2 +
 public/app/types/explore.ts                   |  23 +-
 public/app/types/index.ts                     |   2 +
 7 files changed, 1413 insertions(+), 737 deletions(-)
 create mode 100644 public/app/features/explore/state/actions.ts
 create mode 100644 public/app/features/explore/state/reducers.ts

diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index f3273ffa16d..871a020ccc2 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash';
-import { colors } from '@grafana/ui';
+import { colors, RawTimeRange, IntervalValues } from '@grafana/ui';
 
+import * as dateMath from 'app/core/utils/datemath';
 import { renderUrl } from 'app/core/utils/url';
 import kbn from 'app/core/utils/kbn';
 import store from 'app/core/store';
@@ -8,9 +9,15 @@ import { parse as parseDate } from 'app/core/utils/datemath';
 
 import TimeSeries from 'app/core/time_series2';
 import TableModel, { mergeTablesIntoModel } from 'app/core/table_model';
-import { ExploreState, ExploreUrlState, HistoryItem, QueryTransaction } from 'app/types/explore';
+import {
+  ExploreUrlState,
+  HistoryItem,
+  QueryTransaction,
+  ResultType,
+  QueryIntervals,
+  QueryOptions,
+} from 'app/types/explore';
 import { DataQuery, DataSourceApi } from 'app/types/series';
-import { RawTimeRange, IntervalValues } from '@grafana/ui';
 
 export const DEFAULT_RANGE = {
   from: 'now-6h',
@@ -19,6 +26,8 @@ export const DEFAULT_RANGE = {
 
 const MAX_HISTORY_ITEMS = 100;
 
+export const LAST_USED_DATASOURCE_KEY = 'grafana.explore.datasource';
+
 /**
  * Returns an Explore-URL that contains a panel's queries and the dashboard time range.
  *
@@ -77,6 +86,62 @@ export async function getExploreUrl(
   return url;
 }
 
+export function buildQueryTransaction(
+  query: DataQuery,
+  rowIndex: number,
+  resultType: ResultType,
+  queryOptions: QueryOptions,
+  range: RawTimeRange,
+  queryIntervals: QueryIntervals,
+  scanning: boolean
+): QueryTransaction {
+  const { interval, intervalMs } = queryIntervals;
+
+  const configuredQueries = [
+    {
+      ...query,
+      ...queryOptions,
+    },
+  ];
+
+  // Clone range for query request
+  // const queryRange: RawTimeRange = { ...range };
+  // const { from, to, raw } = this.timeSrv.timeRange();
+  // Most datasource is using `panelId + query.refId` for cancellation logic.
+  // Using `format` here because it relates to the view panel that the request is for.
+  // However, some datasources don't use `panelId + query.refId`, but only `panelId`.
+  // Therefore panel id has to be unique.
+  const panelId = `${queryOptions.format}-${query.key}`;
+
+  const options = {
+    interval,
+    intervalMs,
+    panelId,
+    targets: configuredQueries, // Datasources rely on DataQueries being passed under the targets key.
+    range: {
+      from: dateMath.parse(range.from, false),
+      to: dateMath.parse(range.to, true),
+      raw: range,
+    },
+    rangeRaw: range,
+    scopedVars: {
+      __interval: { text: interval, value: interval },
+      __interval_ms: { text: intervalMs, value: intervalMs },
+    },
+  };
+
+  return {
+    options,
+    query,
+    resultType,
+    rowIndex,
+    scanning,
+    id: generateKey(), // reusing for unique ID
+    done: false,
+    latency: 0,
+  };
+}
+
 const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest;
 
 export function parseUrlState(initial: string | undefined): ExploreUrlState {
@@ -103,12 +168,12 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState {
   return { datasource: null, queries: [], range: DEFAULT_RANGE };
 }
 
-export function serializeStateToUrlParam(state: ExploreState, compact?: boolean): string {
-  const urlState: ExploreUrlState = {
-    datasource: state.initialDatasource,
-    queries: state.initialQueries.map(clearQueryKeys),
-    range: state.range,
-  };
+export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: boolean): string {
+  // const urlState: ExploreUrlState = {
+  //   datasource: state.initialDatasource,
+  //   queries: state.initialQueries.map(clearQueryKeys),
+  //   range: state.range,
+  // };
   if (compact) {
     return JSON.stringify([urlState.range.from, urlState.range.to, urlState.datasource, ...urlState.queries]);
   }
@@ -123,7 +188,7 @@ export function generateRefId(index = 0): string {
   return `${index + 1}`;
 }
 
-export function generateQueryKeys(index = 0): { refId: string; key: string } {
+export function generateEmptyQuery(index = 0): { refId: string; key: string } {
   return { refId: generateRefId(index), key: generateKey(index) };
 }
 
@@ -132,9 +197,9 @@ export function generateQueryKeys(index = 0): { refId: string; key: string } {
  */
 export function ensureQueries(queries?: DataQuery[]): DataQuery[] {
   if (queries && typeof queries === 'object' && queries.length > 0) {
-    return queries.map((query, i) => ({ ...query, ...generateQueryKeys(i) }));
+    return queries.map((query, i) => ({ ...query, ...generateEmptyQuery(i) }));
   }
-  return [{ ...generateQueryKeys() }];
+  return [{ ...generateEmptyQuery() }];
 }
 
 /**
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index d4d645950c1..64e9c66ece5 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -1,35 +1,38 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
 import _ from 'lodash';
+import { withSize } from 'react-sizeme';
+import { RawTimeRange, TimeRange } from '@grafana/ui';
 
-import { DataSource } from 'app/types/datasources';
-import {
-  ExploreState,
-  ExploreUrlState,
-  QueryTransaction,
-  ResultType,
-  QueryHintGetter,
-  QueryHint,
-} from 'app/types/explore';
-import { TimeRange } from '@grafana/ui';
+import { DataSourceSelectItem } from 'app/types/datasources';
+import { ExploreUrlState, HistoryItem, QueryTransaction, RangeScanner } from 'app/types/explore';
 import { DataQuery } from 'app/types/series';
 import store from 'app/core/store';
-import {
-  DEFAULT_RANGE,
-  calculateResultsFromQueryTransactions,
-  ensureQueries,
-  getIntervals,
-  generateKey,
-  generateQueryKeys,
-  hasNonEmptyQuery,
-  makeTimeSeriesList,
-  updateHistory,
-} from 'app/core/utils/explore';
+import { LAST_USED_DATASOURCE_KEY, ensureQueries } from 'app/core/utils/explore';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
-import TableModel from 'app/core/table_model';
-import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { Emitter } from 'app/core/utils/emitter';
-import * as dateMath from 'app/core/utils/datemath';
+
+import {
+  addQueryRow,
+  changeDatasource,
+  changeQuery,
+  changeSize,
+  changeTime,
+  clickClear,
+  clickExample,
+  clickGraphButton,
+  clickLogsButton,
+  clickTableButton,
+  highlightLogsExpression,
+  initializeExplore,
+  modifyQueries,
+  removeQueryRow,
+  runQueries,
+  scanStart,
+  scanStop,
+} from './state/actions';
+import { ExploreState } from './state/reducers';
 
 import Panel from './Panel';
 import QueryRows from './QueryRows';
@@ -39,17 +42,57 @@ import Table from './Table';
 import ErrorBoundary from './ErrorBoundary';
 import { Alert } from './Error';
 import TimePicker, { parseTime } from './TimePicker';
-
-const LAST_USED_DATASOURCE_KEY = 'grafana.explore.datasource';
+import { LogsModel } from 'app/core/logs_model';
+import TableModel from 'app/core/table_model';
 
 interface ExploreProps {
-  datasourceSrv: DatasourceSrv;
+  StartPage?: any;
+  addQueryRow: typeof addQueryRow;
+  changeDatasource: typeof changeDatasource;
+  changeQuery: typeof changeQuery;
+  changeTime: typeof changeTime;
+  clickClear: typeof clickClear;
+  clickExample: typeof clickExample;
+  clickGraphButton: typeof clickGraphButton;
+  clickLogsButton: typeof clickLogsButton;
+  clickTableButton: typeof clickTableButton;
+  datasourceError: string;
+  datasourceInstance: any;
+  datasourceLoading: boolean | null;
+  datasourceMissing: boolean;
+  exploreDatasources: DataSourceSelectItem[];
+  graphResult?: any[];
+  highlightLogsExpression: typeof highlightLogsExpression;
+  history: HistoryItem[];
+  initialDatasource?: string;
+  initialQueries: DataQuery[];
+  initializeExplore: typeof initializeExplore;
+  logsHighlighterExpressions?: string[];
+  logsResult?: LogsModel;
+  modifyQueries: typeof modifyQueries;
   onChangeSplit: (split: boolean, state?: ExploreState) => void;
   onSaveState: (key: string, state: ExploreState) => void;
   position: string;
+  queryTransactions: QueryTransaction[];
+  removeQueryRow: typeof removeQueryRow;
+  range: RawTimeRange;
+  runQueries: typeof runQueries;
+  scanner?: RangeScanner;
+  scanning?: boolean;
+  scanRange?: RawTimeRange;
+  scanStart: typeof scanStart;
+  scanStop: typeof scanStop;
   split: boolean;
   splitState?: ExploreState;
   stateKey: string;
+  showingGraph: boolean;
+  showingLogs: boolean;
+  showingStartPage?: boolean;
+  showingTable: boolean;
+  supportsGraph: boolean | null;
+  supportsLogs: boolean | null;
+  supportsTable: boolean | null;
+  tableResult?: TableModel;
   urlState: ExploreUrlState;
 }
 
@@ -89,23 +132,9 @@ interface ExploreProps {
  * The result viewers determine some of the query options sent to the datasource, e.g.,
  * `format`, to indicate eventual transformations by the datasources' result transformers.
  */
-export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
+export class Explore extends React.PureComponent<ExploreProps, any> {
   el: any;
   exploreEvents: Emitter;
-  /**
-   * Set via URL or local storage
-   */
-  initialDatasource: string;
-  /**
-   * Current query expressions of the rows including their modifications, used for running queries.
-   * Not kept in component state to prevent edit-render roundtrips.
-   */
-  modifiedQueries: DataQuery[];
-  /**
-   * Local ID cache to compare requested vs selected datasource
-   */
-  requestedDatasourceId: string;
-  scanTimer: NodeJS.Timer;
   /**
    * Timepicker to control scanning
    */
@@ -113,166 +142,22 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
 
   constructor(props) {
     super(props);
-    const splitState: ExploreState = props.splitState;
-    let initialQueries: DataQuery[];
-    if (splitState) {
-      // Split state overrides everything
-      this.state = splitState;
-      initialQueries = splitState.initialQueries;
-    } else {
-      const { datasource, queries, range } = props.urlState as ExploreUrlState;
-      const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY);
-      initialQueries = ensureQueries(queries);
-      const initialRange = { from: parseTime(range.from), to: parseTime(range.to) } || { ...DEFAULT_RANGE };
-      // Millies step for helper bar charts
-      const initialGraphInterval = 15 * 1000;
-      this.state = {
-        datasource: null,
-        datasourceError: null,
-        datasourceLoading: null,
-        datasourceMissing: false,
-        exploreDatasources: [],
-        graphInterval: initialGraphInterval,
-        graphResult: [],
-        initialDatasource,
-        initialQueries,
-        history: [],
-        logsResult: null,
-        queryTransactions: [],
-        range: initialRange,
-        scanning: false,
-        showingGraph: true,
-        showingLogs: true,
-        showingStartPage: false,
-        showingTable: true,
-        supportsGraph: null,
-        supportsLogs: null,
-        supportsTable: null,
-        tableResult: new TableModel(),
-      };
-    }
-    this.modifiedQueries = initialQueries.slice();
     this.exploreEvents = new Emitter();
     this.timepickerRef = React.createRef();
   }
 
   async componentDidMount() {
-    const { datasourceSrv } = this.props;
-    const { initialDatasource } = this.state;
-    if (!datasourceSrv) {
-      throw new Error('No datasource service passed as props.');
-    }
-
-    const datasources = datasourceSrv.getExternal();
-    const exploreDatasources = datasources.map(ds => ({
-      value: ds.name,
-      name: ds.name,
-      meta: ds.meta,
-    }));
-
-    if (datasources.length > 0) {
-      this.setState({ datasourceLoading: true, exploreDatasources });
-      // Priority for datasource preselection: URL, localstorage, default datasource
-      let datasource;
-      if (initialDatasource) {
-        datasource = await datasourceSrv.get(initialDatasource);
-      } else {
-        datasource = await datasourceSrv.get();
-      }
-      await this.setDatasource(datasource);
-    } else {
-      this.setState({ datasourceMissing: true });
-    }
+    // Load URL state and parse range
+    const { datasource, queries, range } = this.props.urlState as ExploreUrlState;
+    const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY);
+    const initialQueries: DataQuery[] = ensureQueries(queries);
+    const initialRange = { from: parseTime(range.from), to: parseTime(range.to) };
+    const width = this.el ? this.el.offsetWidth : 0;
+    this.props.initializeExplore(initialDatasource, initialQueries, initialRange, width, this.exploreEvents);
   }
 
   componentWillUnmount() {
     this.exploreEvents.removeAllListeners();
-    clearTimeout(this.scanTimer);
-  }
-
-  async setDatasource(datasource: any, origin?: DataSource) {
-    const { initialQueries, range } = this.state;
-
-    const supportsGraph = datasource.meta.metrics;
-    const supportsLogs = datasource.meta.logs;
-    const supportsTable = datasource.meta.tables;
-    const datasourceId = datasource.meta.id;
-    let datasourceError = null;
-
-    // Keep ID to track selection
-    this.requestedDatasourceId = datasourceId;
-
-    try {
-      const testResult = await datasource.testDatasource();
-      datasourceError = testResult.status === 'success' ? null : testResult.message;
-    } catch (error) {
-      datasourceError = (error && error.statusText) || 'Network error';
-    }
-
-    if (datasourceId !== this.requestedDatasourceId) {
-      // User already changed datasource again, discard results
-      return;
-    }
-
-    const historyKey = `grafana.explore.history.${datasourceId}`;
-    const history = store.getObject(historyKey, []);
-
-    if (datasource.init) {
-      datasource.init();
-    }
-
-    // Check if queries can be imported from previously selected datasource
-    let modifiedQueries = this.modifiedQueries;
-    if (origin) {
-      if (origin.meta.id === datasource.meta.id) {
-        // Keep same queries if same type of datasource
-        modifiedQueries = [...this.modifiedQueries];
-      } else if (datasource.importQueries) {
-        // Datasource-specific importers
-        modifiedQueries = await datasource.importQueries(this.modifiedQueries, origin.meta);
-      } else {
-        // Default is blank queries
-        modifiedQueries = ensureQueries();
-      }
-    }
-
-    // Reset edit state with new queries
-    const nextQueries = initialQueries.map((q, i) => ({
-      ...modifiedQueries[i],
-      ...generateQueryKeys(i),
-    }));
-    this.modifiedQueries = modifiedQueries;
-
-    // Custom components
-    const StartPage = datasource.pluginExports.ExploreStartPage;
-
-    // Calculate graph bucketing interval
-    const graphInterval = getIntervals(range, datasource, this.el ? this.el.offsetWidth : 0).intervalMs;
-
-    this.setState(
-      {
-        StartPage,
-        datasource,
-        datasourceError,
-        graphInterval,
-        history,
-        supportsGraph,
-        supportsLogs,
-        supportsTable,
-        datasourceLoading: false,
-        initialDatasource: datasource.name,
-        initialQueries: nextQueries,
-        logsHighlighterExpressions: undefined,
-        showingStartPage: Boolean(StartPage),
-      },
-      () => {
-        if (datasourceError === null) {
-          // Save last-used datasource
-          store.set(LAST_USED_DATASOURCE_KEY, datasource.name);
-          this.onSubmit();
-        }
-      }
-    );
   }
 
   getRef = el => {
@@ -280,106 +165,32 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   };
 
   onAddQueryRow = index => {
-    // Local cache
-    this.modifiedQueries[index + 1] = { ...generateQueryKeys(index + 1) };
-
-    this.setState(state => {
-      const { initialQueries, queryTransactions } = state;
-
-      const nextQueries = [
-        ...initialQueries.slice(0, index + 1),
-        { ...this.modifiedQueries[index + 1] },
-        ...initialQueries.slice(index + 1),
-      ];
-
-      // Ongoing transactions need to update their row indices
-      const nextQueryTransactions = queryTransactions.map(qt => {
-        if (qt.rowIndex > index) {
-          return {
-            ...qt,
-            rowIndex: qt.rowIndex + 1,
-          };
-        }
-        return qt;
-      });
-
-      return {
-        initialQueries: nextQueries,
-        logsHighlighterExpressions: undefined,
-        queryTransactions: nextQueryTransactions,
-      };
-    });
+    this.props.addQueryRow(index);
   };
 
   onChangeDatasource = async option => {
-    const origin = this.state.datasource;
-    this.setState({
-      datasource: null,
-      datasourceError: null,
-      datasourceLoading: true,
-      queryTransactions: [],
-    });
-    const datasourceName = option.value;
-    const datasource = await this.props.datasourceSrv.get(datasourceName);
-    this.setDatasource(datasource as any, origin);
+    this.props.changeDatasource(option.value);
   };
 
-  onChangeQuery = (value: DataQuery, index: number, override?: boolean) => {
-    // Null value means reset
-    if (value === null) {
-      value = { ...generateQueryKeys(index) };
-    }
+  onChangeQuery = (query: DataQuery, index: number, override?: boolean) => {
+    const { changeQuery, datasourceInstance } = this.props;
 
-    // Keep current value in local cache
-    this.modifiedQueries[index] = value;
-
-    if (override) {
-      this.setState(state => {
-        // Replace query row by injecting new key
-        const { initialQueries, queryTransactions } = state;
-        const query: DataQuery = {
-          ...value,
-          ...generateQueryKeys(index),
-        };
-        const nextQueries = [...initialQueries];
-        nextQueries[index] = query;
-        this.modifiedQueries = [...nextQueries];
-
-        // Discard ongoing transaction related to row query
-        const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
-
-        return {
-          initialQueries: nextQueries,
-          queryTransactions: nextQueryTransactions,
-        };
-      }, this.onSubmit);
-    } else if (this.state.datasource.getHighlighterExpression && this.modifiedQueries.length === 1) {
-      // Live preview of log search matches. Can only work on single row query for now
-      this.updateLogsHighlights(value);
+    changeQuery(query, index, override);
+    if (query && !override && datasourceInstance.getHighlighterExpression && index === 0) {
+      // Live preview of log search matches. Only use on first row for now
+      this.updateLogsHighlights(query);
     }
   };
 
-  onChangeTime = (nextRange: TimeRange, scanning?: boolean) => {
-    const range: TimeRange = {
-      ...nextRange,
-    };
-    if (this.state.scanning && !scanning) {
+  onChangeTime = (range: TimeRange, changedByScanner?: boolean) => {
+    if (this.props.scanning && !changedByScanner) {
       this.onStopScanning();
     }
-    this.setState({ range, scanning }, () => this.onSubmit());
+    this.props.changeTime(range);
   };
 
   onClickClear = () => {
-    this.onStopScanning();
-    this.modifiedQueries = ensureQueries();
-    this.setState(
-      prevState => ({
-        initialQueries: [...this.modifiedQueries],
-        queryTransactions: [],
-        showingStartPage: Boolean(prevState.StartPage),
-      }),
-      this.saveState
-    );
+    this.props.clickClear();
   };
 
   onClickCloseSplit = () => {
@@ -390,82 +201,28 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   };
 
   onClickGraphButton = () => {
-    this.setState(
-      state => {
-        const showingGraph = !state.showingGraph;
-        let nextQueryTransactions = state.queryTransactions;
-        if (!showingGraph) {
-          // Discard transactions related to Graph query
-          nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph');
-        }
-        return { queryTransactions: nextQueryTransactions, showingGraph };
-      },
-      () => {
-        if (this.state.showingGraph) {
-          this.onSubmit();
-        }
-      }
-    );
+    this.props.clickGraphButton();
   };
 
   onClickLogsButton = () => {
-    this.setState(
-      state => {
-        const showingLogs = !state.showingLogs;
-        let nextQueryTransactions = state.queryTransactions;
-        if (!showingLogs) {
-          // Discard transactions related to Logs query
-          nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs');
-        }
-        return { queryTransactions: nextQueryTransactions, showingLogs };
-      },
-      () => {
-        if (this.state.showingLogs) {
-          this.onSubmit();
-        }
-      }
-    );
+    this.props.clickLogsButton();
   };
 
   // Use this in help pages to set page to a single query
   onClickExample = (query: DataQuery) => {
-    const nextQueries = [{ ...query, ...generateQueryKeys() }];
-    this.modifiedQueries = [...nextQueries];
-    this.setState({ initialQueries: nextQueries }, this.onSubmit);
+    this.props.clickExample(query);
   };
 
   onClickSplit = () => {
     const { onChangeSplit } = this.props;
     if (onChangeSplit) {
-      const state = this.cloneState();
-      onChangeSplit(true, state);
+      // const state = this.cloneState();
+      // onChangeSplit(true, state);
     }
   };
 
   onClickTableButton = () => {
-    this.setState(
-      state => {
-        const showingTable = !state.showingTable;
-        if (showingTable) {
-          return { showingTable, queryTransactions: state.queryTransactions };
-        }
-
-        // Toggle off needs discarding of table queries
-        const nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Table');
-        const results = calculateResultsFromQueryTransactions(
-          nextQueryTransactions,
-          state.datasource,
-          state.graphInterval
-        );
-
-        return { ...results, queryTransactions: nextQueryTransactions, showingTable };
-      },
-      () => {
-        if (this.state.showingTable) {
-          this.onSubmit();
-        }
-      }
-    );
+    this.props.clickTableButton();
   };
 
   onClickLabel = (key: string, value: string) => {
@@ -473,404 +230,62 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   };
 
   onModifyQueries = (action, index?: number) => {
-    const { datasource } = this.state;
-    if (datasource && datasource.modifyQuery) {
-      const preventSubmit = action.preventSubmit;
-      this.setState(
-        state => {
-          const { initialQueries, queryTransactions } = state;
-          let nextQueries: DataQuery[];
-          let nextQueryTransactions;
-          if (index === undefined) {
-            // Modify all queries
-            nextQueries = initialQueries.map((query, i) => ({
-              ...datasource.modifyQuery(this.modifiedQueries[i], action),
-              ...generateQueryKeys(i),
-            }));
-            // Discard all ongoing transactions
-            nextQueryTransactions = [];
-          } else {
-            // Modify query only at index
-            nextQueries = initialQueries.map((query, i) => {
-              // Synchronize all queries with local query cache to ensure consistency
-              // TODO still needed?
-              return i === index
-                ? {
-                    ...datasource.modifyQuery(this.modifiedQueries[i], action),
-                    ...generateQueryKeys(i),
-                  }
-                : query;
-            });
-            nextQueryTransactions = queryTransactions
-              // Consume the hint corresponding to the action
-              .map(qt => {
-                if (qt.hints != null && qt.rowIndex === index) {
-                  qt.hints = qt.hints.filter(hint => hint.fix.action !== action);
-                }
-                return qt;
-              })
-              // Preserve previous row query transaction to keep results visible if next query is incomplete
-              .filter(qt => preventSubmit || qt.rowIndex !== index);
-          }
-          this.modifiedQueries = [...nextQueries];
-          return {
-            initialQueries: nextQueries,
-            queryTransactions: nextQueryTransactions,
-          };
-        },
-        // Accepting certain fixes do not result in a well-formed query which should not be submitted
-        !preventSubmit ? () => this.onSubmit() : null
-      );
+    const { datasourceInstance } = this.props;
+    if (datasourceInstance && datasourceInstance.modifyQuery) {
+      const modifier = (queries: DataQuery, action: any) => datasourceInstance.modifyQuery(queries, action);
+      this.props.modifyQueries(action, index, modifier);
     }
   };
 
   onRemoveQueryRow = index => {
-    // Remove from local cache
-    this.modifiedQueries = [...this.modifiedQueries.slice(0, index), ...this.modifiedQueries.slice(index + 1)];
-
-    this.setState(
-      state => {
-        const { initialQueries, queryTransactions } = state;
-        if (initialQueries.length <= 1) {
-          return null;
-        }
-        // Remove row from react state
-        const nextQueries = [...initialQueries.slice(0, index), ...initialQueries.slice(index + 1)];
-
-        // Discard transactions related to row query
-        const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
-        const results = calculateResultsFromQueryTransactions(
-          nextQueryTransactions,
-          state.datasource,
-          state.graphInterval
-        );
-
-        return {
-          ...results,
-          initialQueries: nextQueries,
-          logsHighlighterExpressions: undefined,
-          queryTransactions: nextQueryTransactions,
-        };
-      },
-      () => this.onSubmit()
-    );
+    this.props.removeQueryRow(index);
   };
 
   onStartScanning = () => {
-    this.setState({ scanning: true }, this.scanPreviousRange);
+    // Scanner will trigger a query
+    const scanner = this.scanPreviousRange;
+    this.props.scanStart(scanner);
   };
 
-  scanPreviousRange = () => {
-    const scanRange = this.timepickerRef.current.move(-1, true);
-    this.setState({ scanRange });
+  scanPreviousRange = (): RawTimeRange => {
+    // Calling move() on the timepicker will trigger this.onChangeTime()
+    return this.timepickerRef.current.move(-1, true);
   };
 
   onStopScanning = () => {
-    clearTimeout(this.scanTimer);
-    this.setState(state => {
-      const { queryTransactions } = state;
-      const nextQueryTransactions = queryTransactions.filter(qt => qt.scanning && !qt.done);
-      return { queryTransactions: nextQueryTransactions, scanning: false, scanRange: undefined };
-    });
+    this.props.scanStop();
   };
 
   onSubmit = () => {
-    const { showingLogs, showingGraph, showingTable, supportsGraph, supportsLogs, supportsTable } = this.state;
-    // Keep table queries first since they need to return quickly
-    if (showingTable && supportsTable) {
-      this.runQueries(
-        'Table',
-        {
-          format: 'table',
-          instant: true,
-          valueWithRefId: true,
-        },
-        data => data[0]
-      );
-    }
-    if (showingGraph && supportsGraph) {
-      this.runQueries(
-        'Graph',
-        {
-          format: 'time_series',
-          instant: false,
-        },
-        makeTimeSeriesList
-      );
-    }
-    if (showingLogs && supportsLogs) {
-      this.runQueries('Logs', { format: 'logs' });
-    }
-    this.saveState();
+    this.props.runQueries();
   };
 
-  buildQueryOptions(query: DataQuery, queryOptions: { format: string; hinting?: boolean; instant?: boolean }) {
-    const { datasource, range } = this.state;
-    const { interval, intervalMs } = getIntervals(range, datasource, this.el.offsetWidth);
-
-    const configuredQueries = [
-      {
-        ...query,
-        ...queryOptions,
-      },
-    ];
-
-    // Clone range for query request
-    // const queryRange: RawTimeRange = { ...range };
-    // const { from, to, raw } = this.timeSrv.timeRange();
-    // Most datasource is using `panelId + query.refId` for cancellation logic.
-    // Using `format` here because it relates to the view panel that the request is for.
-    // However, some datasources don't use `panelId + query.refId`, but only `panelId`.
-    // Therefore panel id has to be unique.
-    const panelId = `${queryOptions.format}-${query.key}`;
-
-    return {
-      interval,
-      intervalMs,
-      panelId,
-      targets: configuredQueries, // Datasources rely on DataQueries being passed under the targets key.
-      range: {
-        from: dateMath.parse(range.from, false),
-        to: dateMath.parse(range.to, true),
-        raw: range,
-      },
-      rangeRaw: range,
-      scopedVars: {
-        __interval: { text: interval, value: interval },
-        __interval_ms: { text: intervalMs, value: intervalMs },
-      },
-    };
-  }
-
-  startQueryTransaction(query: DataQuery, rowIndex: number, resultType: ResultType, options: any): QueryTransaction {
-    const queryOptions = this.buildQueryOptions(query, options);
-    const transaction: QueryTransaction = {
-      query,
-      resultType,
-      rowIndex,
-      id: generateKey(), // reusing for unique ID
-      done: false,
-      latency: 0,
-      options: queryOptions,
-      scanning: this.state.scanning,
-    };
-
-    // Using updater style because we might be modifying queryTransactions in quick succession
-    this.setState(state => {
-      const { queryTransactions } = state;
-      // Discarding existing transactions of same type
-      const remainingTransactions = queryTransactions.filter(
-        qt => !(qt.resultType === resultType && qt.rowIndex === rowIndex)
-      );
-
-      // Append new transaction
-      const nextQueryTransactions = [...remainingTransactions, transaction];
-
-      const results = calculateResultsFromQueryTransactions(
-        nextQueryTransactions,
-        state.datasource,
-        state.graphInterval
-      );
-
-      return {
-        ...results,
-        queryTransactions: nextQueryTransactions,
-        showingStartPage: false,
-        graphInterval: queryOptions.intervalMs,
-      };
-    });
-
-    return transaction;
-  }
-
-  completeQueryTransaction(
-    transactionId: string,
-    result: any,
-    latency: number,
-    queries: DataQuery[],
-    datasourceId: string
-  ) {
-    const { datasource } = this.state;
-    if (datasource.meta.id !== datasourceId) {
-      // Navigated away, queries did not matter
-      return;
+  updateLogsHighlights = _.debounce((value: DataQuery) => {
+    const { datasourceInstance } = this.props;
+    if (datasourceInstance.getHighlighterExpression) {
+      const expressions = [datasourceInstance.getHighlighterExpression(value)];
+      this.props.highlightLogsExpression(expressions);
     }
-
-    this.setState(state => {
-      const { history, queryTransactions } = state;
-      let { scanning } = state;
-
-      // Transaction might have been discarded
-      const transaction = queryTransactions.find(qt => qt.id === transactionId);
-      if (!transaction) {
-        return null;
-      }
-
-      // Get query hints
-      let hints: QueryHint[];
-      if (datasource.getQueryHints as QueryHintGetter) {
-        hints = datasource.getQueryHints(transaction.query, result);
-      }
-
-      // Mark transactions as complete
-      const nextQueryTransactions = queryTransactions.map(qt => {
-        if (qt.id === transactionId) {
-          return {
-            ...qt,
-            hints,
-            latency,
-            result,
-            done: true,
-          };
-        }
-        return qt;
-      });
-
-      const results = calculateResultsFromQueryTransactions(
-        nextQueryTransactions,
-        state.datasource,
-        state.graphInterval
-      );
-
-      const nextHistory = updateHistory(history, datasourceId, queries);
-
-      // Keep scanning for results if this was the last scanning transaction
-      if (scanning) {
-        if (_.size(result) === 0) {
-          const other = nextQueryTransactions.find(qt => qt.scanning && !qt.done);
-          if (!other) {
-            this.scanTimer = setTimeout(this.scanPreviousRange, 1000);
-          }
-        } else {
-          // We can stop scanning if we have a result
-          scanning = false;
-        }
-      }
-
-      return {
-        ...results,
-        scanning,
-        history: nextHistory,
-        queryTransactions: nextQueryTransactions,
-      };
-    });
-  }
-
-  failQueryTransaction(transactionId: string, response: any, datasourceId: string) {
-    const { datasource } = this.state;
-    if (datasource.meta.id !== datasourceId || response.cancelled) {
-      // Navigated away, queries did not matter
-      return;
-    }
-
-    console.error(response);
-
-    let error: string | JSX.Element;
-    if (response.data) {
-      if (typeof response.data === 'string') {
-        error = response.data;
-      } else if (response.data.error) {
-        error = response.data.error;
-        if (response.data.response) {
-          error = (
-            <>
-              <span>{response.data.error}</span>
-              <details>{response.data.response}</details>
-            </>
-          );
-        }
-      } else {
-        throw new Error('Could not handle error response');
-      }
-    } else if (response.message) {
-      error = response.message;
-    } else if (typeof response === 'string') {
-      error = response;
-    } else {
-      error = 'Unknown error during query transaction. Please check JS console logs.';
-    }
-
-    this.setState(state => {
-      // Transaction might have been discarded
-      if (!state.queryTransactions.find(qt => qt.id === transactionId)) {
-        return null;
-      }
-
-      // Mark transactions as complete
-      const nextQueryTransactions = state.queryTransactions.map(qt => {
-        if (qt.id === transactionId) {
-          return {
-            ...qt,
-            error,
-            done: true,
-          };
-        }
-        return qt;
-      });
-
-      return {
-        queryTransactions: nextQueryTransactions,
-      };
-    });
-  }
-
-  async runQueries(resultType: ResultType, queryOptions: any, resultGetter?: any) {
-    const queries = [...this.modifiedQueries];
-    if (!hasNonEmptyQuery(queries)) {
-      this.setState({
-        queryTransactions: [],
-      });
-      return;
-    }
-    const { datasource } = this.state;
-    const datasourceId = datasource.meta.id;
-    // Run all queries concurrentlyso
-    queries.forEach(async (query, rowIndex) => {
-      const transaction = this.startQueryTransaction(query, rowIndex, resultType, queryOptions);
-      try {
-        const now = Date.now();
-        const res = await datasource.query(transaction.options);
-        this.exploreEvents.emit('data-received', res.data || []);
-        const latency = Date.now() - now;
-        const results = resultGetter ? resultGetter(res.data) : res.data;
-        this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
-      } catch (response) {
-        this.exploreEvents.emit('data-error', response);
-        this.failQueryTransaction(transaction.id, response, datasourceId);
-      }
-    });
-  }
-
-  updateLogsHighlights = _.debounce((value: DataQuery, index: number) => {
-    this.setState(state => {
-      const { datasource } = state;
-      if (datasource.getHighlighterExpression) {
-        const logsHighlighterExpressions = [state.datasource.getHighlighterExpression(value)];
-        return { logsHighlighterExpressions };
-      }
-      return null;
-    });
   }, 500);
 
-  cloneState(): ExploreState {
-    // Copy state, but copy queries including modifications
-    return {
-      ...this.state,
-      queryTransactions: [],
-      initialQueries: [...this.modifiedQueries],
-    };
-  }
+  // cloneState(): ExploreState {
+  //   // Copy state, but copy queries including modifications
+  //   return {
+  //     ...this.state,
+  //     queryTransactions: [],
+  //     initialQueries: [...this.modifiedQueries],
+  //   };
+  // }
 
-  saveState = () => {
-    const { stateKey, onSaveState } = this.props;
-    onSaveState(stateKey, this.cloneState());
-  };
+  // saveState = () => {
+  //   const { stateKey, onSaveState } = this.props;
+  //   onSaveState(stateKey, this.cloneState());
+  // };
 
   render() {
-    const { position, split } = this.props;
     const {
       StartPage,
-      datasource,
+      datasourceInstance,
       datasourceError,
       datasourceLoading,
       datasourceMissing,
@@ -881,6 +296,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       logsHighlighterExpressions,
       logsResult,
       queryTransactions,
+      position,
       range,
       scanning,
       scanRange,
@@ -888,14 +304,17 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       showingLogs,
       showingStartPage,
       showingTable,
+      split,
       supportsGraph,
       supportsLogs,
       supportsTable,
       tableResult,
-    } = this.state;
+    } = this.props;
     const graphHeight = showingGraph && showingTable ? '200px' : '400px';
     const exploreClass = split ? 'explore explore-split' : 'explore';
-    const selectedDatasource = datasource ? exploreDatasources.find(d => d.name === datasource.name) : undefined;
+    const selectedDatasource = datasourceInstance
+      ? exploreDatasources.find(d => d.name === datasourceInstance.name)
+      : undefined;
     const graphLoading = queryTransactions.some(qt => qt.resultType === 'Graph' && !qt.done);
     const tableLoading = queryTransactions.some(qt => qt.resultType === 'Table' && !qt.done);
     const logsLoading = queryTransactions.some(qt => qt.resultType === 'Logs' && !qt.done);
@@ -959,10 +378,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           </div>
         )}
 
-        {datasource && !datasourceError ? (
+        {datasourceInstance && !datasourceError ? (
           <div className="explore-container">
             <QueryRows
-              datasource={datasource}
+              datasource={datasourceInstance}
               history={history}
               initialQueries={initialQueries}
               onAddQueryRow={this.onAddQueryRow}
@@ -1035,4 +454,79 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   }
 }
 
-export default hot(module)(Explore);
+function mapStateToProps({ explore }) {
+  const {
+    StartPage,
+    datasourceError,
+    datasourceInstance,
+    datasourceLoading,
+    datasourceMissing,
+    exploreDatasources,
+    graphResult,
+    initialDatasource,
+    initialQueries,
+    history,
+    logsHighlighterExpressions,
+    logsResult,
+    queryTransactions,
+    range,
+    scanning,
+    scanRange,
+    showingGraph,
+    showingLogs,
+    showingStartPage,
+    showingTable,
+    supportsGraph,
+    supportsLogs,
+    supportsTable,
+    tableResult,
+  } = explore as ExploreState;
+  return {
+    StartPage,
+    datasourceError,
+    datasourceInstance,
+    datasourceLoading,
+    datasourceMissing,
+    exploreDatasources,
+    graphResult,
+    initialDatasource,
+    initialQueries,
+    history,
+    logsHighlighterExpressions,
+    logsResult,
+    queryTransactions,
+    range,
+    scanning,
+    scanRange,
+    showingGraph,
+    showingLogs,
+    showingStartPage,
+    showingTable,
+    supportsGraph,
+    supportsLogs,
+    supportsTable,
+    tableResult,
+  };
+}
+
+const mapDispatchToProps = {
+  addQueryRow,
+  changeDatasource,
+  changeQuery,
+  changeTime,
+  clickClear,
+  clickExample,
+  clickGraphButton,
+  clickLogsButton,
+  clickTableButton,
+  highlightLogsExpression,
+  initializeExplore,
+  modifyQueries,
+  onSize: changeSize, // used by withSize HOC
+  removeQueryRow,
+  runQueries,
+  scanStart,
+  scanStop,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(withSize()(Explore)));
diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts
new file mode 100644
index 00000000000..d70a458059e
--- /dev/null
+++ b/public/app/features/explore/state/actions.ts
@@ -0,0 +1,694 @@
+import _ from 'lodash';
+import { ThunkAction } from 'redux-thunk';
+import { RawTimeRange, TimeRange } from '@grafana/ui';
+
+import {
+  LAST_USED_DATASOURCE_KEY,
+  ensureQueries,
+  generateEmptyQuery,
+  hasNonEmptyQuery,
+  makeTimeSeriesList,
+  updateHistory,
+  buildQueryTransaction,
+} from 'app/core/utils/explore';
+
+import store from 'app/core/store';
+import { DataSourceSelectItem } from 'app/types/datasources';
+import { DataQuery, StoreState } from 'app/types';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import {
+  HistoryItem,
+  RangeScanner,
+  ResultType,
+  QueryOptions,
+  QueryTransaction,
+  QueryHint,
+  QueryHintGetter,
+} from 'app/types/explore';
+import { Emitter } from 'app/core/core';
+import { dispatch } from 'rxjs/internal/observable/pairs';
+
+export enum ActionTypes {
+  AddQueryRow = 'ADD_QUERY_ROW',
+  ChangeDatasource = 'CHANGE_DATASOURCE',
+  ChangeQuery = 'CHANGE_QUERY',
+  ChangeSize = 'CHANGE_SIZE',
+  ChangeTime = 'CHANGE_TIME',
+  ClickClear = 'CLICK_CLEAR',
+  ClickExample = 'CLICK_EXAMPLE',
+  ClickGraphButton = 'CLICK_GRAPH_BUTTON',
+  ClickLogsButton = 'CLICK_LOGS_BUTTON',
+  ClickTableButton = 'CLICK_TABLE_BUTTON',
+  HighlightLogsExpression = 'HIGHLIGHT_LOGS_EXPRESSION',
+  InitializeExplore = 'INITIALIZE_EXPLORE',
+  LoadDatasourceFailure = 'LOAD_DATASOURCE_FAILURE',
+  LoadDatasourceMissing = 'LOAD_DATASOURCE_MISSING',
+  LoadDatasourcePending = 'LOAD_DATASOURCE_PENDING',
+  LoadDatasourceSuccess = 'LOAD_DATASOURCE_SUCCESS',
+  ModifyQueries = 'MODIFY_QUERIES',
+  QueryTransactionFailure = 'QUERY_TRANSACTION_FAILURE',
+  QueryTransactionStart = 'QUERY_TRANSACTION_START',
+  QueryTransactionSuccess = 'QUERY_TRANSACTION_SUCCESS',
+  RemoveQueryRow = 'REMOVE_QUERY_ROW',
+  RunQueries = 'RUN_QUERIES',
+  RunQueriesEmpty = 'RUN_QUERIES',
+  ScanRange = 'SCAN_RANGE',
+  ScanStart = 'SCAN_START',
+  ScanStop = 'SCAN_STOP',
+}
+
+export interface AddQueryRowAction {
+  type: ActionTypes.AddQueryRow;
+  index: number;
+  query: DataQuery;
+}
+
+export interface ChangeQueryAction {
+  type: ActionTypes.ChangeQuery;
+  query: DataQuery;
+  index: number;
+  override: boolean;
+}
+
+export interface ChangeSizeAction {
+  type: ActionTypes.ChangeSize;
+  width: number;
+  height: number;
+}
+
+export interface ChangeTimeAction {
+  type: ActionTypes.ChangeTime;
+  range: TimeRange;
+}
+
+export interface ClickClearAction {
+  type: ActionTypes.ClickClear;
+}
+
+export interface ClickExampleAction {
+  type: ActionTypes.ClickExample;
+  query: DataQuery;
+}
+
+export interface ClickGraphButtonAction {
+  type: ActionTypes.ClickGraphButton;
+}
+
+export interface ClickLogsButtonAction {
+  type: ActionTypes.ClickLogsButton;
+}
+
+export interface ClickTableButtonAction {
+  type: ActionTypes.ClickTableButton;
+}
+
+export interface InitializeExploreAction {
+  type: ActionTypes.InitializeExplore;
+  containerWidth: number;
+  datasource: string;
+  eventBridge: Emitter;
+  exploreDatasources: DataSourceSelectItem[];
+  queries: DataQuery[];
+  range: RawTimeRange;
+}
+
+export interface HighlightLogsExpressionAction {
+  type: ActionTypes.HighlightLogsExpression;
+  expressions: string[];
+}
+
+export interface LoadDatasourceFailureAction {
+  type: ActionTypes.LoadDatasourceFailure;
+  error: string;
+}
+
+export interface LoadDatasourcePendingAction {
+  type: ActionTypes.LoadDatasourcePending;
+  datasourceId: number;
+}
+
+export interface LoadDatasourceMissingAction {
+  type: ActionTypes.LoadDatasourceMissing;
+}
+
+export interface LoadDatasourceSuccessAction {
+  type: ActionTypes.LoadDatasourceSuccess;
+  StartPage?: any;
+  datasourceInstance: any;
+  history: HistoryItem[];
+  initialDatasource: string;
+  initialQueries: DataQuery[];
+  logsHighlighterExpressions?: any[];
+  showingStartPage: boolean;
+  supportsGraph: boolean;
+  supportsLogs: boolean;
+  supportsTable: boolean;
+}
+
+export interface ModifyQueriesAction {
+  type: ActionTypes.ModifyQueries;
+  modification: any;
+  index: number;
+  modifier: (queries: DataQuery[], modification: any) => DataQuery[];
+}
+
+export interface QueryTransactionFailureAction {
+  type: ActionTypes.QueryTransactionFailure;
+  queryTransactions: QueryTransaction[];
+}
+
+export interface QueryTransactionStartAction {
+  type: ActionTypes.QueryTransactionStart;
+  resultType: ResultType;
+  rowIndex: number;
+  transaction: QueryTransaction;
+}
+
+export interface QueryTransactionSuccessAction {
+  type: ActionTypes.QueryTransactionSuccess;
+  history: HistoryItem[];
+  queryTransactions: QueryTransaction[];
+}
+
+export interface RemoveQueryRowAction {
+  type: ActionTypes.RemoveQueryRow;
+  index: number;
+}
+
+export interface ScanStartAction {
+  type: ActionTypes.ScanStart;
+  scanner: RangeScanner;
+}
+
+export interface ScanRangeAction {
+  type: ActionTypes.ScanRange;
+  range: RawTimeRange;
+}
+
+export interface ScanStopAction {
+  type: ActionTypes.ScanStop;
+}
+
+export type Action =
+  | AddQueryRowAction
+  | ChangeQueryAction
+  | ChangeSizeAction
+  | ChangeTimeAction
+  | ClickClearAction
+  | ClickExampleAction
+  | ClickGraphButtonAction
+  | ClickLogsButtonAction
+  | ClickTableButtonAction
+  | HighlightLogsExpressionAction
+  | InitializeExploreAction
+  | LoadDatasourceFailureAction
+  | LoadDatasourceMissingAction
+  | LoadDatasourcePendingAction
+  | LoadDatasourceSuccessAction
+  | ModifyQueriesAction
+  | QueryTransactionFailureAction
+  | QueryTransactionStartAction
+  | QueryTransactionSuccessAction
+  | RemoveQueryRowAction
+  | ScanRangeAction
+  | ScanStartAction
+  | ScanStopAction;
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
+
+export function addQueryRow(index: number): AddQueryRowAction {
+  const query = generateEmptyQuery(index + 1);
+  return { type: ActionTypes.AddQueryRow, index, query };
+}
+
+export function changeDatasource(datasource: string): ThunkResult<void> {
+  return async dispatch => {
+    const instance = await getDatasourceSrv().get(datasource);
+    dispatch(loadDatasource(instance));
+  };
+}
+
+export function changeQuery(query: DataQuery, index: number, override: boolean): ThunkResult<void> {
+  return dispatch => {
+    // Null query means reset
+    if (query === null) {
+      query = { ...generateEmptyQuery(index) };
+    }
+
+    dispatch({ type: ActionTypes.ChangeQuery, query, index, override });
+    if (override) {
+      dispatch(runQueries());
+    }
+  };
+}
+
+export function changeSize({ height, width }: { height: number; width: number }): ChangeSizeAction {
+  return { type: ActionTypes.ChangeSize, height, width };
+}
+
+export function changeTime(range: TimeRange): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.ChangeTime, range });
+    dispatch(runQueries());
+  };
+}
+
+export function clickExample(rawQuery: DataQuery): ThunkResult<void> {
+  return dispatch => {
+    const query = { ...rawQuery, ...generateEmptyQuery() };
+    dispatch({
+      type: ActionTypes.ClickExample,
+      query,
+    });
+    dispatch(runQueries());
+  };
+}
+
+export function clickClear(): ThunkResult<void> {
+  return dispatch => {
+    dispatch(scanStop());
+    dispatch({ type: ActionTypes.ClickClear });
+    // TODO save state
+  };
+}
+
+export function clickGraphButton(): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ClickGraphButton });
+    if (getState().explore.showingGraph) {
+      dispatch(runQueries());
+    }
+  };
+}
+
+export function clickLogsButton(): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ClickLogsButton });
+    if (getState().explore.showingLogs) {
+      dispatch(runQueries());
+    }
+  };
+}
+
+export function clickTableButton(): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ClickTableButton });
+    if (getState().explore.showingTable) {
+      dispatch(runQueries());
+    }
+  };
+}
+
+export function highlightLogsExpression(expressions: string[]): HighlightLogsExpressionAction {
+  return { type: ActionTypes.HighlightLogsExpression, expressions };
+}
+
+export function initializeExplore(
+  datasource: string,
+  queries: DataQuery[],
+  range: RawTimeRange,
+  containerWidth: number,
+  eventBridge: Emitter
+): ThunkResult<void> {
+  return async dispatch => {
+    const exploreDatasources: DataSourceSelectItem[] = getDatasourceSrv()
+      .getExternal()
+      .map(ds => ({
+        value: ds.name,
+        name: ds.name,
+        meta: ds.meta,
+      }));
+
+    dispatch({
+      type: ActionTypes.InitializeExplore,
+      containerWidth,
+      datasource,
+      eventBridge,
+      exploreDatasources,
+      queries,
+      range,
+    });
+
+    if (exploreDatasources.length > 1) {
+      let instance;
+      if (datasource) {
+        instance = await getDatasourceSrv().get(datasource);
+      } else {
+        instance = await getDatasourceSrv().get();
+      }
+      dispatch(loadDatasource(instance));
+    } else {
+      dispatch(loadDatasourceMissing);
+    }
+  };
+}
+
+export const loadDatasourceFailure = (error: string): LoadDatasourceFailureAction => ({
+  type: ActionTypes.LoadDatasourceFailure,
+  error,
+});
+
+export const loadDatasourceMissing: LoadDatasourceMissingAction = { type: ActionTypes.LoadDatasourceMissing };
+
+export const loadDatasourcePending = (datasourceId: number): LoadDatasourcePendingAction => ({
+  type: ActionTypes.LoadDatasourcePending,
+  datasourceId,
+});
+
+export const loadDatasourceSuccess = (instance: any, queries: DataQuery[]): LoadDatasourceSuccessAction => {
+  // Capabilities
+  const supportsGraph = instance.meta.metrics;
+  const supportsLogs = instance.meta.logs;
+  const supportsTable = instance.meta.tables;
+  // Custom components
+  const StartPage = instance.pluginExports.ExploreStartPage;
+
+  const historyKey = `grafana.explore.history.${instance.meta.id}`;
+  const history = store.getObject(historyKey, []);
+  // Save last-used datasource
+  store.set(LAST_USED_DATASOURCE_KEY, instance.name);
+
+  return {
+    type: ActionTypes.LoadDatasourceSuccess,
+    StartPage,
+    datasourceInstance: instance,
+    history,
+    initialDatasource: instance.name,
+    initialQueries: queries,
+    showingStartPage: Boolean(StartPage),
+    supportsGraph,
+    supportsLogs,
+    supportsTable,
+  };
+};
+
+export function loadDatasource(instance: any): ThunkResult<void> {
+  return async (dispatch, getState) => {
+    const datasourceId = instance.meta.id;
+
+    // Keep ID to track selection
+    dispatch(loadDatasourcePending(datasourceId));
+
+    let datasourceError = null;
+    try {
+      const testResult = await instance.testDatasource();
+      datasourceError = testResult.status === 'success' ? null : testResult.message;
+    } catch (error) {
+      datasourceError = (error && error.statusText) || 'Network error';
+    }
+    if (datasourceError) {
+      dispatch(loadDatasourceFailure(datasourceError));
+      return;
+    }
+
+    if (datasourceId !== getState().explore.requestedDatasourceId) {
+      // User already changed datasource again, discard results
+      return;
+    }
+
+    if (instance.init) {
+      instance.init();
+    }
+
+    // Check if queries can be imported from previously selected datasource
+    const queries = getState().explore.modifiedQueries;
+    let importedQueries = queries;
+    const origin = getState().explore.datasourceInstance;
+    if (origin) {
+      if (origin.meta.id === instance.meta.id) {
+        // Keep same queries if same type of datasource
+        importedQueries = [...queries];
+      } else if (instance.importQueries) {
+        // Datasource-specific importers
+        importedQueries = await instance.importQueries(queries, origin.meta);
+      } else {
+        // Default is blank queries
+        importedQueries = ensureQueries();
+      }
+    }
+
+    if (datasourceId !== getState().explore.requestedDatasourceId) {
+      // User already changed datasource again, discard results
+      return;
+    }
+
+    // Reset edit state with new queries
+    const nextQueries = importedQueries.map((q, i) => ({
+      ...importedQueries[i],
+      ...generateEmptyQuery(i),
+    }));
+
+    dispatch(loadDatasourceSuccess(instance, nextQueries));
+    dispatch(runQueries());
+  };
+}
+
+export function modifyQueries(modification: any, index: number, modifier: any): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.ModifyQueries, modification, index, modifier });
+    if (!modification.preventSubmit) {
+      dispatch(runQueries());
+    }
+  };
+}
+
+export function queryTransactionFailure(transactionId: string, response: any, datasourceId: string): ThunkResult<void> {
+  return (dispatch, getState) => {
+    const { datasourceInstance, queryTransactions } = getState().explore;
+    if (datasourceInstance.meta.id !== datasourceId || response.cancelled) {
+      // Navigated away, queries did not matter
+      return;
+    }
+
+    // Transaction might have been discarded
+    if (!queryTransactions.find(qt => qt.id === transactionId)) {
+      return null;
+    }
+
+    console.error(response);
+
+    let error: string;
+    let errorDetails: string;
+    if (response.data) {
+      if (typeof response.data === 'string') {
+        error = response.data;
+      } else if (response.data.error) {
+        error = response.data.error;
+        if (response.data.response) {
+          errorDetails = response.data.response;
+        }
+      } else {
+        throw new Error('Could not handle error response');
+      }
+    } else if (response.message) {
+      error = response.message;
+    } else if (typeof response === 'string') {
+      error = response;
+    } else {
+      error = 'Unknown error during query transaction. Please check JS console logs.';
+    }
+
+    // Mark transactions as complete
+    const nextQueryTransactions = queryTransactions.map(qt => {
+      if (qt.id === transactionId) {
+        return {
+          ...qt,
+          error,
+          errorDetails,
+          done: true,
+        };
+      }
+      return qt;
+    });
+
+    dispatch({ type: ActionTypes.QueryTransactionFailure, queryTransactions: nextQueryTransactions });
+  };
+}
+
+export function queryTransactionStart(
+  transaction: QueryTransaction,
+  resultType: ResultType,
+  rowIndex: number
+): QueryTransactionStartAction {
+  return { type: ActionTypes.QueryTransactionStart, resultType, rowIndex, transaction };
+}
+
+export function queryTransactionSuccess(
+  transactionId: string,
+  result: any,
+  latency: number,
+  queries: DataQuery[],
+  datasourceId: string
+): ThunkResult<void> {
+  return (dispatch, getState) => {
+    const { datasourceInstance, history, queryTransactions, scanner, scanning } = getState().explore;
+
+    // If datasource already changed, results do not matter
+    if (datasourceInstance.meta.id !== datasourceId) {
+      return;
+    }
+
+    // Transaction might have been discarded
+    const transaction = queryTransactions.find(qt => qt.id === transactionId);
+    if (!transaction) {
+      return;
+    }
+
+    // Get query hints
+    let hints: QueryHint[];
+    if (datasourceInstance.getQueryHints as QueryHintGetter) {
+      hints = datasourceInstance.getQueryHints(transaction.query, result);
+    }
+
+    // Mark transactions as complete and attach result
+    const nextQueryTransactions = queryTransactions.map(qt => {
+      if (qt.id === transactionId) {
+        return {
+          ...qt,
+          hints,
+          latency,
+          result,
+          done: true,
+        };
+      }
+      return qt;
+    });
+
+    // Side-effect: Saving history in localstorage
+    const nextHistory = updateHistory(history, datasourceId, queries);
+
+    dispatch({
+      type: ActionTypes.QueryTransactionSuccess,
+      history: nextHistory,
+      queryTransactions: nextQueryTransactions,
+    });
+
+    // Keep scanning for results if this was the last scanning transaction
+    if (scanning) {
+      if (_.size(result) === 0) {
+        const other = nextQueryTransactions.find(qt => qt.scanning && !qt.done);
+        if (!other) {
+          const range = scanner();
+          dispatch({ type: ActionTypes.ScanRange, range });
+        }
+      } else {
+        // We can stop scanning if we have a result
+        dispatch(scanStop());
+      }
+    }
+  };
+}
+
+export function removeQueryRow(index: number): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.RemoveQueryRow, index });
+    dispatch(runQueries());
+  };
+}
+
+export function runQueries() {
+  return (dispatch, getState) => {
+    const {
+      datasourceInstance,
+      modifiedQueries,
+      showingLogs,
+      showingGraph,
+      showingTable,
+      supportsGraph,
+      supportsLogs,
+      supportsTable,
+    } = getState().explore;
+
+    if (!hasNonEmptyQuery(modifiedQueries)) {
+      dispatch({ type: ActionTypes.RunQueriesEmpty });
+      return;
+    }
+
+    // Some datasource's query builders allow per-query interval limits,
+    // but we're using the datasource interval limit for now
+    const interval = datasourceInstance.interval;
+
+    // Keep table queries first since they need to return quickly
+    if (showingTable && supportsTable) {
+      dispatch(
+        runQueriesForType(
+          'Table',
+          {
+            interval,
+            format: 'table',
+            instant: true,
+            valueWithRefId: true,
+          },
+          data => data[0]
+        )
+      );
+    }
+    if (showingGraph && supportsGraph) {
+      dispatch(
+        runQueriesForType(
+          'Graph',
+          {
+            interval,
+            format: 'time_series',
+            instant: false,
+          },
+          makeTimeSeriesList
+        )
+      );
+    }
+    if (showingLogs && supportsLogs) {
+      dispatch(runQueriesForType('Logs', { interval, format: 'logs' }));
+    }
+    // TODO save state
+  };
+}
+
+function runQueriesForType(resultType: ResultType, queryOptions: QueryOptions, resultGetter?: any) {
+  return async (dispatch, getState) => {
+    const {
+      datasourceInstance,
+      eventBridge,
+      modifiedQueries: queries,
+      queryIntervals,
+      range,
+      scanning,
+    } = getState().explore;
+    const datasourceId = datasourceInstance.meta.id;
+
+    // Run all queries concurrently
+    queries.forEach(async (query, rowIndex) => {
+      const transaction = buildQueryTransaction(
+        query,
+        rowIndex,
+        resultType,
+        queryOptions,
+        range,
+        queryIntervals,
+        scanning
+      );
+      dispatch(queryTransactionStart(transaction, resultType, rowIndex));
+      try {
+        const now = Date.now();
+        const res = await datasourceInstance.query(transaction.options);
+        eventBridge.emit('data-received', res.data || []);
+        const latency = Date.now() - now;
+        const results = resultGetter ? resultGetter(res.data) : res.data;
+        dispatch(queryTransactionSuccess(transaction.id, results, latency, queries, datasourceId));
+      } catch (response) {
+        eventBridge.emit('data-error', response);
+        dispatch(queryTransactionFailure(transaction.id, response, datasourceId));
+      }
+    });
+  };
+}
+
+export function scanStart(scanner: RangeScanner): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.ScanStart, scanner });
+    const range = scanner();
+    dispatch({ type: ActionTypes.ScanRange, range });
+  };
+}
+
+export function scanStop(): ScanStopAction {
+  return { type: ActionTypes.ScanStop };
+}
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
new file mode 100644
index 00000000000..b49d54405d1
--- /dev/null
+++ b/public/app/features/explore/state/reducers.ts
@@ -0,0 +1,412 @@
+import { RawTimeRange, TimeRange } from '@grafana/ui';
+
+import {
+  calculateResultsFromQueryTransactions,
+  generateEmptyQuery,
+  getIntervals,
+  ensureQueries,
+} from 'app/core/utils/explore';
+import { DataSourceSelectItem } from 'app/types/datasources';
+import { HistoryItem, QueryTransaction, QueryIntervals, RangeScanner } from 'app/types/explore';
+import { DataQuery } from 'app/types/series';
+
+import { Action, ActionTypes } from './actions';
+import { Emitter } from 'app/core/core';
+import { LogsModel } from 'app/core/logs_model';
+import TableModel from 'app/core/table_model';
+
+// TODO move to types
+export interface ExploreState {
+  StartPage?: any;
+  containerWidth: number;
+  datasourceInstance: any;
+  datasourceError: string;
+  datasourceLoading: boolean | null;
+  datasourceMissing: boolean;
+  eventBridge?: Emitter;
+  exploreDatasources: DataSourceSelectItem[];
+  graphResult?: any[];
+  history: HistoryItem[];
+  initialDatasource?: string;
+  initialQueries: DataQuery[];
+  logsHighlighterExpressions?: string[];
+  logsResult?: LogsModel;
+  modifiedQueries: DataQuery[];
+  queryIntervals: QueryIntervals;
+  queryTransactions: QueryTransaction[];
+  requestedDatasourceId?: number;
+  range: TimeRange | RawTimeRange;
+  scanner?: RangeScanner;
+  scanning?: boolean;
+  scanRange?: RawTimeRange;
+  showingGraph: boolean;
+  showingLogs: boolean;
+  showingStartPage?: boolean;
+  showingTable: boolean;
+  supportsGraph: boolean | null;
+  supportsLogs: boolean | null;
+  supportsTable: boolean | null;
+  tableResult?: TableModel;
+}
+
+export const DEFAULT_RANGE = {
+  from: 'now-6h',
+  to: 'now',
+};
+
+// Millies step for helper bar charts
+const DEFAULT_GRAPH_INTERVAL = 15 * 1000;
+
+const initialExploreState: ExploreState = {
+  StartPage: undefined,
+  containerWidth: 0,
+  datasourceInstance: null,
+  datasourceError: null,
+  datasourceLoading: null,
+  datasourceMissing: false,
+  exploreDatasources: [],
+  history: [],
+  initialQueries: [],
+  modifiedQueries: [],
+  queryTransactions: [],
+  queryIntervals: { interval: '15s', intervalMs: DEFAULT_GRAPH_INTERVAL },
+  range: DEFAULT_RANGE,
+  scanning: false,
+  scanRange: null,
+  showingGraph: true,
+  showingLogs: true,
+  showingTable: true,
+  supportsGraph: null,
+  supportsLogs: null,
+  supportsTable: null,
+};
+
+export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
+  switch (action.type) {
+    case ActionTypes.AddQueryRow: {
+      const { initialQueries, modifiedQueries, queryTransactions } = state;
+      const { index, query } = action;
+      modifiedQueries[index + 1] = query;
+
+      const nextQueries = [
+        ...initialQueries.slice(0, index + 1),
+        { ...modifiedQueries[index + 1] },
+        ...initialQueries.slice(index + 1),
+      ];
+
+      // Ongoing transactions need to update their row indices
+      const nextQueryTransactions = queryTransactions.map(qt => {
+        if (qt.rowIndex > index) {
+          return {
+            ...qt,
+            rowIndex: qt.rowIndex + 1,
+          };
+        }
+        return qt;
+      });
+
+      return {
+        ...state,
+        modifiedQueries,
+        initialQueries: nextQueries,
+        logsHighlighterExpressions: undefined,
+        queryTransactions: nextQueryTransactions,
+      };
+    }
+
+    case ActionTypes.ChangeQuery: {
+      const { initialQueries, queryTransactions } = state;
+      let { modifiedQueries } = state;
+      const { query, index, override } = action;
+      modifiedQueries[index] = query;
+      if (override) {
+        const nextQuery: DataQuery = {
+          ...query,
+          ...generateEmptyQuery(index),
+        };
+        const nextQueries = [...initialQueries];
+        nextQueries[index] = nextQuery;
+        modifiedQueries = [...nextQueries];
+
+        // Discard ongoing transaction related to row query
+        const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
+
+        return {
+          ...state,
+          initialQueries: nextQueries,
+          modifiedQueries: nextQueries.slice(),
+          queryTransactions: nextQueryTransactions,
+        };
+      }
+      return {
+        ...state,
+        modifiedQueries,
+      };
+    }
+
+    case ActionTypes.ChangeSize: {
+      const { range, datasourceInstance } = state;
+      if (!datasourceInstance) {
+        return state;
+      }
+      const containerWidth = action.width;
+      const queryIntervals = getIntervals(range, datasourceInstance.interval, containerWidth);
+      return { ...state, containerWidth, queryIntervals };
+    }
+
+    case ActionTypes.ChangeTime: {
+      return {
+        ...state,
+        range: action.range,
+      };
+    }
+
+    case ActionTypes.ClickClear: {
+      const queries = ensureQueries();
+      return {
+        ...state,
+        initialQueries: queries.slice(),
+        modifiedQueries: queries.slice(),
+        showingStartPage: Boolean(state.StartPage),
+      };
+    }
+
+    case ActionTypes.ClickExample: {
+      const modifiedQueries = [action.query];
+      return { ...state, initialQueries: modifiedQueries.slice(), modifiedQueries };
+    }
+
+    case ActionTypes.ClickGraphButton: {
+      const showingGraph = !state.showingGraph;
+      let nextQueryTransactions = state.queryTransactions;
+      if (!showingGraph) {
+        // Discard transactions related to Graph query
+        nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph');
+      }
+      return { ...state, queryTransactions: nextQueryTransactions, showingGraph };
+    }
+
+    case ActionTypes.ClickLogsButton: {
+      const showingLogs = !state.showingLogs;
+      let nextQueryTransactions = state.queryTransactions;
+      if (!showingLogs) {
+        // Discard transactions related to Logs query
+        nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs');
+      }
+      return { ...state, queryTransactions: nextQueryTransactions, showingLogs };
+    }
+
+    case ActionTypes.ClickTableButton: {
+      const showingTable = !state.showingTable;
+      if (showingTable) {
+        return { ...state, showingTable, queryTransactions: state.queryTransactions };
+      }
+
+      // Toggle off needs discarding of table queries and results
+      const nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Table');
+      const results = calculateResultsFromQueryTransactions(
+        nextQueryTransactions,
+        state.datasourceInstance,
+        state.queryIntervals.intervalMs
+      );
+
+      return { ...state, ...results, queryTransactions: nextQueryTransactions, showingTable };
+    }
+
+    case ActionTypes.InitializeExplore: {
+      const { containerWidth, eventBridge, exploreDatasources, range } = action;
+      return {
+        ...state,
+        containerWidth,
+        eventBridge,
+        exploreDatasources,
+        range,
+        initialDatasource: action.datasource,
+        initialQueries: action.queries,
+        modifiedQueries: action.queries.slice(),
+      };
+    }
+
+    case ActionTypes.LoadDatasourceFailure: {
+      return { ...state, datasourceError: action.error, datasourceLoading: false };
+    }
+
+    case ActionTypes.LoadDatasourceMissing: {
+      return { ...state, datasourceMissing: true, datasourceLoading: false };
+    }
+
+    case ActionTypes.LoadDatasourcePending: {
+      return { ...state, datasourceLoading: true, requestedDatasourceId: action.datasourceId };
+    }
+
+    case ActionTypes.LoadDatasourceSuccess: {
+      const { containerWidth, range } = state;
+      const queryIntervals = getIntervals(range, action.datasourceInstance.interval, containerWidth);
+
+      return {
+        ...state,
+        queryIntervals,
+        StartPage: action.StartPage,
+        datasourceInstance: action.datasourceInstance,
+        datasourceLoading: false,
+        datasourceMissing: false,
+        history: action.history,
+        initialDatasource: action.initialDatasource,
+        initialQueries: action.initialQueries,
+        logsHighlighterExpressions: undefined,
+        modifiedQueries: action.initialQueries.slice(),
+        showingStartPage: action.showingStartPage,
+        supportsGraph: action.supportsGraph,
+        supportsLogs: action.supportsLogs,
+        supportsTable: action.supportsTable,
+      };
+    }
+
+    case ActionTypes.ModifyQueries: {
+      const { initialQueries, modifiedQueries, queryTransactions } = state;
+      const { action: modification, index, modifier } = action as any;
+      let nextQueries: DataQuery[];
+      let nextQueryTransactions;
+      if (index === undefined) {
+        // Modify all queries
+        nextQueries = initialQueries.map((query, i) => ({
+          ...modifier(modifiedQueries[i], modification),
+          ...generateEmptyQuery(i),
+        }));
+        // Discard all ongoing transactions
+        nextQueryTransactions = [];
+      } else {
+        // Modify query only at index
+        nextQueries = initialQueries.map((query, i) => {
+          // Synchronize all queries with local query cache to ensure consistency
+          // TODO still needed?
+          return i === index
+            ? {
+                ...modifier(modifiedQueries[i], modification),
+                ...generateEmptyQuery(i),
+              }
+            : query;
+        });
+        nextQueryTransactions = queryTransactions
+          // Consume the hint corresponding to the action
+          .map(qt => {
+            if (qt.hints != null && qt.rowIndex === index) {
+              qt.hints = qt.hints.filter(hint => hint.fix.action !== modification);
+            }
+            return qt;
+          })
+          // Preserve previous row query transaction to keep results visible if next query is incomplete
+          .filter(qt => modification.preventSubmit || qt.rowIndex !== index);
+      }
+      return {
+        ...state,
+        initialQueries: nextQueries,
+        modifiedQueries: nextQueries.slice(),
+        queryTransactions: nextQueryTransactions,
+      };
+    }
+
+    case ActionTypes.RemoveQueryRow: {
+      const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state;
+      let { modifiedQueries } = state;
+      const { index } = action;
+
+      modifiedQueries = [...modifiedQueries.slice(0, index), ...modifiedQueries.slice(index + 1)];
+
+      if (initialQueries.length <= 1) {
+        return state;
+      }
+
+      const nextQueries = [...initialQueries.slice(0, index), ...initialQueries.slice(index + 1)];
+
+      // Discard transactions related to row query
+      const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
+      const results = calculateResultsFromQueryTransactions(
+        nextQueryTransactions,
+        datasourceInstance,
+        queryIntervals.intervalMs
+      );
+
+      return {
+        ...state,
+        ...results,
+        initialQueries: nextQueries,
+        logsHighlighterExpressions: undefined,
+        modifiedQueries: nextQueries.slice(),
+        queryTransactions: nextQueryTransactions,
+      };
+    }
+
+    case ActionTypes.QueryTransactionFailure: {
+      const { queryTransactions } = action;
+      return {
+        ...state,
+        queryTransactions,
+        showingStartPage: false,
+      };
+    }
+
+    case ActionTypes.QueryTransactionStart: {
+      const { datasourceInstance, queryIntervals, queryTransactions } = state;
+      const { resultType, rowIndex, transaction } = action;
+      // Discarding existing transactions of same type
+      const remainingTransactions = queryTransactions.filter(
+        qt => !(qt.resultType === resultType && qt.rowIndex === rowIndex)
+      );
+
+      // Append new transaction
+      const nextQueryTransactions: QueryTransaction[] = [...remainingTransactions, transaction];
+
+      const results = calculateResultsFromQueryTransactions(
+        nextQueryTransactions,
+        datasourceInstance,
+        queryIntervals.intervalMs
+      );
+
+      return {
+        ...state,
+        ...results,
+        queryTransactions: nextQueryTransactions,
+        showingStartPage: false,
+      };
+    }
+
+    case ActionTypes.QueryTransactionSuccess: {
+      const { datasourceInstance, queryIntervals } = state;
+      const { history, queryTransactions } = action;
+      const results = calculateResultsFromQueryTransactions(
+        queryTransactions,
+        datasourceInstance,
+        queryIntervals.intervalMs
+      );
+
+      return {
+        ...state,
+        ...results,
+        history,
+        queryTransactions,
+        showingStartPage: false,
+      };
+    }
+
+    case ActionTypes.ScanRange: {
+      return { ...state, scanRange: action.range };
+    }
+
+    case ActionTypes.ScanStart: {
+      return { ...state, scanning: true };
+    }
+
+    case ActionTypes.ScanStop: {
+      const { queryTransactions } = state;
+      const nextQueryTransactions = queryTransactions.filter(qt => qt.scanning && !qt.done);
+      return { ...state, queryTransactions: nextQueryTransactions, scanning: false, scanRange: undefined };
+    }
+  }
+
+  return state;
+};
+
+export default {
+  explore: exploreReducer,
+};
diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts
index 943aff80a70..570a387cd74 100644
--- a/public/app/store/configureStore.ts
+++ b/public/app/store/configureStore.ts
@@ -7,6 +7,7 @@ import teamsReducers from 'app/features/teams/state/reducers';
 import apiKeysReducers from 'app/features/api-keys/state/reducers';
 import foldersReducers from 'app/features/folders/state/reducers';
 import dashboardReducers from 'app/features/dashboard/state/reducers';
+import exploreReducers from 'app/features/explore/state/reducers';
 import pluginReducers from 'app/features/plugins/state/reducers';
 import dataSourcesReducers from 'app/features/datasources/state/reducers';
 import usersReducers from 'app/features/users/state/reducers';
@@ -20,6 +21,7 @@ const rootReducers = {
   ...apiKeysReducers,
   ...foldersReducers,
   ...dashboardReducers,
+  ...exploreReducers,
   ...pluginReducers,
   ...dataSourcesReducers,
   ...usersReducers,
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index c2c59d35f5b..c64ce6133cf 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -4,7 +4,6 @@ import { DataQuery } from './series';
 import { RawTimeRange } from '@grafana/ui';
 import TableModel from 'app/core/table_model';
 import { LogsModel } from 'app/core/logs_model';
-import { DataSourceSelectItem } from 'app/types/datasources';
 
 export interface CompletionItem {
   /**
@@ -128,6 +127,19 @@ export interface QueryHintGetter {
   (query: DataQuery, results: any[], ...rest: any): QueryHint[];
 }
 
+export interface QueryIntervals {
+  interval: string;
+  intervalMs: number;
+}
+
+export interface QueryOptions {
+  interval: string;
+  format: string;
+  hinting?: boolean;
+  instant?: boolean;
+  valueWithRefId?: boolean;
+}
+
 export interface QueryTransaction {
   id: string;
   done: boolean;
@@ -142,6 +154,8 @@ export interface QueryTransaction {
   scanning?: boolean;
 }
 
+export type RangeScanner = () => RawTimeRange;
+
 export interface TextMatch {
   text: string;
   start: number;
@@ -153,18 +167,11 @@ export interface ExploreState {
   StartPage?: any;
   datasource: any;
   datasourceError: any;
-  datasourceLoading: boolean | null;
-  datasourceMissing: boolean;
-  exploreDatasources: DataSourceSelectItem[];
-  graphInterval: number; // in ms
   graphResult?: any[];
   history: HistoryItem[];
-  initialDatasource?: string;
-  initialQueries: DataQuery[];
   logsHighlighterExpressions?: string[];
   logsResult?: LogsModel;
   queryTransactions: QueryTransaction[];
-  range: RawTimeRange;
   scanning?: boolean;
   scanRange?: RawTimeRange;
   showingGraph: boolean;
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 72da1c76ea8..018c4c51d3d 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -19,6 +19,7 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
+import { ExploreState } from 'app/features/explore/state/reducers';
 export {
   Team,
   TeamsState,
@@ -81,6 +82,7 @@ export interface StoreState {
   folder: FolderState;
   dashboard: DashboardState;
   dataSources: DataSourcesState;
+  explore: ExploreState;
   users: UsersState;
   organization: OrganizationState;
   appNotifications: AppNotificationsState;

From 68c039b28901908aa91d9a9fea83f5e0d2655237 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 11 Jan 2019 18:26:56 +0100
Subject: [PATCH 328/352] Allow multiple Explore items for split

---
 public/app/core/utils/explore.ts              |  13 +-
 public/app/features/explore/Explore.tsx       | 272 +++++++++---------
 public/app/features/explore/Logs.tsx          |   6 +-
 public/app/features/explore/Wrapper.tsx       |  86 ++----
 public/app/features/explore/state/actions.ts  | 266 +++++++++++------
 public/app/features/explore/state/reducers.ts |  47 ++-
 public/app/types/explore.ts                   |   5 +
 public/sass/pages/_explore.scss               |   2 +-
 8 files changed, 413 insertions(+), 284 deletions(-)

diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index 871a020ccc2..026d1ba324c 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -206,11 +206,14 @@ export function ensureQueries(queries?: DataQuery[]): DataQuery[] {
  * A target is non-empty when it has keys (with non-empty values) other than refId and key.
  */
 export function hasNonEmptyQuery(queries: DataQuery[]): boolean {
-  return queries.some(
-    query =>
-      Object.keys(query)
-        .map(k => query[k])
-        .filter(v => v).length > 2
+  return (
+    queries &&
+    queries.some(
+      query =>
+        Object.keys(query)
+          .map(k => query[k])
+          .filter(v => v).length > 2
+    )
   );
 }
 
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 64e9c66ece5..a3177bebe79 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { withSize } from 'react-sizeme';
+import { AutoSizer } from 'react-virtualized';
 import { RawTimeRange, TimeRange } from '@grafana/ui';
 
 import { DataSourceSelectItem } from 'app/types/datasources';
-import { ExploreUrlState, HistoryItem, QueryTransaction, RangeScanner } from 'app/types/explore';
+import { ExploreUrlState, HistoryItem, QueryTransaction, RangeScanner, ExploreId } from 'app/types/explore';
 import { DataQuery } from 'app/types/series';
+import { StoreState } from 'app/types';
 import store from 'app/core/store';
-import { LAST_USED_DATASOURCE_KEY, ensureQueries } from 'app/core/utils/explore';
+import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { Emitter } from 'app/core/utils/emitter';
 
@@ -20,9 +21,11 @@ import {
   changeSize,
   changeTime,
   clickClear,
+  clickCloseSplit,
   clickExample,
   clickGraphButton,
   clickLogsButton,
+  clickSplit,
   clickTableButton,
   highlightLogsExpression,
   initializeExplore,
@@ -32,7 +35,7 @@ import {
   scanStart,
   scanStop,
 } from './state/actions';
-import { ExploreState } from './state/reducers';
+import { ExploreItemState } from './state/reducers';
 
 import Panel from './Panel';
 import QueryRows from './QueryRows';
@@ -50,17 +53,21 @@ interface ExploreProps {
   addQueryRow: typeof addQueryRow;
   changeDatasource: typeof changeDatasource;
   changeQuery: typeof changeQuery;
+  changeSize: typeof changeSize;
   changeTime: typeof changeTime;
   clickClear: typeof clickClear;
+  clickCloseSplit: typeof clickCloseSplit;
   clickExample: typeof clickExample;
   clickGraphButton: typeof clickGraphButton;
   clickLogsButton: typeof clickLogsButton;
+  clickSplit: typeof clickSplit;
   clickTableButton: typeof clickTableButton;
   datasourceError: string;
   datasourceInstance: any;
   datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   exploreDatasources: DataSourceSelectItem[];
+  exploreId: ExploreId;
   graphResult?: any[];
   highlightLogsExpression: typeof highlightLogsExpression;
   history: HistoryItem[];
@@ -70,9 +77,6 @@ interface ExploreProps {
   logsHighlighterExpressions?: string[];
   logsResult?: LogsModel;
   modifyQueries: typeof modifyQueries;
-  onChangeSplit: (split: boolean, state?: ExploreState) => void;
-  onSaveState: (key: string, state: ExploreState) => void;
-  position: string;
   queryTransactions: QueryTransaction[];
   removeQueryRow: typeof removeQueryRow;
   range: RawTimeRange;
@@ -83,8 +87,6 @@ interface ExploreProps {
   scanStart: typeof scanStart;
   scanStop: typeof scanStop;
   split: boolean;
-  splitState?: ExploreState;
-  stateKey: string;
   showingGraph: boolean;
   showingLogs: boolean;
   showingStartPage?: boolean;
@@ -132,7 +134,7 @@ interface ExploreProps {
  * The result viewers determine some of the query options sent to the datasource, e.g.,
  * `format`, to indicate eventual transformations by the datasources' result transformers.
  */
-export class Explore extends React.PureComponent<ExploreProps, any> {
+export class Explore extends React.PureComponent<ExploreProps> {
   el: any;
   exploreEvents: Emitter;
   /**
@@ -147,13 +149,23 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
   }
 
   async componentDidMount() {
-    // Load URL state and parse range
-    const { datasource, queries, range } = this.props.urlState as ExploreUrlState;
-    const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY);
-    const initialQueries: DataQuery[] = ensureQueries(queries);
-    const initialRange = { from: parseTime(range.from), to: parseTime(range.to) };
-    const width = this.el ? this.el.offsetWidth : 0;
-    this.props.initializeExplore(initialDatasource, initialQueries, initialRange, width, this.exploreEvents);
+    const { exploreId, split, urlState } = this.props;
+    if (!split) {
+      // Load URL state and parse range
+      const { datasource, queries, range = DEFAULT_RANGE } = (urlState || {}) as ExploreUrlState;
+      const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY);
+      const initialQueries: DataQuery[] = ensureQueries(queries);
+      const initialRange = { from: parseTime(range.from), to: parseTime(range.to) };
+      const width = this.el ? this.el.offsetWidth : 0;
+      this.props.initializeExplore(
+        exploreId,
+        initialDatasource,
+        initialQueries,
+        initialRange,
+        width,
+        this.exploreEvents
+      );
+    }
   }
 
   componentWillUnmount() {
@@ -165,17 +177,17 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
   };
 
   onAddQueryRow = index => {
-    this.props.addQueryRow(index);
+    this.props.addQueryRow(this.props.exploreId, index);
   };
 
   onChangeDatasource = async option => {
-    this.props.changeDatasource(option.value);
+    this.props.changeDatasource(this.props.exploreId, option.value);
   };
 
   onChangeQuery = (query: DataQuery, index: number, override?: boolean) => {
-    const { changeQuery, datasourceInstance } = this.props;
+    const { changeQuery, datasourceInstance, exploreId } = this.props;
 
-    changeQuery(query, index, override);
+    changeQuery(exploreId, query, index, override);
     if (query && !override && datasourceInstance.getHighlighterExpression && index === 0) {
       // Live preview of log search matches. Only use on first row for now
       this.updateLogsHighlights(query);
@@ -186,43 +198,36 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
     if (this.props.scanning && !changedByScanner) {
       this.onStopScanning();
     }
-    this.props.changeTime(range);
+    this.props.changeTime(this.props.exploreId, range);
   };
 
   onClickClear = () => {
-    this.props.clickClear();
+    this.props.clickClear(this.props.exploreId);
   };
 
   onClickCloseSplit = () => {
-    const { onChangeSplit } = this.props;
-    if (onChangeSplit) {
-      onChangeSplit(false);
-    }
+    this.props.clickCloseSplit();
   };
 
   onClickGraphButton = () => {
-    this.props.clickGraphButton();
+    this.props.clickGraphButton(this.props.exploreId);
   };
 
   onClickLogsButton = () => {
-    this.props.clickLogsButton();
+    this.props.clickLogsButton(this.props.exploreId);
   };
 
   // Use this in help pages to set page to a single query
   onClickExample = (query: DataQuery) => {
-    this.props.clickExample(query);
+    this.props.clickExample(this.props.exploreId, query);
   };
 
   onClickSplit = () => {
-    const { onChangeSplit } = this.props;
-    if (onChangeSplit) {
-      // const state = this.cloneState();
-      // onChangeSplit(true, state);
-    }
+    this.props.clickSplit();
   };
 
   onClickTableButton = () => {
-    this.props.clickTableButton();
+    this.props.clickTableButton(this.props.exploreId);
   };
 
   onClickLabel = (key: string, value: string) => {
@@ -233,18 +238,22 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
     const { datasourceInstance } = this.props;
     if (datasourceInstance && datasourceInstance.modifyQuery) {
       const modifier = (queries: DataQuery, action: any) => datasourceInstance.modifyQuery(queries, action);
-      this.props.modifyQueries(action, index, modifier);
+      this.props.modifyQueries(this.props.exploreId, action, index, modifier);
     }
   };
 
   onRemoveQueryRow = index => {
-    this.props.removeQueryRow(index);
+    this.props.removeQueryRow(this.props.exploreId, index);
+  };
+
+  onResize = (size: { height: number; width: number }) => {
+    this.props.changeSize(this.props.exploreId, size);
   };
 
   onStartScanning = () => {
     // Scanner will trigger a query
     const scanner = this.scanPreviousRange;
-    this.props.scanStart(scanner);
+    this.props.scanStart(this.props.exploreId, scanner);
   };
 
   scanPreviousRange = (): RawTimeRange => {
@@ -253,30 +262,21 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
   };
 
   onStopScanning = () => {
-    this.props.scanStop();
+    this.props.scanStop(this.props.exploreId);
   };
 
   onSubmit = () => {
-    this.props.runQueries();
+    this.props.runQueries(this.props.exploreId);
   };
 
   updateLogsHighlights = _.debounce((value: DataQuery) => {
     const { datasourceInstance } = this.props;
     if (datasourceInstance.getHighlighterExpression) {
       const expressions = [datasourceInstance.getHighlighterExpression(value)];
-      this.props.highlightLogsExpression(expressions);
+      this.props.highlightLogsExpression(this.props.exploreId, expressions);
     }
   }, 500);
 
-  // cloneState(): ExploreState {
-  //   // Copy state, but copy queries including modifications
-  //   return {
-  //     ...this.state,
-  //     queryTransactions: [],
-  //     initialQueries: [...this.modifiedQueries],
-  //   };
-  // }
-
   // saveState = () => {
   //   const { stateKey, onSaveState } = this.props;
   //   onSaveState(stateKey, this.cloneState());
@@ -290,13 +290,13 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
       datasourceLoading,
       datasourceMissing,
       exploreDatasources,
+      exploreId,
       graphResult,
       history,
       initialQueries,
       logsHighlighterExpressions,
       logsResult,
       queryTransactions,
-      position,
       range,
       scanning,
       scanRange,
@@ -323,7 +323,7 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
     return (
       <div className={exploreClass} ref={this.getRef}>
         <div className="navbar">
-          {position === 'left' ? (
+          {exploreId === 'left' ? (
             <div>
               <a className="navbar-page-btn">
                 <i className="fa fa-rocket" />
@@ -347,7 +347,7 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
             </div>
           ) : null}
           <div className="navbar__spacer" />
-          {position === 'left' && !split ? (
+          {exploreId === 'left' && !split ? (
             <div className="navbar-buttons">
               <button className="btn navbar-button" onClick={this.onClickSplit}>
                 Split
@@ -378,83 +378,96 @@ export class Explore extends React.PureComponent<ExploreProps, any> {
           </div>
         )}
 
-        {datasourceInstance && !datasourceError ? (
-          <div className="explore-container">
-            <QueryRows
-              datasource={datasourceInstance}
-              history={history}
-              initialQueries={initialQueries}
-              onAddQueryRow={this.onAddQueryRow}
-              onChangeQuery={this.onChangeQuery}
-              onClickHintFix={this.onModifyQueries}
-              onExecuteQuery={this.onSubmit}
-              onRemoveQueryRow={this.onRemoveQueryRow}
-              transactions={queryTransactions}
-              exploreEvents={this.exploreEvents}
-              range={range}
-            />
-            <main className="m-t-2">
-              <ErrorBoundary>
-                {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
-                {!showingStartPage && (
-                  <>
-                    {supportsGraph && (
-                      <Panel
-                        label="Graph"
-                        isOpen={showingGraph}
-                        loading={graphLoading}
-                        onToggle={this.onClickGraphButton}
-                      >
-                        <Graph
-                          data={graphResult}
-                          height={graphHeight}
-                          id={`explore-graph-${position}`}
-                          onChangeTime={this.onChangeTime}
-                          range={range}
-                          split={split}
-                        />
-                      </Panel>
-                    )}
-                    {supportsTable && (
-                      <Panel
-                        label="Table"
-                        loading={tableLoading}
-                        isOpen={showingTable}
-                        onToggle={this.onClickTableButton}
-                      >
-                        <Table data={tableResult} loading={tableLoading} onClickCell={this.onClickLabel} />
-                      </Panel>
-                    )}
-                    {supportsLogs && (
-                      <Panel label="Logs" loading={logsLoading} isOpen={showingLogs} onToggle={this.onClickLogsButton}>
-                        <Logs
-                          data={logsResult}
-                          key={logsResult.id}
-                          highlighterExpressions={logsHighlighterExpressions}
-                          loading={logsLoading}
-                          position={position}
-                          onChangeTime={this.onChangeTime}
-                          onClickLabel={this.onClickLabel}
-                          onStartScanning={this.onStartScanning}
-                          onStopScanning={this.onStopScanning}
-                          range={range}
-                          scanning={scanning}
-                          scanRange={scanRange}
-                        />
-                      </Panel>
-                    )}
-                  </>
+        {datasourceInstance &&
+          !datasourceError && (
+            <div className="explore-container">
+              <QueryRows
+                datasource={datasourceInstance}
+                history={history}
+                initialQueries={initialQueries}
+                onAddQueryRow={this.onAddQueryRow}
+                onChangeQuery={this.onChangeQuery}
+                onClickHintFix={this.onModifyQueries}
+                onExecuteQuery={this.onSubmit}
+                onRemoveQueryRow={this.onRemoveQueryRow}
+                transactions={queryTransactions}
+                exploreEvents={this.exploreEvents}
+                range={range}
+              />
+              <AutoSizer onResize={this.onResize} disableHeight>
+                {({ width }) => (
+                  <main className="m-t-2" style={{ width }}>
+                    <ErrorBoundary>
+                      {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
+                      {!showingStartPage && (
+                        <>
+                          {supportsGraph && (
+                            <Panel
+                              label="Graph"
+                              isOpen={showingGraph}
+                              loading={graphLoading}
+                              onToggle={this.onClickGraphButton}
+                            >
+                              <Graph
+                                data={graphResult}
+                                height={graphHeight}
+                                id={`explore-graph-${exploreId}`}
+                                onChangeTime={this.onChangeTime}
+                                range={range}
+                                split={split}
+                              />
+                            </Panel>
+                          )}
+                          {supportsTable && (
+                            <Panel
+                              label="Table"
+                              loading={tableLoading}
+                              isOpen={showingTable}
+                              onToggle={this.onClickTableButton}
+                            >
+                              <Table data={tableResult} loading={tableLoading} onClickCell={this.onClickLabel} />
+                            </Panel>
+                          )}
+                          {supportsLogs && (
+                            <Panel
+                              label="Logs"
+                              loading={logsLoading}
+                              isOpen={showingLogs}
+                              onToggle={this.onClickLogsButton}
+                            >
+                              <Logs
+                                data={logsResult}
+                                exploreId={exploreId}
+                                key={logsResult.id}
+                                highlighterExpressions={logsHighlighterExpressions}
+                                loading={logsLoading}
+                                onChangeTime={this.onChangeTime}
+                                onClickLabel={this.onClickLabel}
+                                onStartScanning={this.onStartScanning}
+                                onStopScanning={this.onStopScanning}
+                                range={range}
+                                scanning={scanning}
+                                scanRange={scanRange}
+                              />
+                            </Panel>
+                          )}
+                        </>
+                      )}
+                    </ErrorBoundary>
+                  </main>
                 )}
-              </ErrorBoundary>
-            </main>
-          </div>
-        ) : null}
+              </AutoSizer>
+            </div>
+          )}
       </div>
     );
   }
 }
 
-function mapStateToProps({ explore }) {
+function mapStateToProps(state: StoreState, { exploreId }) {
+  const explore = state.explore;
+  const { split } = explore;
+  const item: ExploreItemState = explore[exploreId];
   const {
     StartPage,
     datasourceError,
@@ -480,7 +493,7 @@ function mapStateToProps({ explore }) {
     supportsLogs,
     supportsTable,
     tableResult,
-  } = explore as ExploreState;
+  } = item;
   return {
     StartPage,
     datasourceError,
@@ -502,6 +515,7 @@ function mapStateToProps({ explore }) {
     showingLogs,
     showingStartPage,
     showingTable,
+    split,
     supportsGraph,
     supportsLogs,
     supportsTable,
@@ -513,20 +527,22 @@ const mapDispatchToProps = {
   addQueryRow,
   changeDatasource,
   changeQuery,
+  changeSize,
   changeTime,
   clickClear,
+  clickCloseSplit,
   clickExample,
   clickGraphButton,
   clickLogsButton,
+  clickSplit,
   clickTableButton,
   highlightLogsExpression,
   initializeExplore,
   modifyQueries,
-  onSize: changeSize, // used by withSize HOC
   removeQueryRow,
   runQueries,
   scanStart,
   scanStop,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(withSize()(Explore)));
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Explore));
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 1a384cf011d..d07b31e2ff1 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -241,9 +241,9 @@ function renderMetaItem(value: any, kind: LogsMetaKind) {
 
 interface LogsProps {
   data: LogsModel;
+  exploreId: string;
   highlighterExpressions: string[];
   loading: boolean;
-  position: string;
   range?: RawTimeRange;
   scanning?: boolean;
   scanRange?: RawTimeRange;
@@ -348,10 +348,10 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
   render() {
     const {
       data,
+      exploreId,
       highlighterExpressions,
       loading = false,
       onClickLabel,
-      position,
       range,
       scanning,
       scanRange,
@@ -400,7 +400,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             data={data.series}
             height="100px"
             range={range}
-            id={`explore-logs-graph-${position}`}
+            id={`explore-logs-graph-${exploreId}`}
             onChangeTime={this.props.onChangeTime}
             onToggleSeries={this.onToggleLogLevel}
             userOptions={graphOptions}
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index de1eee4c662..04f189749bf 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -3,9 +3,9 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
 import { updateLocation } from 'app/core/actions';
-import { serializeStateToUrlParam, parseUrlState } from 'app/core/utils/explore';
+// import { serializeStateToUrlParam, parseUrlState } from 'app/core/utils/explore';
 import { StoreState } from 'app/types';
-import { ExploreState } from 'app/types/explore';
+import { ExploreId } from 'app/types/explore';
 
 import ErrorBoundary from './ErrorBoundary';
 import Explore from './Explore';
@@ -13,81 +13,41 @@ import Explore from './Explore';
 interface WrapperProps {
   backendSrv?: any;
   datasourceSrv?: any;
-  updateLocation: typeof updateLocation;
-  urlStates: { [key: string]: string };
-}
-
-interface WrapperState {
   split: boolean;
-  splitState: ExploreState;
+  updateLocation: typeof updateLocation;
+  // urlStates: { [key: string]: string };
 }
 
-const STATE_KEY_LEFT = 'state';
-const STATE_KEY_RIGHT = 'stateRight';
-
-export class Wrapper extends Component<WrapperProps, WrapperState> {
-  urlStates: { [key: string]: string };
+export class Wrapper extends Component<WrapperProps> {
+  // urlStates: { [key: string]: string };
 
   constructor(props: WrapperProps) {
     super(props);
-    this.urlStates = props.urlStates;
-    this.state = {
-      split: Boolean(props.urlStates[STATE_KEY_RIGHT]),
-      splitState: undefined,
-    };
+    // this.urlStates = props.urlStates;
   }
 
-  onChangeSplit = (split: boolean, splitState: ExploreState) => {
-    this.setState({ split, splitState });
-    // When closing split, remove URL state for split part
-    if (!split) {
-      delete this.urlStates[STATE_KEY_RIGHT];
-      this.props.updateLocation({
-        query: this.urlStates,
-      });
-    }
-  };
-
-  onSaveState = (key: string, state: ExploreState) => {
-    const urlState = serializeStateToUrlParam(state, true);
-    this.urlStates[key] = urlState;
-    this.props.updateLocation({
-      query: this.urlStates,
-    });
-  };
+  // onSaveState = (key: string, state: ExploreState) => {
+  //   const urlState = serializeStateToUrlParam(state, true);
+  //   this.urlStates[key] = urlState;
+  //   this.props.updateLocation({
+  //     query: this.urlStates,
+  //   });
+  // };
 
   render() {
-    const { datasourceSrv } = this.props;
+    const { split } = this.props;
     // State overrides for props from first Explore
-    const { split, splitState } = this.state;
-    const urlStateLeft = parseUrlState(this.urlStates[STATE_KEY_LEFT]);
-    const urlStateRight = parseUrlState(this.urlStates[STATE_KEY_RIGHT]);
+    // const urlStateLeft = parseUrlState(this.urlStates[STATE_KEY_LEFT]);
+    // const urlStateRight = parseUrlState(this.urlStates[STATE_KEY_RIGHT]);
 
     return (
       <div className="explore-wrapper">
         <ErrorBoundary>
-          <Explore
-            datasourceSrv={datasourceSrv}
-            onChangeSplit={this.onChangeSplit}
-            onSaveState={this.onSaveState}
-            position="left"
-            split={split}
-            stateKey={STATE_KEY_LEFT}
-            urlState={urlStateLeft}
-          />
+          <Explore exploreId={ExploreId.left} />
         </ErrorBoundary>
         {split && (
           <ErrorBoundary>
-            <Explore
-              datasourceSrv={datasourceSrv}
-              onChangeSplit={this.onChangeSplit}
-              onSaveState={this.onSaveState}
-              position="right"
-              split={split}
-              splitState={splitState}
-              stateKey={STATE_KEY_RIGHT}
-              urlState={urlStateRight}
-            />
+            <Explore exploreId={ExploreId.right} />
           </ErrorBoundary>
         )}
       </div>
@@ -95,9 +55,11 @@ export class Wrapper extends Component<WrapperProps, WrapperState> {
   }
 }
 
-const mapStateToProps = (state: StoreState) => ({
-  urlStates: state.location.query,
-});
+const mapStateToProps = (state: StoreState) => {
+  // urlStates: state.location.query,
+  const { split } = state.explore;
+  return { split };
+};
 
 const mapDispatchToProps = {
   updateLocation,
diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts
index d70a458059e..145b7506e79 100644
--- a/public/app/features/explore/state/actions.ts
+++ b/public/app/features/explore/state/actions.ts
@@ -17,6 +17,7 @@ import { DataSourceSelectItem } from 'app/types/datasources';
 import { DataQuery, StoreState } from 'app/types';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import {
+  ExploreId,
   HistoryItem,
   RangeScanner,
   ResultType,
@@ -26,7 +27,7 @@ import {
   QueryHintGetter,
 } from 'app/types/explore';
 import { Emitter } from 'app/core/core';
-import { dispatch } from 'rxjs/internal/observable/pairs';
+import { ExploreItemState } from './reducers';
 
 export enum ActionTypes {
   AddQueryRow = 'ADD_QUERY_ROW',
@@ -35,9 +36,11 @@ export enum ActionTypes {
   ChangeSize = 'CHANGE_SIZE',
   ChangeTime = 'CHANGE_TIME',
   ClickClear = 'CLICK_CLEAR',
+  ClickCloseSplit = 'CLICK_CLOSE_SPLIT',
   ClickExample = 'CLICK_EXAMPLE',
   ClickGraphButton = 'CLICK_GRAPH_BUTTON',
   ClickLogsButton = 'CLICK_LOGS_BUTTON',
+  ClickSplit = 'CLICK_SPLIT',
   ClickTableButton = 'CLICK_TABLE_BUTTON',
   HighlightLogsExpression = 'HIGHLIGHT_LOGS_EXPRESSION',
   InitializeExplore = 'INITIALIZE_EXPLORE',
@@ -59,12 +62,14 @@ export enum ActionTypes {
 
 export interface AddQueryRowAction {
   type: ActionTypes.AddQueryRow;
+  exploreId: ExploreId;
   index: number;
   query: DataQuery;
 }
 
 export interface ChangeQueryAction {
   type: ActionTypes.ChangeQuery;
+  exploreId: ExploreId;
   query: DataQuery;
   index: number;
   override: boolean;
@@ -72,38 +77,55 @@ export interface ChangeQueryAction {
 
 export interface ChangeSizeAction {
   type: ActionTypes.ChangeSize;
+  exploreId: ExploreId;
   width: number;
   height: number;
 }
 
 export interface ChangeTimeAction {
   type: ActionTypes.ChangeTime;
+  exploreId: ExploreId;
   range: TimeRange;
 }
 
 export interface ClickClearAction {
   type: ActionTypes.ClickClear;
+  exploreId: ExploreId;
+}
+
+export interface ClickCloseSplitAction {
+  type: ActionTypes.ClickCloseSplit;
 }
 
 export interface ClickExampleAction {
   type: ActionTypes.ClickExample;
+  exploreId: ExploreId;
   query: DataQuery;
 }
 
 export interface ClickGraphButtonAction {
   type: ActionTypes.ClickGraphButton;
+  exploreId: ExploreId;
 }
 
 export interface ClickLogsButtonAction {
   type: ActionTypes.ClickLogsButton;
+  exploreId: ExploreId;
+}
+
+export interface ClickSplitAction {
+  type: ActionTypes.ClickSplit;
+  itemState: ExploreItemState;
 }
 
 export interface ClickTableButtonAction {
   type: ActionTypes.ClickTableButton;
+  exploreId: ExploreId;
 }
 
 export interface InitializeExploreAction {
   type: ActionTypes.InitializeExplore;
+  exploreId: ExploreId;
   containerWidth: number;
   datasource: string;
   eventBridge: Emitter;
@@ -114,25 +136,30 @@ export interface InitializeExploreAction {
 
 export interface HighlightLogsExpressionAction {
   type: ActionTypes.HighlightLogsExpression;
+  exploreId: ExploreId;
   expressions: string[];
 }
 
 export interface LoadDatasourceFailureAction {
   type: ActionTypes.LoadDatasourceFailure;
+  exploreId: ExploreId;
   error: string;
 }
 
 export interface LoadDatasourcePendingAction {
   type: ActionTypes.LoadDatasourcePending;
+  exploreId: ExploreId;
   datasourceId: number;
 }
 
 export interface LoadDatasourceMissingAction {
   type: ActionTypes.LoadDatasourceMissing;
+  exploreId: ExploreId;
 }
 
 export interface LoadDatasourceSuccessAction {
   type: ActionTypes.LoadDatasourceSuccess;
+  exploreId: ExploreId;
   StartPage?: any;
   datasourceInstance: any;
   history: HistoryItem[];
@@ -147,6 +174,7 @@ export interface LoadDatasourceSuccessAction {
 
 export interface ModifyQueriesAction {
   type: ActionTypes.ModifyQueries;
+  exploreId: ExploreId;
   modification: any;
   index: number;
   modifier: (queries: DataQuery[], modification: any) => DataQuery[];
@@ -154,11 +182,13 @@ export interface ModifyQueriesAction {
 
 export interface QueryTransactionFailureAction {
   type: ActionTypes.QueryTransactionFailure;
+  exploreId: ExploreId;
   queryTransactions: QueryTransaction[];
 }
 
 export interface QueryTransactionStartAction {
   type: ActionTypes.QueryTransactionStart;
+  exploreId: ExploreId;
   resultType: ResultType;
   rowIndex: number;
   transaction: QueryTransaction;
@@ -166,27 +196,32 @@ export interface QueryTransactionStartAction {
 
 export interface QueryTransactionSuccessAction {
   type: ActionTypes.QueryTransactionSuccess;
+  exploreId: ExploreId;
   history: HistoryItem[];
   queryTransactions: QueryTransaction[];
 }
 
 export interface RemoveQueryRowAction {
   type: ActionTypes.RemoveQueryRow;
+  exploreId: ExploreId;
   index: number;
 }
 
 export interface ScanStartAction {
   type: ActionTypes.ScanStart;
+  exploreId: ExploreId;
   scanner: RangeScanner;
 }
 
 export interface ScanRangeAction {
   type: ActionTypes.ScanRange;
+  exploreId: ExploreId;
   range: RawTimeRange;
 }
 
 export interface ScanStopAction {
   type: ActionTypes.ScanStop;
+  exploreId: ExploreId;
 }
 
 export type Action =
@@ -195,9 +230,11 @@ export type Action =
   | ChangeSizeAction
   | ChangeTimeAction
   | ClickClearAction
+  | ClickCloseSplitAction
   | ClickExampleAction
   | ClickGraphButtonAction
   | ClickLogsButtonAction
+  | ClickSplitAction
   | ClickTableButtonAction
   | HighlightLogsExpressionAction
   | InitializeExploreAction
@@ -215,94 +252,126 @@ export type Action =
   | ScanStopAction;
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
-export function addQueryRow(index: number): AddQueryRowAction {
+export function addQueryRow(exploreId: ExploreId, index: number): AddQueryRowAction {
   const query = generateEmptyQuery(index + 1);
-  return { type: ActionTypes.AddQueryRow, index, query };
+  return { type: ActionTypes.AddQueryRow, exploreId, index, query };
 }
 
-export function changeDatasource(datasource: string): ThunkResult<void> {
+export function changeDatasource(exploreId: ExploreId, datasource: string): ThunkResult<void> {
   return async dispatch => {
     const instance = await getDatasourceSrv().get(datasource);
-    dispatch(loadDatasource(instance));
+    dispatch(loadDatasource(exploreId, instance));
   };
 }
 
-export function changeQuery(query: DataQuery, index: number, override: boolean): ThunkResult<void> {
+export function changeQuery(
+  exploreId: ExploreId,
+  query: DataQuery,
+  index: number,
+  override: boolean
+): ThunkResult<void> {
   return dispatch => {
     // Null query means reset
     if (query === null) {
       query = { ...generateEmptyQuery(index) };
     }
 
-    dispatch({ type: ActionTypes.ChangeQuery, query, index, override });
+    dispatch({ type: ActionTypes.ChangeQuery, exploreId, query, index, override });
     if (override) {
-      dispatch(runQueries());
+      dispatch(runQueries(exploreId));
     }
   };
 }
 
-export function changeSize({ height, width }: { height: number; width: number }): ChangeSizeAction {
-  return { type: ActionTypes.ChangeSize, height, width };
+export function changeSize(
+  exploreId: ExploreId,
+  { height, width }: { height: number; width: number }
+): ChangeSizeAction {
+  return { type: ActionTypes.ChangeSize, exploreId, height, width };
 }
 
-export function changeTime(range: TimeRange): ThunkResult<void> {
+export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.ChangeTime, range });
-    dispatch(runQueries());
+    dispatch({ type: ActionTypes.ChangeTime, exploreId, range });
+    dispatch(runQueries(exploreId));
   };
 }
 
-export function clickExample(rawQuery: DataQuery): ThunkResult<void> {
+export function clickClear(exploreId: ExploreId): ThunkResult<void> {
   return dispatch => {
-    const query = { ...rawQuery, ...generateEmptyQuery() };
-    dispatch({
-      type: ActionTypes.ClickExample,
-      query,
-    });
-    dispatch(runQueries());
-  };
-}
-
-export function clickClear(): ThunkResult<void> {
-  return dispatch => {
-    dispatch(scanStop());
-    dispatch({ type: ActionTypes.ClickClear });
+    dispatch(scanStop(exploreId));
+    dispatch({ type: ActionTypes.ClickClear, exploreId });
     // TODO save state
   };
 }
 
-export function clickGraphButton(): ThunkResult<void> {
+export function clickCloseSplit(): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.ClickCloseSplit });
+    // When closing split, remove URL state for split part
+    // TODO save state
+  };
+}
+
+export function clickExample(exploreId: ExploreId, rawQuery: DataQuery): ThunkResult<void> {
+  return dispatch => {
+    const query = { ...rawQuery, ...generateEmptyQuery() };
+    dispatch({
+      type: ActionTypes.ClickExample,
+      exploreId,
+      query,
+    });
+    dispatch(runQueries(exploreId));
+  };
+}
+
+export function clickGraphButton(exploreId: ExploreId): ThunkResult<void> {
   return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ClickGraphButton });
-    if (getState().explore.showingGraph) {
-      dispatch(runQueries());
+    dispatch({ type: ActionTypes.ClickGraphButton, exploreId });
+    if (getState().explore[exploreId].showingGraph) {
+      dispatch(runQueries(exploreId));
     }
   };
 }
 
-export function clickLogsButton(): ThunkResult<void> {
+export function clickLogsButton(exploreId: ExploreId): ThunkResult<void> {
   return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ClickLogsButton });
-    if (getState().explore.showingLogs) {
-      dispatch(runQueries());
+    dispatch({ type: ActionTypes.ClickLogsButton, exploreId });
+    if (getState().explore[exploreId].showingLogs) {
+      dispatch(runQueries(exploreId));
     }
   };
 }
 
-export function clickTableButton(): ThunkResult<void> {
+export function clickSplit(): ThunkResult<void> {
   return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ClickTableButton });
-    if (getState().explore.showingTable) {
-      dispatch(runQueries());
+    // Clone left state to become the right state
+    const leftState = getState().explore.left;
+    const itemState = {
+      ...leftState,
+      queryTransactions: [],
+      initialQueries: leftState.modifiedQueries.slice(),
+    };
+    dispatch({ type: ActionTypes.ClickSplit, itemState });
+    // TODO save state
+  };
+}
+
+export function clickTableButton(exploreId: ExploreId): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ClickTableButton, exploreId });
+    if (getState().explore[exploreId].showingTable) {
+      dispatch(runQueries(exploreId));
     }
   };
 }
 
-export function highlightLogsExpression(expressions: string[]): HighlightLogsExpressionAction {
-  return { type: ActionTypes.HighlightLogsExpression, expressions };
+export function highlightLogsExpression(exploreId: ExploreId, expressions: string[]): HighlightLogsExpressionAction {
+  return { type: ActionTypes.HighlightLogsExpression, exploreId, expressions };
 }
 
 export function initializeExplore(
+  exploreId: ExploreId,
   datasource: string,
   queries: DataQuery[],
   range: RawTimeRange,
@@ -320,6 +389,7 @@ export function initializeExplore(
 
     dispatch({
       type: ActionTypes.InitializeExplore,
+      exploreId,
       containerWidth,
       datasource,
       eventBridge,
@@ -335,26 +405,35 @@ export function initializeExplore(
       } else {
         instance = await getDatasourceSrv().get();
       }
-      dispatch(loadDatasource(instance));
+      dispatch(loadDatasource(exploreId, instance));
     } else {
-      dispatch(loadDatasourceMissing);
+      dispatch(loadDatasourceMissing(exploreId));
     }
   };
 }
 
-export const loadDatasourceFailure = (error: string): LoadDatasourceFailureAction => ({
+export const loadDatasourceFailure = (exploreId: ExploreId, error: string): LoadDatasourceFailureAction => ({
   type: ActionTypes.LoadDatasourceFailure,
+  exploreId,
   error,
 });
 
-export const loadDatasourceMissing: LoadDatasourceMissingAction = { type: ActionTypes.LoadDatasourceMissing };
+export const loadDatasourceMissing = (exploreId: ExploreId): LoadDatasourceMissingAction => ({
+  type: ActionTypes.LoadDatasourceMissing,
+  exploreId,
+});
 
-export const loadDatasourcePending = (datasourceId: number): LoadDatasourcePendingAction => ({
+export const loadDatasourcePending = (exploreId: ExploreId, datasourceId: number): LoadDatasourcePendingAction => ({
   type: ActionTypes.LoadDatasourcePending,
+  exploreId,
   datasourceId,
 });
 
-export const loadDatasourceSuccess = (instance: any, queries: DataQuery[]): LoadDatasourceSuccessAction => {
+export const loadDatasourceSuccess = (
+  exploreId: ExploreId,
+  instance: any,
+  queries: DataQuery[]
+): LoadDatasourceSuccessAction => {
   // Capabilities
   const supportsGraph = instance.meta.metrics;
   const supportsLogs = instance.meta.logs;
@@ -369,6 +448,7 @@ export const loadDatasourceSuccess = (instance: any, queries: DataQuery[]): Load
 
   return {
     type: ActionTypes.LoadDatasourceSuccess,
+    exploreId,
     StartPage,
     datasourceInstance: instance,
     history,
@@ -381,12 +461,12 @@ export const loadDatasourceSuccess = (instance: any, queries: DataQuery[]): Load
   };
 };
 
-export function loadDatasource(instance: any): ThunkResult<void> {
+export function loadDatasource(exploreId: ExploreId, instance: any): ThunkResult<void> {
   return async (dispatch, getState) => {
     const datasourceId = instance.meta.id;
 
     // Keep ID to track selection
-    dispatch(loadDatasourcePending(datasourceId));
+    dispatch(loadDatasourcePending(exploreId, datasourceId));
 
     let datasourceError = null;
     try {
@@ -396,11 +476,11 @@ export function loadDatasource(instance: any): ThunkResult<void> {
       datasourceError = (error && error.statusText) || 'Network error';
     }
     if (datasourceError) {
-      dispatch(loadDatasourceFailure(datasourceError));
+      dispatch(loadDatasourceFailure(exploreId, datasourceError));
       return;
     }
 
-    if (datasourceId !== getState().explore.requestedDatasourceId) {
+    if (datasourceId !== getState().explore[exploreId].requestedDatasourceId) {
       // User already changed datasource again, discard results
       return;
     }
@@ -410,9 +490,9 @@ export function loadDatasource(instance: any): ThunkResult<void> {
     }
 
     // Check if queries can be imported from previously selected datasource
-    const queries = getState().explore.modifiedQueries;
+    const queries = getState().explore[exploreId].modifiedQueries;
     let importedQueries = queries;
-    const origin = getState().explore.datasourceInstance;
+    const origin = getState().explore[exploreId].datasourceInstance;
     if (origin) {
       if (origin.meta.id === instance.meta.id) {
         // Keep same queries if same type of datasource
@@ -426,7 +506,7 @@ export function loadDatasource(instance: any): ThunkResult<void> {
       }
     }
 
-    if (datasourceId !== getState().explore.requestedDatasourceId) {
+    if (datasourceId !== getState().explore[exploreId].requestedDatasourceId) {
       // User already changed datasource again, discard results
       return;
     }
@@ -437,23 +517,33 @@ export function loadDatasource(instance: any): ThunkResult<void> {
       ...generateEmptyQuery(i),
     }));
 
-    dispatch(loadDatasourceSuccess(instance, nextQueries));
-    dispatch(runQueries());
+    dispatch(loadDatasourceSuccess(exploreId, instance, nextQueries));
+    dispatch(runQueries(exploreId));
   };
 }
 
-export function modifyQueries(modification: any, index: number, modifier: any): ThunkResult<void> {
+export function modifyQueries(
+  exploreId: ExploreId,
+  modification: any,
+  index: number,
+  modifier: any
+): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.ModifyQueries, modification, index, modifier });
+    dispatch({ type: ActionTypes.ModifyQueries, exploreId, modification, index, modifier });
     if (!modification.preventSubmit) {
-      dispatch(runQueries());
+      dispatch(runQueries(exploreId));
     }
   };
 }
 
-export function queryTransactionFailure(transactionId: string, response: any, datasourceId: string): ThunkResult<void> {
+export function queryTransactionFailure(
+  exploreId: ExploreId,
+  transactionId: string,
+  response: any,
+  datasourceId: string
+): ThunkResult<void> {
   return (dispatch, getState) => {
-    const { datasourceInstance, queryTransactions } = getState().explore;
+    const { datasourceInstance, queryTransactions } = getState().explore[exploreId];
     if (datasourceInstance.meta.id !== datasourceId || response.cancelled) {
       // Navigated away, queries did not matter
       return;
@@ -500,19 +590,21 @@ export function queryTransactionFailure(transactionId: string, response: any, da
       return qt;
     });
 
-    dispatch({ type: ActionTypes.QueryTransactionFailure, queryTransactions: nextQueryTransactions });
+    dispatch({ type: ActionTypes.QueryTransactionFailure, exploreId, queryTransactions: nextQueryTransactions });
   };
 }
 
 export function queryTransactionStart(
+  exploreId: ExploreId,
   transaction: QueryTransaction,
   resultType: ResultType,
   rowIndex: number
 ): QueryTransactionStartAction {
-  return { type: ActionTypes.QueryTransactionStart, resultType, rowIndex, transaction };
+  return { type: ActionTypes.QueryTransactionStart, exploreId, resultType, rowIndex, transaction };
 }
 
 export function queryTransactionSuccess(
+  exploreId: ExploreId,
   transactionId: string,
   result: any,
   latency: number,
@@ -520,7 +612,7 @@ export function queryTransactionSuccess(
   datasourceId: string
 ): ThunkResult<void> {
   return (dispatch, getState) => {
-    const { datasourceInstance, history, queryTransactions, scanner, scanning } = getState().explore;
+    const { datasourceInstance, history, queryTransactions, scanner, scanning } = getState().explore[exploreId];
 
     // If datasource already changed, results do not matter
     if (datasourceInstance.meta.id !== datasourceId) {
@@ -558,6 +650,7 @@ export function queryTransactionSuccess(
 
     dispatch({
       type: ActionTypes.QueryTransactionSuccess,
+      exploreId,
       history: nextHistory,
       queryTransactions: nextQueryTransactions,
     });
@@ -568,24 +661,24 @@ export function queryTransactionSuccess(
         const other = nextQueryTransactions.find(qt => qt.scanning && !qt.done);
         if (!other) {
           const range = scanner();
-          dispatch({ type: ActionTypes.ScanRange, range });
+          dispatch({ type: ActionTypes.ScanRange, exploreId, range });
         }
       } else {
         // We can stop scanning if we have a result
-        dispatch(scanStop());
+        dispatch(scanStop(exploreId));
       }
     }
   };
 }
 
-export function removeQueryRow(index: number): ThunkResult<void> {
+export function removeQueryRow(exploreId: ExploreId, index: number): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.RemoveQueryRow, index });
-    dispatch(runQueries());
+    dispatch({ type: ActionTypes.RemoveQueryRow, exploreId, index });
+    dispatch(runQueries(exploreId));
   };
 }
 
-export function runQueries() {
+export function runQueries(exploreId: ExploreId) {
   return (dispatch, getState) => {
     const {
       datasourceInstance,
@@ -596,10 +689,10 @@ export function runQueries() {
       supportsGraph,
       supportsLogs,
       supportsTable,
-    } = getState().explore;
+    } = getState().explore[exploreId];
 
     if (!hasNonEmptyQuery(modifiedQueries)) {
-      dispatch({ type: ActionTypes.RunQueriesEmpty });
+      dispatch({ type: ActionTypes.RunQueriesEmpty, exploreId });
       return;
     }
 
@@ -611,6 +704,7 @@ export function runQueries() {
     if (showingTable && supportsTable) {
       dispatch(
         runQueriesForType(
+          exploreId,
           'Table',
           {
             interval,
@@ -625,6 +719,7 @@ export function runQueries() {
     if (showingGraph && supportsGraph) {
       dispatch(
         runQueriesForType(
+          exploreId,
           'Graph',
           {
             interval,
@@ -636,13 +731,18 @@ export function runQueries() {
       );
     }
     if (showingLogs && supportsLogs) {
-      dispatch(runQueriesForType('Logs', { interval, format: 'logs' }));
+      dispatch(runQueriesForType(exploreId, 'Logs', { interval, format: 'logs' }));
     }
     // TODO save state
   };
 }
 
-function runQueriesForType(resultType: ResultType, queryOptions: QueryOptions, resultGetter?: any) {
+function runQueriesForType(
+  exploreId: ExploreId,
+  resultType: ResultType,
+  queryOptions: QueryOptions,
+  resultGetter?: any
+) {
   return async (dispatch, getState) => {
     const {
       datasourceInstance,
@@ -651,7 +751,7 @@ function runQueriesForType(resultType: ResultType, queryOptions: QueryOptions, r
       queryIntervals,
       range,
       scanning,
-    } = getState().explore;
+    } = getState().explore[exploreId];
     const datasourceId = datasourceInstance.meta.id;
 
     // Run all queries concurrently
@@ -665,30 +765,30 @@ function runQueriesForType(resultType: ResultType, queryOptions: QueryOptions, r
         queryIntervals,
         scanning
       );
-      dispatch(queryTransactionStart(transaction, resultType, rowIndex));
+      dispatch(queryTransactionStart(exploreId, transaction, resultType, rowIndex));
       try {
         const now = Date.now();
         const res = await datasourceInstance.query(transaction.options);
         eventBridge.emit('data-received', res.data || []);
         const latency = Date.now() - now;
         const results = resultGetter ? resultGetter(res.data) : res.data;
-        dispatch(queryTransactionSuccess(transaction.id, results, latency, queries, datasourceId));
+        dispatch(queryTransactionSuccess(exploreId, transaction.id, results, latency, queries, datasourceId));
       } catch (response) {
         eventBridge.emit('data-error', response);
-        dispatch(queryTransactionFailure(transaction.id, response, datasourceId));
+        dispatch(queryTransactionFailure(exploreId, transaction.id, response, datasourceId));
       }
     });
   };
 }
 
-export function scanStart(scanner: RangeScanner): ThunkResult<void> {
+export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.ScanStart, scanner });
+    dispatch({ type: ActionTypes.ScanStart, exploreId, scanner });
     const range = scanner();
-    dispatch({ type: ActionTypes.ScanRange, range });
+    dispatch({ type: ActionTypes.ScanRange, exploreId, range });
   };
 }
 
-export function scanStop(): ScanStopAction {
-  return { type: ActionTypes.ScanStop };
+export function scanStop(exploreId: ExploreId): ScanStopAction {
+  return { type: ActionTypes.ScanStop, exploreId };
 }
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index b49d54405d1..cea4d766c58 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -16,7 +16,14 @@ import { LogsModel } from 'app/core/logs_model';
 import TableModel from 'app/core/table_model';
 
 // TODO move to types
+
 export interface ExploreState {
+  split: boolean;
+  left: ExploreItemState;
+  right: ExploreItemState;
+}
+
+export interface ExploreItemState {
   StartPage?: any;
   containerWidth: number;
   datasourceInstance: any;
@@ -57,7 +64,7 @@ export const DEFAULT_RANGE = {
 // Millies step for helper bar charts
 const DEFAULT_GRAPH_INTERVAL = 15 * 1000;
 
-const initialExploreState: ExploreState = {
+const makeExploreItemState = (): ExploreItemState => ({
   StartPage: undefined,
   containerWidth: 0,
   datasourceInstance: null,
@@ -79,9 +86,15 @@ const initialExploreState: ExploreState = {
   supportsGraph: null,
   supportsLogs: null,
   supportsTable: null,
+});
+
+const initialExploreState: ExploreState = {
+  split: false,
+  left: makeExploreItemState(),
+  right: makeExploreItemState(),
 };
 
-export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
+const itemReducer = (state, action: Action): ExploreItemState => {
   switch (action.type) {
     case ActionTypes.AddQueryRow: {
       const { initialQueries, modifiedQueries, queryTransactions } = state;
@@ -407,6 +420,36 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
   return state;
 };
 
+export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
+  switch (action.type) {
+    case ActionTypes.ClickCloseSplit: {
+      return {
+        ...state,
+        split: false,
+      };
+    }
+
+    case ActionTypes.ClickSplit: {
+      return {
+        ...state,
+        split: true,
+        right: action.itemState,
+      };
+    }
+  }
+
+  const { exploreId } = action as any;
+  if (exploreId !== undefined) {
+    const exploreItemState = state[exploreId];
+    return {
+      ...state,
+      [exploreId]: itemReducer(exploreItemState, action),
+    };
+  }
+
+  return state;
+};
+
 export default {
   explore: exploreReducer,
 };
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index c64ce6133cf..525c8f74c81 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -75,6 +75,11 @@ export interface CompletionItemGroup {
   skipSort?: boolean;
 }
 
+export enum ExploreId {
+  left = 'left',
+  right = 'right',
+}
+
 export interface HistoryItem {
   ts: number;
   query: DataQuery;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 098dae1a4a2..abd13a10368 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -1,5 +1,5 @@
 .explore {
-  width: 100%;
+  flex: 1 1 auto;
 
   &-container {
     padding: $dashboard-padding;

From be172d3e4a4c22e6f389a85aaa0fec02fe9ff75a Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sat, 12 Jan 2019 23:22:28 +0100
Subject: [PATCH 329/352] Save state in URL and fix tests

---
 public/app/core/utils/explore.test.ts         | 90 +++++++------------
 public/app/core/utils/explore.ts              |  7 +-
 public/app/features/explore/Explore.tsx       | 17 ++--
 public/app/features/explore/Wrapper.tsx       | 48 +++++-----
 public/app/features/explore/state/actions.ts  | 60 +++++++++++--
 public/app/features/explore/state/reducers.ts | 14 ++-
 6 files changed, 131 insertions(+), 105 deletions(-)

diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts
index a3b08516d16..32135eab90a 100644
--- a/public/app/core/utils/explore.test.ts
+++ b/public/app/core/utils/explore.test.ts
@@ -6,26 +6,13 @@ import {
   clearHistory,
   hasNonEmptyQuery,
 } from './explore';
-import { ExploreState } from 'app/types/explore';
+import { ExploreUrlState } from 'app/types/explore';
 import store from 'app/core/store';
 
-const DEFAULT_EXPLORE_STATE: ExploreState = {
+const DEFAULT_EXPLORE_STATE: ExploreUrlState = {
   datasource: null,
-  datasourceError: null,
-  datasourceLoading: null,
-  datasourceMissing: false,
-  exploreDatasources: [],
-  graphInterval: 1000,
-  history: [],
-  initialQueries: [],
-  queryTransactions: [],
+  queries: [],
   range: DEFAULT_RANGE,
-  showingGraph: true,
-  showingLogs: true,
-  showingTable: true,
-  supportsGraph: null,
-  supportsLogs: null,
-  supportsTable: null,
 };
 
 describe('state functions', () => {
@@ -68,21 +55,19 @@ describe('state functions', () => {
     it('returns url parameter value for a state object', () => {
       const state = {
         ...DEFAULT_EXPLORE_STATE,
-        initialDatasource: 'foo',
+        datasource: 'foo',
+        queries: [
+          {
+            expr: 'metric{test="a/b"}',
+          },
+          {
+            expr: 'super{foo="x/z"}',
+          },
+        ],
         range: {
           from: 'now-5h',
           to: 'now',
         },
-        initialQueries: [
-          {
-            refId: '1',
-            expr: 'metric{test="a/b"}',
-          },
-          {
-            refId: '2',
-            expr: 'super{foo="x/z"}',
-          },
-        ],
       };
       expect(serializeStateToUrlParam(state)).toBe(
         '{"datasource":"foo","queries":[{"expr":"metric{test=\\"a/b\\"}"},' +
@@ -93,21 +78,19 @@ describe('state functions', () => {
     it('returns url parameter value for a state object', () => {
       const state = {
         ...DEFAULT_EXPLORE_STATE,
-        initialDatasource: 'foo',
+        datasource: 'foo',
+        queries: [
+          {
+            expr: 'metric{test="a/b"}',
+          },
+          {
+            expr: 'super{foo="x/z"}',
+          },
+        ],
         range: {
           from: 'now-5h',
           to: 'now',
         },
-        initialQueries: [
-          {
-            refId: '1',
-            expr: 'metric{test="a/b"}',
-          },
-          {
-            refId: '2',
-            expr: 'super{foo="x/z"}',
-          },
-        ],
       };
       expect(serializeStateToUrlParam(state, true)).toBe(
         '["now-5h","now","foo",{"expr":"metric{test=\\"a/b\\"}"},{"expr":"super{foo=\\"x/z\\"}"}]'
@@ -119,35 +102,24 @@ describe('state functions', () => {
     it('can parse the serialized state into the original state', () => {
       const state = {
         ...DEFAULT_EXPLORE_STATE,
-        initialDatasource: 'foo',
+        datasource: 'foo',
+        queries: [
+          {
+            expr: 'metric{test="a/b"}',
+          },
+          {
+            expr: 'super{foo="x/z"}',
+          },
+        ],
         range: {
           from: 'now - 5h',
           to: 'now',
         },
-        initialQueries: [
-          {
-            refId: '1',
-            expr: 'metric{test="a/b"}',
-          },
-          {
-            refId: '2',
-            expr: 'super{foo="x/z"}',
-          },
-        ],
       };
       const serialized = serializeStateToUrlParam(state);
       const parsed = parseUrlState(serialized);
 
-      // Account for datasource vs datasourceName
-      const { datasource, queries, ...rest } = parsed;
-      const resultState = {
-        ...rest,
-        datasource: DEFAULT_EXPLORE_STATE.datasource,
-        initialDatasource: datasource,
-        initialQueries: queries,
-      };
-
-      expect(state).toMatchObject(resultState);
+      expect(state).toMatchObject(parsed);
     });
   });
 });
diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index 026d1ba324c..b0dcf2117d0 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -142,7 +142,7 @@ export function buildQueryTransaction(
   };
 }
 
-const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest;
+export const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest;
 
 export function parseUrlState(initial: string | undefined): ExploreUrlState {
   if (initial) {
@@ -169,11 +169,6 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState {
 }
 
 export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: boolean): string {
-  // const urlState: ExploreUrlState = {
-  //   datasource: state.initialDatasource,
-  //   queries: state.initialQueries.map(clearQueryKeys),
-  //   range: state.range,
-  // };
   if (compact) {
     return JSON.stringify([urlState.range.from, urlState.range.to, urlState.datasource, ...urlState.queries]);
   }
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index a3177bebe79..b0a17884fc3 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -13,6 +13,8 @@ import store from 'app/core/store';
 import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { Emitter } from 'app/core/utils/emitter';
+import { LogsModel } from 'app/core/logs_model';
+import TableModel from 'app/core/table_model';
 
 import {
   addQueryRow,
@@ -45,8 +47,6 @@ import Table from './Table';
 import ErrorBoundary from './ErrorBoundary';
 import { Alert } from './Error';
 import TimePicker, { parseTime } from './TimePicker';
-import { LogsModel } from 'app/core/logs_model';
-import TableModel from 'app/core/table_model';
 
 interface ExploreProps {
   StartPage?: any;
@@ -74,6 +74,7 @@ interface ExploreProps {
   initialDatasource?: string;
   initialQueries: DataQuery[];
   initializeExplore: typeof initializeExplore;
+  initialized: boolean;
   logsHighlighterExpressions?: string[];
   logsResult?: LogsModel;
   modifyQueries: typeof modifyQueries;
@@ -149,8 +150,9 @@ export class Explore extends React.PureComponent<ExploreProps> {
   }
 
   async componentDidMount() {
-    const { exploreId, split, urlState } = this.props;
-    if (!split) {
+    const { exploreId, initialized, urlState } = this.props;
+    // Don't initialize on split, but need to initialize urlparameters when present
+    if (!initialized) {
       // Load URL state and parse range
       const { datasource, queries, range = DEFAULT_RANGE } = (urlState || {}) as ExploreUrlState;
       const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY);
@@ -277,11 +279,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
     }
   }, 500);
 
-  // saveState = () => {
-  //   const { stateKey, onSaveState } = this.props;
-  //   onSaveState(stateKey, this.cloneState());
-  // };
-
   render() {
     const {
       StartPage,
@@ -478,6 +475,7 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     graphResult,
     initialDatasource,
     initialQueries,
+    initialized,
     history,
     logsHighlighterExpressions,
     logsResult,
@@ -504,6 +502,7 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     graphResult,
     initialDatasource,
     initialQueries,
+    initialized,
     history,
     logsHighlighterExpressions,
     logsResult,
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index 04f189749bf..7ea8f228af8 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -3,51 +3,56 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
 import { updateLocation } from 'app/core/actions';
-// import { serializeStateToUrlParam, parseUrlState } from 'app/core/utils/explore';
 import { StoreState } from 'app/types';
-import { ExploreId } from 'app/types/explore';
+import { ExploreId, ExploreUrlState } from 'app/types/explore';
+import { parseUrlState } from 'app/core/utils/explore';
 
+import { initializeExploreSplit } from './state/actions';
 import ErrorBoundary from './ErrorBoundary';
 import Explore from './Explore';
 
 interface WrapperProps {
-  backendSrv?: any;
-  datasourceSrv?: any;
+  initializeExploreSplit: typeof initializeExploreSplit;
   split: boolean;
   updateLocation: typeof updateLocation;
-  // urlStates: { [key: string]: string };
+  urlStates: { [key: string]: string };
 }
 
 export class Wrapper extends Component<WrapperProps> {
-  // urlStates: { [key: string]: string };
+  initialSplit: boolean;
+  urlStates: { [key: string]: ExploreUrlState };
 
   constructor(props: WrapperProps) {
     super(props);
-    // this.urlStates = props.urlStates;
+    this.urlStates = {};
+    const { left, right } = props.urlStates;
+    if (props.urlStates.left) {
+      this.urlStates.leftState = parseUrlState(left);
+    }
+    if (props.urlStates.right) {
+      this.urlStates.rightState = parseUrlState(right);
+      this.initialSplit = true;
+    }
   }
 
-  // onSaveState = (key: string, state: ExploreState) => {
-  //   const urlState = serializeStateToUrlParam(state, true);
-  //   this.urlStates[key] = urlState;
-  //   this.props.updateLocation({
-  //     query: this.urlStates,
-  //   });
-  // };
+  componentDidMount() {
+    if (this.initialSplit) {
+      this.props.initializeExploreSplit();
+    }
+  }
 
   render() {
     const { split } = this.props;
-    // State overrides for props from first Explore
-    // const urlStateLeft = parseUrlState(this.urlStates[STATE_KEY_LEFT]);
-    // const urlStateRight = parseUrlState(this.urlStates[STATE_KEY_RIGHT]);
+    const { leftState, rightState } = this.urlStates;
 
     return (
       <div className="explore-wrapper">
         <ErrorBoundary>
-          <Explore exploreId={ExploreId.left} />
+          <Explore exploreId={ExploreId.left} urlState={leftState} />
         </ErrorBoundary>
         {split && (
           <ErrorBoundary>
-            <Explore exploreId={ExploreId.right} />
+            <Explore exploreId={ExploreId.right} urlState={rightState} />
           </ErrorBoundary>
         )}
       </div>
@@ -56,12 +61,13 @@ export class Wrapper extends Component<WrapperProps> {
 }
 
 const mapStateToProps = (state: StoreState) => {
-  // urlStates: state.location.query,
+  const urlStates = state.location.query;
   const { split } = state.explore;
-  return { split };
+  return { split, urlStates };
 };
 
 const mapDispatchToProps = {
+  initializeExploreSplit,
   updateLocation,
 };
 
diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts
index 145b7506e79..979c80395c3 100644
--- a/public/app/features/explore/state/actions.ts
+++ b/public/app/features/explore/state/actions.ts
@@ -4,14 +4,17 @@ import { RawTimeRange, TimeRange } from '@grafana/ui';
 
 import {
   LAST_USED_DATASOURCE_KEY,
+  clearQueryKeys,
   ensureQueries,
   generateEmptyQuery,
   hasNonEmptyQuery,
   makeTimeSeriesList,
   updateHistory,
   buildQueryTransaction,
+  serializeStateToUrlParam,
 } from 'app/core/utils/explore';
 
+import { updateLocation } from 'app/core/actions';
 import store from 'app/core/store';
 import { DataSourceSelectItem } from 'app/types/datasources';
 import { DataQuery, StoreState } from 'app/types';
@@ -25,6 +28,7 @@ import {
   QueryTransaction,
   QueryHint,
   QueryHintGetter,
+  ExploreUrlState,
 } from 'app/types/explore';
 import { Emitter } from 'app/core/core';
 import { ExploreItemState } from './reducers';
@@ -44,6 +48,7 @@ export enum ActionTypes {
   ClickTableButton = 'CLICK_TABLE_BUTTON',
   HighlightLogsExpression = 'HIGHLIGHT_LOGS_EXPRESSION',
   InitializeExplore = 'INITIALIZE_EXPLORE',
+  InitializeExploreSplit = 'INITIALIZE_EXPLORE_SPLIT',
   LoadDatasourceFailure = 'LOAD_DATASOURCE_FAILURE',
   LoadDatasourceMissing = 'LOAD_DATASOURCE_MISSING',
   LoadDatasourcePending = 'LOAD_DATASOURCE_PENDING',
@@ -58,6 +63,7 @@ export enum ActionTypes {
   ScanRange = 'SCAN_RANGE',
   ScanStart = 'SCAN_START',
   ScanStop = 'SCAN_STOP',
+  StateSave = 'STATE_SAVE',
 }
 
 export interface AddQueryRowAction {
@@ -123,6 +129,12 @@ export interface ClickTableButtonAction {
   exploreId: ExploreId;
 }
 
+export interface HighlightLogsExpressionAction {
+  type: ActionTypes.HighlightLogsExpression;
+  exploreId: ExploreId;
+  expressions: string[];
+}
+
 export interface InitializeExploreAction {
   type: ActionTypes.InitializeExplore;
   exploreId: ExploreId;
@@ -134,10 +146,8 @@ export interface InitializeExploreAction {
   range: RawTimeRange;
 }
 
-export interface HighlightLogsExpressionAction {
-  type: ActionTypes.HighlightLogsExpression;
-  exploreId: ExploreId;
-  expressions: string[];
+export interface InitializeExploreSplitAction {
+  type: ActionTypes.InitializeExploreSplit;
 }
 
 export interface LoadDatasourceFailureAction {
@@ -224,6 +234,10 @@ export interface ScanStopAction {
   exploreId: ExploreId;
 }
 
+export interface StateSaveAction {
+  type: ActionTypes.StateSave;
+}
+
 export type Action =
   | AddQueryRowAction
   | ChangeQueryAction
@@ -238,6 +252,7 @@ export type Action =
   | ClickTableButtonAction
   | HighlightLogsExpressionAction
   | InitializeExploreAction
+  | InitializeExploreSplitAction
   | LoadDatasourceFailureAction
   | LoadDatasourceMissingAction
   | LoadDatasourcePendingAction
@@ -301,15 +316,14 @@ export function clickClear(exploreId: ExploreId): ThunkResult<void> {
   return dispatch => {
     dispatch(scanStop(exploreId));
     dispatch({ type: ActionTypes.ClickClear, exploreId });
-    // TODO save state
+    dispatch(stateSave());
   };
 }
 
 export function clickCloseSplit(): ThunkResult<void> {
   return dispatch => {
     dispatch({ type: ActionTypes.ClickCloseSplit });
-    // When closing split, remove URL state for split part
-    // TODO save state
+    dispatch(stateSave());
   };
 }
 
@@ -353,7 +367,7 @@ export function clickSplit(): ThunkResult<void> {
       initialQueries: leftState.modifiedQueries.slice(),
     };
     dispatch({ type: ActionTypes.ClickSplit, itemState });
-    // TODO save state
+    dispatch(stateSave());
   };
 }
 
@@ -412,6 +426,12 @@ export function initializeExplore(
   };
 }
 
+export function initializeExploreSplit() {
+  return async dispatch => {
+    dispatch({ type: ActionTypes.InitializeExploreSplit });
+  };
+}
+
 export const loadDatasourceFailure = (exploreId: ExploreId, error: string): LoadDatasourceFailureAction => ({
   type: ActionTypes.LoadDatasourceFailure,
   exploreId,
@@ -733,7 +753,7 @@ export function runQueries(exploreId: ExploreId) {
     if (showingLogs && supportsLogs) {
       dispatch(runQueriesForType(exploreId, 'Logs', { interval, format: 'logs' }));
     }
-    // TODO save state
+    dispatch(stateSave());
   };
 }
 
@@ -792,3 +812,25 @@ export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkRes
 export function scanStop(exploreId: ExploreId): ScanStopAction {
   return { type: ActionTypes.ScanStop, exploreId };
 }
+
+export function stateSave() {
+  return (dispatch, getState) => {
+    const { left, right, split } = getState().explore;
+    const urlStates: { [index: string]: string } = {};
+    const leftUrlState: ExploreUrlState = {
+      datasource: left.datasourceInstance.name,
+      queries: left.modifiedQueries.map(clearQueryKeys),
+      range: left.range,
+    };
+    urlStates.left = serializeStateToUrlParam(leftUrlState, true);
+    if (split) {
+      const rightUrlState: ExploreUrlState = {
+        datasource: right.datasourceInstance.name,
+        queries: right.modifiedQueries.map(clearQueryKeys),
+        range: right.range,
+      };
+      urlStates.right = serializeStateToUrlParam(rightUrlState, true);
+    }
+    dispatch(updateLocation({ query: urlStates }));
+  };
+}
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index cea4d766c58..dda3b37fdae 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -36,6 +36,7 @@ export interface ExploreItemState {
   history: HistoryItem[];
   initialDatasource?: string;
   initialQueries: DataQuery[];
+  initialized: boolean;
   logsHighlighterExpressions?: string[];
   logsResult?: LogsModel;
   modifiedQueries: DataQuery[];
@@ -74,6 +75,7 @@ const makeExploreItemState = (): ExploreItemState => ({
   exploreDatasources: [],
   history: [],
   initialQueries: [],
+  initialized: false,
   modifiedQueries: [],
   queryTransactions: [],
   queryIntervals: { interval: '15s', intervalMs: DEFAULT_GRAPH_INTERVAL },
@@ -89,7 +91,7 @@ const makeExploreItemState = (): ExploreItemState => ({
 });
 
 const initialExploreState: ExploreState = {
-  split: false,
+  split: null,
   left: makeExploreItemState(),
   right: makeExploreItemState(),
 };
@@ -236,6 +238,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
         range,
         initialDatasource: action.datasource,
         initialQueries: action.queries,
+        initialized: true,
         modifiedQueries: action.queries.slice(),
       };
     }
@@ -436,6 +439,13 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
         right: action.itemState,
       };
     }
+
+    case ActionTypes.InitializeExploreSplit: {
+      return {
+        ...state,
+        split: true,
+      };
+    }
   }
 
   const { exploreId } = action as any;
@@ -447,6 +457,8 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
     };
   }
 
+  console.error('Unhandled action', action.type);
+
   return state;
 };
 

From f02f41c9b0d753e00397fb3d26a5e81a3cbb8aad Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sat, 12 Jan 2019 23:28:51 +0100
Subject: [PATCH 330/352] Move types to types/explore

---
 public/app/features/explore/Explore.tsx       | 10 ++-
 public/app/features/explore/state/actions.ts  |  4 +-
 public/app/features/explore/state/reducers.ts | 50 +----------
 public/app/types/explore.ts                   | 82 ++++++++++++-------
 public/app/types/index.ts                     |  2 +-
 5 files changed, 64 insertions(+), 84 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index b0a17884fc3..b34986f81ef 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -6,7 +6,14 @@ import { AutoSizer } from 'react-virtualized';
 import { RawTimeRange, TimeRange } from '@grafana/ui';
 
 import { DataSourceSelectItem } from 'app/types/datasources';
-import { ExploreUrlState, HistoryItem, QueryTransaction, RangeScanner, ExploreId } from 'app/types/explore';
+import {
+  ExploreItemState,
+  ExploreUrlState,
+  HistoryItem,
+  QueryTransaction,
+  RangeScanner,
+  ExploreId,
+} from 'app/types/explore';
 import { DataQuery } from 'app/types/series';
 import { StoreState } from 'app/types';
 import store from 'app/core/store';
@@ -37,7 +44,6 @@ import {
   scanStart,
   scanStop,
 } from './state/actions';
-import { ExploreItemState } from './state/reducers';
 
 import Panel from './Panel';
 import QueryRows from './QueryRows';
diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts
index 979c80395c3..26811606bd9 100644
--- a/public/app/features/explore/state/actions.ts
+++ b/public/app/features/explore/state/actions.ts
@@ -21,6 +21,8 @@ import { DataQuery, StoreState } from 'app/types';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import {
   ExploreId,
+  ExploreItemState,
+  ExploreUrlState,
   HistoryItem,
   RangeScanner,
   ResultType,
@@ -28,10 +30,8 @@ import {
   QueryTransaction,
   QueryHint,
   QueryHintGetter,
-  ExploreUrlState,
 } from 'app/types/explore';
 import { Emitter } from 'app/core/core';
-import { ExploreItemState } from './reducers';
 
 export enum ActionTypes {
   AddQueryRow = 'ADD_QUERY_ROW',
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index dda3b37fdae..9474bc717e0 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -1,61 +1,13 @@
-import { RawTimeRange, TimeRange } from '@grafana/ui';
-
 import {
   calculateResultsFromQueryTransactions,
   generateEmptyQuery,
   getIntervals,
   ensureQueries,
 } from 'app/core/utils/explore';
-import { DataSourceSelectItem } from 'app/types/datasources';
-import { HistoryItem, QueryTransaction, QueryIntervals, RangeScanner } from 'app/types/explore';
+import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/explore';
 import { DataQuery } from 'app/types/series';
 
 import { Action, ActionTypes } from './actions';
-import { Emitter } from 'app/core/core';
-import { LogsModel } from 'app/core/logs_model';
-import TableModel from 'app/core/table_model';
-
-// TODO move to types
-
-export interface ExploreState {
-  split: boolean;
-  left: ExploreItemState;
-  right: ExploreItemState;
-}
-
-export interface ExploreItemState {
-  StartPage?: any;
-  containerWidth: number;
-  datasourceInstance: any;
-  datasourceError: string;
-  datasourceLoading: boolean | null;
-  datasourceMissing: boolean;
-  eventBridge?: Emitter;
-  exploreDatasources: DataSourceSelectItem[];
-  graphResult?: any[];
-  history: HistoryItem[];
-  initialDatasource?: string;
-  initialQueries: DataQuery[];
-  initialized: boolean;
-  logsHighlighterExpressions?: string[];
-  logsResult?: LogsModel;
-  modifiedQueries: DataQuery[];
-  queryIntervals: QueryIntervals;
-  queryTransactions: QueryTransaction[];
-  requestedDatasourceId?: number;
-  range: TimeRange | RawTimeRange;
-  scanner?: RangeScanner;
-  scanning?: boolean;
-  scanRange?: RawTimeRange;
-  showingGraph: boolean;
-  showingLogs: boolean;
-  showingStartPage?: boolean;
-  showingTable: boolean;
-  supportsGraph: boolean | null;
-  supportsLogs: boolean | null;
-  supportsTable: boolean | null;
-  tableResult?: TableModel;
-}
 
 export const DEFAULT_RANGE = {
   from: 'now-6h',
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index 525c8f74c81..3cef4124ee4 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -1,9 +1,12 @@
 import { Value } from 'slate';
+import { RawTimeRange, TimeRange } from '@grafana/ui';
+
+import { Emitter } from 'app/core/core';
+import { LogsModel } from 'app/core/logs_model';
+import TableModel from 'app/core/table_model';
+import { DataSourceSelectItem } from 'app/types/datasources';
 
 import { DataQuery } from './series';
-import { RawTimeRange } from '@grafana/ui';
-import TableModel from 'app/core/table_model';
-import { LogsModel } from 'app/core/logs_model';
 
 export interface CompletionItem {
   /**
@@ -80,6 +83,52 @@ export enum ExploreId {
   right = 'right',
 }
 
+export interface ExploreState {
+  split: boolean;
+  left: ExploreItemState;
+  right: ExploreItemState;
+}
+
+export interface ExploreItemState {
+  StartPage?: any;
+  containerWidth: number;
+  datasourceInstance: any;
+  datasourceError: string;
+  datasourceLoading: boolean | null;
+  datasourceMissing: boolean;
+  eventBridge?: Emitter;
+  exploreDatasources: DataSourceSelectItem[];
+  graphResult?: any[];
+  history: HistoryItem[];
+  initialDatasource?: string;
+  initialQueries: DataQuery[];
+  initialized: boolean;
+  logsHighlighterExpressions?: string[];
+  logsResult?: LogsModel;
+  modifiedQueries: DataQuery[];
+  queryIntervals: QueryIntervals;
+  queryTransactions: QueryTransaction[];
+  requestedDatasourceId?: number;
+  range: TimeRange | RawTimeRange;
+  scanner?: RangeScanner;
+  scanning?: boolean;
+  scanRange?: RawTimeRange;
+  showingGraph: boolean;
+  showingLogs: boolean;
+  showingStartPage?: boolean;
+  showingTable: boolean;
+  supportsGraph: boolean | null;
+  supportsLogs: boolean | null;
+  supportsTable: boolean | null;
+  tableResult?: TableModel;
+}
+
+export interface ExploreUrlState {
+  datasource: string;
+  queries: any[]; // Should be a DataQuery, but we're going to strip refIds, so typing makes less sense
+  range: RawTimeRange;
+}
+
 export interface HistoryItem {
   ts: number;
   query: DataQuery;
@@ -168,31 +217,4 @@ export interface TextMatch {
   end: number;
 }
 
-export interface ExploreState {
-  StartPage?: any;
-  datasource: any;
-  datasourceError: any;
-  graphResult?: any[];
-  history: HistoryItem[];
-  logsHighlighterExpressions?: string[];
-  logsResult?: LogsModel;
-  queryTransactions: QueryTransaction[];
-  scanning?: boolean;
-  scanRange?: RawTimeRange;
-  showingGraph: boolean;
-  showingLogs: boolean;
-  showingStartPage?: boolean;
-  showingTable: boolean;
-  supportsGraph: boolean | null;
-  supportsLogs: boolean | null;
-  supportsTable: boolean | null;
-  tableResult?: TableModel;
-}
-
-export interface ExploreUrlState {
-  datasource: string;
-  queries: any[]; // Should be a DataQuery, but we're going to strip refIds, so typing makes less sense
-  range: RawTimeRange;
-}
-
 export type ResultType = 'Graph' | 'Logs' | 'Table';
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 018c4c51d3d..ad9f19e2c9f 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -19,7 +19,7 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
-import { ExploreState } from 'app/features/explore/state/reducers';
+import { ExploreState } from './explore';
 export {
   Team,
   TeamsState,

From 607f7c25de670ba608ea5ba281d6af8a9e5aea6d Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sat, 12 Jan 2019 23:44:24 +0100
Subject: [PATCH 331/352] Update comments

---
 public/app/features/explore/Explore.tsx       | 24 +++++--------------
 public/app/features/explore/state/reducers.ts | 15 ++++++++++--
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index b34986f81ef..2e9c71e5517 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -110,26 +110,14 @@ interface ExploreProps {
  * Once a datasource is selected it populates the query section at the top.
  * When queries are run, their results are being displayed in the main section.
  * The datasource determines what kind of query editor it brings, and what kind
- * of results viewers it supports.
+ * of results viewers it supports. The state is managed entirely in Redux.
  *
- * QUERY HANDLING
+ * SPLIT VIEW
  *
- * TLDR: to not re-render Explore during edits, query editing is not "controlled"
- * in a React sense: values need to be pushed down via `initialQueries`, while
- * edits travel up via `this.modifiedQueries`.
- *
- * By default the query rows start without prior state: `initialQueries` will
- * contain one empty DataQuery. While the user modifies the DataQuery, the
- * modifications are being tracked in `this.modifiedQueries`, which need to be
- * used whenever a query is sent to the datasource to reflect what the user sees
- * on the screen. Query"react-popper": "^0.7.5", rows can be initialized or reset using `initialQueries`,
- * by giving the respec"react-popper": "^0.7.5",tive row a new key. This wipes the old row and its state.
- * This property is als"react-popper": "^0.7.5",o used to govern how many query rows there are (minimum 1).
- *
- * This flow makes sure that a query row can be arbitrarily complex without the
- * fear of being wiped or re-initialized via props. The query row is free to keep
- * its own state while the user edits or builds a query. Valid queries can be sent
- * up to Explore via the `onChangeQuery` prop.
+ * Explore can have two Explore areas side-by-side. This is handled in `Wrapper.tsx`.
+ * Since there can be multiple Explores (e.g., left and right) each action needs
+ * the `exploreId` as first parameter so that the reducer knows which Explore state
+ * is affected.
  *
  * DATASOURCE REQUESTS
  *
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index 9474bc717e0..97a02c33e67 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -17,6 +17,9 @@ export const DEFAULT_RANGE = {
 // Millies step for helper bar charts
 const DEFAULT_GRAPH_INTERVAL = 15 * 1000;
 
+/**
+ * Returns a fresh Explore area state
+ */
 const makeExploreItemState = (): ExploreItemState => ({
   StartPage: undefined,
   containerWidth: 0,
@@ -42,12 +45,18 @@ const makeExploreItemState = (): ExploreItemState => ({
   supportsTable: null,
 });
 
+/**
+ * Global Explore state that handles multiple Explore areas and the split state
+ */
 const initialExploreState: ExploreState = {
   split: null,
   left: makeExploreItemState(),
   right: makeExploreItemState(),
 };
 
+/**
+ * Reducer for an Explore area, to be used by the global Explore reducer.
+ */
 const itemReducer = (state, action: Action): ExploreItemState => {
   switch (action.type) {
     case ActionTypes.AddQueryRow: {
@@ -375,6 +384,10 @@ const itemReducer = (state, action: Action): ExploreItemState => {
   return state;
 };
 
+/**
+ * Global Explore reducer that handles multiple Explore areas (left and right).
+ * Actions that have an `exploreId` get routed to the ExploreItemReducer.
+ */
 export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
   switch (action.type) {
     case ActionTypes.ClickCloseSplit: {
@@ -409,8 +422,6 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
     };
   }
 
-  console.error('Unhandled action', action.type);
-
   return state;
 };
 

From 546a3a9d983c001240dbd6f76c81575cb0b972fc Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 13 Jan 2019 23:10:23 +0100
Subject: [PATCH 332/352] Connect Explore child components to store

---
 public/app/features/explore/Explore.tsx       | 201 ++----------------
 .../app/features/explore/GraphContainer.tsx   |  61 ++++++
 public/app/features/explore/LogsContainer.tsx |  91 ++++++++
 public/app/features/explore/QueryRow.tsx      | 163 ++++++++++++++
 public/app/features/explore/QueryRows.tsx     | 152 +------------
 .../app/features/explore/TableContainer.tsx   |  49 +++++
 public/app/features/explore/state/reducers.ts |   1 +
 7 files changed, 394 insertions(+), 324 deletions(-)
 create mode 100644 public/app/features/explore/GraphContainer.tsx
 create mode 100644 public/app/features/explore/LogsContainer.tsx
 create mode 100644 public/app/features/explore/QueryRow.tsx
 create mode 100644 public/app/features/explore/TableContainer.tsx

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 2e9c71e5517..a70135c00ad 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -6,86 +6,58 @@ import { AutoSizer } from 'react-virtualized';
 import { RawTimeRange, TimeRange } from '@grafana/ui';
 
 import { DataSourceSelectItem } from 'app/types/datasources';
-import {
-  ExploreItemState,
-  ExploreUrlState,
-  HistoryItem,
-  QueryTransaction,
-  RangeScanner,
-  ExploreId,
-} from 'app/types/explore';
+import { ExploreItemState, ExploreUrlState, RangeScanner, ExploreId } from 'app/types/explore';
 import { DataQuery } from 'app/types/series';
 import { StoreState } from 'app/types';
 import store from 'app/core/store';
 import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { Emitter } from 'app/core/utils/emitter';
-import { LogsModel } from 'app/core/logs_model';
-import TableModel from 'app/core/table_model';
 
 import {
-  addQueryRow,
   changeDatasource,
-  changeQuery,
   changeSize,
   changeTime,
   clickClear,
   clickCloseSplit,
   clickExample,
-  clickGraphButton,
-  clickLogsButton,
   clickSplit,
-  clickTableButton,
-  highlightLogsExpression,
   initializeExplore,
   modifyQueries,
-  removeQueryRow,
   runQueries,
   scanStart,
   scanStop,
 } from './state/actions';
 
-import Panel from './Panel';
-import QueryRows from './QueryRows';
-import Graph from './Graph';
-import Logs from './Logs';
-import Table from './Table';
-import ErrorBoundary from './ErrorBoundary';
 import { Alert } from './Error';
+import ErrorBoundary from './ErrorBoundary';
+import GraphContainer from './GraphContainer';
+import LogsContainer from './LogsContainer';
+import QueryRows from './QueryRows';
+import TableContainer from './TableContainer';
 import TimePicker, { parseTime } from './TimePicker';
 
 interface ExploreProps {
   StartPage?: any;
-  addQueryRow: typeof addQueryRow;
   changeDatasource: typeof changeDatasource;
-  changeQuery: typeof changeQuery;
   changeSize: typeof changeSize;
   changeTime: typeof changeTime;
   clickClear: typeof clickClear;
   clickCloseSplit: typeof clickCloseSplit;
   clickExample: typeof clickExample;
-  clickGraphButton: typeof clickGraphButton;
-  clickLogsButton: typeof clickLogsButton;
   clickSplit: typeof clickSplit;
-  clickTableButton: typeof clickTableButton;
   datasourceError: string;
   datasourceInstance: any;
   datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   exploreDatasources: DataSourceSelectItem[];
   exploreId: ExploreId;
-  graphResult?: any[];
-  highlightLogsExpression: typeof highlightLogsExpression;
-  history: HistoryItem[];
   initialDatasource?: string;
   initialQueries: DataQuery[];
   initializeExplore: typeof initializeExplore;
   initialized: boolean;
-  logsHighlighterExpressions?: string[];
-  logsResult?: LogsModel;
+  loading: boolean;
   modifyQueries: typeof modifyQueries;
-  queryTransactions: QueryTransaction[];
-  removeQueryRow: typeof removeQueryRow;
   range: RawTimeRange;
   runQueries: typeof runQueries;
   scanner?: RangeScanner;
@@ -94,14 +66,10 @@ interface ExploreProps {
   scanStart: typeof scanStart;
   scanStop: typeof scanStop;
   split: boolean;
-  showingGraph: boolean;
-  showingLogs: boolean;
   showingStartPage?: boolean;
-  showingTable: boolean;
   supportsGraph: boolean | null;
   supportsLogs: boolean | null;
   supportsTable: boolean | null;
-  tableResult?: TableModel;
   urlState: ExploreUrlState;
 }
 
@@ -172,24 +140,10 @@ export class Explore extends React.PureComponent<ExploreProps> {
     this.el = el;
   };
 
-  onAddQueryRow = index => {
-    this.props.addQueryRow(this.props.exploreId, index);
-  };
-
   onChangeDatasource = async option => {
     this.props.changeDatasource(this.props.exploreId, option.value);
   };
 
-  onChangeQuery = (query: DataQuery, index: number, override?: boolean) => {
-    const { changeQuery, datasourceInstance, exploreId } = this.props;
-
-    changeQuery(exploreId, query, index, override);
-    if (query && !override && datasourceInstance.getHighlighterExpression && index === 0) {
-      // Live preview of log search matches. Only use on first row for now
-      this.updateLogsHighlights(query);
-    }
-  };
-
   onChangeTime = (range: TimeRange, changedByScanner?: boolean) => {
     if (this.props.scanning && !changedByScanner) {
       this.onStopScanning();
@@ -205,14 +159,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
     this.props.clickCloseSplit();
   };
 
-  onClickGraphButton = () => {
-    this.props.clickGraphButton(this.props.exploreId);
-  };
-
-  onClickLogsButton = () => {
-    this.props.clickLogsButton(this.props.exploreId);
-  };
-
   // Use this in help pages to set page to a single query
   onClickExample = (query: DataQuery) => {
     this.props.clickExample(this.props.exploreId, query);
@@ -222,10 +168,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
     this.props.clickSplit();
   };
 
-  onClickTableButton = () => {
-    this.props.clickTableButton(this.props.exploreId);
-  };
-
   onClickLabel = (key: string, value: string) => {
     this.onModifyQueries({ type: 'ADD_FILTER', key, value });
   };
@@ -238,10 +180,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
     }
   };
 
-  onRemoveQueryRow = index => {
-    this.props.removeQueryRow(this.props.exploreId, index);
-  };
-
   onResize = (size: { height: number; width: number }) => {
     this.props.changeSize(this.props.exploreId, size);
   };
@@ -265,14 +203,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
     this.props.runQueries(this.props.exploreId);
   };
 
-  updateLogsHighlights = _.debounce((value: DataQuery) => {
-    const { datasourceInstance } = this.props;
-    if (datasourceInstance.getHighlighterExpression) {
-      const expressions = [datasourceInstance.getHighlighterExpression(value)];
-      this.props.highlightLogsExpression(this.props.exploreId, expressions);
-    }
-  }, 500);
-
   render() {
     const {
       StartPage,
@@ -282,34 +212,19 @@ export class Explore extends React.PureComponent<ExploreProps> {
       datasourceMissing,
       exploreDatasources,
       exploreId,
-      graphResult,
-      history,
+      loading,
       initialQueries,
-      logsHighlighterExpressions,
-      logsResult,
-      queryTransactions,
       range,
-      scanning,
-      scanRange,
-      showingGraph,
-      showingLogs,
       showingStartPage,
-      showingTable,
       split,
       supportsGraph,
       supportsLogs,
       supportsTable,
-      tableResult,
     } = this.props;
-    const graphHeight = showingGraph && showingTable ? '200px' : '400px';
     const exploreClass = split ? 'explore explore-split' : 'explore';
     const selectedDatasource = datasourceInstance
       ? exploreDatasources.find(d => d.name === datasourceInstance.name)
       : undefined;
-    const graphLoading = queryTransactions.some(qt => qt.resultType === 'Graph' && !qt.done);
-    const tableLoading = queryTransactions.some(qt => qt.resultType === 'Table' && !qt.done);
-    const logsLoading = queryTransactions.some(qt => qt.resultType === 'Logs' && !qt.done);
-    const loading = queryTransactions.some(qt => !qt.done);
 
     return (
       <div className={exploreClass} ref={this.getRef}>
@@ -372,19 +287,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
         {datasourceInstance &&
           !datasourceError && (
             <div className="explore-container">
-              <QueryRows
-                datasource={datasourceInstance}
-                history={history}
-                initialQueries={initialQueries}
-                onAddQueryRow={this.onAddQueryRow}
-                onChangeQuery={this.onChangeQuery}
-                onClickHintFix={this.onModifyQueries}
-                onExecuteQuery={this.onSubmit}
-                onRemoveQueryRow={this.onRemoveQueryRow}
-                transactions={queryTransactions}
-                exploreEvents={this.exploreEvents}
-                range={range}
-              />
+              <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} initialQueries={initialQueries} />
               <AutoSizer onResize={this.onResize} disableHeight>
                 {({ width }) => (
                   <main className="m-t-2" style={{ width }}>
@@ -392,55 +295,16 @@ export class Explore extends React.PureComponent<ExploreProps> {
                       {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
                       {!showingStartPage && (
                         <>
-                          {supportsGraph && (
-                            <Panel
-                              label="Graph"
-                              isOpen={showingGraph}
-                              loading={graphLoading}
-                              onToggle={this.onClickGraphButton}
-                            >
-                              <Graph
-                                data={graphResult}
-                                height={graphHeight}
-                                id={`explore-graph-${exploreId}`}
-                                onChangeTime={this.onChangeTime}
-                                range={range}
-                                split={split}
-                              />
-                            </Panel>
-                          )}
-                          {supportsTable && (
-                            <Panel
-                              label="Table"
-                              loading={tableLoading}
-                              isOpen={showingTable}
-                              onToggle={this.onClickTableButton}
-                            >
-                              <Table data={tableResult} loading={tableLoading} onClickCell={this.onClickLabel} />
-                            </Panel>
-                          )}
+                          {supportsGraph && <GraphContainer exploreId={exploreId} />}
+                          {supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
                           {supportsLogs && (
-                            <Panel
-                              label="Logs"
-                              loading={logsLoading}
-                              isOpen={showingLogs}
-                              onToggle={this.onClickLogsButton}
-                            >
-                              <Logs
-                                data={logsResult}
-                                exploreId={exploreId}
-                                key={logsResult.id}
-                                highlighterExpressions={logsHighlighterExpressions}
-                                loading={logsLoading}
-                                onChangeTime={this.onChangeTime}
-                                onClickLabel={this.onClickLabel}
-                                onStartScanning={this.onStartScanning}
-                                onStopScanning={this.onStopScanning}
-                                range={range}
-                                scanning={scanning}
-                                scanRange={scanRange}
-                              />
-                            </Panel>
+                            <LogsContainer
+                              exploreId={exploreId}
+                              onChangeTime={this.onChangeTime}
+                              onClickLabel={this.onClickLabel}
+                              onStartScanning={this.onStartScanning}
+                              onStopScanning={this.onStopScanning}
+                            />
                           )}
                         </>
                       )}
@@ -466,26 +330,17 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     datasourceLoading,
     datasourceMissing,
     exploreDatasources,
-    graphResult,
     initialDatasource,
     initialQueries,
     initialized,
-    history,
-    logsHighlighterExpressions,
-    logsResult,
     queryTransactions,
     range,
-    scanning,
-    scanRange,
-    showingGraph,
-    showingLogs,
     showingStartPage,
-    showingTable,
     supportsGraph,
     supportsLogs,
     supportsTable,
-    tableResult,
   } = item;
+  const loading = queryTransactions.some(qt => !qt.done);
   return {
     StartPage,
     datasourceError,
@@ -493,46 +348,30 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     datasourceLoading,
     datasourceMissing,
     exploreDatasources,
-    graphResult,
     initialDatasource,
     initialQueries,
     initialized,
-    history,
-    logsHighlighterExpressions,
-    logsResult,
+    loading,
     queryTransactions,
     range,
-    scanning,
-    scanRange,
-    showingGraph,
-    showingLogs,
     showingStartPage,
-    showingTable,
     split,
     supportsGraph,
     supportsLogs,
     supportsTable,
-    tableResult,
   };
 }
 
 const mapDispatchToProps = {
-  addQueryRow,
   changeDatasource,
-  changeQuery,
   changeSize,
   changeTime,
   clickClear,
   clickCloseSplit,
   clickExample,
-  clickGraphButton,
-  clickLogsButton,
   clickSplit,
-  clickTableButton,
-  highlightLogsExpression,
   initializeExplore,
   modifyQueries,
-  removeQueryRow,
   runQueries,
   scanStart,
   scanStop,
diff --git a/public/app/features/explore/GraphContainer.tsx b/public/app/features/explore/GraphContainer.tsx
new file mode 100644
index 00000000000..da098f0c92d
--- /dev/null
+++ b/public/app/features/explore/GraphContainer.tsx
@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+import { RawTimeRange, TimeRange } from '@grafana/ui';
+
+import { ExploreId, ExploreItemState } from 'app/types/explore';
+import { StoreState } from 'app/types';
+
+import { clickGraphButton } from './state/actions';
+import Graph from './Graph';
+import Panel from './Panel';
+
+interface GraphContainerProps {
+  onChangeTime: (range: TimeRange) => void;
+  clickGraphButton: typeof clickGraphButton;
+  exploreId: ExploreId;
+  graphResult?: any[];
+  loading: boolean;
+  range: RawTimeRange;
+  showingGraph: boolean;
+  showingTable: boolean;
+  split: boolean;
+}
+
+export class GraphContainer extends PureComponent<GraphContainerProps> {
+  onClickGraphButton = () => {
+    this.props.clickGraphButton(this.props.exploreId);
+  };
+
+  render() {
+    const { exploreId, graphResult, loading, onChangeTime, showingGraph, showingTable, range, split } = this.props;
+    const graphHeight = showingGraph && showingTable ? '200px' : '400px';
+    return (
+      <Panel label="Graph" isOpen={showingGraph} loading={loading} onToggle={this.onClickGraphButton}>
+        <Graph
+          data={graphResult}
+          height={graphHeight}
+          id={`explore-graph-${exploreId}`}
+          onChangeTime={onChangeTime}
+          range={range}
+          split={split}
+        />
+      </Panel>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState, { exploreId }) {
+  const explore = state.explore;
+  const { split } = explore;
+  const item: ExploreItemState = explore[exploreId];
+  const { graphResult, queryTransactions, range, showingGraph, showingTable } = item;
+  const loading = queryTransactions.some(qt => qt.resultType === 'Graph' && !qt.done);
+  return { graphResult, loading, range, showingGraph, showingTable, split };
+}
+
+const mapDispatchToProps = {
+  clickGraphButton,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(GraphContainer));
diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx
new file mode 100644
index 00000000000..db2f681a9c5
--- /dev/null
+++ b/public/app/features/explore/LogsContainer.tsx
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+import { RawTimeRange, TimeRange } from '@grafana/ui';
+
+import { ExploreId, ExploreItemState } from 'app/types/explore';
+import { LogsModel } from 'app/core/logs_model';
+import { StoreState } from 'app/types';
+
+import { clickLogsButton } from './state/actions';
+import Logs from './Logs';
+import Panel from './Panel';
+
+interface LogsContainerProps {
+  clickLogsButton: typeof clickLogsButton;
+  exploreId: ExploreId;
+  loading: boolean;
+  logsHighlighterExpressions?: string[];
+  logsResult?: LogsModel;
+  onChangeTime: (range: TimeRange) => void;
+  onClickLabel: (key: string, value: string) => void;
+  onStartScanning: () => void;
+  onStopScanning: () => void;
+  range: RawTimeRange;
+  scanning?: boolean;
+  scanRange?: RawTimeRange;
+  showingLogs: boolean;
+}
+
+export class LogsContainer extends PureComponent<LogsContainerProps> {
+  onClickLogsButton = () => {
+    this.props.clickLogsButton(this.props.exploreId);
+  };
+
+  render() {
+    const {
+      exploreId,
+      loading,
+      logsHighlighterExpressions,
+      logsResult,
+      onChangeTime,
+      onClickLabel,
+      onStartScanning,
+      onStopScanning,
+      range,
+      showingLogs,
+      scanning,
+      scanRange,
+    } = this.props;
+    return (
+      <Panel label="Logs" loading={loading} isOpen={showingLogs} onToggle={this.onClickLogsButton}>
+        <Logs
+          data={logsResult}
+          exploreId={exploreId}
+          key={logsResult.id}
+          highlighterExpressions={logsHighlighterExpressions}
+          loading={loading}
+          onChangeTime={onChangeTime}
+          onClickLabel={onClickLabel}
+          onStartScanning={onStartScanning}
+          onStopScanning={onStopScanning}
+          range={range}
+          scanning={scanning}
+          scanRange={scanRange}
+        />
+      </Panel>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState, { exploreId }) {
+  const explore = state.explore;
+  const item: ExploreItemState = explore[exploreId];
+  const { logsHighlighterExpressions, logsResult, queryTransactions, scanning, scanRange, showingLogs, range } = item;
+  const loading = queryTransactions.some(qt => qt.resultType === 'Logs' && !qt.done);
+  return {
+    loading,
+    logsHighlighterExpressions,
+    logsResult,
+    scanning,
+    scanRange,
+    showingLogs,
+    range,
+  };
+}
+
+const mapDispatchToProps = {
+  clickLogsButton,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(LogsContainer));
diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx
new file mode 100644
index 00000000000..b5b150b3ba8
--- /dev/null
+++ b/public/app/features/explore/QueryRow.tsx
@@ -0,0 +1,163 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+import { RawTimeRange } from '@grafana/ui';
+import _ from 'lodash';
+
+import { QueryTransaction, HistoryItem, QueryHint, ExploreItemState, ExploreId } from 'app/types/explore';
+import { Emitter } from 'app/core/utils/emitter';
+import { DataQuery, StoreState } from 'app/types';
+
+// import DefaultQueryField from './QueryField';
+import QueryEditor from './QueryEditor';
+import QueryTransactionStatus from './QueryTransactionStatus';
+import {
+  addQueryRow,
+  changeQuery,
+  highlightLogsExpression,
+  modifyQueries,
+  removeQueryRow,
+  runQueries,
+} from './state/actions';
+
+function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint {
+  const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0);
+  if (transaction) {
+    return transaction.hints[0];
+  }
+  return undefined;
+}
+
+interface QueryRowProps {
+  addQueryRow: typeof addQueryRow;
+  changeQuery: typeof changeQuery;
+  className?: string;
+  exploreId: ExploreId;
+  datasourceInstance: any;
+  highlightLogsExpression: typeof highlightLogsExpression;
+  history: HistoryItem[];
+  index: number;
+  initialQuery: DataQuery;
+  modifyQueries: typeof modifyQueries;
+  queryTransactions: QueryTransaction[];
+  exploreEvents: Emitter;
+  range: RawTimeRange;
+  removeQueryRow: typeof removeQueryRow;
+  runQueries: typeof runQueries;
+}
+
+export class QueryRow extends PureComponent<QueryRowProps> {
+  onExecuteQuery = () => {
+    const { exploreId } = this.props;
+    this.props.runQueries(exploreId);
+  };
+
+  onChangeQuery = (query: DataQuery, override?: boolean) => {
+    const { datasourceInstance, exploreId, index } = this.props;
+    this.props.changeQuery(exploreId, query, index, override);
+    if (query && !override && datasourceInstance.getHighlighterExpression && index === 0) {
+      // Live preview of log search matches. Only use on first row for now
+      this.updateLogsHighlights(query);
+    }
+  };
+
+  onClickAddButton = () => {
+    const { exploreId, index } = this.props;
+    this.props.addQueryRow(exploreId, index);
+  };
+
+  onClickClearButton = () => {
+    this.onChangeQuery(null, true);
+  };
+
+  onClickHintFix = action => {
+    const { datasourceInstance, exploreId, index } = this.props;
+    if (datasourceInstance && datasourceInstance.modifyQuery) {
+      const modifier = (queries: DataQuery, action: any) => datasourceInstance.modifyQuery(queries, action);
+      this.props.modifyQueries(exploreId, action, index, modifier);
+    }
+  };
+
+  onClickRemoveButton = () => {
+    const { exploreId, index } = this.props;
+    this.props.removeQueryRow(exploreId, index);
+  };
+
+  updateLogsHighlights = _.debounce((value: DataQuery) => {
+    const { datasourceInstance } = this.props;
+    if (datasourceInstance.getHighlighterExpression) {
+      const expressions = [datasourceInstance.getHighlighterExpression(value)];
+      this.props.highlightLogsExpression(this.props.exploreId, expressions);
+    }
+  }, 500);
+
+  render() {
+    const { datasourceInstance, history, index, initialQuery, queryTransactions, exploreEvents, range } = this.props;
+    const transactions = queryTransactions.filter(t => t.rowIndex === index);
+    const transactionWithError = transactions.find(t => t.error !== undefined);
+    const hint = getFirstHintFromTransactions(transactions);
+    const queryError = transactionWithError ? transactionWithError.error : null;
+    const QueryField = datasourceInstance.pluginExports.ExploreQueryField;
+    return (
+      <div className="query-row">
+        <div className="query-row-status">
+          <QueryTransactionStatus transactions={transactions} />
+        </div>
+        <div className="query-row-field">
+          {QueryField ? (
+            <QueryField
+              datasource={datasourceInstance}
+              error={queryError}
+              hint={hint}
+              initialQuery={initialQuery}
+              history={history}
+              onClickHintFix={this.onClickHintFix}
+              onPressEnter={this.onExecuteQuery}
+              onQueryChange={this.onChangeQuery}
+            />
+          ) : (
+            <QueryEditor
+              datasource={datasourceInstance}
+              error={queryError}
+              onQueryChange={this.onChangeQuery}
+              onExecuteQuery={this.onExecuteQuery}
+              initialQuery={initialQuery}
+              exploreEvents={exploreEvents}
+              range={range}
+            />
+          )}
+        </div>
+        <div className="query-row-tools">
+          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
+            <i className="fa fa-times" />
+          </button>
+          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}>
+            <i className="fa fa-plus" />
+          </button>
+          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
+            <i className="fa fa-minus" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState, { exploreId, index }) {
+  const explore = state.explore;
+  const item: ExploreItemState = explore[exploreId];
+  const { datasourceInstance, history, initialQueries, queryTransactions, range } = item;
+  const initialQuery = initialQueries[index];
+  return { datasourceInstance, history, initialQuery, queryTransactions, range };
+}
+
+const mapDispatchToProps = {
+  addQueryRow,
+  changeQuery,
+  highlightLogsExpression,
+  modifyQueries,
+  removeQueryRow,
+  runQueries,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(QueryRow));
diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx
index 4101475092b..01bd409f444 100644
--- a/public/app/features/explore/QueryRows.tsx
+++ b/public/app/features/explore/QueryRows.tsx
@@ -1,159 +1,25 @@
 import React, { PureComponent } from 'react';
 
-import { QueryTransaction, HistoryItem, QueryHint } from 'app/types/explore';
 import { Emitter } from 'app/core/utils/emitter';
+import { DataQuery } from 'app/types';
+import { ExploreId } from 'app/types/explore';
 
-// import DefaultQueryField from './QueryField';
-import QueryEditor from './QueryEditor';
-import QueryTransactionStatus from './QueryTransactionStatus';
-import { DataSource, DataQuery } from 'app/types';
-import { RawTimeRange } from '@grafana/ui';
+import QueryRow from './QueryRow';
 
-function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint {
-  const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0);
-  if (transaction) {
-    return transaction.hints[0];
-  }
-  return undefined;
-}
-
-interface QueryRowEventHandlers {
-  onAddQueryRow: (index: number) => void;
-  onChangeQuery: (value: DataQuery, index: number, override?: boolean) => void;
-  onClickHintFix: (action: object, index?: number) => void;
-  onExecuteQuery: () => void;
-  onRemoveQueryRow: (index: number) => void;
-}
-
-interface QueryRowCommonProps {
+interface QueryRowsProps {
   className?: string;
-  datasource: DataSource;
-  history: HistoryItem[];
-  transactions: QueryTransaction[];
   exploreEvents: Emitter;
-  range: RawTimeRange;
+  exploreId: ExploreId;
+  initialQueries: DataQuery[];
 }
-
-type QueryRowProps = QueryRowCommonProps &
-  QueryRowEventHandlers & {
-    index: number;
-    initialQuery: DataQuery;
-  };
-
-class QueryRow extends PureComponent<QueryRowProps> {
-  onExecuteQuery = () => {
-    const { onExecuteQuery } = this.props;
-    onExecuteQuery();
-  };
-
-  onChangeQuery = (value: DataQuery, override?: boolean) => {
-    const { index, onChangeQuery } = this.props;
-    if (onChangeQuery) {
-      onChangeQuery(value, index, override);
-    }
-  };
-
-  onClickAddButton = () => {
-    const { index, onAddQueryRow } = this.props;
-    if (onAddQueryRow) {
-      onAddQueryRow(index);
-    }
-  };
-
-  onClickClearButton = () => {
-    this.onChangeQuery(null, true);
-  };
-
-  onClickHintFix = action => {
-    const { index, onClickHintFix } = this.props;
-    if (onClickHintFix) {
-      onClickHintFix(action, index);
-    }
-  };
-
-  onClickRemoveButton = () => {
-    const { index, onRemoveQueryRow } = this.props;
-    if (onRemoveQueryRow) {
-      onRemoveQueryRow(index);
-    }
-  };
-
-  onPressEnter = () => {
-    const { onExecuteQuery } = this.props;
-    if (onExecuteQuery) {
-      onExecuteQuery();
-    }
-  };
-
-  render() {
-    const { datasource, history, initialQuery, transactions, exploreEvents, range } = this.props;
-    const transactionWithError = transactions.find(t => t.error !== undefined);
-    const hint = getFirstHintFromTransactions(transactions);
-    const queryError = transactionWithError ? transactionWithError.error : null;
-    const QueryField = datasource.pluginExports.ExploreQueryField;
-    return (
-      <div className="query-row">
-        <div className="query-row-status">
-          <QueryTransactionStatus transactions={transactions} />
-        </div>
-        <div className="query-row-field">
-          {QueryField ? (
-            <QueryField
-              datasource={datasource}
-              error={queryError}
-              hint={hint}
-              initialQuery={initialQuery}
-              history={history}
-              onClickHintFix={this.onClickHintFix}
-              onPressEnter={this.onPressEnter}
-              onQueryChange={this.onChangeQuery}
-            />
-          ) : (
-            <QueryEditor
-              datasource={datasource}
-              error={queryError}
-              onQueryChange={this.onChangeQuery}
-              onExecuteQuery={this.onExecuteQuery}
-              initialQuery={initialQuery}
-              exploreEvents={exploreEvents}
-              range={range}
-            />
-          )}
-        </div>
-        <div className="query-row-tools">
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
-            <i className="fa fa-times" />
-          </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}>
-            <i className="fa fa-plus" />
-          </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
-            <i className="fa fa-minus" />
-          </button>
-        </div>
-      </div>
-    );
-  }
-}
-
-type QueryRowsProps = QueryRowCommonProps &
-  QueryRowEventHandlers & {
-    initialQueries: DataQuery[];
-  };
-
 export default class QueryRows extends PureComponent<QueryRowsProps> {
   render() {
-    const { className = '', initialQueries, transactions, ...handlers } = this.props;
+    const { className = '', exploreEvents, exploreId, initialQueries } = this.props;
     return (
       <div className={className}>
         {initialQueries.map((query, index) => (
-          <QueryRow
-            key={query.key}
-            index={index}
-            initialQuery={query}
-            transactions={transactions.filter(t => t.rowIndex === index)}
-            {...handlers}
-          />
+          // TODO instead of relying on initialQueries, move to react key list in redux
+          <QueryRow key={query.key} exploreEvents={exploreEvents} exploreId={exploreId} index={index} />
         ))}
       </div>
     );
diff --git a/public/app/features/explore/TableContainer.tsx b/public/app/features/explore/TableContainer.tsx
new file mode 100644
index 00000000000..e510a77c97f
--- /dev/null
+++ b/public/app/features/explore/TableContainer.tsx
@@ -0,0 +1,49 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+
+import { ExploreId, ExploreItemState } from 'app/types/explore';
+import { StoreState } from 'app/types';
+
+import { clickTableButton } from './state/actions';
+import Table from './Table';
+import Panel from './Panel';
+import TableModel from 'app/core/table_model';
+
+interface TableContainerProps {
+  clickTableButton: typeof clickTableButton;
+  exploreId: ExploreId;
+  loading: boolean;
+  onClickLabel: (key: string, value: string) => void;
+  showingTable: boolean;
+  tableResult?: TableModel;
+}
+
+export class TableContainer extends PureComponent<TableContainerProps> {
+  onClickTableButton = () => {
+    this.props.clickTableButton(this.props.exploreId);
+  };
+
+  render() {
+    const { loading, onClickLabel, showingTable, tableResult } = this.props;
+    return (
+      <Panel label="Table" loading={loading} isOpen={showingTable} onToggle={this.onClickTableButton}>
+        <Table data={tableResult} loading={loading} onClickCell={onClickLabel} />
+      </Panel>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState, { exploreId }) {
+  const explore = state.explore;
+  const item: ExploreItemState = explore[exploreId];
+  const { queryTransactions, showingTable, tableResult } = item;
+  const loading = queryTransactions.some(qt => qt.resultType === 'Table' && !qt.done);
+  return { loading, showingTable, tableResult };
+}
+
+const mapDispatchToProps = {
+  clickTableButton,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TableContainer));
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index 97a02c33e67..b8273051ffe 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -232,6 +232,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
         initialQueries: action.initialQueries,
         logsHighlighterExpressions: undefined,
         modifiedQueries: action.initialQueries.slice(),
+        queryTransactions: [],
         showingStartPage: action.showingStartPage,
         supportsGraph: action.supportsGraph,
         supportsLogs: action.supportsLogs,

From 9aede9e6368947543d6488a0c6f99e4367ba1790 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 13 Jan 2019 23:26:04 +0100
Subject: [PATCH 333/352] Fix reducer issues

---
 public/app/core/utils/explore.ts              |  8 ++++----
 public/app/features/explore/QueryEditor.tsx   |  2 +-
 public/app/features/explore/state/reducers.ts | 12 +++++++++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index b0dcf2117d0..b05e38a4b33 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -17,7 +17,7 @@ import {
   QueryIntervals,
   QueryOptions,
 } from 'app/types/explore';
-import { DataQuery, DataSourceApi } from 'app/types/series';
+import { DataQuery } from 'app/types/series';
 
 export const DEFAULT_RANGE = {
   from: 'now-6h',
@@ -243,8 +243,8 @@ export function calculateResultsFromQueryTransactions(
   };
 }
 
-export function getIntervals(range: RawTimeRange, datasource: DataSourceApi, resolution: number): IntervalValues {
-  if (!datasource || !resolution) {
+export function getIntervals(range: RawTimeRange, lowLimit: string, resolution: number): IntervalValues {
+  if (!resolution) {
     return { interval: '1s', intervalMs: 1000 };
   }
 
@@ -253,7 +253,7 @@ export function getIntervals(range: RawTimeRange, datasource: DataSourceApi, res
     to: parseDate(range.to, true),
   };
 
-  return kbn.calculateInterval(absoluteRange, resolution, datasource.interval);
+  return kbn.calculateInterval(absoluteRange, resolution, lowLimit);
 }
 
 export function makeTimeSeriesList(dataList) {
diff --git a/public/app/features/explore/QueryEditor.tsx b/public/app/features/explore/QueryEditor.tsx
index ce0a8a6e03e..dde674d3fcd 100644
--- a/public/app/features/explore/QueryEditor.tsx
+++ b/public/app/features/explore/QueryEditor.tsx
@@ -48,7 +48,7 @@ export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
           getNextQueryLetter: x => '',
         },
         hideEditorRowActions: true,
-        ...getIntervals(range, datasource, null), // Possible to get resolution?
+        ...getIntervals(range, (datasource || {}).interval, null), // Possible to get resolution?
       },
     };
 
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index b8273051ffe..91d5c4cf925 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -122,11 +122,12 @@ const itemReducer = (state, action: Action): ExploreItemState => {
 
     case ActionTypes.ChangeSize: {
       const { range, datasourceInstance } = state;
-      if (!datasourceInstance) {
-        return state;
+      let interval = '1s';
+      if (datasourceInstance && datasourceInstance.interval) {
+        interval = datasourceInstance.interval;
       }
       const containerWidth = action.width;
-      const queryIntervals = getIntervals(range, datasourceInstance.interval, containerWidth);
+      const queryIntervals = getIntervals(range, interval, containerWidth);
       return { ...state, containerWidth, queryIntervals };
     }
 
@@ -189,6 +190,11 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       return { ...state, ...results, queryTransactions: nextQueryTransactions, showingTable };
     }
 
+    case ActionTypes.HighlightLogsExpression: {
+      const { expressions } = action;
+      return { ...state, logsHighlighterExpressions: expressions };
+    }
+
     case ActionTypes.InitializeExplore: {
       const { containerWidth, eventBridge, exploreDatasources, range } = action;
       return {

From 6ff15039a9bcb6fa79f98ad8fb0224f633aa4936 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Tue, 15 Jan 2019 19:52:53 +0100
Subject: [PATCH 334/352] File organization, action naming, comments

- moved ActionTypes to `./state/actionTypes`
- renamed click-related actions
- added comments to actions and state types
- prefixed Explore actions with `explore/`
- fixed query override issue when row was added
---
 public/app/features/explore/Explore.tsx       |  34 +-
 .../app/features/explore/GraphContainer.tsx   |   8 +-
 public/app/features/explore/LogsContainer.tsx |   8 +-
 .../app/features/explore/TableContainer.tsx   |  14 +-
 .../app/features/explore/state/actionTypes.ts | 252 +++++++++
 public/app/features/explore/state/actions.ts  | 498 +++++++-----------
 public/app/features/explore/state/reducers.ts | 210 ++++----
 public/app/types/explore.ts                   | 117 ++++
 8 files changed, 714 insertions(+), 427 deletions(-)
 create mode 100644 public/app/features/explore/state/actionTypes.ts

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index a70135c00ad..a8acab50137 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -18,15 +18,15 @@ import {
   changeDatasource,
   changeSize,
   changeTime,
-  clickClear,
-  clickCloseSplit,
-  clickExample,
-  clickSplit,
+  clearQueries,
   initializeExplore,
   modifyQueries,
   runQueries,
   scanStart,
   scanStop,
+  setQueries,
+  splitClose,
+  splitOpen,
 } from './state/actions';
 
 import { Alert } from './Error';
@@ -42,10 +42,7 @@ interface ExploreProps {
   changeDatasource: typeof changeDatasource;
   changeSize: typeof changeSize;
   changeTime: typeof changeTime;
-  clickClear: typeof clickClear;
-  clickCloseSplit: typeof clickCloseSplit;
-  clickExample: typeof clickExample;
-  clickSplit: typeof clickSplit;
+  clearQueries: typeof clearQueries;
   datasourceError: string;
   datasourceInstance: any;
   datasourceLoading: boolean | null;
@@ -65,7 +62,10 @@ interface ExploreProps {
   scanRange?: RawTimeRange;
   scanStart: typeof scanStart;
   scanStop: typeof scanStop;
+  setQueries: typeof setQueries;
   split: boolean;
+  splitClose: typeof splitClose;
+  splitOpen: typeof splitOpen;
   showingStartPage?: boolean;
   supportsGraph: boolean | null;
   supportsLogs: boolean | null;
@@ -152,20 +152,20 @@ export class Explore extends React.PureComponent<ExploreProps> {
   };
 
   onClickClear = () => {
-    this.props.clickClear(this.props.exploreId);
+    this.props.clearQueries(this.props.exploreId);
   };
 
   onClickCloseSplit = () => {
-    this.props.clickCloseSplit();
+    this.props.splitClose();
   };
 
   // Use this in help pages to set page to a single query
   onClickExample = (query: DataQuery) => {
-    this.props.clickExample(this.props.exploreId, query);
+    this.props.setQueries(this.props.exploreId, [query]);
   };
 
   onClickSplit = () => {
-    this.props.clickSplit();
+    this.props.splitOpen();
   };
 
   onClickLabel = (key: string, value: string) => {
@@ -175,7 +175,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
   onModifyQueries = (action, index?: number) => {
     const { datasourceInstance } = this.props;
     if (datasourceInstance && datasourceInstance.modifyQuery) {
-      const modifier = (queries: DataQuery, action: any) => datasourceInstance.modifyQuery(queries, action);
+      const modifier = (queries: DataQuery, modification: any) => datasourceInstance.modifyQuery(queries, modification);
       this.props.modifyQueries(this.props.exploreId, action, index, modifier);
     }
   };
@@ -366,15 +366,15 @@ const mapDispatchToProps = {
   changeDatasource,
   changeSize,
   changeTime,
-  clickClear,
-  clickCloseSplit,
-  clickExample,
-  clickSplit,
+  clearQueries,
   initializeExplore,
   modifyQueries,
   runQueries,
   scanStart,
   scanStop,
+  setQueries,
+  splitClose,
+  splitOpen,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Explore));
diff --git a/public/app/features/explore/GraphContainer.tsx b/public/app/features/explore/GraphContainer.tsx
index da098f0c92d..e2610bcc781 100644
--- a/public/app/features/explore/GraphContainer.tsx
+++ b/public/app/features/explore/GraphContainer.tsx
@@ -6,13 +6,12 @@ import { RawTimeRange, TimeRange } from '@grafana/ui';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 
-import { clickGraphButton } from './state/actions';
+import { toggleGraph } from './state/actions';
 import Graph from './Graph';
 import Panel from './Panel';
 
 interface GraphContainerProps {
   onChangeTime: (range: TimeRange) => void;
-  clickGraphButton: typeof clickGraphButton;
   exploreId: ExploreId;
   graphResult?: any[];
   loading: boolean;
@@ -20,11 +19,12 @@ interface GraphContainerProps {
   showingGraph: boolean;
   showingTable: boolean;
   split: boolean;
+  toggleGraph: typeof toggleGraph;
 }
 
 export class GraphContainer extends PureComponent<GraphContainerProps> {
   onClickGraphButton = () => {
-    this.props.clickGraphButton(this.props.exploreId);
+    this.props.toggleGraph(this.props.exploreId);
   };
 
   render() {
@@ -55,7 +55,7 @@ function mapStateToProps(state: StoreState, { exploreId }) {
 }
 
 const mapDispatchToProps = {
-  clickGraphButton,
+  toggleGraph,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(GraphContainer));
diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx
index db2f681a9c5..e58cd2b5e95 100644
--- a/public/app/features/explore/LogsContainer.tsx
+++ b/public/app/features/explore/LogsContainer.tsx
@@ -7,12 +7,11 @@ import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { LogsModel } from 'app/core/logs_model';
 import { StoreState } from 'app/types';
 
-import { clickLogsButton } from './state/actions';
+import { toggleLogs } from './state/actions';
 import Logs from './Logs';
 import Panel from './Panel';
 
 interface LogsContainerProps {
-  clickLogsButton: typeof clickLogsButton;
   exploreId: ExploreId;
   loading: boolean;
   logsHighlighterExpressions?: string[];
@@ -25,11 +24,12 @@ interface LogsContainerProps {
   scanning?: boolean;
   scanRange?: RawTimeRange;
   showingLogs: boolean;
+  toggleLogs: typeof toggleLogs;
 }
 
 export class LogsContainer extends PureComponent<LogsContainerProps> {
   onClickLogsButton = () => {
-    this.props.clickLogsButton(this.props.exploreId);
+    this.props.toggleLogs(this.props.exploreId);
   };
 
   render() {
@@ -85,7 +85,7 @@ function mapStateToProps(state: StoreState, { exploreId }) {
 }
 
 const mapDispatchToProps = {
-  clickLogsButton,
+  toggleLogs,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(LogsContainer));
diff --git a/public/app/features/explore/TableContainer.tsx b/public/app/features/explore/TableContainer.tsx
index e510a77c97f..1d00a441e14 100644
--- a/public/app/features/explore/TableContainer.tsx
+++ b/public/app/features/explore/TableContainer.tsx
@@ -5,30 +5,30 @@ import { connect } from 'react-redux';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 
-import { clickTableButton } from './state/actions';
+import { toggleGraph } from './state/actions';
 import Table from './Table';
 import Panel from './Panel';
 import TableModel from 'app/core/table_model';
 
 interface TableContainerProps {
-  clickTableButton: typeof clickTableButton;
   exploreId: ExploreId;
   loading: boolean;
-  onClickLabel: (key: string, value: string) => void;
+  onClickCell: (key: string, value: string) => void;
   showingTable: boolean;
   tableResult?: TableModel;
+  toggleGraph: typeof toggleGraph;
 }
 
 export class TableContainer extends PureComponent<TableContainerProps> {
   onClickTableButton = () => {
-    this.props.clickTableButton(this.props.exploreId);
+    this.props.toggleGraph(this.props.exploreId);
   };
 
   render() {
-    const { loading, onClickLabel, showingTable, tableResult } = this.props;
+    const { loading, onClickCell, showingTable, tableResult } = this.props;
     return (
       <Panel label="Table" loading={loading} isOpen={showingTable} onToggle={this.onClickTableButton}>
-        <Table data={tableResult} loading={loading} onClickCell={onClickLabel} />
+        <Table data={tableResult} loading={loading} onClickCell={onClickCell} />
       </Panel>
     );
   }
@@ -43,7 +43,7 @@ function mapStateToProps(state: StoreState, { exploreId }) {
 }
 
 const mapDispatchToProps = {
-  clickTableButton,
+  toggleGraph,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TableContainer));
diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts
new file mode 100644
index 00000000000..ed0995cff17
--- /dev/null
+++ b/public/app/features/explore/state/actionTypes.ts
@@ -0,0 +1,252 @@
+import { RawTimeRange, TimeRange } from '@grafana/ui';
+
+import { Emitter } from 'app/core/core';
+import {
+  ExploreId,
+  ExploreItemState,
+  HistoryItem,
+  RangeScanner,
+  ResultType,
+  QueryTransaction,
+} from 'app/types/explore';
+import { DataSourceSelectItem } from 'app/types/datasources';
+import { DataQuery } from 'app/types';
+
+export enum ActionTypes {
+  AddQueryRow = 'explore/ADD_QUERY_ROW',
+  ChangeDatasource = 'explore/CHANGE_DATASOURCE',
+  ChangeQuery = 'explore/CHANGE_QUERY',
+  ChangeSize = 'explore/CHANGE_SIZE',
+  ChangeTime = 'explore/CHANGE_TIME',
+  ClearQueries = 'explore/CLEAR_QUERIES',
+  HighlightLogsExpression = 'explore/HIGHLIGHT_LOGS_EXPRESSION',
+  InitializeExplore = 'explore/INITIALIZE_EXPLORE',
+  InitializeExploreSplit = 'explore/INITIALIZE_EXPLORE_SPLIT',
+  LoadDatasourceFailure = 'explore/LOAD_DATASOURCE_FAILURE',
+  LoadDatasourceMissing = 'explore/LOAD_DATASOURCE_MISSING',
+  LoadDatasourcePending = 'explore/LOAD_DATASOURCE_PENDING',
+  LoadDatasourceSuccess = 'explore/LOAD_DATASOURCE_SUCCESS',
+  ModifyQueries = 'explore/MODIFY_QUERIES',
+  QueryTransactionFailure = 'explore/QUERY_TRANSACTION_FAILURE',
+  QueryTransactionStart = 'explore/QUERY_TRANSACTION_START',
+  QueryTransactionSuccess = 'explore/QUERY_TRANSACTION_SUCCESS',
+  RemoveQueryRow = 'explore/REMOVE_QUERY_ROW',
+  RunQueries = 'explore/RUN_QUERIES',
+  RunQueriesEmpty = 'explore/RUN_QUERIES_EMPTY',
+  ScanRange = 'explore/SCAN_RANGE',
+  ScanStart = 'explore/SCAN_START',
+  ScanStop = 'explore/SCAN_STOP',
+  SetQueries = 'explore/SET_QUERIES',
+  SplitClose = 'explore/SPLIT_CLOSE',
+  SplitOpen = 'explore/SPLIT_OPEN',
+  StateSave = 'explore/STATE_SAVE',
+  ToggleGraph = 'explore/TOGGLE_GRAPH',
+  ToggleLogs = 'explore/TOGGLE_LOGS',
+  ToggleTable = 'explore/TOGGLE_TABLE',
+}
+
+export interface AddQueryRowAction {
+  type: ActionTypes.AddQueryRow;
+  exploreId: ExploreId;
+  index: number;
+  query: DataQuery;
+}
+
+export interface ChangeQueryAction {
+  type: ActionTypes.ChangeQuery;
+  exploreId: ExploreId;
+  query: DataQuery;
+  index: number;
+  override: boolean;
+}
+
+export interface ChangeSizeAction {
+  type: ActionTypes.ChangeSize;
+  exploreId: ExploreId;
+  width: number;
+  height: number;
+}
+
+export interface ChangeTimeAction {
+  type: ActionTypes.ChangeTime;
+  exploreId: ExploreId;
+  range: TimeRange;
+}
+
+export interface ClearQueriesAction {
+  type: ActionTypes.ClearQueries;
+  exploreId: ExploreId;
+}
+
+export interface HighlightLogsExpressionAction {
+  type: ActionTypes.HighlightLogsExpression;
+  exploreId: ExploreId;
+  expressions: string[];
+}
+
+export interface InitializeExploreAction {
+  type: ActionTypes.InitializeExplore;
+  exploreId: ExploreId;
+  containerWidth: number;
+  datasource: string;
+  eventBridge: Emitter;
+  exploreDatasources: DataSourceSelectItem[];
+  queries: DataQuery[];
+  range: RawTimeRange;
+}
+
+export interface InitializeExploreSplitAction {
+  type: ActionTypes.InitializeExploreSplit;
+}
+
+export interface LoadDatasourceFailureAction {
+  type: ActionTypes.LoadDatasourceFailure;
+  exploreId: ExploreId;
+  error: string;
+}
+
+export interface LoadDatasourcePendingAction {
+  type: ActionTypes.LoadDatasourcePending;
+  exploreId: ExploreId;
+  datasourceId: number;
+}
+
+export interface LoadDatasourceMissingAction {
+  type: ActionTypes.LoadDatasourceMissing;
+  exploreId: ExploreId;
+}
+
+export interface LoadDatasourceSuccessAction {
+  type: ActionTypes.LoadDatasourceSuccess;
+  exploreId: ExploreId;
+  StartPage?: any;
+  datasourceInstance: any;
+  history: HistoryItem[];
+  initialDatasource: string;
+  initialQueries: DataQuery[];
+  logsHighlighterExpressions?: any[];
+  showingStartPage: boolean;
+  supportsGraph: boolean;
+  supportsLogs: boolean;
+  supportsTable: boolean;
+}
+
+export interface ModifyQueriesAction {
+  type: ActionTypes.ModifyQueries;
+  exploreId: ExploreId;
+  modification: any;
+  index: number;
+  modifier: (queries: DataQuery[], modification: any) => DataQuery[];
+}
+
+export interface QueryTransactionFailureAction {
+  type: ActionTypes.QueryTransactionFailure;
+  exploreId: ExploreId;
+  queryTransactions: QueryTransaction[];
+}
+
+export interface QueryTransactionStartAction {
+  type: ActionTypes.QueryTransactionStart;
+  exploreId: ExploreId;
+  resultType: ResultType;
+  rowIndex: number;
+  transaction: QueryTransaction;
+}
+
+export interface QueryTransactionSuccessAction {
+  type: ActionTypes.QueryTransactionSuccess;
+  exploreId: ExploreId;
+  history: HistoryItem[];
+  queryTransactions: QueryTransaction[];
+}
+
+export interface RemoveQueryRowAction {
+  type: ActionTypes.RemoveQueryRow;
+  exploreId: ExploreId;
+  index: number;
+}
+
+export interface RunQueriesEmptyAction {
+  type: ActionTypes.RunQueriesEmpty;
+  exploreId: ExploreId;
+}
+
+export interface ScanStartAction {
+  type: ActionTypes.ScanStart;
+  exploreId: ExploreId;
+  scanner: RangeScanner;
+}
+
+export interface ScanRangeAction {
+  type: ActionTypes.ScanRange;
+  exploreId: ExploreId;
+  range: RawTimeRange;
+}
+
+export interface ScanStopAction {
+  type: ActionTypes.ScanStop;
+  exploreId: ExploreId;
+}
+
+export interface SetQueriesAction {
+  type: ActionTypes.SetQueries;
+  exploreId: ExploreId;
+  queries: DataQuery[];
+}
+
+export interface SplitCloseAction {
+  type: ActionTypes.SplitClose;
+}
+
+export interface SplitOpenAction {
+  type: ActionTypes.SplitOpen;
+  itemState: ExploreItemState;
+}
+
+export interface StateSaveAction {
+  type: ActionTypes.StateSave;
+}
+
+export interface ToggleTableAction {
+  type: ActionTypes.ToggleTable;
+  exploreId: ExploreId;
+}
+
+export interface ToggleGraphAction {
+  type: ActionTypes.ToggleGraph;
+  exploreId: ExploreId;
+}
+
+export interface ToggleLogsAction {
+  type: ActionTypes.ToggleLogs;
+  exploreId: ExploreId;
+}
+
+export type Action =
+  | AddQueryRowAction
+  | ChangeQueryAction
+  | ChangeSizeAction
+  | ChangeTimeAction
+  | ClearQueriesAction
+  | HighlightLogsExpressionAction
+  | InitializeExploreAction
+  | InitializeExploreSplitAction
+  | LoadDatasourceFailureAction
+  | LoadDatasourceMissingAction
+  | LoadDatasourcePendingAction
+  | LoadDatasourceSuccessAction
+  | ModifyQueriesAction
+  | QueryTransactionFailureAction
+  | QueryTransactionStartAction
+  | QueryTransactionSuccessAction
+  | RemoveQueryRowAction
+  | RunQueriesEmptyAction
+  | ScanRangeAction
+  | ScanStartAction
+  | ScanStopAction
+  | SetQueriesAction
+  | SplitCloseAction
+  | SplitOpenAction
+  | ToggleGraphAction
+  | ToggleLogsAction
+  | ToggleTableAction;
diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts
index 26811606bd9..ecfb35c8c2f 100644
--- a/public/app/features/explore/state/actions.ts
+++ b/public/app/features/explore/state/actions.ts
@@ -21,9 +21,7 @@ import { DataQuery, StoreState } from 'app/types';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import {
   ExploreId,
-  ExploreItemState,
   ExploreUrlState,
-  HistoryItem,
   RangeScanner,
   ResultType,
   QueryOptions,
@@ -33,245 +31,33 @@ import {
 } from 'app/types/explore';
 import { Emitter } from 'app/core/core';
 
-export enum ActionTypes {
-  AddQueryRow = 'ADD_QUERY_ROW',
-  ChangeDatasource = 'CHANGE_DATASOURCE',
-  ChangeQuery = 'CHANGE_QUERY',
-  ChangeSize = 'CHANGE_SIZE',
-  ChangeTime = 'CHANGE_TIME',
-  ClickClear = 'CLICK_CLEAR',
-  ClickCloseSplit = 'CLICK_CLOSE_SPLIT',
-  ClickExample = 'CLICK_EXAMPLE',
-  ClickGraphButton = 'CLICK_GRAPH_BUTTON',
-  ClickLogsButton = 'CLICK_LOGS_BUTTON',
-  ClickSplit = 'CLICK_SPLIT',
-  ClickTableButton = 'CLICK_TABLE_BUTTON',
-  HighlightLogsExpression = 'HIGHLIGHT_LOGS_EXPRESSION',
-  InitializeExplore = 'INITIALIZE_EXPLORE',
-  InitializeExploreSplit = 'INITIALIZE_EXPLORE_SPLIT',
-  LoadDatasourceFailure = 'LOAD_DATASOURCE_FAILURE',
-  LoadDatasourceMissing = 'LOAD_DATASOURCE_MISSING',
-  LoadDatasourcePending = 'LOAD_DATASOURCE_PENDING',
-  LoadDatasourceSuccess = 'LOAD_DATASOURCE_SUCCESS',
-  ModifyQueries = 'MODIFY_QUERIES',
-  QueryTransactionFailure = 'QUERY_TRANSACTION_FAILURE',
-  QueryTransactionStart = 'QUERY_TRANSACTION_START',
-  QueryTransactionSuccess = 'QUERY_TRANSACTION_SUCCESS',
-  RemoveQueryRow = 'REMOVE_QUERY_ROW',
-  RunQueries = 'RUN_QUERIES',
-  RunQueriesEmpty = 'RUN_QUERIES',
-  ScanRange = 'SCAN_RANGE',
-  ScanStart = 'SCAN_START',
-  ScanStop = 'SCAN_STOP',
-  StateSave = 'STATE_SAVE',
-}
+import {
+  Action as ThunkableAction,
+  ActionTypes,
+  AddQueryRowAction,
+  ChangeSizeAction,
+  HighlightLogsExpressionAction,
+  LoadDatasourceFailureAction,
+  LoadDatasourceMissingAction,
+  LoadDatasourcePendingAction,
+  LoadDatasourceSuccessAction,
+  QueryTransactionStartAction,
+  ScanStopAction,
+} from './actionTypes';
 
-export interface AddQueryRowAction {
-  type: ActionTypes.AddQueryRow;
-  exploreId: ExploreId;
-  index: number;
-  query: DataQuery;
-}
-
-export interface ChangeQueryAction {
-  type: ActionTypes.ChangeQuery;
-  exploreId: ExploreId;
-  query: DataQuery;
-  index: number;
-  override: boolean;
-}
-
-export interface ChangeSizeAction {
-  type: ActionTypes.ChangeSize;
-  exploreId: ExploreId;
-  width: number;
-  height: number;
-}
-
-export interface ChangeTimeAction {
-  type: ActionTypes.ChangeTime;
-  exploreId: ExploreId;
-  range: TimeRange;
-}
-
-export interface ClickClearAction {
-  type: ActionTypes.ClickClear;
-  exploreId: ExploreId;
-}
-
-export interface ClickCloseSplitAction {
-  type: ActionTypes.ClickCloseSplit;
-}
-
-export interface ClickExampleAction {
-  type: ActionTypes.ClickExample;
-  exploreId: ExploreId;
-  query: DataQuery;
-}
-
-export interface ClickGraphButtonAction {
-  type: ActionTypes.ClickGraphButton;
-  exploreId: ExploreId;
-}
-
-export interface ClickLogsButtonAction {
-  type: ActionTypes.ClickLogsButton;
-  exploreId: ExploreId;
-}
-
-export interface ClickSplitAction {
-  type: ActionTypes.ClickSplit;
-  itemState: ExploreItemState;
-}
-
-export interface ClickTableButtonAction {
-  type: ActionTypes.ClickTableButton;
-  exploreId: ExploreId;
-}
-
-export interface HighlightLogsExpressionAction {
-  type: ActionTypes.HighlightLogsExpression;
-  exploreId: ExploreId;
-  expressions: string[];
-}
-
-export interface InitializeExploreAction {
-  type: ActionTypes.InitializeExplore;
-  exploreId: ExploreId;
-  containerWidth: number;
-  datasource: string;
-  eventBridge: Emitter;
-  exploreDatasources: DataSourceSelectItem[];
-  queries: DataQuery[];
-  range: RawTimeRange;
-}
-
-export interface InitializeExploreSplitAction {
-  type: ActionTypes.InitializeExploreSplit;
-}
-
-export interface LoadDatasourceFailureAction {
-  type: ActionTypes.LoadDatasourceFailure;
-  exploreId: ExploreId;
-  error: string;
-}
-
-export interface LoadDatasourcePendingAction {
-  type: ActionTypes.LoadDatasourcePending;
-  exploreId: ExploreId;
-  datasourceId: number;
-}
-
-export interface LoadDatasourceMissingAction {
-  type: ActionTypes.LoadDatasourceMissing;
-  exploreId: ExploreId;
-}
-
-export interface LoadDatasourceSuccessAction {
-  type: ActionTypes.LoadDatasourceSuccess;
-  exploreId: ExploreId;
-  StartPage?: any;
-  datasourceInstance: any;
-  history: HistoryItem[];
-  initialDatasource: string;
-  initialQueries: DataQuery[];
-  logsHighlighterExpressions?: any[];
-  showingStartPage: boolean;
-  supportsGraph: boolean;
-  supportsLogs: boolean;
-  supportsTable: boolean;
-}
-
-export interface ModifyQueriesAction {
-  type: ActionTypes.ModifyQueries;
-  exploreId: ExploreId;
-  modification: any;
-  index: number;
-  modifier: (queries: DataQuery[], modification: any) => DataQuery[];
-}
-
-export interface QueryTransactionFailureAction {
-  type: ActionTypes.QueryTransactionFailure;
-  exploreId: ExploreId;
-  queryTransactions: QueryTransaction[];
-}
-
-export interface QueryTransactionStartAction {
-  type: ActionTypes.QueryTransactionStart;
-  exploreId: ExploreId;
-  resultType: ResultType;
-  rowIndex: number;
-  transaction: QueryTransaction;
-}
-
-export interface QueryTransactionSuccessAction {
-  type: ActionTypes.QueryTransactionSuccess;
-  exploreId: ExploreId;
-  history: HistoryItem[];
-  queryTransactions: QueryTransaction[];
-}
-
-export interface RemoveQueryRowAction {
-  type: ActionTypes.RemoveQueryRow;
-  exploreId: ExploreId;
-  index: number;
-}
-
-export interface ScanStartAction {
-  type: ActionTypes.ScanStart;
-  exploreId: ExploreId;
-  scanner: RangeScanner;
-}
-
-export interface ScanRangeAction {
-  type: ActionTypes.ScanRange;
-  exploreId: ExploreId;
-  range: RawTimeRange;
-}
-
-export interface ScanStopAction {
-  type: ActionTypes.ScanStop;
-  exploreId: ExploreId;
-}
-
-export interface StateSaveAction {
-  type: ActionTypes.StateSave;
-}
-
-export type Action =
-  | AddQueryRowAction
-  | ChangeQueryAction
-  | ChangeSizeAction
-  | ChangeTimeAction
-  | ClickClearAction
-  | ClickCloseSplitAction
-  | ClickExampleAction
-  | ClickGraphButtonAction
-  | ClickLogsButtonAction
-  | ClickSplitAction
-  | ClickTableButtonAction
-  | HighlightLogsExpressionAction
-  | InitializeExploreAction
-  | InitializeExploreSplitAction
-  | LoadDatasourceFailureAction
-  | LoadDatasourceMissingAction
-  | LoadDatasourcePendingAction
-  | LoadDatasourceSuccessAction
-  | ModifyQueriesAction
-  | QueryTransactionFailureAction
-  | QueryTransactionStartAction
-  | QueryTransactionSuccessAction
-  | RemoveQueryRowAction
-  | ScanRangeAction
-  | ScanStartAction
-  | ScanStopAction;
-type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, ThunkableAction>;
 
+/**
+ * Adds a query row after the row with the given index.
+ */
 export function addQueryRow(exploreId: ExploreId, index: number): AddQueryRowAction {
   const query = generateEmptyQuery(index + 1);
   return { type: ActionTypes.AddQueryRow, exploreId, index, query };
 }
 
+/**
+ * Loads a new datasource identified by the given name.
+ */
 export function changeDatasource(exploreId: ExploreId, datasource: string): ThunkResult<void> {
   return async dispatch => {
     const instance = await getDatasourceSrv().get(datasource);
@@ -279,6 +65,10 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun
   };
 }
 
+/**
+ * Query change handler for the query row with the given index.
+ * If `override` is reset the query modifications and run the queries. Use this to set queries via a link.
+ */
 export function changeQuery(
   exploreId: ExploreId,
   query: DataQuery,
@@ -298,6 +88,10 @@ export function changeQuery(
   };
 }
 
+/**
+ * Keep track of the Explore container size, in particular the width.
+ * The width will be used to calculate graph intervals (number of datapoints).
+ */
 export function changeSize(
   exploreId: ExploreId,
   { height, width }: { height: number; width: number }
@@ -305,6 +99,9 @@ export function changeSize(
   return { type: ActionTypes.ChangeSize, exploreId, height, width };
 }
 
+/**
+ * Change the time range of Explore. Usually called from the Timepicker or a graph interaction.
+ */
 export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<void> {
   return dispatch => {
     dispatch({ type: ActionTypes.ChangeTime, exploreId, range });
@@ -312,78 +109,28 @@ export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<
   };
 }
 
-export function clickClear(exploreId: ExploreId): ThunkResult<void> {
+/**
+ * Clear all queries and results.
+ */
+export function clearQueries(exploreId: ExploreId): ThunkResult<void> {
   return dispatch => {
     dispatch(scanStop(exploreId));
-    dispatch({ type: ActionTypes.ClickClear, exploreId });
+    dispatch({ type: ActionTypes.ClearQueries, exploreId });
     dispatch(stateSave());
   };
 }
 
-export function clickCloseSplit(): ThunkResult<void> {
-  return dispatch => {
-    dispatch({ type: ActionTypes.ClickCloseSplit });
-    dispatch(stateSave());
-  };
-}
-
-export function clickExample(exploreId: ExploreId, rawQuery: DataQuery): ThunkResult<void> {
-  return dispatch => {
-    const query = { ...rawQuery, ...generateEmptyQuery() };
-    dispatch({
-      type: ActionTypes.ClickExample,
-      exploreId,
-      query,
-    });
-    dispatch(runQueries(exploreId));
-  };
-}
-
-export function clickGraphButton(exploreId: ExploreId): ThunkResult<void> {
-  return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ClickGraphButton, exploreId });
-    if (getState().explore[exploreId].showingGraph) {
-      dispatch(runQueries(exploreId));
-    }
-  };
-}
-
-export function clickLogsButton(exploreId: ExploreId): ThunkResult<void> {
-  return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ClickLogsButton, exploreId });
-    if (getState().explore[exploreId].showingLogs) {
-      dispatch(runQueries(exploreId));
-    }
-  };
-}
-
-export function clickSplit(): ThunkResult<void> {
-  return (dispatch, getState) => {
-    // Clone left state to become the right state
-    const leftState = getState().explore.left;
-    const itemState = {
-      ...leftState,
-      queryTransactions: [],
-      initialQueries: leftState.modifiedQueries.slice(),
-    };
-    dispatch({ type: ActionTypes.ClickSplit, itemState });
-    dispatch(stateSave());
-  };
-}
-
-export function clickTableButton(exploreId: ExploreId): ThunkResult<void> {
-  return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ClickTableButton, exploreId });
-    if (getState().explore[exploreId].showingTable) {
-      dispatch(runQueries(exploreId));
-    }
-  };
-}
-
+/**
+ * Highlight expressions in the log results
+ */
 export function highlightLogsExpression(exploreId: ExploreId, expressions: string[]): HighlightLogsExpressionAction {
   return { type: ActionTypes.HighlightLogsExpression, exploreId, expressions };
 }
 
+/**
+ * Initialize Explore state with state from the URL and the React component.
+ * Call this only on components for with the Explore state has not been initialized.
+ */
 export function initializeExplore(
   exploreId: ExploreId,
   datasource: string,
@@ -426,29 +173,46 @@ export function initializeExplore(
   };
 }
 
+/**
+ * Initialize the wrapper split state
+ */
 export function initializeExploreSplit() {
   return async dispatch => {
     dispatch({ type: ActionTypes.InitializeExploreSplit });
   };
 }
 
+/**
+ * Display an error that happened during the selection of a datasource
+ */
 export const loadDatasourceFailure = (exploreId: ExploreId, error: string): LoadDatasourceFailureAction => ({
   type: ActionTypes.LoadDatasourceFailure,
   exploreId,
   error,
 });
 
+/**
+ * Display an error when no datasources have been configured
+ */
 export const loadDatasourceMissing = (exploreId: ExploreId): LoadDatasourceMissingAction => ({
   type: ActionTypes.LoadDatasourceMissing,
   exploreId,
 });
 
+/**
+ * Start the async process of loading a datasource to display a loading indicator
+ */
 export const loadDatasourcePending = (exploreId: ExploreId, datasourceId: number): LoadDatasourcePendingAction => ({
   type: ActionTypes.LoadDatasourcePending,
   exploreId,
   datasourceId,
 });
 
+/**
+ * Datasource loading was successfully completed. The instance is stored in the state as well in case we need to
+ * run datasource-specific code. Existing queries are imported to the new datasource if an importer exists,
+ * e.g., Prometheus -> Loki queries.
+ */
 export const loadDatasourceSuccess = (
   exploreId: ExploreId,
   instance: any,
@@ -481,6 +245,9 @@ export const loadDatasourceSuccess = (
   };
 };
 
+/**
+ * Main action to asynchronously load a datasource. Dispatches lots of smaller actions for feedback.
+ */
 export function loadDatasource(exploreId: ExploreId, instance: any): ThunkResult<void> {
   return async (dispatch, getState) => {
     const datasourceId = instance.meta.id;
@@ -542,6 +309,13 @@ export function loadDatasource(exploreId: ExploreId, instance: any): ThunkResult
   };
 }
 
+/**
+ * Action to modify a query given a datasource-specific modifier action.
+ * @param exploreId Explore area
+ * @param modification Action object with a type, e.g., ADD_FILTER
+ * @param index Optional query row index. If omitted, the modification is applied to all query rows.
+ * @param modifier Function that executes the modification, typically `datasourceInstance.modifyQueries`.
+ */
 export function modifyQueries(
   exploreId: ExploreId,
   modification: any,
@@ -556,6 +330,10 @@ export function modifyQueries(
   };
 }
 
+/**
+ * Mark a query transaction as failed with an error extracted from the query response.
+ * The transaction will be marked as `done`.
+ */
 export function queryTransactionFailure(
   exploreId: ExploreId,
   transactionId: string,
@@ -614,6 +392,13 @@ export function queryTransactionFailure(
   };
 }
 
+/**
+ * Start a query transaction for the given result type.
+ * @param exploreId Explore area
+ * @param transaction Query options and `done` status.
+ * @param resultType Associate the transaction with a result viewer, e.g., Graph
+ * @param rowIndex Index is used to associate latency for this transaction with a query row
+ */
 export function queryTransactionStart(
   exploreId: ExploreId,
   transaction: QueryTransaction,
@@ -623,6 +408,17 @@ export function queryTransactionStart(
   return { type: ActionTypes.QueryTransactionStart, exploreId, resultType, rowIndex, transaction };
 }
 
+/**
+ * Complete a query transaction, mark the transaction as `done` and store query state in URL.
+ * If the transaction was started by a scanner, it keeps on scanning for more results.
+ * Side-effect: the query is stored in localStorage.
+ * @param exploreId Explore area
+ * @param transactionId ID
+ * @param result Response from `datasourceInstance.query()`
+ * @param latency Duration between request and response
+ * @param queries Queries from all query rows
+ * @param datasourceId Origin datasource instance, used to discard results if current datasource is different
+ */
 export function queryTransactionSuccess(
   exploreId: ExploreId,
   transactionId: string,
@@ -691,6 +487,9 @@ export function queryTransactionSuccess(
   };
 }
 
+/**
+ * Remove query row of the given index, as well as associated query results.
+ */
 export function removeQueryRow(exploreId: ExploreId, index: number): ThunkResult<void> {
   return dispatch => {
     dispatch({ type: ActionTypes.RemoveQueryRow, exploreId, index });
@@ -698,6 +497,9 @@ export function removeQueryRow(exploreId: ExploreId, index: number): ThunkResult
   };
 }
 
+/**
+ * Main action to run queries and dispatches sub-actions based on which result viewers are active
+ */
 export function runQueries(exploreId: ExploreId) {
   return (dispatch, getState) => {
     const {
@@ -757,6 +559,13 @@ export function runQueries(exploreId: ExploreId) {
   };
 }
 
+/**
+ * Helper action to build a query transaction object and handing the query to the datasource.
+ * @param exploreId Explore area
+ * @param resultType Result viewer that will be associated with this query result
+ * @param queryOptions Query options as required by the datasource's `query()` function.
+ * @param resultGetter Optional result extractor, e.g., if the result is a list and you only need the first element.
+ */
 function runQueriesForType(
   exploreId: ExploreId,
   resultType: ResultType,
@@ -801,18 +610,79 @@ function runQueriesForType(
   };
 }
 
+/**
+ * Start a scan for more results using the given scanner.
+ * @param exploreId Explore area
+ * @param scanner Function that a) returns a new time range and b) triggers a query run for the new range
+ */
 export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkResult<void> {
   return dispatch => {
+    // Register the scanner
     dispatch({ type: ActionTypes.ScanStart, exploreId, scanner });
+    // Scanning must trigger query run, and return the new range
     const range = scanner();
+    // Set the new range to be displayed
     dispatch({ type: ActionTypes.ScanRange, exploreId, range });
   };
 }
 
+/**
+ * Stop any scanning for more results.
+ */
 export function scanStop(exploreId: ExploreId): ScanStopAction {
   return { type: ActionTypes.ScanStop, exploreId };
 }
 
+/**
+ * Reset queries to the given queries. Any modifications will be discarded.
+ * Use this action for clicks on query examples. Triggers a query run.
+ */
+export function setQueries(exploreId: ExploreId, rawQueries: DataQuery[]): ThunkResult<void> {
+  return dispatch => {
+    // Inject react keys into query objects
+    const queries = rawQueries.map(q => ({ ...q, ...generateEmptyQuery() }));
+    dispatch({
+      type: ActionTypes.SetQueries,
+      exploreId,
+      queries,
+    });
+    dispatch(runQueries(exploreId));
+  };
+}
+
+/**
+ * Close the split view and save URL state.
+ */
+export function splitClose(): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.SplitClose });
+    dispatch(stateSave());
+  };
+}
+
+/**
+ * Open the split view and copy the left state to be the right state.
+ * The right state is automatically initialized.
+ * The copy keeps all query modifications but wipes the query results.
+ */
+export function splitOpen(): ThunkResult<void> {
+  return (dispatch, getState) => {
+    // Clone left state to become the right state
+    const leftState = getState().explore.left;
+    const itemState = {
+      ...leftState,
+      queryTransactions: [],
+      initialQueries: leftState.modifiedQueries.slice(),
+    };
+    dispatch({ type: ActionTypes.SplitOpen, itemState });
+    dispatch(stateSave());
+  };
+}
+
+/**
+ * Saves Explore state to URL using the `left` and `right` parameters.
+ * If split view is not active, `right` will not be set.
+ */
 export function stateSave() {
   return (dispatch, getState) => {
     const { left, right, split } = getState().explore;
@@ -834,3 +704,39 @@ export function stateSave() {
     dispatch(updateLocation({ query: urlStates }));
   };
 }
+
+/**
+ * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run.
+ */
+export function toggleGraph(exploreId: ExploreId): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ToggleGraph, exploreId });
+    if (getState().explore[exploreId].showingGraph) {
+      dispatch(runQueries(exploreId));
+    }
+  };
+}
+
+/**
+ * Expand/collapse the logs result viewer. When collapsed, log queries won't be run.
+ */
+export function toggleLogs(exploreId: ExploreId): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ToggleLogs, exploreId });
+    if (getState().explore[exploreId].showingLogs) {
+      dispatch(runQueries(exploreId));
+    }
+  };
+}
+
+/**
+ * Expand/collapse the table result viewer. When collapsed, table queries won't be run.
+ */
+export function toggleTable(exploreId: ExploreId): ThunkResult<void> {
+  return (dispatch, getState) => {
+    dispatch({ type: ActionTypes.ToggleTable, exploreId });
+    if (getState().explore[exploreId].showingTable) {
+      dispatch(runQueries(exploreId));
+    }
+  };
+}
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index 91d5c4cf925..73790ba14bc 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -7,7 +7,7 @@ import {
 import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/explore';
 import { DataQuery } from 'app/types/series';
 
-import { Action, ActionTypes } from './actions';
+import { Action, ActionTypes } from './actionTypes';
 
 export const DEFAULT_RANGE = {
   from: 'now-6h',
@@ -62,14 +62,17 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     case ActionTypes.AddQueryRow: {
       const { initialQueries, modifiedQueries, queryTransactions } = state;
       const { index, query } = action;
-      modifiedQueries[index + 1] = query;
 
-      const nextQueries = [
-        ...initialQueries.slice(0, index + 1),
-        { ...modifiedQueries[index + 1] },
+      // Add new query row after given index, keep modifications of existing rows
+      const nextModifiedQueries = [
+        ...modifiedQueries.slice(0, index + 1),
+        { ...query },
         ...initialQueries.slice(index + 1),
       ];
 
+      // Add to initialQueries, which will cause a new row to be rendered
+      const nextQueries = [...initialQueries.slice(0, index + 1), { ...query }, ...initialQueries.slice(index + 1)];
+
       // Ongoing transactions need to update their row indices
       const nextQueryTransactions = queryTransactions.map(qt => {
         if (qt.rowIndex > index) {
@@ -83,9 +86,9 @@ const itemReducer = (state, action: Action): ExploreItemState => {
 
       return {
         ...state,
-        modifiedQueries,
         initialQueries: nextQueries,
         logsHighlighterExpressions: undefined,
+        modifiedQueries: nextModifiedQueries,
         queryTransactions: nextQueryTransactions,
       };
     }
@@ -94,29 +97,33 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       const { initialQueries, queryTransactions } = state;
       let { modifiedQueries } = state;
       const { query, index, override } = action;
+
+      // Fast path: only change modifiedQueries to not trigger an update
       modifiedQueries[index] = query;
-      if (override) {
-        const nextQuery: DataQuery = {
-          ...query,
-          ...generateEmptyQuery(index),
-        };
-        const nextQueries = [...initialQueries];
-        nextQueries[index] = nextQuery;
-        modifiedQueries = [...nextQueries];
-
-        // Discard ongoing transaction related to row query
-        const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
-
+      if (!override) {
         return {
           ...state,
-          initialQueries: nextQueries,
-          modifiedQueries: nextQueries.slice(),
-          queryTransactions: nextQueryTransactions,
+          modifiedQueries,
         };
       }
+
+      // Override path: queries are completely reset
+      const nextQuery: DataQuery = {
+        ...query,
+        ...generateEmptyQuery(index),
+      };
+      const nextQueries = [...initialQueries];
+      nextQueries[index] = nextQuery;
+      modifiedQueries = [...nextQueries];
+
+      // Discard ongoing transaction related to row query
+      const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
+
       return {
         ...state,
-        modifiedQueries,
+        initialQueries: nextQueries,
+        modifiedQueries: nextQueries.slice(),
+        queryTransactions: nextQueryTransactions,
       };
     }
 
@@ -138,58 +145,17 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       };
     }
 
-    case ActionTypes.ClickClear: {
+    case ActionTypes.ClearQueries: {
       const queries = ensureQueries();
       return {
         ...state,
         initialQueries: queries.slice(),
         modifiedQueries: queries.slice(),
+        queryTransactions: [],
         showingStartPage: Boolean(state.StartPage),
       };
     }
 
-    case ActionTypes.ClickExample: {
-      const modifiedQueries = [action.query];
-      return { ...state, initialQueries: modifiedQueries.slice(), modifiedQueries };
-    }
-
-    case ActionTypes.ClickGraphButton: {
-      const showingGraph = !state.showingGraph;
-      let nextQueryTransactions = state.queryTransactions;
-      if (!showingGraph) {
-        // Discard transactions related to Graph query
-        nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph');
-      }
-      return { ...state, queryTransactions: nextQueryTransactions, showingGraph };
-    }
-
-    case ActionTypes.ClickLogsButton: {
-      const showingLogs = !state.showingLogs;
-      let nextQueryTransactions = state.queryTransactions;
-      if (!showingLogs) {
-        // Discard transactions related to Logs query
-        nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs');
-      }
-      return { ...state, queryTransactions: nextQueryTransactions, showingLogs };
-    }
-
-    case ActionTypes.ClickTableButton: {
-      const showingTable = !state.showingTable;
-      if (showingTable) {
-        return { ...state, showingTable, queryTransactions: state.queryTransactions };
-      }
-
-      // Toggle off needs discarding of table queries and results
-      const nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Table');
-      const results = calculateResultsFromQueryTransactions(
-        nextQueryTransactions,
-        state.datasourceInstance,
-        state.queryIntervals.intervalMs
-      );
-
-      return { ...state, ...results, queryTransactions: nextQueryTransactions, showingTable };
-    }
-
     case ActionTypes.HighlightLogsExpression: {
       const { expressions } = action;
       return { ...state, logsHighlighterExpressions: expressions };
@@ -248,7 +214,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
 
     case ActionTypes.ModifyQueries: {
       const { initialQueries, modifiedQueries, queryTransactions } = state;
-      const { action: modification, index, modifier } = action as any;
+      const { modification, index, modifier } = action as any;
       let nextQueries: DataQuery[];
       let nextQueryTransactions;
       if (index === undefined) {
@@ -290,37 +256,6 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       };
     }
 
-    case ActionTypes.RemoveQueryRow: {
-      const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state;
-      let { modifiedQueries } = state;
-      const { index } = action;
-
-      modifiedQueries = [...modifiedQueries.slice(0, index), ...modifiedQueries.slice(index + 1)];
-
-      if (initialQueries.length <= 1) {
-        return state;
-      }
-
-      const nextQueries = [...initialQueries.slice(0, index), ...initialQueries.slice(index + 1)];
-
-      // Discard transactions related to row query
-      const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
-      const results = calculateResultsFromQueryTransactions(
-        nextQueryTransactions,
-        datasourceInstance,
-        queryIntervals.intervalMs
-      );
-
-      return {
-        ...state,
-        ...results,
-        initialQueries: nextQueries,
-        logsHighlighterExpressions: undefined,
-        modifiedQueries: nextQueries.slice(),
-        queryTransactions: nextQueryTransactions,
-      };
-    }
-
     case ActionTypes.QueryTransactionFailure: {
       const { queryTransactions } = action;
       return {
@@ -373,6 +308,41 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       };
     }
 
+    case ActionTypes.RemoveQueryRow: {
+      const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state;
+      let { modifiedQueries } = state;
+      const { index } = action;
+
+      modifiedQueries = [...modifiedQueries.slice(0, index), ...modifiedQueries.slice(index + 1)];
+
+      if (initialQueries.length <= 1) {
+        return state;
+      }
+
+      const nextQueries = [...initialQueries.slice(0, index), ...initialQueries.slice(index + 1)];
+
+      // Discard transactions related to row query
+      const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
+      const results = calculateResultsFromQueryTransactions(
+        nextQueryTransactions,
+        datasourceInstance,
+        queryIntervals.intervalMs
+      );
+
+      return {
+        ...state,
+        ...results,
+        initialQueries: nextQueries,
+        logsHighlighterExpressions: undefined,
+        modifiedQueries: nextQueries.slice(),
+        queryTransactions: nextQueryTransactions,
+      };
+    }
+
+    case ActionTypes.RunQueriesEmpty: {
+      return { ...state, queryTransactions: [] };
+    }
+
     case ActionTypes.ScanRange: {
       return { ...state, scanRange: action.range };
     }
@@ -386,6 +356,48 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       const nextQueryTransactions = queryTransactions.filter(qt => qt.scanning && !qt.done);
       return { ...state, queryTransactions: nextQueryTransactions, scanning: false, scanRange: undefined };
     }
+
+    case ActionTypes.SetQueries: {
+      const { queries } = action;
+      return { ...state, initialQueries: queries.slice(), modifiedQueries: queries.slice() };
+    }
+
+    case ActionTypes.ToggleGraph: {
+      const showingGraph = !state.showingGraph;
+      let nextQueryTransactions = state.queryTransactions;
+      if (!showingGraph) {
+        // Discard transactions related to Graph query
+        nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph');
+      }
+      return { ...state, queryTransactions: nextQueryTransactions, showingGraph };
+    }
+
+    case ActionTypes.ToggleLogs: {
+      const showingLogs = !state.showingLogs;
+      let nextQueryTransactions = state.queryTransactions;
+      if (!showingLogs) {
+        // Discard transactions related to Logs query
+        nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs');
+      }
+      return { ...state, queryTransactions: nextQueryTransactions, showingLogs };
+    }
+
+    case ActionTypes.ToggleTable: {
+      const showingTable = !state.showingTable;
+      if (showingTable) {
+        return { ...state, showingTable, queryTransactions: state.queryTransactions };
+      }
+
+      // Toggle off needs discarding of table queries and results
+      const nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Table');
+      const results = calculateResultsFromQueryTransactions(
+        nextQueryTransactions,
+        state.datasourceInstance,
+        state.queryIntervals.intervalMs
+      );
+
+      return { ...state, ...results, queryTransactions: nextQueryTransactions, showingTable };
+    }
   }
 
   return state;
@@ -397,14 +409,14 @@ const itemReducer = (state, action: Action): ExploreItemState => {
  */
 export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
   switch (action.type) {
-    case ActionTypes.ClickCloseSplit: {
+    case ActionTypes.SplitClose: {
       return {
         ...state,
         split: false,
       };
     }
 
-    case ActionTypes.ClickSplit: {
+    case ActionTypes.SplitOpen: {
       return {
         ...state,
         split: true,
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index 3cef4124ee4..5636bb3acdb 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -83,43 +83,160 @@ export enum ExploreId {
   right = 'right',
 }
 
+/**
+ * Global Explore state
+ */
 export interface ExploreState {
+  /**
+   * True if split view is active.
+   */
   split: boolean;
+  /**
+   * Explore state of the left split (left is default in non-split view).
+   */
   left: ExploreItemState;
+  /**
+   * Explore state of the right area in split view.
+   */
   right: ExploreItemState;
 }
 
 export interface ExploreItemState {
+  /**
+   * React component to be shown when no queries have been run yet, e.g., for a query language cheat sheet.
+   */
   StartPage?: any;
+  /**
+   * Width used for calculating the graph interval (can't have more datapoints than pixels)
+   */
   containerWidth: number;
+  /**
+   * Datasource instance that has been selected. Datasource-specific logic can be run on this object.
+   */
   datasourceInstance: any;
+  /**
+   * Error to be shown when datasource loading or testing failed.
+   */
   datasourceError: string;
+  /**
+   * True if the datasource is loading. `null` if the loading has not started yet.
+   */
   datasourceLoading: boolean | null;
+  /**
+   * True if there is no datasource to be selected.
+   */
   datasourceMissing: boolean;
+  /**
+   * Emitter to send events to the rest of Grafana.
+   */
   eventBridge?: Emitter;
+  /**
+   * List of datasources to be shown in the datasource selector.
+   */
   exploreDatasources: DataSourceSelectItem[];
+  /**
+   * List of timeseries to be shown in the Explore graph result viewer.
+   */
   graphResult?: any[];
+  /**
+   * History of recent queries. Datasource-specific and initialized via localStorage.
+   */
   history: HistoryItem[];
+  /**
+   * Initial datasource for this Explore, e.g., set via URL.
+   */
   initialDatasource?: string;
+  /**
+   * Initial queries for this Explore, e.g., set via URL. Each query will be
+   * converted to a query row. Query edits should be tracked in `modifiedQueries` though.
+   */
   initialQueries: DataQuery[];
+  /**
+   * True if this Explore area has been initialized.
+   * Used to distinguish URL state injection versus split view state injection.
+   */
   initialized: boolean;
+  /**
+   * Log line substrings to be highlighted as you type in a query field.
+   * Currently supports only the first query row.
+   */
   logsHighlighterExpressions?: string[];
+  /**
+   * Log query result to be displayed in the logs result viewer.
+   */
   logsResult?: LogsModel;
+  /**
+   * Copy of `initialQueries` that tracks user edits.
+   * Don't connect this property to a react component as it is updated on every query change.
+   * Used when running queries. Needs to be reset to `initialQueries` when those are reset as well.
+   */
   modifiedQueries: DataQuery[];
+  /**
+   * Query intervals for graph queries to determine how many datapoints to return.
+   * Needs to be updated when `datasourceInstance` or `containerWidth` is changed.
+   */
   queryIntervals: QueryIntervals;
+  /**
+   * List of query transaction to track query duration and query result.
+   * Graph/Logs/Table results are calculated on the fly from the transaction,
+   * based on the transaction's result types. Transaction also holds the row index
+   * so that results can be dropped and re-computed without running queries again
+   * when query rows are removed.
+   */
   queryTransactions: QueryTransaction[];
+  /**
+   * Tracks datasource when selected in the datasource selector.
+   * Allows the selection to be discarded if something went wrong during the asynchronous
+   * loading of the datasource.
+   */
   requestedDatasourceId?: number;
+  /**
+   * Time range for this Explore. Managed by the time picker and used by all query runs.
+   */
   range: TimeRange | RawTimeRange;
+  /**
+   * Scanner function that calculates a new range, triggers a query run, and returns the new range.
+   */
   scanner?: RangeScanner;
+  /**
+   * True if scanning for more results is active.
+   */
   scanning?: boolean;
+  /**
+   * Current scanning range to be shown to the user while scanning is active.
+   */
   scanRange?: RawTimeRange;
+  /**
+   * True if graph result viewer is expanded. Query runs will contain graph queries.
+   */
   showingGraph: boolean;
+  /**
+   * True if logs result viewer is expanded. Query runs will contain logs queries.
+   */
   showingLogs: boolean;
+  /**
+   * True StartPage needs to be shown. Typically set to `false` once queries have been run.
+   */
   showingStartPage?: boolean;
+  /**
+   * True if table result viewer is expanded. Query runs will contain table queries.
+   */
   showingTable: boolean;
+  /**
+   * True if `datasourceInstance` supports graph queries.
+   */
   supportsGraph: boolean | null;
+  /**
+   * True if `datasourceInstance` supports logs queries.
+   */
   supportsLogs: boolean | null;
+  /**
+   * True if `datasourceInstance` supports table queries.
+   */
   supportsTable: boolean | null;
+  /**
+   * Table model that combines all query table results into a single table.
+   */
   tableResult?: TableModel;
 }
 

From a431efa0da03bdf4d6f89f50563dba471e03c7c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Mon, 14 Jan 2019 13:50:06 +0100
Subject: [PATCH 335/352] Refactored logic in ThresholdEditor

---
 .../ThresholdsEditor.test.tsx                 | 59 +++++++++++++++----
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 43 +++++++-------
 2 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 14f84e00f80..30a7c8fc257 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -15,25 +15,56 @@ const setup = (propOverrides?: object) => {
   return shallow(<ThresholdsEditor {...props} />).instance() as ThresholdsEditor;
 };
 
+describe('Initialization', () => {
+  it('should add a base threshold if missing', () => {
+    const instance = setup();
+
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
+  });
+});
+
 describe('Add threshold', () => {
   it('should add threshold', () => {
     const instance = setup();
 
-    instance.onAddThreshold(0);
+    instance.onAddThreshold(1);
 
-    expect(instance.state.thresholds).toEqual([{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }]);
+    expect(instance.state.thresholds).toEqual([
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
+    ]);
   });
 
   it('should add another threshold above a first', () => {
     const instance = setup({
-      thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
+      thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
     });
 
-    instance.onAddThreshold(1);
+    instance.onAddThreshold(2);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 1, value: 75, color: 'rgb(170, 95, 61)' },
-      { index: 0, value: 50, color: 'rgb(127, 115, 64)' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
+    ]);
+  });
+
+  it('should add another threshold between first and second index', () => {
+    const instance = setup({
+      thresholds: [
+        { index: 0, value: -Infinity, color: '#7EB26D' },
+        { index: 1, value: 50, color: '#EAB839' },
+        { index: 2, value: 75, color: '#6ED0E0' },
+      ],
+    });
+
+    instance.onAddThreshold(2);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 3, value: 75, color: '#EF843C' },
+      { index: 2, value: 62.5, color: '#6ED0E0' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
     ]);
   });
 });
@@ -41,23 +72,25 @@ describe('Add threshold', () => {
 describe('change threshold value', () => {
   it('should update value and resort rows', () => {
     const instance = setup();
-    const mockThresholds = [
-      { index: 0, value: 50, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 1, value: 75, color: 'rgba(237, 129, 40, 0.89)' },
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
     ];
 
     instance.state = {
       baseColor: BasicGaugeColor.Green,
-      thresholds: mockThresholds,
+      thresholds,
     };
 
     const mockEvent = { target: { value: 78 } };
 
-    instance.onChangeThresholdValue(mockEvent, mockThresholds[0]);
+    instance.onChangeThresholdValue(mockEvent, thresholds[1]);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: 78, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 1, value: 75, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 78, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
     ]);
   });
 });
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index c635b9cb4f5..50986bac5d6 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
-import tinycolor, { ColorInput } from 'tinycolor2';
+// import tinycolor, { ColorInput } from 'tinycolor2';
 
 import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
+import { colors } from '../../utils';
 
 export interface Props {
   thresholds: Threshold[];
@@ -19,43 +20,41 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    this.state = { thresholds: props.thresholds, baseColor: BasicGaugeColor.Green };
+    const thresholds: Threshold[] =
+      props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
+    this.state = { thresholds, baseColor: BasicGaugeColor.Green };
   }
 
   onAddThreshold = (index: number) => {
-    const maxValue = 100; // hardcoded for now before we add the base threshold
-    const minValue = 0; // hardcoded for now before we add the base threshold
     const { thresholds } = this.state;
+    const maxValue = 100;
+    const minValue = 0;
+
+    if (index === 0) {
+      return;
+    }
 
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
+        const index = threshold.index + 1;
         threshold = {
           ...threshold,
-          index: threshold.index + 1,
+          index,
+          color: colors[index],
         };
       }
-
       return threshold;
     });
 
     // Setting value to a value between the previous thresholds
-    let value;
+    const beforeThreshold = newThresholds.filter(threshold => threshold.index === index - 1)[0];
+    const afterThreshold = newThresholds.filter(threshold => threshold.index === index + 1)[0];
+    const beforeThresholdValue = beforeThreshold !== undefined ? Math.max(beforeThreshold.value, minValue) : minValue;
+    const afterThresholdValue = afterThreshold !== undefined ? Math.min(afterThreshold.value, maxValue) : maxValue;
+    const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
 
-    if (index === 0 && thresholds.length === 0) {
-      value = maxValue - (maxValue - minValue) / 2;
-    } else if (index === 0 && thresholds.length > 0) {
-      value = newThresholds[index + 1].value - (newThresholds[index + 1].value - minValue) / 2;
-    } else if (index > newThresholds[newThresholds.length - 1].index) {
-      value = maxValue - (maxValue - newThresholds[index - 1].value) / 2;
-    }
-
-    // Set a color that lies between the previous thresholds
-    let color;
-    if (index === 0 && thresholds.length === 0) {
-      color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
-    } else {
-      color = tinycolor.mix(thresholds[index - 1].color as ColorInput, BasicGaugeColor.Red, 50).toRgbString();
-    }
+    // Set a color
+    const color = colors[index];
 
     this.setState(
       {

From 7934116e5c1733cbf692c481d4e39dfcbcdfc4fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Mon, 14 Jan 2019 16:40:44 +0100
Subject: [PATCH 336/352] Fixed styling

---
 .../ThresholdsEditor.test.tsx                 |  16 +-
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 118 +++++----------
 .../ThresholdsEditor/_ThresholdsEditor.scss   | 140 ++++++++----------
 3 files changed, 109 insertions(+), 165 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 30a7c8fc257..f87d56a5bb5 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -19,7 +19,7 @@ describe('Initialization', () => {
   it('should add a base threshold if missing', () => {
     const instance = setup();
 
-    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
   });
 });
 
@@ -31,13 +31,13 @@ describe('Add threshold', () => {
 
     expect(instance.state.thresholds).toEqual([
       { index: 1, value: 50, color: '#EAB839' },
-      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 0, value: -Infinity, color: '#299c46' },
     ]);
   });
 
   it('should add another threshold above a first', () => {
     const instance = setup({
-      thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
+      thresholds: [{ index: 0, value: -Infinity, color: '#299c46' }, { index: 1, value: 50, color: '#EAB839' }],
     });
 
     instance.onAddThreshold(2);
@@ -45,14 +45,14 @@ describe('Add threshold', () => {
     expect(instance.state.thresholds).toEqual([
       { index: 2, value: 75, color: '#6ED0E0' },
       { index: 1, value: 50, color: '#EAB839' },
-      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 0, value: -Infinity, color: '#299c46' },
     ]);
   });
 
   it('should add another threshold between first and second index', () => {
     const instance = setup({
       thresholds: [
-        { index: 0, value: -Infinity, color: '#7EB26D' },
+        { index: 0, value: -Infinity, color: '#299c46' },
         { index: 1, value: 50, color: '#EAB839' },
         { index: 2, value: 75, color: '#6ED0E0' },
       ],
@@ -64,7 +64,7 @@ describe('Add threshold', () => {
       { index: 3, value: 75, color: '#EF843C' },
       { index: 2, value: 62.5, color: '#6ED0E0' },
       { index: 1, value: 50, color: '#EAB839' },
-      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 0, value: -Infinity, color: '#299c46' },
     ]);
   });
 });
@@ -73,7 +73,7 @@ describe('change threshold value', () => {
   it('should update value and resort rows', () => {
     const instance = setup();
     const thresholds = [
-      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 0, value: -Infinity, color: '#299c46' },
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
@@ -88,7 +88,7 @@ describe('change threshold value', () => {
     instance.onChangeThresholdValue(mockEvent, thresholds[1]);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 0, value: -Infinity, color: '#299c46' },
       { index: 1, value: 78, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ]);
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 50986bac5d6..e649629ee8e 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -21,7 +21,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     super(props);
 
     const thresholds: Threshold[] =
-      props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
+      props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: '#299c46' }];
     this.state = { thresholds, baseColor: BasicGaugeColor.Green };
   }
 
@@ -37,11 +37,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
         const index = threshold.index + 1;
-        threshold = {
-          ...threshold,
-          index,
-          color: colors[index],
-        };
+        threshold = { ...threshold, index, color: colors[index] };
       }
       return threshold;
     });
@@ -128,92 +124,52 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     });
   };
 
-  renderThresholds() {
-    const { thresholds } = this.state;
-
-    return thresholds.map((threshold, index) => {
-      return (
-        <div className="threshold-row" key={`${threshold.index}-${index}`}>
-          <div className="threshold-row-inner">
-            <div className="threshold-row-color">
-              {threshold.color && (
-                <div className="threshold-row-color-inner">
-                  <ColorPicker
-                    color={threshold.color}
-                    onChange={color => this.onChangeThresholdColor(threshold, color)}
-                  />
-                </div>
-              )}
-            </div>
-            <input
-              className="threshold-row-input"
-              type="text"
-              onChange={event => this.onChangeThresholdValue(event, threshold)}
-              value={threshold.value}
-              onBlur={this.onBlur}
-            />
-            <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
-              <i className="fa fa-times" />
-            </div>
-          </div>
-        </div>
-      );
-    });
-  }
-
-  renderIndicator() {
-    const { thresholds } = this.state;
-
-    return thresholds.map((t, i) => {
-      return (
-        <div key={`${t.value}-${i}`} className="indicator-section">
-          <div onClick={() => this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} />
-          <div onClick={() => this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
-        </div>
-      );
-    });
-  }
-
-  renderBaseIndicator() {
+  renderInput = (threshold: Threshold) => {
+    const value = threshold.index === 0 ? 'Base' : threshold.value;
     return (
-      <div className="indicator-section" style={{ height: '100%' }}>
-        <div
-          onClick={() => this.onAddThreshold(0)}
-          style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }}
+      <div className="thresholds-row-input-inner">
+        <div className="thresholds-row-input-inner-arrow" />
+        <input
+          className="thresholds-row-input-inner-value"
+          type="text"
+          onChange={event => this.onChangeThresholdValue(event, threshold)}
+          value={value}
+          onBlur={this.onBlur}
+          readOnly={threshold.index === 0}
         />
-      </div>
-    );
-  }
-
-  renderBase() {
-    const baseColor = BasicGaugeColor.Green;
-
-    return (
-      <div className="threshold-row threshold-row-base">
-        <div className="threshold-row-inner threshold-row-inner--base">
-          <div className="threshold-row-color">
-            <div className="threshold-row-color-inner">
-              <ColorPicker color={baseColor} onChange={color => this.onChangeBaseColor(color)} />
+        <div className="thresholds-row-input-inner-color">
+          {threshold.color && (
+            <div className="thresholds-row-input-inner-color-colorpicker">
+              <ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
             </div>
-          </div>
-          <div className="threshold-row-label">Base</div>
+          )}
         </div>
+        {threshold.index > 0 && (
+          <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
+            <i className="fa fa-times" />
+          </div>
+        )}
       </div>
     );
-  }
+  };
 
   render() {
+    const { thresholds } = this.state;
+
     return (
       <PanelOptionsGroup title="Thresholds">
         <div className="thresholds">
-          <div className="color-indicators">
-            {this.renderIndicator()}
-            {this.renderBaseIndicator()}
-          </div>
-          <div className="threshold-rows">
-            {this.renderThresholds()}
-            {this.renderBase()}
-          </div>
+          {thresholds.map((threshold, index) => {
+            return (
+              <div className="thresholds-row" key={`${threshold.index}-${index}`}>
+                <div className="thresholds-row-add-button">
+                  <i className="fa fa-plus-circle fa-2x" onClick={() => this.onAddThreshold(threshold.index + 1)} />
+                </div>
+                <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
+                <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
+              </div>
+            );
+          })}
         </div>
       </PanelOptionsGroup>
     );
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index ff89a6b6ea6..7f77f671fd0 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -1,38 +1,67 @@
-.thresholds {
+.thresholds-row {
   display: flex;
+  flex-direction: row;
+  height: 70px;
 }
 
-.threshold-rows {
-  margin-left: 5px;
-}
-
-.threshold-row {
-  display: flex;
-  align-items: center;
-  margin-top: 3px;
-  padding: 5px;
-
-  &::before {
-    font-family: 'FontAwesome';
-    content: '\f0d9';
-    color: $input-label-border-color;
-  }
-}
-
-.threshold-row-inner {
-  border: 1px solid $input-label-border-color;
-  border-radius: $border-radius;
-  display: flex;
+.thresholds-row:last-child > .thresholds-row-color-indicator {
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
   overflow: hidden;
-  height: 37px;
-
-  &--base {
-    width: auto;
-  }
 }
 
-.threshold-row-color {
-  width: 36px;
+.thresholds-row-add-button {
+  align-self: center;
+  margin-right: 5px;
+  color: $green;
+}
+
+.thresholds-row-add-button > i {
+  cursor: pointer;
+}
+
+.thresholds-row-color-indicator {
+  width: 20px;
+}
+
+.thresholds-row-input {
+  margin-top: 51px;
+  margin-left: 2px;
+}
+
+.thresholds-row-input-inner {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  height: 37px;
+}
+
+.thresholds-row-input-inner > div:last-child {
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+}
+
+.thresholds-row-input-inner-arrow {
+  align-self: center;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid $gray-5;
+}
+
+.thresholds-row-input-inner-value {
+  border: 1px solid $input-label-border-color;
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  padding: 8px 10px;
+  width: 150px;
+}
+
+.thresholds-row-input-inner-color {
+  width: 37px;
+  border-top: 1px solid $input-label-border-color;
+  border-bottom: 1px solid $input-label-border-color;
   border-right: 1px solid $input-label-border-color;
   display: flex;
   align-items: center;
@@ -40,7 +69,7 @@
   background-color: $input-bg;
 }
 
-.threshold-row-color-inner {
+.thresholds-row-input-inner-color-colorpicker {
   border-radius: 10px;
   overflow: hidden;
   display: flex;
@@ -48,56 +77,15 @@
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
 }
 
-.threshold-row-input {
-  padding: 8px 10px;
-  width: 150px;
-}
-
-.threshold-row-label {
-  background-color: $input-label-bg;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-}
-
-.threshold-row-add-label {
-  align-items: center;
-  display: flex;
-  padding: 5px 8px;
-}
-
-.threshold-row-remove {
+.thresholds-row-input-inner-remove {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 37px;
   width: 37px;
+  background-color: $gray-5;
+  border-top: 1px solid $input-label-border-color;
+  border-bottom: 1px solid $input-label-border-color;
+  border-right: 1px solid $input-label-border-color;
   cursor: pointer;
 }
-
-.threshold-row-add {
-  border-right: $border-width solid $input-label-border-color;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  background-color: $green;
-}
-
-.threshold-row-label {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.indicator-section {
-  width: 100%;
-  height: 50px;
-  cursor: pointer;
-}
-
-.color-indicators {
-  width: 15px;
-  border-bottom-left-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
-  overflow: hidden;
-}

From 39c672cb1ff2dd5668fcbf95219d81017bb5a3d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Mon, 14 Jan 2019 16:57:54 +0100
Subject: [PATCH 337/352] Fixed the circle

---
 .../ThresholdsEditor/ThresholdsEditor.tsx      |  4 ++--
 .../ThresholdsEditor/_ThresholdsEditor.scss    | 18 +++++++++++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index e649629ee8e..720c70c3ec5 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -162,8 +162,8 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
           {thresholds.map((threshold, index) => {
             return (
               <div className="thresholds-row" key={`${threshold.index}-${index}`}>
-                <div className="thresholds-row-add-button">
-                  <i className="fa fa-plus-circle fa-2x" onClick={() => this.onAddThreshold(threshold.index + 1)} />
+                <div className="thresholds-row-add-button" onClick={() => this.onAddThreshold(threshold.index + 1)}>
+                  <i className="fa fa-plus" />
                 </div>
                 <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
                 <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index 7f77f671fd0..9bc79d23e76 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -1,3 +1,7 @@
+.thresholds {
+  margin-bottom: 10px;
+}
+
 .thresholds-row {
   display: flex;
   flex-direction: row;
@@ -14,10 +18,18 @@
   align-self: center;
   margin-right: 5px;
   color: $green;
+  height: 24px;
+  width: 24px;
+  background-color: $green;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .thresholds-row-add-button > i {
-  cursor: pointer;
+  color: $white;
 }
 
 .thresholds-row-color-indicator {
@@ -47,7 +59,7 @@
   height: 0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-right: 5px solid $gray-5;
+  border-right: 5px solid $input-label-border-color;
 }
 
 .thresholds-row-input-inner-value {
@@ -83,7 +95,7 @@
   justify-content: center;
   height: 37px;
   width: 37px;
-  background-color: $gray-5;
+  background-color: $input-label-border-color;
   border-top: 1px solid $input-label-border-color;
   border-bottom: 1px solid $input-label-border-color;
   border-right: 1px solid $input-label-border-color;

From ad1505b346da7b07f97c480e718724ea19fedd6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 09:35:37 +0100
Subject: [PATCH 338/352] Reordered the input row

---
 .../ThresholdsEditor.test.tsx                 | 20 +++++++++++
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 33 +++++++++++++------
 .../ThresholdsEditor/_ThresholdsEditor.scss   | 30 +++++++++--------
 3 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index f87d56a5bb5..304e210d3df 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -69,6 +69,26 @@ describe('Add threshold', () => {
   });
 });
 
+describe('Remove threshold', () => {
+  it('should remove threshold', () => {
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+    ];
+    const instance = setup({
+      thresholds,
+    });
+
+    instance.onRemoveThreshold(thresholds[1]);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 75, color: '#6ED0E0' },
+    ]);
+  });
+});
+
 describe('change threshold value', () => {
   it('should update value and resort rows', () => {
     const instance = setup();
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 720c70c3ec5..8c336f38063 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -69,7 +69,19 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   onRemoveThreshold = (threshold: Threshold) => {
     this.setState(
-      prevState => ({ thresholds: prevState.thresholds.filter(t => t !== threshold) }),
+      prevState => {
+        const newThresholds = prevState.thresholds.map(t => {
+          if (t.index > threshold.index) {
+            const index = t.index - 1;
+            t = { ...t, index };
+          }
+          return t;
+        });
+
+        return {
+          thresholds: newThresholds.filter(t => t !== threshold),
+        };
+      },
       () => this.updateGauge()
     );
   };
@@ -128,15 +140,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const value = threshold.index === 0 ? 'Base' : threshold.value;
     return (
       <div className="thresholds-row-input-inner">
-        <div className="thresholds-row-input-inner-arrow" />
-        <input
-          className="thresholds-row-input-inner-value"
-          type="text"
-          onChange={event => this.onChangeThresholdValue(event, threshold)}
-          value={value}
-          onBlur={this.onBlur}
-          readOnly={threshold.index === 0}
-        />
+        <span className="thresholds-row-input-inner-arrow" />
         <div className="thresholds-row-input-inner-color">
           {threshold.color && (
             <div className="thresholds-row-input-inner-color-colorpicker">
@@ -144,6 +148,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             </div>
           )}
         </div>
+        <div className="thresholds-row-input-inner-value">
+          <input
+            type="text"
+            onChange={event => this.onChangeThresholdValue(event, threshold)}
+            value={value}
+            onBlur={this.onBlur}
+            readOnly={threshold.index === 0}
+          />
+        </div>
         {threshold.index > 0 && (
           <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
             <i className="fa fa-times" />
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index 9bc79d23e76..809f2936d27 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -48,7 +48,18 @@
   height: 37px;
 }
 
-.thresholds-row-input-inner > div:last-child {
+.thresholds-row-input-inner > div {
+  border-left: 1px solid $input-label-border-color;
+  border-top: 1px solid $input-label-border-color;
+  border-bottom: 1px solid $input-label-border-color;
+}
+
+.thresholds-row-input-inner > *:nth-child(2) {
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+}
+
+.thresholds-row-input-inner > *:last-child {
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
 }
@@ -57,24 +68,18 @@
   align-self: center;
   width: 0;
   height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid $input-label-border-color;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid $input-label-border-color;
 }
 
-.thresholds-row-input-inner-value {
-  border: 1px solid $input-label-border-color;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
+.thresholds-row-input-inner-value > input {
   padding: 8px 10px;
   width: 150px;
 }
 
 .thresholds-row-input-inner-color {
   width: 37px;
-  border-top: 1px solid $input-label-border-color;
-  border-bottom: 1px solid $input-label-border-color;
-  border-right: 1px solid $input-label-border-color;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -96,8 +101,5 @@
   height: 37px;
   width: 37px;
   background-color: $input-label-border-color;
-  border-top: 1px solid $input-label-border-color;
-  border-bottom: 1px solid $input-label-border-color;
-  border-right: 1px solid $input-label-border-color;
   cursor: pointer;
 }

From 92a1b55a4ac1c52fda81df77d8c9045a9ab8e7cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 09:43:02 +0100
Subject: [PATCH 339/352] Fixed styling for small screens

---
 .../ThresholdsEditor/_ThresholdsEditor.scss           | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index 809f2936d27..50c92a6bcc5 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -37,7 +37,7 @@
 }
 
 .thresholds-row-input {
-  margin-top: 51px;
+  margin-top: 49px;
   margin-left: 2px;
 }
 
@@ -45,7 +45,7 @@
   display: flex;
   justify-content: center;
   flex-direction: row;
-  height: 37px;
+  height: 42px;
 }
 
 .thresholds-row-input-inner > div {
@@ -74,12 +74,13 @@
 }
 
 .thresholds-row-input-inner-value > input {
+  height: 100%;
   padding: 8px 10px;
   width: 150px;
 }
 
 .thresholds-row-input-inner-color {
-  width: 37px;
+  width: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,8 +99,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 37px;
-  width: 37px;
+  height: 42px;
+  width: 42px;
   background-color: $input-label-border-color;
   cursor: pointer;
 }

From 2836bc2a13b5e8a11344abfa13167b586c07eb69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 10:52:15 +0100
Subject: [PATCH 340/352] Fixed issue with changing value not changing index

---
 .../ThresholdsEditor.test.tsx                 | 47 ++++++++++++++++++-
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 15 +++++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 304e210d3df..f5a99816c81 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -24,6 +24,14 @@ describe('Initialization', () => {
 });
 
 describe('Add threshold', () => {
+  it('should not add threshold at index 0', () => {
+    const instance = setup();
+
+    instance.onAddThreshold(0);
+
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
+  });
+
   it('should add threshold', () => {
     const instance = setup();
 
@@ -70,6 +78,19 @@ describe('Add threshold', () => {
 });
 
 describe('Remove threshold', () => {
+  it('should not remove threshold at index 0', () => {
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+    ];
+    const instance = setup({ thresholds });
+
+    instance.onRemoveThreshold(thresholds[0]);
+
+    expect(instance.state.thresholds).toEqual(thresholds);
+  });
+
   it('should remove threshold', () => {
     const thresholds = [
       { index: 0, value: -Infinity, color: '#299c46' },
@@ -90,7 +111,7 @@ describe('Remove threshold', () => {
 });
 
 describe('change threshold value', () => {
-  it('should update value and resort rows', () => {
+  it('should update value', () => {
     const instance = setup();
     const thresholds = [
       { index: 0, value: -Infinity, color: '#299c46' },
@@ -114,3 +135,27 @@ describe('change threshold value', () => {
     ]);
   });
 });
+
+describe('on blur threshold value', () => {
+  it('should resort rows and update indexes', () => {
+    const instance = setup();
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 78, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+    ];
+
+    instance.state = {
+      baseColor: BasicGaugeColor.Green,
+      thresholds,
+    };
+
+    instance.onBlur();
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 2, value: 78, color: '#EAB839' },
+      { index: 1, value: 75, color: '#6ED0E0' },
+      { index: 0, value: -Infinity, color: '#299c46' },
+    ]);
+  });
+});
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 8c336f38063..0e1b448a95d 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -68,6 +68,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   };
 
   onRemoveThreshold = (threshold: Threshold) => {
+    if (threshold.index === 0) {
+      return;
+    }
+
     this.setState(
       prevState => {
         const newThresholds = prevState.thresholds.map(t => {
@@ -91,7 +95,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
     const newThresholds = thresholds.map(t => {
       if (t === threshold) {
-        t = { ...t, value: event.target.value };
+        t = { ...t, value: parseInt(event.target.value, 10) };
       }
 
       return t;
@@ -121,7 +125,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
   onBlur = () => {
-    this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
+    this.setState(prevState => {
+      const sortThresholds = this.sortThresholds([...prevState.thresholds]);
+      let index = sortThresholds.length - 1;
+      sortThresholds.forEach(t => {
+        t.index = index--;
+      });
+      return { thresholds: sortThresholds };
+    });
 
     this.updateGauge();
   };

From aaaf3f7ff1f44a276b144ba2379e1c621b86c78e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 11:07:06 +0100
Subject: [PATCH 341/352] Fixed so added threshold colors are always unique

---
 .../ThresholdsEditor.test.tsx                 | 32 +++++++++----------
 .../ThresholdsEditor/ThresholdsEditor.tsx     |  6 ++--
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index f5a99816c81..d8e10debf18 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -19,7 +19,7 @@ describe('Initialization', () => {
   it('should add a base threshold if missing', () => {
     const instance = setup();
 
-    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
   });
 });
 
@@ -29,7 +29,7 @@ describe('Add threshold', () => {
 
     instance.onAddThreshold(0);
 
-    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
   });
 
   it('should add threshold', () => {
@@ -39,13 +39,13 @@ describe('Add threshold', () => {
 
     expect(instance.state.thresholds).toEqual([
       { index: 1, value: 50, color: '#EAB839' },
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
     ]);
   });
 
   it('should add another threshold above a first', () => {
     const instance = setup({
-      thresholds: [{ index: 0, value: -Infinity, color: '#299c46' }, { index: 1, value: 50, color: '#EAB839' }],
+      thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
     });
 
     instance.onAddThreshold(2);
@@ -53,14 +53,14 @@ describe('Add threshold', () => {
     expect(instance.state.thresholds).toEqual([
       { index: 2, value: 75, color: '#6ED0E0' },
       { index: 1, value: 50, color: '#EAB839' },
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
     ]);
   });
 
   it('should add another threshold between first and second index', () => {
     const instance = setup({
       thresholds: [
-        { index: 0, value: -Infinity, color: '#299c46' },
+        { index: 0, value: -Infinity, color: '#7EB26D' },
         { index: 1, value: 50, color: '#EAB839' },
         { index: 2, value: 75, color: '#6ED0E0' },
       ],
@@ -69,10 +69,10 @@ describe('Add threshold', () => {
     instance.onAddThreshold(2);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 3, value: 75, color: '#EF843C' },
-      { index: 2, value: 62.5, color: '#6ED0E0' },
+      { index: 3, value: 75, color: '#6ED0E0' },
+      { index: 2, value: 62.5, color: '#EF843C' },
       { index: 1, value: 50, color: '#EAB839' },
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
     ]);
   });
 });
@@ -80,7 +80,7 @@ describe('Add threshold', () => {
 describe('Remove threshold', () => {
   it('should not remove threshold at index 0', () => {
     const thresholds = [
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
@@ -93,7 +93,7 @@ describe('Remove threshold', () => {
 
   it('should remove threshold', () => {
     const thresholds = [
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
@@ -104,7 +104,7 @@ describe('Remove threshold', () => {
     instance.onRemoveThreshold(thresholds[1]);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 75, color: '#6ED0E0' },
     ]);
   });
@@ -114,7 +114,7 @@ describe('change threshold value', () => {
   it('should update value', () => {
     const instance = setup();
     const thresholds = [
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
@@ -129,7 +129,7 @@ describe('change threshold value', () => {
     instance.onChangeThresholdValue(mockEvent, thresholds[1]);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 78, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ]);
@@ -140,7 +140,7 @@ describe('on blur threshold value', () => {
   it('should resort rows and update indexes', () => {
     const instance = setup();
     const thresholds = [
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 78, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
@@ -155,7 +155,7 @@ describe('on blur threshold value', () => {
     expect(instance.state.thresholds).toEqual([
       { index: 2, value: 78, color: '#EAB839' },
       { index: 1, value: 75, color: '#6ED0E0' },
-      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 0, value: -Infinity, color: '#7EB26D' },
     ]);
   });
 });
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 0e1b448a95d..9139ae9c1bc 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -21,7 +21,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     super(props);
 
     const thresholds: Threshold[] =
-      props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: '#299c46' }];
+      props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
     this.state = { thresholds, baseColor: BasicGaugeColor.Green };
   }
 
@@ -37,7 +37,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
         const index = threshold.index + 1;
-        threshold = { ...threshold, index, color: colors[index] };
+        threshold = { ...threshold, index };
       }
       return threshold;
     });
@@ -50,7 +50,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
 
     // Set a color
-    const color = colors[index];
+    const color = colors.filter(c => newThresholds.some(t => t.color === c) === false)[0];
 
     this.setState(
       {

From 0b1aea905a373ebb1389f9632978214585139a27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 11:22:38 +0100
Subject: [PATCH 342/352] Fixed so that we can not change base threshold

---
 .../ThresholdsEditor/ThresholdsEditor.test.tsx    | 15 +++++++++++++++
 .../ThresholdsEditor/ThresholdsEditor.tsx         |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index d8e10debf18..e07cf3ae862 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -111,6 +111,21 @@ describe('Remove threshold', () => {
 });
 
 describe('change threshold value', () => {
+  it('should not change threshold at index 0', () => {
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+    ];
+    const instance = setup({ thresholds });
+
+    const mockEvent = { target: { value: 12 } };
+
+    instance.onChangeThresholdValue(mockEvent, thresholds[0]);
+
+    expect(instance.state.thresholds).toEqual(thresholds);
+  });
+
   it('should update value', () => {
     const instance = setup();
     const thresholds = [
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 9139ae9c1bc..e2717433f87 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -91,6 +91,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   };
 
   onChangeThresholdValue = (event: any, threshold: Threshold) => {
+    if (threshold.index === 0) {
+      return;
+    }
+
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(t => {

From 38c0e91666539559aa1d9e8ab6ce31a86951d48c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 11:26:13 +0100
Subject: [PATCH 343/352] Remove BasicGaugeColor from state

---
 .../components/ThresholdsEditor/ThresholdsEditor.test.tsx    | 3 ---
 .../src/components/ThresholdsEditor/ThresholdsEditor.tsx     | 5 ++---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index e07cf3ae862..845ff5f6bf4 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { ThresholdsEditor, Props } from './ThresholdsEditor';
-import { BasicGaugeColor } from '../../types';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -135,7 +134,6 @@ describe('change threshold value', () => {
     ];
 
     instance.state = {
-      baseColor: BasicGaugeColor.Green,
       thresholds,
     };
 
@@ -161,7 +159,6 @@ describe('on blur threshold value', () => {
     ];
 
     instance.state = {
-      baseColor: BasicGaugeColor.Green,
       thresholds,
     };
 
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index e2717433f87..87845dedd7a 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 // import tinycolor, { ColorInput } from 'tinycolor2';
 
-import { Threshold, BasicGaugeColor } from '../../types';
+import { Threshold } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { colors } from '../../utils';
@@ -13,7 +13,6 @@ export interface Props {
 
 interface State {
   thresholds: Threshold[];
-  baseColor: string;
 }
 
 export class ThresholdsEditor extends PureComponent<Props, State> {
@@ -22,7 +21,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
     const thresholds: Threshold[] =
       props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
-    this.state = { thresholds, baseColor: BasicGaugeColor.Green };
+    this.state = { thresholds };
   }
 
   onAddThreshold = (index: number) => {

From f16a2c0f48fde1e22ab1ee227007b910fce446b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 19:45:46 +0100
Subject: [PATCH 344/352] Fixed NaN issue when parsing

---
 .../src/components/ThresholdsEditor/ThresholdsEditor.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 87845dedd7a..9fee8025ec3 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -95,10 +95,12 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     }
 
     const { thresholds } = this.state;
+    const parsedValue = parseInt(event.target.value, 10);
+    const value = isNaN(parsedValue) ? null : parsedValue;
 
     const newThresholds = thresholds.map(t => {
       if (t === threshold) {
-        t = { ...t, value: parseInt(event.target.value, 10) };
+        t = { ...t, value: value as number };
       }
 
       return t;

From 45a08792befad7f944ea317686758ff7337730bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 16 Jan 2019 09:27:46 +0100
Subject: [PATCH 345/352] Fixed small bug with entries outside the min max
 values

---
 .../src/components/ThresholdsEditor/ThresholdsEditor.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 9fee8025ec3..6e8d88051f3 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
@@ -42,10 +42,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     });
 
     // Setting value to a value between the previous thresholds
-    const beforeThreshold = newThresholds.filter(threshold => threshold.index === index - 1)[0];
-    const afterThreshold = newThresholds.filter(threshold => threshold.index === index + 1)[0];
-    const beforeThresholdValue = beforeThreshold !== undefined ? Math.max(beforeThreshold.value, minValue) : minValue;
-    const afterThresholdValue = afterThreshold !== undefined ? Math.min(afterThreshold.value, maxValue) : maxValue;
+    const beforeThreshold = newThresholds.filter(t => t.index === index - 1 && t.index !== 0)[0];
+    const afterThreshold = newThresholds.filter(t => t.index === index + 1 && t.index !== 0)[0];
+    const beforeThresholdValue = beforeThreshold !== undefined ? beforeThreshold.value : minValue;
+    const afterThresholdValue = afterThreshold !== undefined ? afterThreshold.value : maxValue;
     const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
 
     // Set a color

From 9575a4a2c0c8ba1b249859b70fc425bf86695c71 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 16 Jan 2019 10:21:11 +0100
Subject: [PATCH 346/352] Move action properties to payload

---
 .../app/features/explore/state/actionTypes.ts | 180 +++++++++++-------
 public/app/features/explore/state/actions.ts  | 109 ++++++-----
 public/app/features/explore/state/reducers.ts |  87 +++++----
 3 files changed, 227 insertions(+), 149 deletions(-)

diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts
index ed0995cff17..b267da4f2c1 100644
--- a/public/app/features/explore/state/actionTypes.ts
+++ b/public/app/features/explore/state/actionTypes.ts
@@ -47,52 +47,66 @@ export enum ActionTypes {
 
 export interface AddQueryRowAction {
   type: ActionTypes.AddQueryRow;
-  exploreId: ExploreId;
-  index: number;
-  query: DataQuery;
+  payload: {
+    exploreId: ExploreId;
+    index: number;
+    query: DataQuery;
+  };
 }
 
 export interface ChangeQueryAction {
   type: ActionTypes.ChangeQuery;
-  exploreId: ExploreId;
-  query: DataQuery;
-  index: number;
-  override: boolean;
+  payload: {
+    exploreId: ExploreId;
+    query: DataQuery;
+    index: number;
+    override: boolean;
+  };
 }
 
 export interface ChangeSizeAction {
   type: ActionTypes.ChangeSize;
-  exploreId: ExploreId;
-  width: number;
-  height: number;
+  payload: {
+    exploreId: ExploreId;
+    width: number;
+    height: number;
+  };
 }
 
 export interface ChangeTimeAction {
   type: ActionTypes.ChangeTime;
-  exploreId: ExploreId;
-  range: TimeRange;
+  payload: {
+    exploreId: ExploreId;
+    range: TimeRange;
+  };
 }
 
 export interface ClearQueriesAction {
   type: ActionTypes.ClearQueries;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export interface HighlightLogsExpressionAction {
   type: ActionTypes.HighlightLogsExpression;
-  exploreId: ExploreId;
-  expressions: string[];
+  payload: {
+    exploreId: ExploreId;
+    expressions: string[];
+  };
 }
 
 export interface InitializeExploreAction {
   type: ActionTypes.InitializeExplore;
-  exploreId: ExploreId;
-  containerWidth: number;
-  datasource: string;
-  eventBridge: Emitter;
-  exploreDatasources: DataSourceSelectItem[];
-  queries: DataQuery[];
-  range: RawTimeRange;
+  payload: {
+    exploreId: ExploreId;
+    containerWidth: number;
+    datasource: string;
+    eventBridge: Emitter;
+    exploreDatasources: DataSourceSelectItem[];
+    queries: DataQuery[];
+    range: RawTimeRange;
+  };
 }
 
 export interface InitializeExploreSplitAction {
@@ -101,97 +115,125 @@ export interface InitializeExploreSplitAction {
 
 export interface LoadDatasourceFailureAction {
   type: ActionTypes.LoadDatasourceFailure;
-  exploreId: ExploreId;
-  error: string;
+  payload: {
+    exploreId: ExploreId;
+    error: string;
+  };
 }
 
 export interface LoadDatasourcePendingAction {
   type: ActionTypes.LoadDatasourcePending;
-  exploreId: ExploreId;
-  datasourceId: number;
+  payload: {
+    exploreId: ExploreId;
+    datasourceId: number;
+  };
 }
 
 export interface LoadDatasourceMissingAction {
   type: ActionTypes.LoadDatasourceMissing;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export interface LoadDatasourceSuccessAction {
   type: ActionTypes.LoadDatasourceSuccess;
-  exploreId: ExploreId;
-  StartPage?: any;
-  datasourceInstance: any;
-  history: HistoryItem[];
-  initialDatasource: string;
-  initialQueries: DataQuery[];
-  logsHighlighterExpressions?: any[];
-  showingStartPage: boolean;
-  supportsGraph: boolean;
-  supportsLogs: boolean;
-  supportsTable: boolean;
+  payload: {
+    exploreId: ExploreId;
+    StartPage?: any;
+    datasourceInstance: any;
+    history: HistoryItem[];
+    initialDatasource: string;
+    initialQueries: DataQuery[];
+    logsHighlighterExpressions?: any[];
+    showingStartPage: boolean;
+    supportsGraph: boolean;
+    supportsLogs: boolean;
+    supportsTable: boolean;
+  };
 }
 
 export interface ModifyQueriesAction {
   type: ActionTypes.ModifyQueries;
-  exploreId: ExploreId;
-  modification: any;
-  index: number;
-  modifier: (queries: DataQuery[], modification: any) => DataQuery[];
+  payload: {
+    exploreId: ExploreId;
+    modification: any;
+    index: number;
+    modifier: (queries: DataQuery[], modification: any) => DataQuery[];
+  };
 }
 
 export interface QueryTransactionFailureAction {
   type: ActionTypes.QueryTransactionFailure;
-  exploreId: ExploreId;
-  queryTransactions: QueryTransaction[];
+  payload: {
+    exploreId: ExploreId;
+    queryTransactions: QueryTransaction[];
+  };
 }
 
 export interface QueryTransactionStartAction {
   type: ActionTypes.QueryTransactionStart;
-  exploreId: ExploreId;
-  resultType: ResultType;
-  rowIndex: number;
-  transaction: QueryTransaction;
+  payload: {
+    exploreId: ExploreId;
+    resultType: ResultType;
+    rowIndex: number;
+    transaction: QueryTransaction;
+  };
 }
 
 export interface QueryTransactionSuccessAction {
   type: ActionTypes.QueryTransactionSuccess;
-  exploreId: ExploreId;
-  history: HistoryItem[];
-  queryTransactions: QueryTransaction[];
+  payload: {
+    exploreId: ExploreId;
+    history: HistoryItem[];
+    queryTransactions: QueryTransaction[];
+  };
 }
 
 export interface RemoveQueryRowAction {
   type: ActionTypes.RemoveQueryRow;
-  exploreId: ExploreId;
-  index: number;
+  payload: {
+    exploreId: ExploreId;
+    index: number;
+  };
 }
 
 export interface RunQueriesEmptyAction {
   type: ActionTypes.RunQueriesEmpty;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export interface ScanStartAction {
   type: ActionTypes.ScanStart;
-  exploreId: ExploreId;
-  scanner: RangeScanner;
+  payload: {
+    exploreId: ExploreId;
+    scanner: RangeScanner;
+  };
 }
 
 export interface ScanRangeAction {
   type: ActionTypes.ScanRange;
-  exploreId: ExploreId;
-  range: RawTimeRange;
+  payload: {
+    exploreId: ExploreId;
+    range: RawTimeRange;
+  };
 }
 
 export interface ScanStopAction {
   type: ActionTypes.ScanStop;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export interface SetQueriesAction {
   type: ActionTypes.SetQueries;
-  exploreId: ExploreId;
-  queries: DataQuery[];
+  payload: {
+    exploreId: ExploreId;
+    queries: DataQuery[];
+  };
 }
 
 export interface SplitCloseAction {
@@ -200,7 +242,9 @@ export interface SplitCloseAction {
 
 export interface SplitOpenAction {
   type: ActionTypes.SplitOpen;
-  itemState: ExploreItemState;
+  payload: {
+    itemState: ExploreItemState;
+  };
 }
 
 export interface StateSaveAction {
@@ -209,17 +253,23 @@ export interface StateSaveAction {
 
 export interface ToggleTableAction {
   type: ActionTypes.ToggleTable;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export interface ToggleGraphAction {
   type: ActionTypes.ToggleGraph;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export interface ToggleLogsAction {
   type: ActionTypes.ToggleLogs;
-  exploreId: ExploreId;
+  payload: {
+    exploreId: ExploreId;
+  };
 }
 
 export type Action =
diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts
index ecfb35c8c2f..ae0bce6a019 100644
--- a/public/app/features/explore/state/actions.ts
+++ b/public/app/features/explore/state/actions.ts
@@ -52,7 +52,7 @@ type ThunkResult<R> = ThunkAction<R, StoreState, undefined, ThunkableAction>;
  */
 export function addQueryRow(exploreId: ExploreId, index: number): AddQueryRowAction {
   const query = generateEmptyQuery(index + 1);
-  return { type: ActionTypes.AddQueryRow, exploreId, index, query };
+  return { type: ActionTypes.AddQueryRow, payload: { exploreId, index, query } };
 }
 
 /**
@@ -81,7 +81,7 @@ export function changeQuery(
       query = { ...generateEmptyQuery(index) };
     }
 
-    dispatch({ type: ActionTypes.ChangeQuery, exploreId, query, index, override });
+    dispatch({ type: ActionTypes.ChangeQuery, payload: { exploreId, query, index, override } });
     if (override) {
       dispatch(runQueries(exploreId));
     }
@@ -96,7 +96,7 @@ export function changeSize(
   exploreId: ExploreId,
   { height, width }: { height: number; width: number }
 ): ChangeSizeAction {
-  return { type: ActionTypes.ChangeSize, exploreId, height, width };
+  return { type: ActionTypes.ChangeSize, payload: { exploreId, height, width } };
 }
 
 /**
@@ -104,7 +104,7 @@ export function changeSize(
  */
 export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.ChangeTime, exploreId, range });
+    dispatch({ type: ActionTypes.ChangeTime, payload: { exploreId, range } });
     dispatch(runQueries(exploreId));
   };
 }
@@ -115,7 +115,7 @@ export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<
 export function clearQueries(exploreId: ExploreId): ThunkResult<void> {
   return dispatch => {
     dispatch(scanStop(exploreId));
-    dispatch({ type: ActionTypes.ClearQueries, exploreId });
+    dispatch({ type: ActionTypes.ClearQueries, payload: { exploreId } });
     dispatch(stateSave());
   };
 }
@@ -124,7 +124,7 @@ export function clearQueries(exploreId: ExploreId): ThunkResult<void> {
  * Highlight expressions in the log results
  */
 export function highlightLogsExpression(exploreId: ExploreId, expressions: string[]): HighlightLogsExpressionAction {
-  return { type: ActionTypes.HighlightLogsExpression, exploreId, expressions };
+  return { type: ActionTypes.HighlightLogsExpression, payload: { exploreId, expressions } };
 }
 
 /**
@@ -150,13 +150,15 @@ export function initializeExplore(
 
     dispatch({
       type: ActionTypes.InitializeExplore,
-      exploreId,
-      containerWidth,
-      datasource,
-      eventBridge,
-      exploreDatasources,
-      queries,
-      range,
+      payload: {
+        exploreId,
+        containerWidth,
+        datasource,
+        eventBridge,
+        exploreDatasources,
+        queries,
+        range,
+      },
     });
 
     if (exploreDatasources.length > 1) {
@@ -187,8 +189,10 @@ export function initializeExploreSplit() {
  */
 export const loadDatasourceFailure = (exploreId: ExploreId, error: string): LoadDatasourceFailureAction => ({
   type: ActionTypes.LoadDatasourceFailure,
-  exploreId,
-  error,
+  payload: {
+    exploreId,
+    error,
+  },
 });
 
 /**
@@ -196,7 +200,7 @@ export const loadDatasourceFailure = (exploreId: ExploreId, error: string): Load
  */
 export const loadDatasourceMissing = (exploreId: ExploreId): LoadDatasourceMissingAction => ({
   type: ActionTypes.LoadDatasourceMissing,
-  exploreId,
+  payload: { exploreId },
 });
 
 /**
@@ -204,8 +208,10 @@ export const loadDatasourceMissing = (exploreId: ExploreId): LoadDatasourceMissi
  */
 export const loadDatasourcePending = (exploreId: ExploreId, datasourceId: number): LoadDatasourcePendingAction => ({
   type: ActionTypes.LoadDatasourcePending,
-  exploreId,
-  datasourceId,
+  payload: {
+    exploreId,
+    datasourceId,
+  },
 });
 
 /**
@@ -232,16 +238,18 @@ export const loadDatasourceSuccess = (
 
   return {
     type: ActionTypes.LoadDatasourceSuccess,
-    exploreId,
-    StartPage,
-    datasourceInstance: instance,
-    history,
-    initialDatasource: instance.name,
-    initialQueries: queries,
-    showingStartPage: Boolean(StartPage),
-    supportsGraph,
-    supportsLogs,
-    supportsTable,
+    payload: {
+      exploreId,
+      StartPage,
+      datasourceInstance: instance,
+      history,
+      initialDatasource: instance.name,
+      initialQueries: queries,
+      showingStartPage: Boolean(StartPage),
+      supportsGraph,
+      supportsLogs,
+      supportsTable,
+    },
   };
 };
 
@@ -323,7 +331,7 @@ export function modifyQueries(
   modifier: any
 ): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.ModifyQueries, exploreId, modification, index, modifier });
+    dispatch({ type: ActionTypes.ModifyQueries, payload: { exploreId, modification, index, modifier } });
     if (!modification.preventSubmit) {
       dispatch(runQueries(exploreId));
     }
@@ -349,7 +357,7 @@ export function queryTransactionFailure(
 
     // Transaction might have been discarded
     if (!queryTransactions.find(qt => qt.id === transactionId)) {
-      return null;
+      return;
     }
 
     console.error(response);
@@ -388,7 +396,10 @@ export function queryTransactionFailure(
       return qt;
     });
 
-    dispatch({ type: ActionTypes.QueryTransactionFailure, exploreId, queryTransactions: nextQueryTransactions });
+    dispatch({
+      type: ActionTypes.QueryTransactionFailure,
+      payload: { exploreId, queryTransactions: nextQueryTransactions },
+    });
   };
 }
 
@@ -405,7 +416,7 @@ export function queryTransactionStart(
   resultType: ResultType,
   rowIndex: number
 ): QueryTransactionStartAction {
-  return { type: ActionTypes.QueryTransactionStart, exploreId, resultType, rowIndex, transaction };
+  return { type: ActionTypes.QueryTransactionStart, payload: { exploreId, resultType, rowIndex, transaction } };
 }
 
 /**
@@ -466,9 +477,11 @@ export function queryTransactionSuccess(
 
     dispatch({
       type: ActionTypes.QueryTransactionSuccess,
-      exploreId,
-      history: nextHistory,
-      queryTransactions: nextQueryTransactions,
+      payload: {
+        exploreId,
+        history: nextHistory,
+        queryTransactions: nextQueryTransactions,
+      },
     });
 
     // Keep scanning for results if this was the last scanning transaction
@@ -477,7 +490,7 @@ export function queryTransactionSuccess(
         const other = nextQueryTransactions.find(qt => qt.scanning && !qt.done);
         if (!other) {
           const range = scanner();
-          dispatch({ type: ActionTypes.ScanRange, exploreId, range });
+          dispatch({ type: ActionTypes.ScanRange, payload: { exploreId, range } });
         }
       } else {
         // We can stop scanning if we have a result
@@ -492,7 +505,7 @@ export function queryTransactionSuccess(
  */
 export function removeQueryRow(exploreId: ExploreId, index: number): ThunkResult<void> {
   return dispatch => {
-    dispatch({ type: ActionTypes.RemoveQueryRow, exploreId, index });
+    dispatch({ type: ActionTypes.RemoveQueryRow, payload: { exploreId, index } });
     dispatch(runQueries(exploreId));
   };
 }
@@ -514,7 +527,7 @@ export function runQueries(exploreId: ExploreId) {
     } = getState().explore[exploreId];
 
     if (!hasNonEmptyQuery(modifiedQueries)) {
-      dispatch({ type: ActionTypes.RunQueriesEmpty, exploreId });
+      dispatch({ type: ActionTypes.RunQueriesEmpty, payload: { exploreId } });
       return;
     }
 
@@ -618,11 +631,11 @@ function runQueriesForType(
 export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkResult<void> {
   return dispatch => {
     // Register the scanner
-    dispatch({ type: ActionTypes.ScanStart, exploreId, scanner });
+    dispatch({ type: ActionTypes.ScanStart, payload: { exploreId, scanner } });
     // Scanning must trigger query run, and return the new range
     const range = scanner();
     // Set the new range to be displayed
-    dispatch({ type: ActionTypes.ScanRange, exploreId, range });
+    dispatch({ type: ActionTypes.ScanRange, payload: { exploreId, range } });
   };
 }
 
@@ -630,7 +643,7 @@ export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkRes
  * Stop any scanning for more results.
  */
 export function scanStop(exploreId: ExploreId): ScanStopAction {
-  return { type: ActionTypes.ScanStop, exploreId };
+  return { type: ActionTypes.ScanStop, payload: { exploreId } };
 }
 
 /**
@@ -643,8 +656,10 @@ export function setQueries(exploreId: ExploreId, rawQueries: DataQuery[]): Thunk
     const queries = rawQueries.map(q => ({ ...q, ...generateEmptyQuery() }));
     dispatch({
       type: ActionTypes.SetQueries,
-      exploreId,
-      queries,
+      payload: {
+        exploreId,
+        queries,
+      },
     });
     dispatch(runQueries(exploreId));
   };
@@ -674,7 +689,7 @@ export function splitOpen(): ThunkResult<void> {
       queryTransactions: [],
       initialQueries: leftState.modifiedQueries.slice(),
     };
-    dispatch({ type: ActionTypes.SplitOpen, itemState });
+    dispatch({ type: ActionTypes.SplitOpen, payload: { itemState } });
     dispatch(stateSave());
   };
 }
@@ -710,7 +725,7 @@ export function stateSave() {
  */
 export function toggleGraph(exploreId: ExploreId): ThunkResult<void> {
   return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ToggleGraph, exploreId });
+    dispatch({ type: ActionTypes.ToggleGraph, payload: { exploreId } });
     if (getState().explore[exploreId].showingGraph) {
       dispatch(runQueries(exploreId));
     }
@@ -722,7 +737,7 @@ export function toggleGraph(exploreId: ExploreId): ThunkResult<void> {
  */
 export function toggleLogs(exploreId: ExploreId): ThunkResult<void> {
   return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ToggleLogs, exploreId });
+    dispatch({ type: ActionTypes.ToggleLogs, payload: { exploreId } });
     if (getState().explore[exploreId].showingLogs) {
       dispatch(runQueries(exploreId));
     }
@@ -734,7 +749,7 @@ export function toggleLogs(exploreId: ExploreId): ThunkResult<void> {
  */
 export function toggleTable(exploreId: ExploreId): ThunkResult<void> {
   return (dispatch, getState) => {
-    dispatch({ type: ActionTypes.ToggleTable, exploreId });
+    dispatch({ type: ActionTypes.ToggleTable, payload: { exploreId } });
     if (getState().explore[exploreId].showingTable) {
       dispatch(runQueries(exploreId));
     }
diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts
index 73790ba14bc..b112a5370e3 100644
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@@ -61,7 +61,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
   switch (action.type) {
     case ActionTypes.AddQueryRow: {
       const { initialQueries, modifiedQueries, queryTransactions } = state;
-      const { index, query } = action;
+      const { index, query } = action.payload;
 
       // Add new query row after given index, keep modifications of existing rows
       const nextModifiedQueries = [
@@ -96,7 +96,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     case ActionTypes.ChangeQuery: {
       const { initialQueries, queryTransactions } = state;
       let { modifiedQueries } = state;
-      const { query, index, override } = action;
+      const { query, index, override } = action.payload;
 
       // Fast path: only change modifiedQueries to not trigger an update
       modifiedQueries[index] = query;
@@ -133,7 +133,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
       if (datasourceInstance && datasourceInstance.interval) {
         interval = datasourceInstance.interval;
       }
-      const containerWidth = action.width;
+      const containerWidth = action.payload.width;
       const queryIntervals = getIntervals(range, interval, containerWidth);
       return { ...state, containerWidth, queryIntervals };
     }
@@ -141,7 +141,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     case ActionTypes.ChangeTime: {
       return {
         ...state,
-        range: action.range,
+        range: action.payload.range,
       };
     }
 
@@ -157,27 +157,27 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     }
 
     case ActionTypes.HighlightLogsExpression: {
-      const { expressions } = action;
+      const { expressions } = action.payload;
       return { ...state, logsHighlighterExpressions: expressions };
     }
 
     case ActionTypes.InitializeExplore: {
-      const { containerWidth, eventBridge, exploreDatasources, range } = action;
+      const { containerWidth, datasource, eventBridge, exploreDatasources, queries, range } = action.payload;
       return {
         ...state,
         containerWidth,
         eventBridge,
         exploreDatasources,
         range,
-        initialDatasource: action.datasource,
-        initialQueries: action.queries,
+        initialDatasource: datasource,
+        initialQueries: queries,
         initialized: true,
-        modifiedQueries: action.queries.slice(),
+        modifiedQueries: queries.slice(),
       };
     }
 
     case ActionTypes.LoadDatasourceFailure: {
-      return { ...state, datasourceError: action.error, datasourceLoading: false };
+      return { ...state, datasourceError: action.payload.error, datasourceLoading: false };
     }
 
     case ActionTypes.LoadDatasourceMissing: {
@@ -185,36 +185,47 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     }
 
     case ActionTypes.LoadDatasourcePending: {
-      return { ...state, datasourceLoading: true, requestedDatasourceId: action.datasourceId };
+      return { ...state, datasourceLoading: true, requestedDatasourceId: action.payload.datasourceId };
     }
 
     case ActionTypes.LoadDatasourceSuccess: {
       const { containerWidth, range } = state;
-      const queryIntervals = getIntervals(range, action.datasourceInstance.interval, containerWidth);
+      const {
+        StartPage,
+        datasourceInstance,
+        history,
+        initialDatasource,
+        initialQueries,
+        showingStartPage,
+        supportsGraph,
+        supportsLogs,
+        supportsTable,
+      } = action.payload;
+      const queryIntervals = getIntervals(range, datasourceInstance.interval, containerWidth);
 
       return {
         ...state,
         queryIntervals,
-        StartPage: action.StartPage,
-        datasourceInstance: action.datasourceInstance,
+        StartPage,
+        datasourceInstance,
+        history,
+        initialDatasource,
+        initialQueries,
+        showingStartPage,
+        supportsGraph,
+        supportsLogs,
+        supportsTable,
         datasourceLoading: false,
         datasourceMissing: false,
-        history: action.history,
-        initialDatasource: action.initialDatasource,
-        initialQueries: action.initialQueries,
         logsHighlighterExpressions: undefined,
-        modifiedQueries: action.initialQueries.slice(),
+        modifiedQueries: initialQueries.slice(),
         queryTransactions: [],
-        showingStartPage: action.showingStartPage,
-        supportsGraph: action.supportsGraph,
-        supportsLogs: action.supportsLogs,
-        supportsTable: action.supportsTable,
       };
     }
 
     case ActionTypes.ModifyQueries: {
       const { initialQueries, modifiedQueries, queryTransactions } = state;
-      const { modification, index, modifier } = action as any;
+      const { modification, index, modifier } = action.payload as any;
       let nextQueries: DataQuery[];
       let nextQueryTransactions;
       if (index === undefined) {
@@ -257,7 +268,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     }
 
     case ActionTypes.QueryTransactionFailure: {
-      const { queryTransactions } = action;
+      const { queryTransactions } = action.payload;
       return {
         ...state,
         queryTransactions,
@@ -267,7 +278,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
 
     case ActionTypes.QueryTransactionStart: {
       const { datasourceInstance, queryIntervals, queryTransactions } = state;
-      const { resultType, rowIndex, transaction } = action;
+      const { resultType, rowIndex, transaction } = action.payload;
       // Discarding existing transactions of same type
       const remainingTransactions = queryTransactions.filter(
         qt => !(qt.resultType === resultType && qt.rowIndex === rowIndex)
@@ -292,7 +303,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
 
     case ActionTypes.QueryTransactionSuccess: {
       const { datasourceInstance, queryIntervals } = state;
-      const { history, queryTransactions } = action;
+      const { history, queryTransactions } = action.payload;
       const results = calculateResultsFromQueryTransactions(
         queryTransactions,
         datasourceInstance,
@@ -311,7 +322,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     case ActionTypes.RemoveQueryRow: {
       const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state;
       let { modifiedQueries } = state;
-      const { index } = action;
+      const { index } = action.payload;
 
       modifiedQueries = [...modifiedQueries.slice(0, index), ...modifiedQueries.slice(index + 1)];
 
@@ -344,7 +355,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     }
 
     case ActionTypes.ScanRange: {
-      return { ...state, scanRange: action.range };
+      return { ...state, scanRange: action.payload.range };
     }
 
     case ActionTypes.ScanStart: {
@@ -358,7 +369,7 @@ const itemReducer = (state, action: Action): ExploreItemState => {
     }
 
     case ActionTypes.SetQueries: {
-      const { queries } = action;
+      const { queries } = action.payload;
       return { ...state, initialQueries: queries.slice(), modifiedQueries: queries.slice() };
     }
 
@@ -420,7 +431,7 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
       return {
         ...state,
         split: true,
-        right: action.itemState,
+        right: action.payload.itemState,
       };
     }
 
@@ -432,13 +443,15 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
     }
   }
 
-  const { exploreId } = action as any;
-  if (exploreId !== undefined) {
-    const exploreItemState = state[exploreId];
-    return {
-      ...state,
-      [exploreId]: itemReducer(exploreItemState, action),
-    };
+  if (action.payload) {
+    const { exploreId } = action.payload as any;
+    if (exploreId !== undefined) {
+      const exploreItemState = state[exploreId];
+      return {
+        ...state,
+        [exploreId]: itemReducer(exploreItemState, action),
+      };
+    }
   }
 
   return state;

From 639dc6c3c35df2c7aa9558f80da917aaa027d0a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 16 Jan 2019 10:28:05 +0100
Subject: [PATCH 347/352] Moved Label to grafana/ui/components

---
 .../grafana-ui/src}/components/Label/Label.tsx                | 2 +-
 packages/grafana-ui/src/components/index.ts                   | 1 +
 .../core/components/SharedPreferences/SharedPreferences.tsx   | 3 +--
 public/app/features/datasources/settings/BasicSettings.tsx    | 3 ++-
 public/app/features/teams/TeamSettings.tsx                    | 2 +-
 public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx         | 3 +--
 public/app/plugins/panel/gauge/MappingRow.tsx                 | 4 +---
 public/app/plugins/panel/gauge/ValueOptions.tsx               | 4 +---
 8 files changed, 9 insertions(+), 13 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Label/Label.tsx (93%)

diff --git a/public/app/core/components/Label/Label.tsx b/packages/grafana-ui/src/components/Label/Label.tsx
similarity index 93%
rename from public/app/core/components/Label/Label.tsx
rename to packages/grafana-ui/src/components/Label/Label.tsx
index 5d60efa056a..270b0161226 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/packages/grafana-ui/src/components/Label/Label.tsx
@@ -1,5 +1,5 @@
 import React, { SFC, ReactNode } from 'react';
-import { Tooltip } from '@grafana/ui';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 interface Props {
   tooltip?: string;
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 5420fcf14b7..51b601f2921 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -2,6 +2,7 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+export { Label } from './Label/Label';
 
 // Select
 export { Select, AsyncSelect, SelectOptionItem } from './Select/Select';
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index b13393ab2e1..ed27de39cb8 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
+import { Select, Label } from '@grafana/ui';
 
-import { Label } from 'app/core/components/Label/Label';
-import { Select } from '@grafana/ui';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 
 import { DashboardSearchHit } from 'app/types';
diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
index 120e002ac68..2d36b79a44c 100644
--- a/public/app/features/datasources/settings/BasicSettings.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -1,5 +1,6 @@
 import React, { SFC } from 'react';
-import { Label } from 'app/core/components/Label/Label';
+import { Label } from '@grafana/ui';
+
 import { Switch } from '../../../core/components/Switch/Switch';
 
 export interface Props {
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index 5e058289bf0..87c67b6e597 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { Label } from '@grafana/ui';
 
-import { Label } from 'app/core/components/Label/Label';
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { updateTeam } from './state/actions';
 import { getRouteParamsId } from 'app/core/selectors/location';
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index f1f78ab1172..cf60411ffe2 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Label } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
-import { Label } from '../../../core/components/Label/Label';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
index b975821f27a..4aeb85a52d3 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/public/app/plugins/panel/gauge/MappingRow.tsx
@@ -1,7 +1,5 @@
 import React, { PureComponent } from 'react';
-import { MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
-
-import { Label } from 'app/core/components/Label/Label';
+import { MappingType, RangeMap, Select, ValueMap, Label } from '@grafana/ui';
 
 interface Props {
   mapping: ValueMap | RangeMap;
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 7cfbb382f7b..accdb0b03fa 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Label, Select } from '@grafana/ui';
 
-import { Label } from 'app/core/components/Label/Label';
-import { Select} from '@grafana/ui';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
 
 const statOptions = [

From c90979a8f0602703942dd2c143c20e89ff64ea4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 16 Jan 2019 10:49:48 +0100
Subject: [PATCH 348/352] Moved ValueMappings to grafana/ui/component and
 renamed it ValueMappingsEditor

---
 .../ValueMappingsEditor}/MappingRow.tsx       |  5 +-
 .../ValueMappingsEditor.test.tsx              | 11 ++--
 .../ValueMappingsEditor.tsx                   |  6 +-
 .../_ValueMappingsEditor.scss                 |  0
 .../ValueMappingsEditor.test.tsx.snap         | 56 +++++++++++++++++++
 packages/grafana-ui/src/components/index.scss |  1 +
 packages/grafana-ui/src/components/index.ts   |  1 +
 .../plugins/panel/gauge/GaugePanelOptions.tsx |  4 +-
 public/sass/_grafana.scss                     |  3 +-
 9 files changed, 75 insertions(+), 12 deletions(-)
 rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/ValueMappingsEditor}/MappingRow.tsx (95%)
 rename public/app/plugins/panel/gauge/ValueMappings.test.tsx => packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx (84%)
 rename public/app/plugins/panel/gauge/ValueMappings.tsx => packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx (88%)
 rename public/sass/components/_value-mappings.scss => packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss (100%)
 create mode 100644 packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap

diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
similarity index 95%
rename from public/app/plugins/panel/gauge/MappingRow.tsx
rename to packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
index 4aeb85a52d3..8d3407329bf 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
@@ -1,5 +1,8 @@
 import React, { PureComponent } from 'react';
-import { MappingType, RangeMap, Select, ValueMap, Label } from '@grafana/ui';
+
+import { ValueMap, RangeMap, MappingType } from '../../types/panel';
+import { Label } from '../Label/Label';
+import { Select } from '../Select/Select';
 
 interface Props {
   mapping: ValueMap | RangeMap;
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
similarity index 84%
rename from public/app/plugins/panel/gauge/ValueMappings.test.tsx
rename to packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
index 07db4028c68..fcb614f8e6f 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
-import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
-import ValueMappings from './ValueMappings';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
+import { ValueMappingsEditor } from './ValueMappingsEditor';
+import { PanelOptionsProps, MappingType } from '../../types/panel';
+import { GaugeOptions } from '../../types/gauge';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<GaugeOptions> = {
@@ -19,9 +20,9 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<ValueMappings {...props} />);
+  const wrapper = shallow(<ValueMappingsEditor {...props} />);
 
-  const instance = wrapper.instance() as ValueMappings;
+  const instance = wrapper.instance() as ValueMappingsEditor;
 
   return {
     instance,
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
similarity index 88%
rename from public/app/plugins/panel/gauge/ValueMappings.tsx
rename to packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
index 9a3f87450f4..ae0ff092a06 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
@@ -1,14 +1,16 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionsGroup } from '@grafana/ui';
 
 import MappingRow from './MappingRow';
+import { PanelOptionsProps, ValueMap, RangeMap, MappingType } from '../../types/panel';
+import { GaugeOptions } from '../../types/gauge';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 interface State {
   mappings: Array<ValueMap | RangeMap>;
   nextIdToAdd: number;
 }
 
-export default class ValueMappings extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
+export class ValueMappingsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
   constructor(props) {
     super(props);
 
diff --git a/public/sass/components/_value-mappings.scss b/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss
similarity index 100%
rename from public/sass/components/_value-mappings.scss
rename to packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
new file mode 100644
index 00000000000..592b3326421
--- /dev/null
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<Component
+  title="Value Mappings"
+>
+  <div>
+    <MappingRow
+      key="Ok-0"
+      mapping={
+        Object {
+          "id": 1,
+          "operator": "",
+          "text": "Ok",
+          "type": 1,
+          "value": "20",
+        }
+      }
+      removeMapping={[Function]}
+      updateMapping={[Function]}
+    />
+    <MappingRow
+      key="Meh-1"
+      mapping={
+        Object {
+          "from": "21",
+          "id": 2,
+          "operator": "",
+          "text": "Meh",
+          "to": "30",
+          "type": 2,
+        }
+      }
+      removeMapping={[Function]}
+      updateMapping={[Function]}
+    />
+  </div>
+  <div
+    className="add-mapping-row"
+    onClick={[Function]}
+  >
+    <div
+      className="add-mapping-row-icon"
+    >
+      <i
+        className="fa fa-plus"
+      />
+    </div>
+    <div
+      className="add-mapping-row-label"
+    >
+      Add mapping
+    </div>
+  </div>
+</Component>
+`;
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index b894cf73c1a..fa8d0135756 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -6,3 +6,4 @@
 @import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
 @import 'ColorPicker/ColorPicker';
+@import 'ValueMappingsEditor/ValueMappingsEditor';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 51b601f2921..1b2d2fce972 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -19,3 +19,4 @@ export { GfFormLabel } from './GfFormLabel/GfFormLabel';
 export { Graph } from './Graph/Graph';
 export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
 export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
+export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index a5334b0c6e1..3e82ca0e27b 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -6,10 +6,10 @@ import {
   ThresholdsEditor,
   Threshold,
   PanelOptionsGrid,
+  ValueMappingsEditor,
 } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
 
 export const defaultProps = {
@@ -44,7 +44,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </PanelOptionsGrid>
 
-        <ValueMappings onChange={onChange} options={options} />
+        <ValueMappingsEditor onChange={onChange} options={options} />
       </>
     );
   }
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 93fd26b7ca8..e8859ff8255 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -1,4 +1,4 @@
- // DEPENDENCIES
+// DEPENDENCIES
 @import '../../node_modules/react-table/react-table.css';
 
 // VENDOR
@@ -97,7 +97,6 @@
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
 @import 'components/toggle_button_group';
-@import 'components/value-mappings';
 @import 'components/popover-box';
 
 // LOAD @grafana/ui components

From 013d46b707f82522d1f3c0ae973fdde5a6fa7455 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 16 Jan 2019 12:14:43 +0100
Subject: [PATCH 349/352] Refactored ValueMappings

---
 .../ValueMappingsEditor/MappingRow.tsx        | 36 ++++++-------
 .../ValueMappingsEditor.test.tsx              | 27 +++++-----
 .../ValueMappingsEditor.tsx                   | 52 ++++++++++---------
 .../ValueMappingsEditor.test.tsx.snap         | 12 ++---
 packages/grafana-ui/src/types/gauge.ts        | 16 ------
 packages/grafana-ui/src/types/index.ts        |  1 -
 packages/grafana-ui/src/types/panel.ts        |  2 +
 .../panel/gauge/GaugeOptionsEditor.tsx        |  3 +-
 public/app/plugins/panel/gauge/GaugePanel.tsx |  3 +-
 .../plugins/panel/gauge/GaugePanelOptions.tsx | 19 +++++--
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  3 +-
 public/app/plugins/panel/gauge/types.ts       | 16 +++++-
 public/app/viz/Gauge.test.tsx                 |  2 +-
 public/app/viz/Gauge.tsx                      | 31 ++++-------
 14 files changed, 112 insertions(+), 111 deletions(-)
 delete mode 100644 packages/grafana-ui/src/types/gauge.ts

diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
index 8d3407329bf..9705304d354 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
@@ -1,23 +1,23 @@
 import React, { PureComponent } from 'react';
 
-import { ValueMap, RangeMap, MappingType } from '../../types/panel';
+import { MappingType, ValueMapping } from '../../types/panel';
 import { Label } from '../Label/Label';
 import { Select } from '../Select/Select';
 
-interface Props {
-  mapping: ValueMap | RangeMap;
-  updateMapping: (mapping) => void;
-  removeMapping: () => void;
+export interface Props {
+  valueMapping: ValueMapping;
+  updateValueMapping: (valueMapping: ValueMapping) => void;
+  removeValueMapping: () => void;
 }
 
 interface State {
-  from: string;
+  from?: string;
   id: number;
   operator: string;
   text: string;
-  to: string;
+  to?: string;
   type: MappingType;
-  value: string;
+  value?: string;
 }
 
 const mappingOptions = [
@@ -26,36 +26,34 @@ const mappingOptions = [
 ];
 
 export default class MappingRow extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
-    this.state = {
-      ...props.mapping,
-    };
+    this.state = { ...props.valueMapping };
   }
 
-  onMappingValueChange = event => {
+  onMappingValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ value: event.target.value });
   };
 
-  onMappingFromChange = event => {
+  onMappingFromChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ from: event.target.value });
   };
 
-  onMappingToChange = event => {
+  onMappingToChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ to: event.target.value });
   };
 
-  onMappingTextChange = event => {
+  onMappingTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ text: event.target.value });
   };
 
-  onMappingTypeChange = mappingType => {
+  onMappingTypeChange = (mappingType: MappingType) => {
     this.setState({ type: mappingType });
   };
 
   updateMapping = () => {
-    this.props.updateMapping({ ...this.state });
+    this.props.updateValueMapping({ ...this.state } as ValueMapping);
   };
 
   renderRow() {
@@ -137,7 +135,7 @@ export default class MappingRow extends PureComponent<Props, State> {
         </div>
         {this.renderRow()}
         <div className="gf-form">
-          <button onClick={this.props.removeMapping} className="gf-form-label gf-form-label--btn">
+          <button onClick={this.props.removeValueMapping} className="gf-form-label gf-form-label--btn">
             <i className="fa fa-times" />
           </button>
         </div>
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
index fcb614f8e6f..bbad3e5a7ca 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
@@ -1,21 +1,16 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
-import { ValueMappingsEditor } from './ValueMappingsEditor';
-import { PanelOptionsProps, MappingType } from '../../types/panel';
-import { GaugeOptions } from '../../types/gauge';
+import { ValueMappingsEditor, Props } from './ValueMappingsEditor';
+import { MappingType } from '../../types/panel';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<GaugeOptions> = {
+  const props: Props = {
     onChange: jest.fn(),
-    options: {
-      ...defaultProps.options,
-      mappings: [
-        { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
-        { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
-      ],
-    },
+    valueMappings: [
+      { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
+      { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
+    ],
   };
 
   Object.assign(props, propOverrides);
@@ -41,18 +36,20 @@ describe('Render', () => {
 describe('On remove mapping', () => {
   it('Should remove mapping with id 0', () => {
     const { instance } = setup();
+
     instance.onRemoveMapping(1);
 
-    expect(instance.state.mappings).toEqual([
+    expect(instance.state.valueMappings).toEqual([
       { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
     ]);
   });
 
   it('should remove mapping with id 1', () => {
     const { instance } = setup();
+
     instance.onRemoveMapping(2);
 
-    expect(instance.state.mappings).toEqual([
+    expect(instance.state.valueMappings).toEqual([
       { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
     ]);
   });
@@ -68,7 +65,7 @@ describe('Next id to add', () => {
   });
 
   it('should default to 1', () => {
-    const { instance } = setup({ options: { ...defaultProps.options } });
+    const { instance } = setup({ valueMappings: [] });
 
     expect(instance.state.nextIdToAdd).toEqual(1);
   });
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
index ae0ff092a06..ca0a6e71f4a 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
@@ -1,35 +1,39 @@
 import React, { PureComponent } from 'react';
 
 import MappingRow from './MappingRow';
-import { PanelOptionsProps, ValueMap, RangeMap, MappingType } from '../../types/panel';
-import { GaugeOptions } from '../../types/gauge';
+import { MappingType, ValueMapping } from '../../types/panel';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
+export interface Props {
+  valueMappings: ValueMapping[];
+  onChange: (valueMappings: ValueMapping[]) => void;
+}
+
 interface State {
-  mappings: Array<ValueMap | RangeMap>;
+  valueMappings: ValueMapping[];
   nextIdToAdd: number;
 }
 
-export class ValueMappingsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
-  constructor(props) {
+export class ValueMappingsEditor extends PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
 
-    const mappings = props.options.mappings;
+    const mappings = props.valueMappings;
 
     this.state = {
-      mappings: mappings || [],
-      nextIdToAdd: mappings.length > 0 ? this.getMaxIdFromMappings(mappings) : 1,
+      valueMappings: mappings,
+      nextIdToAdd: mappings.length > 0 ? this.getMaxIdFromValueMappings(mappings) : 1,
     };
   }
 
-  getMaxIdFromMappings(mappings) {
+  getMaxIdFromValueMappings(mappings: ValueMapping[]) {
     return Math.max.apply(null, mappings.map(mapping => mapping.id).map(m => m)) + 1;
   }
 
   addMapping = () =>
     this.setState(prevState => ({
-      mappings: [
-        ...prevState.mappings,
+      valueMappings: [
+        ...prevState.valueMappings,
         {
           id: prevState.nextIdToAdd,
           operator: '',
@@ -43,23 +47,23 @@ export class ValueMappingsEditor extends PureComponent<PanelOptionsProps<GaugeOp
       nextIdToAdd: prevState.nextIdToAdd + 1,
     }));
 
-  onRemoveMapping = id => {
+  onRemoveMapping = (id: number) => {
     this.setState(
       prevState => ({
-        mappings: prevState.mappings.filter(m => {
+        valueMappings: prevState.valueMappings.filter(m => {
           return m.id !== id;
         }),
       }),
       () => {
-        this.props.onChange({ ...this.props.options, mappings: this.state.mappings });
+        this.props.onChange(this.state.valueMappings);
       }
     );
   };
 
-  updateGauge = mapping => {
+  updateGauge = (mapping: ValueMapping) => {
     this.setState(
       prevState => ({
-        mappings: prevState.mappings.map(m => {
+        valueMappings: prevState.valueMappings.map(m => {
           if (m.id === mapping.id) {
             return { ...mapping };
           }
@@ -68,24 +72,24 @@ export class ValueMappingsEditor extends PureComponent<PanelOptionsProps<GaugeOp
         }),
       }),
       () => {
-        this.props.onChange({ ...this.props.options, mappings: this.state.mappings });
+        this.props.onChange(this.state.valueMappings);
       }
     );
   };
 
   render() {
-    const { mappings } = this.state;
+    const { valueMappings } = this.state;
 
     return (
       <PanelOptionsGroup title="Value Mappings">
         <div>
-          {mappings.length > 0 &&
-            mappings.map((mapping, index) => (
+          {valueMappings.length > 0 &&
+            valueMappings.map((valueMapping, index) => (
               <MappingRow
-                key={`${mapping.text}-${index}`}
-                mapping={mapping}
-                updateMapping={this.updateGauge}
-                removeMapping={() => this.onRemoveMapping(mapping.id)}
+                key={`${valueMapping.text}-${index}`}
+                valueMapping={valueMapping}
+                updateValueMapping={this.updateGauge}
+                removeValueMapping={() => this.onRemoveMapping(valueMapping.id)}
               />
             ))}
         </div>
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
index 592b3326421..8a465ff88df 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
@@ -7,7 +7,9 @@ exports[`Render should render component 1`] = `
   <div>
     <MappingRow
       key="Ok-0"
-      mapping={
+      removeValueMapping={[Function]}
+      updateValueMapping={[Function]}
+      valueMapping={
         Object {
           "id": 1,
           "operator": "",
@@ -16,12 +18,12 @@ exports[`Render should render component 1`] = `
           "value": "20",
         }
       }
-      removeMapping={[Function]}
-      updateMapping={[Function]}
     />
     <MappingRow
       key="Meh-1"
-      mapping={
+      removeValueMapping={[Function]}
+      updateValueMapping={[Function]}
+      valueMapping={
         Object {
           "from": "21",
           "id": 2,
@@ -31,8 +33,6 @@ exports[`Render should render component 1`] = `
           "type": 2,
         }
       }
-      removeMapping={[Function]}
-      updateMapping={[Function]}
     />
   </div>
   <div
diff --git a/packages/grafana-ui/src/types/gauge.ts b/packages/grafana-ui/src/types/gauge.ts
deleted file mode 100644
index e05849448f7..00000000000
--- a/packages/grafana-ui/src/types/gauge.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { RangeMap, Threshold, ValueMap } from './panel';
-
-export interface GaugeOptions {
-  baseColor: string;
-  decimals: number;
-  mappings: Array<RangeMap | ValueMap>;
-  maxValue: number;
-  minValue: number;
-  prefix: string;
-  showThresholdLabels: boolean;
-  showThresholdMarkers: boolean;
-  stat: string;
-  suffix: string;
-  thresholds: Threshold[];
-  unit: string;
-}
diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts
index 814ab0478db..f618ce6db34 100644
--- a/packages/grafana-ui/src/types/index.ts
+++ b/packages/grafana-ui/src/types/index.ts
@@ -1,4 +1,3 @@
 export * from './series';
 export * from './time';
 export * from './panel';
-export * from './gauge';
diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 17ef712b0dd..7e4012ad529 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -56,6 +56,8 @@ interface BaseMap {
   type: MappingType;
 }
 
+export type ValueMapping = ValueMap | RangeMap;
+
 export interface ValueMap extends BaseMap {
   value: string;
 }
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index cf60411ffe2..93fd67d608c 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Label } from '@grafana/ui';
+import { PanelOptionsProps, PanelOptionsGroup, Label } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
+import { GaugeOptions } from './types';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index fd3d812f21e..cfce719b5a6 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
+import { PanelProps, NullValueMode } from '@grafana/ui';
 
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import Gauge from 'app/viz/Gauge';
+import { GaugeOptions } from './types';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 3e82ca0e27b..9729416b7e6 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -1,16 +1,17 @@
 import React, { PureComponent } from 'react';
 import {
   BasicGaugeColor,
-  GaugeOptions,
   PanelOptionsProps,
   ThresholdsEditor,
   Threshold,
   PanelOptionsGrid,
   ValueMappingsEditor,
+  ValueMapping,
 } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
+import { GaugeOptions } from './types';
 
 export const defaultProps = {
   options: {
@@ -24,7 +25,7 @@ export const defaultProps = {
     decimals: 0,
     stat: 'avg',
     unit: 'none',
-    mappings: [],
+    valueMappings: [],
     thresholds: [],
   },
 };
@@ -32,7 +33,17 @@ export const defaultProps = {
 export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   static defaultProps = defaultProps;
 
-  onThresholdsChanged = (thresholds: Threshold[]) => this.props.onChange({ ...this.props.options, thresholds });
+  onThresholdsChanged = (thresholds: Threshold[]) =>
+    this.props.onChange({
+      ...this.props.options,
+      thresholds,
+    });
+
+  onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
+    this.props.onChange({
+      ...this.props.options,
+      valueMappings,
+    });
 
   render() {
     const { onChange, options } = this.props;
@@ -44,7 +55,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </PanelOptionsGrid>
 
-        <ValueMappingsEditor onChange={onChange} options={options} />
+        <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
       </>
     );
   }
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index accdb0b03fa..3bc529f0611 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Label, Select } from '@grafana/ui';
+import { PanelOptionsProps, PanelOptionsGroup, Label, Select } from '@grafana/ui';
 
 import UnitPicker from 'app/core/components/Select/UnitPicker';
+import { GaugeOptions } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts
index 139597f9cb0..b698a3389c2 100644
--- a/public/app/plugins/panel/gauge/types.ts
+++ b/public/app/plugins/panel/gauge/types.ts
@@ -1,2 +1,16 @@
+import { Threshold, ValueMapping } from '@grafana/ui';
 
-
+export interface GaugeOptions {
+  baseColor: string;
+  decimals: number;
+  valueMappings: ValueMapping[];
+  maxValue: number;
+  minValue: number;
+  prefix: string;
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+  stat: string;
+  suffix: string;
+  thresholds: Threshold[];
+  unit: string;
+}
diff --git a/public/app/viz/Gauge.test.tsx b/public/app/viz/Gauge.test.tsx
index f0c4a874649..69c7733f44b 100644
--- a/public/app/viz/Gauge.test.tsx
+++ b/public/app/viz/Gauge.test.tsx
@@ -12,7 +12,7 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     baseColor: BasicGaugeColor.Green,
     maxValue: 100,
-    mappings: [],
+    valueMappings: [],
     minValue: 0,
     prefix: '',
     showThresholdMarkers: true,
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index d5e4eb94884..094e630a1c0 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { BasicGaugeColor, Threshold, TimeSeriesVMs, RangeMap, ValueMap, MappingType } from '@grafana/ui';
+import { BasicGaugeColor, Threshold, TimeSeriesVMs, MappingType, ValueMapping } from '@grafana/ui';
 
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
@@ -9,7 +9,7 @@ export interface Props {
   baseColor: string;
   decimals: number;
   height: number;
-  mappings: Array<RangeMap | ValueMap>;
+  valueMappings: ValueMapping[];
   maxValue: number;
   minValue: number;
   prefix: string;
@@ -29,7 +29,7 @@ export class Gauge extends PureComponent<Props> {
   static defaultProps = {
     baseColor: BasicGaugeColor.Green,
     maxValue: 100,
-    mappings: [],
+    valueMappings: [],
     minValue: 0,
     prefix: '',
     showThresholdMarkers: true,
@@ -64,20 +64,17 @@ export class Gauge extends PureComponent<Props> {
       }
     })[0];
 
-    return {
-      rangeMap,
-      valueMap,
-    };
+    return { rangeMap, valueMap };
   }
 
   formatValue(value) {
-    const { decimals, mappings, prefix, suffix, unit } = this.props;
+    const { decimals, valueMappings, prefix, suffix, unit } = this.props;
 
     const formatFunc = kbn.valueFormats[unit];
     const formattedValue = formatFunc(value, decimals);
 
-    if (mappings.length > 0) {
-      const { rangeMap, valueMap } = this.formatWithMappings(mappings, formattedValue);
+    if (valueMappings.length > 0) {
+      const { rangeMap, valueMap } = this.formatWithMappings(valueMappings, formattedValue);
 
       if (valueMap) {
         return `${prefix} ${valueMap} ${suffix}`;
@@ -148,10 +145,7 @@ export class Gauge extends PureComponent<Props> {
           color: index === 0 ? threshold.color : thresholds[index].color,
         };
       }),
-      {
-        value: maxValue,
-        color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor,
-      },
+      { value: maxValue, color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor },
     ];
 
     const options = {
@@ -184,19 +178,14 @@ export class Gauge extends PureComponent<Props> {
             formatter: () => {
               return this.formatValue(value);
             },
-            font: {
-              size: fontSize,
-              family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
-            },
+            font: { size: fontSize, family: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
           },
           show: true,
         },
       },
     };
 
-    const plotSeries = {
-      data: [[0, value]],
-    };
+    const plotSeries = { data: [[0, value]] };
 
     try {
       $.plot(this.canvasElement, [plotSeries], options);

From 8df11e93a1aaca5dda4d2a029b1e8f6e08a9f5a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 16 Jan 2019 12:46:43 +0100
Subject: [PATCH 350/352] Removed snapshot

---
 .../__snapshots__/ValueMappings.test.tsx.snap | 56 -------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap

diff --git a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap b/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
deleted file mode 100644
index 592b3326421..00000000000
--- a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
+++ /dev/null
@@ -1,56 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Component
-  title="Value Mappings"
->
-  <div>
-    <MappingRow
-      key="Ok-0"
-      mapping={
-        Object {
-          "id": 1,
-          "operator": "",
-          "text": "Ok",
-          "type": 1,
-          "value": "20",
-        }
-      }
-      removeMapping={[Function]}
-      updateMapping={[Function]}
-    />
-    <MappingRow
-      key="Meh-1"
-      mapping={
-        Object {
-          "from": "21",
-          "id": 2,
-          "operator": "",
-          "text": "Meh",
-          "to": "30",
-          "type": 2,
-        }
-      }
-      removeMapping={[Function]}
-      updateMapping={[Function]}
-    />
-  </div>
-  <div
-    className="add-mapping-row"
-    onClick={[Function]}
-  >
-    <div
-      className="add-mapping-row-icon"
-    >
-      <i
-        className="fa fa-plus"
-      />
-    </div>
-    <div
-      className="add-mapping-row-label"
-    >
-      Add mapping
-    </div>
-  </div>
-</Component>
-`;

From cc8b450799852028a5cf9cb8ddab030aff502198 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 16 Jan 2019 14:36:01 +0100
Subject: [PATCH 351/352] minor style change

---
 .../components/ThresholdsEditor/_ThresholdsEditor.scss    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index 50c92a6bcc5..f95ecac46a2 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -8,6 +8,12 @@
   height: 70px;
 }
 
+.thresholds-row:first-child > .thresholds-row-color-indicator {
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  overflow: hidden;
+}
+
 .thresholds-row:last-child > .thresholds-row-color-indicator {
   border-bottom-left-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
@@ -33,7 +39,7 @@
 }
 
 .thresholds-row-color-indicator {
-  width: 20px;
+  width: 10px;
 }
 
 .thresholds-row-input {

From 05b82bede3a11a0b4a1034b64800b0ca4a03e172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 16 Jan 2019 15:13:59 +0100
Subject: [PATCH 352/352] More style tweaks to thresholds

---
 .../ThresholdsEditor/_ThresholdsEditor.scss   | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index f95ecac46a2..61278321572 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -51,18 +51,6 @@
   display: flex;
   justify-content: center;
   flex-direction: row;
-  height: 42px;
-}
-
-.thresholds-row-input-inner > div {
-  border-left: 1px solid $input-label-border-color;
-  border-top: 1px solid $input-label-border-color;
-  border-bottom: 1px solid $input-label-border-color;
-}
-
-.thresholds-row-input-inner > *:nth-child(2) {
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
 }
 
 .thresholds-row-input-inner > *:last-child {
@@ -80,9 +68,11 @@
 }
 
 .thresholds-row-input-inner-value > input {
-  height: 100%;
-  padding: 8px 10px;
+  height: $gf-form-input-height;
+  padding: $input-padding-y $input-padding-x;
   width: 150px;
+  border-top: 1px solid $input-label-border-color;
+  border-bottom: 1px solid $input-label-border-color;
 }
 
 .thresholds-row-input-inner-color {
@@ -91,6 +81,7 @@
   align-items: center;
   justify-content: center;
   background-color: $input-bg;
+  border: 1px solid $input-label-border-color;
 }
 
 .thresholds-row-input-inner-color-colorpicker {
@@ -105,8 +96,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 42px;
+  height: $gf-form-input-height;
+  padding: $input-padding-y $input-padding-x;
   width: 42px;
-  background-color: $input-label-border-color;
+  background-color: $input-label-bg;
+  border: 1px solid $input-label-border-color;
   cursor: pointer;
 }