IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-09-05 04:40:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

stackdriver: improve default state handling

Browse Source
This commit is contained in:
Erik Sundell
2018-11-09 13:55:10 +01:00
parent 16c6d79dd6
commit c40794c2b9
4 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { getMetricTypesByService } from '../functions';
interface Props {
onMetricTypeChange: any;
selectedService: string;
selectedMetricType: string;
metricDescriptors: any[];
}
@@ -23,7 +24,7 @@ const MetricTypePicker: SFC<Props> = props => {
<div className="gf-form max-width-21">
<span className="gf-form-label width-7">Metric Types</span>
<div className="gf-form-select-wrapper max-width-14">
<select className="gf-form-input" required onChange={props.onMetricTypeChange}>
<select className="gf-form-input" value={props.selectedMetricType} onChange={props.onMetricTypeChange}>
{filterMetricTypes().map((qt, i) => (
<option key={i} value={qt.value} ng-if="false">
{qt.name}
public/app/plugins/datasource/stackdriver/components/ServicePicker.tsx
+7 -2
View File
@@ -2,6 +2,7 @@ import React, { SFC } from 'react';
import { extractServicesFromMetricDescriptors } from '../functions';
interface Props {
selectedService: string;
onServiceChange: any;
metricDescriptors: any[];
}
@@ -18,9 +19,13 @@ const ServicePicker: SFC<Props> = props => {
<div className="gf-form max-width-21">
<span className="gf-form-label width-7">Service</span>
<div className="gf-form-select-wrapper max-width-14">
<select className="gf-form-input" required onChange={props.onServiceChange}>
<select className="gf-form-input" required value={props.selectedService} onChange={props.onServiceChange}>
{extractServices().map((qt, i) => (
<option key={i} value={qt.value} ng-if="false">
<option
key={i}
value={qt.value}
// selected={props.selectedService === qt.value}
>
{qt.name}
</option>
))}
public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const SimpleDropdown: SFC<Props> = props => {
<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}>
<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">
{qt}
public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
+42 -13
View File
@@ -28,6 +28,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
resourceLabels: [],
metricLabelKey: '',
resourceLabelKey: '',
// metricLabelValue: '',
// resourceLabelValue: '',
};
constructor(props: TemplateQueryProps) {
@@ -41,10 +43,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
async componentDidMount() {
const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName);
this.setState({ metricDescriptors });
this.setState({ metricDescriptors }, () => {
if (this.state.metricType) {
this.loadTimeSeriesData();
}
});
}
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}`)) {
@@ -53,10 +60,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
}
handleQueryTypeChange(event) {
this.setState({ type: event.target.value });
if (this.isLabelQuery(event.target.value)) {
this.loadTimeSeriesData();
}
this.setState({ type: event.target.value }, () => {
if (this.isLabelQuery(event.target.value)) {
this.loadTimeSeriesData();
}
});
}
onServiceChange(event) {
@@ -64,10 +72,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
}
onMetricTypeChange(event) {
this.setState({ metricType: event.target.value });
if (this.isLabelQuery(this.state.type)) {
this.loadTimeSeriesData();
}
this.setState({ metricType: event.target.value }, () => {
if (this.isLabelQuery(this.state.type)) {
this.loadTimeSeriesData();
}
});
}
onLabelKeyChange(event) {
@@ -113,7 +122,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
switch (queryType) {
case MetricFindQueryTypes.MetricTypes:
return (
<ServicePicker metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
<ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
/>
);
case MetricFindQueryTypes.MetricLabels:
case MetricFindQueryTypes.ResourceLabels:
@@ -121,9 +134,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
const dropdown = this.getDropdown(queryType);
return (
<React.Fragment>
<ServicePicker metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
{this.state.metricLabels.join(',')}
<ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
/>
<MetricTypePicker
selectedService={this.state.service}
selectedMetricType={this.state.metricType}
metricDescriptors={this.state.metricDescriptors}
onMetricTypeChange={this.onMetricTypeChange}
/>
@@ -134,8 +153,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.Aggregations:
return (
<React.Fragment>
<ServicePicker metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
<ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
/>
<MetricTypePicker
selectedMetricType={this.state.metricType}
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onMetricTypeChange={this.onMetricTypeChange}
@@ -153,7 +177,12 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
<div className="gf-form max-width-21">
<span className="gf-form-label width-7">Query Type</span>
<div className="gf-form-select-wrapper max-width-14">
<select className="gf-form-input" required onChange={this.handleQueryTypeChange}>
<select
className="gf-form-input"
defaultValue={this.state.type}
required
onChange={this.handleQueryTypeChange}
>
{this.queryTypes.map((qt, i) => (
<option key={i} value={qt.value} ng-if="false">
{qt.name}