rename selected prop

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

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'"

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'"

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',