IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

move template variable logic to component

Browse Source
This commit is contained in:
Erik Sundell 2018-12-18 16:01:12 +01:00
parent d42e39a072
commit 02b745f106
5 changed files with 88 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
View File

@ -9,28 +9,76 @@ export interface Props {
selected: string;
placeholder?: string;
className?: string;
groups?: boolean;
groupName?: string;
templateVariables?: any[];
}
export class StackdriverPicker extends React.Component<Props, any> {
constructor(props) {
super(props);
}
interface State {
options: any[];
}
extractOptions(options) {
return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
}
onChange = item => {
const extractedOptions = this.extractOptions(this.props.options);
const option = extractedOptions.find(option => option.value === item.value);
this.props.onChange(option.value);
export class StackdriverPicker extends React.Component<Props, State> {
static defaultProps = {
templateVariables: [],
options: [],
groupName: 'Options',
};
constructor(props) {
super(props);
this.state = { options: [] };
}
componentDidMount() {
this.setState({ options: this.buildOptions(this.props) });
}
componentWillReceiveProps(nextProps) {
if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
this.setState({ options: this.buildOptions(nextProps) });
}
}
shouldComponentUpdate(nextProps) {
return (
!_.isEqual(nextProps.options, this.props.options) ||
!_.isEqual(nextProps.templateVariables, this.props.templateVariables)
);
}
buildOptions({ templateVariables = [], groupName = '', options }) {
return templateVariables.length > 0
? [
this.getTemplateVariablesGroup(),
{
label: groupName,
expanded: true,
options,
},
]
: options;
}
getTemplateVariablesGroup() {
return {
label: 'Template Variables',
options: this.props.templateVariables.map(v => ({
label: `$${v.name}`,
value: `$${v.name}`,
})),
};
}
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);
}
render() {
const { options, selected, placeholder, className, searchable } = this.props;
const extractedOptions = this.extractOptions(options);
const selectedOption = extractedOptions.find(option => option.value === selected);
const { placeholder, className, searchable, onChange } = this.props;
const { options } = this.state;
const selectedOption = this.getSelectedOption();
return (
<Select
@ -38,7 +86,7 @@ export class StackdriverPicker extends React.Component<Props, any> {
isMulti={false}
isClearable={false}
backspaceRemovesValue={false}
onChange={this.onChange}
onChange={item => onChange(item.value)}
options={options}
autoFocus={false}
isSearchable={searchable}

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

@ -18,7 +18,9 @@
<stackdriver-picker
onChange="ctrl.handleMetricTypeChange"
selected="ctrl.target.metricType"
options="ctrl.getMetricGroups()"
options="ctrl.getMetricsList()"
template-variables="ctrl.templateSrv.variables"
group-name="'Metric Types'"
searchable="true"
placeholder="'Select Metric'"
className="'width-15'"

50
public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
View File

@ -29,16 +29,10 @@ export class StackdriverAggregationCtrl {
constructor(private $scope, private templateSrv) {
this.$scope.ctrl = this;
this.target = $scope.target;
this.alignmentPeriods = [
this.getTemplateVariablesGroup(),
{
label: 'Alignment Periods',
options: alignmentPeriods.map(ap => ({
...ap,
label: ap.text,
})),
},
];
this.alignmentPeriods = alignmentPeriods.map(ap => ({
...ap,
label: ap.text,
}));
this.setAggOptions();
this.setAlignOptions();
const self = this;
@ -52,42 +46,28 @@ export class StackdriverAggregationCtrl {
}
setAlignOptions() {
const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
...a,
label: a.text,
}));
this.alignOptions = [
this.getTemplateVariablesGroup(),
{
label: 'Alignment Options',
options: alignments,
},
];
if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
}
}
setAggOptions() {
let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
...a,
label: a.text,
}));
if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
this.deselectAggregationOption('REDUCE_NONE');
}
if (this.target.aggregation.groupBys.length > 0) {
aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
this.deselectAggregationOption('REDUCE_NONE');
}
this.aggOptions = [
this.getTemplateVariablesGroup(),
{
label: 'Aggregations',
options: aggregations,
},
];
}
handleAlignmentChange(value) {
@ -120,16 +100,6 @@ export class StackdriverAggregationCtrl {
const newValue = aggregations.find(o => o.value !== notValidOptionValue);
this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
}
getTemplateVariablesGroup() {
return {
label: 'Template Variables',
options: this.templateSrv.variables.map(v => ({
label: `$${v.name}`,
value: `$${v.name}`,
})),
};
}
}
coreModule.directive('stackdriverAggregation', StackdriverAggregation);

2
public/app/plugins/datasource/stackdriver/query_ctrl.ts
View File

@ -70,6 +70,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
'searchable',
'className',
'placeholder',
'groupName',
['templateVariables', { watchDepth: 'reference' }],
]);
}

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

@ -32,7 +32,6 @@ export class StackdriverFilterCtrl {
metricDescriptors: any[];
metrics: any[];
metricGroups: any[];
services: any[];
groupBySegments: any[];
filterSegments: FilterSegments;
@ -46,7 +45,6 @@ export class StackdriverFilterCtrl {
this.target = $scope.target;
this.metricDescriptors = [];
this.metrics = [];
this.metricGroups = [];
this.services = [];
this.getCurrentProject()
@ -103,7 +101,6 @@ export class StackdriverFilterCtrl {
this.metricDescriptors = await this.datasource.getMetricTypes(this.target.defaultProject);
this.services = this.getServicesList();
this.metrics = this.getMetricsList();
this.metricGroups = this.getMetricGroups();
return this.metricDescriptors;
} else {
return [];
@ -119,26 +116,6 @@ export class StackdriverFilterCtrl {
return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
}
getMetricGroups() {
return [
this.getTemplateVariablesGroup(),
{
label: 'Metrics',
options: this.getMetricsList(),
},
];
}
getTemplateVariablesGroup() {
return {
label: 'Template Variables',
options: this.templateSrv.variables.map(v => ({
label: `$${v.name}`,
value: `$${v.name}`,
})),
};
}
getMetricsList() {
const metricsByService = this.metricDescriptors.filter(m => m.service === this.target.service).map(m => ({
service: m.service,
@ -183,7 +160,6 @@ export class StackdriverFilterCtrl {
handleServiceChange(service) {
this.target.service = service;
this.metrics = this.getMetricsList();
this.metricGroups = this.getMetricGroups();
this.setMetricType();
this.getLabels();
if (!this.metrics.some(m => m.value === this.target.metricType)) {
@ -194,13 +170,14 @@ export class StackdriverFilterCtrl {
}
setMetricType() {
const { valueType, metricKind, unit } = this.metricDescriptors.find(
m => m.type === this.templateSrv.replace(this.target.metricType)
);
this.target.unit = unit;
this.target.valueType = valueType;
this.target.metricKind = metricKind;
this.$rootScope.$broadcast('metricTypeChanged');
const metric = this.metricDescriptors.find(m => m.type === this.templateSrv.replace(this.target.metricType));
if (metric) {
const { valueType, metricKind, unit } = metric;
this.target.unit = unit;
this.target.valueType = valueType;
this.target.metricKind = metricKind;
this.$rootScope.$broadcast('metricTypeChanged');
}
}
async createLabelKeyElements() {