root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 80 Packages Projects Releases Wiki Activity

provide angular directive scope props correctly

This commit is contained in:
Erik Sundell 2019-01-10 12:02:38 +01:00
parent 23996b364e
commit 5fed50713d
3 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/plugins/datasource/stackdriver/components/Filter.tsx
View File

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

2
public/app/plugins/datasource/stackdriver/partials/query.filter.html
View File

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

43
public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
View File

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