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

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

31
public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
View File

@@ -1,5 +1,6 @@
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> {
label: string;
@@ -26,3 +27,31 @@ export const QueryInlineField: FunctionComponent<Props> = ({ ...props }) => {
</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>
);
};

26
public/app/plugins/datasource/cloud-monitoring/components/SimpleSelect.tsx
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>
);
};

162
public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
View File

@@ -1,5 +1,9 @@
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 {
CloudMonitoringOptions,
@@ -10,8 +14,6 @@ import {
VariableQueryData,
} from '../types';
import CloudMonitoringDatasource from '../datasource';
import { getTemplateSrv } from '@grafana/runtime';
import { QueryEditorProps } from '@grafana/data';
export type Props = QueryEditorProps<
CloudMonitoringDatasource,
@@ -21,19 +23,19 @@ export type Props = QueryEditorProps<
>;
export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, VariableQueryData> {
queryTypes: Array<{ value: string; name: string }> = [
{ value: MetricFindQueryTypes.Projects, name: 'Projects' },
{ value: MetricFindQueryTypes.Services, name: 'Services' },
{ value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' },
{ value: MetricFindQueryTypes.LabelKeys, name: 'Label Keys' },
{ value: MetricFindQueryTypes.LabelValues, name: 'Label Values' },
{ value: MetricFindQueryTypes.ResourceTypes, name: 'Resource Types' },
{ value: MetricFindQueryTypes.Aggregations, name: 'Aggregations' },
{ value: MetricFindQueryTypes.Aligners, name: 'Aligners' },
{ value: MetricFindQueryTypes.AlignmentPeriods, name: 'Alignment Periods' },
{ value: MetricFindQueryTypes.Selectors, name: 'Selectors' },
{ value: MetricFindQueryTypes.SLOServices, name: 'SLO Services' },
{ value: MetricFindQueryTypes.SLO, name: 'Service Level Objectives (SLO)' },
queryTypes: Array<{ value: string; label: string }> = [
{ value: MetricFindQueryTypes.Projects, label: 'Projects' },
{ value: MetricFindQueryTypes.Services, label: 'Services' },
{ value: MetricFindQueryTypes.MetricTypes, label: 'Metric Types' },
{ value: MetricFindQueryTypes.LabelKeys, label: 'Label Keys' },
{ value: MetricFindQueryTypes.LabelValues, label: 'Label Values' },
{ value: MetricFindQueryTypes.ResourceTypes, label: 'Resource Types' },
{ value: MetricFindQueryTypes.Aggregations, label: 'Aggregations' },
{ value: MetricFindQueryTypes.Aligners, label: 'Aligners' },
{ value: MetricFindQueryTypes.AlignmentPeriods, label: 'Alignment Periods' },
{ value: MetricFindQueryTypes.Selectors, label: 'Selectors' },
{ value: MetricFindQueryTypes.SLOServices, label: 'SLO Services' },
{ value: MetricFindQueryTypes.SLO, label: 'Service Level Objectives (SLO)' },
];
defaults: VariableQueryData = {
@@ -68,7 +70,7 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
);
const services = extractServicesFromMetricDescriptors(metricDescriptors).map((m: any) => ({
value: m.service,
name: m.serviceShortName,
label: m.serviceShortName,
}));
let selectedService = '';
@@ -93,9 +95,9 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
metricTypes,
selectedMetricType,
metricDescriptors,
projects: projects.map(({ value, label }: any) => ({ value, name: label })),
projects,
...(await this.getLabels(selectedMetricType, this.state.projectName)),
sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })),
sloServices,
loading: false,
};
this.setState(state, () => this.onPropsChange());
@@ -127,14 +129,17 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
const sloServices = await this.props.datasource.getSLOServices(projectName);
this.setState({
...labels,
metricTypes,
selectedMetricType,
metricDescriptors,
projectName,
sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })),
});
this.setState(
{
...labels,
metricTypes,
selectedMetricType,
metricDescriptors,
projectName,
sloServices,
},
() => this.onPropsChange()
);
}
async onServiceChange(service: string) {
@@ -185,31 +190,33 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
return result;
}
insertTemplateVariables(options: any) {
const templateVariables = getTemplateSrv()
.getVariables()
.map((v: any) => ({
name: `$${v.name}`,
value: `$${v.name}`,
}));
return [...templateVariables, ...options];
}
renderQueryTypeSwitch(queryType: string) {
const variableOptionGroup = {
label: 'Template Variables',
expanded: false,
options: getTemplateSrv()
.getVariables()
.map((v: any) => ({
value: `$${v.name}`,
label: `$${v.name}`,
})),
};
switch (queryType) {
case MetricFindQueryTypes.MetricTypes:
return (
<>
<SimpleSelect
<VariableQueryField
allowCustomValue={true}
value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)}
onValueChange={(e) => this.onProjectChange(e.target.value)}
options={[variableOptionGroup, ...this.state.projects]}
onChange={(value) => this.onProjectChange(value)}
label="Project"
/>
<SimpleSelect
<VariableQueryField
value={this.state.selectedService}
options={this.insertTemplateVariables(this.state.services)}
onValueChange={(e) => this.onServiceChange(e.target.value)}
options={[variableOptionGroup, ...this.state.services]}
onChange={(value) => this.onServiceChange(value)}
label="Service"
/>
</>
@@ -219,29 +226,33 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.ResourceTypes:
return (
<>
<SimpleSelect
<VariableQueryField
allowCustomValue={true}
value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)}
onValueChange={(e) => this.onProjectChange(e.target.value)}
options={[variableOptionGroup, ...this.state.projects]}
onChange={(value) => this.onProjectChange(value)}
label="Project"
/>
<SimpleSelect
<VariableQueryField
value={this.state.selectedService}
options={this.insertTemplateVariables(this.state.services)}
onValueChange={(e) => this.onServiceChange(e.target.value)}
options={[variableOptionGroup, ...this.state.services]}
onChange={(value) => this.onServiceChange(value)}
label="Service"
/>
<SimpleSelect
<VariableQueryField
value={this.state.selectedMetricType}
options={this.insertTemplateVariables(this.state.metricTypes)}
onValueChange={(e) => this.onMetricTypeChange(e.target.value)}
options={[
variableOptionGroup,
...this.state.metricTypes.map(({ value, name }) => ({ value, label: name })),
]}
onChange={(value) => this.onMetricTypeChange(value)}
label="Metric Type"
/>
{queryType === MetricFindQueryTypes.LabelValues && (
<SimpleSelect
<VariableQueryField
value={this.state.labelKey}
options={this.insertTemplateVariables(this.state.labels.map((l) => ({ value: l, name: l })))}
onValueChange={(e) => this.onLabelKeyChange(e.target.value)}
options={[variableOptionGroup, ...this.state.labels.map((l) => ({ value: l, label: l }))]}
onChange={(value) => this.onLabelKeyChange(value)}
label="Label Key"
/>
)}
@@ -251,16 +262,19 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.Aggregations:
return (
<>
<SimpleSelect
<VariableQueryField
value={this.state.selectedService}
options={this.insertTemplateVariables(this.state.services)}
onValueChange={(e) => this.onServiceChange(e.target.value)}
options={[variableOptionGroup, ...this.state.services]}
onChange={(value) => this.onServiceChange(value)}
label="Service"
/>
<SimpleSelect
<VariableQueryField
value={this.state.selectedMetricType}
options={this.insertTemplateVariables(this.state.metricTypes)}
onValueChange={(e) => this.onMetricTypeChange(e.target.value)}
options={[
variableOptionGroup,
...this.state.metricTypes.map(({ value, name }) => ({ value, label: name })),
]}
onChange={(value) => this.onMetricTypeChange(value)}
label="Metric Type"
/>
</>
@@ -268,10 +282,11 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.SLOServices:
return (
<>
<SimpleSelect
<VariableQueryField
allowCustomValue={true}
value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)}
onValueChange={(e) => this.onProjectChange(e.target.value)}
options={[variableOptionGroup, ...this.state.projects]}
onChange={(value) => this.onProjectChange(value)}
label="Project"
/>
</>
@@ -280,19 +295,20 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
case MetricFindQueryTypes.SLO:
return (
<>
<SimpleSelect
<VariableQueryField
allowCustomValue={true}
value={this.state.projectName}
options={this.insertTemplateVariables(this.state.projects)}
onValueChange={(e) => this.onProjectChange(e.target.value)}
options={[variableOptionGroup, ...this.state.projects]}
onChange={(value) => this.onProjectChange(value)}
label="Project"
/>
<SimpleSelect
<VariableQueryField
value={this.state.selectedSLOService}
options={this.insertTemplateVariables(this.state.sloServices)}
onValueChange={(e) => {
options={[variableOptionGroup, ...this.state.sloServices]}
onChange={(value) => {
this.setState({
...this.state,
selectedSLOService: e.target.value,
selectedSLOService: value,
});
}}
label="SLO Service"
@@ -320,10 +336,10 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
return (
<>
<SimpleSelect
<VariableQueryField
value={this.state.selectedQueryType}
options={this.queryTypes}
onValueChange={(e) => this.onQueryTypeChange(e.target.value)}
onChange={(value) => this.onQueryTypeChange(value)}
label="Query Type"
/>
{this.renderQueryTypeSwitch(this.state.selectedQueryType)}

3
public/app/plugins/datasource/cloud-monitoring/components/index.ts
View File

@@ -8,10 +8,9 @@ export { Alignments } from './Alignments';
export { AlignmentPeriods } from './AlignmentPeriods';
export { AliasBy } from './AliasBy';
export { Aggregations } from './Aggregations';
export { SimpleSelect } from './SimpleSelect';
export { MetricQueryEditor } from './MetricQueryEditor';
export { SLOQueryEditor } from './SLOQueryEditor';
export { MQLQueryEditor } from './MQLQueryEditor';
export { QueryTypeSelector } from './QueryType';
export { QueryInlineField, QueryField } from './Fields';
export { QueryInlineField, QueryField, VariableQueryField } from './Fields';
export { VisualMetricQueryEditor } from './VisualMetricQueryEditor';

3
public/app/plugins/datasource/cloud-monitoring/functions.ts
View File

@@ -24,7 +24,8 @@ export const getMetricTypes = (
const metricTypeExistInArray = metricTypes.some(
(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 {
metricTypes,
selectedMetricType,

12
public/app/plugins/datasource/cloud-monitoring/types.ts
View File

@@ -1,4 +1,4 @@
import { DataQuery, DataSourceJsonData } from '@grafana/data';
import { DataQuery, DataSourceJsonData, SelectableValue } from '@grafana/data';
export enum AuthType {
JWT = 'jwt',
@@ -32,8 +32,8 @@ export interface CloudMonitoringVariableQuery extends DataQuery {
selectedMetricType: string;
selectedSLOService: string;
labelKey: string;
projects: Array<{ value: string; name: string }>;
sloServices: Array<{ value: string; name: string }>;
projects: SelectableValue[];
sloServices: SelectableValue[];
projectName: string;
}
@@ -46,9 +46,9 @@ export interface VariableQueryData {
labels: string[];
labelKey: string;
metricTypes: Array<{ value: string; name: string }>;
services: Array<{ value: string; name: string }>;
projects: Array<{ value: string; name: string }>;
sloServices: Array<{ value: string; name: string }>;
services: SelectableValue[];
projects: SelectableValue[];
sloServices: SelectableValue[];
projectName: string;
loading: boolean;
}