IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 00:08:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Replace native select with grafana ui select (#31030)

Browse Source 
* use react select instead of simple select

* cleanup

* rename selectable value prop

* remove not used import
This commit is contained in:
Erik Sundell
2021-02-10 08:50:47 +01:00
committed by GitHub
parent b287b5be42
commit 9679b15ef9
6 changed files with 128 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
+30 -1
View File
@@ -1,5 +1,6 @@
import React, { InputHTMLAttributes, FunctionComponent } from 'react'; import React, { InputHTMLAttributes, FunctionComponent } from 'react';
import { InlineFormLabel } from '@grafana/ui'; import { InlineFormLabel, Select, InlineField } from '@grafana/ui';
import { SelectableValue } from '@grafana/data';
export interface Props extends InputHTMLAttributes<HTMLInputElement> { export interface Props extends InputHTMLAttributes<HTMLInputElement> {
label: string; label: string;
@@ -26,3 +27,31 @@ export const QueryInlineField: FunctionComponent<Props> = ({ ...props }) => {
</div> </div>
); );
}; };
interface VariableQueryFieldProps {
onChange: (value: string) => void;
options: SelectableValue[];
value: string;
label: string;
allowCustomValue?: boolean;
}
export const VariableQueryField: FunctionComponent<VariableQueryFieldProps> = ({
label,
onChange,
value,
options,
allowCustomValue = false,
}) => {
return (
<InlineField label={label} labelWidth={20}>
<Select
width={25}
allowCustomValue={allowCustomValue}
value={value}
onChange={({ value }) => onChange(value!)}
options={options}
/>
</InlineField>
);
};
public/app/plugins/datasource/cloud-monitoring/components/SimpleSelect.tsx
-26
View File
@@ -1,26 +0,0 @@
import React, { ChangeEvent, FC } from 'react';
interface Props {
onValueChange: (e: ChangeEvent<HTMLSelectElement>) => void;
options: Array<{ value: string; name: string }>;
value: string;
label: string;
}
export const SimpleSelect: FC<Props> = (props) => {
const { label, onValueChange, value, options } = props;
return (
<div className="gf-form max-width-21">
<span className="gf-form-label width-10 query-keyword">{label}</span>
<div className="gf-form-select-wrapper max-width-12">
<select className="gf-form-input" required onChange={onValueChange} value={value}>
{options.map(({ value, name }, i) => (
<option key={i} value={value}>
{name}
</option>
))}
</select>
</div>
</div>
);
};
public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
+89 -73
View File
@@ -1,5 +1,9 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { SimpleSelect } from './';
import { getTemplateSrv } from '@grafana/runtime';
import { QueryEditorProps } from '@grafana/data';
import { VariableQueryField } from './';
import { extractServicesFromMetricDescriptors, getLabelKeys, getMetricTypes } from '../functions'; import { extractServicesFromMetricDescriptors, getLabelKeys, getMetricTypes } from '../functions';
import { import {
CloudMonitoringOptions, CloudMonitoringOptions,
@@ -10,8 +14,6 @@ import {
VariableQueryData, VariableQueryData,
} from '../types'; } from '../types';
import CloudMonitoringDatasource from '../datasource'; import CloudMonitoringDatasource from '../datasource';
import { getTemplateSrv } from '@grafana/runtime';
import { QueryEditorProps } from '@grafana/data';
export type Props = QueryEditorProps< export type Props = QueryEditorProps<
CloudMonitoringDatasource, CloudMonitoringDatasource,
@@ -21,19 +23,19 @@ export type Props = QueryEditorProps<
>; >;
export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, VariableQueryData> { export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, VariableQueryData> {
queryTypes: Array<{ value: string; name: string }> = [ queryTypes: Array<{ value: string; label: string }> = [
{ value: MetricFindQueryTypes.Projects, name: 'Projects' }, { value: MetricFindQueryTypes.Projects, label: 'Projects' },
{ value: MetricFindQueryTypes.Services, name: 'Services' }, { value: MetricFindQueryTypes.Services, label: 'Services' },
{ value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' }, { value: MetricFindQueryTypes.MetricTypes, label: 'Metric Types' },
{ value: MetricFindQueryTypes.LabelKeys, name: 'Label Keys' }, { value: MetricFindQueryTypes.LabelKeys, label: 'Label Keys' },
{ value: MetricFindQueryTypes.LabelValues, name: 'Label Values' }, { value: MetricFindQueryTypes.LabelValues, label: 'Label Values' },
{ value: MetricFindQueryTypes.ResourceTypes, name: 'Resource Types' }, { value: MetricFindQueryTypes.ResourceTypes, label: 'Resource Types' },
{ value: MetricFindQueryTypes.Aggregations, name: 'Aggregations' }, { value: MetricFindQueryTypes.Aggregations, label: 'Aggregations' },
{ value: MetricFindQueryTypes.Aligners, name: 'Aligners' }, { value: MetricFindQueryTypes.Aligners, label: 'Aligners' },
{ value: MetricFindQueryTypes.AlignmentPeriods, name: 'Alignment Periods' }, { value: MetricFindQueryTypes.AlignmentPeriods, label: 'Alignment Periods' },
{ value: MetricFindQueryTypes.Selectors, name: 'Selectors' }, { value: MetricFindQueryTypes.Selectors, label: 'Selectors' },
{ value: MetricFindQueryTypes.SLOServices, name: 'SLO Services' }, { value: MetricFindQueryTypes.SLOServices, label: 'SLO Services' },
{ value: MetricFindQueryTypes.SLO, name: 'Service Level Objectives (SLO)' }, { value: MetricFindQueryTypes.SLO, label: 'Service Level Objectives (SLO)' },
]; ];
defaults: VariableQueryData = { defaults: VariableQueryData = {
@@ -68,7 +70,7 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
); );
const services = extractServicesFromMetricDescriptors(metricDescriptors).map((m: any) => ({ const services = extractServicesFromMetricDescriptors(metricDescriptors).map((m: any) => ({
value: m.service, value: m.service,
name: m.serviceShortName, label: m.serviceShortName,
})); }));
let selectedService = ''; let selectedService = '';
@@ -93,9 +95,9 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
metricTypes, metricTypes,
selectedMetricType, selectedMetricType,
metricDescriptors, metricDescriptors,
projects: projects.map(({ value, label }: any) => ({ value, name: label })), projects,
...(await this.getLabels(selectedMetricType, this.state.projectName)), ...(await this.getLabels(selectedMetricType, this.state.projectName)),
sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })), sloServices,
loading: false, loading: false,
}; };
this.setState(state, () => this.onPropsChange()); this.setState(state, () => this.onPropsChange());
@@ -127,14 +129,17 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
const sloServices = await this.props.datasource.getSLOServices(projectName); const sloServices = await this.props.datasource.getSLOServices(projectName);
this.setState({ this.setState(
...labels, {
metricTypes, ...labels,
selectedMetricType, metricTypes,
metricDescriptors, selectedMetricType,
projectName, metricDescriptors,
sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })), projectName,
}); sloServices,
},
() => this.onPropsChange()
);
} }
async onServiceChange(service: string) { async onServiceChange(service: string) {
@@ -185,31 +190,33 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
return result; return result;
} }
insertTemplateVariables(options: any) {
const templateVariables = getTemplateSrv()
.getVariables()
.map((v: any) => ({
name: `$${v.name}`,
value: `$${v.name}`,
}));
return [...templateVariables, ...options];
}
renderQueryTypeSwitch(queryType: string) { renderQueryTypeSwitch(queryType: string) {
const variableOptionGroup = {
label: 'Template Variables',
expanded: false,
options: getTemplateSrv()
.getVariables()
.map((v: any) => ({
value: `$${v.name}`,
label: `$${v.name}`,
})),
};
switch (queryType) { switch (queryType) {
case MetricFindQueryTypes.MetricTypes: case MetricFindQueryTypes.MetricTypes:
return ( return (
<> <>
<SimpleSelect <VariableQueryField
allowCustomValue={true}
value={this.state.projectName} value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)} options={[variableOptionGroup, ...this.state.projects]}
onValueChange={(e) => this.onProjectChange(e.target.value)} onChange={(value) => this.onProjectChange(value)}
label="Project" label="Project"
/> />
<SimpleSelect <VariableQueryField
value={this.state.selectedService} value={this.state.selectedService}
options={this.insertTemplateVariables(this.state.services)} options={[variableOptionGroup, ...this.state.services]}
onValueChange={(e) => this.onServiceChange(e.target.value)} onChange={(value) => this.onServiceChange(value)}
label="Service" label="Service"
/> />
</> </>
@@ -219,29 +226,33 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.ResourceTypes: case MetricFindQueryTypes.ResourceTypes:
return ( return (
<> <>
<SimpleSelect <VariableQueryField
allowCustomValue={true}
value={this.state.projectName} value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)} options={[variableOptionGroup, ...this.state.projects]}
onValueChange={(e) => this.onProjectChange(e.target.value)} onChange={(value) => this.onProjectChange(value)}
label="Project" label="Project"
/> />
<SimpleSelect <VariableQueryField
value={this.state.selectedService} value={this.state.selectedService}
options={this.insertTemplateVariables(this.state.services)} options={[variableOptionGroup, ...this.state.services]}
onValueChange={(e) => this.onServiceChange(e.target.value)} onChange={(value) => this.onServiceChange(value)}
label="Service" label="Service"
/> />
<SimpleSelect <VariableQueryField
value={this.state.selectedMetricType} value={this.state.selectedMetricType}
options={this.insertTemplateVariables(this.state.metricTypes)} options={[
onValueChange={(e) => this.onMetricTypeChange(e.target.value)} variableOptionGroup,
...this.state.metricTypes.map(({ value, name }) => ({ value, label: name })),
]}
onChange={(value) => this.onMetricTypeChange(value)}
label="Metric Type" label="Metric Type"
/> />
{queryType === MetricFindQueryTypes.LabelValues && ( {queryType === MetricFindQueryTypes.LabelValues && (
<SimpleSelect <VariableQueryField
value={this.state.labelKey} value={this.state.labelKey}
options={this.insertTemplateVariables(this.state.labels.map((l) => ({ value: l, name: l })))} options={[variableOptionGroup, ...this.state.labels.map((l) => ({ value: l, label: l }))]}
onValueChange={(e) => this.onLabelKeyChange(e.target.value)} onChange={(value) => this.onLabelKeyChange(value)}
label="Label Key" label="Label Key"
/> />
)} )}
@@ -251,16 +262,19 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.Aggregations: case MetricFindQueryTypes.Aggregations:
return ( return (
<> <>
<SimpleSelect <VariableQueryField
value={this.state.selectedService} value={this.state.selectedService}
options={this.insertTemplateVariables(this.state.services)} options={[variableOptionGroup, ...this.state.services]}
onValueChange={(e) => this.onServiceChange(e.target.value)} onChange={(value) => this.onServiceChange(value)}
label="Service" label="Service"
/> />
<SimpleSelect <VariableQueryField
value={this.state.selectedMetricType} value={this.state.selectedMetricType}
options={this.insertTemplateVariables(this.state.metricTypes)} options={[
onValueChange={(e) => this.onMetricTypeChange(e.target.value)} variableOptionGroup,
...this.state.metricTypes.map(({ value, name }) => ({ value, label: name })),
]}
onChange={(value) => this.onMetricTypeChange(value)}
label="Metric Type" label="Metric Type"
/> />
</> </>
@@ -268,10 +282,11 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.SLOServices: case MetricFindQueryTypes.SLOServices:
return ( return (
<> <>
<SimpleSelect <VariableQueryField
allowCustomValue={true}
value={this.state.projectName} value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)} options={[variableOptionGroup, ...this.state.projects]}
onValueChange={(e) => this.onProjectChange(e.target.value)} onChange={(value) => this.onProjectChange(value)}
label="Project" label="Project"
/> />
</> </>
@@ -280,19 +295,20 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.SLO: case MetricFindQueryTypes.SLO:
return ( return (
<> <>
<SimpleSelect <VariableQueryField
allowCustomValue={true}
value={this.state.projectName} value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)} options={[variableOptionGroup, ...this.state.projects]}
onValueChange={(e) => this.onProjectChange(e.target.value)} onChange={(value) => this.onProjectChange(value)}
label="Project" label="Project"
/> />
<SimpleSelect <VariableQueryField
value={this.state.selectedSLOService} value={this.state.selectedSLOService}
options={this.insertTemplateVariables(this.state.sloServices)} options={[variableOptionGroup, ...this.state.sloServices]}
onValueChange={(e) => { onChange={(value) => {
this.setState({ this.setState({
...this.state, ...this.state,
selectedSLOService: e.target.value, selectedSLOService: value,
}); });
}} }}
label="SLO Service" label="SLO Service"
@@ -320,10 +336,10 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
return ( return (
<> <>
<SimpleSelect <VariableQueryField
value={this.state.selectedQueryType} value={this.state.selectedQueryType}
options={this.queryTypes} options={this.queryTypes}
onValueChange={(e) => this.onQueryTypeChange(e.target.value)} onChange={(value) => this.onQueryTypeChange(value)}
label="Query Type" label="Query Type"
/> />
{this.renderQueryTypeSwitch(this.state.selectedQueryType)} {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
public/app/plugins/datasource/cloud-monitoring/components/index.ts
+1 -2
View File
@@ -8,10 +8,9 @@ export { Alignments } from './Alignments';
export { AlignmentPeriods } from './AlignmentPeriods'; export { AlignmentPeriods } from './AlignmentPeriods';
export { AliasBy } from './AliasBy'; export { AliasBy } from './AliasBy';
export { Aggregations } from './Aggregations'; export { Aggregations } from './Aggregations';
export { SimpleSelect } from './SimpleSelect';
export { MetricQueryEditor } from './MetricQueryEditor'; export { MetricQueryEditor } from './MetricQueryEditor';
export { SLOQueryEditor } from './SLOQueryEditor'; export { SLOQueryEditor } from './SLOQueryEditor';
export { MQLQueryEditor } from './MQLQueryEditor'; export { MQLQueryEditor } from './MQLQueryEditor';
export { QueryTypeSelector } from './QueryType'; export { QueryTypeSelector } from './QueryType';
export { QueryInlineField, QueryField } from './Fields'; export { QueryInlineField, QueryField, VariableQueryField } from './Fields';
export { VisualMetricQueryEditor } from './VisualMetricQueryEditor'; export { VisualMetricQueryEditor } from './VisualMetricQueryEditor';
public/app/plugins/datasource/cloud-monitoring/functions.ts
+2 -1
View File
@@ -24,7 +24,8 @@ export const getMetricTypes = (
const metricTypeExistInArray = metricTypes.some( const metricTypeExistInArray = metricTypes.some(
(m: { value: string; name: string }) => m.value === interpolatedMetricType (m: { value: string; name: string }) => m.value === interpolatedMetricType
); );
const selectedMetricType = metricTypeExistInArray ? metricType : metricTypes[0].value; const metricTypeByService = metricTypes.length ? metricTypes[0].value : '';
const selectedMetricType = metricTypeExistInArray ? metricType : metricTypeByService;
return { return {
metricTypes, metricTypes,
selectedMetricType, selectedMetricType,
public/app/plugins/datasource/cloud-monitoring/types.ts
+6 -6
View File
@@ -1,4 +1,4 @@
import { DataQuery, DataSourceJsonData } from '@grafana/data'; import { DataQuery, DataSourceJsonData, SelectableValue } from '@grafana/data';
export enum AuthType { export enum AuthType {
JWT = 'jwt', JWT = 'jwt',
@@ -32,8 +32,8 @@ export interface CloudMonitoringVariableQuery extends DataQuery {
selectedMetricType: string; selectedMetricType: string;
selectedSLOService: string; selectedSLOService: string;
labelKey: string; labelKey: string;
projects: Array<{ value: string; name: string }>; projects: SelectableValue[];
sloServices: Array<{ value: string; name: string }>; sloServices: SelectableValue[];
projectName: string; projectName: string;
} }
@@ -46,9 +46,9 @@ export interface VariableQueryData {
labels: string[]; labels: string[];
labelKey: string; labelKey: string;
metricTypes: Array<{ value: string; name: string }>; metricTypes: Array<{ value: string; name: string }>;
services: Array<{ value: string; name: string }>; services: SelectableValue[];
projects: Array<{ value: string; name: string }>; projects: SelectableValue[];
sloServices: Array<{ value: string; name: string }>; sloServices: SelectableValue[];
projectName: string; projectName: string;
loading: boolean; loading: boolean;
} }