Stackdriver: Support meta labels (#21373)

* Rewrite angular segments for filter and group by in react

* wip: refactoring

* Update metric find queries

* Remove old maps used to create labels - use one map for all types instead

* Use value as label (again) for filters ang groupby

* Remove old filter

* Remove not used code

* Fixes after pr feedback

* Fix broken tests and add new metadata tests

* Add index file to make imports cleaner

* Cleanup. Remove old angular filter code

* Fix broken tests

* Use type switching instead of if statements

* Use globals for regex

* Updates after pr feedback

* Make sure it's possible to filter using the same key multiple times

* Replace metric select with segment component

* Pass template vars as props

* Refactor meta labels code

* Reorder template variables

* Fix broken tests

* Reset metric value when changing service

* Fix lint issue.

* Make tests independant of element order

* Include kubernetes.io in regex

* Add instruction in help section

public/app/plugins/datasource/stackdriver/components/Aggregations.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { MetricSelect } from 'app/core/components/Select/MetricSelect';
+import { SelectableValue } from '@grafana/data';
+import { Segment } from '@grafana/ui';
 import { getAggregationOptionsByMetric } from '../functions';
-import { TemplateSrv } from 'app/features/templating/template_srv';
 import { ValueTypes, MetricKind } from '../constants';
 
 export interface Props {
   onChange: (metricDescriptor: any) => void;
-  templateSrv: TemplateSrv;
   metricDescriptor: {
     valueType: string;
     metricKind: string;
@@ -16,6 +15,7 @@ export interface Props {
   crossSeriesReducer: string;
   groupBys: string[];
   children?: (renderProps: any) => JSX.Element;
+  templateVariableOptions: Array<SelectableValue<string>>;
 }
 
 export interface State {
@@ -40,19 +40,13 @@ export class Aggregations extends React.Component<Props, State> {
   setAggOptions({ metricDescriptor }: Props) {
     let aggOptions: any[] = [];
     if (metricDescriptor) {
-      aggOptions = [
-        {
-          label: 'Aggregations',
-          expanded: true,
-          options: getAggregationOptionsByMetric(
-            metricDescriptor.valueType as ValueTypes,
-            metricDescriptor.metricKind as MetricKind
-          ).map(a => ({
-            ...a,
-            label: a.text,
-          })),
-        },
-      ];
+      aggOptions = getAggregationOptionsByMetric(
+        metricDescriptor.valueType as ValueTypes,
+        metricDescriptor.metricKind as MetricKind
+      ).map(a => ({
+        ...a,
+        label: a.text,
+      }));
     }
     this.setState({ aggOptions });
   }
@@ -65,22 +59,28 @@ export class Aggregations extends React.Component<Props, State> {
 
   render() {
     const { displayAdvancedOptions, aggOptions } = this.state;
-    const { templateSrv, onChange, crossSeriesReducer } = this.props;
+    const { templateVariableOptions, onChange, crossSeriesReducer } = this.props;
 
     return (
       <>
         <div className="gf-form-inline">
-          <div className="gf-form">
-            <label className="gf-form-label query-keyword width-9">Aggregation</label>
-            <MetricSelect
-              onChange={onChange}
-              value={crossSeriesReducer}
-              variables={templateSrv.variables}
-              options={aggOptions}
-              placeholder="Select Reducer"
-              className="width-15"
-            />
-          </div>
+          <label className="gf-form-label query-keyword width-9">Aggregation</label>
+          <Segment
+            onChange={({ value }) => onChange(value)}
+            value={[...aggOptions, ...templateVariableOptions].find(s => s.value === crossSeriesReducer)}
+            options={[
+              {
+                label: 'Template Variables',
+                options: templateVariableOptions,
+              },
+              {
+                label: 'Aggregations',
+                expanded: true,
+                options: aggOptions,
+              },
+            ]}
+            placeholder="Select Reducer"
+          ></Segment>
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
               <a onClick={this.onToggleDisplayAdvanced}>