IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

use new generic picker

Browse Source
This commit is contained in:
Erik Sundell 2018-12-18 11:25:13 +01:00
parent 47b3901e7d
commit 8430c5a491
6 changed files with 66 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx
View File

@ -1,52 +0,0 @@
import React from 'react';
import Select from 'react-select';
import _ from 'lodash';
import GroupHeading from 'app/core/components/Picker/GroupHeading';
import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
import ResetStyles from 'app/core/components/Picker/ResetStyles';
import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
export interface Props {
onChange: (value: string) => void;
groups: any[];
searchable: boolean;
selected: string;
placeholder?: string;
className?: string;
}
export class OptionGroupPicker extends React.Component<Props, any> {
constructor(props) {
super(props);
}
render() {
const { onChange, groups, selected, placeholder, className, searchable } = this.props;
const options = _.flatten(groups.map(o => o.options));
const selectedOption = options.find(option => option.value === selected);
return (
<Select
placeholder={placeholder}
classNamePrefix={`gf-form-select-box`}
className={className}
options={groups}
components={{
GroupHeading,
Option: DescriptionOption,
IndicatorsContainer,
NoOptionsMessage,
}}
styles={ResetStyles}
isSearchable={searchable}
onChange={option => onChange(option.value)}
getOptionValue={i => i.value}
getOptionLabel={i => i.label}
value={selectedOption}
noOptionsMessage={() => 'No metrics found'}
/>
);
}
}

50
public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx
View File

@ -1,50 +0,0 @@
import React from 'react';
import Select from 'react-select';
import _ from 'lodash';
import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
import ResetStyles from 'app/core/components/Picker/ResetStyles';
import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
export interface Props {
onChange: (value: string) => void;
options: any[];
searchable: boolean;
selected: string;
placeholder?: string;
className?: string;
groups?: boolean;
}
export class OptionPicker extends React.Component<Props, any> {
constructor(props) {
super(props);
}
render() {
const { onChange, options, selected, placeholder, className, searchable } = this.props;
const selectedOption = options.find(option => option.value === selected);
return (
<Select
placeholder={placeholder}
classNamePrefix={`gf-form-select-box`}
className={className}
options={options}
components={{
Option: DescriptionOption,
IndicatorsContainer,
NoOptionsMessage,
}}
styles={ResetStyles}
isSearchable={searchable}
onChange={option => onChange(option.value)}
getOptionValue={i => i.value}
getOptionLabel={i => i.label}
value={selectedOption}
noOptionsMessage={() => 'No metrics found'}
/>
);
}
}

53
public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import _ from 'lodash';
import Select from 'app/core/components/Select/Select';
export interface Props {
onChange: (value: string) => void;
options: any[];
searchable: boolean;
selected: string;
placeholder?: string;
className?: string;
groups?: boolean;
}
export class StackdriverPicker extends React.Component<Props, any> {
constructor(props) {
super(props);
}
extractOptions(options) {
return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
}
onChange = item => {
const extractedOptions = this.extractOptions(this.props.options);
const option = extractedOptions.find(option => option.value === item.value);
this.props.onChange(option.value);
};
render() {
const { options, selected, placeholder, className, searchable } = this.props;
const extractedOptions = this.extractOptions(options);
const selectedOption = extractedOptions.find(option => option.value === selected);
return (
<Select
className={className}
isMulti={false}
isClearable={false}
backspaceRemovesValue={false}
onChange={this.onChange}
options={options}
autoFocus={false}
isSearchable={searchable}
openMenuOnFocus={true}
maxMenuHeight={500}
placeholder={placeholder}
noOptionsMessage={() => 'No options found'}
value={selectedOption}
/>
);
}
}

16
public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
View File

@ -2,10 +2,10 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Aggregation</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<option-group-picker
<option-picker
onChange="ctrl.handleAggregationChange"
selected="ctrl.target.aggregation.crossSeriesReducer"
groups="ctrl.aggOptions"
options="ctrl.aggOptions"
searchable="true"
placeholder="'Select Aggregation'"
className="'width-15'"
@ -25,14 +25,14 @@
<div class="gf-form offset-width-9">
<label class="gf-form-label query-keyword width-12">Aligner</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<option-group-picker
<option-picker
onChange="ctrl.handleAlignmentChange"
selected="ctrl.target.aggregation.perSeriesAligner"
groups="ctrl.alignOptions"
options="ctrl.alignOptions"
searchable="true"
placeholder="'Select Alignment'"
className="'width-15'"
></option-group-picker>
></option-picker>
</div>
<div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@ -42,14 +42,14 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Alignment Period</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<option-group-picker
<option-picker
onChange="ctrl.handleAlignmentPeriodChange"
selected="ctrl.target.aggregation.alignmentPeriod"
groups="ctrl.alignmentPeriods"
options="ctrl.alignmentPeriods"
searchable="true"
placeholder="'Select Alignment'"
className="'width-15'"
></option-group-picker>
></option-picker>
</div>
</div>

6
public/app/plugins/datasource/stackdriver/partials/query.filter.html
View File

@ -15,14 +15,14 @@
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9 query-keyword">Metric</span>
<option-group-picker
<option-picker
onChange="ctrl.handleMetricTypeChange"
selected="ctrl.target.metricType"
groups="ctrl.getMetricGroups()"
options="ctrl.getMetricGroups()"
searchable="true"
placeholder="'Select Metric'"
className="'width-15'"
></option-group-picker>
></option-picker>
</div>
<div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
</div>

13
public/app/plugins/datasource/stackdriver/query_ctrl.ts
View File

@ -2,8 +2,7 @@ import _ from 'lodash';
import { QueryCtrl } from 'app/plugins/sdk';
import './query_aggregation_ctrl';
import './query_filter_ctrl';
import { OptionPicker } from './components/OptionPicker';
import { OptionGroupPicker } from './components/OptionGroupPicker';
import { StackdriverPicker } from './components/StackdriverPicker';
import { react2AngularDirective } from 'app/core/utils/react2angular';
export interface QueryMeta {
@ -64,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
_.defaultsDeep(this.target, this.defaults);
this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
react2AngularDirective('optionPicker', OptionPicker, [
react2AngularDirective('optionPicker', StackdriverPicker, [
'options',
'onChange',
'selected',
@ -72,14 +71,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
'className',
'placeholder',
]);
react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
'groups',
'onChange',
'selected',
'searchable',
'className',
'placeholder',
]);
}
onDataReceived(dataList) {