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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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/166] 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 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 039/166] 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 040/166] 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 041/166] 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 042/166] 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 043/166] 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 044/166] 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 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 045/166] 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 046/166] 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 047/166] 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 048/166] 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 049/166] 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 050/166] 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 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 051/166] 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 052/166] 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 053/166] 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 054/166] 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 055/166] 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 056/166] 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 057/166] 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 058/166] 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 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 059/166] 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 060/166] 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 061/166] 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 062/166] 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 063/166] 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 064/166] 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 065/166] 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 066/166] 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 067/166] 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 068/166] 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 069/166] 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 070/166] 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 071/166] 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 072/166] 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 073/166] 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 074/166] 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 075/166] 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 076/166] 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 077/166] 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 078/166] 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 079/166] 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 080/166] 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 081/166] 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 082/166] 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 083/166] 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 084/166] 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 085/166] 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 086/166] 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 087/166] 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 088/166] 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 089/166] 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 090/166] 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 091/166] 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 092/166] 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 093/166] 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 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 094/166] 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 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 095/166] 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 096/166] 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 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 097/166] 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 098/166] 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 099/166] 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 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 100/166] 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 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 101/166] 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 102/166] 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 103/166] 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 104/166] 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 105/166] 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 106/166] 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 107/166] 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 108/166] 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 109/166] 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 110/166] 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 111/166] 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 112/166] 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 113/166] 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 114/166] 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 115/166] 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 116/166] 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 117/166] 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 118/166] 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 119/166] 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 120/166] 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 121/166] 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 122/166] 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 123/166] 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 124/166] 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 125/166] 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 126/166] 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 127/166] 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 128/166] 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 129/166] 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 130/166] 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 131/166] 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 132/166] 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 133/166] 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 134/166] 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 135/166] 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 136/166] 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 137/166] 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 138/166] 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 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 139/166] 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 140/166] 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 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 141/166] 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 142/166] 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 143/166] 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 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 144/166] 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 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 145/166] 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 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 146/166] 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 147/166] 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 148/166] 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 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 149/166] 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 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 150/166] 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 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 151/166] 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 152/166] 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 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 153/166] 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 154/166] 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 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 155/166] 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 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 156/166] 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 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 157/166] 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 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 158/166] 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 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 159/166] 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 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 160/166] 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 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 161/166] 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 162/166] 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 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 163/166] 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 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 164/166] 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 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 165/166] 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 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 166/166] 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) {