mirror of https://github.com/grafana/grafana
Erik Sundell
7 years ago
parent
ad55be9865
commit
146aa7abab
@ -0,0 +1,48 @@ |
|||||||
|
import { react2AngularDirective } from 'app/core/utils/react2angular'; |
||||||
|
import { QueryEditor } from './components/QueryEditor'; |
||||||
|
// import { MetricPicker } from './components/MetricPicker';
|
||||||
|
// import { OptionPicker } from './components/OptionPicker';
|
||||||
|
// import { OptionGroupPicker } from './components/OptionGroupPicker';
|
||||||
|
// import { AggregationPicker } from './components/AggregationPicker';
|
||||||
|
|
||||||
|
export function registerAngularDirectives() { |
||||||
|
// react2AngularDirective('optionPicker', OptionPicker, [
|
||||||
|
// 'options',
|
||||||
|
// 'onChange',
|
||||||
|
// 'selected',
|
||||||
|
// 'searchable',
|
||||||
|
// 'className',
|
||||||
|
// 'placeholder',
|
||||||
|
// ]);
|
||||||
|
// react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
|
||||||
|
// 'groups',
|
||||||
|
// 'onChange',
|
||||||
|
// 'selected',
|
||||||
|
// 'searchable',
|
||||||
|
// 'className',
|
||||||
|
// 'placeholder',
|
||||||
|
// ]);
|
||||||
|
// react2AngularDirective('metricPicker', MetricPicker, [
|
||||||
|
// 'target',
|
||||||
|
// ['onChange', { watchDepth: 'reference' }],
|
||||||
|
// 'defaultProject',
|
||||||
|
// 'metricType',
|
||||||
|
// ['templateSrv', { watchDepth: 'reference' }],
|
||||||
|
// ['datasource', { watchDepth: 'reference' }],
|
||||||
|
// ]);
|
||||||
|
// react2AngularDirective('aggregationPicker', AggregationPicker, [
|
||||||
|
// 'valueType',
|
||||||
|
// 'metricKind',
|
||||||
|
// 'onChange',
|
||||||
|
// 'aggregation',
|
||||||
|
// ['templateSrv', { watchDepth: 'reference' }],
|
||||||
|
// ]);
|
||||||
|
|
||||||
|
react2AngularDirective('queryEditor', QueryEditor, [ |
||||||
|
'target', |
||||||
|
'onChange', |
||||||
|
['uiSegmentSrv', { watchDepth: 'reference' }], |
||||||
|
['datasource', { watchDepth: 'reference' }], |
||||||
|
['templateSrv', { watchDepth: 'reference' }], |
||||||
|
]); |
||||||
|
} |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
// import { OptionPicker } from './OptionPicker';
|
||||||
|
import { OptionGroupPicker } from './OptionGroupPicker'; |
||||||
|
// import { alignmentPeriods } from '../constants';
|
||||||
|
// import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from '../functions';
|
||||||
|
import { getAggregationOptionsByMetric } from '../functions'; |
||||||
|
// import kbn from 'app/core/utils/kbn';
|
||||||
|
|
||||||
|
export interface Props { |
||||||
|
onChange: (metricDescriptor) => void; |
||||||
|
templateSrv: any; |
||||||
|
valueType: string; |
||||||
|
metricKind: string; |
||||||
|
aggregation: { |
||||||
|
crossSeriesReducer: string; |
||||||
|
alignmentPeriod: string; |
||||||
|
perSeriesAligner: string; |
||||||
|
groupBys: string[]; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
interface State { |
||||||
|
alignmentPeriods: any[]; |
||||||
|
alignOptions: any[]; |
||||||
|
aggOptions: any[]; |
||||||
|
} |
||||||
|
|
||||||
|
export class AggregationPicker extends React.Component<Props, State> { |
||||||
|
state: State = { |
||||||
|
alignmentPeriods: [], |
||||||
|
alignOptions: [], |
||||||
|
aggOptions: [], |
||||||
|
}; |
||||||
|
|
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.setAggOptions(); |
||||||
|
} |
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps: Props) { |
||||||
|
const { valueType, metricKind, aggregation } = this.props; |
||||||
|
if ( |
||||||
|
nextProps.valueType !== valueType || |
||||||
|
nextProps.metricKind !== metricKind || |
||||||
|
nextProps.aggregation.groupBys !== aggregation.groupBys |
||||||
|
) { |
||||||
|
this.setAggOptions(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setAggOptions() { |
||||||
|
const { valueType, metricKind, aggregation, templateSrv } = this.props; |
||||||
|
let aggregations = getAggregationOptionsByMetric(valueType, metricKind).map(a => ({ |
||||||
|
...a, |
||||||
|
label: a.text, |
||||||
|
})); |
||||||
|
if (!aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))) { |
||||||
|
this.deselectAggregationOption('REDUCE_NONE'); |
||||||
|
} |
||||||
|
|
||||||
|
if (aggregation.groupBys.length > 0) { |
||||||
|
aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE'); |
||||||
|
this.deselectAggregationOption('REDUCE_NONE'); |
||||||
|
} |
||||||
|
this.setState({ |
||||||
|
aggOptions: [ |
||||||
|
this.getTemplateVariablesGroup(), |
||||||
|
{ |
||||||
|
label: 'Aggregations', |
||||||
|
options: aggregations, |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
deselectAggregationOption(notValidOptionValue: string) { |
||||||
|
const aggregations = getAggregationOptionsByMetric(this.props.valueType, this.props.metricKind); |
||||||
|
const newValue = aggregations.find(o => o.value !== notValidOptionValue); |
||||||
|
this.handleAggregationChange(newValue ? newValue.value : ''); |
||||||
|
} |
||||||
|
|
||||||
|
handleAggregationChange(value) { |
||||||
|
this.props.onChange(value); |
||||||
|
// this.$scope.refresh();
|
||||||
|
} |
||||||
|
|
||||||
|
getTemplateVariablesGroup() { |
||||||
|
return { |
||||||
|
label: 'Template Variables', |
||||||
|
options: this.props.templateSrv.variables.map(v => ({ |
||||||
|
label: `$${v.name}`, |
||||||
|
value: `$${v.name}`, |
||||||
|
})), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { aggOptions } = this.state; |
||||||
|
const { aggregation } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<React.Fragment> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<div className="gf-form"> |
||||||
|
<label className="gf-form-label query-keyword width-9">Aggregation</label> |
||||||
|
<div className="gf-form-select-wrapper gf-form-select-wrapper--caret-indent"> |
||||||
|
<OptionGroupPicker |
||||||
|
onChange={value => this.handleAggregationChange(value)} |
||||||
|
selected={aggregation.crossSeriesReducer} |
||||||
|
groups={aggOptions} |
||||||
|
searchable={true} |
||||||
|
placeholder="Select Aggregation" |
||||||
|
className="width-15" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="gf-form gf-form--grow"> |
||||||
|
<label className="gf-form-label gf-form-label--grow"> |
||||||
|
<a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions"> |
||||||
|
<i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" /> |
||||||
|
<i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options |
||||||
|
</a> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</React.Fragment> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,239 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
import Segment from './Segment'; |
||||||
|
import { QueryMeta, Target } from '../types'; |
||||||
|
import { FilterSegments } from '../filter_segments'; |
||||||
|
|
||||||
|
export interface Props { |
||||||
|
onChange: (metricDescriptor) => void; |
||||||
|
templateSrv: any; |
||||||
|
labelData: QueryMeta; |
||||||
|
loading: Promise<any>; |
||||||
|
target: Target; |
||||||
|
uiSegmentSrv: any; |
||||||
|
} |
||||||
|
|
||||||
|
interface State { |
||||||
|
defaultRemoveGroupByValue: string; |
||||||
|
resourceTypeValue: string; |
||||||
|
groupBySegments: any[]; |
||||||
|
// filterSegments: FilterSegments;
|
||||||
|
filterSegments: any; |
||||||
|
removeSegment?: any; |
||||||
|
} |
||||||
|
|
||||||
|
export class Filter extends React.Component<Props, State> { |
||||||
|
state: State = { |
||||||
|
defaultRemoveGroupByValue: '-- remove group by --', |
||||||
|
resourceTypeValue: 'resource.type', |
||||||
|
groupBySegments: [], |
||||||
|
filterSegments: new FilterSegments(this.getFilterKeys.bind(this), this.getFilterValues.bind(this)), |
||||||
|
}; |
||||||
|
|
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.initSegments(false); |
||||||
|
} |
||||||
|
|
||||||
|
shouldComponentUpdate(nextProps) { |
||||||
|
return this.state.filterSegments.filterSegments.length > 0; |
||||||
|
} |
||||||
|
|
||||||
|
initSegments(hideGroupBys: boolean) { |
||||||
|
this.state.filterSegments.init(this.props.uiSegmentSrv); |
||||||
|
if (!hideGroupBys) { |
||||||
|
this.setState({ |
||||||
|
groupBySegments: this.props.target.aggregation.groupBys.map(groupBy => { |
||||||
|
return this.props.uiSegmentSrv.getSegmentForValue(groupBy); |
||||||
|
}), |
||||||
|
}); |
||||||
|
|
||||||
|
this.ensurePlusButton(this.state.groupBySegments); |
||||||
|
} |
||||||
|
|
||||||
|
this.setState({ |
||||||
|
removeSegment: this.props.uiSegmentSrv.newSegment({ fake: true, value: '-- remove group by --' }), |
||||||
|
}); |
||||||
|
|
||||||
|
this.state.filterSegments.buildSegmentModel(this.props.target.filters); |
||||||
|
} |
||||||
|
|
||||||
|
async createLabelKeyElements() { |
||||||
|
await this.props.loading; |
||||||
|
|
||||||
|
let elements = Object.keys(this.props.labelData.metricLabels || {}).map(l => { |
||||||
|
return this.props.uiSegmentSrv.newSegment({ |
||||||
|
value: `metric.label.${l}`, |
||||||
|
expandable: false, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
elements = [ |
||||||
|
...elements, |
||||||
|
...Object.keys(this.props.labelData.resourceLabels || {}).map(l => { |
||||||
|
return this.props.uiSegmentSrv.newSegment({ |
||||||
|
value: `resource.label.${l}`, |
||||||
|
expandable: false, |
||||||
|
}); |
||||||
|
}), |
||||||
|
]; |
||||||
|
|
||||||
|
if (this.props.labelData.resourceTypes && this.props.labelData.resourceTypes.length > 0) { |
||||||
|
elements = [ |
||||||
|
...elements, |
||||||
|
this.props.uiSegmentSrv.newSegment({ |
||||||
|
value: this.state.resourceTypeValue, |
||||||
|
expandable: false, |
||||||
|
}), |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
return elements; |
||||||
|
} |
||||||
|
|
||||||
|
async getFilterKeys(segment, removeText?: string) { |
||||||
|
let elements = await this.createLabelKeyElements(); |
||||||
|
|
||||||
|
if (this.props.target.filters.indexOf(this.state.resourceTypeValue) !== -1) { |
||||||
|
elements = elements.filter(e => e.value !== this.state.resourceTypeValue); |
||||||
|
} |
||||||
|
|
||||||
|
const noValueOrPlusButton = !segment || segment.type === 'plus-button'; |
||||||
|
if (noValueOrPlusButton && elements.length === 0) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
return [ |
||||||
|
...elements, |
||||||
|
this.props.uiSegmentSrv.newSegment({ fake: true, value: removeText || this.state.defaultRemoveGroupByValue }), |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
async getGroupBys(segment) { |
||||||
|
let elements = await this.createLabelKeyElements(); |
||||||
|
|
||||||
|
elements = elements.filter(e => this.props.target.aggregation.groupBys.indexOf(e.value) === -1); |
||||||
|
const noValueOrPlusButton = !segment || segment.type === 'plus-button'; |
||||||
|
if (noValueOrPlusButton && elements.length === 0) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
this.state.removeSegment.value = this.state.defaultRemoveGroupByValue; |
||||||
|
return [...elements, this.state.removeSegment]; |
||||||
|
} |
||||||
|
|
||||||
|
groupByChanged(segment, index) { |
||||||
|
if (segment.value === this.state.removeSegment.value) { |
||||||
|
// this.groupBySegments.splice(index, 1);
|
||||||
|
} else { |
||||||
|
segment.type = 'value'; |
||||||
|
} |
||||||
|
|
||||||
|
const reducer = (memo, seg) => { |
||||||
|
if (!seg.fake) { |
||||||
|
memo.push(seg.value); |
||||||
|
} |
||||||
|
return memo; |
||||||
|
}; |
||||||
|
|
||||||
|
this.props.target.aggregation.groupBys = this.state.groupBySegments.reduce(reducer, []); |
||||||
|
this.ensurePlusButton(this.state.groupBySegments); |
||||||
|
// this.$rootScope.$broadcast('metricTypeChanged');
|
||||||
|
// this.$scope.refresh();
|
||||||
|
} |
||||||
|
|
||||||
|
async getFilters(segment, index) { |
||||||
|
await this.props.loading; |
||||||
|
const hasNoFilterKeys = |
||||||
|
this.props.labelData.metricLabels && Object.keys(this.props.labelData.metricLabels).length === 0; |
||||||
|
return this.state.filterSegments.getFilters(segment, index, hasNoFilterKeys); |
||||||
|
} |
||||||
|
|
||||||
|
getFilterValues(index) { |
||||||
|
const filterKey = this.props.templateSrv.replace(this.state.filterSegments.filterSegments[index - 2].value); |
||||||
|
if ( |
||||||
|
!filterKey || |
||||||
|
!this.props.labelData.metricLabels || |
||||||
|
Object.keys(this.props.labelData.metricLabels).length === 0 |
||||||
|
) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
const shortKey = filterKey.substring(filterKey.indexOf('.label.') + 7); |
||||||
|
|
||||||
|
if (filterKey.startsWith('metric.label.') && this.props.labelData.metricLabels.hasOwnProperty(shortKey)) { |
||||||
|
return this.props.labelData.metricLabels[shortKey]; |
||||||
|
} |
||||||
|
|
||||||
|
if (filterKey.startsWith('resource.label.') && this.props.labelData.resourceLabels.hasOwnProperty(shortKey)) { |
||||||
|
return this.props.labelData.resourceLabels[shortKey]; |
||||||
|
} |
||||||
|
|
||||||
|
if (filterKey === this.state.resourceTypeValue) { |
||||||
|
return this.props.labelData.resourceTypes; |
||||||
|
} |
||||||
|
|
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
filterSegmentUpdated(segment, index) { |
||||||
|
this.props.target.filters = this.state.filterSegments.filterSegmentUpdated(segment, index); |
||||||
|
// this.$scope.refresh();
|
||||||
|
} |
||||||
|
|
||||||
|
ensurePlusButton(segments) { |
||||||
|
const count = segments.length; |
||||||
|
const lastSegment = segments[Math.max(count - 1, 0)]; |
||||||
|
|
||||||
|
if (!lastSegment || lastSegment.type !== 'plus-button') { |
||||||
|
segments.push(this.props.uiSegmentSrv.newPlusButton()); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { filterSegments } = this.state; |
||||||
|
// const { metrifilterSegmentscType } = this.props;
|
||||||
|
|
||||||
|
return ( |
||||||
|
<React.Fragment> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<div className="gf-form"> |
||||||
|
<span className="gf-form-label query-keyword width-9">Filter</span> |
||||||
|
<div className="gf-form"> |
||||||
|
{filterSegments.filterSegments.map((segment, i) => ( |
||||||
|
<Segment |
||||||
|
key={i} |
||||||
|
segment={segment} |
||||||
|
getOptions={() => this.getFilters(segment, i)} |
||||||
|
onChange={segment => this.filterSegmentUpdated(segment, i)} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="gf-form gf-form--grow"> |
||||||
|
<div className="gf-form-label gf-form-label--grow" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/* <div className="gf-form-inline" ng-hide="ctrl.$scope.hideGroupBys"> |
||||||
|
<div className="gf-form"> |
||||||
|
<span className="gf-form-label query-keyword width-9">Group By</span> |
||||||
|
<div className="gf-form" ng-repeat="segment in ctrl.groupBySegments"> |
||||||
|
<Segment |
||||||
|
segment="segment" |
||||||
|
get-options="ctrl.getGroupBys(segment)" |
||||||
|
on-change="ctrl.groupByChanged(segment, $index)" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="gf-form gf-form--grow"> |
||||||
|
<div className="gf-form-label gf-form-label--grow" /> |
||||||
|
</div> |
||||||
|
</div> */} |
||||||
|
</React.Fragment> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,141 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import _ from 'lodash'; |
||||||
|
import appEvents from 'app/core/app_events'; |
||||||
|
|
||||||
|
import { MetricPicker } from './MetricPicker'; |
||||||
|
import { Filter } from './Filter'; |
||||||
|
// import { AggregationPicker } from './AggregationPicker';
|
||||||
|
import { Target, QueryMeta } from '../types'; |
||||||
|
|
||||||
|
export interface Props { |
||||||
|
onChange: (target: Target) => void; |
||||||
|
target: Target; |
||||||
|
datasource: any; |
||||||
|
templateSrv: any; |
||||||
|
uiSegmentSrv: any; |
||||||
|
} |
||||||
|
|
||||||
|
interface State { |
||||||
|
target: Target; |
||||||
|
labelData: QueryMeta; |
||||||
|
loadLabelsPromise: Promise<any>; |
||||||
|
} |
||||||
|
|
||||||
|
const DefaultTarget: Target = { |
||||||
|
defaultProject: 'loading project...', |
||||||
|
metricType: '', |
||||||
|
refId: '', |
||||||
|
service: '', |
||||||
|
unit: '', |
||||||
|
aggregation: { |
||||||
|
crossSeriesReducer: 'REDUCE_MEAN', |
||||||
|
alignmentPeriod: 'stackdriver-auto', |
||||||
|
perSeriesAligner: 'ALIGN_MEAN', |
||||||
|
groupBys: [], |
||||||
|
}, |
||||||
|
filters: [], |
||||||
|
aliasBy: '', |
||||||
|
metricKind: '', |
||||||
|
valueType: '', |
||||||
|
}; |
||||||
|
|
||||||
|
export class QueryEditor extends React.Component<Props, State> { |
||||||
|
state: State = { labelData: null, loadLabelsPromise: null, target: DefaultTarget }; |
||||||
|
|
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this); |
||||||
|
this.handleAggregationChange = this.handleAggregationChange.bind(this); |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.setState({ target: this.props.target }); |
||||||
|
this.getLabels(); |
||||||
|
} |
||||||
|
|
||||||
|
async getLabels() { |
||||||
|
const loadLabelsPromise = new Promise(async resolve => { |
||||||
|
try { |
||||||
|
const { meta } = await this.props.datasource.getLabels(this.props.target.metricType, this.props.target.refId); |
||||||
|
this.setState({ labelData: meta }); |
||||||
|
resolve(); |
||||||
|
} catch (error) { |
||||||
|
appEvents.emit('alert-error', ['Error', 'Error loading metric labels for ' + this.props.target.metricType]); |
||||||
|
resolve(); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.setState({ loadLabelsPromise }); |
||||||
|
} |
||||||
|
|
||||||
|
handleMetricTypeChange({ valueType, metricKind, type, unit }) { |
||||||
|
this.setState({ |
||||||
|
target: { |
||||||
|
...this.state.target, |
||||||
|
...{ |
||||||
|
metricType: type, |
||||||
|
unit, |
||||||
|
valueType, |
||||||
|
metricKind, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
// this.$rootScope.$broadcast('metricTypeChanged');
|
||||||
|
// this.getLabels();
|
||||||
|
// this.refresh();
|
||||||
|
} |
||||||
|
|
||||||
|
handleAggregationChange(crossSeriesReducer) { |
||||||
|
// this.target.aggregation.crossSeriesReducer = crossSeriesReducer;
|
||||||
|
// this.refresh();
|
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { labelData, loadLabelsPromise, target } = this.state; |
||||||
|
const { defaultProject, metricType } = target; |
||||||
|
const { templateSrv, datasource, uiSegmentSrv } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<React.Fragment> |
||||||
|
<MetricPicker |
||||||
|
defaultProject={defaultProject} |
||||||
|
metricType={metricType} |
||||||
|
templateSrv={templateSrv} |
||||||
|
datasource={datasource} |
||||||
|
onChange={value => this.handleMetricTypeChange(value)} |
||||||
|
/> |
||||||
|
<Filter |
||||||
|
onChange={() => console.log('change filter')} |
||||||
|
target={target} |
||||||
|
uiSegmentSrv={uiSegmentSrv} |
||||||
|
labelData={labelData} |
||||||
|
templateSrv={templateSrv} |
||||||
|
loading={loadLabelsPromise} |
||||||
|
/> |
||||||
|
{/* target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData" */} |
||||||
|
{/* <stackdriver-filter |
||||||
|
target="target" |
||||||
|
refresh="target.refresh()" |
||||||
|
loading="target.loadLabelsPromise" |
||||||
|
label-data="target.labelData" |
||||||
|
/> |
||||||
|
<aggregation-picker |
||||||
|
value-type="target.target.valueType" |
||||||
|
metric-kind="target.target.metricKind" |
||||||
|
aggregation="target.target.aggregation" |
||||||
|
alignment-period="target.lastQueryMeta.alignmentPeriod" |
||||||
|
refresh="target.refresh()" |
||||||
|
template-srv="target.templateSrv" |
||||||
|
datasource="target.datasource" |
||||||
|
on-change="target.handleAggregationChange" |
||||||
|
/> |
||||||
|
|
||||||
|
<stackdriver-aggregation |
||||||
|
target="target.target" |
||||||
|
alignment-period="target.lastQueryMeta.alignmentPeriod" |
||||||
|
refresh="target.refresh()" |
||||||
|
/> */} |
||||||
|
</React.Fragment> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
import React, { PureComponent } from 'react'; |
||||||
|
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; |
||||||
|
import 'app/core/directives/metric_segment'; |
||||||
|
|
||||||
|
interface QueryEditorProps { |
||||||
|
segment: any; |
||||||
|
getOptions: () => Promise<any[]>; |
||||||
|
onChange: (segment, index) => void; |
||||||
|
key: number; |
||||||
|
} |
||||||
|
|
||||||
|
export default class Segment extends PureComponent<QueryEditorProps, any> { |
||||||
|
element: any; |
||||||
|
component: AngularComponent; |
||||||
|
|
||||||
|
async componentDidMount() { |
||||||
|
if (!this.element) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { segment, getOptions, onChange } = this.props; |
||||||
|
const loader = getAngularLoader(); |
||||||
|
const template = '<metric-segment> </metric-segment>'; |
||||||
|
|
||||||
|
const scopeProps = { |
||||||
|
segment, |
||||||
|
onChange, |
||||||
|
getOptions, |
||||||
|
debounce: false, |
||||||
|
}; |
||||||
|
|
||||||
|
this.component = loader.load(this.element, scopeProps, template); |
||||||
|
} |
||||||
|
|
||||||
|
componentWillUnmount() { |
||||||
|
if (this.component) { |
||||||
|
this.component.destroy(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return <div ref={element => (this.element = element)} style={{ width: '100%' }} />; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue