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: replace components with basic stateless select

Browse Source
This commit is contained in:
Erik Sundell 2018-10-31 10:57:24 +01:00
parent 1194da0d04
commit 3c1cf214bc
3 changed files with 9 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,40 +0,0 @@
import React, { SFC } from 'react';
import { getMetricTypesByService } from '../functions';
interface Props {
onMetricTypeChange: any;
selectedService: string;
selectedMetricType: string;
metricDescriptors: any[];
metricTypes: any[];
}
const MetricTypePicker: SFC<Props> = props => {
const filterMetricTypes = () => {
if (!props.selectedService) {
return [];
}
return getMetricTypesByService(props.metricDescriptors, props.selectedService).map(m => ({
value: m.type,
name: m.displayName,
}));
};
return (
<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" value={props.selectedMetricType} onChange={props.onMetricTypeChange}>
{filterMetricTypes().map((qt, i) => (
<option key={i} value={qt.value} ng-if="false">
{qt.name}
</option>
))}
</select>
</div>
</div>
);
};
export default MetricTypePicker;

38
public/app/plugins/datasource/stackdriver/components/ServicePicker.tsx
View File

@ -1,38 +0,0 @@
import React, { SFC } from 'react';
import { extractServicesFromMetricDescriptors } from '../functions';
interface Props {
selectedService: string;
onServiceChange: any;
metricDescriptors: any[];
}
const ServicePicker: SFC<Props> = props => {
const extractServices = () => {
return extractServicesFromMetricDescriptors(props.metricDescriptors).map(m => ({
value: m.service,
name: m.serviceShortName,
}));
};
return (
<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 value={props.selectedService} onChange={props.onServiceChange}>
{extractServices().map((qt, i) => (
<option
key={i}
value={qt.value}
// selected={props.selectedService === qt.value}
>
{qt.name}
</option>
))}
</select>
</div>
</div>
);
};
export default ServicePicker;

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

@ -107,7 +107,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
return [MetricFindQueryTypes.MetricLabels, MetricFindQueryTypes.ResourceLabels].indexOf(queryType) !== -1;
}
getDropdown(queryType) {
getLabelType(queryType) {
switch (queryType) {
case MetricFindQueryTypes.ResourceLabels:
return (
@ -146,7 +146,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
case MetricFindQueryTypes.MetricLabels:
case MetricFindQueryTypes.ResourceLabels:
case MetricFindQueryTypes.ResourceTypes:
const dropdown = this.getDropdown(queryType);
const labelSelect = this.getLabelType(queryType);
return (
<React.Fragment>
{this.state.labels.join(',')}
@ -162,7 +162,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
onValueChange={this.onMetricTypeChange}
label="Metric Types"
/>
{dropdown}
{labelSelect}
</React.Fragment>
);
case MetricFindQueryTypes.Alignerns:
@ -191,23 +191,12 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
render() {
return (
<React.Fragment>
<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"
defaultValue={this.state.type}
required
onChange={this.handleQueryTypeChange}
>
{this.queryTypes.map((qt, i) => (
<option key={i} value={qt.value} ng-if="false">
{qt.name}
</option>
))}
</select>
</div>
</div>
<KeyValueDropdown
value={this.state.type}
options={this.queryTypes}
onValueChange={this.handleQueryTypeChange}
label="Query Types"
/>
{this.renderQueryTypeSwitch(this.state.type)}
</React.Fragment>
);