Skip to content

N
nexpie-grafana-theme
Commit c40794c2 by Erik Sundell
Options

stackdriver: improve default state handling

parent 16c6d79d
Showing with 46 additions and 11 deletions
public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx
...@@ -4,6 +4,7 @@ import { getMetricTypesByService } from '../functions'; ...@@ -4,6 +4,7 @@ import { getMetricTypesByService } from '../functions';
interface Props { interface Props {
onMetricTypeChange: any; onMetricTypeChange: any;
selectedService: string; selectedService: string;
selectedMetricType: string;
metricDescriptors: any[]; metricDescriptors: any[];
} }
...@@ -23,7 +24,7 @@ const MetricTypePicker: SFC<Props> = props => { ...@@ -23,7 +24,7 @@ const MetricTypePicker: SFC<Props> = props => {
<div className="gf-form max-width-21"> <div className="gf-form max-width-21">
<span className="gf-form-label width-7">Metric Types</span> <span className="gf-form-label width-7">Metric Types</span>
<div className="gf-form-select-wrapper max-width-14"> <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) => ( {filterMetricTypes().map((qt, i) => (
<option key={i} value={qt.value} ng-if="false"> <option key={i} value={qt.value} ng-if="false">
{qt.name} {qt.name}
......
public/app/plugins/datasource/stackdriver/components/ServicePicker.tsx
...@@ -2,6 +2,7 @@ import React, { SFC } from 'react'; ...@@ -2,6 +2,7 @@ import React, { SFC } from 'react';
import { extractServicesFromMetricDescriptors } from '../functions'; import { extractServicesFromMetricDescriptors } from '../functions';
interface Props { interface Props {
selectedService: string;
onServiceChange: any; onServiceChange: any;
metricDescriptors: any[]; metricDescriptors: any[];
} }
...@@ -18,9 +19,13 @@ const ServicePicker: SFC<Props> = props => { ...@@ -18,9 +19,13 @@ const ServicePicker: SFC<Props> = props => {
<div className="gf-form max-width-21"> <div className="gf-form max-width-21">
<span className="gf-form-label width-7">Service</span> <span className="gf-form-label width-7">Service</span>
<div className="gf-form-select-wrapper max-width-14"> <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) => ( {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} {qt.name}
</option> </option>
))} ))}
......
public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx
...@@ -12,7 +12,7 @@ const SimpleDropdown: SFC<Props> = props => { ...@@ -12,7 +12,7 @@ const SimpleDropdown: SFC<Props> = props => {
<div className="gf-form max-width-21"> <div className="gf-form max-width-21">
<span className="gf-form-label width-7">{props.label}</span> <span className="gf-form-label width-7">{props.label}</span>
<div className="gf-form-select-wrapper max-width-14"> <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) => ( {props.options.map((qt, i) => (
<option key={i} value={qt} ng-if="false"> <option key={i} value={qt} ng-if="false">
{qt} {qt}
......
public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
...@@ -28,6 +28,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -28,6 +28,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
resourceLabels: [], resourceLabels: [],
metricLabelKey: '', metricLabelKey: '',
resourceLabelKey: '', resourceLabelKey: '',
// metricLabelValue: '',
// resourceLabelValue: '',
}; };
constructor(props: TemplateQueryProps) { constructor(props: TemplateQueryProps) {
...@@ -41,10 +43,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -41,10 +43,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
async componentDidMount() { async componentDidMount() {
const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName); 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() { async loadTimeSeriesData() {
console.log('loadTimeSeriesData', this.state.metricType);
const refId = 'StackdriverTemplateQueryComponent'; const refId = 'StackdriverTemplateQueryComponent';
const response = await this.props.datasource.getLabels(this.state.metricType, refId); const response = await this.props.datasource.getLabels(this.state.metricType, refId);
if (this.isLabelQuery(this.state.type) && has(response, `meta.${this.state.type}`)) { if (this.isLabelQuery(this.state.type) && has(response, `meta.${this.state.type}`)) {
...@@ -53,10 +60,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -53,10 +60,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
} }
handleQueryTypeChange(event) { handleQueryTypeChange(event) {
this.setState({ type: event.target.value }); this.setState({ type: event.target.value }, () => {
if (this.isLabelQuery(event.target.value)) { if (this.isLabelQuery(event.target.value)) {
this.loadTimeSeriesData(); this.loadTimeSeriesData();
} }
});
} }
onServiceChange(event) { onServiceChange(event) {
...@@ -64,10 +72,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -64,10 +72,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
} }
onMetricTypeChange(event) { onMetricTypeChange(event) {
this.setState({ metricType: event.target.value }); this.setState({ metricType: event.target.value }, () => {
if (this.isLabelQuery(this.state.type)) { if (this.isLabelQuery(this.state.type)) {
this.loadTimeSeriesData(); this.loadTimeSeriesData();
} }
});
} }
onLabelKeyChange(event) { onLabelKeyChange(event) {
...@@ -113,7 +122,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -113,7 +122,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
switch (queryType) { switch (queryType) {
case MetricFindQueryTypes.MetricTypes: case MetricFindQueryTypes.MetricTypes:
return ( 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.MetricLabels:
case MetricFindQueryTypes.ResourceLabels: case MetricFindQueryTypes.ResourceLabels:
...@@ -121,9 +134,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -121,9 +134,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
const dropdown = this.getDropdown(queryType); const dropdown = this.getDropdown(queryType);
return ( return (
<React.Fragment> <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 <MetricTypePicker
selectedService={this.state.service} selectedService={this.state.service}
selectedMetricType={this.state.metricType}
metricDescriptors={this.state.metricDescriptors} metricDescriptors={this.state.metricDescriptors}
onMetricTypeChange={this.onMetricTypeChange} onMetricTypeChange={this.onMetricTypeChange}
/> />
...@@ -134,8 +153,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -134,8 +153,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.Aggregations: case MetricFindQueryTypes.Aggregations:
return ( return (
<React.Fragment> <React.Fragment>
<ServicePicker metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} /> <ServicePicker
selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors}
onServiceChange={this.onServiceChange}
/>
<MetricTypePicker <MetricTypePicker
selectedMetricType={this.state.metricType}
selectedService={this.state.service} selectedService={this.state.service}
metricDescriptors={this.state.metricDescriptors} metricDescriptors={this.state.metricDescriptors}
onMetricTypeChange={this.onMetricTypeChange} onMetricTypeChange={this.onMetricTypeChange}
...@@ -153,7 +177,12 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue ...@@ -153,7 +177,12 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
<div className="gf-form max-width-21"> <div className="gf-form max-width-21">
<span className="gf-form-label width-7">Query Type</span> <span className="gf-form-label width-7">Query Type</span>
<div className="gf-form-select-wrapper max-width-14"> <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) => ( {this.queryTypes.map((qt, i) => (
<option key={i} value={qt.value} ng-if="false"> <option key={i} value={qt.value} ng-if="false">
{qt.name} {qt.name}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment