apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stackdriver: reload all child dropdown and update selected accordingly

Browse Source
pull/14007/head
Erik Sundell 7 years ago
parent c40794c2b9
commit 3af1d74c6a
4 changed files with 116 additions and 71 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 22
      public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts
  2. 1
      public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx
  3. 19
      public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx
  4. 145
      public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx

22
public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts
Unescape View File

@ -56,17 +56,17 @@ export default class StackdriverMetricFindQuery {
}));
}
async handleLabelQuery({ type, metricType, metricLabelKey, resourceLabelKey, resourceTypeKey }) {
async handleLabelQuery({ type, metricType, labelKey }) {
if (!metricType) {
return [];
}
const key = this.getLabelKey({ type, metricLabelKey, resourceLabelKey });
// const key = this.getLabelKey({ type });
const refId = 'handleLabelsQueryType';
const response = await this.datasource.getLabels(metricType, refId);
if (!has(response, `meta.${type}.${key}`)) {
if (!has(response, `meta.${type}.${labelKey}`)) {
return [];
}
return response.meta[type][key].map(this.toFindQueryResult);
return response.meta[type][labelKey].map(this.toFindQueryResult);
}
async handleResourceTypeQuery({ metricType }) {
@ -109,12 +109,22 @@ export default class StackdriverMetricFindQuery {
}
getLabelKey({ type, metricLabelKey, resourceLabelKey }) {
// switch (type) {
// case MetricFindQueryTypes.MetricLabels:
// return metricLabelKey;
// break;
// case MetricFindQueryTypes.ResourceLabels:
// return resourceLabelKey;
// default:
// return '';
// }
// }
switch (type) {
case MetricFindQueryTypes.MetricLabels:
return metricLabelKey;
return 'metricLabels';
break;
case MetricFindQueryTypes.ResourceLabels:
return resourceLabelKey;
return 'resourceLabels';
default:
return '';
}

1
public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx
Unescape View File

@ -6,6 +6,7 @@ interface Props {
selectedService: string;
selectedMetricType: string;
metricDescriptors: any[];
metricTypes: any[];
}
const MetricTypePicker: SFC<Props> = props => {

19
public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx
Unescape View File

@ -14,7 +14,7 @@ const SimpleDropdown: SFC<Props> = props => {
<div className="gf-form-select-wrapper max-width-14">
<select className="gf-form-input" required onChange={props.onValueChange} value={props.value}>
{props.options.map((qt, i) => (
<option key={i} value={qt} ng-if="false">
<option key={i} value={qt}>
{qt}
</option>
))}
@ -24,4 +24,21 @@ const SimpleDropdown: SFC<Props> = props => {
);
};
export const KeyValueDropdown: SFC<Props> = props => {
return (
<div className="gf-form max-width-21">
<span className="gf-form-label width-7">{props.label}</span>
<div className="gf-form-select-wrapper max-width-14">
<select className="gf-form-input" required onChange={props.onValueChange} value={props.value}>
{props.options.map((qt, i) => (
<option key={i} value={qt.value}>
{qt.name}
</option>
))}
</select>
</div>
</div>
);
};
export default SimpleDropdown;

145
public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
Unescape View File

@ -1,10 +1,8 @@
import React, { PureComponent } from 'react';
import ServicePicker from './ServicePicker';
import MetricTypePicker from './MetricTypePicker';
import SimpleDropdown from './SimpleDropdown';
import SimpleDropdown, { KeyValueDropdown } from './SimpleDropdown';
import { TemplateQueryProps } from 'app/types/plugins';
import { getMetricTypesByService, extractServicesFromMetricDescriptors } from '../functions';
import defaultsDeep from 'lodash/defaultsDeep';
import has from 'lodash/has';
import { MetricFindQueryTypes } from '../types';
export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQueryProps, any> {
@ -24,12 +22,10 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
metricDescriptors: [],
service: '',
metricType: '',
metricLabels: [],
resourceLabels: [],
metricLabelKey: '',
resourceLabelKey: '',
// metricLabelValue: '',
// resourceLabelValue: '',
labels: [],
labelKey: '',
metricTypes: [],
services: [],
};
constructor(props: TemplateQueryProps) {
@ -43,45 +39,63 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
async componentDidMount() {
const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName);
this.setState({ metricDescriptors }, () => {
if (this.state.metricType) {
this.loadTimeSeriesData();
}
});
const services = extractServicesFromMetricDescriptors(metricDescriptors).map(m => ({
value: m.service,
name: m.serviceShortName,
}));
const service = this.state.service || services[0].value;
const metricTypes = getMetricTypesByService(metricDescriptors, service).map(m => ({
value: m.type,
name: m.displayName,
}));
const metricType = this.state.metricType || metricTypes[0].value;
this.setState({ services, service, metricTypes, metricType, metricDescriptors });
}
async loadTimeSeriesData() {
console.log('loadTimeSeriesData', this.state.metricType);
const refId = 'StackdriverTemplateQueryComponent';
const response = await this.props.datasource.getLabels(this.state.metricType, refId);
if (this.isLabelQuery(this.state.type) && has(response, `meta.${this.state.type}`)) {
this.setState({ [this.state.type]: Object.keys(response.meta[this.state.type]) });
async handleQueryTypeChange(event) {
let state: any = { type: event.target.value };
if (this.isLabelQuery(event.target.value)) {
const labels = await this.getLabelKeys(this.state.metricType, event.target.value);
const labelKey = labels.indexOf(this.state.labelKey) !== -1 ? this.state.labelKey : labels[0];
state = { ...state, labels, labelKey };
}
this.setState(state);
}
handleQueryTypeChange(event) {
this.setState({ type: event.target.value }, () => {
if (this.isLabelQuery(event.target.value)) {
this.loadTimeSeriesData();
}
});
async onServiceChange(event) {
const metricTypes = getMetricTypesByService(this.state.metricDescriptors, event.target.value).map(m => ({
value: m.type,
name: m.displayName,
}));
const metricTypeExistInArray = metricTypes.find(m => m.value === this.state.metricType);
const metricType = metricTypeExistInArray ? metricTypeExistInArray.value : metricTypes[0].value;
let state: any = { service: event.target.value, metricTypes, metricType };
if (this.isLabelQuery(this.state.type)) {
const labels = await this.getLabelKeys(metricType);
const labelKey = labels.indexOf(this.state.labelKey) !== -1 ? this.state.labelKey : labels[0];
state = { ...state, labelKey, labels: labels };
}
this.setState(state);
}
onServiceChange(event) {
this.setState({ service: event.target.value });
async onMetricTypeChange(event) {
let state: any = { metricType: event.target.value };
if (this.isLabelQuery(this.state.type)) {
const labels = await this.getLabelKeys(event.target.value);
const labelKey = labels.indexOf(this.state.labelKey) !== -1 ? this.state.labelKey : labels[0];
state = { ...state, labels, labelKey };
}
this.setState(state);
}
onMetricTypeChange(event) {
this.setState({ metricType: event.target.value }, () => {
if (this.isLabelQuery(this.state.type)) {
this.loadTimeSeriesData();
}
});
async getLabelKeys(metricType, type = this.state.type) {
const refId = 'StackdriverTemplateQueryComponent';
const response = await this.props.datasource.getLabels(metricType, refId);
return Object.keys(response.meta[type]);
}
onLabelKeyChange(event) {
const key = this.state.type === MetricFindQueryTypes.MetricLabels ? 'metricLabelKey' : 'resourceLabelKey';
this.setState({ [key]: event.target.value });
this.setState({ labelKey: event.target.value });
}
componentDidUpdate() {
@ -98,8 +112,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.ResourceLabels:
return (
<SimpleDropdown
value={this.state.resourceLabelKey}
options={this.state.resourceLabels}
value={this.state.labelKey}
options={this.state.labels}
onValueChange={this.onLabelKeyChange}
label="Resource Labels"
/>
@ -107,8 +121,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.MetricLabels:
return (
<SimpleDropdown
value={this.state.metricLabelKey}
options={this.state.metricLabels}
value={this.state.labelKey}
options={this.state.labels}
onValueChange={this.onLabelKeyChange}
label="Metric Labels"
/>
@ -122,10 +136,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
switch (queryType) {
case MetricFindQueryTypes.MetricTypes:
return (
<ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
<KeyValueDropdown
value={this.state.service}
options={this.state.services}
onValueChange={this.onServiceChange}
label="Services"
/>
);
case MetricFindQueryTypes.MetricLabels:
@ -134,17 +149,18 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
const dropdown = this.getDropdown(queryType);
return (
<React.Fragment>
{this.state.metricLabels.join(',')}
<ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
{this.state.labels.join(',')}
<KeyValueDropdown
value={this.state.service}
options={this.state.services}
onValueChange={this.onServiceChange}
label="Services"
/>
<MetricTypePicker
selectedService={this.state.service}
selectedMetricType={this.state.metricType}
metricDescriptors={this.state.metricDescriptors}
onMetricTypeChange={this.onMetricTypeChange}
<KeyValueDropdown
value={this.state.metricType}
options={this.state.metricTypes}
onValueChange={this.onMetricTypeChange}
label="Metric Types"
/>
{dropdown}
</React.Fragment>
@ -153,16 +169,17 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.Aggregations:
return (
<React.Fragment>
<ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
<KeyValueDropdown
value={this.state.service}
options={this.state.services}
onValueChange={this.onServiceChange}
label="Services"
/>
<MetricTypePicker
selectedMetricType={this.state.metricType}
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onMetricTypeChange={this.onMetricTypeChange}
<KeyValueDropdown
value={this.state.metricType}
options={this.state.metricTypes}
onValueChange={this.onMetricTypeChange}
label="Metric Types"
/>
</React.Fragment>
);

Write Preview
Loading…
Cancel
Save