provide angular directive scope props correctly

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

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

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