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

use correct event handler name convention. register directive on startup

Browse Source
This commit is contained in:
Erik Sundell
2019-01-08 13:37:08 +01:00
parent f9f51d6819
commit dc7f98de6a
12 changed files with 53 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
View File

@@ -52,7 +52,7 @@ export class Aggregations extends React.Component<Props, State> {
this.setState({ aggOptions });
}
handleToggleDisplayAdvanced() {
onToggleDisplayAdvanced() {
this.setState(state => ({
displayAdvancedOptions: !state.displayAdvancedOptions,
}));
@@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> {
</div>
<div className="gf-form gf-form--grow">
<label className="gf-form-label gf-form-label--grow">
<a onClick={() => this.handleToggleDisplayAdvanced()}>
<a onClick={() => this.onToggleDisplayAdvanced()}>
<>
<i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
</>

15
public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
View File

@@ -13,8 +13,7 @@ export interface State {
export class AliasBy extends Component<Props, State> {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.onChange = debounce(this.onChange.bind(this), 500);
this.updateQuery = debounce(this.updateQuery.bind(this), 500);
this.state = { value: '' };
}
@@ -28,18 +27,18 @@ export class AliasBy extends Component<Props, State> {
}
}
handleChange(e) {
onChange(e) {
this.setState({ value: e.target.value });
this.onChange(e.target.value);
this.updateQuery(e.target.value);
}
onChange(value) {
updateQuery(value) {
this.props.onChange(value);
}
render() {
return (
<>
<React.Fragment>
<div className="gf-form-inline">
<div className="gf-form">
<label className="gf-form-label query-keyword width-9">Alias By</label>
@@ -47,14 +46,14 @@ export class AliasBy extends Component<Props, State> {
type="text"
className="gf-form-input width-24"
value={this.state.value}
onChange={this.handleChange}
onChange={e => this.onChange(e)}
/>
</div>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
</div>
</>
</React.Fragment>
);
}
}

12
public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
View File

@@ -36,7 +36,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
});
}
handleMetricTypeChange({ valueType, metricKind, type, unit }) {
onMetricTypeChange({ valueType, metricKind, type, unit }) {
const { onQueryChange } = this.props;
this.setState(
{
@@ -51,7 +51,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
);
}
handleChange(prop, value) {
onChange(prop, value) {
this.setState({ [prop]: value }, () => {
this.props.onQueryChange(this.state);
});
@@ -68,12 +68,12 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
metricType={metricType}
templateSrv={datasource.templateSrv}
datasource={datasource}
onChange={value => this.handleMetricTypeChange(value)}
onChange={value => this.onMetricTypeChange(value)}
>
{metric => (
<>
<Filter
filtersChanged={value => this.handleChange('filters', value)}
filtersChanged={value => this.onChange('filters', value)}
filters={filters}
refId={refId}
hideGroupBys={true}
@@ -91,7 +91,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
type="text"
className="gf-form-input width-20"
value={title}
onChange={e => this.handleChange('title', e.target.value)}
onChange={e => this.onChange('title', e.target.value)}
/>
</div>
<div className="gf-form">
@@ -100,7 +100,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
type="text"
className="gf-form-input width-20"
value={text}
onChange={e => this.handleChange('text', e.target.value)}
onChange={e => this.onChange('text', e.target.value)}
/>
</div>
<div className="gf-form gf-form--grow">

8
public/app/plugins/datasource/stackdriver/components/Help.tsx
View File

@@ -18,11 +18,11 @@ export class Help extends React.Component<Props, State> {
displaRawQuery: false,
};
handleHelpClicked() {
onHelpClicked() {
this.setState({ displayHelp: !this.state.displayHelp });
}
handleRawQueryClicked() {
onRawQueryClicked() {
this.setState({ displaRawQuery: !this.state.displaRawQuery });
}
@@ -38,7 +38,7 @@ export class Help extends React.Component<Props, State> {
<>
<div className="gf-form-inline">
<Project datasource={datasource} />
<div className="gf-form" onClick={() => this.handleHelpClicked()}>
<div className="gf-form" onClick={() => this.onHelpClicked()}>
<label className="gf-form-label query-keyword">
Show Help
<i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
@@ -46,7 +46,7 @@ export class Help extends React.Component<Props, State> {
</div>
{rawQuery && (
<div className="gf-form" onClick={() => this.handleRawQueryClicked()}>
<div className="gf-form" onClick={() => this.onRawQueryClicked()}>
<label className="gf-form-label query-keyword">
Raw Query
<i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />

10
public/app/plugins/datasource/stackdriver/components/Metrics.tsx
View File

@@ -98,7 +98,7 @@ export class Metrics extends React.Component<Props, State> {
return metricsByService;
}
handleServiceChange(service) {
onServiceChange(service) {
const { metricDescriptors } = this.state;
const { templateSrv, metricType } = this.props;
@@ -112,11 +112,11 @@ export class Metrics extends React.Component<Props, State> {
this.setState({ service, metrics });
if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
this.handleMetricTypeChange(metrics[0].value);
this.onMetricTypeChange(metrics[0].value);
}
}
handleMetricTypeChange(value) {
onMetricTypeChange(value) {
const metricDescriptor = this.getSelectedMetricDescriptor(value);
this.setState({ metricDescriptor });
this.props.onChange({ ...metricDescriptor, type: value });
@@ -151,7 +151,7 @@ export class Metrics extends React.Component<Props, State> {
<div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Service</span>
<MetricSelect
onChange={value => this.handleServiceChange(value)}
onChange={value => this.onServiceChange(value)}
value={service}
options={services}
isSearchable={false}
@@ -167,7 +167,7 @@ export class Metrics extends React.Component<Props, State> {
<div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Metric</span>
<MetricSelect
onChange={value => this.handleMetricTypeChange(value)}
onChange={value => this.onMetricTypeChange(value)}
value={metricType}
variables={templateSrv.variables}
options={[

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

@@ -91,7 +91,7 @@ export class QueryEditor extends React.Component<Props, State> {
this.setState({ lastQuery, lastQueryError });
}
handleMetricTypeChange({ valueType, metricKind, type, unit }) {
onMetricTypeChange({ valueType, metricKind, type, unit }) {
const { datasource, onQueryChange, onExecuteQuery } = this.props;
const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
{ valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@@ -113,7 +113,7 @@ export class QueryEditor extends React.Component<Props, State> {
);
}
handleChange(prop, value) {
onPropertyChange(prop, value) {
this.setState({ [prop]: value }, () => {
this.props.onQueryChange(this.state);
this.props.onExecuteQuery();
@@ -144,13 +144,13 @@ export class QueryEditor extends React.Component<Props, State> {
metricType={metricType}
templateSrv={datasource.templateSrv}
datasource={datasource}
onChange={value => this.handleMetricTypeChange(value)}
onChange={value => this.onMetricTypeChange(value)}
>
{metric => (
<>
<Filter
filtersChanged={value => this.handleChange('filters', value)}
groupBysChanged={value => this.handleChange('groupBys', value)}
filtersChanged={value => this.onPropertyChange('filters', value)}
groupBysChanged={value => this.onPropertyChange('groupBys', value)}
filters={filters}
groupBys={groupBys}
refId={refId}
@@ -164,7 +164,7 @@ export class QueryEditor extends React.Component<Props, State> {
templateSrv={datasource.templateSrv}
crossSeriesReducer={crossSeriesReducer}
groupBys={groupBys}
onChange={value => this.handleChange('crossSeriesReducer', value)}
onChange={value => this.onPropertyChange('crossSeriesReducer', value)}
>
{displayAdvancedOptions =>
displayAdvancedOptions && (
@@ -172,16 +172,16 @@ export class QueryEditor extends React.Component<Props, State> {
alignOptions={alignOptions}
templateSrv={datasource.templateSrv}
perSeriesAligner={perSeriesAligner}
onChange={value => this.handleChange('perSeriesAligner', value)}
onChange={value => this.onPropertyChange('perSeriesAligner', value)}
/>
)
}
</Aggregations>
<AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
<AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
<AlignmentPeriods
templateSrv={datasource.templateSrv}
alignmentPeriod={alignmentPeriod}
onChange={value => this.handleChange('alignmentPeriod', value)}
onChange={value => this.onPropertyChange('alignmentPeriod', value)}
/>
<Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
</>

4
public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
View File

@@ -63,7 +63,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
this.setState(state);
}
async handleQueryTypeChange(event) {
async onQueryTypeChange(event) {
const state: any = {
selectedQueryType: event.target.value,
...await this.getLabels(this.state.selectedMetricType, event.target.value),
@@ -186,7 +186,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
<SimpleSelect
value={this.state.selectedQueryType}
options={this.queryTypes}
onValueChange={e => this.handleQueryTypeChange(e)}
onValueChange={e => this.onQueryTypeChange(e)}
label="Query Type"
/>
{this.renderQueryTypeSwitch(this.state.selectedQueryType)}