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

stackdriver: refactor dropdown component

Browse Source
This commit is contained in:
Erik Sundell 2018-10-31 11:16:49 +01:00
parent 3c1cf214bc
commit 3c5f8325f5
2 changed files with 15 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,31 +8,15 @@ interface Props {
} }
const SimpleDropdown: SFC<Props> = props => { const SimpleDropdown: SFC<Props> = props => {
const { label, onValueChange, value, options } = props;
return ( return (
<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">{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} value={props.value}> <select className="gf-form-input" required onChange={onValueChange} value={value}>
{props.options.map((qt, i) => ( {options.map(({ value, name }, i) => (
<option key={i} value={qt}> <option key={i} value={value}>
{qt} {name}
</option>
))}
</select>
</div>
</div>
);
};
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> </option>
))} ))}
</select> </select>

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

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import SimpleDropdown, { KeyValueDropdown } from './SimpleDropdown'; import SimpleDropdown from './SimpleDropdown';
import { TemplateQueryProps } from 'app/types/plugins'; import { TemplateQueryProps } from 'app/types/plugins';
import { getMetricTypesByService, extractServicesFromMetricDescriptors } from '../functions'; import { getMetricTypesByService, extractServicesFromMetricDescriptors } from '../functions';
import defaultsDeep from 'lodash/defaultsDeep'; import defaultsDeep from 'lodash/defaultsDeep';
@ -113,7 +113,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
return ( return (
<SimpleDropdown <SimpleDropdown
value={this.state.labelKey} value={this.state.labelKey}
options={this.state.labels} options={this.state.labels.map(l => ({ value: l, name: l }))}
onValueChange={this.onLabelKeyChange} onValueChange={this.onLabelKeyChange}
label="Resource Labels" label="Resource Labels"
/> />
@ -122,7 +122,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
return ( return (
<SimpleDropdown <SimpleDropdown
value={this.state.labelKey} value={this.state.labelKey}
options={this.state.labels} options={this.state.labels.map(l => ({ value: l, name: l }))}
onValueChange={this.onLabelKeyChange} onValueChange={this.onLabelKeyChange}
label="Metric Labels" label="Metric Labels"
/> />
@ -136,7 +136,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
switch (queryType) { switch (queryType) {
case MetricFindQueryTypes.MetricTypes: case MetricFindQueryTypes.MetricTypes:
return ( return (
<KeyValueDropdown <SimpleDropdown
value={this.state.service} value={this.state.service}
options={this.state.services} options={this.state.services}
onValueChange={this.onServiceChange} onValueChange={this.onServiceChange}
@ -150,13 +150,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
return ( return (
<React.Fragment> <React.Fragment>
{this.state.labels.join(',')} {this.state.labels.join(',')}
<KeyValueDropdown <SimpleDropdown
value={this.state.service} value={this.state.service}
options={this.state.services} options={this.state.services}
onValueChange={this.onServiceChange} onValueChange={this.onServiceChange}
label="Services" label="Services"
/> />
<KeyValueDropdown <SimpleDropdown
value={this.state.metricType} value={this.state.metricType}
options={this.state.metricTypes} options={this.state.metricTypes}
onValueChange={this.onMetricTypeChange} onValueChange={this.onMetricTypeChange}
@ -169,13 +169,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.Aggregations: case MetricFindQueryTypes.Aggregations:
return ( return (
<React.Fragment> <React.Fragment>
<KeyValueDropdown <SimpleDropdown
value={this.state.service} value={this.state.service}
options={this.state.services} options={this.state.services}
onValueChange={this.onServiceChange} onValueChange={this.onServiceChange}
label="Services" label="Services"
/> />
<KeyValueDropdown <SimpleDropdown
value={this.state.metricType} value={this.state.metricType}
options={this.state.metricTypes} options={this.state.metricTypes}
onValueChange={this.onMetricTypeChange} onValueChange={this.onMetricTypeChange}
@ -191,7 +191,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<KeyValueDropdown <SimpleDropdown
value={this.state.type} value={this.state.type}
options={this.queryTypes} options={this.queryTypes}
onValueChange={this.handleQueryTypeChange} onValueChange={this.handleQueryTypeChange}