IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 00:25:46 -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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/angular_wrappers.ts
View File

@ -1,4 +1,5 @@
import { react2AngularDirective } from 'app/core/utils/react2angular';
import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
import { PasswordStrength } from './components/PasswordStrength';
import PageHeader from './components/PageHeader/PageHeader';
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@ -29,4 +30,11 @@ export function registerAngularDirectives() {
'placeholder',
['variables', { watchDepth: 'reference' }],
]);
react2AngularDirective('queryEditor', QueryEditor, [
'target',
'onQueryChange',
'onExecuteQuery',
['events', { watchDepth: 'reference' }],
['datasource', { watchDepth: 'reference' }],
]);
}

4
public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts
View File

@ -7,7 +7,7 @@ export class StackdriverAnnotationsQueryCtrl {
constructor() {
this.annotation.target = this.annotation.target || {};
this.handleQueryChange = this.handleQueryChange.bind(this);
this.onQueryChange = this.onQueryChange.bind(this);
react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
'target',
@ -17,7 +17,7 @@ export class StackdriverAnnotationsQueryCtrl {
]);
}
handleQueryChange(target) {
onQueryChange(target) {
Object.assign(this.annotation.target, target);
}
}

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)}

2
public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
View File

@ -1,5 +1,5 @@
<annotation-query-editor
target="ctrl.annotation.target"
on-query-change="(ctrl.handleQueryChange)"
on-query-change="(ctrl.onQueryChange)"
datasource="ctrl.datasource"
></annotation-query-editor>

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

@ -3,7 +3,7 @@
target="ctrl.target"
events="ctrl.panelCtrl.events"
datasource="ctrl.datasource"
on-query-change="(ctrl.handleQueryChange)"
on-execute-query="(ctrl.handleExecuteQuery)"
on-query-change="(ctrl.onQueryChange)"
on-execute-query="(ctrl.onExecuteQuery)"
></query-editor>
</query-editor-row>
</query-editor-row>

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

@ -1,9 +1,6 @@
import _ from 'lodash';
import { QueryCtrl } from 'app/plugins/sdk';
import { react2AngularDirective } from 'app/core/utils/react2angular';
import { QueryEditor } from './components/QueryEditor';
import { Target } from './types';
export class StackdriverQueryCtrl extends QueryCtrl {
@ -12,22 +9,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
/** @ngInject */
constructor($scope, $injector) {
super($scope, $injector);
this.handleQueryChange = this.handleQueryChange.bind(this);
this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
react2AngularDirective('queryEditor', QueryEditor, [
'target',
'onQueryChange',
'onExecuteQuery',
['events', { watchDepth: 'reference' }],
['datasource', { watchDepth: 'reference' }],
]);
this.onQueryChange = this.onQueryChange.bind(this);
this.onExecuteQuery = this.onExecuteQuery.bind(this);
}
handleQueryChange(target: Target) {
onQueryChange(target: Target) {
Object.assign(this.target, target);
}
handleExecuteQuery() {
onExecuteQuery() {
this.$scope.ctrl.refresh();
}
}