remove not used stuff

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} />

public/app/plugins/datasource/stackdriver/partials/query.aggregation.html

@@ -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>

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>

public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts

@@ -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);

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) {

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;