add alias by component

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>
+    );
+  }
+}

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>

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>