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 { label, onValueChange, value, options } = props;
return (
<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">
<select className="gf-form-input" required onChange={props.onValueChange} value={props.value}>
{props.options.map((qt, i) => (
<option key={i} value={qt}>
{qt}
</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}
<select className="gf-form-input" required onChange={onValueChange} value={value}>
{options.map(({ value, name }, i) => (
<option key={i} value={value}>
{name}
</option>
))}
</select>

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

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