root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 93 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'; import '../query_filter_ctrl';
export interface Props { export interface Props {
filtersChanged: (filters) => void; filtersChanged: (filters: string[]) => void;
groupBysChanged?: (groupBys) => void; groupBysChanged?: (groupBys: string[]) => void;
metricType: string; metricType: string;
templateSrv: any; templateSrv: any;
groupBys?: string[]; groupBys?: string[];
@ -23,7 +23,7 @@ interface State {
loading: Promise<any>; loading: Promise<any>;
} }
const defaultLabelData = { const labelData = {
metricLabels: {}, metricLabels: {},
resourceLabels: {}, resourceLabels: {},
resourceTypes: [], resourceTypes: [],
@ -40,18 +40,26 @@ export class Filter extends React.Component<Props, State> {
const { groupBys, filters, filtersChanged, groupBysChanged, hideGroupBys } = this.props; const { groupBys, filters, filtersChanged, groupBysChanged, hideGroupBys } = this.props;
const loader = getAngularLoader(); const loader = getAngularLoader();
const template = '<stackdriver-filter> </stackdriver-filter>';
const scopeProps = { const scopeProps = {
loading: null, loading: null,
labelData: null, labelData,
groupBys, groupBys,
filters, filters,
filtersChanged, filtersChanged,
groupBysChanged, groupBysChanged,
hideGroupBys, 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); 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 => { return new Promise(async resolve => {
try { try {
if (!this.props.metricType) { if (!this.props.metricType) {
scope.labelData = defaultLabelData; scope.labelData = labelData;
} else { } else {
const { meta } = await this.props.datasource.getLabels(this.props.metricType, this.props.refId); const { meta } = await this.props.datasource.getLabels(this.props.metricType, this.props.refId);
scope.labelData = meta; scope.labelData = meta;
@ -85,7 +93,7 @@ export class Filter extends React.Component<Props, State> {
resolve(); resolve();
} catch (error) { } catch (error) {
appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.metricType]); appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.metricType]);
scope.labelData = defaultLabelData; scope.labelData = labelData;
resolve(); resolve();
} }
}); });

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

@ -11,7 +11,7 @@
</div> </div>
<div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div> <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" ng-hide="ctrl.$scope.hideGroupBys"> <div class="gf-form-inline" ng-hide="ctrl.hideGroupBys">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label query-keyword width-9">Group By</span> <span class="gf-form-label query-keyword width-9">Group By</span>
<div class="gf-form" ng-repeat="segment in ctrl.groupBySegments"> <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', templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.filter.html',
controller: 'StackdriverFilterCtrl', controller: 'StackdriverFilterCtrl',
controllerAs: 'ctrl', controllerAs: 'ctrl',
bindToController: true,
restrict: 'E', restrict: 'E',
scope: { scope: {
labelData: '<', labelData: '<',
@ -32,14 +33,14 @@ export class StackdriverFilterCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $scope, private uiSegmentSrv, private templateSrv) { 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) { initSegments(hideGroupBys: boolean) {
if (!hideGroupBys) { if (!hideGroupBys) {
this.groupBySegments = this.$scope.groupBys.map(groupBy => { this.groupBySegments = this.$scope.ctrl.groupBys.map(groupBy => {
return this.uiSegmentSrv.getSegmentForValue(groupBy); return this.uiSegmentSrv.getSegmentForValue(groupBy);
}); });
this.ensurePlusButton(this.groupBySegments); this.ensurePlusButton(this.groupBySegments);
@ -49,7 +50,7 @@ export class StackdriverFilterCtrl {
this.filterSegments = new FilterSegments( this.filterSegments = new FilterSegments(
this.uiSegmentSrv, this.uiSegmentSrv,
this.$scope.filters, this.$scope.ctrl.filters,
this.getFilterKeys.bind(this), this.getFilterKeys.bind(this),
this.getFilterValues.bind(this) this.getFilterValues.bind(this)
); );
@ -57,9 +58,9 @@ export class StackdriverFilterCtrl {
} }
async createLabelKeyElements() { 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({ return this.uiSegmentSrv.newSegment({
value: `metric.label.${l}`, value: `metric.label.${l}`,
expandable: false, expandable: false,
@ -68,7 +69,7 @@ export class StackdriverFilterCtrl {
elements = [ elements = [
...elements, ...elements,
...Object.keys(this.$scope.labelData.resourceLabels || {}).map(l => { ...Object.keys(this.$scope.ctrl.labelData.resourceLabels || {}).map(l => {
return this.uiSegmentSrv.newSegment({ return this.uiSegmentSrv.newSegment({
value: `resource.label.${l}`, value: `resource.label.${l}`,
expandable: false, 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 = [
...elements, ...elements,
this.uiSegmentSrv.newSegment({ this.uiSegmentSrv.newSegment({
@ -92,7 +93,7 @@ export class StackdriverFilterCtrl {
async getFilterKeys(segment, removeText: string) { async getFilterKeys(segment, removeText: string) {
let elements = await this.createLabelKeyElements(); 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); elements = elements.filter(e => e.value !== this.resourceTypeValue);
} }
@ -112,7 +113,7 @@ export class StackdriverFilterCtrl {
async getGroupBys(segment) { async getGroupBys(segment) {
let elements = await this.createLabelKeyElements(); 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'; const noValueOrPlusButton = !segment || segment.type === 'plus-button';
if (noValueOrPlusButton && elements.length === 0) { if (noValueOrPlusButton && elements.length === 0) {
return []; return [];
@ -137,14 +138,14 @@ export class StackdriverFilterCtrl {
}; };
const groupBys = this.groupBySegments.reduce(reducer, []); const groupBys = this.groupBySegments.reduce(reducer, []);
this.$scope.groupBysChanged(groupBys); this.$scope.ctrl.groupBysChanged()(groupBys);
this.ensurePlusButton(this.groupBySegments); this.ensurePlusButton(this.groupBySegments);
} }
async getFilters(segment, index) { async getFilters(segment, index) {
await this.$scope.loading; await this.$scope.ctrl.loading;
const hasNoFilterKeys = 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); 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); const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value);
if ( if (
!filterKey || !filterKey ||
!this.$scope.labelData.metricLabels || !this.$scope.ctrl.labelData.metricLabels ||
Object.keys(this.$scope.labelData.metricLabels).length === 0 Object.keys(this.$scope.ctrl.labelData.metricLabels).length === 0
) { ) {
return []; return [];
} }
const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7); const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7);
if (filterKey.startsWith('metric.label.') && this.$scope.labelData.metricLabels.hasOwnProperty(shortKey)) { if (filterKey.startsWith('metric.label.') && this.$scope.ctrl.labelData.metricLabels.hasOwnProperty(shortKey)) {
return this.$scope.labelData.metricLabels[shortKey]; return this.$scope.ctrl.labelData.metricLabels[shortKey];
} }
if (filterKey.startsWith('resource.label.') && this.$scope.labelData.resourceLabels.hasOwnProperty(shortKey)) { if (filterKey.startsWith('resource.label.') && this.$scope.ctrl.labelData.resourceLabels.hasOwnProperty(shortKey)) {
return this.$scope.labelData.resourceLabels[shortKey]; return this.$scope.ctrl.labelData.resourceLabels[shortKey];
} }
if (filterKey === this.resourceTypeValue) { if (filterKey === this.resourceTypeValue) {
return this.$scope.labelData.resourceTypes; return this.$scope.ctrl.labelData.resourceTypes;
} }
return []; return [];
@ -178,7 +179,7 @@ export class StackdriverFilterCtrl {
filterSegmentUpdated(segment, index) { filterSegmentUpdated(segment, index) {
const filters = this.filterSegments.filterSegmentUpdated(segment, index); const filters = this.filterSegments.filterSegmentUpdated(segment, index);
if (!filters.some(f => f === DefaultFilterValue)) { if (!filters.some(f => f === DefaultFilterValue)) {
this.$scope.filtersChanged(filters); this.$scope.ctrl.filtersChanged()(filters);
} }
} }